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

Commit

Permalink
HAWKULAR-979
Browse files Browse the repository at this point in the history
  • Loading branch information
@cardosogabriel
cardosogabriel committed Jan 28, 2016
1 parent ba7da2e commit 7f67156
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 111 deletions.
217 changes: 108 additions & 109 deletions console/src/main/scripts/plugins/accounts/html/tokens.html
View file
Original file line number Diff line number Diff line change
@@ -1,125 +1,124 @@
<div class="hk-organizations row" ng-controller="HawkularAccounts.TokensController as controller">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="hk-tokens" ng-controller="HawkularAccounts.TokensController as controller">

<h1 class="text-center" ng-show="!controller.loading">Tokens</h1>
<h1 class="text-center" ng-show="!controller.loading">Tokens</h1>

<div class="text-center hk-spinner-container-alone" ng-show="controller.loading">
<div class="spinner spinner-lg"></div>
<p class="hk-spinner-legend-below">Loading...</p>
</div>
<div class="text-center hk-spinner-container-alone" ng-show="controller.loading">
<div class="spinner spinner-lg"></div>
<p class="hk-spinner-legend-below">Loading...</p>
</div>

<div class="blank-slate-pf" ng-show="!controller.tokens.length && !controller.loading">
<div class="blank-slate-pf-icon">
<i class="fa fa-shield"></i>
</div>
<h1>No tokens created.</h1>
<p>
You can create access tokens for usage in the Agent or in other applications to make REST calls.
</p>
<div class="blank-slate-pf-main-action">
<button class="btn btn-primary btn-lg" type="button" role="button" ng-click="controller.create()">
Create Token
</button>
</div>
<div class="blank-slate-pf" ng-show="!controller.tokens.length && !controller.loading">
<div class="blank-slate-pf-icon">
<i class="fa fa-shield"></i>
</div>

<div class="text-right" ng-show="controller.tokens.length && !controller.loading">
<button class="btn btn-primary" type="button" role="button" ng-click="controller.create()">
<h1>No tokens created.</h1>
<p>
You can create access tokens for usage in the Agent or in other applications to make REST calls.
</p>
<div class="blank-slate-pf-main-action">
<button class="btn btn-primary btn-lg" type="button" role="button" ng-click="controller.create()">
Create Token
</button>
</div>
</div>

<div class="container-fluid container-cards-pf" ng-show="controller.tokens.length && !controller.loading">
<div class="row row-cards-pf">
<div class="col-xs-12 col-sm-12 col-md-6" ng-repeat="token in controller.tokens">
<div class="card-pf">
<h2 class="card-pf-title">
<div ng-hide="controller.inEditMode(token)">
<span ng-show="token.attributes.name">{{token.attributes.name}}</span>
<span ng-hide="token.attributes.name">Token generated at {{(token.createdAt | date:'medium')}}</span>
<button class="btn btn-default pull-right"
tooltip-trigger
tooltip="Rename"
ng-click="controller.edit(token)">
<i class="fa fa-pencil"></i>
</button>
</div>
<div ng-show="controller.inEditMode(token)">
<input ng-model="controller.newNames[token.id]" placeholder="Name" class="form-control"/>
<button class="btn btn-default pull-right"
tooltip-trigger
tooltip="Discard"
type="reset"
ng-click="controller.discard(token)">
<i class="fa fa-close"></i>
</button>
<div class="text-right" ng-show="controller.tokens.length && !controller.loading">
<button class="btn btn-primary" type="button" role="button" ng-click="controller.create()">
Create Token
</button>
</div>

<button class="btn btn-default pull-right"
tooltip-trigger
tooltip="Confirm"
type="submit"
ng-click="controller.confirm(token)">
<i class="fa fa-check"></i>
</button>
</div>
</h2>
<div class="card-pf-body">
<div ng-hide="controller.inEditMode(token)">
<h3 ng-show="token.attributes.description">{{token.attributes.description}}</h3>
<h3 ng-hide="token.attributes.description">No description.</h3>
</div>
<div ng-show="controller.inEditMode(token)">
<input ng-model="controller.newDescriptions[token.id]" placeholder="Description" class="form-control"/>
</div>
<div class="row row-cards-pf" ng-show="controller.tokens.length && !controller.loading">
<div class="col-xs-12 col-sm-6 col-lg-4" ng-repeat="token in controller.tokens">
<div class="card-pf hk-card-token">
<h2 class="card-pf-title">
<div ng-hide="controller.inEditMode(token)">
<button class="btn btn-default pull-right"
tooltip-trigger
tooltip="Rename"
ng-click="controller.edit(token)">
<i class="fa fa-pencil"></i>
</button>
<span ng-show="token.attributes.name">{{token.attributes.name}}</span>
<span ng-hide="token.attributes.name">Token generated at {{(token.createdAt | date:'medium')}}</span>
</div>
<div ng-show="controller.inEditMode(token)">
<div class="hk-form-buttons pull-right">
<button class="btn btn-default"
tooltip-trigger
tooltip="Discard"
type="reset"
ng-click="controller.discard(token)">
<i class="fa fa-close"></i>
</button>
<button class="btn btn-default"
tooltip-trigger
tooltip="Confirm"
type="submit"
ng-click="controller.confirm(token)">
<i class="fa fa-check"></i>
</button>
</div>
<input ng-model="controller.newNames[token.id]" placeholder="Name" class="form-control hk-form-buttons-offset"/>
</div>
</h2>
<div class="card-pf-body">
<div ng-hide="controller.inEditMode(token)">
<p ng-show="token.attributes.description">{{token.attributes.description}}</p>
<!-- <h3 ng-hide="token.attributes.description">No description.</h3> -->
</div>
<div ng-show="controller.inEditMode(token)">
<input ng-model="controller.newDescriptions[token.id]" placeholder="Description" class="form-control hk-form-buttons-offset"/>
</div>

