[Metrics UI] Synch time for metrics ui Kibana time (#85502)
* Synch time for inventory and metrics explorer with Kibana time * Mock timefilter * more mocks
This commit is contained in:
parent
92c0a407f5
commit
5e172c97a2
|
@ -7,18 +7,25 @@ import { useCallback, useState, useEffect } from 'react';
|
|||
import * as rt from 'io-ts';
|
||||
import { pipe } from 'fp-ts/lib/pipeable';
|
||||
import { fold } from 'fp-ts/lib/Either';
|
||||
import DateMath from '@elastic/datemath';
|
||||
import { constant, identity } from 'fp-ts/lib/function';
|
||||
import createContainer from 'constate';
|
||||
import { useUrlState } from '../../../../utils/use_url_state';
|
||||
|
||||
import { useKibanaTimefilterTime } from '../../../../hooks/use_kibana_timefilter_time';
|
||||
export const DEFAULT_WAFFLE_TIME_STATE: WaffleTimeState = {
|
||||
currentTime: Date.now(),
|
||||
isAutoReloading: false,
|
||||
};
|
||||
|
||||
export const useWaffleTime = () => {
|
||||
// INFO: We currently only use the "to" time, but in the future we may do more.
|
||||
const [getTime] = useKibanaTimefilterTime({ from: 'now', to: 'now' });
|
||||
const kibanaTime = DateMath.parse(getTime().to);
|
||||
const [urlState, setUrlState] = useUrlState<WaffleTimeState>({
|
||||
defaultState: DEFAULT_WAFFLE_TIME_STATE,
|
||||
defaultState: {
|
||||
...DEFAULT_WAFFLE_TIME_STATE,
|
||||
currentTime: kibanaTime ? kibanaTime.toDate().getTime() : Date.now(),
|
||||
},
|
||||
decodeUrlState,
|
||||
encodeUrlState,
|
||||
urlStateKey: 'waffleTime',
|
||||
|
|
|
@ -15,6 +15,11 @@ import {
|
|||
createSeries,
|
||||
} from '../../../../utils/fixtures/metrics_explorer';
|
||||
|
||||
jest.mock('../../../../hooks/use_kibana_timefilter_time', () => ({
|
||||
useKibanaTimefilterTime: (defaults: { from: string; to: string }) => [() => defaults],
|
||||
useSyncKibanaTimeFilterTime: () => [() => {}],
|
||||
}));
|
||||
|
||||
const renderUseMetricsExplorerStateHook = () =>
|
||||
renderHook((props) => useMetricsExplorerState(props.source, props.derivedIndexPattern), {
|
||||
initialProps: { source, derivedIndexPattern },
|
||||
|
|
|
@ -24,6 +24,11 @@ jest.mock('../../../../alerting/use_alert_prefill', () => ({
|
|||
}),
|
||||
}));
|
||||
|
||||
jest.mock('../../../../hooks/use_kibana_timefilter_time', () => ({
|
||||
useKibanaTimefilterTime: (defaults: { from: string; to: string }) => [() => defaults],
|
||||
useSyncKibanaTimeFilterTime: () => [() => {}],
|
||||
}));
|
||||
|
||||
const renderUseMetricsExplorerOptionsHook = () => renderHook(() => useMetricsExplorerOptions());
|
||||
|
||||
interface LocalStore {
|
||||
|
|
|
@ -11,6 +11,10 @@ import { useState, useEffect, useMemo, Dispatch, SetStateAction } from 'react';
|
|||
import { useAlertPrefillContext } from '../../../../alerting/use_alert_prefill';
|
||||
import { Color } from '../../../../../common/color_palette';
|
||||
import { metricsExplorerMetricRT } from '../../../../../common/http_api/metrics_explorer';
|
||||
import {
|
||||
useKibanaTimefilterTime,
|
||||
useSyncKibanaTimeFilterTime,
|
||||
} from '../../../../hooks/use_kibana_timefilter_time';
|
||||
|
||||
const metricsExplorerOptionsMetricRT = t.intersection([
|
||||
metricsExplorerMetricRT,
|
||||
|
@ -145,14 +149,29 @@ function useStateWithLocalStorage<State>(
|
|||
}
|
||||
|
||||
export const useMetricsExplorerOptions = () => {
|
||||
const TIME_DEFAULTS = { from: 'now-1h', to: 'now' };
|
||||
const [getTime] = useKibanaTimefilterTime(TIME_DEFAULTS);
|
||||
const { from, to } = getTime();
|
||||
const defaultTimeRange = {
|
||||
from,
|
||||
to,
|
||||
interval: DEFAULT_TIMERANGE.interval,
|
||||
};
|
||||
|
||||
const [options, setOptions] = useStateWithLocalStorage<MetricsExplorerOptions>(
|
||||
'MetricsExplorerOptions',
|
||||
DEFAULT_OPTIONS
|
||||
);
|
||||
const [currentTimerange, setTimeRange] = useStateWithLocalStorage<MetricsExplorerTimeOptions>(
|
||||
'MetricsExplorerTimeRange',
|
||||
DEFAULT_TIMERANGE
|
||||
defaultTimeRange
|
||||
);
|
||||
|
||||
useSyncKibanaTimeFilterTime(TIME_DEFAULTS, {
|
||||
from: currentTimerange.from,
|
||||
to: currentTimerange.to,
|
||||
});
|
||||
|
||||
const [chartOptions, setChartOptions] = useStateWithLocalStorage<MetricsExplorerChartOptions>(
|
||||
'MetricsExplorerChartOptions',
|
||||
DEFAULT_CHART_OPTIONS
|
||||
|
@ -177,7 +196,7 @@ export const useMetricsExplorerOptions = () => {
|
|||
defaultViewState: {
|
||||
options: DEFAULT_OPTIONS,
|
||||
chartOptions: DEFAULT_CHART_OPTIONS,
|
||||
currentTimerange: DEFAULT_TIMERANGE,
|
||||
currentTimerange: defaultTimeRange,
|
||||
},
|
||||
options,
|
||||
chartOptions,
|
||||
|
|
Loading…
Reference in a new issue