Implemented auto refresh button for VM metrics

ui/public/locales/en.json

@@ -414,6 +414,8 @@
 "label.auto.assign": "Automatically assign",
 "label.auto.assign.diskoffering.disk.size": "Automatically assign offering matching the disk size",
 "label.auto.assign.random.ip": "Automatically assign a random IP address",
+"label.auto.refresh.statistics": "Period between auto refreshes",
+"label.auto.refresh.statistics.none": "None",
 "label.automigrate.volume": "Auto migrate volume to another storage pool if required",
 "label.autoscale.vm.groups": "AutoScaling Groups",
 "label.autoscale.vm.profile": "AutoScale Instance Profile",

ui/public/locales/pt_BR.json

@@ -288,6 +288,8 @@
 "label.author.name": "Nome do autor",
 "label.auto.assign.diskoffering.disk.size": "Atribuir automaticamente a oferta correspondente ao tamanho do disco",
 "label.auto.assign.random.ip": "Atribuir automaticamente um enderec\u0327o de IP aleat\u00f3rio",
+"label.auto.refresh.statistics": "Tempo entre atualiza\u00e7\u00f5es autom\u00e1ticas",
+"label.auto.refresh.statistics.none": "Nenhum",
 "label.autoscalingenabled": "Escalonamento autom\u00e1tico",
 "label.availability": "Disponibilidade",
 "label.available": "Dispon\u00edvel",
@@ -609,6 +611,12 @@
 "label.download.state": "Estado do download",
 "label.dpd": "Detec\u00e7\u00e3o de correspondente morto",
 "label.driver": "Driver",
+"label.duration.custom": "Personalizado",
+"label.duration.1hour": "1 hora",
+"label.duration.6hours": "6 horas",
+"label.duration.12hours": "12 horas",
+"label.duration.24hours": "24 horas",
+"label.duration.7days": "7 dias",
 "label.dynamicscalingenabled": "Escalonamento din\u00e2mico habilitado",
 "label.dynamicscalingenabled.tooltip": "VM s\u00f3 pode ser dinamicamente escalonada quando o escalonamento din\u00e2mico estiver habilitado no template, oferta de computa\u00e7\u00e3o e nas configura\u00e7\u00e3oes globais",
 "label.edit": "Editar",

ui/src/components/view/StatsTab.vue

@@ -41,9 +41,9 @@
           <a-radio-group
             v-model:value="durationSelectorValue"
             buttonStyle="solid"
-            @change="handleDurationChange">
+            @change="updateVirtualMachineStats">
             <a-radio-button value="">
-              {{ $t('1 hour') }}
+              {{ $t('label.duration.1hour') }}
             </a-radio-button>
             <a-radio-button value="6hours" v-if="statsRetentionTime >= 60">
               {{ $t('label.duration.6hours') }}
@@ -62,6 +62,16 @@
             </a-radio-button>
           </a-radio-group>
           <InfoCircleOutlined class="info-icon" :title="$t('label.see.more.info.shown.charts')" @click="onClickShowResourceInfoModal('CHART')"/>
+          <span>{{$t('label.auto.refresh.statistics')}}</span>
+          <a-select
+            v-model:value="refreshTime"
+            style="width: 100px">
+            <a-select-option value="0">{{$t('label.auto.refresh.statistics.none')}}</a-select-option>
+            <a-select-option value="5000">5s</a-select-option>
+            <a-select-option value="30000">30s</a-select-option>
+            <a-select-option value="60000">1min</a-select-option>
+            <a-select-option value="300000">5min</a-select-option>
+          </a-select>
         </div>
         <div class="ant-tag" v-if="durationSelectorValue==='custom'">
           <a-button @click="openFilter()">
@@ -297,6 +307,8 @@ export default {
       selectedDiskUnitOfMeasurement: 'KiB',
       diskUnitsOfMeasurement: ['KiB', 'MiB', 'GiB'],
       chartLabels: [],
+      refreshTime: '0',
+      refreshIntervalId: null,
       resourceUsageHistory: {
         cpu: [],
         memory: {
@@ -334,6 +346,9 @@ export default {
   mounted () {
     this.fetchData()
   },
+  unmounted () {
+    window.clearInterval(this.refreshIntervalId)
+  },
   computed: {
     statsRetentionTime () {
       if (this.resourceType === 'Volume') {
@@ -371,6 +386,15 @@ export default {
         return
       }
       this.fetchData()
+    },
+    refreshTime: function () {
+      this.updateVirtualMachineStats()
+      if (this.refreshTime === '0') return window.clearInterval(this.refreshIntervalId)
+
+      window.clearInterval(this.refreshIntervalId)
+      this.refreshIntervalId = window.setInterval(() => {
+        this.updateVirtualMachineStats()
+      }, parseInt(this.refreshTime))
     }
   },
   methods: {
@@ -398,26 +422,10 @@ export default {
       this.resourceTypeToShowInfo = resource
       this.showResourceInfoModal = true
     },
-    handleDurationChange () {
-      var now = this.getEndDate()
-      var start = new Date(now)
-      switch (this.durationSelectorValue) {
-        case '6hours':
-          start.setHours(start.getHours() - 6)
-          break
-        case '12hours':
-          start.setHours(start.getHours() - 12)
-          break
-        case 'day':
-          start.setDate(start.getDate() - 1)
-          break
-        case 'week':
-          start.setDate(start.getDate() - 7)
-          break
-        default:
-          start.setHours(start.getHours() - 1)
-      }
-      this.handleSubmit({ startDate: start, endDate: now })
+    updateVirtualMachineStats () {
+      const start = this.getStartDate()
+      const end = this.getEndDate()
+      this.handleSubmit({ startDate: start, endDate: end })
     },
     handleSubmit (values) {
       if (values.startDate) {
@@ -437,9 +445,19 @@ export default {
       this.showFilterStatsModal = false
     },
     getStartDate () {
-      var now = new Date()
-      now.setHours(now.getHours() - 1)
-      return now
+      const now = new Date()
+      switch (this.durationSelectorValue) {
+        case '6hours':
+          return now.setHours(now.getHours() - 6)
+        case '12hours':
+          return now.setHours(now.getHours() - 12)
+        case 'day':
+          return now.setDate(now.getDate() - 1)
+        case 'week':
+          return now.setDate(now.getDate() - 7)
+        default:
+          return now.setHours(now.getHours() - 1)
+      }
     },
     getEndDate () {
       return new Date()