Skip to content

Commit ce99f47

Browse files
danialraza03danialraza03
authored
Merge pull request #115 from zenml-io/table-expand/collapse-flow-with-sorting
Table expand/collapse flow with sorting
2 parents 38c4253 + 58df2d9 commit ce99f47

File tree

25 files changed

+435
-186
lines changed

25 files changed

+435
-186
lines changed

‎src/ui/layouts/pipelines/PipelineDetail/Runs/index.tsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,13 @@ import { translate } from '../translate';
33
import { RunsTable } from '../../RunsTable';
44
import { useService } from './useService';
55

6-
export const Runs: React.FC<{ pipelineId: TId; filter: any }> = ({
7-
pipelineId,
8-
filter,
9-
}) => {
6+
export const Runs: React.FC<{
7+
fromAllruns?: boolean;
8+
pipelineId: TId;
9+
filter: any;
10+
runId?: any;
11+
pagination?: boolean;
12+
}> = ({ pipelineId, filter, pagination, runId, fromAllruns }) => {
1013
const [sortBy, setSortBy] = useState('created');
1114
function getSorted(activeSorting: any, activeSortingDirection: any) {
1215
setSortBy(activeSortingDirection?.toLowerCase() + ':' + activeSorting);
@@ -20,11 +23,15 @@ export const Runs: React.FC<{ pipelineId: TId; filter: any }> = ({
2023

2124
return (
2225
<RunsTable
26+
pipelineId={pipelineId}
27+
id={runId}
28+
pagination={pagination}
2329
getSorted={getSorted}
30+
fromAllruns={fromAllruns}
2431
paginated={runsPaginated}
25-
fetching={fetching}
32+
fetching={runId === undefined && fetching}
2633
emptyStateText={translate('emptyState.text')}
27-
runIds={runIds}
34+
runIds={runId === undefined ? runIds : [runId]}
2835
filter={filter}
2936
/>
3037
);

‎src/ui/layouts/pipelines/PipelineDetail/index.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from 'react';
22

3-
import { Box, Paragraph } from '../../../components';
4-
import { formatDateToDisplayOnTable } from '../../../../utils';
3+
// import { Box, Paragraph } from '../../../components';
4+
// import { formatDateToDisplayOnTable } from '../../../../utils';
55
import { routePaths } from '../../../../routes/routePaths';
66
import { translate } from './translate';
77
import { Configuration } from './Configuration';
@@ -14,6 +14,7 @@ import FilterComponent, {
1414
import { useLocationPath, useSelector } from '../../../hooks';
1515
import { projectSelectors } from '../../../../redux/selectors';
1616
import { DEFAULT_PROJECT_NAME } from '../../../../constants';
17+
import { List } from '../Pipelines/List';
1718

1819
interface Props {
1920
pipelineId: TId;
@@ -97,15 +98,15 @@ export const PipelineDetail: React.FC = () => {
9798
const tabPages = getTabPages(pipeline.id, selectedProject);
9899
const breadcrumbs = getBreadcrumbs(pipeline.id, selectedProject);
99100

100-
const boxStyle = {
101-
backgroundColor: '#E9EAEC',
102-
padding: '10px 0',
103-
borderRadius: '8px',
104-
marginTop: '20px',
105-
display: 'flex',
106-
justifyContent: 'space-around',
107-
};
108-
const headStyle = { color: '#828282' };
101+
// const boxStyle = {
102+
// backgroundColor: '#E9EAEC',
103+
// padding: '10px 0',
104+
// borderRadius: '8px',
105+
// marginTop: '20px',
106+
// display: 'flex',
107+
// justifyContent: 'space-around',
108+
// };
109+
// const headStyle = { color: '#828282' };
109110

110111
return (
111112
<BasePage
@@ -114,7 +115,8 @@ export const PipelineDetail: React.FC = () => {
114115
tabBasePath={routePaths.pipeline.base(pipeline.id)}
115116
breadcrumbs={breadcrumbs}
116117
>
117-
<Box style={boxStyle}>
118+
<List filter={[]} pagination={false} isExpended id={pipeline.id}></List>
119+
{/* <Box style={boxStyle}>
118120
<Box>
119121
<Paragraph style={headStyle}>ID</Paragraph>
120122
<Paragraph style={{ color: '#515151', marginTop: '10px' }}>
@@ -140,7 +142,7 @@ export const PipelineDetail: React.FC = () => {
140142
{formatDateToDisplayOnTable(pipeline.created)}
141143
</Paragraph>
142144
</Box>
143-
</Box>
145+
</Box> */}
144146
</BasePage>
145147
);
146148
};

‎src/ui/layouts/pipelines/Pipelines/AllRuns/index.tsx‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,15 @@ export const translate = getTranslateByScope('ui.layouts.AllRuns');
1010

1111
interface Props {
1212
filter: any;
13+
runId?: any;
14+
pagination?: boolean;
1315
}
1416

15-
export const AllRuns: React.FC<Props> = ({ filter }: Props) => {
17+
export const AllRuns: React.FC<Props> = ({
18+
filter,
19+
pagination,
20+
runId,
21+
}: Props) => {
1622
const [sortBy, setSortBy] = useState('created');
1723
function getSorted(activeSorting: any, activeSortingDirection: any) {
1824
setSortBy(activeSortingDirection?.toLowerCase() + ':' + activeSorting);
@@ -22,14 +28,18 @@ export const AllRuns: React.FC<Props> = ({ filter }: Props) => {
2228
const { fetching, runIds, runsPaginated } = useService({ filter, sortBy });
2329

2430
return (
25-
<RunsTable
26-
getSorted={getSorted}
27-
paginated={runsPaginated}
28-
fetching={fetching}
29-
emptyStateText={translate('emptyState.text')}
30-
runIds={runIds}
31-
fromAllruns={true}
32-
filter={filter}
33-
/>
31+
<>
32+
<RunsTable
33+
id={runId}
34+
pagination={pagination}
35+
getSorted={getSorted}
36+
paginated={runsPaginated}
37+
fetching={fetching}
38+
emptyStateText={translate('emptyState.text')}
39+
runIds={runIds}
40+
fromAllruns={true}
41+
filter={filter}
42+
/>
43+
</>
3444
);
3545
};

‎src/ui/layouts/pipelines/Pipelines/List/ForSorting/SortingHeader.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,22 @@ import { Sorting, SortingDirection } from './types';
66
import styles from './index.module.scss';
77

88
export const SortingHeader: React.FC<{
9+
onlyOneRow?: boolean;
910
sortMethod: void;
1011
activeSorting: Sorting | null;
1112
activeSortingDirection: SortingDirection | null;
1213
sorting: Sorting;
1314
}> = ({
15+
onlyOneRow,
1416
children,
1517
sortMethod,
1618
activeSorting,
1719
activeSortingDirection,
1820
sorting,
1921
}) => {
20-
return (
22+
return onlyOneRow ? (
23+
<>{children}</>
24+
) : (
2125
<LinkBox className={styles.sortingBox} onClick={sortMethod}>
2226
<FlexBox alignItems="center">
2327
{children}

‎src/ui/layouts/pipelines/Pipelines/List/getHeaderCols.tsx‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
import React from 'react';
22
import ReactTooltip from 'react-tooltip';
33
import { iconColors, iconSizes, ID_MAX_LENGTH } from '../../../../../constants';
4-
import {
5-
truncate,
6-
formatDateToDisplayOnTable,
7-
} from '../../../../../utils';
4+
import { truncate, formatDateToDisplayOnTable } from '../../../../../utils';
85
import {
96
Box,
107
FlexBox,
@@ -20,6 +17,7 @@ import { useService } from './ForSorting/useServiceForSorting';
2017
import _ from 'lodash';
2118

2219
export const GetHeaderCols = ({
20+
expendedRow,
2321
openPipelineIds,
2422
setOpenPipelineIds,
2523
filteredPipelines,
@@ -29,6 +27,7 @@ export const GetHeaderCols = ({
2927
setActiveSortingDirection,
3028
setActiveSorting,
3129
}: {
30+
expendedRow?: any;
3231
openPipelineIds: TId[];
3332
setOpenPipelineIds: (ids: TId[]) => void;
3433
filteredPipelines: TPipeline[];
@@ -70,9 +69,15 @@ export const GetHeaderCols = ({
7069
style={{ paddingTop: '5px', paddingBottom: '5px' }}
7170
>
7271
{openPipelineIds.indexOf(pipeline.id) === -1 ? (
73-
<icons.chevronDownLight color={iconColors.grey} size={iconSizes.sm} />
72+
<icons.chevronDownLight
73+
color={iconColors.grey}
74+
size={iconSizes.sm}
75+
/>
7476
) : (
75-
<icons.chevronUpLight color={iconColors.grey} size={iconSizes.sm} />
77+
<icons.chevronUpLight
78+
color={iconColors.grey}
79+
size={iconSizes.sm}
80+
/>
7681
)}
7782
</FlexBox>
7883
</LinkBox>
@@ -81,6 +86,9 @@ export const GetHeaderCols = ({
8186
{
8287
render: () => (
8388
<SortingHeader
89+
onlyOneRow={
90+
filteredPipelines.length === 1 || expendedRow?.length === 1
91+
}
8492
sorting="id"
8593
sortMethod={sortMethod('id', {
8694
asc: (filteredPipelines: TPipeline[]) =>
@@ -116,6 +124,9 @@ export const GetHeaderCols = ({
116124
{
117125
render: () => (
118126
<SortingHeader
127+
onlyOneRow={
128+
filteredPipelines.length === 1 || expendedRow?.length === 1
129+
}
119130
sorting="name"
120131
sortMethod={sortMethod('name', {
121132
asc: (filteredPipelines: TPipeline[]) =>
@@ -159,6 +170,9 @@ export const GetHeaderCols = ({
159170
{
160171
render: () => (
161172
<SortingHeader
173+
onlyOneRow={
174+
filteredPipelines.length === 1 || expendedRow?.length === 1
175+
}
162176
sorting="user_id"
163177
sortMethod={sortMethod('user_id', {
164178
asc: (filteredPipelines: TPipeline[]) =>
@@ -217,6 +231,9 @@ export const GetHeaderCols = ({
217231
{
218232
render: () => (
219233
<SortingHeader
234+
onlyOneRow={
235+
filteredPipelines.length === 1 || expendedRow?.length === 1
236+
}
220237
sorting="created"
221238
sortMethod={sortMethod('created', {
222239
asc: (filteredPipelines: TPipeline[]) =>

‎src/ui/layouts/pipelines/Pipelines/List/index.tsx‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,16 @@ import {
1515

1616
interface Props {
1717
filter: any;
18+
pagination?: boolean;
19+
id?: string;
20+
isExpended?: boolean;
1821
}
19-
export const List: React.FC<Props> = ({ filter }: Props) => {
22+
export const List: React.FC<Props> = ({
23+
filter,
24+
pagination,
25+
isExpended,
26+
id,
27+
}: Props) => {
2028
const history = useHistory();
2129
const selectedProject = useSelector(projectSelectors.selectedProject);
2230
const pipelinesPaginated = useSelector(
@@ -34,8 +42,10 @@ export const List: React.FC<Props> = ({ filter }: Props) => {
3442
setActiveSortingDirection,
3543
setSelectedRunIds,
3644
} = useService(filter);
45+
const expendedRow = filteredPipelines.filter((item) => item.id === id);
3746

3847
const headerCols = GetHeaderCols({
48+
expendedRow,
3949
openPipelineIds,
4050
setOpenPipelineIds,
4151
filteredPipelines,
@@ -48,10 +58,13 @@ export const List: React.FC<Props> = ({ filter }: Props) => {
4858

4959
const openDetailPage = (pipeline: TPipeline) => {
5060
setSelectedRunIds([]);
51-
52-
history.push(
53-
routePaths.pipeline.configuration(pipeline.id, selectedProject),
54-
);
61+
if (id) {
62+
history.push(routePaths.pipelines.list(selectedProject));
63+
} else {
64+
history.push(
65+
routePaths.pipeline.configuration(pipeline.id, selectedProject),
66+
);
67+
}
5568
};
5669

5770
return (
@@ -74,12 +87,13 @@ export const List: React.FC<Props> = ({ filter }: Props) => {
7487
// ? activeSorting
7588
// : 'created'
7689
// }
90+
pagination={pagination}
7791
paginated={pipelinesPaginated}
78-
loading={fetching}
92+
loading={expendedRow.length > 0 ? false : fetching}
7993
showHeader={true}
8094
filters={filter}
8195
headerCols={headerCols}
82-
tableRows={filteredPipelines}
96+
tableRows={expendedRow.length > 0 ? expendedRow : filteredPipelines}
8397
emptyState={{ text: translate('emptyState.text') }}
8498
trOnClick={openDetailPage}
8599
/>

‎src/ui/layouts/pipelines/RunDetail/index.tsx‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@ import { useService } from './useService';
88
import { Configuration } from '../RunDetail/Configuration';
99
import { DAG } from '../../../components/dag';
1010

11-
import { Box, Paragraph } from '../../../components';
11+
// import { Box, Paragraph } from '../../../components';
1212

13-
import { RunStatus } from './components';
13+
// import { RunStatus } from './components';
1414

15-
import { formatDateToDisplayOnTable } from '../../../../utils';
16-
import { useHistory, useSelector } from '../../../hooks';
15+
// import { formatDateToDisplayOnTable } from '../../../../utils';
16+
import { useSelector } from '../../../hooks';
1717
import { projectSelectors } from '../../../../redux/selectors';
18+
import { Runs } from '../PipelineDetail/Runs';
1819

1920
const getTabPages = ({
2021
selectedProject,
@@ -85,7 +86,7 @@ export interface RunDetailRouteParams {
8586
}
8687

8788
export const RunDetail: React.FC = () => {
88-
const { runId, pipelineId, run, fetching } = useService();
89+
const { runId, pipelineId, fetching } = useService();
8990
const selectedProject = useSelector(projectSelectors.selectedProject);
9091
const tabPages = getTabPages({
9192
selectedProject,
@@ -99,23 +100,30 @@ export const RunDetail: React.FC = () => {
99100
selectedProject,
100101
});
101102

102-
const boxStyle = {
103-
backgroundColor: '#E9EAEC',
104-
padding: '10px 0',
105-
borderRadius: '8px',
106-
marginTop: '20px',
107-
display: 'flex',
108-
justifyContent: 'space-around',
109-
};
110-
const headStyle = { color: '#828282' };
111-
const history = useHistory();
103+
// const boxStyle = {
104+
// backgroundColor: '#E9EAEC',
105+
// padding: '10px 0',
106+
// borderRadius: '8px',
107+
// marginTop: '20px',
108+
// display: 'flex',
109+
// justifyContent: 'space-around',
110+
// };
111+
// const headStyle = { color: '#828282' };
112+
// const history = useHistory();
112113
return (
113114
<BasePage
114115
tabPages={tabPages}
115116
tabBasePath={routePaths.run.pipeline.base(runId, pipelineId)}
116117
breadcrumbs={breadcrumbs}
117118
>
118-
<Box style={boxStyle}>
119+
<Runs
120+
filter={[]}
121+
pagination={false}
122+
runId={runId}
123+
// isExpended
124+
pipelineId={pipelineId}
125+
></Runs>
126+
{/* <Box style={boxStyle}>
119127
<Box>
120128
<Paragraph style={headStyle}>RUN ID</Paragraph>
121129
<Paragraph style={{ color: '#515151', marginTop: '10px' }}>
@@ -199,7 +207,7 @@ export const RunDetail: React.FC = () => {
199207
{formatDateToDisplayOnTable(run.created)}
200208
</Paragraph>
201209
</Box>
202-
</Box>
210+
</Box> */}
203211
</BasePage>
204212
);
205213
};

0 commit comments

Comments
 (0)