openstack/ironic-ui
Code Issues Proposed changes

Improve the display of node information

Browse Source 
Automatically set focus to the reason field in the maintenance popup
Use filters like noValue and date: 'medium' to improve display of node data
Ensure event handlers are cleaned up when the node-list is destroyed

Change-Id: I15eee5beb933ff5623d21d418dbd771ab3cfc043
This commit is contained in:
Peter Piela 2016-08-26 09:55:28 -04:00
parent 060f2f08b3
commit eff75b2aec
4 changed files with 54 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ironic_ui/static/dashboard/admin/ironic/maintenance/maintenance.html
View File

@ -9,6 +9,7 @@
<input type="text"
class="form-control input-sm"
ng-model="maintReason"
auto-focus
placeholder=""/>
</div>
</div>
@ -28,4 +29,3 @@
Put Node(s) Into Maintenance Mode
</button>
</div>

30
ironic_ui/static/dashboard/admin/ironic/node-details/sections/configuration.html
View File

@ -6,13 +6,13 @@
<hr class="header_rule">
<dl class="dl-horizontal">
<dt translate>Node ID</dt>
<dd>{$ ctrl.node.uuid $}</dd>
<dd>{$ ctrl.node.uuid | noValue $}</dd>
<dt translate>Chassis ID</dt>
<dd>{$ ctrl.node.chassis_uuid | noValue $}</dd>
<dt translate>Created At</dt>
<dd>{$ ctrl.node.created_at | date:'medium' $}</dd>
<dd>{$ ctrl.node.created_at | date:'medium' | noValue $}</dd>
<dt translate>Extra</dt>
<dd>{$ ctrl.node.extra $}</dd>
<dd>{$ ctrl.node.extra | noValue $}</dd>
</dl>
</div>
@ -114,7 +114,7 @@
<dl class="dl-horizontal">
<dt ng-repeat-start="(propertyName, propertyValue) in ctrl.node.properties">
{$ propertyName $}</dt>
<dd ng-repeat-end>{$ propertyValue $}</dd>
<dd ng-repeat-end>{$ propertyValue | noValue $}</dd>
</dl>
</div>
@ -125,29 +125,29 @@
<div ng-switch="ctrl.node.driver">
<dl ng-switch-when="pxe_ssh" class="dl-horizontal">
<dt translate>Driver</dt>
<dd>{$ ctrl.node.driver $}</dd>
<dd>{$ ctrl.node.driver | noValue $}</dd>
<dt translate>SSH Port</dt>
<dd>{$ ctrl.node.driver_info.ssh_port $}</dd>
<dd>{$ ctrl.node.driver_info.ssh_port | noValue $}</dd>
<dt translate>SSH Username</dt>
<dd>{$ ctrl.node.driver_info.ssh_username $}</dd>
<dd>{$ ctrl.node.driver_info.ssh_username | noValue $}</dd>
<dt translate>Deploy Kernel</dt>
<dd>
<a ng-if="deploy_kernel_is_uuid = ctrl.isUuid(ctrl.node.driver_info.deploy_kernel)"
href="/dashboard/admin/images/{$ ctrl.node.driver_info.deploy_kernel $}/detail">
{$ ctrl.node.driver_info.deploy_kernel $}
{$ ctrl.node.driver_info.deploy_kernel | noValue $}
</a>
<span ng-if="!deploy_kernel_is_uuid">
{$ ctrl.node.driver_info.deploy_kernel $}
{$ ctrl.node.driver_info.deploy_kernel | noValue $}
</span>
</dd>
<dt translate>Deploy Ramdisk</dt>
<dd>
<a ng-if="deploy_ramdisk_is_uuid = ctrl.isUuid(ctrl.node.driver_info.deploy_ramdisk)"
href="/dashboard/admin/images/{$ ctrl.node.driver_info.deploy_ramdisk $}/detail">
{$ ctrl.node.driver_info.deploy_ramdisk $}
{$ ctrl.node.driver_info.deploy_ramdisk | noValue $}
</a>
<span ng-if="!deploy_ramdisk_is_uuid">
{$ ctrl.node.driver_info.deploy_ramdisk $}
{$ ctrl.node.driver_info.deploy_ramdisk | noValue $}
</span>
</dd>
</dl>
@ -176,23 +176,23 @@
<div ng-switch="ctrl.node.driver">
<dl ng-switch-when="pxe_ssh" class="dl-horizontal">
<dt translate>Instance Name</dt>
<dd>{$ ctrl.node.instance_info.display_name $}</dd>
<dd>{$ ctrl.node.instance_info.display_name | noValue $}</dd>
<dt translate>Ramdisk</dt>
<dd>
<a href="/dashboard/admin/images/{$ ctrl.node.instance_info.ramdisk $}/detail">
{$ ctrl.node.instance_info.ramdisk $}
{$ ctrl.node.instance_info.ramdisk | noValue $}
</a>
</dd>
<dt translate>Kernel</dt>
<dd>
<a href="/dashboard/admin/images/{$ ctrl.node.instance_info.kernel $}/detail">
{$ ctrl.node.instance_info.kernel $}
{$ ctrl.node.instance_info.kernel | noValue $}
</a>
</dd>
</dl>
<dl ng-switch-default class="dl-horizontal">
<dt ng-repeat-start="(id, value) in ctrl.node.instance_info">{$ id $}</dt>
<dd ng-repeat-end>{$ value $}</dd>
<dd ng-repeat-end>{$ value | noValue $}</dd>
</dl>
</div>
</div>

