From 05fb17c3f33f4a8de488087b2dfc544acc28a57b Mon Sep 17 00:00:00 2001 From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com> Date: Thu, 14 Apr 2022 09:40:57 -0400 Subject: [PATCH] Prometheus: Query builder UX tweaks and feedback link (#47655) (#47778) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Prometheus: Query builder UX tweaks and feedback link * Remove . * Fixed link * added option to hide feedback links * feedback link setting name change * move config check * fixed ts issue (cherry picked from commit 057ff5bcf53e5e89965913f2195483979502419a) Co-authored-by: Torkel Ödegaard --- conf/defaults.ini | 3 ++ conf/sample.ini | 3 ++ docs/sources/administration/configuration.md | 4 ++ packages/grafana-data/src/types/config.ts | 1 + packages/grafana-runtime/src/config.ts | 1 + pkg/api/frontendsettings.go | 1 + pkg/setting/setting.go | 5 +++ .../components/PromQueryBuilderContainer.tsx | 2 +- .../PromQueryEditorSelector.test.tsx | 10 ++--- .../components/PromQueryEditorSelector.tsx | 33 +++++++------- .../querybuilder/components/QueryPreview.tsx | 2 +- .../querybuilder/shared/FeedbackLink.tsx | 44 +++++++++++++++++++ .../plugins/datasource/prometheus/types.ts | 4 +- 13 files changed, 87 insertions(+), 26 deletions(-) create mode 100644 public/app/plugins/datasource/prometheus/querybuilder/shared/FeedbackLink.tsx diff --git a/conf/defaults.ini b/conf/defaults.ini index 09696c5f8dc..904719d5620 100644 --- a/conf/defaults.ini +++ b/conf/defaults.ini @@ -230,6 +230,9 @@ application_insights_connection_string = # Optional. Specifies an Application Insights endpoint URL where the endpoint string is wrapped in backticks ``. application_insights_endpoint_url = +# Controls if the UI contains any links to user feedback forms +feedback_links_enabled = true + #################################### Security ############################ [security] # disable creation of admin user on first start of grafana diff --git a/conf/sample.ini b/conf/sample.ini index f20d03f7461..fbe7b6b7f8d 100644 --- a/conf/sample.ini +++ b/conf/sample.ini @@ -230,6 +230,9 @@ # Rudderstack Config url, optional, used by Rudderstack SDK to fetch source config ;rudderstack_config_url = +# Controls if the UI contains any links to user feedback forms +;feedback_links_enabled = true + #################################### Security #################################### [security] # disable creation of admin user on first start of grafana diff --git a/docs/sources/administration/configuration.md b/docs/sources/administration/configuration.md index 58cdcc98e3b..4a9106482d3 100644 --- a/docs/sources/administration/configuration.md +++ b/docs/sources/administration/configuration.md @@ -509,6 +509,10 @@ If you want to track Grafana usage via Azure Application Insights, then specify
+### enable_feedback_links + +If set to false will remove all feedback links from the UI. Defaults to true. + ## [security] ### disable_initial_admin_creation diff --git a/packages/grafana-data/src/types/config.ts b/packages/grafana-data/src/types/config.ts index bb003374d92..8231bb4c252 100644 --- a/packages/grafana-data/src/types/config.ts +++ b/packages/grafana-data/src/types/config.ts @@ -180,4 +180,5 @@ export interface GrafanaConfig { geomapDisableCustomBaseLayer?: boolean; unifiedAlertingEnabled: boolean; angularSupportEnabled: boolean; + feedbackLinksEnabled: boolean; } diff --git a/packages/grafana-runtime/src/config.ts b/packages/grafana-runtime/src/config.ts index f2599a42894..d5076e5ae6a 100644 --- a/packages/grafana-runtime/src/config.ts +++ b/packages/grafana-runtime/src/config.ts @@ -36,6 +36,7 @@ export class GrafanaBootConfig implements GrafanaConfig { externalUserMngLinkName = ''; externalUserMngInfo = ''; allowOrgCreate = false; + feedbackLinksEnabled = true; disableLoginForm = false; defaultDatasource = ''; // UID alertingEnabled = false; diff --git a/pkg/api/frontendsettings.go b/pkg/api/frontendsettings.go index cc609bb2dda..cc23170a9ed 100644 --- a/pkg/api/frontendsettings.go +++ b/pkg/api/frontendsettings.go @@ -113,6 +113,7 @@ func (hs *HTTPServer) getFrontendSettingsMap(c *models.ReqContext) (map[string]i "rudderstackDataPlaneUrl": setting.RudderstackDataPlaneUrl, "rudderstackSdkUrl": setting.RudderstackSdkUrl, "rudderstackConfigUrl": setting.RudderstackConfigUrl, + "feedbackLinksEnabled": hs.Cfg.FeedbackLinksEnabled, "applicationInsightsConnectionString": hs.Cfg.ApplicationInsightsConnectionString, "applicationInsightsEndpointUrl": hs.Cfg.ApplicationInsightsEndpointUrl, "disableLoginForm": setting.DisableLoginForm, diff --git a/pkg/setting/setting.go b/pkg/setting/setting.go index 10834bf4556..58d695f41fc 100644 --- a/pkg/setting/setting.go +++ b/pkg/setting/setting.go @@ -393,6 +393,7 @@ type Cfg struct { ReportingEnabled bool ApplicationInsightsConnectionString string ApplicationInsightsEndpointUrl string + FeedbackLinksEnabled bool // LDAP LDAPEnabled bool @@ -938,13 +939,17 @@ func (cfg *Cfg) Load(args CommandLineArgs) error { RudderstackDataPlaneUrl = analytics.Key("rudderstack_data_plane_url").String() RudderstackSdkUrl = analytics.Key("rudderstack_sdk_url").String() RudderstackConfigUrl = analytics.Key("rudderstack_config_url").String() + cfg.ReportingEnabled = analytics.Key("reporting_enabled").MustBool(true) cfg.ReportingDistributor = analytics.Key("reporting_distributor").MustString("grafana-labs") + if len(cfg.ReportingDistributor) >= 100 { cfg.ReportingDistributor = cfg.ReportingDistributor[:100] } + cfg.ApplicationInsightsConnectionString = analytics.Key("application_insights_connection_string").String() cfg.ApplicationInsightsEndpointUrl = analytics.Key("application_insights_endpoint_url").String() + cfg.FeedbackLinksEnabled = analytics.Key("feedback_links_enabled").MustBool(true) if err := readAlertingSettings(iniFile); err != nil { return err diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderContainer.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderContainer.tsx index 6d9bbe328d5..5a46feaa0ac 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderContainer.tsx +++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilderContainer.tsx @@ -54,7 +54,7 @@ export function PromQueryBuilderContainer(props: Props) { onRunQuery={onRunQuery} data={data} /> - {query.editorPreview && } + {query.rawQuery && } ); } diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.test.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.test.tsx index bb92ec241d0..b1283286882 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.test.tsx +++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.test.tsx @@ -90,24 +90,24 @@ describe('PromQueryEditorSelector', () => { }); }); - it('Can enable preview', async () => { + it('Can enable raw query', async () => { const { onChange } = renderWithMode(QueryEditorMode.Builder); expect(screen.queryByLabelText('selector')).not.toBeInTheDocument(); - screen.getByLabelText('Preview').click(); + screen.getByLabelText('Raw query').click(); expect(onChange).toBeCalledWith({ refId: 'A', expr: defaultQuery.expr, range: true, editorMode: QueryEditorMode.Builder, - editorPreview: true, + rawQuery: true, }); }); - it('Should show preview', async () => { + it('Should show raw query', async () => { renderWithProps({ - editorPreview: true, + rawQuery: true, editorMode: QueryEditorMode.Builder, expr: 'my_metric', }); diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx index bfcd143c9f1..9bd94e3761d 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx +++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx @@ -14,6 +14,7 @@ import { PromQueryBuilderContainer } from './PromQueryBuilderContainer'; import { PromQueryBuilderOptions } from './PromQueryBuilderOptions'; import { changeEditorMode, getQueryWithDefaults } from '../state'; import { PromQuery } from '../../types'; +import { FeedbackLink } from '../shared/FeedbackLink'; export const PromQueryEditorSelector = React.memo((props) => { const { onChange, onRunQuery, data } = props; @@ -44,7 +45,7 @@ export const PromQueryEditorSelector = React.memo((props) const onQueryPreviewChange = (event: SyntheticEvent) => { const isEnabled = event.currentTarget.checked; - onChange({ ...query, editorPreview: isEnabled }); + onChange({ ...query, rawQuery: isEnabled }); onRunQuery(); }; @@ -67,16 +68,6 @@ export const PromQueryEditorSelector = React.memo((props) onDismiss={() => setParseModalOpen(false)} /> - - {editorMode === QueryEditorMode.Builder && ( <> ((props) }} options={promQueryModeller.getQueryPatterns().map((x) => ({ label: x.name, value: x }))} /> + )} - + {editorMode === QueryEditorMode.Builder && ( + + )} + + diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/QueryPreview.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/QueryPreview.tsx index bdc0c7718de..a91fabebec8 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/components/QueryPreview.tsx +++ b/public/app/plugins/datasource/prometheus/querybuilder/components/QueryPreview.tsx @@ -18,7 +18,7 @@ export function QueryPreview({ query }: Props) { return ( - +
+ + Give feedback + + + ); +} + +function getStyles(theme: GrafanaTheme2) { + return { + link: css({ + color: theme.colors.text.secondary, + fontSize: theme.typography.bodySmall.fontSize, + ':hover': { + color: theme.colors.text.link, + }, + }), + }; +} diff --git a/public/app/plugins/datasource/prometheus/types.ts b/public/app/plugins/datasource/prometheus/types.ts index 629028914ca..f2c4b494c5e 100644 --- a/public/app/plugins/datasource/prometheus/types.ts +++ b/public/app/plugins/datasource/prometheus/types.ts @@ -19,8 +19,8 @@ export interface PromQuery extends DataQuery { showingTable?: boolean; /** Code, Builder or Explain */ editorMode?: QueryEditorMode; - /** Controls if the query preview is shown */ - editorPreview?: boolean; + /** Controls if the raw query text is shown */ + rawQuery?: boolean; } export interface PromOptions extends DataSourceJsonData {