From d1d5fe61c2a5e515517c01de2878ca44d93562fc Mon Sep 17 00:00:00 2001
From: Guyang Song <guyang.sgy@antfin.com>
Date: Tue, 21 Jun 2022 14:09:48 +0800
Subject: [PATCH] [Dashboard][Frontend] Worker table enhancement (#25934)

---
 dashboard/client/src/App.tsx                  |  8 ++-
 .../client/src/components/WorkerTable.tsx     | 58 ++++++++++++++-----
 dashboard/client/src/type/worker.d.ts         |  5 ++
 3 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/dashboard/client/src/App.tsx b/dashboard/client/src/App.tsx
index 38b0cfe47..0e36807b8 100644
--- a/dashboard/client/src/App.tsx
+++ b/dashboard/client/src/App.tsx
@@ -28,6 +28,7 @@ const RAY_DASHBOARD_THEME_KEY = "ray-dashboard-theme";
 // a global map for relations
 export const GlobalContext = React.createContext({
   nodeMap: {} as { [key: string]: string },
+  nodeMapByIp: {} as { [key: string]: string },
   ipLogMap: {} as { [key: string]: string },
   namespaceMap: {} as { [key: string]: string[] },
 });
@@ -41,9 +42,10 @@ const App = () => {
   const [theme, _setTheme] = useState(getDefaultTheme());
   const [context, setContext] = useState<{
     nodeMap: { [key: string]: string };
+    nodeMapByIp: { [key: string]: string };
     ipLogMap: { [key: string]: string };
     namespaceMap: { [key: string]: string[] };
-  }>({ nodeMap: {}, ipLogMap: {}, namespaceMap: {} });
+  }>({ nodeMap: {}, nodeMapByIp: {}, ipLogMap: {}, namespaceMap: {} });
   const getTheme = (name: string) => {
     switch (name) {
       case "dark":
@@ -61,12 +63,14 @@ const App = () => {
     getNodeList().then((res) => {
       if (res?.data?.data?.summary) {
         const nodeMap = {} as { [key: string]: string };
+        const nodeMapByIp = {} as { [key: string]: string };
         const ipLogMap = {} as { [key: string]: string };
         res.data.data.summary.forEach(({ hostname, raylet, ip, logUrl }) => {
           nodeMap[hostname] = raylet.nodeId;
+          nodeMapByIp[ip] = raylet.nodeId;
           ipLogMap[ip] = logUrl;
         });
-        setContext({ nodeMap, ipLogMap, namespaceMap: {} });
+        setContext({ nodeMap, nodeMapByIp, ipLogMap, namespaceMap: {} });
       }
     });
   }, []);
diff --git a/dashboard/client/src/components/WorkerTable.tsx b/dashboard/client/src/components/WorkerTable.tsx
index aa6bba57b..f235d015a 100644
--- a/dashboard/client/src/components/WorkerTable.tsx
+++ b/dashboard/client/src/components/WorkerTable.tsx
@@ -117,7 +117,7 @@ const RayletWorkerTable = ({
 }) => {
   const { changeFilter, filterFunc } = useFilter();
   const [key, setKey] = useState("");
-  const { nodeMap, ipLogMap } = useContext(GlobalContext);
+  const { nodeMapByIp, ipLogMap } = useContext(GlobalContext);
   const open = () => setKey(`ON${Math.random()}`);
   const close = () => setKey(`OFF${Math.random()}`);
 
@@ -146,7 +146,9 @@ const RayletWorkerTable = ({
               "Create Time",
               "Log",
               "Ops",
-              "IP/Hostname",
+              "IP",
+              "Tasks",
+              "Objects",
             ].map((col) => (
               <TableCell align="center" key={col}>
                 {col}
@@ -178,8 +180,6 @@ const RayletWorkerTable = ({
                 createTime,
                 coreWorkerStats = [],
                 language,
-                ip,
-                hostname,
               }) => (
                 <ExpandableTableRow
                   expandComponent={
@@ -205,7 +205,7 @@ const RayletWorkerTable = ({
                     <div style={{ maxHeight: 55, overflow: "auto" }}>
                       {Object.entries(cpuTimes || {}).map(([key, val]) => (
                         <div style={{ margin: 4 }}>
-                          {key}:{val}
+                          {key}:{val}%
                         </div>
                       ))}
                     </div>
@@ -227,12 +227,12 @@ const RayletWorkerTable = ({
                   </TableCell>
                   <TableCell align="center">
                     <Grid container spacing={2}>
-                      {ipLogMap[ip] && (
+                      {ipLogMap[coreWorkerStats[0]?.ipAddress] && (
                         <Grid item>
                           <Link
                             target="_blank"
                             to={`/log/${encodeURIComponent(
-                              ipLogMap[ip],
+                              ipLogMap[coreWorkerStats[0]?.ipAddress],
                             )}?fileName=${
                               coreWorkerStats[0].jobId || ""
                             }-${pid}`}
@@ -244,7 +244,7 @@ const RayletWorkerTable = ({
                     </Grid>
                   </TableCell>
                   <TableCell align="center">
-                    {language === "JAVA" && (
+                    {language === "JAVA" ? (
                       <div>
                         <Button
                           onClick={() => {
@@ -274,19 +274,49 @@ const RayletWorkerTable = ({
                           jstat
                         </Button>
                       </div>
+                    ) : (
+                      "N/A"
                     )}
                   </TableCell>
                   <TableCell align="center">
-                    {ip}
-                    <br />
-                    {nodeMap[hostname] ? (
-                      <Link target="_blank" to={`/node/${nodeMap[hostname]}`}>
-                        {hostname}
+                    {nodeMapByIp[coreWorkerStats[0]?.ipAddress] ? (
+                      <Link
+                        target="_blank"
+                        to={`/node/${
+                          nodeMapByIp[coreWorkerStats[0]?.ipAddress]
+                        }`}
+                      >
+                        {coreWorkerStats[0]?.ipAddress}
                       </Link>
                     ) : (
-                      hostname
+                      coreWorkerStats[0]?.ipAddress
                     )}
                   </TableCell>
+                  <TableCell align="center">
+                    <div>
+                      Pending tasks: {coreWorkerStats[0]?.numPendingTasks}
+                    </div>
+                    <div>
+                      Executed tasks: {coreWorkerStats[0]?.numExecutedTasks}
+                    </div>
+                  </TableCell>
+                  <TableCell align="center">
+                    <div>
+                      ObjectRefs in scope:{" "}
+                      {coreWorkerStats[0]?.numObjectRefsInScope}
+                    </div>
+                    <div>
+                      Objects in local memory store:{" "}
+                      {coreWorkerStats[0]?.numLocalObjects}
+                    </div>
+                    <div>
+                      Objects in plasma store: {coreWorkerStats[0]?.numInPlasma}
+                    </div>
+                    <div>
+                      Object store Memory used (MiB):{" "}
+                      {coreWorkerStats[0]?.usedObjectStoreMemory}
+                    </div>
+                  </TableCell>
                 </ExpandableTableRow>
               ),
             )}
diff --git a/dashboard/client/src/type/worker.d.ts b/dashboard/client/src/type/worker.d.ts
index 990c16df2..147f8f3e7 100644
--- a/dashboard/client/src/type/worker.d.ts
+++ b/dashboard/client/src/type/worker.d.ts
@@ -4,9 +4,14 @@ export type CoreWorkerStats = {
   actorId: string;
   usedResources: { [key: string]: number };
   numExecutedTasks: number;
+  numPendingTasks: number;
   workerId: string;
   actorTitle: string;
   jobId: string;
+  numObjectRefsInScope: number;
+  numInPlasma: number;
+  numLocalObjects: number;
+  usedObjectStoreMemory: string;
 };
 
 export type Worker = {