feat: add kyverno and eso

Author: Lasserich

public/eso.png

@@ -387,7 +387,7 @@
   "Hints": {
     "CrossplaneHint": {
       "title": "Crossplane",
-      "subtitle": "Managed Resources Readiness",
+      "subtitle": "Manage your cloud landscape in code",
       "activeStatus": "Active v",
       "progressAvailable": "Available",
       "noResources": "No Resources",
@@ -403,7 +403,7 @@
     },
     "GitOpsHint": {
       "title": "Flux",
-      "subtitle": "GitOps Progress",
+      "subtitle": "Persist desired state in code repsitories",
       "activeStatus": "Active v",
       "progressAvailable": "Available",
       "noResources": "No Resources",
@@ -416,9 +416,9 @@
         "unmanaged": "Unmanaged"
       }
     },
-    "VaultHint": {
-      "title": "Vault",
-      "subtitle": "Rotating Secrets Progress",
+    "ESOHint": {
+      "title": "ESO",
+      "subtitle": "Secure secrets with rotation",
       "activeStatus": "Active v",
       "progressAvailable": "Available",
       "noResources": "No Resources",

public/kyverno.svg

@@ -37,28 +37,29 @@ export const useGitOpsHintConfig = (): GenericHintConfig => {
   };
 };
 
-export const useVaultHintConfig = (): GenericHintConfig => {
+export const useESOHintConfig = (): 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
+    title: t('Hints.ESOHint.title'),
+    subtitle: t('Hints.ESOHint.subtitle'),
+    iconSrc: '/eso.png',
+    iconAlt: 'ESO',
+    // Not sure yet whether this looks better fully round or with rounded edges...
+    // iconStyle: { borderRadius: '8px' }, // ESO icon with rounded corners
     calculateSegments: (allItems, isLoading, error, enabled) =>
       calculateVaultSegments(allItems, isLoading, error, enabled, t),
   };
 };
 
-export const useVeleroHintConfig = (): GenericHintConfig => {
+export const useKyvernoHintConfig = (): GenericHintConfig => {
   const { t } = useTranslation();
 
   return {
-    title: "Velero",
-    subtitle: "Backups Status",
-    iconSrc: '/velero.png',
-    iconAlt: 'Velero',
+    title: "Kyverno",
+    subtitle: "Enfore policies",
+    iconSrc: '/kyverno.svg',
+    iconAlt: 'Kyverno',
     iconStyle: { borderRadius: '0' }, // Vault icon should not be rounded
     calculateSegments: (allItems, isLoading, error, enabled) =>
       calculateVaultSegments(allItems, isLoading, error, enabled, t),

public/locales/en.json

@@ -20,7 +20,7 @@ import { AuthProviderMcp } from '../auth/AuthContextMcp.tsx';
 import { isNotFoundError } from '../../../lib/api/error.ts';
 import { NotFoundBanner } from '../../../components/Ui/NotFoundBanner/NotFoundBanner.tsx';
 import { BentoGrid, BentoCard, GraphCard, ComponentCard } from '../../../components/BentoGrid';
-import { useCrossplaneHintConfig, useGitOpsHintConfig, useVaultHintConfig, useVeleroHintConfig } from '../../../components/BentoGrid/ComponentCard/componentConfigs.ts';
+import { useCrossplaneHintConfig, useGitOpsHintConfig, useESOHintConfig, useKyvernoHintConfig } from '../../../components/BentoGrid/ComponentCard/componentConfigs.ts';
 import { ManagedResourcesRequest, ManagedResourcesResponse } from '../../../lib/api/types/crossplane/listManagedResources';
 import { resourcesInterval } from '../../../lib/shared/constants';
 import { ManagedResourceItem } from '../../../lib/shared/types';
@@ -102,8 +102,8 @@ function McpPageContent({ mcp, controlPlaneName }: { mcp: any; controlPlaneName:
   // Get hint configurations
   const crossplaneConfig = useCrossplaneHintConfig();
   const gitOpsConfig = useGitOpsHintConfig();
-  const vaultConfig = useVaultHintConfig();
-  const veleroConfig = useVeleroHintConfig();
+  const vaultConfig = useESOHintConfig();
+  const veleroConfig = useKyvernoHintConfig();
 
   // Handle component card clicks
   const handleCrossplaneExpand = () => {

public/vault.png

@@ -207,16 +207,16 @@ export const calculateVaultSegments: GenericHintSegmentCalculator = (
 
   if (!enabled) {
     return {
-      segments: [{ percentage: 100, color: HINT_COLORS.inactive, label: t('Hints.VaultHint.inactive') }],
-      label: t('Hints.VaultHint.inactive'),
+      segments: [{ percentage: 100, color: HINT_COLORS.inactive, label: t('Hints.ESOHint.inactive') }],
+      label: t('Hints.ESOHint.inactive'),
       showPercentage: false,
       isHealthy: false,
       showOnlyNonZero: true,
     };
   }
 
   const hasResources = allItems.length > 0;
-  const label = hasResources ? t('Hints.VaultHint.progressAvailable') : t('Hints.VaultHint.noResources');
+  const label = hasResources ? t('Hints.ESOHint.progressAvailable') : t('Hints.ESOHint.noResources');
   const color = hasResources ? HINT_COLORS.healthy : HINT_COLORS.inactive;
 
   return {