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

[7.x] [Logs UI] Support zoom by brushing in the log rate chart… (#45916)

Browse source 
Backports the following commits to 7.x:
 - [Logs UI] Support zoom by brushing in the log rate chart (#45879)
This commit is contained in:
Felix Stürmer 2019-09-17 23:15:51 +02:00 • committed by GitHub
parent 341355fa4f
commit f5877048e7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

12
x-pack/legacy/plugins/infra/public/pages/logs/analysis/page_results_content.tsx
View file

@ -101,6 +101,17 @@ export const AnalysisResultsContent = ({
[setSelectedTimeRange, handleQueryTimeRangeChange]
);
const handleChartTimeRangeChange = useCallback(
({ startTime, endTime }: TimeRange) => {
handleSelectedTimeRangeChange({
end: new Date(endTime).toISOString(),
isInvalid: false,
start: new Date(startTime).toISOString(),
});
},
[handleSelectedTimeRangeChange]
);
const handleAutoRefreshChange = useCallback(
({ isPaused, refreshInterval: interval }: { isPaused: boolean; refreshInterval: number }) => {
setAutoRefresh({
@ -183,6 +194,7 @@ export const AnalysisResultsContent = ({
<LogRateResults
isLoading={isLoading}
results={logEntryRate}
setTimeRange={handleChartTimeRangeChange}
timeRange={queryTimeRange}
/>
</EuiPageContentBody>

37
x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/chart.tsx
View file

@ -30,15 +30,11 @@ const lineSeriesColour = 'rgb(49, 133, 252)';
interface Props {
data: GetLogEntryRateSuccessResponsePayload['data'] | null;
setTimeRange: (timeRange: TimeRange) => void;
timeRange: TimeRange;
}
export const ChartView = ({ data, timeRange }: Props) => {
const showModelBoundsLabel = i18n.translate(
'xpack.infra.logs.analysis.logRateSectionModelBoundsCheckboxLabel',
{ defaultMessage: 'Show model bounds' }
);
export const ChartView = ({ data, setTimeRange, timeRange }: Props) => {
const { areaSeries, lineSeries, anomalySeries } = useLogEntryRateGraphData({ data });
const dateFormatter = useMemo(
@ -55,15 +51,26 @@ export const ChartView = ({ data, timeRange }: Props) => {
const [dateFormat] = useKibanaUiSetting('dateFormat');
const tooltipProps = {
headerFormatter: useCallback(
(tooltipData: TooltipValue) =>
const tooltipProps = useMemo(
() => ({
headerFormatter: (tooltipData: TooltipValue) =>
moment(tooltipData.value).format(dateFormat || 'Y-MM-DD HH:mm:ss.SSS'),
[dateFormat]
),
};
}),
[dateFormat]
);
const [isShowingModelBounds, setIsShowingModelBounds] = useState<boolean>(true);
const handleBrushEnd = useCallback(
(startTime: number, endTime: number) => {
setTimeRange({
endTime,
startTime,
});
},
[setTimeRange]
);
return (
<>
<EuiFlexGroup justifyContent="flexEnd">
@ -172,6 +179,7 @@ export const ChartView = ({ data, timeRange }: Props) => {
customSeriesColors={!isDarkMode() ? getColorsMap('red', anomalySpecId) : undefined}
/>
<Settings
onBrushEnd={handleBrushEnd}
tooltip={tooltipProps}
theme={getChartTheme()}
xDomain={{ min: timeRange.startTime, max: timeRange.endTime }}
@ -181,3 +189,8 @@ export const ChartView = ({ data, timeRange }: Props) => {
</>
);
};
const showModelBoundsLabel = i18n.translate(
'xpack.infra.logs.analysis.logRateSectionModelBoundsCheckboxLabel',
{ defaultMessage: 'Show model bounds' }
);

4
x-pack/legacy/plugins/infra/public/pages/logs/analysis/sections/log_rate/index.tsx
View file

@ -24,10 +24,12 @@ import { TimeRange } from '../../../../../../common/http_api/shared/time_range';
export const LogRateResults = ({
isLoading,
results,
setTimeRange,
timeRange,
}: {
isLoading: boolean;
results: GetLogEntryRateSuccessResponsePayload['data'] | null;
setTimeRange: (timeRange: TimeRange) => void;
timeRange: TimeRange;
}) => {
const title = i18n.translate('xpack.infra.logs.analysis.logRateSectionTitle', {
@ -83,7 +85,7 @@ export const LogRateResults = ({
</EuiFlexGroup>
<EuiSpacer size="l" />
{viewMode === 'chart' ? (
<ChartView data={results} timeRange={timeRange} />
<ChartView data={results} setTimeRange={setTimeRange} timeRange={timeRange} />
) : (
<TableView data={results} />
)}