Preparing for dynamic GUI extensibility.
Change-Id: Ic25143bb9ad8919d7c9e70d932dde528a9227e6a
diff --git a/web/gui/src/main/resources/templates/index-template.html b/web/gui/src/main/resources/templates/index-template.html
new file mode 100644
index 0000000..f54cd21
--- /dev/null
+++ b/web/gui/src/main/resources/templates/index-template.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<!--
+~ Copyright 2014,2015 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.
+-->
+<html>
+<head>
+ <meta charset="utf-8">
+ <link rel="shortcut icon" href="../data/img/onos-logo.png">
+ <title>ONOS Angular</title>
+
+ <!-- Third party library code included here -->
+ <!--TODO: use minified versions, once debugging is complete -->
+ <script src="tp/angular.js"></script>
+ <script src="tp/angular-route.js"></script>
+
+ <script src="tp/d3.js"></script>
+ <script src="tp/topojson.v1.min.js"></script>
+
+ <!-- ONOS UI Framework included here -->
+ <!-- TODO: use a single catenated-minified file here -->
+ <script src="dyn/onos.js"></script>
+ <script src="app/directives.js"></script>
+
+ <script src="app/fw/util/util.js"></script>
+ <script src="app/fw/util/fn.js"></script>
+ <script src="app/fw/util/random.js"></script>
+ <script src="app/fw/util/theme.js"></script>
+ <script src="app/fw/util/keys.js"></script>
+
+ <script src="app/fw/mast/mast.js"></script>
+ <script src="app/fw/nav/nav.js"></script>
+
+ <script src="app/fw/svg/svg.js"></script>
+ <script src="app/fw/svg/glyph.js"></script>
+ <script src="app/fw/svg/icon.js"></script>
+ <script src="app/fw/svg/geodata.js"></script>
+ <script src="app/fw/svg/map.js"></script>
+ <script src="app/fw/svg/zoom.js"></script>
+ <script src="app/fw/svg/svgUtil.js"></script>
+
+ <script src="app/fw/remote/remote.js"></script>
+ <script src="app/fw/remote/urlfn.js"></script>
+ <script src="app/fw/remote/rest.js"></script>
+ <script src="app/fw/remote/websocket.js"></script>
+ <script src="app/fw/remote/wsevent.js"></script>
+
+ <script src="app/fw/widget/widget.js"></script>
+ <script src="app/fw/widget/table.js"></script>
+ <script src="app/fw/widget/toolbar.js"></script>
+ <script src="app/fw/widget/button.js"></script>
+
+ <script src="app/fw/layer/layer.js"></script>
+ <script src="app/fw/layer/panel.js"></script>
+ <script src="app/fw/layer/flash.js"></script>
+ <script src="app/fw/layer/quickhelp.js"></script>
+ <script src="app/fw/layer/veil.js"></script>
+
+ <!-- Framework and library stylesheets included here -->
+ <!-- TODO: use a single catenated-minified file here -->
+ <link rel="stylesheet" href="app/onos.css">
+ <link rel="stylesheet" href="app/common.css">
+ <link rel="stylesheet" href="app/fw/mast/mast.css">
+ <link rel="stylesheet" href="app/fw/svg/glyph.css">
+ <link rel="stylesheet" href="app/fw/svg/icon.css">
+ <link rel="stylesheet" href="app/fw/layer/panel.css">
+ <link rel="stylesheet" href="app/fw/layer/flash.css">
+ <link rel="stylesheet" href="app/fw/layer/quickhelp.css">
+ <link rel="stylesheet" href="app/fw/layer/veil.css">
+ <link rel="stylesheet" href="app/fw/nav/nav.css">
+
+ <!-- This is where contributed javascript will get injected -->
+ <!-- {INJECTED-JAVASCRIPT-START} -->
+ <script src="app/view/sample/sample.js"></script>
+ <script src="app/view/topo/topo.js"></script>
+ <script src="app/view/topo/topoEvent.js"></script>
+ <script src="app/view/topo/topoFilter.js"></script>
+ <script src="app/view/topo/topoForce.js"></script>
+ <script src="app/view/topo/topoInst.js"></script>
+ <script src="app/view/topo/topoModel.js"></script>
+ <script src="app/view/topo/topoOblique.js"></script>
+ <script src="app/view/topo/topoPanel.js"></script>
+ <script src="app/view/topo/topoSelect.js"></script>
+ <script src="app/view/topo/topoTraffic.js"></script>
+ <script src="app/view/device/device.js"></script>
+ <!-- {INJECTED-JAVASCRIPT-END} -->
+
+
+ <!-- This is where contributed stylesheets will get injected -->
+ <!-- {INJECTED-STYLESHEETS-START} -->
+ <link rel="stylesheet" href="app/view/sample/sample.css">
+ <link rel="stylesheet" href="app/view/topo/topo.css">
+ <link rel="stylesheet" href="app/view/device/device.css">
+ <!-- TODO: inject style-sheet refs server-side -->
+ <!-- {INJECTED-STYLESHEETS-END} -->
+
+</head>
+<body class="light" ng-app="onosApp">
+<div id="frame" ng-controller="OnosCtrl as onosCtrl">
+ <div id="mast"
+ ng-controller="MastCtrl as mastCtrl"
+ ng-include="'app/fw/mast/mast.html'"></div>
+
+ <div id="view" ng-view></div>
+
+ <div id="nav"
+ ng-controller="NavCtrl as navCtrl"
+ ng-include="'dyn/nav/nav.html'"></div>
+
+ <div id="floatpanels"></div>
+ <div id="alerts"></div>
+ <div id="flash"></div>
+ <div id="quickhelp"></div>
+ <div id="veil"
+ resize
+ ng-style="resizeWithOffset(0, 0)"></div>
+</div>
+</body>
+</html>
diff --git a/web/gui/src/main/resources/templates/nav-template.html b/web/gui/src/main/resources/templates/nav-template.html
new file mode 100644
index 0000000..76638cf
--- /dev/null
+++ b/web/gui/src/main/resources/templates/nav-template.html
@@ -0,0 +1,8 @@
+<!-- Navigation partial HTML -->
+<h2>Navigation</h2>
+<h3>(Note - this is temporary)</h3>
+
+<ul>
+ <!-- {INJECTED-VIEW-NAV-START} -->
+ <!-- {INJECTED-VIEW-NAV-END} -->
+</ul>
diff --git a/web/gui/src/main/resources/templates/onos-template.js b/web/gui/src/main/resources/templates/onos-template.js
new file mode 100644
index 0000000..c1c19de
--- /dev/null
+++ b/web/gui/src/main/resources/templates/onos-template.js
@@ -0,0 +1,121 @@
+/*
+ * Copyright 2014,2015 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 -- Main Application Module
+ */
+
+(function () {
+ 'use strict';
+
+ // define core module dependencies here...
+ var coreDependencies = [
+ 'ngRoute',
+ 'onosMast',
+ 'onosNav',
+ 'onosUtil',
+ 'onosSvg',
+ 'onosRemote',
+ 'onosLayer',
+ 'onosWidget'
+ ];
+
+ // view IDs.. note the first view listed is loaded at startup
+ var viewIds = [
+ // TODO: inject view IDs server side
+ // {INJECTED-VIEW-IDS-START}
+ 'sample',
+ 'topo',
+ 'device',
+ // {INJECTED-VIEW-IDS-END}
+
+ // dummy entry
+ ''
+ ];
+
+ var viewDependencies = [];
+
+ viewIds.forEach(function (id) {
+ if (id) {
+ viewDependencies.push('ov' + capitalize(id));
+ }
+ });
+
+ var moduleDependencies = coreDependencies.concat(viewDependencies);
+
+ function capitalize(word) {
+ return word ? word[0].toUpperCase() + word.slice(1) : word;
+ }
+
+ angular.module('onosApp', moduleDependencies)
+
+ .controller('OnosCtrl', [
+ '$log', '$route', '$routeParams', '$location',
+ 'KeyService', 'ThemeService', 'GlyphService', 'PanelService',
+ 'FlashService', 'QuickHelpService',
+
+ function ($log, $route, $routeParams, $location,
+ ks, ts, gs, ps, flash, qhs) {
+ var self = this;
+
+ self.$route = $route;
+ self.$routeParams = $routeParams;
+ self.$location = $location;
+ self.version = '1.1.0';
+
+ // initialize services...
+ ts.init();
+ ks.installOn(d3.select('body'));
+ ks.bindQhs(qhs);
+ gs.init();
+ ps.init();
+ flash.initFlash();
+ qhs.initQuickHelp();
+
+ $log.log('OnosCtrl has been created');
+
+ $log.debug('route: ', self.$route);
+ $log.debug('routeParams: ', self.$routeParams);
+ $log.debug('location: ', self.$location);
+ }])
+
+ .config(['$routeProvider', function ($routeProvider) {
+ // If view ID not provided, route to the first view in the list.
+ $routeProvider
+ .otherwise({
+ redirectTo: '/' + viewIds[0]
+ });
+
+ function viewCtrlName(vid) {
+ return 'Ov' + capitalize(vid) + 'Ctrl';
+ }
+
+ function viewTemplateUrl(vid) {
+ return 'app/view/' + vid + '/' + vid + '.html';
+ }
+
+ // Add routes for each defined view.
+ viewIds.forEach(function (vid) {
+ if (vid) {
+ $routeProvider.when('/' + vid, {
+ controller: viewCtrlName(vid),
+ controllerAs: 'ctrl',
+ templateUrl: viewTemplateUrl(vid)
+ });
+ }
+ });
+ }]);
+}());