mirror of https://github.com/grafana/grafana
Logs Panel: Table UI - Reordering table columns via drag-and-drop (#79536)
* Implement react-beautiful-dnd to facilitate column reordering * Refactoring field display components * Refactoring internal types to better align with Grafana style guide --------- Co-authored-by: Sven Grossmann <sven.grossmann@grafana.com>pull/80649/head
Galen Kistler
2 years ago
committed by
GitHub
parent
581936a442
commit
7b8db643a3
@ -0,0 +1,109 @@ |
|||||||
|
import { css, cx } from '@emotion/css'; |
||||||
|
import React from 'react'; |
||||||
|
import { DragDropContext, Draggable, DraggableProvided, Droppable, DropResult } from 'react-beautiful-dnd'; |
||||||
|
|
||||||
|
import { GrafanaTheme2 } from '@grafana/data/src'; |
||||||
|
import { useTheme2 } from '@grafana/ui/src'; |
||||||
|
|
||||||
|
import { LogsTableEmptyFields } from './LogsTableEmptyFields'; |
||||||
|
import { LogsTableNavField } from './LogsTableNavField'; |
||||||
|
import { FieldNameMeta } from './LogsTableWrap'; |
||||||
|
|
||||||
|
export function getLogsFieldsStyles(theme: GrafanaTheme2) { |
||||||
|
return { |
||||||
|
wrap: css({ |
||||||
|
marginTop: theme.spacing(1), |
||||||
|
marginBottom: theme.spacing(1), |
||||||
|
display: 'flex', |
||||||
|
background: theme.colors.background.primary, |
||||||
|
}), |
||||||
|
dragging: css({ |
||||||
|
background: theme.colors.background.secondary, |
||||||
|
}), |
||||||
|
columnWrapper: css({ |
||||||
|
marginBottom: theme.spacing(1.5), |
||||||
|
// need some space or the outline of the checkbox is cut off
|
||||||
|
paddingLeft: theme.spacing(0.5), |
||||||
|
}), |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function sortLabels(labels: Record<string, FieldNameMeta>) { |
||||||
|
return (a: string, b: string) => { |
||||||
|
const la = labels[a]; |
||||||
|
const lb = labels[b]; |
||||||
|
|
||||||
|
// Sort by index
|
||||||
|
if (la.index != null && lb.index != null) { |
||||||
|
return la.index - lb.index; |
||||||
|
} |
||||||
|
|
||||||
|
// otherwise do not sort
|
||||||
|
return 0; |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
export const LogsTableActiveFields = (props: { |
||||||
|
labels: Record<string, FieldNameMeta>; |
||||||
|
valueFilter: (value: string) => boolean; |
||||||
|
toggleColumn: (columnName: string) => void; |
||||||
|
reorderColumn: (sourceIndex: number, destinationIndex: number) => void; |
||||||
|
id: string; |
||||||
|
}): JSX.Element => { |
||||||
|
const { reorderColumn, labels, valueFilter, toggleColumn } = props; |
||||||
|
const theme = useTheme2(); |
||||||
|
const styles = getLogsFieldsStyles(theme); |
||||||
|
const labelKeys = Object.keys(labels).filter((labelName) => valueFilter(labelName)); |
||||||
|
|
||||||
|
const onDragEnd = (result: DropResult) => { |
||||||
|
if (!result.destination) { |
||||||
|
return; |
||||||
|
} |
||||||
|
reorderColumn(result.source.index, result.destination.index); |
||||||
|
}; |
||||||
|
|
||||||
|
const renderTitle = (labelName: string) => { |
||||||
|
const label = labels[labelName]; |
||||||
|
if (label) { |
||||||
|
return `${labelName} appears in ${label?.percentOfLinesWithLabel}% of log lines`; |
||||||
|
} |
||||||
|
|
||||||
|
return undefined; |
||||||
|
}; |
||||||
|
|
||||||
|
if (labelKeys.length) { |
||||||
|
return ( |
||||||
|
<DragDropContext onDragEnd={onDragEnd}> |
||||||
|
<Droppable droppableId="order-fields" direction="vertical"> |
||||||
|
{(provided) => ( |
||||||
|
<div className={styles.columnWrapper} {...provided.droppableProps} ref={provided.innerRef}> |
||||||
|
{labelKeys.sort(sortLabels(labels)).map((labelName, index) => ( |
||||||
|
<Draggable draggableId={labelName} key={labelName} index={index}> |
||||||
|
{(provided: DraggableProvided, snapshot) => ( |
||||||
|
<div |
||||||
|
className={cx(styles.wrap, snapshot.isDragging ? styles.dragging : undefined)} |
||||||
|
ref={provided.innerRef} |
||||||
|
{...provided.draggableProps} |
||||||
|
{...provided.dragHandleProps} |
||||||
|
title={renderTitle(labelName)} |
||||||
|
> |
||||||
|
<LogsTableNavField |
||||||
|
label={labelName} |
||||||
|
onChange={() => toggleColumn(labelName)} |
||||||
|
labels={labels} |
||||||
|
draggable={true} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Draggable> |
||||||
|
))} |
||||||
|
{provided.placeholder} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Droppable> |
||||||
|
</DragDropContext> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
return <LogsTableEmptyFields />; |
||||||
|
}; |
||||||
@ -0,0 +1,63 @@ |
|||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { useTheme2 } from '@grafana/ui/src'; |
||||||
|
|
||||||
|
import { getLogsFieldsStyles } from './LogsTableActiveFields'; |
||||||
|
import { LogsTableEmptyFields } from './LogsTableEmptyFields'; |
||||||
|
import { LogsTableNavField } from './LogsTableNavField'; |
||||||
|
import { FieldNameMeta } from './LogsTableWrap'; |
||||||
|
|
||||||
|
const collator = new Intl.Collator(undefined, { sensitivity: 'base' }); |
||||||
|
|
||||||
|
function sortLabels(labels: Record<string, FieldNameMeta>) { |
||||||
|
return (a: string, b: string) => { |
||||||
|
const la = labels[a]; |
||||||
|
const lb = labels[b]; |
||||||
|
|
||||||
|
// ...sort by type and alphabetically
|
||||||
|
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 LogsTableAvailableFields = (props: { |
||||||
|
labels: Record<string, FieldNameMeta>; |
||||||
|
valueFilter: (value: string) => boolean; |
||||||
|
toggleColumn: (columnName: string) => void; |
||||||
|
}): JSX.Element => { |
||||||
|
const { labels, valueFilter, toggleColumn } = props; |
||||||
|
const theme = useTheme2(); |
||||||
|
const styles = getLogsFieldsStyles(theme); |
||||||
|
const labelKeys = Object.keys(labels).filter((labelName) => valueFilter(labelName)); |
||||||
|
if (labelKeys.length) { |
||||||
|
// Otherwise show list with a hardcoded order
|
||||||
|
return ( |
||||||
|
<div className={styles.columnWrapper}> |
||||||
|
{labelKeys.sort(sortLabels(labels)).map((labelName, index) => ( |
||||||
|
<div |
||||||
|
key={labelName} |
||||||
|
className={styles.wrap} |
||||||
|
title={`${labelName} appears in ${labels[labelName]?.percentOfLinesWithLabel}% of log lines`} |
||||||
|
> |
||||||
|
<LogsTableNavField |
||||||
|
showCount={true} |
||||||
|
label={labelName} |
||||||
|
onChange={() => toggleColumn(labelName)} |
||||||
|
labels={labels} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
return <LogsTableEmptyFields />; |
||||||
|
}; |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { useTheme2 } from '@grafana/ui'; |
||||||
|
|
||||||
|
function getStyles(theme: GrafanaTheme2) { |
||||||
|
return { |
||||||
|
empty: css({ |
||||||
|
marginBottom: theme.spacing(2), |
||||||
|
marginLeft: theme.spacing(1.75), |
||||||
|
fontSize: theme.typography.fontSize, |
||||||
|
}), |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
export function LogsTableEmptyFields() { |
||||||
|
const theme = useTheme2(); |
||||||
|
const styles = getStyles(theme); |
||||||
|
return <div className={styles.empty}>No fields</div>; |
||||||
|
} |
||||||
@ -1,108 +0,0 @@ |
|||||||
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<string, fieldNameMeta>) { |
|
||||||
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<string, fieldNameMeta>; |
|
||||||
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 ( |
|
||||||
<div className={styles.columnWrapper}> |
|
||||||
{labelKeys.sort(sortLabels(labels)).map((labelName) => ( |
|
||||||
<div |
|
||||||
title={`${labelName} appears in ${labels[labelName]?.percentOfLinesWithLabel}% of log lines`} |
|
||||||
className={styles.wrap} |
|
||||||
key={labelName} |
|
||||||
> |
|
||||||
<Checkbox |
|
||||||
className={styles.checkboxLabel} |
|
||||||
label={labelName} |
|
||||||
onChange={() => toggleColumn(labelName)} |
|
||||||
checked={labels[labelName]?.active ?? false} |
|
||||||
/> |
|
||||||
<button className={styles.labelCount} onClick={() => toggleColumn(labelName)}> |
|
||||||
{labels[labelName]?.percentOfLinesWithLabel}% |
|
||||||
</button> |
|
||||||
</div> |
|
||||||
))} |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
return <div className={styles.empty}>No fields</div>; |
|
||||||
}; |
|
||||||
@ -0,0 +1,83 @@ |
|||||||
|
import { css } from '@emotion/css'; |
||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
import { GrafanaTheme2 } from '@grafana/data'; |
||||||
|
import { Checkbox, Icon, useTheme2 } from '@grafana/ui'; |
||||||
|
|
||||||
|
import { FieldNameMeta } from './LogsTableWrap'; |
||||||
|
|
||||||
|
function getStyles(theme: GrafanaTheme2) { |
||||||
|
return { |
||||||
|
dragIcon: css({ |
||||||
|
cursor: 'drag', |
||||||
|
marginLeft: theme.spacing(1), |
||||||
|
opacity: 0.4, |
||||||
|
}), |
||||||
|
labelCount: css({ |
||||||
|
marginLeft: theme.spacing(0.5), |
||||||
|
marginRight: theme.spacing(0.5), |
||||||
|
appearance: 'none', |
||||||
|
background: 'none', |
||||||
|
border: 'none', |
||||||
|
fontSize: theme.typography.pxToRem(11), |
||||||
|
opacity: 0.6, |
||||||
|
}), |
||||||
|
contentWrap: css({ |
||||||
|
display: 'flex', |
||||||
|
alignItems: 'center', |
||||||
|
justifyContent: 'space-between', |
||||||
|
width: '100%', |
||||||
|
}), |
||||||
|
// Hide text that overflows, had to select elements within the Checkbox component, so this is a bit fragile
|
||||||
|
checkboxLabel: css({ |
||||||
|
'> span': { |
||||||
|
overflow: 'hidden', |
||||||
|
textOverflow: 'ellipsis', |
||||||
|
whiteSpace: 'nowrap', |
||||||
|
display: 'block', |
||||||
|
maxWidth: '100%', |
||||||
|
}, |
||||||
|
}), |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
export function LogsTableNavField(props: { |
||||||
|
label: string; |
||||||
|
onChange: () => void; |
||||||
|
labels: Record<string, FieldNameMeta>; |
||||||
|
draggable?: boolean; |
||||||
|
showCount?: boolean; |
||||||
|
}): React.JSX.Element | undefined { |
||||||
|
const theme = useTheme2(); |
||||||
|
const styles = getStyles(theme); |
||||||
|
|
||||||
|
if (props.labels[props.label]) { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div className={styles.contentWrap}> |
||||||
|
<Checkbox |
||||||
|
className={styles.checkboxLabel} |
||||||
|
label={props.label} |
||||||
|
onChange={props.onChange} |
||||||
|
checked={props.labels[props.label]?.active ?? false} |
||||||
|
/> |
||||||
|
{props.showCount && ( |
||||||
|
<button className={styles.labelCount} onClick={props.onChange}> |
||||||
|
{props.labels[props.label]?.percentOfLinesWithLabel}% |
||||||
|
</button> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{props.draggable && ( |
||||||
|
<Icon |
||||||
|
aria-label="Drag and drop icon" |
||||||
|
title="Drag and drop to reorder" |
||||||
|
name="draggabledots" |
||||||
|
size="lg" |
||||||
|
className={styles.dragIcon} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
return undefined; |
||||||
|
} |
||||||
Loading…
Reference in new issue