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

Commit

Permalink
Merge pull request #718 from karelhala/HAWKULAR-815
Browse files Browse the repository at this point in the history
HAWKULAR-815
  • Loading branch information
mtho11 committed Dec 15, 2015
2 parents 096fb40 + 12a2a90 commit 1d90585
Show file tree
Hide file tree
Showing 15 changed files with 592 additions and 256 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<div ng-click="vm.redirectToUrlAvailability(resource.id)">
<div class="tile">
<div class="tile-content">
<div class="text-right hk-tile-alert">
<a href="{{vm.getAlertUrl(resource.id)}}">
<span ng-if="vm.alerts.length === 0" class="label label-default hk-label-small">0</span>
<span ng-if="vm.alerts.length > 0" class="label label-danger hk-label-small">{{vm.alerts.length}}</span>
</a>
</div>
<div class="hk-tile-title">{{resource.properties.url}}</div>
<div class="hk-tile-status">
<span ng-show="resource.responseTime.length > 0">{{resource.isUp ? 'Up' : 'Down'}}</span>
</div>
<div>
<div ng-show="resource.responseTime.length > 0 && resource.isUp" class="hk-tile-circle-icon hk-success"><i class="fa fa-arrow-up"></i></div>
<div ng-show="resource.responseTime.length > 0 && !resource.isUp" class="hk-tile-circle-icon hk-danger"><i class="fa fa-arrow-down"></i></div>
<span class="spinner spinner-inline" ng-hide="resource.responseTime.length > 0" popover="Your data is being collected. You should see something in a few seconds." popover-trigger="mouseenter" popover-placement="bottom"></span>
</div>
<div class="chart-pf-sparkline {{resource.isUp?'':'c3-danger'}}">
<hawkular-sparkline-chart
data="resource.graphResponseTime"
show-x-axis-values="false"
show-y-axis-values="false">
</hawkular-sparkline-chart>
</div>
<div class="hk-tile-info">
<a href="{{vm.getResponseTimeUrl(resource.id)}}">
<span ng-show="resource.responseTime.length > 0 && resource.responseTime[0].value < 0">n/a</span>
<span ng-show="resource.responseTime.length > 0 && resource.responseTime[0].value >= 0">Response Time: {{resource.responseTime[0].value}}ms</span>
</a>
</div>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<div>
<div class="tiles-view-pf row-cards-pf">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-3" ng-repeat="res in resourceList track by res.properties.url">
<url-list-item
resource="res"
></url-list-item>
</div>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -1,19 +1,12 @@
<hk-alert-notification></hk-alert-notification>

<div class="blank-slate-pf" ng-show="mac.alertList.$resolved && mac.alertList.length === 0">
<div class="blank-slate-pf-icon">
<i class="fa fa-flag"></i>
<div class="row">
<div class="col-lg-12">
<hk-alert-info list="mac.alertList" limit="(mac.showAllAlerts ? 100000 : 3)"
resource-id="mac.$routeParams.resourceId" title="Url">
</hk-alert-info>
<div class="clearfix" ng-show="mac.alertList.length > 0">
<button class="btn btn-default pull-right" ng-click="mac.resolveAll()" ng-disabled="mac.isWorking">
<i class="fa fa-check-square-o"></i> Resolve all
</button>
</div>
</div>
<h1>No alerts.</h1>
</div>

<hk-alert-panel-list class="clearfix" hk-alert-list="mac.alertList"></hk-alert-panel-list>

<hk-pagination resource-list="mac.alertList" current-page="mac.resCurPage" page-setter="mac.setPage(pageNumber)"
per-page="mac.resPerPage" headers="mac.headerLinks"></hk-pagination>

<div class="clearfix" ng-show="mac.alertList.length > 0">
<button class="btn btn-default pull-right" ng-click="mac.resolveAll()" ng-disabled="mac.isWorking">
<i class="fa fa-check-square-o"></i> Resolve all
</button>
</div>
158 changes: 69 additions & 89 deletions console/src/main/scripts/plugins/metrics/html/url-availability.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,36 +18,39 @@
<hk-alert-notification></hk-alert-notification>

