CE-3145: Only fetch data inside accordion when expanded

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/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);
@@ -144,12 +144,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

@@ -16,7 +16,7 @@ import { getErrorMessage, isAbortError } from "../common/Helper";
 
 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);
@@ -40,11 +40,13 @@ export function DeploymentJobOutput({ job }) {
   });
 
   const getLog = useCallback(() => {
-    if (!job.finishedAt || finalResultsNeeded.current) {
-      getLogById(job.jobId);
-      finalResultsNeeded.current = !job.finishedAt;
+    if (isExpanded) {
+      if (!job.finishedAt || finalResultsNeeded.current) {
+        getLogById(job.jobId);
+        finalResultsNeeded.current = !job.finishedAt;
+      }
     }
-  }, [job.finishedAt, job.jobId, getLogById]);
+  }, [job.finishedAt, job.jobId, isExpanded, getLogById]);
 
   const hasAbortError = isAbortError(logError);
   const showLoading = !log || !job.startTime;

src/components/records/RecordSearch.jsx

@@ -7,7 +7,7 @@ import { useAPIMethod, usePagination, SearchBar } from "@ess-ics/ce-ui-common";
 import { apiContext } from "../../api/DeployApi";
 import { ROWS_PER_PAGE } from "../../constants";
 
-export function RecordSearch({ iocName, rowType }) {
+export function RecordSearch({ iocName, rowType, isExpanded }) {
   const client = useContext(apiContext);
 
   const {
@@ -49,16 +49,26 @@ 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);
+    if (isExpanded) {
+      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]);
+      return () => {
+        abort();
+      };
+    }
+  }, [
+    getRecords,
+    recordFilter,
+    searchParams,
+    pagination,
+    abort,
+    iocName,
+    isExpanded
+  ]);
 
   // Callback for searchbar, called whenever user updates search
   const setSearch = useCallback(

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>