+ e.state)),
+ )}
+ onInputChange={(_: any, value: string) => {
+ changeFilter("state", value.trim());
+ }}
+ renderInput={(params: TextFieldProps) => (
+ e.address?.ipAddress)),
+ )}
+ onInputChange={(_: any, value: string) => {
+ changeFilter("address.ipAddress", value.trim());
+ }}
+ renderInput={(params: TextFieldProps) => (
+ {
+ changeFilter("pid", value.trim());
+ },
+ endAdornment: (
+
+
+ ),
+ }}
+ />
+ {
+ changeFilter("functionDesc", value.trim());
+ },
+ endAdornment: (
+
+
+ ),
+ }}
+ />
+ {
+ changeFilter("name", value.trim());
+ },
+ endAdornment: (
+
+
+ ),
+ }}
+ />
+ {
+ changeFilter("actorId", value.trim());
+ },
+ endAdornment: (
+
+
+ ),
+ }}
+ />
+ {
+ setPageSize(Math.min(Number(value), 500) || 10);
+ },
+ }}
+ />
+
+
+
+
+ setPageNo(num)}
+ count={Math.ceil(actorList.length / pageSize)}
+ />
+
+
+
+ - (null);
+ const outter = useRef
+
+ {i + 1}
+
+ {low
+ .highlight(language, origin)
+ .value.map((v) => value2react(v, index.toString(), keywords))}
+
+ );
+ };
+
+ useEffect(() => {
+ const originContent = content.split("\n");
+ if (timmer.current) {
+ clearTimeout(timmer.current);
+ }
+ timmer.current = setTimeout(() => {
+ setLogs(
+ originContent
+ .map((e, i) => ({
+ i,
+ origin: e,
+ time: (e?.match(timeReg) || [""])[0],
+ }))
+ .filter((e) => {
+ let bool = e.origin.includes(keywords);
+ if (
+ e.time &&
+ startTime &&
+ !dayjs(e.time).isAfter(dayjs(startTime))
+ ) {
+ bool = false;
+ }
+ if (e.time && endTime && !dayjs(e.time).isBefore(dayjs(endTime))) {
+ bool = false;
+ }
+ return bool;
+ })
+ .map((e) => ({
+ ...e,
+ })),
+ );
+ }, 500);
+ }, [content, keywords, language, startTime, endTime]);
+
+ useEffect(() => {
+ if (el.current) {
+ el.current?.scrollTo((focusLine - 1) * (fontSize + 6));
+ }
+ }, [focusLine, fontSize]);
+
+ useEffect(() => {
+ if (outter.current) {
+ const scrollFunc = (event: any) => {
+ const { target } = event;
+ if (
+ target &&
+ target.scrollTop + target.clientHeight === target.scrollHeight
+ ) {
+ if (onScrollBottom) {
+ onScrollBottom(event);
+ }
+ }
+ };
+ outter.current.addEventListener("scroll", scrollFunc);
+ return () => outter?.current?.removeEventListener("scroll", scrollFunc);
+ }
+ }, [onScrollBottom]);
+
+ return (
+ -
+ {itemRenderer}
+
+
+
+ );
+};
+
+export default PercentageBar;
diff --git a/dashboard/client/src/components/SearchComponent.tsx b/dashboard/client/src/components/SearchComponent.tsx
new file mode 100644
index 000000000..02170b13c
--- /dev/null
+++ b/dashboard/client/src/components/SearchComponent.tsx
@@ -0,0 +1,87 @@
+import {
+ InputAdornment,
+ makeStyles,
+ MenuItem,
+ TextField,
+} from "@material-ui/core";
+import { SearchOutlined } from "@material-ui/icons";
+import React from "react";
+
+const useStyles = makeStyles((theme) => ({
+ search: {
+ margin: theme.spacing(1),
+ marginTop: 0,
+ },
+}));
+
+export const SearchInput = ({
+ label,
+ onChange,
+ defaultValue,
+}: {
+ label: string;
+ defaultValue?: string;
+ onChange?: (value: string) => void;
+}) => {
+ const classes = useStyles();
+
+ return (
+ {props.children}
+
+ {
+ setId(value);
+ },
+ }}
+ />
+
+ );
+};
+
+const Tools = () => {
+ const [sel, setSel] = useState("oid_converter");
+ const toolMap = {
+ oid_converter:
+ {id.length === 40 ? (
+
+
+ Job ID: {id.slice(24, 28)}
+ Actor ID: {id.slice(16, 28)}
+ Task ID: {id.slice(0, 28)}
+ Index: {parseInt(revertBit(id.slice(32)), 16)}
+ Flag: {revertBit(id.slice(28, 32))} +
+
+ {tagList + .filter( + ([a, b, c]) => detectFlag(revertBit(id.slice(28, 32)), b) === c, + ) + .map(([name]) => ( +
+ ) : (
+
+ Object ID should be 40 letters long
+
+ )}
+ + Actor ID: {id.slice(16, 28)}
+ Task ID: {id.slice(0, 28)}
+ Index: {parseInt(revertBit(id.slice(32)), 16)}
+ Flag: {revertBit(id.slice(28, 32))} +
+
+ {tagList + .filter( + ([a, b, c]) => detectFlag(revertBit(id.slice(28, 32)), b) === c, + ) + .map(([name]) => ( +
+ setSel(val)}>
+ Object ID Reader}
+ />
+
+ {toolMap[sel]}
+
+ );
+};
+
+const SpeedTools = () => {
+ const [show, setShow] = useState(false);
+ const classes = useStyle();
+
+ return (
+ {title}
+ {children}
+ The Worker Haven't Had Related Actor Yet.
; + } + + return ( +
+ changeFilter("pid", value)}
+ />
+
+
+
+ )}{" "}
+
+
+
+
+ );
+};
+
+export default Actors;
diff --git a/dashboard/client/src/pages/cmd/CMDResult.tsx b/dashboard/client/src/pages/cmd/CMDResult.tsx
new file mode 100644
index 000000000..ed87c10d8
--- /dev/null
+++ b/dashboard/client/src/pages/cmd/CMDResult.tsx
@@ -0,0 +1,137 @@
+import {
+ Button,
+ Grid,
+ makeStyles,
+ MenuItem,
+ Paper,
+ Select,
+} from "@material-ui/core";
+import React, { useCallback, useEffect, useState } from "react";
+import { RouteComponentProps } from "react-router-dom";
+import LogVirtualView from "../../components/LogView/LogVirtualView";
+import TitleCard from "../../components/TitleCard";
+import { getJmap, getJstack, getJstat } from "../../service/util";
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ padding: theme.spacing(4),
+ width: "100%",
+ },
+ table: {
+ marginTop: theme.spacing(4),
+ padding: theme.spacing(2),
+ },
+ pageMeta: {
+ padding: theme.spacing(2),
+ marginTop: theme.spacing(2),
+ },
+ search: {
+ margin: theme.spacing(1),
+ },
+}));
+
+const CMDResult = (
+ props: RouteComponentProps<{ cmd: string; ip: string; pid: string }>,
+) => {
+ const classes = useStyles();
+ const {
+ match: { params },
+ } = props;
+ const { cmd, ip, pid } = params;
+ const [result, setResult] = useState
+
+ {cmd === "jstat" && (
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ );
+};
+
+export default CMDResult;
diff --git a/dashboard/client/src/pages/dashboard/Dashboard.tsx b/dashboard/client/src/pages/dashboard/Dashboard.tsx
index 0ffbce7f5..d7eeaf936 100644
--- a/dashboard/client/src/pages/dashboard/Dashboard.tsx
+++ b/dashboard/client/src/pages/dashboard/Dashboard.tsx
@@ -1,4 +1,5 @@
import {
+ Button,
createStyles,
makeStyles,
Tab,
@@ -8,6 +9,7 @@ import {
} from "@material-ui/core";
import React, { useCallback, useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
+import { useHistory } from "react-router-dom";
import { getActorGroups, getNodeInfo, getTuneAvailability } from "../../api";
import { StoreState } from "../../store";
import LastUpdated from "./LastUpdated";
@@ -59,6 +61,7 @@ const Dashboard: React.FC = () => {
const tuneAvailability = useSelector(tuneAvailabilitySelector);
const tab = useSelector(tabSelector);
const classes = useDashboardStyles();
+ const history = useHistory();
// Polling Function
const refreshInfo = useCallback(async () => {
@@ -103,6 +106,9 @@ const Dashboard: React.FC = () => {
return (
+
+ );
+};
+
+export default Error404;
diff --git a/dashboard/client/src/pages/exception/Loading.tsx b/dashboard/client/src/pages/exception/Loading.tsx
new file mode 100644
index 000000000..24140c4dc
--- /dev/null
+++ b/dashboard/client/src/pages/exception/Loading.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import Logo from "../../logo.svg";
+
+export default () => {
+ return (
+
+
+
+ 404 NOT FOUND
+
+ + We can't provide the page you wanted yet, better try with another path + next time. +
+
+
+ );
+};
diff --git a/dashboard/client/src/pages/index/Index.tsx b/dashboard/client/src/pages/index/Index.tsx
new file mode 100644
index 000000000..961216449
--- /dev/null
+++ b/dashboard/client/src/pages/index/Index.tsx
@@ -0,0 +1,110 @@
+import {
+ makeStyles,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TableRow,
+} from "@material-ui/core";
+import React, { useEffect, useState } from "react";
+import { version } from "../../../package.json";
+import TitleCard from "../../components/TitleCard";
+import { getRayConfig } from "../../service/cluster";
+import { getNodeList } from "../../service/node";
+import { RayConfig } from "../../type/config";
+import { NodeDetail } from "../../type/node";
+import { memoryConverter } from "../../util/converter";
+
+const useStyle = makeStyles((theme) => ({
+ root: {
+ padding: theme.spacing(2),
+ },
+ label: {
+ fontWeight: "bold",
+ },
+}));
+
+const getVal = (key: string, value: any) => {
+ if (key === "containerMemory") {
+ return memoryConverter(value * 1024 * 1024);
+ }
+ return JSON.stringify(value);
+};
+
+const useIndex = () => {
+ const [rayConfig, setConfig] = useState
+ 
+
+ Loading... +
+ + Loading... +
+
+
+ {rayConfig && (
+
+
+
+ Key
+ Value
+
+
+ {Object.entries(rayConfig).map(([key, value]) => (
+
+ {key}
+ {getVal(key, value)}
+
+ ))}
+
+
+
+ )}
+
+ );
+};
+
+export default Index;
diff --git a/dashboard/client/src/pages/job/JobDetail.tsx b/dashboard/client/src/pages/job/JobDetail.tsx
new file mode 100644
index 000000000..b720b9c05
--- /dev/null
+++ b/dashboard/client/src/pages/job/JobDetail.tsx
@@ -0,0 +1,246 @@
+import {
+ Grid,
+ makeStyles,
+ Switch,
+ Tab,
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TableRow,
+ Tabs,
+} from "@material-ui/core";
+import React from "react";
+import { Link, RouteComponentProps } from "react-router-dom";
+import ActorTable from "../../components/ActorTable";
+import Loading from "../../components/Loading";
+import { StatusChip } from "../../components/StatusChip";
+import TitleCard from "../../components/TitleCard";
+import RayletWorkerTable from "../../components/WorkerTable";
+import { longTextCut } from "../../util/func";
+import { useJobDetail } from "./hook/useJobDetail";
+
+const useStyle = makeStyles((theme) => ({
+ root: {
+ padding: theme.spacing(2),
+ },
+ paper: {
+ padding: theme.spacing(2),
+ marginTop: theme.spacing(2),
+ marginBottom: theme.spacing(2),
+ },
+ label: {
+ fontWeight: "bold",
+ },
+ pageMeta: {
+ padding: theme.spacing(2),
+ marginTop: theme.spacing(2),
+ },
+ tab: {
+ marginBottom: theme.spacing(2),
+ },
+ dependenciesChip: {
+ margin: theme.spacing(0.5),
+ wordBreak: "break-all",
+ },
+ alert: {
+ color: theme.palette.error.main,
+ },
+}));
+
+const JobDetailPage = (props: RouteComponentProps<{ id: string }>) => {
+ const classes = useStyle();
+ const {
+ actorMap,
+ jobInfo,
+ job,
+ msg,
+ selectedTab,
+ handleChange,
+ handleSwitchChange,
+ params,
+ refreshing,
+ ipLogMap,
+ } = useJobDetail(props);
+
+ if (!job || !jobInfo) {
+ return (
+ Dashboard Frontend Version: {version}
+ {rayConfig?.imageUrl && ( ++ Image Url:{" "} + + {rayConfig.imageUrl} + +
+ )} + {rayConfig?.sourceCodeLink && ( ++ Source Code:{" "} + + {rayConfig.sourceCodeLink} + +
+ )} +
+
+
+ Auto Refresh: +
+ Request Status: {msg}
+
+
+ );
+ }
+
+ return (
+ + Auto Refresh: +
+ Request Status: {msg}
+
+
+
+ Auto Refresh: +
+ Request Status: {msg}
+
+
+
+
+ {selectedTab === "info" && (
+
+
+ Driver IP:{" "}
+ {jobInfo.driverIpAddress}
+
+ {ipLogMap[jobInfo.driverIpAddress] && (
+
+ Driver Log:{" "}
+
+ Log
+
+
+ )}
+
+ Driver Pid:{" "}
+ {jobInfo.driverPid}
+
+ {jobInfo.eventUrl && (
+
+ Event Link:{" "}
+
+ Event Log
+
+
+ )}
+ {jobInfo.failErrorMessage && (
+
+ Fail Error:{" "}
+
+ {jobInfo.failErrorMessage}
+
+
+ )}
+
+ )}
+ {jobInfo?.dependencies && selectedTab === "dep" && (
+
+
+ );
+};
+
+export default JobDetailPage;
diff --git a/dashboard/client/src/pages/job/hook/useJobDetail.ts b/dashboard/client/src/pages/job/hook/useJobDetail.ts
new file mode 100644
index 000000000..695fca760
--- /dev/null
+++ b/dashboard/client/src/pages/job/hook/useJobDetail.ts
@@ -0,0 +1,73 @@
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { RouteComponentProps } from "react-router-dom";
+import { GlobalContext } from "../../../App";
+import { getJobDetail } from "../../../service/job";
+import { JobDetail } from "../../../type/job";
+
+export const useJobDetail = (props: RouteComponentProps<{ id: string }>) => {
+ const {
+ match: { params },
+ } = props;
+ const [job, setJob] = useState+ Auto Refresh: +
+ Request Status: {msg}
+
+ {jobInfo?.dependencies?.python && (
+
+
+ )}
+ {jobInfo?.dependencies?.java && (
+
+
+
+
+
+
+ )}
+
+ )}
+ {selectedTab === "worker" && (
+
+ {jobInfo.dependencies.python.map((e) => (
+
+
+
+
+
+ )}
+ {selectedTab === "actor" && (
+
+
+
+
+ )}
+
+
+ Auto Refresh:
+
+ Request Status: {msg} +
+
+
+ changeFilter("jobId", value)}
+ />
+ changeFilter("language", value)}
+ options={["JAVA", "PYTHON"]}
+ />
+
+ setPage("pageSize", Math.min(Number(value), 500) || 10)
+ }
+ />
+
+
+
+
+
+ );
+};
+
+export default JobList;
diff --git a/dashboard/client/src/pages/layout/index.tsx b/dashboard/client/src/pages/layout/index.tsx
new file mode 100644
index 000000000..b484a29db
--- /dev/null
+++ b/dashboard/client/src/pages/layout/index.tsx
@@ -0,0 +1,167 @@
+import { IconButton, Tooltip } from "@material-ui/core";
+import Drawer from "@material-ui/core/Drawer";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemText from "@material-ui/core/ListItemText";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import { NightsStay, VerticalAlignTop, WbSunny } from "@material-ui/icons";
+import classnames from "classnames";
+import React, { PropsWithChildren } from "react";
+import { RouteComponentProps } from "react-router-dom";
+
+import SpeedTools from "../../components/SpeedTools";
+import Logo from "../../logo.svg";
+
+const drawerWidth = 200;
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ display: "flex",
+ "& a": {
+ color: theme.palette.primary.main,
+ },
+ },
+ drawer: {
+ width: drawerWidth,
+ flexShrink: 0,
+ background: theme.palette.background.paper,
+ },
+ drawerPaper: {
+ width: drawerWidth,
+ border: "none",
+ background: theme.palette.background.paper,
+ boxShadow: theme.shadows[1],
+ },
+ title: {
+ padding: theme.spacing(2),
+ textAlign: "center",
+ lineHeight: "36px",
+ },
+ divider: {
+ background: "rgba(255, 255, 255, .12)",
+ },
+ menuItem: {
+ cursor: "pointer",
+ "&:hover": {
+ background: theme.palette.primary.main,
+ },
+ },
+ selected: {
+ background: `linear-gradient(45deg, ${theme.palette.primary.main} 30%, ${theme.palette.secondary.main} 90%)`,
+ },
+ child: {
+ flex: 1,
+ },
+}));
+
+const BasicLayout = (
+ props: PropsWithChildren<
+ { setTheme: (theme: string) => void; theme: string } & RouteComponentProps
+ >,
+) => {
+ const classes = useStyles();
+ const { location, history, children, setTheme, theme } = props;
+
+ return (
+ + Request Status: {msg} +
+ setPage("pageNo", pageNo)}
+ />
+
+
+
+
+
Ray Dashboard +
+
+
+ );
+};
+
+export default BasicLayout;
diff --git a/dashboard/client/src/pages/log/Logs.tsx b/dashboard/client/src/pages/log/Logs.tsx
new file mode 100644
index 000000000..12218d52a
--- /dev/null
+++ b/dashboard/client/src/pages/log/Logs.tsx
@@ -0,0 +1,306 @@
+import {
+ Button,
+ InputAdornment,
+ LinearProgress,
+ List,
+ ListItem,
+ makeStyles,
+ Paper,
+ Switch,
+ TextField,
+} from "@material-ui/core";
+import { SearchOutlined } from "@material-ui/icons";
+import React, { useEffect, useRef, useState } from "react";
+import { RouteComponentProps } from "react-router-dom";
+import LogVirtualView from "../../components/LogView/LogVirtualView";
+import { SearchInput } from "../../components/SearchComponent";
+import TitleCard from "../../components/TitleCard";
+import { getLogDetail } from "../../service/log";
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ padding: theme.spacing(2),
+ width: "100%",
+ },
+ table: {
+ marginTop: theme.spacing(4),
+ padding: theme.spacing(2),
+ },
+ pageMeta: {
+ padding: theme.spacing(2),
+ marginTop: theme.spacing(2),
+ },
+ search: {
+ margin: theme.spacing(1),
+ },
+}));
+
+type LogsProps = RouteComponentProps<{ host?: string; path?: string }> & {
+ theme?: "dark" | "light";
+};
+
+const useLogs = (props: LogsProps) => {
+ const {
+ match: { params },
+ location: { search: urlSearch },
+ theme,
+ } = props;
+ const { host, path } = params;
+ const searchMap = new URLSearchParams(urlSearch);
+ const urlFileName = searchMap.get("fileName");
+ const el = useRefRay Dashboard +
-
+
{children}
+
+
+
+ {!origin &&
+
+ {typeof log === "object" && (
+
+
+
+ );
+};
+
+export default Logs;
diff --git a/dashboard/client/src/pages/node/NodeDetail.tsx b/dashboard/client/src/pages/node/NodeDetail.tsx
new file mode 100644
index 000000000..6f5187bdb
--- /dev/null
+++ b/dashboard/client/src/pages/node/NodeDetail.tsx
@@ -0,0 +1,287 @@
+import {
+ Grid,
+ makeStyles,
+ Switch,
+ Tab,
+ TableContainer,
+ Tabs,
+} from "@material-ui/core";
+import dayjs from "dayjs";
+import React from "react";
+import { Link, RouteComponentProps } from "react-router-dom";
+import ActorTable from "../../components/ActorTable";
+import Loading from "../../components/Loading";
+import PercentageBar from "../../components/PercentageBar";
+import { StatusChip } from "../../components/StatusChip";
+import TitleCard from "../../components/TitleCard";
+import RayletWorkerTable from "../../components/WorkerTable";
+import { ViewMeasures } from "../../type/raylet";
+import { memoryConverter } from "../../util/converter";
+import { useNodeDetail } from "./hook/useNodeDetail";
+
+const useStyle = makeStyles((theme) => ({
+ root: {
+ padding: theme.spacing(2),
+ },
+ paper: {
+ padding: theme.spacing(2),
+ marginTop: theme.spacing(2),
+ marginBottom: theme.spacing(2),
+ },
+ label: {
+ fontWeight: "bold",
+ },
+ tab: {
+ marginBottom: theme.spacing(2),
+ },
+}));
+
+const showMeasureKeys = [
+ "local_total_resource",
+ "local_available_resource",
+ "actor_stats",
+ "task_dependency_manager_stats",
+ "reconstruction_policy_stats",
+ "scheduling_queue_stats",
+ "object_manager_stats",
+];
+
+const ViewDataDisplayer = ({ view }: { view?: ViewMeasures }) => {
+ if (!view) {
+ return null;
+ }
+ const { tags = "", ...otherProps } = view;
+
+ return (
+ Please choose an url to get log path
} + {origin && ( ++ Now Path: {origin} + {decodeURIComponent(path || "")} +
+ )} + {origin && ( +
+
+ {typeof log === "object" && (
+ {
+ setFileName(val);
+ }}
+ />
+ )}
+
+ )}
+ -
+ {log
+ .filter((e) => !fileName || e?.name?.includes(fileName))
+ .map((e: { [key: string]: string }) => (
+
+
+ )}
+ {log === "Loading..." && (
+
+ {
+ setSearch({ ...search, keywords: value });
+ },
+ type: "",
+ endAdornment: (
+
+
+ ),
+ }}
+ />
+ {
+ setSearch({ ...search, lineNumber: value });
+ },
+ type: "",
+ endAdornment: (
+
+
+ ),
+ }}
+ />
+ {
+ setSearch({ ...search, fontSize: Number(value) });
+ },
+ type: "",
+ }}
+ />
+ {
+ setStart(val.target.value);
+ }}
+ InputLabelProps={{
+ shrink: true,
+ }}
+ />
+ {
+ setEnd(val.target.value);
+ }}
+ InputLabelProps={{
+ shrink: true,
+ }}
+ />
+
+
+ Reverse:{" "}
+ setSearch({ ...search, revert: v })}
+ />
+
+
+
+
+
+ )}
+ +
+
+
+ Auto Refresh: +
+ Request Status: {msg} +
+
+
+
+ {nodeDetail && selectedTab === "info" && (
+
+
+ )}
+ {nodeDetail?.workers && selectedTab === "worker" && (
+
+
+
+
+ )}
+ {nodeDetail?.actors && selectedTab === "actor" && (
+
+
+
+
+ )}
+
+
+ );
+};
+
+export default NodeDetailPage;
diff --git a/dashboard/client/src/pages/node/hook/useNodeDetail.ts b/dashboard/client/src/pages/node/hook/useNodeDetail.ts
new file mode 100644
index 000000000..1ca3570a2
--- /dev/null
+++ b/dashboard/client/src/pages/node/hook/useNodeDetail.ts
@@ -0,0 +1,66 @@
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { RouteComponentProps } from "react-router-dom";
+import { GlobalContext } from "../../../App";
+import { getNodeDetail } from "../../../service/node";
+import { NodeDetailExtend } from "../../../type/node";
+
+export const useNodeDetail = (props: RouteComponentProps<{ id: string }>) => {
+ const {
+ match: { params },
+ } = props;
+ const [selectedTab, setTab] = useState("info");
+ const [nodeDetail, setNode] = useState+ Auto Refresh: +
+ Request Status: {msg} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {memoryConverter(nodeDetail?.mem[0] - nodeDetail?.mem[1])}/
+ {memoryConverter(nodeDetail?.mem[0])}({nodeDetail?.mem[2]}%)
+
+ )}
+
+
+
+ {nodeDetail.cpu}%
+
+
+
+
+ {nodeDetail?.disk &&
+ Object.entries(nodeDetail?.disk).map(([path, obj]) => (
+
+
+ {memoryConverter(obj.used)}/{memoryConverter(obj.total)}
+ ({obj.percent}%, {memoryConverter(obj.free)} free)
+
+ )}
+
+ ))}
+
+
+
+
+
+
+ )}
+ {raylet && Object.keys(raylet).length > 0 && selectedTab === "raylet" && (
+ Hostname
{" "}
+ {nodeDetail.hostname}
+ IP
{nodeDetail.ip}
+ CPU (Logic/Physic)
{" "}
+ {nodeDetail.cpus[0]}/ {nodeDetail.cpus[1]}
+ Load (1/5/15min)
{" "}
+ {nodeDetail?.loadAvg[0] &&
+ nodeDetail.loadAvg[0]
+ .map((e) => Number(e).toFixed(2))
+ .join("/")}
+ Load per CPU (1/5/15min)
{" "}
+ {nodeDetail?.loadAvg[1] &&
+ nodeDetail.loadAvg[1]
+ .map((e) => Number(e).toFixed(2))
+ .join("/")}
+ Boot Time
{" "}
+ {dayjs(nodeDetail.bootTime * 1000).format(
+ "YYYY/MM/DD HH:mm:ss",
+ )}
+ Sent Tps
{" "}
+ {memoryConverter(nodeDetail?.net[0])}/s
+ Recieved Tps
{" "}
+ {memoryConverter(nodeDetail?.net[1])}/s
+ Memory
{" "}
+ {nodeDetail?.mem && (
+ CPU
{" "}
+ Disk ({path})
{" "}
+ {obj && (
+ Logs
{" "}
+
+ log
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {showMeasureKeys
+ .map((e) => raylet.viewData.find((view) => view.viewName === e))
+ .map((e) =>
+ e ? (
+
+
+ {e.measures.map((e) => (
+
+
+ ) : null,
+ )}
+
+ Command
+ +
+ {nodeDetail?.cmdline.join(" ")}
+
+ Pid
{raylet?.pid}
+ Workers Num
{" "}
+ {raylet?.numWorkers}
+ Node Manager Port
{" "}
+ {raylet?.nodeManagerPort}
+ + {e.viewName + .split("_") + .map((e) => e[0].toUpperCase() + e.slice(1)) + .join(" ")} +
++ {nodeId}{" "} +
+
+
+
+ Auto Refresh:
+
+ Request Status: {msg} +
+
+
+
+
+
+ changeFilter("hostname", value.trim())}
+ />
+
+
+ changeFilter("ip", value.trim())}
+ />
+
+
+ changeFilter("state", value.trim())}
+ options={["ALIVE", "DEAD"]}
+ />
+
+
+
+ setPage("pageSize", Math.min(Number(value), 500) || 10)
+ }
+ />
+
+
+ setSortKey(val)}
+ />
+
+
+
+ Reverse:
+ setOrderDesc(checked)} />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+ {mode === "card" && (
+
+ {nodeList
+ .slice(
+ (page.pageNo - 1) * page.pageSize,
+ page.pageNo * page.pageSize,
+ )
+ .map((e) => (
+
+
+ ))}
+
+ )}
+
+
+ );
+};
+
+export default Nodes;
diff --git a/dashboard/client/src/service/actor.ts b/dashboard/client/src/service/actor.ts
new file mode 100644
index 000000000..425fd62a4
--- /dev/null
+++ b/dashboard/client/src/service/actor.ts
@@ -0,0 +1,14 @@
+import axios from "axios";
+import { Actor } from "../type/actor";
+
+export const getActors = () => {
+ return axios.get<{
+ result: boolean;
+ message: string;
+ data: {
+ actors: {
+ [actorId: string]: Actor;
+ };
+ };
+ }>("logical/actors");
+};
diff --git a/dashboard/client/src/service/cluster.ts b/dashboard/client/src/service/cluster.ts
new file mode 100644
index 000000000..9bf53e76d
--- /dev/null
+++ b/dashboard/client/src/service/cluster.ts
@@ -0,0 +1,6 @@
+import axios from "axios";
+import { RayConfigRsp } from "../type/config";
+
+export const getRayConfig = () => {
+ return axios.get+ Request Status: {msg} +
+ setPage("pageNo", pageNo)}
+ />
+
+ {mode === "table" && (
+ {JSON.stringify(str, null, 2)};
+ }
+ try {
+ const j = JSON.parse(str);
+ if (typeof j !== "object") {
+ return JSON.stringify(j);
+ }
+ return {JSON.stringify(j, null, 2)};
+ } catch (e) {
+ return str;
+ }
+};
diff --git a/dashboard/client/src/util/hook.ts b/dashboard/client/src/util/hook.ts
new file mode 100644
index 000000000..3c6f61b06
--- /dev/null
+++ b/dashboard/client/src/util/hook.ts
@@ -0,0 +1,63 @@
+import { get } from "lodash";
+import { useState } from "react";
+
+export const useFilter =