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/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