feat: add status to Modules card

Author: OliwiaGowor

public/i18n/en.yaml

@@ -41,6 +41,10 @@ cluster-overview:
     total-persistentvolumes: 'Total Persistent Volumes'
     persistent-volumes-total-capacity: 'Total Capacity'
     nodes: 'Nodes'
+    modules-overview: 'Modules Overview'
+    modules-ready: 'Ready'
+    modules-error: 'Error'
+    modules-warning: 'Warning'
   tooltips:
       cpu-used-percentage: 'CPU used: {{percentage}}'
       memory-used-percentage: 'Memory used: {{percentage}}'

src/components/Clusters/views/ClusterOverview/ClusterDetails.js

@@ -10,6 +10,8 @@ import { CountingCard } from 'shared/components/CountingCard/CountingCard';
 import { useKymaModulesQuery } from 'components/KymaModules/kymaModulesQueries';
 import { useUrl } from 'hooks/useUrl';
 import { useNavigate } from 'react-router-dom';
+import { useModulesStatuses } from 'components/KymaModules/support';
+import { useMemo } from 'react';
 
 const GardenerProvider = () => {
   const { t } = useTranslation();
@@ -36,6 +38,26 @@ export default function ClusterDetails({ currentCluster }) {
   const { modules, error, loading: loadingModules } = useKymaModulesQuery();
   const { clusterUrl } = useUrl();
   const navigate = useNavigate();
+  const {
+    data: statuses,
+    loading: loadingStatuses,
+    error: statusesError,
+  } = useModulesStatuses(modules);
+
+  const moduleCounts = useMemo(() => {
+    if (statuses && !loadingStatuses && !statusesError) {
+      return statuses.reduce(
+        (acc, m) => {
+          if (m.status === 'Ready') acc.ready++;
+          else if (m.status === 'Error') acc.error++;
+          else if (m.status === 'Warning') acc.warning++;
+          return acc;
+        },
+        { ready: 0, error: 0, warning: 0 },
+      );
+    }
+    return { ready: 0, error: 0, warning: 0 };
+  }, [statuses, statusesError]);
 
   return (
     <div className="resource-details-container">
@@ -73,21 +95,34 @@ export default function ClusterDetails({ currentCluster }) {
         }
       />
       {!error && !loadingModules && modules && (
-        <div className="item-wrapper sap-margin-x-small">
-          <CountingCard
-            className="item"
-            value={modules?.length}
-            title={t('kyma-modules.installed-modules')}
-            additionalContent={
-              <Button
-                design="Emphasized"
-                onClick={() => navigate(clusterUrl('kymamodules'))}
-              >
-                {t('kyma-modules.modify-modules')}
-              </Button>
-            }
-          />
-        </div>
+        <CountingCard
+          className="item"
+          value={modules?.length}
+          title={t('cluster-overview.statistics.modules-overview')}
+          subTitle={t('kyma-modules.installed-modules')}
+          extraInfo={[
+            {
+              title: t('cluster-overview.statistics.modules-ready'),
+              value: moduleCounts.ready,
+            },
+            {
+              title: t('cluster-overview.statistics.modules-error'),
+              value: moduleCounts.error,
+            },
+            {
+              title: t('cluster-overview.statistics.modules-warning'),
+              value: moduleCounts.warning,
+            },
+          ]}
+          additionalContent={
+            <Button
+              design="Emphasized"
+              onClick={() => navigate(clusterUrl('kymamodules'))}
+            >
+              {t('kyma-modules.modify-modules')}
+            </Button>
+          }
+        />
       )}
     </div>
   );

src/components/KymaModules/support.ts

@@ -22,13 +22,9 @@ type KymaResourceType = {
   };
 };
 
-export function useModuleStatus(resource: KymaResourceType) {
-  const fetch = useFetch();
-  const [data, setData] = useState<any>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  const path = resource?.metadata?.namespace
+const getResourcePath = (resource: KymaResourceType) => {
+  if (!resource) return '';
+  return resource?.metadata?.namespace
     ? `/apis/${resource?.apiVersion}/namespaces/${
         resource?.metadata?.namespace
       }/${pluralize(resource?.kind || '').toLowerCase()}/${
@@ -37,6 +33,15 @@ export function useModuleStatus(resource: KymaResourceType) {
     : `/apis/${resource?.apiVersion}/${pluralize(
         resource?.kind || '',
       ).toLowerCase()}/${resource?.metadata?.name}`;
+};
+
+export function useModuleStatus(resource: KymaResourceType) {
+  const fetch = useFetch();
+  const [data, setData] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const path = getResourcePath(resource);
 
   useEffect(() => {
     async function fetchModule() {
@@ -61,6 +66,51 @@ export function useModuleStatus(resource: KymaResourceType) {
   return { data, loading, error };
 }
 
+export function useModulesStatuses(modules: any[]) {
+  const fetch = useFetch();
+  const [data, setData] = useState<Record<string, any>>({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    async function fetchModules() {
+      if (!modules || modules.length === 0) return;
+      setLoading(true);
+      try {
+        const results = await Promise.all(
+          modules.map(async module => {
+            const resource = module?.resource;
+
+            if (!resource) return null;
+            const path = getResourcePath(resource);
+
+            try {
+              const response = await fetch({ relativeUrl: path });
+              const status = (await response.json())?.status;
+              return { key: resource?.metadata?.name, status: status.state };
+            } catch (e) {
+              return { key: resource?.metadata?.name, status: null, error: e };
+            }
+          }),
+        );
+
+        setData(results);
+      } catch (e) {
+        if (e instanceof Error) {
+          setError(e);
+        }
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchModules();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(modules)]);
+
+  return { data, loading, error };
+}
+
 export const findStatus = (
   kymaResource: KymaResourceType,
   moduleName: string,

tests/integration/tests/kyma-cluster/test-kyma-modules.spec.js

@@ -5,11 +5,11 @@ context('Test Kyma Modules views', () => {
     cy.loginAndSelectCluster();
   });
 
-  it('Test Feature card for Modules', () => {
+  it('Test Modules Overview card', () => {
     cy.wait(2000);
 
     cy.get('ui5-card')
-      .contains('Installed Modules')
+      .contains('Modules Overview')
       .should('be.visible');
 
     cy.contains('ui5-card', 'Installed Modules')
@@ -99,7 +99,7 @@ context('Test Kyma Modules views', () => {
       .should('be.visible');
   });
 
-  it('Test number of Modules in Feature card', () => {
+  it('Test number of Modules in Modules Overview card', () => {
     cy.getLeftNav()
       .contains('Cluster Details')
       .click();
@@ -108,6 +108,10 @@ context('Test Kyma Modules views', () => {
       .contains('2')
       .should('be.visible');
 
+    cy.contains('ui5-card', 'Ready')
+      .contains('2')
+      .should('be.visible');
+
     cy.get('ui5-card')
       .contains('Modify Modules')
       .click();