Skip to content

Backlog/v12 resizable columns log explorer #2581

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AlexSanchez-bit merged 2 commits into from
Sep 15, 2026
+13 −8
Merged

Backlog/v12 resizable columns log explorer #2581

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
21721a4
fix[frontend](log-explorer): fixed-px auto columns so widths render c…
AlexSanchez-bit Sep 15, 2026
a776ba7
fix[frontend](resizable-columns): sync template on initial-length change
AlexSanchez-bit Sep 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions frontend/src/features/log-explorer/components/LogExplorerView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const IMPORTANT_FIELDS = [
'origin.url',
'target.url',
]
const MAX_AUTO_COLUMNS = 5
const MAX_AUTO_COLUMNS = 10

/** Router state passed by an alert's "view all related logs" action. */
interface RelatedLogsSeed {
Expand Down Expand Up @@ -372,8 +372,8 @@ export function LogExplorerView({ initial, onConfigChange }: LogExplorerViewProp
// fields + a flex message column (default mode). Label-based floors keep
// header names from cropping when a column is dragged narrow.
const logGridMins = columns.length > 0
? [20, 3, 168, ...colMins(columns)]
: [20, 3, 168, 96, ...colMins(autoColumns), 96]
? [20, 30, 168, ...colMins(columns)]
: [20, 30, 168, 96, ...colMins(autoColumns), 96]
const { template: tableCols, startDrag } = useResizableColumns(logGridColumnSizes(columns, autoColumns), {
min: logGridMins,
storageKey: columnStorageKey,
Expand Down
7 changes: 5 additions & 2 deletions frontend/src/features/log-explorer/components/log-results.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,12 @@ function absTimestamp(iso: string) {
// Grid columns. Manual mode (user picked columns): time + each picked column (last
// flexes). Default mode: time + source + auto-detected important columns + a
// flexible message column.
const FIELD_COL = 160
const MESSAGE_COL = 320

export function logGridColumnSizes(columns: string[], autoColumns: string[] = []): Array<string | number> {
if (columns.length > 0) return [20, 3, 168, ...columns.map(() => 'minmax(120px, 1fr)')]
return [20, 3, 168, 120, ...autoColumns.map(() => 'minmax(96px, 0.7fr)'), 'minmax(0, 1fr)']
if (columns.length > 0) return [20, 30, 168, ...columns.map(() => FIELD_COL)]
return [20, 30, 168, FIELD_COL, ...autoColumns.map(() => FIELD_COL), MESSAGE_COL]
}

function gridTemplate(columns: string[], autoColumns: string[] = []): string {
Expand Down
8 changes: 5 additions & 3 deletions frontend/src/shared/hooks/useResizableColumns.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ export function useResizableColumns(initial: ColSize[], opts: Opts = {}) {
const [widths, setWidths] = useState<ColSize[]>(initial)
const dragRef = useRef<{ index: number; startX: number; startW: number; measured: number[] } | null>(null)

const effectiveWidths = widths.length === initial.length ? widths : initial

useEffect(() => {
setWidths(initial)
}, [initial.length, storageKey])
Expand Down Expand Up @@ -88,17 +90,17 @@ export function useResizableColumns(initial: ColSize[], opts: Opts = {}) {
[min],
)

const mins = widths.map((_, i) => minAt(min, i))
const mins = effectiveWidths.map((_, i) => minAt(min, i))
// ponytail: wrap simple fr tracks in minmax so a narrow viewport can't
// collapse labels below their per-column min. Fixed px tracks and strings
// that already declare their own function (e.g. `minmax(120px, 1fr)`) are
// passed through unchanged.
const template = widths
const template = effectiveWidths
.map((w, i) => {
if (typeof w === 'number') return `${w}px`
return /^[\d.]+fr$/.test(w.trim()) ? `minmax(${mins[i]}px, ${w})` : w
})
.join(' ')

return { widths, template, setWidths, startDrag, mins }
return { widths: effectiveWidths, template, setWidths, startDrag, mins }
}
Loading