Revert "[Dashboard] Actor Table UI Optimize (ray-project#15802)"

This reverts commit 43be599.
alipay · May 21, 2021 · e542899 · e542899
1 parent f080911
commit e542899
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 104 deletions.
diff --git a/dashboard/client/package.json b/dashboard/client/package.json
@@ -21,7 +21,6 @@
     "@types/react-window": "^1.8.2",
     "axios": "^0.21.1",
     "classnames": "^2.2.6",
-    "copy-to-clipboard": "^3.3.1",
     "dayjs": "^1.9.4",
     "lodash": "^4.17.20",
     "lowlight": "^1.14.0",
@@ -48,8 +47,8 @@
     "eject": "react-scripts eject",
     "lint": "npm run eslint && npm run prettier",
     "lint-fix": "npm run prettier -- --write && npm run eslint -- --fix",
-    "prettier": "./node_modules/.bin/prettier -c src/",
-    "eslint": "./node_modules/.bin/eslint \"src/**\""
+    "prettier": "prettier -c src",
+    "eslint": "eslint \"src/**\""
   },
   "eslintConfig": {
     "ignorePatterns": [

diff --git a/dashboard/client/src/components/ActorTable.tsx b/dashboard/client/src/components/ActorTable.tsx
@@ -17,8 +17,8 @@ import { Link } from "react-router-dom";
 import { GlobalContext } from "../App";
 import { Actor } from "../type/actor";
 import { Worker } from "../type/worker";
+import { longTextCut } from "../util/func";
 import { useFilter } from "../util/hook";
-import CopyableCollapse from "./CopyableCollapse";
 import StateCounter from "./StatesCounter";
 import { StatusChip } from "./StatusChip";
 import RayletWorkerTable, { ExpandableTableRow } from "./WorkerTable";
@@ -34,7 +34,16 @@ const ActorTable = ({
   const { changeFilter, filterFunc } = useFilter();
   const [pageSize, setPageSize] = useState(10);
   const { ipLogMap } = useContext(GlobalContext);
-  const actorList = Object.values(actors || {}).filter(filterFunc);
+  const actorList = Object.values(actors || {})
+    .map((e) => ({
+      ...e,
+      functionDesc: Object.values(
+        e.taskSpec?.functionDescriptor?.javaFunctionDescriptor ||
+          e.taskSpec?.functionDescriptor?.pythonFunctionDescriptor ||
+          {},
+      ).join(" "),
+    }))
+    .filter(filterFunc);
   const list = actorList.slice((pageNo - 1) * pageSize, pageNo * pageSize);
 
   return (
@@ -79,6 +88,21 @@ const ActorTable = ({
             ),
           }}
         />
+        <TextField
+          style={{ margin: 8, width: 200 }}
+          label="Task Func Desc"
+          size="small"
+          InputProps={{
+            onChange: ({ target: { value } }) => {
+              changeFilter("functionDesc", value.trim());
+            },
+            endAdornment: (
+              <InputAdornment position="end">
+                <SearchOutlined />
+              </InputAdornment>
+            ),
+          }}
+        />
         <TextField
           style={{ margin: 8, width: 120 }}
           label="Name"
@@ -113,14 +137,10 @@ const ActorTable = ({
           style={{ margin: 8, width: 120 }}
           label="Page Size"
           size="small"
-          defaultValue={10}
           InputProps={{
             onChange: ({ target: { value } }) => {
               setPageSize(Math.min(Number(value), 500) || 10);
             },
-            endAdornment: (
-              <InputAdornment position="end">Per Page</InputAdornment>
-            ),
           }}
         />
       </div>
@@ -141,11 +161,9 @@ const ActorTable = ({
           <TableRow>
             {[
               "",
-              "ID",
-              "Restart Times",
+              "ID(Num Restarts)",
               "Name",
-              "Class",
-              "Function",
+              "Task Func Desc",
               "Job Id",
               "Pid",
               "IP",
@@ -163,7 +181,7 @@ const ActorTable = ({
           {list.map(
             ({
               actorId,
-              functionDescriptor,
+              functionDesc,
               jobId,
               pid,
               address,
@@ -192,25 +210,17 @@ const ActorTable = ({
                 }
                 key={actorId}
               >
-                <TableCell align="center">
-                  <CopyableCollapse text={actorId} />
-                </TableCell>
                 <TableCell
                   align="center"
                   style={{
                     color: Number(numRestarts) > 0 ? orange[500] : "inherit",
                   }}
                 >
-                  {numRestarts}
+                  {actorId}({numRestarts})
                 </TableCell>
                 <TableCell align="center">{name}</TableCell>
                 <TableCell align="center">
-                  {functionDescriptor?.javaFunctionDescriptor?.className}
-                  {functionDescriptor?.pythonFunctionDescriptor?.className}
-                </TableCell>
-                <TableCell align="center">
-                  {functionDescriptor?.javaFunctionDescriptor?.functionName}
-                  {functionDescriptor?.pythonFunctionDescriptor?.functionName}
+                  {longTextCut(functionDesc, 60)}
                 </TableCell>
                 <TableCell align="center">{jobId}</TableCell>
                 <TableCell align="center">{pid}</TableCell>

diff --git a/dashboard/client/src/components/CopyableCollapse.tsx b/dashboard/client/src/components/CopyableCollapse.tsx
diff --git a/dashboard/client/src/pages/actor/index.tsx b/dashboard/client/src/pages/actor/index.tsx
@@ -1,5 +1,4 @@
-import { Grid, makeStyles, Switch } from "@material-ui/core";
-import dayjs from "dayjs";
+import { makeStyles } from "@material-ui/core";
 import React, { useEffect, useState } from "react";
 import ActorTable from "../../components/ActorTable";
 import TitleCard from "../../components/TitleCard";
@@ -15,48 +14,19 @@ const useStyles = makeStyles((theme) => ({
 
 const Actors = () => {
   const classes = useStyles();
-  const [autoRefresh, setAutoRefresh] = useState(true);
   const [actors, setActors] = useState<{ [actorId: string]: Actor }>({});
-  const [timeStamp, setTimeStamp] = useState(dayjs());
-  const queryActor = () =>
+
+  useEffect(() => {
     getActors().then((res) => {
       if (res?.data?.data?.actors) {
         setActors(res.data.data.actors);
       }
     });
-
-  useEffect(() => {
-    let tmo: NodeJS.Timeout;
-    const refreshActor = () => {
-      const nowTime = dayjs();
-      queryActor().then(() => {
-        setTimeStamp(nowTime);
-        if (autoRefresh) {
-          tmo = setTimeout(refreshActor, 4000);
-        }
-      });
-    };
-
-    refreshActor();
-
-    return () => {
-      clearTimeout(tmo);
-    };
-  }, [autoRefresh]);
+  }, []);
 
   return (
     <div className={classes.root}>
       <TitleCard title="ACTORS">
-        <Grid container alignItems="center">
-          <Grid item>
-            Auto Refresh:{" "}
-            <Switch
-              checked={autoRefresh}
-              onChange={({ target: { checked } }) => setAutoRefresh(checked)}
-            />
-          </Grid>
-          <Grid item>{timeStamp.format("YYYY-MM-DD HH:mm:ss")}</Grid>
-        </Grid>
         <ActorTable actors={actors} />
       </TitleCard>
     </div>

diff --git a/dashboard/client/src/type/actor.ts b/dashboard/client/src/type/actor.ts
@@ -36,6 +36,18 @@ export type TaskSpec = {
     workerId: string;
   };
   callerId: string;
+  functionDescriptor: {
+    javaFunctionDescriptor: {
+      className: string;
+      functionName: string;
+      signature: string;
+    };
+    pythonFunctionDescriptor: {
+      className: string;
+      functionName: string;
+      signature: string;
+    };
+  };
   jobId: string;
   language: string;
   maxRetries: number;
@@ -79,16 +91,4 @@ export type Actor = {
   isDetached: false;
   name: string;
   numRestarts: string;
-  functionDescriptor: {
-    javaFunctionDescriptor: {
-      className: string;
-      functionName: string;
-      signature: string;
-    };
-    pythonFunctionDescriptor: {
-      className: string;
-      functionName: string;
-      signature: string;
-    };
-  };
 };