Add user role privilege table
Created a directive to handle display of user privilege roles
on the local user management page.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I83caea33356012752c7a67301fa2a372f0c28620
diff --git a/app/assets/icons/icon-check.svg b/app/assets/icons/icon-check.svg
index f14e2bf..1bf40a3 100644
--- a/app/assets/icons/icon-check.svg
+++ b/app/assets/icons/icon-check.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 12"><path d="M14 2.2L12.2.5 4.7 8 1.8 5.1 0 6.9l4.7 4.6z"/></svg>
\ No newline at end of file
+<svg viewBox="0 0 17.75 17.75"><path d="M7 14.5L2 9.54l1.59-1.57L7 11.35 14.41 4 16 5.58 7 14.5z"/><path fill="none" d="M-7-7h32v32H-7z"/></svg>
\ No newline at end of file
diff --git a/app/assets/icons/icon-chevron-right.svg b/app/assets/icons/icon-chevron-right.svg
index 7c48325..a509934 100644
--- a/app/assets/icons/icon-chevron-right.svg
+++ b/app/assets/icons/icon-chevron-right.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z"></path></svg>
\ No newline at end of file
+<svg viewBox="0 0 32 32"><path d="M22 16L12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"/><path fill="none" d="M0 0h32v32H0z"/></svg>
diff --git a/app/common/components/table/table.html b/app/common/components/table/table.html
index b40c346..ceedd91 100644
--- a/app/common/components/table/table.html
+++ b/app/common/components/table/table.html
@@ -1,4 +1,4 @@
-<table class="bmc-table">
+<table class="bmc-table {{$ctrl.size}}">
<thead>
<!-- Header row -->
<tr>
@@ -14,9 +14,9 @@
ng-repeat="row in $ctrl.model.data"
class="bmc-table__row">
<!-- Row item -->
- <td ng-repeat="item in row.uiData"
+ <td ng-repeat="item in row.uiData track by $index"
class="bmc-table__cell">
- {{item}}
+ <ng-bind-html ng-bind-html="item"></ng-bind-html>
</td>
<!-- Row Actions -->
<td ng-if="$ctrl.rowActionsEnabled"
diff --git a/app/common/components/table/table.js b/app/common/components/table/table.js
index 09a6d6d..cf2b797 100644
--- a/app/common/components/table/table.js
+++ b/app/common/components/table/table.js
@@ -9,13 +9,16 @@
* The <bmc-table> component expects a 'model' attribute
* that will contain all the data needed to render the table.
*
- * The component also accepts a 'row-actions-enabled' attribute,
+ * The component accepts a 'row-actions-enabled' attribute,
* to optionally render table row actions. Defaults to false.
* Pass true to render actions. Row actions are defined in
* model.data.actions.
*
+ * The component accepts a 'size' attribute which can be
+ * set to 'small' which will render a smaller font size in the
+ * table.
*
- * The model object should contain 'header', and 'data'
+ * The model object should contain 'header' and 'data'
* properties.
*
* model: {
@@ -96,6 +99,6 @@
angular.module('app.common.components').component('bmcTable', {
template: require('./table.html'),
controller: TableController,
- bindings: {model: '<', rowActionsEnabled: '<', emitAction: '&'}
+ bindings: {model: '<', rowActionsEnabled: '<', size: '<', emitAction: '&'}
})
})(window.angular);
diff --git a/app/common/styles/components/table.scss b/app/common/styles/components/table.scss
index 40b6a64..0cdb414 100644
--- a/app/common/styles/components/table.scss
+++ b/app/common/styles/components/table.scss
@@ -149,6 +149,9 @@
.bmc-table {
width: 100%;
+ &.small {
+ font-size: 90%;
+ }
}
.bmc-table__row {
diff --git a/app/common/styles/elements/accordion.scss b/app/common/styles/elements/accordion.scss
index 6f4c62e..5923505 100644
--- a/app/common/styles/elements/accordion.scss
+++ b/app/common/styles/elements/accordion.scss
@@ -49,4 +49,15 @@
max-height: 1000px;
@include fastTransition-all;
}
+}
+
+.accordion-trigger {
+ .icon {
+ transition: transform $duration--fast-01;
+ }
+ &.accordion-trigger--expanded {
+ .icon {
+ transform: rotate(90deg);
+ }
+ }
}
\ No newline at end of file
diff --git a/app/index.js b/app/index.js
index c839708..6673c29 100644
--- a/app/index.js
+++ b/app/index.js
@@ -104,6 +104,7 @@
import users_index from './users/index.js';
import user_accounts_controller from './users/controllers/user-accounts-controller.js';
import username_validator from './users/directives/username-validator.js';
+import role_table from './users/directives/role-table.js';
window.angular && (function(angular) {
'use strict';
diff --git a/app/users/controllers/user-accounts-controller.html b/app/users/controllers/user-accounts-controller.html
index 41094b8..76df616 100644
--- a/app/users/controllers/user-accounts-controller.html
+++ b/app/users/controllers/user-accounts-controller.html
@@ -1,5 +1,5 @@
<loader loading="loading"></loader>
-<div class="local-users">
+<div class="page local-users">
<div class="row column">
<div class="column small-12">
<h1 class="page-title">Local user management</h1>
@@ -21,6 +21,7 @@
Add user
</button>
</div>
+ <!-- Local user table -->
<bmc-table
model="tableModel"
row-actions-enabled="true"
@@ -29,4 +30,10 @@
</bmc-table>
</div>
</div>
-</div>
\ No newline at end of file
+ <div class="row column">
+ <div class="column small-12">
+ <!-- Role table -->
+ <role-table></role-table>
+ </div>
+ </div>
+</div>
diff --git a/app/users/directives/role-table.html b/app/users/directives/role-table.html
new file mode 100644
index 0000000..55e8108
--- /dev/null
+++ b/app/users/directives/role-table.html
@@ -0,0 +1,14 @@
+<div class="role-table">
+ <button class="btn btn-tertiary accordion-trigger"
+ ng-click="roleTableCtrl.onClick()"
+ ng-class="{'accordion-trigger--expanded' : !roleTableCtrl.isCollapsed}">
+ <icon file="icon-chevron-right.svg" aria-hidden="true"></icon>
+ <span ng-if="roleTableCtrl.isCollapsed">View privilege role descriptions</span>
+ <span ng-if="!roleTableCtrl.isCollapsed">Hide privilege role descriptions</span>
+ </button>
+ <div uib-collapse="roleTableCtrl.isCollapsed">
+ <bmc-table model="roleTableCtrl.tableModel"
+ size="'small'">
+ </bmc-table>
+ </div>
+</div>
\ No newline at end of file
diff --git a/app/users/directives/role-table.js b/app/users/directives/role-table.js
new file mode 100644
index 0000000..c72ccfc
--- /dev/null
+++ b/app/users/directives/role-table.js
@@ -0,0 +1,65 @@
+window.angular && (function(angular) {
+ 'use strict';
+
+ /**
+ * Role table
+ * Table of privilege role descriptions
+ */
+ angular.module('app.users').directive('roleTable', [
+ '$sce',
+ function($sce) {
+ return {
+ restrict: 'E',
+ template: require('./role-table.html'),
+ controllerAs: 'roleTableCtrl',
+ controller: function() {
+ // TODO: This is a workaround to render the checkmark svg icon
+ // Would eventually like to enhance <bmc-table> component to
+ // compile custom directives as table items
+ const svg = require('../../assets/icons/icon-check.svg');
+ const check =
+ $sce.trustAsHtml(`<span class="icon__check-mark">${svg}<span>`);
+
+ this.tableModel = {};
+ this.tableModel.header =
+ ['', 'Admin', 'Operator', 'User', 'Callback'];
+
+ // TODO: When API changed from D-Bus to Redfish, 'Operator' role
+ // should have 'Configure components managed by this service'
+ // privilege checked
+ this.tableModel.data = [
+ {
+ uiData: [
+ 'Configure components managed by this service', check, '', '',
+ ''
+ ]
+ },
+ {uiData: ['Configure manager resources', check, '', '', '']},
+ {
+ uiData: [
+ 'Update password for current user account', check, check, check,
+ ''
+ ]
+ },
+ {uiData: ['Configure users and their accounts', check, '', '', '']},
+ {
+ uiData: [
+ 'Log in to the service and read resources', check, check, check,
+ ''
+ ]
+ },
+ {uiData: ['IPMI access point', check, check, check, check]},
+ {uiData: ['Redfish access point', check, check, check, '']},
+ {uiData: ['SSH access point', check, check, check, '']},
+ {uiData: ['WebUI access point', check, check, check, '']},
+ ];
+
+ this.isCollapsed = true;
+ this.onClick = () => {
+ this.isCollapsed = !this.isCollapsed;
+ };
+ }
+ };
+ }
+ ]);
+})(window.angular);
diff --git a/app/users/styles/user-accounts.scss b/app/users/styles/user-accounts.scss
index 9658b90..fe580cd 100644
--- a/app/users/styles/user-accounts.scss
+++ b/app/users/styles/user-accounts.scss
@@ -1,3 +1,7 @@
+.local-users {
+ margin-bottom: 50px;
+}
+
.local-users__actions {
display: flex;
flex-direction: row;
@@ -29,3 +33,31 @@
}
}
}
+
+.role-table {
+ margin-top: 30px;
+ .bmc-table {
+ max-width: 750px;
+ }
+ .bmc-table__cell:not(:first-of-type) {
+ text-align: center;
+ }
+ .bmc-table__column-header {
+ text-align: center;
+ }
+
+ // Bootstrap collapse directive override
+ // The expanded element gets 'in' class instead of 'show' class
+ // Bootstrap changes the display property for 'show' but not 'in'
+ .collapse.in {
+ display: block!important;
+ }
+}
+
+.icon__check-mark {
+ display: inline-block;
+ svg {
+ width: 16px;
+ fill: $primary-dark;
+ }
+}
\ No newline at end of file
