Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ML] Data visualizer: Changes refresh button in Data View and Data Drift view to indicate an update is pending #196537

Merged
merged 3 commits into from
Oct 18, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
change refresh button
  • Loading branch information
rbrtj committed Oct 16, 2024
commit 7229f335c20e9a3155bf2b9ead961fe6e9f8ae3b
Original file line number Diff line number Diff line change
@@ -22,7 +22,7 @@ import {
} from '@elastic/eui';

import type { WindowParameters } from '@kbn/aiops-log-rate-analysis';
import type { Filter, Query } from '@kbn/es-query';
import { buildEsQuery, type Filter, type Query } from '@kbn/es-query';
import { useUrlState, usePageUrlState } from '@kbn/ml-url-state';
import type { DataSeriesDatum } from '@elastic/charts/dist/chart_types/xy_chart/utils/series';
import { useStorage } from '@kbn/ml-local-storage';
@@ -38,6 +38,7 @@ import { css } from '@emotion/react';
import type { SearchQueryLanguage } from '@kbn/ml-query-utils';
import { i18n } from '@kbn/i18n';
import { cloneDeep } from 'lodash';
import { getEsQueryConfig } from '@kbn/data-plugin/common';
import type { SingleBrushWindowParameters } from './document_count_chart_single_brush/single_brush';
import type { InitialSettings } from './use_data_drift_result';
import { useDataDriftStateManagerContext } from './use_state_manager';
@@ -59,7 +60,11 @@ const dataViewTitleHeader = css({
minWidth: '300px',
});

