feat: working

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>

keep-ui/app/mapping/models.tsx

@@ -1,12 +1,16 @@
 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;
   override: boolean;
   condition?: string;
   matchers: string[];
   rows: { [key: string]: any }[];
+  attributes?: string[];
 }

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>
+  );
+}

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>

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();
 

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]

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,20 +16,34 @@
 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)
         .filter(MappingRule.tenant_id == authenticated_entity.tenant_id)
         .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: