Loki Config: Add missing section header + minor improvements (#66216)

* Loki config: add missing section title to max lines

* Loki config: minor improvements to datasource test messages

* Chore: remove new line

* Loki: further improve error messages

* Alerting Settings: Add missing tooltip

* Update packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx

* Update alerting label and tooltip

* Update packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx

Co-authored-by: brendamuir <100768211+brendamuir@users.noreply.github.com>

* Alerting settings: Increase label width

* Loki config: update success message

---------

Co-authored-by: brendamuir <100768211+brendamuir@users.noreply.github.com>
This commit is contained in:
Matias Chomicki 2023-04-14 11:39:54 +02:00 committed by GitHub
parent b5e2b0d14c
commit d3a1faad1a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 53 additions and 44 deletions

View File

@ -5,7 +5,7 @@ const addDataSource = () => {
e2e.flows.addDataSource({
type: 'Loki',
expectedAlertMessage:
'Unable to fetch labels from Loki (Failed to call resource), please check the server logs for more details',
'Unable to connect with Loki (Failed to call resource). Please check the server logs for more details.',
name: dataSourceName,
form: () => {
e2e.components.DataSource.DataSourceHttpSettings.urlInput().type('http://loki-url:3100');

View File

@ -6,7 +6,7 @@ const addDataSource = () => {
e2e.flows.addDataSource({
type: 'Loki',
expectedAlertMessage:
'Unable to fetch labels from Loki (Failed to call resource), please check the server logs for more details',
'Unable to connect with Loki (Failed to call resource). Please check the server logs for more details.',
name: dataSourceName,
form: () => {
e2e.components.DataSource.DataSourceHttpSettings.urlInput().type('http://loki-url:3100');

View File

@ -44,8 +44,8 @@ describe('Alerting Settings', () => {
expect(screen.queryByText('Alertmanager data source')).toBeNull();
});
it('should show the option to Manage alerts via Alerting UI', () => {
it('should show the option to manager alerts', () => {
setup();
expect(screen.getByText('Manage alerts via Alerting UI')).toBeVisible();
expect(screen.getByText('Manage alert rules in Alerting UI')).toBeVisible();
});
});

View File

@ -19,7 +19,12 @@ export function AlertingSettings<T extends AlertingConfig>({ options, onOptionsC
<div className="gf-form-group">
<div className="gf-form-inline">
<div className="gf-form">
<InlineField labelWidth={26} label="Manage alerts via Alerting UI" disabled={options.readOnly}>
<InlineField
labelWidth={29}
label="Manage alert rules in Alerting UI"
disabled={options.readOnly}
tooltip="Manage alert rules for this data source. To manage other alerting resources, add an Alertmanager data source."
>
<InlineSwitch
value={options.jsonData.manageAlerts !== false}
onChange={(event) =>

View File

@ -44,16 +44,10 @@ export const ConfigEditor = (props: Props) => {
<AlertingSettings<LokiOptions> options={options} onOptionsChange={onOptionsChange} />
<div className="gf-form-group">
<div className="gf-form-inline">
<div className="gf-form">
<MaxLinesField
value={options.jsonData.maxLines || ''}
onChange={(value) => onOptionsChange(setMaxLines(options, value))}
/>
</div>
</div>
</div>
<MaxLinesField
value={options.jsonData.maxLines || ''}
onChange={(value) => onOptionsChange(setMaxLines(options, value))}
/>
<DerivedFields
value={options.jsonData.derivedFields}

View File

@ -11,27 +11,36 @@ type Props = {
export const MaxLinesField = (props: Props) => {
const { value, onChange } = props;
return (
<FormField
label="Maximum lines"
labelWidth={11}
inputWidth={20}
inputEl={
<input
type="number"
className="gf-form-input width-8 gf-form-input--has-help-icon"
value={value}
onChange={(event) => onChange(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.
</>
}
/>
<>
<h3 className="page-heading">Queries</h3>
<div className="gf-form-group">
<div className="gf-form-inline">
<div className="gf-form">
<FormField
label="Maximum lines"
labelWidth={11}
inputWidth={20}
inputEl={
<input
type="number"
className="gf-form-input width-8 gf-form-input--has-help-icon"
value={value}
onChange={(event) => onChange(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.
</>
}
/>
</div>
</div>
</div>
</>
);
};

View File

@ -336,7 +336,7 @@ describe('LokiDatasource', () => {
expect(result).toStrictEqual({
status: 'success',
message: 'Data source connected and labels found.',
message: 'Data source successfully connected.',
});
});
@ -347,7 +347,8 @@ describe('LokiDatasource', () => {
expect(result).toStrictEqual({
status: 'error',
message: 'Data source connected, but no labels received. Verify that Loki and Promtail is configured properly.',
message:
'Data source connected, but no labels were received. Verify that Loki and Promtail are correctly configured.',
});
});
@ -358,7 +359,7 @@ describe('LokiDatasource', () => {
expect(result).toStrictEqual({
status: 'error',
message: 'Unable to fetch labels from Loki, please check the server logs for more details',
message: 'Unable to connect with Loki. Please check the server logs for more details.',
});
});
@ -374,7 +375,7 @@ describe('LokiDatasource', () => {
expect(result).toStrictEqual({
status: 'error',
message: 'Unable to fetch labels from Loki (error42), please check the server logs for more details',
message: 'Unable to connect with Loki (error42). Please check the server logs for more details.',
});
});
});

View File

@ -735,11 +735,11 @@ export class LokiDatasource
return this.metadataRequest('labels', params).then(
(values) => {
return values.length > 0
? { status: 'success', message: 'Data source connected and labels found.' }
? { status: 'success', message: 'Data source successfully connected.' }
: {
status: 'error',
message:
'Data source connected, but no labels received. Verify that Loki and Promtail is configured properly.',
'Data source connected, but no labels were received. Verify that Loki and Promtail are correctly configured.',
};
},
(err) => {
@ -750,7 +750,7 @@ export class LokiDatasource
// because those will only describe how the request between browser<>server failed
const info: string = err?.data?.message ?? '';
const infoInParentheses = info !== '' ? ` (${info})` : '';
const message = `Unable to fetch labels from Loki${infoInParentheses}, please check the server logs for more details`;
const message = `Unable to connect with Loki${infoInParentheses}. Please check the server logs for more details.`;
return { status: 'error', message: message };
}
);