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 jobMetrics
export let view = 'job'
// export let size = 200
export let width = 200
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>
<Card class="h-auto mt-1">
<Card class="h-auto mt-1" style="min-width: {width}px;">
{#if view === 'job'}
<CardHeader>
<CardTitle class="mb-0 d-flex justify-content-center">

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

@ -28,7 +28,7 @@
export let sorting = { field: "startTime", order: "DESC" };
export let matchedJobs = 0;
export let metrics = ccconfig.plot_list_selectedMetrics;
export let showFootprint;
export let showFootprint = false;
let itemsPerPage = ccconfig.plot_list_jobsPerPage;
let page = 1;
@ -135,12 +135,19 @@
})
};
let plotWidth = null;
let tableWidth = null;
let jobInfoColumnWidth = 250;
$: plotWidth = Math.floor(
$: if (showFootprint) {
plotWidth = Math.floor(
(tableWidth - jobInfoColumnWidth) / (metrics.length + 1) - 10
)
} else {
plotWidth = Math.floor(
(tableWidth - jobInfoColumnWidth) / metrics.length - 10
);
)
}
let headerPaddingTop = 0;
stickyHeader(
@ -165,7 +172,7 @@
<th
class="position-sticky top-0"
scope="col"
style="width: {jobInfoColumnWidth}px; padding-top: {headerPaddingTop}px"
style="width: {plotWidth}px; padding-top: {headerPaddingTop}px"
>
Job Footprint
</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 client = getContextClient();
const query = gql`
query ($id: ID!, $metrics: [String!]!, $scopes: [MetricScope!]!) {
jobMetrics(id: $id, metrics: $metrics, scopes: $scopes) {
query ($id: ID!, $queryMetrics: [String!]!, $scopes: [MetricScope!]!) {
jobMetrics(id: $id, metrics: $queryMetrics, scopes: $scopes) {
name
scope
metric {
@ -68,18 +68,21 @@
$: metricsQuery = queryStore({
client: client,
query: query,
variables: { id, metrics, scopes }
variables: { id, queryMetrics, scopes }
});
let queryMetrics = null
$: 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() {
metricsQuery = queryStore({
client: client,
query: query,
variables: { id, metrics, scopes },
variables: { id, queryMetrics, scopes },
// requestPolicy: 'network-only' // use default cache-first for refresh
});
}
@ -144,6 +147,7 @@
<JobFootprintBars
job={job}
jobMetrics={$metricsQuery.data.jobMetrics}
width={plotWidth}
view="list"
/>
</td>