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

Commit

Permalink
HAWKULAR-217 : Initial implementation for JVM Metrics tab. Includes o…
Browse files Browse the repository at this point in the history
…ther (needed) changes

Included changes for dealing better with tabs and splitting the Details controllers
  • Loading branch information
ammendonca committed Jun 24, 2015
1 parent 9029546 commit e4261c3
Show file tree
Hide file tree
Showing 16 changed files with 591 additions and 322 deletions.
Original file line number Diff line number Diff line change
@@ -1,33 +1,17 @@
<div class="hk-screen-content" ng-controller="HawkularMetrics.AppServerDetailsController as vm">
<div class="hk-screen-content" ng-controller="HawkularMetrics.AppServerDetailsController as tabs">

<hawkular-sidebar ng-controller="Sidebar.SidebarController">
<div class="hk-nav-tabs-container">
<ul class="nav nav-tabs nav-tabs-pf" ng-init="vm.activeTab = vm.activeTab || 'jvm-metrics'">
<!--
<li ng-class="vm.activeTab === 'alerts' ? 'active' : ''"><a href="#" ng-click="vm.activeTab = 'alerts'" class="hk-alerts">All Alerts</a></li>
<li ng-class="vm.activeTab === 'jvm-metrics' ? 'active' : ''"><a href="#" ng-click="vm.activeTab = 'jvm-metrics'" class="hk-jvm-metrics">JVM <span class="label label-danger label-alert pull-right">3</span></a></li>
-->
<li ng-class="vm.activeTab === 'jvm-metrics' ? 'active' : ''"><a href="#" ng-click="vm.activeTab = 'jvm-metrics'" class="hk-jvm-metrics">JVM</a></li>
<!--<li ng-class="vm.activeTab === 'web' ? 'active' : ''"><a href="#" ng-click="vm.activeTab = 'web'" class="hk-web">Web</a></li>-->
<li ng-class="vm.activeTab === 'deployments' ? 'active' : ''"><a href="#" ng-click="vm.activeTab = 'deployments'" class="hk-deployments">Deployments</a></li>

<!--
<li ng-class="vm.activeTab === 'jms' ? 'active' : ''"><a href="#" ng-click="vm.activeTab = 'jms'" class="hk-jms">JMS</a></li>
<li ng-class="vm.activeTab === 'transactions' ? 'active' : ''"><a href="#" ng-click="vm.activeTab = 'transactions'" class="hk-transactions">Transactions</a></li>
-->
<li ng-class="vm.activeTab === 'datasources' ? 'active' : ''"><a href="#" ng-click="vm.activeTab = 'datasources'" class="hk-datasources">Datasources</a></li>
<ul class="nav nav-tabs nav-tabs-pf" ng-init="tabs.activeTab = tabs.activeTab || 'jvm'">
<li ng-repeat="tab in tabs.availableTabs" ng-class="tabs.activeTab === tab.id ? 'active' : ''" ng-show="tab.enabled">
<a href="#" ng-click="tabs.activeTab = tab.id" class="hk-{{tab.id}}">{{tab.name}} <span class="label label-danger label-alert pull-right" ng-show="false">3</span></a>
</li>
</ul>
</div>
</hawkular-sidebar>

<div ng-repeat="tab in tabs.availableTabs">{{tab.controller}}</div>

<ng-include src="'plugins/metrics/html/app-details/detail-alerts.html'"></ng-include>
<ng-include src="'plugins/metrics/html/app-details/detail-jvm.html'"></ng-include>
<ng-include src="'plugins/metrics/html/app-details/detail-web.html'"></ng-include>
<ng-include src="'plugins/metrics/html/app-details/detail-jms.html'"></ng-include>
<ng-include src="'plugins/metrics/html/app-details/detail-transactions.html'"></ng-include>
<ng-include src="'plugins/metrics/html/app-details/detail-deployments.html'"></ng-include>
<ng-include src="'plugins/metrics/html/app-details/detail-datasources.html'"></ng-include>

<ng-include ng-repeat="tab in tabs.availableTabs" src="tab.src" ng-if="tabs.activeTab === tab.id" ng-controller="tab.controller"></ng-include>

</div>
Original file line number Diff line number Diff line change
@@ -1,33 +1,32 @@
<section id="hk-alerts" class="hk-tab-content">

<section id="hk-alerts" class="hk-tab-content" ng-if="vm.activeTab === 'alerts'">

