Skip to content

Commit

Permalink
[ML] Replace KqlFilterBar with QueryStringInput.
Browse files Browse the repository at this point in the history
  • Loading branch information
@walterra
walterra committed Mar 10, 2020
1 parent 51fb32b commit 8693f9b
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 83 deletions.
2 changes: 0 additions & 2 deletions x-pack/plugins/transform/public/__mocks__/shared_imports.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,10 @@ jest.mock('ui/new_platform');

export const expandLiteralStrings = jest.fn();
export const XJsonMode = jest.fn();
export const setDependencyCache = jest.fn();
export const useRequest = jest.fn(() => ({
isLoading: false,
error: null,
data: undefined,
}));
export { mlInMemoryTableBasicFactory } from '../../../../legacy/plugins/ml/public/application/components/ml_in_memory_table';
export const SORT_DIRECTION = { ASC: 'asc' };
export const KqlFilterBar = jest.fn(() => null);
24 changes: 18 additions & 6 deletions x-pack/plugins/transform/public/app/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,14 @@ import { HashRouter, Redirect, Route, Switch } from 'react-router-dom';

import { FormattedMessage } from '@kbn/i18n/react';

import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
import { Storage } from '../../../../../src/plugins/kibana_utils/public';

import { API_BASE_PATH } from '../../common/constants';

import { SectionError } from './components';
import { CLIENT_BASE_PATH, SECTION_SLUG } from './constants';
import { getAppProviders } from './app_dependencies';
import { AuthorizationContext } from './lib/authorization';
import { AuthorizationContext, AuthorizationProvider } from './lib/authorization';
import { AppDependencies } from './app_dependencies';

import { CloneTransformSection } from './sections/clone_transform';
Expand Down Expand Up @@ -60,13 +64,21 @@ export const App: FC = () => {
);
};

const localStorage = new Storage(window.localStorage);

