web: display notifications for actions that can only be done on commandline

web/src/App.tsx

@@ -39,6 +39,7 @@ import {
   LocatorNotification,
   OverTemperatureNotification,
   UsbOverloadNotification,
+  CmdHintNotification,
 } from "./TacComponents";
 
 function Navigation() {
@@ -157,7 +158,12 @@ function ConnectionNotification() {
   );
 }
 
-function Notifications() {
+interface NotificationsProps {
+  cmdHint: React.ReactNode | null;
+  setCmdHint: (hint: React.ReactNode | null) => void;
+}
+
+function Notifications(props: NotificationsProps) {
   return (
     <>
       <ConnectionNotification />
@@ -169,11 +175,20 @@ function Notifications() {
       <UpdateNotification />
       <LocatorNotification />
       <IOBusFaultNotification />
+      <CmdHintNotification
+        cmdHint={props.cmdHint}
+        setCmdHint={props.setCmdHint}
+      />
     </>
   );
 }
 
-export default function App() {
+interface AppProps {
+  cmdHint: React.ReactNode | null;
+  setCmdHint: (hint: React.ReactNode | null) => void;
+}
+
+export default function App(props: AppProps) {
   const [runningVersion, setRunningVersion] = useState<string | undefined>();
   const hostname = useMqttSubscription("/v1/tac/network/hostname");
   const setup_mode = useMqttSubscription("/v1/tac/setup_mode");
@@ -209,7 +224,9 @@ export default function App() {
 
   return (
     <AppLayout
-      notifications={<Notifications />}
+      notifications={
+        <Notifications cmdHint={props.cmdHint} setCmdHint={props.setCmdHint} />
+      }
       stickyNotifications={true}
       navigation={<Navigation />}
       content={<Outlet />}

web/src/DashboardTac.tsx

@@ -55,7 +55,11 @@ type Bootloader = {
   powerboard_timestamp: number;
 };
 
-export default function DashboardTac() {
+interface DashboardTacProps {
+  setCmdHint: (hint: React.ReactNode | null) => void;
+}
+
+export default function DashboardTac(props: DashboardTacProps) {
   const [counter, setCounter] = useState(0);
 
   useEffect(() => {
@@ -214,7 +218,7 @@ export default function DashboardTac() {
         </ColumnLayout>
       </Container>
 
-      <UpdateContainer />
+      <UpdateContainer setCmdHint={props.setCmdHint} />
 
       <Container
         header={

web/src/TacComponents.tsx

@@ -128,7 +128,11 @@ type Channel = {
   bundle?: UpstreamBundle;
 };
 
-export function SlotStatus() {
+interface SlotStatusProps {
+  setCmdHint: (hint: React.ReactNode | null) => void;
+}
+
+export function SlotStatus(props: SlotStatusProps) {
   const slot_status = useMqttSubscription<RaucSlots>("/v1/tac/update/slots");
 
   if (slot_status === undefined) {
@@ -188,6 +192,15 @@ export function SlotStatus() {
             loadingText="Loading resources"
             selectionType="single"
             trackBy="name"
+            onSelectionChange={(ev) => {
+              props.setCmdHint(
+                <p>
+                  # Mark a RAUC slot as active:
+                  <br />
+                  rauc status mark-active {ev.detail.selectedItems[0].bootname}
+                </p>,
+              );
+            }}
           />
         </Container>
 
@@ -245,7 +258,11 @@ export function UpdateConfig() {
   );
 }
 
-export function UpdateChannels() {
+interface UpdateChannelsProps {
+  setCmdHint: (hint: React.ReactNode | null) => void;
+}
+
+export function UpdateChannels(props: UpdateChannelsProps) {
   const channels_topic = useMqttSubscription<Array<Channel>>(
     "/v1/tac/update/channels",
   );
@@ -290,7 +307,22 @@ export function UpdateChannels() {
           id: "enabled",
           header: "Enabled",
           cell: (e) => (
-            <Checkbox checked={e.enabled} disabled={!enable_polling} />
+            <Checkbox
+              checked={e.enabled}
+              disabled={!enable_polling}
+              onChange={() => {
+                let action = e.enabled ? "Disable" : "Enable";
+                let cmd = e.enabled ? "rauc-disable-cert" : "rauc-enable-cert";
+
+                props.setCmdHint(
+                  <p>
+                    # {action} the {e.display_name} update channel:
+                    <br />
+                    {cmd} {e.name}.cert.pem
+                  </p>,
+                );
+              }}
+            />
           ),
         },
         {
@@ -461,7 +493,11 @@ export function RebootNotification() {
   );
 }
 
-export function UpdateContainer() {
+interface UpdateContainerProps {
+  setCmdHint: (hint: React.ReactNode | null) => void;
+}
+
+export function UpdateContainer(props: UpdateContainerProps) {
   return (
     <Container
       header={
@@ -475,8 +511,8 @@ export function UpdateContainer() {
     >
       <SpaceBetween size="m">
         <UpdateConfig />
-        <UpdateChannels />
-        <SlotStatus />
+        <UpdateChannels setCmdHint={props.setCmdHint} />
+        <SlotStatus setCmdHint={props.setCmdHint} />
       </SpaceBetween>
     </Container>
   );
@@ -660,3 +696,24 @@ export function PowerFailNotification() {
     </Alert>
   );
 }
+
+interface CmdHintNotificationProps {
+  cmdHint: React.ReactNode | null;
+  setCmdHint: (hint: React.ReactNode | null) => void;
+}
+
+export function CmdHintNotification(props: CmdHintNotificationProps) {
+  return (
+    <Alert
+      dismissible
+      statusIconAriaLabel="Info"
+      visible={props.cmdHint !== null}
+      header="Complete an action on the command line"
+      onDismiss={() => props.setCmdHint(null)}
+    >
+      The selected action can not be performed in the web interface. To complete
+      it use the command line interface instead:
+      <Box variant="code">{props.cmdHint}</Box>
+    </Alert>
+  );
+}

web/src/index.tsx

@@ -31,23 +31,38 @@ import LandingPage from "./LandingPage";
 import SettingsLabgrid from "./SettingsLabgrid";
 import Setup from "./Setup";
 
+import { useState } from "react";
+
+function WebUi() {
+  const [cmdHint, setCmdHint] = useState<React.ReactNode | null>(null);
+
+  return (
+    <React.StrictMode>
+      <HashRouter>
+        <Routes>
+          <Route
+            path="/"
+            element={<App cmdHint={cmdHint} setCmdHint={setCmdHint} />}
+          >
+            <Route path="" element={<LandingPage />} />
+            <Route path="/dashboard/dut" element={<DashboardDut />} />
+            <Route path="/dashboard/journal" element={<DashboardJournal />} />
+            <Route
+              path="/dashboard/tac"
+              element={<DashboardTac setCmdHint={setCmdHint} />}
+            />
+            <Route path="/settings/labgrid" element={<SettingsLabgrid />} />
+            <Route path="/docs/api" element={<ApiDocs />} />
+          </Route>
+          <Route path="/setup" element={<Setup />} />
+        </Routes>
+      </HashRouter>
+    </React.StrictMode>
+  );
+}
+
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement,
 );
-root.render(
-  <React.StrictMode>
-    <HashRouter>
-      <Routes>
-        <Route path="/" element={<App />}>
-          <Route path="" element={<LandingPage />} />
-          <Route path="/dashboard/dut" element={<DashboardDut />} />
-          <Route path="/dashboard/journal" element={<DashboardJournal />} />
-          <Route path="/dashboard/tac" element={<DashboardTac />} />
-          <Route path="/settings/labgrid" element={<SettingsLabgrid />} />
-          <Route path="/docs/api" element={<ApiDocs />} />
-        </Route>
-        <Route path="/setup" element={<Setup />} />
-      </Routes>
-    </HashRouter>
-  </React.StrictMode>,
-);
+
+root.render(<WebUi />);