This repository has been archived by the owner on Nov 9, 2017. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
HAWKULAR-217 : Initial implementation for JVM Metrics tab. Includes o…
…ther (needed) changes Included changes for dealing better with tabs and splitting the Details controllers
- Loading branch information
1 parent
9029546
commit e4261c3
Showing
16 changed files
with
591 additions
and
322 deletions.
There are no files selected for viewing
30 changes: 7 additions & 23 deletions
30
...src/main/scripts/plugins/metrics/plugins/metrics/html/app-details/app-server-details.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
55 changes: 27 additions & 28 deletions
55
...sole/src/main/scripts/plugins/metrics/plugins/metrics/html/app-details/detail-alerts.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
69 changes: 34 additions & 35 deletions
69
...src/main/scripts/plugins/metrics/plugins/metrics/html/app-details/detail-datasources.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
2 changes: 1 addition & 1 deletion
2
...src/main/scripts/plugins/metrics/plugins/metrics/html/app-details/detail-deployments.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
60 changes: 29 additions & 31 deletions
60
ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/app-details/detail-jms.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
104 changes: 56 additions & 48 deletions
104
ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/app-details/detail-jvm.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
Oops, something went wrong.