feat(ui): Display current robot time in NTPConnectivity view

backend/lib/webserver/NTPClientRouter.js

@@ -20,8 +20,11 @@ class NTPClientRouter {
 
 
     initRoutes() {
-        this.router.get("/state", (req, res) => {
-            res.json(this.ntpClient.state);
+        this.router.get("/status", (req, res) => {
+            res.json({
+                state: this.ntpClient.state,
+                robotTime: new Date().toISOString()
+            });
         });
 
         this.router.get("/config", (req, res) => {

backend/lib/webserver/doc/NTPClientRouter.openapi.json

@@ -1,30 +1,39 @@
 {
-  "/api/v2/ntpclient/state": {
+  "/api/v2/ntpclient/status": {
     "get": {
       "tags": [
         "NTP"
       ],
-      "summary": "Get NTPClient state",
+      "summary": "Get NTPClient status",
       "responses": {
         "200": {
-          "description": "The NTPClients current state.",
+          "description": "The NTPClient's current status.",
           "content": {
             "application/json": {
               "schema": {
-                "oneOf": [
-                  {
-                    "$ref": "#/components/schemas/ValetudoNTPClientDisabledState"
+                "type": "object",
+                "properties": {
+                  "state": {
+                    "type": "object",
+                    "oneOf": [
+                      {
+                        "$ref": "#/components/schemas/ValetudoNTPClientDisabledState"
+                      },
+                      {
+                        "$ref": "#/components/schemas/ValetudoNTPClientEnabledState"
+                      },
+                      {
+                        "$ref": "#/components/schemas/ValetudoNTPClientErrorState"
+                      },
+                      {
+                        "$ref": "#/components/schemas/ValetudoNTPClientSyncedState"
+                      }
+                    ]
                   },
-                  {
-                    "$ref": "#/components/schemas/ValetudoNTPClientEnabledState"
-                  },
-                  {
-                    "$ref": "#/components/schemas/ValetudoNTPClientErrorState"
-                  },
-                  {
-                    "$ref": "#/components/schemas/ValetudoNTPClientSyncedState"
+                  "robotTime": {
+                    "type": "string"
                   }
-                ]
+                }
               }
             }
           }

frontend/src/api/client.ts

@@ -27,7 +27,7 @@ import {
     NetworkAdvertisementConfiguration,
     NetworkAdvertisementProperties,
     NTPClientConfiguration,
-    NTPClientState,
+    NTPClientStatus,
     Point,
     Quirk,
     RobotInformation,
@@ -570,9 +570,9 @@ export const fetchNetworkAdvertisementProperties = async (): Promise<NetworkAdve
         });
 };
 
-export const fetchNTPClientState = async (): Promise<NTPClientState> => {
+export const fetchNTPClientStatus = async (): Promise<NTPClientStatus> => {
     return valetudoAPI
-        .get<NTPClientState>("/ntpclient/state")
+        .get<NTPClientStatus>("/ntpclient/status")
         .then(({data}) => {
             return data;
         });

frontend/src/api/hooks.ts

@@ -28,7 +28,7 @@ import {
     fetchMQTTConfiguration,
     fetchMQTTProperties,
     fetchNTPClientConfiguration,
-    fetchNTPClientState,
+    fetchNTPClientStatus,
     fetchObstacleAvoidanceControlState,
     fetchPersistentMapState,
     fetchPresetSelections,
@@ -138,7 +138,7 @@ import {
     MQTTConfiguration,
     NetworkAdvertisementConfiguration,
     NTPClientConfiguration,
-    NTPClientState,
+    NTPClientStatus,
     Point,
     SetLogLevelRequest,
     Timer,
@@ -177,7 +177,7 @@ enum QueryKey {
     HTTPBasicAuth = "http_basic_auth",
     NetworkAdvertisementConfiguration = "network_advertisement_configuration",
     NetworkAdvertisementProperties = "network_advertisement_properties",
-    NTPClientState = "ntp_client_state",
+    NTPClientStatus = "ntp_client_status",
     NTPClientConfiguration = "ntp_client_configuration",
     Timers = "timers",
     TimerProperties = "timer_properties",
@@ -780,10 +780,10 @@ export const useNetworkAdvertisementPropertiesQuery = () => {
     });
 };
 
-export const useNTPClientStateQuery = () => {
+export const useNTPClientStatusQuery = () => {
     return useQuery( {
-        queryKey: [QueryKey.NTPClientState],
-        queryFn: fetchNTPClientState,
+        queryKey: [QueryKey.NTPClientStatus],
+        queryFn: fetchNTPClientStatus,
 
         staleTime: 5_000,
         refetchInterval: 5_000
@@ -808,8 +808,8 @@ export const useNTPClientConfigurationMutation = () => {
                 queryClient.setQueryData<NTPClientConfiguration>([QueryKey.NTPClientConfiguration], configuration, {
                     updatedAt: Date.now(),
                 });
-            }).then(fetchNTPClientState).then((state) => {
-                queryClient.setQueryData<NTPClientState>([QueryKey.NTPClientState], state, {
+            }).then(fetchNTPClientStatus).then((state) => {
+                queryClient.setQueryData<NTPClientStatus>([QueryKey.NTPClientStatus], state, {
                     updatedAt: Date.now(),
                 });
             });

frontend/src/api/types.ts

@@ -321,6 +321,11 @@ export interface NTPClientState {
     offset?: number;
 }
 
+export interface NTPClientStatus {
+    state: NTPClientState,
+    robotTime: string
+}
+
 export interface NTPClientConfiguration {
     enabled: boolean;
     server: string;

frontend/src/options/connectivity/NTPConnectivity.tsx

@@ -9,10 +9,10 @@ import {
 } from "@mui/material";
 import React from "react";
 import {
-    NTPClientState,
+    NTPClientStatus,
     useNTPClientConfigurationMutation,
     useNTPClientConfigurationQuery,
-    useNTPClientStateQuery
+    useNTPClientStatusQuery
 } from "../../api";
 import LoadingFade from "../../components/LoadingFade";
 import {LoadingButton} from "@mui/lab";
@@ -29,12 +29,12 @@ import PaperContainer from "../../components/PaperContainer";
 import DetailPageHeaderRow from "../../components/DetailPageHeaderRow";
 import {extractHostFromUrl} from "../../utils";
 
-const NTPClientStateComponent : React.FunctionComponent<{ state: NTPClientState | undefined, stateLoading: boolean, stateError: boolean }> = ({
-    state,
-    stateLoading,
+const NTPClientStatusComponent : React.FunctionComponent<{ status: NTPClientStatus | undefined, statusLoading: boolean, stateError: boolean }> = ({
+    status,
+    statusLoading,
     stateError
 }) => {
-    if (stateLoading || !state) {
+    if (statusLoading || !status) {
         return (
             <LoadingFade/>
         );
@@ -45,7 +45,7 @@ const NTPClientStateComponent : React.FunctionComponent<{ state: NTPClientState
     }
 
     const getIconForState = () : React.ReactElement => {
-        switch (state.__class) {
+        switch (status.state.__class) {
             case "ValetudoNTPClientEnabledState":
                 return <SyncEnabledIcon sx={{ fontSize: "4rem" }}/>;
             case "ValetudoNTPClientDisabledState":
@@ -58,12 +58,12 @@ const NTPClientStateComponent : React.FunctionComponent<{ state: NTPClientState
     };
 
     const getContentForState = () : React.ReactElement | undefined => {
-        switch (state.__class) {
+        switch (status.state.__class) {
             case "ValetudoNTPClientErrorState":
                 return (
                     <>
-                        <Typography variant="h5" color="red">Error: {state.type}</Typography>
-                        <Typography color="red">{state.message}</Typography>
+                        <Typography variant="h5" color="red">Error: {status.state.type}</Typography>
+                        <Typography color="red">{status.state.message}</Typography>
                     </>
                 );
             case "ValetudoNTPClientEnabledState":
@@ -78,7 +78,7 @@ const NTPClientStateComponent : React.FunctionComponent<{ state: NTPClientState
                 return (
                     <>
                         <Typography variant="h5">Time sync successful</Typography>
-                        <Typography>Offset: {state.offset} ms</Typography>
+                        <Typography>Offset: {status.state.offset} ms</Typography>
                     </>
                 );
         }
@@ -101,18 +101,30 @@ const NTPClientStateComponent : React.FunctionComponent<{ state: NTPClientState
             >
                 {getContentForState()}
             </Grid>
+            <Grid
+                item
+                sx={{
+                    maxWidth: "100% !important", //Why, MUI? Why?
+                    wordWrap: "break-word",
+                    textAlign: "center",
+                    userSelect: "none",
+                    marginTop: "0.5rem"
+                }}
+            >
+                Current robot time: {status.robotTime}
+            </Grid>
         </Grid>
     );
 };
 
 const NTPConnectivity = (): React.ReactElement => {
     const {
-        data: ntpClientState,
-        isPending: ntpClientStatePending,
-        isFetching: ntpClientStateFetching,
-        isError: ntpClientStateError,
+        data: ntpClientStatus,
+        isPending: ntpClientStatusPending,
+        isFetching: ntpClientStatusFetching,
+        isError: ntpClientStatusError,
         refetch: refetchNtpClientState
-    } = useNTPClientStateQuery();
+    } = useNTPClientStatusQuery();
 
     const {
         data: ntpClientConfig,
@@ -140,13 +152,13 @@ const NTPConnectivity = (): React.ReactElement => {
         }
     }, [ntpClientConfig]);
 
-    if (ntpClientStatePending || ntpClientConfigPending) {
+    if (ntpClientStatusPending || ntpClientConfigPending) {
         return (
             <LoadingFade/>
         );
     }
 
-    if (ntpClientStateError || ntpClientConfigError || !ntpClientState || !ntpClientConfig) {
+    if (ntpClientStatusError || ntpClientConfigError || !ntpClientStatus || !ntpClientConfig) {
         return <Typography color="error">Error loading NTP Client configuration</Typography>;
     }
 
@@ -162,13 +174,13 @@ const NTPConnectivity = (): React.ReactElement => {
                                 /* intentional */
                             });
                         }}
-                        isRefreshing={ntpClientStateFetching}
+                        isRefreshing={ntpClientStatusFetching}
                     />
 
-                    <NTPClientStateComponent
-                        state={ntpClientState}
-                        stateLoading={ntpClientStatePending}
-                        stateError={ntpClientStateError}
+                    <NTPClientStatusComponent
+                        status={ntpClientStatus}
+                        statusLoading={ntpClientStatusPending}
+                        stateError={ntpClientStatusError}
                     />
                     <Divider sx={{mt: 1}} style={{marginBottom: "1rem"}}/>
                     <FormControlLabel