From c354646c822c3b57a151d58907a50a51e40ae96e Mon Sep 17 00:00:00 2001
From: Tal Borenstein <tal@keephq.dev>
Date: Mon, 19 Feb 2024 15:50:13 +0200
Subject: [PATCH] feat: working

---
 keep-ui/app/mapping/mapping.tsx              |  34 ++++-
 keep-ui/app/mapping/models.tsx               |   6 +-
 keep-ui/app/mapping/rules-table.tsx          | 150 +++++++++++++++++++
 keep-ui/components/navbar/ConfigureLinks.tsx |   7 +-
 keep-ui/utils/hooks/useMappingRules.ts       |   6 +-
 keep/api/models/db/mapping.py                |  12 +-
 keep/api/routes/mapping.py                   |  24 ++-
 7 files changed, 224 insertions(+), 15 deletions(-)
 create mode 100644 keep-ui/app/mapping/rules-table.tsx

diff --git a/keep-ui/app/mapping/mapping.tsx b/keep-ui/app/mapping/mapping.tsx
index 1b9cba743..296883e9d 100644
--- a/keep-ui/app/mapping/mapping.tsx
+++ b/keep-ui/app/mapping/mapping.tsx
@@ -1,13 +1,23 @@
 "use client";
-import { Badge, Card } from "@tremor/react";
+import { Badge, Callout, Card } from "@tremor/react";
 import CreateNewMapping from "./create-new-mapping";
 import { useMappings } from "utils/hooks/useMappingRules";
