refactor(web): use queries to track progress

web/src/client/manager.js

@@ -21,7 +21,7 @@
 
 // @ts-check
 
-import { WithProgress, WithStatus } from "./mixins";
+import { WithStatus } from "./mixins";
 
 const MANAGER_SERVICE = "org.opensuse.Agama.Manager1";
 
@@ -148,10 +148,6 @@ class ManagerBaseClient {
 /**
  * Client to interact with the Agama manager service
  */
-class ManagerClient extends WithProgress(
-  WithStatus(ManagerBaseClient, "/manager/status", MANAGER_SERVICE),
-  "/manager/progress",
-  MANAGER_SERVICE,
-) {}
+class ManagerClient extends WithStatus(ManagerBaseClient, "/manager/status", MANAGER_SERVICE) {}
 
 export { ManagerClient };

web/src/client/mixins.js

@@ -113,89 +113,6 @@ const WithStatus = (superclass, status_path, service_name) =>
     }
   };
 
-/**
- * @typedef {object} Progress
- * @property {number} total - number of steps
- * @property {number} current - current step
- * @property {string} message - message of the current step
- * @property {boolean} finished - whether the progress already finished
- */
-
-/**
- * @typedef {object} ProgressSequence
- * @property {string[]} steps - sequence steps if known in advance
- * @property {number} total - number of steps
- * @property {number} current - current step
- * @property {string} message - message of the current step
- * @property {boolean} finished - whether the progress already finished
- */
-
-/**
- * @callback ProgressHandler
- * @param {Progress} progress - progress status
- * @return {void}
- */
-
-/**
- * Extends the given class with methods to get and track the service progress
- *
- * @template {!WithHTTPClient} T
- * @param {T} superclass - superclass to extend
- * @param {string} progress_path - status resource path (e.g., "/manager/status").
- * @param {string} service_name - service name (e.g., "org.opensuse.Agama.Manager1").
- */
-const WithProgress = (superclass, progress_path, service_name) =>
-  class extends superclass {
-    /**
-     * Returns the service progress
-     *
-     * @return {Promise<ProgressSequence>} an object containing the total steps,
-     *   the current step and whether the service finished or not.
-     */
-    async getProgress() {
-      const response = await this.client.get(progress_path);
-      if (!response.ok) {
-        console.log("get progress failed with:", response);
-        return {
-          steps: [],
-          total: 0,
-          current: 0,
-          message: "Failed to get progress",
-          finished: false,
-        };
-      } else {
-        const { steps, currentStep, maxSteps, currentTitle, finished } = await response.json();
-        return {
-          steps,
-          total: maxSteps,
-          current: currentStep,
-          message: currentTitle,
-          finished,
-        };
-      }
-    }
-
-    /**
-     * Register a callback to run when the progress changes
-     *
-     * @param {ProgressHandler} handler - callback function
-     * @return {import ("./http").RemoveFn} function to disable the callback
-     */
-    onProgressChange(handler) {
-      return this.client.onEvent("Progress", ({ service, ...progress }) => {
-        if (service === service_name) {
-          const { currentStep, maxSteps, currentTitle, finished } = progress;
-          handler({
-            total: maxSteps,
-            current: currentStep,
-            message: currentTitle,
-            finished,
-          });
-        }
-      });
-    }
-  };
-
 /**
  * @typedef {object} ValidationError
  * @property {string} message - Error message
@@ -214,4 +131,4 @@ const createError = (message) => {
   return { message };
 };
 
-export { WithProgress, WithStatus };
+export { WithStatus };

web/src/client/software.js

@@ -21,7 +21,7 @@
 
 // @ts-check
 
-import { WithProgress, WithStatus } from "./mixins";
+import { WithStatus } from "./mixins";
 
 const SOFTWARE_SERVICE = "org.opensuse.Agama.Software1";
 
@@ -45,11 +45,7 @@ class SoftwareBaseClient {
 /**
  * Manages software and product configuration.
  */
