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 #540 from cardosogabriel/HAWKULAR-67
Browse files Browse the repository at this point in the history
HAWKULAR-682 and organization memberships fixes
  • Loading branch information
mtho11 committed Oct 8, 2015
2 parents 4de3b45 + 889c3af commit 18010d5
Show file tree
Hide file tree
Showing 4 changed files with 185 additions and 100 deletions.
Original file line number Diff line number Diff line change
@@ -1,12 +1,39 @@
<div class="row">
<div class="col-md-12" ng-controller="HawkularAccounts.OrganizationMembershipController as controller">
<ol class="breadcrumb" ng-show="!controller.loading">
<li><a data-ng-href="/hawkular-ui/organizations">&laquo; All organizations</a></li>
</ol>
<div class="hk-organization-memberships" ng-controller="HawkularAccounts.OrganizationMembershipController as controller">

<h1 class="text-center" ng-show="!controller.loading">{{controller.organization.name}} Members</h1>
<div class="hk-screen-top-nav">
<div class="row hk-top-row" >
<div class="col-xs-6" ng-show="!controller.loading">
<a data-ng-href="/hawkular-ui/organizations">&laquo; All organizations</a>
</div>
</div>
<div class="hk-heading">
<h1 ng-show="!controller.loading">{{controller.organization.name}} Members</h1>
</div>
</div>

