github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[User Experience App] Improve empty state loading (#112531)

Browse source 
* improve empty state loading

* only show loading in content panel

* eslint fix
This commit is contained in:
Shahzad 2021-09-22 09:28:10 +02:00 • committed by GitHub
parent e9e08d0928
commit da1ae4923a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 69 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

60
x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import React from 'react';
import React, { Fragment } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiFlexGroup, EuiTitle, EuiFlexItem } from '@elastic/eui';
import { RumOverview } from '../RumDashboard';
@ -18,6 +18,7 @@ import { UserPercentile } from './UserPercentile';
import { useBreakpoints } from '../../../hooks/use_breakpoints';
import { KibanaPageTemplateProps } from '../../../../../../../src/plugins/kibana_react/public';
import { useHasRumData } from './hooks/useHasRumData';
import { EmptyStateLoading } from './empty_state_loading';
export const UX_LABEL = i18n.translate('xpack.apm.ux.title', {
defaultMessage: 'Dashboard',
@ -29,7 +30,7 @@ export function RumHome() {
const { isSmall, isXXL } = useBreakpoints();
const { data: rumHasData } = useHasRumData();
const { data: rumHasData, status } = useHasRumData();
const envStyle = isSmall ? {} : { maxWidth: 500 };
@ -58,31 +59,38 @@ export function RumHome() {
}
: undefined;
const isLoading = status === 'loading';
return (
<CsmSharedContextProvider>
<PageTemplateComponent
noDataConfig={noDataConfig}
pageHeader={
isXXL
? {
pageTitle: i18n.translate('xpack.apm.ux.overview', {
defaultMessage: 'Dashboard',
}),
rightSideItems: [
<DatePicker />,
<div style={envStyle}>
<UxEnvironmentFilter />
</div>,
<UserPercentile />,
<WebApplicationSelect />,
],
}
: { children: <PageHeader /> }
}
>
<RumOverview />
</PageTemplateComponent>
</CsmSharedContextProvider>
<Fragment>
<CsmSharedContextProvider>
<PageTemplateComponent
noDataConfig={isLoading ? undefined : noDataConfig}
pageHeader={
isXXL
? {
pageTitle: i18n.translate('xpack.apm.ux.overview', {
defaultMessage: 'Dashboard',
}),
rightSideItems: [
<DatePicker />,
<div style={envStyle}>
<UxEnvironmentFilter />
</div>,
<UserPercentile />,
<WebApplicationSelect />,
],
}
: { children: <PageHeader /> }
}
>
{isLoading && <EmptyStateLoading />}
<div style={{ visibility: isLoading ? 'hidden' : 'initial' }}>
<RumOverview />
</div>
</PageTemplateComponent>
</CsmSharedContextProvider>
</Fragment>
);
}

35
x-pack/plugins/apm/public/components/app/RumDashboard/empty_state_loading.tsx Normal file
View file

@ -0,0 +1,35 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import {
EuiEmptyPrompt,
EuiLoadingSpinner,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { Fragment } from 'react';
export function EmptyStateLoading() {
return (
<EuiEmptyPrompt
body={
<Fragment>
<EuiLoadingSpinner size="xl" />
<EuiSpacer />
<EuiTitle size="l">
<h2>
{i18n.translate('xpack.apm.emptyState.loadingMessage', {
defaultMessage: 'Loading…',
})}
</h2>
</EuiTitle>
</Fragment>
}
/>
);
}