diff options
author | Jacques Erasmus <jerasmus@gitlab.com> | 2019-09-04 17:03:05 +0000 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2019-09-04 17:03:05 +0000 |
commit | 05b2de630463d5e724197e5554bc7c022fcdafaf (patch) | |
tree | 44a7a9fd7088ed649f0a30058925751478499215 /app/assets | |
parent | ec5808a645fde49059eb97f9db82e0e1fedbd1a6 (diff) | |
download | gitlab-ce-05b2de630463d5e724197e5554bc7c022fcdafaf.tar.gz |
Add ability see deployments using a group cluster
Added the ability to see project deployments using a group cluster
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/clusters/clusters_bundle.js | 49 | ||||
-rw-r--r-- | app/assets/javascripts/clusters/stores/clusters_store.js | 29 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/clusters.scss | 9 |
3 files changed, 84 insertions, 3 deletions
diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js index 5f5c8044b49..1f213d5aaf2 100644 --- a/app/assets/javascripts/clusters/clusters_bundle.js +++ b/app/assets/javascripts/clusters/clusters_bundle.js @@ -14,6 +14,8 @@ import ClustersStore from './stores/clusters_store'; import Applications from './components/applications.vue'; import setupToggleButtons from '../toggle_buttons'; +const Environments = () => import('ee_component/clusters/components/environments.vue'); + Vue.use(GlToast); /** @@ -44,6 +46,9 @@ export default class Clusters { helpPath, ingressHelpPath, ingressDnsHelpPath, + environmentsHelpPath, + clustersHelpPath, + deployBoardsHelpPath, clusterId, } = document.querySelector('.js-edit-cluster-form').dataset; @@ -52,7 +57,14 @@ export default class Clusters { this.clusterBannerDismissedKey = `cluster_${this.clusterId}_banner_dismissed`; this.store = new ClustersStore(); - this.store.setHelpPaths(helpPath, ingressHelpPath, ingressDnsHelpPath); + this.store.setHelpPaths( + helpPath, + ingressHelpPath, + ingressDnsHelpPath, + environmentsHelpPath, + clustersHelpPath, + deployBoardsHelpPath, + ); this.store.setManagePrometheusPath(managePrometheusPath); this.store.updateStatus(clusterStatus); this.store.updateStatusReason(clusterStatusReason); @@ -95,11 +107,12 @@ export default class Clusters { setupToggleButtons(toggleButtonsContainer); } this.initApplications(clusterType); + this.initEnvironments(); this.updateContainer(null, this.store.state.status, this.store.state.statusReason); this.addListeners(); - if (statusPath) { + if (statusPath && !this.environments) { this.initPolling(); } } @@ -131,6 +144,34 @@ export default class Clusters { }); } + initEnvironments() { + const { store } = this; + const el = document.querySelector('#js-cluster-environments'); + + if (!el) { + return; + } + + this.environments = new Vue({ + el, + data() { + return { + state: store.state, + }; + }, + render(createElement) { + return createElement(Environments, { + props: { + environments: this.state.environments, + environmentsHelpPath: this.state.environmentsHelpPath, + clustersHelpPath: this.state.clustersHelpPath, + deployBoardsHelpPath: this.state.deployBoardsHelpPath, + }, + }); + }, + }); + } + static initDismissableCallout() { const callout = document.querySelector('.js-cluster-security-warning'); PersistentUserCallout.factory(callout); @@ -390,6 +431,10 @@ export default class Clusters { this.poll.stop(); } + if (this.environments) { + this.environments.$destroy(); + } + this.applications.$destroy(); } } diff --git a/app/assets/javascripts/clusters/stores/clusters_store.js b/app/assets/javascripts/clusters/stores/clusters_store.js index 772f16cab4e..83533c88f69 100644 --- a/app/assets/javascripts/clusters/stores/clusters_store.js +++ b/app/assets/javascripts/clusters/stores/clusters_store.js @@ -32,6 +32,9 @@ export default class ClusterStore { this.state = { helpPath: null, ingressHelpPath: null, + environmentsHelpPath: null, + clustersHelpPath: null, + deployBoardsHelpPath: null, status: null, rbac: false, statusReason: null, @@ -80,13 +83,24 @@ export default class ClusterStore { updateFailed: false, }, }, + environments: [], }; } - setHelpPaths(helpPath, ingressHelpPath, ingressDnsHelpPath) { + setHelpPaths( + helpPath, + ingressHelpPath, + ingressDnsHelpPath, + environmentsHelpPath, + clustersHelpPath, + deployBoardsHelpPath, + ) { this.state.helpPath = helpPath; this.state.ingressHelpPath = ingressHelpPath; this.state.ingressDnsHelpPath = ingressDnsHelpPath; + this.state.environmentsHelpPath = environmentsHelpPath; + this.state.clustersHelpPath = clustersHelpPath; + this.state.deployBoardsHelpPath = deployBoardsHelpPath; } setManagePrometheusPath(managePrometheusPath) { @@ -191,4 +205,17 @@ export default class ClusterStore { } }); } + + updateEnvironments(environments = []) { + this.state.environments = environments.map(environment => ({ + name: environment.name, + project: environment.project, + environmentPath: environment.environment_path, + lastDeployment: environment.last_deployment, + rolloutStatus: { + instances: environment.rollout_status ? environment.rollout_status.instances : [], + }, + updatedAt: environment.updatedAt, + })); + } } diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss index 255383d89c8..88d6b0d3746 100644 --- a/app/assets/stylesheets/pages/clusters.scss +++ b/app/assets/stylesheets/pages/clusters.scss @@ -154,3 +154,12 @@ } } } + +.cluster-deployments-warning { + color: $orange-600; +} + +.badge.pods-badge { + color: $black; + font-weight: $gl-font-weight-bold; +} |