Add missing state on the application row component
This fixes the application row component weird state when an `updating` status is fetched, this causes apps to show as uninstalled even though they are installed in the cluster.
This commit is contained in:
Jose Vargas
parent
d87e88a616
commit
d4763515c1
|
|
@ -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;
|
||||
},
|
||||
methods: {
|
||||
installClicked() {
|
||||
eventHub.$emit('installApplication', {
|
||||
id: this.id,
|
||||
params: this.installApplicationRequestParams,
|
||||
});
|
||||
},
|
||||
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,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ export const APPLICATION_STATUS = {
|
|||
INSTALLING: 'installing',
|
||||
INSTALLED: 'installed',
|
||||
UPDATED: 'updated',
|
||||
UPDATING: 'updating',
|
||||
ERROR: 'errored',
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -112,6 +112,17 @@ describe('Application Row', () => {
|
|||
expect(vm.installButtonDisabled).toEqual(true);
|
||||
});
|
||||
|
||||
it('has disabled "Installed" when APPLICATION_STATUS.UPDATING', () => {
|
||||
vm = mountComponent(ApplicationRow, {
|
||||
...DEFAULT_APPLICATION_STATE,
|
||||
status: APPLICATION_STATUS.UPDATING,
|
||||
});
|
||||
|
||||
expect(vm.installButtonLabel).toEqual('Installed');
|
||||
expect(vm.installButtonLoading).toEqual(false);
|
||||
expect(vm.installButtonDisabled).toEqual(true);
|
||||
});
|
||||
|
||||
it('has enabled "Install" when APPLICATION_STATUS.ERROR', () => {
|
||||
vm = mountComponent(ApplicationRow, {
|
||||
...DEFAULT_APPLICATION_STATE,
|
||||
|
|
@ -215,7 +226,9 @@ describe('Application Row', () => {
|
|||
status: null,
|
||||
requestStatus: null,
|
||||
});
|
||||
const generalErrorMessage = vm.$el.querySelector('.js-cluster-application-general-error-message');
|
||||
const generalErrorMessage = vm.$el.querySelector(
|
||||
'.js-cluster-application-general-error-message',
|
||||
);
|
||||
|
||||
expect(generalErrorMessage).toBeNull();
|
||||
});
|
||||
|
|
@ -227,10 +240,16 @@ describe('Application Row', () => {
|
|||
status: APPLICATION_STATUS.ERROR,
|
||||
statusReason,
|
||||
});
|
||||
const generalErrorMessage = vm.$el.querySelector('.js-cluster-application-general-error-message');
|
||||
const statusErrorMessage = vm.$el.querySelector('.js-cluster-application-status-error-message');
|
||||
const generalErrorMessage = vm.$el.querySelector(
|
||||
'.js-cluster-application-general-error-message',
|
||||
);
|
||||
const statusErrorMessage = vm.$el.querySelector(
|
||||
'.js-cluster-application-status-error-message',
|
||||
);
|
||||
|
||||
expect(generalErrorMessage.textContent.trim()).toEqual(`Something went wrong while installing ${DEFAULT_APPLICATION_STATE.title}`);
|
||||
expect(generalErrorMessage.textContent.trim()).toEqual(
|
||||
`Something went wrong while installing ${DEFAULT_APPLICATION_STATE.title}`,
|
||||
);
|
||||
expect(statusErrorMessage.textContent.trim()).toEqual(statusReason);
|
||||
});
|
||||
|
||||
|
|
@ -242,10 +261,16 @@ describe('Application Row', () => {
|
|||
requestStatus: REQUEST_FAILURE,
|
||||
requestReason,
|
||||
});
|
||||
const generalErrorMessage = vm.$el.querySelector('.js-cluster-application-general-error-message');
|
||||
const requestErrorMessage = vm.$el.querySelector('.js-cluster-application-request-error-message');
|
||||
const generalErrorMessage = vm.$el.querySelector(
|
||||
'.js-cluster-application-general-error-message',
|
||||
);
|
||||
const requestErrorMessage = vm.$el.querySelector(
|
||||
'.js-cluster-application-request-error-message',
|
||||
);
|
||||
|
||||
expect(generalErrorMessage.textContent.trim()).toEqual(`Something went wrong while installing ${DEFAULT_APPLICATION_STATE.title}`);
|
||||
expect(generalErrorMessage.textContent.trim()).toEqual(
|
||||
`Something went wrong while installing ${DEFAULT_APPLICATION_STATE.title}`,
|
||||
);
|
||||
expect(requestErrorMessage.textContent.trim()).toEqual(requestReason);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue