Network Step uses controller-as syntax
Brings the Launch Instance (Angular) feature up to par with the other steps by using controller-as syntax. Change-Id: I458f597f69c4487de008a064a89d1ba247b6436a Closes-Bug: 1455126
This commit is contained in:
Matt Borland
parent
9543c7232a
commit
8e917a36c2
|
|
@ -1,42 +1,42 @@
|
|||
<div ng-controller="LaunchInstanceNetworkCtrl">
|
||||
<h1>{$ ::label.title $}</h1>
|
||||
<div ng-controller="LaunchInstanceNetworkCtrl as ctrl">
|
||||
<h1>{$ ::ctrl.label.title $}</h1>
|
||||
<div class="content">
|
||||
<div class="subtitle">{$ ::label.subtitle $}</div>
|
||||
<div class="subtitle">{$ ::ctrl.label.subtitle $}</div>
|
||||
|
||||
|
||||
<div class="form-group" ng-if="model.arePortProfilesSupported">
|
||||
<label class="control-label required" for="profile">{$ ::label.profile $}</label>
|
||||
<label class="control-label required" for="profile">{$ ::ctrl.label.profile $}</label>
|
||||
<select class="form-control" id="profile" ng-model="model.newInstanceSpec.profile" ng-options="profile.name for profile in model.profiles">
|
||||
<option value="">{$ ::label.none_option $}</option>
|
||||
<option value="">{$ ::ctrl.label.none_option $}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<transfer-table tr-model="tableDataMulti" help-text="tableHelpText" limits="tableLimits">
|
||||
<allocated validate-number-min="1" ng-model="tableDataMulti.allocated.length">
|
||||
<table st-table="tableDataMulti.displayedAllocated" st-safe-src="tableDataMulti.allocated" hz-table
|
||||
<transfer-table tr-model="ctrl.tableDataMulti" help-text="ctrl.tableHelpText" limits="ctrl.tableLimits">
|
||||
<allocated validate-number-min="1" ng-model="ctrl.tableDataMulti.allocated.length">
|
||||
<table st-table="ctrl.tableDataMulti.displayedAllocated" st-safe-src="ctrl.tableDataMulti.allocated" hz-table
|
||||
class="table-striped table-rsp table-detail modern">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="reorder"></th>
|
||||
<th class="expander"></th>
|
||||
<th class="rsp-p1">{$ ::label.network $}</th>
|
||||
<th class="rsp-p2">{$ ::label.subnet_associated $}</th>
|
||||
<th class="rsp-p1">{$ ::label.shared $}</th>
|
||||
<th class="rsp-p1">{$ ::label.admin_state $}</th>
|
||||
<th class="rsp-p1">{$ ::label.status $}</th>
|
||||
<th class="rsp-p1">{$ ::ctrl.label.network $}</th>
|
||||
<th class="rsp-p2">{$ ::ctrl.label.subnet_associated $}</th>
|
||||
<th class="rsp-p1">{$ ::ctrl.label.shared $}</th>
|
||||
<th class="rsp-p1">{$ ::ctrl.label.admin_state $}</th>
|
||||
<th class="rsp-p1">{$ ::ctrl.label.status $}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-if="tableDataMulti.allocated.length === 0">
|
||||
<tr ng-if="ctrl.tableDataMulti.allocated.length === 0">
|
||||
<td colspan="8">
|
||||
<div class="no-rows-help">
|
||||
{$ ::trCtrl.helpText.noneAllocText $}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-repeat-start="row in tableDataMulti.displayedAllocated track by row.id"
|
||||
lr-drag-data="tableDataMulti.displayedAllocated" lr-drag-src="reorder"
|
||||
<tr ng-repeat-start="row in ctrl.tableDataMulti.displayedAllocated track by row.id"
|
||||
lr-drag-data="ctrl.tableDataMulti.displayedAllocated" lr-drag-src="reorder"
|
||||
lr-drop-target="reorder" lr-drop-success="trCtrl.updateAllocated(e, item, collection)">
|
||||
<td class="reorder">
|
||||
<span class="fa fa-sort" title="{$ ::trCtrl.helpText.orderText $}"></span>
|
||||
|
|
@ -51,8 +51,8 @@
|
|||
<div ng-repeat="subnet in row.subnets">{$ subnet.name $}</div>
|
||||
</td>
|
||||
<td class="rsp-p1">{$ row.shared | yesno $}</td>
|
||||
<td class="rsp-p1">{$ row.admin_state | decode:networkAdminStates $}</td>
|
||||
<td class="rsp-p1">{$ row.status | decode:networkStatuses $}</td>
|
||||
<td class="rsp-p1">{$ row.admin_state | decode:ctrl.networkAdminStates $}</td>
|
||||
<td class="rsp-p1">{$ row.status | decode:ctrl.networkStatuses $}</td>
|
||||
<td class="action-col">
|
||||
<action-list>
|
||||
<action action-classes="'btn btn-sm btn-default'"
|
||||
|
|
@ -66,25 +66,25 @@
|
|||
<td colspan="2"></td>
|
||||
<td colspan="7" class="detail">
|
||||
<dl class="dl-horizontal">
|
||||
<dt>{$ ::label.id $}</dt>
|
||||
<dt>{$ ::ctrl.label.id $}</dt>
|
||||
<dd>{$ row.id $}</dd>
|
||||
<dt>{$ ::label.project_id $}</dt>
|
||||
<dt>{$ ::ctrl.label.project_id $}</dt>
|
||||
<dd>{$ row.tenant_id $}</dd>
|
||||
<dt>{$ ::label.external_network $}</dt>
|
||||
<dt>{$ ::ctrl.label.external_network $}</dt>
|
||||
<dd>{$ row['router:external'] | yesno $}</dd>
|
||||
</dl>
|
||||
<div><b>{$ ::label.provider_network $}</b></div>
|
||||
<div><b>{$ ::ctrl.label.provider_network $}</b></div>
|
||||
<div class="row" class="detail">
|
||||
<dl class="col-sm-3">
|
||||
<dt>{$ ::label.provider_network_type $}</dt>
|
||||
<dt>{$ ::ctrl.label.provider_network_type $}</dt>
|
||||
<dd>{$ row['provider:network_type'] $}</dd>
|
||||
</dl>
|
||||
<dl class="col-sm-3">
|
||||
<dt>{$ ::label.provider_segmentation_id $}</dt>
|
||||
<dt>{$ ::ctrl.label.provider_segmentation_id $}</dt>
|
||||
<dd>{$ row['provider:segmentation_id'] $}</dd>
|
||||
</dl>
|
||||
<dl class="col-sm-3">
|
||||
<dt>{$ ::label.provider_physical_network $}</dt>
|
||||
<dt>{$ ::ctrl.label.provider_physical_network $}</dt>
|
||||
<dd>{$ row['provider:physical_network'] $}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
</table>
|
||||
</allocated>
|
||||
<available>
|
||||
<table st-table="tableDataMulti.displayedAvailable" st-safe-src="tableDataMulti.available"
|
||||
<table st-table="ctrl.tableDataMulti.displayedAvailable" st-safe-src="ctrl.tableDataMulti.available"
|
||||
hz-table class="table-striped table-rsp table-detail modern">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -106,11 +106,11 @@
|
|||
<tr>
|
||||
<th class="reorder"></th>
|
||||
<th class="expander"></th>
|
||||
<th st-sort-default class="rsp-p1">{$ ::label.network $}</th>
|
||||
<th class="rsp-p2">{$ ::label.subnet_associated $}</th>
|
||||
<th class="rsp-p1">{$ ::label.shared $}</th>
|
||||
<th class="rsp-p1">{$ ::label.admin_state $}</th>
|
||||
<th class="rsp-p1">{$ ::label.status $}</th>
|
||||
<th st-sort-default class="rsp-p1">{$ ::ctrl.label.network $}</th>
|
||||
<th class="rsp-p2">{$ ::ctrl.label.subnet_associated $}</th>
|
||||
<th class="rsp-p1">{$ ::ctrl.label.shared $}</th>
|
||||
<th class="rsp-p1">{$ ::ctrl.label.admin_state $}</th>
|
||||
<th class="rsp-p1">{$ ::ctrl.label.status $}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-repeat-start="row in tableDataMulti.displayedAvailable track by row.id" ng-if="!trCtrl.allocatedIds[row.id]">
|
||||
<tr ng-repeat-start="row in ctrl.tableDataMulti.displayedAvailable track by row.id" ng-if="!trCtrl.allocatedIds[row.id]">
|
||||
<td class="reorder"></td>
|
||||
<td class="expander">
|
||||
<span class="fa fa-chevron-right" hz-expand-detail
|
||||
|
|
@ -133,8 +133,8 @@
|
|||
<div ng-repeat="subnet in row.subnets">{$ subnet.name $}</div>
|
||||
</td>
|
||||
<td class="rsp-p1">{$ row.shared | yesno $}</td>
|
||||
<td class="rsp-p1">{$ row.admin_state | decode:networkAdminStates $}</td>
|
||||
<td class="rsp-p1">{$ row.status | decode:networkStatuses $}</td>
|
||||
<td class="rsp-p1">{$ row.admin_state | decode:ctrl.networkAdminStates $}</td>
|
||||
<td class="rsp-p1">{$ row.status | decode:ctrl.networkStatuses $}</td>
|
||||
<td class="action-col">
|
||||
<action-list button-tooltip="row.warningMessage"
|
||||
bt-model="trCtrl.tooltipModel" bt-disabled="!row.disabled"
|
||||
|
|
@ -153,25 +153,25 @@
|
|||
<td colspan="2"></td>
|
||||
<td colspan="7" class="detail">
|
||||
<dl class="dl-horizontal">
|
||||
<dt>{$ ::label.id $}</dt>
|
||||
<dt>{$ ::ctrl.label.id $}</dt>
|
||||
<dd>{$ row.id $}</dd>
|
||||
<dt>{$ ::label.project_id $}</dt>
|
||||
<dt>{$ ::ctrl.label.project_id $}</dt>
|
||||
<dd>{$ row.tenant_id $}</dd>
|
||||
<dt>{$ ::label.external_network $}</dt>
|
||||
<dt>{$ ::ctrl.label.external_network $}</dt>
|
||||
<dd>{$ row['router:external'] | yesno $}</dd>
|
||||
</dl>
|
||||
<div><b>{$ ::label.provider_network $}</b></div>
|
||||
<div><b>{$ ::ctrl.label.provider_network $}</b></div>
|
||||
<div class="row">
|
||||
<dl class="col-sm-3">
|
||||
<dt>{$ ::label.provider_network_type $}</dt>
|
||||
<dt>{$ ::ctrl.label.provider_network_type $}</dt>
|
||||
<dd>{$ row['provider:network_type'] $}</dd>
|
||||
</dl>
|
||||
<dl class="col-sm-3">
|
||||
<dt>{$ ::label.provider_segmentation_id $}</dt>
|
||||
<dt>{$ ::ctrl.label.provider_segmentation_id $}</dt>
|
||||
<dd>{$ row['provider:segmentation_id'] $}</dd>
|
||||
</dl>
|
||||
<dl class="col-sm-3">
|
||||
<dt>{$ ::label.provider_physical_network $}</dt>
|
||||
<dt>{$ ::ctrl.label.provider_physical_network $}</dt>
|
||||
<dd>{$ row['provider:physical_network'] $}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -46,8 +46,9 @@
|
|||
]);
|
||||
|
||||
function LaunchInstanceNetworkCtrl($scope) {
|
||||
var ctrl = this;
|
||||
|
||||
$scope.label = {
|
||||
ctrl.label = {
|
||||
title: gettext('Networks'),
|
||||
subtitle: gettext('Networks provide the communication channels for instances in the cloud.'),
|
||||
network: gettext('Network'),
|
||||
|
|
@ -66,28 +67,28 @@
|
|||
provider_physical_network: gettext('Physical Network')
|
||||
};
|
||||
|
||||
$scope.networkStatuses = {
|
||||
ctrl.networkStatuses = {
|
||||
'ACTIVE': gettext('Active'),
|
||||
'DOWN': gettext('Down')
|
||||
};
|
||||
|
||||
$scope.networkAdminStates = {
|
||||
ctrl.networkAdminStates = {
|
||||
'UP': gettext('Up'),
|
||||
'DOWN': gettext('Down')
|
||||
};
|
||||
|
||||
$scope.tableDataMulti = {
|
||||
ctrl.tableDataMulti = {
|
||||
available: $scope.model.networks,
|
||||
allocated: $scope.model.newInstanceSpec.networks,
|
||||
displayedAvailable: [],
|
||||
displayedAllocated: []
|
||||
};
|
||||
|
||||
$scope.tableLimits = {
|
||||
ctrl.tableLimits = {
|
||||
maxAllocation: -1
|
||||
};
|
||||
|
||||
$scope.tableHelpText = {
|
||||
ctrl.tableHelpText = {
|
||||
allocHelpText: gettext('Select networks from those listed below.'),
|
||||
availHelpText: gettext('Select at least one network')
|
||||
};
|
||||
|
|
|
|||
|
|
@ -31,41 +31,41 @@
|
|||
}));
|
||||
|
||||
it('has correct network statuses', function() {
|
||||
expect(scope.networkStatuses).toBeDefined();
|
||||
expect(scope.networkStatuses.ACTIVE).toBeDefined();
|
||||
expect(scope.networkStatuses.DOWN).toBeDefined();
|
||||
expect(Object.keys(scope.networkStatuses).length).toBe(2);
|
||||
expect(ctrl.networkStatuses).toBeDefined();
|
||||
expect(ctrl.networkStatuses.ACTIVE).toBeDefined();
|
||||
expect(ctrl.networkStatuses.DOWN).toBeDefined();
|
||||
expect(Object.keys(ctrl.networkStatuses).length).toBe(2);
|
||||
});
|
||||
|
||||
it('has correct network admin states', function() {
|
||||
expect(scope.networkAdminStates).toBeDefined();
|
||||
expect(scope.networkAdminStates.UP).toBeDefined();
|
||||
expect(scope.networkAdminStates.DOWN).toBeDefined();
|
||||
expect(Object.keys(scope.networkStatuses).length).toBe(2);
|
||||
expect(ctrl.networkAdminStates).toBeDefined();
|
||||
expect(ctrl.networkAdminStates.UP).toBeDefined();
|
||||
expect(ctrl.networkAdminStates.DOWN).toBeDefined();
|
||||
expect(Object.keys(ctrl.networkStatuses).length).toBe(2);
|
||||
});
|
||||
|
||||
it('defines a multiple-allocation table', function() {
|
||||
expect(scope.tableLimits).toBeDefined();
|
||||
expect(scope.tableLimits.maxAllocation).toBe(-1);
|
||||
expect(ctrl.tableLimits).toBeDefined();
|
||||
expect(ctrl.tableLimits.maxAllocation).toBe(-1);
|
||||
});
|
||||
|
||||
it('contains its own labels', function() {
|
||||
expect(scope.label).toBeDefined();
|
||||
expect(Object.keys(scope.label).length).toBeGreaterThan(0);
|
||||
expect(ctrl.label).toBeDefined();
|
||||
expect(Object.keys(ctrl.label).length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('contains help text for the table', function() {
|
||||
expect(scope.tableHelpText).toBeDefined();
|
||||
expect(scope.tableHelpText.allocHelpText).toBeDefined();
|
||||
expect(scope.tableHelpText.availHelpText).toBeDefined();
|
||||
expect(ctrl.tableHelpText).toBeDefined();
|
||||
expect(ctrl.tableHelpText.allocHelpText).toBeDefined();
|
||||
expect(ctrl.tableHelpText.availHelpText).toBeDefined();
|
||||
});
|
||||
|
||||
it('uses scope to set table data', function() {
|
||||
expect(scope.tableDataMulti).toBeDefined();
|
||||
expect(scope.tableDataMulti.available).toEqual(['net-a', 'net-b']);
|
||||
expect(scope.tableDataMulti.allocated).toEqual(['net-a']);
|
||||
expect(scope.tableDataMulti.displayedAllocated).toEqual([]);
|
||||
expect(scope.tableDataMulti.displayedAvailable).toEqual([]);
|
||||
expect(ctrl.tableDataMulti).toBeDefined();
|
||||
expect(ctrl.tableDataMulti.available).toEqual(['net-a', 'net-b']);
|
||||
expect(ctrl.tableDataMulti.allocated).toEqual(['net-a']);
|
||||
expect(ctrl.tableDataMulti.displayedAllocated).toEqual([]);
|
||||
expect(ctrl.tableDataMulti.displayedAvailable).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue