diff options
Diffstat (limited to 'app/assets/javascripts/ci/job_details/components/sidebar')
9 files changed, 88 insertions, 76 deletions
diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/commit_block.vue b/app/assets/javascripts/ci/job_details/components/sidebar/commit_block.vue index 7f25ca8a94d..95616a4c706 100644 --- a/app/assets/javascripts/ci/job_details/components/sidebar/commit_block.vue +++ b/app/assets/javascripts/ci/job_details/components/sidebar/commit_block.vue @@ -22,25 +22,32 @@ export default { </script> <template> <div> - <span class="gl-font-weight-bold">{{ __('Commit') }}</span> + <p class="gl-display-flex gl-flex-wrap gl-align-items-baseline gl-gap-2 gl-mb-0"> + <span class="gl-display-flex gl-font-weight-bold">{{ __('Commit') }}</span> - <gl-link :href="commit.commit_path" class="gl-text-blue-600!" data-testid="commit-sha"> - {{ commit.short_id }} - </gl-link> + <gl-link + :href="commit.commit_path" + class="gl-text-blue-500! gl-font-monospace" + data-testid="commit-sha" + > + {{ commit.short_id }} + </gl-link> - <clipboard-button - :text="commit.id" - :title="__('Copy commit SHA')" - category="tertiary" - size="small" - /> + <clipboard-button + :text="commit.id" + :title="__('Copy commit SHA')" + category="tertiary" + size="small" + class="gl-align-self-center" + /> - <span v-if="mergeRequest"> - {{ __('in') }} - <gl-link :href="mergeRequest.path" class="gl-text-blue-600!" data-testid="link-commit" - >!{{ mergeRequest.iid }}</gl-link - > - </span> + <span v-if="mergeRequest"> + {{ __('in') }} + <gl-link :href="mergeRequest.path" class="gl-text-blue-500!" data-testid="link-commit" + >!{{ mergeRequest.iid }}</gl-link + > + </span> + </p> <p class="gl-mb-0">{{ commit.title }}</p> </div> diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/job_container_item.vue b/app/assets/javascripts/ci/job_details/components/sidebar/job_container_item.vue index 572544db526..8e87f118fa4 100644 --- a/app/assets/javascripts/ci/job_details/components/sidebar/job_container_item.vue +++ b/app/assets/javascripts/ci/job_details/components/sidebar/job_container_item.vue @@ -40,7 +40,7 @@ export default { }, classes() { return { - retried: this.job.retried, + 'retried gl-text-secondary': this.job.retried, 'gl-font-weight-bold': this.isActive, }; }, @@ -57,7 +57,7 @@ export default { v-gl-tooltip.left.viewport :href="job.status.details_path" :title="tooltipText" - class="gl-display-flex gl-align-items-center" + class="gl-display-flex gl-align-items-center gl-py-3 gl-pl-7" :data-testid="dataTestId" > <gl-icon @@ -67,11 +67,11 @@ export default { :size="14" /> - <ci-icon :status="job.status" class="gl-mr-2" :size="14" /> + <ci-icon :status="job.status" class="gl-mr-3" :size="14" /> <span class="gl-text-truncate gl-w-full">{{ jobName }}</span> - <gl-icon v-if="job.retried" name="retry" /> + <gl-icon v-if="job.retried" name="retry" class="gl-mr-4" /> </gl-link> </div> </template> diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/jobs_container.vue b/app/assets/javascripts/ci/job_details/components/sidebar/jobs_container.vue index df64b6422c7..18bd2593c2a 100644 --- a/app/assets/javascripts/ci/job_details/components/sidebar/jobs_container.vue +++ b/app/assets/javascripts/ci/job_details/components/sidebar/jobs_container.vue @@ -24,7 +24,8 @@ export default { }; </script> <template> - <div class="builds-container"> + <div class="block builds-container"> + <b class="gl-display-flex gl-mb-2 gl-font-weight-semibold">{{ __('Related jobs') }}</b> <job-container-item v-for="job in jobs" :key="job.id" diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar.vue b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar.vue index 305d7004357..7f2f4fc0331 100644 --- a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar.vue +++ b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar.vue @@ -16,7 +16,6 @@ import TriggerBlock from './trigger_block.vue'; export default { name: 'JobSidebar', - borderTopClass: ['gl-border-t-solid', 'gl-border-t-1', 'gl-border-t-gray-100'], forwardDeploymentFailureModalId, components: { ArtifactsBlock, @@ -80,56 +79,44 @@ export default { <template> <aside class="right-sidebar build-sidebar" data-offset-top="101" data-spy="affix"> <div class="sidebar-container"> - <div class="blocks-container"> + <div class="blocks-container gl-p-4"> <sidebar-header + class="block gl-pb-4! gl-mb-2" :rest-job="job" :job-id="job.id" @updateVariables="$emit('updateVariables')" /> - <job-sidebar-details-container class="gl-py-4" :class="$options.borderTopClass" /> + <job-sidebar-details-container class="block gl-mb-2" /> <artifacts-block v-if="hasArtifact" - class="gl-py-4" - :class="$options.borderTopClass" + class="block gl-mb-2" :artifact="job.artifact" :help-url="artifactHelpUrl" /> <external-links-block v-if="hasExternalLinks" - class="gl-py-4" - :class="$options.borderTopClass" + class="block gl-mb-2" :external-links="externalLinks" /> - <trigger-block - v-if="hasTriggers" - class="gl-py-4" - :class="$options.borderTopClass" - :trigger="job.trigger" - /> + <trigger-block v-if="hasTriggers" class="block gl-mb-2" :trigger="job.trigger" /> - <commit-block - :commit="commit" - class="gl-py-4" - :class="$options.borderTopClass" - :merge-request="job.merge_request" - /> + <commit-block class="block gl-mb-2" :commit="commit" :merge-request="job.merge_request" /> <stages-dropdown v-if="job.pipeline" - class="gl-py-4" - :class="$options.borderTopClass" + class="block gl-mb-2" :pipeline="job.pipeline" :selected-stage="selectedStage" :stages="stages" @requestSidebarStageDropdown="fetchJobsForStage" /> - </div> - <jobs-container v-if="jobs.length" :job-id="job.id" :jobs="jobs" /> + <jobs-container v-if="jobs.length" :job-id="job.id" :jobs="jobs" /> + </div> </div> <job-retry-forward-deployment-modal v-if="shouldShowJobRetryForwardDeploymentModal" diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_detail_row.vue b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_detail_row.vue index 0ba34eafa58..5b1bf354fd4 100644 --- a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_detail_row.vue +++ b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_detail_row.vue @@ -39,21 +39,26 @@ export default { }; </script> <template> - <p class="gl-display-flex gl-justify-content-space-between gl-mb-2"> - <span v-if="hasTitle"> - <b>{{ title }}:</b> + <p class="build-sidebar-item gl-mb-2"> + <b v-if="hasTitle" class="gl-display-flex">{{ title }}:</b> + <gl-link + v-if="path" + :href="path" + class="gl-text-blue-600!" + data-testid="job-sidebar-value-link" + > + {{ value }} + </gl-link> + <span v-else + >{{ value }} <gl-link - v-if="path" - :href="path" - class="gl-text-blue-600!" - data-testid="job-sidebar-value-link" + v-if="hasHelpURL" + :href="helpUrl" + target="_blank" + data-testid="job-sidebar-help-link" > - {{ value }} + <gl-icon name="question-o" class="gl-ml-2 gl-text-blue-500" /> </gl-link> - <span v-else>{{ value }}</span> </span> - <gl-link v-if="hasHelpURL" :href="helpUrl" target="_blank" data-testid="job-sidebar-help-link"> - <gl-icon name="question-o" /> - </gl-link> </p> </template> diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_header.vue b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_header.vue index d4de53f9807..77e3ecb9b3c 100644 --- a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_header.vue +++ b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_header.vue @@ -93,7 +93,7 @@ export default { </script> <template> - <div class="gl-py-4"> + <div> <tooltip-on-truncate :title="job.name" truncate-target="child" ><h4 class="gl-mt-0 gl-mb-3 gl-text-truncate" data-testid="job-name">{{ job.name }}</h4> </tooltip-on-truncate> @@ -158,7 +158,7 @@ export default { /> <gl-button :aria-label="$options.i18n.toggleSidebar" - category="tertiary" + category="secondary" class="gl-md-display-none gl-ml-2" icon="chevron-double-lg-right" @click="toggleSidebar" diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_job_details_container.vue b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_job_details_container.vue index 09335476008..ebef3ecaa3f 100644 --- a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_job_details_container.vue +++ b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_job_details_container.vue @@ -44,10 +44,14 @@ export default { this.job.finished_at || this.job.erased_at || this.job.queued_duration || + this.job.id || this.job.runner || this.job.coverage, ); }, + jobId() { + return this.job?.id ? `#${this.job.id}` : ''; + }, runnerId() { const { id, short_sha: token, description } = this.job.runner; @@ -81,8 +85,9 @@ export default { ERASED: __('Erased'), QUEUED: __('Queued'), RUNNER: __('Runner'), - TAGS: __('Tags:'), + TAGS: __('Tags'), TIMEOUT: __('Timeout'), + ID: __('Job ID'), }, TIMEOUT_HELP_URL: helpPagePath('/ci/pipelines/settings.md', { anchor: 'set-a-limit-for-how-long-jobs-can-run', @@ -108,6 +113,7 @@ export default { data-testid="job-timeout" :title="$options.i18n.TIMEOUT" /> + <detail-row v-if="job.id" :value="jobId" :title="$options.i18n.ID" /> <detail-row v-if="job.runner" :value="runnerId" @@ -117,8 +123,8 @@ export default { <detail-row v-if="job.coverage" :value="coverage" :title="$options.i18n.COVERAGE" /> <p v-if="hasTags" class="build-detail-row" data-testid="job-tags"> - <span class="font-weight-bold">{{ $options.i18n.TAGS }}</span> - <gl-badge v-for="(tag, i) in job.tags" :key="i" variant="info">{{ tag }}</gl-badge> + <span class="font-weight-bold">{{ $options.i18n.TAGS }}:</span> + <gl-badge v-for="(tag, i) in job.tags" :key="i" variant="info" size="sm">{{ tag }}</gl-badge> </p> </div> </template> diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/stages_dropdown.vue b/app/assets/javascripts/ci/job_details/components/sidebar/stages_dropdown.vue index 3fee1427256..4ccd949e754 100644 --- a/app/assets/javascripts/ci/job_details/components/sidebar/stages_dropdown.vue +++ b/app/assets/javascripts/ci/job_details/components/sidebar/stages_dropdown.vue @@ -1,20 +1,20 @@ <script> import { GlLink, GlDisclosureDropdown, GlSprintf } from '@gitlab/ui'; import { isEmpty } from 'lodash'; +import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue'; import { Mousetrap } from '~/lib/mousetrap'; import { s__ } from '~/locale'; -import CiIcon from '~/vue_shared/components/ci_icon.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import { clickCopyToClipboardButton } from '~/behaviors/copy_to_clipboard'; import { keysFor, MR_COPY_SOURCE_BRANCH_NAME } from '~/behaviors/shortcuts/keybindings'; export default { components: { - CiIcon, ClipboardButton, GlDisclosureDropdown, GlLink, GlSprintf, + CiBadgeLink, }, props: { pipeline: { @@ -51,13 +51,13 @@ export default { }, pipelineInfo() { if (!this.hasRef) { - return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id}'); + return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id} %{status}'); } if (!this.isTriggeredByMergeRequest) { - return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id} for %{ref}'); + return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id} %{status} for %{ref}'); } if (!this.isMergeRequestPipeline) { - return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id} for %{mrId} with %{source}'); + return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id} %{status} for %{mrId} with %{source}'); } return s__( @@ -94,24 +94,30 @@ export default { </script> <template> <div class="dropdown"> - <div class="js-pipeline-info" data-testid="pipeline-info"> - <ci-icon :status="pipeline.details.status" /> + <div class="gl-display-flex gl-flex-wrap gl-gap-2 js-pipeline-info" data-testid="pipeline-info"> <gl-sprintf :message="pipelineInfo"> <template #bold="{ content }"> - <span class="font-weight-bold">{{ content }}</span> + <span class="gl-display-flex gl-font-weight-bold">{{ content }}</span> </template> <template #id> <gl-link :href="pipeline.path" - class="js-pipeline-path link-commit" + class="js-pipeline-path link-commit gl-text-blue-500!" data-testid="pipeline-path" >#{{ pipeline.id }}</gl-link > </template> + <template #status> + <ci-badge-link + :status="pipeline.details.status" + badge-size="sm" + data-testid="pipeline-status-link" + /> + </template> <template #mrId> <gl-link :href="pipeline.merge_request.path" - class="link-commit ref-name" + class="link-commit ref-name gl-text-blue-500!" data-testid="mr-link" >!{{ pipeline.merge_request.iid }}</gl-link > @@ -119,7 +125,7 @@ export default { <template #ref> <gl-link :href="pipeline.ref.path" - class="link-commit ref-name" + class="link-commit ref-name gl-mt-1" data-testid="source-ref-link" >{{ pipeline.ref.name }}</gl-link ><clipboard-button @@ -134,7 +140,7 @@ export default { <template #source> <gl-link :href="pipeline.merge_request.source_branch_path" - class="link-commit ref-name" + class="link-commit ref-name gl-mt-1" data-testid="source-branch-link" >{{ pipeline.merge_request.source_branch }}</gl-link ><clipboard-button @@ -149,7 +155,7 @@ export default { <template #target> <gl-link :href="pipeline.merge_request.target_branch_path" - class="link-commit ref-name" + class="link-commit ref-name gl-mt-1" data-testid="target-branch-link" >{{ pipeline.merge_request.target_branch }}</gl-link ><clipboard-button @@ -167,7 +173,7 @@ export default { :toggle-text="selectedStage" :items="dropdownItems" block - class="gl-mt-3" + class="gl-mt-2" /> </div> </template> diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/trigger_block.vue b/app/assets/javascripts/ci/job_details/components/sidebar/trigger_block.vue index c9172fe0322..315587a3376 100644 --- a/app/assets/javascripts/ci/job_details/components/sidebar/trigger_block.vue +++ b/app/assets/javascripts/ci/job_details/components/sidebar/trigger_block.vue @@ -68,7 +68,7 @@ export default { <template v-if="hasVariables"> <p class="gl-display-flex gl-justify-content-space-between gl-align-items-center"> - <span class="gl-font-weight-bold">{{ __('Trigger variables:') }}</span> + <span class="gl-display-flex gl-font-weight-bold">{{ __('Trigger variables') }}</span> <gl-button v-if="hasValues" |