diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-01-10 15:15:34 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-01-10 15:15:34 +0300 |
commit | d85be261b2898166676be4f329a548f61e2917f4 (patch) | |
tree | 393faefd792483f15860dd184b524ac597295ae1 /app/assets/javascripts/jobs | |
parent | 75330c963b9e949443b1e4ab2e5770879d395158 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/jobs')
-rw-r--r-- | app/assets/javascripts/jobs/bridge/app.vue | 106 | ||||
-rw-r--r-- | app/assets/javascripts/jobs/bridge/components/sidebar.vue | 53 | ||||
-rw-r--r-- | app/assets/javascripts/jobs/bridge/graphql/queries/pipeline.query.graphql | 70 | ||||
-rw-r--r-- | app/assets/javascripts/jobs/index.js | 13 |
4 files changed, 201 insertions, 41 deletions
diff --git a/app/assets/javascripts/jobs/bridge/app.vue b/app/assets/javascripts/jobs/bridge/app.vue index 67c22712776..c639e49083b 100644 --- a/app/assets/javascripts/jobs/bridge/app.vue +++ b/app/assets/javascripts/jobs/bridge/app.vue @@ -1,20 +1,118 @@ <script> +import { GlLoadingIcon } from '@gitlab/ui'; +import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; +import { __, sprintf } from '~/locale'; +import CiHeader from '~/vue_shared/components/header_ci_component.vue'; +import getPipelineQuery from './graphql/queries/pipeline.query.graphql'; import BridgeEmptyState from './components/empty_state.vue'; import BridgeSidebar from './components/sidebar.vue'; +import { SIDEBAR_COLLAPSE_BREAKPOINTS } from './components/constants'; export default { name: 'BridgePageApp', components: { BridgeEmptyState, BridgeSidebar, + CiHeader, + GlLoadingIcon, + }, + inject: ['buildId', 'projectFullPath', 'pipelineIid'], + apollo: { + pipeline: { + query: getPipelineQuery, + variables() { + return { + fullPath: this.projectFullPath, + iid: this.pipelineIid, + }; + }, + update(data) { + if (!data?.project?.pipeline) { + return null; + } + + const { pipeline } = data.project; + const stages = pipeline?.stages.edges.map((edge) => edge.node) || []; + const jobs = stages.map((stage) => stage.jobs.nodes).flat(); + + return { + ...pipeline, + commit: { + ...pipeline.commit, + commit_path: pipeline.commit.webPath, + short_id: pipeline.commit.shortId, + }, + id: getIdFromGraphQLId(pipeline.id), + jobs, + stages, + }; + }, + }, + }, + data() { + return { + isSidebarExpanded: true, + pipeline: {}, + }; + }, + computed: { + bridgeJob() { + return ( + this.pipeline.jobs?.filter( + (job) => getIdFromGraphQLId(job.id) === Number(this.buildId), + )[0] || {} + ); + }, + bridgeName() { + return sprintf(__('Job %{jobName}'), { jobName: this.bridgeJob.name }); + }, + isPipelineLoading() { + return this.$apollo.queries.pipeline.loading; + }, + }, + created() { + window.addEventListener('resize', this.onResize); + }, + mounted() { + this.onResize(); + }, + methods: { + toggleSidebar() { + this.isSidebarExpanded = !this.isSidebarExpanded; + }, + onResize() { + const breakpoint = bp.getBreakpointSize(); + if (SIDEBAR_COLLAPSE_BREAKPOINTS.includes(breakpoint)) { + this.isSidebarExpanded = false; + } else if (!this.isSidebarExpanded) { + this.isSidebarExpanded = true; + } + }, }, }; </script> <template> <div> - <!-- TODO: get job details and show CI header --> - <!-- TODO: add downstream pipeline path --> - <bridge-empty-state downstream-pipeline-path="#" /> - <bridge-sidebar /> + <gl-loading-icon v-if="isPipelineLoading" size="lg" class="gl-mt-4" /> + <div v-else> + <ci-header + class="gl-border-b-1 gl-border-b-solid gl-border-b-gray-100" + :status="bridgeJob.detailedStatus" + :time="bridgeJob.createdAt" + :user="pipeline.user" + :has-sidebar-button="true" + :item-name="bridgeName" + @clickedSidebarButton="toggleSidebar" + /> + <bridge-empty-state :downstream-pipeline-path="bridgeJob.downstreamPipeline.path" /> + <bridge-sidebar + v-if="isSidebarExpanded" + :bridge-job="bridgeJob" + :commit="pipeline.commit" + :is-sidebar-expanded="isSidebarExpanded" + @toggleSidebar="toggleSidebar" + /> + </div> </div> </template> diff --git a/app/assets/javascripts/jobs/bridge/components/sidebar.vue b/app/assets/javascripts/jobs/bridge/components/sidebar.vue index 68b767408f0..9c7ae1178ea 100644 --- a/app/assets/javascripts/jobs/bridge/components/sidebar.vue +++ b/app/assets/javascripts/jobs/bridge/components/sidebar.vue @@ -1,10 +1,9 @@ <script> import { GlButton, GlDropdown, GlDropdownItem } from '@gitlab/ui'; -import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; import { __ } from '~/locale'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue'; import { JOB_SIDEBAR } from '../../constants'; -import { SIDEBAR_COLLAPSE_BREAKPOINTS } from './constants'; +import CommitBlock from '../../components/commit_block.vue'; export default { styles: { @@ -18,41 +17,27 @@ export default { retryTriggerJob: __('Retry the trigger job'), retryDownstreamPipeline: __('Retry the downstream pipeline'), }, - borderTopClass: ['gl-border-t-solid', 'gl-border-t-1', 'gl-border-t-gray-100'], + sectionClass: ['gl-border-t-solid', 'gl-border-t-1', 'gl-border-t-gray-100', 'gl-py-5'], components: { + CommitBlock, GlButton, GlDropdown, GlDropdownItem, TooltipOnTruncate, }, - inject: { - buildName: { - type: String, - default: '', + props: { + bridgeJob: { + type: Object, + required: true, + }, + commit: { + type: Object, + required: true, }, - }, - data() { - return { - isSidebarExpanded: true, - }; - }, - created() { - window.addEventListener('resize', this.onResize); - }, - mounted() { - this.onResize(); }, methods: { - toggleSidebar() { - this.isSidebarExpanded = !this.isSidebarExpanded; - }, - onResize() { - const breakpoint = bp.getBreakpointSize(); - if (SIDEBAR_COLLAPSE_BREAKPOINTS.includes(breakpoint)) { - this.isSidebarExpanded = false; - } else if (!this.isSidebarExpanded) { - this.isSidebarExpanded = true; - } + onSidebarButtonClick() { + this.$emit('toggleSidebar'); }, }, }; @@ -61,14 +46,11 @@ export default { <aside class="gl-fixed gl-right-0 gl-px-5 gl-bg-gray-10 gl-h-full gl-border-l-solid gl-border-1 gl-border-gray-100 gl-z-index-200 gl-overflow-hidden" :style="this.$options.styles" - :class="{ - 'gl-display-none': !isSidebarExpanded, - }" > <div class="gl-py-5 gl-display-flex gl-align-items-center"> - <tooltip-on-truncate :title="buildName" truncate-target="child" + <tooltip-on-truncate :title="bridgeJob.name" truncate-target="child" ><h4 class="gl-mb-0 gl-mr-2 gl-text-truncate"> - {{ buildName }} + {{ bridgeJob.name }} </h4> </tooltip-on-truncate> <!-- TODO: implement retry actions --> @@ -90,9 +72,10 @@ export default { category="tertiary" class="gl-md-display-none gl-ml-2" icon="chevron-double-lg-right" - @click="toggleSidebar" + @click="onSidebarButtonClick" /> </div> - <!-- TODO: get job details and show commit block, stage dropdown, jobs list --> + <commit-block :commit="commit" :class="$options.sectionClass" /> + <!-- TODO: show stage dropdown, jobs list --> </aside> </template> diff --git a/app/assets/javascripts/jobs/bridge/graphql/queries/pipeline.query.graphql b/app/assets/javascripts/jobs/bridge/graphql/queries/pipeline.query.graphql new file mode 100644 index 00000000000..338ca9f16c7 --- /dev/null +++ b/app/assets/javascripts/jobs/bridge/graphql/queries/pipeline.query.graphql @@ -0,0 +1,70 @@ +query getPipelineData($fullPath: ID!, $iid: ID!) { + project(fullPath: $fullPath) { + id + pipeline(iid: $iid) { + id + iid + path + sha + ref + refPath + commit { + id + shortId + title + webPath + } + detailedStatus { + id + icon + group + } + stages { + edges { + node { + id + name + jobs { + nodes { + id + createdAt + name + scheduledAt + startedAt + status + triggered + detailedStatus { + id + detailsPath + icon + group + text + tooltip + } + downstreamPipeline { + id + path + } + stage { + id + name + } + } + } + } + } + } + user { + id + avatarUrl + name + username + webPath + webUrl + status { + message + } + } + } + } +} diff --git a/app/assets/javascripts/jobs/index.js b/app/assets/javascripts/jobs/index.js index e078a6c2319..6e958ea1842 100644 --- a/app/assets/javascripts/jobs/index.js +++ b/app/assets/javascripts/jobs/index.js @@ -54,7 +54,13 @@ const initializeJobPage = (element) => { }; const initializeBridgePage = (el) => { - const { buildName, emptyStateIllustrationPath } = el.dataset; + const { + buildId, + downstreamPipelinePath, + emptyStateIllustrationPath, + pipelineIid, + projectFullPath, + } = el.dataset; Vue.use(VueApollo); const apolloProvider = new VueApollo({ @@ -65,8 +71,11 @@ const initializeBridgePage = (el) => { el, apolloProvider, provide: { - buildName, + buildId, + downstreamPipelinePath, emptyStateIllustrationPath, + pipelineIid, + projectFullPath, }, render(h) { return h(BridgeApp); |