GUI initial commit

- open ui on http://controllerIp:8181/index.html
- added interfaces to vpp topo.
- fixed VPP mounting
- fixed VPP Editing and deleting

Change-Id: I6ae2c6e5781d3e0cdb78b112d706b9f5076301d5
Signed-off-by: Daniel Malachovsky <daniel.malachovsky@pantheon.sk>
Signed-off-by: Varun Seereeram <vseereer@cisco.com>
Signed-off-by: Robert Varga <nite@hq.sk>

10 files changed, 323 insertions, 0 deletions

diff --git a/vbd/gui/module/src/main/resources/vpp/views/bridge-domains.tpl.html b/vbd/gui/module/src/main/resources/vpp/views/bridge-domains.tpl.html
new file mode 100644
index 000000000..a8b4689d1
--- /dev/null
+++ b/vbd/gui/module/src/main/resources/vpp/views/bridge-domains.tpl.html
@@ -0,0 +1,43 @@
+<div ng-controller="BridgeDomainsController">
+    <md-progress-linear md-mode="indeterminate" ng-if="BridgeDomainsController.dataService.loading"></md-progress-linear>
+
+    <div layout="row" layout-xs="column" style="height:100%">
+        <div id="bridge-domains-next-app" style="height: 100%; width: 50%" flex></div>
+        <div class="md-sidenav-left md-whiteframe-z2" style="background-color: white" flex>
+            <md-content layout-padding ng-controller="TableController as TableCtrl">
+                <md-input-container style="margin-right: 5px;" layout="row">
+                <md-select ng-model='BridgeDomainsController.selectedBd.name' placeholder="Select BD" ng-change="BridgeDomainsController.bdChanged()" style="width: 100%;">
+                    <md-option ng-repeat="bd in BridgeDomainsController.bridgedomains" value="{{bd.name}}">{{bd.name}}</md-option>
+                </md-select>
+                <md-button class="md-raised" md-no-ink ng-click="BridgeDomainsController.addBd()" style="width: 25%;">Add BD</md-button>
+                <md-button class="md-raised" md-no-ink ng-click="BridgeDomainsController.removeBd()" style="width: 35%;" ng-if="BridgeDomainsController.dataService.injectedInterfaces.length===0 && BridgeDomainsController.dataService.selectedBd.name">Remove BD</md-button>
+
+                </md-input-container>
+                <table st-table="TableCtrl.displayedCollection" class="table table-striped" st-safe-src="TableCtrl.rowCollection">
+                    <thead>
+                    <tr>
+                        <th>Assigned</th>
+                        <th st-sort="name" st-sort-default="true">Interface Name</th>
+                        <th st-sort="description">Description</th>
+                        <th st-sort="bridge-domain">Bridge Domain</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr ng-repeat="row in TableCtrl.displayedCollection">
+                        <td>
+                            <md-switch ng-model="row.assigned" aria-label="Assign Switch" ng-change="TableCtrl.updateAssignment(row);">
+                            </md-switch>
+                        </td>
+                        <td>{{row.label}}</td>
+                        <td>{{row.description}}</td>
+                        <td>{{row['v3po:l2']['bridge-domain']}}</td>
+                    </tr>
+                    </tbody>
+                </table>
+                <!--<md-input-container style="bottom: 10px">-->
+                    <md-button class="md-raised" md-no-ink ng-click="BridgeDomainsController.deploy()" style="width: 94%;position: fixed;" ng-if="BridgeDomainsController.dataService.changedInterfaces.length">Deploy</md-button>
+                <!--</md-input-container>-->
+            </md-content>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/vbd/gui/module/src/main/resources/vpp/views/config-interface-dialog.html b/vbd/gui/module/src/main/resources/vpp/views/config-interface-dialog.html
new file mode 100644
index 000000000..2d7084b7c
--- /dev/null
+++ b/vbd/gui/module/src/main/resources/vpp/views/config-interface-dialog.html
@@ -0,0 +1,38 @@
+<md-dialog ng-cloak aria-label="config interface dialog">
+    <form>
+        <md-toolbar>
+            <div class="md-toolbar-tools">
+                <h2 style="color: white">
+                    {{ConfigInterfaceDialogCtrl.interf.label}}
+                </h2>
+                <span flex></span>
+                <md-button class="md-icon-button" ng-click="ConfigInterfaceDialogCtrl.cancel()" aria-label="close button">
+                    <div class="glyphicon glyphicon-remove"></div>
+                </md-button>
+            </div>
+        </md-toolbar>
+        <md-dialog-content style="max-width:800px;max-height:810px; ">
+            <div class="md-dialog-content">
+                <!--<md-content layout-padding>-->
+                    <form name="bDConfigForm">
+                            <md-input-container flex ng-if="ConfigInterfaceDialogCtrl.interf.type==='iana-if-type:ethernetCsmacd'">
+                                <label>
+                                    Description
+                                </label>
+                                <input ng-model="ConfigInterfaceDialogCtrl.interf.description" flex>
+                                <md-switch ng-model="ConfigInterfaceDialogCtrl.interf['admin-status']" ng-true-value="'up'" ng-false-value="'down'">Admin Status</md-switch>
+                            </md-input-container>
+                    </form>
+                <!--</md-content>-->
+            </div>
+        </md-dialog-content>
+        <md-progress-linear md-mode="indeterminate" ng-show="ConfigInterfaceDialogCtrl.waiting"></md-progress-linear>
+        <md-dialog-actions layout="row">
+            <span flex></span>
+            <label ng-hide="ConfigInterfaceDialogCtrl.interf['v3po:l2']['bridge-domain']">Assign to BD first.</label>
+            <md-button ng-click="ConfigInterfaceDialogCtrl.updateConfig();" style="margin-right:20px;" class="md-accent" ng-if="(ConfigInterfaceDialogCtrl.interf.type==='iana-if-type:ethernetCsmacd')" ng-disabled="!ConfigInterfaceDialogCtrl.interf['v3po:l2']['bridge-domain']">
+                Update
+            </md-button>
+        </md-dialog-actions>
+    </form>
+</md-dialog>
\ No newline at end of file
diff --git a/vbd/gui/module/src/main/resources/vpp/views/config-vpp-dialog.html b/vbd/gui/module/src/main/resources/vpp/views/config-vpp-dialog.html
new file mode 100644
index 000000000..3fcd4a68b
--- /dev/null
+++ b/vbd/gui/module/src/main/resources/vpp/views/config-vpp-dialog.html
@@ -0,0 +1,67 @@
+<md-dialog ng-cloak aria-label="new vpp dialog">
+    <form>
+        <md-toolbar>
+            <div class="md-toolbar-tools">
+                <h2 style="color: white">
+                    Configuring {{ConfigVppDialogCtrl.vpp.name}}
+                </h2>
+                <span flex></span>
+                <md-button class="md-icon-button" ng-click="ConfigVppDialogCtrl.close()" aria-label="close button">
+                    <div>X</div>
+                </md-button>
+            </div>
+        </md-toolbar>
+        <md-dialog-content style="max-width:800px;max-height:810px; ">
+            <div class="md-dialog-content">
+                <md-content layout-padding>
+                    <form name="vppConfigForm">
+                        <div layout="row">
+                            <md-input-container flex>
+                                <label>
+                                    Name
+                                </label>
+                                <input ng-model="ConfigVppDialogCtrl.vpp.name" disabled>
+                            </md-input-container>
+                            <md-input-container flex>
+                                <label>
+                                    IP Address
+                                </label>
+                                <input ng-model="ConfigVppDialogCtrl.vpp.ip" ng-disabled="ConfigVppDialogCtrl.vpp.status === 'connected'">
+                            </md-input-container>
+                            <md-input-container flex>
+                                <label>
+                                    Port
+                                </label>
+                                <input ng-model="ConfigVppDialogCtrl.vpp.port" ng-disabled="ConfigVppDialogCtrl.vpp.status === 'connected'">
+                            </md-input-container>
+                        </div>
+                        <div layout="row">
+                            <md-input-container flex ng-if="ConfigVppDialogCtrl.vpp.status != 'connected'">
+                                <label>
+                                    Username
+                                </label>
+                                <input ng-model="ConfigVppDialogCtrl.vpp.un">
+                            </md-input-container>
+                            <md-input-container flex ng-if="ConfigVppDialogCtrl.vpp.status != 'connected'">
+                                <label>
+                                    Password
+                                </label>
+                                <input ng-model="ConfigVppDialogCtrl.vpp.pw" type="password">
+                            </md-input-container>
+                        </div>
+
+                    </form>
+                </md-content>
+
+            </div>
+        </md-dialog-content>
+        <md-progress-linear md-mode="indeterminate" ng-show="ConfigVppDialogCtrl.waiting"></md-progress-linear>
+        <md-dialog-actions layout="row">
+            <span flex></span>
+            <md-button ng-click="ConfigVppDialogCtrl.updateConfig();" style="margin-right:20px;" class="md-accent" ng-if="ConfigVppDialogCtrl.vpp.status != 'connected'">
+                Update
+            </md-button>
+
+        </md-dialog-actions>
+    </form>
+</md-dialog>
\ No newline at end of file
diff --git a/vbd/gui/module/src/main/resources/vpp/views/index.tpl.html b/vbd/gui/module/src/main/resources/vpp/views/index.tpl.html
new file mode 100644
index 000000000..add7f7854
--- /dev/null
+++ b/vbd/gui/module/src/main/resources/vpp/views/index.tpl.html
@@ -0,0 +1,16 @@
+<div ng-controller="vppCtrl">
+    <md-toolbar>
+        <div class="md-toolbar-tools float-left">
+            <span flex></span>
+            <md-button ng-click="setMainView('inventory')">Inventory</md-button>
+            <span flex></span>
+            <md-button ng-click="setMainView('bridgeDomains')">Bridge Domains</md-button>
+            <span flex></span>
+        </div>
+    </md-toolbar>
+
+    <div ng-view style="height: 100%">
+        <section ng-if="mainView === 'inventory'" ng-include src="view_path+'inventory-table.tpl.html'"></section>
+        <section ng-if="mainView === 'bridgeDomains'" ng-include src="view_path+'bridge-domains.tpl.html'"></section>
+    </div>
+</div>
\ No newline at end of file
diff --git a/vbd/gui/module/src/main/resources/vpp/views/inventory-table.tpl.html b/vbd/gui/module/src/main/resources/vpp/views/inventory-table.tpl.html
new file mode 100644
index 000000000..ad24bce14
--- /dev/null
+++ b/vbd/gui/module/src/main/resources/vpp/views/inventory-table.tpl.html
@@ -0,0 +1,28 @@
+<div ng-controller="InventoryTableController">
+	<md-button ng-click="addVppShowForm()">Mount VPP</md-button>
+	<md-button ng-click="getVppList()">Reload VPPs</md-button>
+	<table class="footable">
+	 	<thead>
+	 		<tr>
+	 			<th>VPP Name</th>
+	 			<th>IP Address</th>
+	 			<th>Port</th>
+	 			<th>Connection Status</th>
+	 			<th>Actions</th>
+	 		</tr>
+	 	</thead>
+	 	<tbody>
+	 		<tr ng-repeat="vpp in vppList">
+	 			<td>{{vpp.name}}</td>
+	 			<td>{{vpp.ipAddress}}</td>
+	 			<td>{{vpp.port}}</td>
+	 			<td>{{vpp.status}}</td>
+	 			<td>
+	 				<md-button ng-click="viewTopology(vpp)">View Topology</md-button>
+	 				<md-button ng-click="editVppShowForm(vpp)" ng-hide="vpp.status === 'connected'">Edit</md-button>
+	 				<md-button ng-click="deleteVpp(vpp)" >Delete</md-button>
+	 			</td>
+	 		</tr>
+	 	</tbody>
+	</table>
+</div>
\ No newline at end of file
diff --git a/vbd/gui/module/src/main/resources/vpp/views/inventory.tpl.html b/vbd/gui/module/src/main/resources/vpp/views/inventory.tpl.html
new file mode 100644
index 000000000..9d5e19d5e
--- /dev/null
+++ b/vbd/gui/module/src/main/resources/vpp/views/inventory.tpl.html
@@ -0,0 +1,7 @@
+<div ng-controller="InventoryController">
+	<md-progress-linear md-mode="indeterminate" ng-if="InventoryController.dataService.loading"></md-progress-linear>
+	<div id="inventory-next-app" style="height: 100%"></div>
+	<md-button class="md-fab md-primary md-fab-bottom-right" md-no-ink aria-label="Add VPP" ng-click="InventoryController.addVpp()">
+	    <div class="glyphicon glyphicon-plus"></div>
+	</md-button>
+</div>
\ No newline at end of file
diff --git a/vbd/gui/module/src/main/resources/vpp/views/new-bd-dialog.html b/vbd/gui/module/src/main/resources/vpp/views/new-bd-dialog.html
new file mode 100644
index 000000000..fd04f8e84
--- /dev/null
+++ b/vbd/gui/module/src/main/resources/vpp/views/new-bd-dialog.html
@@ -0,0 +1,39 @@
+<md-dialog ng-cloak aria-label="new bd dialog">
+    <form>
+        <md-toolbar>
+            <div class="md-toolbar-tools">
+                <h2 style="color: white">
+                    New BD
+                </h2>
+                <span flex></span>
+                <md-button class="md-icon-button" ng-click="NewBdDialogCtrl.close()" aria-label="close button">
+                    <div class="glyphicon glyphicon-remove"></div>
+                </md-button>
+            </div>
+        </md-toolbar>
+        <md-dialog-content style="max-width:800px;max-height:810px; ">
+            <div class="md-dialog-content">
+                <md-content layout-padding>
+                    <form name="bDConfigForm">
+                        <div layout layout-sm="column">
+                            <md-input-container flex>
+                                <label>
+                                    Name
+                                </label>
+                                <input ng-model="NewBdDialogCtrl.bd.name">
+                            </md-input-container>
+                        </div>
+                    </form>
+                </md-content>
+
+            </div>
+        </md-dialog-content>
+        <md-progress-linear md-mode="indeterminate" ng-show="NewBdDialogCtrl.waiting"></md-progress-linear>
+        <md-dialog-actions layout="row">
+            <span flex></span>
+            <md-button ng-click="NewBdDialogCtrl.updateConfig();" style="margin-right:20px;" class="md-accent">
+                Add
+            </md-button>
+        </md-dialog-actions>
+    </form>
+</md-dialog>
\ No newline at end of file
diff --git a/vbd/gui/module/src/main/resources/vpp/views/new-vpp-dialog.html b/vbd/gui/module/src/main/resources/vpp/views/new-vpp-dialog.html
new file mode 100644
index 000000000..d0ce47604
--- /dev/null
+++ b/vbd/gui/module/src/main/resources/vpp/views/new-vpp-dialog.html
@@ -0,0 +1,66 @@
+<md-dialog ng-cloak aria-label="new vpp dialog">
+    <form>
+        <md-toolbar>
+            <div class="md-toolbar-tools">
+                <h2 style="color: white">
+                    Mount new VPP
+                </h2>
+                <span flex></span>
+                <md-button class="md-icon-button" ng-click="NewVppDialogCtrl.close()" aria-label="close button">
+                    <div>X</div>
+                </md-button>
+            </div>
+        </md-toolbar>
+        <md-dialog-content style="max-width:800px;max-height:810px; ">
+            <div class="md-dialog-content">
+                <md-content layout-padding>
+                    <form name="vppConfigForm">
+                        <div layout="row">
+                            <md-input-container flex>
+                                <label>
+                                    Name
+                                </label>
+                                <input ng-model="NewVppDialogCtrl.vpp.name">
+                            </md-input-container>
+                            <md-input-container flex>
+                                <label>
+                                    IP Address
+                                </label>
+                                <input ng-model="NewVppDialogCtrl.vpp.ip">
+                            </md-input-container>
+                            <md-input-container flex>
+                                <label>
+                                    Port
+                                </label>
+                                <input ng-model="NewVppDialogCtrl.vpp.port">
+                            </md-input-container>
+                        </div>
+                        <div layout="row">
+                            <md-input-container flex>
+                                <label>
+                                    Username
+                                </label>
+                                <input ng-model="NewVppDialogCtrl.vpp.un">
+                            </md-input-container>
+                            <md-input-container flex>
+                                <label>
+                                    Password
+                                </label>
+                                <input ng-model="NewVppDialogCtrl.vpp.pw" type="password">
+                            </md-input-container>
+                        </div>
+
+                    </form>
+                </md-content>
+
+            </div>
+        </md-dialog-content>
+        <md-progress-linear md-mode="indeterminate" ng-show="NewVppDialogCtrl.waiting"></md-progress-linear>
+        <md-dialog-actions layout="row">
+            <span flex></span>
+            <md-button ng-click="NewVppDialogCtrl.updateConfig();" style="margin-right:20px;" class="md-accent">
+                Mount
+            </md-button>
+        </md-dialog-actions>
+    </form>
+</md-dialog>
\ No newline at end of file
diff --git a/vbd/gui/module/src/main/resources/vpp/views/root.tpl.html b/vbd/gui/module/src/main/resources/vpp/views/root.tpl.html
new file mode 100644
index 000000000..b07c00c51
--- /dev/null
+++ b/vbd/gui/module/src/main/resources/vpp/views/root.tpl.html
@@ -0,0 +1 @@
+<div class="main" ui-view></div>
\ No newline at end of file
diff --git a/vbd/gui/module/src/main/resources/vpp/views/vpp-topo.html b/vbd/gui/module/src/main/resources/vpp/views/vpp-topo.html
new file mode 100644
index 000000000..8b3c9fd8a
--- /dev/null
+++ b/vbd/gui/module/src/main/resources/vpp/views/vpp-topo.html
@@ -0,0 +1,18 @@
+<md-dialog ng-cloak aria-label="vpp topo">
+    <form>
+        <md-toolbar>
+            <div class="md-toolbar-tools">
+                <h2 style="color: white">
+                    Topology for {{VppTopoCtrl.vpp.name}}
+                </h2>
+                <span flex></span>
+                <md-button class="md-icon-button" ng-click="VppTopoCtrl.close()" aria-label="close button">
+                    <div>X</div>
+                </md-button>
+            </div>
+        </md-toolbar>
+        <md-dialog-content style="max-width:500px;max-height:500px;overflow:hidden">
+            <div id="next-vpp-topo"></div>
+        </md-dialog-content>
+    </form>
+</md-dialog>
\ No newline at end of file