Merge pull request #741 from devtron-labs/feat/redfish-node-ui-rc

feat: redfish node ui

Author: AbhishekA1509

package-lock.json

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

package.json

@@ -23,6 +23,7 @@ import { Entity, SegmentedBarChartProps } from './types'
 import './styles.scss'
 
 const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
+    hideLegend,
     entities: userEntities = [FALLBACK_ENTITY],
     rootClassName,
     countClassName,
@@ -36,7 +37,7 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
     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}%`
+    const calcSegmentWidth = (entityValue: Entity['value']) => `${(entityValue / total) * 100}%`
 
     const renderLabel = (label: Entity['label']) =>
         isLoading ? (
@@ -88,11 +89,17 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
         ))
     }
 
-    const renderLegend = () => (
-        <div className={`flexbox flex-wrap dc__row-gap-4 ${isProportional ? 'dc__gap-24' : 'dc__gap-16'}`}>
-            {renderContent()}
-        </div>
-    )
+    const renderLegend = () => {
+        if (hideLegend) {
+            return null
+        }
+
+        return (
+            <div className={`flexbox flex-wrap dc__row-gap-4 ${isProportional ? 'dc__gap-24' : 'dc__gap-16'}`}>
+                {renderContent()}
+            </div>
+        )
+    }
 
     const renderBar = () => (
         <motion.div
@@ -112,7 +119,7 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
                     className={`h-8 ${index === 0 ? 'dc__left-radius-4' : ''} ${
                         index === map.length - 1 ? 'dc__right-radius-4' : ''
                     } ${isLoading ? 'shimmer' : ''}`}
-                    style={{ backgroundColor: entity.color, width: calcSegmentWidth(entity) }}
+                    style={{ backgroundColor: entity.color, width: calcSegmentWidth(entity.value) }}
                 />
             ))}
         </motion.div>

src/Assets/IconV2/ic-terminal.svg

@@ -20,13 +20,22 @@ export type Entity = {
     value: number
 }
 
-export interface SegmentedBarChartProps {
-    entities: NonNullable<Entity[]>
+type EntityPropType =
+    | {
+          hideLegend?: false
+          entities: NonNullable<Entity[]>
+      }
+    | {
+          hideLegend: true
+          entities: NonNullable<Omit<Entity, 'label'> & { label?: never }>[]
+      }
+
+export type SegmentedBarChartProps = {
     rootClassName?: string
     countClassName?: string
     labelClassName?: string
     isProportional?: boolean
     swapLegendAndBar?: boolean
     showAnimationOnBar?: boolean
     isLoading?: boolean
-}
+} & EntityPropType

src/Assets/IconV2/ic-thermometer.svg

@@ -16,6 +16,7 @@
 
 import { Dispatch, ReactElement, SetStateAction } from 'react'
 
+import { TabProps } from '@Shared/Components'
 import { InstallationClusterType } from '@Shared/types'
 
 import { NodeActionRequest } from './ResourceBrowser.Types'
@@ -113,6 +114,11 @@ export interface AdditionalConfirmationModalOptionsProps<T = unknown> {
     children?: ReactElement
 }
 
+export type NodeDetailTabsInfoType = (Pick<TabProps, 'label' | 'icon'> & {
+    id: string
+    renderComponent: () => JSX.Element
+})[]
+
 export interface InstallationClusterStepType {
     lastTransitionTime: string
     lastProbeTime: string

src/Common/SegmentedBarChart/SegmentedBarChart.tsx

@@ -17,7 +17,7 @@
 import { ReactNode } from 'react'
 
 import { APIOptions, DrawerProps } from '@Common/index'
-import { SegmentedBarChartProps } from '@Common/SegmentedBarChart'
+import { Entity } from '@Common/SegmentedBarChart/types'
 
 import { ConfirmationModalProps } from '../ConfirmationModal/types'
 import { getProgressingStateForStatus } from '../Security'
@@ -64,7 +64,7 @@ export interface OperationResultStoreType {
     getResults: (
         sortComparator: (a: BulkOperationResultType, b: BulkOperationResultType) => number,
     ) => BulkOperationResultWithIdType[]
-    getBarChartEntities: () => SegmentedBarChartProps['entities']
+    getBarChartEntities: () => NonNullable<Entity[]>
     getResultsStatusCount: () => Record<BulkOperationResultType['status'], number>
     getSize: () => number
     updateResultStatus: (

src/Common/SegmentedBarChart/types.ts

@@ -138,7 +138,9 @@ import { ReactComponent as ICStamp } from '@IconsV2/ic-stamp.svg'
 import { ReactComponent as ICSuccess } from '@IconsV2/ic-success.svg'
 import { ReactComponent as ICSuspended } from '@IconsV2/ic-suspended.svg'
 import { ReactComponent as ICTata1mg } from '@IconsV2/ic-tata1mg.svg'
+import { ReactComponent as ICTerminal } from '@IconsV2/ic-terminal.svg'
 import { ReactComponent as ICTerminalFill } from '@IconsV2/ic-terminal-fill.svg'
+import { ReactComponent as ICThermometer } from '@IconsV2/ic-thermometer.svg'
 import { ReactComponent as ICThumbDown } from '@IconsV2/ic-thumb-down.svg'
 import { ReactComponent as ICThumbUp } from '@IconsV2/ic-thumb-up.svg'
 import { ReactComponent as ICTimeoutDash } from '@IconsV2/ic-timeout-dash.svg'
@@ -296,6 +298,8 @@ export const iconMap = {
     'ic-suspended': ICSuspended,
     'ic-tata1mg': ICTata1mg,
     'ic-terminal-fill': ICTerminalFill,
+    'ic-terminal': ICTerminal,
+    'ic-thermometer': ICThermometer,
     'ic-thumb-down': ICThumbDown,
     'ic-thumb-up': ICThumbUp,
     'ic-timeout-dash': ICTimeoutDash,

src/Pages/ResourceBrowser/types.ts

@@ -16,7 +16,7 @@
 
 import React from 'react'
 
-import { SegmentedBarChartProps } from '@Common/SegmentedBarChart'
+import { Entity } from '@Common/SegmentedBarChart/types'
 import { ServerErrors } from '@Common/ServerError'
 import { GenericEmptyStateType } from '@Common/Types'
 import { LastExecutionResultType, Nodes, NodeType } from '@Shared/types'
@@ -103,7 +103,7 @@ export interface StatusType {
 }
 
 export interface InfoCardPropsType extends Pick<StatusType, 'scanToolName' | 'scanToolUrl'> {
-    entities: SegmentedBarChartProps['entities']
+    entities: NonNullable<Entity[]>
     lastScanTimeString?: string
 }