Merge pull request #40 from UnownHash/device-load-sorting

Add sorting of devices by load
UnownHash · May 10, 2024 · d783312 · d783312
2 parents 0173081 + c091785
commit d783312
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 13 deletions.
diff --git a/packages/client/src/app/server.ts b/packages/client/src/app/server.ts
@@ -19,8 +19,9 @@ export const makeServer = ({ environment = 'test' } = {}) => {
     },
 
     seeds(server) {
-      server.createList('device', 10);
-      server.createList('worker', 50);
+      server.createList('device', 10).forEach((device) => {
+        server.createList('worker', 5, { deviceId: device.deviceId });
+      });
     },
 
     factories: {

diff --git a/packages/client/src/app/status/devicesTable.tsx b/packages/client/src/app/status/devicesTable.tsx
@@ -1,5 +1,5 @@
 import { memo, useCallback, useMemo, useState } from 'react';
-import { StatusDTO, DeviceControlDTO } from '@rotom/types';
+import { DeviceWithLoadDTO, TransformedStatusDTO } from '@rotom/types';
 import { Table, Dropdown, SortDescriptor } from '@nextui-org/react';
 import { toast } from 'react-toastify';
 
@@ -12,7 +12,7 @@ const kBNumberFormat = new Intl.NumberFormat('en', { style: 'unit', unit: 'kilob
 
 const initialSortDescriptor: SortDescriptor = { column: 'origin', direction: 'ascending' };
 
-export const DevicesTable = ({ devices, workers }: StatusDTO): JSX.Element => {
+export const DevicesTable = ({ devices }: TransformedStatusDTO): JSX.Element => {
   const [search, setSearch] = useState('');
   const executeAction = useCallback(
     async ({ deviceId, action }: { deviceId: string; action: 'reboot' | 'restart' | 'getLogcat' | 'delete' }) => {
@@ -57,7 +57,7 @@ export const DevicesTable = ({ devices, workers }: StatusDTO): JSX.Element => {
     [],
   );
 
-  const list = useTableSort<DeviceControlDTO>({
+  const list = useTableSort<DeviceWithLoadDTO>({
     items: devices,
     initialSortDescriptor,
   });
@@ -87,7 +87,7 @@ export const DevicesTable = ({ devices, workers }: StatusDTO): JSX.Element => {
           <Table.Column key="origin" allowsSorting>
             Origin
           </Table.Column>
-          <Table.Column key="load" allowsSorting>
+          <Table.Column key="load.percent" allowsSorting width={56}>
             Load
           </Table.Column>
           <Table.Column key="deviceId" allowsSorting>
@@ -118,13 +118,11 @@ export const DevicesTable = ({ devices, workers }: StatusDTO): JSX.Element => {
         </Table.Header>
         <Table.Body loadingState={list.loadingState}>
           {filteredItems.map((device, index) => {
-            const deviceWorkers = workers.filter((worker) => worker.deviceId === device.deviceId);
-
             return (
               <Table.Row key={`${device.deviceId}-${index}`}>
                 <Table.Cell>{device.origin}</Table.Cell>
                 <Table.Cell>
-                  {deviceWorkers.filter((worker) => worker.isAllocated).length}/{deviceWorkers.length}
+                  {device.load.allocated}/{device.load.total}
                 </Table.Cell>
                 <Table.Cell>{device.deviceId}</Table.Cell>
                 <Table.Cell>{device.isAlive ? '✅' : '❌'}</Table.Cell>

diff --git a/packages/client/src/app/status/statusPage.tsx b/packages/client/src/app/status/statusPage.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { Button, Grid, Loading, Spacer, Text } from '@nextui-org/react';
-import { StatusDTO } from '@rotom/types';
+import { StatusDTO, TransformedStatusDTO } from '@rotom/types';
 import { useCallback, useState } from 'react';
 
 import { StatusCard } from './statusCard';
@@ -10,9 +10,30 @@ import { MemoizedDevicesTable as DevicesTable } from './devicesTable';
 const fetchStatus = (): Promise<StatusDTO> => fetch('/api/status').then((res) => res.json());
 
 export const StatusPage = (): JSX.Element => {
-  const { isLoading, isFetching, error, data, isSuccess } = useQuery<StatusDTO, Error>(['status'], fetchStatus, {
-    refetchInterval: 5000,
-  });
+  const { isLoading, isFetching, error, data, isSuccess } = useQuery<StatusDTO, Error, TransformedStatusDTO>(
+    ['status'],
+    fetchStatus,
+    {
+      refetchInterval: 5000,
+      select: (data) => {
+        const newData = { ...data } as TransformedStatusDTO;
+
+        newData.devices.forEach((device) => {
+          const deviceWorkers = newData.workers.filter((worker) => worker.deviceId === device.deviceId);
+          device.load = {
+            percent: 0,
+            allocated: deviceWorkers.filter((worker) => worker.isAllocated).length,
+            total: deviceWorkers.length,
+          };
+          if (device.load.total) {
+            device.load.percent = (device.load.allocated / device.load.total) * 100;
+          }
+        });
+
+        return newData;
+      },
+    },
+  );
   const [delLoading, setDelLoading] = useState(false);
 
   const handleRemoveDead = useCallback(async () => {

diff --git a/packages/types/src/status.ts b/packages/types/src/status.ts
@@ -14,3 +14,15 @@ export interface StatusDTO {
   workers: WorkerDTO[];
   devices: DeviceControlDTO[];
 }
+
+export type DeviceWithLoadDTO = DeviceControlDTO & {
+  load: {
+    percent: number;
+    allocated: number;
+    total: number;
+  };
+};
+
+export interface TransformedStatusDTO extends StatusDTO {
+  devices: DeviceWithLoadDTO[];
+}