Merge pull request #369 from ammendonca/HAWKULAR-218

HAWKULAR-218 : App Server Detail - Web Metrics Tab

console/src/main/scripts/plugins/metrics/html/app-details/detail-web.html

@@ -1,34 +1,75 @@
 <section id="hk-web" class="hk-tab-content">
 
-  <h3 class="pull-left">Web</h3>
-  <span class="hk-update pull-right" tooltip-trigger tooltip-placement="bottom" tooltip="Last update"><i class="fa fa-clock-o"></i>{{vm.endTimeStamp | date:'HH:mm:ss'}}</span>
+  <h3 class="pull-left">Web Status</h3>
+  <span class="hk-update pull-right" tooltip-trigger tooltip-placement="top" tooltip="Last update"><i class="fa fa-clock-o"></i>{{vm.endTimeStamp | date:'HH:mm:ss'}}</span>
   <div class="panel panel-default hk-summary">
     <div class="row">
       <div class="col-sm-3 hk-summary-item">
-        <span class="hk-data">2 <i class="fa fa-flag"></i></span>
-        <span class="hk-item">Alerts</span>
+        <span class="hk-data">{{vm.alertList.length}} <i class="fa fa-flag" ng-show="vm.alertList.length > 0"></i></span>
+        <span class="hk-item">Web Alerts</span>
       </div>
       <div class="col-sm-3 hk-summary-item">
-        <span class="hk-data">1270 MB</span>
-        <span class="hk-item">Average Heap Usage</span>
+        <span class="hk-data">{{ vm.activeWebSessions | number:0 }}</span>
+        <span class="hk-item">Active Sessions (Average)</span>
       </div>
       <div class="col-sm-3 hk-summary-item">
-        <span class="hk-data">5 s</span>
-        <span class="hk-item">Last Garbage Collection (Duration)</span>
+        <span class="hk-data">{{ vm.requestTime / vm.requestCount | number:0 }} ms</span>
+        <span class="hk-item">Response Time (Average)</span>
       </div>
       <div class="col-sm-3 hk-summary-item">
-        <span class="hk-data">2000 MB</span>
-        <span class="hk-item">Maximum Heap</span>
+        <span class="hk-data">{{ vm.requestCount }}</span>
+        <span class="hk-item">Request Count</span>
       </div>
     </div>
   </div>
 
+  <!-- Alerts -->
   <div class="hk-info-top clearfix">
-    <h3 class="pull-left" tooltip-trigger tooltip-placement="top" tooltip="Expand/collapse"><button class="btn btn-link hk-trigger"><i class="fa fa-plus-square-o"></i> Alerts <span>(0)</span></button></h3>
-    <span class="hk-settings pull-right"><a href="#" ng-controller="MetricsAlertController as mac" ng-click="mac.openSetup()"><i class="fa fa-cog"></i>Alert Settings</a></span>
+    <h3 class="pull-left">
+      <button class="btn btn-link hk-trigger" ng-click="showAllAlerts = !showAllAlerts" tooltip-trigger tooltip-placement="top" tooltip="Expand/collapse"><i class="fa" ng-show="vm.alertList.length > 0" ng-class="showAllAlerts ? 'fa-minus-square-o' : 'fa-plus-square-o'"></i> Web Alerts <span ng-show="vm.alertList.length > 0">({{showAllAlerts ? vm.alertList.length : vm.math.min(vm.alertList.length, 3)}} of {{vm.alertList.length}})</span></button>
+    </h3>
+    <!--<span class="hk-settings pull-right"><a href="#" ng-controller="MetricsAlertController as mac" ng-click="mac.openSetup()"><i class="fa fa-cog"></i>Alert Settings</a></span>-->
   </div>
   <div class="clearfix">
