From 4d68174d166972a158acc05ba2d1b9859e5bf7f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Cempura?= <94795184+pawelcp@users.noreply.github.com> Date: Tue, 4 Jun 2024 17:57:16 +0200 Subject: [PATCH] @nekxis/creating crawl history tab (#39) Co-authored-by: Nekxis Co-authored-by: Nekxis <95935590+Nekxis@users.noreply.github.com> --- .../app/crawl-history/CrawlHistoryCard.tsx | 51 +++++++ .../src/app/crawl-history/crawlHistoryMock.ts | 126 ++++++++++++++++++ webui/frontend/src/app/crawl-history/page.tsx | 81 ++++++++++- .../src/app/hooks/calculateElapsedTime.ts | 15 +++ 4 files changed, 266 insertions(+), 7 deletions(-) create mode 100644 webui/frontend/src/app/crawl-history/CrawlHistoryCard.tsx create mode 100644 webui/frontend/src/app/crawl-history/crawlHistoryMock.ts create mode 100644 webui/frontend/src/app/hooks/calculateElapsedTime.ts diff --git a/webui/frontend/src/app/crawl-history/CrawlHistoryCard.tsx b/webui/frontend/src/app/crawl-history/CrawlHistoryCard.tsx new file mode 100644 index 0000000..aa73654 --- /dev/null +++ b/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 = ({ item }) => { + let status:string = "status" + + function getIconComponent(item: Task) { + if (item.executing) { + status = "Executing" + return ; + } else if (!item.executing && !item.completed) { + status = "Queued" + return ; + } else if (item.completed) { + status ="Done" + return ; + } + return null; + } + + return ( + + +
+ {getIconComponent(item)} +
+

Mode: {item.mode}

+

Status: {status}

+
+
+

{calculateElapsedTime(item.timestamp)}

+
+
+ + + +

{item.prompt}

+ + + ); +}; + +export default CrawlHistoryCard; diff --git a/webui/frontend/src/app/crawl-history/crawlHistoryMock.ts b/webui/frontend/src/app/crawl-history/crawlHistoryMock.ts new file mode 100644 index 0000000..085173b --- /dev/null +++ b/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, + }, + ], +}; diff --git a/webui/frontend/src/app/crawl-history/page.tsx b/webui/frontend/src/app/crawl-history/page.tsx index 49022db..617153f 100644 --- a/webui/frontend/src/app/crawl-history/page.tsx +++ b/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( + // "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 ( +
+
+
Loading...
+
+ ); + } + + if (isError) { + return ( +
+
+
Fetching data
+
+ ); + } + + if (!data || data.task.length === 0) { + return ( +
+
+
There is no crawler history
+
+ ); + } + return ( -
-
-

Crawl History

-

This is the Crawl History page.

+
+
+
+
+ {data.task.map((item) => ( + + ))} +
+
); -} +}; export default CrawlHistory; diff --git a/webui/frontend/src/app/hooks/calculateElapsedTime.ts b/webui/frontend/src/app/hooks/calculateElapsedTime.ts new file mode 100644 index 0000000..069183d --- /dev/null +++ b/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`; + } + }