feat: infrastructure management overview

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.20.3-pre-11",
+    "version": "1.20.3-beta-3",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

src/Shared/Components/Charts/Chart.component.tsx

@@ -277,6 +277,7 @@ const Chart = (props: ChartProps) => {
             chartProps: props,
             appTheme,
             externalTooltipHandler: debouncedExternalTooltipHandler,
+            setTooltipVisible,
         })
 
         chartRef.current = new ChartJS(ctx, {

src/Shared/Components/Charts/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { Dispatch, ReactNode, SetStateAction } from 'react'
 import { TooltipOptions, TooltipPositionerFunction } from 'chart.js'
 
 import { TooltipProps } from '@Common/Tooltip'
@@ -139,6 +139,7 @@ export interface GetDefaultOptionsParams {
     chartProps: ChartProps
     appTheme: AppThemeType
     externalTooltipHandler: TooltipOptions['external']
+    setTooltipVisible: Dispatch<SetStateAction<boolean>>
 }
 
 declare module 'chart.js' {

src/Shared/Components/Charts/utils.tsx

@@ -95,7 +95,13 @@ export const getChartJSType = (type: ChartType): ChartJSChartType => {
 }
 
 const handleChartClick =
-    ({ type, onChartClick, datasets, xAxisLabels }: ChartProps) =>
+    ({
+        type,
+        onChartClick,
+        datasets,
+        xAxisLabels,
+        setTooltipVisible,
+    }: ChartProps & Pick<GetDefaultOptionsParams, 'setTooltipVisible'>) =>
     (_, elements: ActiveElement[]) => {
         if (!elements || elements.length === 0 || !datasets || (Array.isArray(datasets) && datasets.length === 0)) {
             return
@@ -116,6 +122,7 @@ const handleChartClick =
 
             onChartClick?.(datasets[datasetIndex].datasetName, index)
         }
+        setTooltipVisible(false)
     }
 
 const handleChartHover =
@@ -170,6 +177,7 @@ export const getDefaultOptions = ({
     chartProps,
     appTheme,
     externalTooltipHandler,
+    setTooltipVisible,
 }: GetDefaultOptionsParams): ChartOptions => {
     const {
         onChartClick,
@@ -217,7 +225,7 @@ export const getDefaultOptions = ({
         },
         ...(onChartClick
             ? {
-                  onClick: handleChartClick(chartProps),
+                  onClick: handleChartClick({ ...chartProps, setTooltipVisible }),
                   onHover: handleChartHover(chartProps),
               }
             : {}),

src/Shared/Components/Icon/Icon.tsx

@@ -23,8 +23,10 @@ import { ReactComponent as ICAzure } from '@IconsV2/ic-azure.svg'
 import { ReactComponent as ICAzureAks } from '@IconsV2/ic-azure-aks.svg'
 import { ReactComponent as ICBgBuild } from '@IconsV2/ic-bg-build.svg'
 import { ReactComponent as ICBgCluster } from '@IconsV2/ic-bg-cluster.svg'
+import { ReactComponent as ICBgCpu } from '@IconsV2/ic-bg-cpu.svg'
 import { ReactComponent as ICBgDeploy } from '@IconsV2/ic-bg-deploy.svg'
 import { ReactComponent as ICBgEnvironment } from '@IconsV2/ic-bg-environment.svg'
+import { ReactComponent as ICBgMemory } from '@IconsV2/ic-bg-memory.svg'
 import { ReactComponent as ICBgProductionPipelines } from '@IconsV2/ic-bg-production-pipelines.svg'
 import { ReactComponent as ICBgProject } from '@IconsV2/ic-bg-project.svg'
 import { ReactComponent as ICBgScan } from '@IconsV2/ic-bg-scan.svg'
@@ -49,6 +51,7 @@ import { ReactComponent as ICChatCircleDots } from '@IconsV2/ic-chat-circle-dots
 import { ReactComponent as ICChatCircleOnline } from '@IconsV2/ic-chat-circle-online.svg'
 import { ReactComponent as ICCheck } from '@IconsV2/ic-check.svg'
 import { ReactComponent as ICCheckAll } from '@IconsV2/ic-check-all.svg'
+import { ReactComponent as ICCheckCircle } from '@IconsV2/ic-check-circle.svg'
 import { ReactComponent as ICCheckSquare } from '@IconsV2/ic-check-square.svg'
 import { ReactComponent as ICChecks } from '@IconsV2/ic-checks.svg'
 import { ReactComponent as ICCiLinked } from '@IconsV2/ic-ci-linked.svg'
@@ -265,6 +268,7 @@ import { ReactComponent as ICVisibilityOff } from '@IconsV2/ic-visibility-off.sv
 import { ReactComponent as ICVisibilityOn } from '@IconsV2/ic-visibility-on.svg'
 import { ReactComponent as ICWarning } from '@IconsV2/ic-warning.svg'
 import { ReactComponent as ICWarningFill } from '@IconsV2/ic-warning-fill.svg'
+import { ReactComponent as ICWarningStroke } from '@IconsV2/ic-warning-stroke.svg'
 import { ReactComponent as ICWebhook } from '@IconsV2/ic-webhook.svg'
 import { ReactComponent as ICWifiSlash } from '@IconsV2/ic-wifi-slash.svg'
 import { ReactComponent as ICWorldGlobe } from '@IconsV2/ic-world-globe.svg'
@@ -297,8 +301,10 @@ export const iconMap = {
     'ic-azure': ICAzure,
     'ic-bg-build': ICBgBuild,
     'ic-bg-cluster': ICBgCluster,
+    'ic-bg-cpu': ICBgCpu,
     'ic-bg-deploy': ICBgDeploy,
     'ic-bg-environment': ICBgEnvironment,
+    'ic-bg-memory': ICBgMemory,
     'ic-bg-production-pipelines': ICBgProductionPipelines,
     'ic-bg-project': ICBgProject,
     'ic-bg-scan': ICBgScan,
@@ -322,6 +328,7 @@ export const iconMap = {
     'ic-chat-circle-dots': ICChatCircleDots,
     'ic-chat-circle-online': ICChatCircleOnline,
     'ic-check-all': ICCheckAll,
+    'ic-check-circle': ICCheckCircle,
     'ic-check-square': ICCheckSquare,
     'ic-check': ICCheck,
     'ic-checks': ICChecks,
@@ -538,6 +545,7 @@ export const iconMap = {
     'ic-visibility-off': ICVisibilityOff,
     'ic-visibility-on': ICVisibilityOn,
     'ic-warning-fill': ICWarningFill,
+    'ic-warning-stroke': ICWarningStroke,
     'ic-warning': ICWarning,
     'ic-webhook': ICWebhook,
     'ic-wifi-slash': ICWifiSlash,

src/Shared/Components/SelectPicker/utils.ts

@@ -373,7 +373,7 @@ export const getCommonSelectStyle = <OptionValue, IsMulti extends boolean>({
         }),
         menuPortal: (base) => ({
             ...base,
-            zIndex: 2,
+            zIndex: 3,
         }),
     }
 }

src/Shared/constants.tsx

@@ -613,3 +613,5 @@ export const REMOTE_CONNECTION_TYPE_LABEL_MAP: Record<RemoteConnectionType, stri
     [RemoteConnectionType.Proxy]: 'Via Proxy',
     [RemoteConnectionType.SSHTunnel]: 'Via SSH Tunnel',
 }
+
+export const TARGET_K8S_VERSION_SEARCH_KEY = 'targetK8sVersion'