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

web/src/components/storage/DASDPage.jsx

@@ -25,6 +25,8 @@ import DASDFormatProgress from "~/components/storage/DASDFormatProgress";
 import { _ } from "~/i18n";
 import { useCancellablePromise } from "~/utils";
 import { useInstallerClient } from "~/context/installer";
+import { Page } from "~/components/core";
+import { useDASDDevices, useDASDDevicesChanges } from "~/queries/dasd";
 
 const reducer = (state, action) => {
   const { type, payload } = action;
@@ -128,63 +130,36 @@ const initialState = {
 };
 
 export default function DASDPage() {
+  useDASDDevicesChanges();
+  const devices = useDASDDevices();
+  initialState.devices = devices;
   const { storage: client } = useInstallerClient();
   const { cancellablePromise } = useCancellablePromise();
   const [state, dispatch] = useReducer(reducer, initialState);
 
   useEffect(() => {
-    const loadDevices = async () => {
-      dispatch({ type: "START_LOADING" });
-      const devices = await cancellablePromise(client.dasd.getDevices());
-      dispatch({ type: "SET_DEVICES", payload: { devices } });
-      dispatch({ type: "STOP_LOADING" });
-    };
-
     const loadJobs = async () => {
       const jobs = await cancellablePromise(client.dasd.getJobs());
       if (jobs.length > 0) {
         dispatch({ type: "START_FORMAT_JOB", payload: { data: jobs[0] } });
       }
     };
 
-    loadDevices().catch(console.error);
     loadJobs().catch(console.error);
-  }, [client.dasd, cancellablePromise]);
-
-  useEffect(() => {
-    const subscriptions = [];
-
-    const subscribe = async () => {
-      const action = (type, device) => dispatch({ type, payload: { device } });
-
-      subscriptions.push(
-        await client.dasd.deviceEventListener("added", (d) => action("ADD_DEVICE", d)),
-        await client.dasd.deviceEventListener("removed", (d) => action("REMOVE_DEVICE", d)),
-        await client.dasd.deviceEventListener("changed", (d) => action("UPDATE_DEVICE", d)),
-      );
-
-      await client.dasd.onJobAdded((data) =>
-        dispatch({ type: "START_FORMAT_JOB", payload: { data } }),
-      );
-      await client.dasd.onJobChanged((data) =>
-        dispatch({ type: "UPDATE_FORMAT_JOB", payload: { data } }),
-      );
-    };
-
-    const unsubscribe = () => {
-      subscriptions.forEach((fn) => fn());
-    };
-
-    subscribe();
-    return unsubscribe;
-  }, [client.dasd]);
+  }, [client.dasd, cancellablePromise, devices]);
 
   return (
-    <>
-      <DASDTable state={state} dispatch={dispatch} />
-      {state.formatJob.running && (
-        <DASDFormatProgress job={state.formatJob} devices={state.devices} />
-      )}
-    </>
+    <Page>
+      <Page.Header>
+        <h2>{_("DASD")}</h2>
+      </Page.Header>
+
+      <Page.MainContent>
+        <DASDTable state={state} dispatch={dispatch} />
+        {state.formatJob.running && (
+          <DASDFormatProgress job={state.formatJob} devices={state.devices} />
+        )}
+      </Page.MainContent>
+    </Page>
   );
 }

web/src/routes/storage.tsx

@@ -23,7 +23,7 @@ import React from "react";
 import BootSelection from "~/components/storage/BootSelection";
 import DeviceSelection from "~/components/storage/DeviceSelection";
 import SpacePolicySelection from "~/components/storage/SpacePolicySelection";
-import ISCSIPage from "~/components/storage/ISCSIPage";
+import { DASDPage, ISCSIPage } from "~/components/storage";
 import ProposalPage from "~/components/storage/ProposalPage";
 import { Route } from "~/types/routes";
 import { N_ } from "~/i18n";
@@ -34,6 +34,7 @@ const PATHS = {
   bootingPartition: "/storage/booting-partition",
   spacePolicy: "/storage/space-policy",
   iscsi: "/storage/iscsi",
+  dasd: "/storage/dasd"
 };
 
 const routes = (): Route => ({
@@ -61,6 +62,11 @@ const routes = (): Route => ({
       element: <ISCSIPage />,
       handle: { name: N_("iSCSI") },
     },
+    {
+      path: PATHS.dasd,
+      element: <DASDPage />,
+      handle: { name: N_("DASD") },
+    },
   ],
 });