feat(Single cluster page): Add a new column Impacted (#366)

RedHatInsights · Jul 21, 2022 · 2362508 · 2362508
1 parent 281f5c0
commit 2362508
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 20 deletions.
diff --git a/...ts-aggregator/v2/cluster/dcb95bbf-8673-4f3a-a63c-12d4a530aa6f/reports-disabled-false.json b/...ts-aggregator/v2/cluster/dcb95bbf-8673-4f3a-a63c-12d4a530aa6f/reports-disabled-false.json
@@ -21,6 +21,7 @@
         "disabled_at": "2021-09-14T12:48:22Z",
         "internal": false,
         "user_vote": 1,
+        "impacted": "2022-06-13T22:00:00.000Z",
         "extra_data": {
           "error_key": "ERROR_KEY_N1",
           "op": {
@@ -70,6 +71,7 @@
         "disabled_at": "2021-09-14T12:48:22Z",
         "internal": false,
         "user_vote": 1,
+        "impacted": "2022-06-26T22:00:00.000Z",
         "extra_data": {
           "error_key": "ERROR_KEY_N2",
           "op": {
@@ -119,6 +121,7 @@
         "disabled_at": "2021-09-14T12:48:22Z",
         "internal": false,
         "user_vote": 1,
+        "impacted": "2022-06-26T22:00:00.000Z",
         "extra_data": {
           "error_key": "ERROR_KEY_N3",
           "op": {
@@ -168,6 +171,7 @@
         "disabled_at": "2021-09-14T12:48:22Z",
         "internal": false,
         "user_vote": 1,
+        "impacted": "2022-06-26T22:00:00.000Z",
         "extra_data": {
           "error_key": "ERROR_KEY_N4",
           "op": {
@@ -217,6 +221,7 @@
         "disabled_at": "2021-09-14T12:48:22Z",
         "internal": false,
         "user_vote": 1,
+        "impacted": "2022-06-26T22:00:00.000Z",
         "extra_data": {
           "error_key": "ERROR_KEY_N5",
           "op": {
@@ -266,6 +271,7 @@
         "disabled_at": "2021-09-14T12:48:22Z",
         "internal": false,
         "user_vote": 1,
+        "impacted": "2022-06-26T22:00:00.000Z",
         "extra_data": {
           "error_key": "ERROR_KEY_N6",
           "op": {
@@ -300,7 +306,7 @@
         },
         "tags": ["security"]
       }
-    ]    
+    ]
   },
   "status": "ok"
 }
diff --git a/src/AppConstants.js b/src/AppConstants.js
@@ -256,6 +256,7 @@ export const RECS_LIST_COLUMNS_KEYS = [
   'total_risk',
   'clusters',
 ];
+export const CLUSTER_RULES_IMPACTED_CELL = 3;
 export const RECS_LIST_NAME_CELL = 1;
 export const RECS_LIST_MODIFIED_CELL = 2;
 export const RECS_LIST_CATEGORY_CELL = 3;
@@ -289,6 +290,7 @@ export const CLUSTER_RULES_COLUMNS_KEYS = [
   '', // reserved for expand button
   'description',
   'created_at',
+  'impacted',
   'total_risk',
 ];
 export const CLUSTER_RULES_COLUMNS = [
@@ -300,6 +302,10 @@ export const CLUSTER_RULES_COLUMNS = [
     title: intl.formatMessage(messages.modified),
     transforms: [sortable, cellWidth(15)],
   },
+  {
+    title: intl.formatMessage(messages.impacted),
+    transforms: [sortable, cellWidth(15)],
+  },
   {
     title: intl.formatMessage(messages.totalRisk),
     transforms: [sortable, cellWidth(15)],

diff --git a/src/Components/ClusterRules/ClusterRules.cy.js b/src/Components/ClusterRules/ClusterRules.cy.js
@@ -205,24 +205,25 @@ describe('cluster rules table', () => {
 
   describe('sorting', () => {
     // all tables must preserve original ordering
-    _.zip(['description', 'created_at', 'total_risk'], TABLE_HEADERS).forEach(
-      ([category, label]) => {
-        SORTING_ORDERS.forEach((order) => {
-          it(`${order} by ${label}`, () => {
-            checkSorting(
-              data,
-              category,
-              label,
-              order,
-              'Description',
-              'description',
-              RULES_ENABLED,
-              null
-            );
-          });
+    _.zip(
+      ['description', 'created_at', 'impacted', 'total_risk'],
+      TABLE_HEADERS
+    ).forEach(([category, label]) => {
+      SORTING_ORDERS.forEach((order) => {
+        it(`${order} by ${label}`, () => {
+          checkSorting(
+            data,
+            category,
+            label,
+            order,
+            'Description',
+            'description',
+            RULES_ENABLED,
+            null
+          );
         });
-      }
-    );
+      });
+    });
   });
 
   describe('filtering', () => {

diff --git a/src/Components/ClusterRules/ClusterRules.js b/src/Components/ClusterRules/ClusterRules.js
@@ -28,6 +28,7 @@ import {
   CLUSTER_RULES_COLUMNS_KEYS,
   FILTER_CATEGORIES,
   CLUSTER_RULES_COLUMNS,
+  CLUSTER_RULES_IMPACTED_CELL,
 } from '../../AppConstants';
 import { ReportDetails } from '@redhat-cloud-services/frontend-components-advisor-components';
 import RuleLabels from '../Labels/RuleLabels';
@@ -175,6 +176,36 @@ const ClusterRules = ({ cluster }) => {
                 </div>
               ),
             },
+            value.impacted
+              ? {
+                  title: (
+                    <div key={key}>
+                      <DateFormat
+                        extraTitle={`${intl.formatMessage(
+                          messages.impacted
+                        )}: `}
+                        date={value.impacted}
+                        type="relative"
+                        tooltipProps={{ position: TooltipPosition.bottom }}
+                      />
+                    </div>
+                  ),
+                }
+              : {
+                  title: (
+                    <Tooltip
+                      key={key}
+                      content={
+                        <span>
+                          {intl.formatMessage(messages.impacted) + ': '}
+                          {intl.formatMessage(messages.nA)}
+                        </span>
+                      }
+                    >
+                      <span>{intl.formatMessage(messages.nA)}</span>
+                    </Tooltip>
+                  ),
+                },
             {
               title: (
                 <div key={key} style={{ verticalAlign: 'top' }}>
@@ -239,8 +270,13 @@ const ClusterRules = ({ cluster }) => {
     if (index >= 0 && !firstRule) {
       const d = direction === SortByDirection.asc ? 1 : -1;
       sortingRows = [...rows].sort((firstItem, secondItem) => {
-        const fst = firstItem[0].rule[CLUSTER_RULES_COLUMNS_KEYS[index]];
-        const snd = secondItem[0].rule[CLUSTER_RULES_COLUMNS_KEYS[index]];
+        let fst = firstItem[0].rule[CLUSTER_RULES_COLUMNS_KEYS[index]];
+        let snd = secondItem[0].rule[CLUSTER_RULES_COLUMNS_KEYS[index]];
+        if (index === CLUSTER_RULES_IMPACTED_CELL) {
+          //sorting for the impacted column
+          fst = new Date(firstItem[0].rule.impacted || 0);
+          snd = new Date(secondItem[0].rule.impacted || 0);
+        }
         return fst > snd ? d : snd > fst ? -d : 0;
       });
     } else if (firstRule) {