Add frontend integration for cluster environments

Added frontend integration for cluster environments

app/assets/javascripts/clusters/clusters_bundle.js

@@ -39,6 +39,7 @@ export default class Clusters {
       updateKnativePath,
       installPrometheusPath,
       managePrometheusPath,
+      clusterEnvironmentsPath,
       hasRbac,
       clusterType,
       clusterStatus,
@@ -79,6 +80,7 @@ export default class Clusters {
       installJupyterEndpoint: installJupyterPath,
       installKnativeEndpoint: installKnativePath,
       updateKnativeEndpoint: updateKnativePath,
+      clusterEnvironmentsEndpoint: clusterEnvironmentsPath,
     });
 
     this.installApplication = this.installApplication.bind(this);
@@ -109,6 +111,10 @@ export default class Clusters {
     this.initApplications(clusterType);
     this.initEnvironments();
 
+    if (clusterEnvironmentsPath) {
+      this.fetchEnvironments();
+    }
+
     this.updateContainer(null, this.store.state.status, this.store.state.statusReason);
 
     this.addListeners();
@@ -162,6 +168,7 @@ export default class Clusters {
       render(createElement) {
         return createElement(Environments, {
           props: {
+            isFetching: this.state.fetchingEnvironments,
             environments: this.state.environments,
             environmentsHelpPath: this.state.environmentsHelpPath,
             clustersHelpPath: this.state.clustersHelpPath,
@@ -172,6 +179,18 @@ export default class Clusters {
     });
   }
 
+  fetchEnvironments() {
+    this.store.toggleFetchEnvironments(true);
+
+    this.service
+      .fetchClusterEnvironments()
+      .then(data => {
+        this.store.toggleFetchEnvironments(false);
+        this.store.updateEnvironments(data.data);
+      })
+      .catch(() => Clusters.handleError());
+  }
+
   static initDismissableCallout() {
     const callout = document.querySelector('.js-cluster-security-warning');
     PersistentUserCallout.factory(callout);

app/assets/javascripts/clusters/services/clusters_service.js

@@ -33,6 +33,10 @@ export default class ClusterService {
     return axios.delete(this.appInstallEndpointMap[appId], params);
   }
 
+  fetchClusterEnvironments() {
+    return axios.get(this.options.clusterEnvironmentsEndpoint);
+  }
+
   static updateCluster(endpoint, data) {
     return axios.put(endpoint, data);
   }

app/assets/javascripts/clusters/stores/clusters_store.js

@@ -84,6 +84,7 @@ export default class ClusterStore {
         },
       },
       environments: [],
+      fetchingEnvironments: false,
     };
   }
 
@@ -206,6 +207,10 @@ export default class ClusterStore {
     });
   }
 
+  toggleFetchEnvironments(isFetching) {
+    this.state.fetchingEnvironments = isFetching;
+  }
+
   updateEnvironments(environments = []) {
     this.state.environments = environments.map(environment => ({
       name: environment.name,

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

@@ -16,6 +16,7 @@
   install_jupyter_path: clusterable.install_applications_cluster_path(@cluster, :jupyter),
   install_knative_path: clusterable.install_applications_cluster_path(@cluster, :knative),
   update_knative_path: clusterable.update_applications_cluster_path(@cluster, :knative),
+  cluster_environments_path: clusterable.environments_cluster_path(@cluster),
   toggle_status: @cluster.enabled? ? 'true': 'false',
   has_rbac: has_rbac_enabled?(@cluster) ? 'true': 'false',
   cluster_type: @cluster.cluster_type,

ee/app/assets/javascripts/clusters/components/environments.vue

 <script>
-import { GlTable, GlLink, GlEmptyState } from '@gitlab/ui';
+import { GlTable, GlLink, GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
@@ -11,9 +11,14 @@ export default {
     GlLink,
     Icon,
     TimeAgo,
+    GlLoadingIcon,
     deploymentInstance: () => import('ee_component/vue_shared/components/deployment_instance.vue'),
   },
   props: {
+    isFetching: {
+      type: Boolean,
+      required: true,
+    },
     environments: {
       type: Array,
       required: true,
@@ -33,7 +38,7 @@ export default {
   },
   computed: {
     isEmpty() {
-      return this.environments.length === 0;
+      return !this.isFetching && this.environments.length === 0;
     },
     tableEmptyStateText() {
       const text = __(
@@ -57,7 +62,9 @@ export default {
       let podsInUse = 0;
 
       this.environments.forEach(environment => {
-        podsInUse += environment.rolloutStatus.instances.length;
+        if (this.hasInstances(environment.rolloutStatus)) {
+          podsInUse += environment.rolloutStatus.instances.length;
+        }
       });
 
       return podsInUse;
@@ -76,6 +83,9 @@ export default {
       },
     ];
   },
+  methods: {
+    hasInstances: rolloutStatus => rolloutStatus.instances && rolloutStatus.instances.length,
+  },
 };
 </script>
 
@@ -90,7 +100,12 @@ export default {
       <div slot="description" v-html="tableEmptyStateText"></div>
     </gl-empty-state>
 
-    <gl-table v-else :fields="$options.fields" :items="environments" head-variant="white">
+    <gl-table
+      v-if="!isFetching && !isEmpty"
+      :fields="$options.fields"
+      :items="environments"
+      head-variant="white"
+    >
       <!-- column: Project -->
       <template slot="project" slot-scope="data">
         <a :href="`/${data.value.path_with_namespace}`">{{ data.value.name }}</a>
@@ -112,7 +127,7 @@ export default {
       </template>
 
       <template slot="rolloutStatus" slot-scope="row">
-        <div v-if="row.item.rolloutStatus.instances.length" class="d-flex flex-wrap flex-row">
+        <div v-if="hasInstances(row.item.rolloutStatus)" class="d-flex flex-wrap flex-row">
           <template v-for="(instance, i) in row.item.rolloutStatus.instances">
             <deployment-instance
               :key="i"
@@ -141,5 +156,7 @@ export default {
         <time-ago :time="data.value" />
       </template>
     </gl-table>
+
+    <gl-loading-icon v-if="isFetching" :size="2" class="mt-3" />
   </div>
 </template>

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

@@ -2,7 +2,7 @@
 - is_group_type = @cluster.cluster_type.in? 'group_type'
 - is_creating = @cluster.status_name.in? %i/scheduled creating/
 
-- if is_group_type && !is_creating && Feature.enabled?(:view_group_cluster_deployments)
+- if is_group_type && !is_creating
   .js-toggle-container
     %ul.nav-links.mobile-separator.nav.nav-tabs{ role: 'tablist' }
       %li.nav-item{ role: 'presentation' }

ee/spec/frontend/clusters/components/environments_spec.js

@@ -17,6 +17,7 @@ describe('Environments', () => {
       environmentsHelpPath: 'path/to/environments',
       clustersHelpPath: 'path/to/clusters',
       deployBoardsHelpPath: 'path/to/clusters',
+      isFetching: false,
     };
 
     wrapper = mount(Component, {

spec/frontend/clusters/stores/clusters_store_spec.js

@@ -152,6 +152,7 @@ describe('Clusters Store', () => {
           },
         },
         environments: [],
+        fetchingEnvironments: false,
       });
     });