diff --git a/frontend/preview/previews/sysinfo.preview-util.ts b/frontend/preview/previews/sysinfo.preview-util.ts new file mode 100644 index 0000000000..b577d8607b --- /dev/null +++ b/frontend/preview/previews/sysinfo.preview-util.ts @@ -0,0 +1,61 @@ +// Copyright 2026, Command Line Inc. +// SPDX-License-Identifier: Apache-2.0 + +export const DefaultSysinfoHistoryPoints = 140; +export const MockSysinfoConnection = "local"; + +const MockMemoryTotal = 32; +const MockCoreCount = 6; + +function clamp(value: number, minValue: number, maxValue: number): number { + return Math.min(maxValue, Math.max(minValue, value)); +} + +function round1(value: number): number { + return Math.round(value * 10) / 10; +} + +export function makeMockSysinfoEvent( + ts: number, + step: number, + scope = MockSysinfoConnection +): Extract { + const baseCpu = clamp(42 + 18 * Math.sin(step / 6) + 8 * Math.cos(step / 3.5), 8, 96); + const memUsed = clamp(12 + 4 * Math.sin(step / 10) + 2 * Math.cos(step / 7), 6, MockMemoryTotal - 4); + const memAvailable = clamp(MockMemoryTotal - memUsed + 1.5, 0, MockMemoryTotal); + const values: Record = { + cpu: round1(baseCpu), + "mem:total": MockMemoryTotal, + "mem:used": round1(memUsed), + "mem:free": round1(MockMemoryTotal - memUsed), + "mem:available": round1(memAvailable), + }; + + for (let i = 0; i < MockCoreCount; i++) { + const coreCpu = clamp(baseCpu + 10 * Math.sin(step / 4 + i) + i - 3, 2, 100); + values[`cpu:${i}`] = round1(coreCpu); + } + + return { + event: "sysinfo", + scopes: [scope], + data: { + ts, + values, + }, + }; +} + +export function makeMockSysinfoHistory( + numPoints = DefaultSysinfoHistoryPoints, + endTs = Date.now() +): Extract[] { + const history: Extract[] = []; + const startTs = endTs - (numPoints - 1) * 1000; + + for (let i = 0; i < numPoints; i++) { + history.push(makeMockSysinfoEvent(startTs + i * 1000, i)); + } + + return history; +} diff --git a/frontend/preview/previews/sysinfo.preview.test.ts b/frontend/preview/previews/sysinfo.preview.test.ts new file mode 100644 index 0000000000..6e696ea2a6 --- /dev/null +++ b/frontend/preview/previews/sysinfo.preview.test.ts @@ -0,0 +1,31 @@ +// Copyright 2026, Command Line Inc. +// SPDX-License-Identifier: Apache-2.0 + +import { describe, expect, it } from "vitest"; +import { DefaultSysinfoHistoryPoints, makeMockSysinfoEvent, makeMockSysinfoHistory } from "./sysinfo.preview-util"; + +describe("sysinfo preview helpers", () => { + it("creates sysinfo events with the expected metrics", () => { + const event = makeMockSysinfoEvent(1000, 3); + + expect(event.event).toBe("sysinfo"); + expect(event.scopes).toEqual(["local"]); + expect(event.data.ts).toBe(1000); + expect(event.data.values.cpu).toBeGreaterThanOrEqual(0); + expect(event.data.values.cpu).toBeLessThanOrEqual(100); + expect(event.data.values["mem:used"]).toBeGreaterThan(0); + expect(event.data.values["mem:total"]).toBeGreaterThan(event.data.values["mem:used"]); + expect(event.data.values["cpu:0"]).toBeTypeOf("number"); + }); + + it("creates evenly spaced sysinfo history", () => { + const history = makeMockSysinfoHistory(4, 4000); + + expect(history).toHaveLength(4); + expect(history.map((event) => event.data.ts)).toEqual([1000, 2000, 3000, 4000]); + }); + + it("uses the default history length", () => { + expect(makeMockSysinfoHistory()).toHaveLength(DefaultSysinfoHistoryPoints); + }); +}); diff --git a/frontend/preview/previews/sysinfo.preview.tsx b/frontend/preview/previews/sysinfo.preview.tsx new file mode 100644 index 0000000000..ee4fadb9e1 --- /dev/null +++ b/frontend/preview/previews/sysinfo.preview.tsx @@ -0,0 +1,161 @@ +// Copyright 2026, Command Line Inc. +// SPDX-License-Identifier: Apache-2.0 + +import { Block } from "@/app/block/block"; +import { globalStore } from "@/app/store/jotaiStore"; +import { getTabModelByTabId, TabModelContext } from "@/app/store/tab-model"; +import { handleWaveEvent } from "@/app/store/wps"; +import { useWaveEnv, WaveEnvContext } from "@/app/waveenv/waveenv"; +import type { NodeModel } from "@/layout/index"; +import { atom } from "jotai"; +import * as React from "react"; +import { applyMockEnvOverrides, MockWaveEnv } from "../mock/mockwaveenv"; +import { + DefaultSysinfoHistoryPoints, + makeMockSysinfoEvent, + makeMockSysinfoHistory, + MockSysinfoConnection, +} from "./sysinfo.preview-util"; + +const PreviewWorkspaceId = "preview-sysinfo-workspace"; +const PreviewTabId = "preview-sysinfo-tab"; +const PreviewNodeId = "preview-sysinfo-node"; +const PreviewBlockId = "preview-sysinfo-block"; + +function makeMockWorkspace(): Workspace { + return { + otype: "workspace", + oid: PreviewWorkspaceId, + version: 1, + name: "Preview Workspace", + tabids: [PreviewTabId], + activetabid: PreviewTabId, + meta: {}, + } as Workspace; +} + +function makeMockTab(): Tab { + return { + otype: "tab", + oid: PreviewTabId, + version: 1, + name: "Sysinfo Preview", + blockids: [PreviewBlockId], + meta: {}, + } as Tab; +} + +function makeMockBlock(): Block { + return { + otype: "block", + oid: PreviewBlockId, + version: 1, + meta: { + view: "sysinfo", + connection: MockSysinfoConnection, + "sysinfo:type": "CPU + Mem", + "graph:numpoints": 90, + }, + } as Block; +} + +function makePreviewNodeModel(): NodeModel { + const isFocusedAtom = atom(true); + const isMagnifiedAtom = atom(false); + + return { + additionalProps: atom({} as any), + innerRect: atom({ width: "920px", height: "560px" }), + blockNum: atom(1), + numLeafs: atom(2), + nodeId: PreviewNodeId, + blockId: PreviewBlockId, + addEphemeralNodeToLayout: () => {}, + animationTimeS: atom(0), + isResizing: atom(false), + isFocused: isFocusedAtom, + isMagnified: isMagnifiedAtom, + anyMagnified: atom(false), + isEphemeral: atom(false), + ready: atom(true), + disablePointerEvents: atom(false), + toggleMagnify: () => { + globalStore.set(isMagnifiedAtom, !globalStore.get(isMagnifiedAtom)); + }, + focusNode: () => { + globalStore.set(isFocusedAtom, true); + }, + onClose: () => {}, + dragHandleRef: { current: null }, + displayContainerRef: { current: null }, + }; +} + +function SysinfoPreviewInner() { + const baseEnv = useWaveEnv(); + const historyRef = React.useRef(makeMockSysinfoHistory()); + const nodeModel = React.useMemo(() => makePreviewNodeModel(), []); + + const env = React.useMemo(() => { + const mockWaveObjs: Record = { + [`workspace:${PreviewWorkspaceId}`]: makeMockWorkspace(), + [`tab:${PreviewTabId}`]: makeMockTab(), + [`block:${PreviewBlockId}`]: makeMockBlock(), + }; + + return applyMockEnvOverrides(baseEnv, { + tabId: PreviewTabId, + mockWaveObjs, + atoms: { + workspaceId: atom(PreviewWorkspaceId), + staticTabId: atom(PreviewTabId), + }, + rpc: { + EventReadHistoryCommand: async (_client, data) => { + if (data.event !== "sysinfo" || data.scope !== MockSysinfoConnection) { + return []; + } + const maxItems = data.maxitems ?? historyRef.current.length; + return historyRef.current.slice(-maxItems); + }, + }, + }); + }, [baseEnv]); + + const tabModel = React.useMemo(() => getTabModelByTabId(PreviewTabId, env), [env]); + + React.useEffect(() => { + let nextStep = historyRef.current.length; + let nextTs = (historyRef.current[historyRef.current.length - 1]?.data?.ts ?? Date.now()) + 1000; + const intervalId = window.setInterval(() => { + const nextEvent = makeMockSysinfoEvent(nextTs, nextStep); + historyRef.current = [...historyRef.current.slice(-(DefaultSysinfoHistoryPoints - 1)), nextEvent]; + handleWaveEvent(nextEvent); + nextStep++; + nextTs += 1000; + }, 1000); + + return () => { + window.clearInterval(intervalId); + }; + }, []); + + return ( + + +
+
full sysinfo block (mock WOS + FE-only WPS events)
+
+
+ +
+
+
+ + + ); +} + +export default function SysinfoPreview() { + return ; +}