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

Dashboards: Fix issue where long ad-hoc values broke UI (#85073)

Browse Source 
Closes #69285
This commit is contained in:
kay delaney 2024-03-27 15:11:59 +00:00 committed by GitHub
parent 7febba947e
commit 618cf8e5a1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/app/features/variables/adhoc/picker/AdHocFilterValue.tsx
View File

@ -1,7 +1,8 @@
import { css } from '@emotion/css';
import React from 'react';
import { AdHocVariableFilter, DataSourceRef, MetricFindValue, SelectableValue } from '@grafana/data';
import { SegmentAsync } from '@grafana/ui';
import { SegmentAsync, useStyles2 } from '@grafana/ui';
import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
import { getDatasourceSrv } from '../../../plugins/datasource_srv';
@ -25,12 +26,13 @@ export const AdHocFilterValue = ({
placeHolder,
allFilters,
}: Props) => {
const styles = useStyles2(getStyles);
const loadValues = () => fetchFilterValues(datasource, filterKey, allFilters);
return (
<div className="gf-form" data-testid="AdHocFilterValue-value-wrapper">
<SegmentAsync
className="query-segment-value"
className={styles.segment}
disabled={disabled}
placeholder={placeHolder}
value={filterValue}
@ -58,3 +60,15 @@ const fetchFilterValues = async (
const metrics = await ds.getTagValues({ key, filters: otherFilters, timeRange });
return metrics.map((m: MetricFindValue) => ({ label: m.text, value: m.text }));
};
function getStyles() {
return {
segment: css({
display: 'block',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
maxWidth: '500px',
}),
};
}