Only load pipelines vue component when there are pipelines.

Move Empty state to vue component

4 files changed, 37 insertions, 33 deletions

diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
index c1daf816060..ac2fe99af1c 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
@@ -40,20 +40,26 @@
     },
     template: `
       <div>
-        <div class="pipelines realtime-loading" v-if='pipelines.length < 1'>
+        <div class="pipelines realtime-loading" v-if='pageRequest'>
           <i class="fa fa-spinner fa-spin"></i>
         </div>
-        <div class="table-holder" v-if='pipelines.length'>
+
+        <div class="blank-state blank-state-no-icon"
+          v-if="!pageRequest && pipelines.length === 0">
+          <h2 class="blank-state-title js-blank-state-title">
+            No pipelines to show
+          </h2>
+        </div>
+
+        <div class="table-holder" v-if='!pageRequest && pipelines.length'>
           <pipelines-table-component
             :pipelines='pipelines'
             :svgs='svgs'>
           </pipelines-table-component>
         </div>
-        <div class="pipelines realtime-loading" v-if='pageRequest'>
-          <i class="fa fa-spinner fa-spin"></i>
-        </div>
+
         <gl-pagination
-          v-if='pageInfo.total > pageInfo.perPage'
+          v-if='!pageRequest && pipelines.length && pageInfo.total > pageInfo.perPage'
           :pagenum='pagenum'
           :change='change'
           :count='count.all'
diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6
index 0c4a3b77153..4d0e2ccaf87 100644
--- a/app/assets/javascripts/vue_pipelines_index/store.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6
@@ -20,6 +20,7 @@
 
   gl.PipelineStore = class {
     fetchDataLoop(Vue, pageNum, url, apiScope) {
+      this.pageRequest = true;
       const updatePipelineNums = (count) => {
         const { all } = count;
         const running = count.running_or_pending;
@@ -41,7 +42,7 @@
             this.pageRequest = false;
           }, () => {
             this.pageRequest = false;
-            return new Flash('Something went wrong on our end.');
+            return new Flash('An error occurred while fetching the pipelines, please reload the page again.');
           });
 
       goFetch();
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index f131836058b..3e554063d8b 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -94,7 +94,8 @@
       #commits.commits.tab-pane
         -# This tab is always loaded via AJAX
       #pipelines.pipelines.tab-pane
-        = render 'projects/commit/pipelines_list', endpoint: pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)
+        - if @pipelines.any?
+          = render 'projects/commit/pipelines_list', endpoint: pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)
       #diffs.diffs.tab-pane
         -# This tab is always loaded via AJAX
 
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index 96f625bc924..58e76afa09a 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -36,31 +36,27 @@
         = link_to ci_lint_path, class: 'btn btn-default' do
           %span CI Lint
   .content-list.pipelines{ data: { url: namespace_project_pipelines_path(@project.namespace, @project, format: :json) } }
-    - if @pipelines.blank?
-      %div
-        .nothing-here-block No pipelines to show
-    - else
-      .pipeline-svgs{ "data" => {"commit_icon_svg" => custom_icon("icon_commit"),
-        "icon_status_canceled" => custom_icon("icon_status_canceled"),
-        "icon_status_running" => custom_icon("icon_status_running"),
-        "icon_status_skipped" => custom_icon("icon_status_skipped"),
-        "icon_status_created" => custom_icon("icon_status_created"),
-        "icon_status_pending" => custom_icon("icon_status_pending"),
-        "icon_status_success" => custom_icon("icon_status_success"),
-        "icon_status_failed" => custom_icon("icon_status_failed"),
-        "icon_status_warning" => custom_icon("icon_status_warning"),
-        "stage_icon_status_canceled" => custom_icon("icon_status_canceled_borderless"),
-        "stage_icon_status_running" => custom_icon("icon_status_running_borderless"),
-        "stage_icon_status_skipped" => custom_icon("icon_status_skipped_borderless"),
-        "stage_icon_status_created" => custom_icon("icon_status_created_borderless"),
-        "stage_icon_status_pending" => custom_icon("icon_status_pending_borderless"),
-        "stage_icon_status_success" => custom_icon("icon_status_success_borderless"),
-        "stage_icon_status_failed" => custom_icon("icon_status_failed_borderless"),
-        "stage_icon_status_warning" => custom_icon("icon_status_warning_borderless"),
-        "icon_play" => custom_icon("icon_play"),
-        "icon_timer" => custom_icon("icon_timer"),
-        "icon_status_manual" => custom_icon("icon_status_manual"),
-      } }
+    .pipeline-svgs{ "data" => {"commit_icon_svg" => custom_icon("icon_commit"),
+      "icon_status_canceled" => custom_icon("icon_status_canceled"),
+      "icon_status_running" => custom_icon("icon_status_running"),
+      "icon_status_skipped" => custom_icon("icon_status_skipped"),
+      "icon_status_created" => custom_icon("icon_status_created"),
+      "icon_status_pending" => custom_icon("icon_status_pending"),
+      "icon_status_success" => custom_icon("icon_status_success"),
+      "icon_status_failed" => custom_icon("icon_status_failed"),
+      "icon_status_warning" => custom_icon("icon_status_warning"),
+      "stage_icon_status_canceled" => custom_icon("icon_status_canceled_borderless"),
+      "stage_icon_status_running" => custom_icon("icon_status_running_borderless"),
+      "stage_icon_status_skipped" => custom_icon("icon_status_skipped_borderless"),
+      "stage_icon_status_created" => custom_icon("icon_status_created_borderless"),
+      "stage_icon_status_pending" => custom_icon("icon_status_pending_borderless"),
+      "stage_icon_status_success" => custom_icon("icon_status_success_borderless"),
+      "stage_icon_status_failed" => custom_icon("icon_status_failed_borderless"),
+      "stage_icon_status_warning" => custom_icon("icon_status_warning_borderless"),
+      "icon_play" => custom_icon("icon_play"),
+      "icon_timer" => custom_icon("icon_timer"),
+      "icon_status_manual" => custom_icon("icon_status_manual"),
+    } }
 
       .vue-pipelines-index