Skip to content

Commit 9a1557c

Browse files
olgennolgenn
authored
The logs section is too short in the UI (#2989)
* The logs section is too short in the UI #2961 * The logs section is too short in the UI #2961
1 parent 3e54439 commit 9a1557c

File tree

10 files changed

+89
-35
lines changed

10 files changed

+89
-35
lines changed

‎frontend/src/pages/Runs/Details/Jobs/Details/JobDetails/index.tsx‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { Box, ColumnLayout, Container, Header, Loader, StatusIndicator } from 'c
77
import { getStatusIconType } from 'libs/run';
88
import { useGetRunQuery } from 'services/run';
99

10-
import { Logs } from '../../../Logs';
1110
import {
1211
getJobError,
1312
getJobListItemBackend,
@@ -24,12 +23,6 @@ import {
2423

2524
import styles from './styles.module.scss';
2625

27-
const getJobSubmissionId = (job?: IJob): string | undefined => {
28-
if (!job) return;
29-
30-
return job.job_submissions[job.job_submissions.length - 1]?.id;
31-
};
32-
3326
export const JobDetails = () => {
3427
const { t } = useTranslation();
3528
const params = useParams();
@@ -111,13 +104,6 @@ export const JobDetails = () => {
111104
</div>
112105
</ColumnLayout>
113106
</Container>
114-
115-
<Logs
116-
projectName={paramProjectName}
117-
runName={runData?.run_spec?.run_name ?? ''}
118-
jobSubmissionId={getJobSubmissionId(jobData)}
119-
className={styles.logs}
120-
/>
121107
</div>
122108
);
123109
};

‎frontend/src/pages/Runs/Details/Jobs/Details/index.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import styles from './styles.module.scss';
1414
enum CodeTab {
1515
Details = 'details',
1616
Metrics = 'metrics',
17+
Logs = 'logs',
1718
}
1819

1920
export const JobDetailsPage: React.FC = () => {
@@ -78,6 +79,15 @@ export const JobDetailsPage: React.FC = () => {
7879
paramJobName,
7980
),
8081
},
82+
{
83+
label: 'Logs',
84+
id: CodeTab.Logs,
85+
href: ROUTES.PROJECT.DETAILS.RUNS.DETAILS.JOBS.DETAILS.LOGS.FORMAT(
86+
paramProjectName,
87+
paramRunId,
88+
paramJobName,
89+
),
90+
},
8191
{
8292
label: 'Metrics',
8393
id: CodeTab.Metrics,

‎frontend/src/pages/Runs/Details/Logs/index.tsx‎

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
22
import { useTranslation } from 'react-i18next';
3+
import { useParams } from 'react-router-dom';
34
import classNames from 'classnames';
45

56
import { Box, Button, Code, Container, Header, ListEmptyMessage, Loader, TextContent } from 'components';
67

78
import { useLocalStorageState } from 'hooks/useLocalStorageState';
89
import { useLazyGetProjectLogsQuery } from 'services/project';
10+
import { useGetRunQuery } from 'services/run';
911

1012
import { LogRow } from './components/LogRow';
11-
import { decodeLogs } from './helpers';
13+
import { decodeLogs, getJobSubmissionId } from './helpers';
1214

1315
import { IProps } from './types';
1416

@@ -222,3 +224,43 @@ export const Logs: React.FC<IProps> = ({ className, projectName, runName, jobSub
222224
</div>
223225
);
224226
};
227+
228+
const getJobSubmissionIdFromJobData = (job?: IJob): string | undefined => {
229+
if (!job) return;
230+
231+
return job.job_submissions[job.job_submissions.length - 1]?.id;
232+
};
233+
234+
export const JobLogs = () => {
235+
const params = useParams();
236+
const paramProjectName = params.projectName ?? '';
237+
const paramRunId = params.runId ?? '';
238+
const paramJobName = params.jobName ?? '';
239+
240+
const { data: runData, isLoading: isLoadingRun } = useGetRunQuery({
241+
project_name: paramProjectName,
242+
id: paramRunId,
243+
});
244+
245+
const jobData = useMemo<IJob | null>(() => {
246+
if (!runData) return null;
247+
248+
return runData.jobs.find((job) => job.job_spec.job_name === paramJobName) ?? null;
249+
}, [runData]);
250+
251+
if (isLoadingRun)
252+
return (
253+
<Container>
254+
<Loader />
255+
</Container>
256+
);
257+
258+
return (
259+
<Logs
260+
projectName={paramProjectName}
261+
runName={runData?.run_spec?.run_name ?? ''}
262+
jobSubmissionId={jobData ? getJobSubmissionIdFromJobData(jobData) : getJobSubmissionId(runData)}
263+
className={styles.logsPage}
264+
/>
265+
);
266+
};

‎frontend/src/pages/Runs/Details/Logs/styles.module.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,12 @@
3535
transform: translateY(-24px);
3636
}
3737

38+
.logsPage {
39+
flex-grow: 1;
40+
min-height: 0;
41+
max-height: calc(100vh - 258px);
42+
}
43+
3844
.logs {
3945
display: flex;
4046
flex-direction: column;

‎frontend/src/pages/Runs/Details/RunDetails/index.tsx‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,6 @@ import {
2323
getRunListItemSpot,
2424
} from '../../List/helpers';
2525
import { JobList } from '../Jobs/List';
26-
import { Logs } from '../Logs';
27-
import { getJobSubmissionId } from '../Logs/helpers';
28-
29-
import styles from './styles.module.scss';
3026

3127
export const RunDetails = () => {
3228
const { t } = useTranslation();
@@ -172,15 +168,6 @@ export const RunDetails = () => {
172168
)}
173169
</Container>
174170

175-
{runData.jobs.length === 1 && (
176-
<Logs
177-
projectName={paramProjectName}
178-
runName={runData?.run_spec?.run_name ?? ''}
179-
jobSubmissionId={getJobSubmissionId(runData)}
180-
className={styles.logs}
181-
/>
182-
)}
183-
184171
{runData.jobs.length > 1 && (
185172
<JobList
186173
projectName={paramProjectName}

‎frontend/src/pages/Runs/Details/RunDetails/styles.module.scss‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎frontend/src/pages/Runs/Details/index.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import styles from './styles.module.scss';
2121
enum CodeTab {
2222
Details = 'details',
2323
Metrics = 'metrics',
24+
Logs = 'logs',
2425
}
2526

2627
export const RunDetailsPage: React.FC = () => {
@@ -175,6 +176,11 @@ export const RunDetailsPage: React.FC = () => {
175176
id: CodeTab.Details,
176177
href: ROUTES.PROJECT.DETAILS.RUNS.DETAILS.FORMAT(paramProjectName, paramRunId),
177178
},
179+
{
180+
label: 'Logs',
181+
id: CodeTab.Logs,
182+
href: ROUTES.PROJECT.DETAILS.RUNS.DETAILS.LOGS.FORMAT(paramProjectName, paramRunId),
183+
},
178184
{
179185
label: 'Metrics',
180186
id: CodeTab.Metrics,

‎frontend/src/pages/Runs/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@ export { RunList } from './List';
22
export { RunDetailsPage } from './Details';
33
export { RunDetails } from './Details/RunDetails';
44
export { JobMetrics } from './Details/Jobs/Metrics';
5-
export { Logs } from './Details/Logs';
5+
export { JobLogs } from './Details/Logs';
66
export { Artifacts } from './Details/Artifacts';

‎frontend/src/router.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { ModelDetails } from 'pages/Models/Details';
1717
import { ProjectAdd, ProjectDetails, ProjectList, ProjectSettings } from 'pages/Project';
1818
import { BackendAdd, BackendEdit } from 'pages/Project/Backends';
1919
import { AddGateway, EditGateway } from 'pages/Project/Gateways';
20-
import { JobMetrics, RunDetails, RunDetailsPage, RunList } from 'pages/Runs';
20+
import { JobLogs, JobMetrics, RunDetails, RunDetailsPage, RunList } from 'pages/Runs';
2121
import { JobDetailsPage } from 'pages/Runs/Details/Jobs/Details';
2222
import { CreditsHistoryAdd, UserAdd, UserDetails, UserEdit, UserList } from 'pages/User';
2323
import { UserBilling, UserProjects, UserSettings } from 'pages/User/Details';
@@ -101,6 +101,10 @@ export const router = createBrowserRouter([
101101
path: ROUTES.PROJECT.DETAILS.RUNS.DETAILS.METRICS.TEMPLATE,
102102
element: <JobMetrics />,
103103
},
104+
{
105+
path: ROUTES.PROJECT.DETAILS.RUNS.DETAILS.LOGS.TEMPLATE,
106+
element: <JobLogs />,
107+
},
104108
],
105109
},
106110
{
@@ -115,6 +119,10 @@ export const router = createBrowserRouter([
115119
path: ROUTES.PROJECT.DETAILS.RUNS.DETAILS.JOBS.DETAILS.METRICS.TEMPLATE,
116120
element: <JobMetrics />,
117121
},
122+
{
123+
path: ROUTES.PROJECT.DETAILS.RUNS.DETAILS.JOBS.DETAILS.LOGS.TEMPLATE,
124+
element: <JobLogs />,
125+
},
118126
],
119127
},
120128
{

‎frontend/src/routes.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,11 @@ export const ROUTES = {
3333
FORMAT: (projectName: string, runId: string) =>
3434
buildRoute(ROUTES.PROJECT.DETAILS.RUNS.DETAILS.METRICS.TEMPLATE, { projectName, runId }),
3535
},
36+
LOGS: {
37+
TEMPLATE: `/projects/:projectName/runs/:runId/logs`,
38+
FORMAT: (projectName: string, runId: string) =>
39+
buildRoute(ROUTES.PROJECT.DETAILS.RUNS.DETAILS.LOGS.TEMPLATE, { projectName, runId }),
40+
},
3641
JOBS: {
3742
DETAILS: {
3843
TEMPLATE: `/projects/:projectName/runs/:runId/jobs/:jobName`,
@@ -51,6 +56,15 @@ export const ROUTES = {
5156
jobName,
5257
}),
5358
},
59+
LOGS: {
60+
TEMPLATE: `/projects/:projectName/runs/:runId/jobs/:jobName/logs`,
61+
FORMAT: (projectName: string, runId: string, jobName: string) =>
62+
buildRoute(ROUTES.PROJECT.DETAILS.RUNS.DETAILS.JOBS.DETAILS.LOGS.TEMPLATE, {
63+
projectName,
64+
runId,
65+
jobName,
66+
}),
67+
},
5468
},
5569
},
5670
},

0 commit comments

Comments
 (0)