Skip to content

Commit 7fadfe7

Browse files
htahir1htahir1
authored
Merge pull request #51 from zenml-io/dev
Dev
2 parents c76e7a8 + 8e1c4fb commit 7fadfe7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1865
-237
lines changed

‎src/redux/actions/pipelines/getMyPipelinesAction.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
import { pipelineActionTypes } from '../../actionTypes';
22
import getMyPipelinesApi from '../../../api/pipelines/getMyPipelinesApi';
33

4-
export const getMyPipelinesAction = (): TRequestAction => ({
4+
export const getMyPipelinesAction = ({
5+
onSuccess,
6+
onFailure,
7+
}: {
8+
onSuccess?: () => void;
9+
onFailure?: () => void;
10+
}): TRequestAction => ({
511
type: pipelineActionTypes.getMyPipelines.request,
612
payload: {
713
apiMethod: getMyPipelinesApi,
814
isAuthenticated: true,
915
failureActionType: pipelineActionTypes.getMyPipelines.failure,
1016
successActionType: pipelineActionTypes.getMyPipelines.success,
17+
onSuccess,
18+
onFailure,
1119
},
1220
});

‎src/ui/layouts/Home.tsx‎

Lines changed: 60 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import styles from './Home.module.scss';
2222
import { iconColors, DEFAULT_PROJECT_NAME } from '../../constants';
2323
import { sessionSelectors } from '../../redux/selectors/session';
2424
import { usePushRoute, useSelector } from '../hooks';
25-
import axios from 'axios'
25+
import axios from 'axios';
2626

2727
export const translate = getTranslateByScope('ui.layouts.Dashboard');
2828

@@ -49,7 +49,9 @@ const GreyBoxWithIcon: React.FC<{
4949
<H4 bold>{title}</H4>
5050
</FlexBox.Row>
5151
<Box>
52-
<GhostButton style={{ width: '124px' }} onClick={onClick}>{buttonText}</GhostButton>
52+
<GhostButton style={{ width: '124px' }} onClick={onClick}>
53+
{buttonText}
54+
</GhostButton>
5355
</Box>
5456
</FlexBox.Row>
5557
);
@@ -58,24 +60,27 @@ const GreyBoxWithIcon: React.FC<{
5860
export const Home: React.FC = () => {
5961
const { push } = usePushRoute();
6062

61-
const [box, setBox] = useState('')
63+
const [box, setBox] = useState('');
6264

63-
const [dashboardData, setDashboardData] = useState('')
65+
const [dashboardData, setDashboardData] = useState('');
6466
const authToken = useSelector(sessionSelectors.authenticationToken);
6567

66-
useEffect(() => {
68+
useEffect(() => {
6769
const getDashboardData = async () => {
68-
const { data } = await axios.get(`${process.env.REACT_APP_BASE_API_URL}/projects/${DEFAULT_PROJECT_NAME}/statistics`, {
69-
headers: {
70-
'Authorization': `bearer ${authToken}`
71-
}
72-
})
73-
setDashboardData(data)
74-
}
75-
getDashboardData()
76-
}, [authToken])
70+
const { data } = await axios.get(
71+
`${process.env.REACT_APP_BASE_API_URL}/projects/${DEFAULT_PROJECT_NAME}/statistics`,
72+
{
73+
headers: {
74+
Authorization: `bearer ${authToken}`,
75+
},
76+
},
77+
);
78+
setDashboardData(data);
79+
};
80+
getDashboardData();
81+
}, [authToken]);
7782

78-
const preData = Object.entries(dashboardData)
83+
const preData = Object.entries(dashboardData);
7984
const data = preData?.map(([key, value]) => {
8085
const objData = { text: key, value: value };
8186
return objData;
@@ -85,7 +90,7 @@ export const Home: React.FC = () => {
8590
<AuthenticatedLayout>
8691
<SidebarContainer>
8792
<EaseInBox>
88-
<Box marginTop="5xl" marginLeft='xl' >
93+
<Box marginTop="5xl" marginLeft="xl">
8994
<Row style={{ alignItems: 'center' }}>
9095
<Col xs={12} lg={10}>
9196
<Box paddingBottom="md">
@@ -94,19 +99,46 @@ export const Home: React.FC = () => {
9499
<Box paddingBottom="lg">
95100
<H4 bold>{translate('subtitle')}</H4>
96101
</Box>
97-
98-
<FlexBox>
99-
{data?.map((e, index) => (
100-
<Box key={index} marginRight="xxl" style={{ width: '220px', minHeight: '100px', border: '1px solid #C9CBD0', borderRadius: '6px', padding: '13px 14px', backgroundColor: box === e.text ? '#431D93' : '#fff' }} onClick={() => setBox(e.text)} >
101-
<Paragraph style={{ fontSize: '24px', fontWeight: "bold", color: box === e.text ? '#fff' : '#431D93' }}>{e.value}</Paragraph>
102-
<Paragraph style={{ fontSize: '14px', fontWeight: "inherit", color: box === e.text ? '#fff' : '#646972', marginTop: '38px' }}>Number of {e.text}</Paragraph>
103-
</Box>
104-
))}
105-
</FlexBox>
106102
</Col>
107-
103+
{data?.map((e, index) => (
104+
<Box
105+
key={index}
106+
marginRight="xxl"
107+
style={{
108+
width: '220px',
109+
minHeight: '100px',
110+
border: '1px solid #C9CBD0',
111+
borderRadius: '6px',
112+
padding: '13px 14px',
113+
marginTop: '10px',
114+
backgroundColor: box === e.text ? '#431D93' : '#fff',
115+
}}
116+
onClick={() => setBox(e.text)}
117+
>
118+
<Paragraph
119+
style={{
120+
fontSize: '24px',
121+
fontWeight: 'bold',
122+
color: box === e.text ? '#fff' : '#431D93',
123+
}}
124+
>
125+
{e.value}
126+
</Paragraph>
127+
<Paragraph
128+
style={{
129+
fontSize: '14px',
130+
fontWeight: 'inherit',
131+
color: box === e.text ? '#fff' : '#646972',
132+
marginTop: '38px',
133+
}}
134+
>
135+
Number of {e.text}
136+
</Paragraph>
137+
</Box>
138+
))}
139+
108140
<Col xs={12} lg={7}>
109-
<Box marginTop="xxxl" >
141+
<Box marginTop="xxxl">
110142
<GreyBoxWithIcon
111143
onClick={() =>
112144
window.open(translate('cardOne.button.href'), '_blank')
@@ -137,4 +169,4 @@ export const Home: React.FC = () => {
137169
);
138170
};
139171

140-
export default Home;
172+
export default Home;

‎src/ui/layouts/pipelines/Pipelines/AllRuns/useService.ts‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
// import { pipelinesActions, runsActions } from '../../../../../redux/actions';
2+
import { useEffect } from 'react';
3+
import { runsActions } from '../../../../../redux/actions';
24
import {
35
runSelectors,
46
runPagesSelectors,
57
} from '../../../../../redux/selectors';
6-
import { useSelector } from '../../../../hooks';
8+
import { useDispatch, useSelector } from '../../../../hooks';
79

810
interface ServiceInterface {
911
fetching: boolean;
@@ -12,10 +14,17 @@ interface ServiceInterface {
1214

1315
export const useService = (): ServiceInterface => {
1416
const fetching = useSelector(runPagesSelectors.fetching);
15-
console.log('test111', fetching);
17+
const dispatch = useDispatch();
1618
const runs = useSelector(runSelectors.myRuns);
1719
// useEffect(() => {}, [runs]);
18-
// debugger;
20+
useEffect(() => {
21+
const intervalId = setInterval(() => {
22+
//assign interval to a variable to clear it.
23+
dispatch(runsActions.allRuns({}));
24+
}, 5000);
25+
26+
return () => clearInterval(intervalId); //This is important
27+
});
1928
const runIds = runs.map((run: TRun) => run.id);
2029

2130
return {

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react';
2+
import { iconColors, iconSizes } from '../../../../../../constants';
3+
import { Box, FlexBox, icons, If, LinkBox } from '../../../../../components';
4+
import { Sorting, SortingDirection } from './types';
5+
6+
import styles from './index.module.scss';
7+
8+
export const SortingHeader: React.FC<{
9+
sortMethod: void;
10+
activeSorting: Sorting | null;
11+
activeSortingDirection: SortingDirection | null;
12+
sorting: Sorting;
13+
}> = ({
14+
children,
15+
sortMethod,
16+
activeSorting,
17+
activeSortingDirection,
18+
sorting,
19+
}) => {
20+
return (
21+
<LinkBox className={styles.sortingBox} onClick={sortMethod}>
22+
<FlexBox alignItems="center">
23+
{children}
24+
<If
25+
condition={
26+
!!activeSorting &&
27+
activeSorting === sorting &&
28+
activeSortingDirection === 'DESC'
29+
}
30+
>
31+
{() => (
32+
<Box paddingLeft="xs">
33+
<icons.chevronDownLight
34+
color={iconColors.darkGrey}
35+
size={iconSizes.xs}
36+
/>
37+
</Box>
38+
)}
39+
</If>
40+
<If
41+
condition={
42+
!!activeSorting &&
43+
activeSorting === sorting &&
44+
activeSortingDirection === 'ASC'
45+
}
46+
>
47+
{() => (
48+
<Box paddingLeft="xs">
49+
<icons.chevronUpLight
50+
color={iconColors.darkGrey}
51+
size={iconSizes.xs}
52+
/>
53+
</Box>
54+
)}
55+
</If>
56+
</FlexBox>
57+
</LinkBox>
58+
);
59+
};

‎src/ui/layouts/pipelines/Pipelines/List/ForSorting/index.module.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
@import '../../../../../globalStyles';
2+
3+
.checkbox {
4+
height: 1.4rem;
5+
width: 1.4rem;
6+
border-radius: 2px;
7+
border: 1px solid $darkGreyColor;
8+
cursor: pointer;
9+
position: relative;
10+
}
11+
12+
.checkedCheckbox {
13+
background: $greenColor;
14+
border: 1px solid $greenColor;
15+
&:before {
16+
position: absolute;
17+
content: '';
18+
display: inline-block;
19+
transform: rotate(45deg);
20+
height: 10px;
21+
width: 5px;
22+
border-bottom: 2px solid $whiteColor;
23+
border-right: 2px solid $whiteColor;
24+
left: 4px;
25+
bottom: 2px;
26+
}
27+
}
28+
29+
.sortingBox {
30+
user-select: none;
31+
32+
& p {
33+
transition: 0.2s ease-in all;
34+
}
35+
36+
&:hover {
37+
& p {
38+
color: $darkGreyColor;
39+
}
40+
}
41+
}

‎src/ui/layouts/pipelines/Pipelines/List/ForSorting/types.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export type Sorting =
2+
| 'id'
3+
| 'name'
4+
| 'status'
5+
| 'datasourceCommit'
6+
| 'createdAt';
7+
8+
export type SortingDirection = 'ASC' | 'DESC';

0 commit comments

Comments
 (0)