debian-mirror-gitlab/app/assets/javascripts/pipelines/components/pipelines_table_row.vue

346 lines
9.8 KiB
Vue
Raw Normal View History

2017-09-10 17:25:29 +05:30
<script>
2018-11-08 19:23:39 +05:30
import eventHub from '../event_hub';
import PipelinesActionsComponent from './pipelines_actions.vue';
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';
2019-07-31 22:56:46 +05:30
import PipelineTriggerer from './pipeline_triggerer.vue';
2018-11-08 19:23:39 +05:30
import PipelinesTimeago from './time_ago.vue';
import CommitComponent from '../../vue_shared/components/commit.vue';
import LoadingButton from '../../vue_shared/components/loading_button.vue';
import Icon from '../../vue_shared/components/icon.vue';
import { PIPELINES_TABLE } from '../constants';
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
/**
* Pipeline table row.
*
* Given the received object renders a table row in the pipelines' table.
*/
export default {
components: {
PipelinesActionsComponent,
PipelinesArtifactsComponent,
CommitComponent,
PipelineStage,
PipelineUrl,
2019-07-31 22:56:46 +05:30
PipelineTriggerer,
2018-11-08 19:23:39 +05:30
CiBadge,
PipelinesTimeago,
LoadingButton,
Icon,
},
props: {
pipeline: {
type: Object,
required: true,
2017-08-17 22:00:37 +05:30
},
2018-11-08 19:23:39 +05:30
updateGraphDropdown: {
type: Boolean,
required: false,
default: false,
2017-08-17 22:00:37 +05:30
},
2018-11-08 19:23:39 +05:30
autoDevopsHelpPath: {
type: String,
required: true,
},
viewType: {
type: String,
required: true,
},
cancelingPipeline: {
2018-12-13 13:39:08 +05:30
type: Number,
2018-11-08 19:23:39 +05:30
required: false,
default: null,
},
},
pipelinesTable: PIPELINES_TABLE,
data() {
return {
isRetrying: false,
};
},
computed: {
2018-12-05 23:21:45 +05:30
actions() {
if (!this.pipeline || !this.pipeline.details) {
return [];
}
const { details } = this.pipeline;
2018-12-13 13:39:08 +05:30
return [...(details.manual_actions || []), ...(details.scheduled_actions || [])];
2018-12-05 23:21:45 +05:30
},
2018-11-08 19:23:39 +05:30
/**
* If provided, returns the commit tag.
* Needed to render the commit component column.
*
* This field needs a lot of verification, because of different possible cases:
*
* 1. person who is an author of a commit might be a GitLab user
* 2. if person who is an author of a commit is a GitLab user he/she can have a GitLab avatar
* 3. If GitLab user does not have avatar he/she might have a Gravatar
* 4. If committer is not a GitLab User he/she can have a Gravatar
* 5. We do not have consistent API object in this case
* 6. We should improve API and the code
*
* @returns {Object|Undefined}
*/
commitAuthor() {
let commitAuthorInformation;
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
if (!this.pipeline || !this.pipeline.commit) {
return null;
}
2017-09-10 17:25:29 +05:30
2018-11-08 19:23:39 +05:30
// 1. person who is an author of a commit might be a GitLab user
if (this.pipeline.commit.author) {
// 2. if person who is an author of a commit is a GitLab user
// he/she can have a GitLab avatar
if (this.pipeline.commit.author.avatar_url) {
commitAuthorInformation = this.pipeline.commit.author;
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
// 3. If GitLab user does not have avatar he/she might have a Gravatar
} else if (this.pipeline.commit.author_gravatar_url) {
commitAuthorInformation = Object.assign({}, this.pipeline.commit.author, {
2017-08-17 22:00:37 +05:30
avatar_url: this.pipeline.commit.author_gravatar_url,
2018-11-08 19:23:39 +05:30
});
2017-08-17 22:00:37 +05:30
}
2018-11-08 19:23:39 +05:30
// 4. If committer is not a GitLab User he/she can have a Gravatar
} else {
commitAuthorInformation = {
avatar_url: this.pipeline.commit.author_gravatar_url,
path: `mailto:${this.pipeline.commit.author_email}`,
username: this.pipeline.commit.author_name,
};
}
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
return commitAuthorInformation;
},
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
/**
* If provided, returns the commit tag.
* Needed to render the commit component column.
*
* @returns {String|Undefined}
*/
commitTag() {
if (this.pipeline.ref && this.pipeline.ref.tag) {
return this.pipeline.ref.tag;
}
return undefined;
},
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
/**
* If provided, returns the commit ref.
* Needed to render the commit component column.
*
* Matches `path` prop sent in the API to `ref_url` prop needed
* in the commit component.
*
* @returns {Object|Undefined}
*/
commitRef() {
if (this.pipeline.ref) {
return Object.keys(this.pipeline.ref).reduce((accumulator, prop) => {
if (prop === 'path') {
accumulator.ref_url = this.pipeline.ref[prop];
} else {
accumulator[prop] = this.pipeline.ref[prop];
}
return accumulator;
}, {});
}
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
return undefined;
},
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
/**
* If provided, returns the commit url.
* Needed to render the commit component column.
*
* @returns {String|Undefined}
*/
commitUrl() {
if (this.pipeline.commit && this.pipeline.commit.commit_path) {
return this.pipeline.commit.commit_path;
}
return undefined;
},
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
/**
* If provided, returns the commit short sha.
* Needed to render the commit component column.
*
* @returns {String|Undefined}
*/
commitShortSha() {
if (this.pipeline.commit && this.pipeline.commit.short_id) {
return this.pipeline.commit.short_id;
}
return undefined;
},
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
/**
* If provided, returns the commit title.
* Needed to render the commit component column.
*
* @returns {String|Undefined}
*/
commitTitle() {
if (this.pipeline.commit && this.pipeline.commit.title) {
return this.pipeline.commit.title;
}
return undefined;
},
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
/**
* Timeago components expects a number
*
* @return {type} description
*/
pipelineDuration() {
if (this.pipeline.details && this.pipeline.details.duration) {
return this.pipeline.details.duration;
}
return 0;
},
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
/**
* Timeago component expects a String.
*
* @return {String}
*/
pipelineFinishedAt() {
if (this.pipeline.details && this.pipeline.details.finished_at) {
return this.pipeline.details.finished_at;
}
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
return '';
},
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
pipelineStatus() {
if (this.pipeline.details && this.pipeline.details.status) {
return this.pipeline.details.status;
}
return {};
},
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
displayPipelineActions() {
return (
this.pipeline.flags.retryable ||
this.pipeline.flags.cancelable ||
this.pipeline.details.manual_actions.length ||
this.pipeline.details.artifacts.length
);
},
2018-03-17 18:26:18 +05:30
2018-11-08 19:23:39 +05:30
isChildView() {
return this.viewType === 'child';
},
isCancelling() {
return this.cancelingPipeline === this.pipeline.id;
},
},
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
methods: {
handleCancelClick() {
eventHub.$emit('openConfirmationModal', {
2019-07-07 11:18:12 +05:30
pipeline: this.pipeline,
2018-11-08 19:23:39 +05:30
endpoint: this.pipeline.cancel_path,
});
},
handleRetryClick() {
this.isRetrying = true;
eventHub.$emit('retryPipeline', this.pipeline.retry_path);
2017-09-10 17:25:29 +05:30
},
2018-11-08 19:23:39 +05:30
},
};
2017-09-10 17:25:29 +05:30
</script>
<template>
<div class="commit gl-responsive-table-row">
<div class="table-section section-10 commit-link">
2019-02-15 15:39:39 +05:30
<div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Status') }}</div>
2017-09-10 17:25:29 +05:30
<div class="table-mobile-content">
2019-02-15 15:39:39 +05:30
<ci-badge :status="pipelineStatus" :show-text="!isChildView" />
2017-09-10 17:25:29 +05:30
</div>
</div>
2017-08-17 22:00:37 +05:30
2019-02-15 15:39:39 +05:30
<pipeline-url :pipeline="pipeline" :auto-devops-help-path="autoDevopsHelpPath" />
2019-07-31 22:56:46 +05:30
<pipeline-triggerer :pipeline="pipeline" />
2017-08-17 22:00:37 +05:30
2019-07-31 22:56:46 +05:30
<div class="table-section section-wrap section-20">
2019-02-15 15:39:39 +05:30
<div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Commit') }}</div>
2017-09-10 17:25:29 +05:30
<div class="table-mobile-content">
2017-08-17 22:00:37 +05:30
<commit-component
:tag="commitTag"
:commit-ref="commitRef"
:commit-url="commitUrl"
2019-07-07 11:18:12 +05:30
:merge-request-ref="pipeline.merge_request"
2017-08-17 22:00:37 +05:30
:short-sha="commitShortSha"
:title="commitTitle"
2018-03-17 18:26:18 +05:30
:author="commitAuthor"
2019-07-07 11:18:12 +05:30
:show-ref-info="!isChildView"
2018-03-17 18:26:18 +05:30
/>
2017-09-10 17:25:29 +05:30
</div>
</div>
2017-08-17 22:00:37 +05:30
2019-07-31 22:56:46 +05:30
<div class="table-section section-wrap section-15 stage-cell">
2019-02-15 15:39:39 +05:30
<div class="table-mobile-header" role="rowheader">{{ s__('Pipeline|Stages') }}</div>
2017-09-10 17:25:29 +05:30
<div class="table-mobile-content">
2018-03-17 18:26:18 +05:30
<template v-if="pipeline.details.stages.length > 0">
<div
v-for="(stage, index) in pipeline.details.stages"
2018-11-08 19:23:39 +05:30
:key="index"
2019-02-15 15:39:39 +05:30
class="stage-container dropdown js-mini-pipeline-graph"
>
2018-03-17 18:26:18 +05:30
<pipeline-stage
2018-10-15 14:42:47 +05:30
:type="$options.pipelinesTable"
2018-03-17 18:26:18 +05:30
:stage="stage"
:update-dropdown="updateGraphDropdown"
2017-09-10 17:25:29 +05:30
/>
2018-03-17 18:26:18 +05:30
</div>
</template>
2017-09-10 17:25:29 +05:30
</div>
</div>
2017-08-17 22:00:37 +05:30
2019-02-15 15:39:39 +05:30
<pipelines-timeago :duration="pipelineDuration" :finished-time="pipelineFinishedAt" />
2017-08-17 22:00:37 +05:30
2017-09-10 17:25:29 +05:30
<div
v-if="displayPipelineActions"
2018-11-08 19:23:39 +05:30
class="table-section section-20 table-button-footer pipeline-actions"
>
2017-09-10 17:25:29 +05:30
<div class="btn-group table-action-buttons">
2019-02-15 15:39:39 +05:30
<pipelines-actions-component v-if="actions.length > 0" :actions="actions" />
2017-08-17 22:00:37 +05:30
2017-09-10 17:25:29 +05:30
<pipelines-artifacts-component
v-if="pipeline.details.artifacts.length"
:artifacts="pipeline.details.artifacts"
2018-11-20 20:47:30 +05:30
class="d-md-block"
2018-03-17 18:26:18 +05:30
/>
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
<loading-button
2017-09-10 17:25:29 +05:30
v-if="pipeline.flags.retryable"
2018-11-08 19:23:39 +05:30
:loading="isRetrying"
:disabled="isRetrying"
container-class="js-pipelines-retry-button btn btn-default btn-retry"
@click="handleRetryClick"
>
<icon name="repeat" />
</loading-button>
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
<loading-button
2017-09-10 17:25:29 +05:30
v-if="pipeline.flags.cancelable"
2018-11-08 19:23:39 +05:30
:loading="isCancelling"
:disabled="isCancelling"
2018-03-17 18:26:18 +05:30
data-toggle="modal"
2018-03-27 19:54:05 +05:30
data-target="#confirmation-modal"
2018-11-08 19:23:39 +05:30
container-class="js-pipelines-cancel-button btn btn-remove"
@click="handleCancelClick"
>
<icon name="close" />
</loading-button>
2017-09-10 17:25:29 +05:30
</div>
</div>
</div>
</template>