feat: on click playbook, open runs with edit button

Closes #1445 chore: remove run pipeline button chore: don't show empty breadcrumb
flanksource · Oct 23, 2023 · e475233 · e475233
1 parent 984bdfc
commit e475233
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 28 deletions.
diff --git a/src/api/query-hooks/playbooks.tsx b/src/api/query-hooks/playbooks.tsx
@@ -48,15 +48,19 @@ export function useGetPlaybooksToRun(
   );
 }
 
-export function useGetPlaybookSpecsDetails(id: string) {
-  return useQuery<Record<string, any>, Error>(
+export function useGetPlaybookSpecsDetails(
+  id: string,
+  options: UseQueryOptions<PlaybookSpec | undefined, Error> = {}
+) {
+  return useQuery<PlaybookSpec | undefined, Error>(
     ["playbooks", "settings", "specs", id],
     async () => getPlaybookSpec(id),
     {
       enabled: !!id,
       cacheTime: 0,
       staleTime: 0,
-      keepPreviousData: false
+      keepPreviousData: false,
+      ...options
     }
   );
 }

diff --git a/src/api/services/playbooks.ts b/src/api/services/playbooks.ts
@@ -22,10 +22,10 @@ export async function getAllPlaybooksSpecs() {
 }
 
 export async function getPlaybookSpec(id: string) {
-  const res = await IncidentCommander.get<PlaybookSpec | null>(
-    `/playbooks/${id},created_by(${AVATAR_INFO})`
+  const res = await IncidentCommander.get<PlaybookSpec[] | null>(
+    `/playbooks?id=eq.${id}&select=*,created_by(${AVATAR_INFO})`
   );
-  return res.data ?? undefined;
+  return res.data?.[0] ?? undefined;
 }
 
 export async function createPlaybookSpec(spec: NewPlaybookSpec) {
@@ -89,23 +89,30 @@ export async function getPlaybookRuns({
   componentId,
   configId,
   pageIndex,
-  pageSize
+  pageSize,
+  playbookId
 }: {
   componentId?: string;
   configId?: string;
   pageIndex: number;
   pageSize: number;
+  playbookId?: string;
 }) {
   const componentParamString = componentId
     ? `&component_id=eq.${componentId}`
     : "";
+
   const configParamString = configId ? `&config_id=eq.${configId}` : "";
 
   const pagingParams = `&limit=${pageSize}&offset=${pageIndex * pageSize}`;
 
+  const playbookParamsString = playbookId
+    ? `&playbook_id=eq.${playbookId}`
+    : "";
+
   const res = await resolve(
     ConfigDB.get<PlaybookRun[] | null>(
-      `/playbook_runs?select=*,playbooks(id,name),component:components(id,name,icon),check:checks(id,name,icon),config:config_items(id,name,type,config_class)&order=created_at.desc${componentParamString}&${configParamString}${pagingParams}}`,
+      `/playbook_runs?select=*,playbooks(id,name),component:components(id,name,icon),check:checks(id,name,icon),config:config_items(id,name,type,config_class)&&order=created_at.desc${playbookParamsString}${componentParamString}&${configParamString}${pagingParams}}`,
       {
         headers: {
           Prefer: "count=exact"

diff --git a/src/pages/playbooks/PlaybookRuns.tsx b/src/pages/playbooks/PlaybookRuns.tsx
@@ -11,22 +11,44 @@ import { SearchLayout } from "../../components/Layout";
 import PlaybookRunsTable from "../../components/Playbooks/Runs/PlaybookRunsList";
 import { playbookRunsPageTabs } from "../../components/Playbooks/Runs/PlaybookRunsPageTabs";
 import TabbedLinks from "../../components/Tabs/TabbedLinks";
+import { useSearchParams } from "react-router-dom";
+import { Button } from "../../components";
+import { FaEdit } from "react-icons/fa";
+import { useGetPlaybookSpecsDetails } from "../../api/query-hooks/playbooks";
+import PlaybookSpecsForm from "../../components/Playbooks/Settings/PlaybookSpecsForm";
 
 export default function PlaybookRunsPage() {
+  const [isEditPlaybookFormOpen, setIsEditPlaybookFormOpen] = useState(false);
+  const [searchParams] = useSearchParams();
+
+  const playbookId = searchParams.get("playbook") ?? undefined;
+
   const [{ pageIndex, pageSize }, setPageState] = useState({
     pageIndex: 0,
     pageSize: 150
   });
 
-  const { data, isLoading, refetch } = useQuery({
-    queryKey: ["playbookRuns"],
+  const {
+    data,
+    isLoading: isLoadingPlaybookRuns,
+    refetch
+  } = useQuery({
+    queryKey: ["playbookRuns", { pageIndex, pageSize, playbookId }],
     queryFn: () =>
       getPlaybookRuns({
         pageIndex,
-        pageSize
+        pageSize,
+        playbookId
       })
   });
 
+  const { data: playbook, isLoading: isLoadingPlaybook } =
+    useGetPlaybookSpecsDetails(playbookId!, {
+      enabled: !!playbookId
+    });
+
+  const isLoading = isLoadingPlaybookRuns || isLoadingPlaybook;
+
   const playbookRuns = data?.data;
   const totalEntries = data?.totalEntries;
   const pageCount = totalEntries ? Math.ceil(totalEntries / pageSize) : -1;
@@ -45,12 +67,23 @@ export default function PlaybookRunsPage() {
 
   return (
     <>
-      <Head prefix={"Playbook Runs"} />
+      <Head
+        prefix={
+          playbookId ? `${playbook?.name} Playbook Runs` : "Playbook Runs"
+        }
+      />
       <SearchLayout
         title={
           <BreadcrumbNav
             list={[
               <BreadcrumbRoot link="/playbooks">Playbooks</BreadcrumbRoot>,
+              ...(playbook
+                ? [
+                    <BreadcrumbChild link={`/playbooks}`}>
+                      {playbook?.name}
+                    </BreadcrumbChild>
+                  ]
+                : []),
               <BreadcrumbChild link="/playbooks/runs">Runs</BreadcrumbChild>
             ]}
           />
@@ -61,13 +94,36 @@ export default function PlaybookRunsPage() {
       >
         <TabbedLinks tabLinks={playbookRunsPageTabs}>
           <div className={`flex flex-col max-w-screen-xl mx-auto h-full py-4`}>
-            <PlaybookRunsTable
-              data={playbookRuns ?? []}
-              isLoading={isLoading}
-              pagination={pagination}
-            />
+            {playbookId && (
+              <div className="flex flex-row justify-end w-full py-2 gap-2">
+                <Button
+                  text="Edit Playbook"
+                  className="btn-white"
+                  icon={<FaEdit />}
+                  disabled={isLoading}
+                  onClick={() => setIsEditPlaybookFormOpen(true)}
+                />
+              </div>
+            )}
+            <div className="flex flex-col flex-1">
+              <PlaybookRunsTable
+                data={playbookRuns ?? []}
+                isLoading={isLoading}
+                pagination={pagination}
+              />
+            </div>
           </div>
         </TabbedLinks>
+        {playbookId && (
+          <PlaybookSpecsForm
+            isOpen={isEditPlaybookFormOpen}
+            onClose={() => {
+              setIsEditPlaybookFormOpen(false);
+            }}
+            refresh={refetch}
+            playbook={playbook}
+          />
+        )}
       </SearchLayout>
     </>
   );

diff --git a/src/pages/playbooks/PlaybooksList.tsx b/src/pages/playbooks/PlaybooksList.tsx
@@ -1,20 +1,19 @@
 import { useState } from "react";
 import { AiFillPlusCircle } from "react-icons/ai";
+import { useNavigate } from "react-router-dom";
 import { useGetAllPlaybookSpecs } from "../../api/query-hooks/playbooks";
 import { BreadcrumbNav, BreadcrumbRoot } from "../../components/BreadcrumbNav";
 import ErrorPage from "../../components/Errors/ErrorPage";
 import { Head } from "../../components/Head/Head";
 import { SearchLayout } from "../../components/Layout";
-import PlaybookSpecsForm from "../../components/Playbooks/Settings/PlaybookSpecsForm";
-import PlaybookSpecsTable, {
-  PlaybookSpec
-} from "../../components/Playbooks/Settings/PlaybookSpecsTable";
 import { playbookRunsPageTabs } from "../../components/Playbooks/Runs/PlaybookRunsPageTabs";
+import PlaybookSpecsForm from "../../components/Playbooks/Settings/PlaybookSpecsForm";
+import PlaybookSpecsTable from "../../components/Playbooks/Settings/PlaybookSpecsTable";
 import TabbedLinks from "../../components/Tabs/TabbedLinks";
 
 export function PlaybooksListPage() {
   const [isOpen, setIsOpen] = useState(false);
-  const [editedRow, setEditedRow] = useState<PlaybookSpec>();
+  const navigate = useNavigate();
 
   const {
     isLoading,
@@ -38,7 +37,6 @@ export function PlaybooksListPage() {
                 className=""
                 onClick={() => {
                   setIsOpen(true);
-                  setEditedRow(undefined);
                 }}
               >
                 <AiFillPlusCircle size={32} className="text-blue-600" />
@@ -58,9 +56,8 @@ export function PlaybooksListPage() {
               <PlaybookSpecsTable
                 data={playbooks ?? []}
                 isLoading={isLoading}
-                onRowClick={(val) => {
-                  setIsOpen(true);
-                  setEditedRow(val);
+                onRowClick={(playbook) => {
+                  navigate(`/playbooks/runs?playbook=${playbook.id}`);
                 }}
               />
             )}
@@ -70,9 +67,7 @@ export function PlaybooksListPage() {
           isOpen={isOpen}
           onClose={() => {
             setIsOpen(false);
-            setEditedRow(undefined);
           }}
-          playbook={editedRow}
           refresh={refetch}
         />
       </SearchLayout>