<!-- Summary -->
<h3 class="pull-left">Availability 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="row row-cards-pf">
<div class="col-md-3">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<span class="card-pf-aggregate-status-count" ng-show="vm.uptimeRatio !== 1">{{vm.uptimeRatio * 100 | number:3}} %</span>
<span class="card-pf-aggregate-status-count" ng-show="vm.uptimeRatio === 1">100 %</span>
Availability
</h2>
</div>
</div>
<div class="col-md-3">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<span class="card-pf-aggregate-status-count" ng-hide="vm.downtimeDuration">Always Up</span>
<div class="hk-info-top clearfix">
<h3 class="pull-left">Availability 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>
<div class="row">
<div class="col-lg-9">
<div class="row row-cards-pf">
<div class="col-md-3">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<span class="card-pf-aggregate-status-count" ng-show="vm.uptimeRatio !== 1">{{vm.uptimeRatio * 100 | number:3}} %</span>
<span class="card-pf-aggregate-status-count" ng-show="vm.uptimeRatio === 1">100 %</span>
Availability
</h2>
</div>
</div>
<div class="col-md-3">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<span class="card-pf-aggregate-status-count" ng-hide="vm.downtimeDuration">Always Up</span>
<span class="card-pf-aggregate-status-count" ng-show="vm.downtimeDuration" tooltip-trigger
tooltip-placement="top"
tooltip-popup-delay="1000"
tooltip="{{ vm.downtimeDuration | duration:'d\'d \'h\'h \'m\'min \'s\' s\'' }}"><ph
ng-repeat="val in vm.downtimeDurationJson">{{val.value}}<span> {{val.unit}} </span></ph></span>
Total Downtime
</h2>
</div>
</div>
<div class="col-md-3">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
Total Downtime
</h2>
</div>
</div>
<div class="col-md-3">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<span class="card-pf-aggregate-status-count" ng-hide="vm.lastDowntime.valueOf() === 0 ||
(vm.availabilityDataPoints.length === 1 && vm.availabilityDataPoints[0].value === 'down')"
am-time-ago="vm.lastDowntime" tooltip-trigger tooltip-placement="top" tooltip-popup-delay="1000"
Expand All @@ -60,76 +63,53 @@ <h2 class="card-pf-title">
<span class="card-pf-aggregate-status-count" ng-show="!vm.lastDowntime || vm.lastDowntime.valueOf() === 0">
Always Up
</span>
Last Downtime
</h2>
</div>
</div>
<div class="col-md-3">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<span class="card-pf-aggregate-status-count">{{vm.downtimeCount}}</span> Downtime Events
</h2>
Last Downtime
</h2>
</div>
</div>
<div class="col-md-3">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<span class="card-pf-aggregate-status-count">{{vm.downtimeCount}}</span> Downtime Events
</h2>
</div>
</div>
</div>
</div>
</div>
<!-- /row -->
<!-- /row -->

<!-- Alerts -->
<div class="hk-info-top clearfix">
<h3 class="pull-left" tooltip-trigger tooltip="Expand/collapse">
<button class="btn btn-link hk-trigger" ng-click="showAllAlerts = !showAllAlerts">
<i ng-show="vm.alertList.length" ng-class="showAllAlerts ? 'fa fa-minus-square-o':'fa fa-plus-square-o'"></i>
Availability Alerts
<ng-span ng-show="vm.alertList.length">
({{showAllAlerts ? vm.alertList.length : vm.min(vm.alertList.length, 3)}} of
{{vm.alertList.length}})
</ng-span>
</button>
</h3>
<span class="hk-settings pull-left">
<a ng-href="/hawkular-ui/alerts-center-triggers/{{vm.$routeParams.resourceId}}">
<i class="fa fa-cog"></i>Definitions
</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 class="hk-event">No Alerts.</div>
</div>
<!-- Alerts exist -->
<hk-alert-panel-list class="clearfix" hk-alert-list="vm.alertList"
hk-limit="(showAllAlerts ? 100000 : 3)"></hk-alert-panel-list>
</div>
<!-- Availability Chart -->
<div class="hk-info-top clearfix">
<h3 class="pull-left">Metrics</h3>

