diff --git a/web/src/App.test.tsx b/web/src/App.test.tsx deleted file mode 100644 index d76787e..0000000 --- a/web/src/App.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; -import { render, screen } from "@testing-library/react"; -import App from "./App"; - -test("renders learn react link", () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/web/src/App.tsx b/web/src/App.tsx index 4928822..95c91ee 100644 --- a/web/src/App.tsx +++ b/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 ( <> @@ -169,11 +175,20 @@ function Notifications() { + ); } -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(); const hostname = useMqttSubscription("/v1/tac/network/hostname"); const setup_mode = useMqttSubscription("/v1/tac/setup_mode"); @@ -209,7 +224,9 @@ export default function App() { return ( } + notifications={ + + } stickyNotifications={true} navigation={} content={} diff --git a/web/src/DashboardTac.tsx b/web/src/DashboardTac.tsx index a828d25..265c91f 100644 --- a/web/src/DashboardTac.tsx +++ b/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() { - + void; +} + +export function SlotStatus(props: SlotStatusProps) { const slot_status = useMqttSubscription("/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( +

+ # Mark a RAUC slot as active: +
+ rauc status mark-active {ev.detail.selectedItems[0].bootname} +

, + ); + }} />
@@ -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>( "/v1/tac/update/channels", ); @@ -290,7 +307,22 @@ export function UpdateChannels() { id: "enabled", header: "Enabled", cell: (e) => ( - + { + let action = e.enabled ? "Disable" : "Enable"; + let cmd = e.enabled ? "rauc-disable-cert" : "rauc-enable-cert"; + + props.setCmdHint( +

+ # {action} the {e.display_name} update channel: +
+ {cmd} {e.name}.cert.pem +

, + ); + }} + /> ), }, { @@ -461,7 +493,11 @@ export function RebootNotification() { ); } -export function UpdateContainer() { +interface UpdateContainerProps { + setCmdHint: (hint: React.ReactNode | null) => void; +} + +export function UpdateContainer(props: UpdateContainerProps) { return ( - - + + ); @@ -660,3 +696,24 @@ export function PowerFailNotification() { ); } + +interface CmdHintNotificationProps { + cmdHint: React.ReactNode | null; + setCmdHint: (hint: React.ReactNode | null) => void; +} + +export function CmdHintNotification(props: CmdHintNotificationProps) { + return ( + props.setCmdHint(null)} + > + The selected action can not be performed in the web interface. To complete + it use the command line interface instead: + {props.cmdHint} + + ); +} diff --git a/web/src/index.tsx b/web/src/index.tsx index 07811e4..d8c93b9 100644 --- a/web/src/index.tsx +++ b/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(null); + + return ( + + + + } + > + } /> + } /> + } /> + } + /> + } /> + } /> + + } /> + + + + ); +} + const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement, ); -root.render( - - - - }> - } /> - } /> - } /> - } /> - } /> - } /> - - } /> - - - , -); + +root.render();