openstack/horizon
Code Issues Proposed changes

Update Users Table to single HTML

Browse Source 
The multiple table files actually made it more difficult to see
the whole picture of the table. You would have to have multiple files
open to correlate the column headers, column data, and details sections.

Future patches can add additional helper directives to simplify this
even further.

Also removed batch actions and row actions from table. We will
introduce them back as we add each action back in.

To test set DISABLED = False in _3031_identity_users_panel.py

Co-Authored-By: Cindy Lu <clu@us.ibm.com>
Change-Id: Ia6cf77cadef48d1f6725e8f36717b042ce3beb00
Partially-Implements: blueprint angularize-identity-tables
This commit is contained in:
Thai Tran 2015-09-01 09:16:15 -07:00
parent 3e6c43f7b7
commit b08daf97fe
8 changed files with 92 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
openstack_dashboard/dashboards/identity/static/dashboard/identity/users/table/table-batch-actions.html
View File

@ -1,29 +0,0 @@
<!--
Table-batch-actions:
This is where batch actions like searching, creating, and deleting.
-->
<th colspan="100" class="search-header">
<hz-search-bar group-classes="input-group-sm" icon-classes="fa-search">
<action-list class="btn-addon">
<action
action-classes="'btn btn-default btn-sm'"
callback="actions.create.open">
<i class="fa fa-user-plus"></i>
<translate>Create User</translate>
</action>
</action-list>
<action-list class="btn-addon">
<action
action-classes="'btn btn-default btn-sm btn-danger'"
disabled="numSelected === 0"
callback="actions.deleted.batchDelete">
<i class="fa fa-trash-o"></i>
<translate>Delete Users</translate>
</action>
</action-list>
</hz-search-bar>
</th>

33
openstack_dashboard/dashboards/identity/static/dashboard/identity/users/table/table-header.html
View File

@ -1,33 +0,0 @@
<!--
Table-column-headers:
This is where we declaratively define the table column headers.
Include select-col if you want to select all.
Include expander if you want to inline details.
Include action-col if you want to perform actions.
-->
<th class="select-col">
<input type="checkbox" hz-select-all="table.iusers">
</th>
<th class="expander"></th>
<th class="rsp-p1" st-sort="name" st-sort-default="name">
<translate>User Name</translate>
</th>
<th class="rsp-p2" st-sort="email">
<translate>Email</translate>
</th>
<th class="rsp-p1" st-sort="tenantId||default_project_id">
<translate>User ID</translate>
</th>
<th class="rsp-p2 text-center" st-sort="enabled">
<translate>Enabled</translate>
</th>
<th class="action-col">
<translate>Actions</translate>
</th>

39
openstack_dashboard/dashboards/identity/static/dashboard/identity/users/table/table-row-actions.html
View File

@ -1,39 +0,0 @@
<!--
Table-row-action-column:
Actions taken here applies to a single item/row.
-->
<action-list dropdown>
<action
button-type="split-button"
action-classes="'btn btn-default btn-sm'"
callback="actions.edit.open" item="user">
<translate>Edit</translate>
</action>
<menu>
<action
button-type="menu-item"
callback="actions.password.open" item="user">
<translate>Change Password</translate>
</action>
<action
ng-if="user.id !== table.userSession.id"
button-type="menu-item"
callback="actions.enable.toggle" item="user">
<translate ng-show="user.enabled">Disable</translate>
<translate ng-hide="user.enabled">Enable</translate>
</action>
<action
ng-if="user.id !== table.userSession.id"
button-type="menu-item"
action-classes="'text-danger'"
callback="actions.deleted.singleDelete" item="user">
<translate>Delete</translate>
</action>
</menu>
</action-list>

30
openstack_dashboard/dashboards/identity/static/dashboard/identity/users/table/table-row-details.html
View File

@ -1,30 +0,0 @@
<!--
Detail-row:
Contains detailed information on this item.
Can be toggled using the chevron button.
Ensure colspan is greater or equal to number of column-headers.
-->
<td class="detail" colspan="100">
<dl class="dl-horizontal">
<dt ng-if="user.domain_id"><translate>Domain ID</translate></dt>
<dd ng-if="user.domain_id">{$ user.domain_id $}</dd>
<dt><translate>Project ID</translate></dt>
<dd>{$ user.tenantId || user.default_project_id $}</dd>
<dt><translate>User Name</translate></dt>
<dd>{$ user.name $}</dd>
<dt><translate>Email</translate></dt>
<dd>{$ user.email || '--' $}</dd>
<dt><translate>User ID</translate></dt>
<dd>{$ user.id $}</dd>
<dt><translate>Enabled</translate></dt>
<dd>{$ user.enabled | yesno $}</dd>
</dl>
</td>

40
openstack_dashboard/dashboards/identity/static/dashboard/identity/users/table/table-rows.html
View File

@ -1,40 +0,0 @@
<!--
Table-rows:
This is where we declaratively define the table columns.
Include select-col if you want to select all.
Include expander if you want to inline details.
Include action-col if you want to perform actions.
rsp-p1 rsp-p2 are responsive priority as user resizes window.
-->
<tr ng-repeat-start="user in table.iusers track by user.id"
ng-class="{'st-selected': checked[user.id]}">
<td class="select-col">
<input type="checkbox"
ng-model="selected[user.id].checked"
hz-select="user">
</td>
<td class="expander">
<i class="fa fa-chevron-right"
hz-expand-detail
duration="200">
</i>
</td>
<td class="rsp-p1">{$ user.name $}</td>
<td class="rsp-p2"><a ng-href="mailto:{$user.email$}">{$ user.email $}</a></td>
<td class="rsp-p1">{$ user.id $}</td>
<td class="rsp-p2 text-center">
<i ng-show="user.enabled" class="fa fa-check text-success"></i>
<i ng-hide="user.enabled" class="fa fa-times text-danger"></i>
</td>
<td class="action-col"
ng-include="table.path + 'table-row-actions.html'">
</td>
</tr>
<tr ng-repeat-end class="detail-row"
ng-include="table.path + 'table-row-details.html'">
</tr>

