adds delete and mark as seen feature

mock/overview.js

@@ -1,59 +1,73 @@
 export const expirationLimit = 20;
 
-export const newData = [
+// P.S: the key needs to be unique for this object
+export const resultData = [
   {
     key: 1,
     result: ['fio_2020.09.10T12.42.11', ' virtual506.virt.lab.eng.bos.redhat.com'],
     end: '2020-09-10T 11:52:34.552478',
+    seen: false,
     description: 'More content can be added here',
   },
   {
     key: 2,
     result: ['fio_2020.09.10T12.42.12', ' virtual506.virt.lab.eng.bos.redhat.com'],
     end: '2020-09-10T11:52:34.552478',
+    seen: false,
     description: 'More content can be added here',
   },
   {
     key: 3,
     result: ['fio_2020.09.10T12.42.13', ' virtual506.virt.lab.eng.bos.redhat.com'],
     end: '2020-09-10T11:52:34.552478',
+    seen: false,
     description: 'More content can be added here',
   },
   {
     key: 4,
     result: ['fio_2020.09.10T12.42.14', ' virtual506.virt.lab.eng.bos.redhat.com'],
     end: '2020-09-10T11:52:34.552478',
+    seen: false,
     description: 'More content can be added here',
   },
-];
-
-export const seenData = [
   {
-    key: 1,
+    key: 5,
     result: ['fio_2020.09.10T12.42.11', 'virtual506.virt.lab.eng.bos.redhat.com'],
     end: '2020-11-13T11:52:34.552478',
     deletion: '2020-11-13T11:52:34.552478',
+    seen: true,
     description: 'More content can be added here',
   },
   {
-    key: 2,
+    key: 6,
     result: ['fio_2020.09.10T12.42.12', ' virtual506.virt.lab.eng.bos.redhat.com'],
     end: '2020-11-20T11:52:34.552478',
     deletion: '2020-11-20T11:52:34.552478',
+    seen: true,
     description: 'More content can be added here',
   },
   {
-    key: 3,
+    key: 7,
     result: ['fio_2020.09.10T12.42.13', ' virtual506.virt.lab.eng.bos.redhat.com'],
     end: '2020-11-15T11:52:34.552478',
     deletion: '2020-11-15T11:52:34.552478',
+    seen: true,
     description: 'More content can be added here',
   },
   {
-    key: 4,
+    key: 8,
+    result: ['fio_2020.09.10T12.42.14', ' virtual506.virt.lab.eng.bos.redhat.com'],
+    end: '2020-11-25T11:52:34.552478',
+    deletion: '2020-11-25T11:52:34.552478',
+    seen: true,
+    description: 'More content can be added here',
+  },
+  {
+    key: 9,
     result: ['fio_2020.09.10T12.42.14', ' virtual506.virt.lab.eng.bos.redhat.com'],
     end: '2020-11-25T11:52:34.552478',
     deletion: '2020-11-25T11:52:34.552478',
+    seen: true,
     description: 'More content can be added here',
   },
 ];

src/components/LoginModal/index.js

@@ -47,6 +47,14 @@ class LoginModal extends React.Component {
     dispatch(routerRedux.push(`/auth`));
   };
 
+  handleSignupModal = () => {
+    const { dispatch } = this.props;
+    this.setState(({ isModalOpen }) => ({
+      isModalOpen: !isModalOpen,
+    }));
+    dispatch(routerRedux.push(`/signup`));
+  };
+
   render() {
     const { isModalOpen } = this.state;
 
@@ -59,7 +67,10 @@ class LoginModal extends React.Component {
           showClose="false"
           actions={[
             <Button key="confirm" variant="primary" onClick={this.handleLoginModal}>
-              Proceed
+              Login
+            </Button>,
+            <Button key="confirm" variant="link" onClick={this.handleSignupModal}>
+              Signup
             </Button>,
             <Button key="cancel" variant="link" onClick={this.handleModalCancel}>
               Cancel

src/pages/Overview/index.js

@@ -31,7 +31,7 @@ import {
   EllipsisVIcon,
 } from '@patternfly/react-icons';
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
-import { newData, seenData, expirationLimit } from '../../../mock/overview';
+import { resultData, expirationLimit } from '../../../mock/overview';
 import Table from '@/components/Table';
 // import { Table } from 'antd';
 import styles from './index.less';
@@ -47,9 +47,26 @@ class Overview extends React.Component {
     this.state = {
       activeTabKey: 0,
       barWidth: '20',
+      totalResultData: resultData,
+      newData: [],
+      unlabledData: [],
     };
   }
 
+  componentDidMount() {
+    this.getSeperatedResults();
+  }
+
+  getSeperatedResults = () => {
+    const { totalResultData } = this.state;
+    const unlabledData = totalResultData.filter(x => x.seen === true);
+    const newData = totalResultData.filter(x => x.seen !== true);
+    this.setState({
+      newData,
+      unlabledData,
+    });
+  };
+
   onCollapse = (event, rowKey, isOpen) => {
     const { rows } = this.state;
     rows[rowKey].isOpen = isOpen;
@@ -77,8 +94,21 @@ class Overview extends React.Component {
     }
   };
 
+  markSeen = row => {
+    console.log(row);
+  };
+
+  deleteResult = row => {
+    const { totalResultData } = this.state;
+    const updatedResult = totalResultData.filter(x => x.key !== row.key);
+    this.setState({
+      totalResultData: updatedResult,
+    });
+    this.getSeperatedResults();
+  };
+
   render() {
-    const { activeTabKey, barWidth } = this.state;
+    const { activeTabKey, barWidth, newData, unlabledData } = this.state;
 
     const newDataColumns = [
       {
@@ -121,7 +151,7 @@ class Overview extends React.Component {
               />
               <div className={styles.dropdown} id={`newrun${row.key}`} style={{ display: 'none' }}>
                 <div className={styles.dropdownContent}>
-                  <div className={styles.dropdownLink} href="#seen">
+                  <div className={styles.dropdownLink} onClick={() => this.markSeen(row)}>
                     Mark as seen
                   </div>
                   <div className={styles.dropdownLink} href="#delete">
@@ -199,11 +229,23 @@ class Overview extends React.Component {
         title: '',
         dataIndex: 'action',
         key: 'action',
-        render: () => (
-          <div>
-            <EllipsisVIcon onClick={() => this.showDrowpdown()} />
-          </div>
-        ),
+        render: (value, row) => {
+          return (
+            <div>
+              <EllipsisVIcon
+                onClick={() => this.showDrowpdown(`newrun${row.key}`)}
+                className="dropbtn"
+              />
+              <div className={styles.dropdown} id={`newrun${row.key}`} style={{ display: 'none' }}>
+                <div className={styles.dropdownContent}>
+                  <div className={styles.dropdownLink} onClick={() => this.deleteResult(row)}>
+                    Delete
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        },
       },
     ];
 
@@ -402,7 +444,7 @@ class Overview extends React.Component {
                         </Text>
                       </TextContent>
                     </div>
-                    <div>
+                    <div className={styles.newRunTable}>
                       <Table
                         columns={newDataColumns}
                         rowSelection={rowSelection}
@@ -418,9 +460,9 @@ class Overview extends React.Component {
               <Grid hasGutter style={{ marginTop: '16px' }}>
                 <GridItem span={12}>
                   <Card>
-                    <div className={styles.paddingBig}>
+                    <div className={styles.paddingSmall}>
                       <TextContent className={styles.paddingSmall}>
-                        <Text component={TextVariants.h3}> Unabled</Text>
+                        <Text component={TextVariants.h3}> Unlabled</Text>
                       </TextContent>
                       <Button variant="link">Go to all runs</Button>
                     </div>
@@ -431,7 +473,7 @@ class Overview extends React.Component {
                         expandedRowRender={record => (
                           <p style={{ margin: 0 }}>{record.description}</p>
                         )}
-                        dataSource={seenData}
+                        dataSource={unlabledData}
                       />
                     </div>
                   </Card>

src/pages/Overview/index.less

@@ -23,6 +23,16 @@
   margin-left: 16px;
 }
 
+.newRunTable {
+  height: 45vh;
+  overflow: scroll;
+}
+
+.expiringValues {
+  height: 35vh;
+  overflow: scroll;
+}
+
 .paddingBig {
   margin: 16px;
 }
@@ -40,11 +50,6 @@
   margin-right: 8px;
 }
 
-.expiringValues {
-  height: 43vh;
-  overflow: scroll;
-}
-
 .label {
   margin: 3px;
   background-color: rgb(220 239 255);