diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-10-17 16:28:27 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-10-17 16:28:27 +0300 |
commit | 04892e1de8d7442909df6d60c90870ebab39f303 (patch) | |
tree | 63a0b86a5e4f928b98a968531dd4c3a00c3ddfaf | |
parent | f69b54682fc1770a73c528032b1a86f3e7d547a1 (diff) |
Adds collapsible sections in cluster page
-rw-r--r-- | app/assets/javascripts/clusters.js | 5 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/clusters.scss | 2 | ||||
-rw-r--r-- | app/views/projects/clusters/_advanced_settings.html.haml | 14 | ||||
-rw-r--r-- | app/views/projects/clusters/show.html.haml | 90 |
4 files changed, 67 insertions, 44 deletions
diff --git a/app/assets/javascripts/clusters.js b/app/assets/javascripts/clusters.js index 50dbeb06362..180aa30e98c 100644 --- a/app/assets/javascripts/clusters.js +++ b/app/assets/javascripts/clusters.js @@ -3,7 +3,8 @@ import Visibility from 'visibilityjs'; import axios from 'axios'; import Poll from './lib/utils/poll'; import { s__ } from './locale'; -import './flash'; +import initSettingsPanels from './settings_panels'; +import Flash from './flash'; /** * Cluster page has 2 separate parts: @@ -24,6 +25,8 @@ class ClusterService { export default class Clusters { constructor() { + initSettingsPanels(); + const dataset = document.querySelector('.js-edit-cluster-form').dataset; this.state = { diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss index 5538e46a6c4..8d6f30e3b84 100644 --- a/app/assets/stylesheets/pages/clusters.scss +++ b/app/assets/stylesheets/pages/clusters.scss @@ -4,6 +4,6 @@ } .alert-block { - margin-bottom: 20px; + margin-bottom: 10px; } } diff --git a/app/views/projects/clusters/_advanced_settings.html.haml b/app/views/projects/clusters/_advanced_settings.html.haml new file mode 100644 index 00000000000..6c162481dd8 --- /dev/null +++ b/app/views/projects/clusters/_advanced_settings.html.haml @@ -0,0 +1,14 @@ +- if can?(current_user, :admin_cluster, @cluster) + .append-bottom-20 + %label.append-bottom-10 + = s_('ClusterIntegration|Google Container Engine') + %p + - link_gke = link_to(s_('ClusterIntegration|Google Container Engine'), @cluster.gke_cluster_url, target: '_blank', rel: 'noopener noreferrer') + = s_('ClusterIntegration|Manage your cluster by visiting %{link_gke}').html_safe % { link_gke: link_gke } + + .well.form-group + %label.text-danger + = s_('ClusterIntegration|Remove cluster integration') + %p + = s_('ClusterIntegration|Removing cluster integration will remove the cluster configuration you have added to this project. It will not delete your project.') + = link_to(s_('ClusterIntegration|Remove integration'), namespace_project_cluster_path(@project.namespace, @project, @cluster.id), method: :delete, class: 'btn btn-danger', data: { confirm: "Are you sure you want to remove cluster integration from this project? This will not delete your cluster on Google Container Engine"}) diff --git a/app/views/projects/clusters/show.html.haml b/app/views/projects/clusters/show.html.haml index aee6f904a62..ff76abc3553 100644 --- a/app/views/projects/clusters/show.html.haml +++ b/app/views/projects/clusters/show.html.haml @@ -1,24 +1,37 @@ +- @content_class = "limit-container-width" unless fluid_layout - breadcrumb_title "Cluster" - page_title _("Cluster") +- expanded = Rails.env.test? + - status_path = status_namespace_project_cluster_path(@cluster.project.namespace, @cluster.project, @cluster.id, format: :json) if can?(current_user, :admin_cluster, @cluster) && @cluster.on_creation? -.row.prepend-top-default.edit-cluster-form.js-edit-cluster-form{ data: { status_path: status_path, +.edit-cluster-form.js-edit-cluster-form{ data: { status_path: status_path, toggle_status: @cluster.enabled? ? 'true': 'false', cluster_status: @cluster.status_name, cluster_status_reason: @cluster.status_reason } } - .col-sm-4 - = render 'sidebar' - .col-sm-8 - %label.append-bottom-10{ for: 'enable-cluster-integration' } - = s_('ClusterIntegration|Enable cluster integration') - %p - - if @cluster.enabled? - - if can?(current_user, :update_cluster, @cluster) - = s_('ClusterIntegration|Cluster integration is enabled for this project. Disabling this integration will not affect your cluster, it will only temporarily turn off GitLab\'s connection to it.') + + %section.settings + %h4= s_('ClusterIntegration|Enable cluster integration') + .settings-content.expanded + + .hidden.js-cluster-error.alert.alert-danger.alert-block.append-bottom-10{ role: 'alert' } + = s_('ClusterIntegration|Something went wrong while creating your cluster on Google Container Engine') + %p.js-error-reason + + .hidden.js-cluster-creating.alert.alert-info.alert-block.append-bottom-10{ role: 'alert' } + = s_('ClusterIntegration|Cluster is being created on Google Container Engine...') + + .hidden.js-cluster-success.alert.alert-success.alert-block.append-bottom-10{ role: 'alert' } + = s_('ClusterIntegration|Cluster was successfully created on Google Container Engine') + + %p + - if @cluster.enabled? + - if can?(current_user, :update_cluster, @cluster) + = s_('ClusterIntegration|Cluster integration is enabled for this project. Disabling this integration will not affect your cluster, it will only temporarily turn off GitLab\'s connection to it.') + - else + = s_('ClusterIntegration|Cluster integration is enabled for this project.') - else - = s_('ClusterIntegration|Cluster integration is enabled for this project.') - - else - = s_('ClusterIntegration|Cluster integration is disabled for this project.') + = s_('ClusterIntegration|Cluster integration is disabled for this project.') = form_for [@project.namespace.becomes(Namespace), @project, @cluster] do |field| = form_errors(@cluster) @@ -36,35 +49,28 @@ .form-group = field.submit s_('ClusterIntegration|Save'), class: 'btn btn-success' - - if can?(current_user, :admin_cluster, @cluster) - %label.append-bottom-10{ for: 'google-container-engine' } - = s_('ClusterIntegration|Google Container Engine') - %p - - link_gke = link_to(s_('ClusterIntegration|Google Container Engine'), @cluster.gke_cluster_url, target: '_blank', rel: 'noopener noreferrer') - = s_('ClusterIntegration|Manage your cluster by visiting %{link_gke}').html_safe % { link_gke: link_gke } + %section.settings#js-cluster-details + .settings-header + %h4= s_('ClusterIntegration|Cluster details') + %button.btn.js-settings-toggle + = expanded ? 'Collapse' : 'Expand' + %p= s_('ClusterIntegration|See and edit the details for your cluster') - .hidden.js-cluster-error.alert.alert-danger.alert-block{ role: 'alert' } - = s_('ClusterIntegration|Something went wrong while creating your cluster on Google Container Engine') - %p.js-error-reason - - .hidden.js-cluster-creating.alert.alert-info.alert-block{ role: 'alert' } - = s_('ClusterIntegration|Cluster is being created on Google Container Engine...') - - .hidden.js-cluster-success.alert.alert-success.alert-block{ role: 'alert' } - = s_('ClusterIntegration|Cluster was successfully created on Google Container Engine') + .settings-content.no-animate{ class: ('expanded' if expanded) } - .form_group.append-bottom-20 - %label.append-bottom-10{ for: 'cluter-name' } - = s_('ClusterIntegration|Cluster name') - .input-group - %input.form-control.cluster-name{ value: @cluster.gcp_cluster_name, disabled: true } - %span.input-group-addon.clipboard-addon - = clipboard_button(text: @cluster.gcp_cluster_name, title: s_('ClusterIntegration|Copy cluster name')) + .form_group.append-bottom-20 + %label.append-bottom-10{ for: 'cluter-name' } + = s_('ClusterIntegration|Cluster name') + .input-group + %input.form-control.cluster-name{ value: @cluster.gcp_cluster_name, disabled: true } + %span.input-group-addon.clipboard-addon + = clipboard_button(text: @cluster.gcp_cluster_name, title: s_('ClusterIntegration|Copy cluster name')) - - if can?(current_user, :admin_cluster, @cluster) - .well.form_group - %label.text-danger - = s_('ClusterIntegration|Remove cluster integration') - %p - = s_('ClusterIntegration|Removing cluster integration will remove the cluster configuration you have added to this project. It will not delete your project.') - = link_to(s_('ClusterIntegration|Remove integration'), namespace_project_cluster_path(@project.namespace, @project, @cluster.id), method: :delete, class: 'btn btn-danger', data: { confirm: "Are you sure you want to remove cluster integration from this project? This will not delete your cluster on Google Container Engine"}) + %section.settings#js-cluster-advanced-settings + .settings-header + %h4= s_('ClusterIntegration|Advanced settings') + %button.btn.js-settings-toggle + = expanded ? 'Collapse' : 'Expand' + %p= s_('ClusterIntegration|Manage Cluster integration on your GitLab project') + .settings-content.no-animate{ class: ('expanded' if expanded) } + = render 'advanced_settings' |