1 files changed, 51 insertions, 16 deletions

diff --git a/app/assets/javascripts/monitoring/prometheus_graph.js b/app/assets/javascripts/monitoring/prometheus_graph.js
index a6ffa0f59de..d82a4eb9642 100644
--- a/app/assets/javascripts/monitoring/prometheus_graph.js
+++ b/app/assets/javascripts/monitoring/prometheus_graph.js
@@ -6,7 +6,10 @@ import statusCodes from '~/lib/utils/http_status';
 import { formatRelevantDigits } from '~/lib/utils/number_utils';
 import '../flash';
 
+const prometheusContainer = '.prometheus-container';
+const prometheusParentGraphContainer = '.prometheus-graphs';
 const prometheusGraphsContainer = '.prometheus-graph';
+const prometheusStatesContainer = '.prometheus-state';
 const metricsEndpoint = 'metrics.json';
 const timeFormat = d3.time.format('%H:%M');
 const dayFormat = d3.time.format('%b %e, %a');
@@ -14,19 +17,30 @@ const bisectDate = d3.bisector(d => d.time).left;
 const extraAddedWidthParent = 100;
 
 class PrometheusGraph {
-
   constructor() {
-    this.margin = { top: 80, right: 180, bottom: 80, left: 100 };
-    this.marginLabelContainer = { top: 40, right: 0, bottom: 40, left: 0 };
-    const parentContainerWidth = $(prometheusGraphsContainer).parent().width() +
-    extraAddedWidthParent;
-    this.originalWidth = parentContainerWidth;
-    this.originalHeight = 330;
-    this.width = parentContainerWidth - this.margin.left - this.margin.right;
-    this.height = this.originalHeight - this.margin.top - this.margin.bottom;
-    this.backOffRequestCounter = 0;
-    this.configureGraph();
-    this.init();
+    const $prometheusContainer = $(prometheusContainer);
+    const hasMetrics = $prometheusContainer.data('has-metrics');
+    this.docLink = $prometheusContainer.data('doc-link');
+    this.integrationLink = $prometheusContainer.data('prometheus-integration');
+
+    $(document).ajaxError(() => {});
+
+    if (hasMetrics) {
+      this.margin = { top: 80, right: 180, bottom: 80, left: 100 };
+      this.marginLabelContainer = { top: 40, right: 0, bottom: 40, left: 0 };
+      const parentContainerWidth = $(prometheusGraphsContainer).parent().width() +
+      extraAddedWidthParent;
+      this.originalWidth = parentContainerWidth;
+      this.originalHeight = 330;
+      this.width = parentContainerWidth - this.margin.left - this.margin.right;
+      this.height = this.originalHeight - this.margin.top - this.margin.bottom;
+      this.backOffRequestCounter = 0;
+      this.configureGraph();
+      this.init();
+    } else {
+      this.state = '.js-getting-started';
+      this.updateState();
+    }
   }
 
   createGraph() {
@@ -40,8 +54,19 @@ class PrometheusGraph {
 
   init() {
     this.getData().then((metricsResponse) => {
-      if (Object.keys(metricsResponse).length === 0) {
-        new Flash('Empty metrics', 'alert');
+      let enoughData = true;
+      Object.keys(metricsResponse.metrics).forEach((key) => {
+        let currentKey;
+        if (key === 'cpu_values' || key === 'memory_values') {
+          currentKey = metricsResponse.metrics[key];
+          if (Object.keys(currentKey).length === 0) {
+            enoughData = false;
+          }
+        }
+      });
+      if (!enoughData) {
+        this.state = '.js-loading';
+        this.updateState();
       } else {
         this.transformData(metricsResponse);
         this.createGraph();
@@ -345,14 +370,17 @@ class PrometheusGraph {
       }
       return resp.metrics;
     })
-    .catch(() => new Flash('An error occurred while fetching metrics.', 'alert'));
+    .catch(() => {
+      this.state = '.js-unable-to-connect';
+      this.updateState();
+    });
   }
 
   transformData(metricsResponse) {
     Object.keys(metricsResponse.metrics).forEach((key) => {
       if (key === 'cpu_values' || key === 'memory_values') {
         const metricValues = (metricsResponse.metrics[key])[0];
-        if (typeof metricValues !== 'undefined') {
+        if (metricValues !== undefined) {
           this.graphSpecificProperties[key].data = metricValues.values.map(metric => ({
             time: new Date(metric[0] * 1000),
             value: metric[1],
@@ -361,6 +389,13 @@ class PrometheusGraph {
       }
     });
   }
+
+  updateState() {
+    const $statesContainer = $(prometheusStatesContainer);
+    $(prometheusParentGraphContainer).hide();
+    $(`${this.state}`, $statesContainer).removeClass('hidden');
+    $(prometheusStatesContainer).show();
+  }
 }
 
 export default PrometheusGraph;