wazuh · jesusgn90 · Dec 10, 2018 · Dec 7, 2018 · Dec 7, 2018 · Dec 7, 2018
diff --git a/public/directives/index.js b/public/directives/index.js
@@ -14,6 +14,7 @@ import './wz-enter/wz-enter';
 import './wz-menu/wz-menu';
 import './wz-menu/wz-menu.less';
 import './wz-table';
+import './wz-data-table';
 import './wz-welcome-card/wz-welcome-card';
 import './wz-no-config/wz-no-config';
 import './wz-config-item/wz-config-item';

diff --git a/public/directives/wz-data-table/index.js b/public/directives/wz-data-table/index.js
@@ -0,0 +1,13 @@
+/*
+ * Wazuh app - Wazuh table directive
+ * Copyright (C) 2018 Wazuh, Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * Find more information about this on the LICENSE file.
+ */
+import '../wz-table/wz-table-filter-service';
+import './wz-data-table-directive';
diff --git a/public/directives/wz-data-table/wz-data-table-directive.js b/public/directives/wz-data-table/wz-data-table-directive.js
@@ -0,0 +1,130 @@
+/*
+ * Wazuh app - Wazuh table with data as input parameter directive
+ * Copyright (C) 2018 Wazuh, Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * Find more information about this on the LICENSE file.
+ */
+
+import template from './wz-data-table.html';
+import { uiModules } from 'ui/modules';
+import { KeyEquivalenece } from '../../../util/csv-key-equivalence';
+import { calcTableRows } from '../wz-table/lib/rows';
+import * as pagination from '../wz-table/lib/pagination';
+import { checkGap } from '../wz-table/lib/check-gap';
+
+const app = uiModules.get('app/wazuh', []);
+
+app.directive('wzDataTable', function () {
+  return {
+    restrict: 'E',
+    scope: {
+      rowSizes: '=rowSizes',
+      data: '='
+    },
+    controller(
+      $scope,
+      $filter,
+      errorHandler,
+      $window,
+    ) {
+      /**
+       * Init variables
+       */
+      $scope.keyEquivalence = KeyEquivalenece;
+      $scope.totalItems = 0;
+      $scope.wazuh_table_loading = true;
+      $scope.items = [];
+
+      /**
+       * Resizing. Calculate number of table rows depending on the screen height
+       */
+      const rowSizes = $scope.rowSizes || [15, 13, 11];
+      let doit;
+      let resizing = false;
+      $window.onresize = () => {
+        if (resizing) return;
+        resizing = true;
+        clearTimeout(doit);
+        doit = setTimeout(() => {
+          $scope.rowsPerPage = calcTableRows($window.innerHeight, rowSizes);
+          $scope.itemsPerPage = $scope.rowsPerPage;
+          init().then(() => resizing = false).catch(() => resizing = false);
+        }, 150);
+      };
+      $scope.rowsPerPage = calcTableRows($window.innerHeight, rowSizes);
+
+      const fetch = () => {
+        try {
+          $scope.filterTable();
+          $scope.keys = Object.keys(items[0]);
+          return;
+        } catch (error) {
+          errorHandler.handle(error, 'Error loading table');
+        }
+        return;
+      };
+
+      $scope.sortValue = '';
+      $scope.sortReverse = false;
+      $scope.searchTerm = '';
+      $scope.sort = key => {
+        if (key !== $scope.sortValue) {
+          $scope.sortReverse = false;
+        }
+        $scope.sortValue = key;
+        $scope.sortReverse = !$scope.sortReverse;
+        $scope.filterTable();
+      }
+
+      $scope.filterTable = () => {
+        items = $filter('orderBy')($filter('filter')($scope.data, $scope.searchTerm), $scope.sortValue, $scope.sortReverse);
+        $scope.totalItems = items.length;
+        $scope.items = items;
+        checkGap($scope, items);
+        $scope.searchTable();
+      }
+
+      const init = async () => {
+        $scope.error = false;
+        $scope.wazuh_table_loading = true;
+        await fetch();
+        $scope.wazuh_table_loading = false;
+      }
+
+      /**
+       * Pagination variables and functions
+       */
+      $scope.itemsPerPage = $scope.rowsPerPage || 10;
+      $scope.pagedItems = [];
+      $scope.currentPage = 0;
+      let items = [];
+      $scope.gap = 0;
+      $scope.searchTable = () => pagination.searchTable($scope, items);
+      $scope.groupToPages = () => pagination.groupToPages($scope);
+      $scope.range = (size, start, end) =>
+        pagination.range(size, start, end, $scope.gap);
+      $scope.prevPage = () => pagination.prevPage($scope);
+      $scope.nextPage = async currentPage =>
+        pagination.nextPage(currentPage, $scope, errorHandler, fetch);
+      $scope.setPage = function () {
+        $scope.currentPage = this.n;
+        $scope.nextPage(this.n);
+      };
+
+      /**
+       * Event listeners
+       */
+      $scope.$on('$destroy', () => {
+        $window.onresize = null;
+      });
+
+      init();
+    },
+    template
+  };
+});
diff --git a/public/directives/wz-data-table/wz-data-table.html b/public/directives/wz-data-table/wz-data-table.html
@@ -0,0 +1,85 @@
+<div layout="row" class="md-padding" ng-show="wazuh_table_loading">
+    <div class='uil-ring-css'>
+        <div></div>
+    </div>
+</div>
+<div ng-show="!error && !wazuh_table_loading" layout="row" class="wz-margin-top-17">
+    <input placeholder="Filter..." ng-model="searchTerm" ng-change="filterTable()" type="text" class="kuiLocalSearchInput ng-empty ng-pristine ng-scope ng-touched ng-valid">
+    <button class="kuiLocalSearchButton height-40"><span class="fa fa-search" aria-hidden="true"></span> </button>
+</div>
+<div ng-show="!error && !wazuh_table_loading && items.length">
+    <table class="table table-striped table-condensed wz-margin-top-17" style="table-layout: fixed !important" id="wz_table">
+        <thead class="wz-text-bold">
+            <th ng-repeat="key in keys" class="wz-text-left" ng-class="{ 'cursor-pointer' : !key.nosortable, 'col-lg-1' : !key.size, 'col-lg-{{key.size}}' : key.size }"
+                ng-click="!key.nosortable && sort(key)">
+                {{ keyEquivalence[key.value || key] || key.value || key }}
+                <i ng-if="!key.nosortable" class="fa wz-theader-sort-icon" ng-class="sortValue === (key.value || key) ? (!sortReverse ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'"
+                    aria-hidden="true"></i>
+            </th>
+        </thead>
+        <tbody>
+            <tr ng-class="allowClick ? 'cursor-pointer' : ''" class="wz-word-wrap" ng-repeat="item in pagedItems[currentPage] | filter:{item:'!'}"
+                ng-click="clickAction(item)">
+                <td ng-repeat="key in keys">
+                    {{item[key] | limitTo: 25}}
+                </td>
+            </tr>
+        </tbody>
+        <tfoot>
+            <td colspan="{{keys.length}}">
+                <span ng-show="!wazuh_table_loading" class="color-grey">{{ totalItems }} items</span>
+                <div ng-show="items.length >= itemsPerPage" class="pagination pull-right" style="margin:0 !important">
+                    <ul layout="row">
+                        <li ng-show="currentPage" class="md-padding">
+                            <a href ng-click="prevPage()">« Prev</a>
+                        </li>
+
+                        <li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) " ng-class="{'wz-text-active': n == currentPage}"
+                            ng-click="setPage()" class="md-padding">
+                            <a href ng-bind="n + 1">1</a>
+                        </li>
+
+                        <li ng-show="currentPage < pagedItems.length - 1" class="md-padding">
+                            <a href ng-click="nextPage()">Next »</a>
+                        </li>
+                    </ul>
+                </div>
+            </td>
+        </tfoot>
+    </table>
+</div>
+
+<div layout="row" ng-if="!error && !wazuh_table_loading && !totalItems">
+    <div flex class="euiCallOut euiCallOut--warning wz-margin-top-17">
+        <div class="euiCallOutHeader">
+            <svg class="euiIcon euiIcon--medium euiCallOutHeader__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+                <defs>
+                    <path id="help-a" d="M13.6 12.186l-1.357-1.358c-.025-.025-.058-.034-.084-.056.53-.794.84-1.746.84-2.773a4.977 4.977 0 0 0-.84-2.772c.026-.02.059-.03.084-.056L13.6 3.813a6.96 6.96 0 0 1 0 8.373zM8 15A6.956 6.956 0 0 1 3.814 13.6l1.358-1.358c.025-.025.034-.057.055-.084C6.02 12.688 6.974 13 8 13a4.978 4.978 0 0 0 2.773-.84c.02.026.03.058.056.083l1.357 1.358A6.956 6.956 0 0 1 8 15zm-5.601-2.813a6.963 6.963 0 0 1 0-8.373l1.359 1.358c.024.025.057.035.084.056A4.97 4.97 0 0 0 3 8c0 1.027.31 1.98.842 2.773-.027.022-.06.031-.084.056l-1.36 1.358zm5.6-.187A4 4 0 1 1 8 4a4 4 0 0 1 0 8zM8 1c1.573 0 3.019.525 4.187 1.4l-1.357 1.358c-.025.025-.035.057-.056.084A4.979 4.979 0 0 0 8 3a4.979 4.979 0 0 0-2.773.842c-.021-.027-.03-.059-.055-.084L3.814 2.4A6.957 6.957 0 0 1 8 1zm0-1a8.001 8.001 0 1 0 .003 16.002A8.001 8.001 0 0 0 8 0z"></path>
+                </defs>
+                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#help-a" fill-rule="evenodd"></use>
+            </svg>
+            <span class="euiCallOutHeader__title">No results match your search criteria</span>
+        </div>
+    </div>
+</div>
+
+<div layout="row" ng-if="error" class="wz-margin-bottom-45">
+    <div flex class="euiCallOut euiCallOut--warning wz-margin-top-17">
+        <div class="euiCallOutHeader">
+            <svg class="euiIcon euiIcon--medium euiCallOutHeader__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+                <defs>
+                    <path id="help-a" d="M13.6 12.186l-1.357-1.358c-.025-.025-.058-.034-.084-.056.53-.794.84-1.746.84-2.773a4.977 4.977 0 0 0-.84-2.772c.026-.02.059-.03.084-.056L13.6 3.813a6.96 6.96 0 0 1 0 8.373zM8 15A6.956 6.956 0 0 1 3.814 13.6l1.358-1.358c.025-.025.034-.057.055-.084C6.02 12.688 6.974 13 8 13a4.978 4.978 0 0 0 2.773-.84c.02.026.03.058.056.083l1.357 1.358A6.956 6.956 0 0 1 8 15zm-5.601-2.813a6.963 6.963 0 0 1 0-8.373l1.359 1.358c.024.025.057.035.084.056A4.97 4.97 0 0 0 3 8c0 1.027.31 1.98.842 2.773-.027.022-.06.031-.084.056l-1.36 1.358zm5.6-.187A4 4 0 1 1 8 4a4 4 0 0 1 0 8zM8 1c1.573 0 3.019.525 4.187 1.4l-1.357 1.358c-.025.025-.035.057-.056.084A4.979 4.979 0 0 0 8 3a4.979 4.979 0 0 0-2.773.842c-.021-.027-.03-.059-.055-.084L3.814 2.4A6.957 6.957 0 0 1 8 1zm0-1a8.001 8.001 0 1 0 .003 16.002A8.001 8.001 0 0 0 8 0z"></path>
+                </defs>
+                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#help-a" fill-rule="evenodd"></use>
+            </svg>
+            <span class="euiCallOutHeader__title">{{error}}</span>
+        </div>
+    </div>
+</div>
+
+
+<div layout="row" ng-if="!wazuh_table_loading && !totalItems" class="wz-margin-top-10">
+    <span class="color-grey">0 items</span>
+</div>