#RI-3366 - add primary node statistics table

Author: rsergeenko

redisinsight/ui/src/assets/img/overview/input.svg

@@ -2,14 +2,6 @@
   .euiPopoverTitle {
     text-transform: none !important;
   }
-
-  .euiButton {
-    min-width: 93px !important;
-
-    &:focus {
-      text-decoration: none !important;
-    }
-  }
 }
 
 .container {

redisinsight/ui/src/assets/img/overview/key.svg

@@ -1,24 +1,37 @@
 import KeyDarkIcon from 'uiSrc/assets/img/overview/key_dark.svg'
 import KeyTipIcon from 'uiSrc/assets/img/overview/key_tip.svg'
 import KeyLightIcon from 'uiSrc/assets/img/overview/key_light.svg'
+import { ReactComponent as KeyIconSvg } from 'uiSrc/assets/img/overview/key.svg'
+
 import MemoryDarkIcon from 'uiSrc/assets/img/overview/memory_dark.svg'
 import MemoryLightIcon from 'uiSrc/assets/img/overview/memory_light.svg'
 import MemoryTipIcon from 'uiSrc/assets/img/overview/memory_tip.svg'
+import { ReactComponent as MemoryIconSvg } from 'uiSrc/assets/img/overview/memory.svg'
+
 import MeasureLightIcon from 'uiSrc/assets/img/overview/measure_light.svg'
 import MeasureDarkIcon from 'uiSrc/assets/img/overview/measure_dark.svg'
 import MeasureTipIcon from 'uiSrc/assets/img/overview/measure_tip.svg'
+import { ReactComponent as MeasureIconSvg } from 'uiSrc/assets/img/overview/measure.svg'
+
 import TimeLightIcon from 'uiSrc/assets/img/overview/time_light.svg'
 import TimeDarkIcon from 'uiSrc/assets/img/overview/time_dark.svg'
 import TimeTipIcon from 'uiSrc/assets/img/overview/time_tip.svg'
+import { ReactComponent as TimeIconSvg } from 'uiSrc/assets/img/overview/time.svg'
+
 import UserDarkIcon from 'uiSrc/assets/img/overview/user_dark.svg'
 import UserLightIcon from 'uiSrc/assets/img/overview/user_light.svg'
 import UserTipIcon from 'uiSrc/assets/img/overview/user_tip.svg'
+import { ReactComponent as UserIconSvg } from 'uiSrc/assets/img/overview/user.svg'
+
 import InputTipIcon from 'uiSrc/assets/img/overview/input_tip.svg'
 import InputLightIcon from 'uiSrc/assets/img/overview/input_light.svg'
 import InputDarkIcon from 'uiSrc/assets/img/overview/input_dark.svg'
+import { ReactComponent as InputIconSvg } from 'uiSrc/assets/img/overview/input.svg'
+
 import OutputTipIcon from 'uiSrc/assets/img/overview/output_tip.svg'
 import OutputLightIcon from 'uiSrc/assets/img/overview/output_light.svg'
 import OutputDarkIcon from 'uiSrc/assets/img/overview/output_dark.svg'
+import { ReactComponent as OutputIconSvg } from 'uiSrc/assets/img/overview/output.svg'
 
 export {
   KeyDarkIcon,
@@ -42,4 +55,11 @@ export {
   OutputTipIcon,
   OutputLightIcon,
   OutputDarkIcon,
+  KeyIconSvg,
+  MemoryIconSvg,
+  MeasureIconSvg,
+  TimeIconSvg,
+  UserIconSvg,
+  InputIconSvg,
+  OutputIconSvg,
 }

redisinsight/ui/src/assets/img/overview/measure.svg

@@ -1,19 +1,27 @@
+import { orderBy } from 'lodash'
 import React, { useEffect, useState } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { useParams } from 'react-router-dom'
+import { ClusterNodeDetails } from 'src/modules/cluster-monitor/models'
 
 import InstanceHeader from 'uiSrc/components/instance-header'
+import ClusterNodesTable from 'uiSrc/pages/clusterDetails/components/cluser-nodes-table'
 import { clusterDetailsSelector, fetchClusterDetailsAction } from 'uiSrc/slices/analytics/clusterDetails'
 import { analyticsSettingsSelector, setAnalyticsViewTab } from 'uiSrc/slices/analytics/settings'
 import { appAnalyticsInfoSelector } from 'uiSrc/slices/app/info'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { AnalyticsViewTab } from 'uiSrc/slices/interfaces/analytics'
 import { sendPageViewTelemetry, TelemetryPageView } from 'uiSrc/telemetry'
-import { formatLongName, getDbIndex, setTitle, } from 'uiSrc/utils'
+import { formatLongName, getDbIndex, getLetterByIndex, Nullable, setTitle, } from 'uiSrc/utils'
 
 import ClusterDetailsHeader from './components/cluster-details-header'
 import styles from './styles.module.scss'
 
+export interface ModifiedClusterNodes extends ClusterNodeDetails {
+  letter: string
+  index: number
+}
+
 const POLLING_INTERVAL = 5_000
 
 const ClusterDetailsPage = () => {
@@ -25,9 +33,10 @@ const ClusterDetailsPage = () => {
   } = useSelector(connectedInstanceSelector)
   const { viewTab } = useSelector(analyticsSettingsSelector)
   const { identified: analyticsIdentified } = useSelector(appAnalyticsInfoSelector)
-  const { loading } = useSelector(clusterDetailsSelector)
+  const { loading, data } = useSelector(clusterDetailsSelector)
 
   const [isPageViewSent, setIsPageViewSent] = useState(false)
+  const [nodes, setNodes] = useState<Nullable<ModifiedClusterNodes[]>>(null)
 
   const dispatch = useDispatch()
 
@@ -61,6 +70,14 @@ const ClusterDetailsPage = () => {
     return () => clearInterval(interval)
   }, [instanceId, loading])
 
+  useEffect(() => {
+    if (data) {
+      const nodes = orderBy(data.nodes, ['asc', 'host'])
+      const modifiedNodes = nodes.map((d, index) => ({ ...d, letter: getLetterByIndex(index), index }))
+      setNodes(modifiedNodes)
+    }
+  }, [data])
+
   useEffect(() => {
     if (connectedInstanceName && !isPageViewSent && analyticsIdentified) {
       sendPageView(instanceId)
@@ -80,6 +97,7 @@ const ClusterDetailsPage = () => {
       <InstanceHeader />
       <div className={styles.main} data-testid="cluster-details-page">
         <ClusterDetailsHeader />
+        <ClusterNodesTable nodes={nodes} loading={loading} />
       </div>
     </>
   )