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

Reverts "MetricCombobox: Fix overflowing parents" (#98868)

Browse Source 
Revert MetricCombobox: Fix overflowing parents

https://github.com/grafana/grafana/pull/97049
This commit is contained in:
Josh Hunt 2025-01-13 16:44:35 +00:00 committed by GitHub
parent ec42a8f83f
commit c3b0eb6277
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 19 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
packages/grafana-prometheus/src/querybuilder/components/MetricCombobox.tsx
View File

@ -1,11 +1,9 @@
import { css } from '@emotion/css';
import { useCallback, useState } from 'react'; import { useCallback, useState } from 'react';
import { GrafanaTheme2, SelectableValue } from '@grafana/data'; import { SelectableValue } from '@grafana/data';
import { EditorField, EditorFieldGroup, InputGroup } from '@grafana/experimental'; import { EditorField, EditorFieldGroup, InputGroup } from '@grafana/experimental';
import { Button, ComponentSize, InlineField, InlineFieldRow, useStyles2 } from '@grafana/ui'; import { Button, InlineField, InlineFieldRow } from '@grafana/ui';
import { Combobox, ComboboxOption } from '@grafana/ui/src/components/Combobox/Combobox'; import { Combobox, ComboboxOption } from '@grafana/ui/src/components/Combobox/Combobox';
import { getPropertiesForButtonSize } from '@grafana/ui/src/components/Forms/commonStyles';
import { PrometheusDatasource } from '../../datasource'; import { PrometheusDatasource } from '../../datasource';
import { regexifyLabelValuesQueryString } from '../parsingUtils'; import { regexifyLabelValuesQueryString } from '../parsingUtils';
@ -26,9 +24,6 @@ export interface MetricComboboxProps {
variableEditor?: boolean; variableEditor?: boolean;
} }
const INLINE_FIELD_WIDTH = 20;
const BUTTON_SIZE: ComponentSize = 'md';
export function MetricCombobox({ export function MetricCombobox({
datasource, datasource,
query, query,
@ -88,8 +83,6 @@ export function MetricCombobox({
return metrics; return metrics;
}, [onGetMetrics]); }, [onGetMetrics]);
const styles = useStyles2(getMectricComboboxStyles);
const asyncSelect = () => { const asyncSelect = () => {
return ( return (
<InputGroup> <InputGroup>
@ -103,7 +96,6 @@ export function MetricCombobox({
createCustomValue createCustomValue
/> />
<Button <Button
size={BUTTON_SIZE}
tooltip="Open metrics explorer" tooltip="Open metrics explorer"
aria-label="Open metrics explorer" aria-label="Open metrics explorer"
variant="secondary" variant="secondary"
@ -130,23 +122,19 @@ export function MetricCombobox({
/> />
)} )}
{variableEditor ? ( {variableEditor ? (
<span className={styles.adaptToParentVariableEditor}> <InlineFieldRow>
<InlineFieldRow> <InlineField
<InlineField label="Metric"
label="Metric" labelWidth={20}
labelWidth={INLINE_FIELD_WIDTH} tooltip={<div>Optional: returns a list of label values for the label name in the specified metric.</div>}
tooltip={<div>Optional: returns a list of label values for the label name in the specified metric.</div>} >
> {asyncSelect()}
{asyncSelect()} </InlineField>
</InlineField> </InlineFieldRow>
</InlineFieldRow>
</span>
) : ( ) : (
<span className={styles.adaptToParentQueryEditor}> <EditorFieldGroup>
<EditorFieldGroup> <EditorField label="Metric">{asyncSelect()}</EditorField>
<EditorField label="Metric">{asyncSelect()}</EditorField> </EditorFieldGroup>
</EditorFieldGroup>
</span>
)} )}
</> </>
); );
@ -175,28 +163,3 @@ const formatKeyValueStringsForLabelValuesQuery = (query: string, labelsFilters?:
return formatPrometheusLabelFiltersToString(queryString, labelsFilters); return formatPrometheusLabelFiltersToString(queryString, labelsFilters);
}; };
const getMectricComboboxStyles = (theme: GrafanaTheme2) => {
const { height } = getPropertiesForButtonSize(BUTTON_SIZE, theme);
const buttonSpace = parseInt(theme.spacing(height), 10);
const inlineFieldSpace = parseInt(theme.spacing(INLINE_FIELD_WIDTH), 10);
const widthToSubstract = inlineFieldSpace + buttonSpace;
return {
adaptToParentQueryEditor: css({
// Take metrics explorer button into account
maxWidth: `calc(100% - ${buttonSpace}px)`,
}),
adaptToParentVariableEditor: css({
maxWidth: '100%',
display: 'flex',
'[class*="InlineFieldRow"]': {
'> div': {
'label + div': {
// Take label and the metrics explorer button into account
maxWidth: `calc(100% - ${widthToSubstract}px)`,
},
},
},
}),
};
};

18
packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx
View File

@ -6,7 +6,7 @@ import { DataSourceApi, PanelData } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
import { EditorRow } from '@grafana/experimental'; import { EditorRow } from '@grafana/experimental';
import { config } from '@grafana/runtime'; import { config } from '@grafana/runtime';
import { Drawer, useStyles2 } from '@grafana/ui'; import { Drawer } from '@grafana/ui';
import { PrometheusDatasource } from '../../datasource'; import { PrometheusDatasource } from '../../datasource';
import promqlGrammar from '../../promql'; import promqlGrammar from '../../promql';
@ -58,7 +58,6 @@ export const PromQueryBuilder = memo<PromQueryBuilderProps>((props) => {
checkLlms(); checkLlms();
} }
}, [prometheusPromQAIL]); }, [prometheusPromQAIL]);
const styles = useStyles2(getPromQueryBuilderStyles);
return ( return (
<> <>
@ -72,12 +71,9 @@ export const PromQueryBuilder = memo<PromQueryBuilderProps>((props) => {
/> />
</Drawer> </Drawer>
)} )}
<span className={styles.addaptToParent}> <EditorRow>
<EditorRow> <MetricsLabelsSection query={query} onChange={onChange} datasource={datasource} />
<MetricsLabelsSection query={query} onChange={onChange} datasource={datasource} /> </EditorRow>
</EditorRow>
</span>
{initHints.length ? ( {initHints.length ? (
<div <div
className={css({ className={css({
@ -154,9 +150,5 @@ export const PromQueryBuilder = memo<PromQueryBuilderProps>((props) => {
</> </>
); );
}); });
const getPromQueryBuilderStyles = () => ({
addaptToParent: css({
maxWidth: '100%',
}),
});
PromQueryBuilder.displayName = 'PromQueryBuilder'; PromQueryBuilder.displayName = 'PromQueryBuilder';

1
packages/grafana-ui/src/components/Forms/InlineField.tsx
View File

@ -98,7 +98,6 @@ const getStyles = (theme: GrafanaTheme2, grow?: boolean, shrink?: boolean) => {
position: 'relative', position: 'relative',
flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} auto`, flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} auto`,
margin: `0 ${theme.spacing(0.5)} ${theme.spacing(0.5)} 0`, margin: `0 ${theme.spacing(0.5)} ${theme.spacing(0.5)} 0`,
maxWidth: '100%',
}), }),
childContainer: css({ childContainer: css({
flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} auto`, flex: `${grow ? 1 : 0} ${shrink ? 1 : 0} auto`,

1
packages/grafana-ui/src/components/Forms/InlineFieldRow.tsx
View File

@ -27,7 +27,6 @@ const getStyles = (theme: GrafanaTheme2) => {
flexWrap: 'wrap', flexWrap: 'wrap',
alignContent: 'flex-start', alignContent: 'flex-start',
rowGap: theme.spacing(0.5), rowGap: theme.spacing(0.5),
maxWidth: '100%',
}), }),
}; };
}; };