Skip to content
This repository was archived by the owner on Aug 31, 2022. It is now read-only.

Commit dc12087

Browse files
author
Anisha1234
committed
ant design table integration
1 parent 846e5cc commit dc12087

File tree

3 files changed

+298
-0
lines changed

3 files changed

+298
-0
lines changed

‎config/router.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,11 @@ module.exports = [
8080
name: 'share',
8181
component: './SessionPlaceholder',
8282
},
83+
{
84+
path: '/overview',
85+
name: 'overview',
86+
component: './Overview',
87+
},
8388
],
8489
},
8590
];

‎src/pages/Overview/index.js‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
import React from 'react';
2+
import {
3+
Grid,
4+
GridItem,
5+
Card,
6+
TextContent,
7+
Text,
8+
TextVariants,
9+
Button,
10+
} from '@patternfly/react-core';
11+
import { Icon } from 'antd';
12+
import { connect } from 'dva';
13+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
14+
import { OutlinedClockIcon, UndoAltIcon } from '@patternfly/react-icons';
15+
import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
16+
import Table from '@/components/Table';
17+
// import { Table } from 'antd';
18+
import styles from './index.less';
19+
20+
@connect(({ datastore, global, user }) => ({
21+
user: user.user,
22+
indices: datastore.indices,
23+
selectedIndices: global.selectedIndices,
24+
}))
25+
class Overview extends React.Component {
26+
constructor(props) {
27+
super(props);
28+
this.state = {};
29+
}
30+
31+
componentDidMount = () => {};
32+
33+
onCollapse = (event, rowKey, isOpen) => {
34+
const { rows } = this.state;
35+
rows[rowKey].isOpen = isOpen;
36+
this.setState({
37+
rows,
38+
});
39+
};
40+
41+
render() {
42+
const columns = [
43+
{
44+
title: 'Result',
45+
dataIndex: 'result',
46+
key: 'result',
47+
render: text => (
48+
<div>
49+
<Button variant="link" isInline style={{ marginBottom: '8px' }}>
50+
{text[0]}
51+
</Button>
52+
<br />
53+
<Text component={TextVariants.p} className={styles.subText}>
54+
<span className={styles.label}>{text[1]} </span>
55+
</Text>
56+
</div>
57+
),
58+
},
59+
{
60+
title: 'End Time',
61+
dataIndex: 'end',
62+
key: 'end',
63+
},
64+
{
65+
title: '',
66+
dataIndex: 'fav',
67+
key: 'fav',
68+
render: () => <Icon type="star" theme="filled" style={{ color: '#FFDF00' }} />,
69+
},
70+
{
71+
title: '',
72+
dataIndex: 'action',
73+
key: 'action',
74+
render: () => <h1>action</h1>,
75+
},
76+
];
77+
const data = [
78+
{
79+
key: 1,
80+
result: ['fio_2020.09.10T12.42.11', ' 2020-09-10T 11:52:34:552478'],
81+
end: '2020-09-10T 11:52:34:552478',
82+
description: 'More content can be added here',
83+
},
84+
{
85+
key: 2,
86+
result: ['fio_2020.09.10T12.42.11', ' 2020-09-10T 11:52:34:552478'],
87+
end: '2020-09-10T 11:52:34:552478',
88+
description: 'More content can be added here',
89+
},
90+
{
91+
key: 3,
92+
result: ['fio_2020.09.10T12.42.11', ' 2020-09-10T 11:52:34:552478'],
93+
end: '2020-09-10T 11:52:34:552478',
94+
description: 'More content can be added here',
95+
},
96+
{
97+
key: 4,
98+
result: ['fio_2020.09.10T12.42.11', ' 2020-09-10T 11:52:34:552478'],
99+
end: '2020-09-10T 11:52:34:552478',
100+
description: 'More content can be added here',
101+
},
102+
];
103+
104+
const rowSelection = {
105+
onChange: (selectedRowKeys, selectedRows) => {
106+
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
107+
},
108+
getCheckboxProps: record => ({
109+
disabled: record.name === 'Disabled User', // Column configuration not to be checked
110+
name: record.name,
111+
}),
112+
};
113+
114+
return (
115+
<div className={styles.paddingSmall}>
116+
<TextContent className={styles.paddingSmall}>
117+
<Text component={TextVariants.h1}> Overview</Text>
118+
</TextContent>
119+
<Grid hasGutter>
120+
<GridItem span={3}>
121+
<Card>
122+
<div className={styles.paddingBig}>
123+
<TextContent>
124+
<Text component={TextVariants.h3}>
125+
<FontAwesomeIcon
126+
icon={faExclamationCircle}
127+
color="red"
128+
className={styles.icons}
129+
/>
130+
Expiring Soon
131+
</Text>
132+
<Text component={TextVariants.p} className={styles.subText}>
133+
These runs will be automatically deleted from the sysem if left unacknowledged.
134+
<Button variant="link" isInline>
135+
Learn more
136+
</Button>
137+
</Text>
138+
</TextContent>
139+
</div>
140+
<div className={styles.expiringValues}>
141+
<Card className={styles.subCard}>
142+
<div className={styles.paddingSmall}>
143+
<TextContent>
144+
<Button variant="link" isInline>
145+
fio_2020.09.10T12.42.11
146+
</Button>
147+
<Text component={TextVariants.p} className={styles.subText}>
148+
<OutlinedClockIcon className={styles.icons} /> 2020-09-10T 11:52:34:552478
149+
</Text>
150+
</TextContent>
151+
</div>
152+
</Card>
153+
<Card className={styles.subCard}>
154+
<div className={styles.paddingSmall}>
155+
<TextContent>
156+
<Button variant="link" isInline>
157+
fio_2020.09.10T12.42.11
158+
</Button>
159+
<Text component={TextVariants.p} className={styles.subText}>
160+
<OutlinedClockIcon className={styles.icons} /> 2020-09-10T 11:52:34:552478
161+
</Text>
162+
</TextContent>
163+
</div>
164+
</Card>
165+
<Card className={styles.subCard}>
166+
<div className={styles.paddingSmall}>
167+
<TextContent>
168+
<Button variant="link" isInline>
169+
fio_2020.09.10T12.42.11
170+
</Button>
171+
<Text component={TextVariants.p} className={styles.subText}>
172+
<OutlinedClockIcon className={styles.icons} /> 2020-09-10T 11:52:34:552478
173+
</Text>
174+
</TextContent>
175+
</div>
176+
</Card>
177+
<Card className={styles.subCard}>
178+
<div className={styles.paddingSmall}>
179+
<TextContent>
180+
<Button variant="link" isInline>
181+
fio_2020.09.10T12.42.11
182+
</Button>
183+
<Text component={TextVariants.p} className={styles.subText}>
184+
<OutlinedClockIcon className={styles.icons} /> 2020-09-10T 11:52:34:552478
185+
</Text>
186+
</TextContent>
187+
</div>
188+
</Card>
189+
</div>
190+
<Card className={styles.subCard}>
191+
<div className={styles.paddingSmall}>
192+
<Button variant="link" isInline>
193+
View all warnings
194+
</Button>
195+
</div>
196+
</Card>
197+
</Card>
198+
</GridItem>
199+
<GridItem span={9}>
200+
<Card>
201+
<div className={styles.paddingBig}>
202+
<TextContent>
203+
<Text component={TextVariants.h3}>
204+
{' '}
205+
New Runs
206+
<Button variant="link" icon={<UndoAltIcon />} style={{ float: 'right' }}>
207+
Refresh results
208+
</Button>
209+
</Text>
210+
</TextContent>
211+
</div>
212+
<div>
213+
<Table
214+
columns={columns}
215+
rowSelection={rowSelection}
216+
expandedRowRender={record => <p style={{ margin: 0 }}>{record.description}</p>}
217+
dataSource={data}
218+
/>
219+
</div>
220+
</Card>
221+
</GridItem>
222+
</Grid>
223+
<Grid hasGutter style={{ marginTop: '16px' }}>
224+
<GridItem span={12}>
225+
<Card>
226+
<div className={styles.paddingBig}>
227+
<TextContent className={styles.paddingSmall}>
228+
<Text component={TextVariants.h3}> Unabled</Text>
229+
</TextContent>
230+
<Button variant="link">Go to all runs</Button>
231+
</div>
232+
</Card>
233+
</GridItem>
234+
</Grid>
235+
</div>
236+
);
237+
}
238+
}
239+
240+
export default Overview;

