added auto refresh button for vm metrics

Author: erikbocks

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

@@ -43,7 +43,7 @@
             buttonStyle="solid"
             @change="handleDurationChange">
             <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.fetchData()
+      if (this.refreshTime === '0') return window.clearInterval(this.refreshIntervalId)
+
+      window.clearInterval(this.refreshIntervalId)
+      this.refreshIntervalId = window.setInterval(() => {
+        this.fetchData()
+      }, parseInt(this.refreshTime))
     }
   },
   methods: {