feat: Filtering/search workflows (keephq#3740)

Signed-off-by: Ihor Panasiuk <[email protected]>

Author: skynetigor

keep-ui/app/(keep)/workflows/page.tsx

@@ -1,8 +1,27 @@
 import React from "react";
 import WorkflowsPage from "./workflows.client";
+import { FacetDto } from "@/features/filter";
+import { createServerApiClient } from "@/shared/api/server";
+import { getInitialFacets } from "@/features/filter/api";
 
-export default function Page() {
-  return <WorkflowsPage />;
+export default async function Page() {
+  let initialFacets: FacetDto[] | null = null;
+
+  try {
+    const api = await createServerApiClient();
+    initialFacets = await getInitialFacets(api, "workflows");
+  } catch (error) {
+    console.log(error);
+  }
+  return (
+    <WorkflowsPage
+      initialFacetsData={
+        initialFacets
+          ? { facets: initialFacets, facetOptions: null }
+          : undefined
+      }
+    />
+  );
 }
 
 export const metadata = {

keep-ui/app/(keep)/workflows/workflows.client.tsx

@@ -1,12 +1,19 @@
 "use client";
 
-import { ChangeEvent, useRef, useState } from "react";
+import {
+  ChangeEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { Subtitle, Button } from "@tremor/react";
 import {
   ArrowUpOnSquareStackIcon,
   PlusCircleIcon,
 } from "@heroicons/react/24/outline";
-import { KeepLoader, PageTitle } from "@/shared/ui";
+import { EmptyStateCard, KeepLoader, PageTitle } from "@/shared/ui";
 import WorkflowsEmptyState from "./noworkflows";
 import WorkflowTile from "./workflow-tile";
 import { ArrowRightIcon } from "@radix-ui/react-icons";
@@ -16,10 +23,25 @@ import { WorkflowTemplates } from "./mockworkflows";
 import { useApi } from "@/shared/lib/hooks/useApi";
 import { Input, ErrorComponent } from "@/shared/ui";
 import { Textarea } from "@/components/ui";
-import { useWorkflowsV2 } from "utils/hooks/useWorkflowsV2";
+import { useWorkflowsV2, WorkflowsQuery } from "utils/hooks/useWorkflowsV2";
 import { useWorkflowActions } from "@/entities/workflows/model/useWorkflowActions";
 import { PageSubtitle } from "@/shared/ui/PageSubtitle";
 import { PlusIcon } from "@heroicons/react/20/solid";
+import { UserStatefulAvatar } from "@/entities/users/ui";
+import { FacetsConfig } from "@/features/filter/models";
+import {
+  CheckCircleIcon,
+  XCircleIcon,
+  ExclamationCircleIcon,
+  MagnifyingGlassIcon,
+  FunnelIcon,
+  ArrowPathIcon,
+} from "@heroicons/react/24/outline";
+import { useUser } from "@/entities/users/model/useUser";
+import { Pagination, SearchInput } from "@/features/filter";
+import { FacetsPanelServerSide } from "@/features/filter/facet-panel-server-side";
+import { InitialFacetsData } from "@/features/filter/api";
+import { v4 as uuidV4 } from "uuid";
 
 const EXAMPLE_WORKFLOW_DEFINITIONS = {
   slack: `
@@ -62,11 +84,58 @@ const EXAMPLE_WORKFLOW_DEFINITIONS = {
 
 type ExampleWorkflowKey = keyof typeof EXAMPLE_WORKFLOW_DEFINITIONS;
 
-export default function WorkflowsPage() {
+const AssigneeLabel = ({ email }: { email: string }) => {
+  const user = useUser(email);
+  return user ? user.name : email;
+};
+
+export default function WorkflowsPage({
+  initialFacetsData,
+}: {
+  initialFacetsData?: InitialFacetsData;
+}) {
   const router = useRouter();
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const [workflowDefinition, setWorkflowDefinition] = useState("");
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [clearFiltersToken, setClearFiltersToken] = useState<string | null>(
+    null
+  );
+  const [filterCel, setFilterCel] = useState<string | null>(null);
+  const [searchedValue, setSearchedValue] = useState<string | null>(null);
+  const [paginationState, setPaginationState] = useState<{
+    offset: number;
+    limit: number;
+  } | null>(null);
+  const [workflowsQuery, setWorkflowsQuery] = useState<WorkflowsQuery | null>(
+    null
+  );
+
+  const searchCel = useMemo(() => {
+    if (!searchedValue) {
+      return;
+    }
+
+    return `name.contains("${searchedValue}") || description.contains("${searchedValue}")`;
+  }, [searchedValue]);
+
+  useEffect(() => {
+    if (!paginationState) {
+      return;
+    }
+
+    const celList = [searchCel, filterCel].filter((cel) => cel);
+    const cel = celList.join(" && ");
+    const query: WorkflowsQuery = {
+      cel,
+      limit: paginationState?.limit,
+      offset: paginationState?.offset,
+      sortBy: "createdAt",
+      sortDir: "desc",
+    };
+
+    setWorkflowsQuery(query);
+  }, [searchCel, filterCel, paginationState]);
 
   // Only fetch data when the user is authenticated
   /**
@@ -81,15 +150,151 @@ export default function WorkflowsPage() {
           -> last_executions: Used for the workflow execution graph.
           ->last_execution_started: Used for showing the start time of execution in real-time.
   **/
-  const { workflows, error, isLoading } = useWorkflowsV2();
+
+  const {
+    workflows: filteredWorkflows,
+    totalCount: filteredWorkflowsCount,
+    error,
+    isLoading: isFilteredWorkflowsLoading,
+  } = useWorkflowsV2(workflowsQuery, { keepPreviousData: true });
+
+  const isFirstLoading = isFilteredWorkflowsLoading && !filteredWorkflows;
+
   const { uploadWorkflowFiles } = useWorkflowActions();
 
-  if (error) {
-    return <ErrorComponent error={error} reset={() => {}} />;
+  const isTableEmpty = filteredWorkflowsCount === 0;
+  const isEmptyState =
+    !isFilteredWorkflowsLoading && isTableEmpty && !workflowsQuery?.cel;
+
+  const showFilterEmptyState = isTableEmpty && !!filterCel;
+  const showSearchEmptyState =
+    isTableEmpty && !!searchCel && !showFilterEmptyState;
+
+  const setPaginationStateCallback = useCallback(
+    (pageIndex: number, limit: number, offset: number) => {
+      setPaginationState({ limit, offset });
+    },
+    [setPaginationState]
+  );
+
+  const facetsConfig: FacetsConfig = useMemo(() => {
+    return {
+      ["Status"]: {
+        renderOptionIcon: (facetOption) => {
+          switch (facetOption.value) {
+            case "success": {
+              return <CheckCircleIcon className="w-5 h-5 text-green-500" />;
+            }
+            case "failed": {
+              return <XCircleIcon className="w-5 h-5 text-red-500" />;
+            }
+            case "in_progress": {
+              return <ArrowPathIcon className="w-5 h-5 text-orange-500" />;
+            }
+            default: {
+              return (
+                <ExclamationCircleIcon className="w-5 h-5 text-gray-500" />
+              );
+            }
+          }
+        },
+        renderOptionLabel: (facetOption) => {
+          switch (facetOption.value) {
+            case "success": {
+              return "Success";
+            }
+            case "failed": {
+              return "Failed";
+            }
+            case "in_progress": {
+              return "In progress";
+            }
+            default: {
+              return "Not run yet";
+            }
+          }
+        },
+      },
+      ["Created by"]: {
+        renderOptionIcon: (facetOption) => (
+          <UserStatefulAvatar email={facetOption.display_name} size="xs" />
+        ),
+        renderOptionLabel: (facetOption) => {
+          if (facetOption.display_name === "null") {
+            return "Not assigned";
+          }
+          return <AssigneeLabel email={facetOption.display_name} />;
+        },
+      },
+      ["Enabling status"]: {
+        renderOptionLabel: (facetOption) =>
+          facetOption.display_name.toLocaleLowerCase() === "true"
+            ? "Disabled"
+            : "Enabled",
+      },
+    };
+  }, []);
+
+  function renderFilterEmptyState() {
+    return (
+      <>
+        <div className="flex items-center h-full w-full">
+          <div className="flex flex-col justify-center items-center w-full p-4">
+            <EmptyStateCard
+              title="No workflows to display matching your filter"
+              icon={FunnelIcon}
+            >
+              <Button
+                color="orange"
+                variant="secondary"
+                onClick={() => setClearFiltersToken(uuidV4())}
+              >
+                Reset filter
+              </Button>
+            </EmptyStateCard>
+          </div>
+        </div>
+      </>
+    );
+  }
+
+  function renderSearchEmptyState() {
+    return (
+      <>
+        <div className="flex items-center h-full w-full">
+          <div className="flex flex-col justify-center items-center w-full p-4">
+            <EmptyStateCard
+              title="No workflows to display matching your search"
+              icon={MagnifyingGlassIcon}
+            >
+              <Button
+                color="orange"
+                variant="secondary"
+                onClick={() => setSearchedValue(null)}
+              >
+                Clear search
+              </Button>
+            </EmptyStateCard>
+          </div>
+        </div>
+      </>
+    );
   }
 
-  if (isLoading || !workflows) {
-    return <KeepLoader />;
+  function renderData() {
+    return (
+      <>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 w-full gap-4">
+          {filteredWorkflows?.map((workflow) => (
+            <WorkflowTile key={workflow.id} workflow={workflow} />
+          ))}
+        </div>
+      </>
+    );
+  }
+
+  if (error) {
+    return <ErrorComponent error={error} reset={() => {}} />;
   }
 
   const onDrop = async (files: ChangeEvent<HTMLInputElement>) => {
@@ -147,13 +352,19 @@ export default function WorkflowsPage() {
     <>
       <main className="flex flex-col gap-8">
         <div className="flex flex-col gap-6">
-          <div className="flex justify-between items-center">
+          <div className="flex justify-between items-end">
             <div>
-              <PageTitle>Workflows</PageTitle>
+              <PageTitle>My Workflows</PageTitle>
               <PageSubtitle>
                 Automate your alert management with workflows
               </PageSubtitle>
             </div>
+            <SearchInput
+              className="flex-1 mx-4"
+              placeholder="Search workflows"
+              value={searchedValue as string}
+              onValueChange={setSearchedValue}
+            />
             <div className="flex gap-2">
               <Button
                 color="orange"
@@ -178,13 +389,44 @@ export default function WorkflowsPage() {
               </Button>
             </div>
           </div>
-          {workflows.length === 0 ? (
+          {isEmptyState ? (
             <WorkflowsEmptyState />
           ) : (
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 w-full gap-4">
-              {workflows.map((workflow) => (
-                <WorkflowTile key={workflow.id} workflow={workflow} />
-              ))}
+            <div className="flex gap-4">
+              <FacetsPanelServerSide
+                entityName={"workflows"}
+                facetsConfig={facetsConfig}
+                facetOptionsCel={searchCel}
+                usePropertyPathsSuggestions={true}
+                clearFiltersToken={clearFiltersToken}
+                initialFacetsData={initialFacetsData}
+                onCelChange={(cel) => setFilterCel(cel)}
+              />
+
+              <div className="flex flex-col flex-1 relative">
+                {isFirstLoading && (
+                  <div className="flex items-center justify-center h-96 w-full">
+                    <KeepLoader includeMinHeight={false} />
+                  </div>
+                )}
+                {!isFirstLoading && (
+                  <>
+                    {showFilterEmptyState && renderFilterEmptyState()}
+                    {showSearchEmptyState && renderSearchEmptyState()}
+                    {!isTableEmpty && renderData()}
+                  </>
+                )}
+                <div className={`mt-4 ${isFirstLoading ? "hidden" : ""}`}>
+                  <Pagination
+                    totalCount={filteredWorkflowsCount}
+                    isRefreshAllowed={false}
+                    isRefreshing={false}
+                    pageSizeOptions={[12, 24, 48]}
+                    onRefresh={() => {}}
+                    onStateChange={setPaginationStateCallback}
+                  />
+                </div>
+              </div>
             </div>
           )}
         </div>

keep-ui/features/filter/index.ts

@@ -1,8 +1,10 @@
 export { FacetsPanel, type FacetsPanelProps } from "./facets-panel";
+export { Pagination } from "./pagination";
 export {
   useFacetActions,
   useFacets,
   useFacetOptions,
   type UseFacetActionsValue,
 } from "./hooks";
+export { SearchInput } from "./search-input";
 export type { FacetDto, FacetOptionDto, CreateFacetDto } from "./models";