feat(web): adapt to HTTP API of DASD operations

web/src/api/dasd.ts

@@ -40,8 +40,9 @@ const probeDASD = () => post("/api/storage/dasd/probe");
 /**
  * Start format job for given list of devices
  * @param devicesIDs array of device ids
+ * @return id of format job
  */
-const DASDFormat = (devicesIDs: string[]) => post("/api/storage/dasd/format", { devices: devicesIDs });
+const DASDFormat = (devicesIDs: string[]): Promise<string> => post("/api/storage/dasd/format", { devices: devicesIDs }).then(({ data }) => data);
 
 /**
  * Enables given list of devices

web/src/api/storage.ts

@@ -23,9 +23,18 @@ import { post, get, put } from "~/api/http";
 import { Job } from "~/types/job";
 
 /**
- * Returns the installer status information
+ * Returns the list of jobs
  */
 const fetchStorageJobs = async (): Promise<Job[]> => {
     const jobs: Job[] = await get("/api/manager/installer");
     return jobs;
   };
+
+/**
+ * Returns the job with given id or undefined
+ */
+const findStorageJob = async (id: string): Promise<Job|undefined> => {
+  return fetchStorageJobs().then((jobs: Job[]) => jobs.find((value, _i, _o) => value.id === id));
+};
+
+  export { fetchStorageJobs, findStorageJob };

web/src/queries/dasd.ts

@@ -31,6 +31,7 @@ import { useInstallerClient } from "~/context/installer";
 import React from "react";
 import { hex } from "~/utils";
 import { DASDDevice } from "~/types/dasd";
+import { findStorageJob } from "~/api/storage";
 
 /**
  * Returns a query for retrieving the dasd devices
@@ -48,6 +49,47 @@ const useDASDDevices = () => {
   return devices.map((d) => ({ ...d, hexId: hex(d.id) }));
 };
 
+/**
+ * Returns a query for retrieving the dasd format job
+ */
+const DASDFormatJobQuery = (id: string) => ({
+  queryKey: ["dasd", "formatJob", id],
+  queryFn: () => findStorageJob(id),
+});
+
+/**
+ * Hook that returns DASD devices.
+ */
+const useDASDFormatJob = (id: string) => {
+  const { data: job } = useSuspenseQuery(DASDFormatJobQuery(id));
+  return job;
+};
+
+/**
+ * Listens for DASD format job changes.
+ */
+const useDASDFormatJobChanges = (id: string) => {
+  const client = useInstallerClient();
+  const queryClient = useQueryClient();
+
+  React.useEffect(() => {
+    if (!client) return;
+
+    return client.ws().onEvent((event) => {
+      // TODO: for simplicity we now just invalidate query instead of manually adding, removing or changing devices
+      if (
+        event.type === "DASDFormatJobChanged" && event.job_id === id
+      ) {
+        const data = queryClient.getQueryData(["dasd", "formatJob", id]) as object;
+        const { step, total, done } = event;
+        queryClient.setQueryData(["dasd", "formatJob", id], { ...data, step, total, done });
+      }
+    });
+  });
+  const { data: formatJob } = useSuspenseQuery(DASDFormatJobQuery(id));
+  return formatJob;
+};
+
 /**
  * Returns seleced DASD ids
  */
@@ -198,4 +240,6 @@ const useDiagDisableMutation = () => {
   return useMutation(query);
 };
 
-export { useDASDDevices, useDASDDevicesChanges, useDASDEnableMutation, useDASDDisableMutation, useDiagDisableMutation, useDiagEnableMutation, useFilterDASDChange, filterDASDQuery, useFilterDASD, useSelectedDASD, useSelectedDASDChange, selectedDASDQuery };
+export { useDASDDevices, useDASDDevicesChanges, useDASDEnableMutation, useDASDDisableMutation, useDiagDisableMutation,
+   useDiagEnableMutation, useFilterDASDChange, filterDASDQuery, useFilterDASD, useSelectedDASD, useSelectedDASDChange, selectedDASDQuery,
+   useDASDFormatJobChanges, useDASDFormatJob };

web/src/types/dasd.ts

@@ -32,4 +32,11 @@ type DASDDevice = {
   hexId: number;
 };
 
-export type { DASDDevice };
+type FormatJob = {
+  job_id: string,
+  total: number,
+  step: number,
+  done: boolean
+}
+
+export type { DASDDevice, FormatJob };