Only renders empty state for pipelines table if no pipelines are received when request is made
This commit is contained in:
parent
71e2f4ec7d
commit
8fa6fb5265
|
@ -1,11 +1,11 @@
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import Visibility from 'visibilityjs';
|
import Visibility from 'visibilityjs';
|
||||||
import PipelinesTableComponent from '../../vue_shared/components/pipelines_table';
|
import pipelinesTableComponent from '../../vue_shared/components/pipelines_table';
|
||||||
import PipelinesService from '../../pipelines/services/pipelines_service';
|
import PipelinesService from '../../pipelines/services/pipelines_service';
|
||||||
import PipelineStore from '../../pipelines/stores/pipelines_store';
|
import PipelineStore from '../../pipelines/stores/pipelines_store';
|
||||||
import eventHub from '../../pipelines/event_hub';
|
import eventHub from '../../pipelines/event_hub';
|
||||||
import EmptyState from '../../pipelines/components/empty_state.vue';
|
import emptyState from '../../pipelines/components/empty_state.vue';
|
||||||
import ErrorState from '../../pipelines/components/error_state.vue';
|
import errorState from '../../pipelines/components/error_state.vue';
|
||||||
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
|
import loadingIcon from '../../vue_shared/components/loading_icon.vue';
|
||||||
import '../../lib/utils/common_utils';
|
import '../../lib/utils/common_utils';
|
||||||
import '../../vue_shared/vue_resource_interceptor';
|
import '../../vue_shared/vue_resource_interceptor';
|
||||||
|
@ -23,9 +23,9 @@ import Poll from '../../lib/utils/poll';
|
||||||
export default Vue.component('pipelines-table', {
|
export default Vue.component('pipelines-table', {
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
'pipelines-table-component': PipelinesTableComponent,
|
pipelinesTableComponent,
|
||||||
'error-state': ErrorState,
|
errorState,
|
||||||
'empty-state': EmptyState,
|
emptyState,
|
||||||
loadingIcon,
|
loadingIcon,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -47,6 +47,7 @@ export default Vue.component('pipelines-table', {
|
||||||
hasError: false,
|
hasError: false,
|
||||||
isMakingRequest: false,
|
isMakingRequest: false,
|
||||||
updateGraphDropdown: false,
|
updateGraphDropdown: false,
|
||||||
|
hasMadeRequest: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -55,9 +56,15 @@ export default Vue.component('pipelines-table', {
|
||||||
return this.hasError && !this.isLoading;
|
return this.hasError && !this.isLoading;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Empty state is only rendered if after the first request we receive no pipelines.
|
||||||
|
*
|
||||||
|
* @return {Boolean}
|
||||||
|
*/
|
||||||
shouldRenderEmptyState() {
|
shouldRenderEmptyState() {
|
||||||
return !this.state.pipelines.length &&
|
return !this.state.pipelines.length &&
|
||||||
!this.isLoading &&
|
!this.isLoading &&
|
||||||
|
this.hasMadeRequest &&
|
||||||
!this.hasError;
|
!this.hasError;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -94,6 +101,10 @@ export default Vue.component('pipelines-table', {
|
||||||
if (!Visibility.hidden()) {
|
if (!Visibility.hidden()) {
|
||||||
this.isLoading = true;
|
this.isLoading = true;
|
||||||
this.poll.makeRequest();
|
this.poll.makeRequest();
|
||||||
|
} else {
|
||||||
|
// If tab is not visible we need to make the first request so we don't show the empty
|
||||||
|
// state without knowing if there are any pipelines
|
||||||
|
this.fetchPipelines();
|
||||||
}
|
}
|
||||||
|
|
||||||
Visibility.change(() => {
|
Visibility.change(() => {
|
||||||
|
@ -127,6 +138,8 @@ export default Vue.component('pipelines-table', {
|
||||||
successCallback(resp) {
|
successCallback(resp) {
|
||||||
const response = resp.json();
|
const response = resp.json();
|
||||||
|
|
||||||
|
this.hasMadeRequest = true;
|
||||||
|
|
||||||
// depending of the endpoint the response can either bring a `pipelines` key or not.
|
// depending of the endpoint the response can either bring a `pipelines` key or not.
|
||||||
const pipelines = response.pipelines || response;
|
const pipelines = response.pipelines || response;
|
||||||
this.store.storePipelines(pipelines);
|
this.store.storePipelines(pipelines);
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
import Visibility from 'visibilityjs';
|
import Visibility from 'visibilityjs';
|
||||||
import PipelinesService from './services/pipelines_service';
|
import PipelinesService from './services/pipelines_service';
|
||||||
import eventHub from './event_hub';
|
import eventHub from './event_hub';
|
||||||
import PipelinesTableComponent from '../vue_shared/components/pipelines_table';
|
import pipelinesTableComponent from '../vue_shared/components/pipelines_table';
|
||||||
import tablePagination from '../vue_shared/components/table_pagination.vue';
|
import tablePagination from '../vue_shared/components/table_pagination.vue';
|
||||||
import EmptyState from './components/empty_state.vue';
|
import emptyState from './components/empty_state.vue';
|
||||||
import ErrorState from './components/error_state.vue';
|
import errorState from './components/error_state.vue';
|
||||||
import NavigationTabs from './components/navigation_tabs';
|
import navigationTabs from './components/navigation_tabs';
|
||||||
import NavigationControls from './components/nav_controls';
|
import navigationControls from './components/nav_controls';
|
||||||
import loadingIcon from '../vue_shared/components/loading_icon.vue';
|
import loadingIcon from '../vue_shared/components/loading_icon.vue';
|
||||||
import Poll from '../lib/utils/poll';
|
import Poll from '../lib/utils/poll';
|
||||||
|
|
||||||
|
@ -20,11 +20,11 @@ export default {
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
tablePagination,
|
tablePagination,
|
||||||
'pipelines-table-component': PipelinesTableComponent,
|
pipelinesTableComponent,
|
||||||
'empty-state': EmptyState,
|
emptyState,
|
||||||
'error-state': ErrorState,
|
errorState,
|
||||||
'navigation-tabs': NavigationTabs,
|
navigationTabs,
|
||||||
'navigation-controls': NavigationControls,
|
navigationControls,
|
||||||
loadingIcon,
|
loadingIcon,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -52,6 +52,7 @@ export default {
|
||||||
hasError: false,
|
hasError: false,
|
||||||
isMakingRequest: false,
|
isMakingRequest: false,
|
||||||
updateGraphDropdown: false,
|
updateGraphDropdown: false,
|
||||||
|
hasMadeRequest: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -78,6 +79,7 @@ export default {
|
||||||
shouldRenderEmptyState() {
|
shouldRenderEmptyState() {
|
||||||
return !this.isLoading &&
|
return !this.isLoading &&
|
||||||
!this.hasError &&
|
!this.hasError &&
|
||||||
|
this.hasMadeRequest &&
|
||||||
!this.state.pipelines.length &&
|
!this.state.pipelines.length &&
|
||||||
(this.scope === 'all' || this.scope === null);
|
(this.scope === 'all' || this.scope === null);
|
||||||
},
|
},
|
||||||
|
@ -150,6 +152,10 @@ export default {
|
||||||
if (!Visibility.hidden()) {
|
if (!Visibility.hidden()) {
|
||||||
this.isLoading = true;
|
this.isLoading = true;
|
||||||
poll.makeRequest();
|
poll.makeRequest();
|
||||||
|
} else {
|
||||||
|
// If tab is not visible we need to make the first request so we don't show the empty
|
||||||
|
// state without knowing if there are any pipelines
|
||||||
|
this.fetchPipelines();
|
||||||
}
|
}
|
||||||
|
|
||||||
Visibility.change(() => {
|
Visibility.change(() => {
|
||||||
|
@ -202,6 +208,7 @@ export default {
|
||||||
|
|
||||||
this.isLoading = false;
|
this.isLoading = false;
|
||||||
this.updateGraphDropdown = true;
|
this.updateGraphDropdown = true;
|
||||||
|
this.hasMadeRequest = true;
|
||||||
},
|
},
|
||||||
|
|
||||||
errorCallback() {
|
errorCallback() {
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: Fix Pipelines table empty state - only render empty state if we receive 0 pipelines
|
||||||
|
merge_request:
|
||||||
|
author:
|
Loading…
Reference in New Issue