diff options
Diffstat (limited to 'app/assets/javascripts/environments/components/new_environment_item.vue')
-rw-r--r-- | app/assets/javascripts/environments/components/new_environment_item.vue | 77 |
1 files changed, 68 insertions, 9 deletions
diff --git a/app/assets/javascripts/environments/components/new_environment_item.vue b/app/assets/javascripts/environments/components/new_environment_item.vue index d3624103c13..27a763fb9c4 100644 --- a/app/assets/javascripts/environments/components/new_environment_item.vue +++ b/app/assets/javascripts/environments/components/new_environment_item.vue @@ -4,10 +4,12 @@ import { GlDropdown, GlButton, GlLink, + GlSprintf, GlTooltipDirective as GlTooltip, } from '@gitlab/ui'; -import { __ } from '~/locale'; +import { __, s__ } from '~/locale'; import { truncate } from '~/lib/utils/text_utility'; +import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; import isLastDeployment from '../graphql/queries/is_last_deployment.query.graphql'; import ExternalUrl from './environment_external_url.vue'; import Actions from './environment_actions.vue'; @@ -18,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: { @@ -25,19 +28,23 @@ export default { GlDropdown, GlButton, GlLink, + GlSprintf, Actions, Deployment, + DeployBoardWrapper, ExternalUrl, StopComponent, Rollback, Monitoring, Pin, Terminal, + TimeAgoTooltip, Delete, }, directives: { GlTooltip, }, + inject: ['helpPagePath'], props: { environment: { required: true, @@ -60,6 +67,10 @@ export default { i18n: { collapse: __('Collapse'), expand: __('Expand'), + emptyState: s__( + 'Environments|There are no deployments for this environment yet. %{linkStart}Learn more about setting up deployments.%{linkEnd}', + ), + autoStopIn: s__('Environment|Auto stop %{time}'), }, data() { return { visible: false }; @@ -83,12 +94,15 @@ export default { upcomingDeployment() { return this.environment?.upcomingDeployment; }, + hasDeployment() { + return Boolean(this.environment?.upcomingDeployment || this.environment?.lastDeployment); + }, actions() { if (!this.lastDeployment) { return []; } - const { manualActions = [], scheduledActions = [] } = this.lastDeployment; - const combinedActions = [...manualActions, ...scheduledActions]; + const { manualActions, scheduledActions } = this.lastDeployment; + const combinedActions = [...(manualActions ?? []), ...(scheduledActions ?? [])]; return combinedActions.map((action) => ({ ...action, })); @@ -133,6 +147,9 @@ export default { displayName() { return truncate(this.name, 80); }, + rolloutStatus() { + return this.environment?.rolloutStatus; + }, }, methods: { toggleCollapse() { @@ -144,7 +161,15 @@ export default { 'gl-border-t-solid', 'gl-border-1', 'gl-py-5', - 'gl-pl-7', + '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', ], }; @@ -176,7 +201,14 @@ export default { {{ displayName }} </gl-link> </div> - <div> + <div class="gl-display-flex gl-align-items-center"> + <p v-if="canShowAutoStopDate" class="gl-font-sm gl-text-gray-700 gl-mr-5 gl-mb-0"> + <gl-sprintf :message="$options.i18n.autoStopIn"> + <template #time> + <time-ago-tooltip :time="environment.autoStopAt" css-class="gl-font-weight-bold" /> + </template> + </gl-sprintf> + </p> <div class="btn-group table-action-buttons" role="group"> <external-url v-if="externalUrl" @@ -224,6 +256,7 @@ export default { <pin v-if="canShowAutoStopDate" :auto-stop-url="autoStopPath" + graphql data-track-action="click_button" data-track-label="environment_pin" /> @@ -254,11 +287,37 @@ export default { </div> </div> <gl-collapse :visible="visible"> - <div v-if="lastDeployment" :class="$options.deploymentClasses"> - <deployment :deployment="lastDeployment" :class="{ 'gl-ml-7': inFolder }" /> + <template v-if="hasDeployment"> + <div v-if="lastDeployment" :class="$options.deploymentClasses"> + <deployment + :deployment="lastDeployment" + :class="{ 'gl-ml-7': inFolder }" + latest + class="gl-pl-4" + /> + </div> + <div v-if="upcomingDeployment" :class="$options.deploymentClasses"> + <deployment + :deployment="upcomingDeployment" + :class="{ 'gl-ml-7': inFolder }" + class="gl-pl-4" + /> + </div> + </template> + <div v-else :class="$options.deploymentClasses"> + <gl-sprintf :message="$options.i18n.emptyState"> + <template #link="{ content }"> + <gl-link :href="helpPagePath">{{ content }}</gl-link> + </template> + </gl-sprintf> </div> - <div v-if="upcomingDeployment" :class="$options.deploymentClasses"> - <deployment :deployment="upcomingDeployment" :class="{ 'gl-ml-7': inFolder }" /> + <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> |