Merge pull request #33 from titilambert/noRepeat

Yet another noRepeat pull request

app/components/config/config.json

@@ -1,7 +1,7 @@
 {
     "dashboardConfig": {
 		"title": "Unhandled service problems",
-		"refreshInterval": "0",
+		"refreshInterval": 0,
 		"template": "dashboard",
 		"components" : [
 			{
@@ -81,7 +81,7 @@
     },
     "hostsConfig": {
 		"title": "Hosts",
-		"refreshInterval": "0",
+		"refreshInterval": 0,
 		"template": "singleTable",
 		"components": [
 			{
@@ -114,7 +114,7 @@
 	},
     "servicesConfig": {
 		"title": "Services",
-		"refreshInterval": "0",
+		"refreshInterval": 0,
 		"template": "singleTable",
         "components": [{
 			"type": "table",

app/components/table/actionbar/actionbar.html

@@ -1,4 +1,4 @@
-<menu class="filters">
+<menu class="filters" ng-controller="TableActionbarCtrl">
   <ul class="filters__list clearfix">
     <li class="filters__item filters__item--problems">
       <button class="filters__button"
@@ -7,23 +7,15 @@
               data-target="#filtersProblems"
               aria-expanded="false"
               aria-controls="filtersProblems">
-        <span>All</span>
+        <span>{{ actionbarFilters.activeFilter.text }}</span>
         <i class="ico-down-dir"></i>
       </button>
       
       <div class="filters__panel collapse" id="filtersProblems">
         <ul class="filters__sublist">
-          <li class="filters__subitem">
+          <li class="filters__subitem" ng-repeat="actionbarFilter in actionbarFilters.possibleFilters" ng-click="activateFilter($index)">
-            <a class="filters__link state--current" href="#">All</a>
+            <a class="filters__link state--current" ng-if="actionbarFilter === actionbarFilters.activeFilter">{{ actionbarFilter.text }}</a>
-          </li>
+            <a class="filters__link" ng-if="actionbarFilter !== actionbarFilters.activeFilter">{{ actionbarFilter.text }}</a>
-          <li class="filters__subitem">
-            <a class="filters__link" href="#">All OK</a>
-          </li>
-          <li class="filters__subitem">
-            <a class="filters__link" href="#">All Acknowledged</a>
-          </li>
-          <li class="filters__subitem">
-            <a class="filters__link" href="#">All in Downtime</a>
           </li>
         </ul>
       </div>
@@ -73,6 +65,9 @@
         </ul>
       </div>
     </li>
+    <li class="filters__item clearfix">
+      <input id=filter__search" type="search" ng-model="actionbarFilters.searchFilter"/>{{ actionbarFilters.searchFilter }}
+    </li>
     <li class="filters__item filters__item--settings">
       <button class="filters__button"
               type="button"

app/components/table/actionbar/actionbar.js

@@ -2,10 +2,72 @@
 
 angular.module('adagios.table.actionbar', [])
 
-    .controller('TableActionbarCtrl', [function () {
+    .factory('actionbarFilters', function () {
-        angular.noop();
+        var actionbarFilters = {
+            activeFilter: {},
+            possibleFilters: [
+                {
+                    text: "All",
+                    name: "all"
+                },
+                {
+                    text: "All OK",
+                    name: "all_ok"
+                },
+                {
+                    text: "All Acknowledged",
+                    name: "all_acknowledged"
+                },
+                {
+                    text: "All in Downtime",
+                    name: "all_downtime"
+                }
+            ]
+        };
+        return actionbarFilters;
+    })
+
+    .controller('TableActionbarCtrl', ['$scope', 'actionbarFilters', function ($scope, actionbarFilters) {
+        $scope.actionbarFilters = actionbarFilters;
+        $scope.actionbarFilters.activeFilter = $scope.actionbarFilters.possibleFilters[0];
+
+        $scope.activateFilter = function (item) {
+            $scope.actionbarFilters.activeFilter = $scope.actionbarFilters.possibleFilters[item];
+        };
     }])
 
+    .filter('actionbarSelectFilter', function () {
+        return function (items, activeFilter) {
+            var out = [],
+                i;
+
+            if (!!activeFilter) {
+                return items;
+            }
+
+            if (!!items) {
+                if (activeFilter.name === "all") {
+                    for (i = 0; i < items.length; i += 1) {
+                        out.push(items[i]);
+                    }
+                } else if (activeFilter.name === "all_ok") {
+                    for (i = 0; i < items.length; i += 1) {
+                        if (items[i].state === 0) {
+                            out.push(items[i]);
+                        }
+                    }
+                } else if (activeFilter.name === "all_acknowledged") {
+                    // TODO Implement this
+                    console.log("This filter is not yet implemented");
+                } else if (activeFilter.name === "all_downtime") {
+                    // TODO Implement this
+                    console.log("This filter is not yet implemented");
+                }
+            }
+            return out;
+        };
+    })
+
     .directive('adgTableActionbar', function () {
         return {
             restrict: 'E',

app/components/table/cell_host/cell_host.html

@@ -1,3 +1,3 @@
-<td class="data-table__host {{state}}" ng-controller="CellHostCtrl">
+<td class="data-table__host {{entry[cell_name + '_additionnalClass']}} {{state}}" ng-controller="CellHostCtrl">
   <a class="data-table__data" href="#">{{entry.host_name}}</a>
 </td>

app/components/table/cell_host/cell_host.js

@@ -3,6 +3,8 @@
 angular.module('adagios.table.cell_host', ['adagios.table'])
 
     .controller('CellHostCtrl', ['$scope', function ($scope) {
+        $scope.cell_name = 'host';
+
         if ($scope.entry.host_state === 0) {
             $scope.state = 'state--ok';
         } else if ($scope.entry.host_state === 1) {

app/components/table/table.html

@@ -9,7 +9,7 @@
       </tr>
   </thead>
 
-  <tbody class="{{entry.child_class}}" ng-repeat="entry in entries">
+  <tbody class="{{entry.child_class}}" ng-repeat="entry in entries | actionbarSelectFilter:actionbarFilters.activeFilter | filter:actionbarFilters.searchFilter | noRepeat:this | wrappableStyle:this">
     <tr>
       <td><input type="checkbox"></td>
       <td adg-cell cell-name="{{cell}}" ng-repeat="cell in cellsName"></td>

app/components/table/table.js

@@ -14,8 +14,8 @@ angular.module('adagios.table', ['adagios.live',
 
     .value('tableConfig', {'cellToFieldsMap': {}, 'cellWrappableField': {}, 'index': 0})
 
-    .controller('TableCtrl', ['$scope', '$interval', 'getServices', 'tableConfig', 'processColumnRepeat',
+    .controller('TableCtrl', ['$scope', '$interval', 'getServices', 'tableConfig', 'actionbarFilters',
-        function ($scope, $interval, getServices, tableConfig, processColumnRepeat) {
+        function ($scope, $interval, getServices, tableConfig, actionbarFilters) {
             var requestFields = [],
                 filters = JSON.parse(tableConfig[tableConfig.index].filters),
                 conf = tableConfig[tableConfig.index],
@@ -39,13 +39,6 @@ angular.module('adagios.table', ['adagios.live',
             getData = function (requestFields, filters, apiName) {
                 getServices(requestFields, filters, apiName)
                     .success(function (data) {
-                        var fieldToWrap = tableConfig.cellWrappableField[conf.noRepeatCell],
-                            cellFields = tableConfig.cellToFieldsMap[conf.noRepeatCell];
-
-                        if (conf.noRepeatCell !== "") {
-                            data = processColumnRepeat(data, fieldToWrap, cellFields, conf.isWrappable);
-                        }
-
                         $scope.entries = data;
                     });
             };
@@ -58,7 +51,10 @@ angular.module('adagios.table', ['adagios.live',
                 }, tableConfig.refreshInterval);
             }
 
-            // Used if there's more than one table in a view
+            $scope.actionbarFilters = actionbarFilters;
+
+            // Index needed to support multiple tables per view
+            $scope.tableIndex = tableConfig.index;
             tableConfig.index += 1;
         }])
 
@@ -108,6 +104,7 @@ angular.module('adagios.table', ['adagios.live',
     }])
 
     .directive('adgCell', ['$http', '$compile', function ($http, $compile) {
+
         return {
             restrict: 'A',
             compile: function () {
@@ -139,54 +136,68 @@ angular.module('adagios.table', ['adagios.live',
         this.NoRepeatCell = config.noRepeatCell;
     })
 
-    .service('processColumnRepeat', function () {
+    .filter('wrappableStyle', ['tableConfig', function (tableConfig) {
-
+        return function (input, scope) {
-        function clearFields(entry, fields) {
-            angular.forEach(fields, function (value) {
-                entry[value] = '';
-            });
-        }
-
-        // Erase subsequently repeated data of a given cell only keeping the first occurrence
-        // fieldToProcess is the field to watch for subsequent repetition
-        // fields are all the fields of a given cell whose data will be erased
-        return function (data, fieldToProcess, fields, isWrappable) {
             var last = '',
-                actual = '',
                 entry = {},
                 parent_found = false,
                 class_name = ['', ''],
-                i;
+                i,
+                fieldToWrap = tableConfig.cellWrappableField[tableConfig[scope.tableIndex].noRepeatCell];
 
-            if (isWrappable === "true") {
+            if (fieldToWrap === undefined) {
+                return input;
+            }
+
+            if (tableConfig[scope.tableIndex].isWrappable) {
                 class_name = ['state--hasChild', 'state--isChild'];
             }
 
-            for (i = 0; i < data.length; i += 1) {
+            for (i = 0; i < input.length; i += 1) {
-                entry = data[i];
+                entry = input[i];
-                actual = entry[fieldToProcess];
 
-                if (entry[fieldToProcess] === last) {
+                if (entry[fieldToWrap] === last) {
-
+                    if (!input[i - 1].has_child && !parent_found) {
-                    if (!data[i - 1].has_child && !parent_found) {
+                        input[i - 1].has_child = 1;
-                        data[i - 1].has_child = 1;
+                        input[i - 1].child_class = class_name[0];
-                        data[i - 1].child_class = class_name[0];
                         entry.child_class = class_name[1];
+
                         parent_found = true;
                     } else {
                         entry.is_child = 1;
                         entry.child_class = class_name[1];
                     }
-
-                    clearFields(entry, fields);
-
                 } else {
                     parent_found = false;
                 }
 
-                last = actual;
+                last = entry[fieldToWrap];
             }
 
-            return data;
+            return input;
         };
+    }])
+
+    .filter('noRepeat', ['tableConfig', function (tableConfig) {
+        return function (items, scope) {
+            var newItems = [],
+                previous,
+                fieldToCompare = tableConfig.cellWrappableField[tableConfig[scope.tableIndex].noRepeatCell],
+                new_attr = tableConfig[scope.tableIndex].noRepeatCell + "_additionnalClass";
+
+            angular.forEach(items, function (item) {
+
+                if (previous === item[fieldToCompare]) {
+                    item[new_attr] = 'state--rmChild';
+                } else {
+                    previous = item[fieldToCompare].slice(0);
+                    if (!!item[new_attr]) {
+                        item[new_attr] = item[new_attr].replace("state--rmChild", "");
+                    }
+                }
+                newItems.push(item);
             });
+
+            return newItems;
+        };
+    }]);