1 files changed, 95 insertions, 0 deletions
diff --git a/app/assets/javascripts/runner/components/runner_jobs_table.vue b/app/assets/javascripts/runner/components/runner_jobs_table.vue
new file mode 100644
index 00000000000..7817577bab0
--- /dev/null
+++ b/app/assets/javascripts/runner/components/runner_jobs_table.vue
@@ -0,0 +1,95 @@
+<script>
+import { GlTableLite } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import CiBadge from '~/vue_shared/components/ci_badge_link.vue';
+import RunnerTags from '~/runner/components/runner_tags.vue';
+import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+import { tableField } from '../utils';
+import LinkCell from './cells/link_cell.vue';
+
+export default {
+  components: {
+    CiBadge,
+    GlTableLite,
+    LinkCell,
+    RunnerTags,
+    TimeAgo,
+  },
+  props: {
+    jobs: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    trAttr(job) {
+      if (job?.id) {
+        return { 'data-testid': `job-row-${getIdFromGraphQLId(job.id)}` };
+      }
+      return {};
+    },
+    jobId(job) {
+      return getIdFromGraphQLId(job.id);
+    },
+    jobPath(job) {
+      return job.detailedStatus?.detailsPath;
+    },
+    projectName(job) {
+      return job.pipeline?.project?.name;
+    },
+    projectWebUrl(job) {
+      return job.pipeline?.project?.webUrl;
+    },
+    commitShortSha(job) {
+      return job.shortSha;
+    },
+    commitPath(job) {
+      return job.commitPath;
+    },
+  },
+  fields: [
+    tableField({ key: 'status', label: s__('Job|Status') }),
+    tableField({ key: 'job', label: __('Job') }),
+    tableField({ key: 'project', label: __('Project') }),
+    tableField({ key: 'commit', label: __('Commit') }),
+    tableField({ key: 'finished_at', label: s__('Job|Finished at') }),
+    tableField({ key: 'tags', label: s__('Runners|Tags') }),
+  ],
+};
+</script>
+
+<template>
+  <gl-table-lite
+    :items="jobs"
+    :fields="$options.fields"
+    :tbody-tr-attr="trAttr"
+    primary-key="id"
+    stacked="md"
+    fixed
+  >
+    <template #cell(status)="{ item = {} }">
+      <ci-badge v-if="item.detailedStatus" :status="item.detailedStatus" />
+    </template>
+
+    <template #cell(job)="{ item = {} }">
+      <link-cell :href="jobPath(item)"> #{{ jobId(item) }} </link-cell>
+    </template>
+
+    <template #cell(project)="{ item = {} }">
+      <link-cell :href="projectWebUrl(item)">{{ projectName(item) }}</link-cell>
+    </template>
+
+    <template #cell(commit)="{ item = {} }">
+      <link-cell :href="commitPath(item)"> {{ commitShortSha(item) }}</link-cell>
+    </template>
+
+    <template #cell(tags)="{ item = {} }">
+      <runner-tags :tag-list="item.tags" />
+    </template>
+
+    <template #cell(finished_at)="{ item = {} }">
+      <time-ago v-if="item.finishedAt" :time="item.finishedAt" />
+    </template>
+  </gl-table-lite>
+</template>