diff options
Diffstat (limited to 'app/assets/javascripts/ci/jobs_page/components/jobs_table.vue')
-rw-r--r-- | app/assets/javascripts/ci/jobs_page/components/jobs_table.vue | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/jobs_page/components/jobs_table.vue b/app/assets/javascripts/ci/jobs_page/components/jobs_table.vue new file mode 100644 index 00000000000..23100a3f3db --- /dev/null +++ b/app/assets/javascripts/ci/jobs_page/components/jobs_table.vue @@ -0,0 +1,112 @@ +<script> +import { GlTable } from '@gitlab/ui'; +import { s__ } from '~/locale'; +import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue'; +import ProjectCell from '~/ci/admin/jobs_table/components/cells/project_cell.vue'; +import RunnerCell from '~/ci/admin/jobs_table/components/cells/runner_cell.vue'; +import { DEFAULT_FIELDS } from '../constants'; +import ActionsCell from './job_cells/actions_cell.vue'; +import DurationCell from './job_cells/duration_cell.vue'; +import JobCell from './job_cells/job_cell.vue'; +import PipelineCell from './job_cells/pipeline_cell.vue'; + +export default { + i18n: { + emptyText: s__('Jobs|No jobs to show'), + }, + components: { + ActionsCell, + CiBadgeLink, + DurationCell, + GlTable, + JobCell, + PipelineCell, + ProjectCell, + RunnerCell, + }, + props: { + jobs: { + type: Array, + required: true, + }, + tableFields: { + type: Array, + required: false, + default: () => DEFAULT_FIELDS, + }, + admin: { + type: Boolean, + required: false, + default: false, + }, + }, + methods: { + formatCoverage(coverage) { + return coverage ? `${coverage}%` : ''; + }, + }, +}; +</script> + +<template> + <gl-table + :items="jobs" + :fields="tableFields" + :tbody-tr-attr="{ 'data-testid': 'jobs-table-row' }" + :empty-text="$options.i18n.emptyText" + data-testid="jobs-table" + show-empty + stacked="lg" + fixed + > + <template #table-colgroup="{ fields }"> + <col v-for="field in fields" :key="field.key" :class="field.columnClass" /> + </template> + + <template #cell(status)="{ item }"> + <ci-badge-link :status="item.detailedStatus" /> + </template> + + <template #cell(job)="{ item }"> + <job-cell :job="item" /> + </template> + + <template #cell(pipeline)="{ item }"> + <pipeline-cell :job="item" /> + </template> + + <template v-if="admin" #cell(project)="{ item }"> + <project-cell :job="item" /> + </template> + + <template v-if="admin" #cell(runner)="{ item }"> + <runner-cell :job="item" /> + </template> + + <template #cell(stage)="{ item }"> + <div class="gl-text-truncate"> + <span v-if="item.stage" data-testid="job-stage-name">{{ item.stage.name }}</span> + </div> + </template> + + <template #cell(name)="{ item }"> + <div class="gl-text-truncate"> + <span data-testid="job-name">{{ item.name }}</span> + </div> + </template> + + <template #cell(duration)="{ item }"> + <duration-cell :job="item" /> + </template> + + <template #cell(coverage)="{ item }"> + <span v-if="item.coverage" data-testid="job-coverage">{{ + formatCoverage(item.coverage) + }}</span> + </template> + + <template #cell(actions)="{ item }"> + <actions-cell class="gl-float-right" :job="item" /> + </template> + </gl-table> +</template> |