Loki, Prometheus: Show Query patterns in all editor modes (#50263)

This commit is contained in:
Ivana Huckova 2022-06-13 09:45:01 +02:00 committed by GitHub
parent 8fd9cb4854
commit 088a1880d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 40 deletions

View File

@ -79,25 +79,21 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
onDismiss={() => setParseModalOpen(false)} onDismiss={() => setParseModalOpen(false)}
/> />
<EditorHeader> <EditorHeader>
{editorMode === QueryEditorMode.Builder && ( <InlineSelect
<> value={null}
<InlineSelect placeholder="Query patterns"
value={null} allowCustomValue
placeholder="Query patterns" onChange={({ value }) => {
allowCustomValue const result = buildVisualQueryFromString(query.expr || '');
onChange={({ value }) => { result.query.operations = value?.operations!;
const result = buildVisualQueryFromString(query.expr || ''); onChange({
result.query.operations = value?.operations!; ...query,
onChange({ expr: lokiQueryModeller.renderQuery(result.query),
...query, });
expr: lokiQueryModeller.renderQuery(result.query), }}
}); options={lokiQueryModeller.getQueryPatterns().map((x) => ({ label: x.name, value: x }))}
}} />
options={lokiQueryModeller.getQueryPatterns().map((x) => ({ label: x.name, value: x }))} <QueryHeaderSwitch label="Raw query" value={rawQuery} onChange={onQueryPreviewChange} />
/>
<QueryHeaderSwitch label="Raw query" value={rawQuery} onChange={onQueryPreviewChange} />
</>
)}
<FlexItem grow={1} /> <FlexItem grow={1} />
{app !== CoreApp.Explore && ( {app !== CoreApp.Explore && (
<Button <Button

View File

@ -82,27 +82,23 @@ export const PromQueryEditorSelector = React.memo<Props>((props) => {
onDismiss={() => setParseModalOpen(false)} onDismiss={() => setParseModalOpen(false)}
/> />
<EditorHeader> <EditorHeader>
{editorMode === QueryEditorMode.Builder && ( <InlineSelect
<> value={null}
<InlineSelect placeholder="Query patterns"
value={null} allowCustomValue
placeholder="Query patterns" onChange={({ value }) => {
allowCustomValue // TODO: Bit convoluted as we don't have access to visualQuery model here. Maybe would make sense to
onChange={({ value }) => { // move it inside the editor?
// TODO: Bit convoluted as we don't have access to visualQuery model here. Maybe would make sense to const result = buildVisualQueryFromString(query.expr || '');
// move it inside the editor? result.query.operations = value?.operations!;
const result = buildVisualQueryFromString(query.expr || ''); onChange({
result.query.operations = value?.operations!; ...query,
onChange({ expr: promQueryModeller.renderQuery(result.query),
...query, });
expr: promQueryModeller.renderQuery(result.query), }}
}); options={promQueryModeller.getQueryPatterns().map((x) => ({ label: x.name, value: x }))}
}} />
options={promQueryModeller.getQueryPatterns().map((x) => ({ label: x.name, value: x }))} <QueryHeaderSwitch label="Raw query" value={rawQuery} onChange={onQueryPreviewChange} />
/>
<QueryHeaderSwitch label="Raw query" value={rawQuery} onChange={onQueryPreviewChange} />
</>
)}
{editorMode === QueryEditorMode.Builder && ( {editorMode === QueryEditorMode.Builder && (
<FeedbackLink feedbackUrl="https://github.com/grafana/grafana/discussions/47693" /> <FeedbackLink feedbackUrl="https://github.com/grafana/grafana/discussions/47693" />
)} )}