mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: Remove deprecated Layout components (#89376)
* Removed depricated HorizontalLayout from PrometheusMetricsBrowser * Removed commented import * typo fix * Removed depricated HorizontalLayout from RawInfluxQLEditor * Replaced InlineFormLabel to InlineField in RawInlfuxEditor.tsx * Removed depricated HorizontalLayout from GraphiteFunctionEditor * Changed div to instead use stack * Changed htmlFor attribute from selectElementId to aliasElementId * Updated the betterer results * Updated prettier write to the updated files * Changed htmlFor label to fix the text
This commit is contained in:
@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
import { HorizontalGroup, InlineLabel, useStyles2 } from '@grafana/ui';
|
||||
import { Stack, InlineLabel, useStyles2 } from '@grafana/ui';
|
||||
|
||||
import { FuncInstance } from '../gfunc';
|
||||
import { actions } from '../state/actions';
|
||||
@@ -42,7 +42,7 @@ export function GraphiteFunctionEditor({ func }: FunctionEditorProps) {
|
||||
onMouseOver={() => setIsMouseOver(true)}
|
||||
onMouseOut={() => setIsMouseOver(false)}
|
||||
>
|
||||
<HorizontalGroup spacing="none">
|
||||
<Stack gap={0} alignItems={'baseline'}>
|
||||
<FunctionEditor
|
||||
func={func}
|
||||
onMoveLeft={() => {
|
||||
@@ -55,7 +55,9 @@ export function GraphiteFunctionEditor({ func }: FunctionEditorProps) {
|
||||
dispatch(actions.removeFunction({ func }));
|
||||
}}
|
||||
/>
|
||||
<InlineLabel className={styles.label}>(</InlineLabel>
|
||||
<InlineLabel className={styles.label} width={'auto'}>
|
||||
(
|
||||
</InlineLabel>
|
||||
{params.map((editableParam: EditableParam, index: number) => {
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
@@ -75,8 +77,10 @@ export function GraphiteFunctionEditor({ func }: FunctionEditorProps) {
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
<InlineLabel className={styles.label}>)</InlineLabel>
|
||||
</HorizontalGroup>
|
||||
<InlineLabel className={styles.label} width={'auto'}>
|
||||
)
|
||||
</InlineLabel>
|
||||
</Stack>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useId } from 'react';
|
||||
|
||||
import { HorizontalGroup, InlineFormLabel, Input, Select, TextArea } from '@grafana/ui';
|
||||
import { Stack, InlineField, Input, Select, TextArea } from '@grafana/ui';
|
||||
|
||||
import { InfluxQuery } from '../../../../../types';
|
||||
import { DEFAULT_RESULT_FORMAT, RESULT_FORMATS } from '../../../constants';
|
||||
@@ -34,7 +34,7 @@ export const RawInfluxQLEditor = ({ query, onChange, onRunQuery }: Props): JSX.E
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Stack direction={'column'}>
|
||||
<TextArea
|
||||
aria-label="query"
|
||||
rows={3}
|
||||
@@ -46,30 +46,32 @@ export const RawInfluxQLEditor = ({ query, onChange, onRunQuery }: Props): JSX.E
|
||||
}}
|
||||
value={currentQuery ?? ''}
|
||||
/>
|
||||
<HorizontalGroup>
|
||||
<InlineFormLabel htmlFor={selectElementId}>Format as</InlineFormLabel>
|
||||
<Select
|
||||
inputId={selectElementId}
|
||||
onChange={(v) => {
|
||||
onChange({ ...query, resultFormat: v.value });
|
||||
onRunQuery();
|
||||
}}
|
||||
value={resultFormat}
|
||||
options={RESULT_FORMATS}
|
||||
/>
|
||||
<InlineFormLabel htmlFor={aliasElementId}>Alias by</InlineFormLabel>
|
||||
<Input
|
||||
id={aliasElementId}
|
||||
type="text"
|
||||
spellCheck={false}
|
||||
placeholder="Naming pattern"
|
||||
onBlur={applyDelayedChangesAndRunQuery}
|
||||
onChange={(e) => {
|
||||
setCurrentAlias(e.currentTarget.value);
|
||||
}}
|
||||
value={currentAlias ?? ''}
|
||||
/>
|
||||
</HorizontalGroup>
|
||||
</div>
|
||||
<Stack>
|
||||
<InlineField htmlFor={selectElementId} label="Format as">
|
||||
<Select
|
||||
inputId={selectElementId}
|
||||
onChange={(v) => {
|
||||
onChange({ ...query, resultFormat: v.value });
|
||||
onRunQuery();
|
||||
}}
|
||||
value={resultFormat}
|
||||
options={RESULT_FORMATS}
|
||||
/>
|
||||
</InlineField>
|
||||
<InlineField htmlFor={aliasElementId} label="Alias by">
|
||||
<Input
|
||||
id={aliasElementId}
|
||||
type="text"
|
||||
spellCheck={false}
|
||||
placeholder="Naming pattern"
|
||||
onBlur={applyDelayedChangesAndRunQuery}
|
||||
onChange={(e) => {
|
||||
setCurrentAlias(e.currentTarget.value);
|
||||
}}
|
||||
value={currentAlias ?? ''}
|
||||
/>
|
||||
</InlineField>
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user