Frontend #173: Version List

frontend/src/components/Inspector/VersionList.jsx

@@ -0,0 +1,147 @@
+import React, { PureComponent } from "react";
+
+import useCachedMultipart from "../../hooks/useCachedMultipart";
+
+import Box from "@mui/joy/Box";
+import Typography from "@mui/joy/Typography";
+
+import { Treemap, ResponsiveContainer, Tooltip } from "recharts";
+
+const COLORS = ["#8889DD", "#9597E4", "#8DC77B", "#A5D297", "#E2CF45", "#F8C12D"];
+
+const CustomTooltip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    return (
+      <div
+        style={{
+          backgroundColor: "black",
+        }}
+      >
+        {/* <p className="label">ActiveMonth: {payload[0].metrics.userActiveMonthScore}</p> */}
+        <p className="label">Version: {payload[0].payload.name}</p>
+        <p className="label">Amount: {payload[0].payload.value}</p>
+      </div>
+    );
+  }
+
+  return null;
+};
+
+class CustomizedContent extends PureComponent {
+  render() {
+    const { root, depth, x, y, width, height, index, payload, colors, rank, name } = this.props;
+    console.log("versCustomizedContent", root.children[index]);
+
+    return (
+      <g>
+        <rect
+          x={x}
+          y={y}
+          width={width}
+          height={height}
+          style={{
+            fill: depth < 2 ? colors[Math.floor((index / root.children.length) * 6)] : "#ffffff00",
+            stroke: "#fff",
+            strokeWidth: 2 / (depth + 1e-10),
+            strokeOpacity: 1 / (depth + 1e-10),
+          }}
+        />
+        {depth === 1 ? (
+          <text x={x + width / 2} y={y + height / 2 + 7} textAnchor="middle" fill="#fff" fontSize={20}>
+            {name}
+          </text>
+        ) : null}
+        {depth === 2 && width > 75 && (
+          <text x={x + 4} y={y + 18} fill="#fff" fontSize={14} fillOpacity={0.9}>
+            {root.children[index].name}
+          </text>
+        )}
+      </g>
+    );
+  }
+}
+
+function VersionList({ instances }) {
+  const data = React.useMemo(() => {
+    const versionsCounts = {};
+
+    instances.map((instance) => {
+      const version = instance.version;
+      if (versionsCounts[version]) {
+        versionsCounts[version] += 1;
+      } else {
+        versionsCounts[version] = 1;
+      }
+    });
+    console.log("versionsCounts", versionsCounts);
+
+    const stable = Object.keys(versionsCounts)
+      .filter((version) => version !== "" && version !== "unknown version")
+      .filter((version) => version.indexOf("-") === -1 && version.indexOf(".") !== -1 && version.length == 6)
+      .map((version) => {
+        return { name: version, size: versionsCounts[version] };
+      });
+
+    const unstable = Object.keys(versionsCounts)
+      .filter((version) => version !== "" && version !== "unknown version")
+      .filter((version) => version.indexOf("-") !== -1 || version.indexOf(".") === -1 || version.length != 6)
+      .map((version) => {
+        return { name: version, size: versionsCounts[version] };
+      });
+
+    const unknown = Object.keys(versionsCounts)
+      .filter((version) => version === "" || version === "unknown version")
+      .map((version) => {
+        return { name: version, size: versionsCounts[version] };
+      });
+
+    const data = [
+      {
+        name: "stable",
+        children: stable,
+      },
+      {
+        name: "unstable",
+        children: unstable,
+      },
+      {
+        name: "unknown",
+        children: unknown,
+      },
+    ];
+    console.log("vers data", data);
+
+    return data;
+  }, [instances]);
+
+  return (
+    <ResponsiveContainer width="100%" height={600}>
+      <Treemap
+        data={data}
+        dataKey="size"
+        stroke="#fff"
+        fill="#8884d8"
+        animationDuration={0}
+        content={<CustomizedContent colors={COLORS} />}
+      >
+        <Tooltip cursor={{ strokeDasharray: "3 3" }} content={<CustomTooltip />} />
+      </Treemap>
+    </ResponsiveContainer>
+  );
+}
+
+export default function VersionListDataWrapper() {
+  const {
+    isLoading: isLoadingIns,
+    isSuccess: isSuccessIns,
+    loadingPercent: loadingPercentIns,
+    isError: isErrorIns,
+    error: errorIns,
+    data: dataIns,
+  } = useCachedMultipart("instanceData", "instance");
+
+  if (isLoadingIns) return "Loading...";
+  if (isErrorIns) return "An error has occurred: " + errorIns.message;
+
+  return <Box>{isSuccessIns && <VersionList instances={dataIns} />}</Box>;
+}

frontend/src/pages/Inspector.jsx

@@ -12,6 +12,7 @@ import Box from "@mui/joy/Box";
 
 import Overview from "../components/Inspector/Overview";
 import Versions from "../components/Inspector/Versions";
+import VersionList from "../components/Inspector/VersionList";
 import Sus from "../components/Inspector/Sus";
 
 export default function Inspector() {
@@ -32,13 +33,17 @@ export default function Inspector() {
         setTabIndex(1);
         break;
 
-      case "/inspect/sus":
+      case "/inspect/version_list":
         setTabIndex(2);
         break;
 
-      case "/inspect/debug":
+      case "/inspect/sus":
         setTabIndex(3);
         break;
+
+      // case "/inspect/debug":
+      //   setTabIndex(4);
+      //   break;
     }
   }, []);
 
@@ -54,12 +59,16 @@ export default function Inspector() {
         break;
 
       case 2:
-        navigate("sus");
+        navigate("version_list");
         break;
 
       case 3:
-        navigate("debug");
+        navigate("sus");
         break;
+
+      // case 4:
+      //   navigate("debug");
+      //   break;
     }
   };
 
@@ -83,6 +92,9 @@ export default function Inspector() {
             Version Distribution
           </Tab>
           <Tab variant={"soft"} color={tabIndex === 2 ? "primary" : "neutral"}>
+            Version List
+          </Tab>
+          <Tab variant={"soft"} color={tabIndex === 3 ? "primary" : "neutral"}>
             Suspicious Instances
           </Tab>
           {/* <Tab>Instance Debugger</Tab> */}
@@ -112,9 +124,17 @@ export default function Inspector() {
               }
             />
             <Route
-              path="/sus"
+              path="/version_list"
               element={
                 <TabPanel value={2}>
+                  <Versions />
+                </TabPanel>
+              }
+            />
+            <Route
+              path="/sus"
+              element={
+                <TabPanel value={3}>
                   <Sus />
                 </TabPanel>
               }