Merge branch 'master' into 'update-trace-handling-code'update-trace-handling-code

# Conflicts:
#   app/assets/javascripts/build.js

1 files changed, 57 insertions, 7 deletions

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' }