feat: populate crossplane and flux with data

Lasserich · Lasserich · commit e5d5796551ff · 2025-08-20T18:46:09.000+02:00
diff --git a/src/components/Hints/CrossplaneHint.tsx b/src/components/Hints/CrossplaneHint.tsx
@@ -1,28 +1,65 @@
 import { Card, CardHeader, ProgressIndicator, Button } from '@ui5/webcomponents-react';
+import { ManagedResourcesResponse } from '../../lib/api/types/crossplane/listManagedResources';
 import { useTranslation } from 'react-i18next';
 
 interface CrossplaneHintProps {
   enabled?: boolean;
+  version?: string;
   onActivate?: () => void;
+  managedResources?: ManagedResourcesResponse | undefined;
+  isLoading?: boolean;
+  error?: any;
 }
 
-export const CrossplaneHint: React.FC<CrossplaneHintProps> = ({ enabled = false, onActivate }) => {
-    const { t } = useTranslation();
-  
-    const cardStyle = enabled
+export const CrossplaneHint: React.FC<CrossplaneHintProps> = ({ enabled = false, version, onActivate, managedResources, isLoading, error }) => {
+  const { t } = useTranslation();
+
+  const cardStyle = enabled
     ? {}
     : {
         background: '#f3f3f3',
         filter: 'grayscale(0.7)',
         opacity: 0.7,
       };
 
+  // Flatten all items from all managedResources entries
+  const allItems = managedResources
+    ? managedResources
+        .filter((managedResource) => managedResource.items)
+        .flatMap((managedResource) => managedResource.items)
+    : [];
+  
+    // Health state counts for slider segments
+  const healthyCount = allItems.filter((item: any) => {
+    const conditions = item.status?.conditions || [];
+    const ready = conditions.find((c: any) => c.type === 'Ready' && c.status === 'True');
+    const synced = conditions.find((c: any) => c.type === 'Synced' && c.status === 'True');
+    return !!ready && !!synced;
+  }).length;
+
+  const totalCount = allItems.length;
+
+  // Progress value: percent of resources that are both Ready and Synced
+  const progressValue = totalCount > 0 ? Math.round((healthyCount / totalCount) * 100) : 0;
+  // Display value: show ratio
+  const progressDisplay = enabled
+    ? managedResources
+  ? `${Math.round((healthyCount / totalCount) * 100)}% Available`
+      : 'No Resources'
+    : 'Inactive';
+  // Value state: positive if half are ready & synced
+  const progressValueState = enabled
+    ? managedResources
+      ? (healthyCount >= totalCount / 2 && totalCount > 0 ? 'Positive' : 'Critical')
+      : 'None'
+    : 'None';
+
   return (
     <div style={{ position: 'relative', width: '100%' }}>
       <Card
         header={
           <CardHeader
-            additionalText={enabled ? 'Active' : undefined}
+            additionalText={enabled ? `Active v${version ?? ''}` : undefined}
             avatar={
               <img
                 src="/crossplane-icon.png"
@@ -37,12 +74,18 @@ export const CrossplaneHint: React.FC<CrossplaneHintProps> = ({ enabled = false,
         style={cardStyle}
       >
         <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '1rem 0' }}>
-          <ProgressIndicator
-            value={100}
-            displayValue={enabled ? '100% Available' : 'Inactive'}
-            valueState={enabled ? 'Positive' : 'None'}
-            style={{ width: '80%', maxWidth: 500, minWidth: 120 }}
-          />
+          {isLoading ? (
+            <ProgressIndicator value={0} displayValue={t('Loading...')} valueState="None" style={{ width: '80%', maxWidth: 500, minWidth: 120 }} />
+          ) : error ? (
+            <ProgressIndicator value={0} displayValue={t('Error loading resources')} valueState="Negative" style={{ width: '80%', maxWidth: 500, minWidth: 120 }} />
+          ) : (
+            <ProgressIndicator
+              value={progressValue}
+              displayValue={progressDisplay}
+              valueState={progressValueState}
+              style={{ width: '80%', maxWidth: 500, minWidth: 120 }}
+            />
+          )}
         </div>
         {!enabled && (
           <div style={{
diff --git a/src/components/Hints/GitOpsHint.tsx b/src/components/Hints/GitOpsHint.tsx
@@ -1,15 +1,48 @@
 
 import { Card, CardHeader, ProgressIndicator, Button } from '@ui5/webcomponents-react';
+import { ManagedResourcesResponse } from '../../lib/api/types/crossplane/listManagedResources';
 import { useTranslation } from 'react-i18next';
 
 interface GitOpsHintProps {
   enabled?: boolean;
+  version?: string;
   onActivate?: () => void;
+  managedResources?: ManagedResourcesResponse | undefined;
+  isLoading?: boolean;
+  error?: any;
 }
 
-export const GitOpsHint: React.FC<GitOpsHintProps> = ({ enabled = false, onActivate }) => {
-    const { t } = useTranslation();
+export const GitOpsHint: React.FC<GitOpsHintProps> = ({ enabled=false, version, onActivate, managedResources, isLoading, error }) => {
+  const { t } = useTranslation();
 
+    // Flatten all items from all managedResources entries
+    const allItems = managedResources
+    ? managedResources
+        .filter((managedResource) => managedResource.items)
+        .flatMap((managedResource) => managedResource.items)
+    : [];
+  
+  const totalCount = allItems.length;
+
+    // Count the number of items with the flux label
+    const fluxLabelCount = allItems.filter(
+        (item) => 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;
+    // Display value: show ratio
+    const progressDisplay = enabled
+        ? managedResources
+    ? `${Math.round((fluxLabelCount / totalCount) * 100)}% Available`
+        : 'No Resources'
+        : 'Inactive';
+    // Value state: positive if half are ready & synced
+    const progressValueState = enabled
+        ? managedResources
+        ? (fluxLabelCount >= totalCount / 2 && totalCount > 0 ? 'Positive' : 'Critical')
+        : 'None'
+        : 'None';
+    
     const cardStyle = enabled
     ? {}
     : {
@@ -23,7 +56,7 @@ export const GitOpsHint: React.FC<GitOpsHintProps> = ({ enabled = false, onActiv
       <Card
         header={
           <CardHeader
-            additionalText={enabled ? 'Active' : undefined}
+            additionalText={enabled ? `Active v${version ?? ''}` : undefined}
             avatar={
               <img
                 src="/flux.png"
@@ -37,13 +70,19 @@ export const GitOpsHint: React.FC<GitOpsHintProps> = ({ enabled = false, onActiv
         }
         style={cardStyle}
       >
-        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '1rem 0' }}>
-          <ProgressIndicator
-            value={100}
-            displayValue={enabled ? '100% Available' : 'Inactive'}
-            valueState={enabled ? 'Positive' : 'None'}
-            style={{ width: '80%', maxWidth: 500, minWidth: 120}}
-          />
+       <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '1rem 0' }}>
+          {isLoading ? (
+            <ProgressIndicator value={0} displayValue={t('Loading...')} valueState="None" style={{ width: '80%', maxWidth: 500, minWidth: 120 }} />
+          ) : error ? (
+            <ProgressIndicator value={0} displayValue={t('Error loading resources')} valueState="Negative" style={{ width: '80%', maxWidth: 500, minWidth: 120 }} />
+          ) : (
+            <ProgressIndicator
+              value={progressValue}
+              displayValue={progressDisplay}
+              valueState={progressValueState}
+              style={{ width: '80%', maxWidth: 500, minWidth: 120 }}
+            />
+          )}
         </div>
         {!enabled && (
           <div style={{
diff --git a/src/components/Hints/Hints.tsx b/src/components/Hints/Hints.tsx
@@ -4,27 +4,58 @@ import { GitOpsHint } from './GitOpsHint';
 import { VaultHint } from './VaultHint';
 
 import { ControlPlaneType } from '../../lib/api/types/crate/controlPlanes';
-
+import { ManagedResourcesRequest } from '../../lib/api/types/crossplane/listManagedResources';
+import { resourcesInterval } from '../../lib/shared/constants';
+import { useApiResource } from '../../lib/api/useApiResource';
 import React from 'react';
 
 interface HintsProps {
     mcp: ControlPlaneType;
 }
 
-const Hints: React.FC<HintsProps> = ({ mcp }) => (
+
+const Hints: React.FC<HintsProps> = ({ mcp }) => {
+  const {
+    data: managedResources,
+    isLoading: managedResourcesLoading,
+    error: managedResourcesError,
+  } = useApiResource(ManagedResourcesRequest, {
+    refreshInterval: resourcesInterval,
+  });
+
+  return (
     <FlexBox
-        direction={FlexBoxDirection.Row}
-        style={{
-            gap: '12px',
-            justifyContent: 'space-between',
-            alignItems: 'stretch',
-            width: '100%'
-        }}
+      direction={FlexBoxDirection.Row}
+      style={{
+        gap: '12px',
+        justifyContent: 'space-between',
+        alignItems: 'stretch',
+        width: '100%'
+      }}
     >
-        <CrossplaneHint enabled={!!mcp?.spec?.components?.crossplane} />
-        <GitOpsHint enabled={!!mcp?.spec?.components?.flux} />
-        <VaultHint enabled={!!mcp?.spec?.components?.externalSecretsOperator} />
+      <CrossplaneHint
+        enabled={!!mcp?.spec?.components?.crossplane}
+        version={mcp?.spec?.components?.crossplane?.version}
+        managedResources={managedResources}
+        isLoading={managedResourcesLoading}
+        error={managedResourcesError}
+      />
+      <GitOpsHint
+        enabled={!!mcp?.spec?.components?.flux}
+        version={mcp?.spec?.components?.flux?.version}
+        managedResources={managedResources}
+        isLoading={managedResourcesLoading}
+        error={managedResourcesError}
+      />
+      <VaultHint
+        enabled={!!mcp?.spec?.components?.externalSecretsOperator}
+        version={mcp?.spec?.components?.externalSecretsOperator?.version}
+        managedResources={managedResources}
+        isLoading={managedResourcesLoading}
+        error={managedResourcesError}
+      />
     </FlexBox>
-);
+  );
+};
 
 export default Hints;
diff --git a/src/components/Hints/VaultHint.tsx b/src/components/Hints/VaultHint.tsx
@@ -4,10 +4,14 @@ import { useTranslation } from 'react-i18next';
 
 interface VaultHintProps {
   enabled?: boolean;
+  version?: string;
   onActivate?: () => void;
+  managedResources?: any;
+  isLoading?: boolean;
+  error?: any;
 }
 
-export const VaultHint: React.FC<VaultHintProps> = ({ enabled = false, onActivate }) => {
+export const VaultHint: React.FC<VaultHintProps> = ({ enabled = false, version, onActivate, managedResources, isLoading, error }) => {
   const { t } = useTranslation();
 
   const cardStyle = enabled
@@ -23,7 +27,7 @@ export const VaultHint: React.FC<VaultHintProps> = ({ enabled = false, onActivat
       <Card
         header={
           <CardHeader
-            additionalText={enabled ? 'Active' : undefined}
+            additionalText={enabled ? `Active v${version ?? ''}` : undefined}
             avatar={
               <img
                 src="/vault.png"
@@ -38,12 +42,18 @@ export const VaultHint: React.FC<VaultHintProps> = ({ enabled = false, onActivat
         style={cardStyle}
       >
         <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '1rem 0' }}>
-          <ProgressIndicator
-            value={100}
-            displayValue={enabled ? '100% Available' : 'Inactive'}
-            valueState={enabled ? 'Positive' : 'None'}
-            style={{ width: '80%', maxWidth: 500, minWidth: 120 }}
-          />
+          {isLoading ? (
+            <ProgressIndicator value={0} displayValue={t('Loading...')} valueState="None" style={{ width: '80%', maxWidth: 500, minWidth: 120 }} />
+          ) : error ? (
+            <ProgressIndicator value={0} displayValue={t('Error loading resources')} valueState="Negative" style={{ width: '80%', maxWidth: 500, minWidth: 120 }} />
+          ) : (
+            <ProgressIndicator
+              value={managedResources ? 100 : 0}
+              displayValue={enabled ? (managedResources ? '100% Available' : 'No Resources') : 'Inactive'}
+              valueState={enabled ? (managedResources ? 'Positive' : 'None') : 'None'}
+              style={{ width: '80%', maxWidth: 500, minWidth: 120 }}
+            />
+          )}
         </div>
         {!enabled && (
           <div style={{
