From 60ec7e54f5cf5d7df9db213687b1e2cfa7be0407 Mon Sep 17 00:00:00 2001 From: Christoph Kluge Date: Wed, 2 Jul 2025 18:43:25 +0200 Subject: [PATCH 1/2] Update component header, format, streamline SV5 components --- web/frontend/src/Analysis.root.svelte | 18 +- web/frontend/src/Config.root.svelte | 15 +- web/frontend/src/Header.svelte | 34 +- web/frontend/src/Job.root.svelte | 18 +- web/frontend/src/Jobs.root.svelte | 20 +- web/frontend/src/List.root.svelte | 60 +- web/frontend/src/Node.root.svelte | 14 +- web/frontend/src/Status.root.svelte | 27 +- web/frontend/src/Systems.root.svelte | 27 +- web/frontend/src/Tags.root.svelte | 18 +- web/frontend/src/User.root.svelte | 15 +- .../src/analysis/PlotSelection.svelte | 30 +- web/frontend/src/config/AdminSettings.svelte | 11 +- .../src/config/SupportSettings.svelte | 6 +- web/frontend/src/config/UserSettings.svelte | 10 +- web/frontend/src/config/admin/AddUser.svelte | 17 +- .../src/config/admin/EditProject.svelte | 12 +- web/frontend/src/config/admin/EditRole.svelte | 17 +- .../src/config/admin/NoticeEdit.svelte | 11 +- web/frontend/src/config/admin/Options.svelte | 4 +- .../src/config/admin/ShowUsers.svelte | 17 +- .../src/config/admin/ShowUsersRow.svelte | 14 +- .../src/config/support/SupportOptions.svelte | 11 +- .../src/config/user/PlotColorScheme.svelte | 744 +++++++++--------- .../src/config/user/PlotRenderOptions.svelte | 416 +++++----- .../src/config/user/UserOptions.svelte | 196 +++-- web/frontend/src/generic/Filters.svelte | 31 +- web/frontend/src/generic/JobCompare.svelte | 15 +- web/frontend/src/generic/JobList.svelte | 24 +- web/frontend/src/generic/PlotGrid.svelte | 9 +- .../src/generic/filters/Cluster.svelte | 28 +- .../src/generic/filters/Duration.svelte | 25 +- .../src/generic/filters/Energy.svelte | 21 +- .../src/generic/filters/InfoBox.svelte | 22 +- .../src/generic/filters/JobStates.svelte | 19 +- .../src/generic/filters/Resources.svelte | 23 +- .../src/generic/filters/StartTime.svelte | 20 +- web/frontend/src/generic/filters/Stats.svelte | 14 +- web/frontend/src/generic/filters/Tags.svelte | 15 +- .../src/generic/helper/ConcurrentJobs.svelte | 28 +- .../src/generic/helper/JobFootprint.svelte | 14 +- .../src/generic/helper/Refresher.svelte | 12 +- web/frontend/src/generic/helper/Tag.svelte | 100 +-- .../src/generic/helper/TagManagement.svelte | 19 +- .../src/generic/helper/TextFilter.svelte | 16 +- .../src/generic/joblist/JobInfo.svelte | 29 +- .../src/generic/joblist/JobListRow.svelte | 27 +- .../src/generic/joblist/Pagination.svelte | 405 +++++----- .../src/generic/plots/Comparogram.svelte | 26 +- .../src/generic/plots/Histogram.svelte | 27 +- .../src/generic/plots/MetricPlot.svelte | 39 +- web/frontend/src/generic/plots/Pie.svelte | 21 +- web/frontend/src/generic/plots/Polar.svelte | 13 +- .../src/generic/plots/Roofline.svelte | 38 +- web/frontend/src/generic/plots/Scatter.svelte | 17 +- .../generic/select/DoubleRangeSlider.svelte | 436 +++++----- .../generic/select/HistogramSelection.svelte | 13 +- .../src/generic/select/MetricSelection.svelte | 25 +- .../src/generic/select/SortSelection.svelte | 12 +- .../src/generic/select/TimeSelection.svelte | 18 +- web/frontend/src/header.entrypoint.js | 2 +- web/frontend/src/header/NavbarLinks.svelte | 14 +- web/frontend/src/header/NavbarTools.svelte | 14 +- web/frontend/src/job/EnergySummary.svelte | 12 +- web/frontend/src/job/JobRoofline.svelte | 10 +- web/frontend/src/job/JobSummary.svelte | 14 +- web/frontend/src/job/Metric.svelte | 19 +- web/frontend/src/job/StatsTab.svelte | 12 +- .../job/jobsummary/JobFootprintBars.svelte | 398 +++++----- .../job/jobsummary/JobFootprintPolar.svelte | 96 +-- .../src/job/statstab/StatsTable.svelte | 13 +- .../src/job/statstab/StatsTableEntry.svelte | 10 +- web/frontend/src/systems/NodeList.svelte | 20 +- web/frontend/src/systems/NodeOverview.svelte | 15 +- .../src/systems/nodelist/NodeInfo.svelte | 14 +- .../src/systems/nodelist/NodeListRow.svelte | 12 +- 76 files changed, 2070 insertions(+), 1988 deletions(-) diff --git a/web/frontend/src/Analysis.root.svelte b/web/frontend/src/Analysis.root.svelte index e47a81e..689b7a2 100644 --- a/web/frontend/src/Analysis.root.svelte +++ b/web/frontend/src/Analysis.root.svelte @@ -1,9 +1,9 @@ + Properties: + - `filterPresets Object`: Optional predefined filter values +--> diff --git a/web/frontend/src/Job.root.svelte b/web/frontend/src/Job.root.svelte index 1de0171..d481436 100644 --- a/web/frontend/src/Job.root.svelte +++ b/web/frontend/src/Job.root.svelte @@ -1,12 +1,12 @@ + Properties: + - `dbid Number`: The jobs DB ID + - `username String`: Empty string if auth. is disabled, otherwise the username as string + - `authlevel Number`: The current users authentication level + - `roles [Number]`: Enum containing available roles +--> diff --git a/web/frontend/src/Node.root.svelte b/web/frontend/src/Node.root.svelte index 894ccd9..8082c5a 100644 --- a/web/frontend/src/Node.root.svelte +++ b/web/frontend/src/Node.root.svelte @@ -1,12 +1,12 @@ + Properties: + - `cluster String`: Currently selected cluster + - `hostname String`: Currently selected host (== node) + - `presetFrom Date?`: Custom Time Range selection 'from' [Default: null] + - `presetTo Date?`: Custom Time Range selection 'to' [Default: null] +-->
diff --git a/web/frontend/src/User.root.svelte b/web/frontend/src/User.root.svelte index 9a3548a..c1f0fb8 100644 --- a/web/frontend/src/User.root.svelte +++ b/web/frontend/src/User.root.svelte @@ -1,10 +1,10 @@ + Properties: + - `user Object`: The GraphQL user object + - `filterPresets Object`: Optional predefined filter values +--> diff --git a/web/frontend/src/config/UserSettings.svelte b/web/frontend/src/config/UserSettings.svelte index 2df1152..dade973 100644 --- a/web/frontend/src/config/UserSettings.svelte +++ b/web/frontend/src/config/UserSettings.svelte @@ -1,10 +1,10 @@ + Properties: + - `username String!`: Empty string if auth. is disabled, otherwise the username as string + - `isApi Bool!`: Is currently logged in user api authority +--> - - -
+ + + + + - - -
Color Scheme for Timeseries Plots {cbmode ? `(Color Blind Friendly Palettes)` : ``}
- {#if displayMessage && message.target == "cs"}
- Update: {message.msg} -
{/if} - - - - - {#key activeRow} - {#each Object.entries(cbmode ? cvdschemes : colorschemes) as [name, rgbrow]} - - - - - - {/each} - {/key} - -
{name} - { - activeRow = JSON.stringify(rgbrow) - updateSetting(e, { - selector: "#colorscheme-form", - target: "cs", - }); - }} - /> - - {#each rgbrow as rgb} - - {/each} -
- -
+
Color Scheme for Timeseries Plots {cbmode ? `(Color Blind Friendly Palettes)` : ``}
+ {#if displayMessage && message.target == "cs"} +
+ + Update: {message.msg} + +
+ {/if} + + + + + {#key activeRow} + {#each Object.entries(cbmode ? cvdschemes : colorschemes) as [name, rgbrow]} + + + + + + {/each} + {/key} + +
{name} + { + activeRow = JSON.stringify(rgbrow) + updateSetting(e, { + selector: "#colorscheme-form", + target: "cs", + }); + }} + /> + + {#each rgbrow as rgb} + + {/each} +
+ + + \ No newline at end of file diff --git a/web/frontend/src/config/user/PlotRenderOptions.svelte b/web/frontend/src/config/user/PlotRenderOptions.svelte index 26e6563..2f6af91 100644 --- a/web/frontend/src/config/user/PlotRenderOptions.svelte +++ b/web/frontend/src/config/user/PlotRenderOptions.svelte @@ -1,224 +1,222 @@ - Events: - - `update-config, {selector: String, target: String}`: Trigger upstream update of the config option - --> - - - - -
updateSetting(e, { - selector: "#line-width-form", - target: "lw", - })} + + + + updateSetting(e, { + selector: "#line-width-form", + target: "lw", + })} + > + + - - -
Line Width
- - {#if displayMessage && message.target == "lw"} -
- - Update: {message.msg} - -
+
Line Width
+ + {#if displayMessage && message.target == "lw"} +
+ + Update: {message.msg} + +
+ {/if} + + +
+ + +
+ Width of the lines in the timeseries plots. +
+
+ + +
+ + + + + +
updateSetting(e, { + selector: "#plots-per-row-form", + target: "ppr", + })} + > + + +
Plots per Row
+ {#if displayMessage && message.target == "ppr"} +
+ + Update: {message.msg} + +
+ {/if} + + +
+ + +
+ How many plots to show next to each other on pages such as + /monitoring/job/, /monitoring/system/... +
+
+ +
+ + + + + + +
updateSetting(e, { + selector: "#backgrounds-form", + target: "bg", + })} + > + + +
Colored Backgrounds
+ {#if displayMessage && message.target == "bg"} +
+ + Update: {message.msg} + +
+ {/if} + + +
+
+ {#if config.plot_general_colorBackground} + + {:else} + {/if} - - -
- - -
- Width of the lines in the timeseries plots. -
+
- - - - - - -
updateSetting(e, { - selector: "#plots-per-row-form", - target: "ppr", - })} +
+ {#if config.plot_general_colorBackground} + + {:else} + + {/if} + +
+
+ + + + +
updateSetting(e, { + selector: "#colorblindmode-form", + target: "cbm", + })} + > + + - - -
Plots per Row
- {#if displayMessage && message.target == "ppr"}
- Update: {message.msg} -
{/if} - - -
- - -
- How many plots to show next to each other on pages such as - /monitoring/job/, /monitoring/system/... +
Color Blind Mode
+ {#if displayMessage && message.target == "cbm"} +
+ + Update: {message.msg} +
+ {/if} + + +
+
+ {#if config?.plot_general_colorblindMode} + + {:else} + + {/if} +
- - - - - - -
updateSetting(e, { - selector: "#backgrounds-form", - target: "bg", - })} - > - - -
Colored Backgrounds
- {#if displayMessage && message.target == "bg"}
- Update: {message.msg} -
{/if} - - -
-
- {#if config.plot_general_colorBackground} - - {:else} - - {/if} - -
-
- {#if config.plot_general_colorBackground} - - {:else} - - {/if} - -
+
+ {#if config?.plot_general_colorblindMode} + + {:else} + + {/if} +
- - - - -
updateSetting(e, { - selector: "#colorblindmode-form", - target: "cbm", - })} - > - - -
Color Blind Mode
- {#if displayMessage && message.target == "cbm"}
- Update: {message.msg} -
{/if} - - -
-
- {#if config?.plot_general_colorblindMode} - - {:else} - - {/if} - -
-
- {#if config?.plot_general_colorblindMode} - - {:else} - - {/if} - -
-
- -
- - +
+ + + + \ No newline at end of file diff --git a/web/frontend/src/config/user/UserOptions.svelte b/web/frontend/src/config/user/UserOptions.svelte index 7f9e5e4..49f3c17 100644 --- a/web/frontend/src/config/user/UserOptions.svelte +++ b/web/frontend/src/config/user/UserOptions.svelte @@ -1,82 +1,80 @@ - Events: - - `update-config, {selector: String, target: String}`: Trigger upstream update of the config option - --> - @@ -133,41 +131,41 @@ {#if isApi} - - - Generate JWT - {#if jwt} - -

- Your token is displayed on the right. Press this button to copy it to the clipboard. -

- {#if displayCheck} -

- Copied! -

- {/if} - {:else} - -

- Generate a JSON Web Token for use with the ClusterCockpit REST-API endpoints. -

- {/if} - - + + + Generate JWT + {#if jwt} + +

+ Your token is displayed on the right. Press this button to copy it to the clipboard. +

+ {#if displayCheck} +

+ Copied! +

+ {/if} + {:else} + +

+ Generate a JSON Web Token for use with the ClusterCockpit REST-API endpoints. +

+ {/if} + + - - - Display JWT - - - + + + Display JWT + + + {/if} \ No newline at end of file diff --git a/web/frontend/src/generic/Filters.svelte b/web/frontend/src/generic/Filters.svelte index c7b49fd..44fc408 100644 --- a/web/frontend/src/generic/Filters.svelte +++ b/web/frontend/src/generic/Filters.svelte @@ -1,19 +1,20 @@ + Properties: + - `menuText String?`: Optional text to show in the dropdown menu [Default: null] + - `filterPresets Object?`: Optional predefined filter values [Default: {}] + - `disableClusterSelection Bool?`: Is the selection disabled [Default: false] + - `startTimeQuickSelect Bool?`: Render startTime quick selections [Default: false] + - `matchedJobs Number?`: Number of jobs matching the filter [Default: -2] + - `showFilter Func`: If the filter component should be rendered in addition to total count info [Default: true] + - `applyFilters Func`: The callback function to apply current filter selection + + Functions: + - `void updateFilters (additionalFilters: Object, force: Bool)`: + Handles new filters from nested components, triggers upstream update event. + 'additionalFilters' usually added to existing selection, but can be forced to overwrite instead. +--> (isOpen = !isOpen)}> diff --git a/web/frontend/src/generic/filters/Duration.svelte b/web/frontend/src/generic/filters/Duration.svelte index 75f2e80..3056d9f 100644 --- a/web/frontend/src/generic/filters/Duration.svelte +++ b/web/frontend/src/generic/filters/Duration.svelte @@ -1,16 +1,12 @@ + Properties: + - `isOpen Bool?`: Is this filter component opened [Bindable, Default: false] + - `presetDuration Object?`: Object containing the latest duration filter parameters + - Default: { lessThan: null, moreThan: null, from: null, to: null } + - `setFilter Func`: The callback function to apply current filter selection +--> (isOpen = !isOpen)}> diff --git a/web/frontend/src/generic/filters/InfoBox.svelte b/web/frontend/src/generic/filters/InfoBox.svelte index ea9eb3f..0c24998 100644 --- a/web/frontend/src/generic/filters/InfoBox.svelte +++ b/web/frontend/src/generic/filters/InfoBox.svelte @@ -1,17 +1,23 @@ + Properties: + - `icon String`: Sveltestrap icon name + - `modified Bool?`: Optional if filter is modified + - `onclick Func`: Opens Modal on click + - `children Func`: Internal prop, Svelte 5 version of +--> - - {/if} - {#if !nextButtonDisabled} - - {/if} +
+ +
+ +
+ + { ((page - 1) * itemsPerPage) + 1 } - { Math.min((page - 1) * itemsPerPage + itemsPerPage, totalItems) } of { totalItems } { itemText } + +
+
+ {#if !backButtonDisabled} + + + {/if} + {#if !nextButtonDisabled} + + {/if} +
diff --git a/web/frontend/src/generic/plots/Comparogram.svelte b/web/frontend/src/generic/plots/Comparogram.svelte index 9d6c3bd..b6f5fd1 100644 --- a/web/frontend/src/generic/plots/Comparogram.svelte +++ b/web/frontend/src/generic/plots/Comparogram.svelte @@ -1,16 +1,22 @@ + Properties: + - `metric String?`: The metric name [Default: ""] + - `width Number?`: The plot width [Default: 0] + - `height Number?`: The plot height [Default: 300] + - `data [Array]`: The data object [Default: null] + - `title String?`: Plot title [Default: ""] + - `xlabel String?`: Plot X axis label [Default: ""] + - `ylabel String?`: Plot Y axis label [Default: ""] + - `yunit String?`: Plot Y axis unit [Default: ""] + - `xticks Array`: Array containing jobIDs [Default: []] + - `xinfo Array`: Array containing job information [Default: []] + - `forResources Bool?`: Render this plot for allocated jobResources [Default: false] + - `plot Sync Object!`: uPlot cursor synchronization key +-->
-
- inputChanged(e, 'from')} /> +
+ inputChanged(e, 'from')} /> - Full Range: {sliderMin} - {sliderMax} + Full Range: {sliderMin} - {sliderMax} - inputChanged(e, 'to')} /> -
+ inputChanged(e, 'to')} /> +
-
-
-
rangeChanged(e, 'from')} - style="left: {100 * sliderFrom}%" - >
-
rangeChanged(e, 'to')} - style="left: {100 * sliderTo}%" - >
-
+
+
+
rangeChanged(e, 'from')} + style="left: {100 * sliderFrom}%" + >
+
rangeChanged(e, 'to')} + style="left: {100 * sliderTo}%" + >
+
diff --git a/web/frontend/src/generic/select/HistogramSelection.svelte b/web/frontend/src/generic/select/HistogramSelection.svelte index 2ece0ee..0468efd 100644 --- a/web/frontend/src/generic/select/HistogramSelection.svelte +++ b/web/frontend/src/generic/select/HistogramSelection.svelte @@ -1,11 +1,12 @@ + Properties: + - `cluster String`: Currently selected cluster + - `selectedHistograms [String]`: The currently selected metrics to display as histogram + - `ìsOpen Bool`: Is selection opened [Bindable] + - `applyChange Func`: The callback function to apply current selection +--> diff --git a/web/frontend/src/job/Metric.svelte b/web/frontend/src/job/Metric.svelte index 0c76095..431b7b2 100644 --- a/web/frontend/src/job/Metric.svelte +++ b/web/frontend/src/job/Metric.svelte @@ -1,15 +1,14 @@ + Properties: + - `job Object`: The GQL job object + - `metricName String`: The metrics name + - `metricUnit Object`: The metrics GQL unit object + - `nativeScope String`: The metrics native scope + - `presetScopes [String]`: The preset scopes returned for this metric + - `isShared Bool?`: If this job used shared resources; will adapt threshold indicators accordingly in downstream plots [Default: false] +--> - {#if jobFootprintData.length === 0} -
No footprint data for job available.
- {:else} - {#each jobFootprintData as fpd, index} - {#if fpd.impact !== 4} -
-
 {fpd.name} ({fpd.stat})
-
-
- {#if fpd.impact === 3} - - {:else if fpd.impact === 2} - - {:else if fpd.impact === 0} - - {:else if fpd.impact === -1} - - {/if} - {#if fpd.impact === 3} - - {:else if fpd.impact === 2} - - {:else if fpd.impact === 1} - - {:else if fpd.impact === 0} - - {:else if fpd.impact === -1} - - {/if} -
-
- {fpd.value} / {fpd.peak} - {fpd.unit}   -
-
- {fpd.message} -
- - {#if fpd.dir} - - - - {/if} - - - - {#if !fpd.dir} - - - - {/if} - - {:else} -
-
-  {fpd.name} ({fpd.stat}) -
-
-
- -
-
- {fpd.value}  -
-
-
- {fpd.message} - {/if} - {/each} - {/if} + {#if jobFootprintData.length === 0} +
No footprint data for job available.
+ {:else} + {#each jobFootprintData as fpd, index} + {#if fpd.impact !== 4} +
+
 {fpd.name} ({fpd.stat})
+
+
+ {#if fpd.impact === 3} + + {:else if fpd.impact === 2} + + {:else if fpd.impact === 0} + + {:else if fpd.impact === -1} + + {/if} + {#if fpd.impact === 3} + + {:else if fpd.impact === 2} + + {:else if fpd.impact === 1} + + {:else if fpd.impact === 0} + + {:else if fpd.impact === -1} + + {/if} +
+
+ {fpd.value} / {fpd.peak} + {fpd.unit}   +
+
+ {fpd.message} +
+ + {#if fpd.dir} + + + + {/if} + + + + {#if !fpd.dir} + + + + {/if} + + {:else} +
+
+  {fpd.name} ({fpd.stat}) +
+
+
+ +
+
+ {fpd.value}  +
+
+
+ {fpd.message} + {/if} + {/each} + {/if}