ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2025-02-04 15:25:17 +01:00
Code Issues Packages Releases Activity

fix metric selection drag and drop

Browse Source
This commit is contained in:
Christoph Kluge 2025-02-03 19:36:28 +01:00
parent 5681062f01
commit 2b23003556
1 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
web/frontend/src/generic/select/MetricSelection.svelte
View File

@ -44,21 +44,21 @@
for (let metric of globalMetrics) allMetrics.add(metric.name); for (let metric of globalMetrics) allMetrics.add(metric.name);
}); });
$: { $: if (newMetricsOrder.length === 0) {
if (allMetrics != null) { if (allMetrics != null) {
if (cluster == null) { if (cluster == null) {
for (let metric of globalMetrics) allMetrics.add(metric.name); for (let metric of globalMetrics) allMetrics.add(metric.name);
} else { } else {
allMetrics.clear(); allMetrics.clear();
for (let gm of globalMetrics) { for (let gm of globalMetrics) {
if (gm.availability.find((av) => av.cluster === cluster)) allMetrics.add(gm.name); if (gm.availability.find((av) => av.cluster === cluster)) allMetrics.add(gm.name);
}
} }
newMetricsOrder = [...allMetrics].filter((m) => !metrics.includes(m));
newMetricsOrder.unshift(...metrics.filter((m) => allMetrics.has(m)));
unorderedMetrics = unorderedMetrics.filter((m) => allMetrics.has(m));
} }
newMetricsOrder = [...allMetrics].filter((m) => !metrics.includes(m));
newMetricsOrder.unshift(...metrics.filter((m) => allMetrics.has(m)));
unorderedMetrics = unorderedMetrics.filter((m) => allMetrics.has(m));
} }
}
function printAvailability(metric, cluster) { function printAvailability(metric, cluster) {
const avail = globalMetrics.find((gm) => gm.name === metric)?.availability const avail = globalMetrics.find((gm) => gm.name === metric)?.availability
@ -93,13 +93,16 @@
function columnsDrag(event, target) { function columnsDrag(event, target) {
event.dataTransfer.dropEffect = "move"; event.dataTransfer.dropEffect = "move";
const start = Number.parseInt(event.dataTransfer.getData("text/plain")); const start = Number.parseInt(event.dataTransfer.getData("text/plain"));
let pendingMetricsOrder = [...newMetricsOrder];
if (start < target) { if (start < target) {
newMetricsOrder.splice(target + 1, 0, newMetricsOrder[start]); pendingMetricsOrder.splice(target + 1, 0, newMetricsOrder[start]);
newMetricsOrder.splice(start, 1); pendingMetricsOrder.splice(start, 1);
} else { } else {
newMetricsOrder.splice(target, 0, newMetricsOrder[start]); pendingMetricsOrder.splice(target, 0, newMetricsOrder[start]);
newMetricsOrder.splice(start + 1, 1); pendingMetricsOrder.splice(start + 1, 1);
} }
newMetricsOrder = [...pendingMetricsOrder];
columnHovering = null; columnHovering = null;
} }
@ -148,8 +151,13 @@
<li <li
class="cc-config-column list-group-item" class="cc-config-column list-group-item"
draggable={true} draggable={true}
ondragover={() => false} ondragover={(event) => {
ondragstart={(event) => columnsDragStart(event, index)} event.preventDefault()
return false
}}
ondragstart={(event) => {
columnsDragStart(event, index)
}}
ondrop={(event) => { ondrop={(event) => {
event.preventDefault() event.preventDefault()
columnsDrag(event, index) columnsDrag(event, index)