feat: add hint section to MCP overview page (#251)

Author: Lasserich

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

@@ -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];

public/vault.png

@@ -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>
+  );
+};

src/components/HintsCardsRow/CardHoverContent/CardHoverContent.module.css

@@ -0,0 +1,85 @@
+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<string, { total: number; healthy: number; creating: number; unhealthy: number }> = {};
+  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,
+    },
+  };
+};

src/components/HintsCardsRow/CardHoverContent/CardHoverContent.tsx

@@ -0,0 +1,47 @@
+.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;
+}