Merge branch 'list-multiple-clusters' into 'master'

List multiple clusters

See merge request gitlab-org/gitlab-ce!15403

7 files changed, 80 insertions, 7 deletions

diff --git a/app/views/layouts/nav/sidebar/_project.html.haml b/app/views/layouts/nav/sidebar/_project.html.haml
index 8b2d2a5c74d..53a9162b703 100644
--- a/app/views/layouts/nav/sidebar/_project.html.haml
+++ b/app/views/layouts/nav/sidebar/_project.html.haml
@@ -187,7 +187,7 @@
               = nav_link(controller: [:clusters, :user, :gcp]) do
                 = link_to project_clusters_path(@project), title: 'Cluster', class: 'shortcuts-cluster' do
                   %span
-                    Cluster
+                    Clusters
 
             - if @project.feature_available?(:builds, current_user) && !@project.empty_repo?
               = nav_link(path: 'pipelines#charts') do
diff --git a/app/views/projects/clusters/_cluster.html.haml b/app/views/projects/clusters/_cluster.html.haml
new file mode 100644
index 00000000000..18ca01d2d49
--- /dev/null
+++ b/app/views/projects/clusters/_cluster.html.haml
@@ -0,0 +1,22 @@
+.gl-responsive-table-row
+  .table-section.section-30
+    .table-mobile-header{ role: "rowheader" }= s_("ClusterIntegration|Cluster")
+    .table-mobile-content
+      = link_to cluster.name, namespace_project_cluster_path(@project.namespace, @project, cluster)
+  .table-section.section-30
+    .table-mobile-header{ role: "rowheader" }= s_("ClusterIntegration|Environment pattern")
+    .table-mobile-content= cluster.environment_scope
+  .table-section.section-30
+    .table-mobile-header{ role: "rowheader" }= s_("ClusterIntegration|Project namespace")
+    .table-mobile-content= cluster.platform_kubernetes&.actual_namespace
+  .table-section.section-10
+    .table-mobile-header{ role: "rowheader" }
+    .table-mobile-content
+      %button{ type: "button",
+        class: "js-toggle-cluster-list project-feature-toggle #{'is-checked' if cluster.enabled?} #{'is-disabled' if !cluster.can_toggle_cluster?}",
+        "aria-label": s_("ClusterIntegration|Toggle Cluster"),
+        disabled: !cluster.can_toggle_cluster?,
+        data: { "enabled-text": s_("ClusterIntegration|Active"),
+          "disabled-text": s_("ClusterIntegration|Inactive"),
+          endpoint: namespace_project_cluster_path(@project.namespace, @project, cluster, format: :json) } }
+        = icon("spinner spin", class: "loading-icon")
diff --git a/app/views/projects/clusters/_empty_state.html.haml b/app/views/projects/clusters/_empty_state.html.haml
new file mode 100644
index 00000000000..e629cc58b06
--- /dev/null
+++ b/app/views/projects/clusters/_empty_state.html.haml
@@ -0,0 +1,12 @@
+.row.empty-state
+  .col-xs-12
+    .svg-content= image_tag 'illustrations/clusters_empty.svg'
+  .col-xs-12.text-center
+    .text-content
+      %h4= s_('ClusterIntegration|Integrate cluster automation')
+      - link_to_help_page = link_to(s_('ClusterIntegration|Learn more about Clusters'), help_page_path('user/project/clusters/index'), target: '_blank', rel: 'noopener noreferrer')
+      %p= s_('ClusterIntegration|Clusters allow you to use review apps, deploy your applications, run your pipelines, and much more in an easy way. %{link_to_help_page}').html_safe % { link_to_help_page: link_to_help_page}
+
+      %p
+        = link_to s_('ClusterIntegration|Add cluster'), new_project_cluster_path(@project), class: 'btn btn-success'
+
diff --git a/app/views/projects/clusters/_enabled.html.haml b/app/views/projects/clusters/_enabled.html.haml
index f4d261df8f5..70c677f7856 100644
--- a/app/views/projects/clusters/_enabled.html.haml
+++ b/app/views/projects/clusters/_enabled.html.haml
@@ -5,12 +5,11 @@
       = field.hidden_field :enabled, { class: 'js-toggle-input'}
 
       %button{ type: 'button',
-        class: "js-toggle-cluster project-feature-toggle #{'checked' unless !@cluster.enabled?} #{'disabled' unless can?(current_user, :update_cluster, @cluster)}",
-        'aria-label': s_('ClusterIntegration|Toggle Cluster'),
+        class: "js-toggle-cluster project-feature-toggle #{'is-checked' unless !@cluster.enabled?} #{'is-disabled' unless can?(current_user, :update_cluster, @cluster)}",
+        "aria-label": s_("ClusterIntegration|Toggle Cluster"),
         disabled: !can?(current_user, :update_cluster, @cluster),
-        data: { 'enabled-text': 'Enabled', 'disabled-text': 'Disabled' } }
+        data: { "enabled-text": s_("ClusterIntegration|Active"), "disabled-text": s_("ClusterIntegration|Inactive"), } }
 
     - if can?(current_user, :update_cluster, @cluster)
       .form-group
         = field.submit _('Save'), class: 'btn btn-success'
