ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2024-12-26 05:19:05 +01:00
Code Issues Packages Releases Activity

Fix width, spacing, render

Browse Source
This commit is contained in:
Christoph Kluge 2023-11-20 18:08:33 +01:00
parent 8d409eed0f
commit f8f900151a
3 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/frontend/src/JobFootprintBars.svelte
View File

@ -18,8 +18,7 @@
export let job export let job
export let jobMetrics export let jobMetrics
export let view = 'job' export let view = 'job'
export let width = 200
// export let size = 200
const footprintMetrics = ['cpu_load', 'flops_any', 'mem_used', 'mem_bw'] // 'acc_utilization' / missing: energy , move to central config before deployment const footprintMetrics = ['cpu_load', 'flops_any', 'mem_used', 'mem_bw'] // 'acc_utilization' / missing: energy , move to central config before deployment
@ -154,7 +153,7 @@
</script> </script>
<Card class="h-auto mt-1"> <Card class="h-auto mt-1" style="min-width: {width}px;">
{#if view === 'job'} {#if view === 'job'}
<CardHeader> <CardHeader>
<CardTitle class="mb-0 d-flex justify-content-center"> <CardTitle class="mb-0 d-flex justify-content-center">

17
web/frontend/src/joblist/JobList.svelte
View File

@ -28,7 +28,7 @@
export let sorting = { field: "startTime", order: "DESC" }; export let sorting = { field: "startTime", order: "DESC" };
export let matchedJobs = 0; export let matchedJobs = 0;
export let metrics = ccconfig.plot_list_selectedMetrics; export let metrics = ccconfig.plot_list_selectedMetrics;
export let showFootprint; export let showFootprint = false;
let itemsPerPage = ccconfig.plot_list_jobsPerPage; let itemsPerPage = ccconfig.plot_list_jobsPerPage;
let page = 1; let page = 1;
@ -135,12 +135,19 @@
}) })
}; };
let plotWidth = null;
let tableWidth = null; let tableWidth = null;
let jobInfoColumnWidth = 250; let jobInfoColumnWidth = 250;
$: plotWidth = Math.floor( $: if (showFootprint) {
(tableWidth - jobInfoColumnWidth) / metrics.length - 10 plotWidth = Math.floor(
); (tableWidth - jobInfoColumnWidth) / (metrics.length + 1) - 10
)
} else {
plotWidth = Math.floor(
(tableWidth - jobInfoColumnWidth) / metrics.length - 10
)
}
let headerPaddingTop = 0; let headerPaddingTop = 0;
stickyHeader( stickyHeader(
@ -165,7 +172,7 @@
<th <th
class="position-sticky top-0" class="position-sticky top-0"
scope="col" scope="col"
style="width: {jobInfoColumnWidth}px; padding-top: {headerPaddingTop}px" style="width: {plotWidth}px; padding-top: {headerPaddingTop}px"
> >
Job Footprint Job Footprint
</th> </th>

14
web/frontend/src/joblist/Row.svelte
View File

@ -35,8 +35,8 @@
const metricConfig = getContext("metrics"); // Get all MetricConfs which include subCluster-specific settings for this job const metricConfig = getContext("metrics"); // Get all MetricConfs which include subCluster-specific settings for this job
const client = getContextClient(); const client = getContextClient();
const query = gql` const query = gql`
query ($id: ID!, $metrics: [String!]!, $scopes: [MetricScope!]!) { query ($id: ID!, $queryMetrics: [String!]!, $scopes: [MetricScope!]!) {
jobMetrics(id: $id, metrics: $metrics, scopes: $scopes) { jobMetrics(id: $id, metrics: $queryMetrics, scopes: $scopes) {
name name
scope scope
metric { metric {
@ -68,18 +68,21 @@
$: metricsQuery = queryStore({ $: metricsQuery = queryStore({
client: client, client: client,
query: query, query: query,
variables: { id, metrics, scopes } variables: { id, queryMetrics, scopes }
}); });
let queryMetrics = null
$: if (showFootprint) { $: if (showFootprint) {
metrics = ['cpu_load', 'flops_any', 'mem_used', 'mem_bw', ...metrics].filter(distinct) queryMetrics = ['cpu_load', 'flops_any', 'mem_used', 'mem_bw', ...metrics].filter(distinct)
} else {
queryMetrics = [...metrics]
} }
export function refresh() { export function refresh() {
metricsQuery = queryStore({ metricsQuery = queryStore({
client: client, client: client,
query: query, query: query,
variables: { id, metrics, scopes }, variables: { id, queryMetrics, scopes },
// requestPolicy: 'network-only' // use default cache-first for refresh // requestPolicy: 'network-only' // use default cache-first for refresh
}); });
} }
@ -144,6 +147,7 @@
<JobFootprintBars <JobFootprintBars
job={job} job={job}
jobMetrics={$metricsQuery.data.jobMetrics} jobMetrics={$metricsQuery.data.jobMetrics}
width={plotWidth}
view="list" view="list"
/> />
</td> </td>