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

Commit 7af781a

Browse files
author
Anisha1234
committed
adds delete and mark as seen feature
1 parent 4e48553 commit 7af781a

File tree

4 files changed

+98
-26
lines changed

4 files changed

+98
-26
lines changed

‎mock/overview.js‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,73 @@
11
export const expirationLimit = 20;
22

3-
export const newData = [
3+
// P.S: the key needs to be unique for this object
4+
export const resultData = [
45
{
56
key: 1,
67
result: ['fio_2020.09.10T12.42.11', ' virtual506.virt.lab.eng.bos.redhat.com'],
78
end: '2020-09-10T 11:52:34.552478',
9+
seen: false,
810
description: 'More content can be added here',
911
},
1012
{
1113
key: 2,
1214
result: ['fio_2020.09.10T12.42.12', ' virtual506.virt.lab.eng.bos.redhat.com'],
1315
end: '2020-09-10T11:52:34.552478',
16+
seen: false,
1417
description: 'More content can be added here',
1518
},
1619
{
1720
key: 3,
1821
result: ['fio_2020.09.10T12.42.13', ' virtual506.virt.lab.eng.bos.redhat.com'],
1922
end: '2020-09-10T11:52:34.552478',
23+
seen: false,
2024
description: 'More content can be added here',
2125
},
2226
{
2327
key: 4,
2428
result: ['fio_2020.09.10T12.42.14', ' virtual506.virt.lab.eng.bos.redhat.com'],
2529
end: '2020-09-10T11:52:34.552478',
30+
seen: false,
2631
description: 'More content can be added here',
2732
},
28-
];
29-
30-
export const seenData = [
3133
{
32-
key: 1,
34+
key: 5,
3335
result: ['fio_2020.09.10T12.42.11', 'virtual506.virt.lab.eng.bos.redhat.com'],
3436
end: '2020-11-13T11:52:34.552478',
3537
deletion: '2020-11-13T11:52:34.552478',
38+
seen: true,
3639
description: 'More content can be added here',
3740
},
3841
{
39-
key: 2,
42+
key: 6,
4043
result: ['fio_2020.09.10T12.42.12', ' virtual506.virt.lab.eng.bos.redhat.com'],
4144
end: '2020-11-20T11:52:34.552478',
4245
deletion: '2020-11-20T11:52:34.552478',
46+
seen: true,
4347
description: 'More content can be added here',
4448
},
4549
{
46-
key: 3,
50+
key: 7,
4751
result: ['fio_2020.09.10T12.42.13', ' virtual506.virt.lab.eng.bos.redhat.com'],
4852
end: '2020-11-15T11:52:34.552478',
4953
deletion: '2020-11-15T11:52:34.552478',
54+
seen: true,
5055
description: 'More content can be added here',
5156
},
5257
{
53-
key: 4,
58+
key: 8,
59+
result: ['fio_2020.09.10T12.42.14', ' virtual506.virt.lab.eng.bos.redhat.com'],
60+
end: '2020-11-25T11:52:34.552478',
61+
deletion: '2020-11-25T11:52:34.552478',
62+
seen: true,
63+
description: 'More content can be added here',
64+
},
65+
{
66+
key: 9,
5467
result: ['fio_2020.09.10T12.42.14', ' virtual506.virt.lab.eng.bos.redhat.com'],
5568
end: '2020-11-25T11:52:34.552478',
5669
deletion: '2020-11-25T11:52:34.552478',
70+
seen: true,
5771
description: 'More content can be added here',
5872
},
5973
];

‎src/components/LoginModal/index.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,14 @@ class LoginModal extends React.Component {
4747
dispatch(routerRedux.push(`/auth`));
4848
};
4949

50+
handleSignupModal = () => {
51+
const { dispatch } = this.props;
52+
this.setState(({ isModalOpen }) => ({
53+
isModalOpen: !isModalOpen,
54+
}));
55+
dispatch(routerRedux.push(`/signup`));
56+
};
57+
5058
render() {
5159
const { isModalOpen } = this.state;
5260

@@ -59,7 +67,10 @@ class LoginModal extends React.Component {
5967
showClose="false"
6068
actions={[
6169
<Button key="confirm" variant="primary" onClick={this.handleLoginModal}>
62-
Proceed
70+
Login
71+
</Button>,
72+
<Button key="confirm" variant="link" onClick={this.handleSignupModal}>
73+
Signup
6374
</Button>,
6475
<Button key="cancel" variant="link" onClick={this.handleModalCancel}>
6576
Cancel

‎src/pages/Overview/index.js‎

Lines changed: 54 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import {
3131
EllipsisVIcon,
3232
} from '@patternfly/react-icons';
3333
import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
34-
import { newData, seenData, expirationLimit } from '../../../mock/overview';
34+
import { resultData, expirationLimit } from '../../../mock/overview';
3535
import Table from '@/components/Table';
3636
// import { Table } from 'antd';
3737
import styles from './index.less';
@@ -47,9 +47,26 @@ class Overview extends React.Component {
4747
this.state = {
4848
activeTabKey: 0,
4949
barWidth: '20',
50+
totalResultData: resultData,
51+
newData: [],
52+
unlabledData: [],
5053
};
5154
}
5255

56+
componentDidMount() {
57+
this.getSeperatedResults();
58+
}
59+
60+
getSeperatedResults = () => {
61+
const { totalResultData } = this.state;
62+
const unlabledData = totalResultData.filter(x => x.seen === true);
63+
const newData = totalResultData.filter(x => x.seen !== true);
64+
this.setState({
65+
newData,
66+
unlabledData,
67+
});
68+
};
69+
5370
onCollapse = (event, rowKey, isOpen) => {
5471
const { rows } = this.state;
5572
rows[rowKey].isOpen = isOpen;
@@ -77,8 +94,21 @@ class Overview extends React.Component {
7794
}
7895
};
7996

97+
markSeen = row => {
98+
console.log(row);
99+
};
100+
101+
deleteResult = row => {
102+
const { totalResultData } = this.state;
103+
const updatedResult = totalResultData.filter(x => x.key !== row.key);
104+
this.setState({
105+
totalResultData: updatedResult,
106+
});
107+
this.getSeperatedResults();
108+
};
109+
80110
render() {
81-
const { activeTabKey, barWidth } = this.state;
111+
const { activeTabKey, barWidth, newData, unlabledData } = this.state;
82112

83113
const newDataColumns = [
84114
{
@@ -121,7 +151,7 @@ class Overview extends React.Component {
121151
/>
122152
<div className={styles.dropdown} id={`newrun${row.key}`} style={{ display: 'none' }}>
123153
<div className={styles.dropdownContent}>
124-
<div className={styles.dropdownLink} href="#seen">
154+
<div className={styles.dropdownLink} onClick={() => this.markSeen(row)}>
125155
Mark as seen
126156
</div>
127157
<div className={styles.dropdownLink} href="#delete">
@@ -199,11 +229,23 @@ class Overview extends React.Component {
199229
title: '',
200230
dataIndex: 'action',
201231
key: 'action',
202-
render: () => (
203-
<div>
204-
<EllipsisVIcon onClick={() => this.showDrowpdown()} />
205-
</div>
206-
),
232+
render: (value, row) => {
233+
return (
234+
<div>
235+
<EllipsisVIcon
236+
onClick={() => this.showDrowpdown(`newrun${row.key}`)}
237+
className="dropbtn"
238+
/>
239+
<div className={styles.dropdown} id={`newrun${row.key}`} style={{ display: 'none' }}>
240+
<div className={styles.dropdownContent}>
241+
<div className={styles.dropdownLink} onClick={() => this.deleteResult(row)}>
242+
Delete
243+
</div>
244+
</div>
245+
</div>
246+
</div>
247+
);
248+
},
207249
},
208250
];
209251

@@ -402,7 +444,7 @@ class Overview extends React.Component {
402444
</Text>
403445
</TextContent>
404446
</div>
405-
<div>
447+
<div className={styles.newRunTable}>
406448
<Table
407449
columns={newDataColumns}
408450
rowSelection={rowSelection}
@@ -418,9 +460,9 @@ class Overview extends React.Component {
418460
<Grid hasGutter style={{ marginTop: '16px' }}>
419461
<GridItem span={12}>
420462
<Card>
421-
<div className={styles.paddingBig}>
463+
<div className={styles.paddingSmall}>
422464
<TextContent className={styles.paddingSmall}>
423-
<Text component={TextVariants.h3}> Unabled</Text>
465+
<Text component={TextVariants.h3}> Unlabled</Text>
424466
</TextContent>
425467
<Button variant="link">Go to all runs</Button>
426468
</div>
@@ -431,7 +473,7 @@ class Overview extends React.Component {
431473
expandedRowRender={record => (
432474
<p style={{ margin: 0 }}>{record.description}</p>
433475
)}
434-
dataSource={seenData}
476+
dataSource={unlabledData}
435477
/>
436478
</div>
437479
</Card>

‎src/pages/Overview/index.less‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,16 @@
2323
margin-left: 16px;
2424
}
2525

26+
.newRunTable {
27+
height: 45vh;
28+
overflow: scroll;
29+
}
30+
31+
.expiringValues {
32+
height: 35vh;
33+
overflow: scroll;
34+
}
35+
2636
.paddingBig {
2737
margin: 16px;
2838
}
@@ -40,11 +50,6 @@
4050
margin-right: 8px;
4151
}
4252

43-
.expiringValues {
44-
height: 43vh;
45-
overflow: scroll;
46-
}
47-
4853
.label {
4954
margin: 3px;
5055
background-color: rgb(220 239 255);

0 commit comments

Comments
 (0)