Move ci/cd, influx and prometheus app settings to expandable sections

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

5 files changed, 176 insertions, 134 deletions

diff --git a/app/views/admin/application_settings/_ci_cd.html.haml b/app/views/admin/application_settings/_ci_cd.html.haml
new file mode 100644
index 00000000000..b4d2a789df0
--- /dev/null
+++ b/app/views/admin/application_settings/_ci_cd.html.haml
@@ -0,0 +1,47 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        .checkbox
+          = f.label :auto_devops_enabled do
+            = f.check_box :auto_devops_enabled
+            Enabled Auto DevOps (Beta) for projects by default
+        .help-block
+          It will automatically build, test, and deploy applications based on a predefined CI/CD configuration
+          = link_to icon('question-circle'), help_page_path('topics/autodevops/index.md')
+    .form-group
+      = f.label :auto_devops_domain, class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.text_field :auto_devops_domain, class: 'form-control', placeholder: 'domain.com'
+        .help-block
+          = s_("AdminSettings|Specify a domain to use by default for every project's Auto Review Apps and Auto Deploy stages.")
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        .checkbox
+          = f.label :shared_runners_enabled do
+            = f.check_box :shared_runners_enabled
+            Enable shared runners for new projects
+    .form-group
+      = f.label :shared_runners_text, class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.text_area :shared_runners_text, class: 'form-control', rows: 4
+        .help-block Markdown enabled
+    .form-group
+      = f.label :max_artifacts_size, 'Maximum artifacts size (MB)', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :max_artifacts_size, class: 'form-control'
+        .help-block
+          Set the maximum file size for each job's artifacts
+          = link_to icon('question-circle'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size')
+    .form-group
+      = f.label :default_artifacts_expire_in, 'Default artifacts expiration', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.text_field :default_artifacts_expire_in, class: 'form-control'
+        .help-block
+          Set the default expiration time for each job's artifacts.
+          0 for unlimited.
+          = link_to icon('question-circle'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'default-artifacts-expiration')
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_form.html.haml b/app/views/admin/application_settings/_form.html.haml
index 0f75db3f6ae..636535fba84 100644
--- a/app/views/admin/application_settings/_form.html.haml
+++ b/app/views/admin/application_settings/_form.html.haml
@@ -1,50 +1,6 @@
 = form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
   = form_errors(@application_setting)
 
-  %fieldset
-    %legend Continuous Integration and Deployment
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :auto_devops_enabled do
-            = f.check_box :auto_devops_enabled
-            Enabled Auto DevOps (Beta) for projects by default
-        .help-block
-          It will automatically build, test, and deploy applications based on a predefined CI/CD configuration
-          = link_to icon('question-circle'), help_page_path('topics/autodevops/index.md')
-    .form-group
-      = f.label :auto_devops_domain, class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :auto_devops_domain, class: 'form-control', placeholder: 'domain.com'
-        .help-block
-          = s_("AdminSettings|Specify a domain to use by default for every project's Auto Review Apps and Auto Deploy stages.")
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :shared_runners_enabled do
-            = f.check_box :shared_runners_enabled
-            Enable shared runners for new projects
-    .form-group
-      = f.label :shared_runners_text, class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_area :shared_runners_text, class: 'form-control', rows: 4
-        .help-block Markdown enabled
-    .form-group
-      = f.label :max_artifacts_size, 'Maximum artifacts size (MB)', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :max_artifacts_size, class: 'form-control'
-        .help-block
-          Set the maximum file size for each job's artifacts
-          = link_to icon('question-circle'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size')
-    .form-group
-      = f.label :default_artifacts_expire_in, 'Default artifacts expiration', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :default_artifacts_expire_in, class: 'form-control'
-        .help-block
-          Set the default expiration time for each job's artifacts.
-          0 for unlimited.
-          = link_to icon('question-circle'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'default-artifacts-expiration')
-
   - if Gitlab.config.registry.enabled
     %fieldset
       %legend Container Registry
@@ -54,96 +10,6 @@
           = f.number_field :container_registry_token_expire_delay, class: 'form-control'
 
   %fieldset
-    %legend Metrics - Influx
-    %p
-      Setup InfluxDB to measure a wide variety of statistics like the time spent
-      in running SQL queries. These settings require a
-      = link_to 'restart', help_page_path('administration/restart_gitlab')
-      to take effect.
-      = link_to icon('question-circle'), help_page_path('administration/monitoring/performance/introduction')
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :metrics_enabled do
-            = f.check_box :metrics_enabled
-            Enable InfluxDB Metrics
-    .form-group
-      = f.label :metrics_host, 'InfluxDB host', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :metrics_host, class: 'form-control', placeholder: 'influxdb.example.com'
-    .form-group
-      = f.label :metrics_port, 'InfluxDB port', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.text_field :metrics_port, class: 'form-control', placeholder: '8089'
-        .help-block
-          The UDP port to use for connecting to InfluxDB. InfluxDB requires that
-          your server configuration specifies a database to store data in when
-          sending messages to this port, without it metrics data will not be
-          saved.
-    .form-group
-      = f.label :metrics_pool_size, 'Connection pool size', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :metrics_pool_size, class: 'form-control'
-        .help-block
-          The amount of InfluxDB connections to open. Connections are opened
-          lazily. Users using multi-threaded application servers should ensure
-          enough connections are available (at minimum the amount of application
-          server threads).
-    .form-group
-      = f.label :metrics_timeout, 'Connection timeout', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :metrics_timeout, class: 'form-control'
-        .help-block
-          The amount of seconds after which an InfluxDB connection will time
-          out.
-    .form-group
-      = f.label :metrics_method_call_threshold, 'Method Call Threshold (ms)', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :metrics_method_call_threshold, class: 'form-control'
-        .help-block
-          A method call is only tracked when it takes longer to complete than
-          the given amount of milliseconds.
-    .form-group
-      = f.label :metrics_sample_interval, 'Sampler Interval (sec)', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :metrics_sample_interval, class: 'form-control'
-        .help-block
-          The sampling interval in seconds. Sampled data includes memory usage,
-          retained Ruby objects, file descriptors and so on.
-    .form-group
-      = f.label :metrics_packet_size, 'Metrics per packet', class: 'control-label col-sm-2'
-      .col-sm-10
-        = f.number_field :metrics_packet_size, class: 'form-control'
-        .help-block
-          The amount of points to store in a single UDP packet. More points
-          results in fewer but larger UDP packets being sent.
-
-  %fieldset
-    %legend Metrics - Prometheus
-    %p
-      Enable a Prometheus metrics endpoint at
-      %code= metrics_path
-      to expose a variety of statistics on the health and performance of GitLab. Additional information on authenticating and connecting to the metrics endpoint is available
-      = link_to 'here', admin_health_check_path
-      \. This setting requires a
-      = link_to 'restart', help_page_path('administration/restart_gitlab')
-      to take effect.
-      = link_to icon('question-circle'), help_page_path('administration/monitoring/prometheus/index')
-    .form-group
-      .col-sm-offset-2.col-sm-10
-        .checkbox
-          = f.label :prometheus_metrics_enabled do
-            = f.check_box :prometheus_metrics_enabled
-            Enable Prometheus Metrics
-          - unless Gitlab::Metrics.metrics_folder_present?
-            .help-block
-              %strong.cred WARNING:
-              Environment variable
-              %code prometheus_multiproc_dir
-              does not exist or is not pointing to a valid directory.
-              = link_to icon('question-circle'), help_page_path('administration/monitoring/prometheus/gitlab_metrics', anchor: 'metrics-shared-directory')
-
-  %fieldset
     %legend Profiling - Performance Bar
     %p
       Enable the Performance Bar for a given group.
diff --git a/app/views/admin/application_settings/_influx.html.haml b/app/views/admin/application_settings/_influx.html.haml
new file mode 100644
index 00000000000..a173fd38a9c
--- /dev/null
+++ b/app/views/admin/application_settings/_influx.html.haml
@@ -0,0 +1,68 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    %p
+      Setup InfluxDB to measure a wide variety of statistics like the time spent
+      in running SQL queries. These settings require a
+      = link_to 'restart', help_page_path('administration/restart_gitlab')
+      to take effect.
+      = link_to icon('question-circle'), help_page_path('administration/monitoring/performance/introduction')
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        .checkbox
+          = f.label :metrics_enabled do
+            = f.check_box :metrics_enabled
+            Enable InfluxDB Metrics
+    .form-group
+      = f.label :metrics_host, 'InfluxDB host', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.text_field :metrics_host, class: 'form-control', placeholder: 'influxdb.example.com'
+    .form-group
+      = f.label :metrics_port, 'InfluxDB port', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.text_field :metrics_port, class: 'form-control', placeholder: '8089'
+        .help-block
+          The UDP port to use for connecting to InfluxDB. InfluxDB requires that
+          your server configuration specifies a database to store data in when
+          sending messages to this port, without it metrics data will not be
+          saved.
+    .form-group
+      = f.label :metrics_pool_size, 'Connection pool size', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :metrics_pool_size, class: 'form-control'
+        .help-block
+          The amount of InfluxDB connections to open. Connections are opened
+          lazily. Users using multi-threaded application servers should ensure
+          enough connections are available (at minimum the amount of application
+          server threads).
+    .form-group
+      = f.label :metrics_timeout, 'Connection timeout', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :metrics_timeout, class: 'form-control'
+        .help-block
+          The amount of seconds after which an InfluxDB connection will time
+          out.
+    .form-group
+      = f.label :metrics_method_call_threshold, 'Method Call Threshold (ms)', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :metrics_method_call_threshold, class: 'form-control'
+        .help-block
+          A method call is only tracked when it takes longer to complete than
+          the given amount of milliseconds.
+    .form-group
+      = f.label :metrics_sample_interval, 'Sampler Interval (sec)', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :metrics_sample_interval, class: 'form-control'
+        .help-block
+          The sampling interval in seconds. Sampled data includes memory usage,
+          retained Ruby objects, file descriptors and so on.
+    .form-group
+      = f.label :metrics_packet_size, 'Metrics per packet', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :metrics_packet_size, class: 'form-control'
+        .help-block
+          The amount of points to store in a single UDP packet. More points
+          results in fewer but larger UDP packets being sent.
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/_prometheus.html.haml b/app/views/admin/application_settings/_prometheus.html.haml
new file mode 100644
index 00000000000..48745db2991
--- /dev/null
+++ b/app/views/admin/application_settings/_prometheus.html.haml
@@ -0,0 +1,28 @@
+= form_for @application_setting, url: admin_application_settings_path, html: { class: 'form-horizontal fieldset-form' } do |f|
+  = form_errors(@application_setting)
+
+  %fieldset
+    %p
+      Enable a Prometheus metrics endpoint at
+      %code= metrics_path
+      to expose a variety of statistics on the health and performance of GitLab. Additional information on authenticating and connecting to the metrics endpoint is available
+      = link_to 'here', admin_health_check_path
+      \. This setting requires a
+      = link_to 'restart', help_page_path('administration/restart_gitlab')
+      to take effect.
+      = link_to icon('question-circle'), help_page_path('administration/monitoring/prometheus/index')
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        .checkbox
+          = f.label :prometheus_metrics_enabled do
+            = f.check_box :prometheus_metrics_enabled
+            Enable Prometheus Metrics
+          - unless Gitlab::Metrics.metrics_folder_present?
+            .help-block
+              %strong.cred WARNING:
+              Environment variable
+              %code prometheus_multiproc_dir
+              does not exist or is not pointing to a valid directory.
+              = link_to icon('question-circle'), help_page_path('administration/monitoring/prometheus/gitlab_metrics', anchor: 'metrics-shared-directory')
+
+  = f.submit 'Save changes', class: "btn btn-success"
diff --git a/app/views/admin/application_settings/show.html.haml b/app/views/admin/application_settings/show.html.haml
index 82d97f90248..17f2f37d24e 100644
--- a/app/views/admin/application_settings/show.html.haml
+++ b/app/views/admin/application_settings/show.html.haml
@@ -69,5 +69,38 @@
   .settings-content
     = render 'pages'
 
+%section.settings.as-ci-cd.no-animate#js-ci-cd-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Continuous Integration and Deployment')
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      = _('Auto DevOps, runners amd job artifacts')
+  .settings-content
+    = render 'ci_cd'
+
+%section.settings.as-influx.no-animate#js-influx-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Metrics - Influx')
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      = _('Enable and configure InfluxDB metrics.')
+  .settings-content
+    = render 'influx'
+
+%section.settings.as-prometheus.no-animate#js-prometheus-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Metrics - Prometheus')
+    %button.btn.js-settings-toggle
+      = expanded ? 'Collapse' : 'Expand'
+    %p
+      = _('Enable and configure Prometheus metrics.')
+  .settings-content
+    = render 'prometheus'
+
 .prepend-top-20
   = render 'form'