-    <p>No alerts.</p>
+    <!-- No Alerts -->
+    <div class="panel panel-default alert alert-info" ng-show="vm.alertList.length === 0">
+      <div class="hk-alert-icon"><i class="fa fa-flag gray"></i></div>
+      <div>No alerts have been fired in this category and time range.</div>
+    </div>
+    <!-- Alerts exist -->
+    <div class="panel panel-default alert alert-danger" ng-repeat="alert in vm.alertList | limitTo: (showAllAlerts ? 100000 : 3) track by $index">
+      <div class="hk-alert-icon"><i class="fa fa-flag"></i></div>
+      <div class="hk-date">{{alert.evalSets[0][0].evalTimestamp | date:'medium' }}</div>
+      <div class="hk-event"><strong>Alert Summary</strong>: alert details.</div>
+    </div>
+  </div>
+
+
+  <div class="hk-info-top clearfix">
+    <h3 class="pull-left">Metrics</h3>
+    <div class="hk-update pull-right">
+      <button class="btn btn-link hk-chart-update" tooltip-trigger tooltip-placement="top" tooltip="Update chart" ng-click="vm.getWebChartData()"><i class="fa fa-refresh"></i></button>
+    </div>
+  </div>
+
+  <div class="panel panel-default hk-graph" >
+    <h2>Web Sessions</h2>
+    <div class="metrics-chart">
+      <!-- HINT: colors for the chart can be changed in the hawkular-charts.css -->
+      <hawkular-chart
+        multi-data="{{vm.chartWebSessionData}}"
+        chart-type="multiline"
+        y-axis-units="Count (#)"
+        chart-height="250">
+      </hawkular-chart>
+    </div>
+    <div class="hk-legend text-left">
+      <span><i class="fa fa-circle hk-green"></i>Active Sessions</span>
+      <!--<span><i class="fa fa-circle hk-blue"></i>Max Active Sessions</span>-->
+      <span><i class="fa fa-circle hk-orange"></i>Expired Sessions</span>
+      <span><i class="fa fa-circle hk-red"></i>Rejected Sessions</span>
+    </div>
   </div>
 
-</section>
+
+</section>

console/src/main/scripts/plugins/metrics/ts/app-details/appServerWebDetails.ts

