Migrate nodeList subcomponents

This commit is contained in:
Christoph Kluge 2025-06-26 12:29:48 +02:00
parent db5f6c7540
commit e94b250541
4 changed files with 62 additions and 45 deletions

View File

@ -6,18 +6,18 @@
- `items [Any]`: List of plot components to render
-->
<script>
import {
Row,
Col,
} from "@sveltestrap/sveltestrap";
<script>
import {
Row,
Col,
} from "@sveltestrap/sveltestrap";
/* Svelte 5 Props */
let {
items,
itemsPerRow,
gridContent
} = $props();
/* Svelte 5 Props */
let {
items,
itemsPerRow,
gridContent
} = $props();
</script>
<Row cols={{ xs: 1, sm: 2, md: 3, lg: itemsPerRow}}>

View File

@ -18,6 +18,7 @@ Changes #2: Rewritten for Svelte 5, removed bodyHandler
-->
<script>
/* Svelte 5 Props */
let {
sliderMin,
sliderMax,
@ -26,6 +27,7 @@ Changes #2: Rewritten for Svelte 5, removed bodyHandler
changeRange
} = $props();
/* State Init */
let pendingValues = $state([fromPreset, toPreset]);
let sliderFrom = $state(Math.max(((fromPreset == null ? sliderMin : fromPreset) - sliderMin) / (sliderMax - sliderMin), 0.));
let sliderTo = $state(Math.min(((toPreset == null ? sliderMin : toPreset) - sliderMin) / (sliderMax - sliderMin), 1.));
@ -34,7 +36,10 @@ Changes #2: Rewritten for Svelte 5, removed bodyHandler
let leftHandle = $state();
let sliderMain = $state();
/* Var Init */
let timeoutId = null;
/* Functions */
function queueChangeEvent() {
if (timeoutId !== null) {
clearTimeout(timeoutId)

View File

@ -16,28 +16,37 @@
CardBody,
Input,
InputGroup,
InputGroupText, } from "@sveltestrap/sveltestrap";
InputGroupText,
} from "@sveltestrap/sveltestrap";
import {
scramble,
scrambleNames, } from "../../generic/utils.js";
scrambleNames,
} from "../../generic/utils.js";
export let cluster;
export let subCluster
export let hostname;
export let dataHealth;
export let nodeJobsData = null;
/* Svelte 5 Props */
let {
cluster,
subCluster,
hostname,
dataHealth,
nodeJobsData = null,
} = $props();
/* Const Init */
// Not at least one returned, selected metric: NodeHealth warning
const healthWarn = !dataHealth.includes(true);
// At least one non-returned selected metric: Metric config error?
const metricWarn = dataHealth.includes(false);
let userList;
let projectList;
$: if (nodeJobsData) {
userList = Array.from(new Set(nodeJobsData.jobs.items.map((j) => scrambleNames ? scramble(j.user) : j.user))).sort((a, b) => a.localeCompare(b));
projectList = Array.from(new Set(nodeJobsData.jobs.items.map((j) => scrambleNames ? scramble(j.project) : j.project))).sort((a, b) => a.localeCompare(b));
}
/* Derived */
const userList = $derived(nodeJobsData
? Array.from(new Set(nodeJobsData.jobs.items.map((j) => scrambleNames ? scramble(j.user) : j.user))).sort((a, b) => a.localeCompare(b))
: []
);
const projectList = $derived(nodeJobsData
? Array.from(new Set(nodeJobsData.jobs.items.map((j) => scrambleNames ? scramble(j.project) : j.project))).sort((a, b) => a.localeCompare(b))
: []);
</script>
<Card class="pb-3">

View File

@ -18,10 +18,14 @@
import MetricPlot from "../../generic/plots/MetricPlot.svelte";
import NodeInfo from "./NodeInfo.svelte";
export let cluster;
export let nodeData;
export let selectedMetrics;
/* Svelte 5 Props */
let {
cluster,
nodeData,
selectedMetrics,
} = $props();
/* Const Init */
const client = getContextClient();
const paging = { itemsPerPage: 50, page: 1 };
const sorting = { field: "startTime", type: "col", order: "DESC" };
@ -30,7 +34,6 @@
{ node: { contains: nodeData.host } },
{ state: ["running"] },
];
const nodeJobsQuery = gql`
query (
$filter: [JobFilter!]!
@ -53,13 +56,19 @@
}
`;
$: nodeJobsData = queryStore({
client: client,
query: nodeJobsQuery,
variables: { paging, sorting, filter },
});
/* Derived */
const nodeJobsData = $derived(queryStore({
client: client,
query: nodeJobsQuery,
variables: { paging, sorting, filter },
})
);
// Helper
let extendedLegendData = $derived($nodeJobsData?.data ? buildExtendedLegend() : null);
let refinedData = $derived(nodeData?.metrics ? sortAndSelectScope(nodeData.metrics) : null);
let dataHealth = $derived(refinedData.filter((rd) => rd.disabled === false).map((enabled) => (enabled.data.metric.series.length > 0)));
/* Functions */
const selectScope = (nodeMetrics) =>
nodeMetrics.reduce(
(a, b) =>
@ -89,15 +98,8 @@
}
});
let refinedData;
let dataHealth;
$: if (nodeData?.metrics) {
refinedData = sortAndSelectScope(nodeData?.metrics)
dataHealth = refinedData.filter((rd) => rd.disabled === false).map((enabled) => (enabled.data.metric.series.length > 0))
}
let extendedLegendData = null;
$: if ($nodeJobsData?.data) {
function buildExtendedLegend() {
let pendingExtendedLegendData = null
// Build Extended for allocated nodes [Commented: Only Build extended Legend For Shared Nodes]
if ($nodeJobsData.data.jobs.count >= 1) { // "&& !$nodeJobsData.data.jobs.items[0].exclusive)"
const accSet = Array.from(new Set($nodeJobsData.data.jobs.items
@ -107,11 +109,11 @@
)
)).flat(2)
extendedLegendData = {}
pendingExtendedLegendData = {};
for (const accId of accSet) {
const matchJob = $nodeJobsData.data.jobs.items.find((i) => i.resources.find((r) => r.accelerators.includes(accId)))
const matchUser = matchJob?.user ? matchJob.user : null
extendedLegendData[accId] = {
pendingExtendedLegendData[accId] = {
user: (scrambleNames && matchUser)
? scramble(matchUser)
: (matchUser ? matchUser : '-'),
@ -120,6 +122,7 @@
}
// Theoretically extendable for hwthreadIDs
}
return pendingExtendedLegendData;
}
</script>