mirror of https://github.com/grafana/grafana.git
82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
import { css, cx } from '@emotion/css';
|
|
|
|
import { GrafanaTheme2 } from '@grafana/data';
|
|
import { useStyles2 } from '@grafana/ui';
|
|
|
|
const getStyles = (theme: GrafanaTheme2) => ({
|
|
logsStatsRow: css({
|
|
label: 'logs-stats-row',
|
|
margin: `${parseInt(theme.spacing(2), 10) / 1.75}px 0`,
|
|
}),
|
|
logsStatsRowActive: css({
|
|
label: 'logs-stats-row--active',
|
|
color: theme.colors.primary.text,
|
|
position: 'relative',
|
|
}),
|
|
logsStatsRowLabel: css({
|
|
label: 'logs-stats-row__label',
|
|
display: 'flex',
|
|
marginBottom: '1px',
|
|
}),
|
|
logsStatsRowValue: css({
|
|
label: 'logs-stats-row__value',
|
|
flex: 1,
|
|
textOverflow: 'ellipsis',
|
|
overflow: 'hidden',
|
|
}),
|
|
logsStatsRowCount: css({
|
|
label: 'logs-stats-row__count',
|
|
textAlign: 'right',
|
|
marginLeft: theme.spacing(0.75),
|
|
}),
|
|
logsStatsRowPercent: css({
|
|
label: 'logs-stats-row__percent',
|
|
textAlign: 'right',
|
|
marginLeft: theme.spacing(0.75),
|
|
width: theme.spacing(4.5),
|
|
}),
|
|
logsStatsRowBar: css({
|
|
label: 'logs-stats-row__bar',
|
|
height: theme.spacing(0.5),
|
|
overflow: 'hidden',
|
|
background: theme.colors.text.disabled,
|
|
}),
|
|
logsStatsRowInnerBar: css({
|
|
label: 'logs-stats-row__innerbar',
|
|
height: theme.spacing(0.5),
|
|
overflow: 'hidden',
|
|
background: theme.colors.primary.main,
|
|
}),
|
|
});
|
|
|
|
export interface Props {
|
|
active?: boolean;
|
|
count: number;
|
|
proportion: number;
|
|
value?: string;
|
|
}
|
|
|
|
export const LogLabelStatsRow = ({ active, count, proportion, value }: Props) => {
|
|
const style = useStyles2(getStyles);
|
|
const percent = `${Math.round(proportion * 100)}%`;
|
|
const barStyle = { width: percent };
|
|
const className = active ? cx([style.logsStatsRow, style.logsStatsRowActive]) : cx([style.logsStatsRow]);
|
|
|
|
return (
|
|
<div className={className}>
|
|
<div className={cx([style.logsStatsRowLabel])}>
|
|
<div className={cx([style.logsStatsRowValue])} title={value}>
|
|
{value}
|
|
</div>
|
|
<div className={cx([style.logsStatsRowCount])}>{count}</div>
|
|
<div className={cx([style.logsStatsRowPercent])}>{percent}</div>
|
|
</div>
|
|
<div className={cx([style.logsStatsRowBar])}>
|
|
<div className={cx([style.logsStatsRowInnerBar])} style={barStyle} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
LogLabelStatsRow.displayName = 'LogLabelStatsRow';
|