ui/alerts: Add the chip in the tabs to display the number of alerts

Refs: #3291
scality · Apr 20, 2021 · 5913a3f · 5913a3f
1 parent b83e4ec
commit 5913a3f
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/ui/src/components/style/CommonLayoutStyle.js b/ui/src/components/style/CommonLayoutStyle.js
@@ -86,7 +86,7 @@ export const TabsItemsStyle = styled.div`
 export const TextBadge = styled.span`
   background-color: ${(props) => props.theme.brand.infoPrimary};
   color: ${(props) => props.theme.brand.textReverse};
-  padding: 2px 0.6rem;
+  padding: 2px ${padding.smaller};
   border-radius: 4px;
   font-size: 0.8rem;
   font-weight: ${fontWeight.bold};

diff --git a/ui/src/containers/NodePageRSP.js b/ui/src/containers/NodePageRSP.js
@@ -151,7 +151,9 @@ const NodePageRSP = (props) => {
       title: (
         <span>
           {intl.translate('alerts')}
-          <TextBadge>{alertsNode?.length}</TextBadge>
+          {alertsNode.length ? (
+            <TextBadge>{alertsNode.length}</TextBadge>
+          ) : null}
         </span>
       ),
       onClick: () =>

diff --git a/ui/src/containers/VolumePageContent.js b/ui/src/containers/VolumePageContent.js
@@ -176,7 +176,7 @@ const VolumePageContent = (props) => {
       title: (
         <span>
           {intl.translate('alerts')}
-          {PVCName && <TextBadge>{alertlist?.length}</TextBadge>}
+          {alertlist.length ? <TextBadge>{alertlist.length}</TextBadge> : null}
         </span>
       ),
       onClick: () =>