Merge branch 'feat/resource-scan-v2' into demo/resource-browser

Author: vivek-devtron

package-lock.json

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

package.json

@@ -0,0 +1,47 @@
+import React from 'react'
+import { SegmentedBarChartProps, Entity } from './types'
+import { FALLBACK_ENTITY } from './constants'
+import './styles.scss'
+
+const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
+    entities = [FALLBACK_ENTITY],
+    rootClassName,
+    countClassName,
+    labelClassName,
+}) => {
+    const total = entities.reduce((sum, entity) => entity.value + sum, 0)
+
+    const calcSegmentWidth = (entity: Entity) => {
+        if (!entity.value) {
+            return '100%'
+        }
+        return `${(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}>{entity.value}</span>
+                        <span className={labelClassName}>{entity.label}</span>
+                    </div>
+                ))}
+            </div>
+            <div className="flexbox dc__gap-2">
+                {entities?.map((entity, index, map) => (
+                    <div
+                        key={entity.label}
+                        className={`h-8 ${index === 0 ? 'dc__left-radius-4' : ''} ${
+                            index === map.length - 1 ? 'dc__right-radius-4' : ''
+                        }`}
+                        style={{ backgroundColor: entity.color, width: calcSegmentWidth(entity) }}
+                    />
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default SegmentedBarChart

src/Common/SegmentedBarChart/SegmentedBarChart.tsx

@@ -0,0 +1,5 @@
+export const FALLBACK_ENTITY = {
+    color: '#B1B7BC',
+    label: '-',
+    value: 0,
+}

src/Common/SegmentedBarChart/constants.ts

@@ -0,0 +1,2 @@
+export { default as SegmentedBarChart } from './SegmentedBarChart'
+export { type SegmentedBarChartProps } from './types'

src/Common/SegmentedBarChart/index.ts

@@ -0,0 +1,13 @@
+.rounded-ends {
+    &:first-child {
+        border-radius: 100% 0 0 100%;
+    }
+
+    &:last-child {
+        border-radius: 0 100% 100% 0;
+    }
+}
+
+.dot {
+    border-radius: 100%;
+}

src/Common/SegmentedBarChart/styles.scss

@@ -0,0 +1,12 @@
+export type Entity = {
+    color: string
+    label: string
+    value: number
+}
+
+export interface SegmentedBarChartProps {
+    entities: NonNullable<Entity[]>
+    rootClassName?: string
+    countClassName?: string
+    labelClassName?: string
+}

src/Common/SegmentedBarChart/types.ts

@@ -51,3 +51,4 @@ export * from './CustomInput'
 export * from './DraggableWrapper'
 export * from './Pagination'
 export * from './Markdown'
+export * from './SegmentedBarChart'

src/Common/index.ts

@@ -51,6 +51,7 @@ export interface customEnv {
     SERVICE_WORKER_TIMEOUT?: string
     ENABLE_RESOURCE_SCAN?: boolean
     FEATURE_USER_DEFINED_GITOPS_REPO_ENABLE: boolean
+    ENABLE_RESOURCE_SCAN_V2?: boolean
 }
 declare global {
     interface Window {