diff options
Diffstat (limited to 'app/assets/javascripts/clusters')
-rw-r--r-- | app/assets/javascripts/clusters/components/application_row.vue | 293 | ||||
-rw-r--r-- | app/assets/javascripts/clusters/constants.js | 1 |
2 files changed, 152 insertions, 142 deletions
diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue index 0452729d3ff..236bb1394c8 100644 --- a/app/assets/javascripts/clusters/components/application_row.vue +++ b/app/assets/javascripts/clusters/components/application_row.vue @@ -1,153 +1,162 @@ <script> - /* eslint-disable vue/require-default-prop */ - import { s__, sprintf } from '../../locale'; - import eventHub from '../event_hub'; - import identicon from '../../vue_shared/components/identicon.vue'; - import loadingButton from '../../vue_shared/components/loading_button.vue'; - import { - APPLICATION_STATUS, - REQUEST_LOADING, - REQUEST_SUCCESS, - REQUEST_FAILURE, - } from '../constants'; +/* eslint-disable vue/require-default-prop */ +import { s__, sprintf } from '../../locale'; +import eventHub from '../event_hub'; +import identicon from '../../vue_shared/components/identicon.vue'; +import loadingButton from '../../vue_shared/components/loading_button.vue'; +import { + APPLICATION_STATUS, + REQUEST_LOADING, + REQUEST_SUCCESS, + REQUEST_FAILURE, +} from '../constants'; - export default { - components: { - loadingButton, - identicon, +export default { + components: { + loadingButton, + identicon, + }, + props: { + id: { + type: String, + required: true, }, - props: { - id: { - type: String, - required: true, - }, - title: { - type: String, - required: true, - }, - titleLink: { - type: String, - required: false, - }, - manageLink: { - type: String, - required: false, - }, - logoUrl: { - type: String, - required: false, - default: null, - }, - disabled: { - type: Boolean, - required: false, - default: false, - }, - status: { - type: String, - required: false, - }, - statusReason: { - type: String, - required: false, - }, - requestStatus: { - type: String, - required: false, - }, - requestReason: { - type: String, - required: false, - }, - installApplicationRequestParams: { - type: Object, - required: false, - default: () => ({}), - }, + title: { + type: String, + required: true, }, - computed: { - isUnknownStatus() { - return !this.isKnownStatus && this.status !== null; - }, - isKnownStatus() { - return Object.values(APPLICATION_STATUS).includes(this.status); - }, - isInstalled() { - return ( - this.status === APPLICATION_STATUS.INSTALLED || this.status === APPLICATION_STATUS.UPDATED - ); - }, - hasLogo() { - return !!this.logoUrl; - }, - identiconId() { - // generate a deterministic integer id for the identicon background - return this.id.charCodeAt(0); - }, - rowJsClass() { - return `js-cluster-application-row-${this.id}`; - }, - installButtonLoading() { - return !this.status || - this.status === APPLICATION_STATUS.SCHEDULED || - this.status === APPLICATION_STATUS.INSTALLING || - this.requestStatus === REQUEST_LOADING; - }, - installButtonDisabled() { - // Avoid the potential for the real-time data to say APPLICATION_STATUS.INSTALLABLE but - // we already made a request to install and are just waiting for the real-time - // to sync up. - return ((this.status !== APPLICATION_STATUS.INSTALLABLE - && this.status !== APPLICATION_STATUS.ERROR) || + titleLink: { + type: String, + required: false, + }, + manageLink: { + type: String, + required: false, + }, + logoUrl: { + type: String, + required: false, + default: null, + }, + disabled: { + type: Boolean, + required: false, + default: false, + }, + status: { + type: String, + required: false, + }, + statusReason: { + type: String, + required: false, + }, + requestStatus: { + type: String, + required: false, + }, + requestReason: { + type: String, + required: false, + }, + installApplicationRequestParams: { + type: Object, + required: false, + default: () => ({}), + }, + }, + computed: { + isUnknownStatus() { + return !this.isKnownStatus && this.status !== null; + }, + isKnownStatus() { + return Object.values(APPLICATION_STATUS).includes(this.status); + }, + isInstalled() { + return ( + this.status === APPLICATION_STATUS.INSTALLED || + this.status === APPLICATION_STATUS.UPDATED || + this.status === APPLICATION_STATUS.UPDATING + ); + }, + hasLogo() { + return !!this.logoUrl; + }, + identiconId() { + // generate a deterministic integer id for the identicon background + return this.id.charCodeAt(0); + }, + rowJsClass() { + return `js-cluster-application-row-${this.id}`; + }, + installButtonLoading() { + return ( + !this.status || + this.status === APPLICATION_STATUS.SCHEDULED || + this.status === APPLICATION_STATUS.INSTALLING || + this.requestStatus === REQUEST_LOADING + ); + }, + installButtonDisabled() { + // Avoid the potential for the real-time data to say APPLICATION_STATUS.INSTALLABLE but + // we already made a request to install and are just waiting for the real-time + // to sync up. + return ( + ((this.status !== APPLICATION_STATUS.INSTALLABLE && + this.status !== APPLICATION_STATUS.ERROR) || this.requestStatus === REQUEST_LOADING || - this.requestStatus === REQUEST_SUCCESS) && this.isKnownStatus; - }, - installButtonLabel() { - let label; - if ( - this.status === APPLICATION_STATUS.NOT_INSTALLABLE || - this.status === APPLICATION_STATUS.INSTALLABLE || - this.status === APPLICATION_STATUS.ERROR || - this.isUnknownStatus - ) { - label = s__('ClusterIntegration|Install'); - } else if (this.status === APPLICATION_STATUS.SCHEDULED || - this.status === APPLICATION_STATUS.INSTALLING) { - label = s__('ClusterIntegration|Installing'); - } else if (this.status === APPLICATION_STATUS.INSTALLED || - this.status === APPLICATION_STATUS.UPDATED) { - label = s__('ClusterIntegration|Installed'); - } + this.requestStatus === REQUEST_SUCCESS) && + this.isKnownStatus + ); + }, + installButtonLabel() { + let label; + if ( + this.status === APPLICATION_STATUS.NOT_INSTALLABLE || + this.status === APPLICATION_STATUS.INSTALLABLE || + this.status === APPLICATION_STATUS.ERROR || + this.isUnknownStatus + ) { + label = s__('ClusterIntegration|Install'); + } else if ( + this.status === APPLICATION_STATUS.SCHEDULED || + this.status === APPLICATION_STATUS.INSTALLING + ) { + label = s__('ClusterIntegration|Installing'); + } else if ( + this.status === APPLICATION_STATUS.INSTALLED || + this.status === APPLICATION_STATUS.UPDATED || + this.status === APPLICATION_STATUS.UPDATING + ) { + label = s__('ClusterIntegration|Installed'); + } - return label; - }, - showManageButton() { - return this.manageLink && this.status === APPLICATION_STATUS.INSTALLED; - }, - manageButtonLabel() { - return s__('ClusterIntegration|Manage'); - }, - hasError() { - return this.status === APPLICATION_STATUS.ERROR || - this.requestStatus === REQUEST_FAILURE; - }, - generalErrorDescription() { - return sprintf( - s__('ClusterIntegration|Something went wrong while installing %{title}'), { - title: this.title, - }, - ); - }, + return label; + }, + showManageButton() { + return this.manageLink && this.status === APPLICATION_STATUS.INSTALLED; + }, + manageButtonLabel() { + return s__('ClusterIntegration|Manage'); + }, + hasError() { + return this.status === APPLICATION_STATUS.ERROR || this.requestStatus === REQUEST_FAILURE; + }, + generalErrorDescription() { + return sprintf(s__('ClusterIntegration|Something went wrong while installing %{title}'), { + title: this.title, + }); }, - methods: { - installClicked() { - eventHub.$emit('installApplication', { - id: this.id, - params: this.installApplicationRequestParams, - }); - }, + }, + methods: { + installClicked() { + eventHub.$emit('installApplication', { + id: this.id, + params: this.installApplicationRequestParams, + }); }, - }; + }, +}; </script> <template> diff --git a/app/assets/javascripts/clusters/constants.js b/app/assets/javascripts/clusters/constants.js index 72fc9355d82..24a49624583 100644 --- a/app/assets/javascripts/clusters/constants.js +++ b/app/assets/javascripts/clusters/constants.js @@ -6,6 +6,7 @@ export const APPLICATION_STATUS = { INSTALLING: 'installing', INSTALLED: 'installed', UPDATED: 'updated', + UPDATING: 'updating', ERROR: 'errored', }; |