From 79d299f9af445bf47f068c1ebf4b8678d5cec95e Mon Sep 17 00:00:00 2001
From: Jose Ivan Vargas Lopez <jvargas@gitlab.com>
Date: Thu, 6 Apr 2017 13:24:33 +0000
Subject: Introduced empty/error UX states to environments monitoring.

---
 .../fixtures/environments/metrics.html.haml        | 64 +++++++++++++++++++---
 .../monitoring/prometheus_graph_spec.js            | 23 +++++++-
 2 files changed, 79 insertions(+), 8 deletions(-)

(limited to 'spec/javascripts')

diff --git a/spec/javascripts/fixtures/environments/metrics.html.haml b/spec/javascripts/fixtures/environments/metrics.html.haml
index 483063fb889..e2dd9519898 100644
--- a/spec/javascripts/fixtures/environments/metrics.html.haml
+++ b/spec/javascripts/fixtures/environments/metrics.html.haml
@@ -1,12 +1,62 @@
-%div
+.prometheus-container{ 'data-has-metrics': "false", 'data-doc-link': '/help/administration/monitoring/prometheus/index.md', 'data-prometheus-integration': '/root/hello-prometheus/services/prometheus/edit' }
   .top-area
     .row
       .col-sm-6
         %h3.page-title
           Metrics for environment
-  .row
-    .col-sm-12
-      %svg.prometheus-graph{ 'graph-type' => 'cpu_values' }
-  .row
-    .col-sm-12
-      %svg.prometheus-graph{ 'graph-type' => 'memory_values' }
\ No newline at end of file
+  .prometheus-state
+    .js-getting-started.hidden
+      .row
+        .col-md-4.col-md-offset-4.state-svg
+          %svg
+      .row
+        .col-md-6.col-md-offset-3
+          %h4.text-center.state-title
+            Get started with performance monitoring
+      .row
+        .col-md-6.col-md-offset-3
+          .description-text.text-center.state-description
+            Stay updated about the performance and health of your environment by configuring Prometheus to monitor your deployments. Learn more about performance monitoring
+      .row.state-button-section
+        .col-md-4.col-md-offset-4.text-center.state-button
+          %a.btn.btn-success
+            Configure Prometheus
+    .js-loading.hidden
+      .row
+        .col-md-4.col-md-offset-4.state-svg
+          %svg
+      .row
+        .col-md-6.col-md-offset-3
+          %h4.text-center.state-title
+            Waiting for performance data
+      .row
+        .col-md-6.col-md-offset-3
+          .description-text.text-center.state-description
+            Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available.
+      .row.state-button-section
+        .col-md-4.col-md-offset-4.text-center.state-button
+          %a.btn.btn-success
+            View documentation
+    .js-unable-to-connect.hidden
+      .row
+        .col-md-4.col-md-offset-4.state-svg
+          %svg
+      .row
+        .col-md-6.col-md-offset-3
+          %h4.text-center.state-title
+            Unable to connect to Prometheus server
+      .row
+        .col-md-6.col-md-offset-3
+          .description-text.text-center.state-description
+            Ensure connectivity is available from the GitLab server to the Prometheus server
+      .row.state-button-section
+        .col-md-4.col-md-offset-4.text-center.state-button
+          %a.btn.btn-success
+            View documentation
+  .prometheus-graphs
+    .row
+      .col-sm-12
+        %svg.prometheus-graph{ 'graph-type' => 'cpu_values' }
+    .row
+      .col-sm-12
+        %svg.prometheus-graph{ 'graph-type' => 'memory_values' }
diff --git a/spec/javascripts/monitoring/prometheus_graph_spec.js b/spec/javascripts/monitoring/prometheus_graph_spec.js
index c2bcd9c0f7c..4b904fc2960 100644
--- a/spec/javascripts/monitoring/prometheus_graph_spec.js
+++ b/spec/javascripts/monitoring/prometheus_graph_spec.js
@@ -1,5 +1,4 @@
 import 'jquery';
-import '~/lib/utils/common_utils';
 import PrometheusGraph from '~/monitoring/prometheus_graph';
 import { prometheusMockData } from './prometheus_mock_data';
 
@@ -12,6 +11,7 @@ describe('PrometheusGraph', () => {
 
   beforeEach(() => {
     loadFixtures(fixtureName);
+    $('.prometheus-container').data('has-metrics', 'true');
     this.prometheusGraph = new PrometheusGraph();
     const self = this;
     const fakeInit = (metricsResponse) => {
@@ -75,3 +75,24 @@ describe('PrometheusGraph', () => {
     });
   });
 });
+
+describe('PrometheusGraphs UX states', () => {
+  const fixtureName = 'static/environments/metrics.html.raw';
+  preloadFixtures(fixtureName);
+
+  beforeEach(() => {
+    loadFixtures(fixtureName);
+    this.prometheusGraph = new PrometheusGraph();
+  });
+
+  it('shows a specified state', () => {
+    this.prometheusGraph.state = '.js-getting-started';
+    this.prometheusGraph.updateState();
+    const $state = $('.js-getting-started');
+    expect($state).toBeDefined();
+    expect($('.state-title', $state)).toBeDefined();
+    expect($('.state-svg', $state)).toBeDefined();
+    expect($('.state-description', $state)).toBeDefined();
+    expect($('.state-button', $state)).toBeDefined();
+  });
+});
-- 
cgit v1.2.3