Merge pull request #152 from yohamta/feat/tag-filter

feat: Tag filter
dagu-org · Jun 2, 2022 · 48b8da8 · 48b8da8
2 parents de55000 + 9534a77
commit 48b8da8
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 32 deletions.
diff --git a/admin/src/components/NodeStatusTableRow.tsx b/admin/src/components/NodeStatusTableRow.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Node } from "../models/Node";
 import { Step } from "../models/Step";
-import { WorkflowTabType } from "../models/WorkflowTab";
+import { WorkflowTabType } from "../models/Workflow";
 import MultilineText from "./MultilineText";
 import NodeStatusChip from "./NodeStatusChip";
 import { TableCell } from "@mui/material";

diff --git a/admin/src/components/StatusInfoTable.tsx b/admin/src/components/StatusInfoTable.tsx
@@ -1,6 +1,6 @@
 import React, { CSSProperties } from "react";
 import { Status } from "../models/Status";
-import { WorkflowTabType } from "../models/WorkflowTab";
+import { WorkflowTabType } from "../models/Workflow";
 import StatusChip from "./StatusChip";
 import {
   Paper,

diff --git a/admin/src/components/WorkflowButtons.tsx → admin/src/components/WorkflowActions.tsx b/admin/src/components/WorkflowButtons.tsx → admin/src/components/WorkflowActions.tsx
@@ -10,7 +10,7 @@ type Props = {
   refresh?: () => any;
 };
 
-function WorkflowButtons({
+function WorkflowActions({
   status,
   group,
   name,
@@ -123,7 +123,7 @@ function WorkflowButtons({
     </Stack>
   );
 }
-export default WorkflowButtons;
+export default WorkflowActions;
 
 interface ActionButtonProps {
   children: string;

diff --git a/admin/src/components/WorkflowTable.tsx b/admin/src/components/WorkflowTable.tsx
@@ -6,10 +6,12 @@ import {
   getSortedRowModel,
   SortingState,
   getFilteredRowModel,
+  ColumnFiltersState,
 } from "@tanstack/react-table";
-import WorkflowButtons from "../components/WorkflowButtons";
+import WorkflowActions from "./WorkflowActions";
 import StatusChip from "./StatusChip";
 import {
+  Autocomplete,
   Box,
   Chip,
   Stack,
@@ -90,13 +92,27 @@ const defaultColumns = [
         return (
           <Stack direction="row" spacing={1}>
             {tags?.map((tag) => (
-              <Chip key={tag} size="small" label={tag} />
+              <Chip
+                key={tag}
+                size="small"
+                label={tag}
+                onClick={() => props.column.setFilterValue(tag)}
+              />
             ))}
           </Stack>
         );
       }
       return null;
     },
+    filterFn: (props, _, filter) => {
+      const data = props.original!;
+      if (data.Type != WorkflowDataType.Workflow) {
+        return false;
+      }
+      const tags = data.DAG.Config.Tags;
+      const ret = tags?.some((tag) => tag == filter) || false;
+      return ret;
+    },
     sortingFn: (a, b) => {
       let valA = getFirstTag(a.original);
       let valB = getFirstTag(b.original);
@@ -180,7 +196,7 @@ const defaultColumns = [
         return null;
       }
       return (
-        <WorkflowButtons
+        <WorkflowActions
           status={data.DAG.Status}
           group={props.instance.options.meta?.group || ""}
           name={data.DAG.Config.Name}
@@ -197,16 +213,40 @@ function WorkflowTable({ workflows = [], group = "", refreshFn }: Props) {
     ...defaultColumns,
   ]);
 
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [globalFilter, setGlobalFilter] = React.useState("");
 
+  const selectedTag = React.useMemo(() => {
+    return (
+      (columnFilters.find((filter) => filter.id == "Tags")?.value as string) ||
+      ""
+    );
+  }, [columnFilters]);
+
+  const tagOptions = React.useMemo(() => {
+    const map: { [key: string]: boolean } = {};
+    workflows.forEach((data) => {
+      if (data.Type == WorkflowDataType.Workflow) {
+        data.DAG.Config.Tags?.forEach((tag) => {
+          map[tag] = true;
+        });
+      }
+    });
+    const ret = Object.keys(map).sort();
+    return ret;
+  }, []);
+
   const instance = useTableInstance(table, {
     data: workflows,
     columns,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     onGlobalFilterChange: setGlobalFilter,
+    onColumnFiltersChange: setColumnFilters,
     globalFilterFn: (row, _, globalFilter) => {
       const data = row.original;
       if (!data) {
@@ -234,6 +274,7 @@ function WorkflowTable({ workflows = [], group = "", refreshFn }: Props) {
     state: {
       sorting,
       globalFilter,
+      columnFilters,
     },
     onSortingChange: setSorting,
     meta: {
@@ -242,20 +283,44 @@ function WorkflowTable({ workflows = [], group = "", refreshFn }: Props) {
     },
   });
 
+  console.log({
+    columns,
+  });
+
   return (
     <Box>
-      <TextField
-        label="Filter"
-        size="small"
-        InputProps={{
-          value: globalFilter || "",
-          onChange: (value) => {
-            const data = value.target.value;
-            setGlobalFilter(data);
-          },
-          type: "search",
+      <Stack
+        sx={{
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "start",
+          alignContent: "flex-center",
         }}
-      />
+      >
+        <TextField
+          label="Search Text"
+          size="small"
+          InputProps={{
+            value: globalFilter || "",
+            onChange: (value) => {
+              const data = value.target.value;
+              setGlobalFilter(data);
+            },
+            type: "search",
+          }}
+        />
+        <Autocomplete<string>
+          size="small"
+          limitTags={1}
+          value={selectedTag}
+          options={tagOptions}
+          onChange={(_, value) => {
+            instance.getColumn("Tags").setFilterValue(value || "");
+          }}
+          renderInput={(params) => <TextField {...params} label="Filter Tag" />}
+          sx={{ width: "300px", ml: 1 }}
+        />
+      </Stack>
       <Table size="small">
         <TableHead>
           {instance.getHeaderGroups().map((headerGroup) => (

diff --git a/admin/src/contexts/WorkflowContext.ts b/admin/src/contexts/WorkflowContext.ts
@@ -1,6 +1,6 @@
 import React from "react";
 import { GetWorkflowResponse } from "../api/Workflow";
-import { WorkflowTabType } from "../models/WorkflowTab";
+import { WorkflowTabType } from "../models/Workflow";
 
 export const WorkflowContext = React.createContext({
   refresh: () => {},

diff --git a/admin/src/models/Workflow.tsx b/admin/src/models/Workflow.tsx
@@ -43,12 +43,12 @@ export function getStatus(data?: WorkflowData): SchedulerStatus {
 }
 
 type KeysMatching<T extends object, V> = {
-  [K in keyof T]-?: T[K] extends V ? K : never
+  [K in keyof T]-?: T[K] extends V ? K : never;
 }[keyof T];
 
 export function getStatusField(
   field: KeysMatching<Status, string>,
-  data?: WorkflowData,
+  data?: WorkflowData
 ): string {
   if (!data) {
     return "";
@@ -58,3 +58,12 @@ export function getStatusField(
   }
   return "";
 }
+
+export enum WorkflowTabType {
+  Status = "0",
+  Config = "1",
+  History = "2",
+  StepLog = "3",
+  ScLog = "4",
+  None = "5",
+}
diff --git a/admin/src/models/WorkflowTab.tsx b/admin/src/models/WorkflowTab.tsx
diff --git a/admin/src/pages/WorkflowDetails.tsx b/admin/src/pages/WorkflowDetails.tsx
@@ -4,13 +4,13 @@ import { GetWorkflowResponse } from "../api/Workflow";
 import ConfigErrors from "../components/ConfigErrors";
 import WorkflowStatus from "../components/WorkflowStatus";
 import { WorkflowContext } from "../contexts/WorkflowContext";
-import { WorkflowTabType } from "../models/WorkflowTab";
+import { WorkflowTabType } from "../models/Workflow";
 import WorkflowConfig from "../components/WorkflowConfig";
 import WorkflowHistory from "../components/WorkflowHistory";
 import WorkflowLog from "../components/WorkflowLog";
 import { Box, Paper, Stack, Tab, Tabs } from "@mui/material";
 import Title from "../components/Title";
-import WorkflowButtons from "../components/WorkflowButtons";
+import WorkflowActions from "../components/WorkflowActions";
 import ConfigEditButtons from "../components/ConfigEditButtons";
 import Loading from "../components/Loading";
 
@@ -119,7 +119,7 @@ function WorkflowDetail() {
             }}
           >
             <Title>{data.Title}</Title>
-            <WorkflowButtons
+            <WorkflowActions
               status={data.DAG.Status}
               group={group}
               name={params.name!}