<img
height="50"
width="50"
class="pull-right"
ng-src="/secret-store/qrcode?tokenId={{token.id}}&size=50"
ng-click="controller.showQRCode(token)"/>
<img
height="50"
width="50"
class="pull-right hk-cursor-pointer"
tooltip-trigger
tooltip="Click to expand"
ng-src="/secret-store/qrcode?tokenId={{token.id}}&size=50"
ng-click="controller.showQRCode(token)"/>

<p>
<small><b>Key:</b> {{token.id}}</small><br/>
<small><b>Secret:</b> {{token.secret}}</small><br/>
<small><b>Persona:</b> {{controller.personaForToken(token)}}</small><br/>
</p>
<p>
<small><b>Key:</b> {{token.id}}</small><br/>
<small><b>Secret:</b> {{token.secret}}</small><br/>
<small><b>Persona:</b> {{controller.personaForToken(token)}}</small><br/>
</p>

</div>
<div class="card-pf-footer">
<button type="button"
class="btn btn-link pull-right"
tooltip-trigger
tooltip-placement="top"
tooltip="Revoke"
ng-click="controller.revoke(token)">
<i class="fa fa-trash-o"></i>
</button>
</div>
<div class="card-pf-footer">
<button type="button"
class="btn btn-link pull-right"
tooltip-trigger
tooltip-placement="top"
tooltip="Revoke"
ng-click="controller.revoke(token)">
<i class="fa fa-trash-o"></i>
</button>

<p>
Expiration date:
<abbr
ng-hide="controller.inEditMode(token)"
data-toggle="tooltip"
data-placement="top"
title="This date is shown in your timezone.">
{{(token.expiresAt | date:'mediumDate') || "&infin;"}}
</abbr>
<div class="input-group date" ng-show="controller.inEditMode(token)">
<input
type="text"
id="dateFor{{token.id}}"
class="form-control bootstrap-datepicker"
ng-model="controller.newExpirations[token.id]"
data-date-format="yyyy-mm-dd"
data-provide="datepicker"/>
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
</p>
</div>
<p>
Expiration date:
<abbr
ng-hide="controller.inEditMode(token)"
data-toggle="tooltip"
data-placement="top"
title="This date is shown in your timezone.">
{{(token.expiresAt | date:'mediumDate') || "&infin;"}}
</abbr>
<div class="input-group date hk-form-buttons-offset" ng-show="controller.inEditMode(token)">
<input
type="text"
id="dateFor{{token.id}}"
class="form-control bootstrap-datepicker"
ng-model="controller.newExpirations[token.id]"
data-date-format="yyyy-mm-dd"
data-provide="datepicker"/>
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
</p>
</div>
</div><!-- /row -->
</div><!-- /container -->
</div>
</div>
</div>
</div><!-- /row -->
</div>
41 changes: 39 additions & 2 deletions console/src/main/scripts/plugins/metrics/less/metrics.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,10 @@ a:hover {
background-color: @brand-danger;
}

.hk-cursor-pointer {
cursor: pointer;
}

// Alerts

.alert-success,
Expand Down Expand Up @@ -344,12 +348,17 @@ a:hover {
}
}


// Cards

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

.card-pf-title {
line-height: 1.3;
}

.row-cards-pf + .container-cards-pf {
margin-top: 0;
}
Expand Down Expand Up @@ -385,6 +394,22 @@ a:hover {
margin-left: 5px;
}

.hk-card-token {

.card-pf-body {
margin-top: -5px;

p {
margin-top: @grid-gutter-width/2;
}
}

.card-pf-title span {
margin-right: @grid-gutter-width/4;
}
}


// Charts and Legends

.hk-graph {
Expand Down Expand Up @@ -687,7 +712,7 @@ a:hover {
}

.btn + .btn {
margin-left: 10px;
margin-left: @grid-gutter-width/4;
}

+ .hk-update {
Expand Down Expand Up @@ -851,7 +876,7 @@ p + .form-horizontal {
color: @brand-danger;
}

.btn + .btn {
.hk-form-buttons .btn {
margin-left: @grid-gutter-width/8;
}

Expand Down Expand Up @@ -895,6 +920,11 @@ p + .form-horizontal {
}
}

.hk-form-buttons-offset {
width: calc(~"100% - 81px");
}


// Icons

.fa .meaning {
Expand Down Expand Up @@ -2872,3 +2902,10 @@ section {
}
}
}


// Tokens screen

.hk-tokens .row-cards-pf {
margin-top: @grid-gutter-width/2;
}

0 comments on commit 7f67156

Please sign in to comment.