fix peirphery client not passing through disks query

frontend/src/components/build/Updates.tsx

@@ -28,26 +28,26 @@ const Updates: Component<{}> = (p) => {
   });
   onCleanup(() => unsub())
   return (
-    <Show
-      when={
-        updates.loaded() &&
-        (updates.collection()?.length || 0) > 0
-      }
+    <Grid
+      class={combineClasses("card shadow")}
+      style={{ "min-width": "350px" }}
     >
-      <Grid class={combineClasses("card shadow")}>
-        <h1>updates</h1>
-        <Grid class="updates-container scroller">
-          <For each={updates.collection()}>
-            {(update) => <Update update={update} />}
-          </For>
-          <Show when={!updates.noMore()}>
-            <button class="grey" style={{ width: "100%" }} onClick={() => updates.loadMore()}>
-              load more
-            </button>
-          </Show>
-        </Grid>
+      <h1>updates</h1>
+      <Grid class="updates-container scroller">
+        <For each={updates.collection()}>
+          {(update) => <Update update={update} />}
+        </For>
+        <Show when={!updates.noMore()}>
+          <button
+            class="grey"
+            style={{ width: "100%" }}
+            onClick={() => updates.loadMore()}
+          >
+            load more
+          </button>
+        </Show>
       </Grid>
-    </Show>
+    </Grid>
   );
 };
 

frontend/src/components/deployment/Updates.tsx

