valitydev/wazuh-kibana-app
14
0
Fork 0
mirror of https://github.com/valitydev/wazuh-kibana-app.git synced 2024-11-06 01:45:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fixes after overall review (#1362)

Browse Source
This commit is contained in:
Juanka Rodríguez 2019-04-15 17:40:30 +02:00 committed by Jesús Ángel
parent ec28b8b280
commit 7bb0b46cf8
24 changed files with 14971 additions and 1268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintignore
View File

@ -1,4 +1,4 @@
node_modules/ node_modules/
public/utils/codemirror/ public/utils/codemirror/
public/kibana-integrations/ public/kibana-integrations/
public/utils/table-col-resizable.js public/utils/jquery-ui.js

130
package.json
View File

@ -1,67 +1,67 @@
{ {
"name": "wazuh", "name": "wazuh",
"version": "3.9.0", "version": "3.9.0",
"revision": "0429", "revision": "0429",
"code": "0429-0", "code": "0429-0",
"kibana": { "kibana": {
"version": "6.7.1" "version": "6.7.1"
}, },
"description": "Wazuh app", "description": "Wazuh app",
"main": "index.js", "main": "index.js",
"keywords": [ "keywords": [
"kibana", "kibana",
"wazuh", "wazuh",
"ossec" "ossec"
], ],
"node_build": "8.14.0", "node_build": "8.14.0",
"author": "Wazuh, Inc", "author": "Wazuh, Inc",
"license": "GPL-2.0", "license": "GPL-2.0",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/wazuh/wazuh-kibana-app.git" "url": "https://github.com/wazuh/wazuh-kibana-app.git"
}, },
"bugs": { "bugs": {
"url": "https://github.com/wazuh/wazuh-kibana-app/issues" "url": "https://github.com/wazuh/wazuh-kibana-app/issues"
}, },
"homepage": "https://www.wazuh.com/", "homepage": "https://www.wazuh.com/",
"scripts": { "scripts": {
"pretty": "prettier --single-quote \"{,!(node_modules)/**/}*.js\" --write", "pretty": "prettier --single-quote \"{,!(node_modules)/**/}*.js\" --write",
"tslint": "tslint -c .tslint.yml server/**/*.ts server/**/*.tsx public/**/*.ts public/**/*.tsx", "tslint": "tslint -c .tslint.yml server/**/*.ts server/**/*.tsx public/**/*.ts public/**/*.tsx",
"lint": "eslint . --ext .js -c .eslintrc.json --color", "lint": "eslint . --ext .js -c .eslintrc.json --color",
"prebuild": "tsc; find . -name \"*.ts*\" -type f -not -path \"./node_modules/*\" -delete", "prebuild": "tsc; find . -name \"*.ts*\" -type f -not -path \"./node_modules/*\" -delete",
"build": "plugin-helpers build", "build": "plugin-helpers build",
"test": "_mocha test/**/*" "test": "_mocha test/**/*"
}, },
"dependencies": { "dependencies": {
"angular-animate": "1.6.5", "angular-animate": "1.6.5",
"angular-chart.js": "^1.1.1", "angular-chart.js": "^1.1.1",
"angular-cookies": "1.6.5", "angular-cookies": "1.6.5",
"angular-material": "1.1.10", "angular-material": "1.1.10",
"dom-to-image": "^2.6.0", "dom-to-image": "^2.6.0",
"install": "^0.10.1", "install": "^0.10.1",
"js2xmlparser": "^3.0.0", "js2xmlparser": "^3.0.0",
"json2csv": "^4.1.2", "json2csv": "^4.1.2",
"needle": "^2.0.1", "needle": "^2.0.1",
"node-cron": "^1.1.2", "node-cron": "^1.1.2",
"pdfmake": "^0.1.37", "pdfmake": "^0.1.37",
"pug-loader": "^2.4.0", "pug-loader": "^2.4.0",
"querystring-browser": "1.0.4", "querystring-browser": "1.0.4",
"simple-tail": "^1.1.0", "simple-tail": "^1.1.0",
"timsort": "^0.3.0", "timsort": "^0.3.0",
"winston": "3.0.0" "winston": "3.0.0"
}, },
"devDependencies": { "devDependencies": {
"@elastic/plugin-helpers": "^7.1.8", "@elastic/plugin-helpers": "^7.1.8",
"babel-eslint": "^8.2.6", "babel-eslint": "^8.2.6",
"chai": "^4.1.2", "chai": "^4.1.2",
"eslint": "^5.10.0", "eslint": "^5.10.0",
"eslint-plugin-async-await": "^0.0.0", "eslint-plugin-async-await": "^0.0.0",
"eslint-plugin-import": "^2.14.0", "eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^7.0.1", "eslint-plugin-node": "^7.0.1",
"mocha": "^5.2.0", "mocha": "^5.2.0",
"prettier": "^1.14.2", "prettier": "^1.14.2",
"tslint": "^5.11.0", "tslint": "^5.11.0",
"typescript": "^3.0.1", "typescript": "^3.0.1",
"typescript-eslint-parser": "^18.0.0" "typescript-eslint-parser": "^18.0.0"
} }
} }

2
public/app.js
View File

@ -193,7 +193,7 @@ import './utils/fontawesome/css/font-awesome.min.css';
// Dev tools // Dev tools
import './utils/codemirror'; import './utils/codemirror';
import './utils/table-col-resizable'; import './utils/jquery-ui';
// Material // Material
import 'angular-material/angular-material.css'; import 'angular-material/angular-material.css';

21
public/controllers/management/decoders.js
View File

