From 4b60c388efb861bff31867583eeb6c41e882dddf Mon Sep 17 00:00:00 2001
From: Dominic Ming <xuzhi.mxz@antfin.com>
Date: Sat, 30 Jan 2021 10:42:16 +0800
Subject: [PATCH] [Dashboard] fix new dashboard entrance and some table problem
 (#13790)

---
 .../client/src/pages/dashboard/Dashboard.tsx  | 11 ++++-
 dashboard/client/src/pages/job/index.tsx      |  3 --
 dashboard/client/src/pages/layout/index.tsx   | 12 +-----
 dashboard/client/src/pages/node/index.tsx     | 43 +------------------
 4 files changed, 11 insertions(+), 58 deletions(-)

diff --git a/dashboard/client/src/pages/dashboard/Dashboard.tsx b/dashboard/client/src/pages/dashboard/Dashboard.tsx
index d7eeaf936..07f266961 100644
--- a/dashboard/client/src/pages/dashboard/Dashboard.tsx
+++ b/dashboard/client/src/pages/dashboard/Dashboard.tsx
@@ -35,6 +35,7 @@ const useDashboardStyles = makeStyles((theme: Theme) =>
       "& > :not(:first-child)": {
         marginTop: theme.spacing(4),
       },
+      position: "relative",
     },
     tabs: {
       borderBottomColor: theme.palette.divider,
@@ -106,8 +107,14 @@ const Dashboard: React.FC = () => {
   return (
     <div className={classes.root}>
       <Typography variant="h5">Ray Dashboard</Typography>
-      <Button onClick={() => history.push("/summary")}>
-        Try New Dashboard
+      <Button
+        style={{ position: "absolute", right: 16, top: 16 }}
+        variant="contained"
+        size="small"
+        color="primary"
+        onClick={() => history.push("/node")}
+      >
+        Try Experimental Dashboard
       </Button>
       <Tabs
         className={classes.tabs}
diff --git a/dashboard/client/src/pages/job/index.tsx b/dashboard/client/src/pages/job/index.tsx
index 8d2a4aaa4..b4984c129 100644
--- a/dashboard/client/src/pages/job/index.tsx
+++ b/dashboard/client/src/pages/job/index.tsx
@@ -98,9 +98,7 @@ const JobList = () => {
                     driverIpAddress,
                     isDead,
                     driverPid,
-                    state,
                     timestamp,
-                    namespaceId,
                   }) => (
                     <TableRow key={jobId}>
                       <TableCell align="center">
@@ -114,7 +112,6 @@ const JobList = () => {
                       <TableCell align="center">
                         {dayjs(timestamp * 1000).format("YYYY/MM/DD HH:mm:ss")}
                       </TableCell>
-                      <TableCell align="center">{namespaceId}</TableCell>
                     </TableRow>
                   ),
                 )}
diff --git a/dashboard/client/src/pages/layout/index.tsx b/dashboard/client/src/pages/layout/index.tsx
index b484a29db..bcaffafce 100644
--- a/dashboard/client/src/pages/layout/index.tsx
+++ b/dashboard/client/src/pages/layout/index.tsx
@@ -77,16 +77,6 @@ const BasicLayout = (
           <img width={48} src={Logo} alt="Ray" /> <br /> Ray Dashboard
         </Typography>
         <List>
-          <ListItem
-            button
-            className={classnames(
-              classes.menuItem,
-              location.pathname === "/summary" && classes.selected,
-            )}
-            onClick={() => history.push("/summary")}
-          >
-            <ListItemText>SUMMARY</ListItemText>
-          </ListItem>
           <ListItem
             button
             className={classnames(
@@ -132,7 +122,7 @@ const BasicLayout = (
             className={classnames(classes.menuItem)}
             onClick={() => history.push("/")}
           >
-            <ListItemText>BACK TO LEGACY</ListItemText>
+            <ListItemText>BACK TO EXISTING DASHBOARD</ListItemText>
           </ListItem>
           <ListItem>
             <IconButton
diff --git a/dashboard/client/src/pages/node/index.tsx b/dashboard/client/src/pages/node/index.tsx
index 3713fdc15..ea258cb6d 100644
--- a/dashboard/client/src/pages/node/index.tsx
+++ b/dashboard/client/src/pages/node/index.tsx
@@ -14,7 +14,6 @@ import {
 } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import Pagination from "@material-ui/lab/Pagination";
-import dayjs from "dayjs";
 import React from "react";
 import { Link } from "react-router-dom";
 import Loading from "../../components/Loading";
@@ -45,8 +44,6 @@ const columns = [
   "Disk(root)",
   "Sent",
   "Received",
-  "BRPC Port",
-  "Time Info",
   "Log",
 ];
 
@@ -72,7 +69,7 @@ export const NodeCard = (props: { node: NodeDetail }) => {
   }
 
   const { raylet, hostname, ip, cpu, mem, net, disk, logUrl } = node;
-  const { nodeId, state, brpcPort } = raylet;
+  const { nodeId, state } = raylet;
 
   return (
     <Paper variant="outlined" style={{ padding: "12px 12px", margin: 12 }}>
@@ -126,15 +123,6 @@ export const NodeCard = (props: { node: NodeDetail }) => {
         )}
       </Grid>
       <Grid container justify="flex-end" spacing={1} style={{ margin: 8 }}>
-        <Grid>
-          <Button
-            target="_blank"
-            rel="noopener noreferrer"
-            href={brpcLinkChanger(`${ip}:${raylet.brpcPort}`)}
-          >
-            BRPC {brpcPort}
-          </Button>
-        </Grid>
         <Grid>
           <Button>
             <Link to={`/log/${encodeURIComponent(logUrl)}`}>log</Link>
@@ -329,35 +317,6 @@ const Nodes = () => {
                         <TableCell align="center">
                           {memoryConverter(net[1])}/s
                         </TableCell>
-                        <TableCell align="center">
-                          {raylet.brpcPort && (
-                            <a
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              href={brpcLinkChanger(`${ip}:${raylet.brpcPort}`)}
-                            >
-                              {raylet.brpcPort}
-                            </a>
-                          )}
-                        </TableCell>
-                        <TableCell align="center">
-                          {!!raylet.startTime && (
-                            <p>
-                              Start Time:{" "}
-                              {dayjs(raylet.startTime * 1000).format(
-                                "YYYY/MM/DD HH:mm:ss",
-                              )}
-                            </p>
-                          )}
-                          {!!raylet.terminateTime && (
-                            <p>
-                              End Time:{" "}
-                              {dayjs(raylet.terminateTime * 1000).format(
-                                "YYYY/MM/DD HH:mm:ss",
-                              )}
-                            </p>
-                          )}
-                        </TableCell>
                         <TableCell>
                           <Link to={`/log/${encodeURIComponent(logUrl)}`}>
                             Log