feat: infrastructure management overview

package.json

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

src/components/AppSelector/AppSelector.tsx

@@ -89,6 +89,7 @@ const AppSelector = ({ onChange, appId, appName, isJobView }: AppSelectorType) =
             placeholder={appName}
             optionListError={error}
             reloadOptionList={reload}
+            resource={isJobView ? 'Job' : 'Application'}
         />
     )
 }

src/components/AppSelector/ChartSelector.tsx

@@ -88,6 +88,7 @@ export default function ChartSelector({
             {...(filterOption ? { filterOption } : {})}
             optionListError={error}
             reloadOptionList={reload}
+            resource="Chart Store"
         />
     )
 }

src/components/ApplicationGroup/EnvSelector.tsx

@@ -79,6 +79,7 @@ export const EnvSelector = ({ onChange, envId, envName }: EnvSelectorType) => {
             onInputChange={onInputChange}
             optionListError={error}
             reloadOptionList={reload}
+            resource="Application Group"
         />
     )
 }

src/components/CIPipelineN/CIPipeline.tsx

@@ -913,7 +913,6 @@ export default function CIPipeline({
 
     return (
         <>
-            {renderFloatingVariablesWidget()}
             {(ciPipelineId || isAdvanced) && (
                 <Drawer position="right" width="75%" minWidth="1024px" maxWidth="1200px" onEscape={handleClose}>
                     <div className="modal__body modal__body__ci_new_ui br-0 modal__body--p-0 advanced-option-container">
@@ -939,6 +938,7 @@ export default function CIPipeline({
                             </div>
                         )}
                     </div>
+                    {renderFloatingVariablesWidget()}
                 </Drawer>
             )}
             <GenericModal

src/components/ClusterNodes/ClusterOverview.tsx

@@ -31,24 +31,19 @@ import {
     showError,
     StatusComponent,
     StatusType,
+    TARGET_K8S_VERSION_SEARCH_KEY,
     useAsync,
     useMainContext,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { getUpgradeCompatibilityTippyConfig } from '@Components/ResourceBrowser/ResourceList/utils'
 import { ClusterDetailBaseParams } from '@Components/ResourceBrowser/Types'
 import { getAvailableCharts } from '@Services/service'
 
 import { ReactComponent as Error } from '../../assets/icons/ic-error-exclamation.svg'
 import { MAX_LENGTH_350 } from '../../config/constantMessaging'
 import { importComponentFromFELibrary } from '../common'
 import GenericDescription from '../common/Description/GenericDescription'
-import {
-    K8S_EMPTY_GROUP,
-    SIDEBAR_KEYS,
-    TARGET_K8S_VERSION_SEARCH_KEY,
-    UPGRADE_CLUSTER_CONSTANTS,
-} from '../ResourceBrowser/Constants'
+import { K8S_EMPTY_GROUP } from '../ResourceBrowser/Constants'
 import {
     getClusterOverviewClusterCapacity,
     getClusterOverviewDetails,
@@ -115,7 +110,7 @@ const LoadingMetricCard = () => (
     </div>
 )
 
-function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
+function ClusterOverview({ selectedCluster }: ClusterOverviewProps) {
     const { clusterId } = useParams<ClusterDetailBaseParams>()
 
     const { isSuperAdmin } = useMainContext()
@@ -339,24 +334,11 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
     )
 
     const handleOpenScanClusterTab = (selectedVersion: string) => {
-        const upgradeClusterLowerCaseKind = SIDEBAR_KEYS.upgradeClusterGVK.Kind.toLowerCase()
-
         const URL = getUrlWithSearchParams(generatePath(RESOURCE_BROWSER_ROUTES.CLUSTER_UPGRADE, { clusterId }), {
             [TARGET_K8S_VERSION_SEARCH_KEY]: selectedVersion,
         })
 
-        addTab({
-            idPrefix: UPGRADE_CLUSTER_CONSTANTS.ID_PREFIX,
-            kind: upgradeClusterLowerCaseKind,
-            name: UPGRADE_CLUSTER_CONSTANTS.NAME,
-            url: URL,
-            dynamicTitle: `${UPGRADE_CLUSTER_CONSTANTS.DYNAMIC_TITLE} to v${selectedVersion}`,
-            tippyConfig: getUpgradeCompatibilityTippyConfig({
-                targetK8sVersion: selectedVersion,
-            }),
-        })
-            .then(() => history.push(URL))
-            .catch(noop)
+        history.push(URL)
     }
 
     const creationPrefix = clusterConfig ? 'Created' : 'Added'

src/components/ClusterNodes/constants.ts

@@ -302,6 +302,7 @@ export const manifestCommentsRegex = /^(.*?apiVersion:)/s
 export const ClusterStatusByFilter: Record<ClusterFiltersType, ClusterStatusType> = {
     [ClusterFiltersType.HEALTHY]: ClusterStatusType.HEALTHY,
     [ClusterFiltersType.UNHEALTHY]: ClusterStatusType.UNHEALTHY,
+    [ClusterFiltersType.CONNECTION_FAILED]: ClusterStatusType.CONNECTION_FAILED,
     [ClusterFiltersType.ALL_CLUSTERS]: null,
 }
 

src/components/ClusterNodes/types.ts

@@ -277,7 +277,6 @@ export interface ClusterErrorType {
 }
 export interface ClusterOverviewProps {
     selectedCluster: ClusterOptionType
-    addTab: UseTabsReturnType['addTab']
 }
 
 export enum TaintsTableHeaderKeys {

src/components/Navigation/constants.ts

@@ -264,8 +264,7 @@ export const NAVIGATION_LIST: NavigationGroupType[] = [
                 dataTestId: 'infrastructure-management-overview',
                 id: 'infrastructure-management-overview',
                 icon: 'ic-speedometer',
-                href: '/dummy-url',
-                disabled: true,
+                href: COMMON_URLS.INFRASTRUCTURE_MANAGEMENT_OVERVIEW,
             },
             {
                 title: 'Resource Browser',

src/components/ResourceBrowser/Constants.ts

@@ -276,8 +276,6 @@ export const CONNECTION_TIMEOUT_TIME = 10000
 
 export const DEFAULT_K8SLIST_PAGE_SIZE = 100
 
-export const TARGET_K8S_VERSION_SEARCH_KEY = 'targetK8sVersion'
-
 export const NODE_LIST_HEADERS = [
     'name',
     'status',

src/components/ResourceBrowser/ResourceList/ClusterSelector.tsx

@@ -164,6 +164,7 @@ const ClusterSelector: React.FC<ClusterSelectorType> = ({
                 )}
                 inputValue={inputValue}
                 onInputChange={onInputChange}
+                resource="Cluster"
             />
 
             {defaultOption?.isProd && <Badge label="Production" size={ComponentSizeType.xxs} />}

src/components/ResourceBrowser/ResourceList/ClusterUpgradeCompatibilityInfo.tsx

@@ -28,6 +28,7 @@ import {
     PaginationEnum,
     Progressing,
     Table,
+    TARGET_K8S_VERSION_SEARCH_KEY,
     URL_FILTER_KEYS,
     URLS,
     useSearchString,
@@ -37,7 +38,6 @@ import emptyCustomChart from '@Images/[email protected]'
 import { ReactComponent as NoOffendingPipeline } from '@Images/no-offending-pipeline.svg'
 import { importComponentFromFELibrary } from '@Components/common'
 
-import { TARGET_K8S_VERSION_SEARCH_KEY } from '../Constants'
 import { ClusterDetailBaseParams } from '../Types'
 import ClusterUpgradeCompatibilityInfoTableCellComponent from './ClusterUpgradeCompatibilityInfoTableCellComponent'
 import ClusterUpgradeCompatibilityInfoTableWrapper from './ClusterUpgradeCompatibilityInfoTableWrapper'

src/components/ResourceBrowser/ResourceList/DynamicTabComponentWrapper.tsx

@@ -17,7 +17,12 @@
 import { cloneElement, ReactElement, useEffect } from 'react'
 import { useLocation, useParams, useRouteMatch } from 'react-router-dom'
 
-import { logExceptionToSentry, noop, RESOURCE_BROWSER_ROUTES } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    logExceptionToSentry,
+    noop,
+    RESOURCE_BROWSER_ROUTES,
+    TARGET_K8S_VERSION_SEARCH_KEY,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import { UPGRADE_CLUSTER_CONSTANTS } from '../Constants'
 import { DynamicTabComponentWrapperProps } from './types'
@@ -34,6 +39,7 @@ export const DynamicTabComponentWrapper = ({
     const { pathname, search } = useLocation()
     const { path } = useRouteMatch()
     const params = useParams<Record<string, string>>()
+    const searchParams = new URLSearchParams(search)
 
     const tabId = getTabIdForTab(path, getTabId, params)
 
@@ -47,7 +53,8 @@ export const DynamicTabComponentWrapper = ({
             .then((found) => {
                 if (!found && addTab) {
                     const [idPrefix, name, kind] = getTabIdParamsForPath(path, params) || []
-                    const { targetK8sVersion = '' } = params
+                    const targetK8sVersion = searchParams.get(TARGET_K8S_VERSION_SEARCH_KEY) || ''
+
                     addTab({
                         idPrefix,
                         name,

src/components/ResourceBrowser/ResourceList/ResourceList.tsx

@@ -221,7 +221,7 @@ const ResourceList = ({ selectedCluster, k8SObjectMapRaw }: ResourceListProps) =
             />
             <Route path={RESOURCE_BROWSER_ROUTES.OVERVIEW} exact>
                 <DynamicTabComponentWrapper type="fixed" {...DynamicTabComponentWrapperBaseProps}>
-                    <ClusterOverview selectedCluster={selectedCluster} addTab={addTab} />
+                    <ClusterOverview selectedCluster={selectedCluster} />
                 </DynamicTabComponentWrapper>
             </Route>
             {MonitoringDashboard && (

src/components/ResourceBrowser/ResourceList/utils.tsx

@@ -26,6 +26,7 @@ import {
     RecentlyVisitedOptions,
     RESOURCE_BROWSER_ROUTES,
     stringComparatorBySortOrder,
+    TARGET_K8S_VERSION_SEARCH_KEY,
     TreeHeading,
     TreeItem,
     TreeNode,
@@ -46,7 +47,6 @@ import {
     NODE_SEARCH_KEYS_TO_OBJECT_KEYS,
     ResourceBrowserRouteToTabIdMap,
     SIDEBAR_KEYS,
-    TARGET_K8S_VERSION_SEARCH_KEY,
     UPGRADE_CLUSTER_CONSTANTS,
 } from '../Constants'
 import {

src/components/app/details/appDetails/DeployedCommitCard.tsx

@@ -40,7 +40,7 @@ const DeployedCommitCard = ({ cardLoading, showCommitInfoDrawer, envId, ciArtifa
         return <LoadingCard />
     }
 
-    if (materials.length === 0 || !materials[0].history[0]?.commit?.slice(0, 7)) {
+    if (!materials?.length || !materials[0].history[0]?.commit?.slice(0, 7)) {
         return null
     }
 

src/components/cdPipeline/CDPipeline.tsx

@@ -730,7 +730,10 @@ export default function CDPipeline({
             environmentId: formData.environmentId,
             namespace: formData.namespace,
             id: +cdPipelineId,
-            strategies: formData.releaseMode === ReleaseMode.MIGRATE_EXTERNAL_APPS && formData.isCustomChart ? [] : formData.savedStrategies,
+            strategies:
+                formData.releaseMode === ReleaseMode.MIGRATE_EXTERNAL_APPS && formData.isCustomChart
+                    ? []
+                    : formData.savedStrategies,
             parentPipelineType,
             parentPipelineId: +parentPipelineId,
             isClusterCdActive: formData.isClusterCdActive,
@@ -1504,6 +1507,7 @@ export default function CDPipeline({
                         envId={formData.environmentId}
                     />
                 )}
+                {(cdPipelineId || isAdvanced) && renderFloatingVariablesWidget()}
             </div>
         )
     }
@@ -1533,13 +1537,9 @@ export default function CDPipeline({
     }
 
     return cdPipelineId || isAdvanced ? (
-        <>
-            {renderFloatingVariablesWidget()}
-
-            <Drawer onEscape={closePipelineModal} position="right" width="75%" minWidth="1024px" maxWidth="1200px">
-                {renderCDPipelineModal()}
-            </Drawer>
-        </>
+        <Drawer onEscape={closePipelineModal} position="right" width="75%" minWidth="1024px" maxWidth="1200px">
+            {renderCDPipelineModal()}
+        </Drawer>
     ) : (
         <VisibleModal className="">{renderCDPipelineModal()}</VisibleModal>
     )

src/components/common/navigation/NavigationRoutes.tsx

@@ -682,6 +682,7 @@ const NavigationRoutes = ({ reloadVersionConfig }: Readonly<NavigationRoutesType
                                                 CommonURLS.APPLICATION_MANAGEMENT,
                                                 CommonURLS.COST_VISIBILITY,
                                                 CommonURLS.AI_RECOMMENDATIONS,
+                                                CommonURLS.INFRASTRUCTURE_MANAGEMENT,
                                                 CommonURLS.DATA_PROTECTION,
                                             ]}
                                         >

src/components/v2/appDetails/k8Resource/nodeType/Node.component.tsx

@@ -159,7 +159,7 @@ const NodeComponent = ({
             let _healthyNodeCount = 0
 
             _selectedNodes.forEach((node: Node) => {
-                if (node.health?.status.toLowerCase() === 'healthy') {
+                if (node.health?.status?.toLowerCase() === 'healthy') {
                     _healthyNodeCount += 1
                 }
             })

yarn.lock

@@ -1722,9 +1722,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@devtron-labs/devtron-fe-common-lib@npm:1.20.6-pre-2":
-  version: 1.20.6-pre-2
-  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.20.6-pre-2"
+"@devtron-labs/devtron-fe-common-lib@npm:1.20.6-pre-3":
+  version: 1.20.6-pre-3
+  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.20.6-pre-3"
   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/da4d670d335bbb3f818b7b59ea4ae13dad3ac992b77319f728e7b54b29976556ff754cd8bfdd35916b2e1e2c7b62745b3f730d5338e26317e3078f01d2a7c180
+  checksum: 10c0/941a704a582adc63f39c3093b1adfbab8768e4bc1594a0320cdca016f6dd58e850f683f65438980770cd267e7eae93a0b030ccee76ba5e0bcfc4c1c35b77d815
   languageName: node
   linkType: hard
 
@@ -5581,7 +5581,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "dashboard@workspace:."
   dependencies:
-    "@devtron-labs/devtron-fe-common-lib": "npm:1.20.6-pre-2"
+    "@devtron-labs/devtron-fe-common-lib": "npm:1.20.6-pre-3"
     "@esbuild-plugins/node-globals-polyfill": "npm:0.2.3"
     "@playwright/test": "npm:^1.32.1"
     "@rjsf/core": "npm:^5.13.3"