diff options
Diffstat (limited to 'app/assets/javascripts/clusters/clusters_bundle.js')
| -rw-r--r-- | app/assets/javascripts/clusters/clusters_bundle.js | 221 |
1 files changed, 5 insertions, 216 deletions
diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js index 762b37a8216..c2c035963f4 100644 --- a/app/assets/javascripts/clusters/clusters_bundle.js +++ b/app/assets/javascripts/clusters/clusters_bundle.js @@ -1,18 +1,14 @@ import { GlToast } from '@gitlab/ui'; import Visibility from 'visibilityjs'; import Vue from 'vue'; +import createFlash from '~/flash'; import AccessorUtilities from '~/lib/utils/accessor'; import initProjectSelectDropdown from '~/project_select'; -import initServerlessSurveyBanner from '~/serverless/survey_banner'; -import { deprecatedCreateFlash as Flash } from '../flash'; import Poll from '../lib/utils/poll'; -import { s__, sprintf } from '../locale'; +import { s__ } from '../locale'; import PersistentUserCallout from '../persistent_user_callout'; import initSettingsPanels from '../settings_panels'; -import Applications from './components/applications.vue'; import RemoveClusterConfirmation from './components/remove_cluster_confirmation.vue'; -import { APPLICATION_STATUS, CROSSPLANE, KNATIVE } from './constants'; -import eventHub from './event_hub'; import ClustersService from './services/clusters_service'; import ClustersStore from './stores/clusters_store'; @@ -20,46 +16,20 @@ const Environments = () => import('ee_component/clusters/components/environments Vue.use(GlToast); -/** - * Cluster page has 2 separate parts: - * Toggle button and applications section - * - * - Polling status while creating or scheduled - * - Update status area with the response result - */ - export default class Clusters { constructor() { const { statusPath, - installHelmPath, - installIngressPath, - installCertManagerPath, - installRunnerPath, - installJupyterPath, - installKnativePath, - updateKnativePath, - installElasticStackPath, - installCrossplanePath, - installPrometheusPath, - managePrometheusPath, clusterEnvironmentsPath, hasRbac, providerType, - preInstalledKnative, - clusterType, clusterStatus, clusterStatusReason, helpPath, - helmHelpPath, - ingressHelpPath, - ingressDnsHelpPath, environmentsHelpPath, clustersHelpPath, deployBoardsHelpPath, - cloudRunHelpPath, clusterId, - ciliumHelpPath, } = document.querySelector('.js-edit-cluster-form').dataset; this.clusterId = clusterId; @@ -69,38 +39,19 @@ export default class Clusters { this.store = new ClustersStore(); this.store.setHelpPaths({ helpPath, - helmHelpPath, - ingressHelpPath, - ingressDnsHelpPath, environmentsHelpPath, clustersHelpPath, deployBoardsHelpPath, - cloudRunHelpPath, - ciliumHelpPath, }); - this.store.setManagePrometheusPath(managePrometheusPath); this.store.updateStatus(clusterStatus); this.store.updateStatusReason(clusterStatusReason); this.store.updateProviderType(providerType); - this.store.updatePreInstalledKnative(preInstalledKnative); this.store.updateRbac(hasRbac); this.service = new ClustersService({ endpoint: statusPath, - installHelmEndpoint: installHelmPath, - installIngressEndpoint: installIngressPath, - installCertManagerEndpoint: installCertManagerPath, - installCrossplaneEndpoint: installCrossplanePath, - installRunnerEndpoint: installRunnerPath, - installPrometheusEndpoint: installPrometheusPath, - installJupyterEndpoint: installJupyterPath, - installKnativeEndpoint: installKnativePath, - updateKnativeEndpoint: updateKnativePath, - installElasticStackEndpoint: installElasticStackPath, clusterEnvironmentsEndpoint: clusterEnvironmentsPath, }); - this.installApplication = this.installApplication.bind(this); - this.errorContainer = document.querySelector('.js-cluster-error'); this.successContainer = document.querySelector('.js-cluster-success'); this.creatingContainer = document.querySelector('.js-cluster-creating'); @@ -109,14 +60,12 @@ export default class Clusters { '.js-cluster-authentication-failure', ); this.errorReasonContainer = this.errorContainer.querySelector('.js-error-reason'); - this.successApplicationContainer = document.querySelector('.js-cluster-application-notice'); this.tokenField = document.querySelector('.js-cluster-token'); initProjectSelectDropdown(); Clusters.initDismissableCallout(); initSettingsPanels(); - this.initApplications(clusterType); this.initEnvironments(); if (clusterEnvironmentsPath && this.environments) { @@ -143,38 +92,6 @@ export default class Clusters { this.initRemoveClusterActions(); } - initApplications(type) { - const { store } = this; - const el = document.querySelector('#js-cluster-applications'); - - this.applications = new Vue({ - el, - data() { - return { - state: store.state, - }; - }, - render(createElement) { - return createElement(Applications, { - props: { - type, - applications: this.state.applications, - helpPath: this.state.helpPath, - helmHelpPath: this.state.helmHelpPath, - ingressHelpPath: this.state.ingressHelpPath, - managePrometheusPath: this.state.managePrometheusPath, - ingressDnsHelpPath: this.state.ingressDnsHelpPath, - cloudRunHelpPath: this.state.cloudRunHelpPath, - providerType: this.state.providerType, - preInstalledKnative: this.state.preInstalledKnative, - rbac: this.state.rbac, - ciliumHelpPath: this.state.ciliumHelpPath, - }, - }); - }, - }); - } - initEnvironments() { const { store } = this; const el = document.querySelector('#js-cluster-environments'); @@ -242,30 +159,11 @@ export default class Clusters { } addListeners() { - eventHub.$on('installApplication', this.installApplication); - eventHub.$on('updateApplication', (data) => this.updateApplication(data)); - eventHub.$on('saveKnativeDomain', (data) => this.saveKnativeDomain(data)); - eventHub.$on('setKnativeDomain', (data) => this.setKnativeDomain(data)); - eventHub.$on('uninstallApplication', (data) => this.uninstallApplication(data)); - eventHub.$on('setCrossplaneProviderStack', (data) => this.setCrossplaneProviderStack(data)); // Add event listener to all the banner close buttons this.addBannerCloseHandler(this.unreachableContainer, 'unreachable'); this.addBannerCloseHandler(this.authenticationFailureContainer, 'authentication_failure'); } - removeListeners() { - eventHub.$off('installApplication', this.installApplication); - eventHub.$off('updateApplication', this.updateApplication); - // eslint-disable-next-line @gitlab/no-global-event-off - eventHub.$off('saveKnativeDomain'); - // eslint-disable-next-line @gitlab/no-global-event-off - eventHub.$off('setKnativeDomain'); - // eslint-disable-next-line @gitlab/no-global-event-off - eventHub.$off('setCrossplaneProviderStack'); - // eslint-disable-next-line @gitlab/no-global-event-off - eventHub.$off('uninstallApplication'); - } - initPolling(method, successCallback, errorCallback) { this.poll = new Poll({ resource: this.service, @@ -298,21 +196,17 @@ export default class Clusters { } static handleError() { - Flash(s__('ClusterIntegration|Something went wrong on our end.')); + createFlash({ + message: s__('ClusterIntegration|Something went wrong on our end.'), + }); } handleClusterStatusSuccess(data) { const prevStatus = this.store.state.status; - const prevApplicationMap = { ...this.store.state.applications }; this.store.updateStateFromServer(data.data); - this.checkForNewInstalls(prevApplicationMap, this.store.state.applications); this.updateContainer(prevStatus, this.store.state.status, this.store.state.statusReason); - - if (this.store.state.applications[KNATIVE]?.status === APPLICATION_STATUS.INSTALLED) { - initServerlessSurveyBanner(); - } } hideAll() { @@ -323,27 +217,6 @@ export default class Clusters { this.authenticationFailureContainer.classList.add('hidden'); } - checkForNewInstalls(prevApplicationMap, newApplicationMap) { - const appTitles = Object.keys(newApplicationMap) - .filter( - (appId) => - newApplicationMap[appId].status === APPLICATION_STATUS.INSTALLED && - prevApplicationMap[appId].status !== APPLICATION_STATUS.INSTALLED && - prevApplicationMap[appId].status !== null, - ) - .map((appId) => newApplicationMap[appId].title); - - if (appTitles.length > 0) { - const text = sprintf( - s__('ClusterIntegration|%{appList} was successfully installed on your Kubernetes cluster'), - { - appList: appTitles.join(', '), - }, - ); - Flash(text, 'notice', this.successApplicationContainer); - } - } - setBannerDismissedState(status, isDismissed) { if (AccessorUtilities.isLocalStorageAccessSafe()) { window.localStorage.setItem(this.clusterBannerDismissedKey, `${status}_${isDismissed}`); @@ -416,91 +289,9 @@ export default class Clusters { } } - installApplication({ id: appId, params }) { - return Clusters.validateInstallation(appId, params) - .then(() => { - this.store.updateAppProperty(appId, 'requestReason', null); - this.store.updateAppProperty(appId, 'statusReason', null); - this.store.installApplication(appId); - - // eslint-disable-next-line promise/no-nesting - this.service.installApplication(appId, params).catch(() => { - this.store.notifyInstallFailure(appId); - this.store.updateAppProperty( - appId, - 'requestReason', - s__('ClusterIntegration|Request to begin installing failed'), - ); - }); - }) - .catch((error) => this.store.updateAppProperty(appId, 'validationError', error)); - } - - static validateInstallation(appId, params) { - return new Promise((resolve, reject) => { - if (appId === CROSSPLANE && !params.stack) { - reject(s__('ClusterIntegration|Select a stack to install Crossplane.')); - return; - } - - if (appId === KNATIVE && !params.hostname && !params.pages_domain_id) { - reject(s__('ClusterIntegration|You must specify a domain before you can install Knative.')); - return; - } - - resolve(); - }); - } - - uninstallApplication({ id: appId }) { - this.store.updateAppProperty(appId, 'requestReason', null); - this.store.updateAppProperty(appId, 'statusReason', null); - - this.store.uninstallApplication(appId); - - return this.service.uninstallApplication(appId).catch(() => { - this.store.notifyUninstallFailure(appId); - this.store.updateAppProperty( - appId, - 'requestReason', - s__('ClusterIntegration|Request to begin uninstalling failed'), - ); - }); - } - - updateApplication({ id: appId, params }) { - this.store.updateApplication(appId); - this.service.installApplication(appId, params).catch(() => { - this.store.notifyUpdateFailure(appId); - }); - } - - saveKnativeDomain(data) { - const appId = data.id; - this.store.updateApplication(appId); - this.service.updateApplication(appId, data.params).catch(() => { - this.store.notifyUpdateFailure(appId); - }); - } - - setKnativeDomain({ id: appId, domain, domainId }) { - this.store.updateAppProperty(appId, 'isEditingDomain', true); - this.store.updateAppProperty(appId, 'hostname', domain); - this.store.updateAppProperty(appId, 'pagesDomain', domainId ? { id: domainId, domain } : null); - this.store.updateAppProperty(appId, 'validationError', null); - } - - setCrossplaneProviderStack(data) { - const appId = data.id; - this.store.updateAppProperty(appId, 'stack', data.stack.code); - this.store.updateAppProperty(appId, 'validationError', null); - } - destroy() { this.destroyed = true; - this.removeListeners(); - if (this.poll) { this.poll.stop(); } @@ -508,7 +299,5 @@ export default class Clusters { if (this.environments) { this.environments.$destroy(); } - - this.applications.$destroy(); } } |