<div class="hk-info-top clearfix">
<h3 class="pull-left" tooltip-trigger tooltip-placement="top" tooltip="Expand/collapse">Alerts <span>(29)</span></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 class="hk-info-top clearfix">
<h3 class="pull-left" tooltip-trigger tooltip-placement="top" tooltip="Expand/collapse">Alerts <span>(29)</span></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">
<div class="panel panel-default alert alert-danger">
<div class="hk-alert-icon">
<i class="fa fa-flag"></i>
</div>
<div class="hk-date">
12 Feb, 5:35 PM
</div>
<div class="hk-event">
Server <strong>down</strong> for 4 minutes (until 5:39 PM).
</div>
</div>
<div class="clearfix">
<div class="panel panel-default alert alert-danger">
<div class="hk-alert-icon">
<i class="fa fa-flag"></i>
</div>
<div class="hk-date">
12 Feb, 5:35 PM
</div>
<div class="hk-event">
Server <strong>down</strong> for 4 minutes (until 5:39 PM).
</div>
</div>
<div class="panel panel-default alert alert-danger">
<div class="hk-alert-icon">
<i class="fa fa-flag"></i>
</div>
<div class="hk-date">
11 Feb, 3:53 PM
</div>
<div class="hk-event">
<strong>Response time</strong> was above the threshold for 7 minutes (until 4:00 PM).
</div>
</div>
<div class="panel panel-default alert alert-danger">
<div class="hk-alert-icon">
<i class="fa fa-flag"></i>
</div>
<div class="hk-date">
11 Feb, 3:53 PM
</div>
<div class="hk-event">
<strong>Response time</strong> was above the threshold for 7 minutes (until 4:00 PM).
</div>
</div>
</div>

</section>
Original file line number Diff line number Diff line change
@@ -1,41 +1,40 @@
<section id="hk-datasources" class="hk-tab-content">

<section id="hk-datasources" class="hk-tab-content" ng-if="vm.activeTab === 'datasources'">

<span class="hk-update pull-right" tooltip-trigger tooltip-placement="bottom" tooltip="Last update"><i class="fa fa-clock-o"></i>{{vm.endTimeStamp | date:'mediumTime'}}</span>
<h3 class="pull-left">Fake Datasource 1</h3>
<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">Datasource Alerts</span>
</div>
<div class="col-sm-6 hk-summary-item">
<span class="hk-data">Chart TBD</span>
<span class="hk-item">Connections Used %</span>
</div>
<div class="col-sm-3 hk-summary-item">
<span class="hk-data">7 Available (of 28)</span>
<span class="hk-item">Available Connections (of Total)</span>
</div>
</div>
<span class="hk-update pull-right" tooltip-trigger tooltip-placement="bottom" tooltip="Last update"><i class="fa fa-clock-o"></i>{{vm.endTimeStamp | date:'mediumTime'}}</span>
<h3 class="pull-left">Fake Datasource 1</h3>
<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">Datasource Alerts</span>
</div>
<div class="col-sm-6 hk-summary-item">
<span class="hk-data">Chart TBD</span>
<span class="hk-item">Connections Used %</span>
</div>
<div class="col-sm-3 hk-summary-item">
<span class="hk-data">7 Available (of 28)</span>
<span class="hk-item">Available Connections (of Total)</span>
</div>
</div>
</div>

<h3 class="pull-left">Fake Datasource 2</h3>
<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">Datasource Alerts</span>
</div>
<div class="col-sm-6 hk-summary-item">
<span class="hk-data">Chart TBD</span>
<span class="hk-item">Connections Used %</span>
</div>
<div class="col-sm-3 hk-summary-item">
<span class="hk-data">45 Available (of 50)</span>
<span class="hk-item">Available Connections (of Total)</span>
</div>
</div>
<h3 class="pull-left">Fake Datasource 2</h3>
<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">Datasource Alerts</span>
</div>
<div class="col-sm-6 hk-summary-item">
<span class="hk-data">Chart TBD</span>
<span class="hk-item">Connections Used %</span>
</div>
<div class="col-sm-3 hk-summary-item">
<span class="hk-data">45 Available (of 50)</span>
<span class="hk-item">Available Connections (of Total)</span>
</div>
</div>
</div>

</section>
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<section id="hk-deployments" class="hk-tab-content" ng-if="vm.activeTab === 'deployments'">
<section id="hk-deployments" class="hk-tab-content">

<h3 class="pull-left">Deployment Status</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:'mediumTime'}}</span>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,36 +1,34 @@
<section id="hk-jms" class="hk-tab-content">


<section id="hk-jms" class="hk-tab-content" ng-if="vm.activeTab === 'jms'">

<h3 class="pull-left">JMS</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:'mediumTime'}}</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>
</div>
<div class="col-sm-3 hk-summary-item">
<span class="hk-data">1270 MB</span>
<span class="hk-item">Average Heap Usage</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>
</div>
<div class="col-sm-3 hk-summary-item">
<span class="hk-data">2000 MB</span>
<span class="hk-item">Maximum Heap</span>
</div>
</div>
<h3 class="pull-left">JMS</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:'mediumTime'}}</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>
</div>
<div class="col-sm-3 hk-summary-item">
<span class="hk-data">1270 MB</span>
<span class="hk-item">Average Heap Usage</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>
</div>
<div class="col-sm-3 hk-summary-item">
<span class="hk-data">2000 MB</span>
<span class="hk-item">Maximum Heap</span>
</div>
</div>
</div>

