[Dashboard] Add the new dashboard code and prompt users to try it (#11667)

2026-07-29 11:26:04 +08:00 · 2021-01-29 15:22:26 +08:00
parent 42d501d747
commit 752da83bb7
52 changed files with 4650 additions and 33 deletions
@@ -0,0 +1,156 @@
+import {
+  Grow,
+  makeStyles,
+  Paper,
+  Tab,
+  Tabs,
+  TextField,
+} from "@material-ui/core";
+import { red } from "@material-ui/core/colors";
+import { Build, Close } from "@material-ui/icons";
+import React, { useState } from "react";
+import { StatusChip } from "./StatusChip";
+
+const chunkArray = (myArray: string[], chunk_size: number) => {
+  const results = [];
+
+  while (myArray.length) {
+    results.push(myArray.splice(0, chunk_size));
+  }
+
+  return results;
+};
+
+const revertBit = (str: string) => {
+  return chunkArray(str.split(""), 2)
+    .reverse()
+    .map((e) => e.join(""))
+    .join("");
+};
+
+const detectFlag = (str: string, offset: number) => {
+  const flag = parseInt(str, 16);
+  const mask = 1 << offset;
+
+  return Number(!!(flag & mask));
+};
+
+const useStyle = makeStyles((theme) => ({
+  toolContainer: {
+    background: theme.palette.primary.main,
+    width: 48,
+    height: 48,
+    borderRadius: 48,
+    position: "fixed",
+    bottom: 100,
+    left: 50,
+    color: theme.palette.primary.contrastText,
+  },
+  icon: {
+    position: "absolute",
+    left: 12,
+    cursor: "pointer",
+    top: 12,
+  },
+  popover: {
+    position: "absolute",
+    left: 50,
+    bottom: 48,
+    width: 500,
+    height: 300,
+    padding: 6,
+    border: "1px solid",
+    borderColor: theme.palette.text.disabled,
+  },
+  close: {
+    float: "right",
+    color: theme.palette.error.main,
+    cursor: "pointer",
+  },
+}));
+
+const ObjectIdReader = () => {
+  const [id, setId] = useState("");
+  const tagList = [
+    ["Create From Task", 15, 1],
+    ["Put Object", 14, 0],
+    ["Return Object", 14, 1],
+  ] as [string, number, number][];
+
+  return (
+    <div style={{ padding: 8 }}>
+      <TextField
+        style={{ width: "100%" }}
+        id="standard-basic"
+        label="Object Id"
+        InputProps={{
+          onChange: ({ target: { value } }) => {
+            setId(value);
+          },
+        }}
+      />
+      <div>
+        {id.length === 40 ? (
+          <div style={{ padding: 8 }}>
+            Job ID: {id.slice(24, 28)} <br />
+            Actor ID: {id.slice(16, 28)} <br />
+            Task ID: {id.slice(0, 28)} <br />
+            Index: {parseInt(revertBit(id.slice(32)), 16)} <br />
+            Flag: {revertBit(id.slice(28, 32))}
+            <br />
+            <br />
+            {tagList
+              .filter(
+                ([a, b, c]) => detectFlag(revertBit(id.slice(28, 32)), b) === c,
+              )
+              .map(([name]) => (
+                <StatusChip key={name} type="tag" status={name} />
+              ))}
+          </div>
+        ) : (
+          <span style={{ color: red[500] }}>
+            Object ID should be 40 letters long
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const Tools = () => {
+  const [sel, setSel] = useState("oid_converter");
+  const toolMap = {
+    oid_converter: <ObjectIdReader />,
+  } as { [key: string]: JSX.Element };
+
+  return (
+    <div>
+      <Tabs value={sel} onChange={(e, val) => setSel(val)}>
+        <Tab
+          value="oid_converter"
+          label={<span style={{ fontSize: 12 }}>Object ID Reader</span>}
+        />
+      </Tabs>
+      {toolMap[sel]}
+    </div>
+  );
+};
+
+const SpeedTools = () => {
+  const [show, setShow] = useState(false);
+  const classes = useStyle();
+
+  return (
+    <Paper className={classes.toolContainer}>
+      <Build className={classes.icon} onClick={() => setShow(!show)} />
+      <Grow in={show} style={{ transformOrigin: "300 500 0" }}>
+        <Paper className={classes.popover}>
+          <Close className={classes.close} onClick={() => setShow(false)} />
+          <Tools />
+        </Paper>
+      </Grow>
+    </Paper>
+  );
+};
+
+export default SpeedTools;