add loading state to nodes table (#114709)
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
parent
169df02635
commit
c3b9e813c9
3 changed files with 11 additions and 0 deletions
|
@ -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()}
|
||||
/>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue