HAWKULAR-864 add percent number in donut graphs. Fix labels, so it is…

… not needed to wait for refresh after inserting first label. Remove number of results in server list. Change message when no results are filtered. Fix wrong number of visible results, when filtering (filtering now on javascript not in HTML).
hawkular · Jan 6, 2016 · 255fb85 · 255fb85
1 parent 4309ede
commit 255fb85
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 23 deletions.
diff --git a/console/src/main/scripts/plugins/metrics/html/app-server-list.html b/console/src/main/scripts/plugins/metrics/html/app-server-list.html
@@ -35,8 +35,6 @@ <h2 class="card-pf-title">
       </div>
     </div>
 
-    <h3>Application Servers ({{vm.resourceList.length}})</h3>
-
     <div class="blank-slate-pf" ng-show="vm.resourceList.$resolved && !vm.resourceList.length">
       <div class="blank-slate-pf-icon">
         <i class="fa fa-server"></i>
@@ -59,8 +57,9 @@ <h1>No application servers set up.</h1>
       </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.filteredResourceList | filter:vm.search).length}}</b> of
-          <b>{{vm.resourceList.length}}</b> Items
+          <span ng-show="vm.filteredResourceList.length !== 0">Showing <b>1</b> to <b>{{vm.filteredResourceList.length}}</b> of
+          <b>{{vm.filteredResourceList.length}}</b> Items</span>
+          <span ng-hide="vm.filteredResourceList.length !== 0">No results</span>
         </div>
       </div>
       <table class="datatable table table-striped table-bordered" ng-show="vm.resourceList.length">
@@ -84,13 +83,7 @@ <h1>No application servers set up.</h1>
                 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>
-              <li>Check that the correct menu option is chosen (token ID vs. user ID).</li>
-              <li>Use wildcards (* to match zero or more characters or ? to match a single character).</li>
-              <li>Clear the search field, then click Search to return to the 20 most recent records.</li>
-            </ul>
+            <p>No results. Try refining your search.</p>
           </td>
         </tr>
         <tr ng-repeat="res in vm.filteredResourceList | filter:vm.search | orderBy:'properties.url':vm.reverse">

diff --git a/console/src/main/scripts/plugins/metrics/html/directives/overview/donut-chart.html b/console/src/main/scripts/plugins/metrics/html/directives/overview/donut-chart.html
@@ -3,7 +3,7 @@
     <div class="hk-data">{{usage}}</div>
     <div class="hk-info">
       <div ng-if="chartConfig">
-        <div pf-c3-chart id="{{graphId}}"  config="chartConfig"></div>
+        <div class="hk-donut-chart" pf-c3-chart id="{{graphId}}"  config="chartConfig"></div>
       </div>
     </div>
   </div>

diff --git a/console/src/main/scripts/plugins/metrics/less/metrics.less b/console/src/main/scripts/plugins/metrics/less/metrics.less
@@ -651,6 +651,13 @@ a:hover {
   }
 }
 
+.hk-donut-chart {
+  .c3-chart-arcs-title {
+    dominant-baseline: central;
+    font-size: 1.4em;
+  }
+}
+
 
 // Control Actions Bar
 

diff --git a/console/src/main/scripts/plugins/metrics/ts/appServerList.ts b/console/src/main/scripts/plugins/metrics/ts/appServerList.ts
@@ -24,9 +24,6 @@ module HawkularMetrics {
 
   export class AppServerListController {
     /// this is for minification purposes
-    public static $inject = ['$location', '$scope', '$rootScope', '$interval', '$log', '$filter', '$modal',
-        'HawkularInventory', 'HawkularMetric',  '$q',
-        'md5', 'HkHeaderParser'];
 
     private resourceList;
     private filteredResourceList;
@@ -108,9 +105,8 @@ module HawkularMetrics {
     }
 
     public filterBy(filters:any):void {
-      let _self = this;
-      let filterObj = _self.resourceList;
-      _self['search'] = '';
+      let filterObj = this.resourceList;
+      let searchParam = '';
       filters.forEach((filter) => {
         filterObj = filterObj.filter((item) => {
           if (filter.value === 'All') {
@@ -122,12 +118,13 @@ module HawkularMetrics {
             case 'state':
               return item.state.toLowerCase() === filter.value.toLowerCase();
             case 'byText':
-              _self['search'] = filter.value;
+              searchParam = filter.value;
               return true;
           }
         });
       });
-      _self.filteredResourceList = filterObj;
+      filterObj = this.$filter('filter')(filterObj, searchParam);
+      this.filteredResourceList = filterObj;
     }
 
     public setPage(page): void {

diff --git a/console/src/main/scripts/plugins/metrics/ts/directives/overview/serverDetailsDirective.ts b/console/src/main/scripts/plugins/metrics/ts/directives/overview/serverDetailsDirective.ts
@@ -84,7 +84,9 @@ module HawkularMetrics {
             feedId: this.feedId,
             resourcePath: this.resourceId
           },
-          {properties});
+          {properties}, (result) => {
+            this.serverInfo['properties'] = properties;
+          });
       }
     }
 

diff --git a/console/src/main/scripts/plugins/metrics/ts/directives/overview/statusOverviewDirective.ts b/console/src/main/scripts/plugins/metrics/ts/directives/overview/statusOverviewDirective.ts
@@ -22,12 +22,14 @@ module HawkularMetrics {
   export class StatusOverviewController {
 
     public initPie(data) {
+      let used = data.inUseCount.value / (data.inUseCount.value + data.availableCount.value) * 100 || 0;
       data.chartConfig = {
         type: 'donut',
         donut: {
           label: {
             show: false
           },
+          title: used + '%',
           width: 10
         },
         size: {
@@ -39,11 +41,10 @@ module HawkularMetrics {
         color: {
           pattern: ['#0088CE','#D1D1D1']
         },
-        tooltip: {},
         data: {
           type: 'donut',
           columns: [
-            ['Used', data.inUseCount.value / (data.inUseCount.value + data.availableCount.value) * 100 || 0],
+            ['Used', used],
             ['Available', 100]
           ],
           groups: [