import { css } from '@emotion/css'; import React from 'react'; import { GrafanaTheme2 } from '@grafana/data/src'; import { Checkbox, useTheme2 } from '@grafana/ui/src'; import { fieldNameMeta } from './LogsTableWrap'; function getStyles(theme: GrafanaTheme2) { return { labelCount: css({ marginLeft: theme.spacing(0.5), marginRight: theme.spacing(0.5), appearance: 'none', background: 'none', border: 'none', fontSize: theme.typography.pxToRem(11), }), wrap: css({ display: 'flex', alignItems: 'center', marginTop: theme.spacing(1), marginBottom: theme.spacing(1), justifyContent: 'space-between', }), // Making the checkbox sticky and label scrollable for labels that are wider then the container // However, the checkbox component does not support this, so we need to do some css hackery for now until the API of that component is updated. checkboxLabel: css({ '> :first-child': { position: 'sticky', left: 0, bottom: 0, top: 0, }, '> span': { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block', maxWidth: '100%', }, }), columnWrapper: css({ marginBottom: theme.spacing(1.5), // need some space or the outline of the checkbox is cut off paddingLeft: theme.spacing(0.5), }), empty: css({ marginBottom: theme.spacing(2), marginLeft: theme.spacing(1.75), fontSize: theme.typography.fontSize, }), }; } const collator = new Intl.Collator(undefined, { sensitivity: 'base' }); function sortLabels(labels: Record) { return (a: string, b: string) => { const la = labels[a]; const lb = labels[b]; if (la != null && lb != null) { return ( Number(lb.type === 'TIME_FIELD') - Number(la.type === 'TIME_FIELD') || Number(lb.type === 'BODY_FIELD') - Number(la.type === 'BODY_FIELD') || collator.compare(a, b) ); } // otherwise do not sort return 0; }; } export const LogsTableNavColumn = (props: { labels: Record; valueFilter: (value: string) => boolean; toggleColumn: (columnName: string) => void; }): JSX.Element => { const { labels, valueFilter, toggleColumn } = props; const theme = useTheme2(); const styles = getStyles(theme); const labelKeys = Object.keys(labels).filter((labelName) => valueFilter(labelName)); if (labelKeys.length) { return (
{labelKeys.sort(sortLabels(labels)).map((labelName) => (
toggleColumn(labelName)} checked={labels[labelName]?.active ?? false} />
))}
); } return
No fields
; };