‎src/pages/Overview/index.less‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
*::-webkit-scrollbar {
2+
width: 1.5em;
3+
}
4+
*::-webkit-scrollbar-thumb {
5+
height: 1em;
6+
border: 0.5em solid rgba(0, 0, 0, 0);
7+
background-clip: padding-box;
8+
-webkit-border-radius: 1em;
9+
background-color: rgba(0, 0, 0, 0.15);
10+
-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.025);
11+
}
12+
*::-webkit-scrollbar-button {
13+
width: 0;
14+
height: 0;
15+
display: none;
16+
}
17+
*::-webkit-scrollbar-corner {
18+
background-color: transparent;
19+
}
20+
21+
.paddingSmall {
22+
margin: 8px;
23+
margin-left: 16px;
24+
}
25+
26+
.paddingBig {
27+
margin: 16px;
28+
}
29+
30+
.subCard {
31+
border-top: solid 1px #cfcfcf;
32+
}
33+
34+
.subText {
35+
font-size: smaller;
36+
color: #4c4c4c;
37+
}
38+
39+
.icons {
40+
margin-right: 8px;
41+
}
42+
43+
.expiringValues {
44+
height: 25vh;
45+
overflow: scroll;
46+
}
47+
48+
.label {
49+
margin: 3px;
50+
background-color: rgb(220 239 255);
51+
padding: 2px 8px;
52+
border-radius: 25px;
53+
}

0 commit comments

Comments
 (0)