diff --git a/public/app/features/explore/QueryField.tsx b/public/app/features/explore/QueryField.tsx index d5cba981951..24b8b8f5b16 100644 --- a/public/app/features/explore/QueryField.tsx +++ b/public/app/features/explore/QueryField.tsx @@ -4,6 +4,7 @@ import ReactDOM from 'react-dom'; import { Change, Value } from 'slate'; import { Editor } from 'slate-react'; import Plain from 'slate-plain-serializer'; +import classnames from 'classnames'; import { CompletionItem, CompletionItemGroup, TypeaheadOutput } from 'app/types/explore'; @@ -30,6 +31,7 @@ function hasSuggestions(suggestions: CompletionItemGroup[]): boolean { export interface QueryFieldProps { additionalPlugins?: any[]; cleanText?: (text: string) => string; + disabled?: boolean; initialQuery: string | null; onBlur?: () => void; onFocus?: () => void; @@ -78,7 +80,7 @@ export class QueryField extends React.PureComponent p); + this.plugins = [ClearPlugin(), NewlinePlugin(), ...(props.additionalPlugins || [])].filter(p => p); this.state = { suggestions: [], @@ -440,12 +442,17 @@ export class QueryField extends React.PureComponent +
{this.renderMenu()} ( {CHEAT_SHEET_ITEMS.map(item => (
{item.title}
-
props.onClickExample({ refId: '1', expr: item.expression })} - > - {item.expression} -
+ {item.expression && ( +
props.onClickExample({ refId: '1', expr: item.expression })} + > + {item.expression} +
+ )}
{item.label}
))} diff --git a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx index 005706bb8d1..f5d42a2e8cf 100644 --- a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx +++ b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx @@ -12,9 +12,15 @@ import BracesPlugin from 'app/features/explore/slate-plugins/braces'; import RunnerPlugin from 'app/features/explore/slate-plugins/runner'; import QueryField, { TypeaheadInput, QueryFieldState } from 'app/features/explore/QueryField'; import { DataQuery } from 'app/types'; +import { parseQuery, formatQuery } from '../query_utils'; const PRISM_SYNTAX = 'promql'; +const SEARCH_FIELD_STYLES = { + width: '66%', + marginLeft: 3, +}; + export function willApplySuggestion(suggestion: string, { typeaheadContext, typeaheadText }: QueryFieldState): string { // Modify suggestion based on context switch (typeaheadContext) { @@ -67,7 +73,10 @@ interface LokiQueryFieldState { class LokiQueryField extends React.PureComponent { plugins: any[]; + pluginsSearch: any[]; languageProvider: any; + modifiedSearch: string; + modifiedQuery: string; constructor(props: LokiQueryFieldProps, context) { super(props, context); @@ -85,6 +94,8 @@ class LokiQueryField extends React.PureComponent { + const enableSearchField = !this.modifiedQuery && value; + this.modifiedQuery = value; // Send text change to parent const { initialQuery, onQueryChange } = this.props; if (onQueryChange) { + const search = this.modifiedSearch || parseQuery(initialQuery.expr).regexp; + const expr = formatQuery(value, search); const query = { ...initialQuery, - expr: value, + expr, + }; + onQueryChange(query, override); + } + // Enable the search field if we have a selector query + if (enableSearchField) { + this.forceUpdate(); + } + }; + + onChangeSearch = (value: string, override?: boolean) => { + this.modifiedSearch = value; + // Send text change to parent + const { initialQuery, onQueryChange } = this.props; + if (onQueryChange) { + const selector = this.modifiedQuery || parseQuery(initialQuery.expr).query; + const expr = formatQuery(selector, value); + const query = { + ...initialQuery, + expr, }; onQueryChange(query, override); } @@ -190,6 +224,9 @@ class LokiQueryField extends React.PureComponent @@ -204,11 +241,11 @@ class LokiQueryField extends React.PureComponent @@ -224,6 +261,16 @@ class LokiQueryField extends React.PureComponent ) : null}
+
+ +
); } diff --git a/public/app/plugins/datasource/loki/query_utils.ts b/public/app/plugins/datasource/loki/query_utils.ts index 795d1e2ceeb..4f246ea8e28 100644 --- a/public/app/plugins/datasource/loki/query_utils.ts +++ b/public/app/plugins/datasource/loki/query_utils.ts @@ -1,5 +1,6 @@ const selectorRegexp = /(?:^|\s){[^{]*}/g; export function parseQuery(input: string) { + input = input || ''; const match = input.match(selectorRegexp); let query = ''; let regexp = input; diff --git a/public/sass/components/_slate_editor.scss b/public/sass/components/_slate_editor.scss index 25b20f180ef..714b8c487c2 100644 --- a/public/sass/components/_slate_editor.scss +++ b/public/sass/components/_slate_editor.scss @@ -5,7 +5,7 @@ word-break: break-word; } -.slate-query-field-wrapper { +.slate-query-field__wrapper { position: relative; display: inline-block; padding: 6px 7px 4px; @@ -20,6 +20,10 @@ transition: all 0.3s; } +.slate-query-field__wrapper--disabled { + background-color: inherit; +} + .slate-typeahead { .typeahead { position: absolute;