Support auto-refresh in Vitrage Alarm view

Change-Id: I2041f0edf9f403837dfa250d55dae566e10dfe64
story: #2004726
task: #28764

vitrage_dashboard/dashboard/static/dashboard/project/alarmList/alarmList.controller.js

@@ -60,6 +60,15 @@
       opened: false
     };
 
+    alarmList.autoRefreshChanged = function () {
+      if (alarmList.checkboxAutoRefresh && alarmList.radioModel !== 'historyAlarms') {
+        startCollectData();
+      } else {
+        stopCollectData();
+      }
+    };
+
+
     alarmList.getHistoryData = function (nextPrev) {
       if (nextPrev === 'next' && !alarmList.nextEnabled) {
         return;
@@ -104,9 +113,12 @@
 
 
       if (alarmList.radioModel === 'historyAlarms') {
-        vitrageTopologySrv.getHistoryAlarms(config).then(function (result) {
+          $("#table").hide();
+          $("#spinner").show();
+          vitrageTopologySrv.getHistoryAlarms(config).then(function (result) {
           alarmList.alarms = result.data;
-
+          $("#spinner").hide();
+          $("#table").show();
           alarmList.nextEnabled = result.data.length === LIMIT;
           alarmList.prevEnabled = true;
         });
@@ -123,6 +135,18 @@
 
     alarmList.getHistoryData();
 
+    function startCollectData() {
+      if (angular.isDefined(alarmList.alarmInterval)) return;
+      alarmList.alarmInterval = alarmList.$interval(alarmList.getHistoryData,10000);
+    }
+
+    function stopCollectData() {
+      if (angular.isDefined(alarmList.alarmInterval)) {
+        alarmList.$interval.cancel(alarmList.alarmInterval);
+        alarmList.alarmInterval = undefined;
+      }
+    }
+
     alarmList.sortBy = function (fieldName) {
       if (fieldName === alarmList.sortByFieldName) {
         alarmList.sortOrder = alarmList.sortOrder === 'asc' ? 'desc' : 'asc';

vitrage_dashboard/dashboard/static/dashboard/project/alarmList/alarmList.html

@@ -15,7 +15,10 @@
                        ng-click="alarmList.getHistoryData('')"
                        uib-btn-radio="'historyAlarms'">Alarm History</label>
             </div>
-
+            <div ng-hide="alarmList.radioModel === 'historyAlarms'"  class="themable-checkbox refreshBtn" >
+                 <input type="checkbox" ng-model="alarmList.checkboxAutoRefresh" id="themable-checkbox"                         ng-change="alarmList.autoRefreshChanged()">
+                 <label for="themable-checkbox" >Auto Refresh</label>
+             </div>
             <div ng-show="alarmList.radioModel === 'historyAlarms'" style="display: inline;">
                 <label>Started</label>
 
@@ -58,7 +61,7 @@ fa-angle-double-right prev-next-btn"
 
     <div class="panel panel-default">
 
-        <table st-table='alarmList.ialarms' st-safe-src="alarmList.alarms"
+        <table id="table"  st-table='alarmList.ialarms' st-safe-src="alarmList.alarms"
                class="table-striped table-rsp table-detail modern alarm-table" hz-table>
             <thead>
             <tr>
@@ -123,5 +126,6 @@ fa-angle-double-right prev-next-btn"
             </tr>
             </tbody>
         </table>
+       <img id="spinner" ng-src="{$STATIC_URL$}dashboard/project/assets/spinner.gif" class="spinner" >
     </div>
 </div>

vitrage_dashboard/dashboard/static/dashboard/project/alarmList/alarmList.scss

@@ -20,6 +20,11 @@
     }
   }
 
+  .spinner{
+    display:none;
+    margin-left:45%;
+  }
+
   .td-red {
     background: #f67171 !important;
   }