integrate BE

Author: peppescg

.env

@@ -1 +1 @@
-VITE_BASE_API_URL=https://localhost:5001/api
+VITE_BASE_API_URL=http://localhost:8989

package.json

@@ -36,7 +36,6 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",
-    "@faker-js/faker": "^9.2.0",
     "@types/node": "^22.10.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
@@ -52,4 +51,4 @@
     "typescript-eslint": "^8.15.0",
     "vite": "^6.0.1"
   }
-}
+}

src/components/Dashboard.tsx

@@ -15,6 +15,20 @@ import { useEffect, useState } from "react";
 import { BarChart } from "@/viz/BarChart";
 import { LineChart } from "@/viz/LineChart";
 import { useAlertsStore } from "@/hooks/useAlertsStore";
+import { Markdown } from "./Markdown";
+
+const wrapObjectOutput = (input: string) => {
+  const isObject = /\{"/.test(input);
+
+  if (isObject) {
+    return (
+      <pre className="w-full h-40 overflow-auto whitespace-pre-wrap bg-gray-100 p-2">
+        <code>{input}</code>
+      </pre>
+    );
+  }
+  return <Markdown className="overflow-x-hidden">{input || "N/A"}</Markdown>;
+};
 
 export function Dashboard() {
   const { alerts, loading, fetchAlerts } = useAlertsStore();
@@ -52,7 +66,7 @@ export function Dashboard() {
           />
         </div>
         <div className="relative w-[350px] h-[240px]">
-          <LineChart alerts={alerts} loading={loading}/>
+          <LineChart alerts={alerts} loading={loading} />
         </div>
       </div>
 
@@ -92,29 +106,39 @@ export function Dashboard() {
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>Trigger Type</TableHead>
-              <TableHead>Trigger Token</TableHead>
-              <TableHead>File</TableHead>
-              <TableHead>Code</TableHead>
-              <TableHead>Timestamp</TableHead>
+              <TableHead className="max-w-[100px]">Trigger Type</TableHead>
+              <TableHead className="w-[30%] max-w-[300px]">
+                Trigger Token
+              </TableHead>
+              <TableHead className="max-w-[100px]">File</TableHead>
+              <TableHead className="w-[30%] max-w-[300px]">Code</TableHead>
+              <TableHead className="max-w-[100px]">Timestamp</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {filteredAlerts.map((alert) => (
               <TableRow key={alert.alert_id}>
-                <TableCell>{alert.trigger_type}</TableCell>
-                <TableCell>{alert.trigger_string || "N/A"}</TableCell>
-                <TableCell>{alert.code_snippet?.filepath || "N/A"}</TableCell>
-                <TableCell>
+                <TableCell className="max-w-[100px] truncate">
+                  {alert.trigger_type}
+                </TableCell>
+                <TableCell className="w-[30%] max-w-[300px]">
+                  <div className="max-h-40 p-4 rounded overflow-y-auto whitespace-pre-wrap">
+                    {wrapObjectOutput(alert.trigger_string ?? "")}
+                  </div>
+                </TableCell>
+                <TableCell className="max-w-[100px] truncate">
+                  {alert.code_snippet?.filepath || "N/A"}
+                </TableCell>
+                <TableCell className="w-[30%] max-w-[300px]">
                   {alert.code_snippet?.code ? (
-                    <pre className="whitespace-pre-wrap bg-gray-100 p-2 h-20 overflow-auto text-sm">
-                      {alert.code_snippet?.code}
+                    <pre className="w-full h-40 overflow-auto whitespace-pre-wrap bg-gray-100 p-2">
+                      <code>{alert.code_snippet?.code}</code>
                     </pre>
                   ) : (
                     "N/A"
                   )}
                 </TableCell>
-                <TableCell>
+                <TableCell className="max-w-[100px] truncate">
                   <div>{format(new Date(alert.timestamp), "y/MM/dd")}</div>
                   <div>{format(new Date(alert.timestamp), "HH:mm a")}</div>
                 </TableCell>

src/hooks/useAlertsStore.ts

@@ -1,14 +1,13 @@
 import { create } from "zustand";
 import { AlertState } from "../types";
-import { MOCKED_ALERTS } from "@/mock/alerts";
+import { getAlerts } from "@/service";
 
 export const useAlertsStore = create<AlertState>((set) => ({
   alerts: [],
   loading: false,
-  fetchAlerts: () => {
+  fetchAlerts: async () => {
     set({ loading: true });
-    setTimeout(() => {
-      set({ alerts: MOCKED_ALERTS, loading: false });
-    }, 2000);
+    const alerts = await getAlerts();
+    set({ alerts, loading: false });
   },
 }));

src/hooks/usePromptsStore.ts

@@ -1,11 +1,13 @@
 import { create } from "zustand";
 import { PromptState } from "../types";
-import { MOCKED_PROMPTS } from "@/mock/prompts";
+import { getPrompts } from "@/service";
 
 export const usePromptsStore = create<PromptState>((set) => ({
   prompts: [],
   loading: false,
-  fetchPrompts: () => {
-    set({ prompts: MOCKED_PROMPTS, loading: false });
+  fetchPrompts: async () => {
+    set({ loading: true });
+    const prompts = await getPrompts();
+    set({ prompts, loading: false });
   },
 }));

src/lib/utils.ts

@@ -96,7 +96,11 @@ export function groupPromptsByRelativeDate(prompts: Prompt[]) {
 
 export function getAllIssues(alerts: Alert[]) {
   const groupedTriggerCounts = alerts
-    .filter((alert) => alert.trigger_category === "critical")
+    .filter(
+      (alert) =>
+        alert.trigger_category === "critical" ||
+        alert.trigger_category === "info"
+    )
     .reduce<Record<string, number>>((acc, alert) => {
       const triggerType = alert.trigger_type;
       if (triggerType) {