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

140 lines
3.5 KiB
Vue
Raw Normal View History

2017-09-10 17:25:29 +05:30
<script>
2018-03-27 19:54:05 +05:30
import modal from '~/vue_shared/components/modal.vue';
import { s__, sprintf } from '~/locale';
2017-09-10 17:25:29 +05:30
import pipelinesTableRowComponent from './pipelines_table_row.vue';
2018-03-27 19:54:05 +05:30
import eventHub from '../event_hub';
2017-09-10 17:25:29 +05:30
/**
* Pipelines Table Component.
*
* Given an array of objects, renders a table.
*/
export default {
2018-03-17 18:26:18 +05:30
components: {
pipelinesTableRowComponent,
2018-03-27 19:54:05 +05:30
modal,
2018-03-17 18:26:18 +05:30
},
2017-09-10 17:25:29 +05:30
props: {
pipelines: {
type: Array,
required: true,
},
updateGraphDropdown: {
type: Boolean,
required: false,
default: false,
},
2018-03-17 18:26:18 +05:30
autoDevopsHelpPath: {
type: String,
required: true,
},
viewType: {
type: String,
required: true,
},
2017-09-10 17:25:29 +05:30
},
2018-03-27 19:54:05 +05:30
data() {
return {
pipelineId: '',
endpoint: '',
type: '',
};
},
computed: {
modalTitle() {
return this.type === 'stop' ?
sprintf(s__('Pipeline|Stop pipeline #%{pipelineId}?'), {
pipelineId: `'${this.pipelineId}'`,
}, false) :
sprintf(s__('Pipeline|Retry pipeline #%{pipelineId}?'), {
pipelineId: `'${this.pipelineId}'`,
}, false);
},
modalText() {
return this.type === 'stop' ?
sprintf(s__('Pipeline|Youre about to stop pipeline %{pipelineId}.'), {
pipelineId: `<strong>#${this.pipelineId}</strong>`,
}, false) :
sprintf(s__('Pipeline|Youre about to retry pipeline %{pipelineId}.'), {
pipelineId: `<strong>#${this.pipelineId}</strong>`,
}, false);
},
primaryButtonLabel() {
return this.type === 'stop' ? s__('Pipeline|Stop pipeline') : s__('Pipeline|Retry pipeline');
},
},
created() {
eventHub.$on('openConfirmationModal', this.setModalData);
},
beforeDestroy() {
eventHub.$off('openConfirmationModal', this.setModalData);
},
methods: {
setModalData(data) {
this.pipelineId = data.pipelineId;
this.endpoint = data.endpoint;
this.type = data.type;
},
onSubmit() {
eventHub.$emit('postAction', this.endpoint);
},
},
2017-09-10 17:25:29 +05:30
};
</script>
<template>
<div class="ci-table">
<div
class="gl-responsive-table-row table-row-header"
2018-03-17 18:26:18 +05:30
role="row"
>
2017-09-10 17:25:29 +05:30
<div
class="table-section section-10 js-pipeline-status pipeline-status"
2018-03-17 18:26:18 +05:30
role="rowheader"
>
2017-09-10 17:25:29 +05:30
Status
</div>
<div
class="table-section section-15 js-pipeline-info pipeline-info"
2018-03-17 18:26:18 +05:30
role="rowheader"
>
2017-09-10 17:25:29 +05:30
Pipeline
</div>
<div
2018-03-17 18:26:18 +05:30
class="table-section section-20 js-pipeline-commit pipeline-commit"
role="rowheader"
>
2017-09-10 17:25:29 +05:30
Commit
</div>
<div
2018-03-17 18:26:18 +05:30
class="table-section section-20 js-pipeline-stages pipeline-stages"
role="rowheader"
>
2017-09-10 17:25:29 +05:30
Stages
</div>
</div>
<pipelines-table-row-component
v-for="model in pipelines"
:key="model.id"
:pipeline="model"
:update-graph-dropdown="updateGraphDropdown"
2018-03-17 18:26:18 +05:30
:auto-devops-help-path="autoDevopsHelpPath"
:view-type="viewType"
2017-09-10 17:25:29 +05:30
/>
2018-03-27 19:54:05 +05:30
<modal
id="confirmation-modal"
:title="modalTitle"
:text="modalText"
kind="danger"
:primary-button-label="primaryButtonLabel"
@submit="onSubmit"
>
<template
slot="body"
slot-scope="props"
>
<p v-html="props.text"></p>
</template>
</modal>
2017-09-10 17:25:29 +05:30
</div>
</template>