+import RulesTable from "./rules-table";
+import { MdWarning } from "react-icons/md";
+import Loading from "app/loading";
 export default function Mapping() {
-  const { data: mappings, mutate } = useMappings();
+  const { data: mappings, isLoading } = useMappings();
 
   return (
     <Card className="p-4 md:p-10 mx-auto">
-      <Badge color="orange" size="xs" tooltip="Slack us if something isn't working properly :)" className="absolute top-[-10px] left-[-10px]">Beta</Badge>
+      <Badge
+        color="orange"
+        size="xs"
+        tooltip="Slack us if something isn't working properly :)"
+        className="absolute top-[-10px] left-[-10px]"
+      >
+        Beta
+      </Badge>
       <div className="flex divide-x p-2">
         <div className="w-1/3 pr-2.5">
           <h2 className="text-lg">Configure</h2>
@@ -18,8 +28,22 @@ export default function Mapping() {
         </div>
 
         <div className="w-2/3 pl-2.5">
-          <h2 className="text-lg">Rules</h2>
-          {mappings && mappings.length > 0 ? <>Rules!</> : <>No Rules!</>}
+          {isLoading ? (
+            <Loading />
+          ) : mappings && mappings.length > 0 ? (
+            <RulesTable mappings={mappings} />
+          ) : (
+            <Callout
+              color="orange"
+              title="Mapping rules does not exist"
+              icon={MdWarning}
+            >
+              <p className="text-slate-400">No mapping rules found</p>
+              <p className="text-slate-400">
+                Configure new mapping rule using the mapping rules wizard.
+              </p>
+            </Callout>
+          )}
         </div>
       </div>
     </Card>
diff --git a/keep-ui/app/mapping/models.tsx b/keep-ui/app/mapping/models.tsx
index e0e2bbebb..7eb3a1c2e 100644
--- a/keep-ui/app/mapping/models.tsx
+++ b/keep-ui/app/mapping/models.tsx
@@ -1,7 +1,10 @@
 export interface MappingRule {
-  id?: number;
+  id: number;
   tenant_id: string;
   priority: number;
+  name: string;
+  description?: string;
+  file_name?: string;
   created_by?: string;
   created_at: Date;
   disabled: boolean;
@@ -9,4 +12,5 @@ export interface MappingRule {
   condition?: string;
   matchers: string[];
   rows: { [key: string]: any }[];
+  attributes?: string[];
 }
diff --git a/keep-ui/app/mapping/rules-table.tsx b/keep-ui/app/mapping/rules-table.tsx
new file mode 100644
index 000000000..c0a2ea1d8
--- /dev/null
+++ b/keep-ui/app/mapping/rules-table.tsx
@@ -0,0 +1,150 @@
+import {
+  Badge,
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+} from "@tremor/react";
+import { MappingRule } from "./models";
+import {
+  DisplayColumnDef,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { MdRemoveCircle } from "react-icons/md";
+import { useSession } from "next-auth/react";
+import { getApiURL } from "utils/apiUrl";
+import { useMappings } from "utils/hooks/useMappingRules";
+import { toast } from "react-toastify";
+
+const columnHelper = createColumnHelper<MappingRule>();
+
+export default function RulesTable({ mappings }: { mappings: MappingRule[] }) {
+  const { data: session } = useSession();
+  const { mutate } = useMappings();
+
+  const columns = [
+    columnHelper.display({
+      id: "id",
+      header: "#",
+      cell: (context) => context.row.original.id,
+    }),
+    columnHelper.display({
+      id: "name",
+      header: "Name",
+      cell: (context) => context.row.original.name,
+    }),
+    columnHelper.display({
+      id: "description",
+      header: "Description",
+      cell: (context) => context.row.original.description,
+    }),
+    columnHelper.display({
+      id: "fileName",
+      header: "Original File Name",
+      cell: (context) => context.row.original.file_name,
+    }),
+    columnHelper.display({
+      id: "matchers",
+      header: "Matchers",
+      cell: (context) => context.row.original.matchers.join(","),
+    }),
+    columnHelper.display({
+      id: "attributes",
+      header: "Attributes",
+      cell: (context) => (
+        <div className="flex flex-wrap">
+          {context.row.original.attributes?.map((attr) => (
+            <Badge key={attr} color="orange" size="xs">
+              {attr}
+            </Badge>
+          ))}
+        </div>
+      ),
+    }),
+    columnHelper.display({
+      id: "delete",
+      header: "",
+      cell: (context) => (
+        <Button
+          color="red"
+          size="xs"
+          variant="secondary"
+          icon={MdRemoveCircle}
+          onClick={() => deleteRule(context.row.original.id!)}
+        />
+      ),
+    }),
+  ] as DisplayColumnDef<MappingRule>[];
+
+  const table = useReactTable({
+    columns,
+    data: mappings,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  const deleteRule = (ruleId: number) => {
+    const apiUrl = getApiURL();
+    if (confirm("Are you sure you want to delete this rule?")) {
+      fetch(`${apiUrl}/mapping/${ruleId}`, {
+        method: "DELETE",
+        headers: {
+          Authorization: `Bearer ${session?.accessToken}`,
+        },
+      }).then((response) => {
+        if (response.ok) {
+          mutate();
+          toast.success("Rule deleted successfully");
+        } else {
+          toast.error("Failed to delete rule, contact us if this persists");
+        }
+      });
+    }
+  };
+
+  return (
+    <Table>
+      <TableHead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <TableRow
+            className="border-b border-tremor-border dark:border-dark-tremor-border"
+            key={headerGroup.id}
+          >
+            {headerGroup.headers.map((header) => {
+              return (
+                <TableHeaderCell
+                  className="text-tremor-content-strong dark:text-dark-tremor-content-strong"
+                  key={header.id}
+                >
+                  {flexRender(
+                    header.column.columnDef.header,
+                    header.getContext()
+                  )}
+                </TableHeaderCell>
+              );
+            })}
+          </TableRow>
+        ))}
+      </TableHead>
+      <TableBody>
+        {table.getRowModel().rows.map((row) => (
+          <TableRow
+            className="even:bg-tremor-background-muted even:dark:bg-dark-tremor-background-muted hover:bg-slate-100"
+            key={row.id}
+          >
+            {row.getVisibleCells().map((cell) => (
+              <TableCell key={cell.id}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/keep-ui/components/navbar/ConfigureLinks.tsx b/keep-ui/components/navbar/ConfigureLinks.tsx
index c754bb915..2e6e0a452 100644
--- a/keep-ui/components/navbar/ConfigureLinks.tsx
+++ b/keep-ui/components/navbar/ConfigureLinks.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Subtitle } from "@tremor/react";
+import { Badge, Subtitle } from "@tremor/react";
 import { LinkWithIcon } from "components/LinkWithIcon";
 import { VscDebugDisconnect } from "react-icons/vsc";
 import { MdOutlineEngineering } from "react-icons/md";
@@ -33,7 +33,10 @@ export const ConfigureLinks = ({ session }: ConfigureLinksProps) => {
         </li>
         <li>
           <LinkWithIcon href="/mapping" icon={RiMindMap}>
-            Mapping
+            Mapping{" "}
+            <Badge color="orange" size="xs">
+              Beta
+            </Badge>
           </LinkWithIcon>
         </li>
         <li>
diff --git a/keep-ui/utils/hooks/useMappingRules.ts b/keep-ui/utils/hooks/useMappingRules.ts
index 77592dded..87db305a1 100644
--- a/keep-ui/utils/hooks/useMappingRules.ts
+++ b/keep-ui/utils/hooks/useMappingRules.ts
@@ -4,7 +4,11 @@ import useSWR, { SWRConfiguration } from "swr";
 import { getApiURL } from "utils/apiUrl";
 import { fetcher } from "utils/fetcher";
 
-export const useMappings = (options: SWRConfiguration = {}) => {
+export const useMappings = (
+  options: SWRConfiguration = {
+    revalidateOnFocus: false,
+  }
+) => {
   const apiUrl = getApiURL();
   const { data: session } = useSession();
 
diff --git a/keep/api/models/db/mapping.py b/keep/api/models/db/mapping.py
index 880ad2f9c..3adc845cd 100644
--- a/keep/api/models/db/mapping.py
+++ b/keep/api/models/db/mapping.py
@@ -27,10 +27,20 @@ class MappingRule(SQLModel, table=True):
     )  # max_length=204800)
 
 
-class MappingRuleDto(BaseModel):
+class MappRuleDtoBase(BaseModel):
     name: str
     description: Optional[str] = None
     file_name: Optional[str] = None
     priority: int = 0
     matchers: list[str]
+
+
+class MappingRuleDtoOut(MappRuleDtoBase, extra="ignore"):
+    id: int
+    created_by: Optional[str]
+    created_at: datetime
+    attributes: list[str] = []
+
+
+class MappingRuleDtoIn(MappRuleDtoBase):
     rows: list[dict]
diff --git a/keep/api/routes/mapping.py b/keep/api/routes/mapping.py
index b4414cc94..2d83b616f 100644
--- a/keep/api/routes/mapping.py
+++ b/keep/api/routes/mapping.py
@@ -5,7 +5,7 @@
 
 from keep.api.core.db import get_session
 from keep.api.core.dependencies import AuthenticatedEntity, AuthVerifier
-from keep.api.models.db.mapping import MappingRule, MappingRuleDto
+from keep.api.models.db.mapping import MappingRule, MappingRuleDtoIn, MappingRuleDtoOut
 
 router = APIRouter()
 
@@ -16,7 +16,7 @@
 def get_rules(
     authenticated_entity: AuthenticatedEntity = Depends(AuthVerifier(["read:rules"])),
     session: Session = Depends(get_session),
-) -> list[MappingRule]:
+) -> list[MappingRuleDtoOut]:
     logger.info("Getting mapping rules")
     rules: list[MappingRule] = (
         session.query(MappingRule)
@@ -24,12 +24,26 @@ def get_rules(
         .all()
     )
     logger.info("Got mapping rules", extra={"rules_count": len(rules) if rules else 0})
-    return rules
 
+    rules_dtos = []
+    if rules:
+        for rule in rules:
+            rule_dto = MappingRuleDtoOut(**rule.dict())
+            rule_dto.attributes = [
+                key for key in rule.rows[0].keys() if key not in rule.matchers
+            ]
+            rules_dtos.append(rule_dto)
 
-@router.post("", description="Create a new mapping rule")
+    return rules_dtos
+
+
+@router.post(
+    "",
+    description="Create a new mapping rule",
+    response_model_exclude={"rows", "tenant_id"},
+)
 def create_rule(
-    rule: MappingRuleDto,
+    rule: MappingRuleDtoIn,
     authenticated_entity: AuthenticatedEntity = Depends(AuthVerifier(["write:rules"])),
     session: Session = Depends(get_session),
 ) -> MappingRule: