diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-07-06 21:08:29 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-07-06 21:08:29 +0300 |
commit | 8280fa786e71c14d39b1ae80e93f251f3685286a (patch) | |
tree | 1fe6ee53ca8df7631252e764eb4cd5b046b7b196 /app/assets/javascripts/jobs | |
parent | 526f1e98593d1d5691df5de18862f31dd08c4889 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/jobs')
6 files changed, 1 insertions, 379 deletions
diff --git a/app/assets/javascripts/jobs/bridge/app.vue b/app/assets/javascripts/jobs/bridge/app.vue deleted file mode 100644 index c639e49083b..00000000000 --- a/app/assets/javascripts/jobs/bridge/app.vue +++ /dev/null @@ -1,118 +0,0 @@ -<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> - <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/constants.js b/app/assets/javascripts/jobs/bridge/components/constants.js deleted file mode 100644 index 33310b3157a..00000000000 --- a/app/assets/javascripts/jobs/bridge/components/constants.js +++ /dev/null @@ -1 +0,0 @@ -export const SIDEBAR_COLLAPSE_BREAKPOINTS = ['xs', 'sm']; diff --git a/app/assets/javascripts/jobs/bridge/components/empty_state.vue b/app/assets/javascripts/jobs/bridge/components/empty_state.vue deleted file mode 100644 index bd07d863719..00000000000 --- a/app/assets/javascripts/jobs/bridge/components/empty_state.vue +++ /dev/null @@ -1,45 +0,0 @@ -<script> -import { GlButton } from '@gitlab/ui'; -import { __ } from '~/locale'; - -export default { - name: 'BridgeEmptyState', - i18n: { - title: __('This job triggers a downstream pipeline'), - linkBtnText: __('View downstream pipeline'), - }, - components: { - GlButton, - }, - inject: { - emptyStateIllustrationPath: { - type: String, - require: true, - }, - }, - props: { - downstreamPipelinePath: { - type: String, - required: false, - default: undefined, - }, - }, -}; -</script> - -<template> - <div class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-mt-11"> - <img :src="emptyStateIllustrationPath" /> - <h1 class="gl-font-size-h1">{{ $options.i18n.title }}</h1> - <gl-button - v-if="downstreamPipelinePath" - class="gl-mt-3" - category="secondary" - variant="confirm" - size="medium" - :href="downstreamPipelinePath" - > - {{ $options.i18n.linkBtnText }} - </gl-button> - </div> -</template> diff --git a/app/assets/javascripts/jobs/bridge/components/sidebar.vue b/app/assets/javascripts/jobs/bridge/components/sidebar.vue deleted file mode 100644 index 3ba07cf55d1..00000000000 --- a/app/assets/javascripts/jobs/bridge/components/sidebar.vue +++ /dev/null @@ -1,105 +0,0 @@ -<script> -import { GlButton, GlDropdown, GlDropdownItem } from '@gitlab/ui'; -import { __ } from '~/locale'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue'; -import { JOB_SIDEBAR } from '../../constants'; -import CommitBlock from '../../components/commit_block.vue'; - -export default { - styles: { - width: '290px', - }, - name: 'BridgeSidebar', - i18n: { - ...JOB_SIDEBAR, - retryButton: __('Retry'), - retryTriggerJob: __('Retry the trigger job'), - retryDownstreamPipeline: __('Retry the downstream pipeline'), - }, - sectionClass: ['gl-border-t-solid', 'gl-border-t-1', 'gl-border-t-gray-100', 'gl-py-5'], - components: { - CommitBlock, - GlButton, - GlDropdown, - GlDropdownItem, - TooltipOnTruncate, - }, - mixins: [glFeatureFlagsMixin()], - props: { - bridgeJob: { - type: Object, - required: true, - }, - commit: { - type: Object, - required: true, - }, - }, - data() { - return { - topPosition: 0, - }; - }, - computed: { - rootStyle() { - return { ...this.$options.styles, top: `${this.topPosition}px` }; - }, - }, - mounted() { - this.setTopPosition(); - }, - methods: { - onSidebarButtonClick() { - this.$emit('toggleSidebar'); - }, - setTopPosition() { - const navbarEl = document.querySelector('.js-navbar'); - - if (navbarEl) { - this.topPosition = navbarEl.getBoundingClientRect().bottom; - } - }, - }, -}; -</script> -<template> - <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="rootStyle" - > - <div class="gl-py-5 gl-display-flex gl-align-items-center"> - <tooltip-on-truncate :title="bridgeJob.name" truncate-target="child" - ><h4 class="gl-mb-0 gl-mr-2 gl-text-truncate"> - {{ bridgeJob.name }} - </h4> - </tooltip-on-truncate> - <!-- TODO: implement retry actions --> - <div - v-if="glFeatures.triggerJobRetryAction" - class="gl-flex-grow-1 gl-flex-shrink-0 gl-text-right" - > - <gl-dropdown - :text="$options.i18n.retryButton" - category="primary" - variant="confirm" - right - size="medium" - > - <gl-dropdown-item>{{ $options.i18n.retryTriggerJob }}</gl-dropdown-item> - <gl-dropdown-item>{{ $options.i18n.retryDownstreamPipeline }}</gl-dropdown-item> - </gl-dropdown> - </div> - <gl-button - :aria-label="$options.i18n.toggleSidebar" - data-testid="sidebar-expansion-toggle" - category="tertiary" - class="gl-md-display-none gl-ml-2" - icon="chevron-double-lg-right" - @click="onSidebarButtonClick" - /> - </div> - <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 deleted file mode 100644 index 338ca9f16c7..00000000000 --- a/app/assets/javascripts/jobs/bridge/graphql/queries/pipeline.query.graphql +++ /dev/null @@ -1,70 +0,0 @@ -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 26dd38bbe08..8fb4c480ef9 100644 --- a/app/assets/javascripts/jobs/index.js +++ b/app/assets/javascripts/jobs/index.js @@ -1,7 +1,4 @@ import Vue from 'vue'; -import VueApollo from 'vue-apollo'; -import createDefaultClient from '~/lib/graphql'; -import BridgeApp from './bridge/app.vue'; import JobApp from './components/job_app.vue'; import createStore from './store'; @@ -51,43 +48,7 @@ const initializeJobPage = (element) => { }); }; -const initializeBridgePage = (el) => { - const { - buildId, - downstreamPipelinePath, - emptyStateIllustrationPath, - pipelineIid, - projectFullPath, - } = el.dataset; - - Vue.use(VueApollo); - const apolloProvider = new VueApollo({ - defaultClient: createDefaultClient(), - }); - - return new Vue({ - el, - apolloProvider, - provide: { - buildId, - downstreamPipelinePath, - emptyStateIllustrationPath, - pipelineIid, - projectFullPath, - }, - render(h) { - return h(BridgeApp); - }, - }); -}; - export default () => { const jobElement = document.getElementById('js-job-page'); - const bridgeElement = document.getElementById('js-bridge-page'); - - if (jobElement) { - initializeJobPage(jobElement); - } else { - initializeBridgePage(bridgeElement); - } + initializeJobPage(jobElement); }; |