1 files changed, 85 insertions, 0 deletions
diff --git a/app/assets/javascripts/jobs/components/table/jobs_table_app.vue b/app/assets/javascripts/jobs/components/table/jobs_table_app.vue
new file mode 100644
index 00000000000..55954e31654
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/table/jobs_table_app.vue
@@ -0,0 +1,85 @@
+<script>
+import { GlAlert, GlSkeletonLoader } from '@gitlab/ui';
+import { __ } from '~/locale';
+import GetJobs from './graphql/queries/get_jobs.query.graphql';
+import JobsTable from './jobs_table.vue';
+import JobsTableTabs from './jobs_table_tabs.vue';
+
+export default {
+  i18n: {
+    errorMsg: __('There was an error fetching the jobs for your project.'),
+  },
+  components: {
+    GlAlert,
+    GlSkeletonLoader,
+    JobsTable,
+    JobsTableTabs,
+  },
+  inject: {
+    fullPath: {
+      default: '',
+    },
+  },
+  apollo: {
+    jobs: {
+      query: GetJobs,
+      variables() {
+        return {
+          fullPath: this.fullPath,
+        };
+      },
+      update({ project }) {
+        return project?.jobs;
+      },
+      error() {
+        this.hasError = true;
+      },
+    },
+  },
+  data() {
+    return {
+      jobs: null,
+      hasError: false,
+      isAlertDismissed: false,
+    };
+  },
+  computed: {
+    shouldShowAlert() {
+      return this.hasError && !this.isAlertDismissed;
+    },
+  },
+  methods: {
+    fetchJobsByStatus(scope) {
+      this.$apollo.queries.jobs.refetch({ statuses: scope });
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-alert
+      v-if="shouldShowAlert"
+      class="gl-mt-2"
+      variant="danger"
+      dismissible
+      @dismiss="isAlertDismissed = true"
+    >
+      {{ $options.i18n.errorMsg }}
+    </gl-alert>
+
+    <jobs-table-tabs @fetchJobsByStatus="fetchJobsByStatus" />
+
+    <div v-if="$apollo.loading" class="gl-mt-5">
+      <gl-skeleton-loader
+        preserve-aspect-ratio="none"
+        equal-width-lines
+        :lines="5"
+        :width="600"
+        :height="66"
+      />
+    </div>
+
+    <jobs-table v-else :jobs="jobs.nodes" />
+  </div>
+</template>