feat: re-usable hover

Author: Lasserich

public/locales/en.json

@@ -399,7 +399,12 @@
       "noResources": "No Resources",
       "inactive": "Inactive",
       "activate": "Activate",
-      "managed": "Managed"
+      "managed": "Managed",
+      "hoverContent": {
+        "totalResources": "Total Resources",
+        "managed": "Managed",
+        "unmanaged": "Unmanaged"
+      }
     },
     "VaultHint": {
       "title": "Vault",

src/components/Hints/CrossplaneHoverContent.tsx

@@ -5,6 +5,7 @@ import cx from 'clsx';
 import { MultiPercentageBar } from './MultiPercentageBar';
 import { GenericHintProps } from './types';
 import { styles } from './Hints';
+import { HoverContent } from './HoverContent';
 
 export const GenericHint: React.FC<GenericHintProps> = ({
   enabled = false,
@@ -93,6 +94,19 @@ export const GenericHint: React.FC<GenericHintProps> = ({
           hovered &&
           !isLoading &&
           !error &&
+          config.calculateHoverData && (
+            (() => {
+              const hoverData = config.calculateHoverData(allItems, enabled, t);
+              return hoverData ? <HoverContent enabled={enabled} {...hoverData} /> : null;
+            })()
+          )}
+
+        {/* Legacy hover content support */}
+        {enabled &&
+          hovered &&
+          !isLoading &&
+          !error &&
+          !config.calculateHoverData &&
           config.renderHoverContent &&
           config.renderHoverContent(allItems, enabled)}
 

src/components/Hints/GenericHint.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { RadarChart } from '@ui5/webcomponents-react-charts';
+import { LegendSection } from './LegendSection';
+
+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[];
+}
+
+export const HoverContent: React.FC<HoverContentProps> = ({
+  enabled,
+  totalCount,
+  totalLabel,
+  legendItems,
+  radarDataset,
+  radarDimensions,
+  radarMeasures,
+}) => {
+  if (!enabled || radarDataset.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        margin: '1rem 0',
+        overflow: 'visible',
+      }}
+    >
+      <LegendSection
+        title={`${totalCount} ${totalLabel}`}
+        items={legendItems}
+      />
+      <div
+        style={{
+          width: '100%',
+          height: 300,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <RadarChart
+          dataset={radarDataset}
+          dimensions={radarDimensions}
+          measures={radarMeasures}
+          style={{ width: '100%', height: '100%', minWidth: 280, minHeight: 280 }}
+          noLegend={true}
+        />
+      </div>
+    </div>
+  );
+};

src/components/Hints/HoverContent.tsx

@@ -1,6 +1,7 @@
 import { ManagedResourceItem, Condition } from '../../lib/shared/types';
 import { APIError } from '../../lib/api/error';
-import { HintSegmentCalculator, HintState } from './types';
+import { HintSegmentCalculator, HintState, HoverDataCalculator } from './types';
+import { HoverContentProps } from './HoverContent';
 
 /**
  * Common colors used across all hints
@@ -313,3 +314,132 @@ export const calculateCrossplaneHoverData = (allItems: ManagedResourceItem[]): C
     },
   };
 };
+
+/**
+ * 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<HoverContentProps, 'enabled'> | 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<HoverContentProps, 'enabled'> | null => {
+  if (!enabled || allItems.length === 0) {
+    return null;
+  }
+
+  // Group by resource type and calculate flux management coverage
+  const typeStats: Record<string, { total: number; managed: number }> = {};
+  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') + ' (%)',
+      },
+    ],
+  };
+};

src/components/Hints/calculations.ts

@@ -1,8 +1,12 @@
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { HintConfig } from './types';
-import { calculateCrossplaneSegments, calculateGitOpsSegments, calculateVaultSegments } from './calculations';
-import { CrossplaneHoverContent } from './CrossplaneHoverContent';
+import { 
+  calculateCrossplaneSegments, 
+  calculateGitOpsSegments, 
+  calculateVaultSegments,
+  calculateCrossplaneHoverDataGeneric,
+  calculateGitOpsHoverDataGeneric
+} from './calculations';
 
 export const useCrossplaneHintConfig = (): HintConfig => {
   const { t } = useTranslation();
@@ -15,9 +19,8 @@ export const useCrossplaneHintConfig = (): HintConfig => {
     scrollTarget: '.crossplane-table-element',
     calculateSegments: (allItems, isLoading, error, enabled) =>
       calculateCrossplaneSegments(allItems, isLoading, error, enabled, t),
-    renderHoverContent: (allItems, enabled) => {
-      return React.createElement(CrossplaneHoverContent, { allItems, enabled });
-    },
+    calculateHoverData: (allItems, enabled) =>
+      calculateCrossplaneHoverDataGeneric(allItems, enabled, t),
   };
 };
 
@@ -32,6 +35,8 @@ export const useGitOpsHintConfig = (): HintConfig => {
     scrollTarget: '.cp-page-section-gitops',
     calculateSegments: (allItems, isLoading, error, enabled) =>
       calculateGitOpsSegments(allItems, isLoading, error, enabled, t),
+    calculateHoverData: (allItems, enabled) =>
+      calculateGitOpsHoverDataGeneric(allItems, enabled, t),
   };
 };