2017-06-14 09:04:50 -04:00
|
|
|
<script>
|
2019-03-13 19:35:23 -04:00
|
|
|
import { GlTooltipDirective } from '@gitlab/ui';
|
2018-06-27 10:28:05 -04:00
|
|
|
import PipelinesTableRowComponent from './pipelines_table_row.vue';
|
2019-02-12 16:55:28 -05:00
|
|
|
import PipelineStopModal from './pipeline_stop_modal.vue';
|
2018-06-27 10:28:05 -04:00
|
|
|
import eventHub from '../event_hub';
|
2017-06-14 09:04:50 -04:00
|
|
|
|
2018-06-27 10:28:05 -04:00
|
|
|
/**
|
|
|
|
* Pipelines Table Component.
|
|
|
|
*
|
|
|
|
* Given an array of objects, renders a table.
|
|
|
|
*/
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
PipelinesTableRowComponent,
|
2019-02-12 16:55:28 -05:00
|
|
|
PipelineStopModal,
|
2018-06-27 10:28:05 -04:00
|
|
|
},
|
2019-03-13 19:35:23 -04:00
|
|
|
directives: {
|
|
|
|
GlTooltip: GlTooltipDirective,
|
|
|
|
},
|
2018-06-27 10:28:05 -04:00
|
|
|
props: {
|
|
|
|
pipelines: {
|
|
|
|
type: Array,
|
|
|
|
required: true,
|
2018-01-04 19:18:35 -05:00
|
|
|
},
|
2018-06-27 10:28:05 -04:00
|
|
|
updateGraphDropdown: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: false,
|
2017-06-14 09:04:50 -04:00
|
|
|
},
|
2018-06-27 10:28:05 -04:00
|
|
|
autoDevopsHelpPath: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
2018-02-13 23:16:36 -05:00
|
|
|
},
|
2018-06-27 10:28:05 -04:00
|
|
|
viewType: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
2018-10-09 12:16:54 -04:00
|
|
|
pipelineId: 0,
|
2019-02-12 16:55:28 -05:00
|
|
|
pipeline: {},
|
2018-06-27 10:28:05 -04:00
|
|
|
endpoint: '',
|
|
|
|
cancelingPipeline: null,
|
|
|
|
};
|
|
|
|
},
|
2019-06-28 18:36:56 -04:00
|
|
|
watch: {
|
|
|
|
pipelines() {
|
|
|
|
this.cancelingPipeline = null;
|
|
|
|
},
|
|
|
|
},
|
2018-06-27 10:28:05 -04:00
|
|
|
created() {
|
|
|
|
eventHub.$on('openConfirmationModal', this.setModalData);
|
|
|
|
},
|
|
|
|
beforeDestroy() {
|
|
|
|
eventHub.$off('openConfirmationModal', this.setModalData);
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
setModalData(data) {
|
2019-02-12 16:55:28 -05:00
|
|
|
this.pipelineId = data.pipeline.id;
|
|
|
|
this.pipeline = data.pipeline;
|
2018-06-27 10:28:05 -04:00
|
|
|
this.endpoint = data.endpoint;
|
2018-02-13 23:16:36 -05:00
|
|
|
},
|
2018-06-27 10:28:05 -04:00
|
|
|
onSubmit() {
|
|
|
|
eventHub.$emit('postAction', this.endpoint);
|
|
|
|
this.cancelingPipeline = this.pipelineId;
|
2018-02-13 23:16:36 -05:00
|
|
|
},
|
2018-06-27 10:28:05 -04:00
|
|
|
},
|
|
|
|
};
|
2017-06-14 09:04:50 -04:00
|
|
|
</script>
|
|
|
|
<template>
|
2017-06-16 08:00:28 -04:00
|
|
|
<div class="ci-table">
|
2018-11-16 15:07:38 -05:00
|
|
|
<div class="gl-responsive-table-row table-row-header" role="row">
|
2019-03-13 19:35:23 -04:00
|
|
|
<div class="table-section section-10 js-pipeline-status" role="rowheader">
|
2018-10-30 08:59:33 -04:00
|
|
|
{{ s__('Pipeline|Status') }}
|
2017-06-16 08:00:28 -04:00
|
|
|
</div>
|
2019-03-13 19:35:23 -04:00
|
|
|
<div class="table-section section-10 js-pipeline-info pipeline-info" role="rowheader">
|
2018-10-30 08:59:33 -04:00
|
|
|
{{ s__('Pipeline|Pipeline') }}
|
2017-06-16 08:00:28 -04:00
|
|
|
</div>
|
2019-03-13 19:35:23 -04:00
|
|
|
<div class="table-section section-10 js-triggerer-info triggerer-info" role="rowheader">
|
|
|
|
{{ s__('Pipeline|Triggerer') }}
|
|
|
|
</div>
|
2018-11-16 15:07:38 -05:00
|
|
|
<div class="table-section section-20 js-pipeline-commit pipeline-commit" role="rowheader">
|
2018-10-30 08:59:33 -04:00
|
|
|
{{ s__('Pipeline|Commit') }}
|
2017-06-16 08:00:28 -04:00
|
|
|
</div>
|
2019-03-13 19:35:23 -04:00
|
|
|
<div class="table-section section-15 js-pipeline-stages pipeline-stages" role="rowheader">
|
2018-10-30 08:59:33 -04:00
|
|
|
{{ s__('Pipeline|Stages') }}
|
2017-06-16 08:00:28 -04:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<pipelines-table-row-component
|
|
|
|
v-for="model in pipelines"
|
|
|
|
:key="model.id"
|
|
|
|
:pipeline="model"
|
|
|
|
:update-graph-dropdown="updateGraphDropdown"
|
2017-09-01 06:20:14 -04:00
|
|
|
:auto-devops-help-path="autoDevopsHelpPath"
|
2017-10-18 12:30:31 -04:00
|
|
|
:view-type="viewType"
|
2018-05-23 12:01:00 -04:00
|
|
|
:canceling-pipeline="cancelingPipeline"
|
2017-06-16 08:00:28 -04:00
|
|
|
/>
|
2019-03-07 03:52:49 -05:00
|
|
|
<pipeline-stop-modal :pipeline="pipeline" @submit="onSubmit" />
|
2017-06-16 08:00:28 -04:00
|
|
|
</div>
|
2017-06-14 09:04:50 -04:00
|
|
|
</template>
|