adds progressbar to unseen results

Author: Anisha Swain

mock/overview.js

@@ -1,4 +1,4 @@
-export const expirationLimit = 30;
+export const expirationLimit = 90;
 
 // P.S: the key needs to be unique for this object
 export const resultData = [
@@ -38,39 +38,39 @@ export const resultData = [
     key: 5,
     result: ['mock result -5', 'example.lab.eng.com'],
     end: '2020-12-10T11:52:34.552478',
-    deletion: '2021-01-10T11:52:34.552478',
+    deletion: '2021-02-10T11:52:34.552478',
     seen: true,
     description: 'More content can be added here',
   },
   {
     key: 6,
     result: ['mock result -6', ' example.lab.eng.com'],
     end: '2020-12-10T11:52:34.552478',
-    deletion: '2021-01-10T11:52:34.552478',
+    deletion: '2021-03-10T11:52:34.552478',
     seen: true,
     description: 'More content can be added here',
   },
   {
     key: 7,
     result: ['mock result -7', ' example.lab.eng.com'],
     end: '2021-01-10T11:52:34.552478',
-    deletion: '2021-02-10T11:52:34.552478',
+    deletion: '2021-04-10T11:52:34.552478',
     seen: true,
     description: 'More content can be added here',
   },
   {
     key: 8,
     result: ['mock result -8', ' example.lab.eng.com'],
     end: '2021-01-10T11:52:34.552478',
-    deletion: '2021-02-10T11:52:34.552478',
+    deletion: '2021-03-10T11:52:34.552478',
     seen: true,
     description: 'More content can be added here',
   },
   {
     key: 9,
     result: ['mock result -9', ' example.lab.eng.com'],
     end: '2021-01-20T11:52:34.552478',
-    deletion: '2021-02-20T11:52:34.552478',
+    deletion: '2021-04-20T11:52:34.552478',
     seen: true,
     description: 'More content can be added here',
   },

src/pages/Overview/index.js

@@ -9,6 +9,10 @@ import {
   Button,
   Tabs,
   Tab,
+  Progress,
+  ProgressSize,
+  ProgressMeasureLocation,
+  ProgressVariant,
 } from '@patternfly/react-core';
 import {
   Chart,
@@ -210,29 +214,41 @@ class Overview extends React.Component {
         render: text => {
           const deleteDate = moment(new Date(Date.parse(text)));
           const currDate = moment(new Date());
-          const remainingDays = currDate.diff(deleteDate, 'days');
-          console.log(remainingDays, expirationLimit);
-          if (remainingDays < 0) {
+          const remainingDays = deleteDate.diff(currDate, 'days');
+          if (remainingDays > 60) {
             return (
-              <Text>
-                {moment(text)
-                  .add(7, 'days')
-                  .format('YYYY-MM-DDTHH:mm:ss:SSSSSS')}
-              </Text>
+              <div>
+                <Text>
+                  {moment(text)
+                    .add(7, 'days')
+                    .format('YYYY-MM-DDTHH:mm:ss:SSSSSS')}
+                </Text>
+                <Progress
+                  min={0}
+                  max={expirationLimit}
+                  value={expirationLimit - remainingDays}
+                  size={ProgressSize.sm}
+                  measureLocation={ProgressMeasureLocation.none}
+                />
+              </div>
             );
           }
           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}
+            <div>
+              <span>
+                {moment(text)
+                  .add(7, 'days')
+                  .format('YYYY-MM-DDTHH:mm:ss:SSSSSS')}
+              </span>
+              <Progress
+                min={0}
+                max={expirationLimit}
+                value={expirationLimit - remainingDays}
+                size={ProgressSize.sm}
+                variant={ProgressVariant.danger}
+                measureLocation={ProgressMeasureLocation.none}
               />
-            </span>
+            </div>
           );
         },
       },