IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-10 23:55:47 -06:00
Code Issues Packages Projects Releases Wiki Activity

Loki: Fix misaligned derived fields settings (#61475)

Browse Source 
* fix loki datasource settings

* remove unnecessary spacing

* remove unused import
This commit is contained in:
Sven Grossmann 2023-01-13 14:25:03 +01:00 committed by GitHub
parent 117874176d
commit b816538e09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
public/app/plugins/datasource/loki/configuration/DerivedField.tsx
View File

@ -2,15 +2,15 @@ import { css } from '@emotion/css';
import React, { useEffect, useState } from 'react';
import { usePrevious } from 'react-use';
import { VariableSuggestion } from '@grafana/data';
import { GrafanaTheme2, VariableSuggestion } from '@grafana/data';
import { DataSourcePicker } from '@grafana/runtime';
import { Button, DataLinkInput, stylesFactory, LegacyForms } from '@grafana/ui';
import { Button, DataLinkInput, LegacyForms, useStyles2 } from '@grafana/ui';
import { DerivedFieldConfig } from '../types';
const { Switch, FormField } = LegacyForms;
const getStyles = stylesFactory(() => ({
const getStyles = (theme: GrafanaTheme2) => ({
row: css`
display: flex;
align-items: baseline;
@ -23,11 +23,12 @@ const getStyles = stylesFactory(() => ({
`,
urlField: css`
flex: 1;
margin-right: ${theme.spacing(0.5)};
`,
urlDisplayLabelField: css`
flex: 1;
`,
}));
});
type Props = {
value: DerivedFieldConfig;
@ -38,7 +39,7 @@ type Props = {
};
export const DerivedField = (props: Props) => {
const { value, onChange, onDelete, suggestions, className } = props;
const styles = getStyles();
const styles = useStyles2(getStyles);
const [showInternalLink, setShowInternalLink] = useState(!!value.datasourceUid);
const previousUid = usePrevious(value.datasourceUid);
@ -61,10 +62,10 @@ export const DerivedField = (props: Props) => {
return (
<div className={className} data-testid="derived-field">
<div className={styles.row}>
<div className="gf-form">
<FormField
labelWidth={10}
className={styles.nameField}
labelWidth={5}
// A bit of a hack to prevent using default value for the width from FormField
inputWidth={null}
label="Name"
@ -73,6 +74,7 @@ export const DerivedField = (props: Props) => {
onChange={handleChange('name')}
/>
<FormField
labelWidth={10}
className={styles.regexField}
inputWidth={null}
label="Regex"
@ -91,14 +93,12 @@ export const DerivedField = (props: Props) => {
event.preventDefault();
onDelete();
}}
className={css`
margin-left: 8px;
`}
/>
</div>
<div className={styles.row}>
<div className="gf-form">
<FormField
labelWidth={10}
label={showInternalLink ? 'Query' : 'URL'}
inputEl={
<DataLinkInput
@ -117,6 +117,7 @@ export const DerivedField = (props: Props) => {
/>
<FormField
className={styles.urlDisplayLabelField}
labelWidth={10}
inputWidth={null}
label="URL Label"
type="text"