fixes dropdown and creates mock JSON objects

Author: Anisha1234

config/router.config.js

@@ -95,13 +95,13 @@ module.exports = [
             exact: true,
             component: './Profile',
           },
+          {
+            path: '/private/overview',
+            name: 'overview',
+            component: './Overview',
+          },
         ],
       },
-      {
-        path: '/overview',
-        name: 'overview',
-        component: './Overview',
-      },
     ],
   },
 ];

mock/overview.js

@@ -0,0 +1,59 @@
+export const expirationLimit = 20;
+
+export const newData = [
+  {
+    key: 1,
+    result: ['fio_2020.09.10T12.42.11', ' virtual506.virt.lab.eng.bos.redhat.com'],
+    end: '2020-09-10T 11:52:34.552478',
+    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',
+    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',
+    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',
+    description: 'More content can be added here',
+  },
+];
+
+export const seenData = [
+  {
+    key: 1,
+    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',
+    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-11-20T11:52:34.552478',
+    deletion: '2020-11-20T11:52:34.552478',
+    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-11-15T11:52:34.552478',
+    deletion: '2020-11-15T11:52:34.552478',
+    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-11-25T11:52:34.552478',
+    deletion: '2020-11-25T11:52:34.552478',
+    description: 'More content can be added here',
+  },
+];

src/common/menu.js

@@ -2,7 +2,7 @@ import { isUrl } from '../utils/utils';
 
 const menuData = [
   {
-    name: 'Dashboard',
+    name: 'Overview',
     icon: 'dashboard',
     path: '/private',
     routes: [
@@ -28,6 +28,11 @@ const menuData = [
       },
     ],
   },
+  {
+    name: 'Controllers',
+    icon: 'controllers',
+    path: '/',
+  },
   {
     name: 'Search',
     icon: 'search',

src/pages/Overview/index.js

@@ -22,6 +22,7 @@ import {
 } from '@patternfly/react-charts';
 import { Icon } from 'antd';
 import { connect } from 'dva';
+import moment from 'moment';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   OutlinedClockIcon,
@@ -30,6 +31,7 @@ import {
   EllipsisVIcon,
 } from '@patternfly/react-icons';
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+import { newData, seenData, expirationLimit } from '../../../mock/overview';
 import Table from '@/components/Table';
 // import { Table } from 'antd';
 import styles from './index.less';
@@ -66,14 +68,19 @@ class Overview extends React.Component {
     });
   };
 
