diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue new file mode 100644 index 00000000000..b8112149778 --- /dev/null +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipelines_table.vue @@ -0,0 +1,107 @@ +<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'; + +/** + * Pipelines Table Component. + * + * Given an array of objects, renders a table. + */ +export default { + components: { + PipelinesTableRowComponent, + PipelineStopModal, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + pipelines: { + type: Array, + required: true, + }, + pipelineScheduleUrl: { + type: String, + required: false, + default: '', + }, + updateGraphDropdown: { + type: Boolean, + required: false, + default: false, + }, + autoDevopsHelpPath: { + type: String, + required: true, + }, + viewType: { + type: String, + required: true, + }, + }, + data() { + return { + pipelineId: 0, + pipeline: {}, + endpoint: '', + cancelingPipeline: null, + }; + }, + watch: { + pipelines() { + this.cancelingPipeline = null; + }, + }, + created() { + eventHub.$on('openConfirmationModal', this.setModalData); + }, + beforeDestroy() { + eventHub.$off('openConfirmationModal', this.setModalData); + }, + methods: { + setModalData(data) { + this.pipelineId = data.pipeline.id; + this.pipeline = data.pipeline; + this.endpoint = data.endpoint; + }, + onSubmit() { + eventHub.$emit('postAction', this.endpoint); + this.cancelingPipeline = this.pipelineId; + }, + }, +}; +</script> +<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" role="rowheader"> + {{ s__('Pipeline|Status') }} + </div> + <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-15 js-pipeline-stages pipeline-stages" role="rowheader"> + {{ s__('Pipeline|Stages') }} + </div> + </div> + <pipelines-table-row-component + v-for="model in pipelines" + :key="model.id" + :pipeline="model" + :pipeline-schedule-url="pipelineScheduleUrl" + :update-graph-dropdown="updateGraphDropdown" + :auto-devops-help-path="autoDevopsHelpPath" + :view-type="viewType" + :canceling-pipeline="cancelingPipeline" + /> + <pipeline-stop-modal :pipeline="pipeline" @submit="onSubmit" /> + </div> +</template> |