@@ -14,7 +14,7 @@ const Updates: Component<{}> = (p) => {
   const params = useParams();
   const updates = useUpdates({ type: "Deployment", id: params.id });
   const buildID = () => deployments.get(params.id)?.deployment.build_id;
-  let unsub = () => {}
+  let unsub = () => {};
   createEffect(() => {
     unsub();
     unsub = ws.subscribe([], (update) => {
@@ -30,11 +30,19 @@ const Updates: Component<{}> = (p) => {
   });
   onCleanup(() => unsub());
   return (
-    <Grid class={combineClasses("card shadow")}>
+    <Grid
+      class={combineClasses("card shadow")}
+      style={{ "min-width": "350px" }}
+    >
       <h1>updates</h1>
-      <Show when={updates.loaded()} fallback={<Flex justifyContent="center">
-        <Loading type="three-dot" />
-      </Flex>}>
+      <Show
+        when={updates.loaded()}
+        fallback={
+          <Flex justifyContent="center">
+            <Loading type="three-dot" />
+          </Flex>
+        }
+      >
         <Grid class="updates-container scroller">
           <For each={updates.collection()}>
             {(update) => <Update update={update} />}

frontend/src/components/deployment/tabs/config/Config.tsx

@@ -17,7 +17,7 @@ import { Tab } from "../../../shared/tabs/Tabs";
 import RepoMount from "./mount-repo/RepoMount";
 import { OnClone, OnPull } from "./mount-repo/OnGit";
 import Loading from "../../../shared/loading/Loading";
-import Owners from "./Owners";
+import Permissions from "./Permissions";
 import { pushNotification, URL } from "../../../..";
 import { combineClasses, copyToClipboard, getId } from "../../../../util/helpers";
 import { useAppDimensions } from "../../../../state/DimensionProvider";
@@ -33,10 +33,7 @@ const Config: Component<{}> = () => {
     <Show when={deployment.loaded}>
       <Grid class="config">
         <SimpleTabs
-          containerStyle={{
-            height: "100%",
-            width: "100%",
-          }}
+          containerClass="config-items"
           tabsGap="0rem"
           localStorageKey="deployment-config-tab"
           tabs={[
@@ -101,14 +98,14 @@ const Config: Component<{}> = () => {
               ),
             },
             user().admin && {
-              title: "collaborators",
+              title: "permissions",
               element: () => (
                 <Grid
                   class="config-items scroller"
                   style={{ height: "100%" }}
                   placeItems="start center"
                 >
-                  <Owners />
+                  <Permissions />
                 </Grid>
               ),
             },

frontend/src/components/deployment/tabs/config/Permissions.tsx

@@ -32,7 +32,7 @@ const PERMISSIONS_OPTIONS = [
   PermissionLevel.Update,
 ];
 
-const Owners: Component<{}> = (p) => {
+const Permissions: Component<{}> = (p) => {
   const { ws } = useAppState();
   const { deployment } = useConfig();
   const { user } = useUser();
@@ -66,8 +66,7 @@ const Owners: Component<{}> = (p) => {
   });
   onCleanup(() => unsub());
   return (
-    <Show when={deployment.loaded && users().length > 0}>
-      <Grid class="config">
+    <Grid class="config">
         <Grid class="config-items scroller" style={{ height: "100%" }}>
           <Grid class={combineClasses("config-item shadow")} gap="0.5rem">
             <Menu
@@ -173,8 +172,7 @@ const Owners: Component<{}> = (p) => {
           </Grid>
         </Grid>
       </Grid>
-    </Show>
   );
 };
 
-export default Owners;
+export default Permissions;

frontend/src/components/deployment/tabs/config/container/Env.tsx

@@ -63,17 +63,22 @@ const EditDotEnv: Component<{}> = (p) => {
       title={`${deployment.name} environment`}
       target="edit"
       targetClass="blue"
-      leftOfX={
-        () => <button class="green" onClick={toggleShow}>
+      leftOfX={() => (
+        <button class="green" onClick={toggleShow}>
           confirm
         </button>
-      }
+      )}
       content={() => (
         <TextArea
           class="scroller"
           value={dotenv()}
           onEdit={setDotEnv}
-          style={{ width: "40rem", "max-width": "90vw", height: "80vh" }}
+          style={{
+            width: "700px",
+            "max-width": "90vw",
+            height: "80vh",
+            padding: "1rem",
+          }}
           spellcheck={false}
         />
       )}

frontend/src/components/deployment/tabs/log/log.module.scss

@@ -14,7 +14,7 @@
 	white-space: pre-line;
 	overflow-wrap: anywhere;
 	tab-size: 2;
-	padding: 0rem 1rem;
+	padding: 1rem;
 	margin-bottom: 40vh;
 }
 

frontend/src/components/home/Summary.tsx

@@ -7,8 +7,6 @@ import s from "./home.module.scss";
 import Flex from "../shared/layout/Flex";
 
 const Summary: Component<{}> = (p) => {
-  const deployentCount = useDeploymentCount();
-  const serverCount = useServerCount();
   const { builds } = useAppState();
   return (
     <Flex
@@ -17,68 +15,9 @@ const Summary: Component<{}> = (p) => {
     >
       <h1>summary</h1>
       <Flex gap="1rem" justifyContent="flex-end" class="wrap">
-        <Grid
-          placeItems="start end"
-          class={combineClasses(s.SummaryItem, "shadow")}
-          gap="0.5rem"
-        >
-          <h2>servers</h2>
-          <Flex gap="0.4rem">
-            <h2 class="text-green">{serverCount().healthy}</h2> healthy
-          </Flex>
-          <Show when={serverCount().unhealthy > 0}>
-            <Flex gap="0.4rem">
-              <h2 class="text-red">{serverCount().unhealthy}</h2> unhealthy
-            </Flex>
-          </Show>
-          <Show when={serverCount().disabled > 0}>
-            <Flex gap="0.4rem">
-              <h2 class="text-blue">{serverCount().disabled}</h2> disabled
-            </Flex>
-          </Show>
-          <Flex gap="0.4rem">
-            <h2 class="text-green">{serverCount().total}</h2> total
-          </Flex>
-        </Grid>
-        <Grid
-          placeItems="start end"
-          class={combineClasses(s.SummaryItem, "shadow")}
-          gap="0.5rem"
-        >
-          <h2>deployments</h2>
-          <Flex gap="0.4rem">
-            <h2 class="text-green">{deployentCount().running}</h2> running
-          </Flex>
-          <Show when={deployentCount().stopped > 0}>
-            <Flex gap="0.4rem">
-              <h2 class="text-red">{deployentCount().stopped}</h2> stopped
-            </Flex>
-          </Show>
-          <Show when={deployentCount().notDeployed > 0}>
-            <Flex gap="0.4rem">
-              <h2 class="text-blue">{deployentCount().notDeployed}</h2> not
-              deployed
-            </Flex>
-          </Show>
-          <Show when={deployentCount().unknown > 0}>
-            <Flex gap="0.4rem">
-              <h2 class="text-orange">{deployentCount().unknown}</h2> unknown
-            </Flex>
-          </Show>
-          <Flex gap="0.4rem">
-            <h2 class="text-green">{deployentCount().total}</h2> total
-          </Flex>
-        </Grid>
-        <Grid
-          placeItems="start end"
-          class={combineClasses(s.SummaryItem, "shadow")}
-          gap="0.5rem"
-        >
-          <h2>builds</h2>
-          <Flex gap="0.4rem">
-            <h2 class="text-green">{builds.ids()?.length}</h2> total
-          </Flex>
-        </Grid>
+        <ServersSummary />
+        <DeploymentsSummary />
+        <BuildsSummary />
       </Flex>
     </Flex>
   );
@@ -86,6 +25,141 @@ const Summary: Component<{}> = (p) => {
 
 export default Summary;
 
+const BuildsSummary = () => {
+  const { builds } = useAppState();
+  return (
+    <Grid
+      placeItems="start center"
+      class={combineClasses(s.SummaryItem, "shadow")}
+      gap="0.5rem"
+    >
+      <h2>builds</h2>
+      <Grid gap="0.5rem" style={{ width: "100%", height: "100%" }}>
+        <Flex
+          gap="0.4rem"
+          justifyContent="space-between"
+          style={{ width: "100%" }}
+        >
+          <div>total</div>
+          <h2 class="text-green">{builds.ids()?.length}</h2>
+        </Flex>
+      </Grid>
+    </Grid>
+  );
+};
+
+const DeploymentsSummary = () => {
+  const deployentCount = useDeploymentCount();
+  return (
+    <Grid
+      placeItems="start center"
+      class={combineClasses(s.SummaryItem, "shadow")}
+      gap="0.5rem"
+    >
+      <h2>deployments</h2>
+      <Grid gap="0.5rem" style={{ width: "100%", height: "100%" }}>
+        <Flex
+          gap="0.4rem"
+          justifyContent="space-between"
+          style={{ width: "100%" }}
+        >
+          <div>total</div>
+          <h2 class="text-green">{deployentCount().total}</h2>
+        </Flex>
+        <Flex
+          gap="0.4rem"
+          justifyContent="space-between"
+          style={{ width: "100%" }}
+        >
+          <div>running</div>
+          <h2 class="text-green">{deployentCount().running}</h2>
+        </Flex>
+        <Show when={deployentCount().stopped > 0}>
+          <Flex
+            gap="0.4rem"
+            justifyContent="space-between"
+            style={{ width: "100%" }}
+          >
+            <div>stopped</div>
+            <h2 class="text-red">{deployentCount().stopped}</h2>
+          </Flex>
+        </Show>
+        <Show when={deployentCount().notDeployed > 0}>
+          <Flex
+            gap="0.4rem"
+            justifyContent="space-between"
+            style={{ width: "100%" }}
+          >
+            <div>not deployed</div>
+            <h2 class="text-blue">{deployentCount().notDeployed}</h2>
+          </Flex>
+        </Show>
+        <Show when={deployentCount().unknown > 0}>
+          <Flex
+            gap="0.4rem"
+            justifyContent="space-between"
+            style={{ width: "100%" }}
+          >
+            <div>unknown</div>
+            <h2 class="text-orange">{deployentCount().unknown}</h2>
+          </Flex>
+        </Show>
+      </Grid>
+    </Grid>
+  );
+};
+
+const ServersSummary = () => {
+  const serverCount = useServerCount();
+  return (
+    <Grid
+      placeItems="start center"
+      class={combineClasses(s.SummaryItem, "shadow")}
+      gap="0.5rem"
+    >
+      <h2>servers</h2>
+      <Grid gap="0.5rem" style={{ width: "100%", height: "100%" }}>
+        <Flex
+          gap="0.4rem"
+          justifyContent="space-between"
+          style={{ width: "100%" }}
+        >
+          <div>total</div>
+          <h2 class="text-green">{serverCount().total}</h2>
+        </Flex>
+        <Flex
+          gap="0.4rem"
+          justifyContent="space-between"
+          style={{ width: "100%" }}
+        >
+          <div>healthy</div>
+          <h2 class="text-green">{serverCount().healthy}</h2>
+        </Flex>
+        <Show when={serverCount().unhealthy > 0}>
+          <Flex
+            gap="0.4rem"
+            justifyContent="space-between"
+            style={{ width: "100%" }}
+          >
+            <div>unhealthy</div>
+            <h2 class="text-red">{serverCount().unhealthy}</h2>
+          </Flex>
+        </Show>
+        <Show when={serverCount().disabled > 0}>
+          <Flex
+            gap="0.4rem"
+            justifyContent="space-between"
+            style={{ width: "100%" }}
+          >
+            <div>disabled</div>
+            <h2 class="text-blue">{serverCount().disabled}</h2>
+          </Flex>
+        </Show>
+      </Grid>
+    </Grid>
+  );
+};
+
 function useDeploymentCount() {
   const { deployments } = useAppState();
   const count = createMemo(() => {
@@ -99,13 +173,13 @@ function useDeploymentCount() {
     for (const id of ids) {
       const state = deployments.get(id)!.state;
       if (state === DockerContainerState.NotDeployed) {
-        notDeployed++
+        notDeployed++;
       } else if (state === DockerContainerState.Running) {
-        running++
+        running++;
       } else if (state === DockerContainerState.Exited) {
-        stopped++
+        stopped++;
       } else if (state === DockerContainerState.Unknown) {
-        unknown++
+        unknown++;
       }
     }
     return { total: ids.length, running, stopped, notDeployed, unknown };

frontend/src/components/home/home.module.scss

@@ -15,6 +15,7 @@
 	background-color: c.$lightgrey;
 	padding: 1rem;
 	min-width: 100px;
+	grid-template-rows: auto 1fr;
 }
 
 // .Tabs {

frontend/src/components/login/Login.tsx

@@ -22,7 +22,7 @@ const Login: Component<{}> = (p) => {
       try {
         const user = await client.login(info);
         setUser(() => user);
-        pushNotification("good", "logged in!");
+        // pushNotification("good", "logged in!");
       } catch {
         pushNotification("bad", "login failed!");
       }

frontend/src/components/server/StatGraphs/Graphs.tsx

@@ -1,168 +0,0 @@
-import { Accessor, Component, createSignal, Show } from "solid-js";
-import { useAppState } from "../../../state/StateProvider";
-import Icon from "../../shared/Icon";
-import Grid from "../../shared/layout/Grid";
-import { readableTimestamp } from "../../../util/helpers";
-import Flex from "../../shared/layout/Flex";
-import Loading from "../../shared/loading/Loading";
-import { ApexOptions } from "apexcharts";
-import ApexChart from "../../shared/ApexChart";
-
-const MOVEMENT = 500;
-const NUM_PTS = 1000;
-const SKIP = 1;
-
-const Graphs: Component<{ id: string }> = (p) => {
-  // const { servers } = useAppState();
-  // const server = () => servers.get(p.id)!;
-  // const [stats, setStats] = createSignal<StoredStats[]>();
-  // const [offset, setOffset] = createSignal(0);
-  // const [reloadingLeft, setReloadingLeft] = createSignal(false);
-  // const [reloadingRight, setReloadingRight] = createSignal(false);
-  // const [reloadingReset, setReloadingReset] = createSignal(false);
-  // const reloadStatsLeft = async () => {
-  //   setReloadingLeft(true);
-  //   const newOffset = offset() + MOVEMENT;
-  //   const stats = await getServerStatsHistory(p.id, newOffset, NUM_PTS, SKIP);
-  //   setStats(stats.reverse());
-  //   setOffset(newOffset);
-  //   setReloadingLeft(false);
-  // };
-  // const reloadStatsRight = async () => {
-  //   setReloadingRight(true);
-  //   const newOffset = Math.max(offset() - MOVEMENT, 0);
-  //   const stats = await getServerStatsHistory(p.id, newOffset, NUM_PTS, SKIP);
-  //   setStats(stats.reverse());
-  //   setOffset(newOffset);
-  //   setReloadingRight(false);
-  // };
-  // const reloadStatsReset = async () => {
-  //   setReloadingReset(true);
-  //   const stats = await getServerStatsHistory(p.id, 0, NUM_PTS, SKIP);
-  //   setStats(stats.reverse());
-  //   setOffset(0);
-  //   setReloadingReset(false);
-  // };
-  // getServerStatsHistory(p.id, 0, NUM_PTS, SKIP).then((stats) =>
-  //   setStats(stats.reverse())
-  // );
-  return (
-    <Grid
-      gap="0rem"
-      placeItems="start center"
-      style={{ "background-color": "white" }}
-    >
-      {/* <Show when={stats()}>
-        <Flex
-          justifyContent="space-between"
-          style={{ margin: "1rem", width: "60%" }}
-        >
-          <Show
-            when={!reloadingLeft()}
-            fallback={
-              <Button class="grey">
-                <Loading type="three-dot" scale={0.2} />
-              </Button>
-            }
-          >
-            <Button
-              class="grey"
-              onClick={(e) => {
-                e.stopPropagation();
-                reloadStatsLeft();
-              }}
-            >
-              <Icon type="arrow-left" />
-            </Button>
-          </Show>
-          <Flex alignItems="center" style={{ width: "fit-content" }}>
-            <Show
-              when={!reloadingRight()}
-              fallback={
-                <Button class="grey">
-                  <Loading type="three-dot" scale={0.2} />
-                </Button>
-              }
-            >
-              <Button
-                class="grey"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  reloadStatsRight();
-                }}
-              >
-                <Icon type="arrow-right" />
-              </Button>
-            </Show>
-            <Show
-              when={!reloadingReset()}
-              fallback={
-                <Button class="grey">
-                  <Loading type="three-dot" scale={0.2} />
-                </Button>
-              }
-            >
-              <Button
-                class="grey"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  reloadStatsReset();
-                }}
-              >
-                <Icon type="double-chevron-right" />
-              </Button>
-            </Show>
-          </Flex>
-        </Flex>
-        <Graph stats={stats} field="cpu" server={server} />
-        <Graph stats={stats} field="mem" server={server} />
-        <Graph stats={stats} field="disk" server={server} />
-      </Show> */}
-    </Grid>
-  );
-};
-
-const Graph: Component<{
-  // stats: Accessor<StoredStats[] | undefined>;
-  // field: "cpu" | "mem" | "disk";
-  // server: () => Server;
-}> = (p) => {
-  // const options: () => ApexOptions = () => ({
-  //   chart: {
-  //     id: "stats",
-  //     type: "line",
-  //     width: 800,
-  //     height: 150,
-  //     events: {},
-  //   },
-  //   xaxis: {
-  //     labels: {
-  //       show: false,
-  //     },
-  //     categories: p.stats()!.map((stat) => readableTimestamp(stat.ts)),
-  //   },
-  //   series: [
-  //     {
-  //       name: p.field,
-  //       data:
-  //         p.field === "cpu"
-  //           ? p.stats()!.map((stat) => stat.cpu)
-  //           : p.field === "mem"
-  //           ? p.stats()!.map((stat) => stat.mem.usedMemPercentage)
-  //           : p.stats()!.map((stat) => stat.disk.usedPercentage),
-  //     },
-  //   ],
-  //   // theme: {
-  //   //   mode: isDark() ? "dark" : "light"
-  //   // },
-  // });
-
-  return (
-    <Grid placeItems="start center" gap="0rem">
-      {/* <h1 style={{ color: "black" }}>{p.field}</h1>
-      <ApexChart options={options()} /> */}
-    </Grid>
-  );
-};
-
-export default Graphs;

frontend/src/components/server/StatGraphs/StatGraphs.tsx

@@ -1,25 +0,0 @@
-import { Component, lazy } from "solid-js";
-import { useAppState } from "../../../state/StateProvider";
-import { useToggle } from "../../../util/hooks";
-import Icon from "../../shared/Icon";
-import CenterMenu from "../../shared/menu/CenterMenu";
-
-const Graphs = lazy(() => import("./Graphs"))
-
-const StatGraphs: Component<{ id: string }> = (p) => {
-  const { servers } = useAppState();
-  const [show, toggleShow] = useToggle();
-  const name = () => servers.get(p.id)?.server.name;
-  return (
-    <CenterMenu
-      show={show}
-      toggleShow={toggleShow}
-      target={<Icon type="timeline-line-chart" width="0.85rem" />}
-      targetClass="blue"
-      content={() => <Graphs id={p.id} />}
-      title={`${name()} stats`}
-    />
-  );
-};
-
-export default StatGraphs;

frontend/src/components/server/Updates.tsx

@@ -27,25 +27,26 @@ const Updates: Component<{}> = (p) => {
   });
   onCleanup(() => unsub());
   return (
-    <Show when={updates.loaded() && (updates.collection()?.length || 0) > 0}>
-      <Grid class={combineClasses("card shadow")}>
-        <h1>updates</h1>
-        <Grid class="updates-container scroller">
-          <For each={updates.collection()}>
-            {(update) => <Update update={update} />}
-          </For>
-          <Show when={!updates.noMore()}>
-            <button
-              class="grey"
-              style={{ width: "100%" }}
-              onClick={() => updates.loadMore()}
-            >
-              load more
-            </button>
-          </Show>
-        </Grid>
+    <Grid
+      class={combineClasses("card shadow")}
+      style={{ "min-width": "350px" }}
+    >
+      <h1>updates</h1>
+      <Grid class="updates-container scroller">
+        <For each={updates.collection()}>
+          {(update) => <Update update={update} />}
+        </For>
+        <Show when={!updates.noMore()}>
+          <button
+            class="grey"
+            style={{ width: "100%" }}
+            onClick={() => updates.loadMore()}
+          >
+            load more
+          </button>
+        </Show>
       </Grid>
-    </Show>
+    </Grid>
   );
 };
 

frontend/src/components/server/tabs/stats/Stats.tsx

@@ -1,19 +1,32 @@
-import { Component } from "solid-js";
+import { useParams } from "@solidjs/router";
+import { Component, createEffect, createSignal } from "solid-js";
+import { client } from "../../../..";
+import { useAppState } from "../../../../state/StateProvider";
+import { Timelength } from "../../../../types";
+import { useLocalStorage } from "../../../../util/hooks";
 import Grid from "../../../shared/layout/Grid";
-import DockerStats from "./DockerStats";
-import Pm2Processes from "./pm2/Pm2Processes";
-import SystemStats from "./SystemStats";
+
+const TIMELENGTHS = [
+  Timelength.OneMinute,
+  Timelength.FiveMinutes,
+  Timelength.FifteenMinutes,
+  Timelength.OneHour,
+  Timelength.SixHours,
+  Timelength.OneDay,
+];
 
 const Stats: Component<{}> = (p) => {
-  return (
-    <Grid class="config">
-      <Grid class="config-items">
-        <Pm2Processes />
-        <SystemStats />
-        <DockerStats />
-      </Grid>
-    </Grid>
+  const { servers } = useAppState();
+  const params = useParams();
+  const [timelength, setTimelength] = useLocalStorage(
+    Timelength.OneHour,
+    "server-stats-timelength-v1"
   );
+  const [stats, setStats] = createSignal();
+  createEffect(() => {
+    client.get_server_stats_history(params.id, { interval: timelength(), networks: true, components: true });
+  });
+  return <Grid style={{ width: "100%" }}></Grid>;
 };
 
-export default Stats;
+export default Stats;

frontend/src/components/shared/tabs/SimpleTabs.tsx

@@ -6,6 +6,7 @@ import {
   For,
   JSX,
   JSXElement,
+  Show,
 } from "solid-js";
 import { combineClasses } from "../../../util/helpers";
 import { LocalStorageSetter, useLocalStorage } from "../../../util/hooks";
@@ -81,13 +82,15 @@ export const ControlledTabs: Component<{
           )}
         </For>
       </Flex>
-      <div
-        style={{
-          width: "100%",
-        }}
-      >
-        {p.tabs[current()].element()}
-      </div>
+      <Show when={p.tabs[current()]} fallback={<div>invalid tab selected</div>}>
+        <div
+          style={{
+            width: "100%",
+          }}
+        >
+          {p.tabs[current()].element()}
+        </div>
+      </Show>
     </div>
   );
 };

frontend/src/components/update/update.module.scss

@@ -20,6 +20,7 @@
 	transform-origin: top;
 	animation-name: Enter;
 	animation-duration: 750ms;
+	min-width: 350px;
 }
 
 @keyframes EnterNoName {

lib/periphery_client/src/lib.rs

@@ -43,8 +43,8 @@ impl PeripheryClient {
         self.get_json(
             server,
             &format!(
-                "/stats?networks={}&components={}&processes={}",
-                query.networks, query.components, query.processes
+                "/stats?networks={}&components={}&processes={}&disks={}",
+                query.networks, query.components, query.processes, query.disks
             ),
         )
         .await