[Ethernet View] Allow to only log selected variables

common-front/lib/broker/BrokerStructure.ts

@@ -25,6 +25,7 @@ export type BrokerStructure = {
     };
     "message/update": { request: never; response: MessageAdapter };
     "logger/enable": { request: boolean; response: boolean };
+    "logger/variables": { request: string[]; response: boolean };
     "blcu/upload": {
         request: BootloaderUploadRequest;
         response: BootloaderUploadResponse;

common-front/lib/models/PodData/Measurement.ts

@@ -9,6 +9,7 @@ export type Measurement =
 type AbstractMeasurement = {
     id: string;
     name: string;
+    log?: boolean;
 };
 
 export type NumericMeasurement = AbstractMeasurement & {
@@ -23,7 +24,7 @@ export type NumericValue = {
     last: number;
     average: number;
     showLatest: boolean;
-};
+}
 
 export type BooleanMeasurement = AbstractMeasurement & {
     type: 'bool';

common-front/lib/store/measurementsStore.ts

@@ -1,7 +1,6 @@
 import {
     Measurement,
     NumericMeasurement,
-    isNumericMeasurement,
 } from '../models';
 import {
     getBooleanMeasurement,
@@ -62,6 +61,8 @@ export interface MeasurementsStore {
     getEnumMeasurementInfo: (id: MeasurementId) => EnumMeasurementInfo;
     getMeasurementFallback: (id: MeasurementId) => Measurement;
     clearMeasurements: (board: string) => void;
+    setLogAll: (log: boolean) => void;
+    getLogVariables: () => string[];
 }
 
 export const useMeasurementsStore = create<MeasurementsStore>((set, get) => ({
@@ -240,6 +241,25 @@ export const useMeasurementsStore = create<MeasurementsStore>((set, get) => ({
             }
         );
     },
+
+    setLogAll: (log: boolean) => {
+        const measurementsDraft = get().measurements;
+        for (const id in measurementsDraft) {
+            const m = measurementsDraft[id];
+            m.log = log;
+        }
+        set((state) => ({
+            ...state,
+            measurements: measurementsDraft,
+        }));
+    },
+
+    getLogVariables: () => {
+        const measurements = get().measurements;
+        return Object.values(measurements)
+            .filter(m => m.log !== false)
+            .map(m => m.id);
+    },
 }));
 
 function createMeasurementsFromPodDataAdapter(

common-front/lib/wsHandler/HandlerMessages.ts

@@ -19,6 +19,7 @@ export type HandlerMessages = {
     "message/update": Subscription<MessageAdapter>;
     "logger/enable": PostRequest<boolean, boolean>;
     "logger/response": Subscription<boolean>;
+    "logger/variables": PostRequest<string[], boolean>;
     "blcu/upload": Exchange<BootloaderUploadRequest, BootloaderUploadResponse>;
     "blcu/download": Exchange<
         BootloaderDownloadRequest,

ethernet-view/src/components/Logger/useLogger.ts

@@ -1,21 +1,24 @@
 import { useSubscribe, useWsHandler } from "common";
 import { useState } from "react";
+import { useMeasurementsStore } from "common";
 
 export function useLogger() {
     const [state, setState] = useState(false);
 
     const handler = useWsHandler();
 
-    const log = (enable: boolean) => {
-        handler.post("logger/enable", enable);
-    };
+    function getLoggedVariableIds() {
+        return useMeasurementsStore.getState().getLogVariables();
+    }
 
     function startLogging() {
-        log(true);
+        const variables = getLoggedVariableIds();
+        handler.post("logger/variables", variables);
+        handler.post("logger/enable", true);
     }
 
     function stopLogging() {
-        log(false);
+        handler.post("logger/enable", false);
     }
 
     useSubscribe("logger/response", (result) => {

ethernet-view/src/components/ReceiveTable/BoardView/PacketView/MeasurementView/MeasurementView.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styles from './MeasurementView.module.scss';
 import {
     Measurement,
@@ -31,18 +32,50 @@ export const MeasurementView = ({ measurement }: Props) => {
         setShowMeasurementLatest(event.currentTarget.checked);
     };
 
+    const setLog = (log: boolean) => {
+        useMeasurementsStore.setState(state => {
+            const measurements = { ...state.measurements };
+            measurements[measurement.id] = { ...measurements[measurement.id], log };
+            return { ...state, measurements };
+        });
+    };
+
+    const logChecked = useMeasurementsStore(state => state.measurements[measurement.id]?.log !== false);
+
+    React.useEffect(() => {
+        const handler = (e: any) => {
+            setLog(e.detail);
+        };
+        window.addEventListener('log-all', handler);
+        return () => window.removeEventListener('log-all', handler);
+    }, [setLog]);
+
     return (
         <>
-            <span className={styles.name}>{measurement.name}</span>
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, minWidth: 0 }}>
+                <input
+                    type="checkbox"
+                    className={styles.log_variable}
+                    title="Log this variable"
+                    style={{ accentColor: 'green', flexShrink: 0 }}
+                    checked={logChecked}
+                    onChange={e => setLog(e.currentTarget.checked)}
+                />
+                <span className={styles.name} style={{ whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', minWidth: 0 }}>
+                    {measurement.name}
+                </span>
+            </span>
             {isNumeric && (
                 <>
-                    <input
-                        type="checkbox"
-                        defaultChecked={false}
-                        className={styles.show_last}
-                        title="Show latest value"
-                        onInput={onLatestValueChange}
-                    />
+                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+                        <input
+                            type="checkbox"
+                            defaultChecked={false}
+                            className={styles.show_last}
+                            title="Show latest value"
+                            onInput={onLatestValueChange}
+                        />
+                    </span>
                     <span ref={valueRef} className={styles.value}></span>
                     <span className={styles.units}>{measurement.units}</span>
                     <span className={styles.type}>{measurement.type}</span>

ethernet-view/src/components/ReceiveTable/ReceiveTable.tsx

@@ -2,16 +2,34 @@ import styles from "./ReceiveTable.module.scss";
 import { BoardView } from "./BoardView/BoardView";
 import { Header } from "./Header/Header";
 import { TableUpdater } from "./TableUpdater";
-import { Board } from "common";
+import { Board, useMeasurementsStore} from "common";
 
 type Props = {
     boards: Board[];
 };
 
 export const ReceiveTable = ({ boards }: Props) => {
+    const handleLogAll = (log: boolean) => {
+        useMeasurementsStore.getState().setLogAll(log);
+    };
     return (
         <TableUpdater>
             <div className={styles.newReceiveTable}>
+                <div style={{ display: 'flex', alignItems: 'center', marginBottom: 12 }}>
+                    <div style={{ flex: 1 }}></div>
+                    <button
+                        onClick={() => handleLogAll(true)}
+                        style={{ background: 'green', color: 'white', border: 'none', borderRadius: 4, padding: '2px 8px', cursor: 'pointer', marginRight: 4 }}
+                    >
+                        Log all
+                    </button>
+                    <button
+                        onClick={() => handleLogAll(false)}
+                        style={{ background: '#aaa', color: 'white', border: 'none', borderRadius: 4, padding: '2px 8px', cursor: 'pointer' }}
+                    >
+                        Log none
+                    </button>
+                </div>
                 <Header items={["ID", "NAME", "COUNT", "CYCLE (ns)"]} />
                 <div className={styles.boards}>
                     {boards