Remove Monitoring and Health title from details except for Namespace …

…Details
kyma-project · Jun 24, 2024 · 0b8142d · 0b8142d
1 parent 2c7bb2c
commit 0b8142d
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/src/resources/Namespaces/NamespaceDetails.js b/src/resources/Namespaces/NamespaceDetails.js
@@ -93,6 +93,7 @@ export function NamespaceDetails(props) {
         () => <ResourcesUsage namespace={props.resourceName} />,
         () => <NamespaceWorkloads namespace={props.resourceName} />,
       ]}
+      showCustomHealthCardsTitle={true}
     >
       {LimitrangesList}
       {ResourceQuotasList}

diff --git a/src/shared/components/ResourceDetails/ResourceDetails.js b/src/shared/components/ResourceDetails/ResourceDetails.js
@@ -69,6 +69,7 @@ ResourceDetails.propTypes = {
   layoutCloseCreateUrl: PropTypes.string,
   layoutNumber: PropTypes.string,
   customHealthCards: PropTypes.node,
+  showCustomHealthCardsTitle: PropTypes.bool,
 };
 
 ResourceDetails.defaultProps = {
@@ -171,6 +172,7 @@ function Resource({
   statusBadge,
   customStatusColumns,
   customHealthCards,
+  showCustomHealthCardsTitle,
   statusConditions,
   headerContent,
 }) {
@@ -436,7 +438,10 @@ function Resource({
                   {resourceDetailsCard}
                   {resourceStatusCard && resourceStatusCard}
                 </div>
-                <ResourceHealthCard customHealthCards={customOverviewCard} />
+                <ResourceHealthCard
+                  customHealthCards={customOverviewCard}
+                  showTitle={showCustomHealthCardsTitle}
+                />
               </>
             )}
             <Suspense fallback={<Spinner />}>

diff --git a/src/shared/components/ResourceHealthCard/ResourceHealthCard.js b/src/shared/components/ResourceHealthCard/ResourceHealthCard.js
@@ -2,21 +2,23 @@ import { Title } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
 import { spacing } from '@ui5/webcomponents-react-base';
 
-export function ResourceHealthCard({ customHealthCards }) {
+export function ResourceHealthCard({ customHealthCards, showTitle = false }) {
   const { t } = useTranslation();
   if (!customHealthCards?.length) return null;
   return (
     <>
-      <Title
-        level="H3"
-        style={{
-          ...spacing.sapUiMediumMarginBegin,
-          ...spacing.sapUiMediumMarginTopBottom,
-        }}
-      >
-        {t('common.headers.monitoring-and-health')}
-      </Title>
-      <div className="cluster-stats" style={spacing.sapUiTinyMarginBeginEnd}>
+      {showTitle && (
+        <Title
+          level="H3"
+          style={{
+            ...spacing.sapUiMediumMarginBegin,
+            ...spacing.sapUiMediumMarginTopBottom,
+          }}
+        >
+          {t('common.headers.monitoring-and-health')}
+        </Title>
+      )}
+      <div className="cluster-stats" style={spacing.sapUiTinyMargin}>
         {customHealthCards}
       </div>
     </>