Render json endpoint

app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue

@@ -82,7 +82,8 @@ export default {
       data-toggle="dropdown"
       data-container="body"
       class="dropdown-menu-toggle build-content"
-      :title="tooltipText">
+      :title="tooltipText"
+    >
 
       <job-name-component
         :name="job.name"
@@ -99,10 +100,10 @@ export default {
         <ul>
           <li
             v-for="(item, i) in job.jobs"
-            :key="i">
+            :key="i"
+          >
             <job-component
               :job="item"
-              :is-dropdown="true"
               css-class-job-name="mini-pipeline-graph-dropdown-item"
             />
           </li>

app/assets/javascripts/pipelines/components/graph/job_component.vue

@@ -48,12 +48,6 @@ export default {
       required: false,
       default: '',
     },
-
-    isDropdown: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
 
   computed: {

app/assets/javascripts/pipelines/components/stage.vue

 <script>
-
   /**
    * Renders each stage of the pipeline mini graph.
    *
@@ -19,12 +18,14 @@
   import eventHub from '../event_hub';
   import Icon from '../../vue_shared/components/icon.vue';
   import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
+  import JobComponent from './graph/job_component.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
 
   export default {
     components: {
       LoadingIcon,
       Icon,
+      JobComponent,
     },
 
     directives: {
@@ -53,7 +54,9 @@
 
     computed: {
       dropdownClass() {
-        return this.dropdownContent.length > 0 ? 'js-builds-dropdown-container' : 'js-builds-dropdown-loading';
+        // return this.dropdownContent.length > 0
+        //   ? 'js-builds-dropdown-container'
+        //   : 'js-builds-dropdown-loading';
       },
 
       triggerButtonClass() {
@@ -67,9 +70,7 @@
 
     watch: {
       updateDropdown() {
-        if (this.updateDropdown &&
-          this.isDropdownOpen() &&
-          !this.isLoading) {
+        if (this.updateDropdown && this.isDropdownOpen() && !this.isLoading) {
           this.fetchJobs();
         }
       },
@@ -91,9 +92,132 @@
       },
 
       fetchJobs() {
-        axios.get(this.stage.dropdown_path)
+        axios
+          .get(this.stage.dropdown_path)
           .then(({ data }) => {
-            this.dropdownContent = data.html;
+            this.dropdownContent = [
+              {
+                id: 966,
+                name: 'rspec:linux 0 3',
+                started: false,
+                build_path: '/twitter/flight/-/jobs/966',
+                cancel_path: '/twitter/flight/-/jobs/966/cancel',
+                playable: false,
+                created_at: '2018-04-18T12:10:14.315Z',
+                updated_at: '2018-04-18T12:10:14.500Z',
+                status: {
+                  icon: 'status_pending',
+                  text: 'pending',
+                  label: 'pending',
+                  group: 'pending',
+                  tooltip: 'pending',
+                  has_details: true,
+                  details_path: '/twitter/flight/-/jobs/966',
+                  favicon:
+                    '/assets/ci_favicons/dev/favicon_status_pending-db32e1faf94b9f89530ac519790920d1f18ea8f6af6cd2e0a26cd6840cacf101.ico',
+                  action: {
+                    icon: 'cancel',
+                    title: 'Cancel',
+                    path: '/twitter/flight/-/jobs/966/cancel',
+                    method: 'post',
+                  },
+                },
+              },
+              {
+                id: 208,
+                name: 'rspec:linux 1 3',
+                started: '2018-03-07T06:41:46.233Z',
+                build_path: '/twitter/flight/-/jobs/208',
+                retry_path: '/twitter/flight/-/jobs/208/retry',
+                playable: false,
+                created_at: '2018-03-07T14:41:57.559Z',
+                updated_at: '2018-03-07T14:41:57.559Z',
+                status: {
+                  icon: 'status_success',
+                  text: 'passed',
+                  label: 'passed',
+                  group: 'success',
+                  tooltip: 'passed',
+                  has_details: true,
+                  details_path: '/twitter/flight/-/jobs/208',
+                  favicon:
+                    '/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico',
+                  action: {
+                    icon: 'retry',
+                    title: 'Retry',
+                    path: '/twitter/flight/-/jobs/208/retry',
+                    method: 'post',
+                  },
+                },
+              },
+              {
+                id: 209,
+                name: 'rspec:linux 2 3',
+                started: '2018-03-07T06:41:46.233Z',
+                build_path: '/twitter/flight/-/jobs/209',
+                retry_path: '/twitter/flight/-/jobs/209/retry',
+                playable: false,
+                created_at: '2018-03-07T14:41:57.605Z',
+                updated_at: '2018-03-07T14:41:57.605Z',
+                status: {
+                  icon: 'status_success',
+                  text: 'passed',
+                  label: 'passed',
+                  group: 'success',
+                  tooltip: 'passed',
+                  has_details: true,
+                  details_path: '/twitter/flight/-/jobs/209',
+                  favicon:
+                    '/assets/ci_favicons/dev/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.ico',
+                  action: {
+                    icon: 'retry',
+                    title: 'Retry',
+                    path: '/twitter/flight/-/jobs/209/retry',
+                    method: 'post',
+                  },
+                },
+              },
+              {
+                id: 63701097,
+                name: 'spinach-mysql 0 2',
+                started: false,
+                build_path: '/gitlab-org/gitlab-ce/-/jobs/63701097',
+                playable: false,
+                created_at: '2018-04-18T15:16:52.707Z',
+                updated_at: '2018-04-18T15:16:52.707Z',
+                status: {
+                  icon: 'status_created',
+                  text: 'created',
+                  label: 'created',
+                  group: 'created',
+                  tooltip: 'created',
+                  has_details: true,
+                  details_path: '/gitlab-org/gitlab-ce/-/jobs/63701097',
+                  favicon:
+                    'https://assets.gitlab-static.net/assets/ci_favicons/favicon_status_created-e997aa0b7db73165df8a9d6803932b18d7b7cc37d604d2d96e378fea2dba9c5f.ico',
+                },
+              },
+              {
+                id: 63701098,
+                name: 'spinach-mysql 1 2',
+                started: false,
+                build_path: '/gitlab-org/gitlab-ce/-/jobs/63701098',
+                playable: false,
+                created_at: '2018-04-18T15:16:52.808Z',
+                updated_at: '2018-04-18T15:16:52.808Z',
+                status: {
+                  icon: 'status_created',
+                  text: 'created',
+                  label: 'created',
+                  group: 'created',
+                  tooltip: 'created',
+                  has_details: true,
+                  details_path: '/gitlab-org/gitlab-ce/-/jobs/63701098',
+                  favicon:
+                    'https://assets.gitlab-static.net/assets/ci_favicons/favicon_status_created-e997aa0b7db73165df8a9d6803932b18d7b7cc37d604d2d96e378fea2dba9c5f.ico',
+                },
+              },
+            ];
             this.isLoading = false;
           })
           .catch(() => {
@@ -113,10 +237,11 @@
        * target the click event of this component.
        */
       stopDropdownClickPropagation() {
-        $(this.$el.querySelectorAll('.js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item'))
-          .on('click', (e) => {
-            e.stopPropagation();
-          });
+        $(
+          this.$el.querySelectorAll('.js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item'),
+        ).on('click', e => {
+          e.stopPropagation();
+        });
       },
 
       closeDropdown() {
@@ -168,7 +293,6 @@
     >
 
       <li
-        :class="dropdownClass"
         class="js-builds-dropdown-list scrollable-menu"
       >
 
@@ -176,8 +300,16 @@
 
         <ul
           v-else
-          v-html="dropdownContent"
         >
+          <li
+            v-for="job in dropdownContent"
+            :key="job.id"
+        >
+            <job-component
+              :job="job"
+              css-class-job-name="mini-pipeline-graph-dropdown-item"
+            />
+          </li>
         </ul>
       </li>
     </ul>