Skip to content

Commit c06b219

Browse files
danialraza03danialraza03
authored
Merge pull request #48 from zenml-io/talha/feedback-fixes
Talha/feedback fixes
2 parents 89e1f45 + d2776ec commit c06b219

File tree

34 files changed

+197
-131
lines changed

34 files changed

+197
-131
lines changed

‎src/routes/utils/replaceRouteIfNeeded.ts‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,9 @@ export const replaceRouteIfNeeded = ({
3838
routeFromSearchParam: null | string;
3939
}): void => {
4040
clearTimeout(timeout);
41-
41+
4242
const routeToReplace = () => {
43-
const logRoute = user?.email === '' ? `/user-email` : '/'
43+
const logRoute = user?.emailOptedIn === null ? `/user-email` : '/';
4444
return isAuthenticated ? logRoute : loggedOutRoute;
4545
};
4646
const replaceToLoggedInRoute =
@@ -49,8 +49,15 @@ export const replaceRouteIfNeeded = ({
4949
const replaceToLoggedOutRoute =
5050
!isAuthenticated && isAuthenticatedOrMissingRoute(currentLocation);
5151

52-
const shouldReplaceRoute = replaceToLoggedInRoute || replaceToLoggedOutRoute;
53-
52+
const replaceToLoggedInRouteForEmailOptedIn =
53+
isAuthenticated &&
54+
user?.emailOptedIn === null &&
55+
currentLocation?.path !== `/user-email`;
56+
const shouldReplaceRoute =
57+
replaceToLoggedInRoute ||
58+
replaceToLoggedOutRoute ||
59+
replaceToLoggedInRouteForEmailOptedIn;
60+
// debugger;
5461
if (shouldReplaceRoute) {
5562
timeout = setTimeout(() => {
5663
let route = routeToReplace();
@@ -61,7 +68,7 @@ export const replaceRouteIfNeeded = ({
6168
} else if (replaceToLoggedInRoute && routeFromSearchParam) {
6269
route = routeFromSearchParam;
6370
}
64-
71+
debugger;
6572
replaceRoute(route);
6673
}, 0);
6774
}

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

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

3-
import { Box, Paragraph, icons } from '../../../components';
4-
import { iconColors, iconSizes } from '../../../../constants';
5-
import { formatDateToDisplay } from '../../../../utils';
3+
import { Box, Paragraph } from '../../../components';
4+
// import { iconColors, iconSizes } from '../../../../constants';
5+
import { formatDateForOverviewBar } from '../../../../utils';
66
import { routePaths } from '../../../../routes/routePaths';
77
import { translate } from './translate';
88
import { Configuration } from './Configuration';
@@ -117,26 +117,7 @@ export const PipelineDetail: React.FC = () => {
117117
{pipeline.name}
118118
</Paragraph>
119119
</Box>
120-
<Box>
121-
<Paragraph style={headStyle}>SHARED</Paragraph>
122-
<Paragraph
123-
style={{
124-
marginTop: '10px',
125-
justifyContent: 'center',
126-
borderRadius: '50%',
127-
height: '25px',
128-
width: '25px',
129-
paddingTop: '3px',
130-
textAlign: 'center',
131-
}}
132-
>
133-
{pipeline.isShared ? (
134-
<icons.multiUser color={iconColors.white} size={iconSizes.sm} />
135-
) : (
136-
<icons.singleUser color={iconColors.white} size={iconSizes.sm} />
137-
)}
138-
</Paragraph>
139-
</Box>
120+
140121
<Box>
141122
<Paragraph style={headStyle}>OWNER</Paragraph>
142123
<Paragraph style={{ color: '#515151', marginTop: '10px' }}>
@@ -146,7 +127,7 @@ export const PipelineDetail: React.FC = () => {
146127
<Box>
147128
<Paragraph style={headStyle}>CREATED AT</Paragraph>
148129
<Paragraph style={{ color: '#515151', marginTop: '10px' }}>
149-
{formatDateToDisplay(pipeline.created)}
130+
{formatDateForOverviewBar(pipeline.created)}
150131
</Paragraph>
151132
</Box>
152133
</Box>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
formatDateToDisplay,
66
truncate,
77
getInitialsFromEmail,
8+
formatDateToSort,
89
} from '../../../../../utils';
910
import {
1011
Box,
@@ -179,7 +180,7 @@ export const getHeaderCols = ({
179180
width: '8%',
180181
renderRow: (pipeline: TPipeline) => (
181182
<FlexBox alignItems="center">
182-
<div data-tip data-for={formatDateToDisplay(pipeline.created)}>
183+
<div data-tip data-for={formatDateToSort(pipeline.created)}>
183184
<FlexBox alignItems="center">
184185
<Box paddingRight="sm">
185186
<icons.calendar color={iconColors.grey} size={iconSizes.sm} />
@@ -190,7 +191,7 @@ export const getHeaderCols = ({
190191
</FlexBox>
191192
</div>
192193
<ReactTooltip
193-
id={formatDateToDisplay(pipeline.created)}
194+
id={formatDateToSort(pipeline.created)}
194195
place="top"
195196
effect="solid"
196197
// backgroundColor={getBGColorFromInvoiceStatus(invoice.status)}

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

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ import { Box, Paragraph } from '../../../components';
1414
import { RunStatus } from './components';
1515

1616
// import { formatMoney } from '../../../../utils/money';
17-
import { formatDateToDisplay } from '../../../../utils';
17+
import { formatDateForOverviewBar } from '../../../../utils';
18+
import { useHistory } from '../../../hooks';
1819

1920
const getTabPages = ({
2021
pipelineId,
@@ -106,7 +107,7 @@ export const RunDetail: React.FC = () => {
106107
justifyContent: 'space-around',
107108
};
108109
const headStyle = { color: '#828282' };
109-
// debugger;
110+
const history = useHistory();
110111
return (
111112
<BasePage
112113
tabPages={tabPages}
@@ -142,6 +143,24 @@ export const RunDetail: React.FC = () => {
142143
<RunStatus run={run} />
143144
</Paragraph>
144145
</Box>
146+
<Box>
147+
<Paragraph style={headStyle}>STACK NAME</Paragraph>
148+
<Paragraph
149+
size="small"
150+
style={{
151+
color: '#22BBDD',
152+
textDecoration: 'underline',
153+
cursor: 'pointer',
154+
marginTop: '10px',
155+
}}
156+
onClick={(event) => {
157+
event.stopPropagation();
158+
history.push(routePaths.stack.configuration(run.stack?.id));
159+
}}
160+
>
161+
{run.stack?.name}
162+
</Paragraph>
163+
</Box>
145164
<Box>
146165
<Paragraph style={headStyle}>AUTHOR</Paragraph>
147166
<Paragraph style={{ color: '#515151', marginTop: '10px' }}>
@@ -151,7 +170,7 @@ export const RunDetail: React.FC = () => {
151170
<Box>
152171
<Paragraph style={headStyle}>CREATED AT</Paragraph>
153172
<Paragraph style={{ color: '#515151', marginTop: '10px' }}>
154-
{formatDateToDisplay(run.created)}
173+
{formatDateForOverviewBar(run.created)}
155174
</Paragraph>
156175
</Box>
157176
</Box>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useService } from './useService';
66
export const RunTime: React.FC<{ run: TRun }> = ({ run }) => {
77
const { endDate } = useService({ run });
88

9-
const dateDifference = formateDateDifference(endDate, run.kubeflowStartTime);
9+
const dateDifference = formateDateDifference(endDate, run.created);
1010

1111
return <Paragraph size="small">{dateDifference}</Paragraph>;
1212
};

‎src/ui/layouts/pipelines/RunsTable/HeaderCols/index.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { iconColors, iconSizes, ID_MAX_LENGTH } from '../../../../../constants';
77
import { translate } from '../translate';
88
import {
99
formatDateToDisplay,
10+
formatDateToSort,
1011
getInitialsFromEmail,
1112
truncate,
1213
} from '../../../../../utils';
@@ -225,7 +226,7 @@ export const useHeaderCols = ({
225226
width: '15%',
226227
renderRow: (run: any) => (
227228
<FlexBox style={{ alignItems: 'center' }}>
228-
<div data-tip data-for={formatDateToDisplay(run.created)}>
229+
<div data-tip data-for={formatDateToSort(run.created)}>
229230
<FlexBox alignItems="center">
230231
<Box paddingRight="sm">
231232
<icons.calendar
@@ -239,7 +240,7 @@ export const useHeaderCols = ({
239240
</FlexBox>
240241
</div>
241242
<ReactTooltip
242-
id={formatDateToDisplay(run.created)}
243+
id={formatDateToSort(run.created)}
243244
place="top"
244245
effect="solid"
245246
// backgroundColor={getBGColorFromInvoiceStatus(invoice.status)}
@@ -552,7 +553,7 @@ export const useHeaderCols = ({
552553
width: '15%',
553554
renderRow: (run: TRun) => (
554555
<FlexBox alignItems="center">
555-
<div data-tip data-for={formatDateToDisplay(run.created)}>
556+
<div data-tip data-for={formatDateToSort(run.created)}>
556557
<FlexBox alignItems="center">
557558
<Box paddingRight="sm">
558559
<icons.calendar
@@ -566,7 +567,7 @@ export const useHeaderCols = ({
566567
</FlexBox>
567568
</div>
568569
<ReactTooltip
569-
id={formatDateToDisplay(run.created)}
570+
id={formatDateToSort(run.created)}
570571
place="top"
571572
effect="solid"
572573
// backgroundColor={getBGColorFromInvoiceStatus(invoice.status)}

‎src/ui/layouts/pipelines/RunsTable/HeaderCols/useService.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,6 @@ export const useService = ({
9393
setActiveSortingDirection('DESC');
9494
}
9595
setActiveSorting(sorting);
96-
debugger;
9796
};
9897

9998
return {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export const RunsTable: React.FC<{
5353
};
5454

5555
const headerCols = useHeaderCols({
56-
runs: pipelineRuns ? pipelineRuns : sortedRuns,
56+
runs: sortedRuns,
5757
setRuns: setSortedRuns,
5858
activeSorting,
5959
setActiveSorting,
@@ -68,7 +68,7 @@ export const RunsTable: React.FC<{
6868
loading={fetching}
6969
showHeader={true}
7070
headerCols={headerCols}
71-
tableRows={pipelineRuns ? pipelineRuns : sortedRuns}
71+
tableRows={sortedRuns}
7272
emptyState={{ text: emptyStateText }}
7373
trOnClick={openDetailPage}
7474
/>

‎src/ui/layouts/pipelines/RunsTable/useService.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,8 @@ export const useService = ({
5353

5454
useEffect(() => {
5555
let orderedRuns = _.sortBy(runs, (run: TRun) =>
56-
new Date(run.kubeflowStartTime).getTime(),
56+
new Date(run.created).getTime(),
5757
).reverse();
58-
5958
const isValidFilter = filter?.map((f) => f.value).join('');
6059
if (isValidFilter) {
6160
orderedRuns = getFilteredDataForTable(orderedRuns, filter);

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

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ import { RunStatus } from './components';
1414
// import { Results } from './Results';
1515
// import { Tensorboard } from './Tensorboard';
1616
// import { formatMoney } from '../../../../utils/money';
17-
import { formatDateToDisplay } from '../../../../utils';
17+
import { formatDateForOverviewBar } from '../../../../utils';
18+
import { useHistory } from '../../../hooks';
1819

1920
const getTabPages = ({ runId }: { runId: TId }): TabPage[] => {
2021
return [
@@ -79,7 +80,7 @@ export const RunDetail: React.FC = () => {
7980
justifyContent: 'space-around',
8081
};
8182
const headStyle = { color: '#828282' };
82-
83+
const history = useHistory();
8384
return (
8485
<BasePage
8586
tabPages={tabPages}
@@ -115,6 +116,24 @@ export const RunDetail: React.FC = () => {
115116
<RunStatus run={run} />
116117
</Paragraph>
117118
</Box>
119+
<Box>
120+
<Paragraph style={headStyle}>STACK NAME</Paragraph>
121+
<Paragraph
122+
size="small"
123+
style={{
124+
color: '#22BBDD',
125+
textDecoration: 'underline',
126+
cursor: 'pointer',
127+
marginTop: '10px',
128+
}}
129+
onClick={(event) => {
130+
event.stopPropagation();
131+
history.push(routePaths.stack.configuration(run.stack?.id));
132+
}}
133+
>
134+
{run.stack?.name}
135+
</Paragraph>
136+
</Box>
118137
<Box>
119138
<Paragraph style={headStyle}>AUTHOR</Paragraph>
120139
<Paragraph style={{ color: '#515151', marginTop: '10px' }}>
@@ -124,7 +143,7 @@ export const RunDetail: React.FC = () => {
124143
<Box>
125144
<Paragraph style={headStyle}>CREATED AT</Paragraph>
126145
<Paragraph style={{ color: '#515151', marginTop: '10px' }}>
127-
{formatDateToDisplay(run.created)}
146+
{formatDateForOverviewBar(run.created)}
128147
</Paragraph>
129148
</Box>
130149
</Box>

0 commit comments

Comments
 (0)