ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2025-07-01 11:13:50 +02:00
Code Issues Packages Releases Activity

Merge branch 'migrate_svelte5' into dev

Browse Source
This commit is contained in:
Jan Eitzinger 2025-06-24 06:53:18 +02:00
commit e2e67e3977
91 changed files with 3512 additions and 3188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
internal/graph/schema.resolvers.go
View File

@ -31,7 +31,8 @@ func (r *clusterResolver) Partitions(ctx context.Context, obj *schema.Cluster) (
// StartTime is the resolver for the startTime field.
func (r *jobResolver) StartTime(ctx context.Context, obj *schema.Job) (*time.Time, error) {
panic(fmt.Errorf("not implemented: StartTime - startTime"))
timestamp := time.Unix(obj.StartTime, 0)
return &timestamp, nil
}
// Tags is the resolver for the tags field.

2
internal/metricdata/cc-metric-store.go
View File

@ -850,7 +850,7 @@ func (ccms *CCMetricStore) LoadNodeListData(
if len(nodes) > page.ItemsPerPage {
start := (page.Page - 1) * page.ItemsPerPage
end := start + page.ItemsPerPage
if end > len(nodes) {
if end >= len(nodes) {
end = len(nodes)
hasNextPage = false
} else {

2
internal/metricdata/prometheus.go
View File

@ -539,7 +539,7 @@ func (pdb *PrometheusDataRepository) LoadNodeListData(
if len(nodes) > page.ItemsPerPage {
start := (page.Page - 1) * page.ItemsPerPage
end := start + page.ItemsPerPage
if end > len(nodes) {
if end >= len(nodes) {
end = len(nodes)
hasNextPage = false
} else {

2
internal/routerConfig/routes.go
View File

@ -161,7 +161,7 @@ func setupNodeRoute(i InfoType, r *http.Request) InfoType {
i["hostname"] = vars["hostname"]
i["id"] = fmt.Sprintf("%s (%s)", vars["cluster"], vars["hostname"])
from, to := r.URL.Query().Get("from"), r.URL.Query().Get("to")
if from != "" || to != "" {
if from != "" && to != "" {
i["from"] = from
i["to"] = to
}

691
web/frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

27
web/frontend/package.json
View File

@ -7,25 +7,24 @@
"dev": "rollup -c -w"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^25.0.8",
"@rollup/plugin-node-resolve": "^15.3.0",
"@rollup/plugin-commonjs": "^28.0.3",
"@rollup/plugin-node-resolve": "^16.0.1",
"@rollup/plugin-terser": "^0.4.4",
"@timohausmann/quadtree-js": "^1.2.6",
"rollup": "^4.27.4",
"rollup": "^4.41.1",
"rollup-plugin-css-only": "^4.5.2",
"rollup-plugin-svelte": "^7.2.2",
"svelte": "^4.2.19"
"svelte": "^5.33.14"
},
"dependencies": {
"@rollup/plugin-replace": "^5.0.7",
"@sveltestrap/sveltestrap": "^6.2.7",
"@urql/svelte": "^4.2.2",
"chart.js": "^4.4.6",
"date-fns": "^2.30.0",
"graphql": "^16.9.0",
"mathjs": "^12.4.3",
"svelte-chartjs": "^3.1.5",
"uplot": "^1.6.31",
"wonka": "^6.3.4"
"@rollup/plugin-replace": "^6.0.2",
"@sveltestrap/sveltestrap": "^7.1.0",
"@urql/svelte": "^4.2.3",
"chart.js": "^4.4.9",
"date-fns": "^4.1.0",
"graphql": "^16.11.0",
"mathjs": "^14.5.2",
"uplot": "^1.6.32",
"wonka": "^6.3.5"
}
}

21
web/frontend/rollup.config.mjs
View File

@ -6,13 +6,20 @@ import terser from '@rollup/plugin-terser';
import css from 'rollup-plugin-css-only';
const production = !process.env.ROLLUP_WATCH;
// const production = false
const plugins = [
svelte({
compilerOptions: {
// enable run-time checks when not in production
dev: !production
// Enable run-time checks when not in production
dev: !production,
// Enable Svelte 5-specific features
hydratable: true, // If using server-side rendering
immutable: true, // Optimize updates for immutable data
// As of sveltestrap 7.1.0, filtered warnings would appear for imported sveltestrap components
warningFilter: (warning) => (
warning.code !== 'element_invalid_self_closing_tag' &&
warning.code !== 'a11y_interactive_supports_focus'
)
}
}),
@ -23,7 +30,7 @@ const plugins = [
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: ['svelte']
dedupe: ['svelte', '@sveltejs/kit'] // Ensure deduplication for Svelte 5
}),
commonjs(),
@ -32,8 +39,10 @@ const plugins = [
production && terser(),
replace({
"process.env.NODE_ENV": JSON.stringify("development"),
preventAssignment: true
preventAssignment: true,
values: {
"process.env.NODE_ENV": JSON.stringify(production ? "production" : "development"),
}
})
];

125
web/frontend/src/Analysis.root.svelte
View File

@ -37,14 +37,12 @@
import ScatterPlot from "./generic/plots/Scatter.svelte";
import RooflineHeatmap from "./generic/plots/RooflineHeatmap.svelte";
const { query: initq } = init();
export let filterPresets;
/* Svelte 5 Props */
let { filterPresets } = $props();
// By default, look at the jobs of the last 6 hours:
if (filterPresets?.startTime == null) {
if (filterPresets == null) filterPresets = {};
let now = new Date(Date.now());
let hourAgo = new Date(now);
hourAgo.setHours(hourAgo.getHours() - 6);
@ -54,27 +52,10 @@
};
}
let cluster;
let filterComponent; // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
let jobFilters = [];
let rooflineMaxY;
let colWidth1, colWidth2;
let numBins = 50;
let maxY = -1;
const initialized = getContext("initialized");
const globalMetrics = getContext("globalMetrics");
/* Const Init */
const { query: initq } = init();
const client = getContextClient();
const ccconfig = getContext("cc-config");
let metricsInHistograms = ccconfig.analysis_view_histogramMetrics,
metricsInScatterplots = ccconfig.analysis_view_scatterPlotMetrics;
$: metrics = [
...new Set([...metricsInHistograms, ...metricsInScatterplots.flat()]),
];
$: clusterName = cluster?.name ? cluster.name : cluster;
const sortOptions = [
{ key: "totalWalltime", label: "Walltime" },
{ key: "totalNodeHours", label: "Node Hours" },
@ -86,7 +67,22 @@
{ key: "project", label: "Project ID" },
];
let sortSelection =
/* Var Init */
let metricUnits = {};
let metricScopes = {};
let numBins = 50;
/* State Init */
let filterComponent = $state(); // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
let cluster = $state(filterPresets?.cluster);
let rooflineMaxY = $state(0);
let maxY = $state(-1);
let colWidth1 = $state(0);
let colWidth2 = $state(0);
let jobFilters = $state([]);
let metricsInHistograms = $state(ccconfig.analysis_view_histogramMetrics)
let metricsInScatterplots = $state(ccconfig.analysis_view_scatterPlotMetrics)
let sortSelection = $state(
sortOptions.find(
(option) =>
option.key ==
@ -94,8 +90,9 @@
) ||
sortOptions.find(
(option) => option.key == ccconfig.analysis_view_selectedTopCategory,
)
);
let groupSelection =
let groupSelection = $state(
groupOptions.find(
(option) =>
option.key ==
@ -103,8 +100,10 @@
) ||
groupOptions.find(
(option) => option.key == ccconfig.analysis_view_selectedTopEntity,
)
);
/* Init Function */
getContext("on-init")(({ data }) => {
if (data != null) {
cluster = data.clusters.find((c) => c.name == filterPresets.cluster);
@ -121,9 +120,15 @@
}
});
const client = getContextClient();
/* Derived Vars */
const clusterName = $derived(cluster?.name ? cluster.name : cluster);
const availableMetrics = $derived(loadAvailable($initq?.data?.globalMetrics, clusterName));
const metrics = $derived(
[...new Set([...metricsInHistograms, ...metricsInScatterplots.flat()])]
);
$: statsQuery = queryStore({
let statsQuery = $derived(
queryStore({
client: client,
query: gql`
query ($jobFilters: [JobFilter!]!) {
@ -146,9 +151,11 @@
}
`,
variables: { jobFilters },
});
})
);
$: topQuery = queryStore({
let topQuery = $derived(
queryStore({
client: client,
query: gql`
query (
@ -178,10 +185,12 @@
sortBy: sortSelection.key.toUpperCase(),
groupBy: groupSelection.key.toUpperCase(),
},
});
})
);
// Note: Different footprints than those saved in DB per Job -> Caused by Legacy Naming
$: footprintsQuery = queryStore({
let footprintsQuery = $derived(
queryStore({
client: client,
query: gql`
query ($jobFilters: [JobFilter!]!, $metrics: [String!]!) {
@ -199,9 +208,11 @@
}
`,
variables: { jobFilters, metrics },
});
})
);
$: rooflineQuery = queryStore({
let rooflineQuery = $derived(
queryStore({
client: client,
query: gql`
query (
@ -233,8 +244,21 @@
maxX: 1000,
maxY,
},
})
);
/* Reactive Effects */
$effect(() => {
loadUnitsAndScopes(availableMetrics.length, availableMetrics);
});
$effect(() => {
updateEntityConfiguration(groupSelection.key);
});
$effect(() => {
updateCategoryConfiguration(sortSelection.key);
});
/* Functions */
const updateConfigurationMutation = ({ name, value }) => {
return mutationStore({
client: client,
@ -287,22 +311,26 @@
}
}
let availableMetrics = [];
let metricUnits = {};
let metricScopes = {};
function loadMetrics(isInitialized) {
if (!isInitialized) return
availableMetrics = [...globalMetrics.filter((gm) => gm?.availability.find((av) => av.cluster == cluster.name))]
for (let sm of availableMetrics) {
metricUnits[sm.name] = (sm?.unit?.prefix ? sm.unit.prefix : "") + (sm?.unit?.base ? sm.unit.base : "")
metricScopes[sm.name] = sm?.scope
function loadAvailable(globals, name) {
const availableMetrics = new Set();
if (globals && globals.length > 0) {
for (let gm of globals) {
if (gm.availability.find((av) => av.cluster == name)) {
availableMetrics.add({name: gm.name, scope: gm.scope, unit: gm.unit});
};
}
}
return [...availableMetrics]
};
function loadUnitsAndScopes(length, available) {
for (let am of available) {
metricUnits[am.name] = (am?.unit?.prefix ? am.unit.prefix : "") + (am?.unit?.base ? am.unit.base : "")
metricScopes[am.name] = am?.scope
}
}
$: loadMetrics($initialized)
$: updateEntityConfiguration(groupSelection.key);
$: updateCategoryConfiguration(sortSelection.key);
/* On Mount */
onMount(() => filterComponent.updateFilters());
</script>
@ -329,7 +357,7 @@
{filterPresets}
disableClusterSelection={true}
startTimeQuickSelect={true}
on:update-filters={({ detail }) => {
applyFilters={(detail) => {
jobFilters = detail.filters;
}}
/>
@ -392,6 +420,7 @@
<Card body color="danger">{$topQuery.error.message}</Card>
{:else}
<Pie
canvasId={`pie-${groupSelection.key}`}
size={colWidth1}
sliceLabel={sortSelection.label}
quantities={$topQuery.data.topList.map(

17
web/frontend/src/Config.root.svelte
View File

@ -14,15 +14,18 @@
import SupportSettings from "./config/SupportSettings.svelte";
import AdminSettings from "./config/AdminSettings.svelte";
export let isAdmin;
export let isSupport;
export let isApi;
export let username;
export let ncontent;
/* Svelte 5 Props */
let {
isAdmin,
isSupport,
isApi,
username,
ncontent,
} = $props();
</script>
{#if isAdmin}
<Card style="margin-bottom: 1.5em;">
<Card style="margin-bottom: 1.5rem;">
<CardHeader>
<CardTitle class="mb-1">Admin Options</CardTitle>
</CardHeader>
@ -31,7 +34,7 @@
{/if}
{#if isSupport || isAdmin}
<Card style="margin-bottom: 1.5em;">
<Card style="margin-bottom: 1.5rem;">
<CardHeader>
<CardTitle class="mb-1">Support Options</CardTitle>
</CardHeader>

40
web/frontend/src/Header.svelte
View File

@ -5,6 +5,7 @@
- `username String`: Empty string if auth. is disabled, otherwise the username as string
- `authlevel Number`: The current users authentication level
- `clusters [String]`: List of cluster names
- `subClusters [String]`: List of subCluster names
- `roles [Number]`: Enum containing available roles
-->
@ -23,24 +24,21 @@
import NavbarLinks from "./header/NavbarLinks.svelte";
import NavbarTools from "./header/NavbarTools.svelte";
export let username;
export let authlevel;
export let clusters;
export let subClusters;
export let roles;
let isOpen = false;
let screenSize;
/* Svelte 5 Props */
let { username, authlevel, clusters, subClusters, roles } = $props();
/* Const Init */
const jobsTitle = new Map();
jobsTitle.set(2, "Job Search");
jobsTitle.set(3, "Managed Jobs");
jobsTitle.set(4, "Jobs");
jobsTitle.set(5, "Jobs");
const usersTitle = new Map();
usersTitle.set(3, "Managed Users");
usersTitle.set(4, "Users");
usersTitle.set(5, "Users");
const projectsTitle = new Map();
projectsTitle.set(3, "Managed Projects");
projectsTitle.set(4, "Projects");
@ -120,29 +118,41 @@
menu: "Info",
},
];
/* State Init */
let isOpen = $state(false);
let screenSize = $state(0);
/* Derived Vars */
let showMax = $derived(screenSize >= 1500);
let showMid = $derived(screenSize < 1500 && screenSize >= 1300);
let showSml = $derived(screenSize < 1300 && screenSize >= 768);
let showBrg = $derived(screenSize < 768);
</script>
<svelte:window bind:innerWidth={screenSize} />
<Navbar color="light" light expand="md" fixed="top">
<NavbarBrand href="/">
<img alt="ClusterCockpit Logo" src="/img/logo.png" height="25rem" />
</NavbarBrand>
<NavbarToggler on:click={() => (isOpen = !isOpen)} />
<NavbarToggler onclick={() => (isOpen = !isOpen)} />
<Collapse
style="justify-content: space-between"
{isOpen}
navbar
expand="md"
on:update={({ detail }) => (isOpen = detail.isOpen)}
onupdate={({ detail }) => (isOpen = detail.isOpen)}
>
<Nav navbar>
{#if screenSize > 1500 || screenSize < 768}
{#if showMax || showBrg}
<NavbarLinks
{clusters}
{subClusters}
links={views.filter((item) => item.requiredRole <= authlevel)}
/>
{:else if screenSize > 1300}
{:else if showMid}
<NavbarLinks
{clusters}
{subClusters}
@ -169,7 +179,8 @@
</DropdownMenu>
</Dropdown>
{/if}
{:else}
{:else if showSml}
<NavbarLinks
{clusters}
{subClusters}
@ -228,6 +239,9 @@
</DropdownMenu>
</Dropdown>
{/if}
{:else}
<span>Error: Unknown Window Size!</span>
{/if}
</Nav>
<NavbarTools {username} {authlevel} {roles} {screenSize} />

16
web/frontend/src/Job.root.svelte
View File

@ -56,8 +56,8 @@
selectedScopes = [],
plots = {};
let availableMetrics = new Set(),
missingMetrics = [],
let totalMetrics = 0;
let missingMetrics = [],
missingHosts = [],
somethingMissing = false;
@ -294,7 +294,7 @@
{#if $initq?.data}
<Col xs="auto">
<Button outline on:click={() => (isMetricsSelectionOpen = true)} color="primary">
Select Metrics (Selected {selectedMetrics.length} of {availableMetrics.size} available)
Select Metrics (Selected {selectedMetrics.length} of {totalMetrics} available)
</Button>
</Col>
{/if}
@ -428,12 +428,16 @@
{#if $initq?.data}
<MetricSelection
bind:isOpen={isMetricsSelectionOpen}
bind:totalMetrics
presetMetrics={selectedMetrics}
cluster={$initq.data.job.cluster}
subCluster={$initq.data.job.subCluster}
configName="job_view_selectedMetrics"
bind:metrics={selectedMetrics}
bind:isOpen={isMetricsSelectionOpen}
bind:allMetrics={availableMetrics}
preInitialized
applyMetrics={(newMetrics) =>
selectedMetrics = [...newMetrics]
}
/>
{/if}

120
web/frontend/src/Jobs.root.svelte
View File

@ -8,7 +8,7 @@
-->
<script>
import { onMount, getContext } from "svelte";
import { untrack, onMount, getContext } from "svelte";
import {
Row,
Col,
@ -27,43 +27,59 @@
import Sorting from "./generic/select/SortSelection.svelte";
import MetricSelection from "./generic/select/MetricSelection.svelte";
/* Svelte 5 Props */
let { filterPresets, authlevel, roles } = $props();
/* Const Init */
const { query: initq } = init();
const ccconfig = getContext("cc-config");
const presetProject = filterPresets?.project ? filterPresets.project : ""
export let filterPresets = {};
export let authlevel;
export let roles;
let filterComponent; // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
let filterBuffer = [];
let selectedJobs = [];
let jobList,
jobCompare,
matchedListJobs,
matchedCompareJobs = null;
let sorting = { field: "startTime", type: "col", order: "DESC" },
isSortingOpen = false,
isMetricsSelectionOpen = false;
let metrics = filterPresets.cluster
/* State Init */
let filterComponent = $state(); // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
let selectedJobs = $state([]);
let filterBuffer = $state([]);
let jobList = $state(null);
let jobCompare = $state(null);
let matchedListJobs = $state(0);
let matchedCompareJobs = $state(0);
let isSortingOpen = $state(false);
let showCompare = $state(false);
let isMetricsSelectionOpen = $state(false);
let sorting = $state({ field: "startTime", type: "col", order: "DESC" });
let selectedCluster = $state(filterPresets?.cluster ? filterPresets.cluster : null);
let metrics = $state(filterPresets.cluster
? ccconfig[`plot_list_selectedMetrics:${filterPresets.cluster}`] ||
ccconfig.plot_list_selectedMetrics
: ccconfig.plot_list_selectedMetrics;
let showFootprint = filterPresets.cluster
: ccconfig.plot_list_selectedMetrics
);
let showFootprint = $state(filterPresets.cluster
? !!ccconfig[`plot_list_showFootprint:${filterPresets.cluster}`]
: !!ccconfig.plot_list_showFootprint;
let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null;
let presetProject = filterPresets?.project ? filterPresets.project : ""
let showCompare = false;
: !!ccconfig.plot_list_showFootprint
);
/* Functions */
function resetJobSelection() {
if (filterComponent && selectedJobs.length === 0) {
filterComponent.updateFilters({ dbId: [] });
};
};
/* Reactive Effects */
$effect(() => {
// Reactive : Trigger Effect
selectedJobs.length
untrack(() => {
// Unreactive : Apply Reset w/o starting infinite loop
resetJobSelection()
});
});
/* On Mount */
// The filterPresets are handled by the Filters component,
// so we need to wait for it to be ready before we can start a query.
// This is also why JobList component starts out with a paused query.
onMount(() => filterComponent.updateFilters());
$: if (filterComponent && selectedJobs.length == 0) {
filterComponent.updateFilters({dbId: []})
}
</script>
<!-- ROW1: Status-->
@ -85,25 +101,25 @@
<Row cols={{ xs: 1, md: 2, lg: 5}} class="mb-3">
<Col lg="2" class="mb-2 mb-lg-0">
<ButtonGroup class="w-100">
<Button outline color="primary" on:click={() => (isSortingOpen = true)} disabled={showCompare}>
<Button outline color="primary" onclick={() => (isSortingOpen = true)} disabled={showCompare}>
<Icon name="sort-up" /> Sorting
</Button>
<Button
outline
color="primary"
on:click={() => (isMetricsSelectionOpen = true)}
onclick={() => (isMetricsSelectionOpen = true)}
>
<Icon name="graph-up" /> Metrics
</Button>
</ButtonGroup>
</Col>
<Col lg="4" class="mb-1 mb-lg-0">
<Col lg="5" class="mb-1 mb-lg-0">
<Filters
showFilter={!showCompare}
{filterPresets}
matchedJobs={showCompare? matchedCompareJobs: matchedListJobs}
bind:this={filterComponent}
on:update-filters={({ detail }) => {
{filterPresets}
showFilter={!showCompare}
matchedJobs={showCompare? matchedCompareJobs: matchedListJobs}
applyFilters={(detail) => {
selectedCluster = detail.filters[0]?.cluster
? detail.filters[0].cluster.eq
: null;
@ -122,29 +138,31 @@
{presetProject}
bind:authlevel
bind:roles
on:set-filter={({ detail }) => filterComponent.updateFilters(detail)}
setFilter={(filter) => filterComponent.updateFilters(filter)}
/>
{/if}
</Col>
<Col lg="2" class="mb-1 mb-lg-0">
<Col lg="3" class="mb-1 mb-lg-0 d-inline-flex align-items-start justify-content-end ">
{#if !showCompare}
<Refresher on:refresh={() => {
<Refresher presetClass="w-auto" onRefresh={() => {
jobList.refreshJobs()
jobList.refreshAllMetrics()
}} />
{/if}
</Col>
<Col lg="2" class="mb-2 mb-lg-0">
<ButtonGroup class="w-100">
<Button color="primary" disabled={matchedListJobs >= 500 && !(selectedJobs.length != 0)} on:click={() => {
<div class="mx-1"></div>
<ButtonGroup class="w-50">
<Button color="primary" disabled={(matchedListJobs >= 500 && !(selectedJobs.length != 0)) || $initq.fetching} onclick={() => {
if (selectedJobs.length != 0) filterComponent.updateFilters({dbId: selectedJobs}, true)
showCompare = !showCompare
}} >
{showCompare ? 'Return to List' :
'Compare Jobs' + (selectedJobs.length != 0 ? ` (${selectedJobs.length} selected)` : matchedListJobs >= 500 ? ` (Too Many)` : ``)}
matchedListJobs >= 500 && selectedJobs.length == 0
? 'Compare Disabled'
: 'Compare' + (selectedJobs.length != 0 ? ` ${selectedJobs.length} ` : ' ') + 'Jobs'
}
</Button>
{#if !showCompare && selectedJobs.length != 0}
<Button color="warning" on:click={() => {
<Button class="w-auto" color="warning" onclick={() => {
selectedJobs = [] // Only empty array, filters handled by reactive reset
}}>
Clear
@ -178,13 +196,21 @@
</Col>
</Row>
<Sorting bind:sorting bind:isOpen={isSortingOpen}/>
<Sorting
bind:isOpen={isSortingOpen}
presetSorting={sorting}
applySorting={(newSort) =>
sorting = {...newSort}
}/>
<MetricSelection
bind:cluster={selectedCluster}
configName="plot_list_selectedMetrics"
bind:metrics
bind:isOpen={isMetricsSelectionOpen}
bind:showFootprint
presetMetrics={metrics}
cluster={selectedCluster}
configName="plot_list_selectedMetrics"
footprintSelect
applyMetrics={(newMetrics) =>
metrics = [...newMetrics]
}
/>

114
web/frontend/src/List.root.svelte
View File

@ -31,10 +31,8 @@
} from "./generic/utils.js";
import Filters from "./generic/Filters.svelte";
const {} = init();
export let type;
export let filterPresets;
/* Svelte 5 Props */
let { type, filterPresets } = $props();
// By default, look at the jobs of the last 30 days:
if (filterPresets?.startTime == null) {
@ -51,13 +49,19 @@
"Invalid list type provided!",
);
let filterComponent; // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
let jobFilters = [];
let nameFilter = "";
let sorting = { field: "totalJobs", direction: "down" };
/* Const Init */
const {} = init();
const client = getContextClient();
$: stats = queryStore({
/* State Init*/
let filterComponent = $state(); // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
let jobFilters = $state([]);
let nameFilter = $state("");
let sorting = $state({ field: "totalJobs", direction: "down" });
/* Derived Vars */
let stats = $derived(
queryStore({
client: client,
query: gql`
query($jobFilters: [JobFilter!]!) {
@ -71,30 +75,38 @@
}
}`,
variables: { jobFilters },
});
})
);
function changeSorting(event, field) {
let target = event.target;
while (target.tagName != "BUTTON") target = target.parentElement;
let direction = target.children[0].className.includes("up") ? "down" : "up";
target.children[0].className = `bi-sort-numeric-${direction}`;
sorting = { field, direction };
/* Functions */
function changeSorting(field) {
sorting = { field, direction: sorting?.direction == "down" ? "up" : "down" };
}
function sort(stats, sorting, nameFilter) {
const cmp =
sorting.field == "id"
? sorting.direction == "up"
? (a, b) => a.id < b.id
: (a, b) => a.id > b.id
: sorting.direction == "up"
const idCmp = sorting.direction == "up"
? (a, b) => b.id.localeCompare(a.id)
: (a, b) => a.id.localeCompare(b.id)
// Force empty or undefined strings to the end of the list
const nameCmp = sorting.direction == "up"
? (a, b) => !a?.name ? 1 : (!b?.name ? -1 : (b.name.localeCompare(a.name)))
: (a, b) => !a?.name ? 1 : (!b?.name ? -1 : (a.name.localeCompare(b.name)))
const intCmp = sorting.direction == "up"
? (a, b) => a[sorting.field] - b[sorting.field]
: (a, b) => b[sorting.field] - a[sorting.field];
return stats.filter((u) => u.id.includes(nameFilter)).sort(cmp);
if (sorting.field == "id") {
return stats.filter((u) => u.id.includes(nameFilter)).sort(idCmp)
} else if (sorting.field == "name") {
return stats.filter((u) => u.id.includes(nameFilter)).sort(nameCmp)
} else {
return stats.filter((u) => u.id.includes(nameFilter)).sort(intCmp)
}
}
/* On Mount */
onMount(() => filterComponent.updateFilters());
</script>
@ -119,7 +131,7 @@
{filterPresets}
startTimeQuickSelect={true}
menuText="Only {type.toLowerCase()}s with jobs that match the filters will show up"
on:update-filters={({ detail }) => {
applyFilters={(detail) => {
jobFilters = detail.filters;
}}
/>
@ -137,9 +149,14 @@
<Button
color={sorting.field == "id" ? "primary" : "light"}
size="sm"
on:click={(e) => changeSorting(e, "id")}
onclick={() => changeSorting("id")}
>
<Icon name="sort-numeric-down" />
{#if sorting?.field == "id"}
<!-- Note on Icon-Name: Arrow-indicator always down, only alpha-indicator switches -->
<Icon name={`sort-alpha-${sorting?.direction == 'down' ? 'down' : 'down-alt'}`} />
{:else}
<Icon name="three-dots-vertical" />
{/if}
</Button>
</th>
{#if type == "USER"}
@ -148,9 +165,13 @@
<Button
color={sorting.field == "name" ? "primary" : "light"}
size="sm"
on:click={(e) => changeSorting(e, "name")}
onclick={() => changeSorting("name")}
>
<Icon name="sort-numeric-down" />
{#if sorting?.field == "name"}
<Icon name={`sort-alpha-${sorting?.direction == 'down' ? 'down' : 'down-alt'}`} />
{:else}
<Icon name="three-dots-vertical" />
{/if}
</Button>
</th>
{/if}
@ -159,9 +180,14 @@
<Button
color={sorting.field == "totalJobs" ? "primary" : "light"}
size="sm"
on:click={(e) => changeSorting(e, "totalJobs")}
onclick={() => changeSorting("totalJobs")}
>
<Icon name="sort-numeric-down" />
{#if sorting?.field == "totalJobs"}
<!-- Note on Icon-Name: Arrow-indicator always down, only numeric-indicator switches -->
<Icon name={`sort-numeric-${sorting?.direction == 'down' ? 'down-alt' : 'down'}`} />
{:else}
<Icon name="three-dots-vertical" />
{/if}
</Button>
</th>
<th scope="col">
@ -169,9 +195,13 @@
<Button
color={sorting.field == "totalWalltime" ? "primary" : "light"}
size="sm"
on:click={(e) => changeSorting(e, "totalWalltime")}
onclick={() => changeSorting("totalWalltime")}
>
<Icon name="sort-numeric-down" />
{#if sorting?.field == "totalWalltime"}
<Icon name={`sort-numeric-${sorting?.direction == 'down' ? 'down-alt' : 'down'}`} />
{:else}
<Icon name="three-dots-vertical" />
{/if}
</Button>
</th>
<th scope="col">
@ -179,9 +209,13 @@
<Button
color={sorting.field == "totalCoreHours" ? "primary" : "light"}
size="sm"
on:click={(e) => changeSorting(e, "totalCoreHours")}
onclick={() => changeSorting("totalCoreHours")}
>
<Icon name="sort-numeric-down" />
{#if sorting?.field == "totalCoreHours"}
<Icon name={`sort-numeric-${sorting?.direction == 'down' ? 'down-alt' : 'down'}`} />
{:else}
<Icon name="three-dots-vertical" />
{/if}
</Button>
</th>
<th scope="col">
@ -189,9 +223,13 @@
<Button
color={sorting.field == "totalAccHours" ? "primary" : "light"}
size="sm"
on:click={(e) => changeSorting(e, "totalAccHours")}
onclick={() => changeSorting("totalAccHours")}
>
<Icon name="sort-numeric-down" />
{#if sorting?.field == "totalAccHours"}
<Icon name={`sort-numeric-${sorting?.direction == 'down' ? 'down-alt' : 'down'}`} />
{:else}
<Icon name="three-dots-vertical" />
{/if}
</Button>
</th>
</tr>

93
web/frontend/src/Node.root.svelte
View File

@ -9,7 +9,9 @@
-->
<script>
import { getContext } from "svelte";
import {
getContext,
} from "svelte";
import {
Row,
Col,
@ -34,23 +36,28 @@
import TimeSelection from "./generic/select/TimeSelection.svelte";
import Refresher from "./generic/helper/Refresher.svelte";
export let cluster;
export let hostname;
export let from = null;
export let to = null;
/* Svelte 5 Props */
let {
cluster,
hostname,
presetFrom = null,
presetTo = null,
} = $props();
/* Const Init */
const { query: initq } = init();
if (from == null || to == null) {
to = new Date(Date.now());
from = new Date(to.getTime());
from.setHours(from.getHours() - 4);
}
const initialized = getContext("initialized")
const globalMetrics = getContext("globalMetrics")
const ccconfig = getContext("cc-config");
const clusters = getContext("clusters");
const nowEpoch = Date.now();
const paging = { itemsPerPage: 50, page: 1 };
const sorting = { field: "startTime", type: "col", order: "DESC" };
const filter = [
{ cluster: { eq: cluster } },
{ node: { contains: hostname } },
{ state: ["running"] },
];
const client = getContextClient();
const nodeMetricsQuery = gql`
query ($cluster: String!, $nodes: [String!], $from: Time!, $to: Time!) {
@ -79,27 +86,6 @@
}
}
`;
$: nodeMetricsData = queryStore({
client: client,
query: nodeMetricsQuery,
variables: {
cluster: cluster,
nodes: [hostname],
from: from.toISOString(),
to: to.toISOString(),
},
});
const paging = { itemsPerPage: 50, page: 1 };
const sorting = { field: "startTime", type: "col", order: "DESC" };
const filter = [
{ cluster: { eq: cluster } },
{ node: { contains: hostname } },
{ state: ["running"] },
];
const nodeJobsQuery = gql`
query (
$filter: [JobFilter!]!
@ -112,13 +98,37 @@
}
`;
$: nodeJobsData = queryStore({
/* State Init */
let from = $state(presetFrom ? presetFrom : new Date(nowEpoch - (4 * 3600 * 1000)));
let to = $state(presetTo ? presetTo : new Date(nowEpoch));
let systemUnits = $state({});
/* Derived */
const nodeMetricsData = $derived(queryStore({
client: client,
query: nodeMetricsQuery,
variables: {
cluster: cluster,
nodes: [hostname],
from: from?.toISOString(),
to: to?.toISOString(),
},
})
);
const nodeJobsData = $derived(queryStore({
client: client,
query: nodeJobsQuery,
variables: { paging, sorting, filter },
})
);
/* Effect */
$effect(() => {
loadUnits($initialized);
});
let systemUnits = {};
/* Functions */
function loadUnits(isInitialized) {
if (!isInitialized) return
const systemMetrics = [...globalMetrics.filter((gm) => gm?.availability.find((av) => av.cluster == cluster))]
@ -126,8 +136,6 @@
systemUnits[sm.name] = (sm?.unit?.prefix ? sm.unit.prefix : "") + (sm?.unit?.base ? sm.unit.base : "")
}
}
$: loadUnits($initialized)
</script>
<Row cols={{ xs: 2, lg: 4 }}>
@ -146,7 +154,14 @@
</Col>
<!-- Time Col -->
<Col>
<TimeSelection bind:from bind:to />
<TimeSelection
presetFrom={from}
presetTo={to}
applyTime={(newFrom, newTo) => {
from = newFrom;
to = newTo;
}}
/>
</Col>
<!-- Concurrent Col -->
<Col class="mt-2 mt-lg-0">
@ -172,7 +187,7 @@
<!-- Refresh Col-->
<Col class="mt-2 mt-lg-0">
<Refresher
on:refresh={() => {
onRefresh={() => {
const diff = Date.now() - to;
from = new Date(from.getTime() + diff);
to = new Date(to.getTime() + diff);

139
web/frontend/src/Status.root.svelte
View File

@ -42,15 +42,14 @@
import Refresher from "./generic/helper/Refresher.svelte";
import HistogramSelection from "./generic/select/HistogramSelection.svelte";
/* Svelte 5 Props */
let { cluster } = $props();
/* Const Init */
const { query: initq } = init();
const ccconfig = getContext("cc-config");
export let cluster;
let plotWidths = [];
let colWidth;
let from = new Date(Date.now() - 5 * 60 * 1000),
to = new Date(Date.now());
const client = getContextClient();
const paging = { itemsPerPage: 10, page: 1 }; // Top 10
const topOptions = [
{ key: "totalJobs", label: "Jobs" },
{ key: "totalNodes", label: "Nodes" },
@ -58,7 +57,26 @@
{ key: "totalAccs", label: "Accelerators" },
];
let topProjectSelection =
/* State Init */
let from = $state(new Date(Date.now() - 5 * 60 * 1000));
let to = $state(new Date(Date.now()));
let isHistogramSelectionOpen = $state(false);
let colWidth = $state(0);
let plotWidths = $state([]);
// Bar Gauges
let allocatedNodes = $state({});
let flopRate = $state({});
let flopRateUnitPrefix = $state({});
let flopRateUnitBase = $state({});
let memBwRate = $state({});
let memBwRateUnitPrefix = $state({});
let memBwRateUnitBase = $state({});
let selectedHistograms = $state(cluster
? ccconfig[`user_view_histogramMetrics:${cluster}`] || ( ccconfig['user_view_histogramMetrics'] || [] )
: ccconfig['user_view_histogramMetrics'] || []);
let topProjectSelection = $state(
topOptions.find(
(option) =>
option.key ==
@ -66,8 +84,10 @@
) ||
topOptions.find(
(option) => option.key == ccconfig.status_view_selectedTopProjectCategory,
)
);
let topUserSelection =
let topUserSelection = $state(
topOptions.find(
(option) =>
option.key ==
@ -75,16 +95,12 @@
) ||
topOptions.find(
(option) => option.key == ccconfig.status_view_selectedTopUserCategory,
)
);
let isHistogramSelectionOpen = false;
$: selectedHistograms = cluster
? ccconfig[`user_view_histogramMetrics:${cluster}`] || ( ccconfig['user_view_histogramMetrics'] || [] )
: ccconfig['user_view_histogramMetrics'] || [];
const client = getContextClient();
/* Derived */
// Note: nodeMetrics are requested on configured $timestep resolution
$: mainQuery = queryStore({
const mainQuery = $derived(queryStore({
client: client,
query: gql`
query (
@ -162,10 +178,9 @@
filter: [{ state: ["running"] }, { cluster: { eq: cluster } }],
selectedHistograms: selectedHistograms,
},
});
}));
const paging = { itemsPerPage: 10, page: 1 }; // Top 10
$: topUserQuery = queryStore({
const topUserQuery = $derived(queryStore({
client: client,
query: gql`
query (
@ -193,9 +208,9 @@
paging,
sortBy: topUserSelection.key.toUpperCase(),
},
});
}));
$: topProjectQuery = queryStore({
const topProjectQuery = $derived(queryStore({
client: client,
query: gql`
query (
@ -222,31 +237,11 @@
paging,
sortBy: topProjectSelection.key.toUpperCase(),
},
});
}));
const sumUp = (data, subcluster, metric) =>
data.reduce(
(sum, node) =>
node.subCluster == subcluster
? sum +
(node.metrics
.find((m) => m.name == metric)
?.metric.series.reduce(
(sum, series) => sum + series.data[series.data.length - 1],
0,
) || 0)
: sum,
0,
);
let allocatedNodes = {},
flopRate = {},
flopRateUnitPrefix = {},
flopRateUnitBase = {},
memBwRate = {},
memBwRateUnitPrefix = {},
memBwRateUnitBase = {};
$: if ($initq.data && $mainQuery.data) {
/* Effects */
$effect(() => {
if ($initq.data && $mainQuery.data) {
let subClusters = $initq.data.clusters.find(
(c) => c.name == cluster,
).subClusters;
@ -271,6 +266,31 @@
memBwRateUnitBase[subCluster.name] = subCluster.memoryBandwidth.unit.base;
}
}
});
$effect(() => {
updateTopUserConfiguration(topUserSelection.key);
});
$effect(() => {
updateTopProjectConfiguration(topProjectSelection.key);
});
/* Const Functions */
const sumUp = (data, subcluster, metric) =>
data.reduce(
(sum, node) =>
node.subCluster == subcluster
? sum +
(node.metrics
.find((m) => m.name == metric)
?.metric.series.reduce(
(sum, series) => sum + series.data[series.data.length - 1],
0,
) || 0)
: sum,
0,
);
const updateConfigurationMutation = ({ name, value }) => {
return mutationStore({
@ -284,20 +304,17 @@
});
};
/* Functions */
function updateTopUserConfiguration(select) {
if (ccconfig[`status_view_selectedTopUserCategory:${cluster}`] != select) {
updateConfigurationMutation({
name: `status_view_selectedTopUserCategory:${cluster}`,
value: JSON.stringify(select),
}).subscribe((res) => {
if (res.fetching === false && !res.error) {
// console.log(`status_view_selectedTopUserCategory:${cluster}` + ' -> Updated!')
} else if (res.fetching === false && res.error) {
if (res.fetching === false && res.error) {
throw res.error;
}
});
} else {
// console.log('No Mutation Required: Top User')
}
}
@ -309,19 +326,12 @@
name: `status_view_selectedTopProjectCategory:${cluster}`,
value: JSON.stringify(select),
}).subscribe((res) => {
if (res.fetching === false && !res.error) {
// console.log(`status_view_selectedTopProjectCategory:${cluster}` + ' -> Updated!')
} else if (res.fetching === false && res.error) {
if (res.fetching === false && res.error) {
throw res.error;
}
});
} else {
// console.log('No Mutation Required: Top Project')
}
}
$: updateTopUserConfiguration(topUserSelection.key);
$: updateTopProjectConfiguration(topProjectSelection.key);
</script>
<!-- Loading indicator & Refresh -->
@ -334,7 +344,7 @@
<Button
outline
color="secondary"
on:click={() => (isHistogramSelectionOpen = true)}
onclick={() => (isHistogramSelectionOpen = true)}
>
<Icon name="bar-chart-line" /> Select Histograms
</Button>
@ -342,7 +352,7 @@
<Col class="mt-2 mt-md-0">
<Refresher
initially={120}
on:refresh={() => {
onRefresh={() => {
from = new Date(Date.now() - 5 * 60 * 1000);
to = new Date(Date.now());
}}
@ -483,6 +493,7 @@
<Card body color="danger">{$topUserQuery.error.message}</Card>
{:else}
<Pie
canvasId="hpcpie-users"
size={colWidth}
sliceLabel={topUserSelection.label}
quantities={$topUserQuery.data.topUser.map(
@ -550,6 +561,7 @@
<Card body color="danger">{$topProjectQuery.error.message}</Card>
{:else}
<Pie
canvasId="hpcpie-projects"
size={colWidth}
sliceLabel={topProjectSelection.label}
quantities={$topProjectQuery.data.topProjects.map(
@ -685,7 +697,10 @@
{/if}
<HistogramSelection
bind:cluster
bind:selectedHistograms
{cluster}
bind:isOpen={isHistogramSelectionOpen}
presetSelectedHistograms={selectedHistograms}
applyChange={(newSelection) => {
selectedHistograms = [...newSelection];
}}
/>

156
web/frontend/src/Systems.root.svelte
View File

@ -28,72 +28,74 @@
import TimeSelection from "./generic/select/TimeSelection.svelte";
import Refresher from "./generic/helper/Refresher.svelte";
export let displayType;
export let cluster = null;
export let subCluster = null;
export let from = null;
export let to = null;
const { query: initq } = init();
console.assert(
displayType == "OVERVIEW" || displayType == "LIST",
"Invalid nodes displayType provided!",
);
if (from == null || to == null) {
to = new Date(Date.now());
from = new Date(to.getTime());
from.setHours(from.getHours() - 12);
}
const initialized = getContext("initialized");
const ccconfig = getContext("cc-config");
const globalMetrics = getContext("globalMetrics");
const displayNodeOverview = (displayType === 'OVERVIEW')
const resampleConfig = getContext("resampling") || null;
const resampleResolutions = resampleConfig ? [...resampleConfig.resolutions] : [];
const resampleDefault = resampleConfig ? Math.max(...resampleConfig.resolutions) : 0;
let selectedResolution = resampleConfig ? resampleDefault : 0;
let hostnameFilter = "";
let pendingHostnameFilter = "";
let selectedMetric = ccconfig.system_view_selectedMetric || "";
let selectedMetrics = (
ccconfig[`node_list_selectedMetrics:${cluster}:${subCluster}`] ||
ccconfig[`node_list_selectedMetrics:${cluster}`]
) || [ccconfig.system_view_selectedMetric];
let isMetricsSelectionOpen = false;
/*
Note 1: "Sorting" as use-case ignored for now, probably default to alphanumerical on hostnames of cluster (handled in frontend at the moment)
Note 2: Add Idle State Filter (== No allocated Jobs) [Frontend?] : Cannot be handled by CCMS, requires secondary job query and refiltering of visible nodes
*/
let systemMetrics = [];
let systemUnits = {};
/* Scelte 5 Props */
let {
displayType,
cluster = null,
subCluster = null,
fromPreset = null,
toPreset = null,
} = $props();
function loadMetrics(isInitialized) {
if (!isInitialized) return
systemMetrics = [...globalMetrics.filter((gm) => gm?.availability.find((av) => av.cluster == cluster))]
/* Const Init */
const { query: initq } = init();
const displayNodeOverview = (displayType === 'OVERVIEW');
const ccconfig = getContext("cc-config");
const initialized = getContext("initialized");
const globalMetrics = getContext("globalMetrics");
const resampleConfig = getContext("resampling") || null;
const resampleResolutions = resampleConfig ? [...resampleConfig.resolutions] : [];
const resampleDefault = resampleConfig ? Math.max(...resampleConfig.resolutions) : 0;
const nowDate = new Date(Date.now());
/* State Init */
let to = $state(toPreset || new Date(Date.now()));
let from = $state(fromPreset || new Date(nowDate.setHours(nowDate.getHours() - 4)));
let selectedResolution = $state(resampleConfig ? resampleDefault : 0);
let hostnameFilter = $state("");
let pendingHostnameFilter = $state("");
let isMetricsSelectionOpen = $state(false);
let selectedMetric = $state(ccconfig.system_view_selectedMetric || "");
let selectedMetrics = $state((
ccconfig[`node_list_selectedMetrics:${cluster}:${subCluster}`] ||
ccconfig[`node_list_selectedMetrics:${cluster}`]
) || [ccconfig.system_view_selectedMetric]);
/* Derived States */
const systemMetrics = $derived($initialized ? [...globalMetrics.filter((gm) => gm?.availability.find((av) => av.cluster == cluster))] : []);
const presetSystemUnits = $derived(loadUnits(systemMetrics));
/* Effects */
$effect(() => {
// OnMount: Ping Var, without this, OVERVIEW metric select is empty (reason tbd)
systemMetrics
});
/* Functions */
function loadUnits(systemMetrics) {
let pendingUnits = {};
if (systemMetrics.length > 0) {
for (let sm of systemMetrics) {
systemUnits[sm.name] = (sm?.unit?.prefix ? sm.unit.prefix : "") + (sm?.unit?.base ? sm.unit.base : "")
}
if (!selectedMetric) selectedMetric = systemMetrics[0].name
}
pendingUnits[sm.name] = (sm?.unit?.prefix ? sm.unit.prefix : "") + (sm?.unit?.base ? sm.unit.base : "")
};
};
return {...pendingUnits};
};
$: loadMetrics($initialized)
$: if (displayNodeOverview) {
selectedMetrics = [selectedMetric]
}
$: { // Wait after input for some time to prevent too many requests
setTimeout(function () {
// Wait after input for some time to prevent too many requests
let timeoutId = null;
function updateHostnameFilter() {
if (timeoutId != null) clearTimeout(timeoutId);
timeoutId = setTimeout(function () {
hostnameFilter = pendingHostnameFilter;
}, 500);
}
};
</script>
<!-- ROW1: Tools-->
@ -108,7 +110,7 @@
<Button
outline
color="primary"
on:click={() => (isMetricsSelectionOpen = true)}
onclick={() => (isMetricsSelectionOpen = true)}
>
{selectedMetrics.length} selected
</Button>
@ -139,12 +141,20 @@
placeholder="Filter hostname ..."
type="text"
bind:value={pendingHostnameFilter}
oninput={updateHostnameFilter}
/>
</InputGroup>
</Col>
<!-- Range Col-->
<Col>
<TimeSelection bind:from bind:to />
<TimeSelection
presetFrom={from}
presetTo={to}
applyTime={(newFrom, newTo) => {
from = newFrom;
to = newTo;
}}
/>
</Col>
<!-- Overview Metric Col-->
{#if displayNodeOverview}
@ -153,26 +163,28 @@
<InputGroupText><Icon name="graph-up" /></InputGroupText>
<InputGroupText>Metric</InputGroupText>
<Input type="select" bind:value={selectedMetric}>
{#each systemMetrics as metric}
{#each systemMetrics as metric (metric.name)}
<option value={metric.name}
>{metric.name} {systemUnits[metric.name] ? "("+systemUnits[metric.name]+")" : ""}</option
>{metric.name} {presetSystemUnits[metric.name] ? "("+presetSystemUnits[metric.name]+")" : ""}</option
>
{:else}
<option disabled>No available options</option>
{/each}
</Input>
</InputGroup>
</Col>
{/if}
{/if}
<!-- Refresh Col-->
<Col class="mt-2 mt-lg-0">
<Refresher
on:refresh={() => {
onRefresh={() => {
const diff = Date.now() - to;
from = new Date(from.getTime() + diff);
to = new Date(to.getTime() + diff);
}}
/>
</Col>
{/if}
</Row>
<!-- ROW2: Content-->
@ -185,20 +197,22 @@
{:else}
{#if displayNodeOverview}
<!-- ROW2-1: Node Overview (Grid Included)-->
<NodeOverview {cluster} {subCluster} {ccconfig} {selectedMetrics} {from} {to} {hostnameFilter}/>
<NodeOverview {cluster} {ccconfig} {selectedMetric} {from} {to} {hostnameFilter}/>
{:else}
<!-- ROW2-2: Node List (Grid Included)-->
<NodeList {cluster} {subCluster} {ccconfig} {selectedMetrics} {selectedResolution} {hostnameFilter} {from} {to} {systemUnits}/>
<NodeList {cluster} {subCluster} {ccconfig} {selectedMetrics} {selectedResolution} {hostnameFilter} {from} {to} {presetSystemUnits}/>
{/if}
{/if}
<MetricSelection
{#if !displayNodeOverview}
<MetricSelection
bind:isOpen={isMetricsSelectionOpen}
presetMetrics={selectedMetrics}
{cluster}
{subCluster}
configName="node_list_selectedMetrics"
metrics={selectedMetrics}
bind:isOpen={isMetricsSelectionOpen}
on:update-metrics={({ detail }) => {
selectedMetrics = [...detail]
}}
/>
applyMetrics={(newMetrics) =>
selectedMetrics = [...newMetrics]
}
/>
{/if}

17
web/frontend/src/Tags.root.svelte
View File

@ -24,15 +24,22 @@
init,
} from "./generic/utils.js";
export let username;
export let isAdmin;
export let tagmap;
/* Svelte 5 Props */
let {
username,
isAdmin,
presetTagmap,
} = $props();
/* Const Init */
const {} = init();
const client = getContextClient();
let pendingChange = "none";
/* State Init */
let pendingChange = $state("none");
let tagmap = $state(presetTagmap)
/* Functions */
const removeTagMutation = ({ tagIds }) => {
return mutationStore({
client: client,
@ -96,7 +103,7 @@
<Button
size="sm"
color="danger"
on:click={() => removeTag(tag, tagType)}
onclick={() => removeTag(tag, tagType)}
>
<Icon name="x" />
</Button>

128
web/frontend/src/User.root.svelte
View File

@ -42,38 +42,53 @@
import TextFilter from "./generic/helper/TextFilter.svelte"
import Refresher from "./generic/helper/Refresher.svelte";
/* Svelte 5 Props */
let { user, filterPresets } = $props();
/* Const Init */
const { query: initq } = init();
const ccconfig = getContext("cc-config");
export let user;
export let filterPresets;
let filterComponent; // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
let jobList;
let jobFilters = [];
let matchedListJobs = 0;
let sorting = { field: "startTime", type: "col", order: "DESC" },
isSortingOpen = false;
let metrics = ccconfig.plot_list_selectedMetrics,
isMetricsSelectionOpen = false;
let isHistogramSelectionOpen = false;
let selectedCluster = filterPresets?.cluster ? filterPresets.cluster : null;
let showFootprint = filterPresets.cluster
? !!ccconfig[`plot_list_showFootprint:${filterPresets.cluster}`]
: !!ccconfig.plot_list_showFootprint;
let numDurationBins = "1h";
let numMetricBins = 10;
let durationBinOptions = ["1m","10m","1h","6h","12h"];
let metricBinOptions = [10, 20, 50, 100];
$: selectedHistograms = selectedCluster
? ccconfig[`user_view_histogramMetrics:${selectedCluster}`] || ( ccconfig['user_view_histogramMetrics'] || [] )
: ccconfig['user_view_histogramMetrics'] || [];
const client = getContextClient();
$: stats = queryStore({
const durationBinOptions = ["1m","10m","1h","6h","12h"];
const metricBinOptions = [10, 20, 50, 100];
/* State Init */
// List & Control Vars
let filterComponent = $state(); // see why here: https://stackoverflow.com/questions/58287729/how-can-i-export-a-function-from-a-svelte-component-that-changes-a-value-in-the
let jobFilters = $state([]);
let jobList = $state(null);
let matchedListJobs = $state(0);
let isSortingOpen = $state(false);
let isMetricsSelectionOpen = $state(false);
let sorting = $state({ field: "startTime", type: "col", order: "DESC" });
let selectedCluster = $state(filterPresets?.cluster ? filterPresets.cluster : null);
let selectedHistogramsBuffer = $state({ all: (ccconfig['user_view_histogramMetrics'] || []) })
let metrics = $state(filterPresets.cluster
? ccconfig[`plot_list_selectedMetrics:${filterPresets.cluster}`] ||
ccconfig.plot_list_selectedMetrics
: ccconfig.plot_list_selectedMetrics
);
let showFootprint = $state(filterPresets.cluster
? !!ccconfig[`plot_list_showFootprint:${filterPresets.cluster}`]
: !!ccconfig.plot_list_showFootprint
);
// Histogram Vars
let isHistogramSelectionOpen = $state(false);
let numDurationBins = $state("1h");
let numMetricBins = $state(10);
// Compare Vars (TODO)
// let jobCompare = $state(null);
// let showCompare = $state(false);
// let selectedJobs = $state([]);
// let filterBuffer = $state([]);
// let matchedCompareJobs = $state(0);
/* Derived Vars */
let selectedHistograms = $derived(selectedCluster ? selectedHistogramsBuffer[selectedCluster] : selectedHistogramsBuffer['all']);
let stats = $derived(
queryStore({
client: client,
query: gql`
query ($jobFilters: [JobFilter!]!, $selectedHistograms: [String!], $numDurationBins: String, $numMetricBins: Int) {
@ -105,9 +120,24 @@
}
`,
variables: { jobFilters, selectedHistograms, numDurationBins, numMetricBins },
})
);
/* Effect */
$effect(() => {
if (!selectedHistogramsBuffer[selectedCluster]) {
selectedHistogramsBuffer[selectedCluster] = ccconfig[`user_view_histogramMetrics:${selectedCluster}`];
};
});
onMount(() => filterComponent.updateFilters());
/* On Mount */
onMount(() => {
filterComponent.updateFilters();
// Why? -> `$derived(ccconfig[$cluster])` only loads array from last Backend-Query if $cluster changed reactively (without reload)
if (filterPresets?.cluster) {
selectedHistogramsBuffer[filterPresets.cluster] = ccconfig[`user_view_histogramMetrics:${filterPresets.cluster}`];
};
});
</script>
<!-- ROW1: Status-->
@ -129,13 +159,13 @@
<Row cols={{ xs: 1, md: 2, lg: 6}} class="mb-3">
<Col class="mb-2 mb-lg-0">
<ButtonGroup class="w-100">
<Button outline color="primary" on:click={() => (isSortingOpen = true)}>
<Button outline color="primary" onclick={() => (isSortingOpen = true)}>
<Icon name="sort-up" /> Sorting
</Button>
<Button
outline
color="primary"
on:click={() => (isMetricsSelectionOpen = true)}
onclick={() => (isMetricsSelectionOpen = true)}
>
<Icon name="graph-up" /> Metrics
</Button>
@ -143,11 +173,11 @@
</Col>
<Col lg="4" class="mb-1 mb-lg-0">
<Filters
bind:this={filterComponent}
{filterPresets}
matchedJobs={matchedListJobs}
startTimeQuickSelect={true}
bind:this={filterComponent}
on:update-filters={({ detail }) => {
applyFilters={(detail) => {
jobFilters = [...detail.filters, { user: { eq: user.username } }];
selectedCluster = jobFilters[0]?.cluster
? jobFilters[0].cluster.eq
@ -173,11 +203,11 @@
</Col>
<Col class="mb-2 mb-lg-0">
<TextFilter
on:set-filter={({ detail }) => filterComponent.updateFilters(detail)}
setFilter={(filter) => filterComponent.updateFilters(filter)}
/>
</Col>
<Col class="mb-1 mb-lg-0">
<Refresher on:refresh={() => {
<Refresher onRefresh={() => {
jobList.refreshJobs()
jobList.refreshAllMetrics()
}} />
@ -269,7 +299,7 @@
outline
color="secondary"
class="w-100"
on:click={() => (isHistogramSelectionOpen = true)}
onclick={() => (isHistogramSelectionOpen = true)}
>
<Icon name="bar-chart-line" /> Select Histograms
</Button>
@ -344,19 +374,31 @@
</Col>
</Row>
<Sorting bind:sorting bind:isOpen={isSortingOpen} />
<Sorting
bind:isOpen={isSortingOpen}
presetSorting={sorting}
applySorting={(newSort) =>
sorting = {...newSort}
}
/>
<MetricSelection
bind:cluster={selectedCluster}
configName="plot_list_selectedMetrics"
bind:metrics
bind:isOpen={isMetricsSelectionOpen}
bind:showFootprint
presetMetrics={metrics}
cluster={selectedCluster}
configName="plot_list_selectedMetrics"
applyMetrics={(newMetrics) =>
metrics = [...newMetrics]
}
footprintSelect
/>
<HistogramSelection
bind:cluster={selectedCluster}
bind:selectedHistograms
cluster={selectedCluster}
bind:isOpen={isHistogramSelectionOpen}
presetSelectedHistograms={selectedHistograms}
applyChange={(newSelection) => {
selectedHistogramsBuffer[selectedCluster || 'all'] = [...newSelection];
}}
/>

3
web/frontend/src/analysis.entrypoint.js
View File

@ -1,9 +1,10 @@
import { mount } from 'svelte';
import {} from './header.entrypoint.js'
import Analysis from './Analysis.root.svelte'
filterPresets.cluster = cluster
new Analysis({
mount(Analysis, {
target: document.getElementById('svelte-app'),
props: {
filterPresets: filterPresets,

34
web/frontend/src/analysis/PlotSelection.svelte
View File

@ -21,10 +21,14 @@
} from "@sveltestrap/sveltestrap";
import { gql, getContextClient, mutationStore } from "@urql/svelte";
export let availableMetrics;
export let metricsInHistograms;
export let metricsInScatterplots;
/* Svelte 5 Props */
let {
availableMetrics,
metricsInHistograms = $bindable(),
metricsInScatterplots = $bindable(),
} = $props();
/* Const Init */
const client = getContextClient();
const updateConfigurationMutation = ({ name, value }) => {
return mutationStore({
@ -38,11 +42,13 @@
});
};
let isHistogramConfigOpen = false,
isScatterPlotConfigOpen = false;
let selectedMetric1 = null,
selectedMetric2 = null;
/* State Init */
let isHistogramConfigOpen = $state(false);
let isScatterPlotConfigOpen = $state(false);
let selectedMetric1 = $state(null);
let selectedMetric2 = $state(null);
/* Functions */
function updateConfiguration(data) {
updateConfigurationMutation({
name: data.name,
@ -55,12 +61,12 @@
}
</script>
<Button outline on:click={() => (isHistogramConfigOpen = true)}>
<Button outline onclick={() => (isHistogramConfigOpen = true)}>
<Icon name="" />
Select Plots for Histograms
</Button>
<Button outline on:click={() => (isScatterPlotConfigOpen = true)}>
<Button outline onclick={() => (isScatterPlotConfigOpen = true)}>
<Icon name="" />
Select Plots in Scatter Plots
</Button>
@ -78,7 +84,7 @@
type="checkbox"
bind:group={metricsInHistograms}
value={metric}
on:change={() =>
onchange={() =>
updateConfiguration({
name: "analysis_view_histogramMetrics",
value: metricsInHistograms,
@ -91,7 +97,7 @@
</ListGroup>
</ModalBody>
<ModalFooter>
<Button color="primary" on:click={() => (isHistogramConfigOpen = false)}>
<Button color="primary" onclick={() => (isHistogramConfigOpen = false)}>
Close
</Button>
</ModalFooter>
@ -112,7 +118,7 @@
style="float: right;"
outline
color="danger"
on:click={() => {
onclick={() => {
metricsInScatterplots = metricsInScatterplots.filter(
(p) => pair != p,
);
@ -146,7 +152,7 @@
<Button
outline
disabled={selectedMetric1 == null || selectedMetric2 == null}
on:click={() => {
onclick={() => {
metricsInScatterplots = [
...metricsInScatterplots,
[selectedMetric1, selectedMetric2],
@ -164,7 +170,7 @@
</InputGroup>
</ModalBody>
<ModalFooter>
<Button color="primary" on:click={() => (isScatterPlotConfigOpen = false)}>
<Button color="primary" onclick={() => (isScatterPlotConfigOpen = false)}>
Close
</Button>
</ModalFooter>

3
web/frontend/src/config.entrypoint.js
View File

@ -1,7 +1,8 @@
import { mount } from 'svelte';
import {} from './header.entrypoint.js'
import Config from './Config.root.svelte'
new Config({
mount(Config, {
target: document.getElementById('svelte-app'),
props: {
isAdmin: isAdmin,

21
web/frontend/src/config/AdminSettings.svelte
View File

@ -12,13 +12,17 @@
import Options from "./admin/Options.svelte";
import NoticeEdit from "./admin/NoticeEdit.svelte";
export let ncontent;
let users = [];
let roles = [];
/* Svelte 5 Props */
let { ncontent } = $props();
/* Const Init*/
const ccconfig = getContext("cc-config");
/* State Init */
let users = $state([]);
let roles = $state([]);
/* Functions */
function getUserList() {
fetch("/config/users/?via-ldap=false&not-just-user=true")
.then((res) => res.json())
@ -40,21 +44,22 @@
getValidRoles();
}
/* on Mount */
onMount(() => initAdmin());
</script>
<Row cols={2} class="p-2 g-2">
<Col class="mb-1">
<AddUser {roles} on:reload={getUserList} />
<AddUser {roles} reloadUser={() => getUserList()} />
</Col>
<Col class="mb-1">
<ShowUsers on:reload={getUserList} bind:users />
<ShowUsers reloadUser={() => getUserList()} bind:users />
</Col>
<Col>
<EditRole {roles} on:reload={getUserList} />
<EditRole {roles} reloadUser={() => getUserList()} />
</Col>
<Col>
<EditProject on:reload={getUserList} />
<EditProject reloadUser={() => getUserList()} />
</Col>
<Options config={ccconfig}/>
<NoticeEdit {ncontent}/>

31
web/frontend/src/config/UserSettings.svelte
View File

@ -12,17 +12,26 @@
import PlotRenderOptions from "./user/PlotRenderOptions.svelte";
import PlotColorScheme from "./user/PlotColorScheme.svelte";
export let username
export let isApi
/* Svelte 5 Props */
let {
username,
isApi
} = $props();
/* Const Init */
const ccconfig = getContext("cc-config");
let message = { msg: "", target: "", color: "#d63384" };
let displayMessage = false;
let cbmode = ccconfig?.plot_general_colorblindMode || false;
async function handleSettingSubmit(event) {
const selector = event.detail.selector
const target = event.detail.target
/* State Init */
let message = $state({ msg: "", target: "", color: "#d63384" });
let displayMessage = $state(false);
let cbmode = $state(ccconfig?.plot_general_colorblindMode || false);
/* Functions */
async function handleSettingSubmit(event, setting) {
event.preventDefault();
const selector = setting.selector
const target = setting.target
let form = document.querySelector(selector);
let formData = new FormData(form);
try {
@ -53,6 +62,6 @@
}
</script>
<UserOptions config={ccconfig} {username} {isApi} bind:message bind:displayMessage on:update-config={(e) => handleSettingSubmit(e)}/>
<PlotRenderOptions config={ccconfig} bind:message bind:displayMessage on:update-config={(e) => handleSettingSubmit(e)}/>
<PlotColorScheme config={ccconfig} bind:cbmode bind:message bind:displayMessage on:update-config={(e) => handleSettingSubmit(e)}/>
<UserOptions config={ccconfig} {username} {isApi} bind:message bind:displayMessage updateSetting={(e, newSetting) => handleSettingSubmit(e, newSetting)}/>
<PlotRenderOptions config={ccconfig} bind:message bind:displayMessage updateSetting={(e, newSetting) => handleSettingSubmit(e, newSetting)}/>
<PlotColorScheme config={ccconfig} bind:cbmode bind:message bind:displayMessage updateSetting={(e, newSetting) => handleSettingSubmit(e, newSetting)}/>

33
web/frontend/src/config/admin/AddUser.svelte
View File

@ -10,17 +10,19 @@
<script>
import { Button, Card, CardTitle } from "@sveltestrap/sveltestrap";
import { createEventDispatcher } from "svelte";
import { fade } from "svelte/transition";
const dispatch = createEventDispatcher();
/* Svelte 5 Props */
let { roles, reloadUser } = $props();
let message = { msg: "", color: "#d63384" };
let displayMessage = false;
/* State Init */
let message = $state({ msg: "", color: "#d63384" });
let displayMessage = $state(false);
export let roles;
/* Functions */
async function handleUserSubmit(event) {
event.preventDefault();
async function handleUserSubmit() {
let form = document.querySelector("#create-user-form");
let formData = new FormData(form);
@ -29,7 +31,7 @@
if (res.ok) {
let text = await res.text();
popMessage(text, "#048109");
reloadUserList();
reloadUser();
form.reset();
} else {
let text = await res.text();
@ -47,10 +49,6 @@
displayMessage = false;
}, 3500);
}
function reloadUserList() {
dispatch("reload");
}
</script>
<Card>
@ -59,7 +57,8 @@
method="post"
action="/config/users/"
class="card-body"
on:submit|preventDefault={handleUserSubmit}
autocomplete="off"
onsubmit={(e) => handleUserSubmit(e)}
>
<CardTitle class="mb-3">Create User</CardTitle>
<div class="mb-3">
@ -70,6 +69,7 @@
id="username"
name="username"
aria-describedby="usernameHelp"
autocomplete="username"
/>
<div id="usernameHelp" class="form-text">Must be unique.</div>
</div>
@ -81,6 +81,7 @@
id="password"
name="password"
aria-describedby="passwordHelp"
autocomplete="new-password"
/>
<div id="passwordHelp" class="form-text">
Only API users are allowed to have a blank password. Users with a blank
@ -109,6 +110,7 @@
id="name"
name="name"
aria-describedby="nameHelp"
autocomplete="name"
/>
<div id="nameHelp" class="form-text">Optional, can be blank.</div>
</div>
@ -120,6 +122,7 @@
id="email"
name="email"
aria-describedby="emailHelp"
autocomplete="email"
/>
<div id="emailHelp" class="form-text">Optional, can be blank.</div>
</div>
@ -153,13 +156,13 @@
{/each}
</div>
<p style="display: flex; align-items: center;">
<Button type="submit" color="primary">Submit</Button>
{#if displayMessage}<div style="margin-left: 1.5em;">
<Button type="submit" color="primary" style="margin-right: 1.5em;">Submit</Button>
{#if displayMessage}
<b
><code style="color: {message.color};" out:fade>{message.msg}</code
></b
>
</div>{/if}
{/if}
</p>
</form>
</Card>

32
web/frontend/src/config/admin/EditProject.svelte
View File

@ -7,15 +7,19 @@
<script>
import { Card, CardTitle, CardBody } from "@sveltestrap/sveltestrap";
import { createEventDispatcher } from "svelte";
import { fade } from "svelte/transition";
const dispatch = createEventDispatcher();
/* Svelte 5 Props */
let { reloadUser } = $props();
let message = { msg: "", color: "#d63384" };
let displayMessage = false;
/* State Init */
let message = $state({ msg: "", color: "#d63384" });
let displayMessage = $state(false);
/* Functions */
async function handleAddProject(event) {
event.preventDefault();
async function handleAddProject() {
const username = document.querySelector("#project-username").value;
const project = document.querySelector("#project-id").value;
@ -36,7 +40,7 @@
if (res.ok) {
let text = await res.text();
popMessage(text, "#048109");
reloadUserList();
reloadUser();
} else {
let text = await res.text();
throw new Error("Response Code " + res.status + "-> " + text);
@ -46,7 +50,9 @@
}
}
async function handleRemoveProject() {
async function handleRemoveProject(event) {
event.preventDefault();
const username = document.querySelector("#project-username").value;
const project = document.querySelector("#project-id").value;
@ -67,7 +73,7 @@
if (res.ok) {
let text = await res.text();
popMessage(text, "#048109");
reloadUserList();
reloadUser();
} else {
let text = await res.text();
throw new Error("Response Code " + res.status + "-> " + text);
@ -84,10 +90,6 @@
displayMessage = false;
}, 3500);
}
function reloadUserList() {
dispatch("reload");
}
</script>
<Card>
@ -108,19 +110,17 @@
placeholder="project-id"
id="project-id"
/>
<!-- PreventDefault on Sveltestrap-Button more complex to achieve than just use good ol' html button -->
<!-- see: https://stackoverflow.com/questions/69630422/svelte-how-to-use-event-modifiers-in-my-own-components -->
<button
class="btn btn-primary"
type="button"
id="add-project-button"
on:click|preventDefault={handleAddProject}>Add</button
onclick={(e) => handleAddProject(e)}>Add</button
>
<button
class="btn btn-danger"
type="button"
id="remove-project-button"
on:click|preventDefault={handleRemoveProject}>Remove</button
onclick={(e) => handleRemoveProject(e)}>Remove</button
>
</div>
<p>

32
web/frontend/src/config/admin/EditRole.svelte
View File

@ -10,17 +10,19 @@
<script>
import { Card, CardTitle, CardBody } from "@sveltestrap/sveltestrap";
import { createEventDispatcher } from "svelte";
import { fade } from "svelte/transition";
const dispatch = createEventDispatcher();
/* SVelte 5 Props */
let {roles, reloadUser } = $props();
let message = { msg: "", color: "#d63384" };
let displayMessage = false;
/* State Init */
let message = $state({ msg: "", color: "#d63384" });
let displayMessage = $state(false);
export let roles;
/* Functions */
async function handleAddRole(event) {
event.preventDefault();
async function handleAddRole() {
const username = document.querySelector("#role-username").value;
const role = document.querySelector("#role-select").value;
@ -41,7 +43,7 @@
if (res.ok) {
let text = await res.text();
popMessage(text, "#048109");
reloadUserList();
reloadUser();
} else {
let text = await res.text();
throw new Error("Response Code " + res.status + "-> " + text);
@ -51,7 +53,9 @@
}
}
async function handleRemoveRole() {
async function handleRemoveRole(event) {
event.preventDefault();
const username = document.querySelector("#role-username").value;
const role = document.querySelector("#role-select").value;
@ -72,7 +76,7 @@
if (res.ok) {
let text = await res.text();
popMessage(text, "#048109");
reloadUserList();
reloadUser();
} else {
let text = await res.text();
throw new Error("Response Code " + res.status + "-> " + text);
@ -89,10 +93,6 @@
displayMessage = false;
}, 3500);
}
function reloadUserList() {
dispatch("reload");
}
</script>
<Card>
@ -113,19 +113,17 @@
>
{/each}
</select>
<!-- PreventDefault on Sveltestrap-Button more complex to achieve than just use good ol' html button -->
<!-- see: https://stackoverflow.com/questions/69630422/svelte-how-to-use-event-modifiers-in-my-own-components -->
<button
class="btn btn-primary"
type="button"
id="add-role-button"
on:click|preventDefault={handleAddRole}>Add</button
onclick={(e) => handleAddRole(e)}>Add</button
>
<button
class="btn btn-danger"
type="button"
id="remove-role-button"
on:click|preventDefault={handleRemoveRole}>Remove</button
onclick={(e) =>handleRemoveRole(e)}>Remove</button
>
</div>
<p>

19
web/frontend/src/config/admin/NoticeEdit.svelte
View File

@ -6,14 +6,18 @@
import { Col, Card, CardTitle, CardBody } from "@sveltestrap/sveltestrap";
import { fade } from "svelte/transition";
export let ncontent;
/* Svelte 5 Props */
let { ncontent } = $props();
let message = { msg: "", color: "#d63384" };
let displayMessage = false;
/* State Init */
let message = $state({ msg: "", color: "#d63384" });
let displayMessage = $state(false);
/* Functions */
async function handleEditNotice(event) {
event.preventDefault();
async function handleEditNotice() {
const content = document.querySelector("#notice-content").value;
let formData = new FormData();
formData.append("new-content", content);
@ -56,14 +60,11 @@
value={ncontent}
id="notice-content"
/>
<!-- PreventDefault on Sveltestrap-Button more complex to achieve than just use good ol' html button -->
<!-- see: https://stackoverflow.com/questions/69630422/svelte-how-to-use-event-modifiers-in-my-own-components -->
<button
class="btn btn-primary"
type="button"
id="edit-notice-button"
on:click|preventDefault={handleEditNotice}>Edit Notice</button
onclick={(e) => handleEditNotice(e)}>Edit Notice</button
>
</div>
<p>

9
web/frontend/src/config/admin/Options.svelte
View File

@ -6,10 +6,13 @@
import { getContext, onMount } from "svelte";
import { Col, Card, CardBody, CardTitle } from "@sveltestrap/sveltestrap";
let scrambled;
/*Const Init */
const resampleConfig = getContext("resampling");
/* State Init */
let scrambled = $state(false);
/* on Mount */
onMount(() => {
scrambled = window.localStorage.getItem("cc-scramble-names") != null;
});
@ -33,7 +36,7 @@
type="checkbox"
id="scramble-names-checkbox"
style="margin-right: 1em;"
on:click={handleScramble}
onclick={() => handleScramble()}
bind:checked={scrambled}
/>
Active?

21
web/frontend/src/config/admin/ShowUsers.svelte
View File

@ -16,23 +16,19 @@
CardTitle,
CardBody,
} from "@sveltestrap/sveltestrap";
import { createEventDispatcher } from "svelte";
import ShowUsersRow from "./ShowUsersRow.svelte";
export let users = [];
const dispatch = createEventDispatcher();
function reloadUserList() {
dispatch("reload");
}
/*Svelte 5 Props */
let { users = $bindable([]), reloadUser } = $props();
/* Functions */
function deleteUser(username) {
if (confirm("Are you sure?")) {
let formData = new FormData();
formData.append("username", username);
fetch("/config/users/", { method: "DELETE", body: formData }).then((res) => {
if (res.status == 200) {
reloadUserList();
reloadUser();
} else {
confirm(res.statusText);
}
@ -40,7 +36,6 @@
}
}
$: userList = users;
</script>
<Card class="h-100">
@ -53,11 +48,11 @@
<Button
color="secondary"
size="sm"
on:click={reloadUserList}
onclick={() => reloadUser()}
style="float: right;">Reload</Button
>
</p>
<div style="width: 100%; max-height: 500px; overflow-y: scroll;">
<div style="width: 100%; max-height: 725px; overflow-y: scroll;">
<Table hover>
<thead>
<tr>
@ -71,13 +66,13 @@
</tr>
</thead>
<tbody id="users-list">
{#each userList as user}
{#each users as user}
<tr id="user-{user.username}">
<ShowUsersRow {user} />
<td
><button
class="btn btn-danger del-user"
on:click={deleteUser(user.username)}>Delete</button
onclick={() => deleteUser(user.username)}>Delete</button
></td
>
</tr>

10
web/frontend/src/config/admin/ShowUsersRow.svelte
View File

@ -10,9 +10,13 @@
import { Button } from "@sveltestrap/sveltestrap";
import { fetchJwt } from "../../generic/utils.js"
export let user;
/* Svelte 5 Props */
let { user } = $props();
let jwt = "";
/* State Init */
let jwt = $state("");
/* Functions */
function getUserJwt(username) {
const p = fetchJwt(username);
p.then((content) => {
@ -30,7 +34,7 @@
<td><code>{user?.roles ? user.roles.join(", ") : "No Roles"}</code></td>
<td>
{#if !jwt}
<Button color="success" on:click={getUserJwt(user.username)}
<Button color="success" onclick={() => getUserJwt(user.username)}
>Gen. JWT</Button
>
{:else}

38
web/frontend/src/config/support/SupportOptions.svelte
View File

@ -3,15 +3,20 @@
-->
<script>
import { Row, Col, Card, CardTitle, Button} from "@sveltestrap/sveltestrap";
import { Row, Col, Card, CardTitle, CardBody, Button} from "@sveltestrap/sveltestrap";
import { fade } from "svelte/transition";
export let config;
/* Svelte 5 Props */
let { config } = $props();
let message;
let displayMessage;
/* State Init */
let message = $state("");
let displayMessage = $state(false);
/* Functions */
async function handleSettingSubmit(event, selector, target) {
event.preventDefault()
async function handleSettingSubmit(selector, target) {
let form = document.querySelector(selector);
let formData = new FormData(form);
try {
@ -42,18 +47,8 @@
<Row cols={1} class="p-2 g-2">
<Col>
<Card class="h-100">
<form
id="node-paging-form"
method="post"
action="/frontend/configuration/"
class="card-body"
on:submit|preventDefault={() =>
handleSettingSubmit("#node-paging-form", "npag")}
>
<!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
<CardTitle
style="margin-bottom: 1em; display: flex; align-items: center;"
>
<CardTitle class="m-3 d-flex align-items-center">
<div>Node List Paging Type</div>
{#if displayMessage && message.target == "npag"}<div
style="margin-left: auto; font-size: 0.9em;"
@ -63,6 +58,12 @@
>
</div>{/if}
</CardTitle>
<CardBody>
<form
id="node-paging-form"
method="post"
action="/frontend/configuration/"
onsubmit={(e) => handleSettingSubmit(e, "#node-paging-form", "npag")}>
<input type="hidden" name="key" value="node_list_usePaging" />
<div class="mb-3">
<div>
@ -71,7 +72,7 @@
{:else}
<input type="radio" id="nodes-true" name="value" value="true" />
{/if}
<label for="true">Paging with selectable count of nodes.</label>
<label for="nodes-true">Paging with selectable count of nodes.</label>
</div>
<div>
{#if config?.node_list_usePaging}
@ -79,11 +80,12 @@
{:else}
<input type="radio" id="nodes-false-checked" name="value" value="false" checked />
{/if}
<label for="false">Continuous scroll iteratively adding 10 nodes.</label>
<label for="nodes-false">Continuous scroll iteratively adding 10 nodes.</label>
</div>
</div>
<Button color="primary" type="submit">Submit</Button>
</form>
</CardBody>
</Card>
</Col>
</Row>

47
web/frontend/src/config/user/PlotColorScheme.svelte
View File

@ -19,21 +19,20 @@
CardTitle,
} from "@sveltestrap/sveltestrap";
import { fade } from "svelte/transition";
import { createEventDispatcher } from 'svelte';
export let config;
export let message;
export let displayMessage;
export let cbmode = false;
/* Svelte 5 Props */
let {
config,
message = $bindable(),
displayMessage = $bindable(),
cbmode = $bindable(false),
updateSetting
} = $props();
const dispatch = createEventDispatcher();
function updateSetting(selector, target) {
dispatch('update-config', {
selector: selector,
target: target
});
}
/* State Init */
let activeRow = $state(JSON.stringify(config?.plot_general_colorscheme));
/* Const Init */
const colorschemes = {
Default: [
"#00bfff",
@ -321,7 +320,6 @@
"rgb(189,189,189)",
]
}
</script>
<Row cols={1} class="p-2 g-2">
@ -350,28 +348,24 @@
<input type="hidden" name="key" value="plot_general_colorscheme" />
<Table hover>
<tbody>
{#key activeRow}
{#each Object.entries(cbmode ? cvdschemes : colorschemes) as [name, rgbrow]}
<tr>
<th scope="col">{name}</th>
<td>
{#if rgbrow.join(",") == config.plot_general_colorscheme}
<input
type="radio"
name="value"
value={JSON.stringify(rgbrow)}
checked
on:click={() =>
updateSetting("#colorscheme-form", "cs")}
checked={activeRow == JSON.stringify(rgbrow)}
onclick={(e) => {
activeRow = JSON.stringify(rgbrow)
updateSetting(e, {
selector: "#colorscheme-form",
target: "cs",
});
}}
/>
{:else}
<input
type="radio"
name="value"
value={JSON.stringify(rgbrow)}
on:click={() =>
updateSetting("#colorscheme-form", "cs")}
/>
{/if}
</td>
<td>
{#each rgbrow as rgb}
@ -381,6 +375,7 @@
</td>
</tr>
{/each}
{/key}
</tbody>
</Table>
</form>

52
web/frontend/src/config/user/PlotRenderOptions.svelte
View File

@ -19,33 +19,29 @@
CardTitle,
} from "@sveltestrap/sveltestrap";
import { fade } from "svelte/transition";
import { createEventDispatcher } from 'svelte';
export let config;
export let message;
export let displayMessage;
const dispatch = createEventDispatcher();
function updateSetting(selector, target) {
dispatch('update-config', {
selector: selector,
target: target
});
}
/* Svelte 5 Props */
let {
config,
message = $bindable(),
displayMessage = $bindable(),
updateSetting
} = $props();
</script>
<Row cols={3} class="p-2 g-2">
<!-- LINE WIDTH -->
<Col
><Card class="h-100">
<!-- Important: Function with arguments needs to be event-triggered like on:submit={() => functionName('Some','Args')} OR no arguments and like this: on:submit={functionName} -->
<form
id="line-width-form"
method="post"
action="/frontend/configuration/"
class="card-body"
on:submit|preventDefault={() =>
updateSetting("#line-width-form", "lw")}
onsubmit={(e) => updateSetting(e, {
selector: "#line-width-form",
target: "lw",
})}
>
<!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
<CardTitle
@ -90,8 +86,10 @@
method="post"
action="/frontend/configuration/"
class="card-body"
on:submit|preventDefault={() =>
updateSetting("#plots-per-row-form", "ppr")}
onsubmit={(e) => updateSetting(e, {
selector: "#plots-per-row-form",
target: "ppr",
})}
>
<!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
<CardTitle
@ -136,8 +134,10 @@
method="post"
action="/frontend/configuration/"
class="card-body"
on:submit|preventDefault={() =>
updateSetting("#backgrounds-form", "bg")}
onsubmit={(e) => updateSetting(e, {
selector: "#backgrounds-form",
target: "bg",
})}
>
<!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
<CardTitle
@ -156,17 +156,17 @@
<div class="mb-3">
<div>
{#if config.plot_general_colorBackground}
<input type="radio" id="true-checked" name="value" value="true" checked />
<input type="radio" id="colb-true-checked" name="value" value="true" checked />
{:else}
<input type="radio" id="true" name="value" value="true" />
<input type="radio" id="colb-true" name="value" value="true" />
{/if}
<label for="true">Yes</label>
</div>
<div>
{#if config.plot_general_colorBackground}
<input type="radio" id="false" name="value" value="false" />
<input type="radio" id="colb-false" name="value" value="false" />
{:else}
<input type="radio" id="false-checked" name="value" value="false" checked />
<input type="radio" id="colb-false-checked" name="value" value="false" checked />
{/if}
<label for="false">No</label>
</div>
@ -180,8 +180,10 @@
method="post"
action="/frontend/configuration/"
class="card-body"
on:submit|preventDefault={() =>
updateSetting("#colorblindmode-form", "cbm")}
onsubmit={(e) => updateSetting(e, {
selector: "#colorblindmode-form",
target: "cbm",
})}
>
<!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
<CardTitle

44
web/frontend/src/config/user/UserOptions.svelte
View File

@ -22,16 +22,23 @@
CardBody
} from "@sveltestrap/sveltestrap";
import { fade } from "svelte/transition";
import { createEventDispatcher } from 'svelte';
import { fetchJwt } from "../../generic/utils.js";
export let config;
export let message;
export let displayMessage;
export let username;
export let isApi;
/* Svelte 5 Props */
let {
config,
message = $bindable(),
displayMessage = $bindable(),
username,
isApi,
updateSetting
} = $props();
let jwt = "";
/* State Init */
let jwt = $state("");
let displayCheck = $state(false);
/* Functions */
function getUserJwt(username) {
if (username) {
const p = fetchJwt(username);
@ -43,7 +50,6 @@
}
}
let displayCheck = false;
function clipJwt() {
displayCheck = true;
// Navigator clipboard api needs a secure context (https)
@ -71,14 +77,6 @@
displayCheck = false;
}, 1000);
}
const dispatch = createEventDispatcher();
function updateSetting(selector, target) {
dispatch('update-config', {
selector: selector,
target: target
});
}
</script>
<Row cols={isApi ? 3 : 1} class="p-2 g-2">
@ -90,8 +88,10 @@
method="post"
action="/frontend/configuration/"
class="card-body"
on:submit|preventDefault={() =>
updateSetting("#paging-form", "pag")}
onsubmit={(e) => updateSetting(e, {
selector: "#paging-form",
target: "pag",
})}
>
<!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
<CardTitle
@ -109,7 +109,7 @@
<input type="hidden" name="key" value="job_list_usePaging" />
<div class="mb-3">
<div>
{#if config.job_list_usePaging}
{#if config?.job_list_usePaging}
<input type="radio" id="true-checked" name="value" value="true" checked />
{:else}
<input type="radio" id="true" name="value" value="true" />
@ -117,7 +117,7 @@
<label for="true">Paging with selectable count of jobs.</label>
</div>
<div>
{#if config.job_list_usePaging}
{#if config?.job_list_usePaging}
<input type="radio" id="false" name="value" value="false" />
{:else}
<input type="radio" id="false-checked" name="value" value="false" checked />
@ -137,7 +137,7 @@
<CardBody>
<CardTitle>Generate JWT</CardTitle>
{#if jwt}
<Button color="secondary" on:click={clipJwt()}>
<Button color="secondary" onclick={() => clipJwt()}>
Copy JWT to Clipboard
</Button>
<p class="mt-2">
@ -149,7 +149,7 @@
</p>
{/if}
{:else}
<Button color="success" on:click={getUserJwt(username)}>
<Button color="success" onclick={() => getUserJwt(username)}>
Generate JWT for '{username}'
</Button>
<p class="mt-2">

370
web/frontend/src/generic/Filters.svelte
View File

@ -16,7 +16,6 @@
-->
<script>
import { createEventDispatcher } from "svelte";
import {
DropdownItem,
DropdownMenu,
@ -26,78 +25,77 @@
ButtonDropdown,
Icon,
} from "@sveltestrap/sveltestrap";
import Tag from "./helper/Tag.svelte";
import Info from "./filters/InfoBox.svelte";
import Cluster from "./filters/Cluster.svelte";
import JobStates, { allJobStates } from "./filters/JobStates.svelte";
import StartTime from "./filters/StartTime.svelte";
import Tags from "./filters/Tags.svelte";
import StartTime, { startTimeSelectOptions } from "./filters/StartTime.svelte";
import Duration from "./filters/Duration.svelte";
import Energy from "./filters/Energy.svelte";
import Tags from "./filters/Tags.svelte";
import Tag from "./helper/Tag.svelte";
import Resources from "./filters/Resources.svelte";
import Energy from "./filters/Energy.svelte";
import Statistics from "./filters/Stats.svelte";
const dispatch = createEventDispatcher();
export let menuText = null;
export let filterPresets = {};
export let disableClusterSelection = false;
export let startTimeQuickSelect = false;
export let matchedJobs = -2;
export let showFilter = true;
const startTimeSelectOptions = [
{ range: "", rangeLabel: "No Selection"},
{ range: "last6h", rangeLabel: "Last 6hrs"},
{ range: "last24h", rangeLabel: "Last 24hrs"},
{ range: "last7d", rangeLabel: "Last 7 days"},
{ range: "last30d", rangeLabel: "Last 30 days"}
];
/* Svelte 5 Props */
let {
menuText = null,
filterPresets = {},
disableClusterSelection = false,
startTimeQuickSelect = false,
matchedJobs = -2,
showFilter = true,
applyFilters
} = $props();
/* Const Init */
const nodeMatchLabels = {
eq: "",
contains: " Contains",
}
const filterReset = {
projectMatch: "contains",
userMatch: "contains",
// Direct Filters
dbId: [],
jobId: "",
jobIdMatch: "eq",
nodeMatch: "eq",
arrayJobId: null,
jobName: "",
// View Filters
project: "",
projectMatch: "contains",
user: "",
userMatch: "contains",
// Filter Modals
cluster: null,
partition: null,
states: allJobStates,
startTime: { from: null, to: null, range: ""},
tags: [],
duration: {
lessThan: null,
moreThan: null,
from: null,
to: null,
},
dbId: [],
jobId: "",
arrayJobId: null,
user: "",
project: "",
jobName: "",
node: null,
energy: { from: null, to: null },
tags: [],
numNodes: { from: null, to: null },
numHWThreads: { from: null, to: null },
numAccelerators: { from: null, to: null },
node: null,
nodeMatch: "eq",
energy: { from: null, to: null },
stats: [],
};
let filters = {
projectMatch: filterPresets.projectMatch || "contains",
userMatch: filterPresets.userMatch || "contains",
/* State Init */
let filters = $state({
dbId: filterPresets.dbId || [],
jobId: filterPresets.jobId || "",
jobIdMatch: filterPresets.jobIdMatch || "eq",
nodeMatch: filterPresets.nodeMatch || "eq",
arrayJobId: filterPresets.arrayJobId || null,
jobName: filterPresets.jobName || "",
project: filterPresets.project || "",
projectMatch: filterPresets.projectMatch || "contains",
user: filterPresets.user || "",
userMatch: filterPresets.userMatch || "contains",
cluster: filterPresets.cluster || null,
partition: filterPresets.partition || null,
states:
@ -105,41 +103,33 @@
? [filterPresets.state].flat()
: allJobStates,
startTime: filterPresets.startTime || { from: null, to: null, range: ""},
tags: filterPresets.tags || [],
duration: filterPresets.duration || {
lessThan: null,
moreThan: null,
from: null,
to: null,
},
dbId: filterPresets.dbId || [],
jobId: filterPresets.jobId || "",
arrayJobId: filterPresets.arrayJobId || null,
user: filterPresets.user || "",
project: filterPresets.project || "",
jobName: filterPresets.jobName || "",
node: filterPresets.node || null,
energy: filterPresets.energy || { from: null, to: null },
tags: filterPresets.tags || [],
numNodes: filterPresets.numNodes || { from: null, to: null },
numHWThreads: filterPresets.numHWThreads || { from: null, to: null },
numAccelerators: filterPresets.numAccelerators || { from: null, to: null },
node: filterPresets.node || null,
nodeMatch: filterPresets.nodeMatch || "eq",
energy: filterPresets.energy || { from: null, to: null },
stats: filterPresets.stats || [],
};
});
let isClusterOpen = false,
isJobStatesOpen = false,
isStartTimeOpen = false,
isTagsOpen = false,
isDurationOpen = false,
isEnergyOpen = false,
isResourcesOpen = false,
isStatsOpen = false,
isNodesModified = false,
isHwthreadsModified = false,
isAccsModified = false;
/* Opened States */
let isClusterOpen = $state(false)
let isJobStatesOpen = $state(false)
let isStartTimeOpen = $state(false)
let isDurationOpen = $state(false)
let isTagsOpen = $state(false)
let isResourcesOpen = $state(false)
let isEnergyOpen = $state(false)
let isStatsOpen = $state(false)
/* Functions */
// Can be called from the outside to trigger a 'update' event from this component.
// 'force' option empties existing filters and then applies only 'additionalFilters'
export function updateFilters(additionalFilters = null, force = false) {
@ -153,10 +143,20 @@
}
// Construct New Filter
let items = [];
if (filters.dbId.length != 0)
items.push({ dbId: filters.dbId });
if (filters.jobId)
items.push({ jobId: { [filters.jobIdMatch]: filters.jobId } });
if (filters.arrayJobId != null)
items.push({ arrayJobId: filters.arrayJobId });
if (filters.jobName) items.push({ jobName: { contains: filters.jobName } });
if (filters.project)
items.push({ project: { [filters.projectMatch]: filters.project } });
if (filters.user)
items.push({ user: { [filters.userMatch]: filters.user } });
if (filters.cluster) items.push({ cluster: { eq: filters.cluster } });
if (filters.node) items.push({ node: { [filters.nodeMatch]: filters.node } });
if (filters.partition) items.push({ partition: { eq: filters.partition } });
if (filters.states.length != allJobStates.length)
if (filters.states.length != allJobStates?.length)
items.push({ state: filters.states });
if (filters.startTime.from || filters.startTime.to)
items.push({
@ -166,7 +166,6 @@
items.push({
startTime: { range: filters.startTime.range },
});
if (filters.tags.length != 0) items.push({ tags: filters.tags });
if (filters.duration.from || filters.duration.to)
items.push({
duration: { from: filters.duration.from, to: filters.duration.to },
@ -175,21 +174,11 @@
items.push({ duration: { from: 0, to: filters.duration.lessThan } });
if (filters.duration.moreThan)
items.push({ duration: { from: filters.duration.moreThan, to: 604800 } }); // 7 days to include special jobs with long runtimes
if (filters.energy.from || filters.energy.to)
items.push({
energy: { from: filters.energy.from, to: filters.energy.to },
});
if (filters.dbId.length != 0)
items.push({ dbId: filters.dbId });
if (filters.jobId)
items.push({ jobId: { [filters.jobIdMatch]: filters.jobId } });
if (filters.arrayJobId != null)
items.push({ arrayJobId: filters.arrayJobId });
if (filters.tags.length != 0) items.push({ tags: filters.tags });
if (filters.numNodes.from != null || filters.numNodes.to != null) {
items.push({
numNodes: { from: filters.numNodes.from, to: filters.numNodes.to },
});
isNodesModified = true;
}
if (filters.numHWThreads.from != null || filters.numHWThreads.to != null) {
items.push({
@ -198,7 +187,6 @@
to: filters.numHWThreads.to,
},
});
isHwthreadsModified = true;
}
if (filters.numAccelerators.from != null || filters.numAccelerators.to != null) {
items.push({
@ -207,17 +195,16 @@
to: filters.numAccelerators.to,
},
});
isAccsModified = true;
}
if (filters.user)
items.push({ user: { [filters.userMatch]: filters.user } });
if (filters.project)
items.push({ project: { [filters.projectMatch]: filters.project } });
if (filters.jobName) items.push({ jobName: { contains: filters.jobName } });
if (filters.node) items.push({ node: { [filters.nodeMatch]: filters.node } });
if (filters.energy.from || filters.energy.to)
items.push({
energy: { from: filters.energy.from, to: filters.energy.to },
});
if (filters.stats.length != 0)
items.push({ metricStats: filters.stats.map((st) => { return { metricName: st.field, range: { from: st.from, to: st.to }} }) });
dispatch("update-filters", { filters: items });
applyFilters({ filters: items });
changeURL();
return items;
}
@ -226,20 +213,7 @@
const dateToUnixEpoch = (rfc3339) => Math.floor(Date.parse(rfc3339) / 1000);
let opts = [];
if (filters.cluster) opts.push(`cluster=${filters.cluster}`);
if (filters.node) opts.push(`node=${filters.node}`);
if (filters.node && filters.nodeMatch != "eq") // "eq" is default-case
opts.push(`nodeMatch=${filters.nodeMatch}`);
if (filters.partition) opts.push(`partition=${filters.partition}`);
if (filters.states.length != allJobStates.length)
for (let state of filters.states) opts.push(`state=${state}`);
if (filters.startTime.from && filters.startTime.to)
opts.push(
`startTime=${dateToUnixEpoch(filters.startTime.from)}-${dateToUnixEpoch(filters.startTime.to)}`,
);
if (filters.startTime.range) {
opts.push(`startTime=${filters.startTime.range}`)
}
// Direct Filters
if (filters.dbId.length != 0) {
for (let dbi of filters.dbId) {
opts.push(`dbId=${dbi}`);
@ -254,21 +228,12 @@
}
if (filters.jobIdMatch != "eq")
opts.push(`jobIdMatch=${filters.jobIdMatch}`); // "eq" is default-case
for (let tag of filters.tags) opts.push(`tag=${tag}`);
if (filters.duration.from && filters.duration.to)
opts.push(`duration=${filters.duration.from}-${filters.duration.to}`);
if (filters.duration.lessThan)
opts.push(`duration=0-${filters.duration.lessThan}`);
if (filters.duration.moreThan)
opts.push(`duration=${filters.duration.moreThan}-604800`);
if (filters.energy.from && filters.energy.to)
opts.push(`energy=${filters.energy.from}-${filters.energy.to}`);
if (filters.numNodes.from && filters.numNodes.to)
opts.push(`numNodes=${filters.numNodes.from}-${filters.numNodes.to}`);
if (filters.numHWThreads.from && filters.numHWThreads.to)
opts.push(`numHWThreads=${filters.numHWThreads.from}-${filters.numHWThreads.to}`);
if (filters.numAccelerators.from && filters.numAccelerators.to)
opts.push(`numAccelerators=${filters.numAccelerators.from}-${filters.numAccelerators.to}`);
if (filters.arrayJobId) opts.push(`arrayJobId=${filters.arrayJobId}`);
if (filters.jobName) opts.push(`jobName=${filters.jobName}`);
// View Filters
if (filters.project) opts.push(`project=${filters.project}`);
if (filters.project && filters.projectMatch != "contains") // "contains" is default-case
opts.push(`projectMatch=${filters.projectMatch}`);
if (filters.user.length != 0)
if (filters.userMatch != "in") {
opts.push(`user=${filters.user}`);
@ -277,16 +242,42 @@
}
if (filters.userMatch != "contains") // "contains" is default-case
opts.push(`userMatch=${filters.userMatch}`);
if (filters.project) opts.push(`project=${filters.project}`);
if (filters.project && filters.projectMatch != "contains") // "contains" is default-case
opts.push(`projectMatch=${filters.projectMatch}`);
if (filters.jobName) opts.push(`jobName=${filters.jobName}`);
if (filters.arrayJobId) opts.push(`arrayJobId=${filters.arrayJobId}`);
// Filter Modals
if (filters.cluster) opts.push(`cluster=${filters.cluster}`);
if (filters.partition) opts.push(`partition=${filters.partition}`);
if (filters.states.length != allJobStates?.length)
for (let state of filters.states) opts.push(`state=${state}`);
if (filters.startTime.from && filters.startTime.to)
opts.push(
`startTime=${dateToUnixEpoch(filters.startTime.from)}-${dateToUnixEpoch(filters.startTime.to)}`,
);
if (filters.startTime.range) {
opts.push(`startTime=${filters.startTime.range}`)
}
if (filters.duration.from && filters.duration.to)
opts.push(`duration=${filters.duration.from}-${filters.duration.to}`);
if (filters.duration.lessThan)
opts.push(`duration=0-${filters.duration.lessThan}`);
if (filters.duration.moreThan)
opts.push(`duration=${filters.duration.moreThan}-604800`);
if (filters.tags.length != 0)
for (let tag of filters.tags) opts.push(`tag=${tag}`);
if (filters.numNodes.from && filters.numNodes.to)
opts.push(`numNodes=${filters.numNodes.from}-${filters.numNodes.to}`);
if (filters.numHWThreads.from && filters.numHWThreads.to)
opts.push(`numHWThreads=${filters.numHWThreads.from}-${filters.numHWThreads.to}`);
if (filters.numAccelerators.from && filters.numAccelerators.to)
opts.push(`numAccelerators=${filters.numAccelerators.from}-${filters.numAccelerators.to}`);
if (filters.node) opts.push(`node=${filters.node}`);
if (filters.node && filters.nodeMatch != "eq") // "eq" is default-case
opts.push(`nodeMatch=${filters.nodeMatch}`);
if (filters.energy.from && filters.energy.to)
opts.push(`energy=${filters.energy.from}-${filters.energy.to}`);
if (filters.stats.length != 0)
for (let stat of filters.stats) {
opts.push(`stat=${stat.field}-${stat.from}-${stat.to}`);
}
// Build && Return
if (opts.length == 0 && window.location.search.length <= 1) return;
let newurl = `${window.location.pathname}?${opts.join("&")}`;
window.history.replaceState(null, "", newurl);
@ -296,7 +287,7 @@
<!-- Dropdown-Button -->
<ButtonGroup>
{#if showFilter}
<ButtonDropdown class="cc-dropdown-on-hover mb-1" style="{(matchedJobs >= -1) ? '' : 'margin-right: 0.5rem;'}">
<ButtonDropdown class="cc-dropdown-on-hover mb-1" style={(matchedJobs >= -1) ? '' : 'margin-right: 0.5rem;'}>
<DropdownToggle outline caret color="success">
<Icon name="sliders" />
Filters
@ -307,36 +298,36 @@
<DropdownItem disabled>{menuText}</DropdownItem>
<DropdownItem divider />
{/if}
<DropdownItem on:click={() => (isClusterOpen = true)}>
<DropdownItem onclick={() => (isClusterOpen = true)}>
<Icon name="cpu" /> Cluster/Partition
</DropdownItem>
<DropdownItem on:click={() => (isJobStatesOpen = true)}>
<DropdownItem onclick={() => (isJobStatesOpen = true)}>
<Icon name="gear-fill" /> Job States
</DropdownItem>
<DropdownItem on:click={() => (isStartTimeOpen = true)}>
<DropdownItem onclick={() => (isStartTimeOpen = true)}>
<Icon name="calendar-range" /> Start Time
</DropdownItem>
<DropdownItem on:click={() => (isDurationOpen = true)}>
<DropdownItem onclick={() => (isDurationOpen = true)}>
<Icon name="stopwatch" /> Duration
</DropdownItem>
<DropdownItem on:click={() => (isTagsOpen = true)}>
<DropdownItem onclick={() => (isTagsOpen = true)}>
<Icon name="tags" /> Tags
</DropdownItem>
<DropdownItem on:click={() => (isResourcesOpen = true)}>
<DropdownItem onclick={() => (isResourcesOpen = true)}>
<Icon name="hdd-stack" /> Resources
</DropdownItem>
<DropdownItem on:click={() => (isEnergyOpen = true)}>
<DropdownItem onclick={() => (isEnergyOpen = true)}>
<Icon name="lightning-charge-fill" /> Energy
</DropdownItem>
<DropdownItem on:click={() => (isStatsOpen = true)}>
<Icon name="bar-chart" on:click={() => (isStatsOpen = true)} /> Statistics
<DropdownItem onclick={() => (isStatsOpen = true)}>
<Icon name="bar-chart" onclick={() => (isStatsOpen = true)} /> Statistics
</DropdownItem>
{#if startTimeQuickSelect}
<DropdownItem divider />
<DropdownItem disabled>Start Time Quick Selection</DropdownItem>
{#each startTimeSelectOptions.filter((stso) => stso.range !== "") as { rangeLabel, range }}
<DropdownItem
on:click={() => {
onclick={() => {
filters.startTime.from = null
filters.startTime.to = null
filters.startTime.range = range;
@ -353,7 +344,7 @@
{/if}
{#if matchedJobs >= -1}
<Button class="mb-1" style="margin-right: 0.5rem;" disabled outline>
<Button class="mb-1" style="margin-right: 0.25rem;" disabled outline>
{matchedJobs == -1 ? 'Loading ...' : `${matchedJobs} jobs`}
</Button>
{/if}
@ -362,7 +353,7 @@
{#if showFilter}
<!-- SELECTED FILTER PILLS -->
{#if filters.cluster}
<Info icon="cpu" on:click={() => (isClusterOpen = true)}>
<Info icon="cpu" onclick={() => (isClusterOpen = true)}>
{filters.cluster}
{#if filters.partition}
({filters.partition})
@ -370,14 +361,14 @@
</Info>
{/if}
{#if filters.states.length != allJobStates.length}
<Info icon="gear-fill" on:click={() => (isJobStatesOpen = true)}>
{#if filters.states.length != allJobStates?.length}
<Info icon="gear-fill" onclick={() => (isJobStatesOpen = true)}>
{filters.states.join(", ")}
</Info>
{/if}
{#if filters.startTime.from || filters.startTime.to}
<Info icon="calendar-range" on:click={() => (isStartTimeOpen = true)}>
<Info icon="calendar-range" onclick={() => (isStartTimeOpen = true)}>
{new Date(filters.startTime.from).toLocaleString()} - {new Date(
filters.startTime.to,
).toLocaleString()}
@ -385,13 +376,13 @@
{/if}
{#if filters.startTime.range}
<Info icon="calendar-range" on:click={() => (isStartTimeOpen = true)}>
<Info icon="calendar-range" onclick={() => (isStartTimeOpen = true)}>
{startTimeSelectOptions.find((stso) => stso.range === filters.startTime.range).rangeLabel }
</Info>
{/if}
{#if filters.duration.from || filters.duration.to}
<Info icon="stopwatch" on:click={() => (isDurationOpen = true)}>
<Info icon="stopwatch" onclick={() => (isDurationOpen = true)}>
{Math.floor(filters.duration.from / 3600)}h:{Math.floor(
(filters.duration.from % 3600) / 60,
)}m -
@ -402,7 +393,7 @@
{/if}
{#if filters.duration.lessThan}
<Info icon="stopwatch" on:click={() => (isDurationOpen = true)}>
<Info icon="stopwatch" onclick={() => (isDurationOpen = true)}>
Duration less than {Math.floor(
filters.duration.lessThan / 3600,
)}h:{Math.floor((filters.duration.lessThan % 3600) / 60)}m
@ -410,7 +401,7 @@
{/if}
{#if filters.duration.moreThan}
<Info icon="stopwatch" on:click={() => (isDurationOpen = true)}>
<Info icon="stopwatch" onclick={() => (isDurationOpen = true)}>
Duration more than {Math.floor(
filters.duration.moreThan / 3600,
)}h:{Math.floor((filters.duration.moreThan % 3600) / 60)}m
@ -418,47 +409,45 @@
{/if}
{#if filters.tags.length != 0}
<Info icon="tags" on:click={() => (isTagsOpen = true)}>
<Info icon="tags" onclick={() => (isTagsOpen = true)}>
{#each filters.tags as tagId}
{#key tagId}
<Tag id={tagId} clickable={false} />
{/key}
{/each}
</Info>
{/if}
{#if filters.numNodes.from != null || filters.numNodes.to != null || filters.numHWThreads.from != null || filters.numHWThreads.to != null || filters.numAccelerators.from != null || filters.numAccelerators.to != null}
<Info icon="hdd-stack" on:click={() => (isResourcesOpen = true)}>
{#if isNodesModified}
{#if filters.numNodes.from != null || filters.numNodes.to != null}
<Info icon="hdd-stack" onclick={() => (isResourcesOpen = true)}>
Nodes: {filters.numNodes.from} - {filters.numNodes.to}
</Info>
{/if}
{#if isNodesModified && isHwthreadsModified},
{/if}
{#if isHwthreadsModified}
{#if filters.numHWThreads.from != null || filters.numHWThreads.to != null}
<Info icon="cpu" onclick={() => (isResourcesOpen = true)}>
HWThreads: {filters.numHWThreads.from} - {filters.numHWThreads.to}
</Info>
{/if}
{#if (isNodesModified || isHwthreadsModified) && isAccsModified},
{/if}
{#if isAccsModified}
{#if filters.numAccelerators.from != null || filters.numAccelerators.to != null}
<Info icon="gpu-card" onclick={() => (isResourcesOpen = true)}>
Accelerators: {filters.numAccelerators.from} - {filters.numAccelerators.to}
{/if}
</Info>
{/if}
{#if filters.node != null}
<Info icon="hdd-stack" on:click={() => (isResourcesOpen = true)}>
<Info icon="hdd-stack" onclick={() => (isResourcesOpen = true)}>
Node{nodeMatchLabels[filters.nodeMatch]}: {filters.node}
</Info>
{/if}
{#if filters.energy.from || filters.energy.to}
<Info icon="lightning-charge-fill" on:click={() => (isEnergyOpen = true)}>
<Info icon="lightning-charge-fill" onclick={() => (isEnergyOpen = true)}>
Total Energy: {filters.energy.from} - {filters.energy.to}
</Info>
{/if}
{#if filters.stats.length > 0}
<Info icon="bar-chart" on:click={() => (isStatsOpen = true)}>
<Info icon="bar-chart" onclick={() => (isStatsOpen = true)}>
{filters.stats
.map((stat) => `${stat.field}: ${stat.from} - ${stat.to}`)
.join(", ")}
@ -467,69 +456,62 @@
{/if}
<Cluster
{disableClusterSelection}
bind:isOpen={isClusterOpen}
bind:cluster={filters.cluster}
bind:partition={filters.partition}
on:set-filter={() => updateFilters()}
presetCluster={filters.cluster}
presetPartition={filters.partition}
{disableClusterSelection}
setFilter={(filter) => updateFilters(filter)}
/>
<JobStates
bind:isOpen={isJobStatesOpen}
bind:states={filters.states}
on:set-filter={() => updateFilters()}
presetStates={filters.states}
setFilter={(filter) => updateFilters(filter)}
/>
<StartTime
bind:isOpen={isStartTimeOpen}
bind:from={filters.startTime.from}
bind:to={filters.startTime.to}
bind:range={filters.startTime.range}
{startTimeSelectOptions}
on:set-filter={() => updateFilters()}
presetStartTime={filters.startTime}
setFilter={(filter) => updateFilters(filter)}
/>
<Duration
bind:isOpen={isDurationOpen}
bind:lessThan={filters.duration.lessThan}
bind:moreThan={filters.duration.moreThan}
bind:from={filters.duration.from}
bind:to={filters.duration.to}
on:set-filter={() => updateFilters()}
presetDuration={filters.duration}
setFilter={(filter) => updateFilters(filter)}
/>
<Tags
bind:isOpen={isTagsOpen}
bind:tags={filters.tags}
on:set-filter={() => updateFilters()}
presetTags={filters.tags}
setFilter={(filter) => updateFilters(filter)}
/>
<Resources
cluster={filters.cluster}
bind:isOpen={isResourcesOpen}
bind:numNodes={filters.numNodes}
bind:numHWThreads={filters.numHWThreads}
bind:numAccelerators={filters.numAccelerators}
bind:namedNode={filters.node}
bind:nodeMatch={filters.nodeMatch}
bind:isNodesModified
bind:isHwthreadsModified
bind:isAccsModified
on:set-filter={() => updateFilters()}
/>
<Statistics
bind:isOpen={isStatsOpen}
bind:stats={filters.stats}
on:set-filter={() => updateFilters()}
activeCluster={filters.cluster}
presetNumNodes={filters.numNodes}
presetNumHWThreads={filters.numHWThreads}
presetNumAccelerators={filters.numAccelerators}
presetNamedNode={filters.node}
presetNodeMatch={filters.nodeMatch}
setFilter={(filter) => updateFilters(filter)}
/>
<Energy
bind:isOpen={isEnergyOpen}
bind:energy={filters.energy}
on:set-filter={() => updateFilters()}
presetEnergy={filters.energy}
setFilter={(filter) => updateFilters(filter)}
/>
<Statistics
bind:isOpen={isStatsOpen}
presetStats={filters.stats}
setFilter={(filter) => updateFilters(filter)}
/>
<style>
:global(.cc-dropdown-on-hover:hover .dropdown-menu) {
display: block;

138
web/frontend/src/generic/JobCompare.svelte
View File

@ -23,27 +23,18 @@
import { formatTime, roundTwoDigits } from "./units.js";
import Comparogram from "./plots/Comparogram.svelte";
const ccconfig = getContext("cc-config"),
// initialized = getContext("initialized"),
globalMetrics = getContext("globalMetrics");
/* Svelte 5 Props */
let {
matchedCompareJobs = $bindable(0),
metrics = $bindable(ccconfig?.plot_list_selectedMetrics),
filterBuffer = [],
} = $props();
export let matchedCompareJobs = 0;
export let metrics = ccconfig.plot_list_selectedMetrics;
export let filterBuffer = [];
let filter = [...filterBuffer] || [];
let comparePlotData = {};
let compareTableData = [];
let compareTableSorting = {};
let jobIds = [];
let jobClusters = [];
let tableJobIDFilter = "";
/*uPlot*/
let plotSync = uPlot.sync("compareJobsView");
/* GQL */
/* Const Init */
const client = getContextClient();
const ccconfig = getContext("cc-config");
const globalMetrics = getContext("globalMetrics");
// const initialized = getContext("initialized");
// Pull All Series For Metrics Statistics Only On Node Scope
const compareQuery = gql`
query ($filter: [JobFilter!]!, $metrics: [String!]!) {
@ -69,48 +60,54 @@
}
`;
/* REACTIVES */
/* Var Init*/
let plotSync = uPlot.sync("compareJobsView");
$: compareData = queryStore({
/* State Init */
let filter = $state([...filterBuffer] || []);
let tableJobIDFilter = $state("");
/* Derived*/
const compareData = $derived(queryStore({
client: client,
query: compareQuery,
variables:{ filter, metrics },
});
$: matchedCompareJobs = $compareData.data != null ? $compareData.data.jobsMetricStats.length : -1;
$: if ($compareData.data != null) {
jobIds = [];
jobClusters = [];
comparePlotData = {};
compareTableData = [...$compareData.data.jobsMetricStats];
jobs2uplot($compareData.data.jobsMetricStats, metrics);
}
$: if ((!$compareData.fetching && !$compareData.error) && metrics) {
})
);
let jobIds = $derived($compareData?.data ? $compareData.data.jobsMetricStats.map((jms) => jms.jobId) : []);
let jobClusters = $derived($compareData?.data ? $compareData.data.jobsMetricStats.map((jms) => `${jms.cluster} ${jms.subCluster}`) : []);
let compareTableData = $derived($compareData?.data ? [...$compareData.data.jobsMetricStats] : []);
let comparePlotData = $derived($compareData?.data ? jobs2uplot($compareData.data.jobsMetricStats, metrics) : {});
let compareTableSorting = $derived.by(() => {
let pendingSort = {};
// Meta
compareTableSorting['meta'] = {
pendingSort['meta'] = {
startTime: { dir: "down", active: true },
duration: { dir: "up", active: false },
cluster: { dir: "up", active: false },
};
// Resources
compareTableSorting['resources'] = {
pendingSort['resources'] = {
Nodes: { dir: "up", active: false },
Threads: { dir: "up", active: false },
Accs: { dir: "up", active: false },
};
// Metrics
for (let metric of metrics) {
compareTableSorting[metric] = {
pendingSort[metric] = {
min: { dir: "up", active: false },
avg: { dir: "up", active: false },
max: { dir: "up", active: false },
};
}
}
return pendingSort;
});
/* FUNCTIONS */
/* Effect */
$effect(() => {
matchedCompareJobs = $compareData?.data != null ? $compareData.data.jobsMetricStats.length : -1;
});
/* Functions */
// (Re-)query and optionally set new filters; Query will be started reactively.
export function queryJobs(filters) {
if (filters != null) {
@ -133,6 +130,7 @@
}
compareTableSorting = { ...compareTableSorting };
let pendingCompareData;
if (key == 'resources') {
let longField = "";
switch (field) {
@ -148,12 +146,13 @@
default:
console.log("Unknown Res Field", field)
}
compareTableData = compareTableData.sort((j1, j2) => {
pendingCompareData = compareTableData.sort((j1, j2) => {
if (j1[longField] == null || j2[longField] == null) return -1;
return s.dir != "up" ? j1[longField] - j2[longField] : j2[longField] - j1[longField];
});
} else if (key == 'meta') {
compareTableData = compareTableData.sort((j1, j2) => {
pendingCompareData = compareTableData.sort((j1, j2) => {
if (j1[field] == null || j2[field] == null) return -1;
if (field == 'cluster') {
let c1 = `${j1.cluster} (${j1.subCluster})`
@ -164,52 +163,54 @@
}
});
} else {
compareTableData = compareTableData.sort((j1, j2) => {
pendingCompareData = compareTableData.sort((j1, j2) => {
let s1 = j1.stats.find((m) => m.name == key)?.data;
let s2 = j2.stats.find((m) => m.name == key)?.data;
if (s1 == null || s2 == null) return -1;
return s.dir != "up" ? s1[field] - s2[field] : s2[field] - s1[field];
});
}
compareTableData = [...pendingCompareData]
}
function jobs2uplot(jobs, metrics) {
// Proxy Init
let pendingComparePlotData = {};
// Resources Init
comparePlotData['resources'] = {unit:'', data: [[],[],[],[],[],[]]} // data: [X, XST, XRT, YNODES, YTHREADS, YACCS]
pendingComparePlotData['resources'] = {unit:'', data: [[],[],[],[],[],[]]} // data: [X, XST, XRT, YNODES, YTHREADS, YACCS]
// Metric Init
for (let m of metrics) {
// Get Unit
const rawUnit = globalMetrics.find((gm) => gm.name == m)?.unit
const metricUnit = (rawUnit?.prefix ? rawUnit.prefix : "") + (rawUnit?.base ? rawUnit.base : "")
comparePlotData[m] = {unit: metricUnit, data: [[],[],[],[],[],[]]} // data: [X, XST, XRT, YMIN, YAVG, YMAX]
pendingComparePlotData[m] = {unit: metricUnit, data: [[],[],[],[],[],[]]} // data: [X, XST, XRT, YMIN, YAVG, YMAX]
}
// Iterate jobs if exists
if (jobs) {
let plotIndex = 0
jobs.forEach((j) => {
// Collect JobIDs & Clusters for X-Ticks and Legend
jobIds.push(j.jobId)
jobClusters.push(`${j.cluster} ${j.subCluster}`)
// Resources
comparePlotData['resources'].data[0].push(plotIndex)
comparePlotData['resources'].data[1].push(j.startTime)
comparePlotData['resources'].data[2].push(j.duration)
comparePlotData['resources'].data[3].push(j.numNodes)
comparePlotData['resources'].data[4].push(j?.numHWThreads?j.numHWThreads:0)
comparePlotData['resources'].data[5].push(j?.numAccelerators?j.numAccelerators:0)
pendingComparePlotData['resources'].data[0].push(plotIndex)
pendingComparePlotData['resources'].data[1].push(j.startTime)
pendingComparePlotData['resources'].data[2].push(j.duration)
pendingComparePlotData['resources'].data[3].push(j.numNodes)
pendingComparePlotData['resources'].data[4].push(j?.numHWThreads?j.numHWThreads:0)
pendingComparePlotData['resources'].data[5].push(j?.numAccelerators?j.numAccelerators:0)
// Metrics
for (let s of j.stats) {
comparePlotData[s.name].data[0].push(plotIndex)
comparePlotData[s.name].data[1].push(j.startTime)
comparePlotData[s.name].data[2].push(j.duration)
comparePlotData[s.name].data[3].push(s.data.min)
comparePlotData[s.name].data[4].push(s.data.avg)
comparePlotData[s.name].data[5].push(s.data.max)
pendingComparePlotData[s.name].data[0].push(plotIndex)
pendingComparePlotData[s.name].data[1].push(j.startTime)
pendingComparePlotData[s.name].data[2].push(j.duration)
pendingComparePlotData[s.name].data[3].push(s.data.min)
pendingComparePlotData[s.name].data[4].push(s.data.avg)
pendingComparePlotData[s.name].data[5].push(s.data.max)
}
plotIndex++
})
}
return {...pendingComparePlotData};
}
// Adapt for Persisting Job Selections in DB later down the line
@ -238,7 +239,6 @@
// }
// });
// }
</script>
{#if $compareData.fetching}
@ -265,7 +265,7 @@
xticks={jobIds}
xinfo={jobClusters}
ylabel={'Resource Counts'}
data={comparePlotData['resources'].data}
data={comparePlotData['resources']?.data}
{plotSync}
forResources
/>
@ -281,8 +281,8 @@
xinfo={jobClusters}
ylabel={m}
metric={m}
yunit={comparePlotData[m].unit}
data={comparePlotData[m].data}
yunit={comparePlotData[m]?.unit}
data={comparePlotData[m]?.data}
{plotSync}
/>
</Col>
@ -314,7 +314,7 @@
</InputGroupText>
</InputGroup>
</th>
<th on:click={() => sortBy('meta', 'startTime')}>
<th onclick={() => sortBy('meta', 'startTime')}>
Sort
<Icon
name="caret-{compareTableSorting['meta']['startTime'].dir}{compareTableSorting['meta']['startTime']
@ -323,7 +323,7 @@
: ''}"
/>
</th>
<th on:click={() => sortBy('meta', 'duration')}>
<th onclick={() => sortBy('meta', 'duration')}>
Sort
<Icon
name="caret-{compareTableSorting['meta']['duration'].dir}{compareTableSorting['meta']['duration']
@ -332,7 +332,7 @@
: ''}"
/>
</th>
<th on:click={() => sortBy('meta', 'cluster')}>
<th onclick={() => sortBy('meta', 'cluster')}>
Sort
<Icon
name="caret-{compareTableSorting['meta']['cluster'].dir}{compareTableSorting['meta']['cluster']
@ -342,7 +342,7 @@
/>
</th>
{#each ["Nodes", "Threads", "Accs"] as res}
<th on:click={() => sortBy('resources', res)}>
<th onclick={() => sortBy('resources', res)}>
{res}
<Icon
name="caret-{compareTableSorting['resources'][res].dir}{compareTableSorting['resources'][res]
@ -354,7 +354,7 @@
{/each}
{#each metrics as metric}
{#each ["min", "avg", "max"] as stat}
<th on:click={() => sortBy(metric, stat)}>
<th onclick={() => sortBy(metric, stat)}>
{stat.charAt(0).toUpperCase() + stat.slice(1)}
<Icon
name="caret-{compareTableSorting[metric][stat].dir}{compareTableSorting[metric][stat]

21
web/frontend/src/generic/JobList.svelte
View File

@ -113,11 +113,6 @@
variables: { paging, sorting, filter },
});
$: if (!usePaging && sorting) {
// console.log('Reset Paging ...')
paging = { itemsPerPage: 10, page: 1 }
};
let jobs = [];
$: if ($initialized && $jobsStore.data) {
if (usePaging) {
@ -143,10 +138,20 @@
}
}
$: if (!usePaging && (sorting || filter)) {
// Continous Scroll: Reset list and paging if parameters change: Existing entries will not match new selections
jobs = [];
paging = { itemsPerPage: 10, page: 1 };
}
$: matchedListJobs = $jobsStore.data != null ? $jobsStore.data.jobs.count : -1;
// Force refresh list with existing unchanged variables (== usually would not trigger reactivity)
export function refreshJobs() {
if (!usePaging) {
jobs = []; // Empty Joblist before refresh, prevents infinite buildup
paging = { itemsPerPage: 10, page: 1 };
}
jobsStore = queryStore({
client: client,
query: query,
@ -285,7 +290,7 @@
</td>
</tr>
{:else}
{#each jobs as job (job)}
{#each jobs as job (job.id)}
<JobListRow bind:triggerMetricRefresh {job} {metrics} {plotWidth} {showFootprint} previousSelect={selectedJobs.includes(job.id)}
on:select-job={({detail}) => selectedJobs = [...selectedJobs, detail]}
on:unselect-job={({detail}) => selectedJobs = selectedJobs.filter(item => item !== detail)}
@ -312,11 +317,11 @@
{#if usePaging}
<Pagination
bind:page
{page}
{itemsPerPage}
itemText="Jobs"
totalItems={matchedListJobs}
on:update-paging={({ detail }) => {
updatePaging={(detail) => {
if (detail.itemsPerPage != itemsPerPage) {
updateConfiguration(detail.itemsPerPage.toString(), detail.page);
} else {

12
web/frontend/src/generic/PlotGrid.svelte
View File

@ -14,6 +14,18 @@
export let itemsPerRow
export let items
/* Migtation Notes
* Requirements
* - Parent Components must be already Migrated
* - TODO: Job.root.svelte, Node.root.svelte
* - DONE: Analysis, Status, User
*
* How-To
* - Define "Plot-Slotcode" as SV5 Snippet with argument "item" in parent (!)
* - Pass new snippet as argument/prop to here
* - @render snippet in items-loop with argument == item
*/
</script>
<Row cols={{ xs: 1, sm: 2, md: 3, lg: itemsPerRow}}>

59
web/frontend/src/generic/PlotTable.svelte
View File

@ -1,59 +0,0 @@
<!--
@component Organized display of plots as table
Properties:
- `itemsPerRow Number`: Elements to render per row
- `items [Any]`: List of plot components to render
- `padding Number`: Padding between plot elements
- `renderFor String`: If 'job', filter disabled metrics
-->
<script>
export let itemsPerRow
export let items
export let padding = 10
export let renderFor
let rows = []
let tableWidth = 0
const isPlaceholder = x => x._is_placeholder === true
function tile(items, itemsPerRow) {
const rows = []
for (let ri = 0; ri < items.length; ri += itemsPerRow) {
const row = []
for (let ci = 0; ci < itemsPerRow; ci += 1) {
if (ri + ci < items.length)
row.push(items[ri + ci])
else
row.push({ _is_placeholder: true, ri, ci })
}
rows.push(row)
}
return rows
}
$: if (renderFor === 'job') {
rows = tile(items.filter(item => item.disabled === false), itemsPerRow)
} else {
rows = tile(items, itemsPerRow)
}
$: plotWidth = (tableWidth / itemsPerRow) - (padding * itemsPerRow)
</script>
<table bind:clientWidth={tableWidth} style="width: 100%; table-layout: fixed;">
{#each rows as row}
<tr>
{#each row as item (item)}
<td style="vertical-align:top;"> <!-- For Aligning Notice Cards -->
{#if !isPlaceholder(item) && plotWidth > 0}
<slot item={item} width={plotWidth}></slot>
{/if}
</td>
{/each}
</tr>
{/each}
</table>

59
web/frontend/src/generic/filters/Cluster.svelte
View File

@ -13,7 +13,7 @@
-->
<script>
import { createEventDispatcher, getContext } from "svelte";
import { getContext } from "svelte";
import {
Button,
ListGroup,
@ -24,18 +24,23 @@
ModalFooter,
} from "@sveltestrap/sveltestrap";
const clusters = getContext("clusters"),
initialized = getContext("initialized"),
dispatch = createEventDispatcher();
/* Svelte 5 Props */
let {
isOpen = $bindable(false),
presetCluster = "",
presetPartition = "",
disableClusterSelection = false,
setFilter
} = $props();
/* State Init */
let pendingCluster = $state(presetCluster);
let pendingPartition = $state(presetPartition);
/* Derived Vars */
const clusters = $derived(getContext("clusters"));
const initialized = $derived(getContext("initialized"));
export let disableClusterSelection = false;
export let isModified = false;
export let isOpen = false;
export let cluster = null;
export let partition = null;
let pendingCluster = cluster,
pendingPartition = partition;
$: isModified = pendingCluster != cluster || pendingPartition != partition;
</script>
<Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
@ -45,13 +50,13 @@
<h4>Cluster</h4>
{#if disableClusterSelection}
<Button color="info" class="w-100 mb-2" disabled><b>Info: Cluster Selection Disabled in This View</b></Button>
<Button outline color="primary" class="w-100 mb-2" disabled><b>Selected Cluster: {cluster}</b></Button>
<Button outline color="primary" class="w-100 mb-2" disabled><b>Selected Cluster: {presetCluster}</b></Button>
{:else}
<ListGroup>
<ListGroupItem
disabled={disableClusterSelection}
active={pendingCluster == null}
on:click={() => ((pendingCluster = null), (pendingPartition = null))}
onclick={() => ((pendingCluster = null), (pendingPartition = null))}
>
Any Cluster
</ListGroupItem>
@ -59,7 +64,7 @@
<ListGroupItem
disabled={disableClusterSelection}
active={pendingCluster == cluster.name}
on:click={() => (
onclick={() => (
(pendingCluster = cluster.name), (pendingPartition = null)
)}
>
@ -75,14 +80,14 @@
<ListGroup>
<ListGroupItem
active={pendingPartition == null}
on:click={() => (pendingPartition = null)}
onclick={() => (pendingPartition = null)}
>
Any Partition
</ListGroupItem>
{#each clusters.find((c) => c.name == pendingCluster).partitions as partition}
{#each clusters?.find((c) => c.name == pendingCluster)?.partitions as partition}
<ListGroupItem
active={pendingPartition == partition}
on:click={() => (pendingPartition = partition)}
onclick={() => (pendingPartition = partition)}
>
{partition}
</ListGroupItem>
@ -93,22 +98,22 @@
<ModalFooter>
<Button
color="primary"
on:click={() => {
onclick={() => {
isOpen = false;
cluster = pendingCluster;
partition = pendingPartition;
dispatch("set-filter", { cluster, partition });
setFilter({ cluster: pendingCluster, partition: pendingPartition });
}}>Close & Apply</Button
>
{#if !disableClusterSelection}
<Button
color="danger"
on:click={() => {
onclick={() => {
isOpen = false;
cluster = pendingCluster = null;
partition = pendingPartition = null;
dispatch("set-filter", { cluster, partition });
pendingCluster = null;
pendingPartition = null;
setFilter({ cluster: pendingCluster, partition: pendingPartition})
}}>Reset</Button
>
<Button on:click={() => (isOpen = false)}>Close</Button>
{/if}
<Button onclick={() => (isOpen = false)}>Close</Button>
</ModalFooter>
</Modal>

160
web/frontend/src/generic/filters/Duration.svelte
View File

@ -13,7 +13,6 @@
-->
<script>
import { createEventDispatcher } from "svelte";
import {
Row,
Col,
@ -24,61 +23,81 @@
ModalFooter,
} from "@sveltestrap/sveltestrap";
const dispatch = createEventDispatcher();
/* Svelte 5 Props */
let {
isOpen = $bindable(false),
presetDuration ={lessThan: null, moreThan: null, from: null, to: null},
setFilter
} = $props();
export let isOpen = false;
export let lessThan = null;
export let moreThan = null;
export let from = null;
export let to = null;
/* State Init */
let pendingDuration = $state(presetDuration);
let lessState = $state(secsToHoursAndMins(presetDuration?.lessThan));
let moreState = $state(secsToHoursAndMins(presetDuration?.moreThan));
let fromState = $state(secsToHoursAndMins(presetDuration?.from));
let toState = $state(secsToHoursAndMins(presetDuration?.to));
let pendingLessThan, pendingMoreThan, pendingFrom, pendingTo;
let lessDisabled = false,
moreDisabled = false,
betweenDisabled = false;
/* Derived Init */
const lessDisabled = $derived(
moreState.hours !== 0 ||
moreState.mins !== 0 ||
fromState.hours !== 0 ||
fromState.mins !== 0 ||
toState.hours !== 0 ||
toState.mins !== 0
);
function reset() {
pendingLessThan =
lessThan == null ? { hours: 0, mins: 0 } : secsToHoursAndMins(lessThan);
pendingMoreThan =
moreThan == null ? { hours: 0, mins: 0 } : secsToHoursAndMins(moreThan);
pendingFrom =
from == null ? { hours: 0, mins: 0 } : secsToHoursAndMins(from);
pendingTo = to == null ? { hours: 0, mins: 0 } : secsToHoursAndMins(to);
const moreDisabled = $derived(
lessState.hours !== 0 ||
lessState.mins !== 0 ||
fromState.hours !== 0 ||
fromState.mins !== 0 ||
toState.hours !== 0 ||
toState.mins !== 0
);
const betweenDisabled = $derived(
moreState.hours !== 0 ||
moreState.mins !== 0 ||
lessState.hours !== 0 ||
lessState.mins !== 0
)
/* Functions */
function resetPending() {
pendingDuration = {
lessThan: null,
moreThan: null,
from: null,
to: null
}
};
reset();
function resetStates() {
lessState = { hours: 0, mins: 0 }
moreState = { hours: 0, mins: 0 }
fromState = { hours: 0, mins: 0 }
toState = { hours: 0, mins: 0 }
};
function secsToHoursAndMins(duration) {
const hours = Math.floor(duration / 3600);
duration -= hours * 3600;
const mins = Math.floor(duration / 60);
function secsToHoursAndMins(seconds) {
if (seconds) {
const hours = Math.floor(seconds / 3600);
seconds -= hours * 3600;
const mins = Math.floor(seconds / 60);
return { hours, mins };
} else {
return { hours: 0, mins: 0 }
}
}
function hoursAndMinsToSecs({ hours, mins }) {
return hours * 3600 + mins * 60;
function hoursAndMinsToSecs(hoursAndMins) {
if (hoursAndMins) {
return hoursAndMins.hours * 3600 + hoursAndMins.mins * 60;
} else {
return 0
}
}
$: lessDisabled =
pendingMoreThan.hours !== 0 ||
pendingMoreThan.mins !== 0 ||
pendingFrom.hours !== 0 ||
pendingFrom.mins !== 0 ||
pendingTo.hours !== 0 ||
pendingTo.mins !== 0;
$: moreDisabled =
pendingLessThan.hours !== 0 ||
pendingLessThan.mins !== 0 ||
pendingFrom.hours !== 0 ||
pendingFrom.mins !== 0 ||
pendingTo.hours !== 0 ||
pendingTo.mins !== 0;
$: betweenDisabled =
pendingMoreThan.hours !== 0 ||
pendingMoreThan.mins !== 0 ||
pendingLessThan.hours !== 0 ||
pendingLessThan.mins !== 0;
</script>
<Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
@ -92,7 +111,7 @@
type="number"
min="0"
class="form-control"
bind:value={pendingMoreThan.hours}
bind:value={moreState.hours}
disabled={moreDisabled}
/>
<div class="input-group-append">
@ -107,7 +126,7 @@
min="0"
max="59"
class="form-control"
bind:value={pendingMoreThan.mins}
bind:value={moreState.mins}
disabled={moreDisabled}
/>
<div class="input-group-append">
@ -126,7 +145,7 @@
type="number"
min="0"
class="form-control"
bind:value={pendingLessThan.hours}
bind:value={lessState.hours}
disabled={lessDisabled}
/>
<div class="input-group-append">
@ -141,7 +160,7 @@
min="0"
max="59"
class="form-control"
bind:value={pendingLessThan.mins}
bind:value={lessState.mins}
disabled={lessDisabled}
/>
<div class="input-group-append">
@ -160,7 +179,7 @@
type="number"
min="0"
class="form-control"
bind:value={pendingFrom.hours}
bind:value={fromState.hours}
disabled={betweenDisabled}
/>
<div class="input-group-append">
@ -175,7 +194,7 @@
min="0"
max="59"
class="form-control"
bind:value={pendingFrom.mins}
bind:value={fromState.mins}
disabled={betweenDisabled}
/>
<div class="input-group-append">
@ -192,7 +211,7 @@
type="number"
min="0"
class="form-control"
bind:value={pendingTo.hours}
bind:value={toState.hours}
disabled={betweenDisabled}
/>
<div class="input-group-append">
@ -207,7 +226,7 @@
min="0"
max="59"
class="form-control"
bind:value={pendingTo.mins}
bind:value={toState.mins}
disabled={betweenDisabled}
/>
<div class="input-group-append">
@ -220,39 +239,32 @@
<ModalFooter>
<Button
color="primary"
on:click={() => {
onclick={() => {
isOpen = false;
lessThan = hoursAndMinsToSecs(pendingLessThan);
moreThan = hoursAndMinsToSecs(pendingMoreThan);
from = hoursAndMinsToSecs(pendingFrom);
to = hoursAndMinsToSecs(pendingTo);
dispatch("set-filter", { lessThan, moreThan, from, to });
pendingDuration.lessThan = hoursAndMinsToSecs(lessState);
pendingDuration.moreThan = hoursAndMinsToSecs(moreState);
pendingDuration.from = hoursAndMinsToSecs(fromState);
pendingDuration.to = hoursAndMinsToSecs(toState);
setFilter({duration: pendingDuration});
}}
>
Close & Apply
</Button>
<Button
color="warning"
on:click={() => {
lessThan = null;
moreThan = null;
from = null;
to = null;
reset();
onclick={() => {
resetStates();
}}>Reset Values</Button
>
<Button
color="danger"
on:click={() => {
onclick={() => {
isOpen = false;
lessThan = null;
moreThan = null;
from = null;
to = null;
reset();
dispatch("set-filter", { lessThan, moreThan, from, to });
resetStates();
resetPending();
setFilter({duration: pendingDuration});
}}>Reset Filter</Button
>
<Button on:click={() => (isOpen = false)}>Close</Button>
<Button onclick={() => (isOpen = false)}>Close</Button>
</ModalFooter>
</Modal>

45
web/frontend/src/generic/filters/Energy.svelte
View File

@ -10,7 +10,6 @@
-->
<script>
import { createEventDispatcher } from "svelte";
import {
Button,
Modal,
@ -20,49 +19,49 @@
} from "@sveltestrap/sveltestrap";
import DoubleRangeSlider from "../select/DoubleRangeSlider.svelte";
const dispatch = createEventDispatcher();
/* Svelte 5 Props */
let {
isOpen = $bindable(false),
presetEnergy= {from: null, to: null},
setFilter,
} = $props();
const energyMaximum = 1000.0;
/* State Init */
let energyState = $state(presetEnergy);
export let isOpen = false;
export let energy= {from: null, to: null};
function resetRanges() {
energy.from = null
energy.to = null
}
</script>
<Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
<ModalHeader>Filter based on energy</ModalHeader>
<ModalBody>
<h4>Total Job Energy (kWh)</h4>
<div class="mb-3">
<div class="mb-0"><b>Total Job Energy (kWh)</b></div>
<DoubleRangeSlider
on:change={({ detail }) => (
(energy.from = detail[0]), (energy.to = detail[1])
)}
min={0.0}
max={energyMaximum}
firstSlider={energy?.from ? energy.from : 0.0}
secondSlider={energy?.to ? energy.to : energyMaximum}
inputFieldFrom={energy?.from ? energy.from : null}
inputFieldTo={energy?.to ? energy.to : null}
changeRange={(detail) => {
energyState.from = detail[0];
energyState.to = detail[1];
}}
sliderMin={0.0}
sliderMax={1000.0}
fromPreset={energyState?.from? energyState.from : 0.0}
toPreset={energyState?.to? energyState.to : 1000.0}
/>
</div>
</ModalBody>
<ModalFooter>
<Button
color="primary"
on:click={() => {
isOpen = false;
dispatch("set-filter", { energy });
setFilter({ energy: energyState });
}}>Close & Apply</Button
>
<Button
color="danger"
on:click={() => {
isOpen = false;
resetRanges();
dispatch("set-filter", { energy });
energyState = {from: null, to: null};
setFilter({ energy: energyState });
}}>Reset</Button
>
<Button on:click={() => (isOpen = false)}>Close</Button>

16
web/frontend/src/generic/filters/InfoBox.svelte
View File

@ -4,16 +4,22 @@
Properties:
- `icon String`: Sveltestrap icon name
- `modified Bool?`: Optional if filter is modified [Default: false]
- `onclick Fn()`: Opens Modal on click
- `children Fn()?`: Internal prop, Svelte 5 version of <slot/>
-->
<script>
import { Button, Icon } from "@sveltestrap/sveltestrap";
export let icon;
export let modified = false;
/* Svelte 5 Props */
let { icon, modified, onclick, children } = $props();
</script>
<Button class="mr-2 mb-1" outline color={modified ? "warning" : "primary"} on:click>
<Button class="mr-2 mb-1" outline color={modified ? "warning" : "primary"} {onclick}>
<Icon name={icon} />
<slot />
{#if children}
<!-- Note: Ignore '@' Error in IDE -->
{@render children()}
{:else}
<span>No content found</span>
{/if}
</Button>

36
web/frontend/src/generic/filters/JobStates.svelte
View File

@ -13,7 +13,7 @@
- `const allJobStates [String]`: List of all available job states used in cc-backend
-->
<script context="module">
<script module>
export const allJobStates = [
"running",
"completed",
@ -27,7 +27,8 @@
</script>
<script>
import { createEventDispatcher } from "svelte";
/* Note: Ignore VSCode reported 'A component can only have one instance-level <script> element' error */
import {
Button,
ListGroup,
@ -38,16 +39,16 @@
ModalFooter,
} from "@sveltestrap/sveltestrap";
const dispatch = createEventDispatcher();
/* Svelte 5 Props */
let {
isOpen = $bindable(false),
presetStates = [...allJobStates],
setFilter
} = $props();
export let isModified = false;
export let isOpen = false;
export let states = [...allJobStates];
/* State Init */
let pendingStates = $state([...presetStates]);
let pendingStates = [...states];
$: isModified =
states.length != pendingStates.length ||
!states.every((state) => pendingStates.includes(state));
</script>
<Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
@ -71,28 +72,25 @@
<Button
color="primary"
disabled={pendingStates.length == 0}
on:click={() => {
onclick={() => {
isOpen = false;
states = [...pendingStates];
dispatch("set-filter", { states });
setFilter({ states: [...pendingStates] });
}}>Close & Apply</Button
>
<Button
color="warning"
on:click={() => {
states = [...allJobStates];
onclick={() => {
pendingStates = [];
}}>Deselect All</Button
>
<Button
color="danger"
on:click={() => {
onclick={() => {
isOpen = false;
states = [...allJobStates];
pendingStates = [...allJobStates];
dispatch("set-filter", { states });
setFilter({ states: [...pendingStates] });
}}>Reset</Button
>
<Button on:click={() => (isOpen = false)}>Close</Button>
<Button onclick={() => (isOpen = false)}>Close</Button>
</ModalFooter>
</Modal>

304
web/frontend/src/generic/filters/Resources.svelte
View File

@ -2,14 +2,11 @@
@component Filter sub-component for selecting job resources
Properties:
- `cluster Object?`: The currently selected cluster config [Default: null]
- `isOpen Bool?`: Is this filter component opened [Default: false]
- `activeCluster String?`: The currently selected cluster name [Default: null]
- `numNodes Object?`: The currently selected numNodes filter [Default: {from:null, to:null}]
- `numHWThreads Object?`: The currently selected numHWThreads filter [Default: {from:null, to:null}]
- `numAccelerators Object?`: The currently selected numAccelerators filter [Default: {from:null, to:null}]
- `isNodesModified Bool?`: Is the node filter modified [Default: false]
- `isHwthreadsModified Bool?`: Is the Hwthreads filter modified [Default: false]
- `isAccsModified Bool?`: Is the Accelerator filter modified [Default: false]
- `namedNode String?`: The currently selected single named node (= hostname) [Default: null]
Events:
@ -17,7 +14,7 @@
-->
<script>
import { createEventDispatcher, getContext } from "svelte";
import { getContext } from "svelte";
import {
Button,
Modal,
@ -28,27 +25,19 @@
} from "@sveltestrap/sveltestrap";
import DoubleRangeSlider from "../select/DoubleRangeSlider.svelte";
const clusters = getContext("clusters"),
initialized = getContext("initialized"),
dispatch = createEventDispatcher();
export let cluster = null;
export let isOpen = false;
export let numNodes = { from: null, to: null };
export let numHWThreads = { from: null, to: null };
export let numAccelerators = { from: null, to: null };
export let isNodesModified = false;
export let isHwthreadsModified = false;
export let isAccsModified = false;
export let namedNode = null;
export let nodeMatch = "eq"
let pendingNumNodes = numNodes,
pendingNumHWThreads = numHWThreads,
pendingNumAccelerators = numAccelerators,
pendingNamedNode = namedNode,
pendingNodeMatch = nodeMatch;
/* Svelte 5 Props*/
let {
isOpen = $bindable(false),
activeCluster = null,
presetNumNodes = { from: null, to: null },
presetNumHWThreads = { from: null, to: null },
presetNumAccelerators = { from: null, to: null },
presetNamedNode = null,
presetNodeMatch = "eq",
setFilter
} = $props()
/* Const Init */
const nodeMatchLabels = {
eq: "Equal To",
contains: "Contains",
@ -85,75 +74,133 @@
0,
);
let minNumNodes = 1,
maxNumNodes = 0,
minNumHWThreads = 1,
maxNumHWThreads = 0,
minNumAccelerators = 0,
maxNumAccelerators = 0;
$: {
/* State Init*/
// Counts
let minNumNodes = $state(1);
let maxNumNodes = $state(0);
let maxNumHWThreads = $state(0);
let maxNumAccelerators = $state(0);
// Pending
let pendingNumNodes = $state(presetNumNodes);
let pendingNumHWThreads = $state(presetNumHWThreads);
let pendingNumAccelerators = $state(presetNumAccelerators);
let pendingNamedNode = $state(presetNamedNode);
let pendingNodeMatch = $state(presetNodeMatch);
// Changable States
let nodesState = $state(presetNumNodes);
let threadState = $state(presetNumHWThreads);
let accState = $state(presetNumAccelerators);
/* Derived States */
const clusters = $derived(getContext("clusters"));
const initialized = $derived(getContext("initialized"));
// Is Selection Active
const nodesActive = $derived(!(JSON.stringify(nodesState) === JSON.stringify({ from: 1, to: maxNumNodes })));
const threadActive = $derived(!(JSON.stringify(threadState) === JSON.stringify({ from: 1, to: maxNumHWThreads })));
const accActive = $derived(!(JSON.stringify(accState) === JSON.stringify({ from: 0, to: maxNumAccelerators })));
// Block Apply if null
const disableApply = $derived(
nodesState.from === null || nodesState.to === null ||
threadState.from === null || threadState.to === null ||
accState.from === null || accState.to === null
);
/* Reactive Effects | Svelte 5 onMount */
$effect(() => {
if ($initialized) {
if (cluster != null) {
const { subClusters } = clusters.find((c) => c.name == cluster);
const { filterRanges } = header.clusters.find((c) => c.name == cluster);
// 'hClusters' defined in templates/base.tmpl
if (activeCluster != null) {
const { filterRanges } = hClusters.find((c) => c.name == activeCluster);
minNumNodes = filterRanges.numNodes.from;
maxNumNodes = filterRanges.numNodes.to;
} else if (clusters.length > 0) {
for (let hc of hClusters) {
const { filterRanges } = hc;
minNumNodes = Math.min(minNumNodes, filterRanges.numNodes.from);
maxNumNodes = Math.max(maxNumNodes, filterRanges.numNodes.to);
};
};
};
});
$effect(() => {
if ($initialized) {
// 'hClusters' defined in templates/base.tmpl
if (activeCluster != null) {
const { subClusters } = clusters.find((c) => c.name == activeCluster);
maxNumAccelerators = findMaxNumAccels([{ subClusters }]);
maxNumHWThreads = findMaxNumHWThreadsPerNode([{ subClusters }]);
} else if (clusters.length > 0) {
const { filterRanges } = header.clusters[0];
minNumNodes = filterRanges.numNodes.from;
maxNumNodes = filterRanges.numNodes.to;
maxNumAccelerators = findMaxNumAccels(clusters);
maxNumHWThreads = findMaxNumHWThreadsPerNode(clusters);
for (let cluster of header.clusters) {
const { filterRanges } = cluster;
minNumNodes = Math.min(minNumNodes, filterRanges.numNodes.from);
maxNumNodes = Math.max(maxNumNodes, filterRanges.numNodes.to);
}
}
}
}
});
$: {
$effect(() => {
if (
isOpen &&
$initialized &&
pendingNumNodes.from == null &&
pendingNumNodes.to == null
) {
pendingNumNodes = { from: 0, to: maxNumNodes };
}
nodesState = { from: 1, to: maxNumNodes };
}
});
$: {
$effect(() => {
if (
isOpen &&
$initialized &&
((pendingNumHWThreads.from == null && pendingNumHWThreads.to == null) ||
isHwthreadsModified == false)
pendingNumHWThreads.from == null &&
pendingNumHWThreads.to == null
) {
pendingNumHWThreads = { from: 0, to: maxNumHWThreads };
}
threadState = { from: 1, to: maxNumHWThreads };
}
});
$: if (maxNumAccelerators != null && maxNumAccelerators > 1) {
$effect(() => {
if (
isOpen &&
$initialized &&
pendingNumAccelerators.from == null &&
pendingNumAccelerators.to == null
) {
pendingNumAccelerators = { from: 0, to: maxNumAccelerators };
}
accState = { from: 0, to: maxNumAccelerators };
}
});
/* Functions */
function setResources() {
if (nodesActive) {
pendingNumNodes = {...nodesState};
} else {
pendingNumNodes = { from: null, to: null };
};
if (threadActive) {
pendingNumHWThreads = {...threadState};
} else {
pendingNumHWThreads = { from: null, to: null };
};
if (accActive) {
pendingNumAccelerators = {...accState};
} else {
pendingNumAccelerators = { from: null, to: null };
};
};
function resetResources() {
pendingNumNodes = { from: null, to: null };
pendingNumHWThreads = { from: null, to: null };
pendingNumAccelerators = { from: null, to: null };
pendingNamedNode = null;
pendingNodeMatch = "eq";
};
</script>
<Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
<ModalHeader>Select number of utilized Resources</ModalHeader>
<ModalBody>
<h6>Named Node</h6>
<div class="d-flex">
<div><b>Named Node</b></div>
<div class="d-flex mb-3">
<Input type="text" class="w-75" bind:value={pendingNamedNode} />
<div class="mx-1"></div>
<Input type="select" class="w-25" bind:value={pendingNodeMatch}>
@ -164,82 +211,63 @@
{/each}
</Input>
</div>
<h6 style="margin-top: 1rem;">Number of Nodes</h6>
<div class="mb-3">
<div class="mb-0"><b>Number of Nodes</b></div>
<DoubleRangeSlider
on:change={({ detail }) => {
pendingNumNodes = { from: detail[0], to: detail[1] };
isNodesModified = true;
changeRange={(detail) => {
nodesState.from = detail[0];
nodesState.to = detail[1];
}}
min={minNumNodes}
max={maxNumNodes}
firstSlider={pendingNumNodes.from}
secondSlider={pendingNumNodes.to}
inputFieldFrom={pendingNumNodes.from}
inputFieldTo={pendingNumNodes.to}
sliderMin={minNumNodes}
sliderMax={maxNumNodes}
fromPreset={nodesState.from}
toPreset={nodesState.to}
/>
<h6 style="margin-top: 1rem;">
Number of HWThreads (Use for Single-Node Jobs)
</h6>
</div>
<div class="mb-3">
<div class="mb-0"><b>Number of HWThreads</b> (Use for Single-Node Jobs)</div>
<DoubleRangeSlider
on:change={({ detail }) => {
pendingNumHWThreads = { from: detail[0], to: detail[1] };
isHwthreadsModified = true;
changeRange={(detail) => {
threadState.from = detail[0];
threadState.to = detail[1];
}}
min={minNumHWThreads}
max={maxNumHWThreads}
firstSlider={pendingNumHWThreads.from}
secondSlider={pendingNumHWThreads.to}
inputFieldFrom={pendingNumHWThreads.from}
inputFieldTo={pendingNumHWThreads.to}
sliderMin={1}
sliderMax={maxNumHWThreads}
fromPreset={threadState.from}
toPreset={threadState.to}
/>
</div>
{#if maxNumAccelerators != null && maxNumAccelerators > 1}
<h6 style="margin-top: 1rem;">Number of Accelerators</h6>
<div>
<div class="mb-0"><b>Number of Accelerators</b></div>
<DoubleRangeSlider
on:change={({ detail }) => {
pendingNumAccelerators = { from: detail[0], to: detail[1] };
isAccsModified = true;
changeRange={(detail) => {
accState.from = detail[0];
accState.to = detail[1];
}}
min={minNumAccelerators}
max={maxNumAccelerators}
firstSlider={pendingNumAccelerators.from}
secondSlider={pendingNumAccelerators.to}
inputFieldFrom={pendingNumAccelerators.from}
inputFieldTo={pendingNumAccelerators.to}
sliderMin={0}
sliderMax={maxNumAccelerators}
fromPreset={accState.from}
toPreset={accState.to}
/>
</div>
{/if}
</ModalBody>
<ModalFooter>
<Button
color="primary"
disabled={pendingNumNodes.from == null || pendingNumNodes.to == null}
on:click={() => {
disabled={disableApply}
onclick={() => {
isOpen = false;
pendingNumNodes = isNodesModified
? pendingNumNodes
: { from: null, to: null };
pendingNumHWThreads = isHwthreadsModified
? pendingNumHWThreads
: { from: null, to: null };
pendingNumAccelerators = isAccsModified
? pendingNumAccelerators
: { from: null, to: null };
numNodes = { from: pendingNumNodes.from, to: pendingNumNodes.to };
numHWThreads = {
from: pendingNumHWThreads.from,
to: pendingNumHWThreads.to,
};
numAccelerators = {
from: pendingNumAccelerators.from,
to: pendingNumAccelerators.to,
};
namedNode = pendingNamedNode;
nodeMatch = pendingNodeMatch;
dispatch("set-filter", {
numNodes,
numHWThreads,
numAccelerators,
namedNode,
nodeMatch
setResources();
setFilter({
numNodes: pendingNumNodes,
numHWThreads: pendingNumHWThreads,
numAccelerators: pendingNumAccelerators,
node: pendingNamedNode,
nodeMatch: pendingNodeMatch
});
}}
>
@ -247,36 +275,18 @@
</Button>
<Button
color="danger"
on:click={() => {
onclick={() => {
isOpen = false;
pendingNumNodes = { from: null, to: null };
pendingNumHWThreads = { from: null, to: null };
pendingNumAccelerators = { from: null, to: null };
pendingNamedNode = null;
pendingNodeMatch = null;
numNodes = { from: pendingNumNodes.from, to: pendingNumNodes.to };
numHWThreads = {
from: pendingNumHWThreads.from,
to: pendingNumHWThreads.to,
};
numAccelerators = {
from: pendingNumAccelerators.from,
to: pendingNumAccelerators.to,
};
isNodesModified = false;
isHwthreadsModified = false;
isAccsModified = false;
namedNode = pendingNamedNode;
nodeMatch = pendingNodeMatch;
dispatch("set-filter", {
numNodes,
numHWThreads,
numAccelerators,
namedNode,
nodeMatch
resetResources();
setFilter({
numNodes: pendingNumNodes,
numHWThreads: pendingNumHWThreads,
numAccelerators: pendingNumAccelerators,
node: pendingNamedNode,
nodeMatch: pendingNodeMatch
});
}}>Reset</Button
>
<Button on:click={() => (isOpen = false)}>Close</Button>
<Button onclick={() => (isOpen = false)}>Close</Button>
</ModalFooter>
</Modal>

143
web/frontend/src/generic/filters/StartTime.svelte
View File

@ -12,8 +12,19 @@
- `set-filter, {String?, String?}`: Set 'from, to' filter in upstream component
-->
<script module>
export const startTimeSelectOptions = [
{ range: "", rangeLabel: "No Selection"},
{ range: "last6h", rangeLabel: "Last 6hrs"},
{ range: "last24h", rangeLabel: "Last 24hrs"},
{ range: "last7d", rangeLabel: "Last 7 days"},
{ range: "last30d", rangeLabel: "Last 30 days"}
];
</script>
<script>
import { createEventDispatcher } from "svelte";
/* Note: Ignore VSCode reported 'A component can only have one instance-level <script> element' error */
import { parse, format, sub } from "date-fns";
import {
Row,
@ -26,44 +37,39 @@
FormGroup,
} from "@sveltestrap/sveltestrap";
const dispatch = createEventDispatcher();
export let isModified = false;
export let isOpen = false;
export let from = null;
export let to = null;
export let range = "";
export let startTimeSelectOptions;
/* Svelte 5 Props */
let {
isOpen = $bindable(false),
presetStartTime = { from: null, to: null, range: "" },
setFilter
} = $props();
/* Const Init */
const now = new Date(Date.now());
const ago = sub(now, { months: 1 });
const defaultFrom = {
date: format(ago, "yyyy-MM-dd"),
time: format(ago, "HH:mm"),
};
const defaultTo = {
date: format(now, "yyyy-MM-dd"),
time: format(now, "HH:mm"),
};
const resetFrom = { date: format(ago, "yyyy-MM-dd"), time: format(ago, "HH:mm")};
const resetTo = { date: format(now, "yyyy-MM-dd"), time: format(now, "HH:mm")};
$: pendingFrom = (from == null) ? defaultFrom : fromRFC3339(from)
$: pendingTo = (to == null) ? defaultTo : fromRFC3339(to)
$: pendingRange = range
/* State Init */
let pendingStartTime = $state(presetStartTime);
let fromState = $state(fromRFC3339(presetStartTime?.from, resetFrom));
let toState = $state(fromRFC3339(presetStartTime?.to, resetTo));
$: isModified =
(from != toRFC3339(pendingFrom) || to != toRFC3339(pendingTo, "59")) &&
(range != pendingRange) &&
!(
from == null &&
pendingFrom.date == "0000-00-00" &&
pendingFrom.time == "00:00"
) &&
!(
to == null &&
pendingTo.date == "0000-00-00" &&
pendingTo.time == "00:00"
) &&
!( range == "" && pendingRange == "");
/* Derived Init*/
const rangeSelect = $derived(pendingStartTime?.range ? pendingStartTime.range : "")
/* Functions */
function fromRFC3339(rfc3339, reset) {
if (rfc3339) {
const parsedDate = new Date(rfc3339);
return {
date: format(parsedDate, "yyyy-MM-dd"),
time: format(parsedDate, "HH:mm"),
}
} else {
return reset
}
}
function toRFC3339({ date, time }, secs = "00") {
const parsedDate = parse(
@ -73,26 +79,18 @@
);
return parsedDate.toISOString();
}
function fromRFC3339(rfc3339) {
const parsedDate = new Date(rfc3339);
return {
date: format(parsedDate, "yyyy-MM-dd"),
time: format(parsedDate, "HH:mm"),
};
}
</script>
<Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
<ModalHeader>Select Start Time</ModalHeader>
<ModalBody>
{#if range !== ""}
{#if rangeSelect !== ""}
<h4>Current Range</h4>
<Row>
<FormGroup class="col">
<Input type ="select" bind:value={pendingRange} >
<Input type ="select" bind:value={pendingStartTime.range} >
{#each startTimeSelectOptions as { rangeLabel, range }}
<option label={rangeLabel} value={range}/>
<option label={rangeLabel} value={range}></option>
{/each}
</Input>
</FormGroup>
@ -101,42 +99,41 @@
<h4>From</h4>
<Row>
<FormGroup class="col">
<Input type="date" bind:value={pendingFrom.date} disabled={pendingRange !== ""}/>
<Input type="date" bind:value={fromState.date} disabled={rangeSelect !== ""}/>
</FormGroup>
<FormGroup class="col">
<Input type="time" bind:value={pendingFrom.time} disabled={pendingRange !== ""}/>
<Input type="time" bind:value={fromState.time} disabled={rangeSelect !== ""}/>
</FormGroup>
</Row>
<h4>To</h4>
<Row>
<FormGroup class="col">
<Input type="date" bind:value={pendingTo.date} disabled={pendingRange !== ""}/>
<Input type="date" bind:value={toState.date} disabled={rangeSelect !== ""}/>
</FormGroup>
<FormGroup class="col">
<Input type="time" bind:value={pendingTo.time} disabled={pendingRange !== ""}/>
<Input type="time" bind:value={toState.time} disabled={rangeSelect !== ""}/>
</FormGroup>
</Row>
</ModalBody>
<ModalFooter>
{#if pendingRange !== ""}
{#if rangeSelect !== ""}
<Button
color="warning"
disabled={pendingRange === ""}
on:click={() => {
pendingRange = ""
disabled={rangeSelect === ""}
onclick={() => {
pendingStartTime.range = "";
}}
>
Reset Range
</Button>
<Button
color="primary"
disabled={pendingRange === ""}
on:click={() => {
disabled={rangeSelect === ""}
onclick={() => {
isOpen = false;
from = null;
to = null;
range = pendingRange;
dispatch("set-filter", { from, to, range });
pendingStartTime.from = null;
pendingStartTime.to = null;
setFilter({ startTime: pendingStartTime });
}}
>
Close & Apply Range
@ -144,14 +141,14 @@
{:else}
<Button
color="primary"
disabled={pendingFrom.date == "0000-00-00" ||
pendingTo.date == "0000-00-00"}
on:click={() => {
disabled={fromState.date == "0000-00-00" ||
toState.date == "0000-00-00"}
onclick={() => {
isOpen = false;
from = toRFC3339(pendingFrom);
to = toRFC3339(pendingTo, "59");
range = "";
dispatch("set-filter", { from, to, range });
pendingStartTime.from = toRFC3339(fromState);
pendingStartTime.to = toRFC3339(toState, "59");
pendingStartTime.range = "";
setFilter({ startTime: pendingStartTime });
}}
>
Close & Apply Dates
@ -159,14 +156,16 @@
{/if}
<Button
color="danger"
on:click={() => {
onclick={() => {
isOpen = false;
from = null;
to = null;
range = "";
dispatch("set-filter", { from, to, range });
fromState = resetFrom;
toState = resetTo;
pendingStartTime.from = null;
pendingStartTime.to = null;
pendingStartTime.range = "";
setFilter({ startTime: pendingStartTime });
}}>Reset</Button
>
<Button on:click={() => (isOpen = false)}>Close</Button>
<Button onclick={() => (isOpen = false)}>Close</Button>
</ModalFooter>
</Modal>

87
web/frontend/src/generic/filters/Stats.svelte
View File

@ -2,7 +2,6 @@
@component Filter sub-component for selecting job statistics
Properties:
- `isModified Bool?`: Is this filter component modified [Default: false]
- `isOpen Bool?`: Is this filter component opened [Default: false]
- `stats [Object]?`: The currently selected statistics filter [Default: []]
@ -11,7 +10,6 @@
-->
<script>
import { createEventDispatcher, getContext } from "svelte";
import { getStatsItems } from "../utils.js";
import {
Button,
@ -22,75 +20,68 @@
} from "@sveltestrap/sveltestrap";
import DoubleRangeSlider from "../select/DoubleRangeSlider.svelte";
const initialized = getContext("initialized"),
dispatch = createEventDispatcher();
/* Svelte 5 Props */
let {
isOpen = $bindable(),
presetStats,
setFilter
} = $props();
export let isModified = false;
export let isOpen = false;
export let stats = [];
let statistics = [];
function loadRanges(isInitialized) {
if (!isInitialized) return;
statistics = getStatsItems(stats);
}
/* Derived Init */
const availableStats = $derived(getStatsItems(presetStats));
/* Functions */
function resetRanges() {
for (let st of statistics) {
st.enabled = false
st.from = 0
st.to = st.peak
for (let as of availableStats) {
as.enabled = false
as.from = 0
as.to = as.peak
};
}
}
$: isModified = !statistics.every((a) => {
let b = stats.find((s) => s.field == a.field);
if (b == null) return !a.enabled;
return a.from == b.from && a.to == b.to;
});
$: loadRanges($initialized);
</script>
<Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
<ModalHeader>Filter based on statistics</ModalHeader>
<ModalHeader>
<span>Filter based on statistics</span>
</ModalHeader>
<ModalBody>
{#each statistics as stat}
<h4>{stat.text}</h4>
{#each availableStats as aStat}
<div class="mb-3">
<div class="mb-0"><b>{aStat.text}</b></div>
<DoubleRangeSlider
on:change={({ detail }) => (
(stat.from = detail[0]), (stat.to = detail[1]), (stat.enabled = true)
)}
min={0}
max={stat.peak}
firstSlider={stat.from}
secondSlider={stat.to}
inputFieldFrom={stat.from}
inputFieldTo={stat.to}
changeRange={(detail) => {
aStat.from = detail[0];
aStat.to = detail[1];
if (aStat.from == 0 && aStat.to == aStat.peak) {
aStat.enabled = false;
} else {
aStat.enabled = true;
}
}}
sliderMin={0.0}
sliderMax={aStat.peak}
fromPreset={aStat.from}
toPreset={aStat.to}
/>
</div>
{/each}
</ModalBody>
<ModalFooter>
<Button
color="primary"
on:click={() => {
onclick={() => {
isOpen = false;
stats = statistics.filter((stat) => stat.enabled);
dispatch("set-filter", { stats });
setFilter({ stats: [...availableStats.filter((as) => as.enabled)] });
}}>Close & Apply</Button
>
<Button
color="danger"
on:click={() => {
onclick={() => {
isOpen = false;
resetRanges();
stats = [];
dispatch("set-filter", { stats });
setFilter({stats: []});
}}>Reset</Button
>
<Button on:click={() => (isOpen = false)}>Close</Button>
<Button onclick={() => (isOpen = false)}>Close</Button>
</ModalFooter>
</Modal>

52
web/frontend/src/generic/filters/Tags.svelte
View File

@ -11,7 +11,7 @@
-->
<script>
import { createEventDispatcher, getContext } from "svelte";
import { getContext } from "svelte";
import {
Button,
ListGroup,
@ -26,20 +26,20 @@
import { fuzzySearchTags } from "../utils.js";
import Tag from "../helper/Tag.svelte";
const allTags = getContext("tags"),
initialized = getContext("initialized"),
dispatch = createEventDispatcher();
/* Svelte 5 Props */
let {
isOpen = $bindable(false),
presetTags = [],
setFilter
} = $props();
export let isModified = false;
export let isOpen = false;
export let tags = [];
/* Derived */
const allTags = $derived(getContext("tags"))
const initialized = $derived(getContext("initialized"))
let pendingTags = [...tags];
$: isModified =
tags.length != pendingTags.length ||
!tags.every((tagId) => pendingTags.includes(tagId));
let searchTerm = "";
/* State Init */
let pendingTags = $state(presetTags);
let searchTerm = $state("");
</script>
<Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
@ -55,7 +55,7 @@
<Button
outline
color="danger"
on:click={() =>
onclick={() =>
(pendingTags = pendingTags.filter((id) => id != tag.id))}
>
<Icon name="dash-circle" />
@ -64,7 +64,7 @@
<Button
outline
color="success"
on:click={() => (pendingTags = [...pendingTags, tag.id])}
onclick={() => (pendingTags = [...pendingTags, tag.id])}
>
<Icon name="plus-circle" />
</Button>
@ -81,21 +81,25 @@
<ModalFooter>
<Button
color="primary"
on:click={() => {
onclick={() => {
isOpen = false;
tags = [...pendingTags];
dispatch("set-filter", { tags });
setFilter({ tags: [...pendingTags] });
}}>Close & Apply</Button
>
<Button
color="danger"
on:click={() => {
isOpen = false;
tags = [];
color="warning"
onclick={() => {
pendingTags = [];
dispatch("set-filter", { tags });
}}>Clear Selection</Button
>
<Button
color="danger"
onclick={() => {
isOpen = false;
pendingTags = [];
setFilter({ tags: [...pendingTags] });
}}>Reset</Button
>
<Button on:click={() => (isOpen = false)}>Close</Button>
<Button onclick={() => (isOpen = false)}>Close</Button>
</ModalFooter>
</Modal>

13
web/frontend/src/generic/helper/ConcurrentJobs.svelte
View File

@ -17,11 +17,14 @@
Icon
} from "@sveltestrap/sveltestrap";
export let cJobs;
export let showLinks = false;
export let renderCard = false;
export let width = "auto";
export let height = "400px";
/* Svelte 5 Props */
let {
cJobs,
showLinks = false,
renderCard = false,
width = "auto",
height = "400px",
} = $props();
</script>
{#if renderCard}

23
web/frontend/src/generic/helper/JobFootprint.svelte
View File

@ -23,12 +23,20 @@
} from "@sveltestrap/sveltestrap";
import { findJobFootprintThresholds } from "../utils.js";
export let job;
export let displayTitle = true;
export let width = "auto";
export let height = "310px";
/* Svelte 5 Props */
let {
job,
displayTitle = true,
width = "auto",
height = "310px",
} = $props();
const footprintData = job?.footprint?.map((jf) => {
/* Derived */
const footprintData = $derived(buildFootprint(job?.footprint));
/* Functions */
function buildFootprint(input) {
let result = input?.map((jf) => {
const fmc = getContext("getMetricConfig")(job.cluster, job.subCluster, jf.name);
if (fmc) {
// Unit
@ -97,6 +105,9 @@
return a.impact - b.impact || ((a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0));
});;
return result;
};
function evalFootprint(value, thresholds, lowerIsBetter, level) {
// Handle Metrics in which less value is better
switch (level) {
@ -176,7 +187,7 @@
>{fpd.message}</Tooltip
>
</div>
<Row cols={12} class="{(footprintData.length == (index + 1)) ? 'mb-0' : 'mb-2'}">
<Row cols={12} class={(footprintData.length == (index + 1)) ? 'mb-0' : 'mb-2'}>
{#if fpd.dir}
<Col xs="1">
<Icon name="caret-left-fill" />

33
web/frontend/src/generic/helper/Refresher.svelte
View File

@ -8,35 +8,40 @@
- `refresh`: When fired, the upstream component refreshes its contents
-->
<script>
import { createEventDispatcher } from "svelte";
import { Button, Icon, Input, InputGroup } from "@sveltestrap/sveltestrap";
const dispatch = createEventDispatcher();
/* Svelte 5 Props */
let {
initially = null,
presetClass = "",
onRefresh
} = $props();
let refreshInterval = null;
/* State Init */
let refreshInterval = $state(initially ? initially * 1000 : null);
/* Var Init */
let refreshIntervalId = null;
/* Functions */
function refreshIntervalChanged() {
if (refreshIntervalId != null) clearInterval(refreshIntervalId);
if (refreshInterval == null) return;
refreshIntervalId = setInterval(() => dispatch("refresh"), refreshInterval);
refreshIntervalId = setInterval(() => onRefresh(), refreshInterval);
}
export let initially = null;
if (initially != null) {
refreshInterval = initially * 1000;
/* Svelte 5 onMount */
$effect(() => {
refreshIntervalChanged();
}
});
</script>
<InputGroup>
<InputGroup class={presetClass}>
<Input
type="select"
title="Periodic refresh interval"
bind:value={refreshInterval}
on:change={refreshIntervalChanged}
onchange={refreshIntervalChanged}
>
<option value={null}>No Interval</option>
<option value={30 * 1000}>30 Seconds</option>
@ -46,7 +51,7 @@
</Input>
<Button
outline
on:click={() => dispatch("refresh")}
onclick={() => onRefresh()}
disabled={refreshInterval != null}
>
<Icon name="arrow-clockwise" /> Refresh

23
web/frontend/src/generic/helper/Tag.svelte
View File

@ -9,21 +9,30 @@
<script>
import { getContext } from 'svelte'
const allTags = getContext('tags'),
initialized = getContext('initialized')
export let id = null
export let tag = null
export let clickable = true
/* Svelte 5 Props */
let {
id = null,
tag = null,
clickable = true
} = $props();
/* Derived */
const allTags = $derived(getContext('tags'));
const initialized = $derived(getContext('initialized'));
/* Effects */
$effect(() => {
if (tag != null && id == null)
id = tag.id
});
$: {
$effect(() => {
if ($initialized && tag == null)
tag = allTags.find(tag => tag.id == id)
}
});
/* Function*/
function getScopeColor(scope) {
switch (scope) {
case "admin":

81
web/frontend/src/generic/helper/TagManagement.svelte
View File

@ -33,26 +33,42 @@
import { fuzzySearchTags } from "../utils.js";
import Tag from "./Tag.svelte";
export let job;
export let jobTags = job.tags;
export let username;
export let authlevel;
export let roles;
export let renderModal = true;
/* Svelte 5 Props */
let {
jobTags = $bindable(),
job,
username,
authlevel,
roles,
renderModal = true,
} = $props();
let allTags = getContext("tags"),
initialized = getContext("initialized");
let newTagType = "",
newTagName = "",
newTagScope = username;
let filterTerm = "";
let pendingChange = false;
let isOpen = false;
/* Const Init */
const isAdmin = (roles && authlevel == roles.admin);
const isSupport = (roles && authlevel == roles.support);
const client = getContextClient();
/* State Init */
let initialized = getContext("initialized")
let allTags = getContext("tags")
let newTagType = $state("");
let newTagName = $state("");
let newTagScope = $state(username);
let filterTerm = $state("");
let pendingChange = $state(false);
let isOpen = $state(false);
/* Derived Init */
const allTagsFiltered = $derived(($initialized, jobTags, fuzzySearchTags(filterTerm, allTags))); // $init und JobTags only for triggering react
const usedTagsFiltered = $derived(matchJobTags(jobTags, allTagsFiltered, 'used', isAdmin, isSupport));
const unusedTagsFiltered = $derived(matchJobTags(jobTags, allTagsFiltered, 'unused', isAdmin, isSupport));
/* Effects */
$effect(() => {
updateNewTag(filterTerm)
});
/* Const Mutations */
const createTagMutation = ({ type, name, scope }) => {
return mutationStore({
client: client,
@ -104,19 +120,16 @@
});
};
$: allTagsFiltered = ($initialized, fuzzySearchTags(filterTerm, allTags));
$: usedTagsFiltered = matchJobTags(jobTags, allTagsFiltered, 'used', isAdmin, isSupport);
$: unusedTagsFiltered = matchJobTags(jobTags, allTagsFiltered, 'unused', isAdmin, isSupport);
$: {
/* Functions */
function updateNewTag(term) {
newTagType = "";
newTagName = "";
let parts = filterTerm.split(":").map((s) => s.trim());
let parts = term.split(":").map((s) => s.trim());
if (parts.length == 2 && parts.every((s) => s.length > 0)) {
newTagType = parts[0];
newTagName = parts[1];
}
}
};
};
function matchJobTags(tags, availableTags, type, isAdmin, isSupport) {
const jobTagIds = tags.map((t) => t.id)
@ -183,7 +196,7 @@
</script>
{#if renderModal}
<Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
<Modal {isOpen} toggle={() => {isOpen = !isOpen; filterTerm = "";}}>
<ModalHeader>
Manage Tags <Icon name="tags"/>
</ModalHeader>
@ -232,7 +245,7 @@
<Button
size="sm"
color="danger"
on:click={() => removeTagFromJob(utag)}
onclick={() => removeTagFromJob(utag)}
>
<Icon name="x" />
</Button>
@ -282,7 +295,7 @@
<Button
size="sm"
color="success"
on:click={() => addTagToJob(uutag)}
onclick={() => addTagToJob(uutag)}
>
<Icon name="plus" />
</Button>
@ -314,7 +327,7 @@
outline
style="width:100%;"
color="success"
on:click={(e) => (
onclick={(e) => (
e.preventDefault(), createTag(newTagType, newTagName, newTagScope)
)}
>
@ -345,11 +358,11 @@
{/if}
</ModalBody>
<ModalFooter>
<Button color="primary" on:click={() => (isOpen = false)}>Close</Button>
<Button color="primary" onclick={() => {isOpen = false; filterTerm = "";}}>Close</Button>
</ModalFooter>
</Modal>
<Button outline on:click={() => (isOpen = true)} size="sm" color="primary">
<Button outline onclick={() => (isOpen = true)} size="sm" color="primary">
Manage {jobTags?.length ? jobTags.length : ''} Tags
</Button>
@ -387,7 +400,7 @@
<Button
size="sm"
color="danger"
on:click={() => removeTagFromJob(utag)}
onclick={() => removeTagFromJob(utag)}
>
<Icon name="x" />
</Button>
@ -396,7 +409,7 @@
<Button
size="sm"
color="danger"
on:click={() => removeTagFromJob(utag)}
onclick={() => removeTagFromJob(utag)}
>
<Icon name="x" />
</Button>
@ -435,7 +448,7 @@
<Button
size="sm"
color="success"
on:click={() => addTagToJob(uutag)}
onclick={() => addTagToJob(uutag)}
>
<Icon name="plus" />
</Button>
@ -444,7 +457,7 @@
<Button
size="sm"
color="success"
on:click={() => addTagToJob(uutag)}
onclick={() => addTagToJob(uutag)}
>
<Icon name="plus" />
</Button>
@ -475,7 +488,7 @@
outline
style="width:100%;"
color="success"
on:click={(e) => (
onclick={(e) => (
e.preventDefault(), createTag(newTagType, newTagName, newTagScope)
)}
>

45
web/frontend/src/generic/helper/TextFilter.svelte
View File

@ -12,21 +12,31 @@
<script>
import { InputGroup, Input, Button, Icon } from "@sveltestrap/sveltestrap";
import { createEventDispatcher } from "svelte";
import { scramble, scrambleNames } from "../utils.js";
const dispatch = createEventDispatcher();
// Note: If page with this component has project preset, keep preset until reset
/* Svelte 5 Props */
let {
presetProject = "",
authlevel = null,
roles = null,
setFilter
} = $props();
export let presetProject = ""; // If page with this component has project preset, keep preset until reset
export let authlevel = null;
export let roles = null;
let mode = presetProject ? "jobName" : "project";
let term = "";
/* Const Init*/
const throttle = 500;
/* Var Init */
let user = "";
let project = presetProject ? presetProject : "";
let jobName = "";
const throttle = 500;
let timeoutId = null;
/* State Init */
let mode = $state(presetProject ? "jobName" : "project");
let term = $state("");
/* Functions */
function modeChanged() {
if (mode == "user") {
project = presetProject ? presetProject : "";
@ -41,7 +51,6 @@
termChanged(0);
}
let timeoutId = null;
// Compatibility: Handle "user role" and "no role" identically
function termChanged(sleep = throttle) {
if (roles && authlevel >= roles.manager) {
@ -52,7 +61,7 @@
if (timeoutId != null) clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
dispatch("set-filter", {
setFilter({
user,
project,
jobName
@ -65,7 +74,7 @@
if (timeoutId != null) clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
dispatch("set-filter", {
setFilter({
project,
jobName
});
@ -78,6 +87,8 @@
term = ""
presetProject = ""
project = ""
jobName = ""
user = ""
termChanged(0);
}
</script>
@ -86,10 +97,10 @@
<Input
type="select"
style="max-width: 120px;"
class="form-select"
class="form-select w-auto"
title="Search Mode"
bind:value={mode}
on:change={modeChanged}
onchange={modeChanged}
>
{#if !presetProject}
<option value={"project"}>Project</option>
@ -102,12 +113,12 @@
<Input
type="text"
bind:value={term}
on:change={() => termChanged()}
on:keyup={(event) => termChanged(event.key == "Enter" ? 0 : throttle)}
placeholder={presetProject ? `Find ${mode} in ${scrambleNames ? scramble(presetProject) : presetProject} ...` : `Find ${mode} ...`}
onchange={() => termChanged()}
onkeyup={(event) => termChanged(event.key == "Enter" ? 0 : throttle)}
placeholder={presetProject ? `Find in ${scrambleNames ? scramble(presetProject) : presetProject} ...` : `Find ${mode} ...`}
/>
{#if presetProject}
<Button title="Reset Project" on:click={resetProject}
<Button title="Reset Project" onclick={() => resetProject()}
><Icon name="arrow-counterclockwise" /></Button
>
{/if}

58
web/frontend/src/generic/joblist/JobInfo.svelte
View File

@ -12,15 +12,22 @@
import Tag from "../helper/Tag.svelte";
import TagManagement from "../helper/TagManagement.svelte";
export let job;
export let jobTags = job.tags;
export let showTagedit = false;
export let username = null;
export let authlevel= null;
export let roles = null;
export let isSelected = null;
export let showSelect = false;
/* Svelte 5 Props */
let {
job,
jobTags = job.tags,
showTagedit = false,
username = null,
authlevel= null,
roles = null,
isSelected = null,
showSelect = false,
} = $props();
/* State Init */
let displayCheck = $state(false);
/* Functions */
function formatDuration(duration) {
const hours = Math.floor(duration / 3600);
duration -= hours * 3600;
@ -41,9 +48,8 @@
}
}
let displayCheck = false;
function clipJobId(jid) {
displayCheck = true;
// Navigator clipboard api needs a secure context (https)
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard
@ -65,14 +71,11 @@
textArea.remove();
}
}
setTimeout(function () {
displayCheck = false;
}, 1000);
}
</script>
<div>
<p class="mb-2">
<p class="mb-2 text-truncate">
<span class="d-flex justify-content-between">
<span class="align-self-center fw-bold mr-2">
<a href="/monitoring/job/{job.id}" target="_blank">{job.jobId}</a>
@ -81,7 +84,7 @@
<span>
{#if showSelect}
<Button id={`${job.cluster}-${job.jobId}-select`} outline={!isSelected} color={isSelected? `success`: `secondary`} size="sm" class="mr-2"
on:click={() => {
onclick={() => {
isSelected = !isSelected
}}>
{#if isSelected}
@ -98,7 +101,13 @@
{ 'Add or Remove Job to/from Comparison Selection' }
</Tooltip>
{/if}
<Button id={`${job.cluster}-${job.jobId}-clipboard`} outline color="secondary" size="sm" on:click={clipJobId(job.jobId)} >
<Button id={`${job.cluster}-${job.jobId}-clipboard`} outline color="secondary" size="sm" onclick={() => {
displayCheck = true;
clipJobId(job.jobId);
setTimeout(function () {
displayCheck = false;
}, 1000);
}}>
{#if displayCheck}
<Icon name="clipboard2-check-fill"/>
{:else}
@ -113,16 +122,15 @@
</span>
</span>
{#if job.metaData?.jobName}
{#if job.metaData?.jobName.length <= 25}
<div>{job.metaData.jobName}</div>
{#if job.metaData?.jobName.length <= 20}
<span>{job.metaData.jobName}</span>
{:else}
<div
class="truncate"
<span
style="cursor:help;"
title={job.metaData.jobName}
>
{job.metaData.jobName}
</div>
</span>
{/if}
{/if}
{#if job.arrayJobId}
@ -207,11 +215,3 @@
</p>
{/if}
</div>
<style>
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>

87
web/frontend/src/generic/joblist/Pagination.svelte
View File

@ -11,11 +11,51 @@
- Dispatched once immediately and then each time page or itemsPerPage changes
-->
<script>
/* Svelte 5 Props */
let {
page = 1,
itemsPerPage = 10,
totalItems = 0,
itemText = "items",
pageSizes = [10,25,50],
updatePaging
} = $props();
/* Derived */
const backButtonDisabled = $derived((page === 1));
const nextButtonDisabled = $derived((page >= (totalItems / itemsPerPage)));
/* Functions */
function pageUp ( event ) {
event.preventDefault();
page += 1;
updatePaging({ itemsPerPage, page });
}
function pageBack ( event ) {
event.preventDefault();
page -= 1;
updatePaging({ itemsPerPage, page });
}
function pageReset ( event ) {
event.preventDefault();
page = 1;
updatePaging({ itemsPerPage, page });
}
function updateItems ( event ) {
event.preventDefault();
updatePaging({ itemsPerPage, page });
}
</script>
<div class="cc-pagination" >
<div class="cc-pagination-left">
<label for="cc-pagination-select">{ itemText } per page:</label>
<div class="cc-pagination-select-wrapper">
<select on:blur|preventDefault={reset} bind:value={itemsPerPage} id="cc-pagination-select" class="cc-pagination-select">
<select onblur={(e) => pageReset(e)} onchange={(e) => updateItems(e)} bind:value={itemsPerPage} id="cc-pagination-select" class="cc-pagination-select">
{#each pageSizes as size}
<option value="{size}">{size}</option>
{/each}
@ -23,54 +63,23 @@
<span class="focus"></span>
</div>
<span class="cc-pagination-text">
{ (page - 1) * itemsPerPage } - { Math.min((page - 1) * itemsPerPage + itemsPerPage, totalItems) } of { totalItems } { itemText }
{ ((page - 1) * itemsPerPage) + 1 } - { Math.min((page - 1) * itemsPerPage + itemsPerPage, totalItems) } of { totalItems } { itemText }
</span>
</div>
<div class="cc-pagination-right">
{#if !backButtonDisabled}
<button class="reset nav" type="button"
on:click|preventDefault="{reset}"></button>
<button class="left nav" type="button"
on:click|preventDefault="{() => { page -= 1; }}"></button>
<button aria-label="page-reset" class="reset nav" type="button"
onclick={(e) => pageReset(e)}></button>
<button aria-label="page-back" class="left nav" type="button"
onclick={(e) => pageBack(e)}></button>
{/if}
{#if !nextButtonDisabled}
<button class="right nav" type="button"
on:click|preventDefault="{() => { page += 1; }}"></button>
<button aria-label="page-up" class="right nav" type="button"
onclick={(e) => pageUp(e)}></button>
{/if}
</div>
</div>
<script>
import { createEventDispatcher } from "svelte";
export let page = 1;
export let itemsPerPage = 10;
export let totalItems = 0;
export let itemText = "items";
export let pageSizes = [10,25,50];
let backButtonDisabled, nextButtonDisabled;
const dispatch = createEventDispatcher();
$: {
if (typeof page !== "number") {
page = Number(page);
}
if (typeof itemsPerPage !== "number") {
itemsPerPage = Number(itemsPerPage);
}
dispatch("update-paging", { itemsPerPage, page });
}
$: backButtonDisabled = (page === 1);
$: nextButtonDisabled = (page >= (totalItems / itemsPerPage));
function reset ( event ) {
page = 1;
}
</script>
<style>
*, *::before, *::after {
box-sizing: border-box;

183
web/frontend/src/generic/plots/Comparogram.svelte
View File

@ -18,86 +18,30 @@
import { getContext, onMount, onDestroy } from "svelte";
import { Card } from "@sveltestrap/sveltestrap";
export let metric = "";
export let width = 0;
export let height = 300;
export let data = null;
export let xlabel = "";
export let xticks = [];
export let xinfo = [];
export let ylabel = "";
export let yunit = "";
export let title = "";
export let forResources = false;
export let plotSync;
// NOTE: Metric Thresholds non-required, Cluster Mixing Allowed
/* Svelte 5 Props */
let {
metric = "",
width = 0,
height = 300,
data = null,
xlabel = "",
xticks = [],
xinfo = [],
ylabel = "",
yunit = "",
title = "",
forResources = false,
plotSync,
} = $props();
/* Const Init */
const clusterCockpitConfig = getContext("cc-config");
const lineWidth = clusterCockpitConfig.plot_general_lineWidth / window.devicePixelRatio;
const cbmode = clusterCockpitConfig?.plot_general_colorblindMode || false;
// UPLOT PLUGIN // converts the legend into a simple tooltip
function legendAsTooltipPlugin({
className,
style = { backgroundColor: "rgba(255, 249, 196, 0.92)", color: "black" },
} = {}) {
let legendEl;
function init(u, opts) {
legendEl = u.root.querySelector(".u-legend");
legendEl.classList.remove("u-inline");
className && legendEl.classList.add(className);
uPlot.assign(legendEl.style, {
minWidth: "100px",
textAlign: "left",
pointerEvents: "none",
display: "none",
position: "absolute",
left: 0,
top: 0,
zIndex: 100,
boxShadow: "2px 2px 10px rgba(0,0,0,0.5)",
...style,
});
// hide series color markers:
const idents = legendEl.querySelectorAll(".u-marker");
for (let i = 0; i < idents.length; i++)
idents[i].style.display = "none";
const overEl = u.over;
overEl.style.overflow = "visible";
// move legend into plot bounds
overEl.appendChild(legendEl);
// show/hide tooltip on enter/exit
overEl.addEventListener("mouseenter", () => {
legendEl.style.display = null;
});
overEl.addEventListener("mouseleave", () => {
legendEl.style.display = "none";
});
}
function update(u) {
const { left, top } = u.cursor;
const width = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0;
legendEl.style.transform =
"translate(" + (left - width - 15) + "px, " + (top + 15) + "px)";
}
return {
hooks: {
init: init,
setCursor: update,
},
};
}
// UPLOT SERIES INIT //
const plotSeries = [
{
label: "JobID",
@ -122,6 +66,7 @@
},
]
// UPLOT SCALES INIT //
if (forResources) {
const resSeries = [
{
@ -177,11 +122,13 @@
plotSeries.push(...statsSeries)
};
// UPLOT BAND COLORS //
const plotBands = [
{ series: [5, 4], fill: cbmode ? "rgba(0,0,255,0.1)" : "rgba(0,255,0,0.1)" },
{ series: [4, 3], fill: cbmode ? "rgba(0,255,0,0.1)" : "rgba(255,0,0,0.1)" },
];
// UPLOT OPTIONS //
const opts = {
width,
height,
@ -259,11 +206,83 @@
}
};
// RENDER HANDLING
let plotWrapper = null;
let uplot = null;
/* Var Init */
let timeoutId = null;
let uplot = null;
/* State Init */
let plotWrapper = $state(null);
/* Effects */
$effect(() => {
if (plotWrapper) {
onSizeChange(width, height);
}
});
/* Functions */
// UPLOT PLUGIN // converts the legend into a simple tooltip
function legendAsTooltipPlugin({
className,
style = { backgroundColor: "rgba(255, 249, 196, 0.92)", color: "black" },
} = {}) {
let legendEl;
function init(u, opts) {
legendEl = u.root.querySelector(".u-legend");
legendEl.classList.remove("u-inline");
className && legendEl.classList.add(className);
uPlot.assign(legendEl.style, {
minWidth: "100px",
textAlign: "left",
pointerEvents: "none",
display: "none",
position: "absolute",
left: 0,
top: 0,
zIndex: 100,
boxShadow: "2px 2px 10px rgba(0,0,0,0.5)",
...style,
});
// hide series color markers:
const idents = legendEl.querySelectorAll(".u-marker");
for (let i = 0; i < idents.length; i++)
idents[i].style.display = "none";
const overEl = u.over;
overEl.style.overflow = "visible";
// move legend into plot bounds
overEl.appendChild(legendEl);
// show/hide tooltip on enter/exit
overEl.addEventListener("mouseenter", () => {
legendEl.style.display = null;
});
overEl.addEventListener("mouseleave", () => {
legendEl.style.display = "none";
});
}
function update(u) {
const { left, top } = u.cursor;
const width = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0;
legendEl.style.transform =
"translate(" + (left - width - 15) + "px, " + (top + 15) + "px)";
}
return {
hooks: {
init: init,
setCursor: update,
},
};
}
// RENDER HANDLING
function render(ren_width, ren_height) {
if (!uplot) {
opts.width = ren_width;
@ -284,29 +303,25 @@
}, 200);
}
/* On Mount */
onMount(() => {
if (plotWrapper) {
render(width, height);
}
});
/* On Destroy */
onDestroy(() => {
if (timeoutId != null) clearTimeout(timeoutId);
if (uplot) uplot.destroy();
});
// This updates plot on all size changes if wrapper (== data) exists
$: if (plotWrapper) {
onSizeChange(width, height);
}
</script>
<!-- Define $width Wrapper and NoData Card -->
{#if data && data[0].length > 0}
<div bind:this={plotWrapper} bind:clientWidth={width}
style="background-color: rgba(255, 255, 255, 1.0);" class="rounded"
/>
></div>
{:else}
<Card body color="warning" class="mx-4 my-2"
>Cannot render plot: No series data returned for <code>{metric?metric:'job resources'}</code></Card

2
web/frontend/src/generic/plots/Histogram.svelte
View File

@ -244,7 +244,7 @@
<!-- Define Wrapper and NoData Card within $width -->
<div bind:clientWidth={width}>
{#if data.length > 0}
<div bind:this={plotWrapper} />
<div bind:this={plotWrapper}></div>
{:else}
<Card class="mx-4" body color="warning"
>Cannot render histogram: No data!</Card

2
web/frontend/src/generic/plots/MetricPlot.svelte
View File

@ -591,7 +591,7 @@
{#if series[0]?.data && series[0].data.length > 0}
<div bind:this={plotWrapper} bind:clientWidth={width}
style="background-color: {backgroundColor()};" class={forNode ? 'py-2 rounded' : 'rounded'}
/>
></div>
{:else}
<Card body color="warning" class="mx-4"
>Cannot render plot: No series data returned for <code>{metric}</code></Card

40
web/frontend/src/generic/plots/Pie.svelte
View File

@ -1,5 +1,5 @@
<!--
@component Pie Plot based on uPlot Pie
@component Pie Plot based on chart.js Pie
Properties:
- `size Number`: X and Y size of the plot, for square shape
@ -31,33 +31,17 @@
]
</script>
<script>
import { Pie } from 'svelte-chartjs';
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
Filler,
ArcElement,
CategoryScale
} from 'chart.js';
ChartJS.register(
Title,
Tooltip,
Legend,
Filler,
ArcElement,
CategoryScale
);
import Chart from 'chart.js/auto'
import { onMount } from 'svelte';
export let canvasId = "pie-default"
export let size
export let sliceLabel
export let quantities
export let entities
export let displayLegend = false
$: data = {
const data = {
labels: entities,
datasets: [
{
@ -79,10 +63,22 @@
}
}
onMount(() => {
new Chart(
document.getElementById(canvasId),
{
type: 'pie',
data: data,
options: options
}
);
});
</script>
<!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->
<div class="chart-container" style="--container-width: {size}; --container-height: {size}">
<Pie {data} {options}/>
<canvas id={canvasId}></canvas>
</div>
<style>

22
web/frontend/src/generic/plots/Polar.svelte
View File

@ -1,5 +1,5 @@
<!--
@component Polar Plot based on chartJS Radar
@component Polar Plot based on chart.js Radar
Properties:
- `polarMetrics [Object]?`: Metric names and scaled peak values for rendering polar plot [Default: [] ]
@ -8,7 +8,8 @@
-->
<script>
import { Radar } from 'svelte-chartjs';
import { getContext, onMount } from 'svelte'
import Chart from 'chart.js/auto'
import {
Chart as ChartJS,
Title,
@ -30,8 +31,10 @@
LineElement
);
export let polarMetrics = [];
export let polarData = [];
export let canvasId = "polar-default";
export let height = 350;
const labels = polarMetrics
@ -113,10 +116,23 @@
}
}
onMount(() => {
new Chart(
document.getElementById(canvasId),
{
type: 'radar',
data: data,
options: options,
height: height
}
);
});
</script>
<!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->
<div class="chart-container">
<Radar {data} {options} {height}/>
<canvas id={canvasId}></canvas>
</div>
<style>

2
web/frontend/src/generic/plots/Roofline.svelte
View File

@ -363,7 +363,7 @@
</script>
{#if data != null}
<div bind:this={plotWrapper} class="p-2"/>
<div bind:this={plotWrapper} class="p-2"></div>
{:else}
<Card class="mx-4" body color="warning">Cannot render roofline: No data!</Card
>

212
web/frontend/src/generic/select/DoubleRangeSlider.svelte
View File

@ -2,6 +2,7 @@
Copyright (c) 2021 Michael Keller
Originally created by Michael Keller (https://github.com/mhkeller/svelte-double-range-slider)
Changes: remove dependency, text inputs, configurable value ranges, on:change event
Changes #2: Rewritten for Svelte 5, removed bodyHandler
-->
<!--
@component Selector component to display range selections via min and max double-sliders
@ -9,82 +10,80 @@ Changes: remove dependency, text inputs, configurable value ranges, on:change ev
Properties:
- min: Number
- max: Number
- firstSlider: Number (Starting position of slider #1)
- secondSlider: Number (Starting position of slider #2)
- sliderHandleFrom: Number (Starting position of slider #1)
- sliderHandleTo: Number (Starting position of slider #2)
Events:
- `change`: [Number, Number] (Positions of the two sliders)
-->
<script>
import { createEventDispatcher } from "svelte";
let {
sliderMin,
sliderMax,
fromPreset = 1,
toPreset = 100,
changeRange
} = $props();
export let min;
export let max;
export let firstSlider;
export let secondSlider;
export let inputFieldFrom = 0;
export let inputFieldTo = 0;
const dispatch = createEventDispatcher();
let values;
let start, end; /* Positions of sliders from 0 to 1 */
$: values = [firstSlider, secondSlider]; /* Avoid feedback loop */
$: start = Math.max(((firstSlider == null ? min : firstSlider) - min) / (max - min), 0);
$: end = Math.min(((secondSlider == null ? min : secondSlider) - min) / (max - min), 1);
let leftHandle;
let body;
let slider;
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.));
let inputFieldFrom = $state(fromPreset.toString());
let inputFieldTo = $state(toPreset.toString());
let leftHandle = $state();
let sliderMain = $state();
let timeoutId = null;
function queueChangeEvent() {
if (timeoutId !== null) {
clearTimeout(timeoutId);
clearTimeout(timeoutId)
}
timeoutId = setTimeout(() => {
timeoutId = null;
// Show selection but avoid feedback loop
if (values[0] != null && inputFieldFrom != values[0].toString())
inputFieldFrom = values[0].toString();
if (values[1] != null && inputFieldTo != values[1].toString())
inputFieldTo = values[1].toString();
dispatch('change', values);
}, 250);
timeoutId = null
changeRange(pendingValues);
}, 100);
}
function update() {
values = [
Math.floor(min + start * (max - min)),
Math.floor(min + end * (max - min))
];
queueChangeEvent();
function updateStates(newValue, newPosition, target) {
if (target === 'from') {
pendingValues[0] = isNaN(newValue) ? null : newValue;
inputFieldFrom = isNaN(newValue) ? null : newValue.toString();
sliderFrom = newPosition;
} else if (target === 'to') {
pendingValues[1] = isNaN(newValue) ? null : newValue;
inputFieldTo = isNaN(newValue) ? null : newValue.toString();
sliderTo = newPosition;
}
function inputChanged(idx, event) {
let val = Number.parseInt(event.target.value);
if (Number.isNaN(val) || val < min) {
event.target.classList.add('bad');
return;
}
values[idx] = val;
event.target.classList.remove('bad');
if (idx == 0)
start = clamp((val - min) / (max - min), 0., 1.);
else
end = clamp((val - min) / (max - min), 0., 1.);
queueChangeEvent();
}
function clamp(x, min, max) {
return x < min
? min
: (x < max ? x : max);
function rangeChanged (evt, target) {
evt.preventDefault()
evt.stopPropagation()
const { left, right } = sliderMain.getBoundingClientRect();
const parentWidth = right - left;
const newP = Math.min(Math.max((evt.detail.x - left) / parentWidth, 0), 1);
const newV = Math.floor(sliderMin + newP * (sliderMax - sliderMin));
updateStates(newV, newP, target);
}
function inputChanged(evt, target) {
evt.preventDefault()
evt.stopPropagation()
const newV = Number.parseInt(evt.target.value);
const newP = clamp((newV - sliderMin) / (sliderMax - sliderMin), 0., 1.)
updateStates(newV, newP, target);
}
function clamp(x, testMin, testMax) {
return x < testMin
? testMin
: (x > testMax
? testMax
: x
);
}
function draggable(node) {
@ -151,84 +150,38 @@ Changes: remove dependency, text inputs, configurable value ranges, on:change ev
};
}
function setHandlePosition (which) {
return function (evt) {
const { left, right } = slider.getBoundingClientRect();
const parentWidth = right - left;
const p = Math.min(Math.max((evt.detail.x - left) / parentWidth, 0), 1);
if (which === 'start') {
start = p;
end = Math.max(end, p);
} else {
start = Math.min(p, start);
end = p;
}
update();
}
}
function setHandlesFromBody (evt) {
const { width } = body.getBoundingClientRect();
const { left, right } = slider.getBoundingClientRect();
const parentWidth = right - left;
const leftHandleLeft = leftHandle.getBoundingClientRect().left;
const pxStart = clamp((leftHandleLeft + evt.detail.dx) - left, 0, parentWidth - width);
const pxEnd = clamp(pxStart + width, width, parentWidth);
const pStart = pxStart / parentWidth;
const pEnd = pxEnd / parentWidth;
start = pStart;
end = pEnd;
update();
}
</script>
<div class="double-range-container">
<div class="header">
<input class="form-control" type="text" placeholder="from..." bind:value={inputFieldFrom}
on:input={(e) => inputChanged(0, e)} />
<input class="form-control" type="text" placeholder="from..." value={inputFieldFrom}
oninput={(e) => inputChanged(e, 'from')} />
<span>Full Range: <b> {min} </b> - <b> {max} </b></span>
<span>Full Range: <b> {sliderMin} </b> - <b> {sliderMax} </b></span>
<input class="form-control" type="text" placeholder="to..." bind:value={inputFieldTo}
on:input={(e) => inputChanged(1, e)} />
<input class="form-control" type="text" placeholder="to..." value={inputFieldTo}
oninput={(e) => inputChanged(e, 'to')} />
</div>
<div class="slider" bind:this={slider}>
<div id="slider-active" class="slider" bind:this={sliderMain}>
<div
class="body"
bind:this={body}
use:draggable
on:dragmove|preventDefault|stopPropagation="{setHandlesFromBody}"
style="
left: {100 * start}%;
right: {100 * (1 - end)}%;
"
class="slider-body"
style="left: {100 * sliderFrom}%;right: {100 * (1 - sliderTo)}%;"
></div>
<div
class="handle"
class="slider-handle"
bind:this={leftHandle}
data-which="start"
data-which="from"
use:draggable
on:dragmove|preventDefault|stopPropagation="{setHandlePosition('start')}"
style="
left: {100 * start}%
"
ondragmove={(e) => rangeChanged(e, 'from')}
style="left: {100 * sliderFrom}%"
></div>
<div
class="handle"
data-which="end"
class="slider-handle"
data-which="to"
use:draggable
on:dragmove|preventDefault|stopPropagation="{setHandlePosition('end')}"
style="
left: {100 * end}%
"
ondragmove={(e) => rangeChanged(e, 'to')}
style="left: {100 * sliderTo}%"
></div>
</div>
</div>
@ -238,7 +191,8 @@ Changes: remove dependency, text inputs, configurable value ranges, on:change ev
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: -5px;
align-items: flex-end;
margin-bottom: 5px;
}
.header :nth-child(2) {
padding-top: 10px;
@ -249,17 +203,13 @@ Changes: remove dependency, text inputs, configurable value ranges, on:change ev
width: 100px;
}
:global(.double-range-container .header input[type="text"].bad) {
color: #ff5c33;
border-color: #ff5c33;
}
.double-range-container {
width: 100%;
height: 50px;
user-select: none;
box-sizing: border-box;
white-space: nowrap
white-space: nowrap;
margin-top: -4px;
}
.slider {
position: relative;
@ -271,13 +221,13 @@ Changes: remove dependency, text inputs, configurable value ranges, on:change ev
box-shadow: inset 0 7px 10px -5px #4a4a4a, inset 0 -1px 0px 0px #9c9c9c;
border-radius: 6px;
}
.handle {
.slider-handle {
position: absolute;
top: 50%;
width: 0;
height: 0;
}
.handle:after {
.slider-handle:after {
content: ' ';
box-sizing: border-box;
position: absolute;
@ -291,11 +241,11 @@ Changes: remove dependency, text inputs, configurable value ranges, on:change ev
/* .handle[data-which="end"]:after{
transform: translate(-100%, -50%);
} */
.handle:active:after {
.slider-handle:active:after {
background-color: #ddd;
z-index: 9;
}
.body {
.slider-body {
top: 0;
position: absolute;
background-color: #34a1ff;

49
web/frontend/src/generic/select/HistogramSelection.svelte
View File

@ -20,16 +20,24 @@
} from "@sveltestrap/sveltestrap";
import { gql, getContextClient, mutationStore } from "@urql/svelte";
export let cluster;
export let selectedHistograms;
export let isOpen;
/* Svelte 5 Props */
let {
cluster,
isOpen = $bindable(),
presetSelectedHistograms,
applyChange
} = $props();
/* Const Init */
const client = getContextClient();
const initialized = getContext("initialized");
function loadHistoMetrics(isInitialized, thisCluster) {
if (!isInitialized) return [];
/* Derived */
let selectedHistograms = $derived(presetSelectedHistograms); // Non-Const Derived: Is settable
const availableMetrics = $derived(loadHistoMetrics(cluster));
/* Functions */
function loadHistoMetrics(thisCluster) {
// isInit Check Removed: Parent Component has finished Init-Query: Globalmetrics available here.
if (!thisCluster) {
return getContext("globalMetrics")
.filter((gm) => gm?.footprint)
@ -42,18 +50,6 @@
}
}
const updateConfigurationMutation = ({ name, value }) => {
return mutationStore({
client: client,
query: gql`
mutation ($name: String!, $value: String!) {
updateConfiguration(name: $name, value: $value)
}
`,
variables: { name, value },
});
};
function updateConfiguration(data) {
updateConfigurationMutation({
name: data.name,
@ -67,6 +63,7 @@
function closeAndApply() {
isOpen = !isOpen;
applyChange(selectedHistograms)
updateConfiguration({
name: cluster
? `user_view_histogramMetrics:${cluster}`
@ -75,8 +72,18 @@
});
}
$: availableMetrics = loadHistoMetrics($initialized, cluster);
/* Mutation */
const updateConfigurationMutation = ({ name, value }) => {
return mutationStore({
client: client,
query: gql`
mutation ($name: String!, $value: String!) {
updateConfiguration(name: $name, value: $value)
}
`,
variables: { name, value },
});
};
</script>
<Modal {isOpen} toggle={() => (isOpen = !isOpen)}>
@ -92,7 +99,7 @@
</ListGroup>
</ModalBody>
<ModalFooter>
<Button color="primary" on:click={closeAndApply}>Close & Apply</Button>
<Button color="primary" on:click={() => closeAndApply()}>Close & Apply</Button>
<Button color="secondary" on:click={() => (isOpen = !isOpen)}>Close</Button>
</ModalFooter>
</Modal>

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

@ -12,7 +12,7 @@
-->
<script>
import { getContext, createEventDispatcher } from "svelte";
import { getContext } from "svelte";
import {
Modal,
ModalBody,
@ -23,57 +23,23 @@
} from "@sveltestrap/sveltestrap";
import { gql, getContextClient, mutationStore } from "@urql/svelte";
export let metrics;
export let isOpen;
export let configName;
export let allMetrics = null;
export let cluster = null;
export let subCluster = null;
export let showFootprint = false;
export let footprintSelect = false;
const onInit = getContext("on-init")
const globalMetrics = getContext("globalMetrics")
const dispatch = createEventDispatcher();
let newMetricsOrder = [];
let unorderedMetrics = [...metrics];
let pendingShowFootprint = !!showFootprint;
onInit(() => {
if (allMetrics == null) allMetrics = new Set();
for (let metric of globalMetrics) allMetrics.add(metric.name);
});
$: {
if (allMetrics != null) {
if (!cluster) {
for (let metric of globalMetrics) allMetrics.add(metric.name);
} else {
allMetrics.clear();
for (let gm of globalMetrics) {
if (!subCluster) {
if (gm.availability.find((av) => av.cluster === cluster)) allMetrics.add(gm.name);
} else {
if (gm.availability.find((av) => av.cluster === cluster && av.subClusters.includes(subCluster))) 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));
}
}
function printAvailability(metric, cluster) {
const avail = globalMetrics.find((gm) => gm.name === metric)?.availability
if (!cluster) {
return avail.map((av) => av.cluster).join(',')
} else {
return avail.find((av) => av.cluster === cluster).subClusters.join(',')
}
}
/* Svelte 5 Props */
let {
isOpen = $bindable(false),
showFootprint = $bindable(false),
totalMetrics = $bindable(0),
presetMetrics = [],
cluster = null,
subCluster = null,
footprintSelect = false,
preInitialized = false, // Job View is Pre-Init'd: $initialized "alone" store returns false
configName,
applyMetrics
} = $props();
/* Const Init */
const globalMetrics = getContext("globalMetrics");
const initialized = getContext("initialized");
const client = getContextClient();
const updateConfigurationMutation = ({ name, value }) => {
return mutationStore({
@ -87,7 +53,51 @@
});
};
let columnHovering = null;
/* State Init */
let pendingMetrics = $state(presetMetrics);
let pendingShowFootprint = $state(!!showFootprint);
let listedMetrics = $state([]);
let columnHovering = $state(null);
/* Derives States */
const allMetrics = $derived(loadAvailable(preInitialized || $initialized));
/* Reactive Effects */
$effect(() => {
totalMetrics = allMetrics.size;
});
$effect(() => {
listedMetrics = [...presetMetrics, ...allMetrics.difference(new Set(presetMetrics))]; // List (preset) active metrics first, then list inactives
});
/* Functions */
function loadAvailable(init) {
const availableMetrics = new Set();
if (init) {
for (let gm of globalMetrics) {
if (!cluster) {
availableMetrics.add(gm.name)
} else {
if (!subCluster) {
if (gm.availability.find((av) => av.cluster === cluster)) availableMetrics.add(gm.name);
} else {
if (gm.availability.find((av) => av.cluster === cluster && av.subClusters.includes(subCluster))) availableMetrics.add(gm.name);
}
}
}
}
return availableMetrics
}
function printAvailability(metric, cluster) {
const avail = globalMetrics.find((gm) => gm.name === metric)?.availability
if (!cluster) {
return avail.map((av) => av.cluster).join(',')
} else {
return avail.find((av) => av.cluster === cluster).subClusters.join(',')
}
}
function columnsDragStart(event, i) {
event.dataTransfer.effectAllowed = "move";
@ -98,18 +108,21 @@
function columnsDrag(event, target) {
event.dataTransfer.dropEffect = "move";
const start = Number.parseInt(event.dataTransfer.getData("text/plain"));
let pendingMetricsOrder = [...listedMetrics];
if (start < target) {
newMetricsOrder.splice(target + 1, 0, newMetricsOrder[start]);
newMetricsOrder.splice(start, 1);
pendingMetricsOrder.splice(target + 1, 0, listedMetrics[start]);
pendingMetricsOrder.splice(start, 1);
} else {
newMetricsOrder.splice(target, 0, newMetricsOrder[start]);
newMetricsOrder.splice(start + 1, 1);
pendingMetricsOrder.splice(target, 0, listedMetrics[start]);
pendingMetricsOrder.splice(start + 1, 1);
}
listedMetrics = [...pendingMetricsOrder];
columnHovering = null;
}
function closeAndApply() {
metrics = newMetricsOrder.filter((m) => unorderedMetrics.includes(m));
pendingMetrics = listedMetrics.filter((m) => pendingMetrics.includes(m));
isOpen = false;
let configKey;
@ -123,7 +136,7 @@
updateConfigurationMutation({
name: configKey,
value: JSON.stringify(metrics),
value: JSON.stringify(pendingMetrics),
}).subscribe((res) => {
if (res.fetching === false && res.error) {
throw res.error;
@ -145,7 +158,7 @@
});
};
dispatch('update-metrics', metrics);
applyMetrics(pendingMetrics);
}
</script>
@ -159,27 +172,35 @@
</li>
<hr />
{/if}
{#each newMetricsOrder as metric, index (metric)}
{#each listedMetrics as metric, index (metric)}
<li
class="cc-config-column list-group-item"
draggable={true}
ondragover="return false"
on:dragstart={(event) => columnsDragStart(event, index)}
on:drop|preventDefault={(event) => columnsDrag(event, index)}
on:dragenter={() => (columnHovering = index)}
ondragover={(event) => {
event.preventDefault()
return false
}}
ondragstart={(event) => {
columnsDragStart(event, index)
}}
ondrop={(event) => {
event.preventDefault()
columnsDrag(event, index)
}}
ondragenter={() => (columnHovering = index)}
class:is-active={columnHovering === index}
>
{#if unorderedMetrics.includes(metric)}
{#if pendingMetrics.includes(metric)}
<input
type="checkbox"
bind:group={unorderedMetrics}
bind:group={pendingMetrics}
value={metric}
checked
/>
{:else}
<input
type="checkbox"
bind:group={unorderedMetrics}
bind:group={pendingMetrics}
value={metric}
/>
{/if}
@ -192,8 +213,8 @@
</ListGroup>
</ModalBody>
<ModalFooter>
<Button color="primary" on:click={closeAndApply}>Close & Apply</Button>
<Button color="secondary" on:click={() => (isOpen = !isOpen)}>Cancel</Button>
<Button color="primary" onclick={() => closeAndApply()}>Close & Apply</Button>
<Button color="secondary" onclick={() => (isOpen = !isOpen)}>Cancel</Button>
</ModalFooter>
</Modal>

91
web/frontend/src/generic/select/SortSelection.svelte
View File

@ -7,7 +7,7 @@
-->
<script>
import { getContext } from "svelte";
import { getContext, onMount } from "svelte";
import {
Icon,
Button,
@ -18,44 +18,73 @@
ModalHeader,
ModalFooter,
} from "@sveltestrap/sveltestrap";
import { getSortItems } from "../utils.js";
export let isOpen = false;
export let sorting = { field: "startTime", type: "col", order: "DESC" };
let sortableColumns = [];
let activeColumnIdx;
/* Svelte 5 Props */
let {
isOpen = $bindable(false),
presetSorting = { field: "startTime", type: "col", order: "DESC" },
applySorting
} = $props();
/* Const Init */
const initialized = getContext("initialized");
function loadSortables(isInitialized) {
if (!isInitialized) return;
sortableColumns = [
{ field: "startTime", type: "col", text: "Start Time", order: "DESC" },
const globalMetrics = getContext("globalMetrics");
const fixedSortables = $state([
{ field: "startTime", type: "col", text: "Start Time (Default)", order: "DESC" },
{ field: "duration", type: "col", text: "Duration", order: "DESC" },
{ field: "numNodes", type: "col", text: "Number of Nodes", order: "DESC" },
{ field: "numHwthreads", type: "col", text: "Number of HWThreads", order: "DESC" },
{ field: "numAcc", type: "col", text: "Number of Accelerators", order: "DESC" },
{ field: "energy", type: "col", text: "Total Energy", order: "DESC" },
...getSortItems()
]
}
]);
function loadActiveIndex(isInitialized) {
if (!isInitialized) return;
/* State Init */
let sorting = $state({...presetSorting})
let activeColumnIdx = $state(0);
let metricSortables = $state([]);
/* Derived */
let sortableColumns = $derived([...fixedSortables, ...metricSortables]);
/* Effect */
$effect(() => {
if ($initialized) {
loadMetricSortables();
};
});
/* Functions */
function loadMetricSortables() {
metricSortables = globalMetrics.map((gm) => {
if (gm?.footprint) {
return {
field: gm.name + '_' + gm.footprint,
type: 'foot',
text: gm.name + ' (' + gm.footprint + ')',
order: 'DESC'
}
}
return null
}).filter((r) => r != null)
};
function loadActiveIndex() {
activeColumnIdx = sortableColumns.findIndex(
(col) => col.field == sorting.field,
);
sortableColumns[activeColumnIdx].order = sorting.order;
}
$: loadSortables($initialized);
$: loadActiveIndex($initialized)
function resetSorting(sort) {
sorting = {...sort};
loadActiveIndex();
};
</script>
<Modal
{isOpen}
toggle={() => {
resetSorting(presetSorting);
isOpen = !isOpen;
}}
>
@ -66,7 +95,7 @@
<ListGroupItem>
<button
class="sort"
on:click={() => {
onclick={() => {
if (activeColumnIdx == i) {
col.order = col.order == "DESC" ? "ASC" : "DESC";
} else {
@ -96,11 +125,27 @@
</ModalBody>
<ModalFooter>
<Button
color="primary"
on:click={() => {
color="warning"
onclick={() => {
isOpen = false;
}}>Close</Button
resetSorting({ field: "startTime", type: "col", order: "DESC" });
applySorting(sorting);
}}>Reset</Button
>
<Button
color="primary"
onclick={() => {
applySorting(sorting);
isOpen = false;
}}>Close & Apply</Button
>
<Button
color="secondary"
onclick={() => {
resetSorting(presetSorting);
isOpen = false
}}>Cancel
</Button>
</ModalFooter>
</Modal>

111
web/frontend/src/generic/select/TimeSelection.svelte
View File

@ -12,7 +12,6 @@
-->
<script>
import { createEventDispatcher } from "svelte";
import {
Icon,
Input,
@ -20,10 +19,12 @@
InputGroupText,
} from "@sveltestrap/sveltestrap";
export let from;
export let to;
export let customEnabled = true;
export let options = {
/* Svelte 5 Props */
let {
presetFrom,
presetTo,
customEnabled = true,
options = {
"Last quarter hour": 15 * 60,
"Last half hour": 30 * 60,
"Last hour": 60 * 60,
@ -31,67 +32,83 @@
"Last 4hrs": 4 * 60 * 60,
"Last 12hrs": 12 * 60 * 60,
"Last 24hrs": 24 * 60 * 60,
},
applyTime
} = $props();
/* Const Init */
const defaultTo = new Date(Date.now());
const defaultFrom = new Date(defaultTo.setHours(defaultTo.getHours() - 4));
/* State Init */
let timeType = $state("range");
let pendingCustomFrom = $state(null);
let pendingCustomTo = $state(null);
/* Derived */
let timeRange = $derived.by(() => {
if (presetTo && presetFrom) {
return ((presetTo.getTime() - presetFrom.getTime()) / 1000)
} else {
return ((defaultTo.getTime() - defaultFrom.getTime()) / 1000)
}
});
let unknownRange = $derived(!Object.values(options).includes(timeRange));
/* Functions */
function updateTimeRange() {
let now = Date.now();
let t = timeRange * 1000;
applyTime(new Date(now - t), new Date(now));
};
$: pendingFrom = from;
$: pendingTo = to;
const dispatch = createEventDispatcher();
let timeRange = // If both times set, return diff, else: display custom select
(to && from) ? ((to.getTime() - from.getTime()) / 1000) : -1;
function updateTimeRange() {
if (timeRange == -1) {
pendingFrom = null;
pendingTo = null;
return;
}
let now = Date.now(),
t = timeRange * 1000;
from = pendingFrom = new Date(now - t);
to = pendingTo = new Date(now);
dispatch("change", { from, to });
}
function updateExplicitTimeRange(type, event) {
let d = new Date(Date.parse(event.target.value));
if (type == "from") pendingFrom = d;
else pendingTo = d;
if (pendingFrom != null && pendingTo != null) {
from = pendingFrom;
to = pendingTo;
dispatch("change", { from, to });
}
function updateTimeCustom() {
if (pendingCustomFrom && pendingCustomTo) {
applyTime(new Date(pendingCustomFrom), new Date(pendingCustomTo));
}
};
</script>
<InputGroup class="inline-from">
<InputGroupText><Icon name="clock-history" /></InputGroupText>
<InputGroupText>Range</InputGroupText>
<select
class="form-select"
bind:value={timeRange}
on:change={updateTimeRange}
>
{#if customEnabled}
<option value={-1}>Custom</option>
<Input
type="select"
style="max-width:fit-content;background-color:#f8f9fa;"
bind:value={timeType}
>
<option value="range">Range</option>
<option value="custom">Custom</option>
</Input>
{:else}
<InputGroupText>Range</InputGroupText>
{/if}
{#if timeType === "range"}
<Input
type="select"
bind:value={timeRange}
onchange={updateTimeRange}
>
{#if unknownRange}
<option value={timeRange} disabled>Select new range...</option>
{/if}
{#each Object.entries(options) as [name, seconds]}
<option value={seconds}>{name}</option>
{/each}
</select>
{#if timeRange == -1}
</Input>
{:else}
<InputGroupText>from</InputGroupText>
<Input
type="datetime-local"
on:change={(event) => updateExplicitTimeRange("from", event)}
bind:value={pendingCustomFrom}
onchange={updateTimeCustom}
></Input>
<InputGroupText>to</InputGroupText>
<Input
type="datetime-local"
on:change={(event) => updateExplicitTimeRange("to", event)}
bind:value={pendingCustomTo}
onchange={updateTimeCustom}
></Input>
{/if}
</InputGroup>

18
web/frontend/src/generic/utils.js
View File

@ -388,24 +388,6 @@ export function findJobFootprintThresholds(job, stat, metricConfig) {
}
}
export function getSortItems() {
//console.time('sort')
const globalMetrics = getContext("globalMetrics")
const result = globalMetrics.map((gm) => {
if (gm?.footprint) {
return {
field: gm.name + '_' + gm.footprint,
type: 'foot',
text: gm.name + ' (' + gm.footprint + ')',
order: 'DESC'
}
}
return null
}).filter((r) => r != null)
//console.timeEnd('sort')
return [...result];
};
function getMetricConfigDeep(metric, cluster, subCluster) {
const clusters = getContext("clusters");
if (cluster != null) {

17
web/frontend/src/header.entrypoint.js
View File

@ -1,10 +1,17 @@
import Header from './Header.svelte'
import { mount } from 'svelte';
import Header from './Header.svelte';
const headerDomTarget = document.getElementById('svelte-header')
const headerDomTarget = document.getElementById('svelte-header');
if (headerDomTarget != null) {
new Header({
mount(Header, {
target: headerDomTarget,
props: { ...header },
})
props: { // { ...header },
username: hUsername,
authlevel: hAuthlevel,
clusters: hClusters,
subClusters: hSubClusters,
roles: hRoles,
},
});
}

11
web/frontend/src/header/NavbarLinks.svelte
View File

@ -18,10 +18,13 @@
DropdownItem,
} from "@sveltestrap/sveltestrap";
export let clusters;
export let subClusters;
export let links;
export let direction = "down";
/* Svelte 5 Props */
let {
clusters,
subClusters,
links,
direction = "down"
} = $props();
</script>
{#each links as item}

15
web/frontend/src/header/NavbarTools.svelte
View File

@ -25,10 +25,13 @@
Col,
} from "@sveltestrap/sveltestrap";
export let username;
export let authlevel;
export let roles;
export let screenSize;
/* Svelte 5 Props */
let {
username,
authlevel,
roles,
screenSize
} = $props();
</script>
<Nav navbar>
@ -91,7 +94,7 @@
<NavItem>
<Button
outline
on:click={() => (window.location.href = "/config")}
onclick={() => (window.location.href = "/config")}
style="margin-left: 10px;"
title="Settings"
>
@ -136,7 +139,7 @@
<Col xs="4">
<Button
outline
on:click={() => (window.location.href = "/config")}
onclick={() => (window.location.href = "/config")}
size="sm"
class="my-2 w-100"
>

3
web/frontend/src/job.entrypoint.js
View File

@ -1,7 +1,8 @@
import { mount } from 'svelte';
import {} from './header.entrypoint.js'
import Job from './Job.root.svelte'
new Job({
mount(Job, {
target: document.getElementById('svelte-app'),
props: {
dbid: jobInfos.id,

22
web/frontend/src/job/EnergySummary.svelte
View File

@ -9,7 +9,8 @@
<script>
import {
getContext
getContext,
onMount
} from "svelte";
import {
Card,
@ -21,17 +22,26 @@
} from "@sveltestrap/sveltestrap";
import { round } from "mathjs";
export let jobId;
export let jobEnergy = null;
export let jobEnergyFootprint = null;
/* Svelte 5 Props */
let {
jobId,
jobEnergy = null,
jobEnergyFootprint = null
} = $props();
/* Const Init */
const carbonPerkWh = getContext("emission");
let carbonMass;
$: if (carbonPerkWh) {
/* State Init */
let carbonMass = $state(0);
/* On Mount */
onMount(() => {
if (carbonPerkWh) {
// ( kWh * g/kWh) / 1000 = kg || Rounded to 2 Digits via [ round(x * 100) / 100 ]
carbonMass = round( ((jobEnergy ? jobEnergy : 0.0) * carbonPerkWh) / 10 ) / 100;
}
});
</script>
<Card>

23
web/frontend/src/job/JobRoofline.svelte
View File

@ -21,11 +21,13 @@
} from "../generic/utils.js";
import Roofline from "../generic/plots/Roofline.svelte";
export let job;
export let clusters;
let roofWidth;
/* Svelte 5 Props */
let {
job,
clusters,
} = $props();
/* Const Init */
const client = getContextClient();
const roofQuery = gql`
query ($dbid: ID!, $selectedMetrics: [String!]!, $selectedScopes: [MetricScope!]!, $selectedResolution: Int) {
@ -38,16 +40,19 @@
}
}
}
}
`;
}`;
/* State Init */
let roofWidth = $state(0);
/* Derived */
// Roofline: Always load roofMetrics with configured timestep (Resolution: 0)
$: roofMetrics = queryStore({
const roofMetrics = $derived(queryStore({
client: client,
query: roofQuery,
variables: { dbid: job.id, selectedMetrics: ["flops_any", "mem_bw"], selectedScopes: ["node"], selectedResolution: 0 },
});
})
);
</script>
{#if $roofMetrics.error}

9
web/frontend/src/job/JobSummary.svelte
View File

@ -18,9 +18,12 @@
import JobFootprintPolar from "./jobsummary/JobFootprintPolar.svelte";
export let job;
export let width = "auto";
export let height = "400px";
/* Svelte 5 Props */
let {
job,
width = "auto",
height = "400px",
} = $props();
const showFootprintTab = !!getContext("cc-config")[`job_view_showFootprint`];
</script>

59
web/frontend/src/job/StatsTab.svelte
View File

@ -26,16 +26,14 @@
import MetricSelection from "../generic/select/MetricSelection.svelte";
import StatsTable from "./statstab/StatsTable.svelte";
export let job;
export let clusters;
export let tabActive;
let loadScopes = false;
let selectedScopes = [];
let selectedMetrics = [];
let availableMetrics = new Set(); // For Info Only, filled by MetricSelection Component
let isMetricSelectionOpen = false;
/* Svelte 5 Props */
let {
job,
clusters,
tabActive,
} = $props();
/* Const Init */
const client = getContextClient();
const query = gql`
query ($dbid: ID!, $selectedMetrics: [String!]!, $selectedScopes: [MetricScope!]!) {
@ -55,16 +53,29 @@
}
`;
$: scopedStats = queryStore({
/* State Init */
let moreScopes = $state(false);
let selectedScopes = $state([]);
let selectedMetrics = $state([]);
let totalMetrics = $state(0); // For Info Only, filled by MetricSelection Component
let isMetricSelectionOpen = $state(false);
/* Derived */
const scopedStats = $derived(queryStore({
client: client,
query: query,
variables: { dbid: job.id, selectedMetrics, selectedScopes },
});
})
);
$: if (loadScopes) {
/* Functions */
function loadScopes() {
// Archived Jobs Load All Scopes By Default (See Backend)
moreScopes = true;
selectedScopes = ["node", "socket", "core", "hwthread", "accelerator"];
}
};
/* On Init */
// Handle Job Query on Init -> is not executed anymore
getContext("on-init")(() => {
if (!job) return;
@ -98,12 +109,12 @@
<TabPane tabId="stats" tab="Statistics Table" class="overflow-x-auto" active={tabActive}>
<Row>
<Col class="m-2">
<Button outline on:click={() => (isMetricSelectionOpen = true)} class="px-2" color="primary" style="margin-right:0.5rem">
Select Metrics (Selected {selectedMetrics.length} of {availableMetrics.size} available)
<Button outline onclick={() => (isMetricSelectionOpen = true)} class="px-2" color="primary" style="margin-right:0.5rem">
Select Metrics (Selected {selectedMetrics.length} of {totalMetrics} available)
</Button>
{#if job.numNodes > 1}
<Button class="px-2 ml-auto" color="success" outline on:click={() => (loadScopes = !loadScopes)} disabled={loadScopes}>
{#if !loadScopes}
{#if job.numNodes > 1 && job.state === "running"}
<Button class="px-2 ml-auto" color="success" outline onclick={loadScopes} disabled={moreScopes}>
{#if !moreScopes}
<Icon name="plus-square-fill" style="margin-right:0.25rem"/> Add More Scopes
{:else}
<Icon name="check-square-fill" style="margin-right:0.25rem"/> OK: Scopes Added
@ -129,17 +140,21 @@
{:else}
<StatsTable
hosts={job.resources.map((r) => r.hostname).sort()}
data={$scopedStats?.data?.scopedJobStats}
jobStats={$scopedStats?.data?.scopedJobStats}
{selectedMetrics}
/>
{/if}
</TabPane>
<MetricSelection
bind:isOpen={isMetricSelectionOpen}
bind:totalMetrics
presetMetrics={selectedMetrics}
cluster={job.cluster}
subCluster={job.subCluster}
configName="job_view_nodestats_selectedMetrics"
bind:allMetrics={availableMetrics}
bind:metrics={selectedMetrics}
bind:isOpen={isMetricSelectionOpen}
preInitialized
applyMetrics={(newMetrics) =>
selectedMetrics = [...newMetrics]
}
/>

15
web/frontend/src/job/jobsummary/JobFootprintBars.svelte
View File

@ -17,10 +17,16 @@
} from "@sveltestrap/sveltestrap";
import { findJobFootprintThresholds } from "../../generic/utils.js";
export let job;
/* Svelte 5 Props */
let {job} = $props();
/* Derived */
// Prepare Job Footprint Data Based On Values Saved In Database
const jobFootprintData = job?.footprint?.map((jf) => {
const jobFootprintData = $derived(buildFootprint(job?.footprint));
/* Functions */
function buildFootprint(input) {
let result = input?.map((jf) => {
const fmc = getContext("getMetricConfig")(job.cluster, job.subCluster, jf.name);
if (fmc) {
// Unit
@ -91,6 +97,9 @@
return a.impact - b.impact || ((a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0));
});;
return result
};
function evalFootprint(value, thresholds, lowerIsBetter, level) {
// Handle Metrics in which less value is better
switch (level) {
@ -161,7 +170,7 @@
>{fpd.message}</Tooltip
>
</div>
<Row cols={12} class="{(jobFootprintData.length == (index + 1)) ? 'mb-0' : 'mb-2'}">
<Row cols={12} class={(jobFootprintData.length == (index + 1)) ? 'mb-0' : 'mb-2'}>
{#if fpd.dir}
<Col xs="1">
<Icon name="caret-left-fill" />

9
web/frontend/src/job/jobsummary/JobFootprintPolar.svelte
View File

@ -20,8 +20,10 @@
import Polar from "../../generic/plots/Polar.svelte";
import { findJobFootprintThresholds } from "../../generic/utils.js";
export let job;
/* Svelte 5 Props */
let { job } = $props();
/* Const Init */
// Metric Names Configured To Be Footprints For (sub)Cluster
const clusterFootprintMetrics = getContext("clusters")
.find((c) => c.name == job.cluster)?.subClusters
@ -51,11 +53,12 @@
}
`;
$: polarData = queryStore({
/* Derived */
const polarData = $derived(queryStore({
client: client,
query: polarQuery,
variables:{ dbid: job.id, selectedMetrics: clusterFootprintMetrics },
});
}));
</script>
<CardBody>

123
web/frontend/src/job/statstab/StatsTable.svelte
View File

@ -2,9 +2,9 @@
@component Job-View subcomponent; display table of metric data statistics with selectable scopes
Properties:
- `data Object`: The data object
- `selectedMetrics [String]`: The selected metrics
- `hosts [String]`: The list of hostnames of this job
- `jobStats Object`: The data object
- `selectedMetrics [String]`: The selected metrics
-->
<script>
@ -17,39 +17,87 @@
} from "@sveltestrap/sveltestrap";
import StatsTableEntry from "./StatsTableEntry.svelte";
export let data = [];
export let selectedMetrics = [];
export let hosts = [];
/* Svelte 5 Props */
let {
hosts = [],
jobStats = [],
selectedMetrics = [],
} = $props();
let sorting = {};
let availableScopes = {};
let selectedScopes = {};
/* State Init */
let sortedHosts = $state(hosts);
let sorting = $state(setupSorting(selectedMetrics));
let availableScopes = $state(setupAvailable(jobStats));
let selectedScopes = $state(setupSelected(availableScopes));
const scopesForMetric = (metric) =>
data?.filter((jm) => jm.name == metric)?.map((jm) => jm.scope) || [];
const setScopeForMetric = (metric, scope) =>
selectedScopes[metric] = scope
/* Derived Init */
const tableData = $derived(setupData(jobStats, hosts, selectedMetrics, availableScopes))
$: if (data && selectedMetrics) {
for (let metric of selectedMetrics) {
availableScopes[metric] = scopesForMetric(metric);
// Set Initial Selection, but do not use selectedScopes: Skips reactivity
if (availableScopes[metric].includes("accelerator")) {
setScopeForMetric(metric, "accelerator");
} else if (availableScopes[metric].includes("core")) {
setScopeForMetric(metric, "core");
} else if (availableScopes[metric].includes("socket")) {
setScopeForMetric(metric, "socket");
} else {
setScopeForMetric(metric, "node");
}
sorting[metric] = {
/* Functions */
function setupSorting(metrics) {
let pendingSorting = {};
if (metrics) {
for (let metric of metrics) {
pendingSorting[metric] = {
min: { dir: "up", active: false },
avg: { dir: "up", active: false },
max: { dir: "up", active: false },
};
}
};
};
return pendingSorting;
};
function setupAvailable(data) {
let pendingAvailable = {};
if (data) {
for (let d of data) {
if (!pendingAvailable[d.name]) {
pendingAvailable[d.name] = [d.scope]
} else {
pendingAvailable[d.name] = [...pendingAvailable[d.name], d.scope]
};
};
};
return pendingAvailable;
};
function setupSelected(available) {
let pendingSelected = {};
for (const [metric, scopes] of Object.entries(available)) {
if (scopes.includes("accelerator")) {
pendingSelected[metric] = "accelerator"
} else if (scopes.includes("core")) {
pendingSelected[metric] = "core"
} else if (scopes.includes("socket")) {
pendingSelected[metric] = "socket"
} else {
pendingSelected[metric] = "node"
};
};
return pendingSelected;
};
function setupData(js, h, sm, as) {
let pendingTableData = {};
if (js) {
for (const host of h) {
if (!pendingTableData[host]) {
pendingTableData[host] = {};
};
for (const metric of sm) {
if (!pendingTableData[host][metric]) {
pendingTableData[host][metric] = {};
};
for (const scope of as[metric]) {
pendingTableData[host][metric][scope] = js.find((d) => d.name == metric && d.scope == scope)
?.stats.filter((st) => st.hostname == host && st.data != null)
?.sort((a, b) => a.id - b.id) || []
};
};
};
};
return pendingTableData;
}
function sortBy(metric, stat) {
@ -62,11 +110,12 @@
s.active = true;
}
let stats = data.find(
(d) => d.name == metric && d.scope == "node",
let stats = jobStats.find(
(js) => js.name == metric && js.scope == "node",
)?.stats || [];
sorting = { ...sorting };
hosts = hosts.sort((h1, h2) => {
sortedHosts = sortedHosts.sort((h1, h2) => {
let s1 = stats.find((s) => s.hostname == h1)?.data;
let s2 = stats.find((s) => s.hostname == h2)?.data;
if (s1 == null || s2 == null) return -1;
@ -81,7 +130,7 @@
<thead>
<!-- Header Row 1: Selectors -->
<tr>
<th/>
<th></th>
{#each selectedMetrics as metric}
<!-- To Match Row-2 Header Field Count-->
<th colspan={selectedScopes[metric] == "node" ? 3 : 4}>
@ -89,7 +138,7 @@
<InputGroupText>
{metric}
</InputGroupText>
<Input type="select" bind:value={selectedScopes[metric]} disabled={availableScopes[metric].length === 1}>
<Input type="select" bind:value={selectedScopes[metric]} disabled={availableScopes[metric]?.length === 1}>
{#each (availableScopes[metric] || []) as scope}
<option value={scope}>{scope}</option>
{/each}
@ -106,7 +155,7 @@
<th>Id</th>
{/if}
{#each ["min", "avg", "max"] as stat}
<th on:click={() => sortBy(metric, stat)}>
<th onclick={() => sortBy(metric, stat)}>
{stat}
{#if selectedScopes[metric] == "node"}
<Icon
@ -122,14 +171,12 @@
</tr>
</thead>
<tbody>
{#each hosts as host (host)}
{#each sortedHosts as host (host)}
<tr>
<th scope="col">{host}</th>
{#each selectedMetrics as metric (metric)}
<StatsTableEntry
{data}
{host}
{metric}
data={tableData[host][metric][selectedScopes[metric]]}
scope={selectedScopes[metric]}
/>
{/each}

96
web/frontend/src/job/statstab/StatsTableEntry.svelte
View File

@ -2,90 +2,75 @@
@component Job-View subcomponent; Single Statistics entry component for statstable
Properties:
- `host String`: The hostname (== node)
- `metric String`: The metric name
- `data [Object]`: The jobs statsdata for host-metric-scope
- `scope String`: The selected scope
- `data [Object]`: The jobs statsdata
-->
<script>
import { Icon } from "@sveltestrap/sveltestrap";
export let host;
export let metric;
export let scope;
export let data;
/* Svelte 5 Props */
let {
data,
scope,
} = $props();
let entrySorting = {
id: { dir: "down", active: true },
min: { dir: "up", active: false },
avg: { dir: "up", active: false },
max: { dir: "up", active: false },
/* State Init */
let sortBy = $state("id");
let sortDir = $state("down");
/* Derived */
const sortedData = $derived(updateData(data, sortBy, sortDir));
/* Functions */
function updateData(data, sortBy, sortDir) {
data.sort((a, b) => {
if (a == null || b == null) {
return -1;
} else if (sortBy === "id") {
return sortDir != "up"
? a[sortBy].localeCompare(b[sortBy], undefined, {numeric: true, sensitivity: 'base'})
: b[sortBy].localeCompare(a[sortBy], undefined, {numeric: true, sensitivity: 'base'});
} else {
return sortDir != "up"
? a.data[sortBy] - b.data[sortBy]
: b.data[sortBy] - a.data[sortBy];
};
function compareNumbers(a, b) {
return a.id - b.id;
}
function sortByField(field) {
let s = entrySorting[field];
if (s.active) {
s.dir = s.dir == "up" ? "down" : "up";
} else {
for (let field in entrySorting) entrySorting[field].active = false;
s.active = true;
}
entrySorting = { ...entrySorting };
stats = stats.sort((a, b) => {
if (a == null || b == null) return -1;
if (field === "id") {
return s.dir != "up" ?
a[field].localeCompare(b[field], undefined, {numeric: true, sensitivity: 'base'}) :
b[field].localeCompare(a[field], undefined, {numeric: true, sensitivity: 'base'})
} else {
return s.dir != "up"
? a.data[field] - b.data[field]
: b.data[field] - a.data[field];
}
});
}
$: stats = data
?.find((d) => d.name == metric && d.scope == scope)
?.stats.filter((s) => s.hostname == host && s.data != null)
?.sort(compareNumbers) || [];
return [...data];
};
</script>
{#if stats == null || stats.length == 0}
{#if data == null || data.length == 0}
<td colspan={scope == "node" ? 3 : 4}><i>No data</i></td>
{:else if stats.length == 1 && scope == "node"}
{:else if data.length == 1 && scope == "node"}
<td>
{stats[0].data.min}
{data[0].data.min}
</td>
<td>
{stats[0].data.avg}
{data[0].data.avg}
</td>
<td>
{stats[0].data.max}
{data[0].data.max}
</td>
{:else}
<td colspan="4">
<table style="width: 100%;">
<tbody>
<tr>
{#each ["id", "min", "avg", "max"] as field}
<th on:click={() => sortByField(field)}>
<th onclick={() => {
sortBy = field;
sortDir = (sortDir == "up" ? "down" : "up");
}}>
Sort
<Icon
name="caret-{entrySorting[field].dir}{entrySorting[field].active
? '-fill'
: ''}"
name="caret-{sortBy == field? sortDir: 'down'}{sortBy == field? '-fill': ''}"
/>
</th>
{/each}
</tr>
{#each stats as s, i}
{#each sortedData as s, i}
<tr>
<th>{s.id ?? i}</th>
<td>{s.data.min}</td>
@ -93,6 +78,7 @@
<td>{s.data.max}</td>
</tr>
{/each}
</tbody>
</table>
</td>
{/if}

3
web/frontend/src/jobs.entrypoint.js
View File

@ -1,7 +1,8 @@
import { mount } from 'svelte';
import {} from './header.entrypoint.js'
import Jobs from './Jobs.root.svelte'
new Jobs({
mount(Jobs, {
target: document.getElementById('svelte-app'),
props: {
filterPresets: filterPresets,

3
web/frontend/src/list.entrypoint.js
View File

@ -1,7 +1,8 @@
import { mount } from 'svelte';
import {} from './header.entrypoint.js'
import List from './List.root.svelte'
new List({
mount(List, {
target: document.getElementById('svelte-app'),
props: {
filterPresets: filterPresets,

7
web/frontend/src/node.entrypoint.js
View File

@ -1,13 +1,14 @@
import { mount } from 'svelte';
import {} from './header.entrypoint.js'
import Node from './Node.root.svelte'
new Node({
mount(Node, {
target: document.getElementById('svelte-app'),
props: {
cluster: infos.cluster,
hostname: infos.hostname,
from: infos.from,
to: infos.to
presetFrom: infos.from,
presetTo: infos.to
},
context: new Map([
['cc-config', clusterCockpitConfig]

3
web/frontend/src/status.entrypoint.js
View File

@ -1,7 +1,8 @@
import { mount } from 'svelte';
import {} from './header.entrypoint.js'
import Status from './Status.root.svelte'
new Status({
mount(Status, {
target: document.getElementById('svelte-app'),
props: {
cluster: infos.cluster,

7
web/frontend/src/systems.entrypoint.js
View File

@ -1,14 +1,15 @@
import { mount } from 'svelte';
import {} from './header.entrypoint.js'
import Systems from './Systems.root.svelte'
new Systems({
mount(Systems, {
target: document.getElementById('svelte-app'),
props: {
displayType: displayType,
cluster: infos.cluster,
subCluster: infos.subCluster,
from: infos.from,
to: infos.to
fromPreset: infos.from,
toPreset: infos.to
},
context: new Map([
['cc-config', clusterCockpitConfig],

197
web/frontend/src/systems/NodeList.svelte
View File

@ -10,38 +10,28 @@
-->
<script>
import { getContext } from "svelte";
import { queryStore, gql, getContextClient, mutationStore } from "@urql/svelte";
import { Row, Col, Card, Table, Spinner } from "@sveltestrap/sveltestrap";
import { stickyHeader } from "../generic/utils.js";
import NodeListRow from "./nodelist/NodeListRow.svelte";
import Pagination from "../generic/joblist/Pagination.svelte";
export let cluster;
export let subCluster = "";
export let ccconfig = null;
export let selectedMetrics = [];
export let selectedResolution = 0;
export let hostnameFilter = "";
export let systemUnits = null;
export let from = null;
export let to = null;
/* Svelte 5 Props */
let {
cluster,
subCluster = "",
ccconfig = null,
selectedMetrics = [],
selectedResolution = 0,
hostnameFilter = "",
presetSystemUnits = null,
from = null,
to = null
} = $props();
// Decouple from Job List Paging Params?
let usePaging = ccconfig?.node_list_usePaging || false
let itemsPerPage = usePaging ? (ccconfig?.plot_list_nodesPerPage || 10) : 10;
let page = 1;
let paging = { itemsPerPage, page };
let headerPaddingTop = 0;
stickyHeader(
".cc-table-wrapper > table.table >thead > tr > th.position-sticky:nth-child(1)",
(x) => (headerPaddingTop = x),
);
// const { query: initq } = init();
const initialized = getContext("initialized");
/* Const Init */
const client = getContextClient();
const usePaging = ccconfig?.node_list_usePaging || false;
const nodeListQuery = gql`
query ($cluster: String!, $subCluster: String!, $nodeFilter: String!, $metrics: [String!], $scopes: [MetricScope!]!, $from: Time!, $to: Time!, $paging: PageRequest!, $selectedResolution: Int) {
nodeMetricsList(
@ -91,51 +81,16 @@
}
`
const updateConfigurationMutation = ({ name, value }) => {
return mutationStore({
client: client,
query: gql`
mutation ($name: String!, $value: String!) {
updateConfiguration(name: $name, value: $value)
}
`,
variables: { name, value },
});
};
/* State Init */
let nodes = $state([]);
let page = $state(1);
let itemsPerPage = $state(usePaging ? (ccconfig?.plot_list_nodesPerPage || 10) : 10);
let headerPaddingTop = $state(0);
let matchedNodes = $state(0);
// Decouple from Job List Paging Params?
function updateConfiguration(value, page) {
updateConfigurationMutation({
name: "plot_list_nodesPerPage",
value: value,
}).subscribe((res) => {
if (res.fetching === false && !res.error) {
nodes = [] // Empty List
paging = { itemsPerPage: value, page: page }; // Trigger reload of nodeList
} else if (res.fetching === false && res.error) {
throw res.error;
}
});
}
if (!usePaging) {
window.addEventListener('scroll', () => {
let {
scrollTop,
scrollHeight,
clientHeight
} = document.documentElement;
// Add 100 px offset to trigger load earlier
if (scrollTop + clientHeight >= scrollHeight - 100 && $nodesQuery?.data != null && $nodesQuery.data?.nodeMetricsList.hasNextPage) {
let pendingPaging = { ...paging }
pendingPaging.page += 1
paging = pendingPaging
};
});
};
$: nodesQuery = queryStore({
/* Derived */
const paging = $derived({ itemsPerPage, page });
const nodesQuery = $derived(queryStore({
client: client,
query: nodeListQuery,
variables: {
@ -150,24 +105,93 @@
selectedResolution: selectedResolution,
},
requestPolicy: "network-only", // Resolution queries are cached, but how to access them? For now: reload on every change
}));
/* Effects */
$effect(() => {
if (!usePaging) {
window.addEventListener('scroll', () => {
let {
scrollTop,
scrollHeight,
clientHeight
} = document.documentElement;
// Add 100 px offset to trigger load earlier
if (scrollTop + clientHeight >= scrollHeight - 100 && $nodesQuery?.data?.nodeMetricsList?.hasNextPage) {
page += 1
};
});
};
});
let nodes = [];
$: if ($initialized && $nodesQuery.data) {
if (usePaging) {
nodes = [...$nodesQuery.data.nodeMetricsList.items].sort((a, b) => a.host.localeCompare(b.host));
} else {
nodes = nodes.concat([...$nodesQuery.data.nodeMetricsList.items].sort((a, b) => a.host.localeCompare(b.host)))
}
}
$effect(() => {
handleNodes($nodesQuery?.data?.nodeMetricsList);
});
$: if (!usePaging && (selectedMetrics || selectedResolution || hostnameFilter || from || to)) {
// Continous Scroll: Reset list and paging if parameters change: Existing entries will not match new selections
$effect(() => {
// Triggers (Except Paging)
from, to
selectedMetrics, selectedResolution
hostnameFilter
// Continous Scroll: Reset nodes and paging if parameters change: Existing entries will not match new selections
if (!usePaging) {
nodes = [];
paging = { itemsPerPage, page: 1 };
page = 1;
}
});
/* Functions */
function handleNodes(data) {
if (data) {
matchedNodes = data.totalNodes;
if (usePaging || nodes.length == 0) {
nodes = [...data.items].sort((a, b) => a.host.localeCompare(b.host));
} else {
// Workaround to ignore secondary store triggers (reason tbd)
const oldNodes = $state.snapshot(nodes)
const newNodes = [...data.items].map((d) => d.host)
if (!oldNodes.some((n) => newNodes.includes(n.host))) {
nodes = nodes.concat([...data.items].sort((a, b) => a.host.localeCompare(b.host)))
};
};
};
};
// Decouple from Job List Paging Params?
function updateConfiguration(newItems, newPage) {
updateConfigurationMutation({
name: "plot_list_nodesPerPage",
value: newItems.toString(),
}).subscribe((res) => {
if (res.fetching === false && !res.error) {
nodes = []; // Empty List
itemsPerPage = newItems;
page = newPage; // Trigger reload of nodeList
} else if (res.fetching === false && res.error) {
throw res.error;
}
});
}
$: matchedNodes = $nodesQuery.data?.nodeMetricsList.totalNodes || matchedNodes;
/* Const Functions */
const updateConfigurationMutation = ({ name, value }) => {
return mutationStore({
client: client,
query: gql`
mutation ($name: String!, $value: String!) {
updateConfiguration(name: $name, value: $value)
}
`,
variables: { name, value },
});
};
/* Init Header */
stickyHeader(
".cc-table-wrapper > table.table >thead > tr > th.position-sticky:nth-child(1)",
(x) => (headerPaddingTop = x),
);
</script>
<Row>
@ -192,7 +216,7 @@
scope="col"
style="padding-top: {headerPaddingTop}px"
>
{metric} ({systemUnits[metric]})
{metric} ({presetSystemUnits[metric]})
</th>
{/each}
</tr>
@ -238,16 +262,17 @@
{#if usePaging}
<Pagination
bind:page
{page}
{itemsPerPage}
itemText="Nodes"
totalItems={matchedNodes}
on:update-paging={({ detail }) => {
updatePaging={(detail) => {
if (detail.itemsPerPage != itemsPerPage) {
updateConfiguration(detail.itemsPerPage.toString(), detail.page);
updateConfiguration(detail.itemsPerPage, detail.page);
} else {
nodes = []
paging = { itemsPerPage: detail.itemsPerPage, page: detail.page };
nodes = [];
itemsPerPage = detail.itemsPerPage;
page = detail.page;
}
}}
/>

87
web/frontend/src/systems/NodeOverview.svelte
View File

@ -10,20 +10,26 @@
<script>
import { queryStore, gql, getContextClient } from "@urql/svelte";
import { Row, Col, Card, Spinner } from "@sveltestrap/sveltestrap";
import { init, checkMetricsDisabled } from "../generic/utils.js";
import { checkMetricDisabled } from "../generic/utils.js";
import MetricPlot from "../generic/plots/MetricPlot.svelte";
export let ccconfig = null;
export let cluster = "";
export const subCluster = "";
export let selectedMetrics = null;
export let hostnameFilter = "";
export let from = null;
export let to = null;
/* Svelte 5 Props */
let {
ccconfig = null,
cluster = "",
selectedMetric = "",
hostnameFilter = "",
from = null,
to = null
} = $props();
const { query: initq } = init();
/* Const Init */
const client = getContextClient();
const nodeQuery = gql`
/* Derived */
const nodesQuery = $derived(queryStore({
client: client,
query: gql`
query ($cluster: String!, $metrics: [String!], $from: Time!, $to: Time!) {
nodeMetrics(
cluster: $cluster
@ -54,45 +60,41 @@
}
}
}
`
$: selectedMetric = selectedMetrics[0] ? selectedMetrics[0] : "";
$: nodesQuery = queryStore({
client: client,
query: nodeQuery,
`,
variables: {
cluster: cluster,
metrics: selectedMetrics,
from: from.toISOString(),
to: to.toISOString(),
metrics: [selectedMetric],
from: from,
to: to,
},
});
}));
const mappedData = $derived(handleQueryData($nodesQuery?.data));
const filteredData = $derived(mappedData.filter((h) => h.host.includes(hostnameFilter)));
/* Functions */
function handleQueryData(queryData) {
let rawData = []
$: if ($initq.data && $nodesQuery?.data) {
rawData = $nodesQuery?.data?.nodeMetrics.filter((h) => {
if (h.subCluster === '') { // Exclude nodes with empty subCluster field
console.warn('subCluster not configured for node', h.host)
return false
} else {
if (queryData) {
rawData = queryData.nodeMetrics.filter((h) => {
if (h.subCluster !== '') { // Exclude nodes with empty subCluster field
return h.metrics.some(
(m) => selectedMetrics.includes(m.name) && m.scope == "node",
(m) => m?.name == selectedMetric && m.scope == "node",
)
}
})
}
};
});
};
let mappedData = []
$: if (rawData?.length > 0) {
mappedData = rawData.map((h) => ({
let pendingMapped = [];
if (rawData.length > 0) {
pendingMapped = rawData.map((h) => ({
host: h.host,
subCluster: h.subCluster,
data: h.metrics.filter(
(m) => selectedMetrics.includes(m.name) && m.scope == "node",
(m) => m?.name == selectedMetric && m.scope == "node",
),
disabled: checkMetricsDisabled(
selectedMetrics,
disabled: checkMetricDisabled(
selectedMetric,
cluster,
h.subCluster,
),
@ -100,11 +102,7 @@
.sort((a, b) => a.host.localeCompare(b.host))
}
let filteredData = []
$: if (mappedData?.length > 0) {
filteredData = mappedData.filter((h) =>
h.host.includes(hostnameFilter)
)
return pendingMapped;
}
</script>
@ -132,7 +130,7 @@
>{item.host} ({item.subCluster})</a
>
</h4>
{#if item?.disabled[selectedMetric]}
{#if item?.disabled}
<Card body class="mx-3" color="info"
>Metric disabled for subcluster <code
>{selectedMetric}:{item.subCluster}</code
@ -140,6 +138,8 @@
>
{:else}
<!-- "No Data"-Warning included in MetricPlot-Component -->
<!-- #key: X-axis keeps last selected timerange otherwise -->
{#key item.data[0].metric.series[0].data.length}
<MetricPlot
timestep={item.data[0].metric.timestep}
series={item.data[0].metric.series}
@ -148,6 +148,7 @@
subCluster={item.subCluster}
forNode
/>
{/key}
{/if}
</Col>
{/each}

2
web/frontend/src/systems/nodelist/NodeListRow.svelte
View File

@ -158,7 +158,7 @@
height={175}
forNode
/>
<div class="my-2"/>
<div class="my-2"></div>
{#key extendedLegendData}
<MetricPlot
{cluster}

7
web/frontend/src/tags.entrypoint.js
View File

@ -1,16 +1,15 @@
import { mount } from 'svelte';
import {} from './header.entrypoint.js'
import Tags from './Tags.root.svelte'
new Tags({
mount(Tags, {
target: document.getElementById('svelte-app'),
props: {
username: username,
isAdmin: isAdmin,
tagmap: tagmap,
presetTagmap: tagmap,
},
context: new Map([
['cc-config', clusterCockpitConfig]
])
})

3
web/frontend/src/user.entrypoint.js
View File

@ -1,7 +1,8 @@
import { mount } from 'svelte';
import {} from './header.entrypoint.js'
import User from './User.root.svelte'
new User({
mount(User, {
target: document.getElementById('svelte-app'),
props: {
filterPresets: filterPresets,

13
web/templates/base.tmpl
View File

@ -14,13 +14,12 @@
{{block "stylesheets" .}}
{{end}}
<script>
const header = {
"username": "{{ .User.Username }}",
"authlevel": {{ .User.GetAuthLevel }},
"clusters": {{ .Clusters }},
"subClusters": {{ .SubClusters }},
"roles": {{ .Roles }}
};
// Used for header.entrypoint.js mount and filters/Resources.svelte
const hUsername = {{ .User.Username }};
const hAuthlevel = {{ .User.GetAuthLevel }};
const hClusters = {{ .Clusters }};
const hSubClusters = {{ .SubClusters }};
const hRoles = {{ .Roles }};
</script>
</head>
<body class="site">