diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-09-19 23:18:09 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-09-19 23:18:09 +0000 |
commit | 6ed4ec3e0b1340f96b7c043ef51d1b33bbe85fde (patch) | |
tree | dc4d20fe6064752c0bd323187252c77e0a89144b /app/assets/javascripts/environments | |
parent | 9868dae7fc0655bd7ce4a6887d4e6d487690eeed (diff) | |
download | gitlab-ce-6ed4ec3e0b1340f96b7c043ef51d1b33bbe85fde.tar.gz |
Add latest changes from gitlab-org/gitlab@15-4-stable-eev15.4.0-rc42
Diffstat (limited to 'app/assets/javascripts/environments')
5 files changed, 119 insertions, 74 deletions
diff --git a/app/assets/javascripts/environments/components/deploy_board.vue b/app/assets/javascripts/environments/components/deploy_board.vue index 7a2c9a8600e..f22a0705b3d 100644 --- a/app/assets/javascripts/environments/components/deploy_board.vue +++ b/app/assets/javascripts/environments/components/deploy_board.vue @@ -20,13 +20,13 @@ import { } from '@gitlab/ui'; import { isEmpty } from 'lodash'; import { s__, n__ } from '~/locale'; -import instanceComponent from '~/vue_shared/components/deployment_instance.vue'; +import InstanceComponent from '~/vue_shared/components/deployment_instance.vue'; import { STATUS_MAP, CANARY_STATUS } from '../constants'; import CanaryIngress from './canary_ingress.vue'; export default { components: { - instanceComponent, + InstanceComponent, CanaryIngress, GlIcon, GlLoadingIcon, diff --git a/app/assets/javascripts/environments/components/deployment.vue b/app/assets/javascripts/environments/components/deployment.vue index 19284b26d51..3475b38c8c9 100644 --- a/app/assets/javascripts/environments/components/deployment.vue +++ b/app/assets/javascripts/environments/components/deployment.vue @@ -1,17 +1,17 @@ <script> import { GlBadge, - GlButton, - GlCollapse, GlIcon, GlLink, + GlLoadingIcon, GlTooltipDirective as GlTooltip, GlTruncate, } from '@gitlab/ui'; -import { GlBreakpointInstance } from '@gitlab/ui/dist/utils'; import { __, s__ } from '~/locale'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; +import createFlash from '~/flash'; +import deploymentDetails from '../graphql/queries/deployment_details.query.graphql'; import DeploymentStatusBadge from './deployment_status_badge.vue'; import Commit from './commit.vue'; @@ -21,16 +21,16 @@ export default { Commit, DeploymentStatusBadge, GlBadge, - GlButton, - GlCollapse, GlIcon, GlLink, GlTruncate, + GlLoadingIcon, TimeAgoTooltip, }, directives: { GlTooltip, }, + inject: ['projectPath'], props: { deployment: { type: Object, @@ -41,9 +41,11 @@ export default { default: false, required: false, }, - }, - data() { - return { visible: false }; + visible: { + type: Boolean, + default: false, + required: false, + }, }, computed: { status() { @@ -52,26 +54,21 @@ export default { iid() { return this.deployment?.iid; }, + isTag() { + return this.deployment?.tag; + }, shortSha() { return this.commit?.shortId; }, createdAt() { return this.deployment?.createdAt; }, - isMobile() { - return !GlBreakpointInstance.isDesktop(); - }, - detailsButton() { - return this.visible - ? { text: this.$options.i18n.hideDetails, icon: 'expand-up' } - : { text: this.$options.i18n.showDetails, icon: 'expand-down' }; - }, - detailsButtonClasses() { - return this.isMobile ? 'gl-sr-only' : ''; - }, commit() { return this.deployment?.commit; }, + commitPath() { + return this.commit?.commitPath; + }, user() { return this.deployment?.user; }, @@ -90,9 +87,6 @@ export default { jobPath() { return this.deployable?.buildPath; }, - refLabel() { - return this.deployment?.tag ? this.$options.i18n.tag : this.$options.i18n.branch; - }, ref() { return this.deployment?.ref; }, @@ -105,10 +99,35 @@ export default { needsApproval() { return this.deployment.pendingApprovalCount > 0; }, + hasTags() { + return this.tags?.length > 0; + }, + displayTags() { + return this.tags?.slice(0, 5); + }, }, - methods: { - toggleCollapse() { - this.visible = !this.visible; + apollo: { + tags: { + query: deploymentDetails, + variables() { + return { + projectPath: this.projectPath, + iid: this.deployment.iid, + }; + }, + update(data) { + return data?.project?.deployment?.tags; + }, + error(error) { + createFlash({ + message: this.$options.i18n.LOAD_ERROR_MESSAGE, + captureError: true, + error, + }); + }, + skip() { + return !this.visible; + }, }, }, i18n: { @@ -116,14 +135,12 @@ export default { deploymentId: s__('Deployment|Deployment ID'), copyButton: __('Copy commit SHA'), commitSha: __('Commit SHA'), - showDetails: __('Show details'), - hideDetails: __('Hide details'), triggerer: s__('Deployment|Triggerer'), needsApproval: s__('Deployment|Needs Approval'), job: __('Job'), api: __('API'), branch: __('Branch'), - tag: __('Tag'), + tags: __('Tags'), }, headerClasses: [ 'gl-display-flex', @@ -179,7 +196,9 @@ export default { class="gl-font-monospace gl-display-flex gl-align-items-center" > <gl-icon ref="deployment-commit-icon" name="commit" class="gl-mr-2" /> - <span v-gl-tooltip :title="$options.i18n.commitSha">{{ shortSha }}</span> + <gl-link v-gl-tooltip :title="$options.i18n.commitSha" :href="commitPath"> + {{ shortSha }} + </gl-link> <clipboard-button :text="shortSha" category="tertiary" @@ -195,54 +214,66 @@ export default { </time-ago-tooltip> </div> </div> - <gl-button - ref="details-toggle" - category="tertiary" - :icon="detailsButton.icon" - :button-text-classes="detailsButtonClasses" - @click="toggleCollapse" - > - {{ detailsButton.text }} - </gl-button> </div> <commit v-if="commit" :commit="commit" class="gl-mt-3" /> <div class="gl-mt-3"><slot name="approval"></slot></div> - <gl-collapse :visible="visible"> + <div + class="gl-display-flex gl-md-align-items-center gl-mt-5 gl-flex-direction-column gl-md-flex-direction-row gl-pr-4 gl-md-pr-0" + > + <div v-if="user" class="gl-display-flex gl-flex-direction-column gl-md-max-w-15p"> + <span class="gl-text-gray-500">{{ $options.i18n.triggerer }}</span> + <gl-link :href="userPath" class="gl-font-monospace gl-mt-3"> + <gl-truncate :text="username" with-tooltip /> + </gl-link> + </div> <div - class="gl-display-flex gl-md-align-items-center gl-mt-5 gl-flex-direction-column gl-md-flex-direction-row gl-pr-4 gl-md-pr-0" + class="gl-display-flex gl-flex-direction-column gl-md-pl-7 gl-md-max-w-15p gl-mt-4 gl-md-mt-0" > - <div v-if="user" class="gl-display-flex gl-flex-direction-column gl-md-max-w-15p"> - <span class="gl-text-gray-500">{{ $options.i18n.triggerer }}</span> - <gl-link :href="userPath" class="gl-font-monospace gl-mt-3"> - <gl-truncate :text="username" with-tooltip /> - </gl-link> - </div> - <div - class="gl-display-flex gl-flex-direction-column gl-md-pl-7 gl-md-max-w-15p gl-mt-4 gl-md-mt-0" - > - <span class="gl-text-gray-500" :class="{ 'gl-ml-3': !deployable }"> - {{ $options.i18n.job }} - </span> - <gl-link v-if="jobPath" :href="jobPath" class="gl-font-monospace gl-mt-3"> - <gl-truncate :text="jobName" with-tooltip position="middle" /> - </gl-link> - <span v-else-if="jobName" class="gl-font-monospace gl-mt-3"> - <gl-truncate :text="jobName" with-tooltip position="middle" /> - </span> - <gl-badge v-else class="gl-font-monospace gl-mt-3" variant="info"> - {{ $options.i18n.api }} - </gl-badge> - </div> - <div - v-if="ref" - class="gl-display-flex gl-flex-direction-column gl-md-pl-7 gl-md-max-w-15p gl-mt-4 gl-md-mt-0" - > - <span class="gl-text-gray-500">{{ refLabel }}</span> - <gl-link :href="refPath" class="gl-font-monospace gl-mt-3"> - <gl-truncate :text="refName" with-tooltip /> + <span class="gl-text-gray-500" :class="{ 'gl-ml-3': !deployable }"> + {{ $options.i18n.job }} + </span> + <gl-link v-if="jobPath" :href="jobPath" class="gl-font-monospace gl-mt-3"> + <gl-truncate :text="jobName" with-tooltip position="middle" /> + </gl-link> + <span v-else-if="jobName" class="gl-font-monospace gl-mt-3"> + <gl-truncate :text="jobName" with-tooltip position="middle" /> + </span> + <gl-badge v-else class="gl-font-monospace gl-mt-3" variant="info"> + {{ $options.i18n.api }} + </gl-badge> + </div> + <div + v-if="ref && !isTag" + class="gl-display-flex gl-flex-direction-column gl-md-pl-7 gl-md-max-w-15p gl-mt-4 gl-md-mt-0" + > + <span class="gl-text-gray-500">{{ $options.i18n.branch }}</span> + <gl-link :href="refPath" class="gl-font-monospace gl-mt-3"> + <gl-truncate :text="refName" with-tooltip /> + </gl-link> + </div> + <div + v-if="hasTags || $apollo.queries.tags.loading" + class="gl-display-flex gl-flex-direction-column gl-md-pl-7 gl-md-max-w-15p gl-mt-4 gl-md-mt-0" + > + <span class="gl-text-gray-500">{{ $options.i18n.tags }}</span> + <gl-loading-icon + v-if="$apollo.queries.tags.loading" + class="gl-font-monospace gl-mt-3" + size="sm" + inline + /> + <div v-if="hasTags" class="gl-display-flex gl-flex-direction-row"> + <gl-link + v-for="(tag, ndx) in displayTags" + :key="tag.name" + :href="tag.path" + class="gl-font-monospace gl-mt-3 gl-mr-3" + > + {{ tag.name }}<span v-if="ndx + 1 < tags.length">, </span> </gl-link> + <div v-if="tags.length > 5" class="gl-font-monospace gl-mt-3 gl-mr-3">...</div> </div> </div> - </gl-collapse> + </div> </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 75bd473497b..9a100e0199e 100644 --- a/app/assets/javascripts/environments/components/new_environment_item.vue +++ b/app/assets/javascripts/environments/components/new_environment_item.vue @@ -310,6 +310,7 @@ export default { <div v-if="lastDeployment" :class="$options.deploymentClasses"> <deployment :deployment="lastDeployment" + :visible="visible" :class="{ 'gl-ml-7': inFolder }" latest class="gl-pl-4" diff --git a/app/assets/javascripts/environments/folder/environments_folder_bundle.js b/app/assets/javascripts/environments/folder/environments_folder_bundle.js index 4e5fe511f8a..1a32de30de0 100644 --- a/app/assets/javascripts/environments/folder/environments_folder_bundle.js +++ b/app/assets/javascripts/environments/folder/environments_folder_bundle.js @@ -2,7 +2,7 @@ import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createDefaultClient from '~/lib/graphql'; import Translate from '~/vue_shared/translate'; -import environmentsFolderApp from './environments_folder_view.vue'; +import EnvironmentsFolderApp from './environments_folder_view.vue'; Vue.use(Translate); Vue.use(VueApollo); @@ -17,7 +17,7 @@ export default () => { return new Vue({ el, components: { - environmentsFolderApp, + EnvironmentsFolderApp, }, apolloProvider, provide: { diff --git a/app/assets/javascripts/environments/graphql/queries/deployment_details.query.graphql b/app/assets/javascripts/environments/graphql/queries/deployment_details.query.graphql new file mode 100644 index 00000000000..baed777bd07 --- /dev/null +++ b/app/assets/javascripts/environments/graphql/queries/deployment_details.query.graphql @@ -0,0 +1,13 @@ +query getDeploymentDetails($projectPath: ID!, $iid: ID!) { + project(fullPath: $projectPath) { + id + deployment(iid: $iid) { + id + iid + tags { + name + path + } + } + } +} |