Update Graph on interval

https://github.com/rancher/rancher/issues/16920

lib/shared/addon/components/metrics-action/component.js

@@ -118,22 +118,26 @@ export default Component.extend({
     let from;
     let to;
     let interval;
+    let isCustom;
 
     if ( period !== CUSTOM ) {
       const params = PERIODS.findBy('value', get(this, 'selected'));
 
-      from = period,
-      to = 'now',
-      interval = get(params, 'interval')
+      from = period;
+      to = 'now';
+      interval = get(params, 'interval');
+      isCustom = false;
     } else {
       from = get(this, 'from').toString();
       to = get(this, 'to').toString() || new Date().getTime().toString();
-      interval = `${ Math.round((to - from) / 120000) }s`
+      interval = `${ Math.round((to - from) / 120000) }s`;
+      isCustom = true;
     }
     setProperties(get(this, 'state'), {
       from,
       to,
       interval,
+      isCustom
     });
 
     if ( period === CUSTOM ) {

lib/shared/addon/mixins/metrics.js

@@ -228,6 +228,7 @@ export default Mixin.create({
   state:         null,
   projectScope:  false,
   metricParams:  null,
+  timeOutAnchor: null,
 
   init() {
     this._super(...arguments);
@@ -236,12 +237,18 @@ export default Mixin.create({
       loading:  false,
       detail:   true,
       noGraphs: false,
+      isCustom: false,
       from:     null,
       to:       null,
       interval: null,
     })
   },
 
+  willDestroyElement() {
+    this.clearTimeOut();
+    this._super();
+  },
+
   updateData(out) {
     const single = [];
     const graphs = [];
@@ -259,13 +266,38 @@ export default Mixin.create({
       graphs,
       single
     });
+
+    if ( !get(this, 'state.isCustom') ) {
+      const interval = get(this, 'state.interval');
+
+      let timeout = parseInt(interval.substr(0, get(interval, 'length') - 1), 10);
+
+      timeout = timeout > 5 ? timeout : 5;
+      const timeOutAnchor = setTimeout(() => {
+        this.send('query', false);
+      }, timeout * 1000);
+
+      set(this, 'timeOutAnchor', timeOutAnchor);
+    }
+  },
+
+  clearTimeOut() {
+    const timeOutAnchor = get(this, 'timeOutAnchor');
+
+    if (timeOutAnchor){
+      clearTimeout(timeOutAnchor);
+      set(this, 'timeOutAnchor', timeOutAnchor);
+    }
   },
 
   actions: {
-    query(){
+    query(showLoading = true){
+      this.clearTimeOut();
       const gs = get(this, 'globalStore');
 
-      set(this, 'state.loading', true);
+      if ( showLoading ) {
+        set(this, 'state.loading', true);
+      }
 
       let metricParams = {};
 
@@ -344,7 +376,9 @@ export default Mixin.create({
           return;
         }
 
-        set(this, 'state.loading', false);
+        if ( showLoading ) {
+          set(this, 'state.loading', false);
+        }
       });
     }
   }