mirror of
https://github.com/ClusterCockpit/cc-backend
synced 2025-06-08 08:33:49 +02:00
Migrate user list and analysis view
This commit is contained in:
Christoph Kluge
parent
0b529a5c3c
commit
703556d893
@ -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,12 @@
|
||||
};
|
||||
}
|
||||
|
||||
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 Init */
|
||||
const { query: initq } = init();
|
||||
const client = getContextClient();
|
||||
const initialized = getContext("initialized");
|
||||
const globalMetrics = getContext("globalMetrics");
|
||||
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 +69,22 @@
|
||||
{ key: "project", label: "Project ID" },
|
||||
];
|
||||
|
||||
let sortSelection =
|
||||
/* Var Init */
|
||||
let availableMetrics = [];
|
||||
let metricUnits = {};
|
||||
let metricScopes = {};
|
||||
let rooflineMaxY;
|
||||
let cluster;
|
||||
let colWidth1, colWidth2;
|
||||
let numBins = 50;
|
||||
let maxY = -1;
|
||||
|
||||
/* 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 metricsInHistograms = $state(ccconfig.analysis_view_histogramMetrics)
|
||||
let metricsInScatterplots = $state(ccconfig.analysis_view_scatterPlotMetrics)
|
||||
let sortSelection = $state(
|
||||
sortOptions.find(
|
||||
(option) =>
|
||||
option.key ==
|
||||
@ -94,17 +92,20 @@
|
||||
) ||
|
||||
sortOptions.find(
|
||||
(option) => option.key == ccconfig.analysis_view_selectedTopCategory,
|
||||
);
|
||||
let groupSelection =
|
||||
groupOptions.find(
|
||||
(option) =>
|
||||
option.key ==
|
||||
ccconfig[`analysis_view_selectedTopEntity:${filterPresets.cluster}`],
|
||||
) ||
|
||||
groupOptions.find(
|
||||
(option) => option.key == ccconfig.analysis_view_selectedTopEntity,
|
||||
);
|
||||
)
|
||||
);
|
||||
let groupSelection = $state(
|
||||
groupOptions.find(
|
||||
(option) =>
|
||||
option.key ==
|
||||
ccconfig[`analysis_view_selectedTopEntity:${filterPresets.cluster}`],
|
||||
) ||
|
||||
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,120 +122,144 @@
|
||||
}
|
||||
});
|
||||
|
||||
const client = getContextClient();
|
||||
/* Derived Vars */
|
||||
let clusterName = $derived(cluster?.name ? cluster.name : cluster);
|
||||
let metrics = $derived(
|
||||
[...new Set([...metricsInHistograms, ...metricsInScatterplots.flat()])]
|
||||
);
|
||||
|
||||
$: statsQuery = queryStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
query ($jobFilters: [JobFilter!]!) {
|
||||
stats: jobsStatistics(filter: $jobFilters) {
|
||||
totalJobs
|
||||
shortJobs
|
||||
totalWalltime
|
||||
totalNodeHours
|
||||
totalCoreHours
|
||||
totalAccHours
|
||||
histDuration {
|
||||
count
|
||||
value
|
||||
}
|
||||
histNumCores {
|
||||
count
|
||||
value
|
||||
let statsQuery = $derived(
|
||||
queryStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
query ($jobFilters: [JobFilter!]!) {
|
||||
stats: jobsStatistics(filter: $jobFilters) {
|
||||
totalJobs
|
||||
shortJobs
|
||||
totalWalltime
|
||||
totalNodeHours
|
||||
totalCoreHours
|
||||
totalAccHours
|
||||
histDuration {
|
||||
count
|
||||
value
|
||||
}
|
||||
histNumCores {
|
||||
count
|
||||
value
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
variables: { jobFilters },
|
||||
});
|
||||
`,
|
||||
variables: { jobFilters },
|
||||
})
|
||||
);
|
||||
|
||||
$: topQuery = queryStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
query (
|
||||
$jobFilters: [JobFilter!]!
|
||||
$paging: PageRequest!
|
||||
$sortBy: SortByAggregate!
|
||||
$groupBy: Aggregate!
|
||||
) {
|
||||
topList: jobsStatistics(
|
||||
filter: $jobFilters
|
||||
page: $paging
|
||||
sortBy: $sortBy
|
||||
groupBy: $groupBy
|
||||
let topQuery = $derived(
|
||||
queryStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
query (
|
||||
$jobFilters: [JobFilter!]!
|
||||
$paging: PageRequest!
|
||||
$sortBy: SortByAggregate!
|
||||
$groupBy: Aggregate!
|
||||
) {
|
||||
id
|
||||
name
|
||||
totalWalltime
|
||||
totalNodeHours
|
||||
totalCoreHours
|
||||
totalAccHours
|
||||
topList: jobsStatistics(
|
||||
filter: $jobFilters
|
||||
page: $paging
|
||||
sortBy: $sortBy
|
||||
groupBy: $groupBy
|
||||
) {
|
||||
id
|
||||
name
|
||||
totalWalltime
|
||||
totalNodeHours
|
||||
totalCoreHours
|
||||
totalAccHours
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
variables: {
|
||||
jobFilters,
|
||||
paging: { itemsPerPage: 10, page: 1 },
|
||||
sortBy: sortSelection.key.toUpperCase(),
|
||||
groupBy: groupSelection.key.toUpperCase(),
|
||||
},
|
||||
});
|
||||
`,
|
||||
variables: {
|
||||
jobFilters,
|
||||
paging: { itemsPerPage: 10, page: 1 },
|
||||
sortBy: sortSelection.key.toUpperCase(),
|
||||
groupBy: groupSelection.key.toUpperCase(),
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
// Note: Different footprints than those saved in DB per Job -> Caused by Legacy Naming
|
||||
$: footprintsQuery = queryStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
query ($jobFilters: [JobFilter!]!, $metrics: [String!]!) {
|
||||
footprints: jobsFootprints(filter: $jobFilters, metrics: $metrics) {
|
||||
timeWeights {
|
||||
nodeHours
|
||||
accHours
|
||||
coreHours
|
||||
}
|
||||
metrics {
|
||||
metric
|
||||
data
|
||||
let footprintsQuery = $derived(
|
||||
queryStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
query ($jobFilters: [JobFilter!]!, $metrics: [String!]!) {
|
||||
footprints: jobsFootprints(filter: $jobFilters, metrics: $metrics) {
|
||||
timeWeights {
|
||||
nodeHours
|
||||
accHours
|
||||
coreHours
|
||||
}
|
||||
metrics {
|
||||
metric
|
||||
data
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
variables: { jobFilters, metrics },
|
||||
});
|
||||
|
||||
$: rooflineQuery = queryStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
query (
|
||||
$jobFilters: [JobFilter!]!
|
||||
$rows: Int!
|
||||
$cols: Int!
|
||||
$minX: Float!
|
||||
$minY: Float!
|
||||
$maxX: Float!
|
||||
$maxY: Float!
|
||||
) {
|
||||
rooflineHeatmap(
|
||||
filter: $jobFilters
|
||||
rows: $rows
|
||||
cols: $cols
|
||||
minX: $minX
|
||||
minY: $minY
|
||||
maxX: $maxX
|
||||
maxY: $maxY
|
||||
)
|
||||
}
|
||||
`,
|
||||
variables: {
|
||||
jobFilters,
|
||||
rows: 50,
|
||||
cols: 50,
|
||||
minX: 0.01,
|
||||
minY: 1,
|
||||
maxX: 1000,
|
||||
maxY,
|
||||
},
|
||||
`,
|
||||
variables: { jobFilters, metrics },
|
||||
})
|
||||
);
|
||||
|
||||
let rooflineQuery = $derived(
|
||||
queryStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
query (
|
||||
$jobFilters: [JobFilter!]!
|
||||
$rows: Int!
|
||||
$cols: Int!
|
||||
$minX: Float!
|
||||
$minY: Float!
|
||||
$maxX: Float!
|
||||
$maxY: Float!
|
||||
) {
|
||||
rooflineHeatmap(
|
||||
filter: $jobFilters
|
||||
rows: $rows
|
||||
cols: $cols
|
||||
minX: $minX
|
||||
minY: $minY
|
||||
maxX: $maxX
|
||||
maxY: $maxY
|
||||
)
|
||||
}
|
||||
`,
|
||||
variables: {
|
||||
jobFilters,
|
||||
rows: 50,
|
||||
cols: 50,
|
||||
minX: 0.01,
|
||||
minY: 1,
|
||||
maxX: 1000,
|
||||
maxY,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
/* Reactive Effects */
|
||||
$effect(() => {
|
||||
loadMetrics($initialized)
|
||||
});
|
||||
$effect(() => {
|
||||
updateEntityConfiguration(groupSelection.key);
|
||||
});
|
||||
$effect(() => {
|
||||
updateCategoryConfiguration(sortSelection.key);
|
||||
});
|
||||
|
||||
/* Functions */
|
||||
const updateConfigurationMutation = ({ name, value }) => {
|
||||
return mutationStore({
|
||||
client: client,
|
||||
@ -287,9 +312,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
let availableMetrics = [];
|
||||
let metricUnits = {};
|
||||
let metricScopes = {};
|
||||
function loadMetrics(isInitialized) {
|
||||
if (!isInitialized) return
|
||||
availableMetrics = [...globalMetrics.filter((gm) => gm?.availability.find((av) => av.cluster == cluster.name))]
|
||||
@ -299,10 +321,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
$: loadMetrics($initialized)
|
||||
$: updateEntityConfiguration(groupSelection.key);
|
||||
$: updateCategoryConfiguration(sortSelection.key);
|
||||
|
||||
/* On Mount */
|
||||
onMount(() => filterComponent.updateFilters());
|
||||
</script>
|
||||
|
||||
@ -329,7 +348,7 @@
|
||||
{filterPresets}
|
||||
disableClusterSelection={true}
|
||||
startTimeQuickSelect={true}
|
||||
on:update-filters={({ detail }) => {
|
||||
applyFilters={(detail) => {
|
||||
jobFilters = detail.filters;
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -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,35 +49,38 @@
|
||||
"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({
|
||||
client: client,
|
||||
query: gql`
|
||||
query($jobFilters: [JobFilter!]!) {
|
||||
rows: jobsStatistics(filter: $jobFilters, groupBy: ${type}) {
|
||||
id
|
||||
name
|
||||
totalJobs
|
||||
totalWalltime
|
||||
totalCoreHours
|
||||
totalAccHours
|
||||
}
|
||||
}`,
|
||||
variables: { jobFilters },
|
||||
});
|
||||
|
||||
function changeSorting(event, field) {
|
||||
let target = event.target;
|
||||
while (target.tagName != "BUTTON") target = target.parentElement;
|
||||
/* 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" });
|
||||
|
||||
let direction = target.children[0].className.includes("up") ? "down" : "up";
|
||||
target.children[0].className = `bi-sort-numeric-${direction}`;
|
||||
sorting = { field, direction };
|
||||
/* Derived Vars */
|
||||
let stats = $derived(
|
||||
queryStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
query($jobFilters: [JobFilter!]!) {
|
||||
rows: jobsStatistics(filter: $jobFilters, groupBy: ${type}) {
|
||||
id
|
||||
name
|
||||
totalJobs
|
||||
totalWalltime
|
||||
totalCoreHours
|
||||
totalAccHours
|
||||
}
|
||||
}`,
|
||||
variables: { jobFilters },
|
||||
})
|
||||
);
|
||||
|
||||
/* Functions */
|
||||
function changeSorting(field) {
|
||||
sorting = { field, direction: sorting?.direction == "down" ? "up" : "down" };
|
||||
}
|
||||
|
||||
function sort(stats, sorting, nameFilter) {
|
||||
@ -87,10 +88,10 @@
|
||||
? (a, b) => b.id.localeCompare(a.id)
|
||||
: (a, b) => a.id.localeCompare(b.id)
|
||||
|
||||
// "-50": Forces empty strings to the end of the list
|
||||
// Force empty or undefined strings to the end of the list
|
||||
const nameCmp = sorting.direction == "up"
|
||||
? (a, b) => (a.name == '') ? -50 : b.name.localeCompare(a.name)
|
||||
: (a, b) => (b.name == '') ? -50 : a.name.localeCompare(b.name)
|
||||
? (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]
|
||||
@ -105,6 +106,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* On Mount */
|
||||
onMount(() => filterComponent.updateFilters());
|
||||
</script>
|
||||
|
||||
@ -129,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;
|
||||
}}
|
||||
/>
|
||||
@ -147,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"}
|
||||
@ -158,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}
|
||||
@ -169,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">
|
||||
@ -179,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">
|
||||
@ -189,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">
|
||||
@ -199,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>
|
||||
|
||||
@ -42,71 +42,90 @@
|
||||
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({
|
||||
client: client,
|
||||
query: gql`
|
||||
query ($jobFilters: [JobFilter!]!, $selectedHistograms: [String!], $numDurationBins: String, $numMetricBins: Int) {
|
||||
jobsStatistics(filter: $jobFilters, metrics: $selectedHistograms, numDurationBins: $numDurationBins , numMetricBins: $numMetricBins ) {
|
||||
totalJobs
|
||||
shortJobs
|
||||
totalWalltime
|
||||
totalCoreHours
|
||||
histDuration {
|
||||
count
|
||||
value
|
||||
}
|
||||
histNumNodes {
|
||||
count
|
||||
value
|
||||
}
|
||||
histMetrics {
|
||||
metric
|
||||
unit
|
||||
stat
|
||||
data {
|
||||
min
|
||||
max
|
||||
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 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
|
||||
? ccconfig[`user_view_histogramMetrics:${selectedCluster}`] || ( ccconfig['user_view_histogramMetrics'] || [] )
|
||||
: ccconfig['user_view_histogramMetrics'] || []);
|
||||
|
||||
let stats = $derived(
|
||||
queryStore({
|
||||
client: client,
|
||||
query: gql`
|
||||
query ($jobFilters: [JobFilter!]!, $selectedHistograms: [String!], $numDurationBins: String, $numMetricBins: Int) {
|
||||
jobsStatistics(filter: $jobFilters, metrics: $selectedHistograms, numDurationBins: $numDurationBins , numMetricBins: $numMetricBins ) {
|
||||
totalJobs
|
||||
shortJobs
|
||||
totalWalltime
|
||||
totalCoreHours
|
||||
histDuration {
|
||||
count
|
||||
bin
|
||||
value
|
||||
}
|
||||
histNumNodes {
|
||||
count
|
||||
value
|
||||
}
|
||||
histMetrics {
|
||||
metric
|
||||
unit
|
||||
stat
|
||||
data {
|
||||
min
|
||||
max
|
||||
count
|
||||
bin
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
variables: { jobFilters, selectedHistograms, numDurationBins, numMetricBins },
|
||||
});
|
||||
`,
|
||||
variables: { jobFilters, selectedHistograms, numDurationBins, numMetricBins },
|
||||
})
|
||||
);
|
||||
|
||||
/* On Mount */
|
||||
onMount(() => filterComponent.updateFilters());
|
||||
</script>
|
||||
|
||||
@ -129,13 +148,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 +162,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 +192,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 +288,7 @@
|
||||
outline
|
||||
color="secondary"
|
||||
class="w-100"
|
||||
on:click={() => (isHistogramSelectionOpen = true)}
|
||||
onclick={() => (isHistogramSelectionOpen = true)}
|
||||
>
|
||||
<Icon name="bar-chart-line" /> Select Histograms
|
||||
</Button>
|
||||
|
||||
@ -103,15 +103,17 @@
|
||||
setFilter({ cluster: pendingCluster, partition: pendingPartition });
|
||||
}}>Close & Apply</Button
|
||||
>
|
||||
<Button
|
||||
color="danger"
|
||||
onclick={() => {
|
||||
isOpen = false;
|
||||
pendingCluster = null;
|
||||
pendingPartition = null;
|
||||
setFilter({ cluster: pendingCluster, partition: pendingPartition})
|
||||
}}>Reset</Button
|
||||
>
|
||||
{#if !disableClusterSelection}
|
||||
<Button
|
||||
color="danger"
|
||||
onclick={() => {
|
||||
isOpen = false;
|
||||
pendingCluster = null;
|
||||
pendingPartition = null;
|
||||
setFilter({ cluster: pendingCluster, partition: pendingPartition})
|
||||
}}>Reset</Button
|
||||
>
|
||||
{/if}
|
||||
<Button onclick={() => (isOpen = false)}>Close</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user