From 37415fa26199bfc0ead933a6e5b76ace26ab3034 Mon Sep 17 00:00:00 2001 From: Christoph Kluge Date: Mon, 7 Oct 2024 17:36:40 +0200 Subject: [PATCH] improve job list toolbar layouting, smaller layout fixes --- web/frontend/src/Analysis.root.svelte | 2 +- web/frontend/src/Jobs.root.svelte | 62 ++-- web/frontend/src/List.root.svelte | 15 +- web/frontend/src/User.root.svelte | 105 +++--- web/frontend/src/generic/Filters.svelte | 322 +++++++++--------- web/frontend/src/generic/JobList.svelte | 2 +- .../src/generic/filters/InfoBox.svelte | 2 +- .../src/generic/helper/Refresher.svelte | 11 +- .../src/generic/helper/TextFilter.svelte | 16 +- 9 files changed, 291 insertions(+), 246 deletions(-) diff --git a/web/frontend/src/Analysis.root.svelte b/web/frontend/src/Analysis.root.svelte index 0aa7ca5..f0cba9e 100644 --- a/web/frontend/src/Analysis.root.svelte +++ b/web/frontend/src/Analysis.root.svelte @@ -307,7 +307,7 @@ {/if} - + {#if $initq.error} {$initq.error.message} {:else if cluster} diff --git a/web/frontend/src/Jobs.root.svelte b/web/frontend/src/Jobs.root.svelte index e789821..df928d0 100644 --- a/web/frontend/src/Jobs.root.svelte +++ b/web/frontend/src/Jobs.root.svelte @@ -13,6 +13,7 @@ Row, Col, Button, + ButtonGroup, Icon, Card, Spinner, @@ -55,36 +56,41 @@ onMount(() => filterComponent.updateFilters()); - - {#if $initq.fetching} - + +{#if $initq.fetching} + + - {:else if $initq.error} - + +{:else if $initq.error} + + {$initq.error.message} - {/if} - - - - - - + +{/if} + + + + + + + + - + { selectedCluster = detail.filters[0]?.cluster @@ -94,8 +100,7 @@ }} /> - - + filterComponent.updateFilters(detail)} /> - + { jobList.refreshJobs() jobList.refreshAllMetrics() }} /> -
+ + diff --git a/web/frontend/src/List.root.svelte b/web/frontend/src/List.root.svelte index 13f01f0..9425db5 100644 --- a/web/frontend/src/List.root.svelte +++ b/web/frontend/src/List.root.svelte @@ -104,8 +104,8 @@ onMount(() => filterComponent.updateFilters()); - - + + - - - - + + + + + + + - + { @@ -149,20 +151,21 @@ }} /> - + filterComponent.updateFilters(detail)} /> - + { jobList.refreshJobs() jobList.refreshAllMetrics() }} /> -
- + + + {#if $stats.error} {$stats.error.message} @@ -210,12 +213,12 @@ - +
{#key $stats.data.jobsStatistics[0].histDuration} - +
{#key $stats.data.jobsStatistics[0].histNumNodes} -{#if metricsInHistograms} + + + + + + +{#if metricsInHistograms?.length > 0} {#if $stats.error} @@ -259,6 +274,7 @@ {:else} +
{#key $stats.data.jobsStatistics[0].histMetrics} {/key} {/if} +{:else} + + + No footprint histograms selected. + + {/if} -
- + + + - + diff --git a/web/frontend/src/generic/Filters.svelte b/web/frontend/src/generic/Filters.svelte index 97c98ff..5b829ba 100644 --- a/web/frontend/src/generic/Filters.svelte +++ b/web/frontend/src/generic/Filters.svelte @@ -6,6 +6,7 @@ - `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] Events: - `update-filters, {filters: [Object]?}`: The detail's 'filters' prop are new filter items to be applied @@ -17,11 +18,11 @@ - - - - - - Filters - - - Manage Filters - {#if menuText} - {menuText} - - {/if} - (isClusterOpen = true)}> - Cluster/Partition - - (isJobStatesOpen = true)}> - Job States - - (isStartTimeOpen = true)}> - Start Time - - (isDurationOpen = true)}> - Duration - - (isTagsOpen = true)}> - Tags - - (isResourcesOpen = true)}> - Resources - - (isEnergyOpen = true)}> - Energy - - (isStatsOpen = true)}> - (isStatsOpen = true)} /> Statistics - - {#if startTimeQuickSelect} - - Start Time Qick Selection - {#each [{ text: "Last 6hrs", url: "last6h", seconds: 6 * 60 * 60 }, { text: "Last 24hrs", url: "last24h", seconds: 24 * 60 * 60 }, { text: "Last 7 days", url: "last7d", seconds: 7 * 24 * 60 * 60 }, { text: "Last 30 days", url: "last30d", seconds: 30 * 24 * 60 * 60 }] as { text, url, seconds }} - { - filters.startTime.from = new Date( - Date.now() - seconds * 1000, - ).toISOString(); - filters.startTime.to = new Date(Date.now()).toISOString(); - (filters.startTime.text = text), (filters.startTime.url = url); - updateFilters(); - }} - > - - {text} - - {/each} - {/if} - - - - - {#if filters.cluster} - (isClusterOpen = true)}> - {filters.cluster} - {#if filters.partition} - ({filters.partition}) - {/if} - - {/if} - - {#if filters.states.length != allJobStates.length} - (isJobStatesOpen = true)}> - {filters.states.join(", ")} - - {/if} - - {#if filters.startTime.from || filters.startTime.to} - (isStartTimeOpen = true)}> - {#if filters.startTime.text} - {filters.startTime.text} - {:else} - {new Date(filters.startTime.from).toLocaleString()} - {new Date( - filters.startTime.to, - ).toLocaleString()} - {/if} - - {/if} - - {#if filters.duration.from || filters.duration.to} - (isDurationOpen = true)}> - {Math.floor(filters.duration.from / 3600)}h:{Math.floor( - (filters.duration.from % 3600) / 60, - )}m - - {Math.floor(filters.duration.to / 3600)}h:{Math.floor( - (filters.duration.to % 3600) / 60, - )}m - - {/if} - - {#if filters.duration.lessThan} - (isDurationOpen = true)}> - Duration less than {Math.floor( - filters.duration.lessThan / 3600, - )}h:{Math.floor((filters.duration.lessThan % 3600) / 60)}m - - {/if} - - {#if filters.duration.moreThan} - (isDurationOpen = true)}> - Duration more than {Math.floor( - filters.duration.moreThan / 3600, - )}h:{Math.floor((filters.duration.moreThan % 3600) / 60)}m - - {/if} - - {#if filters.tags.length != 0} - (isTagsOpen = true)}> - {#each filters.tags as tagId} - {#key tagId} - - {/key} + + + + + + Filters + + + Manage Filters + {#if menuText} + {menuText} + + {/if} + (isClusterOpen = true)}> + Cluster/Partition + + (isJobStatesOpen = true)}> + Job States + + (isStartTimeOpen = true)}> + Start Time + + (isDurationOpen = true)}> + Duration + + (isTagsOpen = true)}> + Tags + + (isResourcesOpen = true)}> + Resources + + (isEnergyOpen = true)}> + Energy + + (isStatsOpen = true)}> + (isStatsOpen = true)} /> Statistics + + {#if startTimeQuickSelect} + + Start Time Quick Selection + {#each [{ text: "Last 6hrs", url: "last6h", seconds: 6 * 60 * 60 }, { text: "Last 24hrs", url: "last24h", seconds: 24 * 60 * 60 }, { text: "Last 7 days", url: "last7d", seconds: 7 * 24 * 60 * 60 }, { text: "Last 30 days", url: "last30d", seconds: 30 * 24 * 60 * 60 }] as { text, url, seconds }} + { + filters.startTime.from = new Date( + Date.now() - seconds * 1000, + ).toISOString(); + filters.startTime.to = new Date(Date.now()).toISOString(); + (filters.startTime.text = text), (filters.startTime.url = url); + updateFilters(); + }} + > + + {text} + {/each} - - {/if} + {/if} + + + {#if matchedJobs >= -1} + + {/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} - (isResourcesOpen = true)}> - {#if isNodesModified} - Nodes: {filters.numNodes.from} - {filters.numNodes.to} - {/if} - {#if isNodesModified && isHwthreadsModified}, - {/if} - {#if isHwthreadsModified} - HWThreads: {filters.numHWThreads.from} - {filters.numHWThreads.to} - {/if} - {#if (isNodesModified || isHwthreadsModified) && isAccsModified}, - {/if} - {#if isAccsModified} - Accelerators: {filters.numAccelerators.from} - {filters - .numAccelerators.to} - {/if} - + +{#if filters.cluster} + (isClusterOpen = true)}> + {filters.cluster} + {#if filters.partition} + ({filters.partition}) {/if} + +{/if} - {#if filters.node != null} - (isResourcesOpen = true)}> - Node: {filters.node} - - {/if} +{#if filters.states.length != allJobStates.length} + (isJobStatesOpen = true)}> + {filters.states.join(", ")} + +{/if} - {#if filters.energy.from || filters.energy.to} - (isEnergyOpen = true)}> - Total Energy: {filters.energy.from} - {filters.energy.to} - +{#if filters.startTime.from || filters.startTime.to} + (isStartTimeOpen = true)}> + {#if filters.startTime.text} + {filters.startTime.text} + {:else} + {new Date(filters.startTime.from).toLocaleString()} - {new Date( + filters.startTime.to, + ).toLocaleString()} {/if} + +{/if} - {#if filters.stats.length > 0} - (isStatsOpen = true)}> - {filters.stats - .map((stat) => `${stat.text}: ${stat.from} - ${stat.to}`) - .join(", ")} - +{#if filters.duration.from || filters.duration.to} + (isDurationOpen = true)}> + {Math.floor(filters.duration.from / 3600)}h:{Math.floor( + (filters.duration.from % 3600) / 60, + )}m - + {Math.floor(filters.duration.to / 3600)}h:{Math.floor( + (filters.duration.to % 3600) / 60, + )}m + +{/if} + +{#if filters.duration.lessThan} + (isDurationOpen = true)}> + Duration less than {Math.floor( + filters.duration.lessThan / 3600, + )}h:{Math.floor((filters.duration.lessThan % 3600) / 60)}m + +{/if} + +{#if filters.duration.moreThan} + (isDurationOpen = true)}> + Duration more than {Math.floor( + filters.duration.moreThan / 3600, + )}h:{Math.floor((filters.duration.moreThan % 3600) / 60)}m + +{/if} + +{#if filters.tags.length != 0} + (isTagsOpen = true)}> + {#each filters.tags as tagId} + {#key tagId} + + {/key} + {/each} + +{/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} + (isResourcesOpen = true)}> + {#if isNodesModified} + Nodes: {filters.numNodes.from} - {filters.numNodes.to} {/if} - - + {#if isNodesModified && isHwthreadsModified}, + {/if} + {#if isHwthreadsModified} + HWThreads: {filters.numHWThreads.from} - {filters.numHWThreads.to} + {/if} + {#if (isNodesModified || isHwthreadsModified) && isAccsModified}, + {/if} + {#if isAccsModified} + Accelerators: {filters.numAccelerators.from} - {filters + .numAccelerators.to} + {/if} + +{/if} + +{#if filters.node != null} + (isResourcesOpen = true)}> + Node: {filters.node} + +{/if} + +{#if filters.energy.from || filters.energy.to} + (isEnergyOpen = true)}> + Total Energy: {filters.energy.from} - {filters.energy.to} + +{/if} + +{#if filters.stats.length > 0} + (isStatsOpen = true)}> + {filters.stats + .map((stat) => `${stat.text}: ${stat.from} - ${stat.to}`) + .join(", ")} + +{/if} - diff --git a/web/frontend/src/generic/helper/Refresher.svelte b/web/frontend/src/generic/helper/Refresher.svelte index 986bcc2..f5c6406 100644 --- a/web/frontend/src/generic/helper/Refresher.svelte +++ b/web/frontend/src/generic/helper/Refresher.svelte @@ -34,14 +34,15 @@ - - - - - + + + + +