Improves CPU usage info (#6784)

* improve CPU usage info

* Update ResourceStatsInfo.vue

remove extra comma

* fixes missing chart message

* fix typo

Co-authored-by: Lopez <rodrigo@scclouds.com.br>

Author: RodrigoDLopez

ui/public/locales/en.json

@@ -766,6 +766,7 @@
 "label.glustervolume": "Volume",
 "label.go.back": "Go back",
 "label.gpu": "GPU",
+"label.chart.info": "Information about the charts",
 "label.group": "Group",
 "label.group.optional": "Group (Optional)",
 "label.gslb": "GSLB",
@@ -1561,6 +1562,7 @@
 "label.see.more.info.memory.usage": "See more info about memory usage",
 "label.see.more.info.network.usage": "See more info about network usage",
 "label.see.more.info.disk.usage": "See more info about disk usage",
+"label.see.more.info.shown.charts": "See more info about the shown charts",
 "label.select-view": "Select view",
 "label.select.a.zone": "Select a zone",
 "label.select.deployment.infrastructure": "Select deployment infrastructure",
@@ -2178,8 +2180,7 @@
 "message.confirm.start.lb.vm": "Please confirm you want to start LB VM.",
 "message.confirm.sync.storage": "Please confirm you want to sync the storage pool",
 "message.confirm.upgrade.router.newer.template": "Please confirm that you want to upgrade router to use newer template.",
-"message.cpu.usage.info.multi.cpu": "The CPU usage percentage can exceed 100% if the VM has more than 1 vCPU or when CPU Cap is not enabled. This behavior happens according to how the hypervisor being used accounts the stats.",
-"message.cpu.usage.info.cpu.cap": "If a VM has only 1 vCPU and the CPU Cap on its compute offering is disabled, then the percentage of CPU usage can also go over 100%. This happens because the VM can use more CPUs than it has been allocated.",
+"message.cpu.usage.info": "The CPU usage percentage can exceed 100% if the VM has more than 1 vCPU or when CPU Cap is not enabled. This behavior happens according to the hypervisor being used (e.g: in KVM), due to how they account the stats",
 "message.create.compute.offering": "Compute offering created",
 "message.create.internallb": "Creating internal LB",
 "message.create.internallb.failed": "Failed to create internal LB.",
@@ -2412,6 +2413,7 @@
 "message.failed.to.assign.vms": "Failed to assign VMs",
 "message.failed.to.remove": "Failed to remove",
 "message.generate.keys": "Please confirm that you would like to generate new keys for this user.",
+"message.chart.statistic.info": "The shown charts are self-adjustable, that means, if the value gets close to the limit or overpass it, it will grow to adjust the shown value",
 "message.guest.traffic.in.advanced.zone": "Guest network traffic is communication between end-user virtual machines. Specify a range of VLAN IDs or VXLAN network identifiers (VNIs) to carry guest traffic for each physical network.",
 "message.guest.traffic.in.basic.zone": "Guest network traffic is communication between end-user virtual machines. Specify a range of IP addresses that CloudStack can assign to guest VMs. Make sure this range does not overlap the reserved system IP range.",
 "message.host.dedicated": "Host Dedicated",

ui/public/locales/pt_BR.json

@@ -698,6 +698,7 @@
 "label.glustervolume": "Disco",
 "label.go.back": "Voltar",
 "label.gpu": "GPU",
+"label.chart.info": "Informa\u00E7\u00F5es sobre os gr\u00E1ficos",
 "label.group": "Grupo",
 "label.group.optional": "Grupo (opcional)",
 "label.gslb": "GSLB",
@@ -1425,6 +1426,7 @@
 "label.see.more.info.memory.usage": "Ver mais informa\u00e7\u00f5es sobre o uso de mem\u00f3ria",
 "label.see.more.info.network.usage": "Ver mais informa\u00e7\u00f5es sobre o uso de rede",
 "label.see.more.info.disk.usage": "Ver mais informa\u00e7\u00f5es sobre o uso de disco",
+"label.see.more.info.shown.charts": "Ver mais informa\u00E7\u00F5es sobre os gr\u00E1ficos mostrados",
 "label.select": "Selecionar",
 "label.select-view": "Selecionar visualiza\u00e7\u00e3o",
 "label.select.a.zone": "Selecione uma zona",
@@ -1972,8 +1974,7 @@
 "message.confirm.start.lb.vm": "Confirme que voc\u00ea deseja iniciar esta LB VM",
 "message.confirm.sync.storage": "Por favor, confirme que voc\u00ea gostaria de sincronizar o pool de armazenamento",
 "message.confirm.upgrade.router.newer.template": "Por favor confirme que voc\u00ea deseja atualizar o roteador para usar o template mais recente.",
-"message.cpu.usage.info.multi.cpu": "O percentual de uso de CPU pode passar de 100% quando uma VM possui mais de 1 vCPU. Isso pode acontecer dependendo da forma que o virtualizador contabiliza as estat\u00edsticas.",
-"message.cpu.usage.info.cpu.cap": "Se uma VM possui apenas 1 vCPU e o CPU Cap da oferta de computa\u00e7\u00e3o estiver desabilitado, o percentual de uso de CPU tamb\u00e9m pode passar de 100%. Isso porque a VM pode utilizar mais CPUs do que lhe foi atribu\u00eddo",
+"message.cpu.usage.info": "A porcentagem de uso da CPU pode exceder 100% se a VM tiver mais de 1 vCPU ou quando o CPU Cap n\u00E3o estiver habilitado. Este comportamento acontece de acordo com o hypervisor que est\u00E1 sendo utilizado (ex: no KVM), devido \u00E0 forma como contabilizam as estat\u00EDsticas",
 "message.create.compute.offering": "Oferta de computa\u00e7\u00e3o criada",
 "message.create.internallb": "Criando LB interno",
 "message.create.internallb.failed": "Falha ao criar LB interno",
@@ -2180,6 +2181,7 @@
 "message.failed.to.assign.vms": "Falha ao atribuir VMs",
 "message.failed.to.remove": "Falha ao remover",
 "message.generate.keys": "Por favor confirme que voc\u00ea deseja gerar novas chaves para este usu\u00e1rio.",
+"message.chart.statistic.info": "Os gr\u00E1ficos mostrados s\u00E3o autoajust\u00E1veis, ou seja, se o valor se aproximar ou passar do limite, ele crescer\u00E1 para ajustar o valor mostrado",
 "message.guest.traffic.in.advanced.zone": "O tr\u00e1fego de rede guest \u00e9 para comunica\u00e7\u00e3o entre m\u00e1quinas virtuais do usu\u00e1rio final. Especifique um intervalo de IDs de VLAN para transportar o tr\u00e1fego do guest para cada rede f\u00edsica.",
 "message.guest.traffic.in.basic.zone": "O tr\u00e1fego de rede guest \u00e9 para comunica\u00e7\u00e3o entre m\u00e1quinas virtuais do usu\u00e1rio final. Especifique um intervalo de endere\u00e7os IP para que CloudStack possa atribuir \u00e0s VMs. Certifique-se que este intervalo n\u00e3o se sobreponha o range de IPs reservados do sistema.",
 "message.host.dedicated": "Host dedicado",

ui/src/components/view/StatsTab.vue

@@ -42,6 +42,7 @@
           </a-button>
           <span v-html="formatedPeriod"></span>
         </span>
+        <InfoCircleOutlined class="info-icon" :title="$t('label.see.more.info.shown.charts')" @click="onClickShowResourceInfoModal('CHART')"/>
       </a-col>
     </a-row>
     <div v-if="loaded">
@@ -316,6 +317,9 @@ export default {
     },
     onClickShowResourceInfoModal (resource) {
       switch (resource) {
+        case 'CHART':
+          this.resourceInfoModalTitle = this.$t('label.chart.info')
+          break
         case 'CPU':
           this.resourceInfoModalTitle = this.$t('label.cpu.usage.info')
           break

ui/src/components/view/stats/ResourceStatsInfo.vue

@@ -47,11 +47,16 @@ export default {
   data () {
     return {
       info: [
+        {
+          resourceType: 'CHART',
+          messageList: [
+            this.$t('message.chart.statistic.info')
+          ]
+        },
         {
           resourceType: 'CPU',
           messageList: [
-            this.$t('message.cpu.usage.info.multi.cpu'),
-            this.$t('message.cpu.usage.info.cpu.cap')
+            this.$t('message.cpu.usage.info')
           ]
         },
         {