From a4349b73ab7b081817e9aae10028fa682fc0a3f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5vard=20Langdal?= <havardlangdal@gmail.com>
Date: Fri, 13 Jul 2018 11:06:55 +0200
Subject: [PATCH] (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 | 24 ++++++++++++++++++++++++
 public/pages/alarms/alarms.html          | 16 +++++++++-------
 public/style/main.less                   |  3 +++
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/public/pages/alarms/alarms.controller.js b/public/pages/alarms/alarms.controller.js
index 12653e33..2a252ac9 100644
--- a/public/pages/alarms/alarms.controller.js
+++ b/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,
   });
diff --git a/public/pages/alarms/alarms.html b/public/pages/alarms/alarms.html
index 9eb889d5..079cb87a 100644
--- a/public/pages/alarms/alarms.html
+++ b/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>
diff --git a/public/style/main.less b/public/style/main.less
index 66fb73ee..e61b0882 100644
--- a/public/style/main.less
+++ b/public/style/main.less
@@ -162,4 +162,7 @@
     max-width: 100%;
     width: 100%;
   }
+  .container .form-inline .checkbox label {
+    padding-right: 10px;
+  }
 }