apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-10-26 08:42:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

UI: Fixes in the Usage UI (#10000)

Browse Source 
* fixes on usage ui

* dont call API when caller does not have access to it

* handle when lastheartbeat is undefined

* hide last collection datetime when lastheartbeat is undefined

* apply Pearl's suggestions

Co-authored-by: Pearl Dsilva <pearl1594@gmail.com>

* apply Pearl's suggestions

Co-authored-by: Pearl Dsilva <pearl1594@gmail.com>

* apply Pearl's suggestions

Co-authored-by: Pearl Dsilva <pearl1594@gmail.com>

* apply Pearl's suggestions

Co-authored-by: Pearl Dsilva <pearl1594@gmail.com>

* apply Pearl's suggestions

Co-authored-by: Pearl Dsilva <pearl1594@gmail.com>

---------

Co-authored-by: Pearl Dsilva <pearl1594@gmail.com>
This commit is contained in:
Bernardo De Marco Gonçalves 2024-12-09 14:25:03 -03:00 committed by GitHub
parent 9231c1c6ba
commit e57a82a4f5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/public/locales/en.json
View File

@ -1528,6 +1528,7 @@
"label.networkspeed": "Network speed",
"label.networktype": "Network type",
"label.networkwrite": "Network write",
"label.never": "Never",
"label.new": "New",
"label.new.autoscale.vmgroup": "New AutoScaling Group",
"label.new.instance.group": "New Instance group",

2
ui/src/components/view/ListView.vue
View File

@ -26,7 +26,7 @@
:rowSelection="explicitlyAllowRowSelection || enableGroupAction() || $route.name === 'event' ? {selectedRowKeys: selectedRowKeys, onChange: onSelectChange, columnWidth: 30} : null"
:rowClassName="getRowClassName"
@resizeColumn="handleResizeColumn"
style="overflow-y: auto"
:style="{ 'overflow-y': this.$route.name === 'usage' ? 'hidden' : 'auto' }"
>
<template #customFilterDropdown>
<div style="padding: 8px" class="filter-dropdown">

21
ui/src/views/infra/UsageRecords.vue
View File

@ -50,6 +50,7 @@
<a-row justify="end">
<a-col>
<tooltip-button
v-if="'generateUsageRecords' in $store.getters.apis"
type="primary"
icon="hdd-outlined"
:tooltip="$t('label.usage.records.generate')"
@ -58,6 +59,7 @@
</a-col>&nbsp;&nbsp;
<a-col>
<tooltip-button
v-if="'removeRawUsageRecords' in $store.getters.apis"
type="danger"
icon="delete-outlined"
:tooltip="$t('label.usage.records.purge')"
@ -70,7 +72,7 @@
</a-card>
</a-affix>
<a-col>
<a-card size="small" :loading="serverMetricsLoading">
<a-card size="small" :loading="serverMetricsLoading" v-if="'listUsageServerMetrics' in $store.getters.apis">
<a-row justify="space-around">
<a-card-grid style="width: 30%; text-align: center; font-size: small;">
<a-statistic
@ -86,10 +88,10 @@
<a-card-grid style="width: 35%; text-align: center; font-size: small;">
<a-statistic
:title="$t('label.lastheartbeat')"
:value="$toLocaleDate(serverStats.lastheartbeat)"
:value="serverStats.lastheartbeat ? $toLocaleDate(serverStats.lastheartbeat) : $t('label.never')"
valueStyle="font-size: medium"
/>
<a-card-meta :description="getTimeSince(serverStats.collectiontime)" />
<a-card-meta v-if="!!serverStats.lastheartbeat" :description="getTimeSince(serverStats.collectiontime)" />
</a-card-grid>
<a-card-grid style="width: 35%; text-align: center; font-size: small;">
<a-statistic
@ -159,7 +161,7 @@
/>
</a-form-item>
</a-col>
<a-col :span="3">
<a-col :span="3" v-if="'listUsageTypes' in $store.getters.apis">
<a-form-item
ref="type"
name="type"
@ -173,7 +175,7 @@
/>
</a-form-item>
</a-col>
<a-col :span="3">
<a-col :span="3" v-if="'listUsageTypes' in $store.getters.apis">
<a-form-item
ref="id"
name="id"
@ -501,6 +503,11 @@ export default {
}
},
listUsageServerMetrics () {
if (!('listUsageServerMetrics' in this.$store.getters.apis)) {
this.serverMetricsLoading = false
return
}
this.serverMetricsLoading = true
api('listUsageServerMetrics').then(json => {
this.stats = []
@ -637,6 +644,10 @@ export default {
})
},
getUsageTypes () {
if (!('listUsageTypes' in this.$store.getters.apis)) {
return
}
api('listUsageTypes').then(json => {
if (json && json.listusagetypesresponse && json.listusagetypesresponse.usagetype) {
this.usageTypes = [{ id: null, value: '' }, ...json.listusagetypesresponse.usagetype.map(x => {