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

Explore metrics: Fix long metrics and labels in landing page (#92443)

Browse Source 
* word wrap long metric names

* trunctate long labels

* use css for filters
This commit is contained in:
Brendan O'Handley 2024-09-11 08:17:41 -05:00 committed by GitHub
parent ff5ed75ea9
commit d41ee6bbc3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/app/features/trails/DataTrailCard.tsx
View File

@ -51,7 +51,7 @@ export function DataTrailCard(props: Props) {
return ( return (
<Card onClick={onSelect} className={styles.card}> <Card onClick={onSelect} className={styles.card}>
<Card.Heading>{getMetricName(metric)}</Card.Heading> <Card.Heading className={styles.wordwrap}>{getMetricName(metric)}</Card.Heading>
<div className={styles.description}> <div className={styles.description}>
<Stack gap={1.5} wrap="wrap"> <Stack gap={1.5} wrap="wrap">
{filters.map((f) => ( {filters.map((f) => (
@ -106,9 +106,16 @@ function getStyles(theme: GrafanaTheme2) {
margin: theme.spacing(1, 0, 0), margin: theme.spacing(1, 0, 0),
color: theme.colors.text.secondary, color: theme.colors.text.secondary,
lineHeight: theme.typography.body.lineHeight, lineHeight: theme.typography.body.lineHeight,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}), }),
actions: css({ actions: css({
marginRight: theme.spacing(1), marginRight: theme.spacing(1),
}), }),
wordwrap: css({
overflow: 'hidden',
overflowWrap: 'anywhere',
}),
}; };
} }