1 files changed, 11 insertions, 2 deletions
diff --git a/app/assets/javascripts/monitoring/components/panel_type.vue b/app/assets/javascripts/monitoring/components/panel_type.vue
index 45ee067de83..d7cd2c57871 100644
--- a/app/assets/javascripts/monitoring/components/panel_type.vue
+++ b/app/assets/javascripts/monitoring/components/panel_type.vue
@@ -3,11 +3,13 @@ import { mapState } from 'vuex';
 import _ from 'underscore';
 import MonitorAreaChart from './charts/area.vue';
 import MonitorSingleStatChart from './charts/single_stat.vue';
+import MonitorEmptyChart from './charts/empty_chart.vue';
 
 export default {
   components: {
     MonitorAreaChart,
     MonitorSingleStatChart,
+    MonitorEmptyChart,
   },
   props: {
     graphData: {
@@ -24,6 +26,9 @@ export default {
     alertWidgetAvailable() {
       return IS_EE && this.prometheusAlertsAvailable && this.alertsEndpoint && this.graphData;
     },
+    graphDataHasMetrics() {
+      return this.graphData.queries[0].result.length > 0;
+    },
   },
   methods: {
     getGraphAlerts(queries) {
@@ -41,9 +46,12 @@ export default {
 };
 </script>
 <template>
-  <monitor-single-stat-chart v-if="isPanelType('single-stat')" :graph-data="graphData" />
+  <monitor-single-stat-chart
+    v-if="isPanelType('single-stat') && graphDataHasMetrics"
+    :graph-data="graphData"
+  />
   <monitor-area-chart
-    v-else
+    v-else-if="graphDataHasMetrics"
     :graph-data="graphData"
     :deployment-data="deploymentData"
     :project-path="projectPath"
@@ -59,4 +67,5 @@ export default {
       @setAlerts="setAlerts"
     />
   </monitor-area-chart>
+  <monitor-empty-chart v-else :graph-title="graphData.title" />
 </template>