refactor: ClusterForm, ClusterSelectionList, ClusterMap - types refactor

src/Pages/ResourceBrowser/ClusterList/ClusterMap/ClusterMap.tsx

@@ -2,9 +2,7 @@ import { Link } from 'react-router-dom'
 import { ResponsiveContainer, Treemap, TreemapProps } from 'recharts'
 import { followCursor } from 'tippy.js'
 
-import { ConditionalWrap, Tooltip } from '@devtron-labs/devtron-fe-common-lib'
-
-import { ClusterStatusType } from '@Components/ClusterNodes/types'
+import { ClusterStatusType, ConditionalWrap, Tooltip } from '@devtron-labs/devtron-fe-common-lib'
 
 import { getVisibleSvgTextWithEllipsis } from './utils'
 import { ClusterMapProps } from './types'
@@ -53,7 +51,7 @@ const ClusterTreeMapContent = ({
                     className={`cluster-map__rect ${status === 'unhealthy' ? 'cluster-map__rect--unhealthy' : ''}`}
                 />
                 <text x={x + 8} y={y + 22} className="cluster-map__text fcn-9 fs-13 fw-6">
-                    {getVisibleSvgTextWithEllipsis(name, width, 13, 600)}
+                    {getVisibleSvgTextWithEllipsis({ text: name, maxWidth: width, fontSize: 13, fontWeight: 600 })}
                 </text>
                 <text x={x + 8} y={y + 38} className="cluster-map__text fcn-9 fs-12 fw-4">
                     {value}

src/Pages/ResourceBrowser/ClusterList/ClusterMap/types.ts

@@ -1,4 +1,4 @@
-import { ClusterStatusType } from '@Components/ClusterNodes/types'
+import { ClusterStatusType } from '@devtron-labs/devtron-fe-common-lib'
 
 interface MapData {
     name: string

src/Pages/ResourceBrowser/ClusterList/ClusterMap/utils.ts

@@ -25,7 +25,7 @@ export const getVisibleSvgTextWithEllipsis = (() => {
     let svgInstance: SVGSVGElement | null = null
     let textElementInstance: SVGTextElement | null = null
 
-    return (text: string = '', maxWidth: number = 0, fontSize = 16, fontWeight = 400) => {
+    return ({ text = '', maxWidth = 0, fontSize = 16, fontWeight = 400 }) => {
         if (!svgInstance || !textElementInstance) {
             const { svg, textElement } = createMeasurementSvg(fontSize, fontWeight)
             svgInstance = svg

src/components/ClusterNodes/ClusterSelectionList.tsx

@@ -16,7 +16,14 @@
 
 import React, { useState, useMemo } from 'react'
 import { useHistory, useLocation, Link } from 'react-router-dom'
-import { GenericEmptyState, SearchBar, useUrlFilters, Tooltip } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    GenericEmptyState,
+    SearchBar,
+    useUrlFilters,
+    Tooltip,
+    ClusterFiltersType,
+    ClusterStatusType,
+} from '@devtron-labs/devtron-fe-common-lib'
 import dayjs, { Dayjs } from 'dayjs'
 import { importComponentFromFELibrary } from '@Components/common'
 import Timer from '@Components/common/DynamicTabs/DynamicTabs.timer'
@@ -26,7 +33,7 @@ import { ReactComponent as Error } from '@Icons/ic-error-exclamation.svg'
 import { ReactComponent as Success } from '@Icons/appstatus/healthy.svg'
 import { ReactComponent as TerminalIcon } from '@Icons/ic-terminal-fill.svg'
 import { ClusterMap, ClusterTreeMapData } from '@Pages/ResourceBrowser'
-import { ClusterDetail, ClusterFiltersType, ClusterStatusType } from './types'
+import { ClusterDetail } from './types'
 import ClusterNodeEmptyState from './ClusterNodeEmptyStates'
 import { ClusterSelectionType } from '../ResourceBrowser/Types'
 import { AppDetailsTabs } from '../v2/appDetails/appDetails.store'
@@ -36,7 +43,7 @@ import { ClusterStatusByFilter } from './constants'
 import './clusterNodes.scss'
 
 const KubeConfigButton = importComponentFromFELibrary('KubeConfigButton', null, 'function')
-const ClusterStatus = importComponentFromFELibrary('ClusterStatus', null, 'function')
+const ClusterStatusCell = importComponentFromFELibrary('ClusterStatus', null, 'function')
 const ClusterFilters = importComponentFromFELibrary('ClusterFilters', null, 'function')
 
 const getClusterMapData = (data: ClusterDetail[]): ClusterTreeMapData['data'] =>
@@ -77,7 +84,7 @@ const ClusterSelectionList: React.FC<ClusterSelectionType> = ({
 
             return (!searchKey || option.name.toLowerCase().includes(loweredSearchKey)) && filterCondition
         })
-    }, [searchKey, clusterOptions, clusterFilter])
+    }, [searchKey, clusterOptions, `${clusterFilter}`])
 
     const treeMapData = useMemo<ClusterTreeMapData[]>(() => {
         const { prodClusters, nonProdClusters } = filteredList.reduce(
@@ -149,8 +156,8 @@ const ClusterSelectionList: React.FC<ClusterSelectionType> = ({
     }
 
     const renderClusterStatus = ({ errorInNodeListing, status }: ClusterDetail) => {
-        if (ClusterStatus && status) {
-            return <ClusterStatus status={status} />
+        if (ClusterStatusCell && status) {
+            return <ClusterStatusCell status={status} />
         }
 
         return (

src/components/ClusterNodes/constants.ts

@@ -14,8 +14,10 @@
  * limitations under the License.
  */
 
+import { ClusterFiltersType, ClusterStatusType } from '@devtron-labs/devtron-fe-common-lib'
+
 import { multiSelectStyles } from '../v2/common/ReactSelectCustomization'
-import { ClusterFiltersType, ClusterStatusType, ColumnMetadataType, EFFECT_TYPE } from './types'
+import { ColumnMetadataType, EFFECT_TYPE } from './types'
 
 export const clusterSelectStyle = {
     ...multiSelectStyles,
@@ -485,7 +487,8 @@ export const defaultManifestErrorText =
 
 export const manifestCommentsRegex = /^(.*?apiVersion:)/s
 
-export const ClusterStatusByFilter = {
+export const ClusterStatusByFilter: Record<ClusterFiltersType, ClusterStatusType> = {
     [ClusterFiltersType.HEALTHY]: ClusterStatusType.HEALTHY,
     [ClusterFiltersType.UNHEALTHY]: ClusterStatusType.UNHEALTHY,
+    [ClusterFiltersType.ALL_CLUSTERS]: null,
 }

src/components/ClusterNodes/types.ts

@@ -16,7 +16,7 @@
 
 import React from 'react'
 import { MultiValue } from 'react-select'
-import { ResponseType, ApiResourceGroupType } from '@devtron-labs/devtron-fe-common-lib'
+import { ResponseType, ApiResourceGroupType, ClusterStatusType } from '@devtron-labs/devtron-fe-common-lib'
 import { LabelTag, OptionType } from '../app/types'
 import { CLUSTER_PAGE_TAB, NODE_SEARCH_TEXT } from './constants'
 import { EditModeType } from '../v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/constants'
@@ -65,18 +65,6 @@ export interface NodeDetailsType {
     taints?: NodeTaintType[]
 }
 
-export enum ClusterFiltersType {
-    ALL_CLUSTERS = 'all',
-    HEALTHY = 'healthy',
-    UNHEALTHY = 'unhealthy',
-}
-
-export enum ClusterStatusType {
-    HEALTHY = 'healthy',
-    UNHEALTHY = 'unhealthy',
-    CONNECTION_FAILED = 'connection failed',
-}
-
 export interface ClusterCapacityType {
     name: string
     nodeCount: number

src/components/cluster/ClusterForm.tsx

@@ -57,6 +57,7 @@ import {
     DEFAULT_CLUSTER_ID,
     SSHAuthenticationType,
     RemoteConnectionTypeCluster,
+    ClusterFormProps,
 } from './cluster.type'
 
 import { CLUSTER_COMMAND, AppCreationType, MODES, ModuleNameMap } from '../../config'
@@ -132,8 +133,8 @@ export default function ClusterForm({
     isClusterDetails,
     toggleClusterDetails,
     isVirtualCluster,
-    isProd
-}) {
+    isProd,
+}: ClusterFormProps) {
     const [prometheusToggleEnabled, setPrometheusToggleEnabled] = useState(!!prometheus_url)
     const [prometheusAuthenticationType, setPrometheusAuthenticationType] = useState({
         type: prometheusAuth?.userName ? AuthenticationType.BASIC : AuthenticationType.ANONYMOUS,
@@ -463,7 +464,7 @@ export default function ClusterForm({
                 cert_data: state.tlsClientCert.value,
                 cert_auth_data: state.certificateAuthorityData.value,
             },
-            isProd: state.isProd.value === "true",
+            isProd: state.isProd.value === 'true',
             active,
             remoteConnectionConfig: getRemoteConnectionConfig(state, remoteConnectionMethod, SSHConnectionType),
             prometheus_url: prometheusToggleEnabled ? state.endpoint.value : '',
@@ -768,8 +769,8 @@ export default function ClusterForm({
                     value={state.isProd.value}
                     onChange={handleOnChange}
                 >
-                    <RadioGroupItem value={'true'}>Production</RadioGroupItem>
-                    <RadioGroupItem value={'false'}>Non - Production</RadioGroupItem>
+                    <RadioGroupItem value="true">Production</RadioGroupItem>
+                    <RadioGroupItem value="false">Non - Production</RadioGroupItem>
                 </RadioGroup>
                 {id !== DEFAULT_CLUSTER_ID && RemoteConnectionRadio && (
                     <>

src/components/cluster/cluster.type.ts

@@ -174,3 +174,7 @@ export interface ClusterFormType {
 }
 
 export const RemoteConnectionTypeCluster = 'cluster'
+
+export type ClusterFormProps = Record<string, any> & {
+    isProd: boolean
+}