Merge pull request #2866 from devtron-labs/feat/cluster-status

feat: add cluster status cell from fe-lib

Author: arunjaindev

src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterList.components.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react'
+import { FunctionComponent, useEffect, useRef } from 'react'
 import { generatePath, Link, useHistory, useLocation, useParams } from 'react-router-dom'
 
 import {
@@ -18,6 +18,7 @@ import {
     noop,
     stopPropagation,
     TableCellComponentProps,
+    TableSignalEnum,
     Tooltip,
     URLS as COMMON_URLS,
 } from '@devtron-labs/devtron-fe-common-lib'
@@ -200,7 +201,26 @@ export const ClusterListCellComponent: FunctionComponent<
         data: { clusterId, clusterName, clusterType, envCount, serverUrl, clusterCategory, isVirtualCluster, status },
     },
     isRowActive,
+    signals,
 }: TableCellComponentProps<ClusterRowData, FiltersTypeEnum.STATE, {}>) => {
+    const linkRef = useRef<HTMLAnchorElement>(null)
+
+    useEffect(() => {
+        const handleEnter = ({ detail: { activeRowData } }) => {
+            if (activeRowData.data.clusterId === clusterId) {
+                linkRef.current?.click()
+            }
+        }
+
+        if (isRowActive) {
+            signals.addEventListener(TableSignalEnum.ENTER_PRESSED, handleEnter)
+        }
+
+        return () => {
+            signals.removeEventListener(TableSignalEnum.ENTER_PRESSED, handleEnter)
+        }
+    }, [isRowActive])
+
     switch (field) {
         case ClusterListFields.ICON:
             return (
@@ -211,6 +231,7 @@ export const ClusterListCellComponent: FunctionComponent<
         case ClusterListFields.CLUSTER_NAME:
             return (
                 <Link
+                    ref={linkRef}
                     to={getUrlWithSearchParams(URLS.GLOBAL_CONFIG_CLUSTER, {
                         selectedTab: ClusterEnvTabs.ENVIRONMENTS,
                         clusterId,

src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterList.tsx

@@ -104,6 +104,10 @@ const ClusterList = () => {
         initialSortKey: EnvListSortableKeys.ENV_NAME,
     })
 
+    const clearSearch = () => {
+        handleSearch('')
+    }
+
     const [clusterListLoading, clusterListResult, clusterListError, reloadClusterList] = useAsync(
         getClusterList,
         [],
@@ -263,7 +267,7 @@ const ClusterList = () => {
     const handleChangeTab = (selectedSegment: OptionType<ClusterEnvTabs>) => {
         updateSearchParams({ selectedTab: selectedSegment.value, clusterId: null })
         if (searchKey) {
-            handleSearch('')
+            clearSearch()
         }
         if (showUnmappedEnvs) {
             setShowUnmappedEnvs(false)
@@ -288,6 +292,13 @@ const ClusterList = () => {
         }
 
         if (isEnvironmentsView) {
+            const allEnvsList = Object.values(clusterIdVsEnvMap).flat()
+
+            // In case no cluster is selected on env list page and no env is found, show global empty state
+            if (!filterClusterId && allEnvsList.filter((env) => env.environmentName.includes(searchKey)).length === 0) {
+                return <GenericFilterEmptyState handleClearFilters={clearSearch} />
+            }
+
             return (
                 <EnvironmentList
                     clusterIdVsEnvMap={clusterIdVsEnvMap}
@@ -303,24 +314,26 @@ const ClusterList = () => {
         }
 
         if (searchKey && !filteredClusterList.length) {
-            return <GenericFilterEmptyState handleClearFilters={() => handleSearch('')} />
+            return <GenericFilterEmptyState handleClearFilters={clearSearch} />
         }
 
         return (
             <>
                 <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',
-                    }}
-                />
+                <div className="cluster-table-wrapper">
+                    <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',
+                        }}
+                    />
+                </div>
             </>
         )
     }
@@ -378,6 +391,7 @@ const ClusterList = () => {
                             }}
                             handleEnter={handleSearch}
                             size={ComponentSizeType.medium}
+                            keyboardShortcut="/"
                         />
                         {ManageCategoryButton && <ManageCategoryButton search={search} />}
                         <Button

src/Pages/GlobalConfigurations/ClustersAndEnvironments/EnvironmentList.tsx

@@ -48,6 +48,7 @@ const ClustersEnvironmentsList = ({
     clusterDetails,
     environments,
     filterConfig: { sortBy, searchKey, sortOrder },
+    filterClusterId,
     showUnmappedEnvs,
     setDeleteEnvConfig: setDeleteEnvId,
     setEditEnvConfig: setEditEnvId,
@@ -135,6 +136,26 @@ const ClustersEnvironmentsList = ({
         })
     }
 
+    const sortedFilteredList = namespaceEnvList
+        .filter((env) => env.environmentName.includes(searchKey))
+        .sort((a, b) => {
+            switch (sortBy) {
+                case EnvListSortableKeys.ENV_CATEGORY:
+                    return stringComparatorBySortOrder(a.category, b.category, sortOrder)
+                case EnvListSortableKeys.ENV_NAMESPACE:
+                    return stringComparatorBySortOrder(a.namespace, b.namespace, sortOrder)
+                case EnvListSortableKeys.ENV_TYPE:
+                    return stringComparatorBySortOrder(a.envType, b.envType, sortOrder)
+                case EnvListSortableKeys.ENV_NAME:
+                default:
+                    return environmentNameComparator(
+                        a.environmentName,
+                        b.environmentName,
+                        sortOrder || SortingOrder.ASC,
+                    )
+            }
+        })
+
     const renderNamespaceEnvList = () => {
         if (namespaceListLoading) {
             return <ClusterEnvLoader />
@@ -144,26 +165,7 @@ const ClustersEnvironmentsList = ({
             return <GenericSectionErrorState reload={reloadNamespaces} />
         }
 
-        const sortedFilteredList = namespaceEnvList
-            .filter((env) => env.environmentName.includes(searchKey))
-            .sort((a, b) => {
-                switch (sortBy) {
-                    case EnvListSortableKeys.ENV_CATEGORY:
-                        return stringComparatorBySortOrder(a.category, b.category, sortOrder)
-                    case EnvListSortableKeys.ENV_NAMESPACE:
-                        return stringComparatorBySortOrder(a.namespace, b.namespace, sortOrder)
-                    case EnvListSortableKeys.ENV_TYPE:
-                        return stringComparatorBySortOrder(a.envType, b.envType, sortOrder)
-                    case EnvListSortableKeys.ENV_NAME:
-                    default:
-                        return environmentNameComparator(
-                            a.environmentName,
-                            b.environmentName,
-                            sortOrder || SortingOrder.ASC,
-                        )
-                }
-            })
-
+        // Empty state when a particular cluster is selected
         if (searchKey && !sortedFilteredList.length) {
             return (
                 <div className="p-16">
@@ -272,6 +274,11 @@ const ClustersEnvironmentsList = ({
         )
     }
 
+    // If no cluster is selected and no environments are found, return null
+    if (!filterClusterId && !sortedFilteredList.length) {
+        return null
+    }
+
     return (
         <>
             {/* Cluster metadata */}
@@ -449,6 +456,7 @@ const EnvironmentList = ({
                         showUnmappedEnvs={showUnmappedEnvs}
                         setDeleteEnvConfig={setDeleteEnvConfig}
                         setEditEnvConfig={setEditEnvConfig}
+                        filterClusterId={filterClusterId}
                     />
                 ))}
             {deleteEnvConfig && (

src/Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.scss

@@ -96,4 +96,14 @@
 .cluster-metadata-header {
     grid-template-columns: 24px 200px 200px 100px 100px 1fr;
     grid-column-gap: 16px;
+}
+
+.cluster-table-wrapper {
+    // Apply to every first child up to 4 levels deep
+    > :first-child,
+    > :first-child > :first-child,
+    > :first-child > :first-child > :first-child,
+    > :first-child > :first-child > :first-child > :first-child {
+        overflow: visible !important;
+    }
 }

src/Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.type.ts

@@ -375,7 +375,8 @@ export type DeleteEnvConfigType = Pick<EnvNamespaceRowType, 'envId' | 'clusterId
 
 export type EditEnvConfigType = Pick<EnvNamespaceRowType, 'envId' | 'clusterId'> & { isVirtualCluster: boolean }
 
-export interface ClusterEnvListProps extends Pick<EnvironmentListProps, 'filterConfig' | 'showUnmappedEnvs'> {
+export interface ClusterEnvListProps
+    extends Pick<EnvironmentListProps, 'filterConfig' | 'showUnmappedEnvs' | 'filterClusterId'> {
     clusterDetails: Cluster
     environments: Environment[]
     setDeleteEnvConfig: Dispatch<SetStateAction<DeleteEnvConfigType>>

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
+    }
+}