babystep for stats endpoint

package.json

@@ -16,6 +16,7 @@
     "prettier-plugin-motoko": "^0.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-google-charts": "^4.0.1",
     "react-markdown": "^6.0.2",
     "react-modal": "^3.14.3",
     "styled-components": "^5.3.0",

src/Stats.tsx

@@ -0,0 +1,47 @@
+import { useState, useEffect } from "react";
+import { backend } from "./config/actor";
+import { Chart } from "./components/Chart";
+
+function extract_slice(raw, prefix) {
+  const len = prefix.length;
+  return raw
+    .filter(([name, _]) => name.startsWith(prefix))
+    .map(([name, n]) => [name.slice(len), Number(n)]);
+}
+function join_slice(left, right) {
+  const l = Object.fromEntries(left);
+  const r = Object.fromEntries(right);
+  const full_key = [
+    ...new Set(
+      left.map(([name, _]) => name).concat(right.map(([name, _]) => name))
+    ),
+  ];
+  return full_key.map((name) => [name, l[name] || 0, r[name] || 0]);
+}
+function two_metric(canisters, installs, title, prefix) {
+  const new_canister = extract_slice(canisters, prefix);
+  const wasm = extract_slice(installs, prefix);
+  return [[title, "Canister", "Wasm"]].concat(join_slice(new_canister, wasm));
+}
+function one_metric(map, title, prefix) {
+  const slice = extract_slice(map, prefix);
+  return [[title, "Count"]].concat(slice);
+}
+
+export function Stats() {
+  const [example, setExample] = useState([]);
+  const [moc, setMoc] = useState([]);
+
+  useEffect(async () => {
+    const [_, canisters, installs] = await backend.getStats();
+    setExample(two_metric(canisters, installs, "Example", "example:"));
+    setMoc(one_metric(installs, "Moc", "moc:"));
+  }, []);
+
+  return (
+    <>
+      <Chart title="Example" data={example} />
+      <Chart title="Moc" data={moc} />
+    </>
+  );
+}

src/components/Chart.tsx

@@ -0,0 +1,21 @@
+import { Chart as GChart } from "react-google-charts";
+
+export function Chart({ title, data }) {
+  const height = 100 * (data.length - 1);
+  const options = {
+    title,
+    chartArea: { width: "50%" },
+    hAxis: { minValue: 0 },
+    bars: "horizontal",
+  };
+  return (
+    <GChart
+      chartType="BarChart"
+      data={data}
+      options={options}
+      width="80%"
+      height="{height}px"
+      legendToggle
+    />
+  );
+}

src/declarations/backend/backend.did

@@ -52,10 +52,7 @@ type Self =
                                }, vec record {
                                         text;
                                         nat;
-                                      }, vec record {
-                                               text;
-                                               nat;
-                                             }) query;
+                                      }) query;
    getSubtree: (CanisterInfo) ->
     (vec record {
            principal;
@@ -74,6 +71,7 @@ type Self =
              };
        wasm_module: wasm_module;
      }) -> ();
+   mergeTags: (text, opt text) -> ();
    removeCode: (CanisterInfo) -> ();
    resetStats: () -> ();
    start_canister: (record {canister_id: canister_id;}) -> ();

src/declarations/backend/backend.did.d.ts

@@ -69,12 +69,7 @@ export interface Self {
   getInitParams: ActorMethod<[], InitParams>;
   getStats: ActorMethod<
     [],
-    [
-      Stats,
-      Array<[string, bigint]>,
-      Array<[string, bigint]>,
-      Array<[string, bigint]>
-    ]
+    [Stats, Array<[string, bigint]>, Array<[string, bigint]>]
   >;
   getSubtree: ActorMethod<
     [CanisterInfo],
@@ -96,6 +91,7 @@ export interface Self {
     ],
     undefined
   >;
+  mergeTags: ActorMethod<[string, [] | [string]], undefined>;
   removeCode: ActorMethod<[CanisterInfo], undefined>;
   resetStats: ActorMethod<[], undefined>;
   start_canister: ActorMethod<[{ canister_id: canister_id }], undefined>;

src/declarations/backend/backend.did.js

@@ -107,7 +107,6 @@ export const idlFactory = ({ IDL }) => {
         Stats,
         IDL.Vec(IDL.Tuple(IDL.Text, IDL.Nat)),
         IDL.Vec(IDL.Tuple(IDL.Text, IDL.Nat)),
-        IDL.Vec(IDL.Tuple(IDL.Text, IDL.Nat)),
       ],
       ["query"]
     ),
@@ -138,6 +137,7 @@ export const idlFactory = ({ IDL }) => {
       [],
       []
     ),
+    mergeTags: IDL.Func([IDL.Text, IDL.Opt(IDL.Text)], [], []),
     removeCode: IDL.Func([CanisterInfo], [], []),
     resetStats: IDL.Func([], [], []),
     start_canister: IDL.Func(

src/index.js

@@ -1,20 +1,30 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { App } from "./App";
+import { Stats } from "./Stats";
 import reportWebVitals from "./reportWebVitals";
 import { ProvideLogging } from "./components/Logger";
 import "./assets/styles/reboot.css";
 import "./assets/styles/variables.css";
 import "./assets/fonts/CircularXX.css";
 
-ReactDOM.render(
-  <React.StrictMode>
-    <ProvideLogging>
-      <App />
-    </ProvideLogging>
-  </React.StrictMode>,
-  document.getElementById("root")
-);
+if (window.location.pathname === "/stats") {
+  ReactDOM.render(
+    <React.StrictMode>
+      <Stats />
+    </React.StrictMode>,
+    document.getElementById("root")
+  );
+} else {
+  ReactDOM.render(
+    <React.StrictMode>
+      <ProvideLogging>
+        <App />
+      </ProvideLogging>
+    </React.StrictMode>,
+    document.getElementById("root")
+  );
+}
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))