Split cluster info page into tabs

Move different sections of the cluster info page
into tabs.

app/assets/javascripts/clusters/clusters_bundle.js

@@ -315,10 +315,13 @@ export default class Clusters {
 
     this.checkForNewInstalls(prevApplicationMap, this.store.state.applications);
     this.updateContainer(prevStatus, this.store.state.status, this.store.state.statusReason);
-    this.toggleIngressDomainHelpText(
-      prevApplicationMap[INGRESS],
-      this.store.state.applications[INGRESS],
-    );
+
+    if (this.ingressDomainHelpText) {
+      this.toggleIngressDomainHelpText(
+        prevApplicationMap[INGRESS],
+        this.store.state.applications[INGRESS],
+      );
+    }
   }
 
   showToken() {

app/assets/javascripts/clusters/components/applications.vue

@@ -263,7 +263,6 @@ Crossplane runs inside your Kubernetes cluster and supports secure connectivity
 
 <template>
   <section id="cluster-applications">
-    <h4>{{ s__('ClusterIntegration|Applications') }}</h4>
     <p class="append-bottom-0">
       {{
         s__(`ClusterIntegration|Choose which applications to install on your Kubernetes cluster.

app/helpers/clusters_helper.rb

@@ -26,11 +26,38 @@ module ClustersHelper
     end
   end
 
+  def render_cluster_info_tab_content(tab, expanded)
+    case tab
+    when 'environments'
+      render_if_exists 'clusters/clusters/environments'
+    when 'health'
+      render_if_exists 'clusters/clusters/health'
+    when 'apps'
+      render 'applications'
+    when 'settings'
+      render 'advanced_settings_container'
+    else
+      render('details', expanded: expanded)
+    end
+  end
+
   def has_rbac_enabled?(cluster)
     return cluster.platform_kubernetes_rbac? if cluster.platform_kubernetes
 
     cluster.provider.has_rbac_enabled?
   end
+
+  def project_cluster?(cluster)
+    cluster.cluster_type.in?('project_type')
+  end
+
+  def cluster_created?(cluster)
+    !cluster.status_name.in?(%i/scheduled creating/)
+  end
+
+  def can_admin_cluster?(user, cluster)
+    can?(user, :admin_cluster, cluster)
+  end
 end
 
 ClustersHelper.prepend_if_ee('EE::ClustersHelper')

app/views/clusters/clusters/_advanced_settings_container.html.haml

+- if can_admin_cluster?(current_user, @cluster)
+  .settings.expanded.border-0.m-0
+    %p
+      = s_('ClusterIntegration|Advanced options on this Kubernetes cluster’s integration')
+    .settings-content#advanced-settings-section
+      = render 'clusters/clusters/advanced_settings'

app/views/clusters/clusters/_advanced_settings_tab.html.haml

+- active = params[:tab] == 'settings'
+
+- if can_admin_cluster?(current_user, @cluster)
+  %li.nav-item{ role: 'presentation' }
+    %a#cluster-settings-tab.nav-link{ class: active_when(active), href: clusterable.cluster_path(@cluster.id, params: {tab: 'settings'}) }
+      %span= _('Advanced Settings')

app/views/clusters/clusters/_applications.html.haml

+.cluster-applications-table#js-cluster-applications

app/views/clusters/clusters/_applications_tab.html.haml

+- active = params[:tab] == 'apps'
+
+%li.nav-item{ role: 'presentation' }
+  %a#cluster-apps-tab.nav-link.qa-applications{ class: active_when(active), href: clusterable.cluster_path(@cluster.id, params: {tab: 'apps'}) }
+    %span= _('Applications')

app/views/clusters/clusters/_configure.html.haml

-%section#cluster-integration
-  - unless @cluster.status_name.in? %i/scheduled creating/
-    = render 'form'
-
-- unless @cluster.status_name.in? %i/scheduled creating/
-  = render_if_exists 'projects/clusters/prometheus_graphs'
-
-  .cluster-applications-table#js-cluster-applications
-
-  %section.settings#js-cluster-details{ class: ('expanded' if expanded) }
-    .settings-header
-      %h4= s_('ClusterIntegration|Kubernetes cluster details')
-      %button.btn.js-settings-toggle{ type: 'button' }
-        = expanded ? _('Collapse') : _('Expand')
-      %p= s_('ClusterIntegration|See and edit the details for your Kubernetes cluster')
-    .settings-content
-      = render 'clusters/platforms/kubernetes/form', cluster: @cluster, platform: @cluster.platform_kubernetes, update_cluster_url_path: clusterable.cluster_path(@cluster)
-
-  %section.settings.no-animate#js-cluster-advanced-settings{ class: ('expanded' if expanded) }
-    .settings-header
-      %h4= _('Advanced settings')
-      %button.btn.js-settings-toggle{ type: 'button' }
-        = expanded ? _('Collapse') : _('Expand')
-      %p= s_("ClusterIntegration|Advanced options on this Kubernetes cluster's integration")
-    .settings-content#advanced-settings-section
-      = render 'advanced_settings'

app/views/clusters/clusters/_details.html.haml

+%section#cluster-integration
+  = render 'gitlab_integration_form'
+
+  %section.settings.no-animate{ class: ('expanded' if expanded) }
+    .settings-header
+      %h4= s_('ClusterIntegration|Provider details')
+      %p= s_('ClusterIntegration|See and edit the details for your Kubernetes cluster')
+    .settings-content
+      = render 'provider_details_form', cluster: @cluster, platform: @cluster.platform_kubernetes, update_cluster_url_path: clusterable.cluster_path(@cluster)

app/views/clusters/clusters/_details_tab.html.haml

+- active = params[:tab] == 'details' || !params[:tab].present?
+
+%li.nav-item{ role: 'presentation' }
+  %a#cluster-details-tab.nav-link.qa-details{ class: active_when(active), href: clusterable.cluster_path(@cluster.id, params: {tab: 'details'}) }
+    %span= _('Details')

app/views/clusters/clusters/_form.html.haml → app/views/clusters/clusters/_gitlab_integration_form.html.haml

 = form_for @cluster, url: clusterable.cluster_path(@cluster), as: :cluster, html: { class: 'cluster_integration_form' } do |field|
   = form_errors(@cluster)
   .form-group
-    %h5= s_('ClusterIntegration|Integration status')
-    %label.append-bottom-0.js-cluster-enable-toggle-area
-      = render "shared/buttons/project_feature_toggle", is_checked: @cluster.enabled?, label: s_("ClusterIntegration|Toggle Kubernetes cluster"), disabled: !can?(current_user, :update_cluster, @cluster), data: { qa_selector: 'integration_status_toggle' } do
-        = field.hidden_field :enabled, { class: 'js-project-feature-toggle-input'}
-      .form-text.text-muted= s_('ClusterIntegration|Enable or disable GitLab\'s connection to your Kubernetes cluster.')
+    .d-flex.align-items-center
+      %h4.pr-2.m-0
+        = s_('ClusterIntegration|GitLab Integration')
+      %label.append-bottom-0.js-cluster-enable-toggle-area{ title: s_('ClusterIntegration|Enable or disable GitLab\'s connection to your Kubernetes cluster.'), data: { toggle: 'tooltip', container: 'body' } }
+        = render "shared/buttons/project_feature_toggle", is_checked: @cluster.enabled?, label: s_("ClusterIntegration|Toggle Kubernetes cluster"), disabled: !can?(current_user, :update_cluster, @cluster), data: { qa_selector: 'integration_status_toggle' } do
+          = field.hidden_field :enabled, { class: 'js-project-feature-toggle-input'}
 
   .form-group
     %h5= s_('ClusterIntegration|Environment scope')
@@ -17,7 +18,8 @@
       - environment_scope_url = help_page_path('user/project/clusters/index', anchor: 'base-domain')
       - environment_scope_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: environment_scope_url }
       .form-text.text-muted
-        %code *
+        %code
+          = _('*')
         = s_("ClusterIntegration| is the default environment scope for this cluster. This means that all jobs, regardless of their environment, will use this cluster. %{environment_scope_start}More information%{environment_scope_end}").html_safe % { environment_scope_start: environment_scope_start, environment_scope_end: '</a>'.html_safe }
 
   .form-group
@@ -29,7 +31,8 @@
       = s_('ClusterIntegration|Specifying a domain will allow you to use Auto Review Apps and Auto Deploy stages for %{auto_devops_start}Auto DevOps%{auto_devops_end}. The domain should have a wildcard DNS configured matching the domain.').html_safe % { auto_devops_start: auto_devops_start, auto_devops_end: '</a>'.html_safe }
       %span{ :class => ["js-ingress-domain-help-text", ("hide" unless @cluster.application_ingress_external_ip.present?)] }
         = s_('ClusterIntegration|Alternatively')
-        %code{ :class => "js-ingress-domain-snippet" } #{@cluster.application_ingress_external_ip}.nip.io
+        %code{ :class => "js-ingress-domain-snippet" }
+          = s_('ClusterIntegration|%{external_ip}.nip.io').html_safe % { external_ip: @cluster.application_ingress_external_ip }
         = s_('ClusterIntegration| can be used instead of a custom domain.')
       - custom_domain_url = help_page_path('user/clusters/applications.md', anchor: 'pointing-your-dns-at-the-external-endpoint')
       - custom_domain_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: custom_domain_url }

app/views/clusters/platforms/kubernetes/_form.html.haml → app/views/clusters/clusters/_provider_details_form.html.haml

-= bootstrap_form_for cluster, url: update_cluster_url_path, html: { class: 'gl-show-field-errors' },
+= bootstrap_form_for cluster, url: update_cluster_url_path, html: { class: 'js-provider-details gl-show-field-errors' },
   as: :cluster do |field|
   - copy_name_btn = clipboard_button(text: cluster.name, title: s_('ClusterIntegration|Copy Kubernetes cluster name'),
     class: 'input-group-text btn-default') if cluster.read_only_kubernetes_platform_fields?

app/views/clusters/clusters/show.html.haml

@@ -5,8 +5,6 @@
 - manage_prometheus_path = edit_project_service_path(@cluster.project, 'prometheus') if @project
 - cluster_environments_path = clusterable.environments_cluster_path(@cluster)
 
-- expanded = expanded_by_default?
-
 - status_path = clusterable.cluster_status_cluster_path(@cluster.id, format: :json) if can?(current_user, :admin_cluster, @cluster)
 .edit-cluster-form.js-edit-cluster-form{ data: { status_path: status_path,
   install_helm_path: clusterable.install_applications_cluster_path(@cluster, :helm),
@@ -44,7 +42,19 @@
   %h4= @cluster.name
   = render 'banner'
 
-  - if cluster_environments_path.present?
-    = render_if_exists 'clusters/clusters/cluster_environments', expanded: expanded
-  - else
-    = render 'configure', expanded: expanded
+  - if cluster_created?(@cluster)
+    .js-toggle-container
+      %ul.nav-links.mobile-separator.nav.nav-tabs{ role: 'tablist' }
+        = render 'details_tab'
+        = render_if_exists 'clusters/clusters/environments_tab'
+        = render_if_exists 'clusters/clusters/health_tab'
+        = render 'applications_tab'
+        = render 'advanced_settings_tab'
+
+      .tab-content.py-3
+        .tab-pane.active{ role: 'tabpanel' }
+          = render_cluster_info_tab_content(params[:tab], expanded_by_default?)
+
+
+
+

ee/app/views/clusters/clusters/_cluster_environments.html.haml

-- is_configure_active = !params[:tab] || params[:tab] == 'configure'
-- is_project_type = @cluster.cluster_type.in? 'project_type'
-- is_creating = @cluster.status_name.in? %i/scheduled creating/
-
-- if !is_project_type && !is_creating
-  .js-toggle-container
-    %ul.nav-links.mobile-separator.nav.nav-tabs{ role: 'tablist' }
-      %li.nav-item{ role: 'presentation' }
-        %a.nav-link{ class: active_when(is_configure_active), href: clusterable.cluster_path(@cluster.id, params: {tab: 'configure'}), id: 'cluster-configure-tab' }
-          %span= _('Configuration')
-      %li.nav-item{ role: 'presentation' }
-        %a.nav-link{ class: active_when(!is_configure_active), href: clusterable.cluster_path(@cluster.id, params: {tab: 'environments'}), id: 'cluster-environments-tab' }
-          %span.js-cluster-nav-environments= _('Environments')
-
-    .tab-content
-      - if is_configure_active
-        .tab-pane.active{ id: 'cluster-configure-pane', role: 'tabpanel' }
-          = render 'configure', expanded: expanded
-      - else
-        .tab-pane.active{ id: 'cluster-environments-pane', role: 'tabpanel' }
-          #js-cluster-environments
-
-- else
-  = render 'configure', expanded: expanded

ee/app/views/clusters/clusters/_environments.html.haml

+#js-cluster-environments

ee/app/views/clusters/clusters/_environments_tab.html.haml

+- cluster_environments_path = clusterable.environments_cluster_path(@cluster)
+- active = params[:tab] == 'environments'
+
+- if !project_cluster?(@cluster) && cluster_environments_path.present?
+  %li.nav-item{ role: 'presentation' }
+    %a#cluster-environments-tab.nav-link{ class: active_when(active), href: clusterable.cluster_path(@cluster.id, params: {tab: 'environments'}) }
+      %span.js-cluster-nav-environments= _('Environments')

ee/app/views/projects/clusters/_prometheus_graphs.html.haml → ee/app/views/clusters/clusters/_health.html.haml

-- return unless show_cluster_health_graphs?
-
 %section.settings.no-animate.expanded.cluster-health-graphs.qa-cluster-health-section#cluster-health
-  %h4= s_('ClusterIntegration|Cluster health')
-
   - if @cluster&.application_prometheus_available?
     #prometheus-graphs{ data: cluster_health_data(@cluster).merge({ "alerts-endpoint" => ('/' if Feature.enabled?(:prometheus_computed_alerts)),
     "prometheus-alerts-available" => ('true' if Feature.enabled?(:prometheus_computed_alerts)) }) }
 
   - else
-    %p.settings-message.text-center= s_("ClusterIntegration|In order to view the health of your cluster, you must first install Prometheus below.")
+    %p.settings-message.text-center= s_("ClusterIntegration|In order to view the health of your cluster, you must first install Prometheus in the Applications tab.")

ee/app/views/clusters/clusters/_health_tab.html.haml

+- active = params[:tab] == 'health'
+
+%li.nav-item{ role: 'presentation' }
+  %a#cluster-health-tab.nav-link.qa-health{ class: active_when(active), href: clusterable.cluster_path(@cluster.id, params: {tab: 'health'}) }
+    %span= _('Health')

locale/gitlab.pot

@@ -1544,13 +1544,13 @@ msgstr ""
 msgid "Advanced"
 msgstr ""
 
-msgid "Advanced permissions, Large File Storage and Two-Factor authentication settings."
+msgid "Advanced Settings"
 msgstr ""
 
-msgid "Advanced search functionality"
+msgid "Advanced permissions, Large File Storage and Two-Factor authentication settings."
 msgstr ""
 
-msgid "Advanced settings"
+msgid "Advanced search functionality"
 msgstr ""
 
 msgid "After a successful password update you will be redirected to login screen."
@@ -4006,6 +4006,9 @@ msgstr ""
 msgid "ClusterIntegration|%{appList} was successfully installed on your Kubernetes cluster"
 msgstr ""
 
+msgid "ClusterIntegration|%{external_ip}.nip.io"
+msgstr ""
+
 msgid "ClusterIntegration|%{title} uninstalled successfully."
 msgstr ""
 
@@ -4042,7 +4045,7 @@ msgstr ""
 msgid "ClusterIntegration|Adding an integration will share the cluster across all projects."
 msgstr ""
 
-msgid "ClusterIntegration|Advanced options on this Kubernetes cluster's integration"
+msgid "ClusterIntegration|Advanced options on this Kubernetes cluster’s integration"
 msgstr ""
 
 msgid "ClusterIntegration|All data not committed to GitLab will be deleted and cannot be restored."
@@ -4078,9 +4081,6 @@ msgstr ""
 msgid "ClusterIntegration|Any running pipelines will be canceled."
 msgstr ""
 
-msgid "ClusterIntegration|Applications"
-msgstr ""
-
 msgid "ClusterIntegration|Apply for credit"
 msgstr ""
 
@@ -4132,9 +4132,6 @@ msgstr ""
 msgid "ClusterIntegration|Cluster being created"
 msgstr ""
 
-msgid "ClusterIntegration|Cluster health"
-msgstr ""
-
 msgid "ClusterIntegration|Cluster management project (alpha)"
 msgstr ""
 
@@ -4327,7 +4324,7 @@ msgstr ""
 msgid "ClusterIntegration|If you do not wish to delete all associated GitLab resources, you can simply remove the integration."
 msgstr ""
 
-msgid "ClusterIntegration|In order to view the health of your cluster, you must first install Prometheus below."
+msgid "ClusterIntegration|In order to view the health of your cluster, you must first install Prometheus in the Applications tab."
 msgstr ""
 
 msgid "ClusterIntegration|Ingress"
@@ -4351,9 +4348,6 @@ msgstr ""
 msgid "ClusterIntegration|Integrate Kubernetes cluster automation"
 msgstr ""
 
-msgid "ClusterIntegration|Integration status"
-msgstr ""
-
 msgid "ClusterIntegration|Issuer Email"
 msgstr ""
 
@@ -4390,9 +4384,6 @@ msgstr ""
 msgid "ClusterIntegration|Kubernetes cluster"
 msgstr ""
 
-msgid "ClusterIntegration|Kubernetes cluster details"
-msgstr ""
-
 msgid "ClusterIntegration|Kubernetes cluster is being created..."
 msgstr ""
 
@@ -4543,6 +4534,9 @@ msgstr ""
 msgid "ClusterIntegration|Prometheus is an open-source monitoring system with %{gitlabIntegrationLink} to monitor deployed applications."
 msgstr ""
 
+msgid "ClusterIntegration|Provider details"
+msgstr ""
+
 msgid "ClusterIntegration|Provision Role ARN"
 msgstr ""
 
@@ -10261,6 +10255,9 @@ msgstr ""
 msgid "Header message"
 msgstr ""
 
+msgid "Health"
+msgstr ""
+
 msgid "Health Check"
 msgstr ""