Improve Job detail view to make it refreshed in real-time instead of reloading

1 files changed, 68 insertions, 0 deletions

diff --git a/app/assets/javascripts/jobs/job_details_bundle.js b/app/assets/javascripts/jobs/job_details_bundle.js
new file mode 100644
index 00000000000..939d17129de
--- /dev/null
+++ b/app/assets/javascripts/jobs/job_details_bundle.js
@@ -0,0 +1,68 @@
+/* global Flash */
+
+import Vue from 'vue';
+import JobMediator from './job_details_mediator';
+import jobHeader from './components/header.vue';
+import detailsBlock from './components/sidebar_details_block.vue';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const dataset = document.getElementById('js-job-details-vue').dataset;
+  const mediator = new JobMediator({ endpoint: dataset.endpoint });
+
+  mediator.fetchJob();
+
+  // Header
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: '#js-build-header-vue',
+    data() {
+      return {
+        mediator,
+      };
+    },
+    components: {
+      jobHeader,
+    },
+    mounted() {
+      this.mediator.initBuildClass();
+    },
+    updated() {
+      // Wait for flash message to be appended
+      Vue.nextTick(() => {
+        if (this.mediator.build) {
+          this.mediator.build.verifyTopPosition();
+        }
+      });
+    },
+    render(createElement) {
+      return createElement('job-header', {
+        props: {
+          isLoading: this.mediator.state.isLoading,
+          job: this.mediator.store.state.job,
+        },
+      });
+    },
+  });
+
+  // Sidebar information block
+  // eslint-disable-next-line
+  new Vue({
+    el: '#js-details-block-vue',
+    data() {
+      return {
+        mediator,
+      };
+    },
+    components: {
+      detailsBlock,
+    },
+    render(createElement) {
+      return createElement('details-block', {
+        props: {
+          isLoading: this.mediator.state.isLoading,
+          job: this.mediator.store.state.job,
+        },
+      });
+    },
+  });
+});