@@ -22,7 +22,182 @@
 module HawkularMetrics {
 
   export class AppServerWebDetailsController {
+
+    /// this is for minification purposes
+    public static $inject = ['$location', '$scope', '$rootScope', '$interval', '$log', '$filter', '$routeParams',
+      '$modal', 'HawkularInventory', 'HawkularMetric', 'HawkularAlert', 'HawkularAlertsManager', 'HawkularErrorManager',
+      '$q', 'md5'];
+
+    public static MAX_ACTIVE_COLOR = '#1884c7'; /// blue
+    public static EXPIRED_COLOR = '#f57f20'; /// orange
+    public static ACTIVE_COLOR = '#49a547'; /// green
+    public static REJECTED_COLOR = '#e12226'; /// red
+
+    public alertList;
+
+    public activeWebSessions: number = 0;
+    public requestTime: number = 0;
+    public requestCount: number = 0;
+
+    public chartWebSessionData: IMultiDataPoint[] = [];
+
+    constructor(private $location: ng.ILocationService,
+                private $scope: any,
+                private $rootScope: IHawkularRootScope,
+                private $interval: ng.IIntervalService,
+                private $log: ng.ILogService,
+                private $filter: ng.IFilterService,
+                private $routeParams: any,
+                private $modal: any,
+                private HawkularInventory: any,
+                private HawkularMetric: any,
+                private HawkularAlert: any,
+                private HawkularAlertsManager: HawkularMetrics.IHawkularAlertsManager,
+                private HawkularErrorManager: HawkularMetrics.IHawkularErrorManager,
+                private $q: ng.IQService,
+                private md5: any,
+                public startTimeStamp:TimestampInMillis,
+                public endTimeStamp:TimestampInMillis) {
+      $scope.vm = this;
+
+      this.startTimeStamp = +moment().subtract(($routeParams.timeOffset || 3600000), 'milliseconds');
+      this.endTimeStamp = +moment();
+
+      if ($rootScope.currentPersona) {
+        this.getWebData();
+        this.getWebChartData();
+      } else {
+        // currentPersona hasn't been injected to the rootScope yet, wait for it..
+        $rootScope.$watch('currentPersona', (currentPersona) => currentPersona &&
+        this.getWebData());
+        this.getWebChartData();
+      }
+
+      this.autoRefresh(20);
+    }
+
+    private autoRefreshPromise: ng.IPromise<number>;
+
+    public autoRefresh(intervalInSeconds: number): void {
+      this.autoRefreshPromise = this.$interval(() => {
+        this.getWebData();
+        this.getWebChartData();
+      }, intervalInSeconds * 1000);
+
+      this.$scope.$on('$destroy', () => {
+        this.$interval.cancel(this.autoRefreshPromise);
+      });
+    }
+
+    private formatBucketedChartOutput(response):IChartDataPoint[] {
+
+      //  The schema is different for bucketed output
+      return _.map(response, (point:IChartDataPoint) => {
+        return {
+          timestamp: point.start,
+          date: new Date(point.start),
+          value: !angular.isNumber(point.value) ? 0 : point.value,
+          avg: (point.empty) ? 0 : point.avg,
+          min: !angular.isNumber(point.min) ? 0 : point.min,
+          max: !angular.isNumber(point.max) ? 0 : point.max,
+          percentile95th: !angular.isNumber(point.percentile95th) ? 0 : point.percentile95th,
+          median: !angular.isNumber(point.median) ? 0 : point.median,
+          empty: point.empty
+        };
+      });
+    }
+
+    public getWebData(): any {
+      this.alertList = []; // FIXME: when we have alerts for app server
+      this.endTimeStamp = this.$routeParams.endTime || +moment();
+      this.startTimeStamp = this.endTimeStamp - (this.$routeParams.timeOffset || 3600000);
+
+      this.HawkularMetric.GaugeMetricData(this.$rootScope.currentPersona.id).queryMetrics({
+        gaugeId: 'MI~R~[' + this.$routeParams.resourceId +
+          '~/]~MT~WildFly Aggregated Web Metrics~Aggregated Active Web Sessions',
+        start: this.startTimeStamp,
+        end: this.endTimeStamp,
+        buckets: 1}, (resource) => {
+        this.activeWebSessions = resource[0].avg;
+      }, this);
+      this.HawkularMetric.GaugeMetricData(this.$rootScope.currentPersona.id).queryMetrics({
+        gaugeId: 'MI~R~[' + this.$routeParams.resourceId +
+          '~/]~MT~WildFly Aggregated Web Metrics~Aggregated Servlet Request Time',
+        start: this.startTimeStamp,
+        end: this.endTimeStamp}, (resource) => {
+        this.requestTime = resource[0].value;
+      }, this);
+      this.HawkularMetric.GaugeMetricData(this.$rootScope.currentPersona.id).queryMetrics({
+        gaugeId: 'MI~R~[' + this.$routeParams.resourceId +
+          '~/]~MT~WildFly Aggregated Web Metrics~Aggregated Servlet Request Count',
+        start: this.startTimeStamp,
+        end: this.endTimeStamp}, (resource) => {
+        this.requestCount = resource[0].value - resource[resource.length-1].value;
+      }, this);
+    }
+
+    public getWebChartData(): any {
+
+      this.endTimeStamp = this.$routeParams.endTime || +moment();
+      this.startTimeStamp = this.endTimeStamp - (this.$routeParams.timeOffset || 3600000);
+
+      this.HawkularMetric.GaugeMetricData(this.$rootScope.currentPersona.id).queryMetrics({
+        gaugeId: 'MI~R~[' + this.$routeParams.resourceId +
+          '~/]~MT~WildFly Aggregated Web Metrics~Aggregated Expired Web Sessions',
+        start: this.startTimeStamp,
+        end: this.endTimeStamp, buckets:60}, (data) => {
+        this.chartWebSessionData[0] = { key: 'Expired Sessions',
+          color: AppServerWebDetailsController.EXPIRED_COLOR, values: this.formatBucketedChartOutput(data) };
+      }, this);
+      this.HawkularMetric.GaugeMetricData(this.$rootScope.currentPersona.id).queryMetrics({
+        gaugeId: 'MI~R~[' + this.$routeParams.resourceId +
+          '~/]~MT~WildFly Aggregated Web Metrics~Aggregated Rejected Web Sessions',
+        start: this.startTimeStamp,
+        end: this.endTimeStamp, buckets:60}, (data) => {
+        this.chartWebSessionData[1] = { key: 'Rejected Sessions',
+          color: AppServerWebDetailsController.REJECTED_COLOR, values: this.formatBucketedChartOutput(data) };
+      }, this);
+      this.HawkularMetric.GaugeMetricData(this.$rootScope.currentPersona.id).queryMetrics({
+        gaugeId: 'MI~R~[' + this.$routeParams.resourceId +
+          '~/]~MT~WildFly Aggregated Web Metrics~Aggregated Active Web Sessions',
+        start: this.startTimeStamp,
+        end: this.endTimeStamp, buckets:60}, (data) => {
+        this.chartWebSessionData[2] = { key: 'Active Sessions',
+          color: AppServerWebDetailsController.ACTIVE_COLOR, values: this.formatBucketedChartOutput(data) };
+      }, this);
+      /* FIXME: Currently this is always returning negative values, as WFLY returns -1 per webapp. is it config value?
+      this.HawkularMetric.GaugeMetricData(this.$rootScope.currentPersona.id).queryMetrics({
+        gaugeId: 'MI~R~[' + this.$routeParams.resourceId +
+        '~/]~MT~WildFly Aggregated Web Metrics~Aggregated Max Active Web Sessions',
+        start: this.startTimeStamp,
+        end: this.endTimeStamp, buckets:60}, (data) => {
+        this.chartWebSessionData[3] = { key: 'Max Active Sessions',
+          color: AppServerWebDetailsController.MAX_ACTIVE_COLOR, values: this.formatBucketedChartOutput(data) };
+      }, this);
+      */
+
+      /*
+      this.HawkularMetric.GaugeMetricData(this.$rootScope.currentPersona.id).queryMetrics({
+        gaugeId: 'MI~R~[' + this.$routeParams.resourceId +
+          '~/]~MT~WildFly Aggregated Web Metrics~Aggregated Servlet Request Time',
+        start: this.startTimeStamp,
+        end: this.endTimeStamp, buckets:60}, (data) => {
+        this.chartWebData[4] = { key: 'NonHeap Committed',
+          color: AppServerWebDetailsController.COMMITTED_COLOR, values: this.formatBucketedChartOutput(data) };
+      }, this);
+      this.HawkularMetric.GaugeMetricData(this.$rootScope.currentPersona.id).queryMetrics({
+        gaugeId: 'MI~R~[' + this.$routeParams.resourceId +
+          '~/]~MT~WildFly Aggregated Web Metrics~Aggregated Servlet Request Count',
+        start: this.startTimeStamp,
+        end: this.endTimeStamp, buckets:60}, (data) => {
+        this.chartWebData[5] = { key: 'NonHeap Used',
+          color: AppServerWebDetailsController.USED_COLOR, values: this.formatBucketedChartOutput(data) };
+      }, this);
+      */
+    }
+
   }
 
+
   _module.controller('HawkularMetrics.AppServerWebDetailsController', AppServerWebDetailsController);
 }

console/src/main/scripts/plugins/metrics/ts/metricsAppServerDetails.ts

@@ -45,7 +45,7 @@ module HawkularMetrics {
         {id: 'transactions', name: 'Transactions', enabled: false,
           src:'plugins/metrics/html/app-details/detail-transactions.html',
           controller: HawkularMetrics.AppServerTransactionsDetailsController},
-        {id: 'web', name: 'Web', enabled: false,
+        {id: 'web', name: 'Web', enabled: true,
           src:'plugins/metrics/html/app-details/detail-web.html',
           controller: HawkularMetrics.AppServerWebDetailsController},
         {id: 'datasources', name: 'Datasources', enabled: true,