app/vmui: allow table column reordering

[withlin]

• add drag-and-drop ordering in table settings and store order in URL
• render table columns in chosen order and restyle drag handle
• add TableLogs order unit test

Fixes: #714

Checklist

The following checks are mandatory:

• My change adheres to VictoriaMetrics contributing guidelines.
• My change adheres to VictoriaMetrics development goals.

[valyala]

@withlin , thank you for the pull request!

@Loori-R , @arturminchukov , could you review it?

[Loori-R]

Thanks for the PR - overall looks good.
Just a couple of minor UI follow-ups (see attached screenshot):

1. Please add the column order index (#1, #2, …) to the drag list as shown in the screenshot, to make the current order easier to scan and verify.
2. Please limit the height of the reorder list (similar to the checkbox list) and make it scrollable, as shown in the screenshot, to avoid the modal growing too tall when many columns are selected.

[Loori-R]

dragOverColumn can be stale here. This check can be removed - setting the same value won’t trigger a re-render.

[Loori-R]

Cleanup logic is duplicated here - consider calling handleDragEnd() instead of resetting the state inline:

Suggested change

	setDragOverColumn(null);
	setDraggingColumn(null);
	handleDragEnd();

[Loori-R]

Since the column config is derived from the key, tableColumnsMap/reduce (and even columns as a source list) look redundant here. We can build the Table columns directly from displayColumns to keep the requested order and simplify the code.

Suggested change

	return displayColumns.reduce<typeof tableColumns>((acc, key) => {
	const column = tableColumnsMap.get(key);
	if (column) acc.push(column);
	return acc;
	}, []);
	}, [tableColumnsMap, displayColumns, tableCompact]);
	return displayColumns.map((key) => ({
	key: key as keyof Logs,
	title: key,
	className: getColumnClass(key),
	}));
	}, [displayColumns, tableCompact]);