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

dashboard/client/src/components/StatesCounter.tsx

@@ -0,0 +1,31 @@
+import { Grid } from "@material-ui/core";
+import React from "react";
+import { StatusChip } from "./StatusChip";
+
+const StateCounter = ({
+  type,
+  list,
+}: {
+  type: string;
+  list: { state: string }[];
+}) => {
+  const stateMap = {} as { [state: string]: number };
+  list.forEach(({ state }) => {
+    stateMap[state] = stateMap[state] + 1 || 1;
+  });
+
+  return (
+    <Grid container spacing={2} alignItems="center">
+      <Grid item>
+        <StatusChip status="TOTAL" type={type} suffix={`x ${list.length}`} />
+      </Grid>
+      {Object.entries(stateMap).map(([s, num]) => (
+        <Grid item>
+          <StatusChip status={s} type={type} suffix={` x ${num}`} />
+        </Grid>
+      ))}
+    </Grid>
+  );
+};
+
+export default StateCounter;