Merge pull request #792 from wazuh/issue-655-2

Auto-resize tables depending on screen height
This commit is contained in:
Javier Castro 2018-08-17 08:46:37 +02:00 committed by GitHub
commit 2d7cb93ece
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 69 additions and 36 deletions

View File

@ -0,0 +1,17 @@
/*
* Wazuh app - Wazuh table directive helper
* 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.
*/
export default (windowHeight, sizes) => {
if(windowHeight >= 950) return sizes[0];
if(windowHeight >= 850 && windowHeight < 950) return sizes[1];
if(windowHeight >= 750 && windowHeight < 850) return sizes[2];
return 8;
}

View File

@ -14,10 +14,11 @@ import template from './wz-table.html';
import { uiModules } from 'ui/modules';
import DataFactory from '../../services/data-factory';
import KeyEquivalenece from '../../../util/csv-key-equivalence';
import CheckRows from './wz-table-rows'
const app = uiModules.get('app/wazuh', []);
app.directive('wazuhTable', function() {
app.directive('wzTable', function() {
return {
restrict: 'E',
scope: {
@ -25,10 +26,25 @@ app.directive('wazuhTable', function() {
keys: '=keys',
allowClick: '=allowClick',
implicitFilter: '=implicitFilter',
rowsPerPage: '=rowsPerPage',
rowSizes: '=rowSizes',
extraLimit: '=extraLimit'
},
controller: function($scope, apiReq, $timeout, shareAgent, $location, errorHandler, wzTableFilter) {
controller: function($scope, apiReq, $timeout, shareAgent, $location, errorHandler, wzTableFilter, $window) {
/**
* Calculate number of table rows depending on the screen height
*/
const rowSizes = $scope.rowSizes || [15,13,11]
let doit;
$window.onresize = () => {
clearTimeout(doit);
doit = setTimeout(() => {
$scope.rowsPerPage = CheckRows($window.innerHeight,rowSizes);
$scope.itemsPerPage = $scope.rowsPerPage;
init()
}, 150);
};
$scope.rowsPerPage = CheckRows($window.innerHeight,rowSizes);
$scope.keyEquivalence = KeyEquivalenece;
$scope.totalItems = 0;
@ -285,6 +301,7 @@ app.directive('wazuhTable', function() {
item;
$scope.$on('$destroy',() => {
$window.onresize = null;
realTime = null;
wzTableFilter.set([]);
});
@ -304,7 +321,6 @@ app.directive('wazuhTable', function() {
(item.details && item.details.order ? item.details.order : false) || '---' :
checkIfArray(item[key.value || key]) || '---';
};
},
template: template
}

View File

@ -101,13 +101,13 @@
</div>
<div layout="row" class="margin-top-30">
<wazuh-table
<wz-table
flex
path="'/agents'"
keys="['id',{value:'name',size:2},'ip','status','group','os.name','os.version','version']"
allow-click="true"
rows-per-page="17">
</wazuh-table>
row-sizes="[17,15,13]">
</wz-table>
</div>
<div layout="row" class="wz-margin-top-10">

View File

@ -76,13 +76,13 @@
</div>
<div layout="row" ng-if="agent && syscollector && !load" class="md-padding">
<wazuh-table
<wz-table
flex
path="'/syscollector/' + agent.id + '/packages'"
rows-per-page="8"
row-sizes="[8,6,4]"
extra-limit="true"
keys="[{value:'name',size:3},'architecture','version',{value:'vendor',size:2},{value:'description',size:3}]">
</wazuh-table>
</wz-table>
</div>
<!-- Temporary removed -->
@ -94,12 +94,12 @@
</button>
</div>
<div layout="row" ng-if="agent" class="md-padding">
<wazuh-table
<wz-table
flex
path="'/syscollector/' + agent.id + '/netiface'"
rows-per-page="8"
keys="['name','mac','state','type']">
</wazuh-table>
</wz-table>
</div> -->
<!-- Temporary removed -->
<!--<div layout="row" class="md-padding" ng-if="agent">

View File

@ -71,9 +71,9 @@
<!-- Groups table -->
<div layout="row" ng-if="!lookingGroup" class="md-padding">
<wazuh-table flex extra-limit="true" path="'/agents/groups'" keys="['name',{value:'count',size:1},{value:'mergedSum',size:3}]"
allow-click="true" rows-per-page="14">
</wazuh-table>
<wz-table flex extra-limit="true" path="'/agents/groups'" keys="['name',{value:'count',size:1},{value:'mergedSum',size:3}]"
allow-click="true" row-sizes="[14,12,10]">
</wz-table>
</div>
<!-- End groups table -->
@ -88,9 +88,9 @@
<!-- Group agents table -->
<div layout="row" ng-if="lookingGroup && groupsSelectedTab==='agents' && currentGroup" class="md-padding">
<wazuh-table flex path="'/agents/groups/' + currentGroup.name" keys="['id','name','ip','status','os.name','os.version','version']"
allow-click="true" rows-per-page="14">
</wazuh-table>
<wz-table flex path="'/agents/groups/' + currentGroup.name" keys="['id','name','ip','status','os.name','os.version','version']"
allow-click="true" row-sizes="[14,12,10]">
</wz-table>
</div>
<!-- End Group agents table -->
@ -105,9 +105,9 @@
<!-- Group files table -->
<div layout="row" ng-if="lookingGroup && groupsSelectedTab==='files' && !fileViewer && currentGroup" class="md-padding">
<wazuh-table extra-limit="true" flex path="'/agents/groups/' + currentGroup.name + '/files'" keys="[{value:'filename',size:2},{value:'hash',size:6}]"
allow-click="true" rows-per-page="10">
</wazuh-table>
<wz-table extra-limit="true" flex path="'/agents/groups/' + currentGroup.name + '/files'" keys="[{value:'filename',size:2},{value:'hash',size:6}]"
allow-click="true" row-sizes="[10,8,6]">
</wz-table>
</div>
<!-- End Group files table -->

View File

@ -58,13 +58,13 @@
<!-- Logs table section -->
<div layout="row" layout-padding>
<wazuh-table
<wz-table
flex
extra-limit="true"
path="'/manager/logs'"
keys="['timestamp',{value:'tag',size:2},'level',{value:'description',size:4,nosortable:true}]"
rows-per-page="15">
</wazuh-table>
row-sizes="[15,13,11]">
</wz-table>
</div>
<!-- End Logs table section -->

View File

@ -7,8 +7,8 @@
</button>
</div>
<div layout="row" class="md-padding">
<wazuh-table flex path="'/cluster/nodes'" keys="['name','version','ip','type']" allow-click="true">
</wazuh-table>
<wz-table flex path="'/cluster/nodes'" keys="['name','version','ip','type']" allow-click="true">
</wz-table>
</div>
</div>

View File

@ -164,13 +164,13 @@
<h1 class="md-headline wz-headline"><i class="fa fa-fw fa-link" aria-hidden="true"></i> Related decoders</h1>
</div>
<div layout="row" ng-if="currentDecoder" class="md-padding">
<wazuh-table
<wz-table
flex
path="'/decoders'"
implicit-filter="[{ name:'file',value: currentDecoder.file}]"
keys="['name',{value:'details.program_name',size:2,nosortable:true},{value:'details.order',size:2,nosortable:true},'file']"
allow-click="true">
</wazuh-table>
</wz-table>
</div>
<!-- End related decoders section -->

View File

@ -38,14 +38,14 @@
</md-chips>
<div layout="row">
<wazuh-table
<wz-table
implicit-filter="appliedFilters"
flex
path="'/decoders'"
keys="['name',{value:'details.program_name',size:2,nosortable:true},{value:'details.order',size:2,nosortable:true},'file']"
allow-click="true"
rows-per-page="14">
</wazuh-table>
row-sizes="[15,13,11]">
</wz-table>
</div>
<div layout="row" class="wz-margin-top-10">

View File

@ -205,13 +205,13 @@
<h1 class="md-headline wz-headline"><i class="fa fa-fw fa-link" aria-hidden="true"></i> Related rules</h1>
</div>
<div layout="row" ng-if="currentRule" class="md-padding">
<wazuh-table
<wz-table
flex
path="'/rules'"
implicit-filter="[{ name:'file',value: currentRule.file}]"
keys="['id',{value:'file',size:2},{value:'description',size:2},{value:'groups',nosortable:true,size:2},{value:'pci',nosortable:true,size:2},{value:'gdpr',nosortable:true},'level']"
allow-click="true">
</wazuh-table>
</wz-table>
</div>
<!-- End related rules section -->

View File

@ -51,14 +51,14 @@
</md-chips>
<div layout="row">
<wazuh-table
<wz-table
implicit-filter="appliedFilters"
flex
path="'/rules'"
keys="['id',{value:'file',size:2},{value:'description',size:2},{value:'groups',nosortable:true,size:2},{value:'pci',nosortable:true,size:2},{value:'gdpr',nosortable:true},'level']"
allow-click="true"
rows-per-page="14">
</wazuh-table>
row-sizes="[15,13,11]">
</wz-table>
</div>
<div layout="row" class="wz-margin-top-10">