Add empty chart component

This merge request adds an empty chart component
which will load in case of queries not having
data to display, this will override the current
logic, which hides all the graphs that have no
data to show

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>