AugustDev · AugustDev · Dec 25, 2023 · Nov 15, 2023 · Dec 25, 2023
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
 		"studio": "npx prisma studio"
 	},
 	"dependencies": {
+		"@ant-design/cssinjs": "^1.17.2",
 		"@emotion/react": "^11.11.1",
 		"@emotion/styled": "^11.11.0",
 		"@headlessui/react": "^1.7.16",
@@ -29,6 +30,7 @@
 		"@types/node": "20.4.8",
 		"@types/react": "18.2.18",
 		"@types/react-dom": "18.2.7",
+		"antd": "^5.11.1",
 		"autoprefixer": "10.4.14",
 		"bytes": "^3.1.2",
 		"clsx": "^2.0.0",
@@ -44,6 +46,7 @@
 		"react-dom": "18.2.0",
 		"react-hot-toast": "^2.4.1",
 		"react-icons": "^4.10.1",
+		"react-infinite-scroll-component": "^6.1.0",
 		"react-plotly.js": "^2.6.0",
 		"sass": "^1.66.1",
 		"tailwindcss": "3.3.3",

diff --git a/src/app/api/search/route.ts b/src/app/api/search/route.ts
@@ -1,12 +1,12 @@
 import { prisma } from "@/services/prisma/prisma"
 import { NextResponse } from "next/server"
-import { SearchRequest, SearchResponse } from "./types"
+import { SearchRequest } from "./types"
 import { searchWorkflows } from "@/services/prisma"
 
 export async function POST(request: Request) {
 	const searchRequest: SearchRequest = await request.json()
 
-	const workflows = await searchWorkflows({
+	const searchResults = await searchWorkflows({
 		term: searchRequest.term,
 		id: searchRequest.id,
 		runName: searchRequest.run_name,
@@ -16,11 +16,9 @@ export async function POST(request: Request) {
 		after: searchRequest.after,
 		before: searchRequest.before,
 		workspaceId: searchRequest.workspace_id,
+		first: searchRequest.first,
+		cursor: searchRequest.cursor,
 	})
 
-	const res: SearchResponse = {
-		workflows: workflows,
-	}
-
-	return NextResponse.json(res)
+	return NextResponse.json(searchResults)
 }
diff --git a/src/app/api/search/types.ts b/src/app/api/search/types.ts
@@ -10,8 +10,16 @@ export type SearchRequest = {
 	after?: Date
 	before?: Date
 	workspace_id?: number
+	first?: number
+	cursor?: string
+}
+
+export type TPageInfo = {
+	hasNextPage: boolean
+	endCursor?: string
 }
 
 export type SearchResponse = {
 	workflows: Workflow[]
+	pageInfo: TPageInfo
 }
diff --git a/src/app/components/Tags/Tags.tsx b/src/app/components/Tags/Tags.tsx
@@ -6,7 +6,7 @@ type TagProps = {
 
 export const Tag: React.FC<TagProps> = ({ name }) => {
 	return (
-		<span className="inline-flex items-center rounded-md bg-indigo-100 px-1.5 py-0.5 mr-2 text-xs font-medium text-indigo-700">
+		<span className="inline-flex items-center rounded-md bg-indigo-100 px-1.5 py-0.5 mr-2 mb-1 text-xs font-medium text-indigo-700">
 			{name}
 		</span>
 	)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,8 @@ import "./globals.css"
 import type { Metadata } from "next"
 import { Inter } from "next/font/google"
 import { MainNavigation } from "./components"
+import StyledComponentsRegistry from "../lib/AntdRegistry"
+// import "@/globals.css"
 
 const inter = Inter({ subsets: ["latin"] })
 
@@ -14,7 +16,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 	return (
 		<html lang="en" className="h-full bg-gray-100">
 			<body className={inter.className}>
-				<MainNavigation child={children} />
+				<StyledComponentsRegistry>
+					<MainNavigation child={children} />
+				</StyledComponentsRegistry>
 			</body>
 		</html>
 	)

diff --git a/src/app/runs/[id]/components/General/General.tsx b/src/app/runs/[id]/components/General/General.tsx
@@ -8,6 +8,7 @@ import {
 import { FaDocker } from "react-icons/fa"
 import { PiEngineLight, PiSubtitlesLight } from "react-icons/pi"
 import { BuildingLibraryIcon, FolderIcon } from "@heroicons/react/24/outline"
+import { IoInformationCircleOutline } from "react-icons/io5"
 import { FaLayerGroup } from "react-icons/fa"
 import { Workflow, Workspace } from "@prisma/client"
 
@@ -89,6 +90,12 @@ export const General: React.FC<GeneralProps> = ({ workflow, workspace }: General
 				</dt>
 				<dd className="text-sm leading-6 text-gray-500">{workflow.id}</dd>
 			</div>
+			<div className="mt-4 flex w-full flex-none gap-x-4">
+				<dt className="flex-none">
+					<IoInformationCircleOutline className="h-6 w-5 text-gray-400" aria-hidden="true" />
+				</dt>
+				<dd className="text-sm leading-6 text-gray-500">{workflow.sessionId}</dd>
+			</div>
 			{workspace && (
 				<div className="mt-4 flex w-full flex-none gap-x-4">
 					<dt className="flex-none">

diff --git a/src/app/runs/components/Main/Main.tsx b/src/app/runs/components/Main/Main.tsx
@@ -5,7 +5,7 @@ import { clsx } from "clsx"
 import { SearchBar } from "@/app/components"
 import { Workflow, Workspace } from "@prisma/client"
 import { RunsTable } from "../RunsTable"
-import { SearchRequest, SearchResponse } from "@/app/api/search/types"
+import { SearchRequest, SearchResponse, TPageInfo } from "@/app/api/search/types"
 import styles from "./Main.module.scss"
 import moment from "moment"
 
@@ -19,6 +19,7 @@ export const Main = (props: TMainProps) => {
 	const [searchTags, setSearchTags] = useState<string[]>(props.searchTags ?? [])
 	const [workflows, setWorkflows] = useState<Workflow[]>(props.runs)
 	const [workspaces, setWorkspaces] = useState<Workspace[]>(props.workspaces)
+	const [pageInfo, setPageInfo] = useState<TPageInfo>({ hasNextPage: true })
 
 	const addSearchTag = (tag: string) => {
 		if (tag == "" || searchTags.includes(tag)) {
@@ -30,7 +31,8 @@ export const Main = (props: TMainProps) => {
 	const removeSearchTag = (tag: string) => {
 		setSearchTags(searchTags.filter((t) => t !== tag))
 	}
-	const executeSearch = async () => {
+
+	const searchRuns = async (cursor?: string) => {
 		const searchBody: SearchRequest = {}
 
 		for (const tag of searchTags) {
@@ -82,30 +84,59 @@ export const Main = (props: TMainProps) => {
 			}
 		}
 
+		if (cursor) {
+			searchBody.cursor = cursor
+		}
+
 		const response = await fetch(`/api/search`, {
 			body: JSON.stringify(searchBody),
 			method: "POST",
 			cache: "no-store",
 		})
 
 		const results: SearchResponse = await response.json()
+		return results
+	}
+
+	const executeSearch = async () => {
+		const results = await searchRuns()
 		setWorkflows(results.workflows)
+		setPageInfo(results.pageInfo)
+	}
+
+	const getLatestRuns = async () => {
+		const results = await searchRuns()
+		setWorkflows((prevWorkflows) => {
+			const newWorkflows = [...prevWorkflows, ...results.workflows]
+			const idToWorkflowMap = new Map(newWorkflows.map((workflow) => [workflow.id, workflow]))
+			return Array.from(idToWorkflowMap.values())
+		})
 	}
 
 	const onWorkflowDeleteClick = async (id: string) => {
 		await fetch(`/api/runs/${id}`, {
 			method: "DELETE",
 			cache: "no-store",
 		})
-		executeSearch()
+		setWorkflows((prevWorkflows) => prevWorkflows.filter((workflow) => workflow.id !== id))
+	}
+
+	const fetchMoreData = async () => {
+		const results = await searchRuns(pageInfo.endCursor)
+		setWorkflows((prevWorkflows) => {
+			const newWorkflows = [...prevWorkflows, ...results.workflows]
+			const idToWorkflowMap = new Map(newWorkflows.map((workflow) => [workflow.id, workflow]))
+			return Array.from(idToWorkflowMap.values())
+		})
+		setPageInfo(results.pageInfo)
 	}
 
 	useEffect(() => {
 		executeSearch()
 
 		// Execute every 5 seconds
 		const intervalId = setInterval(() => {
-			executeSearch()
+			getLatestRuns()
 		}, 5000) // 5000 milliseconds = 5 seconds
 
 		// Clear interval on component unmount
@@ -122,6 +153,8 @@ export const Main = (props: TMainProps) => {
 					runs={workflows}
 					className={clsx(styles.fadeInBottom, "mt-8")}
 					onDeleteClick={onWorkflowDeleteClick}
+					fetchMoreData={fetchMoreData}
+					pageInfo={pageInfo}
 				/>
 			)}
 		</>

diff --git a/src/app/runs/components/OptionsDropdown/OptionsDropdown.tsx b/src/app/runs/components/OptionsDropdown/OptionsDropdown.tsx
@@ -42,7 +42,6 @@ export const OptionsDropdown = ({ deleteWorkflow }: TOptionDropdownProps) => {
 							<Menu.Item>
 								{({ active }) => (
 									<a
-										href="#"
 										className={clsx(active ? "bg-gray-100 text-red-900" : "text-red-700", "block px-4 py-2 text-sm")}
 										onClick={() => setDeleteWorkspaceModal(true)}
 									>