feat: enhance namespace overview

src/resources/Namespaces/AllNamespacesDetails.js

@@ -3,20 +3,86 @@ import { DynamicPageComponent } from 'shared/components/DynamicPageComponent/Dyn
 import { NamespaceWorkloads } from './NamespaceWorkloads/NamespaceWorkloads';
 import { ResourcesUsage } from './ResourcesUsage';
 import { spacing } from '@ui5/webcomponents-react-base';
+import { Button, Title } from '@ui5/webcomponents-react';
+import LimitRangeList from 'resources/LimitRanges/LimitRangeList';
+import { EventsList } from 'shared/components/EventsList';
+import { ResourceQuotasList as ResourceQuotaListComponent } from 'resources/ResourceQuotas/ResourceQuotasList';
+import { EVENT_MESSAGE_TYPE } from 'hooks/useMessageList';
+import { createPortal } from 'react-dom';
+import YamlUploadDialog from './YamlUpload/YamlUploadDialog';
+import { useSetRecoilState } from 'recoil';
+import { showYamlUploadDialogState } from 'state/showYamlUploadDialogAtom';
 
 export function AllNamespacesDetails() {
   const { t } = useTranslation();
+  const setShowAdd = useSetRecoilState(showYamlUploadDialogState);
+
+  const limitRangesParams = {
+    hasDetailsView: true,
+    resourceUrl: `/api/v1/limitranges`,
+    resourceType: 'LimitRanges',
+    namespace: '-all-',
+    isCompact: true,
+    showTitle: true,
+  };
+
+  const LimitrangesList = <LimitRangeList {...limitRangesParams} />;
+
+  const resourceQuotasParams = {
+    hasDetailsView: true,
+    resourceUrl: `/api/v1/resourcequotas`,
+    resourceType: 'ResourceQuotas',
+    namespace: '-all-',
+    isCompact: true,
+    showTitle: true,
+    disableCreate: true,
+  };
+
+  const ResourceQuotasList = (
+    <ResourceQuotaListComponent {...resourceQuotasParams} />
+  );
+
+  const Events = <EventsList defaultType={EVENT_MESSAGE_TYPE.WARNING} />;
+
+  const headerActions = (
+    <>
+      <Button
+        icon="add"
+        onClick={() => {
+          setShowAdd(true);
+        }}
+      >
+        {t('upload-yaml.title')}
+      </Button>
+      {createPortal(<YamlUploadDialog />, document.body)}
+    </>
+  );
 
   return (
     <>
       <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>
+            {LimitrangesList}
+            {ResourceQuotasList}
+            {Events}
+          </>
         }
+        actions={headerActions}
       />
     </>
   );

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);
 
@@ -99,5 +99,3 @@ export function NamespaceDetails(props) {
     </ResourceDetails>
   );
 }
-
-export default NamespaceDetails;

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,80 @@ 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,
+                  },
+                ]}
+                allNamespaceURL={false}
+                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,
+                  },
+                ]}
+                allNamespaceURL={false}
+                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,
+                  },
+                ]}
+                allNamespaceURL={false}
+                resourceUrl="services"
+              />
+            </div>
+          )}
         </>
       )}
     </>

src/resources/ResourceQuotas/ResourceQuotasList.tsx

@@ -61,7 +61,7 @@ export function ResourceQuotasList(props: any) {
     );
   };
 
-  const createButton = (
+  const createButton = !props?.disableCreate ? (
     <Button
       key={`create-resource-quotas`}
       data-testid={`create-resource-quotas`}
@@ -70,7 +70,7 @@ export function ResourceQuotasList(props: any) {
     >
       {t('components.resources-list.create')}
     </Button>
-  );
+  ) : null;
 
   return (
     <ResourcesList