-
Notifications
You must be signed in to change notification settings - Fork 120
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: updated links and fixed styling issues
Signed-off-by: Adithya Krishna <[email protected]>
- Loading branch information
1 parent
2b441c0
commit 266161f
Showing
3 changed files
with
58 additions
and
83 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
137 changes: 56 additions & 81 deletions
137
server/ui/src/routes/Namespace/IndividualInvocationPage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,86 +1,61 @@ | ||
| import { Suspense } from 'react' | ||
| import { Breadcrumbs, Typography } from '@mui/material' | ||
| import { TableDocument } from 'iconsax-react' | ||
| import { | ||
| Box, | ||
| Breadcrumbs, | ||
| Typography, | ||
| Stack, | ||
| } from '@mui/material'; | ||
| import { TableDocument } from 'iconsax-react'; | ||
| import NavigateNextIcon from '@mui/icons-material/NavigateNext' | ||
| import { Link, useLoaderData } from 'react-router-dom' | ||
| import CopyText from '../../components/CopyText' | ||
| import InvocationTasksTable from '../../components/tables/InvocationTasksTable' | ||
| import InvocationOutputTable from '../../components/tables/InvocationOutputTable' | ||
| import { Link, useLoaderData } from 'react-router-dom'; | ||
| import CopyText from '../../components/CopyText'; | ||
| import InvocationOutputTable from '../../components/tables/InvocationOutputTable'; | ||
| import InvocationTasksTable from '../../components/tables/InvocationTasksTable'; | ||
|
|
||
| const IndividualInvocationPage = () => { | ||
| const { | ||
| indexifyServiceURL, | ||
| invocationId, | ||
| computeGraph, | ||
| namespace | ||
| } = | ||
| useLoaderData() as { | ||
| indexifyServiceURL: string | ||
| invocationId: string, | ||
| computeGraph: string, | ||
| namespace: string | ||
| } | ||
|
|
||
|
|
||
| interface InvocationPageData { | ||
| indexifyServiceURL: string | ||
| invocationId: string | ||
| computeGraph: string | ||
| namespace: string | ||
| } | ||
|
|
||
| function BreadcrumbTrail({ namespace, computeGraph, invocationId }: Omit<InvocationPageData, 'indexifyServiceURL'>) { | ||
| return ( | ||
| <Breadcrumbs | ||
| aria-label="invocation navigation" | ||
| separator={<NavigateNextIcon fontSize="small" />} | ||
| > | ||
| <Typography color="text.primary">{namespace}</Typography> | ||
| <Link to={`/${namespace}/compute-graphs`}> | ||
| <Typography color="text.primary">Compute Graphs</Typography> | ||
| </Link> | ||
| <Link to={`/${namespace}/compute-graphs/${computeGraph}`}> | ||
| <Typography color="text.primary">{computeGraph}</Typography> | ||
| </Link> | ||
| <Typography color="text.primary">{invocationId}</Typography> | ||
| </Breadcrumbs> | ||
| ) | ||
| } | ||
|
|
||
| function InvocationHeader({ invocationId }: { invocationId: string }) { | ||
| return ( | ||
| <div className="flex items-center gap-2"> | ||
| <div className="flex items-center justify-center w-8 h-8"> | ||
| <TableDocument size={25} className="text-primary" variant="Outline"/> | ||
| </div> | ||
| <Typography variant="h4" className="flex flex-row items-center gap-2"> | ||
| Invocation - {invocationId} | ||
| <CopyText text={invocationId} /> | ||
| </Typography> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| function IndividualInvocationPage() { | ||
| const { indexifyServiceURL, invocationId, computeGraph, namespace } = useLoaderData() as InvocationPageData | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-6"> | ||
| <BreadcrumbTrail | ||
| namespace={namespace} | ||
| computeGraph={computeGraph} | ||
| invocationId={invocationId} | ||
| /> | ||
|
|
||
| <div className="space-y-6"> | ||
| <InvocationHeader invocationId={invocationId} /> | ||
|
|
||
| <Suspense fallback={<div>Loading output table...</div>}> | ||
| <InvocationOutputTable | ||
| indexifyServiceURL={indexifyServiceURL} | ||
| invocationId={invocationId} | ||
| namespace={namespace} | ||
| computeGraph={computeGraph} | ||
| /> | ||
| </Suspense> | ||
|
|
||
| <Suspense fallback={<div>Loading tasks table...</div>}> | ||
| <InvocationTasksTable | ||
| indexifyServiceURL={indexifyServiceURL} | ||
| invocationId={invocationId} | ||
| namespace={namespace} | ||
| computeGraph={computeGraph} | ||
| /> | ||
| </Suspense> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| <Stack direction="column" spacing={3}> | ||
| <Breadcrumbs | ||
| aria-label="breadcrumb" | ||
| separator={<NavigateNextIcon fontSize="small" />} | ||
| > | ||
| <Typography color="text.primary">{namespace}</Typography> | ||
| <Link color="inherit" to={`/${namespace}/compute-graphs`}> | ||
| <Typography color="text.primary">Compute Graphs</Typography> | ||
| </Link> | ||
| <Link color="inherit" to={`/${namespace}/compute-graphs/${computeGraph}`}> | ||
| <Typography color="text.primary">{computeGraph}</Typography> | ||
| </Link> | ||
| <Typography color="text.primary">{invocationId}</Typography> | ||
| </Breadcrumbs> | ||
| <Box sx={{ p: 0 }}> | ||
| <Box sx={{ mb: 3 }}> | ||
| <div className="content-table-header"> | ||
| <div className="heading-icon-container"> | ||
| <TableDocument size="25" className="heading-icons" variant="Outline"/> | ||
| </div> | ||
| <Typography variant="h4" display={'flex'} flexDirection={'row'}> | ||
| Invocation - {invocationId} <CopyText text={invocationId} /> | ||
| </Typography> | ||
| </div> | ||
| <InvocationOutputTable indexifyServiceURL={indexifyServiceURL} invocationId={invocationId} namespace={namespace} computeGraph={computeGraph} /> | ||
| </Box> | ||
| <InvocationTasksTable indexifyServiceURL={indexifyServiceURL} invocationId={invocationId} namespace={namespace} computeGraph={computeGraph} /> | ||
| </Box> | ||
| </Stack> | ||
| ); | ||
| }; | ||
|
|
||
| export default IndividualInvocationPage; |