Skip to content

Commit dbaff25

Browse files
PeterBackrollPeterBackroll
committed
update views
1 parent fbddf9f commit dbaff25

File tree

2 files changed

+34
-15
lines changed

2 files changed

+34
-15
lines changed

‎ui/src/views/reporting/finops.vue‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
<resource-stats-line-chart
8484
:chartLabels="chartLabels"
8585
:chartData="resourceUsageHistory.cpu"
86-
:yAxisInitialMax="2250"
86+
:yAxisInitialMax="2260"
8787
:yAxisIncrementValue="10"
8888
:yAxisMeasurementUnit="'GHz'"
8989
/>
@@ -232,23 +232,27 @@ export default {
232232
const chartPointRadius = this.getChartPointRadius(60)
233233
234234
const blue = '#166ab7'
235+
// const white = '#ffffff'
236+
const orange = '#ff7532'
235237
const green = '#389357'
236238
const blueInRgba = 'rgba(24, 144, 255, 0.5)'
237239
const greenInRgba = 'rgba(59, 198, 133, 0.65)'
238240
const red = '#ff4d4f'
239241
// const redInRgba = 'rgb(255, 77, 79, 0.65)'
240242
241-
const cpuTotal = { label: 'CPU Total', backgroundColor: blueInRgba, borderColor: red, data: [], pointRadius: chartPointRadius }
242-
const cpuUsed = { label: 'CPU Allocated', backgroundColor: blueInRgba, borderColor: blue, data: [], pointRadius: chartPointRadius }
243-
const cpuWithOverprovisionning = { label: 'CPU with OverProvisionning', backgroundColor: greenInRgba, borderColor: green, data: [], pointRadius: chartPointRadius }
243+
const cpuTotal = { label: 'CPU Total', borderColor: red, data: [], pointRadius: chartPointRadius }
244+
const cpuUsed = { label: 'CPU Allocated', borderColor: blue, data: [], pointRadius: chartPointRadius }
245+
const cpuWithOverprovisionning = { label: 'CPU with OverProvisionning', borderColor: green, data: [], pointRadius: chartPointRadius }
246+
const cpuInUse = { label: 'CPU in use', borderColor: orange, data: [], pointRadius: chartPointRadius }
244247
245248
const storageUsed = { label: 'Storage Allocated', backgroundColor: blueInRgba, borderColor: blue, data: [], pointRadius: chartPointRadius }
246249
const storageTotal = { label: 'Storage Total', backgroundColor: blueInRgba, borderColor: red, data: [], pointRadius: chartPointRadius }
247250
const storageWithOverprovisionning = { label: 'Storage with OverProvisionning', backgroundColor: greenInRgba, borderColor: green, data: [], pointRadius: chartPointRadius }
248251
249-
const ramUsed = { label: 'RAM Used', backgroundColor: blueInRgba, borderColor: blue, data: [], pointRadius: chartPointRadius }
250-
const ramTotal = { label: 'RAM Total', backgroundColor: blueInRgba, borderColor: red, data: [], pointRadius: chartPointRadius }
251-
const ramWithOverprovisionning = { label: 'RAM with OverProvisionning', backgroundColor: greenInRgba, borderColor: green, data: [], pointRadius: chartPointRadius }
252+
const ramUsed = { label: 'RAM Allocated', backgroundColor: blueInRgba, borderColor: blue, data: [], pointRadius: chartPointRadius }
253+
const ramTotal = { label: 'RAM Total', borderColor: red, data: [], pointRadius: chartPointRadius }
254+
const ramWithOverprovisionning = { label: 'RAM with OverProvisionning', backgroundColor: greenInRgba, borderColor: green, data: [], pointRadius: chartPointRadius }
255+
const ramInUse = { label: 'RAM in use', backgroundColor: blueInRgba, borderColor: orange, data: [], pointRadius: chartPointRadius }
252256
253257
// generate data
254258
const datas = []
@@ -260,13 +264,15 @@ export default {
260264
const data = {}
261265
262266
data.timestamp = timestamp.toISOString()
263-
data.cpuTotal = 901
267+
data.cpuTotal = 1125
264268
data.cpuUsed = Math.random() * (1034 - 800) + 800
265269
data.cpuWithOverprovisionning = 2250.00
270+
data.cpuInUse = Math.random() * (1034 - 600) + 600
266271
267272
data.ramTotal = 3.8
268273
data.ramUsed = Math.random() * (3 - 1.5) + 2.5
269274
data.ramWithOverprovisionning = 5
275+
data.ramInUse = Math.random() * (3 - 1.5) + 2.5
270276
271277
data.storageTotal = 40
272278
data.storageUsed = Math.random() * (28 - 26) + 26
@@ -284,25 +290,29 @@ export default {
284290
cpuUsed.data.push({ timestamp: currentLabel, stat: data.cpuUsed })
285291
cpuTotal.data.push({ timestamp: currentLabel, stat: data.cpuTotal })
286292
cpuWithOverprovisionning.data.push({ timestamp: currentLabel, stat: data.cpuWithOverprovisionning })
293+
cpuInUse.data.push({ timestamp: currentLabel, stat: data.cpuInUse })
287294
288295
ramUsed.data.push({ timestamp: currentLabel, stat: data.ramUsed })
289296
ramTotal.data.push({ timestamp: currentLabel, stat: data.ramTotal })
290297
ramWithOverprovisionning.data.push({ timestamp: currentLabel, stat: data.ramWithOverprovisionning })
298+
ramInUse.data.push({ timestamp: currentLabel, stat: data.ramInUse })
291299
292300
storageUsed.data.push({ timestamp: currentLabel, stat: data.storageUsed })
293301
storageTotal.data.push({ timestamp: currentLabel, stat: data.storageTotal })
294302
storageWithOverprovisionning.data.push({ timestamp: currentLabel, stat: data.storageWithOverprovisionning })
295303
}
296304
console.log('datas!!!')
305+
this.resourceUsageHistory.cpu.push(cpuWithOverprovisionning)
297306
this.resourceUsageHistory.cpu.push(cpuUsed)
307+
this.resourceUsageHistory.cpu.push(cpuInUse)
298308
this.resourceUsageHistory.cpu.push(cpuTotal)
299-
this.resourceUsageHistory.cpu.push(cpuWithOverprovisionning)
300309
301310
this.resourceUsageHistory.storage.push(storageUsed)
302311
this.resourceUsageHistory.storage.push(storageTotal)
303312
this.resourceUsageHistory.storage.push(storageWithOverprovisionning)
304313
305314
this.resourceUsageHistory.ram.push(ramUsed)
315+
this.resourceUsageHistory.ram.push(ramInUse)
306316
this.resourceUsageHistory.ram.push(ramTotal)
307317
this.resourceUsageHistory.ram.push(ramWithOverprovisionning)
308318
}

‎ui/src/views/reporting/greenops.vue‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,18 +46,27 @@
4646
</div>
4747
</chart-card>
4848
<chart-card class="metric-card">
49+
<div class="center">Commissioning dates</div>
4950
<div class="center">
50-
<a-statistic title="Metrics 2" :value="93" >
51-
<template #suffix>
52-
<DesktopOutlined />
53-
</template>
54-
</a-statistic>
51+
<span>cs-kvm1 > 11/01/2022</span>
52+
</div>
53+
<div class="center">
54+
<span>cs-kvm2 > 09/06/2022</span>
55+
</div>
56+
<div class="center">
57+
<span>cs-kvm3 > 04/06/2022</span>
58+
</div>
59+
<div class="center">
60+
<span>cs-kvm4 > 14/10/2022</span>
61+
</div>
62+
<div class="center">
63+
<span>cs-kvm5 > 12/12/2022</span>
5564
</div>
5665
</chart-card>
5766
</div>
5867
<div class="big-card">
5968
<chart-card class="map">
60-
<iframe width="100%" height="730px" src="https://www.openstreetmap.org/export/embed.html?bbox=-125.15625000000001%2C-30.60009387355006%2C106.87500000000001%2C76.96033358827414&amp;layer=mapnik" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?#map=3/41.77/-9.14">Afficher une carte plus grande</a></small>
69+
<iframe width="100%" height="730px" src="https://www.openstreetmap.org/export/embed.html?bbox=-149.41406250000003%2C-13.411399541898431%2C76.640625%2C71.85609906532893&amp;layer=mapnik" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?#map=3/41.57/-36.39">Afficher une carte plus grande</a></small>
6170
</chart-card>
6271
</div>
6372
</div>

0 commit comments

Comments
 (0)