Merge pull request #2935 from devtron-labs/chore/move-cluster-status-and-service

chore: move cluster status and service

Author: AbhishekA1509

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.20.3-pre-4",
+        "@devtron-labs/devtron-fe-common-lib": "1.20.3-pre-7",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx

@@ -24,6 +24,7 @@ import {
     ComponentSizeType,
     CustomInput,
     Drawer,
+    getDetailedClusterList as getClusterDetails,
     getSelectPickerOptionByValue,
     Icon,
     ModalSidebarPanel,
@@ -47,12 +48,7 @@ import { getClusterListing } from '@Components/ResourceBrowser/ResourceBrowser.s
 import { getNamespaceFromLocalStorage } from '@Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.util'
 import { ADD_ENVIRONMENT_FORM_LOCAL_STORAGE_KEY } from '@Pages/GlobalConfigurations/ClustersAndEnvironments/constants'
 
-import {
-    deleteEnvironment,
-    getClusterList as getClusterDetails,
-    saveEnvironment,
-    updateEnvironment,
-} from '../cluster.service'
+import { deleteEnvironment, saveEnvironment, updateEnvironment } from '../cluster.service'
 import { EnvironmentDeleteComponent } from '../EnvironmentDeleteComponent'
 import { clusterEnvironmentDrawerFormValidationSchema } from './schema'
 import { ClusterNamespacesDTO, EnvDrawerProps, EnvironmentFormType } from './types'

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

@@ -23,7 +23,8 @@ import {
     Button,
     ButtonStyleType,
     ButtonVariantType,
-    ClusterStatusType,
+    ClusterDetailListType,
+    ClusterStatusIcon,
     ComponentSizeType,
     Drawer,
     FiltersTypeEnum,
@@ -43,42 +44,19 @@ import { importComponentFromFELibrary } from '@Components/common'
 import { URLS } from '@Config/routes'
 
 import {
-    Cluster,
     ClusterEnvTabs,
     ClusterListFields,
     ClusterRowData,
     DEFAULT_CLUSTER_ID,
     EditDeleteClusterProps,
 } from './cluster.type'
-import { getBulletColorAccToStatus } from './cluster.util'
 import { ClusterEnvironmentDrawer } from './ClusterEnvironmentDrawer'
 import DeleteClusterConfirmationModal from './DeleteClusterConfirmationModal'
 import EditClusterDrawerContent from './EditClusterDrawerContent'
 
 const HibernationRulesModal = importComponentFromFELibrary('HibernationRulesModal', null, 'function')
 const VirtualClusterForm = importComponentFromFELibrary('VirtualClusterForm', null, 'function')
 
-export const ClusterIconWithStatus = ({
-    clusterStatus,
-    isVirtualCluster,
-}: {
-    clusterStatus: ClusterStatusType
-    isVirtualCluster: boolean
-}) => {
-    const statusColor = getBulletColorAccToStatus(clusterStatus)
-    return (
-        <span className="dc__position-rel dc__overflow-hidden icon-dim-24">
-            <Icon name="ic-bg-cluster" color={null} size={24} />
-            {!isVirtualCluster && (
-                <span
-                    className={`dc__position-abs dc__top-16 icon-dim-10 dc__border-radius-50-per dc__right-2--neg ${statusColor}`}
-                    style={{ border: '2px solid var(--N0)' }}
-                />
-            )}
-        </span>
-    )
-}
-
 export const ClusterActions = ({ clusterId, isVirtualCluster }: { clusterId: number; isVirtualCluster: boolean }) => {
     const { push } = useHistory()
     const { search } = useLocation()
@@ -241,7 +219,7 @@ export const ClusterListCellComponent: FunctionComponent<
         case ClusterListFields.ICON:
             return (
                 <div className="flex left py-10">
-                    <ClusterIconWithStatus clusterStatus={status} isVirtualCluster={isVirtualCluster} />
+                    <ClusterStatusIcon clusterStatus={status} isVirtualCluster={isVirtualCluster} />
                 </div>
             )
         case ClusterListFields.CLUSTER_NAME:
@@ -314,7 +292,7 @@ export const AddEnvironmentFromClusterName = ({
     handleClose,
     clusterList,
 }: {
-    clusterList: Cluster[]
+    clusterList: ClusterDetailListType[]
     reloadEnvironments: () => void
     handleClose: () => void
 }) => {

src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterList.tsx

@@ -31,6 +31,7 @@ import {
     FiltersTypeEnum,
     GenericEmptyState,
     GenericFilterEmptyState,
+    getDetailedClusterList,
     getSelectPickerOptionByValue,
     Icon,
     numberComparatorBySortOrder,
@@ -54,7 +55,7 @@ import { importComponentFromFELibrary } from '@Components/common'
 import { URLS } from '@Config/routes'
 import AddClusterButton from '@Pages/Shared/AddEditCluster/AddClusterButton'
 
-import { getClusterList, getEnvironmentList } from './cluster.service'
+import { getEnvironmentList } from './cluster.service'
 import {
     ClusterEnvFilterType,
     ClusterEnvTabs,
@@ -103,7 +104,7 @@ const ClusterList = () => {
     })
 
     const [clusterListLoading, clusterListResult, clusterListError, reloadClusterList] = useAsync(
-        getClusterList,
+        getDetailedClusterList,
         [],
         isSuperAdmin,
     )

src/Pages/GlobalConfigurations/ClustersAndEnvironments/EnvironmentList.tsx

@@ -21,6 +21,7 @@ import {
     Button,
     ButtonStyleType,
     ButtonVariantType,
+    ClusterStatusIcon,
     ComponentSizeType,
     DC_DELETE_SUBTITLES,
     DeleteConfirmationModal,
@@ -52,7 +53,7 @@ import {
 } from './cluster.type'
 import { environmentNameComparator, getNamespaceCount, getSelectParsedCategory } from './cluster.util'
 import { ClusterEnvironmentDrawer } from './ClusterEnvironmentDrawer'
-import { ClusterActions, ClusterEnvLoader, ClusterIconWithStatus } from './ClusterList.components'
+import { ClusterActions, ClusterEnvLoader } from './ClusterList.components'
 import { ADD_ENVIRONMENT_FORM_LOCAL_STORAGE_KEY } from './constants'
 
 import './cluster.scss'
@@ -302,7 +303,7 @@ const ClustersEnvironmentsList = ({
                 className="dc__zi-1 px-20 py-6 bg__secondary dc__grid dc__align-items-center cluster-metadata-header dc__gap-16 dc__content-start fs-12 lh-20 cn-7 dc__position-sticky"
                 style={{ top: '37px' }}
             >
-                <ClusterIconWithStatus clusterStatus={status} isVirtualCluster={isVirtualCluster} />
+                <ClusterStatusIcon clusterStatus={status} isVirtualCluster={isVirtualCluster} />
                 <Tooltip
                     content={`${clusterName} (${environments.length} Environments)`}
                     alwaysShowTippyOnHover

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

@@ -14,18 +14,11 @@
  * limitations under the License.
  */
 
-import {
-    get,
-    getUrlWithSearchParams,
-    post,
-    put,
-    stringComparatorBySortOrder,
-    trash,
-} from '@devtron-labs/devtron-fe-common-lib'
+import { get, post, put, trash } from '@devtron-labs/devtron-fe-common-lib'
 
 import { Routes } from '@Config/constants'
 
-import { Cluster, ClusterDTO, DeleteClusterPayload, Environment, EnvironmentDTO } from './cluster.type'
+import { DeleteClusterPayload, Environment, EnvironmentDTO } from './cluster.type'
 
 export const getEnvironmentList = async (): Promise<Environment[]> => {
     const { result } = await get<EnvironmentDTO[]>(Routes.ENVIRONMENT)
@@ -52,39 +45,6 @@ export const getEnvironmentList = async (): Promise<Environment[]> => {
     )
 }
 
-export const getClusterList = async (clusterIds?: number[]): Promise<Cluster[]> => {
-    const url = getUrlWithSearchParams(Routes.CLUSTER, { clusterId: clusterIds?.join() })
-    const { result } = await get<ClusterDTO[]>(url)
-
-    // eslint-disable-next-line camelcase
-    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,
-            }),
-        )
-        .sort((a, b) => stringComparatorBySortOrder(a.clusterName, b.clusterName))
-}
-
 export function getCluster(id: number) {
     const URL = `${Routes.CLUSTER}?id=${id}`
     return get(URL)

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

@@ -18,8 +18,8 @@ import { Dispatch, SetStateAction } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 
 import {
+    ClusterDetailListType,
     ClusterEnvironmentCategoryType,
-    ClusterStatusType,
     EnvListMinDTO,
     FiltersTypeEnum,
     OptionType,
@@ -216,7 +216,7 @@ export interface AddClusterFormPrefilledInfoType {
 export interface AddEnvironmentFormPrefilledInfoType {
     namespace: string
 }
-export interface DeleteClusterConfirmationModalProps extends Pick<Cluster, 'clusterName'> {
+export interface DeleteClusterConfirmationModalProps extends Pick<ClusterDetailListType, 'clusterName'> {
     clusterId: string
     handleClose: () => void
     installationId: string
@@ -236,7 +236,7 @@ export interface UserNameDropDownListProps {
 
 export interface EditClusterDrawerContentProps
     extends Pick<
-        Cluster,
+        ClusterDetailListType,
         | 'sshTunnelConfig'
         | 'insecureSkipTlsVerify'
         | 'category'
@@ -280,35 +280,8 @@ export interface Environment
     clusterName: EnvironmentDTO['cluster_name']
 }
 
-export interface ClusterDTO {
-    category: ClusterEnvironmentCategoryType
-    cluster_name: string
-    description: string
-    id: number
-    insecureSkipTlsVerify: boolean
-    installationId: number
-    isProd: boolean
-    isVirtualCluster: boolean
-    server_url: string
-    sshTunnelConfig: any
-    prometheus_url: string
-    proxyUrl: string
-    toConnectWithSSHTunnel: boolean
-    clusterStatus: ClusterStatusType
-}
-
-export interface Cluster
-    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' | 'status'> {
+    extends Pick<ClusterDetailListType, 'clusterId' | 'clusterName' | 'serverUrl' | 'isVirtualCluster' | 'status'> {
     envCount: number
     clusterType: string
     clusterCategory: string
@@ -358,7 +331,7 @@ export type EnvNamespaceRowType = {
 
 export interface EnvironmentListProps {
     isLoading: boolean
-    clusterList: Cluster[]
+    clusterList: ClusterDetailListType[]
     clusterIdVsEnvMap: Record<number, Environment[]>
     showUnmappedEnvs: boolean
     filterConfig: Pick<UseUrlFiltersReturnType<EnvListSortableKeys>, 'sortBy' | 'sortOrder' | 'searchKey'>
@@ -373,7 +346,7 @@ export type EditEnvConfigType = Pick<EnvNamespaceRowType, 'envId' | 'clusterId'>
 
 export interface ClusterEnvListProps
     extends Pick<EnvironmentListProps, 'filterConfig' | 'showUnmappedEnvs' | 'filterClusterId'> {
-    clusterDetails: Cluster
+    clusterDetails: ClusterDetailListType
     environments: Environment[]
     setDeleteEnvConfig: Dispatch<SetStateAction<DeleteEnvConfigType>>
     setEditEnvConfig: Dispatch<SetStateAction<EditEnvConfigType>>
@@ -390,7 +363,7 @@ export interface EditEnvProps {
 export interface DeleteEnvProps extends Omit<EditEnvProps, 'isVirtualCluster'> {}
 
 export interface EditDeleteClusterProps {
-    clusterList: Cluster[]
+    clusterList: ClusterDetailListType[]
     reloadClusterList: () => void
     handleClose: () => void
 }

src/Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.util.tsx

@@ -16,7 +16,6 @@
 
 import {
     ClusterEnvironmentCategoryType,
-    ClusterStatusType,
     NodeTaintType,
     OptionType,
     SelectPickerOptionType,
@@ -125,17 +124,6 @@ export const environmentNameComparator = (a: string, b: string, sortOrder: Sorti
     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'
-    }
-}
-
 export const getNamespaceCount = ({
     isVirtualCluster,
     envList,

yarn.lock

@@ -1722,9 +1722,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@devtron-labs/devtron-fe-common-lib@npm:1.20.3-pre-4":
-  version: 1.20.3-pre-4
-  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.20.3-pre-4"
+"@devtron-labs/devtron-fe-common-lib@npm:1.20.3-pre-7":
+  version: 1.20.3-pre-7
+  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.20.3-pre-7"
   dependencies:
     "@codemirror/autocomplete": "npm:6.18.6"
     "@codemirror/lang-json": "npm:6.0.1"
@@ -1776,7 +1776,7 @@ __metadata:
     react-select: 5.8.0
     rxjs: ^7.8.1
     yaml: ^2.4.1
-  checksum: 10c0/f168245cf827a8e2508b248dd45f5140cf195992bf3ee2af2589af2ede657fac9fc370d88b6fdc18161bbc86b27d99fc9e745b568f2e0af953c27d1963246cbd
+  checksum: 10c0/79b11aab5005cc115b8274d70ece90cae24d9190eb6eaeef56cd7b6d73dd8b7ae6c021a225407ebe74cdace3018174c8688dcceb7f08dcd3019e9cace2cd748e
   languageName: node
   linkType: hard
 
@@ -5730,7 +5730,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "dashboard@workspace:."
   dependencies:
-    "@devtron-labs/devtron-fe-common-lib": "npm:1.20.3-pre-4"
+    "@devtron-labs/devtron-fe-common-lib": "npm:1.20.3-pre-7"
     "@esbuild-plugins/node-globals-polyfill": "npm:0.2.3"
     "@playwright/test": "npm:^1.32.1"
     "@rjsf/core": "npm:^5.13.3"