Skip to content

Commit 192f47e

Browse files
pawelcpNekxislatekvo
authored
@pawelcp/ modal component for summarize hisotry (#43)
Co-authored-by: Nekxis <[email protected]> Co-authored-by: Nekxis <[email protected]> Co-authored-by: Ignacy Łątka <[email protected]>
1 parent d833564 commit 192f47e

File tree

9 files changed

+450
-92
lines changed

9 files changed

+450
-92
lines changed

‎webui/frontend/src/app/components/HistoryCard.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { Card, CardBody, CardHeader, Divider } from "@nextui-org/react";
2+
import { PiQueueDuotone } from "react-icons/pi";
3+
import { MdDone } from "react-icons/md";
4+
import { GrInProgress } from "react-icons/gr";
5+
import { calculateElapsedTime } from "../hooks/calculateElapsedTime";
6+
import type { CrawlTask } from "../types/TaskType";
7+
8+
type TaskCardProps = {
9+
item: CrawlTask;
10+
onClick?: (item: any) => void;
11+
};
12+
13+
const HistoryCard: React.FC<TaskCardProps> = ({ item }) => {
14+
let status:string = "status"
15+
16+
function getIconComponent(item: CrawlTask) {
17+
if (item.executing) {
18+
status = "Executing"
19+
return <GrInProgress color="#006fee" className="text-3xl my-auto mr-6" />;
20+
} else if (!item.executing && !item.completed) {
21+
status = "Queued"
22+
return <PiQueueDuotone color="#ffff44bd" className="text-3xl my-auto mr-6 rounded-full" />;
23+
} else if (item.completed) {
24+
status ="Done"
25+
return <MdDone color="#00f400a6" className="text-3xl my-auto mr-6 rounded-full" />;
26+
}
27+
return null;
28+
}
29+
30+
return (
31+
<Card isBlurred={false} key={item.uuid} className="p-2 m-2 w-full h-5/6 mx-auto shadow-xl rounded-xl border border-opacity-15 border-gray-400 bg-black bg-opacity-25">
32+
<CardHeader className="p-1">
33+
<div className="flex justify-between items-center w-full">
34+
{getIconComponent(item)}
35+
<div className="flex flex-col">
36+
<p className="text-md text-center">Mode: {item.mode}</p>
37+
<p className="text-small text-default-500">Status: {status}</p>
38+
</div>
39+
<div>
40+
<p className="text-sm whitespace-pre-line text-center">{calculateElapsedTime(item.timestamp)}</p>
41+
</div>
42+
</div>
43+
</CardHeader>
44+
<Divider />
45+
<CardBody className="h-14 p-2">
46+
<p className="text-sm text-default-600">{item.prompt}</p>
47+
</CardBody>
48+
</Card>
49+
);
50+
};
51+
52+
export default HistoryCard;

‎webui/frontend/src/app/components/PromptInput.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ function PromptInput() {
117117

118118
return (
119119
<form className="w-3/5 flex-col" onSubmit={handleSubmit}>
120-
<div className="w-full p-6 shadow-xl rounded-xl border border-opacity-15 border-gray-400 bg-black bg-opacity-15 z-10 flex flex-col justify-between">
120+
<div className="w-full p-6 py-8 shadow-xl rounded-xl border border-opacity-10 border-gray-400 bg-black bg-opacity-15 z-10 flex flex-col justify-between">
121121
<Textarea
122122
type="text"
123123
name="prompt"

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

+27-11
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,56 @@ import { PiQueueDuotone } from "react-icons/pi";
33
import { MdDone } from "react-icons/md";
44
import { GrInProgress } from "react-icons/gr";
55
import { calculateElapsedTime } from "../hooks/calculateElapsedTime";
6-
import { Task } from "./page";
6+
import type { Task } from "../types/TaskType";
77

88
type TaskCardProps = {
99
item: Task;
1010
};
1111

1212
const CrawlHistoryCard: React.FC<TaskCardProps> = ({ item }) => {
13-
let status:string = "status"
13+
let status: string = "status";
1414

1515
function getIconComponent(item: Task) {
1616
if (item.executing) {
17-
status = "Executing"
18-
return <GrInProgress color="#006fee" className="text-3xl my-auto mr-6" />;
17+
status = "Executing";
18+
return <GrInProgress color="#006fee" className="text-3xl my-auto mr-6" />;
1919
} else if (!item.executing && !item.completed) {
20-
status = "Queued"
21-
return <PiQueueDuotone color="#ffff44bd" className="text-3xl my-auto mr-6 rounded-full" />;
20+
status = "Queued";
21+
return (
22+
<PiQueueDuotone
23+
color="#ffff44bd"
24+
className="text-3xl my-auto mr-6 rounded-full"
25+
/>
26+
);
2227
} else if (item.completed) {
23-
status ="Done"
24-
return <MdDone color="#00f400a6" className="text-3xl my-auto mr-6 rounded-full" />;
28+
status = "Done";
29+
return (
30+
<MdDone
31+
color="#00f400a6"
32+
className="text-3xl my-auto mr-6 rounded-full"
33+
/>
34+
);
2535
}
2636
return null;
2737
}
2838

2939
return (
30-
<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">
40+
<Card
41+
isBlurred={false}
42+
key={item.uuid}
43+
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"
44+
>
3145
<CardHeader className="p-1">
3246
<div className="flex justify-between items-center w-full">
33-
{getIconComponent(item)}
47+
{getIconComponent(item)}
3448
<div className="flex flex-col">
3549
<p className="text-md text-center">Mode: {item.mode}</p>
3650
<p className="text-small text-default-500">Status: {status}</p>
3751
</div>
3852
<div>
39-
<p className="text-sm whitespace-pre-line text-center">{calculateElapsedTime(item.timestamp)}</p>
53+
<p className="text-sm whitespace-pre-line text-center">
54+
{calculateElapsedTime(item.timestamp)}
55+
</p>
4056
</div>
4157
</div>
4258
</CardHeader>

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

+34-53
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,107 @@
1-
import { CrawlHistoryItem } from "./page";
1+
import { CrawlTask } from "../types/TaskType";
22

3-
export const data: CrawlHistoryItem = {
3+
export const data: { task: CrawlTask[] } = {
44
task: [
55
{
66
uuid: "1",
77
prompt: "Huge prompt huge prompt huge prompt huge prompt huge prompt",
88
mode: "Docs",
9-
completed: false,
10-
completion_result: null,
9+
timestamp: 1717501716.700594,
1110
executing: false,
12-
required_crawl_tasks: [],
13-
completion_date: 0,
1411
execution_date: 0,
15-
timestamp: 1717501716.700594,
12+
completed: false,
13+
completion_date: 0,
1614
},
1715
{
1816
uuid: "2",
1917
prompt: "Another prompt with slightly less length",
2018
mode: "Wiki",
21-
completed: true,
22-
completion_result: null,
19+
timestamp: 1717485516.700594,
2320
executing: false,
24-
required_crawl_tasks: [],
25-
completion_date: 0,
2621
execution_date: 0,
27-
timestamp: 1717485516.700594,
22+
completed: true,
23+
completion_date: 0,
2824
},
2925
{
3026
uuid: "3",
3127
prompt: "Prompt for testing purposes only",
3228
mode: "News",
33-
completed: true,
34-
completion_result: null,
29+
timestamp: 1717330716.700594,
3530
executing: false,
36-
required_crawl_tasks: [],
37-
completion_date: 0,
3831
execution_date: 0,
39-
timestamp: 1717330716.700594,
32+
completed: true,
33+
completion_date: 0,
4034
},
4135
{
4236
uuid: "4",
4337
prompt: "Short prompt",
4438
mode: "Docs",
45-
completed: false,
46-
completion_result: null,
39+
timestamp: 1717502916.700594,
4740
executing: false,
48-
required_crawl_tasks: [],
49-
completion_date: 0,
5041
execution_date: 0,
51-
timestamp: 1717502916.700594,
42+
completed: false,
43+
completion_date: 0,
5244
},
5345
{
5446
uuid: "5",
55-
prompt: "This is a very detailed prompt meant for extensive testing of the system's capabilities and performance under stress",
47+
prompt:
48+
"This is a very detailed prompt meant for extensive testing of the system's capabilities and performance under stress",
5649
mode: "Wiki",
57-
completed: false,
58-
completion_result: null,
50+
timestamp: 1717499916.700594,
5951
executing: true,
60-
required_crawl_tasks: [],
61-
completion_date: 0,
6252
execution_date: 0,
63-
timestamp: 1717499916.700594,
53+
completed: false,
54+
completion_date: 0,
6455
},
6556
{
6657
uuid: "6",
6758
prompt: "Test prompt for news mode",
6859
mode: "News",
69-
completed: true,
70-
completion_result: null,
60+
timestamp: 1717244316.700594,
7161
executing: false,
72-
required_crawl_tasks: [],
73-
completion_date: 0,
7462
execution_date: 0,
75-
timestamp: 1717244316.700594,
63+
completed: true,
64+
completion_date: 0,
7665
},
7766
{
7867
uuid: "7",
7968
prompt: "Another doc mode prompt for verification",
8069
mode: "Docs",
81-
completed: true,
82-
completion_result: null,
70+
timestamp: 1717157916.700594,
8371
executing: false,
84-
required_crawl_tasks: [],
85-
completion_date: 0,
8672
execution_date: 0,
87-
timestamp: 1717157916.700594,
73+
completed: true,
74+
completion_date: 0,
8875
},
8976
{
9077
uuid: "8",
9178
prompt: "Wiki mode prompt for testing data mock",
9279
mode: "Wiki",
93-
completed: false,
94-
completion_result: null,
80+
timestamp: 1717071516.700594,
9581
executing: false,
96-
required_crawl_tasks: [],
97-
completion_date: 0,
9882
execution_date: 0,
99-
timestamp: 1717071516.700594,
83+
completed: false,
84+
completion_date: 0,
10085
},
10186
{
10287
uuid: "9",
10388
prompt: "News mode prompt to verify integration",
10489
mode: "News",
105-
completed: true,
106-
completion_result: null,
90+
timestamp: 1716985116.700594,
10791
executing: false,
108-
required_crawl_tasks: [],
109-
completion_date: 0,
11092
execution_date: 0,
111-
timestamp: 1716985116.700594,
93+
completed: true,
94+
completion_date: 0,
11295
},
11396
{
11497
uuid: "10",
11598
prompt: "Final prompt for docs mode",
11699
mode: "Docs",
117-
completed: false,
118-
completion_result: null,
100+
timestamp: 1716898716.700594,
119101
executing: true,
120-
required_crawl_tasks: [],
121-
completion_date: 0,
122102
execution_date: 0,
123-
timestamp: 1716898716.700594,
103+
completed: false,
104+
completion_date: 0,
124105
},
125106
],
126107
};

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

+4-20
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,9 @@
22
import React from "react";
33
import Header from "../components/Header";
44
import { useQuery } from "react-query";
5-
import CrawlHistoryCard from "./CrawlHistoryCard";
5+
import HistoryCard from "../components/HistoryCard"
66
import { data } from "./crawlHistoryMock";
77

8-
export interface Task {
9-
uuid: string;
10-
prompt: string;
11-
mode: string;
12-
completed: boolean;
13-
completion_result: string | null;
14-
executing: boolean;
15-
required_crawl_tasks: string[];
16-
completion_date: number;
17-
execution_date: number;
18-
timestamp: number;
19-
}
20-
21-
export interface CrawlHistoryItem {
22-
task: Task[];
23-
}
24-
258
const CrawlHistory = () => {
269
// const { data, isLoading, isError } = useQuery<CrawlHistoryItem[], Error>(
2710
// "crawlHistory",
@@ -68,9 +51,10 @@ const CrawlHistory = () => {
6851
<div className="h-screen w-screen flex-col">
6952
<Header></Header>
7053
<div className="h-4/5 w-full flex-col items-center justify-center">
71-
<div className="grid grid-cols-4 gap-4 p-4">
54+
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 gap-4 p-4">
7255
{data.task.map((item) => (
73-
<CrawlHistoryCard key={item.uuid} item={item}></CrawlHistoryCard>
56+
<HistoryCard key={item.uuid} item={item}></HistoryCard>
57+
7458
))}
7559
</div>
7660
</div>

0 commit comments

Comments
 (0)