summaryrefslogtreecommitdiff
path: root/app/assets
diff options
context:
space:
mode:
authorJacques Erasmus <jerasmus@gitlab.com>2019-09-04 17:03:05 +0000
committerMike Greiling <mike@pixelcog.com>2019-09-04 17:03:05 +0000
commit05b2de630463d5e724197e5554bc7c022fcdafaf (patch)
tree44a7a9fd7088ed649f0a30058925751478499215 /app/assets
parentec5808a645fde49059eb97f9db82e0e1fedbd1a6 (diff)
downloadgitlab-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.js49
-rw-r--r--app/assets/javascripts/clusters/stores/clusters_store.js29
-rw-r--r--app/assets/stylesheets/pages/clusters.scss9
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;
+}