@ -158,6 +158,13 @@ export class DecodersController {
return this.$sce.trustAsHtml(coloredString); return this.$sce.trustAsHtml(coloredString);
} }
switchLocalDecoders() {
this.removeFilter('path');
if (!this.showingLocalDecoders) {
this.appliedFilters.push({ name: 'path', value: 'etc/decoders' });
}
}
/** /**
* This perfoms a search by a given term * This perfoms a search by a given term
* @param {String} term * @param {String} term
@ -165,12 +172,14 @@ export class DecodersController {
search(term) { search(term) {
if (term && term.startsWith('path:') && term.split('path:')[1].trim()) { if (term && term.startsWith('path:') && term.split('path:')[1].trim()) {
this.custom_search = ''; this.custom_search = '';
const filter = { name: 'path', value: term.split('path:')[1].trim() }; if (!this.showingLocalDecoders) {
this.appliedFilters = this.appliedFilters.filter( const filter = { name: 'path', value: term.split('path:')[1].trim() };
item => item.name !== 'path' this.appliedFilters = this.appliedFilters.filter(
); item => item.name !== 'path'
this.appliedFilters.push(filter); );
this.$scope.$broadcast('wazuhFilter', { filter }); this.appliedFilters.push(filter);
this.$scope.$broadcast('wazuhFilter', { filter });
}
} else if ( } else if (
term && term &&
term.startsWith('file:') && term.startsWith('file:') &&

48
public/controllers/management/rules.js
View File

@ -35,6 +35,7 @@ export function RulesController(
* This performs a search with a given term * This performs a search with a given term
*/ */
$scope.search = term => { $scope.search = term => {
let clearInput = true;
if (term && term.startsWith('group:') && term.split('group:')[1].trim()) { if (term && term.startsWith('group:') && term.split('group:')[1].trim()) {
$scope.custom_search = ''; $scope.custom_search = '';
const filter = { name: 'group', value: term.split('group:')[1].trim() }; const filter = { name: 'group', value: term.split('group:')[1].trim() };
@ -97,15 +98,23 @@ export function RulesController(
term.split('path:')[1].trim() term.split('path:')[1].trim()
) { ) {
$scope.custom_search = ''; $scope.custom_search = '';
const filter = { name: 'path', value: term.split('path:')[1].trim() }; if (!$scope.mctrl.showingLocalRules) {
$scope.appliedFilters = $scope.appliedFilters.filter( const filter = { name: 'path', value: term.split('path:')[1].trim() };
item => item.name !== 'path' $scope.appliedFilters = $scope.appliedFilters.filter(
); item => item.name !== 'path'
$scope.appliedFilters.push(filter); );
$scope.$broadcast('wazuhFilter', { filter }); $scope.appliedFilters.push(filter);
$scope.$broadcast('wazuhFilter', { filter });
}
} else { } else {
clearInput = false;
$scope.$broadcast('wazuhSearch', { term, removeFilters: 0 }); $scope.$broadcast('wazuhSearch', { term, removeFilters: 0 });
} }
if (clearInput) {
const searchBar = $('#search-input-rules');
searchBar.val('');
}
$scope.$applyAsync();
}; };
/** /**
@ -126,6 +135,13 @@ export function RulesController(
return filtered.length ? filtered[0].value : ''; return filtered.length ? filtered[0].value : '';
}; };
$scope.switchLocalRules = () => {
$scope.removeFilter('path');
if (!$scope.mctrl.showingLocalRules) {
$scope.appliedFilters.push({ name: 'path', value: 'etc/rules' });
}
};
/** /**
* This a the filter given its name * This a the filter given its name
* @param {String} filterName * @param {String} filterName
@ -253,16 +269,19 @@ export function RulesController(
); );
const response = const response =
(((ruleReloaded || {}).data || {}).data || {}).items || []; (((ruleReloaded || {}).data || {}).data || {}).items || [];
if (!response.length) { if (response.length) {
$scope.currentRule = null; const result = response.filter(rule => rule.details.overwrite);
$scope.closeDetailView(true); $scope.currentRule = result.length ? result[0] : response[0];
} else { } else {
$scope.currentRule = response[0]; $scope.currentRule = false;
$scope.closeDetailView(true);
} }
$scope.fetchedXML = false;
} catch (error) { } catch (error) {
errorHandler.handle(error.message || error); errorHandler.handle(error.message || error);
} }
} }
$scope.editingFile = false; $scope.editingFile = false;
$scope.$applyAsync(); $scope.$applyAsync();
appState.setNavigation({ status: true }); appState.setNavigation({ status: true });
@ -279,6 +298,7 @@ export function RulesController(
* This function changes to the rules list view * This function changes to the rules list view
*/ */
$scope.closeDetailView = clear => { $scope.closeDetailView = clear => {
$scope.mctrl.showingLocalRules = !$scope.mctrl.showingLocalRules;
if (clear) if (clear)
$scope.appliedFilters = $scope.appliedFilters.slice( $scope.appliedFilters = $scope.appliedFilters.slice(
0, 0,
@ -288,6 +308,8 @@ export function RulesController(
$scope.currentRule = false; $scope.currentRule = false;
$scope.closeEditingFile(); $scope.closeEditingFile();
$scope.$emit('removeCurrentRule'); $scope.$emit('removeCurrentRule');
$scope.switchLocalRules();
$scope.mctrl.showingLocalRules = !$scope.mctrl.showingLocalRules;
$scope.$applyAsync(); $scope.$applyAsync();
}; };
@ -297,7 +319,11 @@ export function RulesController(
apiReq apiReq
.request('get', `/rules/${incomingRule}`, {}) .request('get', `/rules/${incomingRule}`, {})
.then(data => { .then(data => {
$scope.currentRule = data.data.data.items[0]; const response = (((data || {}).data || {}).data || {}).items || [];
if (response.length) {
const result = response.filter(rule => rule.details.overwrite);
$scope.currentRule = result.length ? result[0] : response[0];
}
$scope.$emit('setCurrentRule', { currentRule: $scope.currentRule }); $scope.$emit('setCurrentRule', { currentRule: $scope.currentRule });
if ( if (
!(Object.keys(($scope.currentRule || {}).details || {}) || []).length !(Object.keys(($scope.currentRule || {}).details || {}) || []).length

8
public/controllers/settings/settings.js
View File

@ -124,12 +124,10 @@ export class SettingsController {
*/ */
async removeManager(item) { async removeManager(item) {
try { try {
const currentApi = this.appState.getCurrentAPI();
let index = this.apiEntries.indexOf(item); let index = this.apiEntries.indexOf(item);
if (this.appState.getCurrentAPI()) { if (currentApi) {
if ( if (this.apiEntries[index]._id === JSON.parse(currentApi).id) {
this.apiEntries[index]._id ===
JSON.parse(this.appState.getCurrentAPI()).id
) {
// We are trying to remove the one selected as default // We are trying to remove the one selected as default
this.appState.removeCurrentAPI(); this.appState.removeCurrentAPI();
} }

2
public/directives/wz-data-table/wz-data-table.html
View File

@ -30,7 +30,7 @@
<tfoot> <tfoot>
<td colspan="{{keys.length}}"> <td colspan="{{keys.length}}">
<span ng-show="!wazuh_table_loading" class="color-grey">{{ totalItems }} items</span> <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"> <div ng-show="items.length > itemsPerPage" class="pagination pull-right" style="margin:0 !important">
<ul layout="row"> <ul layout="row">
<li ng-show="currentPage" class="md-padding"> <li ng-show="currentPage" class="md-padding">
<a href ng-click="prevPage()">« Prev</a> <a href ng-click="prevPage()">« Prev</a>

16
public/directives/wz-list-manage/wz-list-manage.html
View File

@ -103,7 +103,7 @@
<tfoot> <tfoot>
<td colspan="3"> <td colspan="3">
<span ng-show="!wazuh_table_loading" class="color-grey">{{ totalItems }} items</span> <span ng-show="!wazuh_table_loading" class="color-grey">{{ totalItems }} items</span>
<div ng-show="items.length >= itemsPerPage" class="pagination pull-right" <div ng-show="items.length > itemsPerPage" class="pagination pull-right"
style="margin:0 !important"> style="margin:0 !important">
<ul layout="row"> <ul layout="row">
<li ng-show="currentPage > 0" class="md-padding"> <li ng-show="currentPage > 0" class="md-padding">
@ -133,12 +133,14 @@
</tfoot> </tfoot>
</table> </table>
</md-card-content> </md-card-content>
<md-card-actions layout="row" layout-align="end center" <md-card-actions layout="row" layout-align="end center" class="layout-align-end-center layout-row">
class="wz-card-actions layout-align-end-center layout-row"> <button type="button" ng-click="downloadCsv('/lists', currentList.name, currentList.path)"
<a class="wz-text-link cursor-pointer small md-button md-ink-ripple" id="btnDownload" class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small" id="btnDownload">
ng-click="downloadCsv('/lists', currentList.name, currentList.path)"> <span class="euiButtonEmpty__content">
<react-component name="EuiIcon" props="{type:'importAction', color:'primary'}" /> Formatted <react-component name="EuiIcon" props="{type:'importAction'}" />
</a> <span class="euiButtonEmpty__text">Formatted</span>
</span>
</button>
</md-card-actions> </md-card-actions>
</md-card> </md-card>
</div> </div>

18
public/directives/wz-table/wz-table-directive.js
View File

@ -110,8 +110,7 @@ app.directive('wzTable', function() {
// Prevents duplicated rows when resizing // Prevents duplicated rows when resizing
let resizing = false; let resizing = false;
$window.onresize = () => { $window.onresize = () => {
if (resizing) return; if (resizing || $scope.resizingColumns) return;
$(`#table${$scope.scapepath}`).colResizable({ disable: true });
resizing = true; resizing = true;
clearTimeout(doit); clearTimeout(doit);
doit = setTimeout(() => { doit = setTimeout(() => {
@ -119,6 +118,7 @@ app.directive('wzTable', function() {
$scope.itemsPerPage = $scope.rowsPerPage; $scope.itemsPerPage = $scope.rowsPerPage;
init(true) init(true)
.then(() => { .then(() => {
$scope.setColResizable();
resizing = false; resizing = false;
}) })
.catch(() => (resizing = false)); .catch(() => (resizing = false));
@ -501,11 +501,15 @@ app.directive('wzTable', function() {
}; };
$scope.setColResizable = () => { $scope.setColResizable = () => {
$(`#table${$scope.scapepath}`).colResizable({ $(`#table${$scope.scapepath} th`).resizable({
liveDrag: true, handles: 'e',
minWidth: 78, minWidth: 75,
partialRefresh: true, start: () => {
draggingClass: false $scope.resizingColumns = true;
},
end: () => {
$scope.resizingColumns = false;
}
}); });
$scope.$applyAsync(); $scope.$applyAsync();
}; };

225
public/directives/wz-table/wz-table.html
View File

@ -3,49 +3,42 @@
</div> </div>
<div ng-if="customColumns" layout="row" ng-show="!error && !wazuh_table_loading && items.length" class="columns-bar" <div ng-if="customColumns" layout="row" ng-show="!error && !wazuh_table_loading && items.length" class="columns-bar"
ng-class="{'columns-bar-active': showColumns}" ng-style="!showColumns && {'margin-bottom': '-35px'}"> ng-class="{'columns-bar-active': showColumns}" ng-style="!showColumns && {'margin-bottom': '-35px'}">
<div ng-if="showColumns" class="euiCheckbox wz-margin-right-8" ng-repeat="key in originalkeys" <div ng-if="showColumns" class="euiCheckbox wz-margin-right-8" ng-repeat="key in originalkeys" ng-click="updateColumns(key)">
ng-click="updateColumns(key)">
<input class="euiCheckbox__input" type="checkbox" aria-label="Select all rows" ng-checked="exists(key)"> <input class="euiCheckbox__input" type="checkbox" aria-label="Select all rows" ng-checked="exists(key)">
<div class="euiCheckbox__square"></div> <div class="euiCheckbox__square"></div>
<span class="euiCheckbox__label">{{ keyEquivalence[key.key.value || key.key] }}</span> <span class="euiCheckbox__label">{{ keyEquivalence[key.key.value || key.key] }}</span>
</div> </div>
<span flex></span> <span flex></span>
<span class="wz-text-link" style="line-height: 28px;" ng-click="showColumns = !showColumns" tooltip="Columns"> <span class="wz-text-link" style="line-height: 22px;z-index: 10000;" ng-click="showColumns = !showColumns" tooltip="Columns">
<react-component name="EuiIcon" props="{type:'gear'}" /> <react-component name="EuiIcon" props="{type:'gear'}" />
</span> </span>
</div> </div>
<div ng-if="!wazuh_table_loading && !isPolicyMonitoring() && !isSyscheck()" ng-show="!error && items.length"> <div ng-if="!wazuh_table_loading && !isPolicyMonitoring() && !isSyscheck()" ng-show="!error && items.length">
<table class="euiTable euiTable--responsive table table-striped table-condensed table-hover no-margin-bottom" <table class="table table-striped table-condensed table-hover no-margin-bottom"
ng-class="customColumns ? 'table-resizable' : ''" style="table-layout: fixed !important" ng-class="customColumns ? 'table-resizable' : 'euiTable euiTable--responsive'" id="table{{scapepath}}">
id="table{{scapepath}}">
<thead class="wz-text-bold"> <thead class="wz-text-bold">
<th ng-repeat="key in keys" class="euiTableHeaderCell wz-text-left" <th ng-repeat="key in keys" class="euiTableHeaderCell wz-text-left" ng-style="(key.width && !customColumns) && {'width':key.width}">
ng-style="key.width && {'width':key.width}" ng-class="{ 'cursor-pointer' : !key.nosortable}" <p ng-class="{ 'cursor-pointer' : !key.nosortable}" ng-click="!key.nosortable && sort(key)">
ng-click="!key.nosortable && sort(key)">
<span>
{{ path === '/agents/groups' && (key.value || key) === 'count' ? 'Agents' : {{ path === '/agents/groups' && (key.value || key) === 'count' ? 'Agents' :
keyEquivalence[key.value || keyEquivalence[key.value ||
key] || key.value || key }} key] || key.value || key }}
<i ng-if="!key.nosortable" class="fa wz-theader-sort-icon" <i ng-if="!key.nosortable" class="fa wz-theader-sort-icon" ng-class="sortValue === (key.value || key) ? (sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'"
ng-class="sortValue === (key.value || key) ? (sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'"
aria-hidden="true"></i> aria-hidden="true"></i>
</span> </p>
</th> </th>
<th ng-if="(path === '/agents' || (path === '/agents/groups' && adminMode) || (isLookingGroup() && adminMode) <th ng-if="(path === '/agents' || (path === '/agents/groups' && adminMode) || (isLookingGroup() && adminMode)
|| path === '/rules/files' || path === '/decoders/files' || path === '/lists/files')" || path === '/rules/files' || path === '/decoders/files' || path === '/lists/files')"
class="euiTableHeaderCell wz-text-left" class="euiTableHeaderCell wz-text-left">
ng-class="{'col-lg-2': path !== '/agents', 'col-lg-1': path === '/agents'}">
Actions Actions
</th> </th>
</thead> </thead>
<tbody> <tbody>
<tr ng-class="allowClick ? 'cursor-pointer' : ''" class="euiTableRow wz-word-wrap" <tr ng-class="allowClick ? 'cursor-pointer' : ''" class="wz-word-wrap" ng-repeat="item in pagedItems[currentPage] | filter:{item:'!'}"
ng-repeat="item in pagedItems[currentPage] | filter:{item:'!'}" ng-click="clickAction(item)"> ng-click="clickAction(item)">
<td ng-repeat="key in keys" id="td-{{$parent.$index}}-{{$index}}" <td ng-repeat="key in keys" id="td-{{$parent.$index}}-{{$index}}" ng-mouseover="showTooltip($parent.$index, $index, item)">
ng-mouseover="showTooltip($parent.$index, $index, item)"> <div ng-class="customColumns ? 'wz-text-truncatable-container' : ''">
<div class="wz-text-truncatable"> <span class="wz-text-truncatable">
<span>
{{ {{
parseValue(key,item) parseValue(key,item)
}} }}
@ -56,9 +49,8 @@
</div> </div>
</td> </td>
<td ng-if="path === '/agents'" ng-click="$event.stopPropagation()" class="cursor-default action-btn-td"> <td ng-if="path === '/agents'" ng-click="$event.stopPropagation()" class="cursor-default action-btn-td">
<span ng-click="clickAction(item, 'discover'); $event.stopPropagation()" <span ng-click="clickAction(item, 'discover'); $event.stopPropagation()" class="wz-margin-left-8 cursor-pointer"
class="wz-margin-left-8 cursor-pointer" tooltip="Open Discover panel for this agent" tooltip="Open Discover panel for this agent" tooltip-placement="left" aria-hidden="true">
tooltip-placement="left" aria-hidden="true">
<react-component name="EuiIcon" props="{type:'discoverApp', color:'primary'}" /> <react-component name="EuiIcon" props="{type:'discoverApp', color:'primary'}" />
</span> </span>
<span ng-click="clickAction(item, 'configuration'); $event.stopPropagation()" class="cursor-pointer" <span ng-click="clickAction(item, 'configuration'); $event.stopPropagation()" class="cursor-pointer"
@ -66,17 +58,15 @@
<react-component name="EuiIcon" props="{type:'wrench', color:'primary'}" /> <react-component name="EuiIcon" props="{type:'wrench', color:'primary'}" />
</span> </span>
</td> </td>
<td ng-if="path === '/agents/groups' && adminMode" ng-click="$event.stopPropagation()" <td ng-if="path === '/agents/groups' && adminMode" ng-click="$event.stopPropagation()" class="cursor-default action-btn-td">
class="cursor-default action-btn-td"> <span ng-if="removingGroup !== item.name && item.name !== 'default'" ng-click="showConfirmRemoveGroup($event, item); $event.stopPropagation()"
<span ng-if="removingGroup !== item.name && item.name !== 'default'" ng-class="{'wz-margin-left-8': item.name !== 'default'}" class="cursor-pointer" tooltip="Remove this group"
ng-click="showConfirmRemoveGroup($event, item); $event.stopPropagation()" tooltip-placement="left" aria-hidden="true">
ng-class="{'wz-margin-left-8': item.name !== 'default'}" class="cursor-pointer"
tooltip="Remove this group" tooltip-placement="left" aria-hidden="true">
<react-component name="EuiIcon" props="{type:'trash', color:'primary'}" /> <react-component name="EuiIcon" props="{type:'trash', color:'primary'}" />
</span> </span>
<span ng-if="removingGroup !== item.name" ng-click="editGroup(item); $event.stopPropagation()" <span ng-if="removingGroup !== item.name" ng-click="editGroup(item); $event.stopPropagation()"
tooltip="Edit this group configuration" tooltip-placement="left" tooltip="Edit this group configuration" tooltip-placement="left" ng-class="{'wz-margin-left-8': item.name === 'default'}"
ng-class="{'wz-margin-left-8': item.name === 'default'}" class="cursor-pointer"> class="cursor-pointer">
<react-component name="EuiIcon" props="{type:'pencil', color:'primary'}" /> <react-component name="EuiIcon" props="{type:'pencil', color:'primary'}" />
</span> </span>
@ -86,18 +76,15 @@
removed</span> removed</span>
</div> </div>
<div layout="row"> <div layout="row">
<md-button class="cancelBtn" type="button" ng-click="cancelRemoveGroup()"><i <md-button class="cancelBtn" type="button" ng-click="cancelRemoveGroup()"><i aria-hidden='true'
aria-hidden='true' class='fa fa-fw fa-close'></i> Cancel</md-button> class='fa fa-fw fa-close'></i> Cancel</md-button>
<md-button class="agreeBtn wz-button" type="button" <md-button class="agreeBtn wz-button" type="button" ng-click="confirmRemoveGroup(item.name)"><i
ng-click="confirmRemoveGroup(item.name)"><i aria-hidden='true' aria-hidden='true' class='fa fa-fw fa-check'></i> Confirm</md-button>
class='fa fa-fw fa-check'></i> Confirm</md-button>
</div> </div>
</div> </div>
</td> </td>
<td ng-if="isLookingGroup() && adminMode" ng-click="$event.stopPropagation()" <td ng-if="isLookingGroup() && adminMode" ng-click="$event.stopPropagation()" class="cursor-default action-btn-td">
class="cursor-default action-btn-td"> <span ng-if="removingAgent !== item.id && adminMode" ng-click="showConfirmRemoveAgentFromGroup($event, item); $event.stopPropagation()"
<span ng-if="removingAgent !== item.id && adminMode"
ng-click="showConfirmRemoveAgentFromGroup($event, item); $event.stopPropagation()"
class="wz-margin-left-8 cursor-pointer" tooltip="Remove this agent from the group" class="wz-margin-left-8 cursor-pointer" tooltip="Remove this agent from the group"
tooltip-placement="left" aria-hidden="true"> tooltip-placement="left" aria-hidden="true">
<react-component name="EuiIcon" props="{type:'trash', color:'primary'}" /> <react-component name="EuiIcon" props="{type:'trash', color:'primary'}" />
@ -109,32 +96,28 @@
this group</span> this group</span>
</div> </div>
<div layout="row"> <div layout="row">
<md-button class="cancelBtn" type="button" ng-click="cancelRemoveAgent()"><i <md-button class="cancelBtn" type="button" ng-click="cancelRemoveAgent()"><i aria-hidden='true'
aria-hidden='true' class='fa fa-fw fa-close'></i> Cancel</md-button> class='fa fa-fw fa-close'></i> Cancel</md-button>
<md-button class="agreeBtn wz-button" type="button" ng-click="confirmRemoveAgent(item.id)"> <md-button class="agreeBtn wz-button" type="button" ng-click="confirmRemoveAgent(item.id)">
<i aria-hidden='true' class='fa fa-fw fa-check'></i> Confirm</md-button> <i aria-hidden='true' class='fa fa-fw fa-check'></i> Confirm</md-button>
</div> </div>
</div> </div>
</td> </td>
<td ng-if="path === '/rules/files' || path === '/decoders/files' || path === '/lists/files'" <td ng-if="path === '/rules/files' || path === '/decoders/files' || path === '/lists/files'" ng-click="$event.stopPropagation()"
ng-click="$event.stopPropagation()" class="cursor-default action-btn-td"> class="cursor-default action-btn-td">
<span <span ng-if="(item.path === 'etc/rules' || item.path === 'etc/decoders') && ((item.name && removingFile !== item.name) || (item.file && removingFile !== item.file)) && adminMode && path !== '/lists/files'"
ng-if="(item.path === 'etc/rules' || item.path === 'etc/decoders') && ((item.name && removingFile !== item.name) || (item.file && removingFile !== item.file)) && adminMode && path !== '/lists/files'" ng-click="editFile(item, path); $event.stopPropagation()" class="wz-margin-left-8 cursor-pointer"
ng-click="editFile(item, path); $event.stopPropagation()" tooltip="Edit this file" tooltip-placement="left" aria-hidden="true">
class="wz-margin-left-8 cursor-pointer" tooltip="Edit this file" tooltip-placement="left"
aria-hidden="true">
<react-component name="EuiIcon" props="{type:'pencil', color:'primary'}" /> <react-component name="EuiIcon" props="{type:'pencil', color:'primary'}" />
</span> </span>
<span <span ng-if="(item.path === 'etc/rules' || item.path === 'etc/decoders' || path === '/lists/files') && ((item.name && removingFile !== item.name) || (item.file && removingFile !== item.file)) && adminMode"
ng-if="(item.path === 'etc/rules' || item.path === 'etc/decoders' || path === '/lists/files') && ((item.name && removingFile !== item.name) || (item.file && removingFile !== item.file)) && adminMode" ng-click="showConfirmRemoveFile($event, item, path); $event.stopPropagation()" class="cursor-pointer"
ng-click="showConfirmRemoveFile($event, item, path); $event.stopPropagation()" ng-class="{'wz-margin-left-8': path === '/lists/files'}" tooltip="Delete this file"
class="cursor-pointer" ng-class="{'wz-margin-left-8': path === '/lists/files'}" tooltip-placement="right" aria-hidden="true">
tooltip="Delete this file" tooltip-placement="right" aria-hidden="true">
<react-component name="EuiIcon" props="{type:'trash', color:'primary'}" /> <react-component name="EuiIcon" props="{type:'trash', color:'primary'}" />
</span> </span>
<span <span ng-if="(item.path !== 'etc/rules' && item.path !== 'etc/decoders') && ((item.name && removingFile !== item.name) || (item.file && removingFile !== item.file)) && adminMode && path !== '/lists/files'"
ng-if="(item.path !== 'etc/rules' && item.path !== 'etc/decoders') && ((item.name && removingFile !== item.name) || (item.file && removingFile !== item.file)) && adminMode && path !== '/lists/files'"
class="wz-margin-left-8" aria-hidden="true"> class="wz-margin-left-8" aria-hidden="true">
- -
</span> </span>
@ -146,45 +129,39 @@
: item.file}}</b> will be deleted</span> : item.file}}</b> will be deleted</span>
</div> </div>
<div layout="row"> <div layout="row">
<md-button class="cancelBtn" type="button" ng-click="cancelRemoveFile()"><i <md-button class="cancelBtn" type="button" ng-click="cancelRemoveFile()"><i aria-hidden='true'
aria-hidden='true' class='fa fa-fw fa-close'></i> Cancel</md-button> class='fa fa-fw fa-close'></i> Cancel</md-button>
<md-button class="agreeBtn wz-button" type="button" <md-button class="agreeBtn wz-button" type="button" ng-click="confirmRemoveFile(item, path)"><i
ng-click="confirmRemoveFile(item, path)"><i aria-hidden='true' aria-hidden='true' class='fa fa-fw fa-check'></i> Confirm</md-button>
class='fa fa-fw fa-check'></i> Confirm</md-button>
</div> </div>
</div> </div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tfoot> <tfoot>
<td <td colspan="{{ (path === '/agents' || (path === '/agents/groups' && adminMode) || (isLookingGroup() && adminMode) ||
colspan="{{ (path === '/agents' || (path === '/agents/groups' && adminMode) || (isLookingGroup() && adminMode) ||
path === '/rules/files' || path === '/decoders/files' || path === '/lists/files') ? keys.length + 1 : keys.length}}"> path === '/rules/files' || path === '/decoders/files' || path === '/lists/files') ? keys.length + 1 : keys.length}}">
<span ng-show="!wazuh_table_loading" class="color-grey">{{ totalItems }} items ({{time | number: 2}} <span ng-show="!wazuh_table_loading" class="color-grey">{{ totalItems }} items ({{time | number: 2}}
seconds)</span> seconds)</span>
<div ng-show="items.length >= itemsPerPage" class="pagination pull-right" style="margin:0 !important"> <div ng-show="items.length > itemsPerPage" class="pagination pull-right" style="margin:0 !important">
<ul layout="row"> <ul layout="row">
<li ng-show="currentPage > 0" class="md-padding"> <li ng-show="currentPage > 0" class="md-padding">
<a href ng-click="firstPage()">First</a> <a href ng-click="firstPage()">First</a>
</li> </li>
<li ng-show="currentPage" class="md-padding"> <li ng-show="currentPage" class="md-padding">
<a href ng-click="prevPage()"> <a href ng-click="prevPage()">
<react-component name="EuiIcon" props="{type:'arrowLeft'}" /> <react-component name="EuiIcon" props="{type:'arrowLeft'}" />
</a> </a>
</li> </li>
<li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) " ng-class="{'wz-text-active': n == currentPage}"
<li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) " ng-click="setPage()" class="md-padding">
ng-class="{'wz-text-active': n == currentPage}" ng-click="setPage()" class="md-padding">
<a href ng-bind="n + 1">1</a> <a href ng-bind="n + 1">1</a>
</li> </li>
<li ng-show="currentPage < pagedItems.length - 1" class="md-padding"> <li ng-show="currentPage < pagedItems.length - 1" class="md-padding">
<a href ng-click="nextPage()"> <a href ng-click="nextPage()">
<react-component name="EuiIcon" props="{type:'arrowRight'}" /> <react-component name="EuiIcon" props="{type:'arrowRight'}" />
</a> </a>
</li> </li>
<li ng-show="currentPage < pagedItems.length - 1" class="md-padding"> <li ng-show="currentPage < pagedItems.length - 1" class="md-padding">
<a href ng-click="setPage(pagedItems.length - 1, false, true)">Last</a> <a href ng-click="setPage(pagedItems.length - 1, false, true)">Last</a>
</li> </li>
@ -196,30 +173,23 @@
</div> </div>
<div ng-if="!wazuh_table_loading && isPolicyMonitoring()" ng-show="!error && items.length"> <div ng-if="!wazuh_table_loading && isPolicyMonitoring()" ng-show="!error && items.length">
<table <table class="table table-striped table-striped-duo table-condensed table-hover no-margin-bottom"
class="euiTable euiTable--responsive table table-striped table-striped-duo table-condensed table-hover no-margin-bottom" ng-class="customColumns ? 'table-resizable' : 'euiTable euiTable--responsive'" id="table{{scapepath}}">
ng-class="customColumns ? 'table-resizable' : ''" style="table-layout: fixed !important"
id="table{{scapepath}}">
<thead class="wz-text-bold"> <thead class="wz-text-bold">
<th ng-repeat="key in keys" class="euiTableHeaderCell wz-text-left" <th ng-repeat="key in keys" class="euiTableHeaderCell wz-text-left" ng-style="key.width && {'width':key.width}">
ng-style="key.width && {'width':key.width}" ng-class="{ 'cursor-pointer' : !key.nosortable }" <p ng-class="{ 'cursor-pointer' : !key.nosortable }" ng-click="!key.nosortable && sort(key)">
ng-click="!key.nosortable && sort(key)">
<span>
{{ keyEquivalence[key.value || key] || key.value || key }} {{ keyEquivalence[key.value || key] || key.value || key }}
<i ng-if="!key.nosortable" class="fa wz-theader-sort-icon" <i ng-if="!key.nosortable" class="fa wz-theader-sort-icon" ng-class="sortValue === (key.value || key) ? (sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'"
ng-class="sortValue === (key.value || key) ? (sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'"
aria-hidden="true"></i> aria-hidden="true"></i>
</span> </p>
</th> </th>
</thead> </thead>
<tbody> <tbody>
<tr class="euiTableRow wz-word-wrap cursor-pointer" <tr class="wz-word-wrap cursor-pointer" ng-repeat-start="item in pagedItems[currentPage] | filter:{item:'!'}"
ng-repeat-start="item in pagedItems[currentPage] | filter:{item:'!'}" ng-click="expandTableRow(item)" ng-click="expandTableRow(item)" ng-class="{'selected': item.expanded}">
ng-class="{'selected': item.expanded}"> <td ng-repeat="key in keys" id="td-{{$parent.$index}}-{{$index}}" ng-mouseover="showTooltip($parent.$index, $index, item)">
<td ng-repeat="key in keys" id="td-{{$parent.$index}}-{{$index}}" <div ng-class="customColumns ? 'wz-text-truncatable-container' : ''">
ng-mouseover="showTooltip($parent.$index, $index, item)"> <span class="wz-text-truncatable">
<div class="wz-text-truncatable">
<span>
<span ng-show="(key.value || key ) === 'result'" class="no-wrap"> <span ng-show="(key.value || key ) === 'result'" class="no-wrap">
<p class="round status little" ng-class="(item.result === 'passed') ? 'teal' : 'red'"> <p class="round status little" ng-class="(item.result === 'passed') ? 'teal' : 'red'">
</p>&nbsp;&nbsp; </p>&nbsp;&nbsp;
@ -235,7 +205,7 @@
</td> </td>
</tr> </tr>
<tr ng-show="(item.rationale || item.remediation || item.directory || (item.rules && item.rules.length) || (item.compliance && item.compliance.length)) && item.expanded" <tr ng-show="(item.rationale || item.remediation || item.directory || (item.rules && item.rules.length) || (item.compliance && item.compliance.length)) && item.expanded"
class="euiTableRow wz-word-wrap cursor-pointer selected" ng-repeat-end="" class="wz-word-wrap cursor-pointer selected" ng-repeat-end=""
ng-click="expandTableRow(item)"> ng-click="expandTableRow(item)">
<td colspan="{{keys.length}}" style="border-top: none"> <td colspan="{{keys.length}}" style="border-top: none">
<div layout="row" layout-padding="" class="layout-padding layout-row"> <div layout="row" layout-padding="" class="layout-padding layout-row">
@ -244,8 +214,7 @@
<div> <div>
<div class="euiFlexItem euiFlexItem--flexGrowZero" ng-if="item.rationale"> <div class="euiFlexItem euiFlexItem--flexGrowZero" ng-if="item.rationale">
<div class="euiStat euiStat--leftAligned"> <div class="euiStat euiStat--leftAligned">
<p class="euiTitle euiTitle--small euiStat__title ng-binding" <p class="euiTitle euiTitle--small euiStat__title ng-binding" style="font-size: 1.15rem;">Rationale</p>
style="font-size: 1.15rem;">Rationale</p>
<div class="euiText euiText--small euiStat__description wz-text-gray"> <div class="euiText euiText--small euiStat__description wz-text-gray">
<p>{{item.rationale}}</p> <p>{{item.rationale}}</p>
</div> </div>
@ -254,8 +223,7 @@
</div> </div>
<div class="euiFlexItem euiFlexItem--flexGrowZero" ng-if="item.remediation"> <div class="euiFlexItem euiFlexItem--flexGrowZero" ng-if="item.remediation">
<div class="euiStat euiStat--leftAligned"> <div class="euiStat euiStat--leftAligned">
<p class="euiTitle euiTitle--small euiStat__title ng-binding" <p class="euiTitle euiTitle--small euiStat__title ng-binding" style="font-size: 1.15rem;">Remediation</p>
style="font-size: 1.15rem;">Remediation</p>
<div class="euiText euiText--small euiStat__description wz-text-gray"> <div class="euiText euiText--small euiStat__description wz-text-gray">
<p>{{item.remediation}}</p> <p>{{item.remediation}}</p>
</div> </div>
@ -264,8 +232,7 @@
</div> </div>
<div class="euiFlexItem euiFlexItem--flexGrowZero" ng-if="item.description"> <div class="euiFlexItem euiFlexItem--flexGrowZero" ng-if="item.description">
<div class="euiStat euiStat--leftAligned"> <div class="euiStat euiStat--leftAligned">
<p class="euiTitle euiTitle--small euiStat__title ng-binding" <p class="euiTitle euiTitle--small euiStat__title ng-binding" style="font-size: 1.15rem;">Description</p>
style="font-size: 1.15rem;">Description</p>
<div class="euiText euiText--small euiStat__description wz-text-gray"> <div class="euiText euiText--small euiStat__description wz-text-gray">
<p>{{item.description}}</p> <p>{{item.description}}</p>
</div> </div>
@ -274,8 +241,7 @@
</div> </div>
<div class="euiFlexItem euiFlexItem--flexGrowZero" ng-if="item.directory"> <div class="euiFlexItem euiFlexItem--flexGrowZero" ng-if="item.directory">
<div class="euiStat euiStat--leftAligned"> <div class="euiStat euiStat--leftAligned">
<p class="euiTitle euiTitle--small euiStat__title ng-binding" <p class="euiTitle euiTitle--small euiStat__title ng-binding" style="font-size: 1.15rem;">Path(s)</p>
style="font-size: 1.15rem;">Path(s)</p>
<div class="euiText euiText--small euiStat__description wz-text-gray"> <div class="euiText euiText--small euiStat__description wz-text-gray">
<p>{{item.directory}}</p> <p>{{item.directory}}</p>
</div> </div>
@ -297,9 +263,9 @@
</div> </div>
<div class="euiFlexItem euiFlexItem--flexGrowZero" <div class="euiFlexItem euiFlexItem--flexGrowZero"
ng-if="item.compliance && item.compliance.length"> ng-if="item.compliance && item.compliance.length">
<div class="euiStat euiStat--leftAligned"> <div class="euiStat euiStat--leftAligned">
<p class="euiTitle euiTitle--small euiStat__title ng-binding" <p class="euiTitle euiTitle--small euiStat__title ng-binding" style="font-size: 1.15rem;">Compliance</p>
style="font-size: 1.15rem;">Compliance</p>
<div class="euiText euiText--small euiStat__description wz-text-gray"> <div class="euiText euiText--small euiStat__description wz-text-gray">
<div layout="row" ng-repeat="c in item.compliance"> <div layout="row" ng-repeat="c in item.compliance">
{{c.key}}/{{c.value}} {{c.key}}/{{c.value}}
@ -319,24 +285,28 @@
<td colspan="{{keys.length}}"> <td colspan="{{keys.length}}">
<span ng-show="!wazuh_table_loading" class="color-grey">{{ totalItems }} items ({{time | number: 2}} <span ng-show="!wazuh_table_loading" class="color-grey">{{ totalItems }} items ({{time | number: 2}}
seconds)</span> seconds)</span>
<div ng-show="items.length >= itemsPerPage" class="pagination pull-right" style="margin:0 !important"> <div ng-show="items.length > itemsPerPage" class="pagination pull-right" style="margin:0 !important">
<ul layout="row"> <ul layout="row">
<li ng-show="currentPage > 0" class="md-padding">
<a href ng-click="firstPage()">First</a>
</li>
<li ng-show="currentPage" class="md-padding"> <li ng-show="currentPage" class="md-padding">
<a href ng-click="prevPage()"> <a href ng-click="prevPage()">
<react-component name="EuiIcon" props="{type:'arrowLeft'}" /> <react-component name="EuiIcon" props="{type:'arrowLeft'}" />
</a> </a>
</li> </li>
<li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) " ng-class="{'wz-text-active': n == currentPage}"
<li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) " ng-click="setPage()" class="md-padding">
ng-class="{'wz-text-active': n == currentPage}" ng-click="setPage()" class="md-padding">
<a href ng-bind="n + 1">1</a> <a href ng-bind="n + 1">1</a>
</li> </li>
<li ng-show="currentPage < pagedItems.length - 1" class="md-padding"> <li ng-show="currentPage < pagedItems.length - 1" class="md-padding">
<a href ng-click="nextPage()"> <a href ng-click="nextPage()">
<react-component name="EuiIcon" props="{type:'arrowRight'}" /> <react-component name="EuiIcon" props="{type:'arrowRight'}" />
</a> </a>
</li> </li>
<li ng-show="currentPage < pagedItems.length - 1" class="md-padding">
<a href ng-click="setPage(pagedItems.length - 1, false, true)">Last</a>
</li>
</ul> </ul>
</div> </div>
</td> </td>
@ -345,30 +315,23 @@
</div> </div>
<div ng-if="!wazuh_table_loading && isSyscheck()" ng-show="!error && items.length"> <div ng-if="!wazuh_table_loading && isSyscheck()" ng-show="!error && items.length">
<table <table class="table table-striped table-striped-duo table-condensed table-hover no-margin-bottom"
class="euiTable euiTable--responsive table table-striped table-striped-duo table-condensed table-hover no-margin-bottom" ng-class="customColumns ? 'table-resizable' : 'euiTable euiTable--responsive'" id="table{{scapepath}}">
ng-class="customColumns ? 'table-resizable' : ''" style="table-layout: fixed !important"
id="table{{scapepath}}">
<thead class="wz-text-bold"> <thead class="wz-text-bold">
<th ng-repeat="key in keys" class="euiTableHeaderCell wz-text-left" <th ng-repeat="key in keys" class="euiTableHeaderCell wz-text-left" ng-style="key.width && {'width':key.width}">
ng-style="key.width && {'width':key.width}" ng-class="{ 'cursor-pointer' : !key.nosortable }" <p ng-class="{ 'cursor-pointer' : !key.nosortable }" ng-click="!key.nosortable && sort(key)">{{
ng-click="!key.nosortable && sort(key)">
<span>{{
keyEquivalence[key.value || key] || key.value || key }} keyEquivalence[key.value || key] || key.value || key }}
<i ng-if="!key.nosortable" class="fa wz-theader-sort-icon" <i ng-if="!key.nosortable" class="fa wz-theader-sort-icon" ng-class="sortValue === (key.value || key) ? (sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'"
ng-class="sortValue === (key.value || key) ? (sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'"
aria-hidden="true"></i> aria-hidden="true"></i>
</span> </p>
</th> </th>
</thead> </thead>
<tbody> <tbody>
<tr class="euiTableRow wz-word-wrap cursor-pointer" <tr class="wz-word-wrap cursor-pointer" ng-repeat-start="item in pagedItems[currentPage] | filter:{item:'!'}"
ng-repeat-start="item in pagedItems[currentPage] | filter:{item:'!'}" ng-click="expandTableRow(item)" ng-click="expandTableRow(item)" ng-class="{'selected': item.expanded}">
ng-class="{'selected': item.expanded}"> <td ng-repeat="key in keys" id="td-{{$parent.$index}}-{{$index}}" ng-mouseover="showTooltip($parent.$index, $index, item)">
<td ng-repeat="key in keys" id="td-{{$parent.$index}}-{{$index}}" <div class="wz-text-truncatable-container">
ng-mouseover="showTooltip($parent.$index, $index, item)"> <span class="wz-text-truncatable">
<div class="wz-text-truncatable">
<span>
{{ {{
parseValue(key,item) parseValue(key,item)
}} }}
@ -379,7 +342,7 @@
</div> </div>
</td> </td>
</tr> </tr>
<tr class="euiTableRow wz-word-wrap cursor-pointer selected" ng-show="item.expanded" ng-repeat-end="" <tr class="wz-word-wrap cursor-pointer selected" ng-show="item.expanded" ng-repeat-end=""
ng-click="expandTableRow(item)"> ng-click="expandTableRow(item)">
<td colspan="{{keys.length}}" style="border-top: none"> <td colspan="{{keys.length}}" style="border-top: none">
<div layout="row" layout-padding="" class="layout-padding layout-row" ng-if="item.expanded"> <div layout="row" layout-padding="" class="layout-padding layout-row" ng-if="item.expanded">
@ -398,24 +361,28 @@
<td colspan="{{keys.length}}"> <td colspan="{{keys.length}}">
<span ng-show="!wazuh_table_loading" class="color-grey">{{ totalItems }} items ({{time | number: 2}} <span ng-show="!wazuh_table_loading" class="color-grey">{{ totalItems }} items ({{time | number: 2}}
seconds)</span> seconds)</span>
<div ng-show="items.length >= itemsPerPage" class="pagination pull-right" style="margin:0 !important"> <div ng-show="items.length > itemsPerPage" class="pagination pull-right" style="margin:0 !important">
<ul layout="row"> <ul layout="row">
<li ng-show="currentPage > 0" class="md-padding">
<a href ng-click="firstPage()">First</a>
</li>
<li ng-show="currentPage" class="md-padding"> <li ng-show="currentPage" class="md-padding">
<a href ng-click="prevPage()"> <a href ng-click="prevPage()">
<react-component name="EuiIcon" props="{type:'arrowLeft'}" /> <react-component name="EuiIcon" props="{type:'arrowLeft'}" />
</a> </a>
</li> </li>
<li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) " ng-class="{'wz-text-active': n == currentPage}"
<li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) " ng-click="setPage()" class="md-padding">
ng-class="{'wz-text-active': n == currentPage}" ng-click="setPage()" class="md-padding">
<a href ng-bind="n + 1">1</a> <a href ng-bind="n + 1">1</a>
</li> </li>
<li ng-show="currentPage < pagedItems.length - 1" class="md-padding"> <li ng-show="currentPage < pagedItems.length - 1" class="md-padding">
<a href ng-click="nextPage()"> <a href ng-click="nextPage()">
<react-component name="EuiIcon" props="{type:'arrowRight'}" /> <react-component name="EuiIcon" props="{type:'arrowRight'}" />
</a> </a>
</li> </li>
<li ng-show="currentPage < pagedItems.length - 1" class="md-padding">
<a href ng-click="setPage(pagedItems.length - 1, false, true)">Last</a>
</li>
</ul> </ul>
</div> </div>
</td> </td>

2
public/directives/wz-tag-filter/wz-tag-filter.html
View File

@ -26,7 +26,7 @@
<input id='wz-search-filter-bar-input' class='wz-search-filter-bar-input input' type='text' ng-model='newTag' <input id='wz-search-filter-bar-input' class='wz-search-filter-bar-input input' type='text' ng-model='newTag'
ng-focus='showAutocomplete(true)' ng-blur='showAutocomplete(false)' placeholder='Add filter or search' ng-focus='showAutocomplete(true)' ng-blur='showAutocomplete(false)' placeholder='Add filter or search'
ng-keyup='!autocompleteEnter && $event.keyCode == 13 ? addTag(true) : addSearchKey($event)' /> ng-keyup='!autocompleteEnter && $event.keyCode == 13 ? addTag(true) : addSearchKey($event)' />
<a class='wz-tag-remove-button wz-padding-top-5' ng-click='removeAll()'><i class="fa fa-trash-o" aria-hidden="true"></i></a> <a class='wz-tag-remove-button wz-padding-top-5' ng-show="groupedTagList.length" ng-click='removeAll()'><i class="fa fa-times" aria-hidden="true"></i></a>
<div id='wz-search-filter-bar-autocomplete' class='wz-search-filter-bar-autocomplete' ng-show='isAutocomplete && autocompleteContent.list.length > 0'> <div id='wz-search-filter-bar-autocomplete' class='wz-search-filter-bar-autocomplete' ng-show='isAutocomplete && autocompleteContent.list.length > 0'>
<p><b>{{autocompleteContent.title}}</b></p> <p><b>{{autocompleteContent.title}}</b></p>
<ul id='wz-search-filter-bar-autocomplete-list'> <ul id='wz-search-filter-bar-autocomplete-list'>

5
public/directives/wz-xml-file-editor/wz-xml-file-editor.less
View File

@ -39,8 +39,9 @@
} }
.groupContentViewer { .groupContentViewer {
height: calc(~'100vh - 410px'); height: calc(~'100vh - 250px');
min-height: 300px; min-height: 300px!important;
overflow: auto!important;
} }
.extraHeader{ .extraHeader{

884
public/less/common.less
View File

File diff suppressed because it is too large Load Diff

1533
public/less/jquery-ui.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1
public/less/loader.js
View File

@ -20,3 +20,4 @@ import './layout.less';
import './media-queries.less'; import './media-queries.less';
import './typography.less'; import './typography.less';
import './ui_framework.css'; import './ui_framework.css';
import './jquery-ui.css';

11
public/less/typography.less
View File

@ -87,7 +87,16 @@ html, body, button:not(.fa):not(.fa-times), textarea, input, select, .wz-chip {
.wz-text-truncatable { .wz-text-truncatable {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
&:before {
content: attr(data-name);
}
}
.wz-text-truncatable-container {
overflow: hidden;
width: auto;
display: grid;
} }
.font-size-12 { .font-size-12 {

1
public/services/api-tester.js
View File

@ -47,7 +47,6 @@ export class ApiTester {
return Promise.reject(result); return Promise.reject(result);
} }
return result; return result;
} catch (error) { } catch (error) {
if (((error || {}).data || {}).code === 3099) { if (((error || {}).data || {}).code === 3099) {
// Do nothing // Do nothing

114
public/templates/management/groups/groups.html
View File

@ -12,28 +12,23 @@
<div layout="row"> <div layout="row">
<span class="font-size-18"> <span class="font-size-18">
<i class="fa fa-fw fa-object-group" aria-hidden="true"></i> Groups </span> <i class="fa fa-fw fa-object-group" aria-hidden="true"></i> Groups </span>
<span ng-if='adminMode' class="font-size-18 wz-text-link wz-margin-left-8" <span ng-if='adminMode' class="font-size-18 wz-text-link wz-margin-left-8" ng-click="switchAddingGroup()">
ng-click="switchAddingGroup()"> <svg ng-if="!addingGroup" class="euiIcon euiIcon--medium" focusable="false" xmlns="http://www.w3.org/2000/svg"
<svg ng-if="!addingGroup" class="euiIcon euiIcon--medium" focusable="false" width="16" height="16" viewBox="0 0 16 16">
xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882z">
<path fill-rule="evenodd"
d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882z">
</path> </path>
</svg> </svg>
<svg ng-if="addingGroup" class="euiIcon euiIcon--medium" focusable="false" <svg ng-if="addingGroup" class="euiIcon euiIcon--medium" focusable="false" xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> width="16" height="16" viewBox="0 0 16 16">
<path fill-rule="evenodd" <path fill-rule="evenodd" d="M7.5 0C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882zM3.5 7h8a.5.5 0 1 1 0 1h-8a.5.5 0 0 1 0-1z">
d="M7.5 0C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882zM3.5 7h8a.5.5 0 1 1 0 1h-8a.5.5 0 0 1 0-1z">
</path> </path>
</svg> </svg>
</span> </span>
</div> </div>
<div layout="row" ng-if="addingGroup" ng-if='adminMode' class="wz-padding-bottom-0"> <div layout="row" ng-if="addingGroup" ng-if='adminMode' class="wz-padding-bottom-0">
<input placeholder="Group name..." ng-model="groupToBeAdded" type="text" <input placeholder="Group name..." ng-model="groupToBeAdded" type="text" class="kuiLocalSearchInput addGroupInput ng-empty ng-pristine ng-scope ng-touched ng-valid"
class="kuiLocalSearchInput addGroupInput ng-empty ng-pristine ng-scope ng-touched ng-valid"
aria-invalid="false"> aria-invalid="false">
<button type="submit" aria-label="Search" class="kuiLocalSearchButton addGroupBtn" <button type="submit" aria-label="Search" class="kuiLocalSearchButton addGroupBtn" ng-click="createGroup(groupToBeAdded)">
ng-click="createGroup(groupToBeAdded)">
<span class="fa fa-save fa-fw" aria-hidden="true"></span> <span class="fa fa-save fa-fw" aria-hidden="true"></span>
</button> </button>
</div> </div>
@ -61,25 +56,21 @@
<div ng-show="editingFile"> <div ng-show="editingFile">
<div layout="row" class="md-padding-h wz-margin-top-10"> <div layout="row" class="md-padding-h wz-margin-top-10">
<span ng-click='closeEditingFile()' class='btn btn-info'>Cancel</span> <span ng-click='closeEditingFile()' class='btn btn-info'>Cancel</span>
<button ng-disabled='xmlHasErrors' ng-click='doSaveGroupAgentConfig()' <button ng-disabled='xmlHasErrors' ng-click='doSaveGroupAgentConfig()' class='height-35 kuiButton kuiButton--secondary wz-margin-left-8'>
class='height-35 kuiButton kuiButton--secondary wz-margin-left-8'>
<span ng-show='!xmlHasErrors'> <span ng-show='!xmlHasErrors'>
<svg class="euiIcon euiIcon--medium" focusable="false" xmlns="http://www.w3.org/2000/svg" <svg class="euiIcon euiIcon--medium" focusable="false" xmlns="http://www.w3.org/2000/svg"
width="16" height="16" viewBox="0 0 16 16"> width="16" height="16" viewBox="0 0 16 16">
<path <path d="M5.008 2H2.282c-.181 0-.245.002-.275.007-.005.03-.007.094-.007.275v11.436c0 .181.002.245.007.275.03.005.094.007.275.007h11.436c.181 0 .245-.002.275-.007.005-.03.007-.094.007-.275V4.62c0-.13-.001-.18-.004-.204a2.654 2.654 0 0 0-.141-.147L11.73 2.145a2.654 2.654 0 0 0-.147-.141A2.654 2.654 0 0 0 11.38 2h-.388c.005.08.008.172.008.282v2.436c0 .446-.046.607-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H6.282c-.446 0-.607-.046-.77-.134a.909.909 0 0 1-.378-.378C5.046 5.325 5 5.164 5 4.718V2.282c0-.11.003-.202.008-.282zM2.282 1h9.098c.259 0 .348.01.447.032a.87.87 0 0 1 .273.113c.086.054.156.11.338.293l2.124 2.124c.182.182.239.252.293.338a.87.87 0 0 1 .113.273c.023.1.032.188.032.447v9.098c0 .446-.046.607-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H2.282c-.446 0-.607-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77V2.282c0-.446.046-.607.134-.77a.909.909 0 0 1 .378-.378c.163-.088.324-.134.77-.134zM6 2.282v2.436c0 .181.002.245.007.275.03.005.094.007.275.007h3.436c.181 0 .245-.002.275-.007.005-.03.007-.094.007-.275V2.282c0-.181-.002-.245-.007-.275A2.248 2.248 0 0 0 9.718 2H6.282c-.181 0-.245.002-.275.007-.005.03-.007.094-.007.275zM8 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0-1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z">
d="M5.008 2H2.282c-.181 0-.245.002-.275.007-.005.03-.007.094-.007.275v11.436c0 .181.002.245.007.275.03.005.094.007.275.007h11.436c.181 0 .245-.002.275-.007.005-.03.007-.094.007-.275V4.62c0-.13-.001-.18-.004-.204a2.654 2.654 0 0 0-.141-.147L11.73 2.145a2.654 2.654 0 0 0-.147-.141A2.654 2.654 0 0 0 11.38 2h-.388c.005.08.008.172.008.282v2.436c0 .446-.046.607-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H6.282c-.446 0-.607-.046-.77-.134a.909.909 0 0 1-.378-.378C5.046 5.325 5 5.164 5 4.718V2.282c0-.11.003-.202.008-.282zM2.282 1h9.098c.259 0 .348.01.447.032a.87.87 0 0 1 .273.113c.086.054.156.11.338.293l2.124 2.124c.182.182.239.252.293.338a.87.87 0 0 1 .113.273c.023.1.032.188.032.447v9.098c0 .446-.046.607-.134.77a.909.909 0 0 1-.378.378c-.163.088-.324.134-.77.134H2.282c-.446 0-.607-.046-.77-.134a.909.909 0 0 1-.378-.378c-.088-.163-.134-.324-.134-.77V2.282c0-.446.046-.607.134-.77a.909.909 0 0 1 .378-.378c.163-.088.324-.134.77-.134zM6 2.282v2.436c0 .181.002.245.007.275.03.005.094.007.275.007h3.436c.181 0 .245-.002.275-.007.005-.03.007-.094.007-.275V2.282c0-.181-.002-.245-.007-.275A2.248 2.248 0 0 0 9.718 2H6.282c-.181 0-.245.002-.275.007-.005.03-.007.094-.007.275zM8 12a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0-1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z">
</path> </path>
</svg> Save file </svg> Save file
</span> </span>
<span ng-show='xmlHasErrors' class='btn-danger'><i aria-hidden='true' <span ng-show='xmlHasErrors' class='btn-danger'><i aria-hidden='true' class='fa fa-fw fa-exclamation-triangle'></i>
class='fa fa-fw fa-exclamation-triangle'></i>
XML format error</span> XML format error</span>
</button> </button>
</div> </div>
<div class="md-padding md-padding-top-10" style="height: calc(100vh - 350px);" ng-if="fetchedXML"> <div class="md-padding md-padding-top-10" style="height: calc(100vh - 350px);" ng-if="fetchedXML">
<wz-xml-file-editor file-name='agent.conf' data="fetchedXML" <wz-xml-file-editor file-name='agent.conf' data="fetchedXML" target-name="currentGroup.name + ' group'"
target-name="currentGroup.name + ' group'" valid-fn='xmlIsValid(valid)' valid-fn='xmlIsValid(valid)' close-fn='closeEditingFile(reload)'>
close-fn='closeEditingFile(reload)'>
</wz-xml-file-editor> </wz-xml-file-editor>
</div> </div>
</div> </div>
@ -97,23 +88,18 @@
</div> </div>
<!-- Search bar --> <!-- Search bar -->
<div layout="row" <div layout="row" class="wz-margin-top-16 euiFlexGroup euiFlexGroup--alignItemsCenter euiFormControlLayout__childrenWrapper md-padding-h ng-scope"
class="wz-margin-top-16 euiFlexGroup euiFlexGroup--alignItemsCenter euiFormControlLayout__childrenWrapper md-padding-h ng-scope"
ng-if="!addingAgents && !file"> ng-if="!addingAgents && !file">
<input <input placeholder="{{groupsSelectedTab==='files' ? 'Filter files...' : lookingGroup ? 'Filter agents...' : 'Filter groups...'}}"
placeholder="{{groupsSelectedTab==='files' ? 'Filter files...' : lookingGroup ? 'Filter agents...' : 'Filter groups...'}}" ng-model="custom_search" type="text" class="euiFieldSearch euiFieldSearch--fullWidth euiFlexItem height-35 ng-empty ng-pristine ng-touched ng-valid"
ng-model="custom_search" type="text"
class="euiFieldSearch euiFieldSearch--fullWidth euiFlexItem height-35 ng-empty ng-pristine ng-touched ng-valid"
aria-invalid="false" wz-enter="search(custom_search)"> aria-invalid="false" wz-enter="search(custom_search)">
<div class="euiFormControlLayoutIcons wz-margin-left-16"> <div class="euiFormControlLayoutIcons wz-margin-left-16">
<span class="euiFormControlLayoutCustomIcon"> <span class="euiFormControlLayoutCustomIcon">
<react-component name="EuiIcon" <react-component name="EuiIcon" props="{type:'search', className:'euiFormControlLayoutCustomIcon__icon'}" />
props="{type:'search', className:'euiFormControlLayoutCustomIcon__icon'}" />
</span> </span>
</div> </div>
<button type="submit" aria-label="Search" <button type="submit" aria-label="Search" class="euiFlexItem euiFlexItem--flexGrowZero height-35 kuiButton kuiButton--secondary wz-margin-left-8"
class="euiFlexItem euiFlexItem--flexGrowZero height-35 kuiButton kuiButton--secondary wz-margin-left-8"
ng-click="search(custom_search)"> ng-click="search(custom_search)">
Search Search
</button> </button>
@ -121,30 +107,26 @@
class="euiFlexItem euiFlexItem--flexGrowZero height-35 wz-margin-left-8"> class="euiFlexItem euiFlexItem--flexGrowZero height-35 wz-margin-left-8">
<div class="euiFilterGroup"></div> <div class="euiFilterGroup"></div>
</div> </div>
<button <button ng-if="lookingGroup && currentGroup && !addingAgents && !editingFile && !file && adminMode && groupsSelectedTab==='files'"
ng-if="lookingGroup && currentGroup && !addingAgents && !editingFile && !file && adminMode && groupsSelectedTab==='files'"
class="euiFlexItem euiFlexItem--flexGrowZero height-35 kuiButton kuiButton--secondary ng-scope wz-margin-left-8" class="euiFlexItem euiFlexItem--flexGrowZero height-35 kuiButton kuiButton--secondary ng-scope wz-margin-left-8"
ng-click="editGroupAgentConfig(currentGroup)" aria-label="Edit group configuration"> ng-click="editGroupAgentConfig(currentGroup)" aria-label="Edit group configuration">
<svg class="euiIcon euiIcon--medium euiButtonIcon__icon" focusable="false" aria-hidden="true" <svg class="euiIcon euiIcon--medium euiButtonIcon__icon" focusable="false" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16"
height="16" viewBox="0 0 16 16"> height="16" viewBox="0 0 16 16">
<defs> <defs>
<path id="pencil-a" <path id="pencil-a" d="M12.148 3.148L11 2l-9 9v3h3l9-9-1.144-1.144-8.002 7.998a.502.502 0 0 1-.708 0 .502.502 0 0 1 0-.708l8.002-7.998zM11 1c.256 0 .512.098.707.293l3 3a.999.999 0 0 1 0 1.414l-9 9A.997.997 0 0 1 5 15H2a1 1 0 0 1-1-1v-3c0-.265.105-.52.293-.707l9-9A.997.997 0 0 1 11 1zM5 14H2v-3l3 3z">
d="M12.148 3.148L11 2l-9 9v3h3l9-9-1.144-1.144-8.002 7.998a.502.502 0 0 1-.708 0 .502.502 0 0 1 0-.708l8.002-7.998zM11 1c.256 0 .512.098.707.293l3 3a.999.999 0 0 1 0 1.414l-9 9A.997.997 0 0 1 5 15H2a1 1 0 0 1-1-1v-3c0-.265.105-.52.293-.707l9-9A.997.997 0 0 1 11 1zM5 14H2v-3l3 3z">
</path> </path>
</defs> </defs>
<use xlink:href="#pencil-a"></use> <use xlink:href="#pencil-a"></use>
</svg> </svg>
Edit group configuration Edit group configuration
</button> </button>
<button <button ng-if="lookingGroup && currentGroup && !addingAgents && !editingFile && !file && adminMode && groupsSelectedTab==='agents'"
ng-if="lookingGroup && currentGroup && !addingAgents && !editingFile && !file && adminMode && groupsSelectedTab==='agents'"
class="euiFlexItem euiFlexItem--flexGrowZero height-35 kuiButton kuiButton--secondary ng-scope wz-margin-left-8" class="euiFlexItem euiFlexItem--flexGrowZero height-35 kuiButton kuiButton--secondary ng-scope wz-margin-left-8"
ng-click="addMultipleAgents(true)" aria-label="Add or remove agents"> ng-click="addMultipleAgents(true)" aria-label="Add or remove agents">
<svg class="euiIcon euiIcon--medium" focusable="false" xmlns="http://www.w3.org/2000/svg" <svg class="euiIcon euiIcon--medium" focusable="false" xmlns="http://www.w3.org/2000/svg" width="16"
width="16" height="16" viewBox="0 0 16 16"> height="16" viewBox="0 0 16 16">
<path fill-rule="evenodd" <path fill-rule="evenodd" d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882z">
d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882z">
</path> </path>
</svg> </svg>
Add or remove agents Add or remove agents
@ -157,13 +139,12 @@
<md-card flex class="wz-md-card _md flex md-margin-h wz-margin-top-16" ng-if="!lookingGroup"> <md-card flex class="wz-md-card _md flex md-margin-h wz-margin-top-16" ng-if="!lookingGroup">
<md-card-content> <md-card-content>
<div layout="row"> <div layout="row">
<wz-table custom-columns="true" flex extra-limit="100" path="'/agents/groups'" <wz-table custom-columns="true" flex extra-limit="100" path="'/agents/groups'" keys="['name','count','mergedSum']"
keys="['name','count','mergedSum']" allow-click="true" row-sizes="[14,12,10]"> allow-click="true" row-sizes="[14,12,10]">
</wz-table> </wz-table>
</div> </div>
<div layout="row" layout-align="end center"> <div layout="row" layout-align="end center">
<button type="button" ng-click="downloadCsv('/agents/groups')" <button type="button" ng-click="downloadCsv('/agents/groups')" class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small">
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small">
<span class="euiButtonEmpty__content"> <span class="euiButtonEmpty__content">
<react-component name="EuiIcon" props="{type:'importAction'}" /> <react-component name="EuiIcon" props="{type:'importAction'}" />
<span class="euiButtonEmpty__text">Formatted</span> <span class="euiButtonEmpty__text">Formatted</span>
@ -176,8 +157,7 @@
<div ng-if='!addingAgents'> <div ng-if='!addingAgents'>
<!-- Group agents table --> <!-- Group agents table -->
<md-card flex class="wz-md-card _md flex md-margin-h wz-margin-top-16" <md-card flex class="wz-md-card _md flex md-margin-h wz-margin-top-16" ng-if="lookingGroup && groupsSelectedTab==='agents' && currentGroup">
ng-if="lookingGroup && groupsSelectedTab==='agents' && currentGroup">
<div layout="row" ng-show="failedErrors" class="extraHeader"> <div layout="row" ng-show="failedErrors" class="extraHeader">
<md-list> <md-list>
<md-list-item class="error-enum-configuration" ng-repeat="group in failedErrors"> <md-list-item class="error-enum-configuration" ng-repeat="group in failedErrors">
@ -187,15 +167,13 @@
</md-list-item> </md-list-item>
</md-list> </md-list>
<span flex></span> <span flex></span>
<a class='md-padding md-padding-top-10' ng-click='failedErrors = false'><i <a class='md-padding md-padding-top-10' ng-click='failedErrors = false'><i class="fa fa-times"
class="fa fa-times" aria-hidden="true"></i></a> aria-hidden="true"></i></a>
</div> </div>
<md-card-content> <md-card-content>
<div layout="row"> <div layout="row">
<wz-table flex path="'/agents/groups/' + currentGroup.name" <wz-table flex custom-columns="true" path="'/agents/groups/' + currentGroup.name" keys="['id','name','ip','status','os.name','os.version','version']"
keys="['id','name','ip','status','os.name','os.version','version']" allow-click="true" row-sizes="[14,12,10]" empty-results="'No agents were added to this group.'" />
allow-click="true" row-sizes="[14,12,10]"
empty-results="'No agents were added to this group.'" />
</div> </div>
<div layout="row" ng-if="lookingGroup && groupsSelectedTab==='agents'"> <div layout="row" ng-if="lookingGroup && groupsSelectedTab==='agents'">
<span flex></span> <span flex></span>
@ -211,19 +189,16 @@
</md-card> </md-card>
<!-- Group files table --> <!-- Group files table -->
<md-card flex class="wz-md-card _md flex md-margin-h wz-margin-top-16" <md-card flex class="wz-md-card _md flex md-margin-h wz-margin-top-16" ng-if="lookingGroup && groupsSelectedTab==='files' && !fileViewer && currentGroup">
ng-if="lookingGroup && groupsSelectedTab==='files' && !fileViewer && currentGroup">
<md-card-content> <md-card-content>
<div layout="row"> <div layout="row">
<wz-table extra-limit="100" flex path="'/agents/groups/' + currentGroup.name + '/files'" <wz-table custom-columns="true" extra-limit="100" flex path="'/agents/groups/' + currentGroup.name + '/files'"
keys="[{value:'filename',width:'300px'},'hash']" allow-click="true" keys="[{value:'filename',width:'300px'},'hash']" allow-click="true" row-sizes="[16,14,12]">
row-sizes="[16,14,12]">
</wz-table> </wz-table>
</div> </div>
<div layout="row" ng-if="lookingGroup && groupsSelectedTab==='files' && !file"> <div layout="row" ng-if="lookingGroup && groupsSelectedTab==='files' && !file">
<span flex></span> <span flex></span>
<button type="button" <button type="button" ng-click="downloadCsv('/agents/groups/' + currentGroup.name + '/files')"
ng-click="downloadCsv('/agents/groups/' + currentGroup.name + '/files')"
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"> class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small">
<span class="euiButtonEmpty__content"> <span class="euiButtonEmpty__content">
<react-component name="EuiIcon" props="{type:'importAction'}" /> <react-component name="EuiIcon" props="{type:'importAction'}" />
@ -240,19 +215,17 @@
<!-- End CSV Download button section for group files --> <!-- End CSV Download button section for group files -->
<!-- File JSON viewer section --> <!-- File JSON viewer section -->
<div flex layout="column" class="md-padding" <div flex layout="column" class="md-padding" ng-if="lookingGroup && groupsSelectedTab==='files' && file">
ng-if="lookingGroup && groupsSelectedTab==='files' && file">
<div flex layout="column"> <div flex layout="column">
<div layout="row" class="wz-padding-bottom-14"> <div layout="row" class="wz-padding-bottom-14">
<span flex class="wz-headline-title">{{ filename }}</span> <span flex class="wz-headline-title">{{ filename }}</span>
<button class="md-icon-button" ng-if="lookingGroup" aria-label="Back" <button class="md-icon-button" ng-if="lookingGroup" aria-label="Back" tooltip="Close file"
tooltip="Close file" tooltip-placement="left" ng-click="goBackFiles()"><i tooltip-placement="left" ng-click="goBackFiles()"><i class="fa fa-fw fa-close"
class="fa fa-fw fa-close" aria-hidden="true"></i></button> aria-hidden="true"></i></button>
<!--<span flex class="wz-text-right cursor-pointer color-grey" ng-click="goBackFiles()">close</span>--> <!--<span flex class="wz-text-right cursor-pointer color-grey" ng-click="goBackFiles()">close</span>-->
</div> </div>
<div flex layout="column"> <div flex layout="column">
<pre flex <pre flex class="wz-pre groupContentViewer wzXmlEditor wz-overflow-y-auto"><code wz-dynamic="file"></code></pre>
class="wz-pre groupContentViewer wzXmlEditor wz-overflow-y-auto"><code wz-dynamic="file"></code></pre>
</div> </div>
</div> </div>
</div> </div>
@ -260,8 +233,7 @@
</div> </div>
<div layout="row" class="md-padding" ng-if="addingAgents"> <div layout="row" class="md-padding" ng-if="addingAgents">
<span ng-show='!multipleSelectorLoading' class="wzMultipleSelectorCounter"><span <span ng-show='!multipleSelectorLoading' class="wzMultipleSelectorCounter"><span style='color:green'>+{{currentAdding}}</span>&nbsp;<span
style='color:green'>+{{currentAdding}}</span>&nbsp;<span
style='color:red'>-{{currentDeleting}}</span></span> style='color:red'>-{{currentDeleting}}</span></span>
<wz-multiple-selector class='wzMultipleSelector' available-items="availableAgents.data" <wz-multiple-selector class='wzMultipleSelector' available-items="availableAgents.data"
selected-items="selectedAgents.data" title-available-items="Available agents" selected-items="selectedAgents.data" title-available-items="Available agents"

9
public/templates/management/ruleset/decoders/decoders-list.html
View File

@ -20,7 +20,8 @@
</button> </button>
</div> </div>
<md-chips class="wz-chips md-padding-h wz-margin-top-16" readonly="true" ng-show="dctrl.appliedFilters.length" <md-chips class="wz-chips md-padding-h wz-margin-top-16" readonly="true" ng-hide="!dctrl.appliedFilters.length ||
(dctrl.appliedFilters.length === 1 && dctrl.includesFilter('path') && dctrl.showingLocalDecoders)"
ng-if="!dctrl.editingFile"> ng-if="!dctrl.editingFile">
<md-chip class="wz-chip" ng-show="dctrl.includesFilter('file')"> <md-chip class="wz-chip" ng-show="dctrl.includesFilter('file')">
<span>File: {{ dctrl.getFilter('file') }} <span>File: {{ dctrl.getFilter('file') }}
@ -28,7 +29,7 @@
ng-click="dctrl.removeFilter('file')"></i> ng-click="dctrl.removeFilter('file')"></i>
</span> </span>
</md-chip> </md-chip>
<md-chip class="wz-chip" ng-show="dctrl.includesFilter('path')"> <md-chip class="wz-chip" ng-show="dctrl.includesFilter('path') && !dctrl.showingLocalDecoders">
<span>Path: {{ dctrl.getFilter('path') }} <span>Path: {{ dctrl.getFilter('path') }}
<i class="fa fa-fw fa-times cursor-pointer" aria-hidden="true" <i class="fa fa-fw fa-times cursor-pointer" aria-hidden="true"
ng-click="dctrl.removeFilter('path')"></i> ng-click="dctrl.removeFilter('path')"></i>
@ -42,7 +43,7 @@
<a ng-if="adminMode" ng-click="mctrl.switchFilesSubTab('decoders')">Manage decoders files</a> <a ng-if="adminMode" ng-click="mctrl.switchFilesSubTab('decoders')">Manage decoders files</a>
<span flex></span> <span flex></span>
<wz-kbn-switch class="md-primary wz-no-top-bottom-margin" switch-model="dctrl.showingLocalDecoders" <wz-kbn-switch class="md-primary wz-no-top-bottom-margin" switch-model="dctrl.showingLocalDecoders"
switch-text="Custom decoders"></wz-kbn-switch> switch-text="Custom decoders" switch-change="dctrl.switchLocalDecoders()"></wz-kbn-switch>
</md-card-actions> </md-card-actions>
<md-card-content class="wz-padding-bottom-0"> <md-card-content class="wz-padding-bottom-0">
<wz-table custom-columns="true" ng-if="!dctrl.showingLocalDecoders" <wz-table custom-columns="true" ng-if="!dctrl.showingLocalDecoders"
@ -52,7 +53,7 @@
</wz-table> </wz-table>
<wz-table custom-columns="true" ng-if="dctrl.showingLocalDecoders" flex path="'/decoders'" <wz-table custom-columns="true" ng-if="dctrl.showingLocalDecoders" flex path="'/decoders'"
keys="['name',{value:'details.program_name',size:2,nosortable:true},{value:'details.order',size:2,nosortable:true},'file']" keys="['name',{value:'details.program_name',size:2,nosortable:true},{value:'details.order',size:2,nosortable:true},'file']"
implicit-filter="[{ name:'path',value: 'etc/decoders'}]" allow-click="true" row-sizes="[16,13,11]"> implicit-filter="dctrl.appliedFilters" allow-click="true" row-sizes="[16,13,11]">
</wz-table> </wz-table>
</md-card-content> </md-card-content>
<md-card-actions layout="row" layout-align="end center" class="layout-align-end-center layout-row"> <md-card-actions layout="row" layout-align="end center" class="layout-align-end-center layout-row">

8
public/templates/management/ruleset/files/files.html
View File

@ -45,15 +45,15 @@
</md-card-actions> </md-card-actions>
<md-card-content> <md-card-content>
<wz-table ng-if="filesctrl.filesSubTab === 'rules' && mctrl.onlyLocalFiles" flex path="'/rules/files'" <wz-table ng-if="filesctrl.filesSubTab === 'rules' && mctrl.onlyLocalFiles" flex path="'/rules/files'"
implicit-filter="[{name: 'path', value: 'etc/rules'}]" keys="[{value: 'file', width: '75px'}]" implicit-filter="[{name: 'path', value: 'etc/rules'}]" keys="['file']"
allow-click="true" row-sizes="[16,13,11]" /> allow-click="true" row-sizes="[16,13,11]" />
<wz-table ng-if="filesctrl.filesSubTab === 'rules' && !mctrl.onlyLocalFiles" flex path="'/rules/files'" <wz-table ng-if="filesctrl.filesSubTab === 'rules' && !mctrl.onlyLocalFiles" flex path="'/rules/files'"
keys="[{value: 'file', width: '75px'}]" allow-click="true" row-sizes="[16,13,11]" /> keys="['file']" allow-click="true" row-sizes="[16,13,11]" />
<wz-table ng-if="filesctrl.filesSubTab === 'decoders' && mctrl.onlyLocalFiles" flex <wz-table ng-if="filesctrl.filesSubTab === 'decoders' && mctrl.onlyLocalFiles" flex
path="'/decoders/files'" implicit-filter="[{name: 'path', value: 'etc/decoders'}]" path="'/decoders/files'" implicit-filter="[{name: 'path', value: 'etc/decoders'}]"
keys="[{value: 'file', width: '75px'}]" allow-click="true" row-sizes="[16,13,11]" /> keys="['file']" allow-click="true" row-sizes="[16,13,11]" />
<wz-table ng-if="filesctrl.filesSubTab === 'decoders' && !mctrl.onlyLocalFiles" flex <wz-table ng-if="filesctrl.filesSubTab === 'decoders' && !mctrl.onlyLocalFiles" flex
path="'/decoders/files'" keys="[{value: 'file', width: '75px'}]" allow-click="true" path="'/decoders/files'" keys="['file']" allow-click="true"
row-sizes="[16,13,11]" /> row-sizes="[16,13,11]" />
</md-card-content> </md-card-content>
</md-card> </md-card>

9
public/templates/management/ruleset/rules/rules-list.html
View File

@ -22,14 +22,15 @@
</button> </button>
</div> </div>
<md-chips class="wz-chips md-padding-h wz-margin-top-16" readonly="true" ng-show="appliedFilters.length" <md-chips class="wz-chips md-padding-h wz-margin-top-16" readonly="true" ng-hide="!appliedFilters.length ||
(appliedFilters.length === 1 && includesFilter('path') && mctrl.showingLocalRules)"
ng-if="!editingFile && !mctrl.filesSubTab"> ng-if="!editingFile && !mctrl.filesSubTab">
<md-chip class="wz-chip" ng-show="includesFilter('file')"> <md-chip class="wz-chip" ng-show="includesFilter('file')">
<span>File: {{getFilter('file')}} <span>File: {{getFilter('file')}}
<i class="fa fa-fw fa-times cursor-pointer" aria-hidden="true" ng-click="removeFilter('file')"></i> <i class="fa fa-fw fa-times cursor-pointer" aria-hidden="true" ng-click="removeFilter('file')"></i>
</span> </span>
</md-chip> </md-chip>
<md-chip class="wz-chip" ng-show="includesFilter('path')"> <md-chip class="wz-chip" ng-show="includesFilter('path') && !mctrl.showingLocalRules">
<span>Path: {{getFilter('path')}} <span>Path: {{getFilter('path')}}
<i class="fa fa-fw fa-times cursor-pointer" aria-hidden="true" ng-click="removeFilter('path')"></i> <i class="fa fa-fw fa-times cursor-pointer" aria-hidden="true" ng-click="removeFilter('path')"></i>
</span> </span>
@ -63,12 +64,12 @@
rules files</a> rules files</a>
<span flex></span> <span flex></span>
<wz-kbn-switch class="md-primary wz-no-top-bottom-margin" switch-model="mctrl.showingLocalRules" <wz-kbn-switch class="md-primary wz-no-top-bottom-margin" switch-model="mctrl.showingLocalRules"
switch-text="Custom rules"></wz-kbn-switch> switch-text="Custom rules" switch-change="switchLocalRules()"></wz-kbn-switch>
</md-card-actions> </md-card-actions>
<md-card-content class="wz-padding-bottom-0"> <md-card-content class="wz-padding-bottom-0">
<wz-table custom-columns="true" flex ng-if="mctrl.showingLocalRules" path="'/rules'" <wz-table custom-columns="true" flex ng-if="mctrl.showingLocalRules" path="'/rules'"
keys="[{value: 'id', width: '85px'},{value:'description', width: 'auto'},{value:'groups',nosortable:true, width: '250px'},{value:'pci',nosortable:true, width: '170px'},{value:'gdpr',nosortable:true,width: '170px'}, {value: 'level', width: '100px'}, {value:'file',width: '200px'}]" keys="[{value: 'id', width: '85px'},{value:'description', width: 'auto'},{value:'groups',nosortable:true, width: '250px'},{value:'pci',nosortable:true, width: '170px'},{value:'gdpr',nosortable:true,width: '170px'}, {value: 'level', width: '100px'}, {value:'file',width: '200px'}]"
implicit-filter="[{ name:'path',value: 'etc/rules'}]" allow-click="true" row-sizes="[16,14,12]"> implicit-filter="appliedFilters" allow-click="true" row-sizes="[16,14,12]">
</wz-table> </wz-table>
<wz-table custom-columns="true" ng-if="!mctrl.showingLocalRules" implicit-filter="appliedFilters" flex <wz-table custom-columns="true" ng-if="!mctrl.showingLocalRules" implicit-filter="appliedFilters" flex
path="'/rules'" path="'/rules'"

2
public/templates/settings/settings-api.html
View File

@ -104,7 +104,7 @@
<!-- End add API button section --> <!-- End add API button section -->
<!-- Add API section--> <!-- Add API section-->
<div layout="row" ng-show="!currentAPI || (ctrl.addManagerContainer && !ctrl.isEditing)"> <div layout="row" ng-show="!currentAPI || (ctrl.addManagerContainer && !ctrl.isEditing) || !ctrl.apiEntries.length">
<!-- Add API form --> <!-- Add API form -->
<form flex ng-submit="ctrl.saveSettings()" layout="column" layout-align="start stretch" <form flex ng-submit="ctrl.saveSettings()" layout="column" layout-align="start stretch"
class="margin-top-30"> class="margin-top-30">

12677
public/utils/jquery-ui.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

511
public/utils/table-col-resizable.js
View File

@ -1,511 +0,0 @@
/**
_ _____ _ _ _
| | __ \ (_) | | | |
___ ___ | | |__) |___ ___ _ ______ _| |__ | | ___
/ __/ _ \| | _ // _ \/ __| |_ / _` | '_ \| |/ _ \
| (_| (_) | | | \ \ __/\__ \ |/ / (_| | |_) | | __/
\___\___/|_|_| \_\___||___/_/___\__,_|_.__/|_|\___|
v1.6 - jQuery plugin created by Alvaro Prieto Lauroba
Licences: MIT & GPL
Feel free to use or modify this plugin as far as my full name is kept
If you are going to use this plug-in in production environments it is
strongly recommended to use its minified version: colResizable.min.js
*/
(function(global, factory) {
typeof exports === 'object' && typeof module !== 'undefined'
? (module.exports = factory())
: typeof define === 'function' && define.amd
? define(factory)
: (global.CodeMirror = factory());
})(this, function() {
'use strict';
var d = $(document); //window object
var h = $('head'); //head object
var drag = null; //reference to the current grip that is being dragged
var tables = {}; //object of the already processed tables (table.id as key)
var count = 0; //internal count to create unique IDs when needed.
//common strings for packing
var ID = 'id';
var PX = 'px';
var SIGNATURE = 'JColResizer';
var FLEX = 'JCLRFlex';
//short-cuts
var I = parseInt;
var M = Math;
var ie = navigator.userAgent.indexOf('Trident/4.0') > 0;
var S;
try {
S = sessionStorage;
} catch (e) {} //Firefox crashes when executed as local file system
//append required CSS rules
h.append(
"<style type='text/css'> .JColResizer{table-layout:fixed;} .JColResizer > tbody > tr > td, .JColResizer > tbody > tr > th{overflow:hidden;} .JCLRgrips{ height:0px; position:relative;} .JCLRgrip{margin-left:-5px; position:absolute; z-index:5; } .JCLRgrip .JColResizer{position:absolute;background-color:red;filter:alpha(opacity=1);opacity:0;width:10px;height:100%;cursor: e-resize;top:0px} .JCLRLastGrip{position:absolute; width:1px; } .JCLRgripDrag{ border-left:1px dotted black; } .JCLRFlex{width:auto!important;} .JCLRgrip.JCLRdisabledGrip .JColResizer{cursor:default; display:none;}</style>"
);
/**
* Function to allow column resizing for table objects. It is the starting point to apply the plugin.
* @param {DOM node} tb - reference to the DOM table object to be enhanced
* @param {Object} options - some customization values
*/
var init = function(tb, options) {
var t = $(tb); //the table object is wrapped
t.opt = options; //each table has its own options available at anytime
t.mode = options.resizeMode; //shortcuts
t.dc = t.opt.disabledColumns;
if (t.opt.disable) return destroy(t); //the user is asking to destroy a previously colResized table
var id = (t.id = t.attr(ID) || SIGNATURE + count++); //its id is obtained, if null new one is generated
t.p = t.opt.postbackSafe; //short-cut to detect postback safe
if (!t.is('table') || (tables[id] && !t.opt.partialRefresh)) return; //if the object is not a table or if it was already processed then it is ignored.
if (t.opt.hoverCursor !== 'e-resize')
h.append(
"<style type='text/css'>.JCLRgrip .JColResizer:hover{cursor:" +
t.opt.hoverCursor +
'!important}</style>'
); //if hoverCursor has been set, append the style
$('.JCLRgrips').remove();
t.addClass(SIGNATURE)
.attr(ID, id)
.before('<div class="JCLRgrips"/>'); //the grips container object is added. Signature class forces table rendering in fixed-layout mode to prevent column's min-width
t.g = [];
t.c = [];
t.w = t.width();
t.gc = t.prev();
t.f = t.opt.fixed; //t.c and t.g are arrays of columns and grips respectively
if (options.marginLeft) t.gc.css('marginLeft', options.marginLeft); //if the table contains margins, it must be specified
if (options.marginRight) t.gc.css('marginRight', options.marginRight); //since there is no (direct) way to obtain margin values in its original units (%, em, ...)
t.cs =
I(
ie
? tb.cellSpacing || tb.currentStyle.borderSpacing
: t.css('border-spacing')
) || 2; //table cellspacing (not even jQuery is fully cross-browser)
t.b =
I(
ie
? tb.border || tb.currentStyle.borderLeftWidth
: t.css('border-left-width')
) || 1; //outer border width (again cross-browser issues)
// if(!(tb.style.width || tb.width)) t.width(t.width()); //I am not an IE fan at all, but it is a pity that only IE has the currentStyle attribute working as expected. For this reason I can not check easily if the table has an explicit width or if it is rendered as "auto"
tables[id] = t; //the table object is stored using its id as key
createGrips(t); //grips are created
};
/**
* This function allows to remove any enhancements performed by this plugin on a previously processed table.
* @param {jQuery ref} t - table object
*/
var destroy = function(t) {
var id = t.attr(ID),
t = tables[id]; //its table object is found
if (!t || !t.is('table')) return; //if none, then it wasn't processed
t.removeClass(SIGNATURE + ' ' + FLEX).gc.remove(); //class and grips are removed
delete tables[id]; //clean up data
};
/**
* Function to create all the grips associated with the table given by parameters
* @param {jQuery ref} t - table object
*/
var createGrips = function(t) {
var th = t.find('>thead>tr:first>th,>thead>tr:first>td'); //table headers are obtained
if (!th.length)
th = t.find(
'>tbody>tr:first>th,>tr:first>th,>tbody>tr:first>td, >tr:first>td'
); //but headers can also be included in different ways
th = th.filter(':visible'); //filter invisible columns
t.cg = t.find('col'); //a table can also contain a colgroup with col elements
t.ln = th.length; //table length is stored
if (t.p && S && S[t.id]) memento(t, th); //if 'postbackSafe' is enabled and there is data for the current table, its coloumn layout is restored
th.each(function(i) {
//iterate through the table column headers
var c = $(this); //jquery wrap for the current column
var dc = t.dc.indexOf(i) != -1; //is this a disabled column?
var g = $(t.gc.append('<div class="JCLRgrip"></div>')[0].lastChild); //add the visual node to be used as grip
g.append(dc ? '' : t.opt.gripInnerHtml).append(
'<div class="' + SIGNATURE + '"></div>'
);
if (i == t.ln - 1) {
//if the current grip is the las one
g.addClass('JCLRLastGrip'); //add a different css class to stlye it in a different way if needed
if (t.f) g.html(''); //if the table resizing mode is set to fixed, the last grip is removed since table with can not change
}
g.bind('touchstart mousedown', onGripMouseDown); //bind the mousedown event to start dragging
if (!dc) {
//if normal column bind the mousedown event to start dragging, if disabled then apply its css class
g.removeClass('JCLRdisabledGrip').bind(
'touchstart mousedown',
onGripMouseDown
);
} else {
g.addClass('JCLRdisabledGrip');
}
g.t = t;
g.i = i;
g.c = c;
c.w = c.width(); //some values are stored in the grip's node data as shortcut
t.g.push(g);
t.c.push(c); //the current grip and column are added to its table object
c.width(c.w).removeAttr('width'); //the width of the column is converted into pixel-based measurements
g.data(SIGNATURE, { i: i, t: t.attr(ID), last: i == t.ln - 1 }); //grip index and its table name are stored in the HTML
});
t.cg.removeAttr('width'); //remove the width attribute from elements in the colgroup
t.find('td, th')
.not(th)
.not('table th, table td')
.each(function() {
$(this).removeAttr('width'); //the width attribute is removed from all table cells which are not nested in other tables and dont belong to the header
});
if (!t.f) {
t.removeAttr('width').addClass(FLEX); //if not fixed, let the table grow as needed
}
syncGrips(t); //the grips are positioned according to the current table layout
//there is a small problem, some cells in the table could contain dimension values interfering with the
//width value set by this plugin. Those values are removed
};
/**
* Function to allow the persistence of columns dimensions after a browser postback. It is based in
* the HTML5 sessionStorage object, which can be emulated for older browsers using sessionstorage.js
* @param {jQuery ref} t - table object
* @param {jQuery ref} th - reference to the first row elements (only set in deserialization)
*/
var memento = function(t, th) {
var w,
m = 0,
i = 0,
aux = [],
tw;
if (th) {
//in deserialization mode (after a postback)
t.cg.removeAttr('width');
if (t.opt.flush) {
S[t.id] = '';
return;
} //if flush is activated, stored data is removed
w = S[t.id].split(';'); //column widths is obtained
tw = w[t.ln + 1];
if (!t.f && tw) {
//if not fixed and table width data available its size is restored
t.width((tw *= 1));
if (t.opt.overflow) {
//if overfolw flag is set, restore table width also as table min-width
t.css('min-width', tw + PX);
t.w = tw;
}
}
for (; i < t.ln; i++) {
//for each column
aux.push((100 * w[i]) / w[t.ln] + '%'); //width is stored in an array since it will be required again a couple of lines ahead
th.eq(i).css('width', aux[i]); //each column width in % is restored
}
for (i = 0; i < t.ln; i++) t.cg.eq(i).css('width', aux[i]); //this code is required in order to create an inline CSS rule with higher precedence than an existing CSS class in the "col" elements
} else {
//in serialization mode (after resizing a column)
S[t.id] = ''; //clean up previous data
for (; i < t.c.length; i++) {
//iterate through columns
w = t.c[i].width(); //width is obtained
S[t.id] += w + ';'; //width is appended to the sessionStorage object using ID as key
m += w; //carriage is updated to obtain the full size used by columns
}
S[t.id] += m; //the last item of the serialized string is the table's active area (width),
//to be able to obtain % width value of each columns while deserializing
if (!t.f) S[t.id] += ';' + t.width(); //if not fixed, table width is stored
}
};
/**
* Function that places each grip in the correct position according to the current table layout
* @param {jQuery ref} t - table object
*/
var syncGrips = function(t) {
t.gc.width(t.w); //the grip's container width is updated
for (var i = 0; i < t.ln; i++) {
//for each column
var c = t.c[i];
t.g[i].css({
//height and position of the grip is updated according to the table layout
left:
c.offset().left -
t.offset().left +
c.outerWidth(false) +
t.cs / 2 +
PX,
height: t.opt.headerOnly
? t.c[0].outerHeight(false)
: t.outerHeight(false)
});
}
};
/**
* This function updates column's width according to the horizontal position increment of the grip being
* dragged. The function can be called while dragging if liveDragging is enabled and also from the onGripDragOver
* event handler to synchronize grip's position with their related columns.
* @param {jQuery ref} t - table object
* @param {number} i - index of the grip being dragged
* @param {bool} isOver - to identify when the function is being called from the onGripDragOver event
*/
var syncCols = function(t, i, isOver) {
var inc = drag.x - drag.l,
c = t.c[i],
c2 = t.c[i + 1];
var w = c.w + inc;
var w2 = c2.w - inc; //their new width is obtained
c.width(w + PX);
t.cg.eq(i).width(w + PX);
if (t.f) {
//if fixed mode
c2.width(w2 + PX);
t.cg.eq(i + 1).width(w2 + PX);
} else if (t.opt.overflow) {
//if overflow is set, incriment min-width to force overflow
t.css('min-width', t.w + inc);
}
if (isOver) {
c.w = w;
c2.w = t.f ? w2 : c2.w;
}
};
/**
* This function updates all columns width according to its real width. It must be taken into account that the
* sum of all columns can exceed the table width in some cases (if fixed is set to false and table has some kind
* of max-width).
* @param {jQuery ref} t - table object
*/
var applyBounds = function(t) {
var w = $.map(t.c, function(c) {
//obtain real widths
return c.width();
});
t.width((t.w = t.width())).removeClass(FLEX); //prevent table width changes
$.each(t.c, function(i, c) {
c.width(w[i]).w = w[i]; //set column widths applying bounds (table's max-width)
});
t.addClass(FLEX); //allow table width changes
};
/**
* Event handler used while dragging a grip. It checks if the next grip's position is valid and updates it.
* @param {event} e - mousemove event binded to the window object
*/
var onGripDrag = function(e) {
if (!drag) return;
var t = drag.t; //table object reference
var oe = e.originalEvent.touches;
var ox = oe ? oe[0].pageX : e.pageX; //original position (touch or mouse)
var x = ox - drag.ox + drag.l; //next position according to horizontal mouse position increment
var mw = t.opt.minWidth,
i = drag.i; //cell's min width
var l = t.cs * 1.5 + mw + t.b;
var last = i == t.ln - 1; //check if it is the last column's grip (usually hidden)
var min = i ? t.g[i - 1].position().left + t.cs + mw : l; //min position according to the contiguous cells
var max = t.f //fixed mode?
? i == t.ln - 1
? t.w - l
: t.g[i + 1].position().left - t.cs - mw
: Infinity; //max position according to the contiguous cells
x = M.max(min, M.min(max, x)); //apply bounding
drag.x = x;
drag.css('left', x + PX); //apply position increment
if (last) {
//if it is the last grip
var c = t.c[drag.i]; //width of the last column is obtained
drag.w = c.w + x - drag.l;
}
if (t.opt.liveDrag) {
//if liveDrag is enabled
if (last) {
c.width(drag.w);
if (!t.f && t.opt.overflow) {
//if overflow is set, incriment min-width to force overflow
t.css('min-width', t.w + x - drag.l);
} else {
t.w = t.width();
}
} else {
syncCols(t, i); //columns are synchronized
}
syncGrips(t);
var cb = t.opt.onDrag; //check if there is an onDrag callback
if (cb) {
e.currentTarget = t[0];
cb(e);
} //if any, it is fired
}
return false; //prevent text selection while dragging
};
/**
* Event handler fired when the dragging is over, updating table layout
* @param {event} e - grip's drag over event
*/
var onGripDragOver = function(e) {
d.unbind('touchend.' + SIGNATURE + ' mouseup.' + SIGNATURE).unbind(
'touchmove.' + SIGNATURE + ' mousemove.' + SIGNATURE
);
$('head :last-child').remove(); //remove the dragging cursor style
if (!drag) return;
drag.removeClass(drag.t.opt.draggingClass); //remove the grip's dragging css-class
if (!(drag.x - drag.l == 0)) {
var t = drag.t;
var cb = t.opt.onResize; //get some values
var i = drag.i; //column index
var last = i == t.ln - 1; //check if it is the last column's grip (usually hidden)
var c = t.g[i].c; //the column being dragged
if (last) {
c.width(drag.w);
c.w = drag.w;
} else {
syncCols(t, i, true); //the columns are updated
}
if (!t.f) applyBounds(t); //if not fixed mode, then apply bounds to obtain real width values
syncGrips(t); //the grips are updated
if (cb) {
e.currentTarget = t[0];
cb(e);
} //if there is a callback function, it is fired
if (t.p && S) memento(t); //if postbackSafe is enabled and there is sessionStorage support, the new layout is serialized and stored
}
drag = null; //since the grip's dragging is over
};
/**
* Event handler fired when the grip's dragging is about to start. Its main goal is to set up events
* and store some values used while dragging.
* @param {event} e - grip's mousedown event
*/
var onGripMouseDown = function(e) {
var o = $(this).data(SIGNATURE); //retrieve grip's data
var t = tables[o.t],
g = t.g[o.i]; //shortcuts for the table and grip objects
var oe = e.originalEvent.touches; //touch or mouse event?
g.ox = oe ? oe[0].pageX : e.pageX; //the initial position is kept
g.l = g.position().left;
g.x = g.l;
d.bind(
'touchmove.' + SIGNATURE + ' mousemove.' + SIGNATURE,
onGripDrag
).bind('touchend.' + SIGNATURE + ' mouseup.' + SIGNATURE, onGripDragOver); //mousemove and mouseup events are bound
h.append(
"<style type='text/css'>*{cursor:" +
t.opt.dragCursor +
'!important}</style>'
); //change the mouse cursor
g.addClass(t.opt.draggingClass); //add the dragging class (to allow some visual feedback)
drag = g; //the current grip is stored as the current dragging object
if (t.c[o.i].l)
for (var i = 0, c; i < t.ln; i++) {
c = t.c[i];
c.l = false;
c.w = c.width();
} //if the colum is locked (after browser resize), then c.w must be updated
return false; //prevent text selection
};
/**
* Event handler fired when the browser is resized. The main purpose of this function is to update
* table layout according to the browser's size synchronizing related grips
*/
var onResize = function() {
for (var t in tables) {
if (tables.hasOwnProperty(t)) {
t = tables[t];
var i,
mw = 0;
t.removeClass(SIGNATURE); //firefox doesn't like layout-fixed in some cases
if (t.f) {
//in fixed mode
t.w = t.width(); //its new width is kept
for (i = 0; i < t.ln; i++) mw += t.c[i].w;
//cell rendering is not as trivial as it might seem, and it is slightly different for
//each browser. In the beginning i had a big switch for each browser, but since the code
//was extremely ugly now I use a different approach with several re-flows. This works
//pretty well but it's a bit slower. For now, lets keep things simple...
for (i = 0; i < t.ln; i++)
t.c[i].css(
'width',
M.round((1000 * t.c[i].w) / mw) / 10 + '%'
).l = true;
//c.l locks the column, telling us that its c.w is outdated
} else {
//in non fixed-sized tables
applyBounds(t); //apply the new bounds
if (t.mode == 'flex' && t.p && S) {
//if postbackSafe is enabled and there is sessionStorage support,
memento(t); //the new layout is serialized and stored for 'flex' tables
}
}
syncGrips(t.addClass(SIGNATURE));
}
}
};
//bind resize event, to update grips position
$(window).bind('resize.' + SIGNATURE, onResize);
/**
* The plugin is added to the jQuery library
* @param {Object} options - an object that holds some basic customization values
*/
$.fn.extend({
colResizable: function(options) {
var defaults = {
//attributes:
resizeMode: 'fit', //mode can be 'fit', 'flex' or 'overflow'
draggingClass: 'JCLRgripDrag', //css-class used when a grip is being dragged (for visual feedback purposes)
gripInnerHtml: '', //if it is required to use a custom grip it can be done using some custom HTML
liveDrag: false, //enables table-layout updating while dragging
minWidth: 15, //minimum width value in pixels allowed for a column
headerOnly: false, //specifies that the size of the the column resizing anchors will be bounded to the size of the first row
hoverCursor: 'e-resize', //cursor to be used on grip hover
dragCursor: 'e-resize', //cursor to be used while dragging
postbackSafe: false, //when it is enabled, table layout can persist after postback or page refresh. It requires browsers with sessionStorage support (it can be emulated with sessionStorage.js).
flush: false, //when postbakSafe is enabled, and it is required to prevent layout restoration after postback, 'flush' will remove its associated layout data
marginLeft: null, //in case the table contains any margins, colResizable needs to know the values used, e.g. "10%", "15em", "5px" ...
marginRight: null, //in case the table contains any margins, colResizable needs to know the values used, e.g. "10%", "15em", "5px" ...
disable: false, //disables all the enhancements performed in a previously colResized table
partialRefresh: false, //can be used in combination with postbackSafe when the table is inside of an updatePanel,
disabledColumns: [], //column indexes to be excluded
//events:
onDrag: null, //callback function to be fired during the column resizing process if liveDrag is enabled
onResize: null //callback function fired when the dragging process is over
};
var options = $.extend(defaults, options);
//since now there are 3 different ways of resizing columns, I changed the external interface to make it clear
//calling it 'resizeMode' but also to remove the "fixed" attribute which was confusing for many people
options.fixed = true;
options.overflow = false;
switch (options.resizeMode) {
case 'flex':
options.fixed = false;
break;
case 'overflow':
options.fixed = false;
options.overflow = true;
break;
}
return this.each(function() {
init(this, options);
});
}
});
});