<!-- Availability Chart -->
<div class="hk-info-top clearfix">
<h3 class="pull-left">Metrics</h3>

<div class="hk-update pull-right">
<button ng-click="vm.refreshAvailPageNow(vm.$routeParams.resourceId)" class="btn btn-link hk-chart-update"
tooltip-trigger tooltip-placement="top" tooltip-append-to-body="true" tooltip="Update chart">
<i class="fa fa-refresh"></i>
</button>
</div>
</div>
<div class="hk-update pull-right">
<button ng-click="vm.refreshAvailPageNow(vm.$routeParams.resourceId)" class="btn btn-link hk-chart-update"
tooltip-trigger tooltip-placement="top" tooltip-append-to-body="true" tooltip="Update chart">
<i class="fa fa-refresh"></i>
</button>
</div>
</div>

<div class="panel panel-default hk-graph">
<h2>Availability</h2>
<div class="panel panel-default hk-graph">
<h2>Availability</h2>

<div class="hk-graph-container hk-graph-availability">
<availability-chart
start-timestamp="{{vm.startTimeStamp}}"
end-timestamp="{{vm.endTimeStamp}}"
data="vm.availabilityDataPoints">
</availability-chart>
<div class="hk-graph-container hk-graph-availability">
<availability-chart
start-timestamp="{{vm.startTimeStamp}}"
end-timestamp="{{vm.endTimeStamp}}"
data="vm.availabilityDataPoints">
</availability-chart>
</div>
<div class="hk-legend text-left hk-legend-availability">
<span><span class="hk-legend-square hk-green"></span>Available</span>
<span><span class="hk-legend-square hk-red"></span>Down</span>
<span><span class="hk-legend-square hk-gray-light"></span>Unknown</span>
</div>
</div>
</div>
<div class="hk-legend text-left hk-legend-availability">
<span><span class="hk-legend-square hk-green"></span>Available</span>
<span><span class="hk-legend-square hk-red"></span>Down</span>
<span><span class="hk-legend-square hk-gray-light"></span>Unknown</span>
<div class="col-lg-3">
<hk-alert-info list="vm.alertList" limit="(vm.showAllAlerts ? 100000 : 3)"
resource-id="vm.$routeParams.resourceId" title="Url">
</hk-alert-info>
</div>
</div>

Expand Down
78 changes: 33 additions & 45 deletions console/src/main/scripts/plugins/metrics/html/url-list.html
Original file line number Diff line number Diff line change
Expand Up @@ -30,61 +30,49 @@ <h2 ng-show="vm.resourceList.length === 0">Collect metrics from a URL that you w
</div>

<h2 ng-show="vm.resourceList.length > 0" class="text-center hk-fade-in">Current status of your URLs</h2>

<div class="row hk-urls-list-labels" ng-class="{'hk-fade-in': vm.resourceList}" ng-show="vm.resourceList.length > 0">
<div class="col-sm-6 text-left">
<button class="btn btn-link" tooltip="Sort" tooltip-trigger tooltip-placement="top" ng-click="vm.reverse = !vm.reverse">
URL (A-Z) <i class="fa" ng-class="vm.reverse ? 'fa-angle-up' : 'fa-angle-down'"></i>
</button>
</div>
<div class="col-sm-6 text-right">
<div class="row" ng-class="{'hk-fade-in': vm.resourceList}" ng-show="vm.resourceList.length > 0">
<div class="col-sm-12 text-right">
<span class="hk-update pull-right" tooltip-trigger tooltip-placement="top" tooltip="Last update"><i class="fa fa-clock-o"></i>{{vm.lastUpdateTimestamp | date:'HH:mm:ss'}}</span>
</div>
</div>

<div ng-class="{'hk-fade-in': vm.resourceList}" infinite-scroll="vm.loadMoreItems()"
infinite-scroll-listen-for-event="list:updated">
<!--<div class="hk-url-item" ng-repeat="res in vm.resourceList | orderBy:'properties.url':vm.reverse">-->
<div class="hk-url-item" ng-repeat="res in vm.resourceList track by res.properties.url">
<div class="panel panel-default hk-url-heading">
<a href="/hawkular-ui/url/availability/{{res.id}}/{{hkParams.timeOffset}}">{{res.properties.url}}</a>
<span ng-show="res.properties['trait-collected-on']" class="pull-right">{{res.traits}}</span>
</div>