-
diff --git a/app/views/projects/clusters/_tabs.html.haml b/app/views/projects/clusters/_tabs.html.haml
new file mode 100644
index 00000000000..c8120e806fa
--- /dev/null
+++ b/app/views/projects/clusters/_tabs.html.haml
@@ -0,0 +1,16 @@
+.top-area.scrolling-tabs-container.inner-page-scroll-tabs
+  .fade-left= icon("angle-left")
+  .fade-right= icon("angle-right")
+  %ul.nav-links.scrolling-tabs
+    %li{ class: ('active' if @scope == 'active') }>
+      = link_to project_clusters_path(@project, scope: :active), class: "js-active-tab" do
+        = s_("ClusterIntegration|Active")
+        %span.badge= @active_count
+    %li{ class: ('active' if @scope == 'inactive') }>
+      = link_to project_clusters_path(@project, scope: :inactive), class: "js-inactive-tab" do
+        = s_("ClusterIntegration|Inactive")
+        %span.badge= @inactive_count
+    %li{ class: ('active' if @scope.nil? || @scope == 'all') }>
+      = link_to project_clusters_path(@project), class: "js-all-tab" do
+        = s_("ClusterIntegration|All")
+        %span.badge= @all_count
diff --git a/app/views/projects/clusters/index.html.haml b/app/views/projects/clusters/index.html.haml
new file mode 100644
index 00000000000..104e39b0e06
--- /dev/null
+++ b/app/views/projects/clusters/index.html.haml
@@ -0,0 +1,24 @@
+- breadcrumb_title "Clusters"
+- page_title "Clusters"
+
+.clusters-container
+  - if !@clusters.empty?
+    = render "tabs"
+    .ci-table.js-clusters-list
+      .gl-responsive-table-row.table-row-header{ role: "row" }
+        .table-section.section-30{ role: "rowheader" }
+          = s_("ClusterIntegration|Cluster")
+        .table-section.section-30{ role: "rowheader" }
+          = s_("ClusterIntegration|Environment pattern")
+        .table-section.section-30{ role: "rowheader" }
+          = s_("ClusterIntegration|Project namespace")
+        .table-section.section-10{ role: "rowheader" }
+      - @clusters.each do |cluster|
+        = render "cluster", cluster: cluster.present(current_user: current_user)
+    = paginate @clusters, theme: "gitlab"
+  - elsif @scope == 'all'
+    = render "empty_state"
+  - else
+    = render "tabs"
+    .prepend-top-20.text-center
+      = s_("ClusterIntegration|There are no clusters to show")
diff --git a/app/views/projects/clusters/show.html.haml b/app/views/projects/clusters/show.html.haml
index d23efe4d9aa..fe6dacf1f0d 100644
--- a/app/views/projects/clusters/show.html.haml
+++ b/app/views/projects/clusters/show.html.haml
@@ -1,5 +1,6 @@
 - @content_class = "limit-container-width" unless fluid_layout
-- breadcrumb_title "Cluster"
+- add_to_breadcrumbs "Clusters", project_clusters_path(@project)
+- breadcrumb_title @cluster.id
 - page_title _("Cluster")
 
 - expanded = Rails.env.test?
@@ -28,7 +29,6 @@
       %button.btn.js-settings-toggle
         = expanded ? 'Collapse' : 'Expand'
       %p= s_('ClusterIntegration|See and edit the details for your cluster')
-
     .settings-content
       - if @cluster.managed?
         = render 'projects/clusters/gcp/show'