24
ironic_ui/static/dashboard/admin/ironic/node-details/sections/overview.html
View File

@ -8,17 +8,17 @@
<dt translate>Name</dt>
<dd>{$ ctrl.node['name'] $}</dd>
<dt translate>Maintenance</dt>
<dd>{$ ctrl.node['maintenance'] ? 'True' : 'False' $}</dd>
<dd>{$ ctrl.node['maintenance'] | yesno $}</dd>
<dt translate>Maintenance Reason</dt>
<dd>{$ ctrl.node['maintenance_reason'] $}</dd>
<dd>{$ ctrl.node['maintenance_reason'] | noValue $}</dd>
<dt translate>Inspection Started At</dt>
<dd>{$ ctrl.node['inspection_started_at'] $}</dd>
<dd>{$ ctrl.node['inspection_started_at'] | date: 'medium' | noValue $}</dd>
<dt translate>Inspection Finished At</dt>
<dd>{$ ctrl.node['inspection_finished_at'] $}</dd>
<dd>{$ ctrl.node['inspection_finished_at'] | date: 'medium' | noValue $}</dd>
<dt translate>Reservation</dt>
<dd>{$ ctrl.node['reservation'] $}</dd>
<dd>{$ ctrl.node['reservation'] | noValue $}</dd>
<dt translate>Console Enabled</dt>
<dd>{$ ctrl.node['console_enabled'] ? 'True' : 'False' $}</dd>
<dd>{$ ctrl.node['console_enabled'] | yesno $}</dd>
</dl>
</div>
@ -30,21 +30,21 @@
<dt translate>Instance ID</dt>
<dd>
<a href="/admin/instances/{$ ctrl.node['instance_uuid'] $}/detail">
{$ ctrl.node['instance_uuid'] $}
{$ ctrl.node['instance_uuid'] | noValue $}
</a>
</dd>
<dt translate>Power State</dt>
<dd ng-class="{'running': ctrl.node['target_power_state']}">{$ ctrl.node['power_state'] $}</dd>
<dt translate>Target Power State</dt>
<dd>{$ ctrl.node['target_power_state'] $}</dd>
<dd>{$ ctrl.node['target_power_state'] | noValue $}</dd>
<dt translate>Provision State</dt>
<dd>{$ ctrl.node['provision_state'] $}</dd>
<dd>{$ ctrl.node['provision_state'] | noValue $}</dd>
<dt translate>Target Provision State</dt>
<dd>{$ ctrl.node['target_provision_state'] $}</dd>
<dd>{$ ctrl.node['target_provision_state'] | noValue $}</dd>
<dt translate>Last Error</dt>
<dd>{$ ctrl.node['last_error'] $}</dd>
<dd>{$ ctrl.node['last_error'] | noValue $}</dd>
<dt translate>Updated At</dt>
<dd>{$ ctrl.node['updated_at'] $}</dd>
<dd>{$ ctrl.node['updated_at'] | date: 'medium' | noValue $}</dd>
</dl>
</div>
</div>

38
ironic_ui/static/dashboard/admin/ironic/node-list/node-list.controller.js
View File

@ -22,6 +22,7 @@
.controller('IronicNodeListController', IronicNodeListController);
IronicNodeListController.$inject = [
'$scope',
'$rootScope',
'horizon.app.core.openstack-service-api.ironic',
'horizon.dashboard.admin.ironic.events',
@ -31,7 +32,8 @@
'horizon.dashboard.admin.ironic.enroll-node.service'
];
function IronicNodeListController($rootScope,
function IronicNodeListController($scope,
$rootScope,
ironic,
ironicEvents,
actions,
@ -89,20 +91,32 @@
];
// Listen for the creation of new nodes, and update the node list
$rootScope.$on(ironicEvents.ENROLL_NODE_SUCCESS, function() {
init();
});
var enrollNodeHandler =
$rootScope.$on(ironicEvents.ENROLL_NODE_SUCCESS,
function() {
init();
});
$rootScope.$on(ironicEvents.DELETE_NODE_SUCCESS, function() {
init();
});
var deleteNodeHandler = $rootScope.$on(ironicEvents.DELETE_NODE_SUCCESS,
function() {
init();
});
$rootScope.$on(ironicEvents.CREATE_PORT_SUCCESS, function() {
init();
});
var createPortHandler = $rootScope.$on(ironicEvents.CREATE_PORT_SUCCESS,
function() {
init();
});
$rootScope.$on(ironicEvents.DELETE_PORT_SUCCESS, function() {
init();
var deletePortHandler = $rootScope.$on(ironicEvents.DELETE_PORT_SUCCESS,
function() {
init();
});
$scope.$on('destroy', function() {
enrollNodeHandler();
deleteNodeHandler();
createPortHandler();
deletePortHandler();
});
init();