175 lines
4.4 KiB
Vue
175 lines
4.4 KiB
Vue
<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>
|