+ {children}
+
+ );
+};
+
+export const BentoGrid: React.FC{children}
;
+};
diff --git a/src/components/BentoGrid/ComponentCard/BaseCard/BaseCard.module.css b/src/components/BentoGrid/ComponentCard/BaseCard/BaseCard.module.css
new file mode 100644
index 00000000..d1475648
--- /dev/null
+++ b/src/components/BentoGrid/ComponentCard/BaseCard/BaseCard.module.css
@@ -0,0 +1,60 @@
+.container {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+.card {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+.disabled {
+ opacity: 0.6;
+ user-select: none;
+ pointer-events: none;
+}
+
+.clickable {
+ cursor: pointer;
+}
+
+.disabledOverlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.1);
+ z-index: 1;
+ pointer-events: none;
+}
+
+.avatar {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background: transparent;
+ object-fit: cover;
+}
+
+.expandButton {
+ position: absolute;
+ bottom: 8px;
+ right: 8px;
+ min-width: 32px;
+ height: 32px;
+ z-index: 10;
+}
+
+.expandButtonSmall {
+ position: absolute;
+ bottom: 8px;
+ right: 8px;
+ min-width: 24px;
+ height: 24px;
+ z-index: 10;
+}
\ No newline at end of file
diff --git a/src/components/BentoGrid/ComponentCard/BaseCard/BaseCard.tsx b/src/components/BentoGrid/ComponentCard/BaseCard/BaseCard.tsx
new file mode 100644
index 00000000..06d8ba7b
--- /dev/null
+++ b/src/components/BentoGrid/ComponentCard/BaseCard/BaseCard.tsx
@@ -0,0 +1,108 @@
+import { Card, CardHeader, Button } from '@ui5/webcomponents-react';
+import { useTranslation } from 'react-i18next';
+import cx from 'clsx';
+import { ReactNode } from 'react';
+import styles from './BaseCard.module.css';
+
+type CardState = 'active' | 'inactive' | 'coming-soon';
+
+interface BaseCardProps {
+ title: string;
+ subtitle?: string;
+ iconSrc: string;
+ iconAlt: string;
+ iconStyle?: React.CSSProperties;
+ version?: string;
+ enabled: boolean;
+ cardState?: CardState; // New prop to handle card states
+ onClick?: () => void;
+ expanded?: boolean;
+ size?: 'small' | 'medium' | 'large' | 'extra-large';
+ children: ReactNode;
+}
+
+export const BaseCard = ({
+ title,
+ subtitle,
+ iconSrc,
+ iconAlt,
+ iconStyle,
+ version,
+ enabled,
+ cardState = 'active',
+ onClick,
+ expanded = false,
+ size = 'medium',
+ children,
+}: BaseCardProps) => {
+ const { t } = useTranslation();
+
+ // Determine if card should be interactive
+ const isInteractive = enabled && cardState === 'active';
+
+ // Determine version display logic
+ const shouldShowVersion = enabled && cardState === 'active' && version;
+ const versionInSubtitle = size === 'small' && shouldShowVersion;
+ const versionInAdditionalText = !versionInSubtitle && shouldShowVersion;
+
+ // Determine subtitle content
+ const getSubtitleContent = () => {
+ if (size === 'small') {
+ if (cardState === 'inactive') return t('common.inactive');
+ if (cardState === 'coming-soon') return t('common.comingSoon');
+ if (versionInSubtitle) return `v${version}`;
+ return undefined;
+ }
+ return subtitle;
+ };
+
+ return (
+
+
+ );
+};
+
+export type { CardState };
diff --git a/src/components/BentoGrid/ComponentCard/CrossplaneCard/CrossplaneCard.module.css b/src/components/BentoGrid/ComponentCard/CrossplaneCard/CrossplaneCard.module.css
new file mode 100644
index 00000000..96e9c923
--- /dev/null
+++ b/src/components/BentoGrid/ComponentCard/CrossplaneCard/CrossplaneCard.module.css
@@ -0,0 +1,54 @@
+.contentContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ padding: 0.125rem 0;
+ flex: 1;
+}
+
+.contentContainerMultiple {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ padding: 0.125rem 0;
+ flex: 1;
+}
+
+.progressBarContainer {
+ display: flex;
+ gap: 8px;
+ width: 100%;
+ max-width: 500px;
+ padding: 0 0.5rem;
+}
+
+.progressBarContainerSmall {
+ display: flex;
+ gap: 6px;
+ width: 100%;
+ max-width: 400px;
+ padding: 0 0.5rem;
+}
+
+.progressBarContainerMedium {
+ display: flex;
+ gap: 6px;
+ width: 100%;
+ max-width: 600px;
+ padding: 0 0.75rem;
+}
+
+.progressBarContainerLarge {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ max-width: none;
+ padding: 0 1rem;
+}
+
+.progressBar {
+ width: 100%;
+}
\ No newline at end of file
diff --git a/src/components/BentoGrid/ComponentCard/CrossplaneCard/CrossplaneCard.tsx b/src/components/BentoGrid/ComponentCard/CrossplaneCard/CrossplaneCard.tsx
new file mode 100644
index 00000000..0681b79a
--- /dev/null
+++ b/src/components/BentoGrid/ComponentCard/CrossplaneCard/CrossplaneCard.tsx
@@ -0,0 +1,171 @@
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BaseCard } from '../BaseCard/BaseCard';
+import { MultiPercentageBar } from '../../MultiPercentageBar/MultiPercentageBar';
+import { ManagedResourceItem } from '../../../../lib/shared/types';
+import { APIError } from '../../../../lib/api/error';
+import { calculateCrossplaneSegments, calculateProviderDistribution } from './crossplaneCalculations';
+import { useProvidersConfigResource } from '../../../../lib/api/useApiResource';
+import styles from './CrossplaneCard.module.css';
+
+interface CrossplaneCardProps {
+ allItems: ManagedResourceItem[];
+ enabled: boolean;
+ version?: string;
+ isLoading?: boolean;
+ error?: APIError;
+ onClick?: () => void;
+ expanded?: boolean;
+ size?: 'small' | 'medium' | 'large' | 'extra-large';
+}
+
+export const CrossplaneCard = ({
+ allItems = [],
+ enabled,
+ version,
+ isLoading = false,
+ error,
+ onClick,
+ expanded = false,
+ size = 'medium',
+}: CrossplaneCardProps) => {
+ const { t } = useTranslation();
+ const [isProviderChartHovered, setIsProviderChartHovered] = useState(false);
+ const [isHealthChartHovered, setIsHealthChartHovered] = useState(false);
+
+ // Show labels continuously only when explicitly expanded (coupled to expansion button)
+ const shouldShowLabelsAlways = expanded;
+
+ // Fetch provider configs for distribution calculation
+ const { data: providerConfigsList } = useProvidersConfigResource({
+ refreshInterval: 60000,
+ });
+
+ const crossplaneState = useMemo(
+ () => calculateCrossplaneSegments(allItems, isLoading, error, enabled, t),
+ [allItems, isLoading, error, enabled, t],
+ );
+
+ // Calculate provider distribution for secondary bar
+ const providerDistribution = useMemo(
+ () => calculateProviderDistribution(allItems, providerConfigsList || []),
+ [allItems, providerConfigsList],
+ );
+
+ const secondarySegments = providerDistribution.segments;
+
+ return (
+
+ {/* Health chart container - now primary */}
+
+
+
+
+ {/* Provider chart container - now secondary */}
+ {(size === 'medium' || size === 'large' || size === 'extra-large') && (
+ setIsHealthChartHovered(true) : undefined}
+ onMouseLeave={crossplaneState.hasData ? () => setIsHealthChartHovered(false) : undefined}
+ >
+ ({
+ ...segment,
+ segmentLabel: segment.percentage > 15 ? `${segment.label}${segment.count !== undefined ? ` (${segment.count})` : ''}` : (segment.count || 0) > 0 ? `${segment.count}` : '', // Status (count) - percentage handled by component
+ segmentLabelColor: (segment.color === '#e9e9e9ff') ? 'black' : 'white'
+ }))}
+ className={styles.progressBar}
+ showOnlyNonZero={crossplaneState.showOnlyNonZero ?? true}
+ isHealthy={crossplaneState.isHealthy}
+ barWidth={size === 'medium' ? '80%' : '90%'}
+ barHeight={size === 'medium' ? '16px' : '18px'}
+ barMaxWidth={size === 'medium' ? '500px' : 'none'}
+ labelConfig={{
+ position: 'above',
+ displayMode: 'primary',
+ showPercentage: false, // Never show automatic percentage since we're using primaryLabelValue
+ showCount: false,
+ primaryLabelText: isLoading ? t('Hints.common.loading') : 'Health',
+ primaryLabelValue: isLoading ? undefined : `${crossplaneState.healthyPercentage || 0}%`,
+ hideWhenSingleFull: false,
+ fontWeight: isLoading ? 'normal' : 'bold',
+ }}
+ animationConfig={{
+ enableWave: size !== 'medium',
+ enableTransitions: size !== 'medium',
+ duration: size === 'medium' ? 0 : 400,
+ staggerDelay: size === 'medium' ? 0 : 100,
+ }}
+ showSegmentLabels={false}
+ showSegmentLabelsOnHover={true}
+ showLabels={crossplaneState.hasData && (shouldShowLabelsAlways || isHealthChartHovered)}
+ minSegmentWidthForLabel={12}
+ />
+
+
+
+ )}
+ 0 ? () => setIsProviderChartHovered(true) : undefined}
+ onMouseLeave={providerDistribution.segments.length > 0 ? () => setIsProviderChartHovered(false) : undefined}
+ >
+ ({
+ ...segment,
+ segmentLabel: segment.percentage > 15 ? `${segment.label} (${segment.count})` : (segment.count || 0) > 0 ? `${segment.count}` : '', // Provider name (count) - percentage handled by component
+ segmentLabelColor: (segment.color === '#e9e9e9ff') ? 'black' : 'white'
+ }))
+ }
+ className={styles.progressBar}
+ showOnlyNonZero={true}
+ barWidth={size === 'medium' ? '80%' : '90%'}
+ barHeight={size === 'medium' ? '16px' : '18px'}
+ barMaxWidth={size === 'medium' ? '500px' : 'none'}
+ labelConfig={{
+ position: 'above',
+ displayMode: 'primary',
+ showPercentage: false, // Don't show percentage in primary label, only in segments
+ primaryLabelText: isLoading ? t('Hints.common.loading') : t('common.providers'),
+ primaryLabelValue: isLoading ? undefined : providerDistribution.totalProviders,
+ hideWhenSingleFull: false,
+ fontWeight: isLoading ? 'normal' : 'bold',
+ }}
+ animationConfig={{
+ enableWave: size !== 'medium',
+ enableTransitions: size !== 'medium',
+ duration: size === 'medium' ? 0 : 400,
+ staggerDelay: size === 'medium' ? 0 : 100,
+ }}
+ showSegmentLabels={false}
+ showSegmentLabelsOnHover={true} // Show segment labels only on hover
+ showLabels={providerDistribution.segments.length > 0 && (shouldShowLabelsAlways || isProviderChartHovered)} // Show continuously when expanded/large or on hover
+ minSegmentWidthForLabel={12}
+ />
+
+
+
+
+
+
+ {/* Primary chart container */}
+
+ setIsPrimaryChartHovered(true) : undefined}
+ onMouseLeave={fluxState.hasData ? () => setIsPrimaryChartHovered(false) : undefined}
+ >
+ ({
+ ...segment,
+ segmentLabel: segment.percentage > 15 ? `${segment.label}${segment.count !== undefined ? ` (${segment.count})` : ''}` : (segment.count || 0) > 0 ? `${segment.count}` : '',
+ segmentLabelColor: (segment.color === '#e9e9e9ff' || segment.label?.toLowerCase().includes('remaining')) ? 'black' : 'white'
+ }))}
+ className={styles.progressBar}
+ showOnlyNonZero={fluxState.showOnlyNonZero ?? true}
+ isHealthy={fluxState.isHealthy}
+ barWidth={size === 'small' ? '80%' : size === 'medium' ? '80%' : '90%'}
+ barHeight={size === 'small' ? '10px' : size === 'medium' ? '16px' : '18px'}
+ barMaxWidth={size === 'small' ? '400px' : size === 'medium' ? '500px' : 'none'}
+ labelConfig={{
+ position: 'above',
+ displayMode: 'primary',
+ showPercentage: false,
+ showCount: false,
+ primaryLabelText: isLoading ? t('Hints.common.loading') : fluxState.label,
+ primaryLabelValue: isLoading ? undefined : (fluxState.hasData && fluxState.segments.length > 0 ? `${fluxState.segments[0]?.percentage || 0}%` : undefined),
+ hideWhenSingleFull: false,
+ fontWeight: isLoading ? 'normal' : 'bold',
+ }}
+ animationConfig={{
+ enableWave: size !== 'medium',
+ enableTransitions: size !== 'medium',
+ duration: size === 'medium' ? 0 : 400,
+ staggerDelay: size === 'medium' ? 0 : 100,
+ }}
+ showSegmentLabels={false}
+ showSegmentLabelsOnHover={true}
+ showLabels={fluxState.hasData && (shouldShowLabelsAlways || isPrimaryChartHovered)}
+ minSegmentWidthForLabel={12}
+ />
+
+
+ {/* Flux Resources chart container - rendered below the primary chart */}
+ {(size === 'medium' || size === 'large' || size === 'extra-large') && (
+ setIsResourceChartHovered(true) : undefined}
+ onMouseLeave={fluxResourceStatus.hasData ? () => setIsResourceChartHovered(false) : undefined}
+ >
+ ({
+ ...segment,
+ segmentLabel: segment.percentage > 15 ? `${segment.label} (${segment.count || 0})` : (segment.count || 0) > 0 ? `${segment.count}` : '',
+ segmentLabelColor: 'white'
+ }))
+ }
+ className={styles.progressBar}
+ showOnlyNonZero={true}
+ barWidth={size === 'medium' ? '80%' : '90%'}
+ barHeight={size === 'medium' ? '16px' : '18px'}
+ barMaxWidth={size === 'medium' ? '500px' : 'none'}
+ labelConfig={{
+ position: 'above',
+ displayMode: 'primary',
+ showPercentage: false,
+ showCount: false,
+ primaryLabelText: isLoading ? t('Hints.common.loading') : t('common.resources') || 'Resources',
+ primaryLabelValue: isLoading ? undefined : (fluxResourceStatus.hasData && fluxResourceStatus.segments.length > 0 ? `${fluxResourceStatus.segments[0]?.percentage || 0}%` : undefined),
+ hideWhenSingleFull: false,
+ fontWeight: isLoading ? 'normal' : 'bold',
+ }}
+ animationConfig={{
+ enableWave: size !== 'medium',
+ enableTransitions: size !== 'medium',
+ duration: size === 'medium' ? 0 : 400,
+ staggerDelay: size === 'medium' ? 0 : 100,
+ }}
+ showSegmentLabels={false}
+ showSegmentLabelsOnHover={true}
+ showLabels={fluxResourceStatus.hasData && (shouldShowLabelsAlways || isResourceChartHovered)}
+ minSegmentWidthForLabel={12}
+ />
+
+ )}
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/BentoGrid/GraphCard/index.ts b/src/components/BentoGrid/GraphCard/index.ts
new file mode 100644
index 00000000..4ee686ce
--- /dev/null
+++ b/src/components/BentoGrid/GraphCard/index.ts
@@ -0,0 +1,2 @@
+export { GraphCard } from './GraphCard';
+export type { GraphCardProps } from './GraphCard';
diff --git a/src/components/BentoGrid/MembersCard/MembersCard.module.css b/src/components/BentoGrid/MembersCard/MembersCard.module.css
new file mode 100644
index 00000000..96e9c923
--- /dev/null
+++ b/src/components/BentoGrid/MembersCard/MembersCard.module.css
@@ -0,0 +1,54 @@
+.contentContainer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ padding: 0.125rem 0;
+ flex: 1;
+}
+
+.contentContainerMultiple {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ padding: 0.125rem 0;
+ flex: 1;
+}
+
+.progressBarContainer {
+ display: flex;
+ gap: 8px;
+ width: 100%;
+ max-width: 500px;
+ padding: 0 0.5rem;
+}
+
+.progressBarContainerSmall {
+ display: flex;
+ gap: 6px;
+ width: 100%;
+ max-width: 400px;
+ padding: 0 0.5rem;
+}
+
+.progressBarContainerMedium {
+ display: flex;
+ gap: 6px;
+ width: 100%;
+ max-width: 600px;
+ padding: 0 0.75rem;
+}
+
+.progressBarContainerLarge {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+ max-width: none;
+ padding: 0 1rem;
+}
+
+.progressBar {
+ width: 100%;
+}
\ No newline at end of file
diff --git a/src/components/BentoGrid/MembersCard/MembersCard.tsx b/src/components/BentoGrid/MembersCard/MembersCard.tsx
new file mode 100644
index 00000000..3e0d6d58
--- /dev/null
+++ b/src/components/BentoGrid/MembersCard/MembersCard.tsx
@@ -0,0 +1,158 @@
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BaseCard } from '../ComponentCard/BaseCard/BaseCard';
+import { MultiPercentageBar } from '../MultiPercentageBar/MultiPercentageBar';
+import { APIError } from '../../../lib/api/error';
+import { calculateMembersSegments, MemberItem } from './membersCalculations';
+import styles from './MembersCard.module.css';
+
+interface MembersCardProps {
+ allItems: MemberItem[];
+ enabled: boolean;
+ version?: string;
+ isLoading?: boolean;
+ error?: APIError;
+ onClick?: () => void;
+ expanded?: boolean;
+ size?: 'small' | 'medium' | 'large' | 'extra-large';
+}
+
+export const MembersCard = ({
+ allItems = [],
+ enabled,
+ version,
+ isLoading = false,
+ error,
+ onClick,
+ expanded = false,
+ size = 'medium',
+}: MembersCardProps) => {
+ const { t } = useTranslation();
+ const [isUsersChartHovered, setIsUsersChartHovered] = useState(false);
+ const [isServiceAccountsChartHovered, setIsServiceAccountsChartHovered] = useState(false);
+
+ // Show labels continuously only when explicitly expanded (coupled to expansion button)
+ const shouldShowLabelsAlways = expanded;
+
+ const usersState = useMemo(
+ () => calculateMembersSegments(allItems, isLoading, error, enabled, t, 'user'),
+ [allItems, isLoading, error, enabled, t],
+ );
+
+ const serviceAccountsState = useMemo(
+ () => calculateMembersSegments(allItems, isLoading, error, enabled, t, 'serviceaccount'),
+ [allItems, isLoading, error, enabled, t],
+ );
+
+ return (
+
+
+
+ {/* Users chart container */}
+
+ setIsUsersChartHovered(true) : undefined}
+ onMouseLeave={usersState.hasData ? () => setIsUsersChartHovered(false) : undefined}
+ >
+ ({
+ ...segment,
+ segmentLabel: segment.percentage > 15 ? `${segment.label}${segment.count !== undefined ? ` (${segment.count})` : ''}` : (segment.count || 0) > 0 ? `${segment.count}` : '',
+ segmentLabelColor: (segment.color === '#e9e9e9ff') ? 'black' : 'white'
+ }))}
+ className={styles.progressBar}
+ showOnlyNonZero={usersState.showOnlyNonZero ?? true}
+ isHealthy={usersState.isHealthy}
+ barWidth={size === 'small' ? '80%' : size === 'medium' ? '80%' : '90%'}
+ barHeight={size === 'small' ? '10px' : size === 'medium' ? '16px' : '18px'}
+ barMaxWidth={size === 'small' ? '400px' : size === 'medium' ? '500px' : 'none'}
+ labelConfig={{
+ position: 'above',
+ displayMode: 'primary',
+ showPercentage: false,
+ showCount: false,
+ primaryLabelText: isLoading ? t('Hints.common.loading') : usersState.label,
+ primaryLabelValue: isLoading ? undefined : (usersState.hasData ? usersState.totalCount : undefined),
+ hideWhenSingleFull: false,
+ fontWeight: isLoading ? 'normal' : 'bold',
+ }}
+ animationConfig={{
+ enableWave: size !== 'medium',
+ enableTransitions: size !== 'medium',
+ duration: size === 'medium' ? 0 : 400,
+ staggerDelay: size === 'medium' ? 0 : 100,
+ }}
+ showSegmentLabels={false}
+ showSegmentLabelsOnHover={true}
+ showLabels={usersState.hasData && (shouldShowLabelsAlways || isUsersChartHovered)}
+ minSegmentWidthForLabel={12}
+ />
+
+
+ {/* Service Accounts chart container - rendered below the users chart */}
+ {(size === 'medium' || size === 'large' || size === 'extra-large') && (
+ setIsServiceAccountsChartHovered(true) : undefined}
+ onMouseLeave={serviceAccountsState.hasData ? () => setIsServiceAccountsChartHovered(false) : undefined}
+ >
+ ({
+ ...segment,
+ segmentLabel: segment.percentage > 15 ? `${segment.label}${segment.count !== undefined ? ` (${segment.count})` : ''}` : (segment.count || 0) > 0 ? `${segment.count}` : '',
+ segmentLabelColor: (segment.color === '#e9e9e9ff') ? 'black' : 'white'
+ }))
+ }
+ className={styles.progressBar}
+ showOnlyNonZero={serviceAccountsState.showOnlyNonZero ?? true}
+ isHealthy={serviceAccountsState.isHealthy}
+ barWidth={size === 'medium' ? '80%' : '90%'}
+ barHeight={size === 'medium' ? '16px' : '18px'}
+ barMaxWidth={size === 'medium' ? '500px' : 'none'}
+ labelConfig={{
+ position: 'above',
+ displayMode: 'primary',
+ showPercentage: false,
+ showCount: false,
+ primaryLabelText: isLoading ? t('Hints.common.loading') : serviceAccountsState.label,
+ primaryLabelValue: isLoading ? undefined : (serviceAccountsState.hasData ? serviceAccountsState.totalCount : undefined),
+ hideWhenSingleFull: false,
+ fontWeight: isLoading ? 'normal' : 'bold',
+ }}
+ animationConfig={{
+ enableWave: size !== 'medium',
+ enableTransitions: size !== 'medium',
+ duration: size === 'medium' ? 0 : 400,
+ staggerDelay: size === 'medium' ? 0 : 100,
+ }}
+ showSegmentLabels={false}
+ showSegmentLabelsOnHover={true}
+ showLabels={serviceAccountsState.hasData && (shouldShowLabelsAlways || isServiceAccountsChartHovered)}
+ minSegmentWidthForLabel={12}
+ />
+
+ )}
+
+ {labelsToShow.map((labelItem, index) => (
+
+ );
+ };
+
+ return (
+
+
+ {labelItem.text}
+
+ {labelItem.percentage !== undefined && (
+
+ {labelItem.percentage}%
+
+ )}
+ {labelItem.count !== undefined && (
+
+ ({labelItem.count})
+
+ )}
+ {labelItem.customValue !== undefined && (
+
+ {labelItem.customValue}
+
+ )}
+
+ ))}
+
+ {/* Labels above the bar */}
+ {renderAboveLabels()}
+
+ {/* Progress bar */}
+
+ );
+};
+
+export type {
+ PercentageSegment,
+ MultiPercentageBarProps,
+ LabelConfig,
+ ColorConfig,
+ AnimationConfig,
+ LabelPosition,
+ LabelDisplayMode,
+};
diff --git a/src/components/ControlPlane/FluxList.tsx b/src/components/ControlPlane/FluxList.tsx
index ccbf5f18..f7371bf1 100644
--- a/src/components/ControlPlane/FluxList.tsx
+++ b/src/components/ControlPlane/FluxList.tsx
@@ -172,7 +172,7 @@ export default function FluxList() {
<>
+ {processedSegments.map((segment, index) => (
+
+
+ {/* Wave animation overlay */}
+ {mergedAnimationConfig.enableWave && }
+
+ {/* Segment label inside the bar */}
+ {(showSegmentLabels || (segment.segmentLabel && (!showSegmentLabelsOnHover || showLabels))) && segment.percentage >= (minSegmentWidthForLabel || 15) && (
+
+ {(() => {
+ // Calculate segment width in pixels (approximate)
+ const barMaxWidthPx = parseFloat(barMaxWidth.replace('px', '')) || 400;
+ const segmentWidthPx = (segment.percentage / 100) * barMaxWidthPx;
+ return getTruncatedSegmentLabel(segment, segmentWidthPx);
+ })()}
+
+ )}
+
+ ))}
+
- 
- MCP
+
+ ManagedControlPlane UI
- MCP
+
+ ManagedControlPlane UI
+
+ setFilterPopoverOpen(false)}
+ >
+
+
+
+
+
+
+
+
+
+
{legendItems.map(({ name, color }) => (
-
+ = {
id: n.id,
type: 'custom',
data: { ...n },
style: {
- border: `2px solid ${colorMap[colorKey] || '#ccc'}`,
+ border: `2px solid ${borderColor}`,
borderRadius: 8,
- backgroundColor: 'var(--sapTile_Background, #fff)',
+ backgroundColor,
width: nodeWidth,
height: nodeHeight,
},
@@ -53,7 +59,9 @@ function buildGraph(
id: `e-${n.parentId}-${n.id}`,
source: n.parentId,
target: n.id,
- markerEnd: { type: MarkerType.ArrowClosed },
+ type: 'step',
+ style: { strokeWidth: 2, stroke: '#888' },
+ animated: true,
});
}
n.extraRefs?.forEach((refId) => {
@@ -63,7 +71,9 @@ function buildGraph(
id: `e-${refId}-${n.id}`,
source: refId,
target: n.id,
- markerEnd: { type: MarkerType.ArrowClosed },
+ type: 'step',
+ style: { strokeWidth: 2, stroke: '#888' },
+ animated: true,
});
}
});
diff --git a/src/components/HintsCardsRow/CardHoverContent/CardHoverContent.module.css b/src/components/HintsCardsRow/CardHoverContent/CardHoverContent.module.css
deleted file mode 100644
index 59a63c81..00000000
--- a/src/components/HintsCardsRow/CardHoverContent/CardHoverContent.module.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/* Card Hover Content Styles */
-.hoverContent {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- margin: 1rem 0;
- overflow: visible;
-}
-
-.chartContainer {
- width: 100%;
- height: 300px;
- display: flex;
- justify-content: center;
- align-items: center;
-}
diff --git a/src/components/HintsCardsRow/CardHoverContent/CardHoverContent.tsx b/src/components/HintsCardsRow/CardHoverContent/CardHoverContent.tsx
deleted file mode 100644
index ad0bd314..00000000
--- a/src/components/HintsCardsRow/CardHoverContent/CardHoverContent.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import React, { useMemo } from 'react';
-import { RadarChart } from '@ui5/webcomponents-react-charts';
-import { LegendSection } from '../LegendSection/LegendSection';
-import { styles } from '../HintsCardsRow';
-import styles2 from './CardHoverContent.module.css';
-import cx from 'clsx';
-
-export interface LegendItem {
- label: string;
- count: number;
- color: string;
-}
-
-export interface RadarDataPoint {
- [key: string]: string | number;
-}
-
-export interface RadarMeasure {
- accessor: string;
- color: string;
- hideDataLabel?: boolean;
- label: string;
-}
-
-export interface RadarDimension {
- accessor: string;
-}
-
-export interface HoverContentProps {
- enabled: boolean;
- totalCount: number;
- totalLabel: string;
- legendItems: LegendItem[];
- radarDataset: RadarDataPoint[];
- radarDimensions: RadarDimension[];
- radarMeasures: RadarMeasure[];
- isLoading?: boolean;
-}
-
-// Helper function to truncate labels to max 13 characters
-const truncateLabel = (label: string, maxLength: number = 13): string => {
- if (label.length <= maxLength) {
- return label;
- }
- return label.substring(0, maxLength) + '...';
-};
-
-export const HoverContent: React.FC = ({
- enabled,
- totalCount,
- totalLabel,
- legendItems,
- radarDataset,
- radarDimensions,
- radarMeasures,
- isLoading = false,
-}) => {
- // Process the dataset to truncate labels
- const processedDataset = useMemo(() => {
- return radarDataset.map((dataPoint) => {
- const processedDataPoint = { ...dataPoint };
-
- // Truncate labels for each dimension accessor
- radarDimensions.forEach((dimension) => {
- const value = dataPoint[dimension.accessor];
- if (typeof value === 'string') {
- processedDataPoint[dimension.accessor] = truncateLabel(value);
- }
- });
-
- return processedDataPoint;
- });
- }, [radarDataset, radarDimensions]);
-
- if (!enabled) {
- return null;
- }
-
- return (
- = {};
- let totalHealthy = 0;
- let totalCreating = 0;
- let totalUnhealthy = 0;
-
- allItems.forEach((item: ManagedResourceItem) => {
- const type = item.kind || 'Unknown';
-
- if (!typeStats[type]) {
- typeStats[type] = { total: 0, healthy: 0, creating: 0, unhealthy: 0 };
- }
-
- typeStats[type].total++;
-
- const conditions = item.status?.conditions || [];
- const ready = conditions.find((c: Condition) => c.type === 'Ready' && c.status === 'True');
- const synced = conditions.find((c: Condition) => c.type === 'Synced' && c.status === 'True');
-
- if (ready && synced) {
- typeStats[type].healthy++;
- totalHealthy++;
- } else if (synced && !ready) {
- // Resource is synced but not ready - it's creating
- typeStats[type].creating++;
- totalCreating++;
- } else {
- // Resource has issues or is not synced
- typeStats[type].unhealthy++;
- totalUnhealthy++;
- }
- });
-
- const resourceTypeStats: ResourceTypeStats[] = Object.keys(typeStats).map((type) => {
- const stats = typeStats[type];
- return {
- type,
- total: stats.total,
- healthy: stats.healthy,
- creating: stats.creating,
- unhealthy: stats.unhealthy,
- healthyPercentage: Math.round((stats.healthy / stats.total) * 100),
- creatingPercentage: Math.round((stats.creating / stats.total) * 100),
- unhealthyPercentage: Math.round((stats.unhealthy / stats.total) * 100),
- };
- });
-
- return {
- resourceTypeStats,
- overallStats: {
- total: allItems.length,
- healthy: totalHealthy,
- creating: totalCreating,
- unhealthy: totalUnhealthy,
- },
- };
-};
diff --git a/src/components/HintsCardsRow/GenericHintCard/GenericHintCard.module.css b/src/components/HintsCardsRow/GenericHintCard/GenericHintCard.module.css
deleted file mode 100644
index 2625616c..00000000
--- a/src/components/HintsCardsRow/GenericHintCard/GenericHintCard.module.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.container {
- position: relative;
- width: 100%;
-}
-
-.avatar {
- width: 50px;
- height: 50px;
- border-radius: 50%;
- background: transparent;
- object-fit: cover;
-}
-
-.contentContainer {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 0.5rem 0;
-}
-
-.progressBarContainer {
- display: flex;
- gap: 8px;
- width: 100%;
- max-width: 500px;
- padding: 0 0.5rem;
-}
-
-.progressBar {
- width: 100%;
-}
-
-.activateButton {
- position: absolute;
- top: 16px;
- right: 16px;
- z-index: 2;
- pointer-events: auto;
-}
-
-.activateButtonClickable {
- cursor: pointer;
-}
-
-.activateButtonDefault {
- cursor: default;
-}
diff --git a/src/components/HintsCardsRow/GenericHintCard/GenericHintCard.tsx b/src/components/HintsCardsRow/GenericHintCard/GenericHintCard.tsx
deleted file mode 100644
index dc6123e0..00000000
--- a/src/components/HintsCardsRow/GenericHintCard/GenericHintCard.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { useState } from 'react';
-import { Card, CardHeader } from '@ui5/webcomponents-react';
-import { useTranslation } from 'react-i18next';
-import cx from 'clsx';
-import { MultiPercentageBar } from '../MultiPercentageBar/MultiPercentageBar';
-import { styles } from '../HintsCardsRow';
-import { HoverContent } from '../CardHoverContent/CardHoverContent';
-import styles2 from './GenericHintCard.module.css';
-import { GenericHintProps } from '../../../types/types';
-
-export const GenericHintCard: React.FC = ({
- enabled = false,
- version,
- allItems = [],
- isLoading,
- error,
- config,
-}) => {
- const { t } = useTranslation();
- const [hovered, setHovered] = useState(false);
-
- // Calculate segments and state using the provided calculator
- const hintState = config.calculateSegments(allItems, isLoading || false, error, enabled, t);
-
- // Handle click navigation if scroll target is provided
- const handleClick =
- enabled && config.scrollTarget
- ? () => {
- const el = document.querySelector(config.scrollTarget!);
- if (el) {
- el.scrollIntoView({ behavior: 'smooth', block: 'start' });
- }
- }
- : undefined;
-
- return (
- = ({ mcp }) => {
- const {
- data: managedResources,
- isLoading: managedResourcesLoading,
- error: managedResourcesError,
- } = useApiResource(ManagedResourcesRequest, {
- refreshInterval: resourcesInterval,
- });
-
- // Flatten all managed resources once and pass to components
- const allItems = useMemo(
- () => flattenManagedResources(managedResources ?? ([] as unknown as ManagedResourcesResponse)),
- [managedResources],
- );
-
- // Get hint configurations
- const crossplaneConfig = useCrossplaneHintConfig();
- const gitOpsConfig = useGitOpsHintConfig();
- const vaultConfig = useVaultHintConfig();
-
- return (
-
-
- );
-};
-
-export default HintsCardsRow;
diff --git a/src/components/HintsCardsRow/LegendSection/LegendSection.module.css b/src/components/HintsCardsRow/LegendSection/LegendSection.module.css
deleted file mode 100644
index 63e40530..00000000
--- a/src/components/HintsCardsRow/LegendSection/LegendSection.module.css
+++ /dev/null
@@ -1,71 +0,0 @@
-/* Legend Section Styles */
-.legendSection {
- color: var(--sapTextColor, #374151);
- margin-bottom: 1rem;
- width: 80%;
- max-width: 400px;
- align-self: center;
-}
-
-.legendTitle {
- color: var(--sapTitleColor, var(--sapTextColor, #374151));
- font-size: 0.95rem;
- font-weight: 600;
- margin-bottom: 0.5rem;
- text-align: left;
-}
-
-.legendItem {
- color: var(--sapContent_LabelColor, #6b7280);
- font-size: 0.85rem;
-}
-
-.legendItemsContainer {
- display: flex;
- gap: 0.75rem;
- align-items: center;
- justify-content: flex-start;
-}
-
-.legendItemWrapper {
- display: flex;
- align-items: center;
- gap: 0.25rem;
-}
-
-.legendDot {
- width: 10px;
- height: 10px;
- border-radius: 50%;
-}
-
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
- .legendSection {
- color: #ffffff;
- }
-
- .legendTitle {
- color: #ffffff;
- }
-
- .legendItem {
- color: #cccccc;
- }
-}
-
-/* Also check for UI5 theme variables for dark themes */
-[data-ui5-theme-root*="dark"] .legendSection,
-[data-ui5-theme*="dark"] .legendSection {
- color: #ffffff;
-}
-
-[data-ui5-theme-root*="dark"] .legendTitle,
-[data-ui5-theme*="dark"] .legendTitle {
- color: #ffffff;
-}
-
-[data-ui5-theme-root*="dark"] .legendItem,
-[data-ui5-theme*="dark"] .legendItem {
- color: #cccccc;
-}
diff --git a/src/components/HintsCardsRow/LegendSection/LegendSection.tsx b/src/components/HintsCardsRow/LegendSection/LegendSection.tsx
deleted file mode 100644
index 8c308234..00000000
--- a/src/components/HintsCardsRow/LegendSection/LegendSection.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import styles from './LegendSection.module.css';
-
-interface LegendItem {
- label: string;
- count: number;
- color: string;
-}
-
-interface LegendSectionProps {
- title: string;
- items: LegendItem[];
- style?: React.CSSProperties;
-}
-
-export const LegendSection: React.FC = ({ title, items, style }) => {
- return (
- = ({
- segments,
- label,
- showOnlyNonZero = true,
- barWidth = '80%',
- barMaxWidth = '400px',
- barHeight = '8px',
- showLabels = true,
- showPercentage = true,
- isHealthy,
- labelFontSize = '0.875rem',
- gap = '2px',
- borderRadius = '6px',
- backgroundColor,
- className,
- style,
- animationDuration = 400, // Match CSS default
-}) => {
- // Memoize filtered segments
- const filteredSegments = useMemo(() => {
- return showOnlyNonZero ? segments.filter((segment) => segment.percentage > 0) : segments;
- }, [segments, showOnlyNonZero]);
-
- if (filteredSegments.length === 0) {
- return null;
- }
-
- const primaryPercentage = filteredSegments[0]?.percentage || 0;
- const displayLabel = label || 'Healthy';
- const allHealthy = isHealthy !== undefined ? isHealthy : primaryPercentage === 100;
-
- return (
- => {
return {
path: `/apis/core.openmcp.cloud/v1alpha1/namespaces/project-${projectName}--ws-${workspaceName}/managedcontrolplanes/${controlPlaneName}`,
- jq: '{ spec: .spec | {components}, status: { conditions: [.status.conditions[] | {type: .type, status: .status, message: .message, reason: .reason, lastTransitionTime: .lastTransitionTime}], access: .status.components.authentication.access, status: .status.status }}',
+ jq: '{ spec: .spec | {components, authorization}, status: { conditions: [.status.conditions[] | {type: .type, status: .status, message: .message, reason: .reason, lastTransitionTime: .lastTransitionTime}], access: .status.components.authentication.access, status: .status.status }}',
};
};
diff --git a/src/spaces/mcp/pages/McpPage.module.css b/src/spaces/mcp/pages/McpPage.module.css
index 4d46900a..a987f812 100644
--- a/src/spaces/mcp/pages/McpPage.module.css
+++ b/src/spaces/mcp/pages/McpPage.module.css
@@ -3,3 +3,118 @@
margin: 0.1em auto -8px auto;
width: 100%;
}
+
+.expandedGrid {
+ transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.expandedMembersGrid {
+ transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+ height: 200px !important; /* Reduced height for members view without graph */
+}
+
+.expandedCard {
+ transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+ border: 1px solid var(--sapObjectHeader_BorderColor) !important;
+}
+
+.expandedCard:hover {
+ transform: none !important;
+ box-shadow: var(--sapContent_Shadow1) !important;
+}
+
+.expandedCardNonInteractive {
+ transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.expandedCardNonInteractive:hover {
+ transform: none !important;
+ box-shadow: var(--sapContent_Shadow1) !important;
+}
+
+.disabledCard {
+ pointer-events: none;
+ opacity: 0.6;
+}
+
+.disabledCard:hover {
+ transform: none !important;
+ box-shadow: var(--sapContent_Shadow1) !important;
+}
+
+.nonInteractiveCard {
+ cursor: default;
+}
+
+.nonInteractiveCard:hover {
+ transform: none !important;
+ box-shadow: var(--sapContent_Shadow1) !important;
+}
+
+.hidingCard {
+ opacity: 0;
+ transform: scale(0.95) translateX(20px);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ pointer-events: none;
+}
+
+/* Smooth grid column transitions */
+.expandedGrid .bentoCard {
+ transition: grid-column 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes slideInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* Action bar styles */
+.actionsBar {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ gap: 0.5rem;
+}
+
+/* Main container styles */
+.mainContainer {
+ max-width: 1280px;
+ margin: 0 auto;
+ width: 100%;
+ padding-top: 16px;
+ padding-bottom: 12px;
+}
+
+/* Card content container */
+.cardContentContainer {
+ position: relative;
+ height: 100%;
+}
+
+/* Details panel bottom spacing */
+.detailsPanelBottom {
+ height: 12px;
+ background-color: #f5f5f5;
+ margin-bottom: 32px;
+ border-radius: 0 0 8px 8px;
+}
+
+/* Table sections spacing */
+.tableSection {
+ margin-top: 24px;
+}
+
+.crossplaneTableElement {
+ margin-top: 16px;
+}
+
+/* First crossplane table element (no top margin) */
+.crossplaneTableElementFirst {
+ margin-top: 24px;
+}
diff --git a/src/spaces/mcp/pages/McpPage.tsx b/src/spaces/mcp/pages/McpPage.tsx
index de04cac0..7d279e99 100644
--- a/src/spaces/mcp/pages/McpPage.tsx
+++ b/src/spaces/mcp/pages/McpPage.tsx
@@ -1,32 +1,30 @@
-import { BusyIndicator, ObjectPage, ObjectPageSection, ObjectPageTitle, Panel, Title } from '@ui5/webcomponents-react';
+import { BusyIndicator, ObjectPage, ObjectPageSection, ObjectPageTitle } from '@ui5/webcomponents-react';
import { useParams } from 'react-router-dom';
import CopyKubeconfigButton from '../../../components/ControlPlanes/CopyKubeconfigButton.tsx';
import styles from './McpPage.module.css';
import '@ui5/webcomponents-fiori/dist/illustrations/SimpleBalloon';
-import '@ui5/webcomponents-fiori/dist/illustrations/SimpleError';
// thorws error sometimes if not imported
import '@ui5/webcomponents-fiori/dist/illustrations/BeforeSearch';
import IllustratedError from '../../../components/Shared/IllustratedError.tsx';
import { BreadCrumbFeedbackHeader } from '../../../components/Core/IntelligentBreadcrumbs.tsx';
-import FluxList from '../../../components/ControlPlane/FluxList.tsx';
import { ControlPlane as ControlPlaneResource } from '../../../lib/api/types/crate/controlPlanes.ts';
import { useTranslation } from 'react-i18next';
import { McpContextProvider, WithinManagedControlPlane } from '../../../lib/shared/McpContext.tsx';
-import { ManagedResources } from '../../../components/ControlPlane/ManagedResources.tsx';
-import { ProvidersConfig } from '../../../components/ControlPlane/ProvidersConfig.tsx';
-import { Providers } from '../../../components/ControlPlane/Providers.tsx';
-import ComponentList from '../../../components/ControlPlane/ComponentList.tsx';
import MCPHealthPopoverButton from '../../../components/ControlPlane/MCPHealthPopoverButton.tsx';
import { useApiResource } from '../../../lib/api/useApiResource.ts';
import { YamlViewButtonWithLoader } from '../../../components/Yaml/YamlViewButtonWithLoader.tsx';
-import { Landscapers } from '../../../components/ControlPlane/Landscapers.tsx';
import { AuthProviderMcp } from '../auth/AuthContextMcp.tsx';
import { isNotFoundError } from '../../../lib/api/error.ts';
import { NotFoundBanner } from '../../../components/Ui/NotFoundBanner/NotFoundBanner.tsx';
-import Graph from '../../../components/Graphs/Graph.tsx';
-import HintsCardsRow from '../../../components/HintsCardsRow/HintsCardsRow.tsx';
+import { ManagedResourcesRequest } from '../../../lib/api/types/crossplane/listManagedResources';
+import { resourcesInterval } from '../../../lib/shared/constants';
+import { useMemo } from 'react';
+import { useMcpBentoLayout } from '../views/DefaultBento.tsx';
+import { CrossplaneDetailsTable } from '../views/CrossplaneDetailsTable';
+import { GitOpsDetailsTable } from '../views/FluxDetailsTable.tsx';
+import { MembersDetailsTable } from '../views/MembersDetailsTable';
export default function McpPage() {
const { projectName, workspaceName, controlPlaneName } = useParams();
@@ -60,130 +58,93 @@ export default function McpPage() {
>
-
-
-
-
-
- {t('McpPage.componentsTitle')}}
- noAnimation
- >
-
-
-
- {t('McpPage.crossplaneTitle')}}
- noAnimation
- >
-
-
-
- {t('McpPage.landscapersTitle')}}
- noAnimation
- >
-
-
-
- {t('McpPage.gitOpsTitle')}}
- noAnimation
- >
-
-
-
+
);
}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function McpPageContent({ mcp, controlPlaneName }: { mcp: any; controlPlaneName: string }) {
+ const { t } = useTranslation();
+ const { projectName, workspaceName } = useParams();
+
+ // Add managed resources API call within the MCP context
+ const {
+ data: managedResources,
+ isLoading: managedResourcesLoading,
+ error: managedResourcesError,
+ } = useApiResource(ManagedResourcesRequest, {
+ refreshInterval: resourcesInterval,
+ });
+
+ // Flatten managed resources
+ const allItems = useMemo(() => {
+ if (!managedResources || !Array.isArray(managedResources)) return [];
+ return managedResources
+ .filter((managedResource) => managedResource?.items)
+ .flatMap((managedResource) => managedResource.items || []);
+ }, [managedResources]);
+
+ // Prepare member items from role bindings
+ const memberItems = useMemo(
+ () => (mcp?.spec?.authorization?.roleBindings || []).map((rb: any) => ({ role: rb.role })),
+ [mcp?.spec?.authorization?.roleBindings],
+ );
+
+ // Use the Bento layout hook which manages expansion state internally
+ const { expandedCard, bentoGrid } = useMcpBentoLayout({
+ mcp,
+ allItems,
+ memberItems,
+ isLoading: managedResourcesLoading,
+ error: managedResourcesError,
+ });
+
+ return (
+
+
+
+ );
+}
diff --git a/src/spaces/mcp/views/CrossplaneDetailsTable.tsx b/src/spaces/mcp/views/CrossplaneDetailsTable.tsx
new file mode 100644
index 00000000..46b4bbc5
--- /dev/null
+++ b/src/spaces/mcp/views/CrossplaneDetailsTable.tsx
@@ -0,0 +1,26 @@
+import { Panel } from '@ui5/webcomponents-react';
+import { ManagedResources } from '../../../components/ControlPlane/ManagedResources';
+import { Providers } from '../../../components/ControlPlane/Providers';
+import { ProvidersConfig } from '../../../components/ControlPlane/ProvidersConfig';
+import styles from '../pages/McpPage.module.css';
+
+export function CrossplaneDetailsTable() {
+ return (
+ (null);
+ const [isExpanding, setIsExpanding] = useState(false);
+
+ const createExpandHandler = (cardType: ExpandedCardType) => () => {
+ setIsExpanding(true);
+ setTimeout(() => {
+ setExpandedCard(cardType);
+ setIsExpanding(false);
+ onExpandedCardChange?.(cardType);
+ }, 50);
+ };
+
+ const handleCollapseExpanded = () => {
+ setIsExpanding(true);
+ setTimeout(() => {
+ setExpandedCard(null);
+ setIsExpanding(false);
+ onExpandedCardChange?.(null);
+ }, 300);
+ };
+
+ const handleCrossplaneExpand = createExpandHandler('crossplane');
+ const handleGitOpsExpand = createExpandHandler('gitops');
+ const handleMembersExpand = createExpandHandler('members');
+
+ const bentoGrid = (
+
+ {/* Crossplane Card - always rendered but changes size/position */}
+ {(!expandedCard || expandedCard === 'crossplane') && (
+
+
+ )}
+
+ {/* GitOps Card - shows when expanded */}
+ {expandedCard === 'gitops' && (
+
+
+ )}
+
+ {/* Members Card - shows when expanded */}
+ {expandedCard === 'members' && (
+
+
+ )}
+
+ {/* Graph Card - persistent, only hidden for members view */}
+ {expandedCard !== 'members' && (
+
+
+ )}
+
+ {/* Right side cards - only show when collapsed */}
+ {!expandedCard && (
+ <>
+ {/* Flux Card */}
+
+
+
+ {/* Members Card */}
+
+
+
+ {/* Kyverno Card */}
+
+
+
+ {/* ESO Card */}
+
+
+
+ )}
+
+ );
+
+ return { expandedCard, bentoGrid };
+}
diff --git a/src/spaces/mcp/views/FluxDetailsTable.tsx b/src/spaces/mcp/views/FluxDetailsTable.tsx
new file mode 100644
index 00000000..758d44dc
--- /dev/null
+++ b/src/spaces/mcp/views/FluxDetailsTable.tsx
@@ -0,0 +1,14 @@
+import { Panel } from '@ui5/webcomponents-react';
+import FluxList from '../../../components/ControlPlane/FluxList';
+import styles from '../pages/McpPage.module.css';
+
+export function GitOpsDetailsTable() {
+ return (
+ {
(
- allItems: ManagedResourceItem[],
+ allItems: T[],
isLoading: boolean,
error: APIError | undefined,
enabled: boolean,
@@ -14,14 +12,6 @@ export interface GenericHintSegmentCalculator {
): GenericHintState;
}
-export interface HoverDataCalculator {
- (
- allItems: ManagedResourceItem[],
- enabled: boolean,
- t: (key: string) => string,
- ): Omit | null;
-}
-
export interface GenericHintState {
segments: PercentageSegment[];
label: string;
@@ -30,24 +20,24 @@ export interface GenericHintState {
showOnlyNonZero?: boolean;
}
-export interface GenericHintConfig {
+export interface GenericHintConfig {
title: string;
subtitle: string;
iconSrc: string;
iconAlt: string;
iconStyle?: React.CSSProperties;
scrollTarget?: string;
- calculateSegments: GenericHintSegmentCalculator;
- calculateHoverData?: HoverDataCalculator;
- renderHoverContent?: (allItems: ManagedResourceItem[], enabled: boolean) => ReactNode;
+ calculateSegments: GenericHintSegmentCalculator;
+ renderHoverContent?: (allItems: T[], enabled: boolean) => ReactNode;
}
-export interface GenericHintProps {
+export interface GenericHintProps {
enabled?: boolean;
version?: string;
onActivate?: () => void;
- allItems?: ManagedResourceItem[];
+ allItems?: T[];
isLoading?: boolean;
error?: APIError;
- config: GenericHintConfig;
+ config: GenericHintConfig;
+ height?: string | number;
}
diff --git a/src/utils/hintsCardsRowCalculations.spec.ts b/src/utils/hintsCardsRowCalculations.spec.ts
deleted file mode 100644
index d5c1df9f..00000000
--- a/src/utils/hintsCardsRowCalculations.spec.ts
+++ /dev/null
@@ -1,314 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import {
- calculateCrossplaneSegments,
- calculateGitOpsSegments,
- calculateVaultSegments,
- calculateCrossplaneHoverData,
- HINT_COLORS,
-} from './hintsCardsRowCalculations';
-import { ManagedResourceItem, Condition } from '../lib/shared/types';
-import { APIError } from '../lib/api/error';
-
-// Mock react-i18next
-vi.mock('react-i18next', () => ({
- useTranslation: () => ({
- t: (key: string) => key,
- }),
-}));
-
-describe('calculations', () => {
- // Mock translation function
- const mockT = (key: string) => key;
-
- const createManagedResourceItem = (
- kind: string = 'TestResource',
- conditions: Condition[] = [],
- ): ManagedResourceItem => ({
- kind,
- metadata: {
- name: 'test-resource',
- creationTimestamp: '2023-01-01T00:00:00Z',
- labels: [],
- },
- status: {
- conditions,
- },
- });
-
- const createCondition = (type: string, status: 'True' | 'False'): Condition => ({
- type,
- status,
- lastTransitionTime: '2023-01-01T00:00:00Z',
- });
-
- describe('calculateCrossplaneSegments', () => {
- it('returns loading state when isLoading is true', () => {
- const result = calculateCrossplaneSegments([], true, undefined, true, mockT);
-
- expect(result.segments).toHaveLength(1);
- expect(result.segments[0].color).toBe(HINT_COLORS.inactive);
- expect(result.showPercentage).toBe(false);
- expect(result.isHealthy).toBe(false);
- });
-
- it('returns error state when error is provided', () => {
- const error = new APIError('Test error', 500);
- const result = calculateCrossplaneSegments([], false, error, true, mockT);
-
- expect(result.segments).toHaveLength(1);
- expect(result.segments[0].color).toBe(HINT_COLORS.unhealthy);
- expect(result.showPercentage).toBe(false);
- expect(result.isHealthy).toBe(false);
- });
-
- it('returns inactive state when enabled is false', () => {
- const result = calculateCrossplaneSegments([], false, undefined, false, mockT);
-
- expect(result.segments).toHaveLength(1);
- expect(result.segments[0].color).toBe(HINT_COLORS.inactive);
- expect(result.showPercentage).toBe(false);
- expect(result.isHealthy).toBe(false);
- });
-
- it('returns no resources state when items array is empty', () => {
- const result = calculateCrossplaneSegments([], false, undefined, true, mockT);
-
- expect(result.segments).toHaveLength(1);
- expect(result.segments[0].color).toBe(HINT_COLORS.inactive);
- expect(result.showPercentage).toBe(false);
- expect(result.isHealthy).toBe(false);
- });
-
- it('correctly calculates segments for healthy resources', () => {
- const healthyItems = [
- createManagedResourceItem('Pod', [createCondition('Ready', 'True'), createCondition('Synced', 'True')]),
- createManagedResourceItem('Service', [createCondition('Ready', 'True'), createCondition('Synced', 'True')]),
- ];
-
- const result = calculateCrossplaneSegments(healthyItems, false, undefined, true, mockT);
-
- expect(result.segments).toHaveLength(3);
- expect(result.segments[0].percentage).toBe(100); // healthy
- expect(result.segments[1].percentage).toBe(0); // creating
- expect(result.segments[2].percentage).toBe(0); // unhealthy
- expect(result.isHealthy).toBe(true);
- expect(result.showPercentage).toBe(true);
- });
-
- it('correctly calculates segments for creating resources', () => {
- const creatingItems = [
- createManagedResourceItem('Pod', [createCondition('Ready', 'False'), createCondition('Synced', 'True')]),
- ];
-
- const result = calculateCrossplaneSegments(creatingItems, false, undefined, true, mockT);
-
- expect(result.segments).toHaveLength(3);
- expect(result.segments[0].percentage).toBe(0); // healthy
- expect(result.segments[1].percentage).toBe(100); // creating
- expect(result.segments[2].percentage).toBe(0); // unhealthy
- expect(result.isHealthy).toBe(false);
- });
-
- it('correctly calculates segments for unhealthy resources', () => {
- const unhealthyItems = [
- createManagedResourceItem('Pod', [createCondition('Ready', 'False'), createCondition('Synced', 'False')]),
- ];
-
- const result = calculateCrossplaneSegments(unhealthyItems, false, undefined, true, mockT);
-
- expect(result.segments).toHaveLength(3);
- expect(result.segments[0].percentage).toBe(0); // healthy
- expect(result.segments[1].percentage).toBe(0); // creating
- expect(result.segments[2].percentage).toBe(100); // unhealthy
- expect(result.isHealthy).toBe(false);
- });
-
- it('correctly calculates mixed resource states', () => {
- const mixedItems = [
- createManagedResourceItem('Pod1', [createCondition('Ready', 'True'), createCondition('Synced', 'True')]),
- createManagedResourceItem('Pod2', [createCondition('Ready', 'False'), createCondition('Synced', 'True')]),
- createManagedResourceItem('Pod3', [createCondition('Ready', 'False'), createCondition('Synced', 'False')]),
- createManagedResourceItem('Pod4', []), // No conditions = unhealthy
- ];
-
- const result = calculateCrossplaneSegments(mixedItems, false, undefined, true, mockT);
-
- expect(result.segments).toHaveLength(3);
- expect(result.segments[0].percentage).toBe(25); // 1/4 healthy
- expect(result.segments[1].percentage).toBe(25); // 1/4 creating
- expect(result.segments[2].percentage).toBe(50); // 2/4 unhealthy
- expect(result.isHealthy).toBe(false);
- });
- });
-
- describe('calculateGitOpsSegments', () => {
- it('returns loading state when isLoading is true', () => {
- const result = calculateGitOpsSegments([], true, undefined, true, mockT);
-
- expect(result.segments).toHaveLength(1);
- expect(result.segments[0].color).toBe(HINT_COLORS.inactive);
- expect(result.showPercentage).toBe(false);
- expect(result.isHealthy).toBe(false);
- });
-
- it('correctly calculates progress for flux-labeled resources', () => {
- const itemWithFluxLabel = createManagedResourceItem('Pod');
- itemWithFluxLabel.metadata.labels = {
- 'kustomize.toolkit.fluxcd.io/name': 'test-app',
- } as any;
-
- const itemWithoutFluxLabel = createManagedResourceItem('Service');
-
- const items = [itemWithFluxLabel, itemWithoutFluxLabel];
- const result = calculateGitOpsSegments(items, false, undefined, true, mockT);
-
- expect(result.segments).toHaveLength(2);
- expect(result.segments[0].percentage).toBe(50); // 1/2 with flux label
- expect(result.segments[1].percentage).toBe(50); // 1/2 remaining
- expect(result.isHealthy).toBe(false); // < 70%
- });
-
- it('marks as healthy when progress >= 70%', () => {
- const items = Array.from({ length: 10 }, (_, i) => {
- const item = createManagedResourceItem(`Pod${i}`);
- if (i < 8) {
- // 8/10 = 80%
- item.metadata.labels = {
- 'kustomize.toolkit.fluxcd.io/name': 'test-app',
- } as any;
- }
- return item;
- });
-
- const result = calculateGitOpsSegments(items, false, undefined, true, mockT);
-
- expect(result.segments[0].percentage).toBe(80);
- expect(result.segments[0].color).toBe(HINT_COLORS.healthy);
- expect(result.isHealthy).toBe(true);
- });
-
- it('uses progress color when progress < 70%', () => {
- const items = Array.from({ length: 10 }, (_, i) => {
- const item = createManagedResourceItem(`Pod${i}`);
- if (i < 5) {
- // 5/10 = 50%
- item.metadata.labels = {
- 'kustomize.toolkit.fluxcd.io/name': 'test-app',
- } as any;
- }
- return item;
- });
-
- const result = calculateGitOpsSegments(items, false, undefined, true, mockT);
-
- expect(result.segments[0].percentage).toBe(50);
- expect(result.segments[0].color).toBe(HINT_COLORS.progress);
- expect(result.isHealthy).toBe(false);
- });
- });
-
- describe('calculateVaultSegments', () => {
- it('returns active state when resources exist', () => {
- const items = [createManagedResourceItem('Secret')];
- const result = calculateVaultSegments(items, false, undefined, true, mockT);
-
- expect(result.segments).toHaveLength(1);
- expect(result.segments[0].percentage).toBe(100);
- expect(result.segments[0].color).toBe(HINT_COLORS.healthy);
- expect(result.isHealthy).toBe(true);
- expect(result.showPercentage).toBe(true);
- });
-
- it('returns inactive state when no resources exist', () => {
- const result = calculateVaultSegments([], false, undefined, true, mockT);
-
- expect(result.segments).toHaveLength(1);
- expect(result.segments[0].percentage).toBe(100);
- expect(result.segments[0].color).toBe(HINT_COLORS.inactive);
- expect(result.isHealthy).toBe(false);
- });
- });
-
- describe('calculateCrossplaneHoverData', () => {
- it('calculates statistics by resource type', () => {
- const items = [
- createManagedResourceItem('Pod', [createCondition('Ready', 'True'), createCondition('Synced', 'True')]),
- createManagedResourceItem('Pod', [createCondition('Ready', 'False'), createCondition('Synced', 'True')]),
- createManagedResourceItem('Service', [createCondition('Ready', 'True'), createCondition('Synced', 'True')]),
- createManagedResourceItem('Service', [createCondition('Ready', 'False'), createCondition('Synced', 'False')]),
- ];
-
- const result = calculateCrossplaneHoverData(items);
-
- expect(result.resourceTypeStats).toHaveLength(2);
-
- const podStats = result.resourceTypeStats.find((s) => s.type === 'Pod');
- expect(podStats).toBeDefined();
- expect(podStats!.total).toBe(2);
- expect(podStats!.healthy).toBe(1);
- expect(podStats!.creating).toBe(1);
- expect(podStats!.unhealthy).toBe(0);
- expect(podStats!.healthyPercentage).toBe(50);
-
- const serviceStats = result.resourceTypeStats.find((s) => s.type === 'Service');
- expect(serviceStats).toBeDefined();
- expect(serviceStats!.total).toBe(2);
- expect(serviceStats!.healthy).toBe(1);
- expect(serviceStats!.creating).toBe(0);
- expect(serviceStats!.unhealthy).toBe(1);
- expect(serviceStats!.unhealthyPercentage).toBe(50);
- });
-
- it('calculates overall statistics correctly', () => {
- const items = [
- createManagedResourceItem('Pod', [createCondition('Ready', 'True'), createCondition('Synced', 'True')]),
- createManagedResourceItem('Service', [createCondition('Ready', 'False'), createCondition('Synced', 'True')]),
- createManagedResourceItem('ConfigMap', [createCondition('Ready', 'False'), createCondition('Synced', 'False')]),
- ];
-
- const result = calculateCrossplaneHoverData(items);
-
- expect(result.overallStats.total).toBe(3);
- expect(result.overallStats.healthy).toBe(1);
- expect(result.overallStats.creating).toBe(1);
- expect(result.overallStats.unhealthy).toBe(1);
- });
-
- it('handles resources without kind', () => {
- const itemWithoutKind = createManagedResourceItem('', [
- createCondition('Ready', 'True'),
- createCondition('Synced', 'True'),
- ]);
- // @ts-ignore - testing edge case
- itemWithoutKind.kind = undefined;
-
- const result = calculateCrossplaneHoverData([itemWithoutKind]);
-
- expect(result.resourceTypeStats).toHaveLength(1);
- expect(result.resourceTypeStats[0].type).toBe('Unknown');
- expect(result.resourceTypeStats[0].healthy).toBe(1);
- });
-
- it('handles resources without conditions', () => {
- const itemWithoutConditions = createManagedResourceItem('Pod');
- delete itemWithoutConditions.status;
-
- const result = calculateCrossplaneHoverData([itemWithoutConditions]);
-
- expect(result.resourceTypeStats).toHaveLength(1);
- expect(result.resourceTypeStats[0].type).toBe('Pod');
- expect(result.resourceTypeStats[0].unhealthy).toBe(1);
- expect(result.overallStats.unhealthy).toBe(1);
- });
-
- it('returns empty arrays for no items', () => {
- const result = calculateCrossplaneHoverData([]);
-
- expect(result.resourceTypeStats).toHaveLength(0);
- expect(result.overallStats.total).toBe(0);
- expect(result.overallStats.healthy).toBe(0);
- expect(result.overallStats.creating).toBe(0);
- expect(result.overallStats.unhealthy).toBe(0);
- });
- });
-});
diff --git a/src/utils/hintsCardsRowCalculations.ts b/src/utils/hintsCardsRowCalculations.ts
deleted file mode 100644
index 2e9f9a89..00000000
--- a/src/utils/hintsCardsRowCalculations.ts
+++ /dev/null
@@ -1,449 +0,0 @@
-import { ManagedResourceItem, Condition } from '../lib/shared/types';
-import { APIError } from '../lib/api/error';
-import { GenericHintSegmentCalculator, GenericHintState, HoverDataCalculator } from '../types/types';
-
-import { HoverContentProps } from '../components/HintsCardsRow/CardHoverContent/CardHoverContent';
-
-/**
- * Common colors used across all hints
- */
-export const HINT_COLORS = {
- healthy: '#28a745',
- creating: '#0874f4',
- unhealthy: '#d22020ff',
- inactive: '#e9e9e9ff',
- managed: '#28a745',
- progress: '#fd7e14',
-} as const;
-
-/**
- * Crossplane-specific segment calculation
- */
-export const calculateCrossplaneSegments: GenericHintSegmentCalculator = (
- allItems: ManagedResourceItem[],
- isLoading: boolean,
- error: APIError | undefined,
- enabled: boolean,
- t: (key: string) => string,
-): GenericHintState => {
- if (isLoading) {
- return {
- segments: [{ percentage: 100, color: HINT_COLORS.inactive, label: t('Hints.common.loading') }],
- label: t('Hints.common.loading'),
- showPercentage: false,
- isHealthy: false,
- showOnlyNonZero: true,
- };
- }
-
- if (error) {
- return {
- segments: [{ percentage: 100, color: HINT_COLORS.unhealthy, label: t('Hints.common.errorLoadingResources') }],
- label: t('Hints.common.errorLoadingResources'),
- showPercentage: false,
- isHealthy: false,
- showOnlyNonZero: true,
- };
- }
-
- if (!enabled) {
- return {
- segments: [{ percentage: 100, color: HINT_COLORS.inactive, label: t('Hints.CrossplaneHint.inactive') }],
- label: t('Hints.CrossplaneHint.inactive'),
- showPercentage: false,
- isHealthy: false,
- showOnlyNonZero: true,
- };
- }
-
- const totalCount = allItems.length;
-
- if (totalCount === 0) {
- return {
- segments: [{ percentage: 100, color: HINT_COLORS.inactive, label: t('Hints.CrossplaneHint.noResources') }],
- label: t('Hints.CrossplaneHint.noResources'),
- showPercentage: false,
- isHealthy: false,
- showOnlyNonZero: true,
- };
- }
-
- // Calculate health statistics
- const healthyCount = allItems.filter((item: ManagedResourceItem) => {
- const conditions = item.status?.conditions || [];
- const ready = conditions.find((c: Condition) => c.type === 'Ready' && c.status === 'True');
- const synced = conditions.find((c: Condition) => c.type === 'Synced' && c.status === 'True');
- return !!ready && !!synced;
- }).length;
-
- const creatingCount = allItems.filter((item: ManagedResourceItem) => {
- const conditions = item.status?.conditions || [];
- const ready = conditions.find((c: Condition) => c.type === 'Ready' && c.status === 'True');
- const synced = conditions.find((c: Condition) => c.type === 'Synced' && c.status === 'True');
- return !!synced && !ready;
- }).length;
-
- const unhealthyCount = totalCount - healthyCount - creatingCount;
- const healthyPercentage = Math.round((healthyCount / totalCount) * 100);
- const creatingPercentage = Math.round((creatingCount / totalCount) * 100);
- const unhealthyPercentage = Math.round((unhealthyCount / totalCount) * 100);
-
- return {
- segments: [
- { percentage: healthyPercentage, color: HINT_COLORS.healthy, label: t('common.healthy') },
- { percentage: creatingPercentage, color: HINT_COLORS.creating, label: t('common.creating') },
- { percentage: unhealthyPercentage, color: HINT_COLORS.unhealthy, label: t('common.unhealthy') },
- ],
- label: t('Hints.CrossplaneHint.healthy'),
- showPercentage: true,
- isHealthy: healthyPercentage === 100 && totalCount > 0,
- showOnlyNonZero: true,
- };
-};
-
-/**
- * GitOps-specific segment calculation
- */
-export const calculateGitOpsSegments: GenericHintSegmentCalculator = (
- allItems: ManagedResourceItem[],
- isLoading: boolean,
- error: APIError | undefined,
- enabled: boolean,
- t: (key: string) => string,
-): GenericHintState => {
- if (isLoading) {
- return {
- segments: [{ percentage: 100, color: HINT_COLORS.inactive, label: t('Hints.common.loading') }],
- label: t('Hints.common.loading'),
- showPercentage: false,
- isHealthy: false,
- showOnlyNonZero: true,
- };
- }
-
- if (error) {
- return {
- segments: [{ percentage: 100, color: HINT_COLORS.unhealthy, label: t('Hints.common.errorLoadingResources') }],
- label: t('Hints.common.errorLoadingResources'),
- showPercentage: false,
- isHealthy: false,
- showOnlyNonZero: true,
- };
- }
-
- if (!enabled) {
- return {
- segments: [{ percentage: 100, color: HINT_COLORS.inactive, label: t('Hints.GitOpsHint.inactive') }],
- label: t('Hints.GitOpsHint.inactive'),
- showPercentage: false,
- isHealthy: false,
- showOnlyNonZero: true,
- };
- }
-
- const totalCount = allItems.length;
-
- if (totalCount === 0) {
- return {
- segments: [{ percentage: 100, color: HINT_COLORS.inactive, label: t('Hints.GitOpsHint.noResources') }],
- label: t('Hints.GitOpsHint.noResources'),
- showPercentage: false,
- isHealthy: false,
- showOnlyNonZero: true,
- };
- }
-
- // Count the number of items with the flux label
- const fluxLabelCount = allItems.filter(
- (item: ManagedResourceItem) =>
- item?.metadata?.labels &&
- Object.prototype.hasOwnProperty.call(item.metadata.labels, 'kustomize.toolkit.fluxcd.io/name'),
- ).length;
-
- const progressValue = totalCount > 0 ? Math.round((fluxLabelCount / totalCount) * 100) : 0;
- const restPercentage = 100 - progressValue;
- const progressColor = progressValue >= 70 ? HINT_COLORS.healthy : HINT_COLORS.progress;
-
- return {
- segments: [
- { percentage: progressValue, color: progressColor, label: t('common.progress') },
- { percentage: restPercentage, color: HINT_COLORS.inactive, label: t('common.remaining') },
- ],
- label: t('Hints.GitOpsHint.managed'),
- showPercentage: true,
- isHealthy: progressValue >= 70,
- showOnlyNonZero: true,
- };
-};
-
-/**
- * Vault-specific segment calculation
- */
-export const calculateVaultSegments: GenericHintSegmentCalculator = (
- allItems: ManagedResourceItem[],
- isLoading: boolean,
- error: APIError | undefined,
- enabled: boolean,
- t: (key: string) => string,
-): GenericHintState => {
- if (isLoading) {
- return {
- segments: [{ percentage: 100, color: HINT_COLORS.inactive, label: t('Hints.common.loading') }],
- label: t('Hints.common.loading'),
- showPercentage: false,
- isHealthy: false,
- showOnlyNonZero: true,
- };
- }
-
- if (error) {
- return {
- segments: [{ percentage: 100, color: HINT_COLORS.unhealthy, label: t('Hints.common.errorLoadingResources') }],
- label: t('Hints.common.errorLoadingResources'),
- showPercentage: false,
- isHealthy: false,
- showOnlyNonZero: true,
- };
- }
-
- if (!enabled) {
- return {
- segments: [{ percentage: 100, color: HINT_COLORS.inactive, label: t('Hints.VaultHint.inactive') }],
- label: t('Hints.VaultHint.inactive'),
- showPercentage: false,
- isHealthy: false,
- showOnlyNonZero: true,
- };
- }
-
- const hasResources = allItems.length > 0;
- const label = hasResources ? `100${t('Hints.VaultHint.progressAvailable')}` : t('Hints.VaultHint.noResources');
- const color = hasResources ? HINT_COLORS.healthy : HINT_COLORS.inactive;
-
- return {
- segments: [{ percentage: 100, color, label: t('common.active') }],
- label,
- showPercentage: true,
- isHealthy: hasResources,
- showOnlyNonZero: true,
- };
-};
-
-/**
- * Types for hover content calculations
- */
-export interface ResourceTypeStats {
- type: string;
- total: number;
- healthy: number;
- creating: number;
- unhealthy: number;
- healthyPercentage: number;
- creatingPercentage: number;
- unhealthyPercentage: number;
-}
-
-export interface OverallStats {
- total: number;
- healthy: number;
- creating: number;
- unhealthy: number;
-}
-
-export interface CrossplaneHoverData {
- resourceTypeStats: ResourceTypeStats[];
- overallStats: OverallStats;
-}
-
-/**
- * Calculate comprehensive statistics for Crossplane hover content
- */
-export const calculateCrossplaneHoverData = (allItems: ManagedResourceItem[]): CrossplaneHoverData => {
- const typeStats: Record = {};
- let totalHealthy = 0;
- let totalCreating = 0;
- let totalUnhealthy = 0;
-
- allItems.forEach((item: ManagedResourceItem) => {
- const type = item.kind || 'Unknown';
-
- if (!typeStats[type]) {
- typeStats[type] = { total: 0, healthy: 0, creating: 0, unhealthy: 0 };
- }
-
- typeStats[type].total++;
-
- const conditions = item.status?.conditions || [];
- const ready = conditions.find((c: Condition) => c.type === 'Ready' && c.status === 'True');
- const synced = conditions.find((c: Condition) => c.type === 'Synced' && c.status === 'True');
-
- if (ready && synced) {
- typeStats[type].healthy++;
- totalHealthy++;
- } else if (synced && !ready) {
- // Resource is synced but not ready - it's creating
- typeStats[type].creating++;
- totalCreating++;
- } else {
- // Resource has issues or is not synced
- typeStats[type].unhealthy++;
- totalUnhealthy++;
- }
- });
-
- const resourceTypeStats: ResourceTypeStats[] = Object.keys(typeStats).map((type) => {
- const stats = typeStats[type];
- return {
- type,
- total: stats.total,
- healthy: stats.healthy,
- creating: stats.creating,
- unhealthy: stats.unhealthy,
- healthyPercentage: Math.round((stats.healthy / stats.total) * 100),
- creatingPercentage: Math.round((stats.creating / stats.total) * 100),
- unhealthyPercentage: Math.round((stats.unhealthy / stats.total) * 100),
- };
- });
-
- return {
- resourceTypeStats,
- overallStats: {
- total: allItems.length,
- healthy: totalHealthy,
- creating: totalCreating,
- unhealthy: totalUnhealthy,
- },
- };
-};
-
-/**
- * Calculate hover data for Crossplane using the generic HoverContent structure
- * Shows healthy resources (the positive segment)
- */
-export const calculateCrossplaneHoverDataGeneric: HoverDataCalculator = (
- allItems: ManagedResourceItem[],
- enabled: boolean,
- t: (key: string) => string,
-): Omit | null => {
- if (!enabled || allItems.length === 0) {
- return null;
- }
-
- const { resourceTypeStats, overallStats } = calculateCrossplaneHoverData(allItems);
-
- // Get the segments from the bar chart calculation to ensure color consistency
- const segmentData = calculateCrossplaneSegments(allItems, false, undefined, enabled, t);
-
- const legendItems = segmentData.segments.map((segment) => ({
- label: segment.label,
- count:
- segment.label === t('common.healthy')
- ? overallStats.healthy
- : segment.label === t('common.creating')
- ? overallStats.creating
- : overallStats.unhealthy,
- color: segment.color,
- }));
-
- // Focus on healthy percentage in radar chart (the positive aspect)
- const radarDataset = resourceTypeStats.map((stats) => ({
- type: stats.type,
- healthy: stats.healthyPercentage,
- }));
-
- // Use the color of the healthy segment (first segment in the bar chart)
- const healthyColor = segmentData.segments.find((s) => s.label === t('common.healthy'))?.color || HINT_COLORS.healthy;
-
- return {
- totalCount: overallStats.total,
- totalLabel: t('Hints.CrossplaneHint.hoverContent.totalResources'),
- legendItems,
- radarDataset,
- radarDimensions: [{ accessor: 'type' }],
- radarMeasures: [
- {
- accessor: 'healthy',
- color: healthyColor,
- hideDataLabel: true,
- label: t('Hints.CrossplaneHint.hoverContent.healthy') + ' (%)',
- },
- ],
- };
-};
-
-/**
- * Calculate hover data for GitOps showing resource type management coverage
- * Shows managed resources (the positive segment)
- */
-export const calculateGitOpsHoverDataGeneric: HoverDataCalculator = (
- allItems: ManagedResourceItem[],
- enabled: boolean,
- t: (key: string) => string,
-): Omit | null => {
- if (!enabled || allItems.length === 0) {
- return null;
- }
-
- // Group by resource type and calculate flux management coverage
- const typeStats: Record = {};
- let totalManaged = 0;
-
- allItems.forEach((item: ManagedResourceItem) => {
- const type = item.kind || 'Unknown';
-
- if (!typeStats[type]) {
- typeStats[type] = { total: 0, managed: 0 };
- }
-
- typeStats[type].total++;
-
- // Check if the resource is managed by Flux
- if (
- item?.metadata?.labels &&
- Object.prototype.hasOwnProperty.call(item.metadata.labels, 'kustomize.toolkit.fluxcd.io/name')
- ) {
- typeStats[type].managed++;
- totalManaged++;
- }
- });
-
- const totalUnmanaged = allItems.length - totalManaged;
-
- // Get the segments from the bar chart calculation to ensure color consistency
- const segmentData = calculateGitOpsSegments(allItems, false, undefined, enabled, t);
-
- const legendItems = segmentData.segments.map((segment) => ({
- label: segment.label,
- count: segment.label === t('common.progress') ? totalManaged : totalUnmanaged,
- color: segment.color,
- }));
-
- // Focus on managed percentage in radar chart (the positive aspect)
- const radarDataset = Object.keys(typeStats).map((type) => {
- const stats = typeStats[type];
- const managedPercentage = Math.round((stats.managed / stats.total) * 100);
- return {
- type,
- managed: managedPercentage,
- };
- });
-
- // Use the color of the progress/managed segment (first segment in the bar chart)
- const managedColor = segmentData.segments.find((s) => s.label === t('common.progress'))?.color || HINT_COLORS.managed;
-
- return {
- totalCount: allItems.length,
- totalLabel: t('Hints.GitOpsHint.hoverContent.totalResources'),
- legendItems,
- radarDataset,
- radarDimensions: [{ accessor: 'type' }],
- radarMeasures: [
- {
- accessor: 'managed',
- color: managedColor,
- hideDataLabel: true,
- label: t('Hints.GitOpsHint.hoverContent.managed') + ' (%)',
- },
- ],
- };
-};
diff --git a/src/views/Login.tsx b/src/views/Login.tsx
index ca935f9d..4e7a3643 100644
--- a/src/views/Login.tsx
+++ b/src/views/Login.tsx
@@ -29,7 +29,11 @@ export default function LoginView() {
>
{name}
diff --git a/src/components/Graphs/useGraph.ts b/src/components/Graphs/useGraph.ts
index 92e72db6..942479cf 100644
--- a/src/components/Graphs/useGraph.ts
+++ b/src/components/Graphs/useGraph.ts
@@ -2,7 +2,7 @@ import { useMemo, useEffect, useState } from 'react';
import { useApiResource, useProvidersConfigResource } from '../../lib/api/useApiResource';
import { ManagedResourcesRequest } from '../../lib/api/types/crossplane/listManagedResources';
import { resourcesInterval } from '../../lib/shared/constants';
-import { Node, Edge, Position, MarkerType } from '@xyflow/react';
+import { Node, Edge, Position } from '@xyflow/react';
import dagre from 'dagre';
import { NodeData, ColorBy } from './types';
import { extractRefs, generateColorMap, getStatusCondition, resolveProviderType } from './graphUtils';
@@ -24,14 +24,20 @@ function buildGraph(
treeData.forEach((n) => {
const colorKey: string =
colorBy === 'source' ? n.providerType : colorBy === 'flux' ? (n.fluxName ?? 'default') : n.providerConfigName;
+
+ // Use provider/filter color for background tinting
+ const borderColor = colorMap[colorKey] || '#ccc';
+ // Convert the border color to a very light tint for background
+ const backgroundColor = `${borderColor}08`; // Add 08 for ~3% opacity
+
const node: Node
-
- );
-};
diff --git a/src/components/HintsCardsRow/CardHoverContent/hoverCalculations.ts b/src/components/HintsCardsRow/CardHoverContent/hoverCalculations.ts
deleted file mode 100644
index e77d18fd..00000000
--- a/src/components/HintsCardsRow/CardHoverContent/hoverCalculations.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { ManagedResourceItem, Condition } from '../../../lib/shared/types';
-
-export interface ResourceTypeStats {
- type: string;
- total: number;
- healthy: number;
- creating: number;
- unhealthy: number;
- healthyPercentage: number;
- creatingPercentage: number;
- unhealthyPercentage: number;
-}
-
-export interface OverallStats {
- total: number;
- healthy: number;
- creating: number;
- unhealthy: number;
-}
-
-export interface CrossplaneHoverData {
- resourceTypeStats: ResourceTypeStats[];
- overallStats: OverallStats;
-}
-
-/**
- * Calculate comprehensive statistics for Crossplane hover content
- */
-export const calculateCrossplaneHoverData = (allItems: ManagedResourceItem[]): CrossplaneHoverData => {
- const typeStats: Record
- {isLoading || radarDataset.length === 0 ? (
-
-
- String(value || ''),
- },
- ]}
- measures={[
- {
- accessor: 'users',
- formatter: (value: string | number) => String(value || ''),
- label: 'Users',
- },
- {
- accessor: 'sessions',
- formatter: (value: string | number) => String(value || ''),
- hideDataLabel: true,
- label: 'Active Sessions',
- },
- {
- accessor: 'volume',
- label: 'Vol.',
- },
- ]}
- style={{ width: '100%', height: '100%', minWidth: 280, minHeight: 280 }}
- noLegend={true}
- onClick={() => {}}
- onDataPointClick={() => {}}
- onLegendClick={() => {}}
- />
-
- ) : (
-
-
- );
-};
diff --git a/src/components/HintsCardsRow/GenericHintCard/genericHintConfigs.ts b/src/components/HintsCardsRow/GenericHintCard/genericHintConfigs.ts
deleted file mode 100644
index b44eebc9..00000000
--- a/src/components/HintsCardsRow/GenericHintCard/genericHintConfigs.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { GenericHintConfig } from '../../../types/types';
-import {
- calculateCrossplaneSegments,
- calculateGitOpsSegments,
- calculateVaultSegments,
- calculateCrossplaneHoverDataGeneric,
- calculateGitOpsHoverDataGeneric,
-} from '../../../utils/hintsCardsRowCalculations';
-
-export const useCrossplaneHintConfig = (): GenericHintConfig => {
- const { t } = useTranslation();
-
- return {
- title: t('Hints.CrossplaneHint.title'),
- subtitle: t('Hints.CrossplaneHint.subtitle'),
- iconSrc: '/crossplane-icon.png',
- iconAlt: 'Crossplane',
- scrollTarget: '.crossplane-table-element',
- calculateSegments: (allItems, isLoading, error, enabled) =>
- calculateCrossplaneSegments(allItems, isLoading, error, enabled, t),
- calculateHoverData: (allItems, enabled) => calculateCrossplaneHoverDataGeneric(allItems, enabled, t),
- };
-};
-
-export const useGitOpsHintConfig = (): GenericHintConfig => {
- const { t } = useTranslation();
-
- return {
- title: t('Hints.GitOpsHint.title'),
- subtitle: t('Hints.GitOpsHint.subtitle'),
- iconSrc: '/flux.png',
- iconAlt: 'Flux',
- scrollTarget: '.cp-page-section-gitops',
- calculateSegments: (allItems, isLoading, error, enabled) =>
- calculateGitOpsSegments(allItems, isLoading, error, enabled, t),
- calculateHoverData: (allItems, enabled) => calculateGitOpsHoverDataGeneric(allItems, enabled, t),
- };
-};
-
-export const useVaultHintConfig = (): GenericHintConfig => {
- const { t } = useTranslation();
-
- return {
- title: t('Hints.VaultHint.title'),
- subtitle: t('Hints.VaultHint.subtitle'),
- iconSrc: '/vault.png',
- iconAlt: 'Vault',
- iconStyle: { borderRadius: '0' }, // Vault icon should not be rounded
- calculateSegments: (allItems, isLoading, error, enabled) =>
- calculateVaultSegments(allItems, isLoading, error, enabled, t),
- };
-};
diff --git a/src/components/HintsCardsRow/HintsCardsRow.module.css b/src/components/HintsCardsRow/HintsCardsRow.module.css
deleted file mode 100644
index 9fc831c9..00000000
--- a/src/components/HintsCardsRow/HintsCardsRow.module.css
+++ /dev/null
@@ -1,66 +0,0 @@
-.disabled {
- position: relative;
-}
-
-.disabledOverlay {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(255, 255, 255, 0.6);
- backdrop-filter: grayscale(0.9) blur(0.5px);
- border-radius: inherit;
- z-index: 1;
- pointer-events: none;
-}
-
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
- .disabledOverlay {
- background: rgba(0, 0, 0, 0.4);
- }
-
- .chartBackground {
- background-color: #2a2a2a;
- }
-
- .chartLabel {
- color: #ffffff;
- }
-}
-
-/* Also check for UI5 theme variables for dark themes */
-[data-ui5-theme-root*="dark"] .disabledOverlay,
-[data-ui5-theme*="dark"] .disabledOverlay {
- background: rgba(0, 0, 0, 0.4);
-}
-
-/* Hover Content Animation */
-.hoverContent {
- overflow: hidden;
- transition: all 0.3s ease-in-out;
- animation: expandIn 0.3s ease-in-out;
-}
-
-@keyframes expandIn {
- from {
- max-height: 0;
- opacity: 0;
- transform: scaleY(0);
- transform-origin: top;
- }
- to {
- max-height: 500px;
- opacity: 1;
- transform: scaleY(1);
- transform-origin: top;
- }
-}
-
-.hoverContentLoading {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 300px;
-}
\ No newline at end of file
diff --git a/src/components/HintsCardsRow/HintsCardsRow.tsx b/src/components/HintsCardsRow/HintsCardsRow.tsx
deleted file mode 100644
index de68d23c..00000000
--- a/src/components/HintsCardsRow/HintsCardsRow.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { FlexBox, FlexBoxDirection } from '@ui5/webcomponents-react';
-import { GenericHintCard } from './GenericHintCard/GenericHintCard';
-import { useCrossplaneHintConfig, useGitOpsHintConfig, useVaultHintConfig } from './GenericHintCard/genericHintConfigs';
-
-import { ControlPlaneType } from '../../lib/api/types/crate/controlPlanes';
-import { ManagedResourcesRequest, ManagedResourcesResponse } from '../../lib/api/types/crossplane/listManagedResources';
-import { resourcesInterval } from '../../lib/shared/constants';
-import { useApiResource } from '../../lib/api/useApiResource';
-import { ManagedResourceItem } from '../../lib/shared/types';
-import React, { useMemo } from 'react';
-
-interface HintsProps {
- mcp: ControlPlaneType;
-}
-
-// Export styles for use by hint components
-export { default as styles } from './HintsCardsRow.module.css';
-
-// Utility function to flatten managed resources
-export const flattenManagedResources = (managedResources: ManagedResourcesResponse): ManagedResourceItem[] => {
- if (!managedResources || !Array.isArray(managedResources)) return [];
-
- return managedResources
- .filter((managedResource) => managedResource?.items)
- .flatMap((managedResource) => managedResource.items || []);
-};
-
-const HintsCardsRow: React.FC
-
-
- {(() => {
- const shouldShowHoverContent = enabled && hovered && config.calculateHoverData;
- if (!shouldShowHoverContent) return null;
-
- const hoverData = config.calculateHoverData!(allItems, enabled, t);
- const hasValidHoverData = !!hoverData;
-
- return hasValidHoverData ?
-
-
-
- );
-};
diff --git a/src/components/HintsCardsRow/MultiPercentageBar/MultiPercentageBar.module.css b/src/components/HintsCardsRow/MultiPercentageBar/MultiPercentageBar.module.css
deleted file mode 100644
index 153b8ca7..00000000
--- a/src/components/HintsCardsRow/MultiPercentageBar/MultiPercentageBar.module.css
+++ /dev/null
@@ -1,183 +0,0 @@
-/* CSS Variables for customization */
-.container {
- --animation-duration: 600ms;
- --bar-width: 80%;
- --bar-max-width: 400px;
- --bar-height: 8px;
- --gap: 2px;
- --border-radius: 6px;
- --label-font-size: 0.875rem;
- --background-color: var(--sapBackgroundColor, #fafafa);
-
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 4px;
- width: 100%;
- padding-bottom: 8px;
-
- /* Initial animation */
- animation: fadeInUp var(--animation-duration) ease-out;
-}
-
-/* Respect user's motion preferences */
-@media (prefers-reduced-motion: reduce) {
- .container {
- animation: fadeIn var(--animation-duration) ease-out;
- }
-
- .segment {
- transition: none !important;
- }
-
- .waveOverlay {
- animation: none !important;
- }
-
- .percentage {
- animation: none !important;
- }
-}
-
-/* Label styling */
-.labelContainer {
- display: flex;
- gap: 6px;
- flex-wrap: wrap;
- justify-content: left;
- width: var(--bar-width);
-}
-
-.labelGroup {
- display: flex;
- align-items: center;
- gap: 6px;
-}
-
-.label,
-.percentage {
- font-size: var(--label-font-size);
- font-weight: 400;
- color: var(--sapTextColor, #374151);
- transition: color 0.3s ease, font-weight 0.3s ease;
-}
-
-.label.healthy,
-.percentage.healthy {
- color: green;
- font-weight: 700;
-}
-
-/* Bar container */
-.barContainer {
- display: flex;
- gap: var(--gap);
- width: var(--bar-width);
- max-width: var(--bar-max-width);
- background-color: var(--background-color);
- border-radius: var(--border-radius);
- padding: 2px;
- overflow: hidden;
-}
-
-/* Individual segments */
-.segment {
- flex: var(--segment-percentage);
- min-width: 10px;
- background-color: var(--segment-color);
- border-radius: var(--border-radius);
- height: var(--bar-height);
- position: relative;
- overflow: hidden;
-
- /* Smooth transitions for flex changes */
- transition: flex var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1);
-
- /* Initial state for animation */
- transform: scaleX(0);
- transform-origin: left;
- animation: growWidth var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-/* Stagger the segment animations */
-.segment:nth-child(1) { animation-delay: 0ms; }
-.segment:nth-child(2) { animation-delay: 100ms; }
-.segment:nth-child(3) { animation-delay: 200ms; }
-.segment:nth-child(4) { animation-delay: 300ms; }
-.segment:nth-child(5) { animation-delay: 400ms; }
-
-/* Wave animation overlay */
-.waveOverlay {
- position: absolute;
- top: 0;
- left: -80%;
- width: 80%;
- height: 100%;
- background: linear-gradient(90deg,
- transparent 0%,
- rgba(255, 255, 255, 0.15) 25%,
- rgba(255, 255, 255, 0.25) 50%,
- rgba(255, 255, 255, 0.15) 75%,
- transparent 100%);
- border-radius: var(--border-radius);
- pointer-events: none;
-
- /* Continuous wave animation */
- animation: wave 3s ease-in-out infinite;
- animation-delay: var(--animation-duration);
-}
-
-/* Keyframe animations */
-@keyframes fadeInUp {
- from {
- opacity: 0;
- transform: translateY(20px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-@keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-@keyframes growWidth {
- from {
- transform: scaleX(0);
- }
- to {
- transform: scaleX(1);
- }
-}
-
-@keyframes wave {
- 0% {
- left: -80%;
- }
- 50% {
- left: 100%;
- }
- 100% {
- left: -80%;
- }
-}
-
-/* Theme Support */
-[data-ui5-theme-root*="dark"] .container,
-[data-ui5-theme*="dark"] .container {
- --background-color: #2a2a2a;
-}
-
-[data-ui5-theme-root*="dark"] .label,
-[data-ui5-theme*="dark"] .label,
-[data-ui5-theme-root*="dark"] .percentage,
-[data-ui5-theme*="dark"] .percentage {
- color: #ffffff;
-}
diff --git a/src/components/HintsCardsRow/MultiPercentageBar/MultiPercentageBar.tsx b/src/components/HintsCardsRow/MultiPercentageBar/MultiPercentageBar.tsx
deleted file mode 100644
index e1824653..00000000
--- a/src/components/HintsCardsRow/MultiPercentageBar/MultiPercentageBar.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import React, { useMemo } from 'react';
-import styles from './MultiPercentageBar.module.css';
-
-interface PercentageSegment {
- percentage: number;
- color: string;
- label: string;
-}
-
-interface MultiPercentageBarProps {
- segments: PercentageSegment[];
- label?: string;
- showOnlyNonZero?: boolean;
- barWidth?: string;
- barMaxWidth?: string;
- barHeight?: string;
- showLabels?: boolean;
- showPercentage?: boolean; // Control whether to show percentage number
- isHealthy?: boolean; // Control whether to style the text as healthy (green)
- labelFontSize?: string;
- gap?: string;
- borderRadius?: string;
- backgroundColor?: string;
- className?: string;
- style?: React.CSSProperties;
- animationDuration?: number; // Animation duration in ms (for CSS custom property)
-}
-
-export const MultiPercentageBar: React.FC{title}
-
- {items.map((item, index) => (
-
-
-
-
- {item.count} {item.label}
-
-
- ))}
-
- {/* Label */}
- {showLabels && (
-
- );
-};
-
-export type { PercentageSegment, MultiPercentageBarProps };
diff --git a/src/lib/api/types/crate/controlPlanes.ts b/src/lib/api/types/crate/controlPlanes.ts
index 0df87bcf..8f00ffec 100644
--- a/src/lib/api/types/crate/controlPlanes.ts
+++ b/src/lib/api/types/crate/controlPlanes.ts
@@ -79,6 +79,6 @@ export const ControlPlane = (
): Resource
-
- )}
-
- {/* Progress bar */}
-
- {showPercentage && (
- {primaryPercentage}%
- )}
- {displayLabel}
-
-
- {filteredSegments.map((segment, index) => (
-
-
- {/* Wave animation overlay */}
-
-
- ))}
-
-
- }
- />
- }
- >
-
-
-
-
-
-
-
+
+ }
+ />
+ }
+ >
+
+ {/* Unified Bento Layout - Graph stays persistent */}
+ {bentoGrid}
+
+ {/* Render details tables based on expanded state */}
+ {expandedCard === 'crossplane' &&
+
+
+
+
+
+ );
+}
diff --git a/src/spaces/mcp/views/DefaultBento.tsx b/src/spaces/mcp/views/DefaultBento.tsx
new file mode 100644
index 00000000..248422b3
--- /dev/null
+++ b/src/spaces/mcp/views/DefaultBento.tsx
@@ -0,0 +1,200 @@
+import { useState } from 'react';
+import { BentoGrid, BentoCard } from '../../../components/BentoGrid/BentoGrid';
+import { GraphCard } from '../../../components/BentoGrid/GraphCard/GraphCard';
+import { CrossplaneCard } from '../../../components/BentoGrid/ComponentCard/CrossplaneCard/CrossplaneCard';
+import { FluxCard } from '../../../components/BentoGrid/ComponentCard/FluxCard/FluxCard';
+import { ESOCard } from '../../../components/BentoGrid/ComponentCard/ESOCard/ESOCard';
+import { KyvernoCard } from '../../../components/BentoGrid/ComponentCard/KyvernoCard/KyvernoCard';
+import { MembersCard } from '../../../components/BentoGrid/MembersCard/MembersCard';
+import { ManagedResourceItem } from '../../../lib/shared/types';
+import styles from '../pages/McpPage.module.css';
+
+export type ExpandedCardType = 'crossplane' | 'gitops' | 'members' | null;
+
+interface McpBentoLayoutProps {
+ mcp: any;
+ allItems: ManagedResourceItem[];
+ memberItems: any[];
+ isLoading: boolean;
+ error: any;
+ onExpandedCardChange?: (expandedCard: ExpandedCardType) => void;
+}
+
+export function useMcpBentoLayout({
+ mcp,
+ allItems,
+ memberItems,
+ isLoading,
+ error,
+ onExpandedCardChange,
+}: McpBentoLayoutProps) {
+ // Card expansion state management
+ const [expandedCard, setExpandedCard] = useState
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/spaces/mcp/views/MembersDetailsTable.tsx b/src/spaces/mcp/views/MembersDetailsTable.tsx
new file mode 100644
index 00000000..b582cdb5
--- /dev/null
+++ b/src/spaces/mcp/views/MembersDetailsTable.tsx
@@ -0,0 +1,37 @@
+import { Panel } from '@ui5/webcomponents-react';
+import { MemberTable } from '../../../components/Members/MemberTable';
+import styles from '../pages/McpPage.module.css';
+
+interface RoleBinding {
+ role: string;
+ subjects: {
+ kind: string;
+ name: string;
+ }[];
+ namespace?: string;
+}
+
+interface MembersDetailsTableProps {
+ mcp: any;
+}
+
+export function MembersDetailsTable({ mcp }: MembersDetailsTableProps) {
+ return (
+
+
+ ({
+ name: (binding.subjects?.[0]?.name || 'Unknown').replace(/^openmcp:/, ''),
+ kind: binding.subjects?.[0]?.kind || 'Unknown',
+ roles: binding.role ? [binding.role] : [],
+ namespace: binding.namespace || '',
+ })) || []
+ }
+ requireAtLeastOneMember={false}
+ />
+
+
+
+ );
+}
diff --git a/src/types/types.ts b/src/types/types.ts
index 342e89aa..921b5bda 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -1,12 +1,10 @@
import { ReactNode } from 'react';
import { APIError } from '../lib/api/error';
-import { ManagedResourceItem } from '../lib/shared/types';
-import { PercentageSegment } from '../components/HintsCardsRow/MultiPercentageBar/MultiPercentageBar';
-import { HoverContentProps } from '../components/HintsCardsRow/CardHoverContent/CardHoverContent';
+import { PercentageSegment } from '../components/BentoGrid/MultiPercentageBar/MultiPercentageBar';
-export interface GenericHintSegmentCalculator {
+export interface GenericHintSegmentCalculator
- 
+
+
{t('Login.description')}
+ 
+ {t('Login.welcomeMessage')}