diff --git a/src/components/IOC/IOCLiveStatus/IOCLiveStatus.jsx b/src/components/IOC/IOCLiveStatus/IOCLiveStatus.jsx index b8a0c051c8ff69b9a613e58f9ab66bf457116fbc..73698a33eeedc13babe69d5c2296534a8d5524e1 100644 --- a/src/components/IOC/IOCLiveStatus/IOCLiveStatus.jsx +++ b/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> diff --git a/src/components/Job/JobDetails.tsx b/src/components/Job/JobDetails.tsx index 03bbe70ab43a226ace97fe2b5d550197c6efbd95..545022064b96aae6ab306b45a1dfbb60d3463226 100644 --- a/src/components/Job/JobDetails.tsx +++ b/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> diff --git a/src/components/common/Loki/LokiPanel.jsx b/src/components/common/Loki/LokiPanel.jsx index d914979763756cbc077f79cbbf49bb7ba4204c7f..428869ca6b3451869e63a5843b54ec076561331b 100644 --- a/src/components/common/Loki/LokiPanel.jsx +++ b/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( diff --git a/src/components/deployments/DeploymentJobOutput.jsx b/src/components/deployments/DeploymentJobOutput.jsx index 73a96120b60dbdeddbb6003e3374ee6de83dbb6f..5f046b272092a02da438bcfb445c982a6eea15bf 100644 --- a/src/components/deployments/DeploymentJobOutput.jsx +++ b/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; diff --git a/src/components/records/RecordSearch.jsx b/src/components/records/RecordSearch.jsx index cb82c42f17997362585e60fa22486eee9ac11c24..8a0b1055ec4431671846224295a0afb813b842cd 100644 --- a/src/components/records/RecordSearch.jsx +++ b/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( diff --git a/src/views/host/details/HostDetailsView.jsx b/src/views/host/details/HostDetailsView.jsx index bd1cb8e4386a1e856870a790db4c832dc7cba692..325ea578c7ac99172fd0c2581d909c8bfb0d8048 100644 --- a/src/views/host/details/HostDetailsView.jsx +++ b/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>