4
openstack_dashboard/dashboards/identity/static/dashboard/identity/users/table/table.controller.js
View File

@ -30,21 +30,19 @@
.controller('identityUsersTableController', identityUsersTableController);
identityUsersTableController.$inject = [
'horizon.dashboard.identity.basePath',
'horizon.framework.widgets.toast.service',
'horizon.framework.util.i18n.gettext',
'horizon.app.core.openstack-service-api.policy',
'horizon.app.core.openstack-service-api.keystone'
];
function identityUsersTableController(basepath, toast, gettext, policy, keystone) {
function identityUsersTableController(toast, gettext, policy, keystone) {
var ctrl = this;
ctrl.users = [];
ctrl.iusers = [];
ctrl.userSession = {};
ctrl.checked = {};
ctrl.path = basepath + 'users/table/';
init();

8
openstack_dashboard/dashboards/identity/static/dashboard/identity/users/table/table.controller.spec.js
View File

@ -40,7 +40,7 @@
};
}
var controller, toastService, policyAPI, keystoneAPI, staticUrl;
var controller, toastService, policyAPI, keystoneAPI;
///////////////////////
@ -57,7 +57,6 @@
policyAPI = $injector.get('horizon.app.core.openstack-service-api.policy');
keystoneAPI = $injector.get('horizon.app.core.openstack-service-api.keystone');
controller = $injector.get('$controller');
staticUrl = $injector.get('$window').STATIC_URL;
spyOn(toastService, 'add').and.callFake(fakeToast);
spyOn(policyAPI, 'check').and.callFake(fakePolicy);
@ -73,11 +72,6 @@
});
}
it('should set path properly', function() {
var path = staticUrl + 'dashboard/identity/users/table/';
expect(createController().path).toEqual(path);
});
it('should invoke keystone apis if policy passes', function() {
policy.allowed = true;
createController();

93
openstack_dashboard/dashboards/identity/static/dashboard/identity/users/table/table.html
View File

@ -7,10 +7,97 @@
class="table-striped table-rsp table-detail modern">
<thead>
<tr ng-include="table.path + 'table-batch-actions.html'"></tr>
<tr ng-include="table.path + 'table-header.html'"></tr>
<!--
Table-batch-actions:
This is where batch actions like searching, creating, and deleting.
-->
<tr>
<th colspan="100" class="search-header">
<hz-search-bar group-classes="input-group-sm" icon-classes="fa-search"></hz-search-bar>
</th>
</tr>
<!--
Table-column-headers:
This is where we declaratively define the table column headers.
Include select-col if you want to select all.
Include expander if you want to inline details.
Include action-col if you want to perform actions.
-->
<tr>
<th class="select-col"><input type="checkbox" hz-select-all="table.iusers"></th>
<th class="expander"></th>
<th class="rsp-p1" st-sort="name" st-sort-default="name" translate>User Name</th>
<th class="rsp-p2" st-sort="email" translate>Email</th>
<th class="rsp-p1" st-sort="tenantId||default_project_id" translate>User ID</th>
<th class="rsp-p2 text-center" st-sort="enabled" translate>Enabled</th>
</tr>
</thead>
<tbody ng-include="table.path + 'table-rows.html'"></tbody>
<tbody>
<!--
Table-rows:
This is where we declaratively define the table columns.
Include select-col if you want to select all.
Include expander if you want to inline details.
Include action-col if you want to perform actions.
rsp-p1 rsp-p2 are responsive priority as user resizes window.
-->
<tr ng-repeat-start="user in table.iusers track by user.id"
ng-class="{'st-selected': checked[user.id]}">
<td class="select-col">
<input type="checkbox" ng-model="selected[user.id].checked" hz-select="user">
</td>
<td class="expander">
<span class="fa fa-chevron-right" hz-expand-detail duration="200"></span>
</td>
<td class="rsp-p1">{$ user.name $}</td>
<td class="rsp-p2"><a ng-href="mailto:{$user.email$}">{$ user.email $}</a></td>
<td class="rsp-p1">{$ user.id $}</td>
<td class="rsp-p2 text-center">
<span ng-show="user.enabled" class="fa fa-check text-success"></span>
<span ng-hide="user.enabled" class="fa fa-times text-danger"></span>
</td>
</tr>
<!--
Detail-row:
Contains detailed information on this item.
Can be toggled using the chevron button.
Ensure colspan is greater or equal to number of column-headers.
-->
<tr ng-repeat-end class="detail-row">
<td class="detail" colspan="100">
<dl class="dl-horizontal">
<dt ng-if="user.domain_id" translate>Domain ID</dt>
<dd ng-if="user.domain_id" translate>{$ user.domain_id $}</dd>
<dt translate>Project ID</dt>
<dd>{$ user.tenantId || user.default_project_id $}</dd>
<dt translate>User Name</dt>
<dd>{$ user.name $}</dd>
<dt translate>Email</dt>
<dd>{$ user.email || '-' $}</dd>
<dt translate>User ID</dt>
<dd>{$ user.id $}</dd>
<dt translate>Enabled</dt>
<dd>{$ user.enabled | yesno $}</dd>
</dl>
</td>
</tr>
</tbody>
<!--
Table-footer:
This is where we display number of items and pagination controls.
Ensure colspan is greater or equal to number of column-headers.
-->
<tfoot hz-table-footer items="table.iusers"></tfoot>
</table>