(WIP) 470 dynamic attributes in alarms tab (#497)

* dynamic table all implemented, waiting for design feedback

* forgot to remove comments.

* removed report boolean, didnt display as string and considered not neseccary

* h4 removal

* Update alarms.html

Add Bootstrap inline form markup.

* Review commit, form classes done, camelcase on scope vars and some padding on the checkboxes

public/pages/alarms/alarms.controller.js

@@ -10,6 +10,30 @@ function AlarmsController($rootScope, $scope, $route, $interval,
   $scope.title = COMMON.alarms.title;
   $scope.description = COMMON.description;
 
+  //columns for dynamic view
+  $scope.alarmColumns = [
+    {
+      name:'level',
+      label:'Level',
+      visible: true
+    },
+    {
+      name: 'action',
+      label:'Action',
+      visible: true
+    },
+    {
+      name: 'watcher',
+      label: 'Watcher',
+      visible: true
+    },
+    {
+      name: 'message',
+      label: 'Message',
+      visible: true
+    }
+  ];
+
   const notify = createNotifier({
     location: COMMON.alarms.title,
   });

public/pages/alarms/alarms.html

@@ -35,23 +35,25 @@ <h4>Expand time range</h4>
           Click the button below to open the time picker. For future reference you can open the time picker by clicking on the <a class="btn btn-xs navbtn" ng-click="kbnTopNav.toggle('filter')" aria-expanded="kbnTopNav.is('filter')" aria-label="time picker" data-test-subj="discoverNoResultsTimefilter"><i aria-hidden="true" class="fa fa-clock-o"></i> time picker</a> button in the top right corner of your screen.</p>
         </div>
       </div>
-
+      <form class="form-inline" novalidate>
+        <div class="checkbox" ng-repeat="col in alarmColumns">
+          <label>
+            <input type="checkbox" ng-model="col.visible">{{col.label}}
+          </label>
+        </div>
+      </form>
       <div class="panel panel-default" ng-show="alarms.length">
         <table class="table">
           <thead>
             <tr>
               <th>TIMESTAMP</th>
-              <th>LEVEL</th>
-              <th>ACTION</th>
-              <th>MESSAGE</th>
+              <th ng-repeat="col in alarmColumns" ng-if="col.visible">{{col.label}}</th>
               <th></th>
             </tr>
           <tbody ng-repeat="alarm in alarms | orderBy:'_source[\'@timestamp\']':true">
             <tr ng-class-odd="'alarm-row-odd'" ng-class-even="'alarm-row'">
               <td>{{ alarm._source['@timestamp'] | dateFormat }}</td>
-              <td>{{ alarm._source.level }}</td>
-              <td>{{ alarm._source.action }}</td>
-              <td>{{ alarm._source.message }}</td>
+              <td ng-repeat="col in alarmColumns" ng-if="col.visible">{{alarm._source[col.name] || alarm[col.name]}}</td>
               <td class="text-center edit-group">
                 <span ng-click="collapse=!collapse" ng-model="collapse" class="show-rule"><i class="fa fa-ellipsis-h"></i></span>
                 <span ng-click="deleteAlarm($index, alarm)" class="delete-rule"><i class="fa fa-trash"></i></span>

public/style/main.less

@@ -162,4 +162,7 @@
     max-width: 100%;
     width: 100%;
   }
+  .container .form-inline .checkbox label {
+    padding-right: 10px;
+  }
 }