-class SoftwareClient extends WithProgress(
-  WithStatus(SoftwareBaseClient, "/software/status", SOFTWARE_SERVICE),
-  "/software/progress",
-  SOFTWARE_SERVICE,
-) {}
+class SoftwareClient extends WithStatus(SoftwareBaseClient, "/software/status", SOFTWARE_SERVICE) {}
 
 class ProductClient {
   /**

web/src/client/storage.js

@@ -23,7 +23,7 @@
 // cspell:ignore ptable
 
 import { compact, hex, uniq } from "~/utils";
-import { WithProgress, WithStatus } from "./mixins";
+import { WithStatus } from "./mixins";
 import { HTTPClient } from "./http";
 
 const SERVICE_NAME = "org.opensuse.Agama.Storage1";
@@ -1652,10 +1652,6 @@ class StorageBaseClient {
 /**
  * Allows interacting with the storage settings
  */
-class StorageClient extends WithProgress(
-  WithStatus(StorageBaseClient, "/storage/status", SERVICE_NAME),
-  "/storage/progress",
-  SERVICE_NAME,
-) {}
+class StorageClient extends WithStatus(StorageBaseClient, "/storage/status", SERVICE_NAME) {}
 
 export { StorageClient, EncryptionMethods };

web/src/components/core/ProgressReport.jsx

@@ -35,7 +35,13 @@ import {
 
 import { _ } from "~/i18n";
 import { Center } from "~/components/layout";
-import { useInstallerClient } from "~/context/installer";
+import {
+  progressQuery,
+  useProgress,
+  useProgressChanges,
+  useResetProgress,
+} from "~/queries/progress";
+import { useQuery } from "@tanstack/react-query";
 
 const Progress = ({ steps, step, firstStep, detail }) => {
   const stepProperties = (stepNumber) => {
@@ -45,9 +51,9 @@ const Progress = ({ steps, step, firstStep, detail }) => {
       titleId: `step-${stepNumber}-title`,
     };
 
-    if (stepNumber < step.current) {
-      properties.variant = "success";
-      properties.description = <div>{_("Finished")}</div>;
+    if (stepNumber > step.current) {
+      properties.variant = "pending";
+      properties.description = <div>{_("Pending")}</div>;
     }
 
     if (properties.isCurrent) {
@@ -69,9 +75,9 @@ const Progress = ({ steps, step, firstStep, detail }) => {
       }
     }
 
-    if (stepNumber > step.current) {
-      properties.variant = "pending";
-      properties.description = <div>{_("Pending")}</div>;
+    if (stepNumber < step.current || step.finished) {
+      properties.variant = "success";
+      properties.description = <div>{_("Finished")}</div>;
     }
 
     return properties;
@@ -95,47 +101,43 @@ const Progress = ({ steps, step, firstStep, detail }) => {
   );
 };
 
+function findDetail(progresses) {
+  return progresses.find((progress) => {
+    return progress?.finished === false;
+  });
+}
+
 /**
  * @component
  *
  * Shows progress steps when a product is selected.
  */
 function ProgressReport({ title, firstStep }) {
-  const { manager, storage, software } = useInstallerClient();
-  const [steps, setSteps] = useState();
-  const [step, setStep] = useState();
-  const [detail, setDetail] = useState();
-
-  useEffect(() => software.onProgressChange(setDetail), [software, setDetail]);
-  useEffect(() => storage.onProgressChange(setDetail), [storage, setDetail]);
+  useResetProgress();
+  const progress = useProgress("manager", { suspense: true });
+  const [steps, setSteps] = useState(progress.steps);
+  const softwareProgress = useProgress("software");
+  const storageProgress = useProgress("storage");
+  useProgressChanges();
 
   useEffect(() => {
-    manager.getProgress().then((progress) => {
-      setSteps(progress.steps);
-      setStep(progress);
-    });
-
-    return manager.onProgressChange(setStep);
-  }, [manager, setSteps]);
-
-  const Content = () => {
-    if (!steps) {
-      return;
-    }
-
-    return (
-      <Progress
-        titleId="progress-title"
-        steps={steps}
-        step={step}
-        detail={detail}
-        firstStep={firstStep}
-        currentStep={false}
-      />
-    );
-  };
+    if (progress.steps.length === 0) return;
+
+    setSteps(progress.steps);
+  }, [progress, steps]);
+  const detail = findDetail([softwareProgress, storageProgress]);
+
+  const Content = () => (
+    <Progress
+      titleId="progress-title"
+      steps={steps}
+      step={progress}
+      detail={detail}
+      firstStep={firstStep}
+      currentStep={false}
+    />
+  );
 
-  const progressTitle = !steps ? _("Waiting for progress status...") : title;
   return (
     <Center>
       <Grid hasGutter>
@@ -149,7 +151,7 @@ function ProgressReport({ title, firstStep }) {
               >
                 <Spinner size="xl" />
                 <h1 id="progress-title" style={{ textAlign: "center" }}>
-                  {progressTitle}
+                  {title}
                 </h1>
                 <Content />
               </Flex>