VM stats history visualization (#6401)

* Add VM stats view feature

* Add dynamic label to the submit button of the VM stats filtering modal

* Improve CPU info message

* Reduce identation

* Remove missed line

* Fix timestamp when 'Use local timezone' is selected

* Fix bug when filtering for all data

* Support for toggle 'Use local timezone' button

Co-authored-by: joseflauzino <jose@scclouds.com.br>
Co-authored-by: Daniel Augusto Veronezi Salvador <38945620+GutoVeronezi@users.noreply.github.com>

Author: 3 people

ui/package.json

@@ -42,6 +42,8 @@
     "antd-theme-webpack-plugin": "^1.3.9",
     "axios": "^0.21.1",
     "babel-plugin-require-context-hook": "^1.0.0",
+    "chart.js": "^3.7.1",
+    "chartjs-adapter-moment": "^1.0.0",
     "core-js": "^3.21.1",
     "enquire.js": "^2.1.6",
     "js-cookie": "^2.2.1",
@@ -52,6 +54,8 @@
     "npm-check-updates": "^6.0.1",
     "nprogress": "^0.2.0",
     "vue": "^3.2.31",
+    "vue-chartjs": "^4.0.7",
+    "vue-clipboard2": "^0.3.1",
     "vue-cropper": "^1.0.2",
     "vue-i18n": "^9.1.6",
     "vue-loader": "^16.2.0",

ui/public/locales/en.json

@@ -263,6 +263,7 @@
 "label.alerts": "Alerts",
 "label.algorithm": "Algorithm",
 "label.all": "All",
+"label.all.available.data": "All available data",
 "label.all.ipv6": "All IPv6",
 "label.all.zone": "All zones",
 "label.allocated": "Allocated",
@@ -437,6 +438,7 @@
 "label.copyid": "Copy ID",
 "label.cpu": "CPU",
 "label.cpu.sockets": "CPU sockets",
+"label.cpu.usage.info": "CPU usage information",
 "label.cpuallocated": "CPU allocated for VMs",
 "label.cpuallocatedghz": "CPU allocated",
 "label.cpulimit": "CPU limits",
@@ -579,6 +581,7 @@
 "label.disk.offerings": "Disk offerings",
 "label.disk.selection": "Disk selection",
 "label.disk.size": "Disk size",
+"label.disk.usage.info": "Disk usage information",
 "label.diskbytesreadrate": "Disk read rate (BPS)",
 "label.diskbyteswriterate": "Disk write rate (BPS)",
 "label.diskiopsmax": "Max IOPS",
@@ -662,6 +665,7 @@
 "label.enable.vpc.offering": "Enable VPC offering",
 "label.enable.vpn": "Enable remote access VPN",
 "label.end": "End",
+"label.end.date.and.time": "End date and time",
 "label.end.ip": "End IP",
 "label.end.reserved.system.ip": "End reserved system IP",
 "label.end.vlan": "End VLAN",
@@ -1059,7 +1063,12 @@
 "label.may.continue": "You may now continue.",
 "label.mb.memory": "MB memory",
 "label.memory": "Memory",
+"label.memory.free": "Memory free",
+"label.memory.maximum.mb": "Max memory (in MB)",
 "label.memory.mb": "Memory (in MB)",
+"label.memory.usage.info": "Memory usage information",
+"label.memory.total": "Memory total",
+"label.memory.used": "Memory used",
 "label.memoryallocated": "Memory allocated",
 "label.memoryallocatedgb": "Memory allocated",
 "label.memorylimit": "Memory limits (MiB)",
@@ -1081,6 +1090,8 @@
 "label.migrate.instance.specific.storages": "Migrate volume(s) of the instance to specific primary storages",
 "label.migrate.systemvm.to": "Migrate system VM to",
 "label.migrate.volume": "Migrate volume",
+"message.memory.usage.info.hypervisor.additionals": "The data shown may not reflect the actual memory usage if the VM does not have the additional hypervisor tools installed",
+"message.memory.usage.info.negative.value": "If the VM's memory usage cannot be obtained from the hypervisor, the lines for free memory in the raw data graph and memory usage in the percentage graph will be disabled",
 "message.migrate.volume.tooltip": "Volume can be migrated to any suitable storage pool. Admin has to choose the appropriate disk offering to replace, that supports the new storage pool",
 "label.migrate.with.storage": "Migrate with storage",
 "label.migrating": "Migrating",
@@ -1127,6 +1138,7 @@
 "label.network.permissions": "Network permissions",
 "label.network.selection": "Network selection",
 "label.network.service.providers": "Network service providers",
+"label.network.usage.info": "Network usage information",
 "label.networkdevicetype": "Type",
 "label.networkdomain": "Network domain",
 "label.networkid": "Network",
@@ -1182,6 +1194,8 @@
 "label.offerha": "Offer HA",
 "label.offeringtype": "Compute offering type",
 "label.ok": "OK",
+"label.only.end.date.and.time": "Only end date and time",
+"label.only.start.date.and.time": "Only start date and time",
 "label.open.documentation": "Open documentation",
 "label.open.url": "Open URL in browser",
 "label.opendaylight": "OpenDaylight",
@@ -1236,6 +1250,7 @@
 "label.pcidevice": "GPU",
 "label.per.account": "Per account",
 "label.per.zone": "Per zone",
+"label.percentage": "Percentage",
 "label.perfectforwardsecrecy": "Perfect forward secrecy",
 "label.perform.fresh.checks": "Perform fresh checks",
 "label.performfreshchecks": "Perform fresh checks",
@@ -1349,12 +1364,14 @@
 "label.rados.secret": "RADOS secret",
 "label.rados.user": "RADOS user",
 "label.ram": "RAM",
+"label.raw.data": "Raw data",
 "label.rbd": "RBD",
 "label.rbdid": "Cephx user",
 "label.rbdmonitor": "Ceph monitor",
 "label.rbdpool": "Ceph pool",
 "label.rbdsecret": "Cephx secret",
 "label.read": "Read",
+"label.read.and.write": "Read \u0026 Write",
 "label.read.io": "Read (IO)",
 "label.readonly": "Read-Only",
 "label.reason": "Reason",
@@ -1491,10 +1508,15 @@
 "label.securitygroups": "Security groups",
 "label.securitygroupsenabled": "Security groups enabled",
 "label.select": "Select",
+"label.see.more.info.cpu.usage": "See more info about CPU usage",
+"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.select-view": "Select view",
 "label.select.a.zone": "Select a zone",
 "label.select.deployment.infrastructure": "Select deployment infrastructure",
 "label.select.network": "Select Network",
+"label.select.period": "Select period",
 "label.select.project": "Select project",
 "label.select.projects": "Select projects",
 "label.select.ps": "Select primary storage",
@@ -1571,6 +1593,7 @@
 "label.sshkeypairs": "SSH key pairs",
 "label.sslcertificates": "SSL certificates",
 "label.start": "Start",
+"label.start.date.and.time": "Start date and time",
 "label.start.ip": "Start IP",
 "label.start.lb.vm": "Start LB VM",
 "label.start.reserved.system.ip": "Start reserved system IP",
@@ -1803,6 +1826,9 @@
 "label.vm.password": "Password of the VM is",
 "label.vm.snapshots": "VM snapshots",
 "label.vm.start": "Start",
+"label.vm.stats.filter.period": "From <b>{startDate}</b> to <b>{endDate}</b>",
+"label.vm.stats.filter.starting": "Starting <b>{startDate}</b>.",
+"label.vm.stats.filter.up.to": "Up to <b>{endDate}</b>.",
 "label.vmfs": "VMFS",
 "label.vmipaddress": "VM IP address",
 "label.vmlimit": "Instance limits",
@@ -2008,6 +2034,7 @@
 "message.adding.netscaler.device": "Adding Netscaler device",
 "message.adding.netscaler.provider": "Adding Netscaler provider",
 "message.advanced.security.group": "Choose this if you wish to use security groups to provide guest VM isolation.",
+"message.alert.show.all.stats.data": "It can return a lot of data depending on the settings for collecting and retaining stats.",
 "message.allowed": "Allowed",
 "message.apply.success": "Applied successfully.",
 "message.assign.instance.another": "Please specify the account type, domain, account name and network (optional) of the new account. <br> If the default NIC of the VM is on a shared network, CloudStack will check if the network can be used by the new account if you do not specify one network. <br> If the default NIC of the VM is on a isolated network, and the new account has more one isolated networks, you should specify one.",
@@ -2077,6 +2104,8 @@
 "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.create.compute.offering": "Compute offering created",
 "message.create.internallb": "Creating internal LB",
 "message.create.internallb.failed": "Failed to create internal LB.",
@@ -2150,6 +2179,8 @@
 "message.disable.vpn.processing": "Disabling VPN...",
 "message.discovering.feature": "Discovering features, please wait...",
 "message.disk.offering.created": "Disk offering created:",
+"message.disk.usage.info.data.points": "Each data point represents the difference in read/write data since the last data point.",
+"message.disk.usage.info.sum.of.disks": "The disk usage shown is made up of the sum of read/write data from all the disks in the VM.",
 "message.download.volume": "Please click the link to download the volume:<p><a href=\"#\">00000</a>",
 "message.download.volume.confirm": "Please confirm that you want to download this volume.",
 "message.edit.acl.failed": "Failed to edit ACL rule",
@@ -2189,6 +2220,7 @@
 "message.error.discovering.feature": "Exception caught while discovering features.",
 "message.error.display.text": "Please enter display text.",
 "message.error.enable.saml": "Unable to find users IDs to enable SAML single sign on, kindly enable it manually.",
+"message.error.end.date.and.time": "Please select the end date and time!",
 "message.error.endip": "Please enter end IP.",
 "message.error.gateway": "Please enter gateway.",
 "message.error.host.name": "Please enter host name.",
@@ -2254,6 +2286,7 @@
 "message.error.smb.username": "Please enter SMB username.",
 "message.error.specify.sticky.name": "Please specify a sticky name.",
 "message.error.sr.namelabel": "Please enter SR Name-Label.",
+"message.error.start.date.and.time": "Please select the start date and time!",
 "message.error.startip": "Please enter start IP.",
 "message.error.storage.tags": "Please enter storage tags.",
 "message.error.target.iqn": "Please enter target IQN.",
@@ -2362,6 +2395,9 @@
 "message.network.removenic": "Please confirm that want to remove this NIC, which will also remove the associated network from the VM.",
 "message.network.secondaryip": "Please confirm that you would like to acquire a new secondary IP for this NIC. \n NOTE: You need to manually configure the newly-acquired secondary IP inside the virtual machine.",
 "message.network.updateip": "Please confirm that you would like to change the IP address for this NIC on VM.",
+"message.network.usage.info.data.points": "Each data point represents the difference in data traffic since the last data point.",
+"message.network.usage.info.sum.of.vnics": "The network usage shown is made up of the sum of data traffic from all the vNICs in the VM.",
+"message.no.data.to.show.for.period": "No data to show for the selected period.",
 "message.no.description": "No description entered.",
 "message.offering.internet.protocol.warning": "WARNING: IPv6 supported networks use static routing and will require upstream routes to be configured manually.",
 "message.offering.ipv6.warning": "Please refer documentation for creating IPv6 enabled network/VPC offering <a href='http://docs.cloudstack.apache.org/en/latest/plugins/ipv6.html#isolated-network-and-vpc-tier'>IPv6 support in CloudStack - Isolated networks and VPC tiers</a>",
@@ -2423,9 +2459,11 @@
 "message.select.affinity.groups": "Please select any affinity groups you want this VM to belong to:",
 "message.select.destination.image.stores": "Please select Image Store(s) to which data is to be migrated to",
 "message.select.disk.offering": "Please select a disk offering for disk",
+"message.select.end.date.and.time": "Select an end date & time.",
 "message.select.migration.policy": "Please select a migration policy.",
 "message.select.nic.network": "Please select a network for NIC",
 "message.select.security.groups": "Please select security group(s) for your new VM.",
+"message.select.start.date.and.time": "Select a start date & time.",
 "message.select.zone.description": "Select type of zone basic/advanced.",
 "message.select.zone.hint": "This is the type of zone deployment that you want to use. Basic zone: provides a single network where each VM instance is assigned an IP directly from the network. Guest isolation can be provided through layer-3 means such as security groups (IP address source filtering). Advanced zone: For more sophisticated network topologies. This network model provides the most flexibility in defining guest networks and providing custom network offerings such as firewall, VPN, or load balancer support.",
 "message.server.description": "NFS, iSCSI, or PreSetup: IP address or DNS name of the storage device. VMWare PreSetup: IP address or DNS name of the vCenter server. Linstor: http(s) url of the linstor-controller.",