add loading state to nodes table (#114709)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Sandra G 2021-10-12 21:07:06 -04:00 committed by GitHub
parent 169df02635
commit c3b9e813c9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 0 deletions

View file

@ -33,6 +33,7 @@ export const ElasticsearchNodesPage: React.FC<ComponentProps> = ({ clusters }) =
const globalState = useContext(GlobalStateContext);
const { showCgroupMetricsElasticsearch } = useContext(ExternalConfigContext);
const { services } = useKibana<{ data: any }>();
const [isLoading, setIsLoading] = React.useState(false);
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
const { getPaginationRouteOptions, updateTotalItemCount, getPaginationTableProps } =
useTable('elasticsearch.nodes');
@ -64,6 +65,7 @@ export const ElasticsearchNodesPage: React.FC<ComponentProps> = ({ clusters }) =
const bounds = services.data?.query.timefilter.timefilter.getBounds();
const url = `../api/monitoring/v1/clusters/${clusterUuid}/elasticsearch/nodes`;
if (services.http?.fetch && clusterUuid) {
setIsLoading(true);
const response = await services.http?.fetch(url, {
method: 'POST',
body: JSON.stringify({
@ -76,6 +78,7 @@ export const ElasticsearchNodesPage: React.FC<ComponentProps> = ({ clusters }) =
}),
});
setIsLoading(false);
setData(response);
updateTotalItemCount(response.totalNodeCount);
const alertsResponse = await fetchAlerts({
@ -125,6 +128,7 @@ export const ElasticsearchNodesPage: React.FC<ComponentProps> = ({ clusters }) =
setupMode={setupMode}
nodes={data.nodes}
alerts={alerts}
isLoading={isLoading}
showCgroupMetricsElasticsearch={showCgroupMetricsElasticsearch}
{...getPaginationTableProps()}
/>

View file

@ -23,6 +23,7 @@ export function EuiMonitoringSSPTable({
...props
}) {
const [queryText, setQueryText] = React.useState('');
const [isLoading, setIsLoading] = React.useState(false);
const [page, setPage] = React.useState({
index: pagination.pageIndex,
size: pagination.pageSize,
@ -72,7 +73,9 @@ export function EuiMonitoringSSPTable({
setSort({ sort });
// angular version
if (props.fetchMoreData) {
setIsLoading(true);
await props.fetchMoreData({ page, sort: { sort }, queryText });
setIsLoading(false);
onTableChange({ page, sort });
}
// react version
@ -87,7 +90,9 @@ export function EuiMonitoringSSPTable({
setQueryText(queryText);
// angular version
if (props.fetchMoreData) {
setIsLoading(true);
await props.fetchMoreData({ page: newPage, sort, queryText });
setIsLoading(false);
} else {
// react version
onTableChange({ page, sort: sort.sort, queryText });
@ -105,6 +110,7 @@ export function EuiMonitoringSSPTable({
pagination={pagination}
onChange={onChange}
columns={columns}
loading={props.isLoading || isLoading}
/>
{footerContent}
</div>

View file

@ -63,6 +63,7 @@ export function MonitoringElasticsearchNodesProvider({ getService, getPageObject
async clickNameCol() {
await find.clickByCssSelector(`[data-test-subj="${SUBJ_TABLE_SORT_NAME_COL}"] > button`);
await find.byCssSelector('.euiBasicTable-loading');
await this.waitForTableToFinishLoading();
}