style the prometheus integration service page according to design

3 files changed, 33 insertions, 10 deletions

diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 6353482ede7..47672783d5a 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -135,6 +135,17 @@
   padding-top: 0;
 }
 
+.integration-settings-form {
+  .well {
+    padding: $gl-padding / 2;
+    box-shadow: none;
+  }
+
+  .svg-container {
+    max-width: 150px;
+  }
+}
+
 .token-token-container {
   #impersonation-token-token {
     width: 80%;
diff --git a/app/views/projects/services/_form.html.haml b/app/views/projects/services/_form.html.haml
index 21acd857ce7..0808b28a9df 100644
--- a/app/views/projects/services/_form.html.haml
+++ b/app/views/projects/services/_form.html.haml
@@ -9,7 +9,7 @@
 
     %p= @service.description
   .col-lg-9
-    = form_for(@service, as: :service, url: project_service_path(@project, @service.to_param), method: :put, html: { class: 'gl-show-field-errors form-horizontal js-integration-settings-form', data: { 'can-test' => @service.can_test?, 'test-url' => test_project_service_path(@project, @service) } }) do |form|
+    = form_for(@service, as: :service, url: project_service_path(@project, @service.to_param), method: :put, html: { class: 'gl-show-field-errors form-horizontal integration-settings-form js-integration-settings-form', data: { 'can-test' => @service.can_test?, 'test-url' => test_project_service_path(@project, @service) } }) do |form|
       = render 'shared/service_settings', form: form, subject: @service
       - if @service.editable?
         .footer-block.row-content-block
diff --git a/app/views/projects/services/prometheus/_help.html.haml b/app/views/projects/services/prometheus/_help.html.haml
index 83d3faf658f..c38b7283c95 100644
--- a/app/views/projects/services/prometheus/_help.html.haml
+++ b/app/views/projects/services/prometheus/_help.html.haml
@@ -1,15 +1,27 @@
 %h4
   Auto configuration
 
-.prepend-top-default.append-bottom-default
-  - unless @service.manual_configuration?
-    - if @service.prometheus_installed?
-      = link_to 'Manage clusters', project_clusters_path(@project), class: 'btn'
-    - else
-      = link_to 'Install Prometheus on clusters', project_clusters_path(@project), class: 'btn btn-success'
-  - else
-    .well
-      To enable the installation of Prometheus on your clusters, deactivate the manual configuration below
+- unless @service.manual_configuration?
+  .container-fluid
+    .row
+      - if @service.prometheus_installed?
+        .col-sm-2
+          .svg-container
+            = image_tag 'illustrations/monitoring/getting_started.svg'
+        .col-sm-10
+          %p.text-success.prepend-top-default
+            Prometheus is being automatically managed on your clusters
+          = link_to 'Manage clusters', project_clusters_path(@project), class: 'btn'
+      - else
+        .col-sm-2
+          = image_tag 'illustrations/monitoring/loading.svg'
+        .col-sm-10
+          %p.prepend-top-default
+            Automatically deploy and configure Prometheus on your clusters to monitor your project’s environments
+          = link_to 'Install Prometheus on clusters', project_clusters_path(@project), class: 'btn btn-success'
+- else
+  .well
+    To enable the installation of Prometheus on your clusters, deactivate the manual configuration below
 
 %hr