Skip to content

Commit f3592fd

Browse files
EtsijaEtsija
committed
feat(ui): Clicking traffic lights takes to corr. job configuration
Add section anchors to the job configuration sub-page of the ORT run details page. Clicking a traffic light of a job in the repository index page takes the user to the corresponding section of the job configuration page. NOTE: The id's that mark the position in the scrolling job configuration page need a `scroll-mt-16` class to compensate for the UI's header, otherwise clicking a job traffic light would result to the page opening such that the job configuration is partly scrolled behind the header. Resolves #643. Signed-off-by: Jyrki Keisala <[email protected]>
1 parent 5e83abe commit f3592fd

File tree

3 files changed

+89
-22
lines changed

3 files changed

+89
-22
lines changed

‎ui/src/components/ort-run-job-status.tsx‎

Lines changed: 65 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
* License-Filename: LICENSE
1818
*/
1919

20+
import { Link } from '@tanstack/react-router';
21+
2022
import { PagedResponse_OrtRunSummary_ } from '@/api/requests';
2123
import {
2224
Tooltip,
@@ -33,20 +35,36 @@ import { RunDuration } from './run-duration';
3335
type OrtRunJobStatusProps = {
3436
jobs: PagedResponse_OrtRunSummary_['data'][0]['jobs'];
3537
pollInterval: number;
38+
orgId: string;
39+
productId: string;
40+
repoId: string;
41+
runIndex: string;
3642
};
3743

3844
export const OrtRunJobStatus = ({
3945
jobs,
4046
pollInterval,
47+
orgId,
48+
productId,
49+
repoId,
50+
runIndex,
4151
}: OrtRunJobStatusProps) => {
4252
return (
4353
<TooltipProvider>
4454
<div className='flex items-center space-x-1'>
4555
<Tooltip>
4656
<TooltipTrigger asChild>
47-
<div
48-
className={`${getStatusClass(jobs.analyzer?.status)} ${getStatusBackgroundColor(jobs.analyzer?.status)}`}
49-
></div>
57+
<Link
58+
to='/organizations/$orgId/products/$productId/repositories/$repoId/runs/$runIndex/config'
59+
params={{ orgId, productId, repoId, runIndex }}
60+
hash='analyzer'
61+
>
62+
<div
63+
className={`${getStatusClass(jobs.analyzer?.status)} ${getStatusBackgroundColor(jobs.analyzer?.status)}`}
64+
>
65+
{' '}
66+
</div>
67+
</Link>
5068
</TooltipTrigger>
5169
<TooltipContent>
5270
<div className='flex flex-col'>
@@ -74,9 +92,17 @@ export const OrtRunJobStatus = ({
7492
</Tooltip>
7593
<Tooltip>
7694
<TooltipTrigger asChild>
77-
<div
78-
className={`${getStatusClass(jobs.advisor?.status)} ${getStatusBackgroundColor(jobs.advisor?.status)}`}
79-
></div>
95+
<Link
96+
to='/organizations/$orgId/products/$productId/repositories/$repoId/runs/$runIndex/config'
97+
params={{ orgId, productId, repoId, runIndex }}
98+
hash='advisor'
99+
>
100+
<div
101+
className={`${getStatusClass(jobs.advisor?.status)} ${getStatusBackgroundColor(jobs.advisor?.status)}`}
102+
>
103+
{' '}
104+
</div>
105+
</Link>
80106
</TooltipTrigger>
81107
<TooltipContent>
82108
<div className='flex flex-col'>
@@ -104,9 +130,17 @@ export const OrtRunJobStatus = ({
104130
</Tooltip>
105131
<Tooltip>
106132
<TooltipTrigger asChild>
107-
<div
108-
className={`${getStatusClass(jobs.scanner?.status)} ${getStatusBackgroundColor(jobs.scanner?.status)}`}
109-
></div>
133+
<Link
134+
to='/organizations/$orgId/products/$productId/repositories/$repoId/runs/$runIndex/config'
135+
params={{ orgId, productId, repoId, runIndex }}
136+
hash='scanner'
137+
>
138+
<div
139+
className={`${getStatusClass(jobs.scanner?.status)} ${getStatusBackgroundColor(jobs.scanner?.status)}`}
140+
>
141+
{' '}
142+
</div>
143+
</Link>
110144
</TooltipTrigger>
111145
<TooltipContent>
112146
<div className='flex flex-col'>
@@ -134,9 +168,17 @@ export const OrtRunJobStatus = ({
134168
</Tooltip>
135169
<Tooltip>
136170
<TooltipTrigger asChild>
137-
<div
138-
className={`${getStatusClass(jobs.evaluator?.status)} ${getStatusBackgroundColor(jobs.evaluator?.status)}`}
139-
></div>
171+
<Link
172+
to='/organizations/$orgId/products/$productId/repositories/$repoId/runs/$runIndex/config'
173+
params={{ orgId, productId, repoId, runIndex }}
174+
hash='evaluator'
175+
>
176+
<div
177+
className={`${getStatusClass(jobs.evaluator?.status)} ${getStatusBackgroundColor(jobs.evaluator?.status)}`}
178+
>
179+
{' '}
180+
</div>
181+
</Link>
140182
</TooltipTrigger>
141183
<TooltipContent>
142184
<div className='flex flex-col'>
@@ -164,9 +206,17 @@ export const OrtRunJobStatus = ({
164206
</Tooltip>
165207
<Tooltip>
166208
<TooltipTrigger asChild>
167-
<div
168-
className={`${getStatusClass(jobs.reporter?.status)} ${getStatusBackgroundColor(jobs.reporter?.status)}`}
169-
></div>
209+
<Link
210+
to='/organizations/$orgId/products/$productId/repositories/$repoId/runs/$runIndex/config'
211+
params={{ orgId, productId, repoId, runIndex }}
212+
hash='reporter'
213+
>
214+
<div
215+
className={`${getStatusClass(jobs.reporter?.status)} ${getStatusBackgroundColor(jobs.reporter?.status)}`}
216+
>
217+
{' '}
218+
</div>
219+
</Link>
170220
</TooltipTrigger>
171221
<TooltipContent>
172222
<div className='flex flex-col'>

‎ui/src/routes/_layout/organizations/$orgId/products/$productId/repositories/$repoId/_layout/runs/$runIndex/config/index.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,22 @@ const ConfigComponent = () => {
4747
});
4848

4949
return (
50-
<div className='my-2 flex h-full flex-col gap-4 overflow-y-auto'>
51-
<AnalyzerJobDetails run={ortRun} />
52-
<AdvisorJobDetails run={ortRun} />
53-
<ScannerJobDetails run={ortRun} />
54-
<EvaluatorJobDetails run={ortRun} />
55-
<ReporterJobDetails run={ortRun} />
50+
<div className='flex flex-col gap-4'>
51+
<div id='analyzer' className='scroll-mt-16'>
52+
<AnalyzerJobDetails run={ortRun} />
53+
</div>
54+
<div id='advisor' className='scroll-mt-16'>
55+
<AdvisorJobDetails run={ortRun} />
56+
</div>
57+
<div id='scanner' className='scroll-mt-16'>
58+
<ScannerJobDetails run={ortRun} />
59+
</div>
60+
<div id='evaluator' className='scroll-mt-16'>
61+
<EvaluatorJobDetails run={ortRun} />
62+
</div>
63+
<div id='reporter' className='scroll-mt-16'>
64+
<ReporterJobDetails run={ortRun} />
65+
</div>
5666
<NotifierJobDetails run={ortRun} />
5767
</div>
5868
);

‎ui/src/routes/_layout/organizations/$orgId/products/$productId/repositories/$repoId/index.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,14 @@ const columns: ColumnDef<GetOrtRunsResponse['data'][number]>[] = [
112112
accessorKey: 'jobStatuses',
113113
header: () => <div>Job Status</div>,
114114
cell: ({ row }) => (
115-
<OrtRunJobStatus jobs={row.original.jobs} pollInterval={pollInterval} />
115+
<OrtRunJobStatus
116+
jobs={row.original.jobs}
117+
pollInterval={pollInterval}
118+
orgId={row.original.organizationId.toString()}
119+
productId={row.original.productId.toString()}
120+
repoId={row.original.repositoryId.toString()}
121+
runIndex={row.original.index.toString()}
122+
/>
116123
),
117124
},
118125
{

0 commit comments

Comments
 (0)