Merge pull request #830 from devtron-labs/feat/cluster-map

feat: add cluster map from fe-lib

Author: arunjaindev

package-lock.json

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

package.json

@@ -26,7 +26,6 @@ import { noop } from '@Common/Helper'
 export const Modal = ({
     style = {},
     children,
-    modal = false,
     rootClassName = '',
     onClick = null,
     callbackRef = null,
@@ -63,7 +62,7 @@ export const Modal = ({
     }, [])
 
     return (
-        <Backdrop onEscape={noop} onClick={handleClick}>
+        <Backdrop onEscape={noop} onClick={handleClick} hasClearBackground={noBackDrop}>
             <div
                 tabIndex={0}
                 onClick={handleClick}
@@ -75,7 +74,7 @@ export const Modal = ({
                     innerRef.current = el
                 }}
                 id="popup"
-                className={`${rootClassName} ${POP_UP_MENU_MODAL_ID} ${modal ? 'modal' : ''} ${noBackDrop ? 'no-back-drop' : ''}`}
+                className={`${rootClassName} ${POP_UP_MENU_MODAL_ID}`}
                 style={{ ...style }}
             >
                 {children}

src/Assets/IconV2/ic-bg-environment.svg

@@ -19,6 +19,7 @@ import React, { SyntheticEvent } from 'react'
 import { DTFocusTrapType } from '@Shared/Components/DTFocusTrap'
 
 import { Backdrop, POP_UP_MENU_MODAL_ID } from '../../Shared'
+import { stopPropagation } from '@Common/Helper'
 
 export class VisibleModal extends React.Component<{
     className?: string
@@ -57,7 +58,7 @@ export class VisibleModal extends React.Component<{
                 onClick={this.handleBodyClick}
                 initialFocus={this.props.initialFocus ?? undefined}
             >
-                <div className={this.props.parentClassName}>
+                <div className={this.props.parentClassName} onClick={stopPropagation}>
                     <div className={`visible-modal__body ${this.props.className || ''}`}>{this.props.children}</div>
                 </div>
             </Backdrop>

src/Common/Modals/Modal.tsx

@@ -17,6 +17,7 @@
 import React, { SyntheticEvent } from 'react'
 import { Backdrop } from '@Shared/Components'
 import { DTFocusTrapType } from '@Shared/Components/DTFocusTrap'
+import { stopPropagation } from '@Common/Helper'
 
 export class VisibleModal2 extends React.Component<{
     className?: string
@@ -39,7 +40,9 @@ export class VisibleModal2 extends React.Component<{
                 onClick={this.handleBodyClick}
                 initialFocus={this.props.initialFocus ?? undefined}
             >
-                <div className={`visible-modal__body ${this.props.className || ''}`}>{this.props.children}</div>
+                <div className={`visible-modal__body ${this.props.className || ''}`} onClick={stopPropagation}>
+                    {this.props.children}
+                </div>
             </Backdrop>
         )
     }

src/Common/Modals/VisibleModal.tsx

@@ -321,7 +321,6 @@ export interface PopupMenuBodyType {
 export interface ModalType {
     style?: React.CSSProperties
     children?: ReactNode
-    modal?: boolean
     rootClassName?: string
     onClick?: any
     callbackRef?: (element?: any) => any

src/Common/Modals/VisibleModal2.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ */
+
+import { SegmentedBarChart } from '@Common/SegmentedBarChart'
+
+import { ClusterMapProps } from './types'
+import { getEntities } from './utils'
+
+export const ClusterMap = ({ filteredList, isLoading }: ClusterMapProps) => {
+    if (!filteredList?.length) {
+        return null
+    }
+
+    const { statusEntities, deploymentEntities } = getEntities(filteredList)
+
+    return (
+        <div className="pb-16 px-20">
+            <div className="dc__grid-half shadow__card--20 w-100 dc__border br-8 dc__grid dc__align-items-center">
+                <SegmentedBarChart
+                    entities={statusEntities}
+                    rootClassName="p-16 fs-13 dc__border-right-n1 cn-9"
+                    countClassName="fw-6 fs-20 lh-1-5"
+                    labelClassName="lh-20"
+                    isProportional
+                    showAnimationOnBar
+                    isLoading={isLoading}
+                />
+
+                <SegmentedBarChart
+                    entities={deploymentEntities}
+                    rootClassName="p-16 fs-13 cn-9"
+                    countClassName="fw-6 fs-20 lh-1-5"
+                    labelClassName="lh-20"
+                    isProportional
+                    showAnimationOnBar
+                    isLoading={isLoading}
+                />
+            </div>
+        </div>
+    )
+}

src/Common/Types.ts

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ */
+
+export * from './ClusterMap'

src/Pages/ResourceBrowser/ClusterMap/ClusterMap.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ */
+
+import { ClusterStatusType } from '../types'
+
+export interface ClusterStatusAndType {
+    isProd: boolean
+    status: ClusterStatusType
+}
+
+export interface ClusterMapProps {
+    isLoading?: boolean
+    filteredList: ClusterStatusAndType[]
+}
+
+export interface StatusCountEnum {
+    healthyCount: number
+    unhealthyCount: number
+    connectionFailedCount: number
+    prodCount: number
+}
+
+export interface StatusEntity {
+    value: number
+    label: string
+    color: string
+    proportionalValue: string
+}
+
+export interface ClusterEntitiesTypes {
+    statusEntities: StatusEntity[]
+    deploymentEntities: StatusEntity[]
+}