show empty state in monitoring when no datapoint available

openshift · Sep 13, 2020 · cc32b9b · cc32b9b
1 parent 9991262
commit cc32b9b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/frontend/public/components/monitoring/_monitoring.scss b/frontend/public/components/monitoring/_monitoring.scss
@@ -19,6 +19,9 @@ $tooltip-background-color: #151515;
 
 .graph-empty-state {
   min-height: 310px;
+  align-items: center;
+  display: flex;
+  justify-content: center;
 }
 
 .graph-wrapper__horizontal-bar {

diff --git a/frontend/public/components/monitoring/query-browser.tsx b/frontend/public/components/monitoring/query-browser.tsx
@@ -680,10 +680,12 @@ const QueryBrowser_: React.FC<QueryBrowserProps> = ({
     setSpan(to - from);
   };
 
+  const isGraphDataEmpty = !graphData || graphData.every((d) => d.length === 0);
+
   return (
     <div
       className={classNames('query-browser__wrapper', {
-        'graph-empty-state': _.isEmpty(graphData),
+        'graph-empty-state': isGraphDataEmpty && !updating,
       })}
     >
       {hideControls ? (
@@ -702,8 +704,8 @@ const QueryBrowser_: React.FC<QueryBrowserProps> = ({
         </div>
       )}
       {error && <Error error={error} />}
-      {_.isEmpty(graphData) && !updating && <GraphEmpty />}
-      {!_.isEmpty(graphData) && (
+      {isGraphDataEmpty && !updating && <GraphEmpty />}
+      {!isGraphDataEmpty && (
         <>
           {samples < maxSamplesForSpan && !updating && (
             <Alert