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

Commit

Permalink
Updated applications list with cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@cardosogabriel @ammendonca
cardosogabriel authored and ammendonca committed Nov 13, 2015
1 parent 41fb2d5 commit 7f5bff2
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 35 deletions.
83 changes: 53 additions & 30 deletions console/src/main/scripts/plugins/metrics/html/app-server-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,41 +10,64 @@ <h1 class="text-center">{{userDetails.firstName}}'s application servers</h1>

<h3 class="pull-left">Current Status</h3>
<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 class="panel panel-default hk-summary">
<div class="row">
<div class="col-sm-2 hk-summary-item">
<span class="hk-data">{{vm.resourceList.length}}</span>
<span class="hk-item">Servers</span>
<div class="row row-cards-pf">
<div class="col-md-2 col-sm-4">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<a href="#">
<span class="card-pf-aggregate-status-count">{{vm.resourceList.length}}</span> Servers
</a>
</h2>
</div>
<div class="col-sm-2 hk-summary-item">
<a href="#">
<span class="hk-data">{{(vm.resourceList|filter:{state: 'up'}:true).length}} <i class="fa fa-arrow-up"></i></span>
<span class="hk-item">Up</span>
</a>
</div>
<div class="col-md-2 col-sm-4">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<i class="fa fa-arrow-up"></i>
<a href="#">
<span class="card-pf-aggregate-status-count">{{(vm.resourceList|filter:{state: 'up'}:true).length}}</span> Up
</a>
</h2>
</div>
<div class="col-sm-2 hk-summary-item">
<a href="#">
<span class="hk-data">{{(vm.resourceList|filter:{state: 'down'}:true).length}} <i class="fa fa-arrow-down"></i></span>
<span class="hk-item">Down</span>
</a>
</div>
<div class="col-md-2 col-sm-4">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<i class="fa fa-arrow-down"></i>
<a href="#">
<span class="card-pf-aggregate-status-count">{{(vm.resourceList|filter:{state: 'down'}:true).length}}</span> Down
</a>
</h2>
</div>
<div class="col-sm-2 hk-summary-item">
<a href="#">
<span class="hk-data">{{(vm.resourceList|filter:{state: 'starting'}:true).length}} <i class="fa fa-spinner"></i></span>
<span class="hk-item">Starting</span>
</a>
</div>
<div class="col-md-2 col-sm-4">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<i class="fa fa-chain-broken"></i>
<a href="#">
<span class="card-pf-aggregate-status-count">{{(vm.resourceList|filter:{state: 'unknown'}:true).length}}</span> Unknown
</a>
</h2>
</div>
<div class="col-sm-2 hk-summary-item">
<a href="#">
<span class="hk-data">{{(vm.resourceList|filter:{state: 'unknown'}:true).length}} <i class="fa fa-chain-broken"></i></span>
<span class="hk-item">Unknown</span>
</a>
</div>
<div class="col-md-2 col-sm-4">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<i class="fa fa-spinner"></i>
<a href="#">
<span class="card-pf-aggregate-status-count">{{(vm.resourceList|filter:{state: 'starting'}:true).length}}</span> Starting
</a>
</h2>
</div>
<div class="col-sm-2 hk-summary-item">
<a href="#">
<span class="hk-data">{{(vm.resourceList|filter:{state: 'restart required'}:true).length}} <i class="fa fa-repeat"></i></span>
<span class="hk-item">Restart Required</span>
</a>
</div>
<div class="col-md-2 col-sm-4">
<div class="card-pf card-pf-aggregate-status card-pf-aggregate-status-mini">
<h2 class="card-pf-title">
<i class="fa fa-repeat"></i>
<a href="#">
<span class="card-pf-aggregate-status-count">{{(vm.resourceList|filter:{state: 'restart required'}:true).length}}</span> Restart Required
</a>
</h2>
</div>
</div>
</div>
Expand Down
29 changes: 24 additions & 5 deletions console/src/main/scripts/plugins/metrics/less/metrics.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,6 +358,10 @@ a:hover {

// Cards

.row-cards-pf {
clear: both;
}

.row-cards-pf + .container-cards-pf {
margin-top: 0;
}
Expand Down Expand Up @@ -845,7 +849,8 @@ p + .form-horizontal {

.fa-flag,
a .fa-flag,
a:hover .fa-flag {
a:hover .fa-flag,
.card-pf-aggregate-status .card-pf-title .fa-flag {
color: @brand-danger;

&.gray {
Expand All @@ -855,13 +860,15 @@ a:hover .fa-flag {

.fa-arrow-up,
a .fa-arrow-up,
a:hover .fa-arrow-up {
a:hover .fa-arrow-up,
.card-pf-aggregate-status .card-pf-title .fa-arrow-up {
color: @brand-success;
}

.fa-repeat,
a .fa-repeat,
a:hover .fa-repeat {
a:hover .fa-repeat,
.card-pf-aggregate-status .card-pf-title .fa-repeat {
color: @brand-success;
}

Expand All @@ -879,7 +886,8 @@ a:hover .fa-chain-broken {

.fa-spinner,
a .fa-spinner,
a:hover .fa-spinner {
a:hover .fa-spinner,
.card-pf-aggregate-status .card-pf-title .fa-spinner {
color: @gray-light;
}

Expand Down Expand Up @@ -2160,7 +2168,8 @@ td .fa-comment-o {

.fa-arrow-down,
a .fa-arrow-down,
a:hover .fa-arrow-down {
a:hover .fa-arrow-down,
.card-pf-aggregate-status .card-pf-title .fa-arrow-down {
color: @gray-light;
}
}
Expand Down Expand Up @@ -2270,6 +2279,16 @@ section {
-moz-transition: max-height 0.3s ease;
transition: max-height 0.3s ease;

&.ng-enter,
&.ng-leave.ng-leave-active {
max-height: 0;
}

&.ng-leave,
&.ng-enter.ng-enter-active {
max-height: 1320px;
}

&:not(.hide) {
margin-bottom: @grid-gutter-width/2;
}
Expand Down

0 comments on commit 7f5bff2

Please sign in to comment.