Devtools 保存機能

devtools-frontend/package.json

@@ -32,6 +32,7 @@
     "@protobuf-ts/grpcweb-transport": "^2.8.2",
     "@protobuf-ts/runtime": "^2.9.3",
     "@protobuf-ts/runtime-rpc": "^2.9.3",
+    "c2a-devtools": "link:",
     "monaco-editor": "^0.44.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -44,6 +45,7 @@
     "@protobuf-ts/plugin": "^2.8.2",
     "@types/react": "18.2.65",
     "@types/react-dom": "18.2.21",
+    "@types/wicg-file-system-access": "^2023.10.4",
     "@typescript-eslint/eslint-plugin": "7.2.0",
     "@typescript-eslint/parser": "7.2.0",
     "@vitejs/plugin-react": "4.2.1",

devtools-frontend/src/components/Layout.tsx

@@ -1,5 +1,5 @@
 import { Classes, Icon } from "@blueprintjs/core";
-import React, { useMemo } from "react";
+import React, { useMemo, useEffect, useState } from "react";
 import {
   Link,
   NavLink,
@@ -13,6 +13,7 @@ import { SatelliteSchema } from "../proto/tmtc_generic_c2a";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { IconNames } from "@blueprintjs/icons";
 import type { GrpcClientService } from "../worker";
+import type { RecorderService, RecordingStatus } from "../recorderWorker";
 
 type TelemetryMenuItem = {
   name: string;
@@ -31,6 +32,42 @@ const TelemetryListSidebar: React.FC<TelemetryListSidebarProps> = ({
   activeName: tmivName,
   telemetryListItems,
 }) => {
+  const recorder = (useLoaderData() as ClientContext).client;
+  const [recorderStatus, setRecordingStatus] = useState<RecordingStatus | null>(
+    null,
+  );
+  useEffect(() => {
+    const readerP = recorder
+      .openRecordingStatusStream()
+      .then((stream) => stream.getReader());
+    let cancel;
+    const cancelP = new Promise((resolve) => (cancel = resolve));
+    Promise.all([readerP, cancelP]).then(([reader]) => reader.cancel());
+    readerP.then(async (reader) => {
+      // eslint-disable-next-line no-constant-condition
+      while (true) {
+        const next = await reader.read();
+        if (next.done) {
+          break;
+        }
+        setRecordingStatus(next.value);
+      }
+    });
+    return cancel;
+  }, [recorder]);
+  const toggleRecordingStatus = async (name: string) => {
+    if (!recorderStatus?.directoryIsSet) {
+      const directoryHandle = await window.showDirectoryPicker({
+        mode: "readwrite",
+      });
+      recorder.setRootRecordDirectory(directoryHandle);
+    }
+    if (recorderStatus?.recordingTelemetries.has(name)) {
+      recorder.disableRecording(name);
+    } else {
+      recorder.enableRecording(name);
+    }
+  };
   return (
     <div className="p-1 h-full flex-1 flex flex-col">
       <ul>
@@ -82,6 +119,17 @@ const TelemetryListSidebar: React.FC<TelemetryListSidebarProps> = ({
                   tmivName === item.name ? Classes.ACTIVE : ""
                 }`}
               >
+                <span onClick={() => toggleRecordingStatus(item.name)}>
+                  {recorderStatus?.recordingTelemetries.has(item.name) ? (
+                    <div className="py-1">
+                      <div className="w-3 h-3 bg-red-600 rounded-full"></div>
+                    </div>
+                  ) : (
+                    <div className="py-1">
+                      <div className="w-3 h-3 bg-gray-600 rounded-full"></div>
+                    </div>
+                  )}
+                </span>
                 <code
                   className={`${Classes.FILL} ${Classes.TEXT_OVERFLOW_ELLIPSIS}`}
                 >

devtools-frontend/src/components/TelemetryView.tsx

@@ -1,11 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { TreeNamespace, addToNamespace, mapNamespace } from "../tree";
+import { Button } from "@blueprintjs/core";
 
 import { Tmiv, TmivField } from "../proto/tco_tmiv";
 import { useClient } from "./Layout";
 import { useParams } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import { TelemetrySchema } from "../proto/tmtc_generic_c2a";
+import type { RecordingStatus } from "../worker";
 
 const buildTelemetryFieldTreeBlueprintFromSchema = (
   tlm: TelemetrySchema,
@@ -162,6 +164,74 @@ const InlineNamespaceContentCell: React.FC<InlineNamespaceContentCellProps> = ({
 };
 
 export const TelemetryView: React.FC = () => {
+  const { client } = useClient();
+  const [recorderStatus, setRecordingStatus] = useState<RecordingStatus | null>(
+    null,
+  );
+  const params = useParams();
+  const tmivName = params["tmivName"]!;
+  useEffect(() => {
+    const readerP = client
+      .openRecordingStatusStream()
+      .then((stream) => stream.getReader());
+    let cancel;
+    const cancelP = new Promise((resolve) => (cancel = resolve));
+    Promise.all([readerP, cancelP]).then(([reader]) => reader.cancel());
+    readerP.then(async (reader) => {
+      // eslint-disable-next-line no-constant-condition
+      while (true) {
+        const next = await reader.read();
+        if (next.done) {
+          break;
+        }
+        setRecordingStatus(next.value);
+      }
+    });
+    return cancel;
+  }, [client]);
+
+  const toggleRecordingStatus = async () => {
+    if (!recorderStatus?.directoryIsSet) {
+      const directoryHandle = await window.showDirectoryPicker({
+        mode: "readwrite",
+      });
+      client.setRootRecordDirectory(directoryHandle);
+    }
+    if (recorderStatus?.recordingTelemetries.has(tmivName)) {
+      client.disableRecording(tmivName);
+    } else {
+      client.enableRecording(tmivName);
+    }
+  };
+
+  const recording =
+    recorderStatus?.recordingTelemetries?.has(tmivName) ?? false;
+
+  const recordingMenuItemsWhenRecording = (
+    <>
+      <p>Recording: ON</p>
+      <Button onClick={toggleRecordingStatus}>Stop Recording</Button>
+    </>
+  );
+  const recordingMenuItemsWhenNotRecording = (
+    <>
+      <p>Recording: OFF</p>
+      <Button onClick={toggleRecordingStatus}>Start Recording</Button>
+    </>
+  );
+  return (
+    <div className="p-1 h-full flex-1 flex flex-col">
+      <nav>
+        {recording
+          ? recordingMenuItemsWhenRecording
+          : recordingMenuItemsWhenNotRecording}
+      </nav>
+      <TelemetryViewBody />
+    </div>
+  );
+};
+
+const TelemetryViewBody: React.FC = () => {
   const params = useParams();
   const tmivName = params["tmivName"]!;
   const {

devtools-frontend/src/main.tsx

@@ -16,6 +16,7 @@ import { CommandView } from "./components/CommandView";
 import { OldCommandView } from "./components/OldCommandView";
 import { buildClient } from "./client";
 import type { GrpcClientService } from "./worker";
+import type { RecorderService } from "./recorderWorker";
 import { IconNames } from "@blueprintjs/icons";
 import { FriendlyError } from "./error";
 
@@ -36,6 +37,7 @@ const clientLoader: LoaderFunction = async () => {
       details: "Make sure that your tmtc-c2a is running.",
     });
   })!;
+
   return { client, satelliteSchema };
 };