@nekxis/creating crawl history tab (#39)

Co-authored-by: Nekxis <[email protected]>
Co-authored-by: Nekxis <[email protected]>

webui/frontend/src/app/crawl-history/CrawlHistoryCard.tsx

@@ -0,0 +1,51 @@
+import { Card, CardBody, CardHeader, Divider } from "@nextui-org/react";
+import { PiQueueDuotone } from "react-icons/pi";
+import { MdDone } from "react-icons/md";
+import { GrInProgress } from "react-icons/gr";
+import { calculateElapsedTime } from "../hooks/calculateElapsedTime";
+import { Task } from "./page";
+
+type TaskCardProps = {
+  item: Task;
+};
+
+const CrawlHistoryCard: React.FC<TaskCardProps> = ({ item }) => {
+    let status:string = "status"
+
+  function getIconComponent(item: Task) {
+    if (item.executing) {
+        status = "Executing"
+        return <GrInProgress color="#006fee" className="text-3xl my-auto mr-6" />;
+    } else if (!item.executing && !item.completed) {
+        status = "Queued"
+        return <PiQueueDuotone color="#ffff44bd" className="text-3xl my-auto mr-6 rounded-full" />;
+    } else if (item.completed) {
+        status ="Done"
+        return <MdDone color="#00f400a6" className="text-3xl my-auto mr-6 rounded-full" />;
+    }
+    return null;
+  }
+
+  return (
+    <Card isBlurred={false} key={item.uuid} className="p-2 m-2 cursor-pointer w-full h-5/6 mx-auto shadow-xl rounded-xl border border-opacity-15 border-gray-400 bg-black bg-opacity-25">
+      <CardHeader className="p-1">
+        <div className="flex justify-between items-center w-full">
+        {getIconComponent(item)}
+          <div className="flex flex-col">
+            <p className="text-md text-center">Mode: {item.mode}</p>
+            <p className="text-small text-default-500">Status: {status}</p>
+          </div>
+          <div>
+            <p className="text-sm whitespace-pre-line text-center">{calculateElapsedTime(item.timestamp)}</p>
+          </div>
+        </div>
+      </CardHeader>
+      <Divider />
+      <CardBody className="h-14 p-2">
+        <p className="text-sm">{item.prompt}</p>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default CrawlHistoryCard;

webui/frontend/src/app/crawl-history/crawlHistoryMock.ts

@@ -0,0 +1,126 @@
+import { CrawlHistoryItem } from "./page";
+
+export const data: CrawlHistoryItem = {
+  task: [
+    {
+      uuid: "1",
+      prompt: "Huge prompt huge prompt huge prompt huge prompt huge prompt",
+      mode: "Docs",
+      completed: false,
+      completion_result: null,
+      executing: false,
+      required_crawl_tasks: [],
+      completion_date: 0,
+      execution_date: 0,
+      timestamp: 1717501716.700594,
+    },
+    {
+      uuid: "2",
+      prompt: "Another prompt with slightly less length",
+      mode: "Wiki",
+      completed: true,
+      completion_result: null,
+      executing: false,
+      required_crawl_tasks: [],
+      completion_date: 0,
+      execution_date: 0,
+      timestamp: 1717485516.700594,
+    },
+    {
+      uuid: "3",
+      prompt: "Prompt for testing purposes only",
+      mode: "News",
+      completed: true,
+      completion_result: null,
+      executing: false,
+      required_crawl_tasks: [],
+      completion_date: 0,
+      execution_date: 0,
+      timestamp: 1717330716.700594,
+    },
+    {
+      uuid: "4",
+      prompt: "Short prompt",
+      mode: "Docs",
+      completed: false,
+      completion_result: null,
+      executing: false,
+      required_crawl_tasks: [],
+      completion_date: 0,
+      execution_date: 0,
+      timestamp: 1717502916.700594,
+    },
+    {
+      uuid: "5",
+      prompt: "This is a very detailed prompt meant for extensive testing of the system's capabilities and performance under stress",
+      mode: "Wiki",
+      completed: false,
+      completion_result: null,
+      executing: true,
+      required_crawl_tasks: [],
+      completion_date: 0,
+      execution_date: 0,
+      timestamp: 1717499916.700594,
+    },
+    {
+      uuid: "6",
+      prompt: "Test prompt for news mode",
+      mode: "News",
+      completed: true,
+      completion_result: null,
+      executing: false,
+      required_crawl_tasks: [],
+      completion_date: 0,
+      execution_date: 0,
+      timestamp: 1717244316.700594,
+    },
+    {
+      uuid: "7",
+      prompt: "Another doc mode prompt for verification",
+      mode: "Docs",
+      completed: true,
+      completion_result: null,
+      executing: false,
+      required_crawl_tasks: [],
+      completion_date: 0,
+      execution_date: 0,
+      timestamp: 1717157916.700594,
+    },
+    {
+      uuid: "8",
+      prompt: "Wiki mode prompt for testing data mock",
+      mode: "Wiki",
+      completed: false,
+      completion_result: null,
+      executing: false,
+      required_crawl_tasks: [],
+      completion_date: 0,
+      execution_date: 0,
+      timestamp: 1717071516.700594,
+    },
+    {
+      uuid: "9",
+      prompt: "News mode prompt to verify integration",
+      mode: "News",
+      completed: true,
+      completion_result: null,
+      executing: false,
+      required_crawl_tasks: [],
+      completion_date: 0,
+      execution_date: 0,
+      timestamp: 1716985116.700594,
+    },
+    {
+      uuid: "10",
+      prompt: "Final prompt for docs mode",
+      mode: "Docs",
+      completed: false,
+      completion_result: null,
+      executing: true,
+      required_crawl_tasks: [],
+      completion_date: 0,
+      execution_date: 0,
+      timestamp: 1716898716.700594,
+    },
+  ],
+};

webui/frontend/src/app/crawl-history/page.tsx

@@ -1,14 +1,81 @@
-import React from 'react';
-import Header from '../components/Header';
+"use client";
+import React from "react";
+import Header from "../components/Header";
+import { useQuery } from "react-query";
+import CrawlHistoryCard from "./CrawlHistoryCard";
+import { data } from "./crawlHistoryMock";
+
+export interface Task {
+  uuid: string;
+  prompt: string;
+  mode: string;
+  completed: boolean;
+  completion_result: string | null;
+  executing: boolean;
+  required_crawl_tasks: string[];
+  completion_date: number;
+  execution_date: number;
+  timestamp: number;
+}
+
+export interface CrawlHistoryItem {
+  task: Task[];
+}
 
 const CrawlHistory = () => {
+  // const { data, isLoading, isError } = useQuery<CrawlHistoryItem[], Error>(
+  //   "crawlHistory",
+  //   async () => {
+  //     const response = await fetch("http://127.0.0.1:8000/crawl");
+  //     if (!response.ok) {
+  //       throw new Error("Failed to fetch crawl history");
+  //     }
+  //     return response.json();
+  //   }
+  // );
+
+  const isLoading = false;
+  const isError = false;
+
+  if (isLoading) {
+    return (
+      <div className="h-full w-full">
+        <Header></Header>
+        <div className="text-center">Loading...</div>
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="h-screen w-screen">
+        <Header></Header>
+        <div className="text-center">Fetching data</div>
+      </div>
+    );
+  }
+
+  if (!data || data.task.length === 0) {
+    return (
+      <div className="h-screen w-screen">
+        <Header></Header>
+        <div className="text-center">There is no crawler history</div>
+      </div>
+    );
+  }
+
   return (
-    <div className="h-screen w-screen">
-      <Header ></Header>
-      <h1>Crawl History</h1>
-      <p>This is the Crawl History page.</p>
+    <div className="h-screen w-screen flex-col">
+      <Header></Header>
+      <div className="h-4/5 w-full flex-col items-center justify-center">
+        <div className="grid grid-cols-4 gap-4 p-4">
+          {data.task.map((item) => (
+            <CrawlHistoryCard key={item.uuid} item={item}></CrawlHistoryCard>
+          ))}
+        </div>
+      </div>
     </div>
   );
-}
+};
 
 export default CrawlHistory;

webui/frontend/src/app/hooks/calculateElapsedTime.ts

@@ -0,0 +1,15 @@
+export function calculateElapsedTime(timestamp: number): string {
+    const now = new Date().getTime();
+    const diffInMilliseconds = now - timestamp * 1000;
+    const diffInMinutes = Math.floor(diffInMilliseconds / (1000 * 60));
+
+    if (diffInMinutes >= 1440) {
+      const diffInDays = Math.floor(diffInMinutes / 1440);
+      return `${diffInDays} Day${diffInDays > 1 ? 's' : ''} ago`;
+    } else if (diffInMinutes >= 60) {
+      const diffInHours = Math.floor(diffInMinutes / 60);
+      return `${diffInHours} Hour${diffInHours > 1 ? 's' : ''} ago`;
+    } else {
+      return `${diffInMinutes} Minute${diffInMinutes > 1 ? 's' : ''} ago`;
+    }
+  }