[ML] Explain log rate spikes: Fix hooks caching. (#136645)

Fixes issues where hooks would return stale data (index pattern, time ranges, total docs etc.).
This commit is contained in:
Walter Rafelsberger 2022-07-19 18:17:38 +02:00 committed by GitHub
parent b31b076b07
commit b264dbcb0a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 42 additions and 49 deletions

View file

@ -52,17 +52,9 @@ export interface ExplainLogRateSpikesWrapperProps {
export const ExplainLogRateSpikesWrapper: FC<ExplainLogRateSpikesWrapperProps> = ({ dataView }) => {
const [globalState, setGlobalState] = useUrlState('_g');
const { docStats, timefilter } = useData(dataView, setGlobalState);
const { docStats, timefilter, earliest, latest } = useData(dataView, setGlobalState);
const [windowParameters, setWindowParameters] = useState<WindowParameters | undefined>();
const activeBounds = timefilter.getActiveBounds();
let earliest: number | undefined;
let latest: number | undefined;
if (activeBounds !== undefined) {
earliest = activeBounds.min?.valueOf();
latest = activeBounds.max?.valueOf();
}
useEffect(() => {
if (globalState?.time !== undefined) {
timefilter.setTime({

View file

@ -24,6 +24,9 @@ export const useData = (
const { services } = useAiOpsKibana();
const { uiSettings } = services;
const [lastRefresh, setLastRefresh] = useState(0);
const [fieldStatsRequest, setFieldStatsRequest] = useState<
DocumentStatsSearchStrategyParams | undefined
>();
const _timeBuckets = useMemo(() => {
return new TimeBuckets({
@ -39,47 +42,31 @@ export const useData = (
autoRefreshSelector: true,
});
const fieldStatsRequest: DocumentStatsSearchStrategyParams | undefined = useMemo(
() => {
// Obtain the interval to use for date histogram aggregations
// (such as the document count chart). Aim for 75 bars.
const buckets = _timeBuckets;
const tf = timefilter;
if (!buckets || !tf || !currentDataView) return;
const activeBounds = tf.getActiveBounds();
let earliest: number | undefined;
let latest: number | undefined;
if (activeBounds !== undefined && currentDataView.timeFieldName !== undefined) {
earliest = activeBounds.min?.valueOf();
latest = activeBounds.max?.valueOf();
}
const bounds = tf.getActiveBounds();
const BAR_TARGET = 75;
buckets.setInterval('auto');
if (bounds) {
buckets.setBounds(bounds);
buckets.setBarTarget(BAR_TARGET);
}
const aggInterval = buckets.getInterval();
const { docStats } = useDocumentCountStats(fieldStatsRequest, lastRefresh);
return {
earliest,
latest,
intervalMs: aggInterval?.asMilliseconds(),
function updateFieldStatsRequest() {
const timefilterActiveBounds = timefilter.getActiveBounds();
if (timefilterActiveBounds !== undefined) {
const BAR_TARGET = 75;
_timeBuckets.setInterval('auto');
_timeBuckets.setBounds(timefilterActiveBounds);
_timeBuckets.setBarTarget(BAR_TARGET);
setFieldStatsRequest({
earliest: timefilterActiveBounds.min?.valueOf(),
latest: timefilterActiveBounds.max?.valueOf(),
intervalMs: _timeBuckets.getInterval()?.asMilliseconds(),
index: currentDataView.title,
timeFieldName: currentDataView.timeFieldName,
runtimeFieldMap: currentDataView.getRuntimeMappings(),
};
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[_timeBuckets, timefilter, currentDataView.id, lastRefresh]
);
const { docStats } = useDocumentCountStats(fieldStatsRequest, lastRefresh);
});
setLastRefresh(Date.now());
}
}
useEffect(() => {
const timeUpdateSubscription = merge(
timefilter.getTimeUpdate$(),
timefilter.getAutoRefreshFetch$(),
timefilter.getTimeUpdate$(),
aiopsRefresh$
).subscribe(() => {
if (onUpdate) {
@ -88,7 +75,19 @@ export const useData = (
refreshInterval: timefilter.getRefreshInterval(),
});
}
setLastRefresh(Date.now());
updateFieldStatsRequest();
});
return () => {
timeUpdateSubscription.unsubscribe();
};
});
// This hook listens just for an initial update of the timefilter to be switched on.
useEffect(() => {
const timeUpdateSubscription = timefilter.getEnabledUpdated$().subscribe(() => {
if (fieldStatsRequest === undefined) {
updateFieldStatsRequest();
}
});
return () => {
timeUpdateSubscription.unsubscribe();
@ -98,5 +97,7 @@ export const useData = (
return {
docStats,
timefilter,
earliest: fieldStatsRequest?.earliest,
latest: fieldStatsRequest?.latest,
};
};

View file

@ -72,7 +72,7 @@ export function useDocumentCountStats<TParams extends DocumentStatsSearchStrateg
try {
const resp: any = await lastValueFrom(
data.search.search({
params: getDocumentCountStatsRequest(searchParams).body,
params: getDocumentCountStatsRequest(searchParams),
})
);
const documentCountStats = processDocumentCountStats(resp?.rawResponse, searchParams);

View file

@ -8,7 +8,7 @@
import { useCallback, useState } from 'react';
import { useAiOpsKibana } from '../kibana_context';
export const AIOPS_FROZEN_TIER_PREFERENCE = 'aiop.frozenDataTierPreference';
export const AIOPS_FROZEN_TIER_PREFERENCE = 'aiops.frozenDataTierPreference';
export type AiOps = Partial<{
[AIOPS_FROZEN_TIER_PREFERENCE]: 'exclude_frozen' | 'include_frozen';

View file

@ -21,15 +21,15 @@ export const useTimefilter = ({
const { timefilter } = services.data.query.timefilter;
useEffect(() => {
if (timeRangeSelector === true) {
if (timeRangeSelector === true && !timefilter.isTimeRangeSelectorEnabled()) {
timefilter.enableTimeRangeSelector();
} else if (timeRangeSelector === false) {
} else if (timeRangeSelector === false && timefilter.isTimeRangeSelectorEnabled()) {
timefilter.disableTimeRangeSelector();
}
if (autoRefreshSelector === true) {
if (autoRefreshSelector === true && !timefilter.isAutoRefreshSelectorEnabled()) {
timefilter.enableAutoRefreshSelector();
} else if (autoRefreshSelector === false) {
} else if (autoRefreshSelector === false && timefilter.isAutoRefreshSelectorEnabled()) {
timefilter.disableAutoRefreshSelector();
}
}, [timeRangeSelector, autoRefreshSelector, timefilter]);