feat: added additional statistical cards to namespace overview

kyma-project · Sep 12, 2024 · b139abe · b139abe
1 parent ae319ec
commit b139abe
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 7 deletions.
diff --git a/src/resources/Namespaces/AllNamespacesDetails.js b/src/resources/Namespaces/AllNamespacesDetails.js
@@ -3,6 +3,7 @@ import { DynamicPageComponent } from 'shared/components/DynamicPageComponent/Dyn
 import { NamespaceWorkloads } from './NamespaceWorkloads/NamespaceWorkloads';
 import { ResourcesUsage } from './ResourcesUsage';
 import { spacing } from '@ui5/webcomponents-react-base';
+import { Title } from '@ui5/webcomponents-react';
 
 export function AllNamespacesDetails() {
   const { t } = useTranslation();
@@ -12,10 +13,21 @@ export function AllNamespacesDetails() {
       <DynamicPageComponent
         title={t('navigation.all-namespaces')}
         content={
-          <div className="flexwrap" style={{ ...spacing.sapUiMediumMargin }}>
-            <ResourcesUsage />
-            <NamespaceWorkloads />
-          </div>
+          <>
+            <Title
+              level="H3"
+              style={{
+                ...spacing.sapUiMediumMarginBegin,
+                ...spacing.sapUiMediumMarginTopBottom,
+              }}
+            >
+              {t('common.headers.monitoring-and-health')}
+            </Title>
+            <div className="cluster-stats" style={spacing.sapUiTinyMargin}>
+              <ResourcesUsage />
+              <NamespaceWorkloads />
+            </div>
+          </>
         }
       />
     </>

diff --git a/src/resources/Namespaces/NamespaceDetails.js b/src/resources/Namespaces/NamespaceDetails.js
@@ -17,7 +17,7 @@ import { AllNamespacesDetails } from './AllNamespacesDetails';
 import { useSetRecoilState } from 'recoil';
 import { ResourceDescription } from 'resources/Namespaces';
 
-export function NamespaceDetails(props) {
+export default function NamespaceDetails(props) {
   const { t } = useTranslation();
   const setShowAdd = useSetRecoilState(showYamlUploadDialogState);
 
@@ -101,5 +101,3 @@ export function NamespaceDetails(props) {
     </ResourceDetails>
   );
 }
-
-export default NamespaceDetails;
diff --git a/src/resources/Namespaces/NamespaceWorkloads/NamespaceWorkloads.js b/src/resources/Namespaces/NamespaceWorkloads/NamespaceWorkloads.js
@@ -4,11 +4,13 @@ import PropTypes from 'prop-types';
 import { useGetList } from 'shared/hooks/BackendAPI/useGet';
 
 import {
+  getHealthyDaemonsets,
   getHealthyReplicasCount,
   getStatusesPodCount,
   PodStatusCounterKey,
 } from './NamespaceWorkloadsHelpers';
 import { CountingCard } from 'shared/components/CountingCard/CountingCard';
+import { useEffect, useState } from 'react';
 
 NamespaceWorkloads.propTypes = { namespace: PropTypes.string };
 
@@ -31,6 +33,24 @@ export function NamespaceWorkloads({ namespace }) {
     },
   );
 
+  const { data: daemonsetsData } = useGetList()(
+    namespace
+      ? `/apis/apps/v1/namespaces/${namespace}/daemonsets`
+      : `/apis/apps/v1/daemonsets`,
+    {
+      pollingInterval: 3200,
+    },
+  );
+
+  const { data: statefulsetsData } = useGetList()(
+    namespace
+      ? `/apis/apps/v1/namespaces/${namespace}/statefulsets`
+      : `/apis/apps/v1/statefulsets`,
+    {
+      pollingInterval: 3200,
+    },
+  );
+
   const statusPodsData = getStatusesPodCount(podsData);
   const healthyPods = statusPodsData.has(PodStatusCounterKey.Healthy)
     ? statusPodsData.get(PodStatusCounterKey.Healthy)
@@ -43,6 +63,29 @@ export function NamespaceWorkloads({ namespace }) {
     : 0;
 
   const healthyDeployments = getHealthyReplicasCount(deploymentsData);
+  const healthyDaemonsets = getHealthyDaemonsets(daemonsetsData);
+  const healthyStatefulsets = getHealthyReplicasCount(statefulsetsData);
+
+  const { data: servicesData } = useGetList()(
+    namespace ? `/api/v1/namespaces/${namespace}/services` : `/api/v1/services`,
+    {
+      pollingInterval: 3200,
+    },
+  );
+
+  const [loadbalancerNumber, setLoadbalancerNumber] = useState(0);
+
+  useEffect(() => {
+    if (servicesData) {
+      let loadbalancers = 0;
+      for (const sv of servicesData) {
+        if (sv?.spec?.type === 'LoadBalancer') {
+          loadbalancers++;
+        }
+      }
+      setLoadbalancerNumber(loadbalancers);
+    }
+  }, [servicesData]);
 
   return (
     <>
@@ -96,6 +139,77 @@ export function NamespaceWorkloads({ namespace }) {
               />
             </div>
           )}
+          {daemonsetsData && (
+            <div className="item-wrapper wide">
+              <CountingCard
+                className="item"
+                value={daemonsetsData?.length}
+                title={t('cluster-overview.statistics.daemonsets-overview')}
+                subTitle={t('cluster-overview.statistics.total-daemonsets')}
+                extraInfo={[
+                  {
+                    title: t('cluster-overview.statistics.healthy-daemonsets'),
+                    value: healthyDaemonsets,
+                  },
+                  {
+                    title: t(
+                      'cluster-overview.statistics.unhealthy-daemonsets',
+                    ),
+                    value: daemonsetsData?.length - healthyDaemonsets,
+                  },
+                ]}
+                resourceUrl="daemonsets"
+              />
+            </div>
+          )}
+          {statefulsetsData && (
+            <div className="item-wrapper wide">
+              <CountingCard
+                className="item"
+                value={statefulsetsData?.length}
+                title={t('cluster-overview.statistics.statefulsets-overview')}
+                subTitle={t('cluster-overview.statistics.total-statefulsets')}
+                extraInfo={[
+                  {
+                    title: t(
+                      'cluster-overview.statistics.healthy-statefulsets',
+                    ),
+                    value: healthyStatefulsets,
+                  },
+                  {
+                    title: t(
+                      'cluster-overview.statistics.unhealthy-statefulsets',
+                    ),
+                    value: statefulsetsData?.length - healthyStatefulsets,
+                  },
+                ]}
+                resourceUrl="statefulsets"
+              />
+            </div>
+          )}
+          {servicesData && (
+            <div className="item-wrapper wide">
+              <CountingCard
+                className="item"
+                value={servicesData?.length}
+                title={t('cluster-overview.statistics.services-overview')}
+                subTitle={t('cluster-overview.statistics.total-services')}
+                extraInfo={[
+                  {
+                    title: t(
+                      'cluster-overview.statistics.services-loadbalancers',
+                    ),
+                    value: loadbalancerNumber,
+                  },
+                  {
+                    title: t('cluster-overview.statistics.services-others'),
+                    value: servicesData?.length - loadbalancerNumber,
+                  },
+                ]}
+                resourceUrl="services"
+              />
+            </div>
+          )}
         </>
       )}
     </>