GUI2 bug fix for Hosts hidden command
Change-Id: Ia1aedb4ab0f9c04bed0bfc324e08815fd8f0a6d1
diff --git a/web/gui2-fw-lib/package.json b/web/gui2-fw-lib/package.json
index 9100367..009242b 100644
--- a/web/gui2-fw-lib/package.json
+++ b/web/gui2-fw-lib/package.json
@@ -22,7 +22,7 @@
"@angular/platform-browser-dynamic": "^7.0.2",
"@angular/router": "^7.0.2",
"core-js": "^2.5.4",
- "d3": "^5.2.0",
+ "d3": "^5.9.2",
"rxjs": "^6.3.3",
"topojson-client": "^3.0.0",
"zone.js": "^0.8.26"
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.css b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.css
index e6ef7b6..fb0995a 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.css
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.css
@@ -25,7 +25,8 @@
#quickhelp {
top: 100px;
z-index: 5000;
- position: relative;
+ position: absolute;
+ width: 100%;
}
#quickhelp div.help {
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.html b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.html
index 5c1476a..7d96ebf 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.html
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.html
@@ -48,26 +48,24 @@
<div class="qhrow">
<table class="qh-r4-c0">
<tr>
- <td class="key">{{lionFn("click")}}</td>
- <td class="desc">Sélectionner l'article et montrer les
- détails
- </td>
+ <td class="key">{{lionFnTopo("click")}}</td>
+ <td class="desc">{{lionFnTopo("qh_gest_click")}}</td>
</tr>
<tr>
- <td class="key">{{lionFn("shift-click")}}</td>
- <td class="desc">{{lionFn("qh_gest_shift_click")}}</td>
+ <td class="key">{{lionFnTopo("shift_click")}}</td>
+ <td class="desc">{{lionFnTopo("qh_gest_shift_click")}}</td>
</tr>
<tr>
- <td class="key">{{lionFn("drag")}}</td>
- <td class="desc">{{lionFn("qh_gest_drag")}}</td>
+ <td class="key">{{lionFnTopo("drag")}}</td>
+ <td class="desc">{{lionFnTopo("qh_gest_drag")}}</td>
</tr>
<tr>
- <td class="key">{{lionFn("drag")}}</td>
- <td class="desc">{{lionFn("qh_gest_cmd_scroll")}}</td>
+ <td class="key">{{lionFnTopo("cmd_scroll")}}</td>
+ <td class="desc">{{lionFnTopo("qh_gest_cmd_scroll")}}</td>
</tr>
<tr>
- <td class="key" y="48">{{lionFn("scroll")}}</td>
- <td class="desc" y="48" x="74.84375">{{lionFn("qh_gest_cmd_drag")}}</tr>
+ <td class="key" y="48">{{lionFnTopo("drag")}}</td>
+ <td class="desc" y="48" x="74.84375">{{lionFnTopo("qh_gest_cmd_drag")}}</tr>
</table>
</div>
</div>
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.ts
index 261f49c..821b799 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.ts
@@ -44,6 +44,7 @@
})
export class QuickhelpComponent implements OnInit {
lionFn; // Function
+ lionFnTopo; // Function
dialogKeys: Object;
globalKeys: Object[];
@@ -67,6 +68,7 @@
) {
if (this.lion.ubercache.length === 0) {
this.lionFn = this.dummyLion;
+ this.lionFnTopo = this.dummyLion;
this.lion.loadCbs.set('quickhelp', () => this.doLion());
} else {
this.doLion();
@@ -79,7 +81,7 @@
ngOnInit(): void {
Object.entries(this.ks.keyHandler.viewKeys)
- .filter((vk) => vk[0] !== '_helpFormat' && vk[0] !== '9')
+ .filter((vk) => vk[0] !== '_helpFormat' && vk[0] !== '9' && vk[0] !== 'esc')
.forEach((vk, idx) => {
const ke = QuickhelpComponent.extractKeyEntry(vk, this.log);
this.viewKeys[Math.floor(idx / 3)][idx % 3] = ke;
@@ -94,6 +96,7 @@
*/
doLion() {
this.lionFn = this.lion.bundle('core.fw.QuickHelp');
+ this.lionFnTopo = this.lion.bundle('core.view.Topo');
}
/**
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/test/uberlion_english_sample.json b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/test/uberlion_english_sample.json
new file mode 100644
index 0000000..7ff843e
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/test/uberlion_english_sample.json
@@ -0,0 +1,288 @@
+{
+ "event": "uberlion",
+ "payload": {
+ "lion": {
+ "core.fw.Mast": {
+ "confirm_refresh_title": "Confirm GUI Refresh",
+ "logout": "Logout",
+ "tt_help": "Show help page for current view",
+ "ui_ok_to_update": "Press OK to update the GUI.",
+ "uicomp_added": "New GUI components were added.",
+ "uicomp_removed": "Some GUI components were removed.",
+ "unknown_user": "(no one)"
+ },
+ "core.fw.Nav": {
+ "cat_network": "Network",
+ "cat_other": "Other",
+ "cat_platform": "Platform",
+ "nav_item_app": "Applications",
+ "nav_item_cluster": "Cluster Nodes",
+ "nav_item_device": "Devices",
+ "nav_item_host": "Hosts",
+ "nav_item_intent": "Intents",
+ "nav_item_link": "Links",
+ "nav_item_partition": "Partitions",
+ "nav_item_processor": "Packet Processors",
+ "nav_item_settings": "Settings",
+ "nav_item_topo": "Topology",
+ "nav_item_topo2": "Topology 2",
+ "nav_item_tunnel": "Tunnels"
+ },
+ "core.fw.QuickHelp": {
+ "qh_hint_close_detail": "Close the details panel",
+ "qh_hint_esc": "Dismiss dialog or cancel selections",
+ "qh_hint_show_hide_qh": "Show / hide Quick Help",
+ "qh_hint_t": "Toggle theme",
+ "qh_title": "Quick Help"
+ },
+ "core.view.App": {
+ "activate": "Activate",
+ "app_id": "App ID",
+ "category": "Category",
+ "click_row": "click row",
+ "deactivate": "Deactivate",
+ "dlg_confirm_action": "Confirm Action",
+ "dlg_warn_deactivate": "Deactivating or uninstalling this component can have serious negative consequences!",
+ "dlg_warn_own_risk": "** DO SO AT YOUR OWN RISK **",
+ "dp_features": "Features",
+ "dp_permissions": "Permissions",
+ "dp_required_apps": "Required Apps",
+ "icon": "Icon",
+ "nav_item_app": "Applications",
+ "origin": "Origin",
+ "qh_hint_click_row": "Select / deselect application",
+ "qh_hint_close_detail": "Close the details panel",
+ "qh_hint_esc": "Deselect application",
+ "qh_hint_scroll_down": "See more applications",
+ "role": "Role",
+ "scroll_down": "scroll down",
+ "state": "State",
+ "title": "Title",
+ "title_apps": "Applications",
+ "total": "Total",
+ "tt_ctl_activate": "Activate selected application",
+ "tt_ctl_auto_refresh": "Toggle auto refresh",
+ "tt_ctl_deactivate": "Deactivate selected application",
+ "tt_ctl_download": "Download selected application (.oar file)",
+ "tt_ctl_uninstall": "Uninstall selected application",
+ "tt_ctl_upload": "Upload an application (.oar file)",
+ "uninstall": "Uninstall",
+ "version": "Version"
+ },
+ "core.view.Cluster": {
+ "active": "Active",
+ "chassis_id": "Chassis ID",
+ "click": "click",
+ "devices": "Devices",
+ "hw_version": "H/W Version",
+ "ip_address": "IP Address",
+ "last_updated": "Last Updated",
+ "nav_item_cluster": "Cluster Nodes",
+ "node_id": "Node ID",
+ "protocol": "Protocol",
+ "qh_hint_click": "Select a row to show cluster node details",
+ "qh_hint_close_detail": "Close the details panel",
+ "qh_hint_scroll_down": "See available cluster nodes",
+ "scroll_down": "scroll down",
+ "serial_number": "Serial #",
+ "started": "Started",
+ "sw_version": "S/W Version",
+ "tcp_port": "TCP Port",
+ "title_cluster_nodes": "Cluster Nodes",
+ "total": "Total",
+ "type": "Type",
+ "uri": "URI",
+ "vendor": "Vendor"
+ },
+ "core.view.Topo": {
+ "active": "active",
+ "added": "added",
+ "btn_show_view_device": "Show Device View",
+ "btn_show_view_flow": "Show Flow View for this Device",
+ "btn_show_view_group": "Show Group View for this Device",
+ "btn_show_view_meter": "Show Meter View for this Device",
+ "btn_show_view_port": "Show Port View for this Device",
+ "click": "click",
+ "close": "Close",
+ "cmd_drag": "cmd-drag",
+ "cmd_scroll": "cmd-scroll",
+ "device": "Device",
+ "devices": "Devices",
+ "direct": "direct",
+ "disable": "Disable",
+ "drag": "drag",
+ "edge": "edge",
+ "enable": "Enable",
+ "expected": "expected",
+ "fl_background_map": "background map",
+ "fl_bad_links": "Bad Links",
+ "fl_device_labels_hide": "Hide device labels",
+ "fl_device_labels_show_friendly": "Show friendly device labels",
+ "fl_device_labels_show_id": "Show device ID labels",
+ "fl_eq_masters": "Equalizing master roles",
+ "fl_grid_display_1000": "Show XY grid",
+ "fl_grid_display_both": "Show both grids",
+ "fl_grid_display_geo": "Show Geo grid",
+ "fl_grid_display_hide": "Hide grid",
+ "fl_host_labels_hide": "Hide host labels",
+ "fl_host_labels_show_friendly": "Show friendly host labels",
+ "fl_host_labels_show_ip": "Show host IP addresses",
+ "fl_host_labels_show_mac": "Show host MAC addresses",
+ "fl_layer_all": "All Layers Shown",
+ "fl_layer_opt": "Optical Layer Shown",
+ "fl_layer_pkt": "Packet Layer Shown",
+ "fl_monitoring_canceled": "Monitoring Canceled",
+ "fl_normal_view": "Normal View",
+ "fl_oblique_view": "Oblique View",
+ "fl_offline_devices": "Offline Devices",
+ "fl_pan_zoom_reset": "Pan and zoom reset",
+ "fl_panel_details": "Details Panel",
+ "fl_panel_instances": "Instances Panel",
+ "fl_panel_summary": "Summary Panel",
+ "fl_pinned_floating_nodes": "Pinned floating nodes",
+ "fl_port_highlighting": "Port Highlighting",
+ "fl_reset_node_locations": "Reset Node Locations",
+ "fl_selecting_intent": "Selecting Intent",
+ "fl_sprite_layer": "sprite layer",
+ "fl_unpinned_floating_nodes": "Unpinned floating nodes",
+ "flows": "Flows",
+ "grid_x": "Grid X",
+ "grid_y": "Grid Y",
+ "hidden": "Hidden",
+ "hide": "Hide",
+ "host": "Host",
+ "hosts": "Hosts",
+ "hw_version": "H/W Version",
+ "inactive": "inactive",
+ "indirect": "indirect",
+ "intent": "Intent",
+ "intents": "Intents",
+ "ip": "IP",
+ "latitude": "Latitude",
+ "links": "Links",
+ "longitude": "Longitude",
+ "lp_label_a2b": "A to B",
+ "lp_label_a_friendly": "A name",
+ "lp_label_a_id": "A id",
+ "lp_label_a_port": "A port",
+ "lp_label_a_type": "A type",
+ "lp_label_b2a": "B to A",
+ "lp_label_b_friendly": "B name",
+ "lp_label_b_id": "B id",
+ "lp_label_b_port": "B port",
+ "lp_label_b_type": "B type",
+ "lp_label_friendly": "Friendly",
+ "lp_value_no_link": "[no link]",
+ "mac": "MAC",
+ "nav_item_topo": "Topology",
+ "no_devices_are_connected": "No Devices Are Connected",
+ "not_expected": "not expected",
+ "ok": "OK",
+ "optical": "optical",
+ "ov_tt_none": "No Overlay",
+ "ov_tt_protected_intents": "Protected Intents Overlay",
+ "ov_tt_traffic": "Traffic Overlay",
+ "ports": "Ports",
+ "protocol": "Protocol",
+ "purged": "purged",
+ "qh_gest_click": "Select the item and show details",
+ "qh_gest_cmd_drag": "Pan",
+ "qh_gest_cmd_scroll": "Zoom in / out",
+ "qh_gest_drag": "Reposition (and pin) device / host",
+ "qh_gest_shift_click": "Toggle selection state",
+ "qh_hint_close_detail": "Close the details panel",
+ "resubmitted": "resubmitted",
+ "select": "Select",
+ "serial_number": "Serial #",
+ "shift_click": "shift-click",
+ "show": "Show",
+ "sw_version": "S/W Version",
+ "tbtt_bad_links": "Show bad links",
+ "tbtt_cyc_dev_labs": "Cycle device labels",
+ "tbtt_cyc_grid_display": "Cycle grid display",
+ "tbtt_cyc_host_labs": "Cycle host labels",
+ "tbtt_cyc_layers": "Cycle node layers",
+ "tbtt_eq_master": "Equalize mastership roles",
+ "tbtt_reset_loc": "Reset node locations",
+ "tbtt_reset_zoom": "Reset pan / zoom",
+ "tbtt_sel_map": "Select background geo map",
+ "tbtt_tog_host": "Toggle host visibility",
+ "tbtt_tog_instances": "Toggle ONOS instances panel",
+ "tbtt_tog_map": "Toggle background geo map",
+ "tbtt_tog_oblique": "Toggle oblique view (experimental)",
+ "tbtt_tog_offline": "Toggle offline visibility",
+ "tbtt_tog_porthi": "Toggle port highlighting",
+ "tbtt_tog_sprite": "Toggle sprite layer",
+ "tbtt_tog_summary": "Toggle ONOS summary panel",
+ "tbtt_tog_toolbar": "Toggle Toolbar",
+ "tbtt_tog_use_detail": "Disable / enable details panel",
+ "tbtt_unpin_node": "Unpin node (hover mouse over)",
+ "title_edge_link": "Edge Link",
+ "title_infra_link": "Infrastructure Link",
+ "title_panel_summary": "ONOS Summary",
+ "title_select_map": "Select Map",
+ "title_selected_items": "Selected Items",
+ "topology_sccs": "Topology SCCs",
+ "tr_btn_cancel_monitoring": "Cancel traffic monitoring",
+ "tr_btn_create_h2h_flow": "Create Host-to-Host Flow",
+ "tr_btn_create_msrc_flow": "Create Multi-Source Flow",
+ "tr_btn_monitor_all": "Monitor all traffic",
+ "tr_btn_monitor_sel_intent": "Monitor traffic of selected intent",
+ "tr_btn_show_all_rel_intents": "Show all related intents",
+ "tr_btn_show_dev_link_flows": "Show device link flows",
+ "tr_btn_show_device_flows": "Show Device Flows",
+ "tr_btn_show_next_rel_intent": "Show next related intent",
+ "tr_btn_show_prev_rel_intent": "Show previous related intent",
+ "tr_btn_show_related_traffic": "Show Related Traffic",
+ "tr_fl_dev_flows": "Device Flows",
+ "tr_fl_fstats_bytes": "Flow Stats (bytes)",
+ "tr_fl_h2h_flow_added": "Host-to-Host flow added",
+ "tr_fl_multisrc_flow": "Multi-Source Flow",
+ "tr_fl_next_rel_int": "Next related intent",
+ "tr_fl_prev_rel_int": "Previous related intent",
+ "tr_fl_pstats_bits": "Port Stats (bits / second)",
+ "tr_fl_pstats_pkts": "Port Stats (packets / second)",
+ "tr_fl_rel_paths": "Related Paths",
+ "tr_fl_traf_on_path": "Traffic on Selected Path",
+ "tunnel": "tunnel",
+ "tunnels": "Tunnels",
+ "uri": "URI",
+ "vendor": "Vendor",
+ "version": "Version",
+ "virtual": "virtual",
+ "visible": "Visible",
+ "vlan": "VLAN",
+ "vlan_none": "None",
+ "withdrawn": "withdrawn"
+ },
+ "core.view.Flow": {
+ "appId": "App ID",
+ "appName": "App Name",
+ "bytes": "Bytes",
+ "duration": "Duration ",
+ "flowId": "Flow ID",
+ "groupId": "Group ID",
+ "hardTimeout": "Hard Timeout",
+ "idleTimeout": "Idle Timeout",
+ "nav_item_flow": "Flows",
+ "packets": "Packets",
+ "permanent": "Permanent",
+ "priority": "Flow Priority ",
+ "selector": "Selector",
+ "state": "State",
+ "tableName": "Table Name ",
+ "title_flows": "Flows for Device ",
+ "total": "Total",
+ "treatment": "Treatment",
+ "tt_ctl_show_device": "Show device table",
+ "tt_ctl_show_group": "Show group view for this device",
+ "tt_ctl_show_meter": "Show meter view for selected device",
+ "tt_ctl_show_pipeconf": "Show pipeconf view for selected device",
+ "tt_ctl_show_port": "Show port view for this device",
+ "tt_ctl_switcth_brief": "Switch to brief view",
+ "tt_ctl_switcth_detailed": "Switch to detailed view"
+ }
+ },
+ "locale": "en_IE"
+ }
+}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/lion.service.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/lion.service.ts
index b8cde73..288d54d 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/lion.service.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/lion.service.ts
@@ -84,7 +84,7 @@
}
return (key) => {
- return bundleObj[key] || '%' + key + '%';
+ return bundleObj[key] || '?' + key + '?';
};
}
}
diff --git a/web/gui2-fw-lib/src/app/app.component.ts b/web/gui2-fw-lib/src/app/app.component.ts
index 5e934d4..34d2728 100644
--- a/web/gui2-fw-lib/src/app/app.component.ts
+++ b/web/gui2-fw-lib/src/app/app.component.ts
@@ -15,7 +15,7 @@
*/
import {Component} from '@angular/core';
-import {FnService, KeysService, LogService} from 'gui2-fw-lib';
+import {FnService, KeysService, LogService, LionService, WebSocketService, WsOptions} from 'gui2-fw-lib';
@Component({
selector: 'app-root',
@@ -25,14 +25,27 @@
export class AppComponent {
title = 'Test app for GUI Framework Library';
loadingRunning: boolean = false;
+ lionFn; // Function
constructor(
protected fs: FnService,
protected ks: KeysService,
- protected log: LogService
+ protected log: LogService,
+ protected wss: WebSocketService,
+ protected lion: LionService
) {
+ this.wss.createWebSocket(<WsOptions>{ wsport: 8181});
this.title = this.fs.cap(this.title);
+
+ if (this.lion.ubercache.length === 0) {
+ this.lionFn = this.dummyLion;
+ this.lion.loadCbs.set('topo-toolbar', () => this.doLion());
+ } else {
+ this.doLion();
+ }
+
this.bindCommands();
+
this.log.debug('AppComponent constructed');
}
@@ -59,26 +72,29 @@
actionMap() {
return {
- A: [() => {this.showKeyStroke('A'); }, 'Monitor all traffic'],
- B: [(token) => {this.showKeyStroke('B', token); }, 'Toggle background'],
- D: [(token) => {this.showKeyStroke('D', token); }, 'Toggle details panel'],
- E: [() => {this.showKeyStroke('E'); }, 'Equalize mastership roles'],
- H: [() => {this.showKeyStroke('H'); }, 'Toggle host visibility'],
- I: [(token) => {this.showKeyStroke('I', token); }, 'Toggle ONOS Instance Panel'],
- G: [() => {this.showKeyStroke('G'); }, 'Show map selection dialog'],
- L: [() => {this.showKeyStroke('L'); }, 'Cycle device labels'],
- M: [() => {this.showKeyStroke('M'); }, 'Toggle offline visibility'],
- O: [() => {this.showKeyStroke('O'); }, 'Toggle the Summary Panel'],
- P: [(token) => {this.showKeyStroke('P', token); }, 'Toggle Port Highlighting'],
- Q: [() => {this.showKeyStroke('Q'); }, 'Cycle grid display'],
- R: [() => {this.showKeyStroke('R'); }, 'Reset pan / zoom'],
- U: [() => {this.showKeyStroke('U'); }, 'Unpin or freeze nodes'],
- X: [() => {this.showKeyStroke('X'); }, 'Reset Node Location'],
- dot: [() => {this.showKeyStroke('.'); }, 'Toggle Toolbar'],
- 0: [() => {this.showKeyStroke('0'); }, 'Cancel traffic monitoring'],
- 'shift-L': [() => {this.showKeyStroke('shift-L'); }, 'Cycle host labels'],
+ A: [() => {this.showKeyStroke('A'); }, this.lionFn('tr_btn_monitor_all')],
+ B: [(token) => {this.showKeyStroke('B'); }, this.lionFn('tbtt_tog_map')],
+ D: [(token) => {this.showKeyStroke('D'); }, this.lionFn('tbtt_tog_use_detail')],
+ E: [() => {this.showKeyStroke('E'); }, this.lionFn('tbtt_eq_master')],
+ H: [() => {this.showKeyStroke('H'); }, this.lionFn('tbtt_tog_host')],
+ I: [(token) => {this.showKeyStroke('I'); }, this.lionFn('tbtt_tog_instances')],
+ G: [() => {this.showKeyStroke('G'); }, this.lionFn('tbtt_sel_map')],
+ L: [() => {this.showKeyStroke('L'); }, this.lionFn('tbtt_cyc_dev_labs')],
+ M: [() => {this.showKeyStroke('M'); }, this.lionFn('tbtt_tog_offline')],
+ O: [() => {this.showKeyStroke('O'); }, this.lionFn('tbtt_tog_summary')],
+ P: [(token) => {this.showKeyStroke('P'); }, this.lionFn('tbtt_tog_porthi')],
+ Q: [() => {this.showKeyStroke('Q'); }, this.lionFn('tbtt_cyc_grid_display')],
+ R: [() => {this.showKeyStroke('R'); }, this.lionFn('tbtt_reset_zoom')],
+ U: [() => {this.showKeyStroke('U'); }, this.lionFn('tbtt_unpin_node')],
+ X: [() => {this.showKeyStroke('X'); }, this.lionFn('tbtt_reset_loc')],
+ dot: [() => {this.showKeyStroke('.'); }, this.lionFn('tbtt_tog_toolbar')],
+ 0: [() => {this.showKeyStroke('0'); }, this.lionFn('tr_btn_cancel_monitoring')],
+ 'shift-L': [() => {this.showKeyStroke('shift-L'); }, this.lionFn('tbtt_cyc_host_labs')],
- esc: [() => {this.showKeyStroke('Esc'); }, 'Cancel commands'],
+ // -- instance color palette debug
+ 9: () => {
+ this.showKeyStroke('9');
+ },
// TODO update after adding in Background Service
// topology overlay selections
@@ -97,4 +113,19 @@
],
};
}
+
+ /**
+ * Read the LION bundle for Toolbar and set up the lionFn
+ */
+ doLion() {
+ this.lionFn = this.lion.bundle('core.view.Topo');
+ }
+
+ /**
+ * A dummy implementation of the lionFn until the response is received and the LION
+ * bundle is received from the WebSocket
+ */
+ dummyLion(key: string): string {
+ return '%' + key + '%';
+ }
}
diff --git a/web/gui2-topo-lib/package.json b/web/gui2-topo-lib/package.json
index f2886e4..253d02e 100644
--- a/web/gui2-topo-lib/package.json
+++ b/web/gui2-topo-lib/package.json
@@ -21,7 +21,7 @@
"@angular/platform-browser-dynamic": "~7.0.0",
"@angular/router": "~7.0.0",
"core-js": "^2.5.4",
- "d3": "^5.2.0",
+ "d3": "^5.9.2",
"gui2-fw-lib": "file:../gui2-fw-lib/dist/gui2-fw-lib/gui2-fw-lib-2.1.0.tgz",
"rxjs": "~6.3.3",
"topojson-client": "^3.0.0",
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
index fb0569b..49f9416 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
@@ -70,9 +70,9 @@
<svg:rect x="-16" y="-16" width="32" height="32" [ngStyle]="{'fill': panelColor}">
</svg:rect>
<svg:path *ngIf="device.location && device.location.locType != 'none'"
- d="M-15 12 v3 h5" style="stroke: white; stroke-width: 1; fill: none"></svg:path>
+ d="M-15 12 v3 h3" style="stroke: white; stroke-width: 1; fill: none"></svg:path>
<svg:path *ngIf="device.fx != null"
- d="M15 -12 v-3 h-5" style="stroke: white; stroke-width: 1; fill: none"></svg:path>
+ d="M15 -12 v-3 h-3" style="stroke: white; stroke-width: 1; fill: none"></svg:path>
<!-- Template explanation: Creates an SVG Text element and in
line 1) make it left aligned and slightly down and to the right of the last rect
line 2) set its text length to be the calculated value - see that function
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/zoomable.directive.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/zoomable.directive.ts
index 8c3707b..9564444 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/zoomable.directive.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/zoomable.directive.ts
@@ -54,10 +54,8 @@
const zoomed = () => {
const transform = d3.event.transform;
- if (transform) {
- container.attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')');
- this.updateZoomState(<TopoZoomPrefs>{tx: transform.x, ty: transform.y, sc: transform.k});
- }
+ container.attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')');
+ this.updateZoomState(<TopoZoomPrefs>{tx: transform.x, ty: transform.y, sc: transform.k});
};
this.zoom = d3.zoom().on('zoom', zoomed);
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/mapselector/mapselector.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/mapselector/mapselector.component.ts
index 881e742..b638dfb 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/mapselector/mapselector.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/panel/mapselector/mapselector.component.ts
@@ -81,6 +81,10 @@
}
choice(mapid: Object): void {
- this.chosenMap.emit(<MapObject>this.mapSelectorResponse.maps[mapid['mapid']]);
+ if (mapid) {
+ this.chosenMap.emit(<MapObject>this.mapSelectorResponse.maps[mapid['mapid']]);
+ } else {
+ this.chosenMap.emit(<MapObject>{});
+ }
}
}
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.html b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.html
index e49ae9e..22ab277 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.html
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.html
@@ -44,38 +44,73 @@
<!-- Template explanation -
Line 0) This is the root of the whole SVG canvas of the Topology View - all
components beneath it are SVG components only (no HTML)
- line 1) the No Devices Connected banner is shown if the force component
- (from line 4) does not contain any devices
- line 2) Create an SVG Grouping and apply the onosZoomableOf directive to it,
- passing in the whole SVG canvas (#svgZoom)
- line 3) Add in the Background Svg Component (if showBackground is true - toggled
- by toolbar and by keyboard shortcut 'B'
- line 4) Add in the layer of the Force Svg Component. If any item is selected on it, pass
- to the details view and deselect all others. This is node and line graph
- whose contents are supplied through the Topology Service, and whose positions
- are driven by the d3.force engine
+ Line 1) if the background is clicked then send the event to the function
+ where it is filtered to make sure it really applied to the background
+ or the map and then used to clear any selections made
-->
<svg:svg #svgZoom xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" id="topo2"
- preserveAspectRatio="xMaxYMax meet" (click)="backgroundClicked($event)">
+ preserveAspectRatio="xMaxYMax meet" (click)="backgroundClicked($event)"
+ transform="'translate(0,0), scale(1.0)'">
<svg:desc>The main SVG canvas of the Topology View</svg:desc>
+ <!-- Template explanation -
+ line 0) the No Devices Connected banner is shown if the force component
+ (from later) does not contain any devices
+ -->
<svg:g *ngIf="force.regionData?.devices[0].length +
force.regionData?.devices[1].length +
force.regionData?.devices[2].length=== 0"
onos-nodeviceconnected />
+ <!-- Template explanation -
+ line 0) Create an SVG Grouping and apply the onosZoomableOf directive to it,
+ passing in the whole SVG canvas (#svgZoom)
+ -->
<svg:g id="topo-zoomlayer" onosZoomableOf [zoomableOf]="svgZoom">
<svg:desc>A logical layer that allows the main SVG canvas to be zoomed and panned</svg:desc>
+ <!-- Template explanation
+ Line 0) Create an instance of the onos-gridsvg component with the name gridFull
+ All Inputs to that component will use default values
+ This is the grey grid of 1000x1000 with origin at top left
+ Only show it if the grid prefs value is 1 or 3
+ -->
<svg:g #gridFull *ngIf="prefsState.grid == 1 || prefsState.grid == 3" onos-gridsvg>
</svg:g>
+ <!-- Template explanation
+ Line 0) Create another instance of the onos-gridsvg component with the name geoGrid
+ This is the blue geo grid of -180 to +180 longitude and -75
+ to +75 latitude with with origin in the centre
+ Only show it if the grid prefs value is 2 or 3
+ Line 1) Set the Inputs for the longitude extents
+ Line 2) Set the Inputs for the latitude extents and set the minor line
+ spacing at 15 degrees long and lat
+ Line 3) Invert the vertical axis - positive in the y direction is up
+ Set the vertical extents of this grid to 1000 units high in SVG terms
+ Set the aspect ratio to 5/6 - this is because it is an eqi-
+ rectangular projection and looks stretched out horizontally
+ otherwise. This balances the distortion of equi-rect between
+ equator and the poles
+ Line 4) Set the color of the grid to light blue
+ -->
<svg:g #geoGrid *ngIf="prefsState.grid == 2 || prefsState.grid == 3"
onos-gridsvg [horizLowerLimit]="-180" [horizUpperLimit]="180"
[vertLowerLimit]="-75" [vertUpperLimit]="75" [spacing]="15"
[invertVertical]="true" [fit]="'fit1000high'" [aspectRatio]="0.83333"
[gridcolor]="'#bfe7fb'">
</svg:g>
+ <!-- Template explanation -
+ line 0) Add in the Background Svg Component (if showBackground is true - toggled
+ by toolbar and by keyboard shortcut 'B'
+ -->
<svg:g *ngIf="prefsState.bg"
onos-backgroundsvg [map]="mapIdState" (zoomlevel)="mapExtentsZoom($event)">
<svg:desc>The Background SVG component - contains maps</svg:desc>
</svg:g>
+ <!-- Template explanation -
+ line 0) Add in the layer of the Force Svg Component.
+ This is node and line graph
+ whose contents are supplied through the Topology Service, and whose positions
+ are driven by the d3.force engine
+ line 6) If any item is selected on it, pass to the details view and deselect all others.
+ -->
<svg:g #force onos-forcesvg
[deviceLabelToggle]="prefsState.dlbls"
[hostLabelToggle]="prefsState.hlbls"
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts
index 8c6b953..7a59801 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts
@@ -144,7 +144,7 @@
templateUrl: './topology.component.html',
styleUrls: ['./topology.component.css']
})
-export class TopologyComponent implements AfterContentInit, OnInit, OnDestroy {
+export class TopologyComponent implements OnInit, OnDestroy {
@Input() bannerHeight: number = 48;
// These are references to the components inserted in the template
@ViewChild(InstanceComponent) instance: InstanceComponent;
@@ -285,20 +285,20 @@
// Service just to compartmentalize things a bit
this.ts.init(this.instance, this.background, this.force);
- this.ps.addListener((data) => this.prefsUpdateHandler(data));
+ // For the 2.1 release to not listen to updates of prefs as they are
+ // only the echo of what we have sent down and the event mechanism
+ // does not discern between users. Can get confused if multiple windows open
+ // this.ps.addListener((data) => this.prefsUpdateHandler(data));
+
this.prefsState = this.ps.getPrefs(TOPO2_PREFS, this.prefsState);
this.mapIdState = this.ps.getPrefs(TOPO_MAPID_PREFS, this.mapIdState);
this.trs.init(this.force);
- this.log.debug('Topology component initialized');
- }
-
- ngAfterContentInit(): void {
// Scale the window initially - then after resize
const zoomMapExtents = ZoomUtils.zoomToWindowSize(
this.bannerHeight, this.window.innerWidth, this.window.innerHeight);
this.zoomDirective.changeZoomLevel(zoomMapExtents, true);
- this.log.debug('Topology zoom initialized',
+ this.log.debug('TopologyComponent initialized',
this.bannerHeight, this.window.innerWidth, this.window.innerHeight,
zoomMapExtents);
}
@@ -462,8 +462,6 @@
bindCommands(additional?: any) {
const am = this.actionMap();
- const add = this.fs.isO(additional);
-
this.ks.keyBindings(am);
this.ks.gestureNotes([
@@ -610,7 +608,7 @@
protected toggleHosts() {
const current: boolean = !Boolean(this.prefsState.hosts);
this.flashMsg = this.lionFn('hosts') + ' ' +
- this.lionFn(this.force.showHosts ? 'visible' : 'hidden');
+ this.lionFn(current ? 'visible' : 'hidden');
this.updatePrefsState(PREF_HOSTS, current ? 1 : 0);
this.log.debug('toggling hosts: ', this.prefsState.hosts ? 'Show' : 'Hide');
}
diff --git a/web/gui2/README.md b/web/gui2/README.md
index 512f1f0..a1b1410 100644
--- a/web/gui2/README.md
+++ b/web/gui2/README.md
@@ -1,4 +1,4 @@
-# ONOS GUI 2.0.0
+# ONOS GUI 2.1.0
This project is based on __[Angular 7](https://angular.io/docs)__
and __[ES6](http://www.ecma-international.org/ecma-262/6.0/index.html)__ (aka __ES2015__),
@@ -30,31 +30,72 @@
ONOS_LOCALE=fr_FR SHLVL=1 bazel run onos-local -- clean debug
```
+# Architecture
+The whole application comprises of a number of modules on the client side
+* __gui2-fw-lib__ This is a collection of client side component, services and base
+classes that are reused among all modules [more details..](../gui2-fw-lib/README.md)
+* __gui2-topo-lib__ This is the Topology view only [more details..](../gui2-topo-lib/README.md)
+* __fm_gui_lib__ This is the Fault Management table [more details..](../../apps/faultmanagement/fm-gui2-lib/README.md)
+* __gui2__ This is the front end entry point application and brings together all
+other libraries. It also holds all of the tabular applications such as Applications
+view and Devices view, and manages the routing between the different views.
+
+All of these modules talk to the backend server mainly through a WebSocket connection
+passing JSON snippets asynchronously in both directions.
+In some places the client side code loads data through a plain HTTP GET call, and
+these are served by servlets on the backend. Similarly raster graphics are loaded
+through a servlet.
+
+Much of the graphics in the application are made from SVG paths and primitive objects,
+and are displayed smoothly by HTML5 compatible browsers. Occasionally the d3
+libraries (such as d3-force) are used to help position graphics, but an over
+dependence on d3 is mainly avoided.
+
+The main framework used is Angular 7, with a strong emphasis on making resuable
+components, directives, services and classes. Angular Routing and animation are
+also used.
+
+# Issues
+Issues found on the GUI2 should be added to the existing list on the
+[ONOS GUI Jira Kanban board](https://jira.onosproject.org/secure/RapidBoard.jspa?rapidView=31)
+(requires Jira login)
+
# Development
There are 2 ways to go about development -
-1. rebuild the code and rerun through Bazel (much like can be done with any ordinary ONOS app)
- (this is not optimal though since in this mode the browser side code is built in '--prod' mode
- and all debug symbols are stripped and debug statements are not logged and the code is uglified and minimized.
- It is useful for testing "prod" mode works though and saves having to set up direct development) OR
-2. use Angular 7 CLI (__ng__ command) to rebuild on the fly (must faster for development)
+1. rebuild the code and rerun through Bazel (much like can be done with any ordinary ONOS app)
+(recommended for most people)
+ OR
+2. use Angular 7 CLI (__ng__ command) to rebuild on the fly (faster for
+development). Be aware that if you are just changing the topology view it does not
+require all of the steps that __gui2__ does - see its own [README](../gui2-topo-lib/README.md)
+for more details
-For 1) (this needs to be updated for Bazel commands) if you change the code you can redeploy the application without restarting ONOS with (requires you to be in ~/onos directory):
+For 1) if you change the code you can redeploy the application without restarting
+ONOS with (requires you to be in ~/onos directory):
```
bazel build //web/gui2:onos-web-gui2-oar && onos-app localhost reinstall! bazel-bin/web/gui2/onos-web-gui2-oar.oar
```
For 2) it's well worth becoming familiar with Angular CLI.
-The project is created with [Angular CLI](https://github.com/angular/angular-cli) v7 to simplify development of the browser side code.
-It is complicated to set up, but is worth the effort if you have more than a day's worth of development to do.
-This allows you to develop the Angular 7 TypeScript code independent of ONOS in a separate container.
-Since WebSockets have been implemented - there is a requirement to run ONOS in the background.
+> (this has the advantage of debug symbols and the code not is uglified and minimized)
-There is no need to install node, npm or ng again on your system, and indeed if they are already installed, it's best
-to use the versions of these that's used by Bazel. To do this add the following 2 entries to the __start__ of your PATH environment variable.
+The project is created with [Angular CLI](https://github.com/angular/angular-cli) v7
+to simplify development of the browser side code. It is complicated to set up,
+but is worth the effort if you have more than a few days worth of development to do.
+Since data is retrieved through WebSockets there is a requirement to run ONOS
+in the background.
+
+>There is no need to install node, npm or ng again on your system, and indeed if
+>they are already installed, it's best to use the versions of these that's used
+>by Bazel in ONOS.
+
+Add the following 2 entries to the __start__ of
+your PATH environment variable.
```
~/.cache/bazel/_bazel_scondon/8beba376f58d295cf3282443fe02c21a/external/nodejs/bin/nodejs/bin
```
-(where ~/.cache/bazel/_bazel_scondon/8beba376f58d295cf3282443fe02c21a should be replaced by an equivalent folder on your system)
+> (where ~/.cache/bazel/_bazel_scondon/8beba376f58d295cf3282443fe02c21a should be
+> replaced by an equivalent folder on your system)
```text
~/onos/web/gui2-fw-lib/node_modules/@angular/cli/bin/
```
@@ -66,7 +107,7 @@
```
This will install all the vendor Javascript implementations that are listed in package.json
- (including 'ng' - the Angular CLI command) in to ~/onos/web/gui2-fw-lib/node_modules
+(including 'ng' - the Angular CLI command) in to ~/onos/web/gui2-fw-lib/node_modules
After this you should be able to cd in to ~/onos/web/gui2-fw-lib and run 'ng version' and see:
```
@@ -79,12 +120,15 @@
## GUI FW Lib
The GUI2 __framework__ is in __~/onos/web/gui2-fw-lib__ and the GUI __application__ is in __~/onos/web/gui2__ (and depends on the framework).
-The GUI2 framework is a library inside its own mini application (unrelated to the main GUI application) - every thing of importance
-is in projects/gui2-fw-lib. The own application is just a wrapper around the framework
-library - it has to be there for Angular CLI to work.
+The GUI2 framework is a library inside its own mini application (unrelated to the
+main GUI application) - every thing of importance is in projects/gui2-fw-lib. The
+own application is just a wrapper around the framework library - it has to be
+there for Angular CLI to work and can be useful for testing parts of the framework
+in isolation.
-If you make any changes here or are using it for the first time it will need to be built
-```text
+For build method 2) above if you make any changes here or are using it for the
+first time it will need to be built. From ~/onos/web/gui2 run:
+```bash
pushd ~/onos/web/gui2-fw-lib && \
ng build gui2-fw-lib && \
cd dist/gui2-fw-lib && \
@@ -93,20 +137,15 @@
npm install gui2-fw-lib
```
-To test and lint it use
-```text
-ng lint gui2-fw-lib && \
-ng test gui2-fw-lib
-```
-
-This packages the Framework up in to __onos/web/gui2-fw-lib/dist/gui2-fw-lib/gui2-fw-lib-2.0.0.tgz__
+This packages the Framework up in to __~/onos/web/gui2-fw-lib/dist/gui2-fw-lib/gui2-fw-lib-2.1.0.tgz__
## GUI2 Topo library
The GUI2 __Topology__ is in __~/onos/web/gui2-topo-lib__ and the GUI __application__
includes this Topology application through the __onos-routing-module__. The
Topology app has its own README file.
-If you make any changes here or are using it for the first time it will need to be built
+For build method 2) above if you make any changes here or are using it for the
+first time it will need to be built. From ~/onos/web/gui2 run:
```text
pushd ~/onos/web/gui2-topo-lib && \
ng build gui2-topo-lib && \
@@ -115,29 +154,35 @@
popd && \
npm install gui2-topo-lib
```
-This packages the Framework up in to __onos/web/gui2-topo-lib/dist/gui2-topo-lib/gui2-topo-lib-2.0.0.tgz__
+This packages the Topo View up in to __onos/web/gui2-topo-lib/dist/gui2-topo-lib/gui2-topo-lib-2.1.0.tgz__
## GUI2 Application
-The application contains the ONOS index.html and all of the tabular views and the topology view.
-It references the gui2-fw-lib, as just another dependency.
+The application contains the ONOS index.html and all of the tabular views and the
+topology view. It references the gui2-fw-lib and gui2-topo-lib as just other
+dependencies.
-To use this application in Angular CLI for development on your system, you need to:
+For build method 2) above to use this application in Angular CLI for development
+on your system, you need to:
1. Change directory in to onos/web/gui2 - this is where you will run the `ng` command from.
2. Run `npm install` once from this folder to add dependencies
-3. Then run 'ng -v' from onos/web/gui2 and an additional version should be shown __Angular: 6.0.0__
+3. Then run 'ng version' from onos/web/gui2 and an additional version should be
+shown __Angular: 7.0.2__
4. Temporarily make a change to disable authentication in UIWebSocket.java
5. Temporarily make a change to disable external routes in onos-routing.module.ts
6. Create symbolic links for some CSS files
### Disable authentication and external routes
+> Remember this is only for build method 2) above
+
Before the server can be run a couple of small adjustments need to be temporarily made
1. The file __~/onos/web/gui/src/main/java/org/onosproject/ui/impl/UiWebSocket.java__
needs to be adjusted to remove authentication
2. The file __~/onos/web/gui2/src/main/webapp/app/onos-routing.module.ts__ needs
to be adjusted to remove references to routes in external applications
-These changes are given in Appendix A at the end of this document - these changes should not be
-checked in though - as they are not required (and will break) the GUI2 embedded in ONOS.
+These changes are given in Appendix A at the end of this document - these changes
+should not be checked in though - as they are not required (and will break) the
+GUI2 embedded in ONOS.
### Create symbolic links for CSS files
Also some files need to be symbolically linked - these should no be checked in
@@ -195,30 +240,31 @@
## Running unit tests
This is automatically done when using "bazel test " - see the web/gui2/BUILD file for more details.
-To run it manually in Angular CLI run `ng test --watch` to execute the unit tests via [Karma](https://karma-runner.github.io).
-Running it directly like this will test with both Firefox and Chrome. To use only one use the __--browsers__ argument
+To run it manually in Angular CLI run `ng test --watch` to execute the unit tests
+via [Karma](https://karma-runner.github.io). Running it directly like this will
+test with both Firefox and Chrome. To use only one use the __--browsers__ argument
## Running checkstyle (lint)
-This is automatically done when using "bazel test" - see the web/gui2/BUILD file for more details.
+This is automatically done when using "bazel test" - see the web/gui2/BUILD file
+for more details.
-To run it manually in Angular CLI run `ng lint` to run codelyzer on your code, according to the rules in __tslint.json__
+To run it manually in Angular CLI run `ng lint` to run codelyzer on your code,
+according to the rules in __tslint.json__
## Running end-to-end tests
-
-To run it manually in Angular CLI run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+To run it manually in Angular CLI run `ng e2e` to execute the end-to-end tests
+via [Protractor](http://www.protractortest.org/).
## Generating documentation
-This is automatically done when using "ob" - see the web/gui2/BUILD file for more details.
-
-To run it manually in Angular CLI run `npm run compodoc` to generate documentation via [Compodoc](https://github.com/compodoc/compodoc)
+To run it manually in Angular CLI run `npm run compodoc` to generate documentation
+via [Compodoc](https://github.com/compodoc/compodoc)
## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+To get more help on the Angular CLI use `ng help` or go check out the
+[Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
# Appendix A - changes needed to run GUI2 application locally
-
```text
diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/UiWebSocket.java b/web/gui/src/main/java/org/onosproject/ui/impl/UiWebSocket.java
index e53a00756b..63e538a4db 100644