Skip to content
This repository has been archived by the owner on Nov 9, 2017. It is now read-only.

Commit

Permalink
HAWKULAR-127 Change version of angular-bootstrap and angular-patternf…
Browse files Browse the repository at this point in the history
…ly so we can use newest version of simple filter from angular patternfly. Create new enums ServerStatus - for easy creation of server statuses. Server type - egain easy creation of server type for filtering. Create new directive, TableFilters for filtering over specific table. insert this directive to server list. Fix of NaN in Web alerts.

HAWKULAR-127 add search function to controller, which takes care of data. This way we can use searching in every table
  • Loading branch information
karelhala committed Nov 20, 2015
1 parent 98623d0 commit 38f987d
Show file tree
Hide file tree
Showing 8 changed files with 238 additions and 64 deletions.
4 changes: 2 additions & 2 deletions console/src/main/scripts/bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@
],
"dependencies": {
"angular-animate": "1.4.4",
"angular-bootstrap": "0.11.0",
"angular-bootstrap": "0.13.4",
"angular-md5": "0.1.7",
"angular-momentjs": "0.1.9",
"angular-patternfly": "2.3.1",
"angular-patternfly": "2.6.1",
"angular-scroll": "0.6.5",
"angular-ui-select": "0.11.2",
"angular-toastr": "1.4.1",
Expand Down
77 changes: 27 additions & 50 deletions console/src/main/scripts/plugins/metrics/html/app-server-list.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,49 +20,15 @@ <h2 class="card-pf-title">
</h2>
</div>
</div>
<div class="col-lg-2 col-md-4">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<i class="fa fa-arrow-up"></i>
<div ng-repeat="state in vm.serverStatusArray">
<div class="col-lg-2 col-md-4">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<i class="fa {{state.icon}}"></i>
<span class="card-pf-aggregate-status-count">
{{(vm.resourceList|filter:{state: 'up'}:true).length}}</span> Up
</h2>
</div>
</div>
<div class="col-lg-2 col-md-4">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<i class="fa fa-arrow-down"></i>
<span class="card-pf-aggregate-status-count">
{{(vm.resourceList|filter:{state: 'down'}:true).length}}</span> Down
</h2>
</div>
</div>
<div class="col-lg-2 col-md-4">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<i class="fa fa-chain-broken"></i>
<span class="card-pf-aggregate-status-count">
{{(vm.resourceList|filter:{state: 'unknown'}:true).length}}</span> Unknown
</h2>
</div>
</div>
<div class="col-lg-2 col-md-4">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<i class="fa fa-spinner"></i>
<span class="card-pf-aggregate-status-count">
{{(vm.resourceList|filter:{state: 'starting'}:true).length}}</span> Starting
</h2>
</div>
</div>
<div class="col-lg-2 col-md-4">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<i class="fa fa-repeat"></i>
<span class="card-pf-aggregate-status-count">
{{(vm.resourceList|filter:{state: 'restart required'}:true).length}}</span> Restart Required
</h2>
{{(vm.resourceList|filter:{state: state.state}:true).length}}</span> {{state.value}}
</h2>
</div>
</div>
</div>
</div>
Expand All @@ -77,13 +43,21 @@ <h1>No application servers set up.</h1>
</div>

<div ng-show="vm.resourceList.length">
<div class="dataTables_header">
<div id="DataTables_Table_0_filter" class="dataTables_filter">
<label><input type="search" ng-model="vm.search" aria-controls="DataTables_Table_0"></label>
</div>
<div class="row">
<div class="col-md-12">
<table-filters
active-filters="vm.activeFilters"
filtered-resource-list="vm.filteredResourceList"
resource-list="vm.resourceList"
filter-by="vm.filterBy(filters)"
>

</table-filters>
</div>
</div>
<div class="dataTables_header">
<div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite">
Showing <b>1</b> to <b>{{(vm.resourceList | filter:vm.search).length}}</b> of
Showing <b>1</b> to <b>{{(vm.filteredResourceList | filter:vm.search).length}}</b> of
<b>{{vm.resourceList.length}}</b> Items
</div>
</div>
Expand All @@ -104,7 +78,10 @@ <h1>No application servers set up.</h1>
<tbody>
<tr class="odd">
<td valign="top" colspan="5" class="dataTables_empty"
ng-show="vm.search && (vm.resourceList | filter:vm.search).length === 0">
ng-show="
vm.filteredResourceList.length === 0 ||
(vm.search && (vm.filteredResourceList | filter:vm.search).length === 0)
">
<p>Suggestions</p>
<ul>
<li>Check the syntax of the search term.</li>
Expand All @@ -114,7 +91,7 @@ <h1>No application servers set up.</h1>
</ul>
</td>
</tr>
<tr ng-repeat="res in vm.resourceList | filter:vm.search | orderBy:'properties.url':vm.reverse">
<tr ng-repeat="res in vm.filteredResourceList | filter:vm.search | orderBy:'properties.url':vm.reverse">
<td class="state">
<i class="fa fa-arrow-up" ng-show="res.state === 'up'"></i>
<i class="fa fa-arrow-down" ng-show="res.state === 'down'"></i>
Expand Down Expand Up @@ -150,7 +127,7 @@ <h1>No application servers set up.</h1>
</table>
<div class="dataTables_footer">
<hk-data-pagination resource-list="vm.resourceList" current-page="vm.resCurPage" headers="vm.headerLinks"
page-setter="vm.setPage(pageNumber)" per-page="vm.resPerPage"></hk-data-pagination>
page-setter="vm.setPage" per-page="vm.resPerPage"></hk-data-pagination>
</div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<div>
<div pf-simple-filter id="exampleSimpleFilter" config="vm.filterConfig" class="ng-isolate-scope"></div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
///
/// Copyright 2015 Red Hat, Inc. and/or its affiliates
/// and other contributors as indicated by the @author tags.
///
/// Licensed under the Apache License, Version 2.0 (the "License");
/// you may not use this file except in compliance with the License.
/// You may obtain a copy of the License at
///
/// http://www.apache.org/licenses/LICENSE-2.0
///
/// Unless required by applicable law or agreed to in writing, software
/// distributed under the License is distributed on an "AS IS" BASIS,
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
/// See the License for the specific language governing permissions and
/// limitations under the License.
///

/// <reference path="../metricsPlugin.ts"/>
/// <reference path="../../../includes.ts"/>

module HawkularMetrics {

class FilterController {
public filterConfig: any;

/**
* Watch for changes of resourceList and filteredResourceList of $scope.
* If resourceList is changed, call filter function.
* If filteredResourceList is changed, recalculate number of results from filters.
* @param $scope this variable holds resourceList and filteredResourceList objects.
*/
private watchResourceList($scope) {
let _self = this;
$scope.$watch(angular.bind(this, function () {
return $scope.resourceList;
}), function (newResourceList) {
if (newResourceList !== undefined) {
$scope.filterBy({filters:_self.filterConfig.appliedFilters});
}
});
$scope.$watch(angular.bind(this, function () {
return $scope.filteredResourceList;
}), function (newResourceList) {
if (newResourceList !== undefined) {
_self.filterConfig.resultsCount = newResourceList.length;
}
});
}

/**
* Method for initializing of filters on table.
* @param activeFilters:any[] array of filter config objects.
* @param $scope this hold information about current resourceList and filteredResourceList.
*/
private initFilters(activeFilters:any[], $scope) {
let _self = this;
_self.filterConfig = {
resultsCount: 0,
appliedFilters: [],
fields: activeFilters,
onFilterChange: function(filters) {
$scope.filterBy({filters: filters});
}
};
}
}

let filterLink = ($scope:any, element:ng.IAugmentedJQuery, attrs:ng.IAttributes) => {
$scope.vm.initFilters($scope.activeFilters, $scope);
$scope.vm.watchResourceList($scope);
};

export class HkTableFilters {
public controller:any;
public controllerAs:string = 'vm';
public link:any;
public templateUrl = 'plugins/metrics/html/directives/table-filters.html';
public scope = {
resourceList: '=',
filteredResourceList: '=',
activeFilters: '=',
filterBy: '&'
};
public replace = 'true';
constructor() {
this.controller = FilterController;
this.link = filterLink;
}
public static Factory() {
let directive = () => {
return new HkTableFilters();
};

directive['$inject'] = [];

return directive;
}
}

_module.directive('tableFilters', [HawkularMetrics.HkTableFilters.Factory()]);
}
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
module HawkularMetrics {
/// TODO: use ControllerAs syntax

let paginationLink = ($scope:any) => {
let paginationLink = ($scope:any, element:ng.IAugmentedJQuery, attrs:ng.IAttributes) => {

$scope.currentPageView = $scope.currentPage + 1;
$scope.pagesNumber = getPagesNumber();
Expand Down Expand Up @@ -72,9 +72,9 @@ module HawkularMetrics {
};

class HkPagination {
public link:($scope:any) => void;
public link:($scope:any, element:ng.IAugmentedJQuery, attrs:ng.IAttributes) => void;
public templateUrl = 'plugins/metrics/html/url-pagination.html';
public $scope = {
public scope = {
resourceList: '=',
currentPage: '=',
linkHeader: '=',
Expand All @@ -99,12 +99,10 @@ module HawkularMetrics {
}
}

_module.directive('hkPagination', HkPagination.Factory());

class HkDataPagination {
public link:($scope:ng.IScope) => void;
public link:($scope:any, element:ng.IAugmentedJQuery, attrs:ng.IAttributes) => void;
public templateUrl = 'plugins/metrics/html/data-pagination.html';
public $scope = {
public scope = {
resourceList: '=',
currentPage: '=',
linkHeader: '=',
Expand All @@ -129,5 +127,6 @@ module HawkularMetrics {
}
}

_module.directive('hkPagination', HkPagination.Factory());
_module.directive('hkDataPagination', HkDataPagination.Factory());
}

0 comments on commit 38f987d

Please sign in to comment.