<div class="panel panel-default hk-summary">
<div class="row">
<div class="col-sm-3 hk-summary-item">
<a href="/hawkular-ui/url/alerts/{{res.id}}/{{hkParams.timeOffset}}">
<span class="hk-data">{{(vm.alertList|filter:{triggerId: (res.id + '_trigger')}).length || 0}} <i class="fa fa-flag" ng-show="(vm.alertList|filter:{triggerId: (res.id + '_trigger')}).length > 0"></i></span>
<span class="hk-item">Unresolved Alerts</span>
</a>
</div>
<div class="col-sm-3 hk-summary-item">
<a href="/hawkular-ui/url/availability/{{res.id}}/{{hkParams.timeOffset}}">
<span class="hk-data" ng-show="res.responseTime.length > 0"><i class="fa " ng-class="res.isUp ? 'fa-arrow-up' : 'fa-arrow-down'"></i>{{res.isUp ? 'Up' : 'Down'}}</span>
<span class="hk-data spinner" ng-hide="res.responseTime.length > 0" popover="Your data is being collected. You should see something in a few seconds." popover-trigger="mouseenter" popover-placement="bottom"></span>
<span class="hk-item">Current Availability</span>
</a>
</div>
<div class="col-sm-3 hk-summary-item">
<a href="/hawkular-ui/url/availability/{{res.id}}/{{hkParams.timeOffset}}">
<span class="hk-data" ng-show="res.lastDowntime > 0" am-time-ago="res.lastDowntime" tooltip-trigger tooltip-placement="top" tooltip-popup-delay="1000" tooltip="{{ res.lastDowntime | date:'d MMM yyyy, HH:mm:ss' }}"></span>
<span class="hk-data" ng-show="res.lastDowntime <= 0">n/a</span>
<span class="hk-item">Last Downtime</span>
</a>
</div>
<div class="col-sm-3 hk-summary-item">
<a href="/hawkular-ui/url/response-time/{{res.id}}/{{hkParams.timeOffset}}">
<span class="hk-data" ng-show="res.responseTime.length > 0 && res.responseTime[0].value >= 0">{{res.responseTime[0].value}} <span>ms</span></span>
<span class="hk-data" ng-show="res.responseTime.length > 0 && res.responseTime[0].value < 0">n/a</span>
<span class="hk-data spinner" ng-hide="res.responseTime.length > 0" popover="Your data is being collected. You should see something in a few seconds." popover-trigger="mouseenter" popover-placement="bottom"></span>
<span class="hk-item">Current Response Time</span>
</a>
<div class="row hk-control-actions-bar" ng-show="vm.resourceList">
<div class="col-md-1">
<div class="btn-group bootstrap-select hk-container-separator sort-items">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="{{vm.sorting[vm.currentSortIndex]}}">
<span class="filter-option pull-left">{{vm.sorting[vm.currentSortIndex]}}</span>
<span class="caret"></span>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner" role="menu">
<li ng-repeat="(index, oneSortType) in vm.sorting">
<a ng-click="vm.changeSortByIndex(index)">
<span class="text">{{oneSortType}}</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
</div>
<button class="btn btn-link hk-delete" tooltip="Delete" tooltip-trigger tooltip-placement="left" ng-click="vm.deleteResource(res)"><i class="fa fa-trash-o"></i></button>
</div>
<div class="col-md-11">
<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="hk-url-item" ng-repeat="res in vm.resourceList | orderBy:'properties.url':vm.reverse">-->
<url-list-summary
resource-list="vm.filteredResourceList"
alert-list="vm.alertList"
delete-resource="vm.deleteResource(res)"
></url-list-summary>
<div class="spinner" ng-show="vm.loadingMoreItems"></div>
</div>

Expand Down

0 comments on commit 1d90585

Please sign in to comment.