Merge pull request #26 from titilambert/tcohen2

Clean table HTML generated structure

app/components/live/get_services.js

@@ -37,7 +37,7 @@ angular.module('adagios.live')
 
                 return $http.get('/rest/status/json/' + apiName + '/?fields=' + columns + filtersQuery)
                     .error(function (data, status, headers, config) {
-                        console.error('getServices : GET Request failed');
+                        throw new Error('getServices : GET Request failed');
                     });
             };
         }]);

app/components/table/cell_duration/cell_duration.html

@@ -1 +1 @@
-<div class="data-table__duration">{{entry.last_state_change | timeElapsed}}</div>
+<td class="data-table__duration">{{entry.last_state_change | timeElapsed}}</td>

app/components/table/cell_host/cell_host.html

@@ -1,3 +1,3 @@
-<span class="data-table__host {{state}}" ng-controller="CellHostCtrl">
+<td class="data-table__{{ cell }} {{state}}" ng-controller="CellHostCtrl">
   <a class="data-table__data" href="#">{{entry.host_name}}</a>
-</span>
+</td>

app/components/table/cell_host/cell_host.js

@@ -14,4 +14,5 @@ angular.module('adagios.table.cell_host', ['adagios.table'])
 
     .run(['tableConfig', function (tableConfig) {
         tableConfig.cellToFieldsMap.host = [ 'host_state', 'host_name' ];
+
     }]);

app/components/table/cell_host_address/cell_host_address.html

@@ -1 +1 @@
-<div ng-controller="CellHostAddressCtrl">{{entry.address}}</div>
+<td ng-controller="CellHostAddressCtrl">{{entry.address}}</td>

app/components/table/cell_host_status/cell_host_status.html

@@ -1 +1 @@
-<div class="{{alert_level}}" ng-controller="CellHostStatusCtrl">{{entry.host_status}}</div>
+<td class="{{alert_level}}" ng-controller="CellHostStatusCtrl">{{entry.host_status}}</td>

app/components/table/cell_hosts_host/cell_hosts_host.html

@@ -1 +1 @@
-<div ng-controller="CellHostsHostCtrl">{{entry.name}}</div>
+<td ng-controller="CellHostsHostCtrl">{{entry.name}}</td>

app/components/table/cell_last_check/cell_last_check.html

@@ -1 +1 @@
-<div class="data-table__lastcheck">{{entry.last_check * 1000 | date: medium}}</div>
+<td class="data-table__lastcheck">{{entry.last_check * 1000 | date: medium}}</td>

app/components/table/cell_service_check/cell_service_check.html

@@ -1,6 +1,6 @@
-<div class="data-table__service {{state}}" ng-controller="CellServiceCheckCtrl">
+<td class="data-table__service {{state}}" ng-controller="CellServiceCheckCtrl">
   <dl class="data-table__data">
     <dt class="data-table__service__name">{{entry.description}}</dt>
     <dd class="data-table__service__summary">{{entry.plugin_output}}</dd>
   </dl>
-</div>
+</td>

app/components/table/table.html

@@ -12,8 +12,7 @@
   <tbody class="" ng-repeat="entry in entries">
     <tr>
       <td><input type="checkbox"></td>
-      <td class="data-table__{{ cell }}" adg-cell type="{{cell}}" ng-repeat="cell in cellsName">
-      </td>
+      <td adg-cell cell-name="{{cell}}" ng-repeat="cell in cellsName"></td>
     </tr>
   </tbody>
 

app/components/table/table.js

@@ -42,41 +42,55 @@ angular.module('adagios.table', ['adagios.live',
             });
     }])
 
-    .directive('adgTable', ['tableConfig', function (tableConfig) {
+    .directive('adgTable', ['$http', '$compile', 'tableConfig',  function ($http, $compile, tableConfig) {
         return {
             restrict: 'E',
-            link: function (scope, element, attrs) {
-                scope.generateTable = function () {
+            compile: function () {
+                return function (scope, element, attrs) {
 
-                    if (!!attrs.cellsText && !!attrs.cellsName && !!attrs.apiName) {
-                        tableConfig.cells.text = attrs.cellsText.split(',');
-                        tableConfig.cells.name = attrs.cellsName.split(',');
-                        tableConfig.apiName = attrs.apiName;
-
-                        if (!!attrs.filters) {
-                            tableConfig.filters = attrs.filters;
-                        }
-
-                        return 'components/table/table.html';
+                    if (!attrs.cellsText || !attrs.cellsName || !attrs.apiName) {
+                        throw new Error('<adg-table> "cells-text", "cells-name" and "api-name" attributes must be defined');
                     }
-                    console.error('<adg-table> "cells" and "api-name" attributes must be defined');
+
+                    tableConfig.cells.text = attrs.cellsText.split(',');
+                    tableConfig.cells.name = attrs.cellsName.split(',');
+                    tableConfig.apiName = attrs.apiName;
+
+                    if (!!attrs.filters) {
+                        tableConfig.filters = attrs.filters;
+                    }
+
+                    var template = 'components/table/table.html';
+
+                    $http.get(template, { cache: true })
+                        .success(function (data) {
+                            var elem = $compile(data)(scope);
+                            element.append(elem);
+                        });
                 };
-            },
-            template: '<div ng-include="generateTable()"></div>'
+            }
         };
     }])
 
-    .directive('adgCell', function () {
+    .directive('adgCell', function ($http, $compile, $templateCache) {
+
         return {
             restrict: 'A',
-            link: function (scope, element, attrs) {
-                scope.getTemplateUrl = function () {
-                    if (!!attrs.type) {
-                        return 'components/table/cell_' + attrs.type + '/cell_' + attrs.type + '.html';
+            compile: function () {
+                return function (scope, element, attrs) {
+                    if (!attrs.cellName) {
+                        throw new Error('<adg-cell> "cell-name" attribute must be defined');
                     }
-                    console.error('<adg-cell> "type" attribute is undefined');
+
+                    var template = 'components/table/cell_' + attrs.cellName + '/cell_' + attrs.cellName + '.html';
+
+                    $http.get(template, { cache: true })
+                        .success(function (data) {
+                            var td = $compile(data)(scope);
+                            // HACK : replaceWith is a necessary hack because <tr> only accepts <td> as a child
+                            element.replaceWith(td);
+                        });
                 };
-            },
-            template: '<div ng-include="getTemplateUrl()"></div>'
+            }
         };
     });

app/dashboard/dashboard.html

@@ -139,7 +139,7 @@
         <adg-table cells-text="{{dashboardCellsText}}"
                    cells-name="{{dashboardCellsName}}" 
                    api-name="{{dashboardApiName}}" 
-                   filters="{{dashboardFilters}}">
+                   filters="{{dashboardFilters}}"></adg-table>
 
       </div>
     </div>

app/hosts/hosts.html

@@ -13,7 +13,7 @@
     <adg-table cells-name="{{hostsCellsName}}"
                cells-text="{{hostsCellsText}}"
                api-name="{{hostsApiName}}" 
-               filters="{{hostsFilters}}">
+               filters="{{hostsFilters}}"></adg-table>
 
   </section>
 </article>

app/services/services.html

@@ -13,7 +13,7 @@
     <adg-table cells-name="{{servicesCellsName}}"
                cells-text="{{servicesCellsText}}" 
                api-name="{{servicesApiName}}" 
-               filters="{{servicesFilters}}">
+               filters="{{servicesFilters}}"></adg-table>
 
   </section>
 </article>