diff options
author | Alfredo Sumaran <alfredo@gitlab.com> | 2017-03-24 01:12:44 +0000 |
---|---|---|
committer | Alfredo Sumaran <alfredo@gitlab.com> | 2017-03-24 01:12:44 +0000 |
commit | 453d755ae4c83cbdd0a6542aca7028f4e1521679 (patch) | |
tree | fa202ad1115e38a52c8797925d86befb4973c09c /app/assets/javascripts/commit | |
parent | 856edee368c8c6a93821bff97eb0bb08b3e15bf9 (diff) | |
parent | a5f17beb43c792618cd0e8612d8e00bb8edb6942 (diff) | |
download | gitlab-ce-453d755ae4c83cbdd0a6542aca7028f4e1521679.tar.gz |
Merge branch '27574-pipelines-empty-state' into 'master'
Pipelines empty state
Closes #27574
See merge request !9978
Diffstat (limited to 'app/assets/javascripts/commit')
-rw-r--r-- | app/assets/javascripts/commit/pipelines/pipelines_table.js | 31 |
1 files changed, 22 insertions, 9 deletions
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js index 360fb39dc9c..a20e5bc3b1b 100644 --- a/app/assets/javascripts/commit/pipelines/pipelines_table.js +++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js @@ -1,10 +1,10 @@ -/* eslint-disable no-new*/ -/* global Flash */ import Vue from 'vue'; import PipelinesTableComponent from '../../vue_shared/components/pipelines_table'; import PipelinesService from '../../vue_pipelines_index/services/pipelines_service'; import PipelineStore from '../../vue_pipelines_index/stores/pipelines_store'; import eventHub from '../../vue_pipelines_index/event_hub'; +import EmptyState from '../../vue_pipelines_index/components/empty_state'; +import ErrorState from '../../vue_pipelines_index/components/error_state'; import '../../lib/utils/common_utils'; import '../../vue_shared/vue_resource_interceptor'; @@ -22,6 +22,8 @@ import '../../vue_shared/vue_resource_interceptor'; export default Vue.component('pipelines-table', { components: { 'pipelines-table-component': PipelinesTableComponent, + 'error-state': ErrorState, + 'empty-state': EmptyState, }, /** @@ -36,12 +38,24 @@ export default Vue.component('pipelines-table', { return { endpoint: pipelinesTableData.endpoint, + helpPagePath: pipelinesTableData.helpPagePath, store, state: store.state, isLoading: false, + hasError: false, }; }, + computed: { + shouldRenderErrorState() { + return this.hasError && !this.isLoading; + }, + + shouldRenderEmptyState() { + return !this.state.pipelines.length && !this.isLoading; + }, + }, + /** * When the component is about to be mounted, tell the service to fetch the data * @@ -80,8 +94,8 @@ export default Vue.component('pipelines-table', { this.isLoading = false; }) .catch(() => { + this.hasError = true; this.isLoading = false; - new Flash('An error occurred while fetching the pipelines, please reload the page again.'); }); }, }, @@ -92,12 +106,11 @@ export default Vue.component('pipelines-table', { <i class="fa fa-spinner fa-spin"></i> </div> - <div class="blank-state blank-state-no-icon" - v-if="!isLoading && state.pipelines.length === 0"> - <h2 class="blank-state-title js-blank-state-title"> - No pipelines to show - </h2> - </div> + <empty-state + v-if="shouldRenderEmptyState" + :help-page-path="helpPagePath" /> + + <error-state v-if="shouldRenderErrorState" /> <div class="table-holder" v-if="!isLoading && state.pipelines.length > 0"> |