From 56e353cfed011f59fa3dcc51e7938cc307a7ce5b Mon Sep 17 00:00:00 2001 From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com> Date: Tue, 7 Jun 2022 07:08:09 -0400 Subject: [PATCH] Prometheus, Loki: Update run queries button (#50005) (#50281) * Prometheus, Loki: Updare run queries button * Update docs * Update docs (cherry picked from commit 9f6afb3475209819b6980a966cd325383215d662) Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com> --- docs/sources/datasources/loki.md | 4 +++- docs/sources/datasources/prometheus.md | 4 +++- .../components/LokiQueryEditorSelector.tsx | 22 ++++++++++--------- .../components/PromQueryEditorSelector.tsx | 22 ++++++++++--------- 4 files changed, 30 insertions(+), 22 deletions(-) diff --git a/docs/sources/datasources/loki.md b/docs/sources/datasources/loki.md index 94bdc1b7994..e8a057c4acc 100644 --- a/docs/sources/datasources/loki.md +++ b/docs/sources/datasources/loki.md @@ -63,7 +63,9 @@ The new field with the link shown in log details: Loki query editor is separated into 3 distinct modes that you can switch between. See docs for each section below. -At the top of the editor there is `Run query` button that will run the query and `Explain | Builder | Code` tabs to switch between the editor modes. If the query editor is in Builder mode there are additional elements explained in the Builder section. +At the top of the editor, select `Run queries` to run a query. Select `Explain | Builder | Code` tabs to switch between the editor modes. If the query editor is in Builder mode, there are additional elements explained in the Builder section. + +> **Note:** In Explore, to run Loki queries, select `Run query`. Each mode is synchronized with the other modes, so you can switch between them without losing your work, although there are some limitations. Some more complex queries are not yet supported in the builder mode. If you try to switch from `Code` to `Builder` with such query, editor will show a popup explaining that you can lose some parts of the query, and you can decide if you still want to continue to `Builder` mode or not. diff --git a/docs/sources/datasources/prometheus.md b/docs/sources/datasources/prometheus.md index 850fba334c8..54adf723c37 100644 --- a/docs/sources/datasources/prometheus.md +++ b/docs/sources/datasources/prometheus.md @@ -47,7 +47,9 @@ Prometheus query editor is separated into 3 distinct modes that you can switch b ![Editor toolbar](/static/img/docs/prometheus/header-8-5.png 'Editor toolbar') -At the top of the editor there is `Run query` button that will run the query and `Explain | Builder | Code` tabs to switch between the editor modes. If the query editor is in Builder mode there are additional elements explained in the Builder section. +At the top of the editor, select `Run queries` to run a query. Select `Explain | Builder | Code` tabs to switch between the editor modes. If the query editor is in Builder mode, there are additional elements explained in the Builder section. + +> **Note:** In Explore, to run Prometheus queries, select `Run query`. Each mode is synchronized with the other modes, so you can switch between them without losing your work, although there are some limitations. Some more complex queries are not yet supported in the builder mode. If you try to switch from `Code` to `Builder` with such query, editor will show a popup explaining that you can lose some parts of the query, and you can decide if you still want to continue to `Builder` mode or not. diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx index 1523fa90721..1c84d804923 100644 --- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx +++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx @@ -1,6 +1,6 @@ import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react'; -import { LoadingState } from '@grafana/data'; +import { CoreApp, LoadingState } from '@grafana/data'; import { EditorHeader, EditorRows, FlexItem, InlineSelect, Space } from '@grafana/experimental'; import { reportInteraction } from '@grafana/runtime'; import { Button, ConfirmModal } from '@grafana/ui'; @@ -99,15 +99,17 @@ export const LokiQueryEditorSelector = React.memo((props) )} - + {app !== CoreApp.Explore && ( + + )} diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx index ca58fe5219e..fc133ad7ac9 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx +++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx @@ -1,6 +1,6 @@ import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react'; -import { LoadingState } from '@grafana/data'; +import { CoreApp, LoadingState } from '@grafana/data'; import { EditorHeader, EditorRows, FlexItem, InlineSelect, Space } from '@grafana/experimental'; import { reportInteraction } from '@grafana/runtime'; import { Button, ConfirmModal } from '@grafana/ui'; @@ -107,15 +107,17 @@ export const PromQueryEditorSelector = React.memo((props) => { )} - + {app !== CoreApp.Explore && ( + + )}