feat: add cluster status cell from fe-lib

Author: arunjaindev

src/components/ClusterNodes/ClusterList/ClusterListRow.tsx

@@ -21,12 +21,11 @@ import { ReactComponent as Error } from '@Icons/ic-error-exclamation.svg'
 import { importComponentFromFELibrary } from '@Components/common'
 import { getClusterChangeRedirectionUrl } from '@Components/ResourceBrowser/Utils'
 
-import { ClusterMapInitialStatus } from '../ClusterMapInitialStatus'
 import { CLUSTER_PROD_TYPE } from '../constants'
+import { ClusterStatus } from './ClusterStatus'
 import { ClusterListRowTypes } from './types'
 
 const CompareClusterButton = importComponentFromFELibrary('CompareClusterButton', null, 'function')
-const ClusterStatusCell = importComponentFromFELibrary('ClusterStatus', null, 'function')
 const KubeConfigButton = importComponentFromFELibrary('KubeConfigButton', null, 'function')
 const KubeConfigRowCheckbox = importComponentFromFELibrary('KubeConfigRowCheckbox', null, 'function')
 
@@ -49,15 +48,11 @@ const ClusterListRow = ({
     }
 
     const renderClusterStatus = ({ errorInNodeListing, status }: ClusterDetail) => {
-        if (!status && !errorInNodeListing) {
+        if (!status) {
             return null
         }
 
-        if (ClusterStatusCell && status) {
-            return <ClusterStatusCell status={status} errorInNodeListing={errorInNodeListing} />
-        }
-
-        return <ClusterMapInitialStatus errorInNodeListing={errorInNodeListing} />
+        return <ClusterStatus status={status} errorInNodeListing={errorInNodeListing} />
     }
 
     const isIdentifierSelected = !!bulkSelectionState[clusterData.name]

src/components/ClusterNodes/ClusterList/ClusterStatus/ClusterStatus.tsx

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ */
+
+import { StatusComponent, Tooltip } from '@devtron-labs/devtron-fe-common-lib'
+
+import { ClusterStatusProps } from './types'
+import { getClusterStatus } from './utils'
+
+export const ClusterStatus = ({ status, errorInNodeListing }: ClusterStatusProps) => (
+    <Tooltip alwaysShowTippyOnHover={!!errorInNodeListing} content={errorInNodeListing} interactive>
+        {/* This div is added to render the tooltip, otherwise it is not visible. */}
+        <div className="flex left">
+            <StatusComponent status={getClusterStatus(status)} hideIconTooltip message={status} />
+        </div>
+    </Tooltip>
+)

src/components/ClusterNodes/ClusterList/ClusterStatus/index.ts

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ */
+
+export * from './ClusterStatus'

src/components/ClusterNodes/ClusterList/ClusterStatus/types.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ */
+
+import { ClusterStatusType } from '@devtron-labs/devtron-fe-common-lib'
+
+export interface ClusterStatusProps {
+    status: ClusterStatusType
+    errorInNodeListing?: string
+}

src/components/ClusterNodes/ClusterList/ClusterStatus/utils.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ */
+
+import { ClusterStatusType, InstallationClusterStatus, StatusType } from '@devtron-labs/devtron-fe-common-lib'
+
+export const getClusterStatus = (status: ClusterStatusType | InstallationClusterStatus) => {
+    switch (status) {
+        case InstallationClusterStatus.Installed:
+        case InstallationClusterStatus.Updated:
+            return StatusType.SUCCEEDED
+
+        case InstallationClusterStatus.Deleting:
+            return StatusType.DELETING
+
+        case InstallationClusterStatus.Deleted:
+            return 'deleted'
+
+        case InstallationClusterStatus.Creating:
+        case InstallationClusterStatus.Updating:
+            return StatusType.PROGRESSING
+
+        case ClusterStatusType.CONNECTION_FAILED:
+        case InstallationClusterStatus.Failed:
+            return StatusType.FAILED
+
+        case ClusterStatusType.HEALTHY:
+            return StatusType.HEALTHY
+
+        default:
+            return StatusType.DEGRADED
+    }
+}

src/components/ClusterNodes/ClusterMapInitialStatus.tsx

@@ -279,10 +279,6 @@ export interface ClusterOverviewProps {
     addTab: UseTabsReturnType['addTab']
 }
 
-export interface ClusterMapInitialStatusType {
-    errorInNodeListing: string
-}
-
 export enum TaintsTableHeaderKeys {
     KEY = 'key',
     VALUE = 'value',