export const PageHeader: FC = () => {
interface PageHeaderProps {
onRefresh: () => void;
needsUpdate: boolean;
}
export const PageHeader: FC<PageHeaderProps> = ({ onRefresh, needsUpdate }) => {
const [, setGlobalState] = useUrlState('_g');
const { dataView } = useDataSource();

@@ -121,6 +126,8 @@ export const PageHeader: FC = () => {
showRefresh={!hasValidTimeField}
width="full"
flexGroup={false}
onRefresh={onRefresh}
needsUpdate={needsUpdate}
/>
</EuiFlexGroup>,
]}
@@ -147,7 +154,7 @@ const isBarBetween = (start: number, end: number, min: number, max: number) => {
};
export const DataDriftPage: FC<Props> = ({ initialSettings }) => {
const {
services: { data: dataService },
services: { data: dataService, uiSettings },
} = useDataVisualizerKibana();
const { dataView, savedSearch } = useDataSource();

@@ -174,6 +181,10 @@ export const DataDriftPage: FC<Props> = ({ initialSettings }) => {

const [selectedSavedSearch, setSelectedSavedSearch] = useState(savedSearch);

const [localQueryString, setLocalQueryString] = useState<Query['query'] | undefined>(
dataComparisonListState.searchString
);

useEffect(() => {
if (savedSearch) {
setSelectedSavedSearch(savedSearch);
@@ -352,9 +363,46 @@ export const DataDriftPage: FC<Props> = ({ initialSettings }) => {
? getDataDriftDataLabel(COMPARISON_LABEL, initialSettings?.comparison)
: getDataDriftDataLabel(COMPARISON_LABEL);

const onQueryChange = useCallback((query: Query['query'] | undefined) => {
setLocalQueryString(query);
}, []);

const queryNeedsUpdate = useMemo(
() => localQueryString !== dataComparisonListState.searchString,
[dataComparisonListState.searchString, localQueryString]
);

const handleRefresh = useCallback(() => {
if (queryNeedsUpdate) {
const newQuery = buildEsQuery(
dataView,
{
query: localQueryString || '',
language: searchQueryLanguage,
},
dataService?.query.filterManager.getFilters() ?? [],
uiSettings ? getEsQueryConfig(uiSettings) : undefined
);
setDataComparisonListState({
...dataComparisonListState,
searchString: localQueryString,
searchQuery: newQuery,
});
}
}, [
queryNeedsUpdate,
dataView,
localQueryString,
searchQueryLanguage,
dataService?.query.filterManager,
uiSettings,
setDataComparisonListState,
dataComparisonListState,
]);

return (
<EuiPageBody data-test-subj="dataComparisonDataDriftPage" paddingSize="none" panelled={false}>
<PageHeader />
<PageHeader onRefresh={handleRefresh} needsUpdate={queryNeedsUpdate} />
<EuiSpacer size="m" />
<EuiPageSection paddingSize="none">
<EuiFlexGroup gutterSize="m" direction="column">
@@ -365,6 +413,7 @@ export const DataDriftPage: FC<Props> = ({ initialSettings }) => {
searchQuery={searchQuery}
searchQueryLanguage={searchQueryLanguage}
setSearchParams={setSearchParams}
onQueryChange={onQueryChange}
/>
</EuiFlexItem>
<EuiFlexItem>
Original file line number Diff line number Diff line change
@@ -154,6 +154,10 @@ export const IndexDataVisualizerView: FC<IndexDataVisualizerViewProps> = (dataVi
dataVisualizerProps.currentSavedSearch
);

const [localQueryString, setLocalQueryString] = useState<Query['query'] | undefined>(
dataVisualizerListState.searchString
);

const { currentDataView, currentSessionId, getAdditionalLinks } = dataVisualizerProps;

const dataViewFields: DataViewField[] = currentDataView.fields;
@@ -464,6 +468,43 @@ export const IndexDataVisualizerView: FC<IndexDataVisualizerViewProps> = (dataVi
},
});

const queryNeedsUpdate = useMemo(
() => (localQueryString !== dataVisualizerListState.searchString ? true : undefined),
[dataVisualizerListState.searchString, localQueryString]
);

const onQueryChange = useCallback((query: Query['query'] | undefined) => {
setLocalQueryString(query);
}, []);

const handleRefresh = useCallback(() => {
if (queryNeedsUpdate) {
const newQuery = buildEsQuery(
currentDataView,
{
query: localQueryString || '',
language: searchQueryLanguage,
},
data.query.filterManager.getFilters() ?? [],
uiSettings ? getEsQueryConfig(uiSettings) : undefined
);
setDataVisualizerListState({
...dataVisualizerListState,
searchString: localQueryString,
searchQuery: newQuery,
});
}
}, [
queryNeedsUpdate,
currentDataView,
localQueryString,
searchQueryLanguage,
data.query.filterManager,
uiSettings,
setDataVisualizerListState,
dataVisualizerListState,
]);

return (
<EuiPageTemplate
offset={0}
@@ -514,6 +555,8 @@ export const IndexDataVisualizerView: FC<IndexDataVisualizerViewProps> = (dataVi
isAutoRefreshOnly={!hasValidTimeField}
showRefresh={!hasValidTimeField}
width="full"
needsUpdate={queryNeedsUpdate}
onRefresh={handleRefresh}
/>
</EuiFlexItem>
</EuiFlexGroup>
@@ -537,6 +580,7 @@ export const IndexDataVisualizerView: FC<IndexDataVisualizerViewProps> = (dataVi
setVisibleFieldNames={setVisibleFieldNames}
showEmptyFields={showEmptyFields}
onAddFilter={onAddFilter}
onQueryChange={onQueryChange}
/>

{overallStats?.totalCount !== undefined && (
Original file line number Diff line number Diff line change
@@ -8,11 +8,12 @@
import type { Filter, Query, TimeRange } from '@kbn/es-query';
import { buildEsQuery } from '@kbn/es-query';
import { i18n } from '@kbn/i18n';
import React, { useEffect, useState } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import { isDefined } from '@kbn/ml-is-defined';
import type { DataView } from '@kbn/data-views-plugin/common';
import type { SearchQueryLanguage } from '@kbn/ml-query-utils';
import { getEsQueryConfig } from '@kbn/data-plugin/common';
import { debounce } from 'lodash';
import { useDataVisualizerKibana } from '../../../kibana_context';

export const SearchPanelContent = ({
@@ -21,11 +22,13 @@ export const SearchPanelContent = ({
searchQueryLanguage,
dataView,
setSearchParams,
onQueryChange,
}: {
dataView: DataView;
searchQuery: Query['query'];
searchString: Query['query'];
searchQueryLanguage: SearchQueryLanguage;
onQueryChange?: (query: Query['query'] | undefined) => void;
setSearchParams({
searchQuery,
searchString,
@@ -76,7 +79,8 @@ export const SearchPanelContent = ({
queryManager.filterManager.getFilters() ?? [],
uiSettings ? getEsQueryConfig(uiSettings) : undefined
);

// Additional call because the search bar doesn't call onQueryChange when the query is cleared from filters
onQueryChange?.(mergedQuery.query);
setSearchParams({
searchQuery: combinedQuery,
searchString: mergedQuery.query,
@@ -93,6 +97,18 @@ export const SearchPanelContent = ({
}
};

// Debounce the onQueryChange to prevent race condition when filters are updated and both `onQuerySubmit` and `onQueryChange` are called.
const debouncedOnQueryChange = useCallback(
(inputQuery: Query['query'] | undefined) => {
const debouncedFunction = debounce((debouncedQuery: Query['query'] | undefined) => {
onQueryChange?.(debouncedQuery);
}, 100);

return debouncedFunction(inputQuery);
},
[onQueryChange]
);

return (
<SearchBar
dataTestSubj="dataVisualizerQueryInput"
@@ -112,6 +128,10 @@ export const SearchPanelContent = ({
displayStyle={'inPage'}
isClearable={true}
customSubmitButton={<div />}
onQueryChange={({ query }) => {
// console.log('On query change called', query);
debouncedOnQueryChange?.(query?.query);
}}
/>
);
};
Original file line number Diff line number Diff line change
@@ -47,6 +47,7 @@ interface Props {
}): void;
showEmptyFields: boolean;
onAddFilter?: (field: DataViewField | string, value: string, type: '+' | '-') => void;
onQueryChange?: (query: Query['query'] | undefined) => void;
}

export const SearchPanel: FC<Props> = ({
@@ -62,6 +63,7 @@ export const SearchPanel: FC<Props> = ({
visibleFieldNames,
setSearchParams,
showEmptyFields,
onQueryChange,
}) => {
const dvSearchPanelControls = css({
marginLeft: '0px !important',
@@ -101,6 +103,7 @@ export const SearchPanel: FC<Props> = ({
searchString={searchString}
searchQuery={searchQuery}
searchQueryLanguage={searchQueryLanguage}
onQueryChange={onQueryChange}
/>
</EuiFlexItem>