diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js index 7f07e592f84..4f47f1b6550 100644 --- a/app/assets/javascripts/clusters/clusters_bundle.js +++ b/app/assets/javascripts/clusters/clusters_bundle.js @@ -7,15 +7,7 @@ import Flash from '../flash'; import Poll from '../lib/utils/poll'; import initSettingsPanels from '../settings_panels'; import eventHub from './event_hub'; -import { - APPLICATION_STATUS, - REQUEST_SUBMITTED, - REQUEST_FAILURE, - UPGRADE_REQUESTED, - UPGRADE_REQUEST_FAILURE, - INGRESS, - INGRESS_DOMAIN_SUFFIX, -} from './constants'; +import { APPLICATION_STATUS, INGRESS, INGRESS_DOMAIN_SUFFIX } from './constants'; import ClustersService from './services/clusters_service'; import ClustersStore from './stores/clusters_store'; import Applications from './components/applications.vue'; @@ -137,7 +129,7 @@ export default class Clusters { if (this.showTokenButton) this.showTokenButton.addEventListener('click', this.showToken); eventHub.$on('installApplication', this.installApplication); eventHub.$on('upgradeApplication', data => this.upgradeApplication(data)); - eventHub.$on('upgradeFailed', appId => this.upgradeFailed(appId)); + eventHub.$on('dismissUpgradeSuccess', appId => this.dismissUpgradeSuccess(appId)); eventHub.$on('saveKnativeDomain', data => this.saveKnativeDomain(data)); eventHub.$on('setKnativeHostname', data => this.setKnativeHostname(data)); } @@ -146,7 +138,7 @@ export default class Clusters { if (this.showTokenButton) this.showTokenButton.removeEventListener('click', this.showToken); eventHub.$off('installApplication', this.installApplication); eventHub.$off('upgradeApplication', this.upgradeApplication); - eventHub.$off('upgradeFailed', this.upgradeFailed); + eventHub.$off('dismissUpgradeSuccess', this.dismissUpgradeSuccess); eventHub.$off('saveKnativeDomain'); eventHub.$off('setKnativeHostname'); } @@ -259,12 +251,13 @@ export default class Clusters { installApplication(data) { const appId = data.id; - this.store.updateAppProperty(appId, 'requestStatus', REQUEST_SUBMITTED); this.store.updateAppProperty(appId, 'requestReason', null); this.store.updateAppProperty(appId, 'statusReason', null); + this.store.installApplication(appId); + return this.service.installApplication(appId, data.params).catch(() => { - this.store.updateAppProperty(appId, 'requestStatus', REQUEST_FAILURE); + this.store.notifyInstallFailure(appId); this.store.updateAppProperty( appId, 'requestReason', @@ -275,13 +268,15 @@ export default class Clusters { upgradeApplication(data) { const appId = data.id; - this.store.updateAppProperty(appId, 'requestStatus', UPGRADE_REQUESTED); - this.store.updateAppProperty(appId, 'status', APPLICATION_STATUS.UPDATING); - this.service.installApplication(appId, data.params).catch(() => this.upgradeFailed(appId)); + + this.store.updateApplication(appId); + this.service.installApplication(appId, data.params).catch(() => { + this.store.notifyUpdateFailure(appId); + }); } - upgradeFailed(appId) { - this.store.updateAppProperty(appId, 'requestStatus', UPGRADE_REQUEST_FAILURE); + dismissUpgradeSuccess(appId) { + this.store.acknowledgeSuccessfulUpdate(appId); } toggleIngressDomainHelpText(ingressPreviousState, ingressNewState) { diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue index 17fe816e62b..a351916942e 100644 --- a/app/assets/javascripts/clusters/components/application_row.vue +++ b/app/assets/javascripts/clusters/components/application_row.vue @@ -8,12 +8,7 @@ import identicon from '../../vue_shared/components/identicon.vue'; import loadingButton from '../../vue_shared/components/loading_button.vue'; import UninstallApplicationButton from './uninstall_application_button.vue'; -import { - APPLICATION_STATUS, - REQUEST_SUBMITTED, - REQUEST_FAILURE, - UPGRADE_REQUESTED, -} from '../constants'; +import { APPLICATION_STATUS } from '../constants'; export default { components: { @@ -63,10 +58,6 @@ export default { type: String, required: false, }, - requestStatus: { - type: String, - required: false, - }, requestReason: { type: String, required: false, @@ -76,6 +67,11 @@ export default { required: false, default: false, }, + installFailed: { + type: Boolean, + required: false, + default: false, + }, version: { type: String, required: false, @@ -88,6 +84,21 @@ export default { type: Boolean, required: false, }, + updateSuccessful: { + type: Boolean, + required: false, + default: false, + }, + updateFailed: { + type: Boolean, + required: false, + default: false, + }, + updateAcknowledged: { + type: Boolean, + required: false, + default: true, + }, installApplicationRequestParams: { type: Object, required: false, @@ -102,21 +113,12 @@ export default { return Object.values(APPLICATION_STATUS).includes(this.status); }, isInstalling() { - return ( - this.status === APPLICATION_STATUS.SCHEDULED || - this.status === APPLICATION_STATUS.INSTALLING || - (this.requestStatus === REQUEST_SUBMITTED && !this.statusReason && !this.installed) - ); + return this.status === APPLICATION_STATUS.INSTALLING; }, canInstall() { - if (this.isInstalling) { - return false; - } - return ( this.status === APPLICATION_STATUS.NOT_INSTALLABLE || this.status === APPLICATION_STATUS.INSTALLABLE || - this.status === APPLICATION_STATUS.ERROR || this.isUnknownStatus ); }, @@ -137,7 +139,7 @@ export default { return !this.installed || !this.uninstallable; }, installButtonLoading() { - return !this.status || this.status === APPLICATION_STATUS.SCHEDULED || this.isInstalling; + return !this.status || this.isInstalling; }, installButtonDisabled() { // Avoid the potential for the real-time data to say APPLICATION_STATUS.INSTALLABLE but @@ -168,19 +170,13 @@ export default { manageButtonLabel() { return s__('ClusterIntegration|Manage'); }, - hasError() { - return ( - !this.isInstalling && - (this.status === APPLICATION_STATUS.ERROR || this.requestStatus === REQUEST_FAILURE) - ); - }, generalErrorDescription() { return sprintf(s__('ClusterIntegration|Something went wrong while installing %{title}'), { title: this.title, }); }, versionLabel() { - if (this.upgradeFailed) { + if (this.updateFailed) { return s__('ClusterIntegration|Upgrade failed'); } else if (this.isUpgrading) { return s__('ClusterIntegration|Upgrading'); @@ -188,19 +184,6 @@ export default { return s__('ClusterIntegration|Upgraded'); }, - upgradeRequested() { - return this.requestStatus === UPGRADE_REQUESTED; - }, - upgradeSuccessful() { - return this.status === APPLICATION_STATUS.UPDATED; - }, - upgradeFailed() { - if (this.isUpgrading) { - return false; - } - - return this.status === APPLICATION_STATUS.UPDATE_ERRORED; - }, upgradeFailureDescription() { return s__('ClusterIntegration|Update failed. Please check the logs and try again.'); }, @@ -211,11 +194,11 @@ export default { }, upgradeButtonLabel() { let label; - if (this.upgradeAvailable && !this.upgradeFailed && !this.isUpgrading) { + if (this.upgradeAvailable && !this.updateFailed && !this.isUpgrading) { label = s__('ClusterIntegration|Upgrade'); } else if (this.isUpgrading) { label = s__('ClusterIntegration|Updating'); - } else if (this.upgradeFailed) { + } else if (this.updateFailed) { label = s__('ClusterIntegration|Retry update'); } @@ -223,25 +206,18 @@ export default { }, isUpgrading() { // Since upgrading is handled asynchronously on the backend we need this check to prevent any delay on the frontend - return ( - this.status === APPLICATION_STATUS.UPDATING || - (this.upgradeRequested && !this.upgradeSuccessful) - ); + return this.status === APPLICATION_STATUS.UPDATING; }, shouldShowUpgradeDetails() { // This method only returns true when; // Upgrade was successful OR Upgrade failed // AND new upgrade is unavailable AND version information is present. - return ( - (this.upgradeSuccessful || this.upgradeFailed) && !this.upgradeAvailable && this.version - ); + return (this.updateSuccessful || this.updateFailed) && !this.upgradeAvailable && this.version; }, }, watch: { - status() { - if (this.status === APPLICATION_STATUS.UPDATE_ERRORED) { - eventHub.$emit('upgradeFailed', this.id); - } else if (this.upgradeRequested && this.upgradeSuccessful) { + updateSuccessful() { + if (this.updateSuccessful) { this.$toast.show(this.upgradeSuccessDescription); } }, @@ -296,7 +272,7 @@ export default {

@@ -317,10 +293,10 @@ export default { class="form-text text-muted label p-0 js-cluster-application-upgrade-details" > {{ versionLabel }} - to + to

{{ upgradeFailureDescription }}
- {{ - manageButtonLabel - }} + + {{ manageButtonLabel }} +
{{ s__(`ClusterIntegration|Choose which applications to install on your Kubernetes cluster. - Helm Tiller is required to install any of the following applications.`) + Helm Tiller is required to install any of the following applications.`) }} - {{ __('More information') }} + {{ __('More information') }}

@@ -239,15 +239,16 @@ export default { :request-status="applications.helm.requestStatus" :request-reason="applications.helm.requestReason" :installed="applications.helm.installed" + :install-failed="applications.helm.installFailed" class="rounded-top" title-link="https://docs.helm.sh/" >
{{ s__(`ClusterIntegration|Helm streamlines installing - and managing Kubernetes applications. - Tiller runs inside of your Kubernetes Cluster, - and manages releases of your charts.`) + and managing Kubernetes applications. + Tiller runs inside of your Kubernetes Cluster, + and manages releases of your charts.`) }}
@@ -255,7 +256,7 @@ export default {
{{ s__(`ClusterIntegration|You must first install Helm Tiller before - installing the applications below`) + installing the applications below`) }}
@@ -274,16 +276,14 @@ export default {

{{ s__(`ClusterIntegration|Ingress gives you a way to route - requests to services based on the request host or path, - centralizing a number of services into a single entrypoint.`) + requests to services based on the request host or path, + centralizing a number of services into a single entrypoint.`) }}