From 1b80df016883bf9b3d5a924284021d0e36a62eb0 Mon Sep 17 00:00:00 2001 From: Matias Chomicki Date: Thu, 6 Jul 2023 10:20:38 +0200 Subject: [PATCH] Loki: add additional settings section (#71035) * Loki: add additional settings section * Derived fields: add config subsection * Query settings: add config subsection * Loki config: use divider instead of hr * Derived fields: refactor legacy styles * Loki config: add divider between derived fields and query settings * Loki config: create alerting settings for Loki --- .../configuration/AlertingSettings.test.tsx | 23 ++++ .../loki/configuration/AlertingSettings.tsx | 31 +++++ .../loki/configuration/ConfigEditor.tsx | 40 ++++--- .../loki/configuration/DerivedFields.tsx | 60 +++++----- .../loki/configuration/QuerySettings.tsx | 108 ++++++++++-------- 5 files changed, 173 insertions(+), 89 deletions(-) create mode 100644 public/app/plugins/datasource/loki/configuration/AlertingSettings.test.tsx create mode 100644 public/app/plugins/datasource/loki/configuration/AlertingSettings.tsx diff --git a/public/app/plugins/datasource/loki/configuration/AlertingSettings.test.tsx b/public/app/plugins/datasource/loki/configuration/AlertingSettings.test.tsx new file mode 100644 index 00000000000..71a9d48ca76 --- /dev/null +++ b/public/app/plugins/datasource/loki/configuration/AlertingSettings.test.tsx @@ -0,0 +1,23 @@ +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import React from 'react'; + +import { createDefaultConfigOptions } from '../mocks'; + +import { AlertingSettings } from './AlertingSettings'; + +const options = createDefaultConfigOptions(); + +describe('AlertingSettings', () => { + it('should render', () => { + render( {}} />); + expect(screen.getByText('Alerting')).toBeInTheDocument(); + }); + + it('should update alerting settings', async () => { + const onChange = jest.fn(); + render(); + await userEvent.click(screen.getByLabelText('Toggle switch')); + expect(onChange).toHaveBeenCalledTimes(1); + }); +}); diff --git a/public/app/plugins/datasource/loki/configuration/AlertingSettings.tsx b/public/app/plugins/datasource/loki/configuration/AlertingSettings.tsx new file mode 100644 index 00000000000..f25e6078ec7 --- /dev/null +++ b/public/app/plugins/datasource/loki/configuration/AlertingSettings.tsx @@ -0,0 +1,31 @@ +import React from 'react'; + +import { DataSourcePluginOptionsEditorProps } from '@grafana/data'; +import { ConfigSubSection } from '@grafana/experimental'; +import { InlineField, InlineSwitch } from '@grafana/ui'; + +export function AlertingSettings({ + options, + onOptionsChange, +}: Pick) { + return ( + + + + onOptionsChange({ + ...options, + jsonData: { ...options.jsonData, manageAlerts: event!.currentTarget.checked }, + }) + } + /> + + + ); +} diff --git a/public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx index 1e368aea391..2050e8e4b1a 100644 --- a/public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx +++ b/public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx @@ -1,11 +1,14 @@ import React, { useCallback } from 'react'; import { DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data'; +import { ConfigSection } from '@grafana/experimental'; import { config, reportInteraction } from '@grafana/runtime'; -import { AlertingSettings, DataSourceHttpSettings } from '@grafana/ui'; +import { DataSourceHttpSettings } from '@grafana/ui'; +import { Divider } from 'app/core/components/Divider'; import { LokiOptions } from '../types'; +import { AlertingSettings } from './AlertingSettings'; import { DerivedFields } from './DerivedFields'; import { QuerySettings } from './QuerySettings'; @@ -40,6 +43,8 @@ export const ConfigEditor = (props: Props) => { return ( <> + + { secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled} /> - options={options} onOptionsChange={onOptionsChange} /> + - onOptionsChange(setMaxLines(options, value))} - predefinedOperations={options.jsonData.predefinedOperations || ''} - onPredefinedOperationsChange={updatePredefinedOperations} - /> - - onOptionsChange(setDerivedFields(options, value))} - /> + + + + onOptionsChange(setMaxLines(options, value))} + predefinedOperations={options.jsonData.predefinedOperations || ''} + onPredefinedOperationsChange={updatePredefinedOperations} + /> + + onOptionsChange(setDerivedFields(options, value))} + /> + ); }; diff --git a/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx b/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx index e4370eb4a65..b570a3d4eb0 100644 --- a/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx +++ b/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx @@ -2,7 +2,9 @@ import { css } from '@emotion/css'; import React, { useCallback, useState } from 'react'; import { GrafanaTheme2, VariableOrigin, DataLinkBuiltInVars } from '@grafana/data'; +import { ConfigSubSection } from '@grafana/experimental'; import { Button, useTheme2 } from '@grafana/ui'; +import { ConfigDescriptionLink } from 'app/core/components/ConfigDescriptionLink'; import { DerivedFieldConfig } from '../types'; @@ -10,13 +12,18 @@ import { DebugSection } from './DebugSection'; import { DerivedField } from './DerivedField'; const getStyles = (theme: GrafanaTheme2) => ({ - infoText: css` - padding-bottom: ${theme.spacing(2)}; - color: ${theme.colors.text.secondary}; + addButton: css` + margin-right: 10px; `, derivedField: css` margin-bottom: ${theme.spacing(1)}; `, + container: css` + margin-bottom: ${theme.spacing(4)}; + `, + debugSection: css` + margin-top: ${theme.spacing(4)}; + `, }); type Props = { @@ -38,14 +45,17 @@ export const DerivedFields = ({ fields = [], onChange }: Props) => { ); return ( - <> -

Derived fields

- -
- Derived fields can be used to extract new fields from a log message and create a link from its value. -
- -
+ + } + > +
{fields.map((field, index) => { return ( {
)}
-
- {showDebug && ( -
- -
- )} - + {showDebug && ( +
+ +
+ )} +
+ ); }; diff --git a/public/app/plugins/datasource/loki/configuration/QuerySettings.tsx b/public/app/plugins/datasource/loki/configuration/QuerySettings.tsx index 81db4661dba..1e808b85796 100644 --- a/public/app/plugins/datasource/loki/configuration/QuerySettings.tsx +++ b/public/app/plugins/datasource/loki/configuration/QuerySettings.tsx @@ -1,7 +1,9 @@ import React from 'react'; +import { ConfigSubSection } from '@grafana/experimental'; import { config } from '@grafana/runtime'; import { Badge, LegacyForms } from '@grafana/ui'; +import { ConfigDescriptionLink } from 'app/core/components/ConfigDescriptionLink'; const { FormField } = LegacyForms; @@ -15,69 +17,75 @@ type Props = { export const QuerySettings = (props: Props) => { const { maxLines, onMaxLinedChange, predefinedOperations, onPredefinedOperationsChange } = props; return ( - <> -

Queries

-
+ + } + > +
+
+ onMaxLinedChange(event.currentTarget.value)} + spellCheck={false} + placeholder="1000" + /> + } + tooltip={ + <> + Loki queries must contain a limit of the maximum number of lines returned (default: 1000). Increase this + limit to have a bigger result set for ad-hoc analysis. Decrease this limit if your browser becomes + sluggish when displaying the log results. + + } + /> +
+
+ {config.featureToggles.lokiPredefinedOperations && (
onMaxLinedChange(event.currentTarget.value)} + type="string" + className="gf-form-input width-20 gf-form-input--has-help-icon" + value={predefinedOperations} + onChange={(event) => onPredefinedOperationsChange(event.currentTarget.value)} spellCheck={false} - placeholder="1000" + placeholder="| unpack | line_format" /> } tooltip={ - <> - Loki queries must contain a limit of the maximum number of lines returned (default: 1000). Increase - this limit to have a bigger result set for ad-hoc analysis. Decrease this limit if your browser - becomes sluggish when displaying the log results. - +
+ { + 'Predefined operations are used as an initial state for your queries. They are useful, if you want to unpack, parse or format all log lines. Currently we support only log operations starting with |. For example: | unpack | line_format "{{.message}}".' + } +
} /> +
- {config.featureToggles.lokiPredefinedOperations && ( -
-
- onPredefinedOperationsChange(event.currentTarget.value)} - spellCheck={false} - placeholder="| unpack | line_format" - /> - } - tooltip={ -
- { - 'Predefined operations are used as an initial state for your queries. They are useful, if you want to unpack, parse or format all log lines. Currently we support only log operations starting with |. For example: | unpack | line_format "{{.message}}".' - } -
- } - /> - -
-
- )} -
- + )} + ); };