<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>
</div>
<div class="clearfix">
<p>No alerts.</p>
</div>
<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>
</div>
<div class="clearfix">
<p>No alerts.</p>
</div>

</section>
Original file line number Diff line number Diff line change
@@ -1,59 +1,67 @@
<section id="hk-jvm-metrics" class="hk-tab-content" ng-if="vm.activeTab === 'jvm-metrics'">
<section id="hk-jvm-metrics" class="hk-tab-content">

<h3 class="pull-left">JVM Status</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:'mediumTime'}}</span>
<div class="panel panel-default hk-summary">
<div class="row">
<div class="col-sm-3 hk-summary-item">
<span class="hk-data">10 <i class="fa fa-flag"></i></span>
<span class="hk-item">JVM 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>
</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>
</div>
<div class="col-sm-3 hk-summary-item">
<span class="hk-data">2000 MB</span>
<span class="hk-item">Maximum Heap</span>
</div>
</div>
<h3 class="pull-left">JVM 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:'mediumTime'}}</span>
<div class="panel panel-default hk-summary">
<div class="row">
<div class="col-sm-3 hk-summary-item">
<span class="hk-data">{{vm.alertList.length}} <i class="fa fa-flag" ng-show="vm.alertList.length > 0"></i></span>
<span class="hk-item">JVM Alerts</span>
</div>
<div class="col-sm-3 hk-summary-item">
<span class="hk-data" ng-show="vm.heapUsage">{{ vm.heapUsage.avg / 1024 / 1024 | number : 0 }} MB</span>
<span class="hk-data" ng-hide="vm.heapUsage">n/a</span>
<span class="hk-item">Average Heap Usage</span>
</div>
<div class="col-sm-3 hk-summary-item">
<span class="hk-data" ng-show="vm.garbageCollector">{{ vm.garbageCollector.gc / 1024 / 1024 | number : 0 }} s</span>
<span class="hk-data" ng-hide="vm.garbageCollector">n/a</span>
<span class="hk-item">Last Garbage Collection (Duration)</span>
</div>
<div class="col-sm-3 hk-summary-item">
<span class="hk-data" ng-show="vm.heapUsage">{{ vm.heapUsage.max / 1024 / 1024 | number : 0 }} MB</span>
<span class="hk-data" ng-hide="vm.heapUsage">n/a</span>
<span class="hk-item">Maximum Heap</span>
</div>
</div>
</div>

<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> JVM Alerts <span>(2 of 10)</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>
<!-- Alerts -->
<div class="hk-info-top clearfix">
<h3 class="pull-left" data-toggle="tooltip" data-placement="top" title="" data-original-title="Expand/collapse">
<button class="btn btn-link hk-trigger" ng-click="showAllAlerts = !showAllAlerts"><i class="fa" ng-show="vm.alertList.length > 0" ng-class="showAllAlerts ? 'fa-minus-square-o' : 'fa-plus-square-o'"></i> JVM 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">
<!-- 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>
<div class="alerts-activity clearfix">
<div class="panel panel-default alert alert-danger">
<div class="hk-alert-icon"><i class="fa fa-flag"></i></div>
<div class="hk-date">12 Feb, 5:35 PM</div>
<div class="hk-event">Server <strong>down</strong> for 4 minutes (until 5:39 PM).</div>
</div>
<div class="panel panel-default alert alert-danger">
<div class="hk-alert-icon"><i class="fa fa-flag"></i></div>
<div class="hk-date">11 Feb, 3:53 PM</div>
<div class="hk-event"><strong>Response time</strong> was above the threshold for 7 minutes (until 4:00 PM).</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" data-toggle="tooltip" data-placement="top" title="" data-original-title="Update chart"><i class="fa fa-refresh"></i></button>
</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"><i class="fa fa-refresh"></i></button>
</div>
</div>

<div class="panel panel-default hk-graph">
<h2>JVM Heap Usage</h2>
<div class="hk-legend pull-left">
<span><i class="fa fa-circle hk-primary"></i>Used</span>
<span><i class="fa fa-circle hk-orange"></i>Maximum</span>
<span><i class="fa fa-circle hk-gray"></i>Commited</span>
</div>
<div class="panel panel-default hk-graph">
<h2>JVM Heap Usage</h2>
<div class="hk-legend pull-left">
<span><i class="fa fa-circle hk-primary"></i>Used</span>
<span><i class="fa fa-circle hk-orange"></i>Maximum</span>
<span><i class="fa fa-circle hk-gray"></i>Commited</span>
</div>
</div>

</section>

0 comments on commit e4261c3

Please sign in to comment.