Add pipeline triggerer column, adjust columns
Move pipeline triggerer avatar to its own column Adjust the widths of other columns to accommodate new column Add wrap class to commit column to prevent overlap
This commit is contained in:
parent
d80b34394f
commit
1d2cb63414
|
@ -0,0 +1,33 @@
|
|||
<script>
|
||||
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
UserAvatarLink,
|
||||
},
|
||||
props: {
|
||||
pipeline: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.pipeline.user;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="table-section section-10 d-none d-sm-none d-md-block pipeline-triggerer">
|
||||
<user-avatar-link
|
||||
v-if="user"
|
||||
:link-href="user.path"
|
||||
:img-src="user.avatar_url"
|
||||
:img-size="26"
|
||||
:tooltip-text="user.name"
|
||||
class="prepend-left-default js-pipeline-url-user"
|
||||
/>
|
||||
<span v-else class="prepend-left-default js-pipeline-url-api api"> API </span>
|
||||
</div>
|
||||
</template>
|
|
@ -59,19 +59,10 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="table-section section-15 d-none d-sm-none d-md-block pipeline-tags">
|
||||
<div class="table-section section-10 d-none d-sm-none d-md-block pipeline-tags">
|
||||
<gl-link :href="pipeline.path" class="js-pipeline-url-link">
|
||||
<span class="pipeline-id">#{{ pipeline.id }}</span>
|
||||
</gl-link>
|
||||
<span>by</span>
|
||||
<user-avatar-link
|
||||
v-if="user"
|
||||
:link-href="user.path"
|
||||
:img-src="user.avatar_url"
|
||||
:tooltip-text="user.name"
|
||||
class="js-pipeline-url-user"
|
||||
/>
|
||||
<span v-if="!user" class="js-pipeline-url-api api"> API </span>
|
||||
<div class="label-container">
|
||||
<span
|
||||
v-if="pipeline.flags.latest"
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
import { GlTooltipDirective } from '@gitlab/ui';
|
||||
import PipelinesTableRowComponent from './pipelines_table_row.vue';
|
||||
import PipelineStopModal from './pipeline_stop_modal.vue';
|
||||
import eventHub from '../event_hub';
|
||||
|
@ -13,6 +14,9 @@ export default {
|
|||
PipelinesTableRowComponent,
|
||||
PipelineStopModal,
|
||||
},
|
||||
directives: {
|
||||
GlTooltip: GlTooltipDirective,
|
||||
},
|
||||
props: {
|
||||
pipelines: {
|
||||
type: Array,
|
||||
|
@ -62,16 +66,19 @@ export default {
|
|||
<template>
|
||||
<div class="ci-table">
|
||||
<div class="gl-responsive-table-row table-row-header" role="row">
|
||||
<div class="table-section section-10 js-pipeline-status pipeline-status" role="rowheader">
|
||||
<div class="table-section section-10 js-pipeline-status" role="rowheader">
|
||||
{{ s__('Pipeline|Status') }}
|
||||
</div>
|
||||
<div class="table-section section-15 js-pipeline-info pipeline-info" role="rowheader">
|
||||
<div class="table-section section-10 js-pipeline-info pipeline-info" role="rowheader">
|
||||
{{ s__('Pipeline|Pipeline') }}
|
||||
</div>
|
||||
<div class="table-section section-10 js-triggerer-info triggerer-info" role="rowheader">
|
||||
{{ s__('Pipeline|Triggerer') }}
|
||||
</div>
|
||||
<div class="table-section section-20 js-pipeline-commit pipeline-commit" role="rowheader">
|
||||
{{ s__('Pipeline|Commit') }}
|
||||
</div>
|
||||
<div class="table-section section-20 js-pipeline-stages pipeline-stages" role="rowheader">
|
||||
<div class="table-section section-15 js-pipeline-stages pipeline-stages" role="rowheader">
|
||||
{{ s__('Pipeline|Stages') }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -5,6 +5,7 @@ import PipelinesArtifactsComponent from './pipelines_artifacts.vue';
|
|||
import CiBadge from '../../vue_shared/components/ci_badge_link.vue';
|
||||
import PipelineStage from './stage.vue';
|
||||
import PipelineUrl from './pipeline_url.vue';
|
||||
import PipelineTriggerer from './pipeline_triggerer.vue';
|
||||
import PipelinesTimeago from './time_ago.vue';
|
||||
import CommitComponent from '../../vue_shared/components/commit.vue';
|
||||
import LoadingButton from '../../vue_shared/components/loading_button.vue';
|
||||
|
@ -23,6 +24,7 @@ export default {
|
|||
CommitComponent,
|
||||
PipelineStage,
|
||||
PipelineUrl,
|
||||
PipelineTriggerer,
|
||||
CiBadge,
|
||||
PipelinesTimeago,
|
||||
LoadingButton,
|
||||
|
@ -264,8 +266,9 @@ export default {
|
|||
</div>
|
||||
|
||||
<pipeline-url :pipeline="pipeline" :auto-devops-help-path="autoDevopsHelpPath" />
|
||||
<pipeline-triggerer :pipeline="pipeline" />
|
||||
|
||||
<div class="table-section section-20">
|
||||
<div class="table-section section-wrap section-20">
|
||||
<div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Commit') }}</div>
|
||||
<div class="table-mobile-content">
|
||||
<commit-component
|
||||
|
@ -281,7 +284,7 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-section section-wrap section-20 stage-cell">
|
||||
<div class="table-section section-wrap section-15 stage-cell">
|
||||
<div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Stages') }}</div>
|
||||
<div class="table-mobile-content">
|
||||
<template v-if="pipeline.details.stages.length > 0">
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Improve pipelines table spacing, add triggerer column
|
||||
merge_request: 26136
|
||||
author:
|
||||
type: changed
|
|
@ -6652,6 +6652,9 @@ msgstr ""
|
|||
msgid "Pipeline|Stop pipeline #%{pipelineId}?"
|
||||
msgstr ""
|
||||
|
||||
msgid "Pipeline|Triggerer"
|
||||
msgstr ""
|
||||
|
||||
msgid "Pipeline|Variables"
|
||||
msgstr ""
|
||||
|
||||
|
|
Loading…
Reference in New Issue