Update machine status hook

Author: DTCurrie

.changeset/red-dogs-move.md

@@ -0,0 +1,5 @@
+---
+'@viamrobotics/svelte-sdk': patch
+---
+
+Update machine status hook to include pending field and sort resource statuses by name.

src/lib/hooks/machine-status.svelte.ts

@@ -7,20 +7,79 @@ import {
 } from '@tanstack/svelte-query';
 import { getContext, setContext } from 'svelte';
 import type { PartID } from '$lib/part';
-import type { RobotClient } from '@viamrobotics/sdk';
+import type { PlainMessage, robotApi } from '@viamrobotics/sdk';
 import { usePolling } from './use-polling.svelte';
 import { useQueryLogger } from '$lib/query-logger';
 import { useEnabledQueries } from './use-enabled-queries.svelte';
 
 const key = Symbol('machine-status-context');
 
-type MachineStatus = Awaited<ReturnType<RobotClient['getMachineStatus']>>;
+type MachineStatus = PlainMessage<robotApi.GetMachineStatusResponse>;
 type Query = QueryObserverResult<MachineStatus, Error>;
 
+// TODO: move to ts-sdk
+export type ResourceStatus = PlainMessage<robotApi.ResourceStatus>;
+
 interface Context {
   current: Record<PartID, Query | undefined>;
 }
 
+/**
+ * sorts machine status resources by local/remote -> type -> name (alphabetical)
+ * to produce a list like:
+ *
+ * component a
+ * component z
+ * service   b
+ * component remote:c
+ * service   remote:b
+ * @param machineStatus
+ */
+const sortResourceStatuses = (machineStatus: MachineStatus) => {
+  const resources = machineStatus.resources.toSorted(
+    ({ name }, { name: otherName }) => {
+      if (name === undefined && otherName === undefined) {
+        return 0;
+      }
+
+      if (name === undefined) {
+        return -1;
+      }
+
+      if (otherName === undefined) {
+        return 1;
+      }
+
+      const { name: aName, type: aType, subtype: aSubtype } = name;
+      const { name: bName, type: bType, subtype: bSubtype } = otherName;
+
+      // sort all non-remote resources before remote resources
+      if (aName.includes(':') !== bName.includes(':')) {
+        return aName.includes(':') ? 1 : -1;
+      }
+
+      if (aName === bName && aType === bType) {
+        return aSubtype.localeCompare(bSubtype);
+      }
+
+      if (aName === bName) {
+        return aType.localeCompare(bType);
+      }
+
+      // sort alphabetically within type
+      // sort components before services
+      return aType === bType
+        ? aName.localeCompare(bName)
+        : aType.localeCompare(bType);
+    }
+  );
+
+  return {
+    ...machineStatus,
+    resources,
+  };
+};
+
 export const provideMachineStatusContext = (refetchInterval: () => number) => {
   const clients = useRobotClients();
   const debug = useQueryLogger();
@@ -49,7 +108,7 @@ export const provideMachineStatusContext = (refetchInterval: () => number) => {
           try {
             const response = await client.getMachineStatus();
             logger('RES', 'robot', 'getMachineStatus', response);
-            return response;
+            return sortResourceStatuses(response);
           } catch (error) {
             logger('ERR', 'robot', 'getMachineStatus', error);
             throw error;
@@ -96,6 +155,7 @@ export const useMachineStatus = (partID: () => PartID) => {
   const error = $derived(query?.error);
   const fetching = $derived(query?.isFetching);
   const loading = $derived(query?.isLoading);
+  const pending = $derived(query?.isPending ?? true);
 
   return {
     get current() {
@@ -110,5 +170,11 @@ export const useMachineStatus = (partID: () => PartID) => {
     get loading() {
       return loading;
     },
+    get pending() {
+      return pending;
+    },
+    refetch() {
+      return query?.refetch() ?? Promise.resolve();
+    },
   };
 };

src/lib/index.ts

@@ -22,7 +22,10 @@ export {
 } from './hooks/create-resource-stream.svelte';
 export { createStreamClient } from './hooks/create-stream-client.svelte';
 
-export { useMachineStatus } from './hooks/machine-status.svelte';
+export {
+  useMachineStatus,
+  type ResourceStatus,
+} from './hooks/machine-status.svelte';
 export { useResourceNames } from './hooks/resource-names.svelte';
 
 export { usePolling } from './hooks/use-polling.svelte';