Skip to content

Commit

Permalink
[7.x] [Logs UI] Fix chart and table state loss due to loading… (#49604)
Browse files Browse the repository at this point in the history 
Backports the following commits to 7.x:
 - [Logs UI] Fix chart and table state loss due to loading indica… (#49356)
  • Loading branch information
@weltenwort
weltenwort authored Oct 29, 2019
1 parent ff31e78 commit 61d48d3
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 61d48d3

Please sign in to comment.