Skip to content

Commit 0573f8c

Browse files
LasserichLasserich
committed
feat: leave fine tuning for now
1 parent b8931c7 commit 0573f8c

File tree

19 files changed

+520
-119
lines changed

19 files changed

+520
-119
lines changed

public/eso.png renamed to public/eso_dark.png

File renamed without changes.

‎public/eso_light.png‎

18.3 KB
Loading

‎public/locales/en.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"tableVersionHeader": "Revision",
2727
"noFluxError": "Please install flux to view this component",
2828
"gitOpsTitle": "GitOps",
29+
"repositoriesTitle": "Repositories",
2930
"kustomizationsTitle": "Kustomizations",
3031
"undefinedError": "Something went wrong"
3132
},
@@ -349,6 +350,7 @@
349350
"btp": "BTP",
350351
"error": "Error",
351352
"ready": "Ready",
353+
"notReady": "Not Ready",
352354
"synced": "Synced",
353355
"healthy": "Healthy",
354356
"installed": "Installed",
@@ -359,10 +361,12 @@
359361
"remaining": "Remaining",
360362
"active": "Active",
361363
"inactive": "Inactive",
364+
"comingSoon": "Coming soon...",
362365
"providers": "Provider",
363366
"health": "Health",
364367
"serviceaccounts": "ServiceAccounts",
365-
"loading": "Loading..."
368+
"loading": "Loading...",
369+
"resources": "Status"
366370
},
367371
"errors": {
368372
"installError": "Install error",

‎src/components/BentoGrid/ComponentCard/BaseCard/BaseCard.tsx‎

Lines changed: 33 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import cx from 'clsx';
44
import { ReactNode } from 'react';
55
import styles from './BaseCard.module.css';
66

7+
type CardState = 'active' | 'inactive' | 'coming-soon';
8+
79
interface BaseCardProps {
810
title: string;
911
subtitle?: string;
@@ -12,6 +14,7 @@ interface BaseCardProps {
1214
iconStyle?: React.CSSProperties;
1315
version?: string;
1416
enabled: boolean;
17+
cardState?: CardState; // New prop to handle card states
1518
onClick?: () => void;
1619
expanded?: boolean;
1720
size?: 'small' | 'medium' | 'large' | 'extra-large';
@@ -26,19 +29,39 @@ export const BaseCard = ({
2629
iconStyle,
2730
version,
2831
enabled,
32+
cardState = 'active',
2933
onClick,
3034
expanded = false,
3135
size = 'medium',
3236
children,
3337
}: BaseCardProps) => {
3438
const { t } = useTranslation();
3539

40+
// Determine if card should be interactive
41+
const isInteractive = enabled && cardState === 'active';
42+
43+
// Determine version display logic
44+
const shouldShowVersion = enabled && cardState === 'active' && version;
45+
const versionInSubtitle = size === 'small' && shouldShowVersion;
46+
const versionInAdditionalText = !versionInSubtitle && shouldShowVersion;
47+
48+
// Determine subtitle content
49+
const getSubtitleContent = () => {
50+
if (size === 'small') {
51+
if (cardState === 'inactive') return t('common.inactive');
52+
if (cardState === 'coming-soon') return t('common.comingSoon');
53+
if (versionInSubtitle) return `v${version}`;
54+
return undefined;
55+
}
56+
return subtitle;
57+
};
58+
3659
return (
3760
<div className={styles.container}>
3861
<Card
3962
header={
4063
<CardHeader
41-
additionalText={enabled && version ? `v${version}` : undefined}
64+
additionalText={versionInAdditionalText ? `v${version}` : undefined}
4265
avatar={
4366
<img
4467
src={iconSrc}
@@ -50,19 +73,19 @@ export const BaseCard = ({
5073
/>
5174
}
5275
titleText={title}
53-
subtitleText={size === 'small' ? undefined : subtitle}
54-
interactive={enabled}
76+
subtitleText={getSubtitleContent()}
77+
interactive={isInteractive}
5578
/>
5679
}
5780
className={cx(styles.card, {
58-
[styles.disabled]: !enabled,
59-
[styles.clickable]: !!onClick && enabled,
81+
[styles.disabled]: !enabled || cardState !== 'active',
82+
[styles.clickable]: !!onClick && isInteractive,
6083
})}
61-
onClick={enabled ? onClick : undefined}
84+
onClick={isInteractive ? onClick : undefined}
6285
>
63-
{!enabled && <div className={styles.disabledOverlay} />}
86+
{(!enabled || cardState !== 'active') && <div className={styles.disabledOverlay} />}
6487

65-
{onClick && enabled && (
88+
{onClick && isInteractive && (
6689
<Button
6790
icon={expanded ? 'sap-icon://collapse' : 'sap-icon://expand'}
6891
design="Transparent"
@@ -81,3 +104,5 @@ export const BaseCard = ({
81104
</div>
82105
);
83106
};
107+
108+
export type { CardState };

‎src/components/BentoGrid/ComponentCard/CrossplaneCard/CrossplaneCard.tsx‎

Lines changed: 36 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export const CrossplaneCard = ({
7171
size === 'large' || size === 'extra-large' ? styles.contentContainerMultiple : styles.contentContainer
7272
}
7373
>
74-
{/* Primary chart container */}
74+
{/* Health chart container - now primary */}
7575
<div
7676
className={
7777
size === 'small'
@@ -82,81 +82,84 @@ export const CrossplaneCard = ({
8282
}
8383
>
8484
<div
85-
onMouseEnter={() => setIsProviderChartHovered(true)}
86-
onMouseLeave={() => setIsProviderChartHovered(false)}
85+
onMouseEnter={crossplaneState.hasData ? () => setIsHealthChartHovered(true) : undefined}
86+
onMouseLeave={crossplaneState.hasData ? () => setIsHealthChartHovered(false) : undefined}
8787
>
8888
<MultiPercentageBar
89-
segments={secondarySegments.map(segment => ({
89+
segments={crossplaneState.segments.map(segment => ({
9090
...segment,
91-
segmentLabel: `${segment.label} (${segment.count})`, // Provider name (count) - percentage handled by component
92-
segmentLabelColor: 'white'
91+
segmentLabel: segment.percentage > 15 ? `${segment.label}${segment.count !== undefined ? ` (${segment.count})` : ''}` : (segment.count || 0) > 0 ? `${segment.count}` : '', // Status (count) - percentage handled by component
92+
segmentLabelColor: (segment.color === '#e9e9e9ff') ? 'black' : 'white'
9393
}))}
9494
className={styles.progressBar}
95-
showOnlyNonZero={true}
95+
showOnlyNonZero={crossplaneState.showOnlyNonZero ?? true}
96+
isHealthy={crossplaneState.isHealthy}
9697
barWidth={size === 'medium' ? '80%' : '90%'}
9798
barHeight={size === 'medium' ? '16px' : '18px'}
9899
barMaxWidth={size === 'medium' ? '500px' : 'none'}
99100
labelConfig={{
100101
position: 'above',
101102
displayMode: 'primary',
102-
showPercentage: false, // Don't show percentage in primary label, only in segments
103-
primaryLabelText: t('common.providers'),
104-
primaryLabelValue: providerDistribution.totalProviders,
103+
showPercentage: false, // Never show automatic percentage since we're using primaryLabelValue
104+
showCount: false,
105+
primaryLabelText: isLoading ? t('Hints.common.loading') : 'Health',
106+
primaryLabelValue: isLoading ? undefined : `${crossplaneState.healthyPercentage || 0}%`,
105107
hideWhenSingleFull: false,
106-
fontWeight: 'bold',
108+
fontWeight: isLoading ? 'normal' : 'bold',
107109
}}
108110
animationConfig={{
109111
enableWave: size !== 'medium',
110112
enableTransitions: size !== 'medium',
111113
duration: size === 'medium' ? 0 : 400,
112114
staggerDelay: size === 'medium' ? 0 : 100,
113115
}}
114-
showSegmentLabels={false}
115-
showSegmentLabelsOnHover={true} // Show segment labels only on hover
116-
showLabels={shouldShowLabelsAlways || isProviderChartHovered} // Show continuously when expanded/large or on hover
116+
showSegmentLabels={false}
117+
showSegmentLabelsOnHover={true}
118+
showLabels={crossplaneState.hasData && (shouldShowLabelsAlways || isHealthChartHovered)}
117119
minSegmentWidthForLabel={12}
118120
/>
119121
</div>
120122
</div>
121123

122-
{/* Secondary chart container - rendered below the primary chart */}
123-
{(size === 'medium' || size === 'large' || size === 'extra-large') && secondarySegments && (
124+
{/* Provider chart container - now secondary */}
125+
{(size === 'medium' || size === 'large' || size === 'extra-large') && (
124126
<div className={size === 'medium' ? styles.progressBarContainerMedium : styles.progressBarContainerLarge}>
125127
<div
126-
onMouseEnter={() => setIsHealthChartHovered(true)}
127-
onMouseLeave={() => setIsHealthChartHovered(false)}
128+
onMouseEnter={providerDistribution.segments.length > 0 ? () => setIsProviderChartHovered(true) : undefined}
129+
onMouseLeave={providerDistribution.segments.length > 0 ? () => setIsProviderChartHovered(false) : undefined}
128130
>
129131
<MultiPercentageBar
130-
segments={crossplaneState.segments.map(segment => ({
131-
...segment,
132-
segmentLabel: `${segment.label} (${segment.count})`, // Status (count) - percentage handled by component
133-
segmentLabelColor: 'white'
134-
}))}
132+
segments={isLoading ?
133+
[{ percentage: 100, color: '#e9e9e9ff', label: t('Hints.common.loading'), segmentLabel: t('Hints.common.loading'), segmentLabelColor: 'white' }] :
134+
secondarySegments.map(segment => ({
135+
...segment,
136+
segmentLabel: segment.percentage > 15 ? `${segment.label} (${segment.count})` : (segment.count || 0) > 0 ? `${segment.count}` : '', // Provider name (count) - percentage handled by component
137+
segmentLabelColor: (segment.color === '#e9e9e9ff') ? 'black' : 'white'
138+
}))
139+
}
135140
className={styles.progressBar}
136-
showOnlyNonZero={crossplaneState.showOnlyNonZero ?? true}
137-
isHealthy={crossplaneState.isHealthy}
141+
showOnlyNonZero={true}
138142
barWidth={size === 'medium' ? '80%' : '90%'}
139143
barHeight={size === 'medium' ? '16px' : '18px'}
140144
barMaxWidth={size === 'medium' ? '500px' : 'none'}
141145
labelConfig={{
142146
position: 'above',
143147
displayMode: 'primary',
144-
showPercentage: size === 'medium' ? false : crossplaneState.showPercentage, // Restore original logic
145-
showCount: false,
146-
primaryLabelText: 'Health',
147-
primaryLabelValue: undefined,
148+
showPercentage: false, // Don't show percentage in primary label, only in segments
149+
primaryLabelText: isLoading ? t('Hints.common.loading') : t('common.providers'),
150+
primaryLabelValue: isLoading ? undefined : providerDistribution.totalProviders,
148151
hideWhenSingleFull: false,
149-
fontWeight: 'bold',
152+
fontWeight: isLoading ? 'normal' : 'bold',
150153
}}
151154
animationConfig={{
152155
enableWave: size !== 'medium',
153156
enableTransitions: size !== 'medium',
154157
duration: size === 'medium' ? 0 : 400,
155158
staggerDelay: size === 'medium' ? 0 : 100,
156159
}}
157-
showSegmentLabels={false}
158-
showSegmentLabelsOnHover={true}
159-
showLabels={shouldShowLabelsAlways || isHealthChartHovered} // Show continuously when expanded/large or on hover
160+
showSegmentLabels={false}
161+
showSegmentLabelsOnHover={true} // Show segment labels only on hover
162+
showLabels={providerDistribution.segments.length > 0 && (shouldShowLabelsAlways || isProviderChartHovered)} // Show continuously when expanded/large or on hover
160163
minSegmentWidthForLabel={12}
161164
/>
162165
</div>

‎src/components/BentoGrid/ComponentCard/CrossplaneCard/crossplaneCalculations.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ export interface CrossplaneState {
2323
showPercentage: boolean;
2424
isHealthy: boolean;
2525
showOnlyNonZero?: boolean;
26+
hasData?: boolean;
27+
healthyPercentage?: number;
2628
}
2729

2830
export const calculateCrossplaneSegments = (
@@ -39,6 +41,8 @@ export const calculateCrossplaneSegments = (
3941
showPercentage: false,
4042
isHealthy: false,
4143
showOnlyNonZero: true,
44+
hasData: false,
45+
healthyPercentage: 0,
4246
};
4347
}
4448

@@ -49,6 +53,8 @@ export const calculateCrossplaneSegments = (
4953
showPercentage: false,
5054
isHealthy: false,
5155
showOnlyNonZero: true,
56+
hasData: false,
57+
healthyPercentage: 0,
5258
};
5359
}
5460

@@ -59,6 +65,8 @@ export const calculateCrossplaneSegments = (
5965
showPercentage: false,
6066
isHealthy: false,
6167
showOnlyNonZero: true,
68+
hasData: false,
69+
healthyPercentage: 0,
6270
};
6371
}
6472

@@ -71,6 +79,8 @@ export const calculateCrossplaneSegments = (
7179
showPercentage: false,
7280
isHealthy: false,
7381
showOnlyNonZero: true,
82+
hasData: false,
83+
healthyPercentage: 0,
7484
};
7585
}
7686

@@ -113,6 +123,8 @@ export const calculateCrossplaneSegments = (
113123
showPercentage: true,
114124
isHealthy: healthyPercentage === 100 && totalCount > 0,
115125
showOnlyNonZero: true,
126+
hasData: true,
127+
healthyPercentage, // Add the healthy percentage to the return value
116128
};
117129
};
118130

‎src/components/BentoGrid/ComponentCard/ESOCard/ESOCard.module.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@
77
flex: 1;
88
}
99

10+
.inactiveContent {
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
flex: 1;
15+
min-height: 60px;
16+
}
17+
1018
.progressBarContainer {
1119
display: flex;
1220
gap: 8px;

0 commit comments

Comments
 (0)