diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/components/ScriptDetailsModal/ScriptDetailsModal.tsx b/frontend/pages/DashboardPage/cards/ActivityFeed/components/ScriptDetailsModal/ScriptDetailsModal.tsx index 69afa8579..42df625f0 100644 --- a/frontend/pages/DashboardPage/cards/ActivityFeed/components/ScriptDetailsModal/ScriptDetailsModal.tsx +++ b/frontend/pages/DashboardPage/cards/ActivityFeed/components/ScriptDetailsModal/ScriptDetailsModal.tsx @@ -167,7 +167,7 @@ const ScriptDetailsModal = ({ onCancel, }: IScriptDetailsModalProps) => { const { data, isLoading, isError } = useQuery( - ["scriptDetailsModal"], + ["scriptDetailsModal", scriptExecutionId], () => { return scriptsAPI.getScriptResult(scriptExecutionId); }, diff --git a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx index db5bf09b8..caffc9a8b 100644 --- a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx +++ b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx @@ -1,4 +1,10 @@ -import React, { useContext, useState, useCallback, useEffect } from "react"; +import React, { + useContext, + useState, + useCallback, + useEffect, + useRef, +} from "react"; import { Params, InjectedRouter } from "react-router/lib/Router"; import { useQuery } from "react-query"; import { useErrorHandler } from "react-error-boundary"; @@ -48,6 +54,7 @@ import { } from "utilities/helpers"; import permissions from "utilities/permissions"; import { DEFAULT_QUERY } from "utilities/constants"; +import ScriptDetailsModal from "pages/DashboardPage/cards/ActivityFeed/components/ScriptDetailsModal"; import HostSummaryCard from "../cards/HostSummary"; import AboutCard from "../cards/About"; @@ -154,6 +161,8 @@ const HostDetailsPage = ({ const [showBootstrapPackageModal, setShowBootstrapPackageModal] = useState( false ); + const [showScriptDetailsModal, setShowScriptDetailsModal] = useState(false); + const [selectedPolicy, setSelectedPolicy] = useState( null ); @@ -168,6 +177,10 @@ const HostDetailsPage = ({ const [usersSearchString, setUsersSearchString] = useState(""); const [pathname, setPathname] = useState(""); + // used to track the current script execution id we want to show in the show + // details modal. + const scriptExecutionId = useRef(null); + const { data: fleetQueries, error: fleetQueriesError } = useQuery< IListQueriesResponse, Error, @@ -540,6 +553,16 @@ const HostDetailsPage = ({ ); }; + const onCancelScriptDetailsModal = () => { + setShowScriptDetailsModal(false); + scriptExecutionId.current = null; + }; + + const onShowScriptDetails = (executionId: string) => { + scriptExecutionId.current = executionId; + setShowScriptDetailsModal(true); + }; + const onTransferHostSubmit = async (team: ITeam) => { setIsUpdatingHost(true); @@ -791,6 +814,7 @@ const HostDetailsPage = ({ page={page} router={router} isHostOnline={host?.status === "online"} + onShowDetails={onShowScriptDetails} /> )} @@ -905,6 +929,12 @@ const HostDetailsPage = ({ onClose={() => setShowBootstrapPackageModal(false)} /> )} + {showScriptDetailsModal && scriptExecutionId.current && ( + + )} ); diff --git a/frontend/pages/hosts/details/cards/Scripts/Scripts.tsx b/frontend/pages/hosts/details/cards/Scripts/Scripts.tsx index 4c94a499c..62095581c 100644 --- a/frontend/pages/hosts/details/cards/Scripts/Scripts.tsx +++ b/frontend/pages/hosts/details/cards/Scripts/Scripts.tsx @@ -16,25 +16,26 @@ import TableContainer from "components/TableContainer"; import EmptyTable from "components/EmptyTable"; import DataError from "components/DataError"; import { ITableQueryData } from "components/TableContainer/TableContainer"; -import ScriptDetailsModal from "pages/DashboardPage/cards/ActivityFeed/components/ScriptDetailsModal"; import { generateDataSet, generateTableHeaders } from "./ScriptsTableConfig"; const baseClass = "host-scripts-section"; interface IScriptsProps { - hostId?: number; - page?: number; isHostOnline: boolean; router: InjectedRouter; + hostId?: number; + page?: number; + onShowDetails: (scriptExecutionId: string) => void; } -const Scripts = ({ hostId, page = 0, isHostOnline, router }: IScriptsProps) => { - const [showScriptDetailsModal, setShowScriptDetailsModal] = useState(false); - // used to track the current script execution id we want to show in the show - // details modal. - const scriptExecutionId = useRef(null); - +const Scripts = ({ + hostId, + page = 0, + isHostOnline, + router, + onShowDetails, +}: IScriptsProps) => { const { renderFlash } = useContext(NotificationContext); const { @@ -62,8 +63,7 @@ const Scripts = ({ hostId, page = 0, isHostOnline, router }: IScriptsProps) => { switch (action) { case "showDetails": if (!script.last_execution) return; - scriptExecutionId.current = script.last_execution.execution_id; - setShowScriptDetailsModal(true); + onShowDetails(script.last_execution.execution_id); break; case "run": try { @@ -82,11 +82,6 @@ const Scripts = ({ hostId, page = 0, isHostOnline, router }: IScriptsProps) => { } }; - const onCancelScriptDetailsModal = () => { - setShowScriptDetailsModal(false); - scriptExecutionId.current = null; - }; - if (isErrorScriptData) { return ; } @@ -117,13 +112,6 @@ const Scripts = ({ hostId, page = 0, isHostOnline, router }: IScriptsProps) => { disableCount /> )} - - {showScriptDetailsModal && scriptExecutionId.current && ( - - )} ); };