1 files changed, 82 insertions, 0 deletions
diff --git a/app/assets/javascripts/ci/runner/components/runner_jobs.vue b/app/assets/javascripts/ci/runner/components/runner_jobs.vue
new file mode 100644
index 00000000000..9003eba3636
--- /dev/null
+++ b/app/assets/javascripts/ci/runner/components/runner_jobs.vue
@@ -0,0 +1,82 @@
+<script>
+import { GlSkeletonLoader } from '@gitlab/ui';
+import { createAlert } from '~/flash';
+import runnerJobsQuery from '../graphql/show/runner_jobs.query.graphql';
+import { I18N_FETCH_ERROR, I18N_NO_JOBS_FOUND, RUNNER_DETAILS_JOBS_PAGE_SIZE } from '../constants';
+import { captureException } from '../sentry_utils';
+import { getPaginationVariables } from '../utils';
+import RunnerJobsTable from './runner_jobs_table.vue';
+import RunnerPagination from './runner_pagination.vue';
+
+export default {
+  name: 'RunnerJobs',
+  components: {
+    GlSkeletonLoader,
+    RunnerJobsTable,
+    RunnerPagination,
+  },
+  props: {
+    runner: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      jobs: {
+        items: [],
+        pageInfo: {},
+      },
+      pagination: {},
+    };
+  },
+  apollo: {
+    jobs: {
+      query: runnerJobsQuery,
+      variables() {
+        return this.variables;
+      },
+      update({ runner }) {
+        return {
+          items: runner?.jobs?.nodes || [],
+          pageInfo: runner?.jobs?.pageInfo || {},
+        };
+      },
+      error(error) {
+        createAlert({ message: I18N_FETCH_ERROR });
+        captureException({ error, component: this.$options.name });
+      },
+    },
+  },
+  computed: {
+    variables() {
+      const { id } = this.runner;
+      return {
+        id,
+        ...getPaginationVariables(this.pagination, RUNNER_DETAILS_JOBS_PAGE_SIZE),
+      };
+    },
+    loading() {
+      return this.$apollo.queries.jobs.loading;
+    },
+  },
+  methods: {
+    onPaginationInput(value) {
+      this.pagination = value;
+    },
+  },
+  I18N_NO_JOBS_FOUND,
+};
+</script>
+
+<template>
+  <div class="gl-pt-3">
+    <div v-if="loading" class="gl-py-5">
+      <gl-skeleton-loader />
+    </div>
+    <runner-jobs-table v-else-if="jobs.items.length" :jobs="jobs.items" />
+    <p v-else>{{ $options.I18N_NO_JOBS_FOUND }}</p>
+
+    <runner-pagination :disabled="loading" :page-info="jobs.pageInfo" @input="onPaginationInput" />
+  </div>
+</template>