Merge branch '34758-group-cluster-controller' into 'master'

User can create a group level cluster and install applications

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

10 files changed, 63 insertions, 34 deletions

diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index 02dfe1c7d6f..71fc2ac7d80 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -9,7 +9,7 @@ import eventHub from './event_hub';
 import { APPLICATION_STATUS, REQUEST_LOADING, REQUEST_SUCCESS, REQUEST_FAILURE } from './constants';
 import ClustersService from './services/clusters_service';
 import ClustersStore from './stores/clusters_store';
-import applications from './components/applications.vue';
+import Applications from './components/applications.vue';
 import setupToggleButtons from '../toggle_buttons';
 
 /**
@@ -31,6 +31,7 @@ export default class Clusters {
       installKnativePath,
       installPrometheusPath,
       managePrometheusPath,
+      clusterType,
       clusterStatus,
       clusterStatusReason,
       helpPath,
@@ -67,7 +68,7 @@ export default class Clusters {
     initDismissableCallout('.js-cluster-security-warning');
     initSettingsPanels();
     setupToggleButtons(document.querySelector('.js-cluster-enable-toggle-area'));
-    this.initApplications();
+    this.initApplications(clusterType);
 
     if (this.store.state.status !== 'created') {
       this.updateContainer(null, this.store.state.status, this.store.state.statusReason);
@@ -79,23 +80,21 @@ export default class Clusters {
     }
   }
 
-  initApplications() {
+  initApplications(type) {
     const { store } = this;
     const el = document.querySelector('#js-cluster-applications');
 
     this.applications = new Vue({
       el,
-      components: {
-        applications,
-      },
       data() {
         return {
           state: store.state,
         };
       },
       render(createElement) {
-        return createElement('applications', {
+        return createElement(Applications, {
           props: {
+            type,
             applications: this.state.applications,
             helpPath: this.state.helpPath,
             ingressHelpPath: this.state.ingressHelpPath,
diff --git a/app/assets/javascripts/clusters/clusters_index.js b/app/assets/javascripts/clusters/clusters_index.js
deleted file mode 100644
index 789c8360124..00000000000
--- a/app/assets/javascripts/clusters/clusters_index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import createFlash from '~/flash';
-import { __ } from '~/locale';
-import setupToggleButtons from '~/toggle_buttons';
-import initDismissableCallout from '~/dismissable_callout';
-
-import ClustersService from './services/clusters_service';
-
-export default () => {
-  const clusterList = document.querySelector('.js-clusters-list');
-
-  initDismissableCallout('.gcp-signup-offer');
-
-  // The empty state won't have a clusterList
-  if (clusterList) {
-    setupToggleButtons(document.querySelector('.js-clusters-list'), (value, toggle) =>
-      ClustersService.updateCluster(toggle.dataset.endpoint, { cluster: { enabled: value } }).catch(
-        err => {
-          createFlash(__('Something went wrong on our end.'));
-          throw err;
-        },
-      ),
-    );
-  }
-};
diff --git a/app/assets/javascripts/clusters/components/applications.vue b/app/assets/javascripts/clusters/components/applications.vue
index c7ffb470d4d..c1026d1273a 100644
--- a/app/assets/javascripts/clusters/components/applications.vue
+++ b/app/assets/javascripts/clusters/components/applications.vue
@@ -13,7 +13,7 @@ import prometheusLogo from 'images/cluster_app_logos/prometheus.png';
 import { s__, sprintf } from '../../locale';
 import applicationRow from './application_row.vue';
 import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
-import { APPLICATION_STATUS, INGRESS } from '../constants';
+import { CLUSTER_TYPE, APPLICATION_STATUS, INGRESS } from '../constants';
 
 export default {
   components: {
@@ -21,6 +21,11 @@ export default {
     clipboardButton,
   },
   props: {
+    type: {
+      type: String,
+      required: false,
+      default: CLUSTER_TYPE.PROJECT,
+    },
     applications: {
       type: Object,
       required: false,
@@ -59,6 +64,9 @@ export default {
     prometheusLogo,
   }),
   computed: {
+    isProjectCluster() {
+      return this.type === CLUSTER_TYPE.PROJECT;
+    },
     helmInstalled() {
       return (
         this.applications.helm.status === APPLICATION_STATUS.INSTALLED ||
@@ -281,6 +289,7 @@ export default {
         </div>
       </application-row>
       <application-row
+        v-if="isProjectCluster"
         id="prometheus"
         :logo-url="prometheusLogo"
         :title="applications.prometheus.title"
@@ -299,6 +308,7 @@ export default {
         </div>
       </application-row>
       <application-row
+        v-if="isProjectCluster"
         id="runner"
         :logo-url="gitlabLogo"
         :title="applications.runner.title"
@@ -317,6 +327,7 @@ export default {
         </div>
       </application-row>
       <application-row
+        v-if="isProjectCluster"
         id="jupyter"
         :logo-url="jupyterhubLogo"
         :title="applications.jupyter.title"
diff --git a/app/assets/javascripts/clusters/constants.js b/app/assets/javascripts/clusters/constants.js
index d707420c845..15cf4a56138 100644
--- a/app/assets/javascripts/clusters/constants.js
+++ b/app/assets/javascripts/clusters/constants.js
@@ -1,3 +1,10 @@
+// These need to match the enum found in app/models/clusters/cluster.rb
+export const CLUSTER_TYPE = {
+  INSTANCE: 'instance_type',
+  GROUP: 'group_type',
+  PROJECT: 'project_type',
+};
+
 // These need to match what is returned from the server
 export const APPLICATION_STATUS = {
   NOT_INSTALLABLE: 'not_installable',
diff --git a/app/assets/javascripts/pages/groups/clusters/destroy/index.js b/app/assets/javascripts/pages/groups/clusters/destroy/index.js
new file mode 100644
index 00000000000..8001d2dd1da
--- /dev/null
+++ b/app/assets/javascripts/pages/groups/clusters/destroy/index.js
@@ -0,0 +1,5 @@
+import ClustersBundle from '~/clusters/clusters_bundle';
+
+document.addEventListener('DOMContentLoaded', () => {
+  new ClustersBundle(); // eslint-disable-line no-new
+});
diff --git a/app/assets/javascripts/pages/groups/clusters/index/index.js b/app/assets/javascripts/pages/groups/clusters/index/index.js
new file mode 100644
index 00000000000..845a5f7042c
--- /dev/null
+++ b/app/assets/javascripts/pages/groups/clusters/index/index.js
@@ -0,0 +1,5 @@
+import initDismissableCallout from '~/dismissable_callout';
+
+document.addEventListener('DOMContentLoaded', () => {
+  initDismissableCallout('.gcp-signup-offer');
+});
diff --git a/app/assets/javascripts/pages/groups/clusters/show/index.js b/app/assets/javascripts/pages/groups/clusters/show/index.js
new file mode 100644
index 00000000000..8001d2dd1da
--- /dev/null
+++ b/app/assets/javascripts/pages/groups/clusters/show/index.js
@@ -0,0 +1,5 @@
+import ClustersBundle from '~/clusters/clusters_bundle';
+
+document.addEventListener('DOMContentLoaded', () => {
+  new ClustersBundle(); // eslint-disable-line no-new
+});
diff --git a/app/assets/javascripts/pages/groups/clusters/update/index.js b/app/assets/javascripts/pages/groups/clusters/update/index.js
new file mode 100644
index 00000000000..8001d2dd1da
--- /dev/null
+++ b/app/assets/javascripts/pages/groups/clusters/update/index.js
@@ -0,0 +1,5 @@
+import ClustersBundle from '~/clusters/clusters_bundle';
+
+document.addEventListener('DOMContentLoaded', () => {
+  new ClustersBundle(); // eslint-disable-line no-new
+});
diff --git a/app/assets/javascripts/pages/groups/index.js b/app/assets/javascripts/pages/groups/index.js
new file mode 100644
index 00000000000..bf80d8b8193
--- /dev/null
+++ b/app/assets/javascripts/pages/groups/index.js
@@ -0,0 +1,16 @@
+import initDismissableCallout from '~/dismissable_callout';
+import initGkeDropdowns from '~/projects/gke_cluster_dropdowns';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const { page } = document.body.dataset;
+  const newClusterViews = [
+    'groups:clusters:new',
+    'groups:clusters:create_gcp',
+    'groups:clusters:create_user',
+  ];
+
+  if (newClusterViews.indexOf(page) > -1) {
+    initDismissableCallout('.gcp-signup-offer');
+    initGkeDropdowns();
+  }
+});
diff --git a/app/assets/javascripts/pages/projects/clusters/index/index.js b/app/assets/javascripts/pages/projects/clusters/index/index.js
index e4b8baede58..845a5f7042c 100644
--- a/app/assets/javascripts/pages/projects/clusters/index/index.js
+++ b/app/assets/javascripts/pages/projects/clusters/index/index.js
@@ -1,5 +1,5 @@
-import ClustersIndex from '~/clusters/clusters_index';
+import initDismissableCallout from '~/dismissable_callout';
 
 document.addEventListener('DOMContentLoaded', () => {
-  new ClustersIndex(); // eslint-disable-line no-new
+  initDismissableCallout('.gcp-signup-offer');
 });