maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Monitoring] Fully control the in memory table pagination/sorting properties (#85862)

Browse source 
* Fully control the basic table pagination/sorting properties

* Not necessary

* Support index listing page

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Chris Roberson 2021-01-04 14:43:29 -05:00 committed by GitHub
parent 5241603297
commit aeaa0c2932
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 84 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
x-pack/plugins/monitoring/public/views/apm/instances/index.js
View file

@ -52,37 +52,40 @@ uiRoutes.when('/apm/instances', {
this.scope = $scope;
this.injector = $injector;
this.onTableChangeRender = this.renderComponent;
$scope.$watch(
() => this.data,
(data) => {
const { pagination, sorting, onTableChange } = this;
const component = (
<SetupModeRenderer
scope={this.scope}
injector={this.injector}
productName={APM_SYSTEM_ID}
render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
<SetupModeContext.Provider value={{ setupModeSupported: true }}>
{flyoutComponent}
<ApmServerInstances
setupMode={setupMode}
apms={{
pagination,
sorting,
onTableChange,
data,
}}
/>
{bottomBarComponent}
</SetupModeContext.Provider>
)}
/>
);
this.renderReact(component);
}
() => this.renderComponent()
);
}
renderComponent() {
const { pagination, sorting, onTableChange } = this;
const component = (
<SetupModeRenderer
scope={this.scope}
injector={this.injector}
productName={APM_SYSTEM_ID}
render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
<SetupModeContext.Provider value={{ setupModeSupported: true }}>
{flyoutComponent}
<ApmServerInstances
setupMode={setupMode}
apms={{
pagination,
sorting,
onTableChange,
data: this.data,
}}
/>
{bottomBarComponent}
</SetupModeContext.Provider>
)}
/>
);
this.renderReact(component);
}
},
});

5
x-pack/plugins/monitoring/public/views/base_eui_table_controller.js
View file

@ -61,12 +61,17 @@ export class MonitoringViewBaseEuiTableController extends MonitoringViewBaseCont
this.setSorting(sort);
this.onTableChange = ({ page, sort }) => {
this.setPagination(page);
this.setSorting({ sort });
setLocalStorageData(storage, {
page,
sort: {
sort,
},
});
if (this.onTableChangeRender) {
this.onTableChangeRender();
}
};
// For pages where we do not fetch immediately, we want to fetch after pagination is applied

1
x-pack/plugins/monitoring/public/views/beats/listing/index.js
View file

@ -52,6 +52,7 @@ uiRoutes.when('/beats/beats', {
this.data = $route.current.locals.pageData;
this.scope = $scope;
this.injector = $injector;
this.onTableChangeRender = this.renderComponent;
$scope.$watch(
() => this.data,

31
x-pack/plugins/monitoring/public/views/elasticsearch/indices/index.js
View file

@ -64,25 +64,30 @@ uiRoutes.when('/elasticsearch/indices', {
this.updateData();
};
const renderComponent = () => {
const { clusterStatus, indices } = this.data;
this.renderReact(
<ElasticsearchIndices
clusterStatus={clusterStatus}
indices={indices}
showSystemIndices={showSystemIndices}
toggleShowSystemIndices={toggleShowSystemIndices}
sorting={this.sorting}
pagination={this.pagination}
onTableChange={this.onTableChange}
/>
);
};
this.onTableChangeRender = renderComponent;
$scope.$watch(
() => this.data,
(data) => {
if (!data) {
return;
}
const { clusterStatus, indices } = data;
this.renderReact(
<ElasticsearchIndices
clusterStatus={clusterStatus}
indices={indices}
showSystemIndices={showSystemIndices}
toggleShowSystemIndices={toggleShowSystemIndices}
sorting={this.sorting}
pagination={this.pagination}
onTableChange={this.onTableChange}
/>
);
renderComponent();
}
);
}

2
x-pack/plugins/monitoring/public/views/kibana/instances/index.js
View file

@ -77,6 +77,8 @@ uiRoutes.when('/kibana/instances', {
);
};
this.onTableChangeRender = renderReact;
$scope.$watch(
() => this.data,
(data) => {

52
x-pack/plugins/monitoring/public/views/logstash/nodes/index.js
View file

@ -51,32 +51,36 @@ uiRoutes.when('/logstash/nodes', {
},
});
const renderComponent = () => {
this.renderReact(
<SetupModeRenderer
scope={$scope}
injector={$injector}
productName={LOGSTASH_SYSTEM_ID}
render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
<SetupModeContext.Provider value={{ setupModeSupported: true }}>
{flyoutComponent}
<Listing
data={this.data.nodes}
setupMode={setupMode}
stats={this.data.clusterStatus}
alerts={this.alerts}
sorting={this.sorting}
pagination={this.pagination}
onTableChange={this.onTableChange}
/>
{bottomBarComponent}
</SetupModeContext.Provider>
)}
/>
);
};
this.onTableChangeRender = renderComponent;
$scope.$watch(
() => this.data,
(data) => {
this.renderReact(
<SetupModeRenderer
scope={$scope}
injector={$injector}
productName={LOGSTASH_SYSTEM_ID}
render={({ setupMode, flyoutComponent, bottomBarComponent }) => (
<SetupModeContext.Provider value={{ setupModeSupported: true }}>
{flyoutComponent}
<Listing
data={data.nodes}
setupMode={setupMode}
stats={data.clusterStatus}
alerts={this.alerts}
sorting={this.sorting}
pagination={this.pagination}
onTableChange={this.onTableChange}
/>
{bottomBarComponent}
</SetupModeContext.Provider>
)}
/>
);
}
() => renderComponent()
);
}
},