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

dashboard/client/src/util/converter.ts

@@ -0,0 +1,27 @@
+export const memoryConverter = (bytes: number) => {
+  if (bytes < 1024) {
+    return `${bytes}KB`;
+  }
+
+  if (bytes < 1024 ** 2) {
+    return `${(bytes / 1024 ** 1).toFixed(2)}KB`;
+  }
+
+  if (bytes < 1024 ** 3) {
+    return `${(bytes / 1024 ** 2).toFixed(2)}MB`;
+  }
+
+  if (bytes < 1024 ** 4) {
+    return `${(bytes / 1024 ** 3).toFixed(2)}GB`;
+  }
+
+  if (bytes < 1024 ** 5) {
+    return `${(bytes / 1024 ** 4).toFixed(2)}TB`;
+  }
+
+  if (bytes < 1024 ** 6) {
+    return `${(bytes / 1024 ** 5).toFixed(2)}TB`;
+  }
+
+  return "";
+};

dashboard/client/src/util/func.tsx

@@ -0,0 +1,28 @@
+import { Tooltip } from "@material-ui/core";
+import React, { CSSProperties } from "react";
+
+export const longTextCut = (text: string = "", len: number = 28) => (
+  <Tooltip title={text} interactive>
+    <span>{text.length > len ? text.slice(0, len) + "..." : text}</span>
+  </Tooltip>
+);
+
+export const jsonFormat = (str: string | object) => {
+  const preStyle = {
+    textAlign: "left",
+    wordBreak: "break-all",
+    whiteSpace: "pre-wrap",
+  } as CSSProperties;
+  if (typeof str === "object") {
+    return <pre style={preStyle}>{JSON.stringify(str, null, 2)}</pre>;
+  }
+  try {
+    const j = JSON.parse(str);
+    if (typeof j !== "object") {
+      return JSON.stringify(j);
+    }
+    return <pre style={preStyle}>{JSON.stringify(j, null, 2)}</pre>;
+  } catch (e) {
+    return str;
+  }
+};

dashboard/client/src/util/hook.ts

@@ -0,0 +1,63 @@
+import { get } from "lodash";
+import { useState } from "react";
+
+export const useFilter = <KeyType extends string>() => {
+  const [filters, setFilters] = useState<{ key: KeyType; val: string }[]>([]);
+  const changeFilter = (key: KeyType, val: string) => {
+    const f = filters.find((e) => e.key === key);
+    if (f) {
+      f.val = val;
+    } else {
+      filters.push({ key, val });
+    }
+    setFilters([...filters]);
+  };
+  const filterFunc = (instance: { [key: string]: any }) => {
+    return filters.every(
+      (f) => !f.val || get(instance, f.key, "").toString().includes(f.val),
+    );
+  };
+
+  return {
+    changeFilter,
+    filterFunc,
+  };
+};
+
+export const useSorter = (initialSortKey?: string) => {
+  const [sorter, setSorter] = useState({
+    key: initialSortKey || "",
+    desc: false,
+  });
+
+  const sorterFunc = (
+    instanceA: { [key: string]: any },
+    instanceB: { [key: string]: any },
+  ) => {
+    if (!sorter.key) {
+      return 0;
+    }
+
+    let [b, a] = [instanceA, instanceB];
+    if (sorter.desc) {
+      [a, b] = [instanceA, instanceB];
+    }
+
+    if (!get(a, sorter.key)) {
+      return -1;
+    }
+
+    if (!get(b, sorter.key)) {
+      return 1;
+    }
+
+    return get(a, sorter.key) > get(b, sorter.key) ? 1 : -1;
+  };
+
+  return {
+    sorterFunc,
+    setSortKey: (key: string) => setSorter({ ...sorter, key }),
+    setOrderDesc: (desc: boolean) => setSorter({ ...sorter, desc }),
+    sorterKey: sorter.key,
+  };
+};

dashboard/client/src/util/localData.ts

@@ -0,0 +1,12 @@
+export const getLocalStorage = <T>(key: string) => {
+  const data = window.localStorage.getItem(key);
+  try {
+    return JSON.parse(data || "") as T;
+  } catch {
+    return data;
+  }
+};
+
+export const setLocalStorage = (key: string, value: any) => {
+  return window.localStorage.setItem(key, JSON.stringify(value));
+};