Merge branch 'CE-3145-accordion-fetch-when-opened' into 'develop'

CE-3145: Only fetch data inside accordion when expanded

See merge request !566

src/components/IOC/IOCLiveStatus/IOCLiveStatus.jsx

@@ -86,6 +86,7 @@ export function IOCLiveStatus({ ioc }) {
               <LokiPanel
                 hostName={hostName}
                 iocName={ioc.namingName}
+                isExpanded={accordionState.logStreamOpen}
               />
             )}
           </SimpleAccordion>
@@ -107,6 +108,7 @@ export function IOCLiveStatus({ ioc }) {
           <RecordSearch
             iocName={ioc.namingName}
             rowType="iocDetails"
+            isExpanded={accordionState.recordsOpen}
           />
         </SimpleAccordion>
       </AccessControl>

src/components/Job/JobDetails.tsx

@@ -82,6 +82,7 @@ export const JobsDetails = ({ jobDetail: operation }: JobDetailsProps) => {
   const StepIcon = operation?.status
     ? StepperComponents[operation.status.toLowerCase()]
     : StepperComponents[STEPPER_STATES.unknown];
+  const [expanded, setExpanded] = useState(false);
 
   const awxJob = useMemo(
     () => new AWXJobDetails(operation, operation.action),
@@ -114,6 +115,8 @@ export const JobsDetails = ({ jobDetail: operation }: JobDetailsProps) => {
         renderNoAccess={() => <></>}
       >
         <SimpleAccordion
+          expanded={expanded}
+          onChange={() => setExpanded((prev) => !prev)}
           summary={
             <Stack
               flexDirection="row"
@@ -136,7 +139,10 @@ export const JobsDetails = ({ jobDetail: operation }: JobDetailsProps) => {
             </Stack>
           }
         >
-          <DeploymentJobOutput job={operation} />
+          <DeploymentJobOutput
+            job={operation}
+            isExpanded={expanded}
+          />
         </SimpleAccordion>
       </AccessControl>
     </Stack>

src/components/common/Inputs/TimeRange.tsx

@@ -26,7 +26,7 @@ export const TimeRange = ({
       <Select
         variant="standard"
         labelId="time-range-select"
-        defaultValue={selected}
+        value={selected}
         onChange={onTimeRangeChange}
       >
         {values.map((range) => {

src/components/common/Loki/LokiPanel.jsx

@@ -33,7 +33,7 @@ const TIME_RANGE_VALUES = [
  */
 
 const LOG_POLL_INTERVAL = 5000;
-export function LokiPanel({ hostName, iocName, isSyslog }) {
+export function LokiPanel({ hostName, iocName, isSyslog, isExpanded }) {
   const showWarning = useCustomSnackbar();
   const [timeRange, setTimeRange] = useState(720);
   const [logDialogOpen, setLogDialogOpen] = useState(false);
@@ -113,12 +113,16 @@ export function LokiPanel({ hostName, iocName, isSyslog }) {
   const [
     getSysLogData,
     { data: sysLogData, error: sysLogError, isLoading: sysDataIsLoading }
-  ] = useLazyFetchSyslogLinesQuery({ pollingInterval: LOG_POLL_INTERVAL });
+  ] = useLazyFetchSyslogLinesQuery({
+    pollingInterval: isExpanded ? LOG_POLL_INTERVAL : 0
+  });
 
   const [
     getProcServLog,
     { data: procServLog, error: procServLogError, isLoading: procDataIsLoading }
-  ] = useLazyFetchProcServLogLinesQuery({ pollingInterval: LOG_POLL_INTERVAL });
+  ] = useLazyFetchProcServLogLinesQuery({
+    pollingInterval: isExpanded ? LOG_POLL_INTERVAL : 0
+  });
 
   const hasLogError = !!sysLogError || !!procServLogError;
   const hasAbortError =
@@ -144,12 +148,14 @@ export function LokiPanel({ hostName, iocName, isSyslog }) {
   }, [alertIds]);
 
   useEffect(() => {
-    if (isSyslog === true) {
-      getSysLogData(params);
-    } else {
-      getProcServLog(params);
+    if (isExpanded) {
+      if (isSyslog === true) {
+        getSysLogData(params);
+      } else {
+        getProcServLog(params);
+      }
     }
-  }, [getSysLogData, getProcServLog, isSyslog, params]);
+  }, [getSysLogData, getProcServLog, isSyslog, isExpanded, params]);
 
   useEffect(() => {
     setHtml(

src/components/deployments/DeploymentJobOutput.jsx

-import {
-  useState,
-  useCallback,
-  useRef,
-  useEffect,
-  useContext,
-  useMemo
-} from "react";
-import { apiContext } from "../../api/DeployApi";
-import { useAPIMethod, usePolling } from "@ess-ics/ce-ui-common";
+import { useState, useRef, useEffect, useMemo } from "react";
 import { LogStreamConsole } from "../common/LogStream/LogStreamConsole";
 import { LogStreamConsoleDialog } from "../common/LogStream/LogStreamConsoleDialog";
 import { PopoutButton } from "../common/Buttons/PopoutButton";
 import { Alert, LinearProgress, Stack } from "@mui/material";
 import { getErrorMessage, isAbortError } from "../common/Helper";
+import { useLazyFetchDeploymentJobLogQuery } from "../../store/deployApi";
 
 const LOG_POLL_INTERVAL = 5000;
 
-export function DeploymentJobOutput({ job }) {
+export function DeploymentJobOutput({ job, isExpanded }) {
   const [consoleDialogOpen, setConsoleDialogOpen] = useState(false);
-  const client = useContext(apiContext);
   const finalResultsNeeded = useRef(true);
   const params = useMemo(
     () => ({
-      awx_job_id: job.awxJobId
+      awxJobId: job.awxJobId
     }),
     [job]
   );
+  const [getLogById, { data: log, isSuccess: logDataReady, error: logError }] =
+    useLazyFetchDeploymentJobLogQuery({
+      pollingInterval: isExpanded ? LOG_POLL_INTERVAL : 0
+    });
 
-  const {
-    value: log,
-    wrapper: getLogById,
-    loading: logLoading,
-    dataReady: logDataReady,
-    error: logError,
-    abort: abortGetLogById
-  } = useAPIMethod({
-    fcn: client.apis.Jobs.fetchDeploymentJobLog,
-    params
-  });
-
-  const getLog = useCallback(() => {
-    if (!job.finishedAt || finalResultsNeeded.current) {
-      getLogById(job.jobId);
-      finalResultsNeeded.current = !job.finishedAt;
+  useEffect(() => {
+    if (isExpanded) {
+      if (!job.finishedAt || finalResultsNeeded.current) {
+        getLogById(params);
+        finalResultsNeeded.current = !job.finishedAt;
+      }
     }
-  }, [job.finishedAt, job.jobId, getLogById]);
+  }, [job.finishedAt, job.jobId, isExpanded, getLogById, params]);
 
   const hasAbortError = isAbortError(logError);
   const showLoading = !log || !job.startTime;
 
-  usePolling(
-    getLog,
-    logLoading || !logDataReady || logError,
-    LOG_POLL_INTERVAL,
-    abortGetLogById
-  );
-
   useEffect(() => {
     finalResultsNeeded.current = true;
   }, [job.jobId]);

src/components/records/RecordSearch.jsx

-import { useEffect, useCallback, useState, useContext } from "react";
+import { useEffect, useCallback, useState } from "react";
 import { initRequestParams } from "../common/Helper";
 import { RecordTable } from "./RecordTable";
 import { useSearchParams } from "react-router-dom";
 import { Grid, Tabs, Tab } from "@mui/material";
-import { useAPIMethod, usePagination, SearchBar } from "@ess-ics/ce-ui-common";
-import { apiContext } from "../../api/DeployApi";
+import { usePagination, SearchBar } from "@ess-ics/ce-ui-common";
 import { ROWS_PER_PAGE } from "../../constants";
+import { useLazyFindAllRecordsQuery } from "../../store/deployApi";
 
-export function RecordSearch({ iocName, rowType }) {
-  const client = useContext(apiContext);
-
-  const {
-    value: records,
-    wrapper: getRecords,
-    loading,
-    dataReady,
-    abort
-  } = useAPIMethod({
-    fcn: client.apis.Records.findAllRecords,
-    call: false
-  });
+export function RecordSearch({ iocName, rowType, isExpanded }) {
+  const [
+    getRecords,
+    { data: records, isLoading: loading, isSuccess: dataReady }
+  ] = useLazyFindAllRecordsQuery();
 
   const [searchParams, setSearchParams] = useSearchParams({ query: "" });
   const [recordFilter, setRecordFilter] = useState();
@@ -49,16 +41,14 @@ export function RecordSearch({ iocName, rowType }) {
 
   // Request new search results whenever search or pagination changes
   useEffect(() => {
-    let requestParams = initRequestParams(pagination);
-    requestParams.pv_status = recordFilter;
-    requestParams.text = searchParams.get("query");
-    requestParams.ioc_name = iocName;
-    getRecords(requestParams);
-
-    return () => {
-      abort();
-    };
-  }, [getRecords, recordFilter, searchParams, pagination, abort, iocName]);
+    if (isExpanded) {
+      let requestParams = initRequestParams(pagination);
+      requestParams.pv_status = recordFilter;
+      requestParams.text = searchParams.get("query");
+      requestParams.ioc_name = iocName;
+      getRecords(requestParams);
+    }
+  }, [getRecords, recordFilter, searchParams, pagination, iocName, isExpanded]);
 
   // Callback for searchbar, called whenever user updates search
   const setSearch = useCallback(
@@ -71,7 +61,6 @@ export function RecordSearch({ iocName, rowType }) {
   // Invoked by Table on change to pagination
   const onPage = (params) => {
     setPagination(params);
-    abort();
   };
 
   return (

src/views/host/details/HostDetailsView.jsx

@@ -130,6 +130,7 @@ export function HostDetailsView({ hostId, host, alert }) {
               <LokiPanel
                 hostName={host.name}
                 isSyslog
+                isExpanded={accordionState.logStreamOpen}
               />
             </SimpleAccordion>
           </AccessControl>