<script> import { s__ } from '../../locale'; import eventHub from '../event_hub'; import loadingButton from '../../vue_shared/components/loading_button.vue'; import { APPLICATION_NOT_INSTALLABLE, APPLICATION_SCHEDULED, APPLICATION_INSTALLABLE, APPLICATION_INSTALLING, APPLICATION_INSTALLED, APPLICATION_ERROR, REQUEST_LOADING, REQUEST_SUCCESS, REQUEST_FAILURE, } from '../constants'; export default { props: { id: { type: String, required: true, }, title: { type: String, required: true, }, titleLink: { type: String, required: false, }, description: { type: String, required: true, }, status: { type: String, required: false, }, statusReason: { type: String, required: false, }, requestStatus: { type: String, required: false, }, requestReason: { type: String, required: false, }, }, components: { loadingButton, }, computed: { rowJsClass() { return `js-cluster-application-row-${this.id}`; }, titleElementType() { return this.titleLink ? 'a' : 'span'; }, installButtonLoading() { return !this.status || this.status === APPLICATION_SCHEDULED || this.status === APPLICATION_INSTALLING || this.requestStatus === REQUEST_LOADING; }, installButtonDisabled() { // Avoid the potential for the real-time data to say APPLICATION_INSTALLABLE but // we already made a request to install and are just waiting for the real-time // to sync up. return this.status !== APPLICATION_INSTALLABLE || this.requestStatus === REQUEST_LOADING || this.requestStatus === REQUEST_SUCCESS; }, installButtonLabel() { let label; if ( this.status === APPLICATION_NOT_INSTALLABLE || this.status === APPLICATION_INSTALLABLE || this.status === APPLICATION_ERROR ) { label = s__('ClusterIntegration|Install'); } else if (this.status === APPLICATION_SCHEDULED || this.status === APPLICATION_INSTALLING) { label = s__('ClusterIntegration|Installing'); } else if (this.status === APPLICATION_INSTALLED) { label = s__('ClusterIntegration|Installed'); } return label; }, hasError() { return this.status === APPLICATION_ERROR || this.requestStatus === REQUEST_FAILURE; }, }, methods: { installClicked() { eventHub.$emit('installApplication', this.id); }, }, }; </script> <template> <div class="gl-responsive-table-row gl-responsive-table-row-col-span" :class="rowJsClass" > <div class="gl-responsive-table-row-layout" role="row" > <component :is="titleElementType" :href="titleLink" target="blank" rel="noopener noreferrer" role="gridcell" class="table-section section-15 section-align-top js-cluster-application-title" > {{ title }} </component> <div class="table-section section-wrap" role="gridcell" > <div v-html="description"></div> </div> <div class="table-section table-button-footer section-15 section-align-top" role="gridcell" > <div class="btn-group table-action-buttons"> <loading-button class="js-cluster-application-install-button" :loading="installButtonLoading" :disabled="installButtonDisabled" :label="installButtonLabel" @click="installClicked" /> </div> </div> </div> <div v-if="hasError" class="gl-responsive-table-row-layout" role="row" > <div class="alert alert-danger alert-block append-bottom-0 table-section section-100" role="gridcell" > <div> <p class="js-cluster-application-general-error-message"> Something went wrong while installing {{ title }} </p> <ul v-if="statusReason || requestReason"> <li v-if="statusReason" class="js-cluster-application-status-error-message" > {{ statusReason }} </li> <li v-if="requestReason" class="js-cluster-application-request-error-message" > {{ requestReason }} </li> </ul> </div> </div> </div> </div> </template>