Merge pull request #6450 from jeff-phillips-18/list-view-alerts

Bug 1872764: Fix for topology list view alert/build cell alignment
openshift · Aug 28, 2020 · 1e468ee · 1e468ee
2 parents de8603e + ebc866a
commit 1e468ee
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 25 deletions.
diff --git a/frontend/packages/dev-console/src/components/topology/list-view/cells/AlertsCell.scss b/frontend/packages/dev-console/src/components/topology/list-view/cells/AlertsCell.scss
@@ -11,10 +11,9 @@
 
   &--status .co-icon-and-text {
     display: inline-flex;
-    margin-right: 12px;
-
-    .odc-topology-list-view__alert-cell__builds & {
-      margin-right: 4px;
-    }
+    margin-right: var(--pf-global--spacer--sm);
+  }
+  &__label {
+    margin-right: var(--pf-global--spacer--sm);
   }
 }
diff --git a/frontend/packages/dev-console/src/components/topology/list-view/cells/AlertsCell.tsx b/frontend/packages/dev-console/src/components/topology/list-view/cells/AlertsCell.tsx
@@ -3,7 +3,6 @@ import * as _ from 'lodash';
 import { Node } from '@patternfly/react-topology';
 import { DataListCell, Tooltip } from '@patternfly/react-core';
 import { Status as TooltipStatus } from '@console/shared';
-import { pluralize } from '@console/internal/components/utils';
 import { isMobile } from '../list-view-utils';
 
 import './AlertsCell.scss';
@@ -12,21 +11,17 @@ type AlertsProps = {
   item: Node;
 };
 
-const AlertTooltip = ({ alerts, severity, noSeverityLabel = false }) => {
+const AlertTooltip = ({ alerts, severity }) => {
   if (!alerts) {
     return null;
   }
 
-  const label = severity === 'Info' ? 'Message' : severity;
   const count = alerts.length;
   const message = _.uniq(alerts.map((a) => a.message)).join('\n');
 
   const status = (
     <span className="odc-topology-list-view__alert-cell--status">
-      <TooltipStatus
-        status={severity}
-        title={noSeverityLabel ? String(count) : pluralize(count, label)}
-      />
+      <TooltipStatus status={severity} title={String(count)} />
     </span>
   );
 
@@ -75,20 +70,22 @@ export const AlertsCell: React.FC<AlertsProps> = ({ item }) => {
   return (
     <DataListCell id={`${item.getId()}_alerts`}>
       <div className="odc-topology-list-view__alert-cell">
-        {error && <AlertTooltip severity="Error" alerts={error} />}
-        {warning && <AlertTooltip severity="Warning" alerts={warning} />}
-        {info && <AlertTooltip severity="Info" alerts={info} />}
+        {(error || warning || info) && (
+          <div className="odc-topology-list-view__alert-cell__status">
+            <span className="odc-topology-list-view__alert-cell__label">Alerts:</span>
+            <AlertTooltip severity="Error" alerts={error} />
+            <AlertTooltip severity="Warning" alerts={warning} />
+            <AlertTooltip severity="Info" alerts={info} />
+          </div>
+        )}
         {(buildNew || buildPending || buildRunning || buildFailed || buildError) && (
-          <div className="odc-topology-list-view__alert-cell__builds">
-            Builds {buildNew && <AlertTooltip severity="New" alerts={buildNew} noSeverityLabel />}{' '}
-            {buildPending && (
-              <AlertTooltip severity="Pending" alerts={buildPending} noSeverityLabel />
-            )}{' '}
-            {buildRunning && (
-              <AlertTooltip severity="Running" alerts={buildRunning} noSeverityLabel />
-            )}{' '}
-            {buildFailed && <AlertTooltip severity="Failed" alerts={buildFailed} noSeverityLabel />}{' '}
-            {buildError && <AlertTooltip severity="Error" alerts={buildError} noSeverityLabel />}
+          <div className="odc-topology-list-view__alert-cell__status">
+            <span className="odc-topology-list-view__alert-cell__label">Builds:</span>
+            <AlertTooltip severity="New" alerts={buildNew} />
+            <AlertTooltip severity="Pending" alerts={buildPending} />
+            <AlertTooltip severity="Running" alerts={buildRunning} />
+            <AlertTooltip severity="Failed" alerts={buildFailed} />
+            <AlertTooltip severity="Error" alerts={buildError} />
           </div>
         )}
       </div>