<div class="text-right" ng-show="controller.memberships.length && !controller.loading && controller.foundOrganization">
<button
class="btn btn-primary"
type="button"
role="button"
ng-click="controller.showInviteModal()"
ng-show="controller.isAllowedToInvite">
Invite People
</button>
</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="text-right" ng-show="controller.memberships.length && !controller.loading && controller.foundOrganization">
<div ng-show="!controller.loading && controller.foundOrganization">
<div class="blank-slate-pf" ng-show="!controller.memberships.length">
<div class="blank-slate-pf-icon">
<i class="fa fa-users" id="empty-organizations-icon"></i>
</div>
<!-- <h2>No members for this organization (not even you?). Found organization: {{controller.foundOrganization}}</h2> -->
<h1>No members.</h1>
<button
class="btn btn-primary"
type="button"
Expand All @@ -16,88 +43,65 @@ <h1 class="text-center" ng-show="!controller.loading">{{controller.organization.
Invite People
</button>
</div>
</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.loading && controller.foundOrganization">
<div ng-show="!controller.memberships.length">
<div class="blank-slate-pf-icon">
<i class="fa fa-users" id="empty-organizations-icon"></i>
</div>
<!-- <h2>No members for this organization (not even you?). Found organization: {{controller.foundOrganization}}</h2> -->
<h1>No members.</h1>
<button
class="btn btn-primary"
type="button"
role="button"
ng-click="controller.showInviteModal()"
ng-show="controller.isAllowedToInvite">
Invite People
</button>
</div>
</div>

<div class="hk-table-container" ng-show="controller.memberships.length">
<table class="table table-bordered hk-table-clean">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="membership in controller.memberships">
<td>{{membership.member.name}}</td>
<td>
<span ng-show="membership.member.id === controller.organization.owner.id">Owner</span>
<div class="hk-table-container" ng-show="controller.memberships.length">
<table class="table table-bordered hk-table-clean">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="membership in controller.memberships">
<td>{{membership.member.name}}</td>
<td>
<span ng-show="membership.member.id === controller.organization.owner.id">Owner</span>

<span ng-show="membership.member.id !== controller.organization.owner.id">
<span ng-show="controller.isAllowedToChangeRoleOfMembers">
<select
ng-model="membership.role"
ng-change="controller.changeRole(membership)"
ng-options="role.name for role in controller.possibleRoles track by role.name"
>
</select>
</span>
<span ng-show="membership.member.id !== controller.organization.owner.id">
<span ng-show="controller.isAllowedToChangeRoleOfMembers">
<select
ng-model="membership.role"
ng-change="controller.changeRole(membership)"
ng-options="role.name for role in controller.possibleRoles track by role.name"
>
</select>
</span>

<span ng-show="!controller.isAllowedToChangeRoleOfMembers">
{{membership.role.name}}
</span>
<span ng-show="!controller.isAllowedToChangeRoleOfMembers">
{{membership.role.name}}
</span>

<span ng-show="controller.membershipsToUpdate[membership.id] === PersistenceState.PERSISTING">
<i class="fa fa-spinner fa-spin"></i>
</span>
<span ng-show="controller.membershipsToUpdate[membership.id] === PersistenceState.SUCCESS">
<i class="fa fa-check"></i>
</span>
<span ng-show="controller.membershipsToUpdate[membership.id] === PersistenceState.ERROR">
<i class="fa fa-exclamation"></i>
</span>
<span ng-show="controller.membershipsToUpdate[membership.id] === PersistenceState.PERSISTING">
<i class="fa fa-spinner fa-spin"></i>
</span>
</td>
</tr>
<tr ng-repeat="invitation in controller.pending" ng-show="controller.isAllowedToListPending">
<td>{{invitation.email}} <span class="label label-default">INVITED</span></td>
<td>{{invitation.role.name}}</td>
</tr>
</tbody>
</table>
</div>
<span ng-show="controller.membershipsToUpdate[membership.id] === PersistenceState.SUCCESS">
<i class="fa fa-check"></i>
</span>
<span ng-show="controller.membershipsToUpdate[membership.id] === PersistenceState.ERROR">
<i class="fa fa-exclamation"></i>
</span>
</span>
</td>
</tr>
<tr ng-repeat="invitation in controller.pending" ng-show="controller.isAllowedToListPending">
<td>{{invitation.email}} <span class="label label-default">INVITED</span></td>
<td>{{invitation.role.name}}</td>
</tr>
</tbody>
</table>
</div>

<div class="blank-slate-pf" ng-show="!controller.loading && !controller.foundOrganization">
<div class="blank-slate-pf-icon">
<i class="fa fa-building-o" id="empty-organizations-icon"></i>
</div>
<h1>Organization not found.</h1>
<p>
The requested organization could not be found. You can try to find it in the <a href="#">organizations list</a>.
</p>
<div class="blank-slate-pf" ng-show="!controller.loading && !controller.foundOrganization">
<div class="blank-slate-pf-icon">
<i class="fa fa-building-o" id="empty-organizations-icon"></i>
</div>

<h1>Organization not found.</h1>
<p>
The requested organization could not be found. You can try to find it in the <a href="#">organizations list</a>.
</p>
</div>
<!-- /col -->

<!-- /col -->
</div>
13 changes: 13 additions & 0 deletions console/src/main/scripts/plugins/accounts/less/accounts.less
Original file line number Diff line number Diff line change
Expand Up @@ -75,3 +75,16 @@ body.inactivity-modal-open #main, body.inactivity-modal-open .navbar, body.inact
.hk-organizations .text-right .btn-primary {
margin-bottom: @grid-gutter-width/4;
}

// Organization memberships screen

.hk-organization-memberships {

.text-right .btn-primary {
margin-bottom: @grid-gutter-width/4;
}

td .label {
margin-left: @grid-gutter-width/4;
}
}
100 changes: 84 additions & 16 deletions console/src/main/scripts/plugins/metrics/less/metrics.less
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,10 @@ h3 {
}
}

h1, h2 {
font-weight: 100;
}

.hk-spinner-legend-below {
color: @gray-light;
font-size: ceil(@font-size-base + 2);
Expand All @@ -101,15 +105,11 @@ h3 {
}

dd {
margin-bottom: 5px;

.btn {
margin-top: 15px;
margin-bottom: 10px;
}

&:first-child {
margin-right: 10px;
}
}
.bootstrap-select.btn-group {
margin-bottom: 0;
}
}

Expand All @@ -129,6 +129,21 @@ a:hover {
font-weight: bold;
}

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


// Help components

.hk-display-table {
display: table;

> div {
display: table-cell;
}
}


// Alerts

Expand Down Expand Up @@ -552,8 +567,7 @@ a:hover {
}

.label {
padding: 1px 8px;
border-radius: 3px;
font-size: ceil(@font-size-base - 2);
}

.label-alert {
Expand Down Expand Up @@ -674,7 +688,7 @@ p + .form-horizontal {
color: @brand-danger;
}

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

Expand Down Expand Up @@ -1000,14 +1014,18 @@ a:hover .fa-spinner {
border: none;

.panel-heading {
border-color: @list-group-border;
background-color: transparent;

.hk-heading {
color: inherit;
font-weight: 600;
}

h2 {
line-height: 1.3;
margin: @grid-gutter-width/8 0;
}

.dropdown {
margin-top: -5px;

Expand Down Expand Up @@ -1076,16 +1094,28 @@ a:hover .fa-spinner {
}
}
}

.hk-box-v-item {
border-top: 1px solid @list-group-border;
margin-left: -15px;
margin-right: -15px;
padding: 15px;

&:first-child {
border-top: none;
padding-top: 0;
}

&:last-child {
padding-bottom: 0;
}
}
}

.hk-info-top + .hk-panel-table-list {
margin-top: @grid-gutter-width/4;
}

.panel.hk-alert-details {
padding: 10px;
}

.hk-alert-center-detail .hk-panel-table-list {
padding: @grid-gutter-width/2;
}
Expand Down Expand Up @@ -1357,6 +1387,13 @@ td.hk-actions-two {
width: 20px;
}

.hk-actions-table-search {
position: absolute;
top: 0;
z-index: 10;
left: 177px
}


// Toastr Overrides

Expand Down Expand Up @@ -1820,6 +1857,37 @@ section {
}


// Alert Details screen

.hk-alert-center-detail {

.hk-icon-container {
padding-right: 10px;
text-align: center;
width: 24px;
}

.hk-info-container span {
display: block;

&.email {
font-weight: bold;
margin-bottom: 2px;
}

&.type {
margin-bottom: 5px;
}
}

.form-actions {
.btn:first-child {
margin-left: -14px;
}
}
}


// Access portal screens

.navbar-pf .navbar-utility li.dropdown > .dropdown-toggle .pficon-user {
Expand Down
2 changes: 1 addition & 1 deletion console/src/main/webapp/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<!-- endbower -->
</head>

<body style="background-color: #f5f5f5" class="ng-cloak"> <!-- FIXME: Add CSS rule -->
<body class="ng-cloak">
<nav class="navbar navbar-default navbar-pf" role="navigation">
<div idle-countdown="countdown" ng-init="countdown=30" id="idle">
<strong>You'll be logged out in {{countdown}} second(s).</strong>.
Expand Down

0 comments on commit 18010d5

Please sign in to comment.