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

Resize gauge card, hide scale on roofline, set colorDots to true

Browse Source 
- Scale display switchable by new option 'showTime'
This commit is contained in:
Christoph Kluge 2022-10-07 15:01:14 +02:00
parent 64ea4d63c8
commit 390bc4c223
2 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/frontend/src/Status.root.svelte
View File

@ -102,7 +102,7 @@
{#if $initq.data && $mainQuery.data} {#if $initq.data && $mainQuery.data}
{#each $initq.data.clusters.find(c => c.name == cluster).subClusters as subCluster, i} {#each $initq.data.clusters.find(c => c.name == cluster).subClusters as subCluster, i}
<Row cols={2} class="mb-3 justify-content-center"> <Row cols={2} class="mb-3 justify-content-center">
<Col xs="3" class="px-3"> <Col xs="4" class="px-3">
<Card class="h-auto mt-1"> <Card class="h-auto mt-1">
<CardHeader> <CardHeader>
<CardTitle class="mb-0">SubCluster "{subCluster.name}"</CardTitle> <CardTitle class="mb-0">SubCluster "{subCluster.name}"</CardTitle>
@ -111,17 +111,17 @@
<Table> <Table>
<tr> <tr>
<th scope="col">Allocated Nodes</th> <th scope="col">Allocated Nodes</th>
<td style="min-width: 75px;"><div class="col"><Progress value={allocatedNodes[subCluster.name]} max={subCluster.numberOfNodes}/></div></td> <td style="min-width: 100px;"><div class="col"><Progress value={allocatedNodes[subCluster.name]} max={subCluster.numberOfNodes}/></div></td>
<td>({allocatedNodes[subCluster.name]} Nodes / {subCluster.numberOfNodes} Total Nodes)</td> <td>({allocatedNodes[subCluster.name]} Nodes / {subCluster.numberOfNodes} Total Nodes)</td>
</tr> </tr>
<tr> <tr>
<th scope="col">Flop Rate (Any) <Icon name="info-circle" class="p-1" style="cursor: help;" title="Flops[Any] = (Flops[Double] x 2) + Flops[Single]"/></th> <th scope="col">Flop Rate (Any) <Icon name="info-circle" class="p-1" style="cursor: help;" title="Flops[Any] = (Flops[Double] x 2) + Flops[Single]"/></th>
<td style="min-width: 75px;"><div class="col"><Progress value={flopRate[subCluster.name]} max={subCluster.flopRateSimd * subCluster.numberOfNodes}/></div></td> <td style="min-width: 100px;"><div class="col"><Progress value={flopRate[subCluster.name]} max={subCluster.flopRateSimd * subCluster.numberOfNodes}/></div></td>
<td>({formatNumber(flopRate[subCluster.name])}Flops/s / {formatNumber((subCluster.flopRateSimd * subCluster.numberOfNodes))}Flops/s [Max])</td> <td>({formatNumber(flopRate[subCluster.name])}Flops/s / {formatNumber((subCluster.flopRateSimd * subCluster.numberOfNodes))}Flops/s [Max])</td>
</tr> </tr>
<tr> <tr>
<th scope="col">MemBw Rate</th> <th scope="col">MemBw Rate</th>
<td style="min-width: 75px;"><div class="col"><Progress value={memBwRate[subCluster.name]} max={subCluster.memoryBandwidth * subCluster.numberOfNodes}/></div></td> <td style="min-width: 100px;"><div class="col"><Progress value={memBwRate[subCluster.name]} max={subCluster.memoryBandwidth * subCluster.numberOfNodes}/></div></td>
<td>({formatNumber(memBwRate[subCluster.name])}Byte/s / {formatNumber((subCluster.memoryBandwidth * subCluster.numberOfNodes))}Byte/s [Max])</td> <td>({formatNumber(memBwRate[subCluster.name])}Byte/s / {formatNumber((subCluster.memoryBandwidth * subCluster.numberOfNodes))}Byte/s [Max])</td>
</tr> </tr>
</Table> </Table>
@ -132,7 +132,7 @@
<div bind:clientWidth={plotWidths[i]}> <div bind:clientWidth={plotWidths[i]}>
{#key $mainQuery.data.nodeMetrics} {#key $mainQuery.data.nodeMetrics}
<Roofline <Roofline
width={plotWidths[i] - 10} height={300} colorDots={true} cluster={subCluster} width={plotWidths[i] - 10} height={300} colorDots={true} showTime={false} cluster={subCluster}
data={transformPerNodeData($mainQuery.data.nodeMetrics.filter(data => data.subCluster == subCluster.name))} /> data={transformPerNodeData($mainQuery.data.nodeMetrics.filter(data => data.subCluster == subCluster.name))} />
{/key} {/key}
</div> </div>

13
web/frontend/src/plots/Roofline.svelte
View File

@ -41,7 +41,7 @@
let a = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / l let a = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / l
return { return {
x: x1 + a * (x2 - x1), x: x1 + a * (x2 - x1),
y: y1 + a * (y2 - y1) y: y1 + a * (y2 - y1)
} }
} }
@ -67,7 +67,7 @@
return 2 return 2
} }
function render(ctx, data, cluster, width, height, colorDots, defaultMaxY) { function render(ctx, data, cluster, width, height, colorDots, showTime, defaultMaxY) {
if (width <= 0) if (width <= 0)
return return
@ -222,8 +222,8 @@
} }
ctx.stroke() ctx.stroke()
if (colorDots && data.x && data.y) { if (colorDots && showTime && data.x && data.y) {
// The Color Scale // The Color Scale For Time Information
ctx.fillStyle = 'black' ctx.fillStyle = 'black'
ctx.fillText('Time:', 17, height - 5) ctx.fillText('Time:', 17, height - 5)
const start = paddingLeft + 5 const start = paddingLeft + 5
@ -305,6 +305,7 @@
export let height export let height
export let tiles = null export let tiles = null
export let colorDots = true export let colorDots = true
export let showTime = true
export let data = null export let data = null
console.assert(data || tiles || (flopsAny && memBw), "you must provide flopsAny and memBw or tiles!") console.assert(data || tiles || (flopsAny && memBw), "you must provide flopsAny and memBw or tiles!")
@ -327,7 +328,7 @@
canvasElement.width = width canvasElement.width = width
canvasElement.height = height canvasElement.height = height
render(ctx, data, cluster, width, height, colorDots, maxY) render(ctx, data, cluster, width, height, colorDots, showTime, maxY)
}) })
let timeoutId = null let timeoutId = null
@ -347,7 +348,7 @@
timeoutId = null timeoutId = null
canvasElement.width = width canvasElement.width = width
canvasElement.height = height canvasElement.height = height
render(ctx, data, cluster, width, height, colorDots, maxY) render(ctx, data, cluster, width, height, colorDots, showTime, maxY)
}, 250) }, 250)
} }