feat: playbook run modal - populate parameters & resource from the URL

[skip ci]
flanksource · Jan 7, 2025 · f726af2 · f726af2
1 parent ea90fef
commit f726af2
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 14 deletions.
diff --git a/src/api/types/playbooks.ts b/src/api/types/playbooks.ts
@@ -35,6 +35,7 @@ export type PlaybookRunAction = {
     stdout?: string;
     logs?: string;
     markdown?: string;
+    recommendedPlaybooks: string;
     slack?: string;
     stderr?: string;
     [key: string]: unknown;

diff --git a/src/components/Playbooks/Runs/Actions/PlaybooksActionsResults.tsx b/src/components/Playbooks/Runs/Actions/PlaybooksActionsResults.tsx
@@ -160,12 +160,22 @@ export default function PlaybooksRunActionsResults({
   return (
     <div className="relative flex h-full w-full flex-col">
       {action.error && <pre className={className}>{action.error}</pre>}
-      {result?.stderr || result?.stdout || result?.logs || result?.markdown ? (
+      {result?.stderr ||
+      result?.stdout ||
+      result?.logs ||
+      result?.slack ||
+      result?.recommendedPlaybooks ||
+      result?.markdown ? (
         <div className={`flex flex-col gap-2 ${className}`}>
           <DisplayStdout className={className} stdout={result?.stdout} />
           <DisplayStderr className={className} stderr={result?.stderr} />
           <DisplayLogs className={className} logs={result?.logs} />
           <DisplayMarkdown className={className} md={result?.markdown} />
+          <DisplayLogs
+            className={className}
+            logs={result?.recommendedPlaybooks}
+          />
+          <DisplayLogs className={className} logs={result?.slack} />
         </div>
       ) : (
         <pre className={className}>

diff --git a/src/components/Playbooks/Runs/Filter/PlaybookRunsFilterBar.tsx b/src/components/Playbooks/Runs/Filter/PlaybookRunsFilterBar.tsx
@@ -5,8 +5,8 @@ import { tables } from "@flanksource-ui/context/UserAccessContext/permissions";
 import { Button } from "@flanksource-ui/ui/Buttons/Button";
 import { TimeRangePicker } from "@flanksource-ui/ui/Dates/TimeRangePicker";
 import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
-import { useState } from "react";
-import { URLSearchParamsInit } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { URLSearchParamsInit, useSearchParams } from "react-router-dom";
 import SubmitPlaybookRunForm from "../Submit/SubmitPlaybookRunForm";
 import PlaybookSpecsDropdown from "./PlaybookSpecsDropdown";
 import PlaybookStatusDropdown from "./PlaybookStatusDropdown";
@@ -36,9 +36,36 @@ export default function PlaybookRunsFilterBar({
   );
   const [isSubmitPlaybookRunFormOpen, setIsSubmitPlaybookRunFormOpen] =
     useState(false);
-
+  const [searchParams, setSearchParams] = useSearchParams();
   const range = getTimeRangeFromUrl();
 
+  const configID = searchParams.get("config_id") ?? undefined;
+  let playbookParameters: Record<string, string> = {};
+  searchParams.forEach((val, key) => {
+    if (key.startsWith("params.")) {
+      const k = key.replace("params.", "");
+      playbookParameters[k] = val;
+    }
+  });
+
+  useEffect(() => {
+    const shouldOpenRunForm = searchParams.get("run") === "true";
+    if (shouldOpenRunForm) {
+      setIsSubmitPlaybookRunFormOpen(true);
+    }
+  }, [searchParams]);
+
+  const handleCloseRunForm = () => {
+    setIsSubmitPlaybookRunFormOpen(false);
+    searchParams.delete("run");
+    setSearchParams(searchParams);
+  };
+
+  const handleOpenRunForm = () => {
+    searchParams.set("run", "true");
+    setSearchParams(searchParams);
+  };
+
   return (
     <div className="flex w-full flex-row gap-2">
       <FormikFilterForm
@@ -77,7 +104,7 @@ export default function PlaybookRunsFilterBar({
             <>
               <Button
                 disabled={isLoading}
-                onClick={() => setIsSubmitPlaybookRunFormOpen(true)}
+                onClick={handleOpenRunForm}
                 className="btn-primary min-w-max"
               >
                 <VscPlay />
@@ -89,7 +116,10 @@ export default function PlaybookRunsFilterBar({
               >
                 <SubmitPlaybookRunForm
                   isOpen={isSubmitPlaybookRunFormOpen}
-                  onClose={() => setIsSubmitPlaybookRunFormOpen(false)}
+                  configId={configID}
+                  overrideParams={configID !== ""}
+                  params={playbookParameters}
+                  onClose={handleCloseRunForm}
                   playbook={playbookSpec}
                 />
               </AuthorizationAccessCheck>

diff --git a/src/components/Playbooks/Runs/Submit/PlaybookRunParams.tsx b/src/components/Playbooks/Runs/Submit/PlaybookRunParams.tsx
@@ -35,13 +35,13 @@ function parseCodeDefaultValue(parameter: PlaybookParam) {
 type PlaybookRunParamsProps = {
   isResourceRequired: boolean;
   playbook: Pick<PlaybookSpec, "spec">;
-  isReRun: boolean;
+  overrideParams: boolean;
 };
 
 export default function PlaybookRunParams({
   isResourceRequired = false,
   playbook,
-  isReRun = false
+  overrideParams = false
 }: PlaybookRunParamsProps) {
   const [, setModalSize] = useAtom(submitPlaybookRunFormModalSizesAtom);
 
@@ -95,13 +95,13 @@ export default function PlaybookRunParams({
         // We don't want to override form values if they are already set by user
         // action, like for instance when re-running a playbook with the same
         // parameters, we don't want to set the default values again
-        if (param.default !== undefined && !isReRun) {
+        if (param.default !== undefined && !overrideParams) {
           const defaultValue = parseCodeDefaultValue(param);
           setFieldValue(`params.${param.name}`, defaultValue);
         }
       });
     }
-  }, [data, isReRun, setFieldValue]);
+  }, [data, overrideParams, setFieldValue]);
 
   // if no resource is selected, show a message and hide the parameters
   if (!componentId && !configId && !checkId && isResourceRequired) {

diff --git a/src/components/Playbooks/Runs/Submit/ReRunPlaybookWithParamsButton.tsx b/src/components/Playbooks/Runs/Submit/ReRunPlaybookWithParamsButton.tsx
@@ -41,7 +41,7 @@ export default function ReRunPlaybookWithParamsButton({
         checkId={checkId}
         configId={configId}
         params={params}
-        isReRun
+        overrideParams
       />
     </>
   );

diff --git a/src/components/Playbooks/Runs/Submit/SubmitPlaybookRunForm.tsx b/src/components/Playbooks/Runs/Submit/SubmitPlaybookRunForm.tsx
@@ -39,7 +39,7 @@ type Props = {
   componentId?: string;
   configId?: string;
   params?: Record<string, any>;
-  isReRun?: boolean;
+  overrideParams?: boolean;
 };
 
 export default function SubmitPlaybookRunForm({
@@ -49,7 +49,7 @@ export default function SubmitPlaybookRunForm({
   checkId,
   componentId,
   configId,
-  isReRun = false,
+  overrideParams = false,
   params = {}
 }: Props) {
   const [modalSize, setModalSize] = useAtom(
@@ -139,7 +139,7 @@ export default function SubmitPlaybookRunForm({
                 <PlaybookRunParams
                   isResourceRequired={isResourceRequired}
                   playbook={playbook}
-                  isReRun={isReRun}
+                  overrideParams={overrideParams}
                 />
               </div>