mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2025-07-01 03:03:50 +02:00
Migrate nodeList subcomponents
This commit is contained in:
parent
db5f6c7540
commit
e94b250541
@ -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}}>
|
||||
|
@ -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)
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user