Refactored the states to be rendered via haml and show them via jsadd-error-empty-states

8 files changed, 121 insertions, 110 deletions

diff --git a/app/assets/javascripts/monitoring/prometheus_graph.js b/app/assets/javascripts/monitoring/prometheus_graph.js
index ea760143272..d82a4eb9642 100644
--- a/app/assets/javascripts/monitoring/prometheus_graph.js
+++ b/app/assets/javascripts/monitoring/prometheus_graph.js
@@ -4,7 +4,6 @@
 import d3 from 'd3';
 import statusCodes from '~/lib/utils/http_status';
 import { formatRelevantDigits } from '~/lib/utils/number_utils';
-import prometheusStates from './prometheus_states';
 import '../flash';
 
 const prometheusContainer = '.prometheus-container';
@@ -39,8 +38,8 @@ class PrometheusGraph {
       this.configureGraph();
       this.init();
     } else {
-      this.state = 'gettingStarted';
-      this.updateState('gettingStarted');
+      this.state = '.js-getting-started';
+      this.updateState();
     }
   }
 
@@ -57,13 +56,16 @@ class PrometheusGraph {
     this.getData().then((metricsResponse) => {
       let enoughData = true;
       Object.keys(metricsResponse.metrics).forEach((key) => {
-        const currentKey = metricsResponse.metrics[key];
-        if ((currentKey[0]).metric.length === 0) {
-          enoughData = false;
+        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 = 'loading';
+        this.state = '.js-loading';
         this.updateState();
       } else {
         this.transformData(metricsResponse);
@@ -369,7 +371,7 @@ class PrometheusGraph {
       return resp.metrics;
     })
     .catch(() => {
-      this.state = 'unableToConnect';
+      this.state = '.js-unable-to-connect';
       this.updateState();
     });
   }
@@ -389,25 +391,9 @@ class PrometheusGraph {
   }
 
   updateState() {
-    const currentState = prometheusStates[this.state];
     const $statesContainer = $(prometheusStatesContainer);
     $(prometheusParentGraphContainer).hide();
-
-    $('.state-svg', $statesContainer).empty().append(currentState.icon);
-    $('.state-title', $statesContainer).empty().append(currentState.title);
-    $('.state-description', $statesContainer).empty().append(currentState.description);
-
-    let href;
-    if (this.state === 'gettingStarted') {
-      href = this.docLink;
-      $('.state-button', $statesContainer).empty().append(`<a href="${this.integrationLink}" class="btn btn-success">${currentState.buttonText}</a>`);
-    } else {
-      $('.state-button', $statesContainer).empty().append(`<a href="${this.docLink}" class="btn btn-success">${currentState.buttonText}</a>`);
-      if (this.state === 'unableToConnect') {
-        href = this.integrationLink;
-      }
-    }
-    $('.state-description-link', $statesContainer).attr('href', href);
+    $(`${this.state}`, $statesContainer).removeClass('hidden');
     $(prometheusStatesContainer).show();
   }
 }
diff --git a/app/assets/javascripts/monitoring/prometheus_states.js b/app/assets/javascripts/monitoring/prometheus_states.js
deleted file mode 100644
index e6387a0e4c9..00000000000
--- a/app/assets/javascripts/monitoring/prometheus_states.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import gettingStartedIcon from './svg/getting_started.svg';
-import loadingIcon from './svg/loading.svg';
-import unableToConnectIcon from './svg/unable_to_connect.svg';
-
-const prometheusStates = {
-  gettingStarted: {
-    buttonText: 'Configure Prometheus',
-    description: 'Stay updated about the performance and health of your environment by configuring Prometheus to monitor your deployments. <a class="state-description-link">learn more About performance monitoring</a>',
-    icon: gettingStartedIcon,
-    title: 'Get started with performance monitoring',
-  },
-  loading: {
-    buttonText: 'View documentation',
-    description: 'Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available.',
-    icon: loadingIcon,
-    title: 'Waiting for performance data',
-  },
-  unableToConnect: {
-    buttonText: 'View documentation',
-    description: 'Ensure connectivity is available from the GitLab server to the <a class="state-description-link">Prometheus server</a>',
-    icon: unableToConnectIcon,
-    title: 'Unable to connect to Prometheus server',
-  },
-};
-
-export default prometheusStates;
diff --git a/app/views/projects/environments/metrics.html.haml b/app/views/projects/environments/metrics.html.haml
index d3b3ec7ef3b..2e54af698aa 100644
--- a/app/views/projects/environments/metrics.html.haml
+++ b/app/views/projects/environments/metrics.html.haml
@@ -5,8 +5,7 @@
   = page_specific_javascript_bundle_tag('monitoring')
 = render "projects/pipelines/head"
 
-.prometheus-container{ class: container_class, 'data-has-metrics': "#{@environment.has_metrics?}", 'data-doc-link': help_page_path('administration/monitoring/prometheus/index.md'),
-'data-prometheus-integration': edit_namespace_project_service_path(@project.namespace, @project, 'prometheus') }
+.prometheus-container{ class: container_class, 'data-has-metrics': "#{@environment.has_metrics?}" }
   .top-area
     .row
       .col-sm-6
@@ -18,16 +17,59 @@
         .nav-controls
           = render 'projects/deployments/actions', deployment: @environment.last_deployment
   .prometheus-state
-    .row
-      .col-md-4.col-md-offset-4.state-svg
-    .row
-      .col-md-6.col-md-offset-3
-        %h4.text-center.state-title
-    .row
-      .col-md-6.col-md-offset-3
-        .description-text.text-center.state-description
-    .row.state-button-section
-      .col-md-4.col-md-offset-4.text-center.state-button
+    .js-getting-started.hidden
+      .row
+        .col-md-4.col-md-offset-4.state-svg
+          = render "shared/empty_states/monitoring/getting_started.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.
+            = link_to help_page_path('administration/monitoring/prometheus/index.md') do
+              Learn more about performance monitoring
+      .row.state-button-section
+        .col-md-4.col-md-offset-4.text-center.state-button
+          = link_to edit_namespace_project_service_path(@project.namespace, @project, 'prometheus'), class: 'btn btn-success' do
+            Configure Prometheus
+    .js-loading.hidden
+      .row
+        .col-md-4.col-md-offset-4.state-svg
+          = render "shared/empty_states/monitoring/loading.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
+          = link_to help_page_path('administration/monitoring/prometheus/index.md'), class: 'btn btn-success' do
+            View documentation
+    .js-unable-to-connect.hidden
+      .row
+        .col-md-4.col-md-offset-4.state-svg
+          = render "shared/empty_states/monitoring/unable_to_connect.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
+            = link_to edit_namespace_project_service_path(@project.namespace, @project, 'prometheus') do
+              Prometheus server
+      .row.state-button-section
+        .col-md-4.col-md-offset-4.text-center.state-button
+          = link_to help_page_path('administration/monitoring/prometheus/index.md'), class:'btn btn-success' do
+            View documentation
+
   .prometheus-graphs
     .row
       .col-sm-12
diff --git a/app/assets/javascripts/monitoring/svg/getting_started.svg b/app/views/shared/empty_states/monitoring/_getting_started.svg
index db7a1c2e708..db7a1c2e708 100644
--- a/app/assets/javascripts/monitoring/svg/getting_started.svg
+++ b/app/views/shared/empty_states/monitoring/_getting_started.svg
diff --git a/app/assets/javascripts/monitoring/svg/loading.svg b/app/views/shared/empty_states/monitoring/_loading.svg
index 6bbd7a6c5b9..6bbd7a6c5b9 100644
--- a/app/assets/javascripts/monitoring/svg/loading.svg
+++ b/app/views/shared/empty_states/monitoring/_loading.svg
diff --git a/app/assets/javascripts/monitoring/svg/unable_to_connect.svg b/app/views/shared/empty_states/monitoring/_unable_to_connect.svg
index 62537d87d5d..62537d87d5d 100644
--- a/app/assets/javascripts/monitoring/svg/unable_to_connect.svg
+++ b/app/views/shared/empty_states/monitoring/_unable_to_connect.svg
diff --git a/spec/javascripts/fixtures/environments/metrics.html.haml b/spec/javascripts/fixtures/environments/metrics.html.haml
index d4392e2a86f..e2dd9519898 100644
--- a/spec/javascripts/fixtures/environments/metrics.html.haml
+++ b/spec/javascripts/fixtures/environments/metrics.html.haml
@@ -5,16 +5,54 @@
         %h3.page-title
           Metrics for environment
   .prometheus-state
-    .row
-      .col-md-4.col-md-offset-4.state-svg
-    .row
-      .col-md-6.col-md-offset-3
-        %h4.text-center.state-title
-    .row
-      .col-md-6.col-md-offset-3
-        .description-text.text-center.state-description
-    .row
-      .col-md-4.col-md-offset-4.text-center.state-button
+    .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
diff --git a/spec/javascripts/monitoring/prometheus_graph_spec.js b/spec/javascripts/monitoring/prometheus_graph_spec.js
index baf1431d882..4b904fc2960 100644
--- a/spec/javascripts/monitoring/prometheus_graph_spec.js
+++ b/spec/javascripts/monitoring/prometheus_graph_spec.js
@@ -1,6 +1,5 @@
 import 'jquery';
 import PrometheusGraph from '~/monitoring/prometheus_graph';
-import prometheusStates from '~/monitoring/prometheus_states';
 import { prometheusMockData } from './prometheus_mock_data';
 
 describe('PrometheusGraph', () => {
@@ -79,49 +78,21 @@ describe('PrometheusGraph', () => {
 
 describe('PrometheusGraphs UX states', () => {
   const fixtureName = 'static/environments/metrics.html.raw';
-  const prometheusStatesContainer = '.prometheus-state';
   preloadFixtures(fixtureName);
 
-  function clearStateElements() {
-    $(`${prometheusStatesContainer} .state-svg`).empty();
-    $(`${prometheusStatesContainer} .state-title`).text('');
-    $(`${prometheusStatesContainer} .state-description`).text('');
-    $(`${prometheusStatesContainer} .state-button`).empty();
-  }
-
   beforeEach(() => {
     loadFixtures(fixtureName);
     this.prometheusGraph = new PrometheusGraph();
   });
 
-  it('shows the getting started state', () => {
-    this.prometheusGraph.updateState('gettingStarted');
-    const currentState = prometheusStates.gettingStarted;
-    expect($(`${prometheusStatesContainer} .state-svg`).find('svg')[0]).toBeDefined();
-    expect($(`${prometheusStatesContainer} .state-title`).text()).toBe(currentState.title);
-    expect($(`${prometheusStatesContainer} .state-description`)).toBeDefined();
-    expect($(`${prometheusStatesContainer} .state-button`).find('a').text()).toBe(currentState.buttonText);
-  });
-
-  it('shows the attempting to load performance data state', () => {
-    clearStateElements();
-    this.prometheusGraph.state = 'loading';
-    this.prometheusGraph.updateState();
-    const currentState = prometheusStates.loading;
-    expect($(`${prometheusStatesContainer} .state-svg`).find('svg')[0]).toBeDefined();
-    expect($(`${prometheusStatesContainer} .state-title`).text()).toBe(currentState.title);
-    expect($(`${prometheusStatesContainer} .state-description`).text()).toContain(currentState.description);
-    expect($(`${prometheusStatesContainer} .state-button`).find('a').text()).toBe(currentState.buttonText);
-  });
-
-  it('shows the unable to connect state', () => {
-    clearStateElements();
-    this.prometheusGraph.state = 'unableToConnect';
+  it('shows a specified state', () => {
+    this.prometheusGraph.state = '.js-getting-started';
     this.prometheusGraph.updateState();
-    const currentState = prometheusStates.unableToConnect;
-    expect($(`${prometheusStatesContainer} .state-svg`).find('svg')[0]).toBeDefined();
-    expect($(`${prometheusStatesContainer} .state-title`).text()).toBe(currentState.title);
-    expect($(`${prometheusStatesContainer} .state-description`)[0]).toBeDefined();
-    expect($(`${prometheusStatesContainer} .state-button`).find('a').text()).toBe(currentState.buttonText);
+    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();
   });
 });