[Infra UI] Brushing for Metrics Explorer Charts (#36235)
* Returning live data * Adding TSVB data population * adding tests * Adding UI * Adding rough draft of metrics control * Breaking out metric component; adding useCallback to callbacks; adding intl strings * seperating out form * Break metrics form out; change to custom color picker; create custom color palette; * fixing bug with color picker * changes to color palette; fix callback issue * Fixing count label * Fix chart label to truncate * Changing by to graph per * Making the metric popover wider to ease field name truncation * critical changes to the import order * Changing metrics behavior * Hide metrics when choosing document count * Updating chart tooltip; fixing types; * Setting intial state to open metrics; Tweaking toolbar sizes * fixing linting issues * Allow users to filter by a grouping by clicking on the title * Change rate to rateMax; add rateMin and rateAvg; fix title text-align * Use relative paths to fix base path bug * fixing typescript errors; removing rateAvg and rateMin; removing extranious files; * Fixing formatting issues * Fixing i18n linting errors * Changing to elastic-charts * fixing typing errors with charts * Moving afterKey out of URL to fix bug with pagination * Adding support for multiple axises * Adding tests for useMetricsExplorerData hook * breaking up the charting code; removing multi-axis support; changing color palette to use blue and red for first two color * Adding drop down menu to charts for filtering and linking to TSVB * Adding more tests for useMetricsExplorerData hook; adding error message; adding chart options to non-groupby charts * only display groupings that have the metric fields * Refactor page level state into custom hook; add test for options handlers; * Fixing linting * removing color picker * removing useInterval * Changing group by to use the pills; Changing context menu button; adding icons to context menu. * Adding test for color palette * Adding test for createFormatterForMetric() * removing tsx extension; adding tests for createMetricLabel() * removing tsx extension; adding tests for createMetricLabel() * re-organizing helpers * Moving helpers from libs to helpers; adding test for metricToFormat * Fixing bug in tsvb link fn; adding timeRange props; adding createTSVBLink() test * fixing timeRange fixture import; fixing aria label for action button * removing some unecessary useCallbacks * Adding test for MetricsExplorerChartContextMenu component * Fixing linting issues * Optimizing test * Adding empty prompts for no metrics and no data * Removing duplicate sereis def * tcs has lost it's mind so I had to copy enzyme_helpers.tsx into our plugin * Appeasing prettier * Update x-pack/plugins/infra/public/components/metrics_exploerer/metrics.tsx Co-Authored-By: simianhacker <chris@chriscowan.us> * fixing path typo * Adding supportFiltering to dependicy; change options to be more specific * remove typo * Fixing typo * Adding logColumns to source fixture; fixing typo * Fixing path to be more sane * Adding brushing to Metrics Explorer Charts
This commit is contained in:
parent
6377605f07
commit
e115a9aa40
|
@ -7,12 +7,13 @@
|
|||
import React, { useCallback } from 'react';
|
||||
import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
|
||||
import { EuiTitle } from '@elastic/eui';
|
||||
import { Chart, Axis, Position, timeFormatter, getAxisId } from '@elastic/charts';
|
||||
import { Chart, Axis, Position, timeFormatter, getAxisId, Settings } from '@elastic/charts';
|
||||
import '@elastic/charts/dist/style.css';
|
||||
import { first } from 'lodash';
|
||||
import { niceTimeFormatByDay } from '@elastic/charts/dist/utils/data/formatters';
|
||||
import { EuiFlexGroup } from '@elastic/eui';
|
||||
import { EuiFlexItem } from '@elastic/eui';
|
||||
import moment from 'moment';
|
||||
import { MetricsExplorerSeries } from '../../../server/routes/metrics_explorer/types';
|
||||
import {
|
||||
MetricsExplorerOptions,
|
||||
|
@ -36,6 +37,7 @@ interface Props {
|
|||
series: MetricsExplorerSeries;
|
||||
source: SourceQuery.Query['source']['configuration'] | undefined;
|
||||
timeRange: MetricsExplorerTimeOptions;
|
||||
onTimeChange: (start: string, end: string) => void;
|
||||
}
|
||||
|
||||
const dateFormatter = timeFormatter(niceTimeFormatByDay(1));
|
||||
|
@ -50,8 +52,12 @@ export const MetricsExplorerChart = injectI18n(
|
|||
height = 200,
|
||||
width = '100%',
|
||||
timeRange,
|
||||
onTimeChange,
|
||||
}: Props) => {
|
||||
const { metrics } = options;
|
||||
const handleTimeChange = (from: number, to: number) => {
|
||||
onTimeChange(moment(from).toISOString(), moment(to).toISOString());
|
||||
};
|
||||
const yAxisFormater = useCallback(createFormatterForMetric(first(metrics)), [options]);
|
||||
return (
|
||||
<React.Fragment>
|
||||
|
@ -97,6 +103,7 @@ export const MetricsExplorerChart = injectI18n(
|
|||
tickFormat={dateFormatter}
|
||||
/>
|
||||
<Axis id={getAxisId('values')} position={Position.Left} tickFormat={yAxisFormater} />
|
||||
<Settings onBrushEnd={handleTimeChange} />
|
||||
</Chart>
|
||||
) : options.metrics.length > 0 ? (
|
||||
<MetricsExplorerEmptyChart />
|
||||
|
|
|
@ -23,13 +23,25 @@ interface Props {
|
|||
onLoadMore: (afterKey: string | null) => void;
|
||||
onRefetch: () => void;
|
||||
onFilter: (filter: string) => void;
|
||||
onTimeChange: (start: string, end: string) => void;
|
||||
data: MetricsExplorerResponse | null;
|
||||
intl: InjectedIntl;
|
||||
source: SourceQuery.Query['source']['configuration'] | undefined;
|
||||
timeRange: MetricsExplorerTimeOptions;
|
||||
}
|
||||
export const MetricsExplorerCharts = injectI18n(
|
||||
({ loading, data, onLoadMore, options, onRefetch, intl, onFilter, source, timeRange }: Props) => {
|
||||
({
|
||||
loading,
|
||||
data,
|
||||
onLoadMore,
|
||||
options,
|
||||
onRefetch,
|
||||
intl,
|
||||
onFilter,
|
||||
source,
|
||||
timeRange,
|
||||
onTimeChange,
|
||||
}: Props) => {
|
||||
if (!data && loading) {
|
||||
return (
|
||||
<InfraLoadingPanel
|
||||
|
@ -78,6 +90,7 @@ export const MetricsExplorerCharts = injectI18n(
|
|||
series={series}
|
||||
source={source}
|
||||
timeRange={timeRange}
|
||||
onTimeChange={onTimeChange}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
))}
|
||||
|
|
|
@ -90,6 +90,7 @@ export const MetricsExplorerPage = injectI18n(
|
|||
onLoadMore={handleLoadMore}
|
||||
onFilter={handleFilterQuerySubmit}
|
||||
onRefetch={handleRefresh}
|
||||
onTimeChange={handleTimeChange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
@ -42,11 +42,10 @@ export const useMetricsExplorerState = (
|
|||
|
||||
const handleTimeChange = useCallback(
|
||||
(start: string, end: string) => {
|
||||
setOptions({ ...options });
|
||||
setAfterKey(null);
|
||||
setTimeRange({ ...currentTimerange, from: start, to: end });
|
||||
},
|
||||
[options, currentTimerange]
|
||||
[currentTimerange]
|
||||
);
|
||||
|
||||
const handleGroupByChange = useCallback(
|
||||
|
|
Loading…
Reference in a new issue