diff --git a/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.tsx b/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.tsx index 400bb60939e..d56b24e0c8a 100644 --- a/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.tsx +++ b/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.tsx @@ -13,6 +13,8 @@ const MAX_LABEL_COUNT = 10000; const MAX_VALUE_COUNT = 50000; const EMPTY_SELECTOR = '{}'; const METRIC_LABEL = '__name__'; +const LIST_ITEM_SIZE = 25; + export const LAST_USED_LABELS_KEY = 'grafana.datasources.prometheus.browser.labels'; export interface BrowserProps { @@ -105,7 +107,7 @@ export function facetLabels( const getStyles = stylesFactory((theme: GrafanaTheme) => ({ wrapper: css` background-color: ${theme.colors.bg2}; - padding: ${theme.spacing.md}; + padding: ${theme.spacing.sm}; width: 100%; `, list: css` @@ -114,6 +116,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({ flex-wrap: wrap; max-height: 200px; overflow: auto; + align-content: flex-start; `, section: css` & + & { @@ -177,6 +180,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({ * to create a single, generic component. */ export class UnthemedPrometheusMetricsBrowser extends React.Component { + valueListsRef = React.createRef(); state: BrowserState = { labels: [] as SelectableLabel[], labelSearchTerm: '', @@ -439,7 +443,7 @@ export class UnthemedPrometheusMetricsBrowser extends React.Component
- +
(metrics!.values as FacettableValue[])[i].name} width={300} className={styles.valueList} @@ -526,7 +532,7 @@ export class UnthemedPrometheusMetricsBrowser extends React.Component
-