-  showDrowpdown = () => {
-    console.log('here');
+  showDrowpdown = id => {
+    const dropdownElem = document.getElementById(id);
+    if (dropdownElem.style.display === 'none') {
+      dropdownElem.style.display = 'block';
+    } else {
+      dropdownElem.style.display = 'none';
+    }
   };
 
   render() {
     const { activeTabKey, barWidth } = this.state;
 
-    const columns = [
+    const newDataColumns = [
       {
         title: 'Result',
         dataIndex: 'result',
@@ -105,43 +112,98 @@ class Overview extends React.Component {
         title: '',
         dataIndex: 'action',
         key: 'action',
-        render: () => (
+        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} href="#seen">
+                    Mark as seen
+                  </div>
+                  <div className={styles.dropdownLink} href="#delete">
+                    Delete
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        },
+      },
+    ];
+
+    const seenDataColumns = [
+      {
+        title: 'Result',
+        dataIndex: 'result',
+        key: 'result',
+        render: text => (
           <div>
-            <EllipsisVIcon onClick={() => this.showDrowpdown()} />
-            {/* <div id="Dropdown" className="dropdownmenu-content">
-              <a href="#Java">Java</a>
-              <a href="#HTML">HTML</a>
-              <a href="#CSS">CSS</a>
-              <a href="#JS">JavaScript</a>
-            </div> */}
+            <Button variant="link" isInline style={{ marginBottom: '8px' }}>
+              {text[0]}
+            </Button>
+            <br />
+            <Text component={TextVariants.p} className={styles.subText}>
+              <span className={styles.label}>{text[1]}</span>
+            </Text>
           </div>
         ),
       },
-    ];
-    const data = [
       {
-        key: 1,
-        result: ['fio_2020.09.10T12.42.11', ' 2020-09-10T 11:52:34:552478'],
-        end: '2020-09-10T 11:52:34:552478',
-        description: 'More content can be added here',
+        title: 'End Time',
+        dataIndex: 'end',
+        key: 'end',
       },
       {
-        key: 2,
-        result: ['fio_2020.09.10T12.42.12', ' 2020-09-10T 11:52:34:552478'],
-        end: '2020-09-10T 11:52:34:552478',
-        description: 'More content can be added here',
+        title: 'Scheduled for deletion on',
+        dataIndex: 'deletion',
+        key: 'deletion',
+        render: text => {
+          const startDate = moment(new Date(Date.parse(text)));
+          const currDate = moment(new Date());
+          const currDays = currDate.diff(startDate, 'days');
+          if (currDays < expirationLimit) {
+            return (
+              <Text>
+                {moment(text)
+                  .add(7, 'days')
+                  .format('YYYY-MM-DDTHH:mm:ss:SSSSSS')}
+              </Text>
+            );
+          }
+          return (
+            <span>
+              {moment(text)
+                .add(7, 'days')
+                .format('YYYY-MM-DDTHH:mm:ss:SSSSSS')}
+              <FontAwesomeIcon
+                style={{ paddingLeft: '5px', width: '20px' }}
+                icon={faExclamationCircle}
+                color="red"
+                className={styles.icons}
+              />
+            </span>
+          );
+        },
       },
       {
-        key: 3,
-        result: ['fio_2020.09.10T12.42.13', ' 2020-09-10T 11:52:34:552478'],
-        end: '2020-09-10T 11:52:34:552478',
-        description: 'More content can be added here',
+        title: '',
+        dataIndex: 'fav',
+        key: 'fav',
+        render: () => <Icon type="star" onClick={() => this.onFavourite()} />,
       },
       {
-        key: 4,
-        result: ['fio_2020.09.10T12.42.14', ' 2020-09-10T 11:52:34:552478'],
-        end: '2020-09-10T 11:52:34:552478',
-        description: 'More content can be added here',
+        title: '',
+        dataIndex: 'action',
+        key: 'action',
+        render: () => (
+          <div>
+            <EllipsisVIcon onClick={() => this.showDrowpdown()} />
+          </div>
+        ),
       },
     ];
 
@@ -342,12 +404,12 @@ class Overview extends React.Component {
                     </div>
                     <div>
                       <Table
-                        columns={columns}
+                        columns={newDataColumns}
                         rowSelection={rowSelection}
                         expandedRowRender={record => (
                           <p style={{ margin: 0 }}>{record.description}</p>
                         )}
-                        dataSource={data}
+                        dataSource={newData}
                       />
                     </div>
                   </Card>
@@ -364,12 +426,12 @@ class Overview extends React.Component {
                     </div>
                     <div>
                       <Table
-                        columns={columns}
+                        columns={seenDataColumns}
                         rowSelection={rowSelection}
                         expandedRowRender={record => (
                           <p style={{ margin: 0 }}>{record.description}</p>
                         )}
-                        dataSource={data}
+                        dataSource={seenData}
                       />
                     </div>
                   </Card>

src/pages/Overview/index.less

@@ -72,3 +72,23 @@
   font-size: var(--pf-global--FontSize--sm);
   color: var(--pf-global--Color--300);
 }
+
+.dropdownContent {
+  position: absolute;
+  background-color: #f1f1f1;
+  margin-right: -2%;
+  min-width: 160px;
+  overflow: auto;
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+.dropdownLink {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+.dropdownLink:hover {
+  background-color: #ddd;
+}