#RI-3477 - add colors to the overview table

Author: rsergeenko

redisinsight/ui/src/pages/clusterDetails/components/cluser-nodes-table/ClusterNodesTable.spec.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { ModifiedClusterNodes } from 'uiSrc/pages/clusterDetails/ClusterDetailsPage'
 import { getLetterByIndex } from 'uiSrc/utils'
+import { rgb } from 'uiSrc/utils/colors'
 import { render, screen } from 'uiSrc/utils/test-utils'
 
 import ClusterNodesTable from './ClusterNodesTable'
@@ -107,4 +108,11 @@ describe('ClusterNodesTable', () => {
     render(<ClusterNodesTable nodes={mockNodes} loading={false} />)
     expect(screen.queryByTestId('opsPerSecond-value-max')).not.toBeInTheDocument()
   })
+
+  it('should render background color for each node', () => {
+    render(<ClusterNodesTable nodes={mockNodes} loading={false} />)
+    mockNodes.forEach(({ letter, color }) => {
+      expect(screen.getByTestId(`node-color-${letter}`)).toHaveStyle({ 'background-color': rgb(color) })
+    })
+  })
 })

redisinsight/ui/src/pages/clusterDetails/components/cluser-nodes-table/ClusterNodesTable.tsx

@@ -20,6 +20,7 @@ import {
 } from 'uiSrc/components/database-overview/components/icons'
 import { ModifiedClusterNodes } from 'uiSrc/pages/clusterDetails/ClusterDetailsPage'
 import { formatBytes, Nullable } from 'uiSrc/utils'
+import { rgb } from 'uiSrc/utils/colors'
 import { numberWithSpaces } from 'uiSrc/utils/numbers'
 
 import styles from './styles.module.scss'
@@ -49,11 +50,18 @@ const ClusterNodesTable = ({ nodes, loading }: { nodes: Nullable<ModifiedCluster
       field: 'host',
       dataType: 'string',
       sortable: ({ index }) => index,
-      render: (value: number, { letter, port }) => (
-        <div className={styles.hostPort}>
-          <span className={styles.nodeName} data-testid="node-letter">{letter}</span>
-          <span>{value}:{port}</span>
-        </div>
+      render: (value: number, { letter, port, color }) => (
+        <>
+          <div
+            className={styles.nodeColor}
+            data-testid={`node-color-${letter}`}
+            style={{ backgroundColor: rgb(color) }}
+          />
+          <div className={styles.hostPort}>
+            <span className={styles.nodeName} data-testid="node-letter">{letter}</span>
+            <span>{value}:{port}</span>
+          </div>
+        </>
       )
     },
     {

redisinsight/ui/src/pages/clusterDetails/components/cluser-nodes-table/styles.module.scss

@@ -95,6 +95,7 @@ $breakpoint-table: 1232px;
     }
 
     .euiTableCellContent {
+      position: relative;
       padding: 12px 12px 12px 24px;
       font: normal normal 500 16px/18px Inconsolata;
 
@@ -171,4 +172,12 @@ $breakpoint-table: 1232px;
     display: inline-flex;
     font: normal normal normal 13px/18px Graphik, sans-serif !important;
   }
+
+  .nodeColor {
+    position: absolute;
+    left: 0;
+    top: 1px;
+    bottom: 1px;
+    width: 3px;
+  }
 }