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

chore: segmented bar updated for proportional

Author: shivani170

package-lock.json

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

package.json

@@ -24,27 +24,55 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
     rootClassName,
     countClassName,
     labelClassName,
+    isProportional,
 }) => {
     const total = entities.reduce((sum, entity) => entity.value + sum, 0)
     const filteredEntities = entities.filter((entity) => entity.value)
 
     const calcSegmentWidth = (entity: Entity) => `${(entity.value / total) * 100}%`
 
-    return (
-        <div className={`flexbox-col w-100 dc__gap-12 ${rootClassName}`}>
-            <div className="flexbox dc__gap-16">
-                {entities?.map((entity) => (
-                    <div className="flexbox dc__gap-4 dc__align-items-center">
-                        <div className="dot" style={{ backgroundColor: entity.color, width: '10px', height: '10px' }} />
-                        <span className={countClassName} data-testid={`segmented-bar-chart-${entity.label}-value`}>
-                            {entity.value}
-                        </span>
-                        <span className={labelClassName} data-testid={`segmented-bar-chart-${entity.label}-label`}>
-                            {entity.label}
-                        </span>
+    const renderLabel = (label: string) => (
+        <span className={labelClassName} data-testid={`segmented-bar-chart-${label}-label`}>
+            {label}
+        </span>
+    )
+
+    const renderValue = (value: string | number, label: string) => (
+        <span className={countClassName} data-testid={`segmented-bar-chart-${label}-value`}>
+            {isProportional ? `${value}/${total}` : value}
+        </span>
+    )
+
+    const renderContent = () => {
+        if (isProportional) {
+            return entities
+                .filter((entity) => !!entity.value)
+                .map((entity) => (
+                    <div className="flexbox-col">
+                        {renderValue(entity.value, entity.label)}
+                        <div className="flex left dc__gap-6">
+                            <span style={{ backgroundColor: entity.color }} className="h-12 dc__border-radius-2 w-4" />
+                            {renderLabel(entity.label)}
+                        </div>
                     </div>
-                ))}
+                ))
+        }
+        return entities.map((entity) => (
+            <div className={`${isProportional ? 'flexbox-col' : 'flexbox  dc__gap-4 dc__align-items-center'}`}>
+                <div className="dot" style={{ backgroundColor: entity.color, width: '10px', height: '10px' }} />
+                {renderValue(entity.value, entity.label)}
+                {renderLabel(entity.label)}
             </div>
+        ))
+    }
+
+    if (!entities.length) {
+        return null
+    }
+
+    return (
+        <div className={`flexbox-col w-100 dc__gap-12 ${rootClassName}`}>
+            <div className={`flexbox ${isProportional ? 'dc__gap-24' : 'dc__gap-16'}`}>{renderContent()}</div>
             <div className="flexbox dc__gap-2">
                 {filteredEntities?.map((entity, index, map) => (
                     <div

src/Common/SegmentedBarChart/SegmentedBarChart.tsx

@@ -25,4 +25,5 @@ export interface SegmentedBarChartProps {
     rootClassName?: string
     countClassName?: string
     labelClassName?: string
+    isProportional?: boolean
 }

src/Common/SegmentedBarChart/types.ts

@@ -9,3 +9,47 @@ export enum ClusterStatusType {
     UNHEALTHY = 'unhealthy',
     CONNECTION_FAILED = 'connection failed',
 }
+
+export interface ResourceDetail {
+    name: string
+    capacity: string
+    allocatable: string
+    usage: string
+    request: string
+    limit: string
+    usagePercentage: string
+    requestPercentage: string
+    limitPercentage: string
+}
+
+export interface NodeTaintType {
+    effect: string
+    key: string
+    value: string
+}
+
+export interface NodeDetailsType {
+    nodeName: string
+    nodeGroup: string
+    taints?: NodeTaintType[]
+}
+
+export interface ClusterCapacityType {
+    name: string
+    nodeCount: number
+    nodeK8sVersions: string[]
+    cpu: ResourceDetail
+    memory: ResourceDetail
+    serverVersion: string
+    nodeDetails?: NodeDetailsType[]
+    nodeErrors: Record<string, string>[]
+    status?: ClusterStatusType
+    isProd: boolean
+}
+
+export interface ClusterDetail extends ClusterCapacityType {
+    id: number
+    errorInNodeListing: string
+    nodeNames?: string[]
+    isVirtualCluster?: boolean
+}