feat: render network and gpu widgets individually instead of as pair (#…

…886)
MauriceNino · Jan 6, 2024 · df59729 · df59729
1 parent 0cd0855
commit df59729
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 107 deletions.
diff --git a/apps/docs/docs/integration/widget-preview.jsx b/apps/docs/docs/integration/widget-preview.jsx
@@ -24,6 +24,7 @@ export const WidgetPreview = () => {
     url: [isDev ? 'localhost:3000' : 'dash.mauz.dev'],
     widget: ['cpu'],
     multiView: [false],
+    filterGraph: ['both'],
     showPercentage: [false],
     primaryColor: [''],
     surfaceColor: [''],
@@ -37,6 +38,13 @@ export const WidgetPreview = () => {
 
   const multiViewAllowed =
     controls.widget.value === 'cpu' || controls.widget.value === 'storage';
+  const filterGraphAllowed =
+    controls.widget.value === 'network' || controls.widget.value === 'gpu';
+
+  const filterGraphOptions =
+    controls.widget.value === 'network'
+      ? ['both', 'up', 'down']
+      : ['both', 'load', 'memory'];
 
   const multiViewPart = multiViewAllowed
     ? getPart('multiView', controls.multiView)
@@ -49,16 +57,20 @@ export const WidgetPreview = () => {
   const gapPart = getPart('gap', controls.gap);
   const textSizePart = getPart('textSize', controls.textSize);
   const textOffsetPart = getPart('textOffset', controls.textOffset);
+  const filterPart =
+    filterGraphAllowed && controls.filterGraph.value !== 'both'
+      ? getPart('filter', controls.filterGraph)
+      : '';
 
   const protocol = controls.protocol.value;
   const url = controls.url.value;
   const widget = controls.widget.value;
   const outerRadius = controls.outerRadius.value;
 
   const finalUrl = encodeURI(
-    `${protocol}://${url}?graph=${widget}${multiViewPart}${showPercentagePart}` +
-      `${themePart}${primaryColorPart}${surfaceColorPart}${innerRadiusPart}` +
-      `${gapPart}${textSizePart}${textOffsetPart}`
+    `${protocol}://${url}?graph=${widget}${multiViewPart}${filterPart}` +
+      `${showPercentagePart}${themePart}${primaryColorPart}${surfaceColorPart}` +
+      `${innerRadiusPart}${gapPart}${textSizePart}${textOffsetPart}`
   );
 
   const code = `<iframe
@@ -126,6 +138,17 @@ export const WidgetPreview = () => {
                 ]}
               />
             )}
+            {filterGraphAllowed && (
+              <Select
+                label='Filter Graph'
+                value={controls.filterGraph.value.toString()}
+                onChange={e => controls.filterGraph.setValue(e)}
+                data={filterGraphOptions.map(e => ({
+                  value: e,
+                  label: e.charAt(0).toUpperCase() + e.slice(1),
+                }))}
+              />
+            )}
             <Select
               label='Show Percentage'
               value={controls.showPercentage.value.toString()}

diff --git a/apps/docs/docs/integration/widgets.mdx b/apps/docs/docs/integration/widgets.mdx
@@ -37,6 +37,13 @@ These can be shown, by passing this parameter.
 
 - type: `boolean`
 
+### `filter`
+
+For views with multiple graphs, filter the view to just a single graph.
+
+- type (when `graph=network`): `string` (`up`, `down`)
+- type (when `graph=gpu`): `string` (`load`, `memory`)
+
 ### `showPercentage`
 
 Show a label with the current percentage of the graph.

diff --git a/apps/view/src/components/single-widget-chart.tsx b/apps/view/src/components/single-widget-chart.tsx
@@ -105,13 +105,15 @@ export const SingleWidgetChart: FC = () => {
         load: networkLoad,
         data: serverInfo.network,
         config: config,
+        filter: query.filter,
       },
     },
     gpu: {
       Component: GpuChart,
       props: {
         load: gpuLoad,
         index: 0,
+        filter: query.filter,
       },
     },
   };

diff --git a/apps/view/src/services/query-params.ts b/apps/view/src/services/query-params.ts
@@ -24,6 +24,7 @@ type QueryResult =
       overrideThemeSurface?: string;
       radius?: string;
       gap?: string;
+      filter?: string;
     };
 
 const sizeRegex = /^\d+\D+$/;
@@ -49,6 +50,7 @@ export const useQuery = (): QueryResult => {
       overrideThemeSurface: query['surface'] as string,
       radius: extractSizeValue(query['innerRadius'] as string),
       gap: extractSizeValue(query['gap'] as string),
+      filter: ((query['filter'] as string) ?? "").toLowerCase(),
     };
   }
 

diff --git a/apps/view/src/widgets/gpu.tsx b/apps/view/src/widgets/gpu.tsx
@@ -20,6 +20,7 @@ type GpuChartProps = {
   showPercentages: boolean;
   textOffset?: string;
   textSize?: string;
+  filter?: string;
 };
 
 export const GpuChart: FC<GpuChartProps> = ({
@@ -28,6 +29,7 @@ export const GpuChart: FC<GpuChartProps> = ({
   showPercentages,
   textOffset,
   textSize,
+  filter,
 }) => {
   const theme = useTheme();
 
@@ -40,51 +42,63 @@ export const GpuChart: FC<GpuChartProps> = ({
     y: load.layout[index].memory,
   })) as ChartVal[];
 
-  return (
-    <MultiChartContainer columns={2}>
-      <ChartContainer
-        contentLoaded={chartDataLoad.length > 1}
-        textLeft={
-          showPercentages
-            ? `%: ${(chartDataLoad.at(-1)?.y as number)?.toFixed(1)} (Load)`
-            : undefined
-        }
-        textOffset={textOffset}
-        textSize={textSize}
-        renderChart={size => (
-          <DefaultAreaChart
-            data={chartDataLoad}
-            height={size.height}
-            width={size.width}
-            color={theme.colors.gpuPrimary}
-            renderTooltip={val => `${val.payload?.[0]?.value?.toFixed(1)} %`}
-          >
-            <YAxis hide={true} type='number' domain={[-5, 105]} />
-          </DefaultAreaChart>
-        )}
-      ></ChartContainer>
+  const chartLoad = (
+    <ChartContainer
+    contentLoaded={chartDataLoad.length > 1}
+    textLeft={
+      showPercentages
+        ? `%: ${(chartDataLoad.at(-1)?.y as number)?.toFixed(1)} (Load)`
+        : undefined
+    }
+    textOffset={textOffset}
+    textSize={textSize}
+    renderChart={size => (
+      <DefaultAreaChart
+        data={chartDataLoad}
+        height={size.height}
+        width={size.width}
+        color={theme.colors.gpuPrimary}
+        renderTooltip={val => `${val.payload?.[0]?.value?.toFixed(1)} %`}
+      >
+        <YAxis hide={true} type='number' domain={[-5, 105]} />
+      </DefaultAreaChart>
+    )}
+  ></ChartContainer>
+  );
 
-      <ChartContainer
-        contentLoaded={chartDataMemory.length > 1}
-        textLeft={`%: ${(chartDataMemory.at(-1)?.y as number)?.toFixed(
-          1
-        )} (Memory)`}
-        textOffset={textOffset}
-        textSize={textSize}
-        renderChart={size => (
-          <DefaultAreaChart
-            data={chartDataMemory}
-            height={size.height}
-            width={size.width}
-            color={theme.colors.gpuPrimary}
-            renderTooltip={val => `${val.payload?.[0]?.value?.toFixed(1)} %`}
-          >
-            <YAxis hide={true} type='number' domain={[-5, 105]} />
-          </DefaultAreaChart>
-        )}
-      ></ChartContainer>
-    </MultiChartContainer>
+  const chartMemory = (
+    <ChartContainer
+    contentLoaded={chartDataMemory.length > 1}
+    textLeft={`%: ${(chartDataMemory.at(-1)?.y as number)?.toFixed(
+      1
+    )} (Memory)`}
+    textOffset={textOffset}
+    textSize={textSize}
+    renderChart={size => (
+      <DefaultAreaChart
+        data={chartDataMemory}
+        height={size.height}
+        width={size.width}
+        color={theme.colors.gpuPrimary}
+        renderTooltip={val => `${val.payload?.[0]?.value?.toFixed(1)} %`}
+      >
+        <YAxis hide={true} type='number' domain={[-5, 105]} />
+      </DefaultAreaChart>
+    )}
+  ></ChartContainer>
   );
+
+  if (filter == "load")
+    return <MultiChartContainer columns={1}>{chartLoad}</MultiChartContainer>;
+  else if (filter == "memory")
+    return <MultiChartContainer columns={1}>{chartMemory}</MultiChartContainer>;
+  else
+    return (
+      <MultiChartContainer columns={2}>
+        {chartLoad}
+        {chartMemory}
+      </MultiChartContainer>
+    );
 };
 
 type GpuWidgetProps = {

diff --git a/apps/view/src/widgets/network.tsx b/apps/view/src/widgets/network.tsx
@@ -21,6 +21,7 @@ type NetworkChartProps = {
   showPercentages: boolean;
   textOffset?: string;
   textSize?: string;
+  filter?: string;
 };
 
 export const NetworkChart: FC<NetworkChartProps> = ({
@@ -30,6 +31,7 @@ export const NetworkChart: FC<NetworkChartProps> = ({
   showPercentages,
   textOffset,
   textSize,
+  filter,
 }) => {
   const theme = useTheme();
 
@@ -55,69 +57,81 @@ export const NetworkChart: FC<NetworkChartProps> = ({
     ...chartDataDown.map(d => d.y as number)
   );
 
-  return (
-    <MultiChartContainer columns={2}>
-      <ChartContainer
-        contentLoaded={chartDataUp.length > 1}
-        textLeft={
-          showPercentages
-            ? `↑ ${bpsPrettyPrint(
-                ((chartDataUp.at(-1)?.y as number) ?? 0) * 8
-              )}`
-            : '↑'
-        }
-        textOffset={textOffset}
-        textSize={textSize}
-        renderChart={size => (
-          <DefaultAreaChart
-            data={chartDataUp}
-            height={size.height}
-            width={size.width}
-            color={theme.colors.networkPrimary}
-            renderTooltip={val =>
-              bpsPrettyPrint((val.payload?.[0]?.value ?? 0) * 8)
-            }
-          >
-            <YAxis
-              hide={true}
-              type='number'
-              domain={[maxUp * -0.1, maxUp * 1.1]}
-            />
-          </DefaultAreaChart>
-        )}
-      ></ChartContainer>
+  const chartUp = (
+    <ChartContainer
+      contentLoaded={chartDataUp.length > 1}
+      textLeft={
+        showPercentages
+          ? `↑ ${bpsPrettyPrint(
+            ((chartDataUp.at(-1)?.y as number) ?? 0) * 8
+          )}`
+          : '↑'
+      }
+      textOffset={textOffset}
+      textSize={textSize}
+      renderChart={size => (
+        <DefaultAreaChart
+          data={chartDataUp}
+          height={size.height}
+          width={size.width}
+          color={theme.colors.networkPrimary}
+          renderTooltip={val =>
+            bpsPrettyPrint((val.payload?.[0]?.value ?? 0) * 8)
+          }
+        >
+          <YAxis
+            hide={true}
+            type='number'
+            domain={[maxUp * -0.1, maxUp * 1.1]}
+          />
+        </DefaultAreaChart>
+      )}
+    ></ChartContainer>
+  );
 
-      <ChartContainer
-        contentLoaded={chartDataDown.length > 1}
-        textLeft={
-          showPercentages
-            ? `↓ ${bpsPrettyPrint(
-                ((chartDataDown.at(-1)?.y as number) ?? 0) * 8
-              )}`
-            : '↓'
-        }
-        textOffset={textOffset}
-        textSize={textSize}
-        renderChart={size => (
-          <DefaultAreaChart
-            data={chartDataDown}
-            height={size.height}
-            width={size.width}
-            color={theme.colors.networkPrimary}
-            renderTooltip={val =>
-              bpsPrettyPrint((val.payload?.[0]?.value ?? 0) * 8)
-            }
-          >
-            <YAxis
-              hide={true}
-              type='number'
-              domain={[maxDown * -0.1, maxDown * 1.1]}
-            />
-          </DefaultAreaChart>
-        )}
-      ></ChartContainer>
-    </MultiChartContainer>
+  const chartDown = (
+    <ChartContainer
+      contentLoaded={chartDataDown.length > 1}
+      textLeft={
+        showPercentages
+          ? `↓ ${bpsPrettyPrint(
+            ((chartDataDown.at(-1)?.y as number) ?? 0) * 8
+          )}`
+          : '↓'
+      }
+      textOffset={textOffset}
+      textSize={textSize}
+      renderChart={size => (
+        <DefaultAreaChart
+          data={chartDataDown}
+          height={size.height}
+          width={size.width}
+          color={theme.colors.networkPrimary}
+          renderTooltip={val =>
+            bpsPrettyPrint((val.payload?.[0]?.value ?? 0) * 8)
+          }
+        >
+          <YAxis
+            hide={true}
+            type='number'
+            domain={[maxDown * -0.1, maxDown * 1.1]}
+          />
+        </DefaultAreaChart>
+      )}
+    ></ChartContainer>
   );
+
+  if (filter == "up")
+    return <MultiChartContainer columns={1}>{chartUp}</MultiChartContainer>;
+  else if (filter == "down")
+    return <MultiChartContainer columns={1}>{chartDown}</MultiChartContainer>;
+  else
+    return (
+      <MultiChartContainer columns={2}>
+        {chartUp}
+        {chartDown}
+      </MultiChartContainer>
+    );
 };
 
 type NetworkWidgetProps = {