Merge remote-tracking branch 'origin/26914-deploy_history_data_source' into metrics-deployment-history

5 files changed, 74 insertions, 23 deletions

diff --git a/app/views/projects/environments/_external_url.html.haml b/app/views/projects/environments/_external_url.html.haml
index bf0f1819073..a82ef5ee5bb 100644
--- a/app/views/projects/environments/_external_url.html.haml
+++ b/app/views/projects/environments/_external_url.html.haml
@@ -1,3 +1,4 @@
 - if environment.external_url && can?(current_user, :read_environment, environment)
   = link_to environment.external_url, target: '_blank', rel: 'noopener noreferrer', class: 'btn external-url' do
     = icon('external-link')
+    View deployment
diff --git a/app/views/projects/environments/_metrics_button.html.haml b/app/views/projects/environments/_metrics_button.html.haml
index acbac1869fd..b4102fcf103 100644
--- a/app/views/projects/environments/_metrics_button.html.haml
+++ b/app/views/projects/environments/_metrics_button.html.haml
@@ -1,6 +1,7 @@
 - environment = local_assigns.fetch(:environment)
 
-- return unless environment.has_metrics? && can?(current_user, :read_environment, environment)
+- return unless can?(current_user, :read_environment, environment)
 
 = link_to environment_metrics_path(environment), title: 'See metrics', class: 'btn metrics-button' do
   = icon('area-chart')
+  Monitoring
diff --git a/app/views/projects/environments/folder.html.haml b/app/views/projects/environments/folder.html.haml
index 4b101447bc0..f7e3733ba0b 100644
--- a/app/views/projects/environments/folder.html.haml
+++ b/app/views/projects/environments/folder.html.haml
@@ -8,7 +8,4 @@
 
 #environments-folder-list-view{ data: { "can-create-deployment" => can?(current_user, :create_deployment, @project).to_s,
   "can-read-environment" => can?(current_user, :read_environment, @project).to_s,
-  "css-class" => container_class,
-  "commit-icon-svg" => custom_icon("icon_commit"),
-  "terminal-icon-svg" => custom_icon("icon_terminal"),
-  "play-icon-svg" => custom_icon("icon_play") } }
+  "css-class" => container_class } }
diff --git a/app/views/projects/environments/metrics.html.haml b/app/views/projects/environments/metrics.html.haml
index 69a7165bdbe..e8f8fbbcf09 100644
--- a/app/views/projects/environments/metrics.html.haml
+++ b/app/views/projects/environments/metrics.html.haml
@@ -5,24 +5,76 @@
   = page_specific_javascript_bundle_tag('monitoring')
 = render "projects/pipelines/head"
 
-#js-metrics{ class: container_class, data: { deployment_endpoint: namespace_project_environment_deployments_path(@project.namespace, @project, @environment, format: :json) } }
+#js-metrics.prometheus-container{ class: container_class, data: { has_metrics: "#{@environment.has_metrics?}", deployment_endpoint: namespace_project_environment_deployments_path(@project.namespace, @project, @environment, format: :json) } }
   .top-area
     .row
       .col-sm-6
         %h3.page-title
           Environment:
-          = @environment.name
+          = link_to @environment.name, environment_path(@environment)
 
-      .col-sm-6
-        .nav-controls
-          = render 'projects/deployments/actions', deployment: @environment.last_deployment
-  .row
-    .col-sm-12
-      %h4
-        CPU utilization
-      %svg.prometheus-graph{ 'graph-type' => 'cpu_values' }
-  .row
-    .col-sm-12
-      %h4
-        Memory usage
-      %svg.prometheus-graph{ 'graph-type' => 'memory_values' }
+  .prometheus-state
+    .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
+        %h4
+          CPU utilization
+        %svg.prometheus-graph{ 'graph-type' => 'cpu_values' }
+    .row
+      .col-sm-12
+        %h4
+          Memory usage
+        %svg.prometheus-graph{ 'graph-type' => 'memory_values' }
diff --git a/app/views/projects/environments/show.html.haml b/app/views/projects/environments/show.html.haml
index f463a429f65..7315e671056 100644
--- a/app/views/projects/environments/show.html.haml
+++ b/app/views/projects/environments/show.html.haml
@@ -4,13 +4,13 @@
 
 %div{ class: container_class }
   .top-area.adjust
-    .col-md-9
+    .col-md-7
       %h3.page-title= @environment.name
-    .col-md-3
+    .col-md-5
       .nav-controls
-        = render 'projects/environments/metrics_button', environment: @environment
         = render 'projects/environments/terminal_button', environment: @environment
         = render 'projects/environments/external_url', environment: @environment
+        = render 'projects/environments/metrics_button', environment: @environment
         - if can?(current_user, :update_environment, @environment)
           = link_to 'Edit', edit_namespace_project_environment_path(@project.namespace, @project, @environment), class: 'btn'
         - if can?(current_user, :create_deployment, @environment) && @environment.can_stop?