diff options
Diffstat (limited to 'app/assets/javascripts/kubernetes_dashboard/components/workload_table.vue')
-rw-r--r-- | app/assets/javascripts/kubernetes_dashboard/components/workload_table.vue | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/app/assets/javascripts/kubernetes_dashboard/components/workload_table.vue b/app/assets/javascripts/kubernetes_dashboard/components/workload_table.vue new file mode 100644 index 00000000000..d3704863538 --- /dev/null +++ b/app/assets/javascripts/kubernetes_dashboard/components/workload_table.vue @@ -0,0 +1,85 @@ +<script> +import { GlTable, GlBadge, GlPagination } from '@gitlab/ui'; +import { + WORKLOAD_STATUS_BADGE_VARIANTS, + PAGE_SIZE, + TABLE_HEADING_CLASSES, + DEFAULT_WORKLOAD_TABLE_FIELDS, +} from '../constants'; + +export default { + components: { + GlTable, + GlBadge, + GlPagination, + }, + props: { + items: { + type: Array, + required: true, + }, + fields: { + type: Array, + default: () => DEFAULT_WORKLOAD_TABLE_FIELDS, + required: false, + }, + }, + data() { + return { + currentPage: 1, + }; + }, + computed: { + tableFields() { + return this.fields.map((field) => { + return { + ...field, + thClass: TABLE_HEADING_CLASSES, + sortable: true, + }; + }); + }, + }, + methods: { + selectItem(item) { + this.$emit('select-item', item); + }, + }, + PAGE_SIZE, + WORKLOAD_STATUS_BADGE_VARIANTS, + TABLE_CELL_CLASSES: 'gl-p-2', +}; +</script> + +<template> + <div class="gl-mt-8"> + <gl-table + :items="items" + :fields="tableFields" + :per-page="$options.PAGE_SIZE" + :current-page="currentPage" + tbody-tr-class="gl-hover-cursor-pointer" + stacked="md" + bordered + hover + @row-clicked="selectItem" + > + <template #cell(status)="{ item: { status } }"> + <gl-badge + :variant="$options.WORKLOAD_STATUS_BADGE_VARIANTS[status]" + size="sm" + class="gl-ml-2" + >{{ status }}</gl-badge + > + </template> + </gl-table> + + <gl-pagination + v-model="currentPage" + :per-page="$options.PAGE_SIZE" + :total-items="items.length" + align="center" + class="gl-mt-6" + /> + </div> +</template> |