Plot Sysinfo (#1054)

Expands the cpuplot with memory plots and individual cpu plots. Also
improves the styling and handling of multiple plots.

frontend/app/block/block.tsx

@@ -4,6 +4,7 @@
 import { BlockComponentModel2, BlockProps } from "@/app/block/blocktypes";
 import { PlotView } from "@/app/view/plotview/plotview";
 import { PreviewModel, PreviewView, makePreviewModel } from "@/app/view/preview/preview";
+import { SysinfoView, SysinfoViewModel, makeSysinfoViewModel } from "@/app/view/sysinfo/sysinfo";
 import { ErrorBoundary } from "@/element/errorboundary";
 import { CenteredDiv } from "@/element/quickelems";
 import { NodeModel, useDebouncedNodeInnerRect } from "@/layout/index";
@@ -16,7 +17,6 @@ import {
 import { getWaveObjectAtom, makeORef, useWaveObjectValue } from "@/store/wos";
 import { focusedBlockId, getElemAsStr } from "@/util/focusutil";
 import { isBlank } from "@/util/util";
-import { CpuPlotView, CpuPlotViewModel, makeCpuPlotViewModel } from "@/view/cpuplot/cpuplot";
 import { HelpView, HelpViewModel, makeHelpViewModel } from "@/view/helpview/helpview";
 import { QuickTipsView, QuickTipsViewModel } from "@/view/quicktipsview/quicktipsview";
 import { TermViewModel, TerminalView, makeTerminalModel } from "@/view/term/term";
@@ -47,8 +47,9 @@ function makeViewModel(blockId: string, blockView: string, nodeModel: NodeModel)
     if (blockView === "waveai") {
         return makeWaveAiViewModel(blockId);
     }
-    if (blockView === "cpuplot") {
-        return makeCpuPlotViewModel(blockId);
+    if (blockView === "cpuplot" || blockView == "sysinfo") {
+        // "cpuplot" is for backwards compatibility with already-opened widgets
+        return makeSysinfoViewModel(blockId, blockView);
     }
     if (blockView === "help") {
         return makeHelpViewModel(blockId, nodeModel);
@@ -89,8 +90,9 @@ function getViewElem(
     if (blockView === "waveai") {
         return <WaveAi key={blockId} blockId={blockId} model={viewModel as WaveAiModel} />;
     }
-    if (blockView === "cpuplot") {
-        return <CpuPlotView key={blockId} blockId={blockId} model={viewModel as CpuPlotViewModel} />;
+    if (blockView === "cpuplot" || blockView === "sysinfo") {
+        // "cpuplot" is for backwards compatibility with already opened widgets
+        return <SysinfoView key={blockId} blockId={blockId} model={viewModel as SysinfoViewModel} />;
     }
     if (blockView == "help") {
         return <HelpView key={blockId} model={viewModel as HelpViewModel} />;

frontend/app/theme.less

@@ -106,6 +106,9 @@
     --conn-icon-color-7: #dbde52;
     --conn-icon-color-8: #58c142;
 
+    --sysinfo-cpu-color: #58c142;
+    --sysinfo-mem-color: #53b4ea;
+
     --bulb-color: rgb(255, 221, 51);
 
     // term colors (16 + 6) form the base terminal theme

frontend/app/view/sysinfo/sysinfo.less

@@ -0,0 +1,33 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+.scrollable {
+    flex-flow: column nowrap;
+    flex-grow: 1;
+    margin-bottom: 0;
+    overflow-y: auto;
+    .sysinfo-view {
+        width: 100%;
+        height: 100%;
+        display: grid;
+        grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
+        gap: 10px;
+
+        &.two-columns {
+            grid-template-columns: 1fr 1fr;
+        }
+
+        .sysinfo-plot-content {
+            min-height: 100px;
+            svg {
+                [aria-label="tip"] {
+                    g {
+                        path {
+                            color: var(--border-color);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}