Skip to content

Commit 5e83abe

Browse files
committed
feat(ui): Move the job configurations to their own page
The page is accessible from the Technical section of the sidebar. Signed-off-by: Jyrki Keisala <[email protected]>
1 parent 6a5ee61 commit 5e83abe

File tree

10 files changed

+96
-101
lines changed

10 files changed

+96
-101
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,10 @@ const Layout = () => {
6767
title: 'Logs',
6868
to: '/organizations/$orgId/products/$productId/repositories/$repoId/runs/$runIndex/logs',
6969
},
70+
{
71+
title: 'Job Configurations',
72+
to: '/organizations/$orgId/products/$productId/repositories/$repoId/runs/$runIndex/config',
73+
},
7074
],
7175
},
7276
];

ui/src/routes/_layout/organizations/$orgId/products/$productId/repositories/$repoId/_layout/runs/$runIndex/-components/sidebar.tsx

Lines changed: 0 additions & 28 deletions
This file was deleted.
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ export const AdvisorJobDetails = ({ run }: AdvisorJobDetailsProps) => {
3535
return (
3636
<Card>
3737
<CardHeader>
38-
<CardTitle>
38+
<CardTitle className='flex gap-2'>
39+
Advisor
3940
<Badge className={`border ${getStatusBackgroundColor(job?.status)}`}>
4041
{job?.status || 'NOT RUN'}
4142
</Badge>
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ export const AnalyzerJobDetails = ({ run }: AnalyzerJobDetailsProps) => {
3535
return (
3636
<Card>
3737
<CardHeader>
38-
<CardTitle>
38+
<CardTitle className='flex gap-2'>
39+
Analyzer
3940
<Badge className={`border ${getStatusBackgroundColor(job?.status)}`}>
4041
{job?.status || 'NOT RUN'}
4142
</Badge>
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ export const EvaluatorJobDetails = ({ run }: EvaluatorJobDetailsProps) => {
3535
return (
3636
<Card>
3737
<CardHeader>
38-
<CardTitle>
38+
<CardTitle className='flex gap-2'>
39+
Evaluator
3940
<Badge className={`border ${getStatusBackgroundColor(job?.status)}`}>
4041
{job?.status || 'NOT RUN'}
4142
</Badge>
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ export const NotifierJobDetails = ({ run }: NotifierJobDetailsProps) => {
3535
return (
3636
<Card>
3737
<CardHeader>
38-
<CardTitle>
38+
<CardTitle className='flex gap-2'>
39+
Notifier
3940
<Badge className={`border ${getStatusBackgroundColor(job?.status)}`}>
4041
{job?.status || 'NOT RUN'}
4142
</Badge>
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ export const ReporterJobDetails = ({ run }: ReporterJobDetailsProps) => {
3535
return (
3636
<Card>
3737
<CardHeader>
38-
<CardTitle>
38+
<CardTitle className='flex gap-2'>
39+
Reporter
3940
<Badge className={`border ${getStatusBackgroundColor(job?.status)}`}>
4041
{run.jobs.reporter?.status || 'NOT RUN'}
4142
</Badge>
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ export const ScannerJobDetails = ({ run }: ScannerJobDetailsProps) => {
3535
return (
3636
<Card>
3737
<CardHeader>
38-
<CardTitle>
38+
<CardTitle className='flex gap-2'>
39+
Scanner
3940
<Badge className={`border ${getStatusBackgroundColor(job?.status)}`}>
4041
{job?.status || 'NOT RUN'}
4142
</Badge>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/*
2+
* Copyright (C) 2024 The ORT Server Authors (See <https://github.com/eclipse-apoapsis/ort-server/blob/main/NOTICE>)
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*
16+
* SPDX-License-Identifier: Apache-2.0
17+
* License-Filename: LICENSE
18+
*/
19+
20+
import { useSuspenseQuery } from '@tanstack/react-query';
21+
import { createFileRoute } from '@tanstack/react-router';
22+
23+
import { useRepositoriesServiceGetOrtRunByIndexKey } from '@/api/queries';
24+
import { RepositoriesService } from '@/api/requests';
25+
import { LoadingIndicator } from '@/components/loading-indicator';
26+
import { AdvisorJobDetails } from './-components/advisor-job-details';
27+
import { AnalyzerJobDetails } from './-components/analyzer-job-details';
28+
import { EvaluatorJobDetails } from './-components/evaluator-job-details';
29+
import { NotifierJobDetails } from './-components/notifier-job-details';
30+
import { ReporterJobDetails } from './-components/reporter-job-details';
31+
import { ScannerJobDetails } from './-components/scanner-job-details';
32+
33+
const ConfigComponent = () => {
34+
const params = Route.useParams();
35+
36+
const { data: ortRun } = useSuspenseQuery({
37+
queryKey: [
38+
useRepositoriesServiceGetOrtRunByIndexKey,
39+
params.repoId,
40+
params.runIndex,
41+
],
42+
queryFn: async () =>
43+
await RepositoriesService.getOrtRunByIndex({
44+
repositoryId: Number.parseInt(params.repoId),
45+
ortRunIndex: Number.parseInt(params.runIndex),
46+
}),
47+
});
48+
49+
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} />
56+
<NotifierJobDetails run={ortRun} />
57+
</div>
58+
);
59+
};
60+
61+
export const Route = createFileRoute(
62+
'/_layout/organizations/$orgId/products/$productId/repositories/$repoId/_layout/runs/$runIndex/config/'
63+
)({
64+
loader: async ({ context, params }) => {
65+
await context.queryClient.ensureQueryData({
66+
queryKey: [
67+
useRepositoriesServiceGetOrtRunByIndexKey,
68+
params.repoId,
69+
params.runIndex,
70+
],
71+
queryFn: () =>
72+
RepositoriesService.getOrtRunByIndex({
73+
repositoryId: Number.parseInt(params.repoId),
74+
ortRunIndex: Number.parseInt(params.runIndex),
75+
}),
76+
});
77+
},
78+
component: ConfigComponent,
79+
pendingComponent: LoadingIndicator,
80+
});

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

Lines changed: 0 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,8 @@ import { Badge } from '@/components/ui/badge';
2828
import { Button } from '@/components/ui/button';
2929
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
3030
import { Label } from '@/components/ui/label';
31-
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
3231
import { calculateDuration } from '@/helpers/get-run-duration';
3332
import { getStatusBackgroundColor } from '@/helpers/get-status-colors';
34-
import { AdvisorJobDetails } from './-components/advisor-job-details';
35-
import { AnalyzerJobDetails } from './-components/analyzer-job-details';
36-
import { EvaluatorJobDetails } from './-components/evaluator-job-details';
37-
import { NotifierJobDetails } from './-components/notifier-job-details';
38-
import { ReporterJobDetails } from './-components/reporter-job-details';
39-
import { ScannerJobDetails } from './-components/scanner-job-details';
4033

4134
const RunComponent = () => {
4235
const params = Route.useParams();
@@ -214,66 +207,6 @@ const RunComponent = () => {
214207
</CardHeader>
215208
</Card>
216209
</div>
217-
<div className='flex w-4/12'>
218-
<Tabs defaultValue='analyzer'>
219-
<TabsList className='flex-wrap justify-start bg-white'>
220-
<TabsTrigger
221-
value='analyzer'
222-
className={`border font-semibold text-white ${getStatusBackgroundColor(ortRun.jobs.analyzer?.status)}`}
223-
>
224-
Analyzer
225-
</TabsTrigger>
226-
<TabsTrigger
227-
value='advisor'
228-
className={`border font-semibold text-white ${getStatusBackgroundColor(ortRun.jobs.advisor?.status)}`}
229-
>
230-
Advisor
231-
</TabsTrigger>
232-
<TabsTrigger
233-
value='scanner'
234-
className={`border font-semibold text-white ${getStatusBackgroundColor(ortRun.jobs.scanner?.status)}`}
235-
>
236-
Scanner
237-
</TabsTrigger>
238-
<TabsTrigger
239-
value='evaluator'
240-
className={`border font-semibold text-white ${getStatusBackgroundColor(ortRun.jobs.evaluator?.status)}`}
241-
>
242-
Evaluator
243-
</TabsTrigger>
244-
<TabsTrigger
245-
value='reporter'
246-
className={`border font-semibold text-white ${getStatusBackgroundColor(ortRun.jobs.reporter?.status)}`}
247-
>
248-
Reporter
249-
</TabsTrigger>
250-
<TabsTrigger
251-
value='notifier'
252-
className={`border font-semibold text-white ${getStatusBackgroundColor(ortRun.jobs.notifier?.status)}`}
253-
>
254-
Notifier
255-
</TabsTrigger>
256-
</TabsList>
257-
<TabsContent value='analyzer' className='mt-10'>
258-
<AnalyzerJobDetails run={ortRun} />
259-
</TabsContent>
260-
<TabsContent value='advisor' className='mt-10'>
261-
<AdvisorJobDetails run={ortRun} />
262-
</TabsContent>
263-
<TabsContent value='scanner' className='mt-10'>
264-
<ScannerJobDetails run={ortRun} />
265-
</TabsContent>
266-
<TabsContent value='evaluator' className='mt-10'>
267-
<EvaluatorJobDetails run={ortRun} />
268-
</TabsContent>
269-
<TabsContent value='reporter' className='mt-10'>
270-
<ReporterJobDetails run={ortRun} />
271-
</TabsContent>
272-
<TabsContent value='notifier' className='mt-10'>
273-
<NotifierJobDetails run={ortRun} />
274-
</TabsContent>
275-
</Tabs>
276-
</div>
277210
</>
278211
);
279212
};

0 commit comments

Comments
 (0)