diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-16 15:13:53 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-02-16 15:13:53 +0300 |
commit | abed3501da6ecd7ae31cfe2b8fa7654e91a26fb6 (patch) | |
tree | 65318870e1bff62cd176e7fe5bd26155cc38c08f /app/assets/javascripts/environments | |
parent | 6259da15b5ede93a9f688ddd062860166e7cf21a (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/environments')
10 files changed, 199 insertions, 20 deletions
diff --git a/app/assets/javascripts/environments/components/canary_ingress.vue b/app/assets/javascripts/environments/components/canary_ingress.vue index 02d660a91c1..30f3f9dfc75 100644 --- a/app/assets/javascripts/environments/components/canary_ingress.vue +++ b/app/assets/javascripts/environments/components/canary_ingress.vue @@ -17,6 +17,11 @@ export default { required: true, type: Object, }, + graphql: { + required: false, + type: Boolean, + default: false, + }, }, ingressOptions: Array(100 / 5 + 1) .fill(0) @@ -47,11 +52,17 @@ export default { canaryWeightId() { return uniqueId('canary-weight-'); }, + weight() { + if (this.graphql) { + return this.canaryIngress.canaryWeight; + } + return this.canaryIngress.canary_weight; + }, stableWeight() { - return (100 - this.canaryIngress.canary_weight).toString(); + return (100 - this.weight).toString(); }, canaryWeight() { - return this.canaryIngress.canary_weight.toString(); + return this.weight.toString(); }, }, methods: { diff --git a/app/assets/javascripts/environments/components/canary_update_modal.vue b/app/assets/javascripts/environments/components/canary_update_modal.vue index 8b1121c7158..fd4885a9dbd 100644 --- a/app/assets/javascripts/environments/components/canary_update_modal.vue +++ b/app/assets/javascripts/environments/components/canary_update_modal.vue @@ -71,7 +71,7 @@ export default { mutation: updateCanaryIngress, variables: { input: { - id: this.environment.global_id, + id: this.environment.global_id || this.environment.globalId, weight: this.weight, }, }, diff --git a/app/assets/javascripts/environments/components/deploy_board.vue b/app/assets/javascripts/environments/components/deploy_board.vue index c642a07fd1e..8a379ebdf66 100644 --- a/app/assets/javascripts/environments/components/deploy_board.vue +++ b/app/assets/javascripts/environments/components/deploy_board.vue @@ -1,5 +1,4 @@ <script> -/* eslint-disable @gitlab/vue-require-i18n-strings */ /** * Renders a deploy board. * @@ -17,11 +16,11 @@ import { GlTooltip, GlTooltipDirective, GlSafeHtmlDirective as SafeHtml, + GlSprintf, } from '@gitlab/ui'; import { isEmpty } from 'lodash'; -import { n__ } from '~/locale'; +import { s__, n__ } from '~/locale'; import instanceComponent from '~/vue_shared/components/deployment_instance.vue'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { STATUS_MAP, CANARY_STATUS } from '../constants'; import CanaryIngress from './canary_ingress.vue'; @@ -32,13 +31,13 @@ export default { GlIcon, GlLoadingIcon, GlLink, + GlSprintf, GlTooltip, }, directives: { GlTooltip: GlTooltipDirective, SafeHtml, }, - mixins: [glFeatureFlagsMixin()], props: { deployBoardData: { type: Object, @@ -57,6 +56,11 @@ export default { required: false, default: '', }, + graphql: { + type: Boolean, + required: false, + default: false, + }, }, computed: { canRenderDeployBoard() { @@ -65,8 +69,15 @@ export default { canRenderEmptyState() { return this.isEmpty; }, + canaryIngress() { + if (this.graphql) { + return this.deployBoardData.canaryIngress; + } + + return this.deployBoardData.canary_ingress; + }, canRenderCanaryWeight() { - return !isEmpty(this.deployBoardData.canary_ingress); + return !isEmpty(this.canaryIngress); }, instanceCount() { const { instances } = this.deployBoardData; @@ -90,8 +101,20 @@ export default { deployBoardSvg() { return deployBoardSvg; }, + rollbackUrl() { + if (this.graphql) { + return this.deployBoardData.rollbackUrl; + } + return this.deployBoardData.rollback_url; + }, + abortUrl() { + if (this.graphql) { + return this.deployBoardData.abortUrl; + } + return this.deployBoardData.abort_url; + }, deployBoardActions() { - return this.deployBoardData.rollback_url || this.deployBoardData.abort_url; + return this.rollbackUrl || this.abortUrl; }, statuses() { // Canary is not a pod status but it needs to be in the legend. @@ -106,7 +129,17 @@ export default { changeCanaryWeight(weight) { this.$emit('changeCanaryWeight', weight); }, + podName(instance) { + if (this.graphql) { + return instance.podName; + } + + return instance.pod_name; + }, }, + emptyStateText: s__( + 'DeployBoards|To see deployment progress for your environments, make sure you are deploying to %{codeStart}$KUBE_NAMESPACE%{codeEnd} and annotating with %{codeStart}app.gitlab.com/app=$CI_PROJECT_PATH_SLUG%{codeEnd} and %{codeStart}app.gitlab.com/env=$CI_ENVIRONMENT_SLUG%{codeEnd}.', + ), }; </script> <template> @@ -152,7 +185,7 @@ export default { :key="i" :status="instance.status" :tooltip-text="instance.tooltip" - :pod-name="instance.pod_name" + :pod-name="podName(instance)" :logs-path="logsPath" :stable="instance.stable" /> @@ -163,22 +196,23 @@ export default { <canary-ingress v-if="canRenderCanaryWeight" class="deploy-board-canary-ingress" - :canary-ingress="deployBoardData.canary_ingress" + :canary-ingress="canaryIngress" + :graphql="graphql" @change="changeCanaryWeight" /> <section v-if="deployBoardActions" class="deploy-board-actions"> <gl-link - v-if="deployBoardData.rollback_url" - :href="deployBoardData.rollback_url" + v-if="rollbackUrl" + :href="rollbackUrl" class="btn" data-method="post" rel="nofollow" >{{ __('Rollback') }}</gl-link > <gl-link - v-if="deployBoardData.abort_url" - :href="deployBoardData.abort_url" + v-if="abortUrl" + :href="abortUrl" class="btn btn-danger btn-inverted" data-method="post" rel="nofollow" @@ -196,11 +230,11 @@ export default { __('Kubernetes deployment not found') }}</span> <span> - To see deployment progress for your environments, make sure you are deploying to - <code>$KUBE_NAMESPACE</code> and annotating with - <code>app.gitlab.com/app=$CI_PROJECT_PATH_SLUG</code> - and - <code>app.gitlab.com/env=$CI_ENVIRONMENT_SLUG</code>. + <gl-sprintf :message="$options.emptyStateText"> + <template #code="{ content }"> + <code>{{ content }}</code> + </template> + </gl-sprintf> </span> </section> </div> diff --git a/app/assets/javascripts/environments/components/deploy_board_wrapper.vue b/app/assets/javascripts/environments/components/deploy_board_wrapper.vue new file mode 100644 index 00000000000..d9d77088ad3 --- /dev/null +++ b/app/assets/javascripts/environments/components/deploy_board_wrapper.vue @@ -0,0 +1,86 @@ +<script> +import { GlCollapse, GlButton } from '@gitlab/ui'; +import { __, s__ } from '~/locale'; +import setEnvironmentToChangeCanaryMutation from '../graphql/mutations/set_environment_to_change_canary.mutation.graphql'; +import DeployBoard from './deploy_board.vue'; + +export default { + components: { + DeployBoard, + GlButton, + GlCollapse, + }, + props: { + rolloutStatus: { + required: true, + type: Object, + }, + environment: { + required: true, + type: Object, + }, + }, + data() { + return { visible: false }; + }, + computed: { + icon() { + return this.visible ? 'angle-down' : 'angle-right'; + }, + label() { + return this.visible ? this.$options.i18n.collapse : this.$options.i18n.expand; + }, + isLoading() { + return this.rolloutStatus.status === 'loading'; + }, + isEmpty() { + return this.rolloutStatus.status === 'not_found'; + }, + }, + methods: { + toggleCollapse() { + this.visible = !this.visible; + }, + changeCanaryWeight(weight) { + this.$apollo.mutate({ + mutation: setEnvironmentToChangeCanaryMutation, + variables: { + environment: this.environment, + weight, + }, + }); + }, + }, + i18n: { + collapse: __('Collapse'), + expand: __('Expand'), + pods: s__('DeployBoard|Kubernetes Pods'), + }, +}; +</script> +<template> + <div> + <div> + <gl-button + class="gl-mr-4 gl-min-w-fit-content" + :icon="icon" + :aria-label="label" + size="small" + category="tertiary" + @click="toggleCollapse" + /> + <span>{{ $options.i18n.pods }}</span> + </div> + <gl-collapse :visible="visible"> + <deploy-board + :deploy-board-data="rolloutStatus" + :is-loading="isLoading" + :is-empty="isEmpty" + :environment="environment" + graphql + class="gl-reset-bg!" + @changeCanaryWeight="changeCanaryWeight" + /> + </gl-collapse> + </div> +</template> diff --git a/app/assets/javascripts/environments/components/new_environment_item.vue b/app/assets/javascripts/environments/components/new_environment_item.vue index 48a77c021bf..27a763fb9c4 100644 --- a/app/assets/javascripts/environments/components/new_environment_item.vue +++ b/app/assets/javascripts/environments/components/new_environment_item.vue @@ -20,6 +20,7 @@ import Monitoring from './environment_monitoring.vue'; import Terminal from './environment_terminal_button.vue'; import Delete from './environment_delete.vue'; import Deployment from './deployment.vue'; +import DeployBoardWrapper from './deploy_board_wrapper.vue'; export default { components: { @@ -30,6 +31,7 @@ export default { GlSprintf, Actions, Deployment, + DeployBoardWrapper, ExternalUrl, StopComponent, Rollback, @@ -145,6 +147,9 @@ export default { displayName() { return truncate(this.name, 80); }, + rolloutStatus() { + return this.environment?.rolloutStatus; + }, }, methods: { toggleCollapse() { @@ -159,6 +164,14 @@ export default { 'gl-md-pl-7', 'gl-bg-gray-10', ], + deployBoardClasses: [ + 'gl-border-gray-100', + 'gl-border-t-solid', + 'gl-border-1', + 'gl-py-4', + 'gl-md-pl-7', + 'gl-bg-gray-10', + ], }; </script> <template> @@ -298,6 +311,14 @@ export default { </template> </gl-sprintf> </div> + <div v-if="rolloutStatus" :class="$options.deployBoardClasses"> + <deploy-board-wrapper + :rollout-status="rolloutStatus" + :environment="environment" + :class="{ 'gl-ml-7': inFolder }" + class="gl-pl-4" + /> + </div> </gl-collapse> </div> </template> diff --git a/app/assets/javascripts/environments/components/new_environments_app.vue b/app/assets/javascripts/environments/components/new_environments_app.vue index cb36e226d0e..3699f39b611 100644 --- a/app/assets/javascripts/environments/components/new_environments_app.vue +++ b/app/assets/javascripts/environments/components/new_environments_app.vue @@ -8,16 +8,19 @@ import pageInfoQuery from '../graphql/queries/page_info.query.graphql'; import environmentToDeleteQuery from '../graphql/queries/environment_to_delete.query.graphql'; import environmentToRollbackQuery from '../graphql/queries/environment_to_rollback.query.graphql'; import environmentToStopQuery from '../graphql/queries/environment_to_stop.query.graphql'; +import environmentToChangeCanaryQuery from '../graphql/queries/environment_to_change_canary.query.graphql'; import EnvironmentFolder from './new_environment_folder.vue'; import EnableReviewAppModal from './enable_review_app_modal.vue'; import StopEnvironmentModal from './stop_environment_modal.vue'; import EnvironmentItem from './new_environment_item.vue'; import ConfirmRollbackModal from './confirm_rollback_modal.vue'; import DeleteEnvironmentModal from './delete_environment_modal.vue'; +import CanaryUpdateModal from './canary_update_modal.vue'; export default { components: { DeleteEnvironmentModal, + CanaryUpdateModal, ConfirmRollbackModal, EnvironmentFolder, EnableReviewAppModal, @@ -56,6 +59,12 @@ export default { environmentToStop: { query: environmentToStopQuery, }, + environmentToChangeCanary: { + query: environmentToChangeCanaryQuery, + }, + weight: { + query: environmentToChangeCanaryQuery, + }, }, inject: ['newEnvironmentPath', 'canCreateEnvironment'], i18n: { @@ -80,6 +89,8 @@ export default { environmentToDelete: {}, environmentToRollback: {}, environmentToStop: {}, + environmentToChangeCanary: {}, + weight: 0, }; }, computed: { @@ -186,6 +197,7 @@ export default { <delete-environment-modal :environment="environmentToDelete" graphql /> <stop-environment-modal :environment="environmentToStop" graphql /> <confirm-rollback-modal :environment="environmentToRollback" graphql /> + <canary-update-modal :environment="environmentToChangeCanary" :weight="weight" /> <gl-tabs :action-secondary="addEnvironment" :action-primary="openReviewAppModal" diff --git a/app/assets/javascripts/environments/graphql/mutations/set_environment_to_change_canary.mutation.graphql b/app/assets/javascripts/environments/graphql/mutations/set_environment_to_change_canary.mutation.graphql new file mode 100644 index 00000000000..0f48c1f5c05 --- /dev/null +++ b/app/assets/javascripts/environments/graphql/mutations/set_environment_to_change_canary.mutation.graphql @@ -0,0 +1,3 @@ +mutation SetEnvironmentToChangeCanary($environment: LocalEnvironmentInput, $weight: Int!) { + setEnvironmentToChangeCanary(environment: $environment, weight: $weight) @client +} diff --git a/app/assets/javascripts/environments/graphql/queries/environment_to_change_canary.query.graphql b/app/assets/javascripts/environments/graphql/queries/environment_to_change_canary.query.graphql new file mode 100644 index 00000000000..b582ae55ba1 --- /dev/null +++ b/app/assets/javascripts/environments/graphql/queries/environment_to_change_canary.query.graphql @@ -0,0 +1,4 @@ +query environmentToChangeCanary { + environmentToChangeCanary @client + weight @client +} diff --git a/app/assets/javascripts/environments/graphql/resolvers.js b/app/assets/javascripts/environments/graphql/resolvers.js index 9e0e0fff47f..dc763b77157 100644 --- a/app/assets/javascripts/environments/graphql/resolvers.js +++ b/app/assets/javascripts/environments/graphql/resolvers.js @@ -10,6 +10,7 @@ import pollIntervalQuery from './queries/poll_interval.query.graphql'; import environmentToRollbackQuery from './queries/environment_to_rollback.query.graphql'; import environmentToStopQuery from './queries/environment_to_stop.query.graphql'; import environmentToDeleteQuery from './queries/environment_to_delete.query.graphql'; +import environmentToChangeCanaryQuery from './queries/environment_to_change_canary.query.graphql'; import pageInfoQuery from './queries/page_info.query.graphql'; const buildErrors = (errors = []) => ({ @@ -134,6 +135,12 @@ export const resolvers = (endpoint) => ({ data: { environmentToRollback: environment }, }); }, + setEnvironmentToChangeCanary(_, { environment, weight }, { client }) { + client.writeQuery({ + query: environmentToChangeCanaryQuery, + data: { environmentToChangeCanary: environment, weight }, + }); + }, cancelAutoStop(_, { autoStopUrl }) { return axios .post(autoStopUrl) diff --git a/app/assets/javascripts/environments/graphql/typedefs.graphql b/app/assets/javascripts/environments/graphql/typedefs.graphql index cc54b4ecd67..b4d1f7326f6 100644 --- a/app/assets/javascripts/environments/graphql/typedefs.graphql +++ b/app/assets/javascripts/environments/graphql/typedefs.graphql @@ -81,5 +81,6 @@ extend type Mutation { setEnvironmentToDelete(environment: LocalEnvironmentInput): LocalErrors setEnvironmentToRollback(environment: LocalEnvironmentInput): LocalErrors setEnvironmentToStop(environment: LocalEnvironmentInput): LocalErrors + setEnvironmentToChangeCanary(environment: LocalEnvironmentInput, weight: Int): LocalErrors action(environment: LocalEnvironmentInput): LocalErrors } |