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

style: datatrails: use Tag on cards (#83198)

Browse Source 
* style: datatrails: use Tag on cards
This commit is contained in:
Darren Janeczek 2024-02-23 12:03:10 -05:00 committed by GitHub
parent a97562906c
commit b3c0f69576
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@ import React from 'react';
import { dateTimeFormat, GrafanaTheme2 } from '@grafana/data';
import { AdHocFiltersVariable, sceneGraph } from '@grafana/scenes';
import { Badge, Card, IconButton, Stack, useStyles2 } from '@grafana/ui';
import { Card, IconButton, Stack, Tag, useStyles2 } from '@grafana/ui';
import { DataTrail } from './DataTrail';
import { VAR_FILTERS } from './shared';
@ -26,13 +26,15 @@ export function DataTrailCard({ trail, onSelect, onDelete }: Props) {
const filters = filtersVariable.state.filters;
const dsValue = getDataSource(trail);
const onClick = () => onSelect(trail);
return (
<Card onClick={() => onSelect(trail)} className={styles.card}>
<Card onClick={onClick} className={styles.card}>
<Card.Heading>{getMetricName(trail.state.metric)}</Card.Heading>
<div className={styles.description}>
<Stack gap={1.5}>
{filters.map((f) => (
<Badge key={f.key} text={`${f.key}: ${f.value}`} color={'blue'} className={styles.tag} />
<Tag key={f.key} name={`${f.key}: ${f.value}`} colorIndex={12} />
))}
</Stack>
</div>