Merge branch 'CE-2071-convert-useJobById' into 'develop'

CE-2071: Convert useJobById to common

See merge request !359

src/api/SwaggerApi.js

@@ -250,24 +250,10 @@ export function unpackJob(job) {
   return { ...job };
 }
 
-export function useJob(awxJobId, onError) {
+export function useJobLogById() {
   const api = useContext(apiContext);
-  const method = useCallAndUnpack(
-    api.apis.Deployments.fetchJobDetails,
-    unpackJob
-  );
-  const boundMethod = useCallback(method.bind(null, { awx_job_id: awxJobId }), [
-    awxJobId
-  ]);
-  return useAsync({ fcn: boundMethod, call: true, onError: onError });
-}
-
-export function useJobById() {
-  const api = useContext(apiContext);
-  const method = useCallAndUnpack(
-    (awxJobId) =>
-      api.apis.Deployments.fetchJobDetails({ awx_job_id: awxJobId }),
-    unpackJob
+  const method = useCallAndUnpack((awxJobId) =>
+    api.apis.Deployments.fetchDeploymentJobLog({ awx_job_id: awxJobId })
   );
   return useAsync({ fcn: method, call: false, init: null });
 }

src/components/IOC/IOCManage/IOCManage.js

 import { Button, Link as MuiLink, Tooltip, Typography } from "@mui/material";
-import React, { useState, useEffect, useContext, useCallback } from "react";
+import React, {
+  useState,
+  useEffect,
+  useContext,
+  useCallback,
+  useMemo
+} from "react";
 import { IOCDetails } from "../IOCDetails";
 import { DeployIOC } from "../DeployIOC";
 import { UndeployIOC } from "../UndeployIOC";
 import { SimpleModal } from "../../common/SimpleModal/SimpleModal";
 import {
   useUpdateAndDeployIoc,
-  useCreateUndeployment,
-  useJobById
+  useCreateUndeployment
 } from "../../../api/SwaggerApi";
-import { userContext, SimpleAccordion } from "@ess-ics/ce-ui-common";
+import {
+  userContext,
+  SimpleAccordion,
+  useAPIMethod
+} from "@ess-ics/ce-ui-common";
 import AlertMessages from "../AlertMessages";
 import AccessControl from "../../auth/AccessControl";
 import { DeploymentStatus } from "../../../api/DataTypes";
@@ -17,6 +26,7 @@ import { IOCService } from "../IOCService";
 import useUrlState from "@ahooksjs/use-url-state";
 import { serialize, deserialize } from "../../common/URLState/URLState";
 import { JobTable } from "../../Job";
+import { apiContext } from "../../../api/DeployApi";
 
 export function IOCManage({
   ioc,
@@ -38,9 +48,21 @@ export function IOCManage({
     { navigateMode: "replace" }
   );
 
+  const client = useContext(apiContext);
+
   const [deployDialogOpen, setDeployDialogOpen] = useState(false);
   const [undeployDialogOpen, setUndeployDialogOpen] = useState(false);
-  const [deploymentJob, getDeploymentJobById] = useJobById();
+
+  const deploymentJobParams = useMemo(
+    () => ({ awx_job_id: ioc.activeDeployment?.awxJobId }),
+    [ioc]
+  );
+
+  const { value: deploymentJob, wrapper: getDeploymentJobById } = useAPIMethod({
+    fcn: client.apis.Deployments.fetchJobDetails,
+    call: false,
+    params: deploymentJobParams
+  });
 
   useEffect(() => {
     if (ioc.activeDeployment?.awxJobId) {

src/components/common/notification/Watchers.js

-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useContext } from "react";
 import { AdHocCommand, DeploymentStatus } from "../../../api/DataTypes";
-import { useOperation, useJobById } from "../../../api/SwaggerApi";
+import { useOperation } from "../../../api/SwaggerApi";
 import { useSafePolling } from "../../../hooks/Polling";
 import { STATUS_POLL_INTERVAL } from "./Notifications";
 import {
@@ -9,16 +9,33 @@ import {
   WATCHED_COMMAND_STORAGE_KEY,
   WATCHED_DEPLOYMENT_STORAGE_KEY
 } from "./Storage";
+import { useAPIMethod } from "@ess-ics/ce-ui-common";
+import { apiContext } from "../../../api/DeployApi";
 
 export function DeploymentWatcher({
   deploymentId,
   addNotification,
   stopWatching
 }) {
+  const client = useContext(apiContext);
+
   const [deployment, getDeployment /* reset*/, , deploymentLoading] =
     useOperation(deploymentId);
-  const [deploymentJob, getDeploymentJobById /* reset*/, , jobLoading] =
-    useJobById();
+
+  const deploymentJobParams = useMemo(
+    () => ({ awx_job_id: deployment?.awxJobId }),
+    [deployment]
+  );
+
+  const {
+    value: deploymentJob,
+    wrapper: getDeploymentJobById,
+    loading: jobLoading,
+    dataReady
+  } = useAPIMethod({
+    fcn: client.apis.Deployments.fetchJobDetails,
+    params: deploymentJobParams
+  });
 
   const getDeploymentJob = useCallback(() => {
     if (deployment?.awxJobId) {
@@ -27,7 +44,11 @@ export function DeploymentWatcher({
   }, [deployment?.awxJobId, getDeploymentJobById]);
 
   useSafePolling(getDeployment, deploymentLoading, STATUS_POLL_INTERVAL);
-  useSafePolling(getDeploymentJob, jobLoading, STATUS_POLL_INTERVAL);
+  useSafePolling(
+    getDeploymentJob,
+    jobLoading || !dataReady,
+    STATUS_POLL_INTERVAL
+  );
 
   const deploymentStatus = useMemo(
     () => new DeploymentStatus(deployment, deploymentJob),

src/views/jobs/JobDetailsContainer.js

-import React, { useCallback, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useRef,
+  useState,
+  useContext,
+  useMemo
+} from "react";
 import { JobDetailsView } from "./JobDetailsView";
 import { LinearProgress } from "@mui/material";
-import { useOperation, useJobById } from "../../api/SwaggerApi";
+import { useOperation } from "../../api/SwaggerApi";
 import { useSafePolling } from "../../hooks/Polling";
 import NotFoundView from "../../components/navigation/NotFoundView/NotFoundView";
 import { onFetchEntityError } from "../../components/common/Helper";
+import { useAPIMethod } from "@ess-ics/ce-ui-common";
+import { apiContext } from "../../api/DeployApi";
 
 const POLL_DEPLOYMENT_INTERVAL = 5000;
 export function JobDetailsContainer({ id }) {
   const [notFoundError, setNotFoundError] = useState();
 
+  const client = useContext(apiContext);
+
   const [operation, getOperation /* reset*/, , operationLoading] = useOperation(
     id,
     (m, s) => {
@@ -17,7 +27,22 @@ export function JobDetailsContainer({ id }) {
       onFetchEntityError(m, s, setNotFoundError);
     }
   );
-  const [job, getJobById, , /* reset*/ jobLoading] = useJobById();
+
+  const deploymentJobParams = useMemo(
+    () => ({ awx_job_id: operation?.awxJobId }),
+    [operation]
+  );
+
+  const {
+    value: job,
+    wrapper: getJobById,
+    loading: jobLoading,
+    dataReady
+  } = useAPIMethod({
+    fcn: client.apis.Deployments.fetchJobDetails,
+    params: deploymentJobParams
+  });
+
   const firstTime = useRef(true);
 
   const jobFinished = job?.finished;
@@ -31,7 +56,7 @@ export function JobDetailsContainer({ id }) {
   const getAwxJobUntilFinished = useCallback(() => {
     if (!jobFinished || firstTime.current) {
       if (operation?.awxJobId) {
-        getJobById(operation.awxJobId);
+        getJobById(operation?.awxJobId);
         firstTime.current = false;
       }
     }
@@ -56,7 +81,7 @@ export function JobDetailsContainer({ id }) {
       {operation?.awxJobId && (
         <Watcher
           get={getAwxJobUntilFinished}
-          loading={jobLoading}
+          loading={jobLoading || !dataReady}
         />
       )}
     </>