export const renderApp = (element: HTMLElement, appDependencies: AppDependencies) => {
const Providers = getAppProviders(appDependencies);
const I18nContext = appDependencies.i18n.Context;

render(
<Providers>
<App />
</Providers>,
<KibanaContextProvider services={{ ...appDependencies, storage: localStorage }}>
<AuthorizationProvider privilegesEndpoint={`${API_BASE_PATH}privileges`}>
<I18nContext>
<HashRouter>
<App />
</HashRouter>
</I18nContext>
</AuthorizationProvider>
</KibanaContextProvider>,
element
);

Expand Down
52 changes: 4 additions & 48 deletions x-pack/plugins/transform/public/app/app_dependencies.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,11 @@
* you may not use this file except in compliance with the Elastic License.
*/

import React, { createContext, useContext, ReactNode } from 'react';
import { HashRouter } from 'react-router-dom';

import { CoreSetup, CoreStart } from 'src/core/public';
import { DataPublicPluginStart } from 'src/plugins/data/public';

import { API_BASE_PATH } from '../../common/constants';

import { setDependencyCache } from '../shared_imports';

import { AuthorizationProvider } from './lib/authorization';
import { useKibana } from '../../../../../src/plugins/kibana_react/public';
import { Storage } from '../../../../../src/plugins/kibana_utils/public';

export interface AppDependencies {
chrome: CoreStart['chrome'];
Expand All @@ -25,33 +19,12 @@ export interface AppDependencies {
notifications: CoreStart['notifications'];
uiSettings: CoreStart['uiSettings'];
savedObjects: CoreStart['savedObjects'];
storage: Storage;
overlays: CoreStart['overlays'];
}

let DependenciesContext: React.Context<AppDependencies>;

const setAppDependencies = (deps: AppDependencies) => {
const legacyBasePath = {
prepend: deps.http.basePath.prepend,
get: deps.http.basePath.get,
remove: () => {},
};

setDependencyCache({
autocomplete: deps.data.autocomplete,
docLinks: deps.docLinks,
basePath: legacyBasePath as any,
});
DependenciesContext = createContext<AppDependencies>(deps);
return DependenciesContext.Provider;
};

export const useAppDependencies = () => {
if (!DependenciesContext) {
throw new Error(`The app dependencies Context hasn't been set.
Use the "setAppDependencies()" method when bootstrapping the app.`);
}
return useContext<AppDependencies>(DependenciesContext);
return useKibana().services as AppDependencies;
};

export const useToastNotifications = () => {
Expand All @@ -60,20 +33,3 @@ export const useToastNotifications = () => {
} = useAppDependencies();
return toastNotifications;
};

export const getAppProviders = (deps: AppDependencies) => {
const I18nContext = deps.i18n.Context;

// Create App dependencies context and get its provider
const AppDependenciesProvider = setAppDependencies(deps);

return ({ children }: { children: ReactNode }) => (
<AuthorizationProvider privilegesEndpoint={`${API_BASE_PATH}privileges`}>
<I18nContext>
<HashRouter>
<AppDependenciesProvider value={deps}>{children}</AppDependenciesProvider>
</HashRouter>
</I18nContext>
</AuthorizationProvider>
);
};
82 changes: 61 additions & 21 deletions ...ransform/public/app/sections/create_transform/components/step_define/step_define_form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,16 @@ import {
EuiHorizontalRule,
EuiLink,
EuiPanel,
// @ts-ignore
EuiSearchBar,
EuiSpacer,
EuiSwitch,
} from '@elastic/eui';

import {
esKuery,
Query,
QueryStringInput,
} from '../../../../../../../../../src/plugins/data/public';

import { useDocumentationLinks } from '../../../../hooks/use_documentation_links';
import { SavedSearchQuery, SearchItems } from '../../../../hooks/use_search_items';
import { useXJsonMode, xJsonMode } from '../../../../hooks/use_x_json_mode';
Expand All @@ -37,7 +41,6 @@ import { AggListForm } from '../aggregation_list';
import { GroupByListForm } from '../group_by_list';
import { SourceIndexPreview } from '../source_index_preview';
import { PivotPreview } from './pivot_preview';
import { KqlFilterBar } from '../../../../../shared_imports';
import { SwitchModal } from './switch_modal';

import {
Expand Down Expand Up @@ -74,6 +77,11 @@ export interface StepDefineExposedState {
const defaultSearch = '*';
const emptySearch = '';

enum QUERY_LANGUAGE {
KUERY = 'kuery',
LUCENE = 'lucene',
}

export function getDefaultStepDefineState(searchItems: SearchItems): StepDefineExposedState {
return {
aggList: {} as PivotAggsConfigDict,
Expand Down Expand Up @@ -244,23 +252,41 @@ export const StepDefineForm: FC<Props> = React.memo(({ overrides = {}, onChange,
const defaults = { ...getDefaultStepDefineState(searchItems), ...overrides };

// The search filter
const [searchInput, setSearchInput] = useState<Query>({
query: '',
language: QUERY_LANGUAGE.KUERY as string,
});
const [searchString, setSearchString] = useState(defaults.searchString);
const [searchQuery, setSearchQuery] = useState(defaults.searchQuery);
const [useKQL] = useState(true);

const searchHandler = (d: Record<string, any>) => {
const { filterQuery, queryString } = d;
const newSearch = queryString === emptySearch ? defaultSearch : queryString;
const { indexPattern } = searchItems;

const searchChangeHandler = (query: Query) => setSearchInput(query);
const searchSubmitHandler = (query: Query) => {
let queryString = '';
let filterQuery = { match_all: {} } as Dictionary<any>;

if (query.language === QUERY_LANGUAGE.KUERY && typeof query.query === 'string') {
filterQuery = esKuery.toElasticsearchQuery(
esKuery.fromKueryExpression(query.query as string),
indexPattern
);
} else if (typeof query.query === 'string') {
queryString = query.query;
} else {
filterQuery = query.query;
}

const newSearchString = queryString === emptySearch ? defaultSearch : queryString;
const newSearchQuery = isMatchAllQuery(filterQuery) ? defaultSearch : filterQuery;
setSearchString(newSearch);
setSearchString(newSearchString);
setSearchQuery(newSearchQuery);
};

// The list of selected group by fields
const [groupByList, setGroupByList] = useState(defaults.groupByList);

const { indexPattern } = searchItems;

const {
groupByOptions,
groupByOptionsData,
Expand Down Expand Up @@ -592,18 +618,32 @@ export const StepDefineForm: FC<Props> = React.memo(({ overrides = {}, onChange,
defaultMessage: 'Use a query to filter the source data (optional).',
})}
>
<KqlFilterBar
indexPattern={indexPattern}
onSubmit={searchHandler}
initialValue={searchString === defaultSearch ? emptySearch : searchString}
placeholder={i18n.translate(
'xpack.transform.stepDefineForm.queryPlaceholder',
{
defaultMessage: 'e.g. {example}',
values: { example: 'method : "GET" or status : "404"' },
}
)}
testSubj="tarnsformQueryInput"
<QueryStringInput
bubbleSubmitEvent={true}
query={searchInput}
indexPatterns={[indexPattern]}
onChange={searchChangeHandler}
onSubmit={searchSubmitHandler}
placeholder={
searchInput.language === QUERY_LANGUAGE.KUERY
? i18n.translate(
'xpack.transform.stepDefineForm.queryPlaceholderKql',
{
defaultMessage: 'e.g. {example}',
values: { example: 'method : "GET" or status : "404"' },
}
)
: i18n.translate(
'xpack.transform.stepDefineForm.queryPlaceholderLucene',
{
defaultMessage: 'e.g. {example}',
values: { example: 'sample lucene query' },
}
)
}
disableAutoFocus={true}
dataTestSubj="transformQueryInput"
languageSwitcherPopoverAnchorPosition="rightDown"
/>
</EuiFormRow>
)}
Expand Down
6 changes: 0 additions & 6 deletions x-pack/plugins/transform/public/shared_imports.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,3 @@ export {
SortDirection,
SORT_DIRECTION,
} from '../../../legacy/plugins/ml/public/application/components/ml_in_memory_table';

// Needs to be imported because we're reusing KqlFilterBar which depends on it.
export { setDependencyCache } from '../../../legacy/plugins/ml/public/application/util/dependency_cache';

// @ts-ignore: could not find declaration file for module
export { KqlFilterBar } from '../../../legacy/plugins/ml/public/application/components/kql_filter_bar';

0 comments on commit 8693f9b

Please sign in to comment.