UI – Add policy automation modal for running scripts

changes/22118-run-scripts-fe

@@ -0,0 +1 @@
+* Add ability to trigger script run on policy failure

frontend/interfaces/policy.ts

@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import { SelectedPlatformString } from "interfaces/platform";
+import { IScript } from "./script";
 
 // Legacy PropTypes used on host interface
 export default PropTypes.shape({
@@ -42,8 +43,8 @@ export interface IPolicy {
   critical: boolean;
   calendar_events_enabled: boolean;
   install_software?: IPolicySoftwareToInstall;
+  run_script?: Pick<IScript, "id" | "name">;
 }
-
 export interface IPolicySoftwareToInstall {
   name: string;
   software_title_id: number;
@@ -90,6 +91,10 @@ export interface ILoadTeamPoliciesResponse {
   policies?: IPolicyStats[];
 }
 
+export interface ILoadTeamPolicyResponse {
+  policy: IPolicyStats;
+}
+
 export interface IPolicyFormData {
   description?: string | number | boolean | undefined;
   resolution?: string | number | boolean | undefined;
@@ -102,6 +107,8 @@ export interface IPolicyFormData {
   calendar_events_enabled?: boolean;
   // undefined from GET/LIST when not set, null for PATCH to unset
   software_title_id?: number | null;
+  // null for PATCH to unset - note asymmetry with GET/LIST - see IPolicy.run_script
+  script_id?: number | null;
 }
 
 export interface IPolicyNew {

frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx

@@ -21,7 +21,7 @@ import {
   IPoliciesCountResponse,
   IPolicy,
 } from "interfaces/policy";
-import { API_ALL_TEAMS_ID, ITeamConfig } from "interfaces/team";
+import { API_ALL_TEAMS_ID, API_NO_TEAM_ID, ITeamConfig } from "interfaces/team";
 
 import configAPI from "services/entities/config";
 import globalPoliciesAPI, {
@@ -52,6 +52,8 @@ import CalendarEventsModal from "./components/CalendarEventsModal";
 import { ICalendarEventsFormData } from "./components/CalendarEventsModal/CalendarEventsModal";
 import InstallSoftwareModal from "./components/InstallSoftwareModal";
 import { IInstallSoftwareFormData } from "./components/InstallSoftwareModal/InstallSoftwareModal";
+import RunScriptModal from "./components/RunScriptModal";
+import { IPolicyRunScriptFormData } from "./components/RunScriptModal/RunScriptModal";
 
 interface IManagePoliciesPageProps {
   router: InjectedRouter;
@@ -127,23 +129,16 @@ const ManagePolicyPage = ({
     },
   });
 
+  // loading state used by various policy updates on this page
   const [isUpdatingPolicies, setIsUpdatingPolicies] = useState(false);
-  const [isUpdatingCalendarEvents, setIsUpdatingCalendarEvents] = useState(
-    false
-  );
-  const [
-    isUpdatingPolicySoftwareInstall,
-    setIsUpdatingPolicySoftwareInstall,
-  ] = useState(false);
-  const [isUpdatingOtherWorkflows, setIsUpdatingOtherWorkflows] = useState(
-    false
-  );
+
   const [selectedPolicyIds, setSelectedPolicyIds] = useState<number[]>([]);
   const [showAddPolicyModal, setShowAddPolicyModal] = useState(false);
   const [showDeletePolicyModal, setShowDeletePolicyModal] = useState(false);
   const [showInstallSoftwareModal, setShowInstallSoftwareModal] = useState(
     false
   );
+  const [showRunScriptModal, setShowRunScriptModal] = useState(false);
   const [showCalendarEventsModal, setShowCalendarEventsModal] = useState(false);
   const [showOtherWorkflowsModal, setShowOtherWorkflowsModal] = useState(false);
   const [
@@ -472,6 +467,10 @@ const ManagePolicyPage = ({
     setShowInstallSoftwareModal(!showInstallSoftwareModal);
   };
 
+  const toggleRunScriptModal = () => {
+    setShowRunScriptModal(!showRunScriptModal);
+  };
+
   const toggleCalendarEventsModal = () => {
     setShowCalendarEventsModal(!showCalendarEventsModal);
   };
@@ -484,6 +483,9 @@ const ManagePolicyPage = ({
       case "install_software":
         toggleInstallSoftwareModal();
         break;
+      case "run_script":
+        toggleRunScriptModal();
+        break;
       case "other_workflows":
         toggleOtherWorkflowsModal();
         break;
@@ -495,7 +497,7 @@ const ManagePolicyPage = ({
     webhook_settings: Pick<IWebhookSettings, "failing_policies_webhook">;
     integrations: IZendeskJiraIntegrations;
   }) => {
-    setIsUpdatingOtherWorkflows(true);
+    setIsUpdatingPolicies(true);
     try {
       await (!isAllTeamsSelected
         ? teamsAPI.update(requestBody, teamIdForApi)
@@ -508,7 +510,7 @@ const ManagePolicyPage = ({
       );
     } finally {
       toggleOtherWorkflowsModal();
-      setIsUpdatingOtherWorkflows(false);
+      setIsUpdatingPolicies(false);
       !isAllTeamsSelected ? refetchTeamConfig() : refetchConfig();
     }
   };
@@ -517,7 +519,7 @@ const ManagePolicyPage = ({
     formData: IInstallSoftwareFormData
   ) => {
     try {
-      setIsUpdatingPolicySoftwareInstall(true);
+      setIsUpdatingPolicies(true);
       const changedPolicies = formData.filter((formPolicy) => {
         const prevPolicyState = policiesAvailableToAutomate.find(
           (policy) => policy.id === formPolicy.id
@@ -566,12 +568,68 @@ const ManagePolicyPage = ({
       );
     } finally {
       toggleInstallSoftwareModal();
-      setIsUpdatingPolicySoftwareInstall(false);
+      setIsUpdatingPolicies(false);
+    }
+  };
+
+  const onUpdatePolicyRunScript = async (
+    formData: IPolicyRunScriptFormData
+  ) => {
+    try {
+      setIsUpdatingPolicies(true);
+      const changedPolicies = formData.filter((formPolicy) => {
+        const prevPolicyState = policiesAvailableToAutomate.find(
+          (policy) => policy.id === formPolicy.id
+        );
+
+        const turnedOff =
+          prevPolicyState?.run_script !== undefined &&
+          formPolicy.runScriptEnabled === false;
+
+        const turnedOn =
+          prevPolicyState?.run_script === undefined &&
+          formPolicy.runScriptEnabled === true;
+
+        const updatedRunScriptId =
+          prevPolicyState?.run_script?.id !== undefined &&
+          formPolicy.scriptIdToRun !== prevPolicyState?.run_script?.id;
+
+        return turnedOff || turnedOn || updatedRunScriptId;
+      });
+      if (!changedPolicies.length) {
+        renderFlash("success", "No changes detected.");
+        return;
+      }
+      const responses: Promise<
+        ReturnType<typeof teamPoliciesAPI.update>
+      >[] = [];
+      responses.concat(
+        changedPolicies.map((changedPolicy) => {
+          return teamPoliciesAPI.update(changedPolicy.id, {
+            // "script_id" null will unset running a script for the policy
+            // "script_id": X will sets script X to run when the policy fails
+            script_id: changedPolicy.scriptIdToRun || null,
+            team_id: teamIdForApi,
+          });
+        })
+      );
+      await Promise.all(responses);
+      await wait(100);
+      refetchTeamPolicies();
+      renderFlash("success", "Successfully updated policy automations.");
+    } catch {
+      renderFlash(
+        "error",
+        "Could not update policy automations. Please try again."
+      );
+    } finally {
+      toggleRunScriptModal();
+      setIsUpdatingPolicies(false);
     }
   };
 
   const onUpdateCalendarEvents = async (formData: ICalendarEventsFormData) => {
-    setIsUpdatingCalendarEvents(true);
+    setIsUpdatingPolicies(true);
 
     try {
       // update team config if either field has been changed
@@ -632,7 +690,7 @@ const ManagePolicyPage = ({
       );
     } finally {
       toggleCalendarEventsModal();
-      setIsUpdatingCalendarEvents(false);
+      setIsUpdatingPolicies(false);
     }
   };
 
@@ -802,9 +860,11 @@ const ManagePolicyPage = ({
   const getAutomationsDropdownOptions = (configPresent: boolean) => {
     let disabledInstallTooltipContent: React.ReactNode;
     let disabledCalendarTooltipContent: React.ReactNode;
+    let disabledRunScriptTooltipContent: React.ReactNode;
     if (!isPremiumTier) {
       disabledInstallTooltipContent = "Available in Fleet Premium.";
       disabledCalendarTooltipContent = "Available in Fleet Premium.";
+      disabledRunScriptTooltipContent = "Available in Fleet Premium.";
     } else if (isAllTeamsSelected) {
       disabledInstallTooltipContent = (
         <>
@@ -820,6 +880,13 @@ const ManagePolicyPage = ({
           calendar events.
         </>
       );
+      disabledRunScriptTooltipContent = (
+        <>
+          Select a team to manage
+          <br />
+          run script automation.
+        </>
+      );
     }
     const installSWOption = {
       label: "Install software",
@@ -828,8 +895,16 @@ const ManagePolicyPage = ({
       helpText: "Install software to resolve failing policies.",
       tooltipContent: disabledInstallTooltipContent,
     };
+    const runScriptOption = {
+      label: "Run script",
+      value: "run_script",
+      disabled: !!disabledRunScriptTooltipContent,
+      helpText: "Run script to resolve failing policies.",
+      tooltipContent: disabledRunScriptTooltipContent,
+    };
+
     if (!configPresent) {
-      return [installSWOption];
+      return [installSWOption, runScriptOption];
     }
 
     return [
@@ -841,6 +916,7 @@ const ManagePolicyPage = ({
         tooltipContent: disabledCalendarTooltipContent,
       },
       installSWOption,
+      runScriptOption,
       {
         label: "Other workflows",
         value: "other_workflows",
@@ -858,6 +934,18 @@ const ManagePolicyPage = ({
   if (!isRouteOk) {
     return <Spinner />;
   }
+
+  let teamsDropdownHelpText: string;
+  if (teamIdForApi === API_NO_TEAM_ID) {
+    teamsDropdownHelpText =
+      "Detect device health issues for hosts that are not on a team.";
+  } else if (teamIdForApi === API_ALL_TEAMS_ID) {
+    teamsDropdownHelpText = "Detect device health issues for all hosts.";
+  } else {
+    // a team is selected
+    teamsDropdownHelpText =
+      "Detect device health issues for all hosts assigned to this team.";
+  }
   return (
     <MainContent className={baseClass}>
       <div className={`${baseClass}__wrapper`}>
@@ -910,19 +998,15 @@ const ManagePolicyPage = ({
           )}
         </div>
         <div className={`${baseClass}__description`}>
-          <p>
-            {isAnyTeamSelected
-              ? "Detect device health issues for all hosts assigned to this team."
-              : "Detect device health issues for all hosts."}
-          </p>
+          <p>{teamsDropdownHelpText}</p>
         </div>
         {renderMainTable()}
         {config && automationsConfig && showOtherWorkflowsModal && (
           <OtherWorkflowsModal
             automationsConfig={automationsConfig}
             availableIntegrations={config.integrations}
             availablePolicies={policiesAvailableToAutomate}
-            isUpdating={isUpdatingOtherWorkflows}
+            isUpdating={isUpdatingPolicies}
             onExit={toggleOtherWorkflowsModal}
             onSubmit={onUpdateOtherWorkflows}
           />
@@ -947,7 +1031,17 @@ const ManagePolicyPage = ({
           <InstallSoftwareModal
             onExit={toggleInstallSoftwareModal}
             onSubmit={onUpdatePolicySoftwareInstall}
-            isUpdating={isUpdatingPolicySoftwareInstall}
+            isUpdating={isUpdatingPolicies}
+            policies={policiesAvailableToAutomate}
+            // currentTeamId will at this point be present
+            teamId={currentTeamId ?? 0}
+          />
+        )}
+        {showRunScriptModal && (
+          <RunScriptModal
+            onExit={toggleRunScriptModal}
+            onSubmit={onUpdatePolicyRunScript}
+            isUpdating={isUpdatingPolicies}
             policies={policiesAvailableToAutomate}
             // currentTeamId will at this point be present
             teamId={currentTeamId ?? 0}
@@ -964,7 +1058,7 @@ const ManagePolicyPage = ({
             }
             url={teamConfig?.integrations.google_calendar?.webhook_url || ""}
             policies={policiesAvailableToAutomate}
-            isUpdating={isUpdatingCalendarEvents}
+            isUpdating={isUpdatingPolicies}
           />
         )}
       </div>

frontend/pages/policies/ManagePoliciesPage/components/InstallSoftwareModal/InstallSoftwareModal.tsx

@@ -81,6 +81,7 @@ const InstallSoftwareModal = ({
   const anyPolicyEnabledWithoutSelectedSoftware = formData.some(
     (policy) => policy.installSoftwareEnabled && !policy.swIdToInstall
   );
+
   const {
     data: titlesAFI,
     isLoading: isTitlesAFILoading,
@@ -214,9 +215,10 @@ const InstallSoftwareModal = ({
       return (
         <div className={`${baseClass}__no-software`}>
           <b>No software available for install</b>
-          <span>
-            Go to <b>Software</b> to add software to this team.
-          </span>
+          <div>
+            Go to <a href={`/software/titles?team_id=${teamId}`}>Software</a> to
+            add software to this team.
+          </div>
         </div>
       );
     }
@@ -231,8 +233,10 @@ const InstallSoftwareModal = ({
             )}
           </ul>
           <span className="form-field__help-text">
-            Selected software will be installed when hosts fail the chosen
-            policy.{" "}
+            Selected software will be installed when hosts fail the policy. Host
+            counts will reset when a new software is
+            <br />
+            selected.{" "}
             <CustomLink
               url="https://fleetdm.com/learn-more-about/policy-automation-install-software"
               text="Learn more"

frontend/pages/policies/ManagePoliciesPage/components/InstallSoftwareModal/_styles.scss

@@ -29,9 +29,12 @@
       justify-content: center;
       font-size: $small;
 
-      span {
+      div {
         color: $ui-fleet-black-75;
         font-size: $xx-small;
+        a {
+          font-size: inherit;
+        }
       }
     }
     .data-error {