Skip to content

Commit

Permalink
[Logs UI] Fix chart and table state loss due to loading indica… (elas…
Browse files Browse the repository at this point in the history 
…tic#49356)

This changes the result loading indicators of the log rate analysis page such that they are rendered as an overlay to the existing panels. This has the advantage that the page layout doesn't jump during the loading process and the charts and table maintain their filter and expansion states.
  • Loading branch information
@weltenwort
weltenwort committed Oct 29, 2019
1 parent 7f72b71 commit 68760bb
Show file tree
Hide file tree
Showing 6 changed files with 257 additions and 237 deletions.
45 changes: 45 additions & 0 deletions x-pack/legacy/plugins/infra/public/components/loading_overlay_wrapper.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { EuiLoadingSpinner } from '@elastic/eui';
import { transparentize } from 'polished';
import React from 'react';

import { euiStyled } from '../../../../common/eui_styled_components';

export const LoadingOverlayWrapper: React.FC<
React.HTMLAttributes<HTMLDivElement> & {
isLoading: boolean;
loadingChildren?: React.ReactNode;
}
> = ({ children, isLoading, loadingChildren, ...rest }) => {
return (
<RelativeDiv {...rest}>
{children}
{isLoading ? <Overlay>{loadingChildren}</Overlay> : null}
</RelativeDiv>
);
};

const Overlay: React.FC = ({ children }) => (
<OverlayDiv>{children ? children : <EuiLoadingSpinner size="xl" />}</OverlayDiv>
);

const RelativeDiv = euiStyled.div`
position: relative;
`;

const OverlayDiv = euiStyled.div`
align-items: center;
background-color: ${props => transparentize(0.3, props.theme.eui.euiColorEmptyShade)};
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
`;
148 changes: 68 additions & 80 deletions x-pack/legacy/plugins/infra/public/pages/logs/analysis/page_results_content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,23 @@

import datemath from '@elastic/datemath';
import {
EuiBadge,
EuiFlexGroup,
EuiFlexItem,
EuiPage,
EuiPanel,
EuiSuperDatePicker,
EuiBadge,
EuiText,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import numeral from '@elastic/numeral';
import { FormattedMessage } from '@kbn/i18n/react';
import moment from 'moment';
import React, { useCallback, useContext, useMemo, useState } from 'react';

import euiStyled from '../../../../../../common/eui_styled_components';
import { TimeRange } from '../../../../common/http_api/shared/time_range';
import { bucketSpan } from '../../../../common/log_analysis';
import { LoadingPage } from '../../../components/loading_page';
import { LoadingOverlayWrapper } from '../../../components/loading_overlay_wrapper';
import {
LogAnalysisJobs,
StringTimeRange,
Expand Down Expand Up @@ -162,89 +162,77 @@ export const AnalysisResultsContent = ({
);

return (
<>
{isLoading && !logEntryRate ? (
<LoadingPage
message={i18n.translate('xpack.infra.logs.logsAnalysisResults.loadingMessage', {
defaultMessage: 'Loading results...',
})}
/>
) : (
<>
<ResultsContentPage>
<EuiFlexGroup direction="column">
<ResultsContentPage>
<EuiFlexGroup direction="column">
<EuiFlexItem grow={false}>
<EuiPanel paddingSize="l">
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
<EuiPanel paddingSize="l">
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
{!isLoading && logEntryRate ? (
<EuiText size="s">
<FormattedMessage
id="xpack.infra.logs.analysis.logRateResultsToolbarText"
defaultMessage="Analyzed {numberOfLogs} log entries from {startTime} to {endTime}"
values={{
numberOfLogs: (
<EuiBadge color="primary">
<EuiText size="s" color="ghost">
{numeral(logEntryRate.totalNumberOfLogEntries).format('0.00a')}
</EuiText>
</EuiBadge>
),
startTime: (
<b>{moment(queryTimeRange.value.startTime).format(dateFormat)}</b>
),
endTime: (
<b>{moment(queryTimeRange.value.endTime).format(dateFormat)}</b>
),
}}
/>
</EuiText>
) : null}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiSuperDatePicker
start={selectedTimeRange.startTime}
end={selectedTimeRange.endTime}
onTimeChange={handleSelectedTimeRangeChange}
isPaused={autoRefresh.isPaused}
refreshInterval={autoRefresh.interval}
onRefreshChange={handleAutoRefreshChange}
{logEntryRate ? (
<LoadingOverlayWrapper isLoading={isLoading}>
<EuiText size="s">
<FormattedMessage
id="xpack.infra.logs.analysis.logRateResultsToolbarText"
defaultMessage="Analyzed {numberOfLogs} log entries from {startTime} to {endTime}"
values={{
numberOfLogs: (
<EuiBadge color="primary">
<EuiText size="s" color="ghost">
{numeral(logEntryRate.totalNumberOfLogEntries).format('0.00a')}
</EuiText>
</EuiBadge>
),
startTime: (
<b>{moment(queryTimeRange.value.startTime).format(dateFormat)}</b>
),
endTime: <b>{moment(queryTimeRange.value.endTime).format(dateFormat)}</b>,
}}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiPanel paddingSize="l">
{isFirstUse && !hasResults ? <FirstUseCallout /> : null}
<LogRateResults
isLoading={isLoading}
results={logEntryRate}
setTimeRange={handleChartTimeRangeChange}
timeRange={queryTimeRange.value}
/>
</EuiPanel>
</EuiText>
</LoadingOverlayWrapper>
) : null}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiPanel paddingSize="l">
<AnomaliesResults
isLoading={isLoading}
jobStatus={jobStatus['log-entry-rate']}
viewSetupForReconfiguration={viewSetupForReconfiguration}
viewSetupForUpdate={viewSetupForUpdate}
results={logEntryRate}
setTimeRange={handleChartTimeRangeChange}
setupStatus={setupStatus}
timeRange={queryTimeRange.value}
jobId={jobIds['log-entry-rate']}
/>
</EuiPanel>
<EuiSuperDatePicker
start={selectedTimeRange.startTime}
end={selectedTimeRange.endTime}
onTimeChange={handleSelectedTimeRangeChange}
isPaused={autoRefresh.isPaused}
refreshInterval={autoRefresh.interval}
onRefreshChange={handleAutoRefreshChange}
/>
</EuiFlexItem>
</EuiFlexGroup>
</ResultsContentPage>
</>
)}
</>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiPanel paddingSize="l">
{isFirstUse && !hasResults ? <FirstUseCallout /> : null}
<LogRateResults
isLoading={isLoading}
results={logEntryRate}
setTimeRange={handleChartTimeRangeChange}
timeRange={queryTimeRange.value}
/>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiPanel paddingSize="l">
<AnomaliesResults
isLoading={isLoading}
jobStatus={jobStatus['log-entry-rate']}
viewSetupForReconfiguration={viewSetupForReconfiguration}
viewSetupForUpdate={viewSetupForUpdate}
results={logEntryRate}
setTimeRange={handleChartTimeRangeChange}
setupStatus={setupStatus}
timeRange={queryTimeRange.value}
jobId={jobIds['log-entry-rate']}
/>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
</ResultsContentPage>
);
};

Expand Down
Loading

0 comments on commit 68760bb

Please sign in to comment.