Merge branch 'main' into feat/simplify-iframe-integrations

Author: GenosseOtt

package-lock.json

@@ -40,6 +40,7 @@
     "@ui5/webcomponents-fiori": "^2.7.2",
     "@ui5/webcomponents-icons": "^2.7.2",
     "@ui5/webcomponents-react": "^2.7.2",
+    "@ui5/webcomponents-react-charts": "^2.13.1",
     "@xyflow/react": "^12.8.2",
     "clsx": "^2.1.1",
     "dagre": "^0.8.5",

package.json

@@ -172,6 +172,7 @@
     "defaultNamespaceInfo": "Leave empty to use <span>default</span> namespace",
     "serviceAccoutsGuide": "You can also use our <link1>Service Account Guide</link1> for more information."
   },
+
   "ProjectsPage": {
     "header": "Your instances of <span>ManagedControlPlane</span>",
     "projectHeader": "Project:"
@@ -185,6 +186,7 @@
   "McpPage": {
     "accessError": "Managed Control Plane does not have access information yet",
     "componentsTitle": "Components",
+    "overviewTitle": "Overview",
     "crossplaneTitle": "Crossplane",
     "gitOpsTitle": "GitOps",
     "landscapersTitle": "Landscapers",
@@ -334,7 +336,12 @@
     "synced": "Synced",
     "healthy": "Healthy",
     "installed": "Installed",
-    "none": "None"
+    "none": "None",
+    "creating": "Creating",
+    "unhealthy": "Unhealthy",
+    "progress": "Managed",
+    "remaining": "Remaining",
+    "active": "Active"
   },
   "errors": {
     "installError": "Install error",
@@ -366,5 +373,52 @@
     "selectedComponents": "Selected Components",
     "pleaseSelectComponents": "Choose the components you want to add to your Managed Control Plane.",
     "cannotLoad": "Cannot load components list"
+  },
+  "Hints": {
+    "CrossplaneHint": {
+      "title": "Crossplane",
+      "subtitle": "Managed Resources Readiness",
+      "activeStatus": "Active v",
+      "progressAvailable": "% Available",
+      "noResources": "No Resources",
+      "inactive": "Inactive",
+      "activate": "Activate",
+      "healthy": "Healthy",
+      "hoverContent": {
+        "totalResources": "Total Resources",
+        "healthy": "Healthy",
+        "creating": "Creating", 
+        "failing": "Failing"
+      }
+    },
+    "GitOpsHint": {
+      "title": "Flux",
+      "subtitle": "GitOps Progress",
+      "activeStatus": "Active v",
+      "progressAvailable": "% Available",
+      "noResources": "No Resources",
+      "inactive": "Inactive",
+      "activate": "Activate",
+      "managed": "Managed",
+      "hoverContent": {
+        "totalResources": "Total Resources",
+        "managed": "Managed",
+        "unmanaged": "Unmanaged"
+      }
+    },
+    "VaultHint": {
+      "title": "Vault",
+      "subtitle": "Rotating Secrets Progress",
+      "activeStatus": "Active v",
+      "progressAvailable": "% Available",
+      "noResources": "No Resources",
+      "inactive": "Coming soon...",
+      "activate": "Activate"
+    },
+    "common": {
+      "loading": "Loading...",
+      "errorLoadingResources": "Error loading resources",
+      "activate": "Activate"
+    }
   }
 }

public/locales/en.json

@@ -120,6 +120,7 @@ export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Pr
               title={t('IllustratedBanner.titleMessage')}
               subtitle={t('IllustratedBanner.subtitleMessage')}
               illustrationName={IllustrationMessageType.NoData}
+              compact
               help={{
                 link: mcpCreationGuide,
                 buttonText: t('IllustratedBanner.helpButton'),

public/vault.png

@@ -28,6 +28,7 @@ const CustomNode: React.FC<CustomNodeProps> = ({ label, type, status, transition
             positiveText={t('common.healthy')}
             negativeText={t('errors.notHealthy')}
             message={statusMessage}
+            hideOnHoverEffect={true}
           />
         </div>
         <div className={styles.nodeTextContainer}>

src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx

@@ -26,7 +26,22 @@ export const resolveProviderType = (configName: string, providerConfigsList: Pro
 };
 
 export const generateColorMap = (items: NodeData[], colorBy: string): Record<string, string> => {
-  const colors = ['#E09D00', '#E6600D', '#AB218E', '#678BC7', '#1A9898', '#759421', '#925ACE', '#647987'];
+  const colors = [
+    '#FFC933', // MANGO 4
+    '#FF8AF0', // PINK 4
+    '#FEADC8', // RASPBERRY 4
+    '#2CE0BF', // TEAL 4
+    '#FF8CB2', // RED 4
+    '#B894FF', // INDIGO 4
+    '#049F9A', // TEAL 6
+    '#FA4F96', // RASPBERRY 6
+    '#F31DED', // PINK 6
+    '#7858FF', // INDIGO 6
+    '#07838F', // TEAL 7
+    '#DF1278', // RASBERRY 7
+    '#510080', // PINK 10
+    '#5D36FF', // INDIGO 7
+  ];
 
   const keys = (() => {
     if (colorBy === 'source') return Array.from(new Set(items.map((i) => i.providerType).filter(Boolean)));

src/components/Graphs/CustomNode.tsx

@@ -110,7 +110,7 @@ export function useGraph(colorBy: ColorBy, onYamlClick: (item: ManagedResourceIt
         const status = statusCond?.status === 'True' ? 'OK' : 'ERROR';
 
         let fluxName: string | undefined;
-        const labelsMap = (item.metadata as { labels?: Record<string, string> }).labels;
+        const labelsMap = (item.metadata as unknown as { labels?: Record<string, string> }).labels;
         if (labelsMap) {
           const key = Object.keys(labelsMap).find((k) => k.endsWith('/name'));
           if (key) fluxName = labelsMap[key];

src/components/Graphs/graphUtils.ts

@@ -0,0 +1,17 @@
+/* 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;
+}

src/components/Graphs/useGraph.ts

@@ -0,0 +1,129 @@
+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<HoverContentProps> = ({
+  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 (
+    <div className={cx(styles.hoverContent, styles2.hoverContent)}>
+      <LegendSection title={`${totalCount} ${totalLabel}`} items={legendItems} />
+      <div className={styles2.chartContainer}>
+        {isLoading || radarDataset.length === 0 ? (
+          <div className={cx(styles.hoverContentLoading)}>
+            <RadarChart
+              dataset={[]}
+              dimensions={[
+                {
+                  accessor: 'name',
+                  formatter: (value: string | number) => 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={() => {}}
+            />
+          </div>
+        ) : (
+          <RadarChart
+            dataset={processedDataset}
+            dimensions={radarDimensions}
+            measures={radarMeasures}
+            style={{ width: '100%', height: '100%', minWidth: 280, minHeight: 280 }}
+            noLegend={true}
+          />
+        )}
+      </div>
+    </div>
+  );
+};