diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-05-26 21:08:20 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-05-26 21:08:20 +0300 |
commit | 6ee98e127334fd235f251c4a4a76a396f301ee77 (patch) | |
tree | 7c66eb437214b600ee7abc7a73d10160283c3030 /app/assets/javascripts/clusters/components | |
parent | c9d79ef3b5b67792e331a4cc8e6325f3b4a04760 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/clusters/components')
-rw-r--r-- | app/assets/javascripts/clusters/components/application_row.vue | 63 | ||||
-rw-r--r-- | app/assets/javascripts/clusters/components/update_application_confirmation_modal.vue | 65 |
2 files changed, 117 insertions, 11 deletions
diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue index dcc0fa501a3..a4ca2a6c857 100644 --- a/app/assets/javascripts/clusters/components/application_row.vue +++ b/app/assets/javascripts/clusters/components/application_row.vue @@ -8,8 +8,9 @@ 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 UninstallApplicationConfirmationModal from './uninstall_application_confirmation_modal.vue'; +import UpdateApplicationConfirmationModal from './update_application_confirmation_modal.vue'; -import { APPLICATION_STATUS } from '../constants'; +import { APPLICATION_STATUS, ELASTIC_STACK } from '../constants'; export default { components: { @@ -18,6 +19,7 @@ export default { GlLink, UninstallApplicationButton, UninstallApplicationConfirmationModal, + UpdateApplicationConfirmationModal, }, directives: { GlModalDirective, @@ -233,6 +235,17 @@ export default { return label; }, + updatingNeedsConfirmation() { + if (this.version) { + const majorVersion = parseInt(this.version.split('.')[0], 10); + + if (!Number.isNaN(majorVersion)) { + return this.id === ELASTIC_STACK && majorVersion < 3; + } + } + + return false; + }, isUpdating() { // 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; @@ -248,6 +261,12 @@ export default { title: this.title, }); }, + updateModalId() { + return `update-${this.id}`; + }, + uninstallModalId() { + return `uninstall-${this.id}`; + }, }, watch: { updateSuccessful(updateSuccessful) { @@ -268,7 +287,7 @@ export default { params: this.installApplicationRequestParams, }); }, - updateClicked() { + updateConfirmed() { eventHub.$emit('updateApplication', { id: this.id, params: this.installApplicationRequestParams, @@ -356,14 +375,36 @@ export default { > {{ updateFailureDescription }} </div> - <loading-button - v-if="updateAvailable || updateFailed || isUpdating" - class="btn btn-primary js-cluster-application-update-button mt-2" - :loading="isUpdating" - :disabled="isUpdating" - :label="updateButtonLabel" - @click="updateClicked" - /> + <template v-if="updateAvailable || updateFailed || isUpdating"> + <template v-if="updatingNeedsConfirmation"> + <loading-button + v-gl-modal-directive="updateModalId" + class="btn btn-primary js-cluster-application-update-button mt-2" + :loading="isUpdating" + :disabled="isUpdating" + :label="updateButtonLabel" + data-qa-selector="update_button_with_confirmation" + :data-qa-application="id" + /> + + <update-application-confirmation-modal + :application="id" + :application-title="title" + @confirm="updateConfirmed()" + /> + </template> + + <loading-button + v-else + class="btn btn-primary js-cluster-application-update-button mt-2" + :loading="isUpdating" + :disabled="isUpdating" + :label="updateButtonLabel" + data-qa-selector="update_button" + :data-qa-application="id" + @click="updateConfirmed" + /> + </template> </div> </div> <div @@ -389,7 +430,7 @@ export default { /> <uninstall-application-button v-if="displayUninstallButton" - v-gl-modal-directive="'uninstall-' + id" + v-gl-modal-directive="uninstallModalId" :status="status" data-qa-selector="uninstall_button" :data-qa-application="id" diff --git a/app/assets/javascripts/clusters/components/update_application_confirmation_modal.vue b/app/assets/javascripts/clusters/components/update_application_confirmation_modal.vue new file mode 100644 index 00000000000..04aa28e9b74 --- /dev/null +++ b/app/assets/javascripts/clusters/components/update_application_confirmation_modal.vue @@ -0,0 +1,65 @@ +<script> +import { GlModal } from '@gitlab/ui'; +import { sprintf, s__ } from '~/locale'; +import { ELASTIC_STACK } from '../constants'; + +const CUSTOM_APP_WARNING_TEXT = { + [ELASTIC_STACK]: s__( + 'ClusterIntegration|Your Elasticsearch cluster will be re-created during this upgrade. Your logs will be re-indexed, and you will lose historical logs from hosts terminated in the last 30 days.', + ), +}; + +export default { + components: { + GlModal, + }, + props: { + application: { + type: String, + required: true, + }, + applicationTitle: { + type: String, + required: true, + }, + }, + computed: { + title() { + return sprintf(s__('ClusterIntegration|Update %{appTitle}'), { + appTitle: this.applicationTitle, + }); + }, + warningText() { + return sprintf( + s__('ClusterIntegration|You are about to update %{appTitle} on your cluster.'), + { + appTitle: this.applicationTitle, + }, + ); + }, + customAppWarningText() { + return CUSTOM_APP_WARNING_TEXT[this.application]; + }, + modalId() { + return `update-${this.application}`; + }, + }, + methods: { + confirmUpdate() { + this.$emit('confirm'); + }, + }, +}; +</script> +<template> + <gl-modal + ok-variant="danger" + cancel-variant="light" + :ok-title="title" + :modal-id="modalId" + :title="title" + @ok="confirmUpdate()" + > + {{ warningText }} <span v-html="customAppWarningText"></span> + </gl-modal> +</template> |