UI-Lion: Cluster View localized (to English).
- WIP: LionService (client-side) is still faked out
- Need to request localized data from server still.
Change-Id: I2d846214343d3574ad246bfe50ef76dc89678b23
diff --git a/web/gui/src/main/webapp/app/fw/util/lion.js b/web/gui/src/main/webapp/app/fw/util/lion.js
index 5a0cb69..b30e8bb 100644
--- a/web/gui/src/main/webapp/app/fw/util/lion.js
+++ b/web/gui/src/main/webapp/app/fw/util/lion.js
@@ -16,23 +16,6 @@
*/
/*
- * Copyright 2017-present Open Networking Laboratory
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-/*
ONOS GUI -- Lion -- Localization Utilities
*/
(function () {
@@ -40,21 +23,48 @@
var $log, fs;
- // returns a lion bundle for the given key
- function bundle(key) {
-
- // TODO: Use message handler mech. to get bundle from server
- // For now, a fake placeholder bundle
-
- var bun = {
+ // returns a lion bundle (function) for the given bundle-key
+ function bundle(bundleKey) {
+ var bundle = {
computer: 'Calcolatore',
disk: 'Disco',
monitor: 'Schermo',
keyboard: 'Tastiera'
};
- $log.warn('Using fake bundle', bun);
- return bun;
+ if (bundleKey === 'core.view.cluster') {
+ bundle = {
+ title_cluster_nodes: 'Cluster Nodes',
+ total: 'Total',
+ active: 'Active',
+ started: 'Started',
+ node_id: 'Node ID',
+ ip_address: 'IP Address',
+ tcp_port: 'TCP Port',
+ last_updated: 'Last Updated',
+ devices: 'Devices',
+ uri: 'URI',
+ type: 'Type',
+ chassis_id: 'Chassis ID',
+ vendor: 'Vendor',
+ hw_version: 'H/W Version',
+ sw_version: 'S/W Version',
+ protocol: 'Protocol',
+ serial_number: 'Serial #',
+ k_esc_hint: 'Close the details panel',
+ k_click_hint: 'Select a row to show cluster node details',
+ k_scroll_down_hint: 'See available cluster nodes',
+ k_click: 'click',
+ k_scroll_down: 'scroll down'
+ };
+ }
+
+ // TODO: Use message handler mech. to get bundle from server
+ $log.warn('Using fake bundle', bundle);
+
+ return function (key) {
+ return bundle[key] || '%' + key + '%';
+ };
}
angular.module('onosUtil')
diff --git a/web/gui/src/main/webapp/app/view/cluster/cluster.html b/web/gui/src/main/webapp/app/view/cluster/cluster.html
index dab3805..83c721e 100644
--- a/web/gui/src/main/webapp/app/view/cluster/cluster.html
+++ b/web/gui/src/main/webapp/app/view/cluster/cluster.html
@@ -2,7 +2,7 @@
<div id="ov-cluster">
<div class="tabular-header">
<h2>
- Cluster Nodes ({{tableData.length}} total)
+ {{lion('title_cluster_nodes')}} ({{tableData.length}} {{lion('total')}})
</h2>
<div class="ctrl-btns">
<div class="refresh" ng-class="{active: autoRefresh}"
@@ -16,12 +16,14 @@
<div class="table-header" onos-sortable-header>
<table>
<tr>
- <td colId="_iconid_state" class="table-icon" col-width="84px" sortable>Active </td>
- <td colId="_iconid_started" class="table-icon" col-width="90px" sortable>Started </td>
- <td colId="id" sortable>ID </td>
- <td colId="ip" sortable>IP Address </td>
- <td colId="tcp" sortable>TCP Port </td>
- <td colId="updated" sortable>Last Updated </td>
+ <td colId="_iconid_state" class="table-icon"
+ col-width="84px" sortable> {{lion('active')}} </td>
+ <td colId="_iconid_started" class="table-icon"
+ col-width="90px" sortable> {{lion('started')}} </td>
+ <td colId="id" sortable> {{lion('node_id')}} </td>
+ <td colId="ip" sortable> {{lion('ip_address')}} </td>
+ <td colId="tcp" sortable> {{lion('tcp_port')}} </td>
+ <td colId="updated" sortable> {{lion('last_updated')}} </td>
</tr>
</table>
</div>
diff --git a/web/gui/src/main/webapp/app/view/cluster/cluster.js b/web/gui/src/main/webapp/app/view/cluster/cluster.js
index 0db243a..b1e6608 100644
--- a/web/gui/src/main/webapp/app/view/cluster/cluster.js
+++ b/web/gui/src/main/webapp/app/view/cluster/cluster.js
@@ -22,7 +22,7 @@
'use strict';
// injected references
- var $log, $scope, fs, ns, mast, ps, is, wss, lion;
+ var $log, $scope, fs, ns, mast, ps, is, wss;
// internal state
var detailsPanel,
@@ -32,7 +32,6 @@
topTable,
bottom,
iconDiv,
- nameDiv,
wSize;
@@ -41,29 +40,40 @@
ctnrPdg = 24,
scrollSize = 17,
portsTblPdg = 50,
- htPdg = 479,
- wtPdg = 532,
-
pName = 'cluster-details-panel',
detailsReq = 'clusterDetailsRequest',
detailsResp = 'clusterDetailsResponse',
-
propOrder = [
'id', 'ip'
],
- friendlyProps = [
- 'Node ID', 'IP Address'
- ],
deviceCols = [
'id', 'type', 'chassisid', 'mfr',
'hw', 'sw', 'protocol', 'serial'
- ],
- friendlyDeviceCols = [
- 'URI', 'Type', 'Chassis ID', 'Vendor',
- 'H/W Version', 'S/W Version', 'Protocol',
- 'Serial #'
];
+ // deferred fetching of user-visible strings, so that lion context is set
+ function getLionProps() {
+ var l = $scope.lion;
+ return [
+ l('node_id'),
+ l('ip_address')
+ ];
+ }
+
+ function getLionDeviceCols() {
+ var l = $scope.lion;
+ return [
+ l('uri'),
+ l('type'),
+ l('chassis_id'),
+ l('vendor'),
+ l('hw_version'),
+ l('sw_version'),
+ l('protocol'),
+ l('serial_number')
+ ];
+ }
+
function closePanel() {
if (detailsPanel.isVisible()) {
$scope.selId = null;
@@ -83,7 +93,7 @@
}
function setUpPanel() {
- var container, closeBtn, tblDiv;
+ var container, closeBtn;
detailsPanel.empty();
container = detailsPanel.append('div').classed('container', true);
@@ -100,27 +110,29 @@
bottom = container.append('div').classed('bottom', true);
bottom.append('h2').classed('devices-title', true).text('Devices');
bottom.append('table');
- //ToDo add more details
+ //TODO: add more details
}
- function addProp(tbody, index, value) {
+ function addProp(tbody, label, value) {
var tr = tbody.append('tr');
function addCell(cls, txt) {
tr.append('td').attr('class', cls).text(txt);
}
- addCell('label', friendlyProps[index] + ' :');
+ addCell('label', label + ' :');
addCell('value', value);
}
function populateTop(details) {
+ var propLabels = getLionProps();
+
is.loadEmbeddedIcon(iconDiv, 'node', 40);
top.select('h2').text(details.id);
var tbody = topTable.append('tbody');
propOrder.forEach(function (prop, i) {
- addProp(tbody, i, details[prop]);
+ addProp(tbody, propLabels[i], details[prop]);
});
}
@@ -138,7 +150,7 @@
tbody = table.append('tbody'),
tbWidth, tbHeight;
- friendlyDeviceCols.forEach(function (col) {
+ getLionDeviceCols().forEach(function (col) {
theader.append('th').text(col);
});
devices.forEach(function (device) {
@@ -182,10 +194,7 @@
populateTop(details);
populateBottom(details.devices);
-
- //ToDo add more details
detailsPanel.height(pHeight);
- //detailsPanel.width(wtPdg); ToDO Use this when needed!
}
function respDetailsCb(data) {
@@ -200,9 +209,7 @@
'PanelService', 'IconService','WebSocketService',
'LionService', 'TableBuilderService',
- // var $log, $scope, fs, ns, mast, ps, is, wss, lion;
-
- function (_$log_, _$scope_, _fs_, _ns_, _mast_, _ps_, _is_, _wss_, _lion_, tbs) {
+ function (_$log_, _$scope_, _fs_, _ns_, _mast_, _ps_, _is_, _wss_, lion, tbs) {
var handlers = {};
$log = _$log_;
@@ -213,8 +220,8 @@
ps = _ps_;
is = _is_;
wss = _wss_;
- lion = _lion_;
+ $scope.lion = lion.bundle('core.view.cluster');
$scope.panelData = {};
tbs.buildTable({
@@ -240,11 +247,6 @@
wss.unbindHandlers(handlers);
});
- // ++++ Temp test code for Localization POC ++++
- var bun = lion.bundle('core.cluster');
- $log.debug('Lion bundle test: computer = ', bun.computer);
- // ++++ Temp test code for Localization POC ++++
-
$log.log('OvClusterCtrl has been created');
}])
@@ -252,7 +254,8 @@
['$rootScope', '$window', '$timeout', 'KeyService',
function ($rootScope, $window, $timeout, ks) {
return function (scope) {
- var unbindWatch;
+ var unbindWatch,
+ lion = scope.lion;
function heightCalc() {
pStartY = fs.noPxStyle(d3.select('.tabular-header'), 'height')
@@ -275,12 +278,12 @@
}
// create key bindings to handle panel
ks.keyBindings({
- esc: [handleEscape, 'Close the details panel'],
+ esc: [handleEscape, lion('k_esc_hint')],
_helpFormat: ['esc']
});
ks.gestureNotes([
- ['click', 'Select a row to show cluster node details'],
- ['scroll down', 'See available cluster nodes']
+ [lion('k_click'), lion('k_click_hint')],
+ [lion('k_scroll_down'), lion('k_scroll_down_hint')]
]);
// if the panelData changes
scope.$watch('panelData', function () {