feat: use cluster map from fe-common

arunjaindev · arunjaindev · commit d2f529992f9c · 2025-07-21T15:30:43.000+05:30
diff --git a/.env b/.env
@@ -60,7 +60,6 @@ FEATURE_SWAP_TRAFFIC_ENABLE=false
 FEATURE_RB_SYNC_CLUSTER_ENABLE=true
 FEATURE_BULK_RESTART_WORKLOADS_FROM_RB=deployment,rollout,daemonset,statefulset
 FEATURE_DEFAULT_MERGE_STRATEGY=
-FEATURE_CLUSTER_MAP_ENABLE=true
 FEATURE_DEFAULT_LANDING_RB_ENABLE=false
 FEATURE_ACTION_AUDIOS_ENABLE=true
 FEATURE_APPLICATION_TEMPLATES_ENABLE=true
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterList.components.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterList.components.tsx
@@ -31,6 +31,7 @@ import {
     DEFAULT_CLUSTER_ID,
     EditDeleteClusterProps,
 } from './cluster.type'
+import { getBulletColorAccToStatus } from './cluster.util'
 import { ClusterEnvironmentDrawer } from './ClusterEnvironmentDrawer'
 import DeleteClusterConfirmationModal from './DeleteClusterConfirmationModal'
 import EditClusterDrawerContent from './EditClusterDrawerContent'
@@ -43,7 +44,7 @@ export const ClusterListCellComponent: FunctionComponent<
 > = ({
     field,
     row: {
-        data: { clusterId, clusterName, clusterType, envCount, serverUrl, clusterCategory, isVirtualCluster },
+        data: { clusterId, clusterName, clusterType, envCount, serverUrl, clusterCategory, isVirtualCluster, status },
     },
     isRowActive,
 }: TableCellComponentProps<ClusterRowData, FiltersTypeEnum.STATE, {}>) => {
@@ -94,11 +95,17 @@ export const ClusterListCellComponent: FunctionComponent<
         }
     }
 
+    const statusColor = getBulletColorAccToStatus(status)
+
     switch (field) {
         case ClusterListFields.ICON:
             return (
-                <span className="flex py-8">
+                <span className="flex py-8 dc__position-rel dc__overflow-hidden">
                     <Icon name="ic-bg-cluster" color={null} size={24} />
+                    <span
+                        className={`dc__position-abs icon-dim-10 dc__border-radius-50-per dc__right-2--neg dc__bottom-7 ${statusColor}`}
+                        style={{ border: '2px solid var(--N0)' }}
+                    />
                 </span>
             )
         case ClusterListFields.CLUSTER_NAME:
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterList.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterList.tsx
@@ -24,6 +24,7 @@ import {
     ButtonComponentType,
     ButtonStyleType,
     ButtonVariantType,
+    ClusterMap,
     ComponentSizeType,
     ErrorScreenManager,
     ErrorScreenNotAuthorized,
@@ -208,7 +209,7 @@ const ClusterList = () => {
                 },
             ],
             tableRows: filteredClusterList.map(
-                ({ clusterId, clusterName, isProd, category, serverUrl, isVirtualCluster }) => {
+                ({ clusterId, clusterName, isProd, category, serverUrl, isVirtualCluster, status }) => {
                     const envCount = clusterIdVsEnvMap[clusterId]?.length
                     return {
                         id: `${clusterName}-${clusterId}`,
@@ -220,6 +221,7 @@ const ClusterList = () => {
                             envCount: envCount ?? 0,
                             clusterCategory: (category?.label as string) ?? '',
                             isVirtualCluster,
+                            status,
                         },
                     }
                 },
@@ -303,18 +305,21 @@ const ClusterList = () => {
         }
 
         return (
-            <Table<ClusterRowData, FiltersTypeEnum.STATE, {}>
-                id="table__cluster-list"
-                columns={tableColumns}
-                rows={tableRows}
-                filtersVariant={FiltersTypeEnum.STATE}
-                paginationVariant={PaginationEnum.NOT_PAGINATED}
-                emptyStateConfig={null}
-                filter={() => true}
-                additionalFilterProps={{
-                    initialSortKey: 'clusterName',
-                }}
-            />
+            <>
+                <ClusterMap isLoading={isClusterEnvListLoading} filteredList={filteredClusterList} />
+                <Table<ClusterRowData, FiltersTypeEnum.STATE, {}>
+                    id="table__cluster-list"
+                    columns={tableColumns}
+                    rows={tableRows}
+                    filtersVariant={FiltersTypeEnum.STATE}
+                    paginationVariant={PaginationEnum.NOT_PAGINATED}
+                    emptyStateConfig={null}
+                    filter={() => true}
+                    additionalFilterProps={{
+                        initialSortKey: 'clusterName',
+                    }}
+                />
+            </>
         )
     }
 
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.service.ts b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.service.ts
@@ -25,17 +25,20 @@ export const getEnvironmentList = async (): Promise<Environment[]> => {
 
     return (result ?? []).map(
         // eslint-disable-next-line camelcase
-        ({ environment_name, cluster_id, cluster_name, prometheus_endpoint, default: isProd, namespace, ...res }) => ({
+        ({
+            environment_name: environmentName,
+            cluster_id: clusterId,
+            cluster_name: clusterName,
+            prometheus_endpoint: prometheusEndpoint,
+            default: isProd,
+            namespace,
+            ...res
+        }) => ({
             ...res,
-            // id,
-            // eslint-disable-next-line camelcase
-            environmentName: environment_name,
-            // eslint-disable-next-line camelcase
-            clusterId: cluster_id,
-            // eslint-disable-next-line camelcase
-            clusterName: cluster_name,
-            // eslint-disable-next-line camelcase
-            prometheusEndpoint: prometheus_endpoint ?? '',
+            environmentName,
+            clusterId,
+            clusterName,
+            prometheusEndpoint: prometheusEndpoint ?? '',
             isProd,
             namespace: namespace ?? '',
         }),
@@ -47,22 +50,30 @@ export const getClusterList = async (clusterIds?: number[]): Promise<Cluster[]>
     const { result } = await get<ClusterDTO[]>(url)
 
     // eslint-disable-next-line camelcase
-    return (result ?? []).map(({ id, server_url, cluster_name, prometheus_url, category, ...res }) => ({
-        ...res,
-        clusterId: id,
-        // eslint-disable-next-line camelcase
-        serverUrl: server_url,
-        // eslint-disable-next-line camelcase
-        clusterName: cluster_name,
-        // eslint-disable-next-line camelcase
-        prometheusUrl: prometheus_url,
-        category: category?.name
-            ? {
-                  label: category.name,
-                  value: category.id,
-              }
-            : null,
-    }))
+    return (result ?? []).map(
+        ({
+            id,
+            server_url: serverUrl,
+            cluster_name: clusterName,
+            prometheus_url: prometheusUrl,
+            category,
+            clusterStatus,
+            ...res
+        }) => ({
+            ...res,
+            clusterId: id,
+            serverUrl,
+            clusterName,
+            prometheusUrl,
+            category: category?.name
+                ? {
+                      label: category.name,
+                      value: category.id,
+                  }
+                : null,
+            status: clusterStatus,
+        }),
+    )
 }
 
 export function getCluster(id: number) {
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.type.ts b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.type.ts
@@ -302,15 +302,17 @@ export interface ClusterDTO {
 }
 
 export interface Cluster
-    extends Omit<ClusterDTO, 'server_url' | 'cluster_name' | 'prometheus_url' | 'id' | 'category'> {
+    extends Omit<ClusterDTO, 'server_url' | 'cluster_name' | 'prometheus_url' | 'id' | 'category' | 'clusterStatus'> {
     serverUrl: ClusterDTO['server_url']
     clusterName: ClusterDTO['cluster_name']
     prometheusUrl: ClusterDTO['prometheus_url']
     clusterId: ClusterDTO['id']
     category: SelectPickerOptionType
+    status: ClusterStatusType
 }
 
-export interface ClusterRowData extends Pick<Cluster, 'clusterId' | 'clusterName' | 'serverUrl' | 'isVirtualCluster'> {
+export interface ClusterRowData
+    extends Pick<Cluster, 'clusterId' | 'clusterName' | 'serverUrl' | 'isVirtualCluster' | 'status'> {
     envCount: number
     clusterType: string
     clusterCategory: string
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.util.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.util.tsx
@@ -16,6 +16,7 @@
 
 import {
     ClusterEnvironmentCategoryType,
+    ClusterStatusType,
     Icon,
     NodeTaintType,
     OptionType,
@@ -157,3 +158,14 @@ export const environmentNameComparator = (a: string, b: string, sortOrder: Sorti
     if (bIsEmpty) return sortOrder === SortingOrder.ASC ? -1 : 1
     return stringComparatorBySortOrder(a, b, sortOrder)
 }
+
+export const getBulletColorAccToStatus = (status: ClusterStatusType) => {
+    switch (status) {
+        case ClusterStatusType.HEALTHY:
+            return 'bcg-5'
+        case ClusterStatusType.UNHEALTHY:
+            return 'bcy-5'
+        default:
+            return 'bcr-5'
+    }
+}
diff --git a/src/components/ClusterNodes/ClusterList/ClusterSelectionBody.tsx b/src/components/ClusterNodes/ClusterList/ClusterSelectionBody.tsx
@@ -21,6 +21,7 @@ import {
     BulkSelectionIdentifiersType,
     ClusterDetail,
     ClusterFiltersType,
+    ClusterMap,
     GenericEmptyState,
     useBulkSelection,
     useUrlFilters,
@@ -38,7 +39,6 @@ import { ClusterSelectionBodyTypes } from './types'
 
 import '../clusterNodes.scss'
 
-const ClusterMap = importComponentFromFELibrary('ClusterMap', null, 'function')
 const ClusterBulkSelectionActionWidget = importComponentFromFELibrary(
     'ClusterBulkSelectionActionWidget',
     null,
@@ -94,14 +94,7 @@ const ClusterSelectionBody: React.FC<ClusterSelectionBodyTypes> = ({
 
     const renderClusterList = () => (
         <div className="cluster-list-main-container flex-grow-1 flexbox-col bg__primary dc__overflow-auto">
-            {ClusterMap && window._env_.FEATURE_CLUSTER_MAP_ENABLE && (
-                <ClusterMap
-                    isLoading={clusterListLoader}
-                    filteredList={filteredList}
-                    clusterListLoader={clusterListLoader}
-                    isProportional
-                />
-            )}
+            <ClusterMap isLoading={clusterListLoader} filteredList={filteredList} />
             {!filteredList?.length ? (
                 <div className="flex-grow-1">
                     <ClusterNodeEmptyState actionHandler={clearFilters} />
diff --git a/src/css/base.scss b/src/css/base.scss
@@ -386,6 +386,10 @@ a:focus {
     bottom: 0;
 }
 
+.dc__bottom-7 {
+    bottom: 7px;
+}
+
 .dc__bottom-16 {
     bottom: 16px;
 }
@@ -406,6 +410,10 @@ a:focus {
     right: 0;
 }
 
+.dc__right-2--neg {
+    right: -2px;
+}
+
 .dc__right-3--neg {
     right: -3px;
 }
diff --git a/src/index.tsx b/src/index.tsx
@@ -167,7 +167,6 @@ if (!window || !window._env_) {
         FEATURE_PROMO_EMBEDDED_IFRAME_URL: '',
         FEATURE_DEFAULT_MERGE_STRATEGY: OverrideMergeStrategyType.PATCH,
         FEATURE_DEFAULT_LANDING_RB_ENABLE: false,
-        FEATURE_CLUSTER_MAP_ENABLE: true,
         FEATURE_ACTION_AUDIOS_ENABLE: true,
         FEATURE_APPLICATION_TEMPLATES_ENABLE: true,
         FEATURE_DEFAULT_AUTHENTICATED_VIEW_ENABLE: false,

Original file line number	Diff line number	Diff line change
`@@ -386,6 +386,10 @@ a:focus {`
`386`	`386`	`bottom: 0;`
`387`	`387`	`}`
`388`	`388`
	`389`	`+.dc__bottom-7 {`
	`390`	`+ bottom: 7px;`
	`391`	`+}`
	`392`	`+`
`389`	`393`	`.dc__bottom-16 {`
`390`	`394`	`bottom: 16px;`
`391`	`395`	`}`
`@@ -406,6 +410,10 @@ a:focus {`
`406`	`410`	`right: 0;`
`407`	`411`	`}`
`408`	`412`
	`413`	`+.dc__right-2--neg {`
	`414`	`+ right: -2px;`
	`415`	`+}`
	`416`	`+`
`409`	`417`	`.dc__right-3--neg {`
`410`	`418`	`right: -3px;`
`411`	`419`	`}`