{content.map((item, index) => (
-
- {item.name}
- {isLoading ? : {item.value}}
-
+
+ {item.name}
+ {item.tooltip && (
+
+
+
+ )}
+ {isLoading ? (
+
+ ) : (
+ {item.value}
+ )}
+
))}
{footer && {footer}
}
@@ -34,5 +51,21 @@ const getStyles = (theme: GrafanaTheme2) => {
gap: theme.spacing(2),
padding: theme.spacing(2),
}),
+ inner: css({
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ }),
+ indent: css({
+ marginLeft: theme.spacing(2),
+ }),
+ tooltip: css({
+ color: theme.colors.secondary.text,
+ }),
+ highlight: css({
+ color: theme.colors.warning.text,
+ padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,
+ marginRight: `-${theme.spacing(1)}`,
+ }),
};
};