aboutsummaryrefslogtreecommitdiffstats
path: root/demo-ui/app
diff options
context:
space:
mode:
Diffstat (limited to 'demo-ui/app')
-rw-r--r--demo-ui/app/config.json32
-rw-r--r--demo-ui/app/controllers/CosController.js381
-rw-r--r--demo-ui/app/controllers/EplController.js528
-rw-r--r--demo-ui/app/controllers/MainController.js31
-rw-r--r--demo-ui/app/controllers/MefController.js117
-rw-r--r--demo-ui/app/services/cosServices.js64
-rw-r--r--demo-ui/app/services/dbg.js54
-rw-r--r--demo-ui/app/services/eplServices.js64
-rw-r--r--demo-ui/app/services/mefServices.js71
-rw-r--r--demo-ui/app/services/model.js61
-rw-r--r--demo-ui/app/views/cos-panel.html171
-rw-r--r--demo-ui/app/views/css/vcpe.css340
-rw-r--r--demo-ui/app/views/epl-panel.html187
-rw-r--r--demo-ui/app/views/less/vcpe.less365
-rw-r--r--demo-ui/app/views/mef-panel.html370
-rw-r--r--demo-ui/app/views/vcpe-portal.html71
16 files changed, 2907 insertions, 0 deletions
diff --git a/demo-ui/app/config.json b/demo-ui/app/config.json
new file mode 100644
index 0000000..56c74c6
--- /dev/null
+++ b/demo-ui/app/config.json
@@ -0,0 +1,32 @@
+{
+ "cosMgr" : { "ip": "localhost", "port": "9090" },
+ "evcMgr" : { "ip": "localhost", "port": "9090" },
+ "eplMgr" : { "ip": "localhost", "port": "9090" },
+ "evcMgr" : { "ip": "localhost", "port": "9090" },
+ "uniMgr" : { "ip": "localhost", "port": "8181" },
+ "evcPathMgr": { "ip": "localhost", "port": "8181" },
+
+
+ "uniList" : [
+ {
+ "ip" : "10.1.1.11",
+ "mac" : "00:11:11:11:11:11",
+ "address" : "Denver"
+ },
+ {
+ "ip" : "10.1.1.12",
+ "mac" : "00:22:22:22:22:22",
+ "address" : "Paris"
+ },
+ {
+ "ip" : "10.1.1.13",
+ "mac" : "00:33:33:33:33:33",
+ "address" : "Tokyo"
+ },
+ {
+ "ip" : "10.1.1.14",
+ "mac" : "00:44:44:44:44:44",
+ "address" : "Quebec"
+ }
+ ]
+} \ No newline at end of file
diff --git a/demo-ui/app/controllers/CosController.js b/demo-ui/app/controllers/CosController.js
new file mode 100644
index 0000000..523f3c1
--- /dev/null
+++ b/demo-ui/app/controllers/CosController.js
@@ -0,0 +1,381 @@
+(function() {
+
+var CosController = function($scope, $http, $interval, $log, cosServices, model, dbg ) {
+
+ //
+ // Controller Set Up
+ //
+
+ dbg.p("---> in CosController()");
+
+ actionState = {
+ IDLE : 1, ADD : 2, UPDATE : 3, DEL : 4
+ }
+
+ // $scope variables
+ $scope.cosList = null;
+ $scope.selectedCosIdx = -1;
+ $scope.cosToEdit = null;
+ $scope.cosActionButtonText = "unset";
+
+ $scope.availableBWs = [
+ {
+ name : "10M",
+ cir : 10000
+ },
+ {
+ name : "100M",
+ cir : 100000
+ },
+ {
+ name : "1G",
+ cir : 1000000
+ },
+ {
+ name : "10G",
+ cir : 10000000
+ },
+ ];
+
+ dbg.p("bandwidths avaialble:")
+ dbg.pj($scope.availableBWs);
+
+ // congroller variables
+ var cosActionState = actionState.IDLE;
+ var newCos = null;
+ var uniqueId = true;
+ var nameNum = 1;
+
+
+ // cos constructor
+ var Cos = function(){
+ if ( uniqueId )
+ this.id = "new"+ nameNum;
+ else
+ this.id = "new";
+ this.commitedInfoRate = 50;
+ this.availbility = 95.5;
+ this.frameDelay = 2.2;
+ this.jitter = 3.3;
+ this.frameLoss = 4.4 ;
+ }
+
+ //
+ // utility fxns
+ //
+
+ var validCosIdx = function(idx) {
+ return ( idx >= 0 && idx < $scope.cosList.length )
+ }
+
+ var cosIdxReset = function() {
+ return ( $scope.cosList.length > 0 ? 0 : -1);
+ }
+
+ var cosIdxAfter = function( action ) {
+ switch ( action ) {
+ case actionState.DEL:
+ if ( validCosIdx($scope.selectedCosIdx) )
+ return $scope.selectedCosIdx;
+ else if ( validCosIdx($scope.selectedCosIdx-1) )
+ return $scope.selectedCosIdx-1;
+ else
+ return cosIdxReset();
+ break;
+ case actionState.ADD:
+ return ( $scope.cosList.length >= 0 ?
+ $scope.cosList.length-1 : cosIdxReset() );
+ break;
+ case actionState.UPDATE:
+ return ( validCosIdx($scope.selectedCosIdx) ?
+ $scope.selectedCosIdx : cosIdxReset() );
+ break;
+ default:
+ dbg.e("invalid action state");
+ break;
+ }
+ }
+
+ $scope.cosExists = function(cosId) {
+ var nameCheck = function (cosElm) { return cosElm.id == cosId; }
+ return ( $scope.cosList &&
+ $scope.cosList.filter(nameCheck).length > 0 );
+ }
+
+ $scope.bwText = function(cos) {
+ if (cos) {
+ switch ( cos.commitedInfoRate ) {
+ case 10000 : return "10M";
+ case 100000 : return "100M";
+ case 1000000 : return "1G";
+ case 10000000 : return "10G";
+ }
+ return "invalid BW";
+ }
+ else {
+ return "null cos";
+ }
+ }
+
+ // return index of avilable BW based cir (-1 if not found)
+ var availableBwIdx = function (cir) {
+ for ( var i = 0; i < $scope.availableBWs.length; i++ ) {
+ if ($scope.availableBWs[i].cir == cir) {
+ return i;
+ }
+ }
+ return -1;
+ }
+
+ // return index of cos in current list (-1 if not found)
+ var cosNameToIdx = function ( cosName ) {
+ if ( !cosName || !$scope.cosList )
+ return -1;
+
+ for ( var i = 0; i < $scope.cosList.length; i++ ) {
+ if ($scope.cosList[i].id == cosName ) {
+ return i;
+ }
+ }
+ return -1;
+ }
+
+ //
+ // HTTP Repsponse Handlers
+ //
+
+ var onRequestError = function(reason){
+ dbg.e("HTTP Request Problem\n" + JSON.stringify(reason));
+ };
+ var onCosListResp = function(data) {
+ dbg.p("in onCosListResp()");
+ $scope.cosList = data;
+
+ if ( $scope.cosList && $scope.cosList.length > 0 )
+ $scope.selectedCosIdx = 0;
+ else
+ $scope.selectedCosIdx = -1;
+
+ dbg.p("selectedCosIdx = " + $scope.selectedCosIdx,1);
+ };
+ var onCosCreateResp = function(data) {
+ dbg.p("in onCosCreateResp()");
+ dbg.p("following cos returned from create cmd", 1);
+ dbg.pj(data);
+ $scope.cosList.push(newCos);
+ $scope.selectedCosIdx = cosIdxAfter(actionState.ADD);
+ nameNum++;
+ newCos = null;
+ $scope.cosToEdit = null;
+ dbg.p("selectedCosIdx = " + $scope.selectedCosIdx,1);
+ };
+ var onCosUpdateResp = function(data) {
+ dbg.p("in onCosUpdateResp()");
+ dbg.p("following cos returned after update", 1);
+ dbg.pj(data);
+ $scope.selectedCosIdx = cosIdxAfter(actionState.UPDATE);
+ $scope.cosToEdit = null;
+ dbg.p("selectedCosIdx = " + $scope.selectedCosIdx,1);
+ };
+ var onCosDeleteResp = function(data) {
+ dbg.p("in onCosDeleteResp()");
+ dbg.p("following returned after delete", 1);
+ dbg.pj(data);
+ if ( validCosIdx($scope.selectedCosIdx) )
+ $scope.cosList.splice($scope.selectedCosIdx,1);
+ $scope.selectedCosIdx = cosIdxAfter(actionState.DEL);
+ dbg.p("selectedCosIdx = " + $scope.selectedCosIdx,1);
+ };
+
+ //
+ // CoS Event Handlers & Utils
+ //
+
+ $scope.onCosClick = function (i) {
+ dbg.p("in onCosClick(): clicked ("+i+")");
+ $scope.selectedCosIdx = i;
+ cosActionState = actionState.IDLE;
+ dbg.p("selectedCosIdx = "+ $scope.selectedCosIdx,1);
+ }
+ $scope.onAddCos = function () {
+ dbg.p("in onAddCos()");
+ cosActionState = actionState.ADD;
+ $scope.cosActionButtonText = "Create";
+ newCos = new Cos();
+ $scope.cosToEdit = newCos;
+
+ if ($scope.availableBWs.length >=3 )
+ $scope.cosToEdit.bwSelected = $scope.availableBWs[2];
+ else
+ $scope.cosToEdit.bwSelected = $scope.availableBWs[0];
+
+ dbg.pj(newCos);
+ }
+ $scope.onUpdateCos = function () {
+ dbg.p("in onUpdateCos()");
+ if ( $scope.cosList.length <= 0 )
+ {
+ dbg.p("nos CoS's exist, no action being taken");
+ return;
+ }
+ cosActionState = actionState.UPDATE;
+ $scope.cosActionButtonText = "Update";
+ $scope.cosToEdit = $scope.cosList[$scope.selectedCosIdx];
+
+ dbg.p("looking for dd list bw: " + $scope.cosToEdit.commitedInfoRate);
+ var availBwIdx = availableBwIdx($scope.cosToEdit.commitedInfoRate);
+ if ( availBwIdx < 0 || availBwIdx > $scope.availableBWs.length-1 ) {
+ dbg.e("invalid selected BW idx: "+availBwIdx+"(setting to 0)");
+ $scope.cosToEdit.bwSelected = $scope.availableBWs[0];
+ }
+ else {
+ $scope.cosToEdit.bwSelected = $scope.availableBWs[availBwIdx];
+ }
+
+ dbg.p("about to edit cos:");
+ dbg.pj($scope.cosToEdit);
+
+
+ }
+ $scope.onDelCos = function () {
+ dbg.p("in onDelCos()");
+ if ( $scope.cosList.length <= 0 )
+ {
+ dbg.p("nos CoS's exist, no action being taken");
+ return;
+ }
+ cosActionState = actionState.DEL;
+ $scope.cosActionButtonText = "Delete";
+ }
+
+ $scope.onCosInputSubmit = function () {
+ dbg.p("in onCosInputSubmit()");
+
+ var cosToOperateOn = null;
+ if ( cosActionState === actionState.ADD)
+ cosToOperateOn = newCos;
+ else
+ cosToOperateOn = $scope.cosList[$scope.selectedCosIdx];
+
+ switch(cosActionState) {
+
+ case actionState.DEL:
+ dbg.p("about to delete " + cosToOperateOn.id,1);
+ cosServices.deleteCos(cosToOperateOn)
+ .then(onCosDeleteResp, onRequestError);
+ break;
+
+ case actionState.ADD:
+ cosToOperateOn.commitedInfoRate = cosToOperateOn.bwSelected.cir;
+ delete cosToOperateOn.bwSelected;
+ dbg.p("about to add " + cosToOperateOn.id, 1);
+ cosServices.createCos(cosToOperateOn)
+ .then(onCosCreateResp, onRequestError);
+ break;
+
+ case actionState.UPDATE:
+ cosToOperateOn.commitedInfoRate = cosToOperateOn.bwSelected.cir;
+ delete cosToOperateOn.bwSelected;
+ dbg.p("about to update " + cosToOperateOn.id, 1);
+ cosServices.updateCos(cosToOperateOn)
+ .then(onCosUpdateResp, onRequestError);
+ break;
+
+ default:
+ dbg.e("invalid action state");
+ break;
+ }
+
+ cosActionState = actionState.IDLE;
+ }
+
+ //
+ // State query fxns
+ //
+
+ $scope.cosActionInProgress = function () {
+ return ( cosActionState != actionState.IDLE )
+ }
+ $scope.cosEditInProgress = function () {
+ return ( cosActionState === actionState.ADD ||
+ cosActionState === actionState.UPDATE );
+ }
+ $scope.cosUpdateInProgress = function () {
+ return ( cosActionState === actionState.UPDATE );
+ }
+ $scope.cosAddInProgress = function () {
+ return ( cosActionState === actionState.ADD );
+ }
+ $scope.cosDelInProgress = function () {
+ return ( cosActionState === actionState.DEL );
+ }
+ $scope.cosNameConflict = function () {
+ return ( $scope.cosAddInProgress() &&
+ $scope.cosExists($scope.cosToEdit.id));
+ }
+ $scope.showCosInputs = function () {
+ return $scope.cosEditInProgress();
+ }
+ $scope.showCosValues = function () {
+ return (!$scope.showCosInputs() &&
+ validCosIdx($scope.selectedCosIdx));
+ }
+ $scope.showCosNameInput = function () {
+ return $scope.cosAddInProgress();
+ }
+ $scope.showCosName = function () {
+ return (! $scope.showCosNameInput());
+ }
+ $scope.showCosActionButton = function () {
+ return ( $scope.cosAddInProgress() ||
+ ($scope.cosActionInProgress() &&
+ $scope.cosList.length > 0 ));
+ }
+ $scope.activateCosActionButton = function () {
+ return ( $scope.cosActionInProgress() &&
+ !$scope.cosNameConflict() )
+ }
+
+ //
+ // Watchers
+ //
+
+ // we can't get our initial CoS list until
+ // the URL has been set by config file read in
+ cosUrlWatcher = function () { return cosServices.getCosUrl(); }
+ onCosUrlChange = function (newCosUrl, oldCosUrl) {
+ if (newCosUrl !== oldCosUrl) {
+ dbg.p("detected cos url change, getting cos list");
+ cosServices.getCosList()
+ .then(onCosListResp, onRequestError);
+ }
+ }
+ $scope.$watch( cosUrlWatcher, onCosUrlChange );
+
+ // Watch for change in selected EPL so tht
+ // we can set the appropraite CoS as selected
+ eplWatcher = function () { return model.getCurrentEpl(); }
+ onEplChange = function (newEpl, oldEpl) {
+ dbg.p("in CosController:onEplChange");
+ //dbg.p("oldEpl:"); dbg.pj(oldEpl);
+ //dbg.p("newEpl:"); dbg.pj(newEpl);
+
+ // only make a chance if we have an
+ if ( newEpl ) {
+ var cosIdx = cosNameToIdx(newEpl.cos);
+ dbg.p("changing selected CoS to: " + newEpl.cos +
+ " [idx="+cosIdx+"]", 1);
+ if ( validCosIdx(cosIdx) ) {
+ cosActionState = actionState.IDLE
+ $scope.selectedCosIdx = cosIdx;
+ }
+ }
+ }
+ $scope.$watch( eplWatcher, onEplChange );
+
+};
+
+// register controller in the module
+app.controller("CosController", CosController);
+
+}()); \ No newline at end of file
diff --git a/demo-ui/app/controllers/EplController.js b/demo-ui/app/controllers/EplController.js
new file mode 100644
index 0000000..8dbdc90
--- /dev/null
+++ b/demo-ui/app/controllers/EplController.js
@@ -0,0 +1,528 @@
+(function() {
+
+var EplController = function($scope, $http, $interval, $log,
+ eplServices, cosServices, model, dbg ) {
+
+ //
+ // Controller Set Up
+ //
+ //
+
+ dbg.p("---> in EplController()");
+
+ actionState = {
+ IDLE : 1, ADD : 2, UPDATE : 3, DEL : 4
+ };
+
+ // $scope variables
+ $scope.eplList = [];
+ $scope.selectedEplIdx = -1;
+ $scope.eplToEdit = null;
+ $scope.eplActionButtonText = "unset";
+ $scope.availableUnis = [];
+ $scope.availableCosIds = [];
+
+ // for trouble shooting
+ $scope.availableCosIds.push("unset cos 0");
+ $scope.availableCosIds.push("unset cos 1");
+ $scope.availableCosIds.push("unset cos 2");
+
+ // controller variables
+ var _uniqueId = true;
+ var _nameNum = 1;
+ var _eplActionState = actionState.IDLE;
+ var _newEpl = null;
+
+ // start out with null until we do list query)
+ model.setCurrentEpl(null);
+
+ //
+ // utility fxns
+ //
+
+ var validEplIdx = function(idx) {
+ return ( idx >= 0 && idx < $scope.eplList.length )
+ }
+ var eplIdxReset = function() {
+ return ( $scope.eplList.length > 0 ? 0 : -1);
+ }
+ var cosIdxReset = function() {
+ return ( $scope.eplList.length > 0 ? 0 : -1);
+ }
+ var eplIdxAfter = function( action ) {
+ switch ( action ) {
+ case actionState.DEL:
+ if ( validEplIdx($scope.selectedEplIdx) )
+ return $scope.selectedEplIdx;
+ else if ( validEplIdx($scope.selectedEplIdx-1) )
+ return $scope.selectedEplIdx-1;
+ else
+ return eplIdxReset();
+ break;
+ case actionState.ADD:
+ return ( $scope.eplList.length >= 0 ?
+ $scope.eplList.length-1 : eplIdxReset() );
+ break;
+ case actionState.UPDATE:
+ return ( validEplIdx($scope.selectedEplIdx) ?
+ $scope.selectedEplIdx : eplIdxReset() );
+ break;
+ default:
+ dbg.e("invalid action state");
+ return -1;
+ break;
+ }
+ }
+ $scope.eplExists = function(eplId) {
+ var nameCheck = function (eplElm) { return eplElm.id == eplId; }
+ return ( $scope.eplList &&
+ $scope.eplList.filter(nameCheck).length > 0 );
+ }
+ var setEplUniInfo = function(epl, uniIdx1, uniIdx2) {
+
+ if ( $scope.availableUnis.length < 2 ) {
+ dbg.e("Can't set unis in constructor, avaulable uni list too short")
+ return;
+ }
+
+ epl.numCustLocations = 2;
+
+ if ( uniIdx1 < 0 || uniIdx1 > 1) {
+ epl.uniHostIpList.push($scope.availableUnis[0].ip);
+ epl.uniHostMacList.push($scope.availableUnis[0].mac);
+ epl.custAddressList.push($scope.availableUnis[0].address);
+ }
+ else {
+ epl.uniHostIpList.push($scope.availableUnis[uniIdx1].ip);
+ epl.uniHostMacList.push($scope.availableUnis[uniIdx1].mac);
+ epl.custAddressList.push($scope.availableUnis[uniIdx1].address);
+ }
+
+ if ( uniIdx2 < 0 || uniIdx2 > 1) {
+ epl.uniHostIpList.push($scope.availableUnis[0].ip);
+ epl.uniHostMacList.push($scope.availableUnis[0].mac);
+ epl.custAddressList.push($scope.availableUnis[0].address);
+ }
+ else {
+ epl.uniHostIpList.push($scope.availableUnis[uniIdx2].ip);
+ epl.uniHostMacList.push($scope.availableUnis[uniIdx2].mac);
+ epl.custAddressList.push($scope.availableUnis[uniIdx2].address);
+ }
+ }
+
+ // return index of avilable Uni based on IP (-1 if not found)
+ var availableUniIdx = function (uniIp) {
+ for ( var i = 0; i < $scope.availableUnis.length; i++ ) {
+ if ($scope.availableUnis[i].ip == uniIp) {
+ return i;
+ }
+ }
+ return -1;
+ }
+
+ var updateEplWithSelectedUnis = function(epl) {
+
+ if ( epl == null || $scope.eplToEdit == null ) {
+ dbg.e("can't update EPL with UNIS, missing object");
+ return
+ }
+
+ epl.uniHostIpList = [];
+ epl.uniHostIpList.push($scope.eplToEdit.uni1Selected.ip);
+ epl.uniHostIpList.push($scope.eplToEdit.uni2Selected.ip);
+
+ epl.uniHostMacList = [];
+ epl.uniHostMacList.push($scope.eplToEdit.uni1Selected.mac);
+ epl.uniHostMacList.push($scope.eplToEdit.uni2Selected.mac);
+
+ epl.custAddressList = [];
+ epl.custAddressList.push($scope.eplToEdit.uni1Selected.address);
+ epl.custAddressList.push($scope.eplToEdit.uni2Selected.address);
+ }
+
+ //
+ // epl constructor
+ //
+
+ var Epl = function(){
+ dbg.pj("constructing EPL");
+ if ( _uniqueId )
+ this.id = "new"+ _nameNum;
+ else
+ this.id = "new";
+
+ // Don't set COS here, we have to wait until we get the latest cos list
+ this.cos = "unset";
+
+ // EVC ID set by lower layers
+ // TODO : how does evc ID cat capture at EPL layer??
+ this.evcId = "unset";
+
+ this.uniHostIpList = [];
+ this.uniHostMacList = [];
+ this.custAddressList = [];
+
+ if ( $scope.availableUnis.length >= 2 )
+ setEplUniInfo(this, 0, 1);
+ else {
+ dbg.e("can't construct EPL, not enough uni's in the available uni list");
+ return;
+ }
+
+ dbg.pj(this);
+ }
+
+ var copyReturnedEplParams = function(srcEpl, destEpl ) {
+ destEpl.evcId = srcEpl.evcId;
+ }
+
+ var setModalActiveEpl =function () {
+ if ( $scope.selectedEplIdx >= 0 &&
+ $scope.selectedEplIdx < $scope.eplList.length )
+ {
+ model.setCurrentEpl($scope.eplList[$scope.selectedEplIdx]);
+ }
+ else
+ {
+ model.setCurrentEpl(null);
+ }
+ }
+
+ //
+ // EPL HTTP Response Handlers
+ //
+
+ var onRequestError = function(reason){
+ dbg.e("HTTP Request Problem\n" + JSON.stringify(reason));
+ };
+
+ var onEplListResp = function(data) {
+ dbg.p("in onEplListResp()");
+ $scope.eplList = data;
+
+ if ( $scope.eplList && $scope.eplList.length > 0 ) {
+ $scope.selectedEplIdx = 0;
+ model.setCurrentEpl($scope.eplList[$scope.selectedEplIdx]);
+ dbg.p("selectedEplIdx/Id = "+ $scope.selectedEplIdx + "/" +
+ $scope.eplList[$scope.selectedEplIdx].id, 1);
+ }
+ else {
+ $scope.selectedEplIdx = -1;
+ model.setCurrentEpl(null);
+ dbg.p("selectedEplIdx = "+ $scope.selectedEplIdx, 1);
+ }
+ _eplActionState = actionState.IDLE;
+ };
+ var onEplCreateResp = function(returnedEpl) {
+ dbg.p("in onEplCreateResp()");
+ dbg.p("following epl returned from create cmd", 1);
+ dbg.pj(returnedEpl);
+
+ // grab entire returned Epl, since we don't know what
+ // the svcmgr may have changed on creation
+ $scope.eplList.push(returnedEpl);
+
+ // a safer alternative?
+ //copyReturnedEplParams(returnedEpl, _newEpl );
+ //$scope.eplList.push(_newEpl);
+
+ $scope.selectedEplIdx = eplIdxAfter(actionState.ADD);
+ setModalActiveEpl();
+
+ _nameNum++;
+ _newEpl = null;
+ $scope.eplToEdit = null;
+ dbg.p("selectedEplIdx = " + $scope.selectedEplIdx,1);
+ };
+ var onEplUpdateResp = function(returnedEpl) {
+ dbg.p("in onEplUpdateResp()");
+ dbg.p("following epl returned after update", 1);
+ dbg.pj(returnedEpl);
+
+ // splice in entire returned Epl, since we don't know what
+ // the svcmgr may have changed on update (esp evc)
+ $scope.eplList[$scope.selectedEplIdx] = returnedEpl;
+
+ // a safer alternative?
+ // copyReturnedEplParams(returnedEpl, eplToEdit );
+
+
+
+ $scope.selectedEplIdx = eplIdxAfter(actionState.UPDATE);
+
+ // To force a refresh
+ model.setCurrentEpl(null);
+ setModalActiveEpl();
+
+ $scope.eplToEdit = null;
+ dbg.p("selectedEplIdx = " + $scope.selectedEplIdx,1);
+ };
+ var onEplDeleteResp = function(data) {
+ dbg.p("in onEplDeleteResp()");
+ dbg.p("following returned after delete", 1);
+ dbg.pj(data);
+ if ( validEplIdx($scope.selectedEplIdx) )
+ $scope.eplList.splice($scope.selectedEplIdx,1);
+ $scope.selectedEplIdx = eplIdxAfter(actionState.DEL);
+ setModalActiveEpl();
+ dbg.p("selectedEplIdx = " + $scope.selectedEplIdx,1);
+ };
+
+ //
+ // Epl Event Handlers
+ //
+
+ $scope.onEplClick = function (i) {
+ dbg.p("in onEplClick(): clicked ("+i+")");
+ $scope.selectedEplIdx = i;
+ _eplActionState = actionState.IDLE;
+ eplToOperateOn = $scope.eplList[$scope.selectedEplIdx]
+ model.setCurrentEpl(eplToOperateOn);
+ dbg.p("selectedEplIdx/Id = "+ $scope.selectedEplIdx + "/" +
+ eplToOperateOn.id, 1);
+ }
+ $scope.onAddEpl = function () {
+ dbg.p("in onAddEpl()");
+ _eplActionState = actionState.ADD;
+ $scope.eplActionButtonText = "Create";
+
+ var updateEplToAddOnCosListResponse = function(data) {
+ dbg.p("in updateNewEplCosOnCosListResponse()", 1);
+ var cosList = data;
+
+ $scope.availableCosIds = [];
+ for ( var i = 0; i < cosList.length; i++ )
+ $scope.availableCosIds.push(cosList[i].id);
+
+ dbg.p("Avilable CoS List");
+ dbg.pj($scope.availableCosIds);
+
+ // defaults for drop down lists
+ if ( $scope.availableCosIds.length > 0 )
+ $scope.eplToEdit.cos = $scope.availableCosIds[0];
+
+ $scope.eplToEdit.uni1Selected = $scope.availableUnis[0];
+ $scope.eplToEdit.uni2Selected = $scope.availableUnis[1];
+
+ dbg.p("Newly created EPL to add after CoS list retrieved");
+ dbg.pj($scope.eplToEdit);
+ };
+
+ _newEpl = new Epl();
+ $scope.eplToEdit = _newEpl;
+
+ // need to get the current cos list before adding new EPL
+ cosServices.getCosList()
+ .then(updateEplToAddOnCosListResponse,
+ onRequestError);
+ }
+ $scope.onUpdateEpl = function () {
+ dbg.p("in onUpdateEpl()");
+ if ( $scope.eplList.length <= 0 )
+ {
+ dbg.p("nos Epl's exist, no action being taken");
+ return;
+ }
+ _eplActionState = actionState.UPDATE;
+ $scope.eplActionButtonText = "Update";
+
+ var updateEplToEditOnCosListResponse = function(data) {
+ dbg.p("in onCosListResp()");
+ var cosList = data;
+ $scope.availableCosIds = [];
+ for ( var i = 0; i < cosList.length; i++ )
+ $scope.availableCosIds.push(cosList[i].id);
+ dbg.p("Avilable CoS List");
+ dbg.pj($scope.availableCosIds);
+
+ $scope.eplToEdit = $scope.eplList[$scope.selectedEplIdx];
+
+ // TODO (if time): put below stuff in fxn since duplicated twice
+ dbg.p("looking for dd list ip: " + $scope.eplToEdit.uniHostIpList[0] );
+ var availUniIdx = availableUniIdx($scope.eplToEdit.uniHostIpList[0]);
+ if ( availUniIdx < 0 || availUniIdx > $scope.availableUnis.length-1 ) {
+ dbg.e("invalid selected uni-1 idx: "+availUniIdx+"(setting to 0)");
+ $scope.eplToEdit.uni1Selected = $scope.availableUnis[0];
+ }
+ else {
+ $scope.eplToEdit.uni1Selected = $scope.availableUnis[availUniIdx];
+ }
+
+ dbg.p("looking for dd list ip: " + $scope.eplToEdit.uniHostIpList[1] );
+ availUniIdx = availableUniIdx($scope.eplToEdit.uniHostIpList[1]);
+ if ( availUniIdx < 0 || availUniIdx > $scope.availableUnis.length-1 ) {
+ dbg.e("invalid selected uni-2 idx: "+availUniIdx+"(setting to 0)");
+ $scope.eplToEdit.uni2Selected = $scope.availableUnis[0]
+ }
+ else {
+ $scope.eplToEdit.uni2Selected = $scope.availableUnis[availUniIdx];
+ }
+
+ dbg.p("about to edit epl:");
+ dbg.pj($scope.eplToEdit);
+ };
+
+ // need to get the current cos list before editing
+ cosServices.getCosList()
+ .then(updateEplToEditOnCosListResponse,
+ onRequestError);
+ }
+
+ $scope.onDelEpl = function () {
+ dbg.p("in onDelEpl()");
+ if ( $scope.eplList.length <= 0 )
+ {
+ dbg.p("nos Epl's exist, no action being taken");
+ return;
+ }
+ _eplActionState = actionState.DEL;
+ $scope.eplActionButtonText = "Delete";
+ }
+
+ $scope.onEplInputSubmit = function () {
+ dbg.p("in onEplInputSubmit()");
+
+ var eplToOperateOn = null;
+ if ( _eplActionState === actionState.ADD)
+ eplToOperateOn = _newEpl;
+ else
+ eplToOperateOn = $scope.eplList[$scope.selectedEplIdx];
+
+ switch(_eplActionState) {
+
+ case actionState.DEL:
+
+ dbg.p("about to delete " + eplToOperateOn.id,1);
+ eplServices.deleteEpl(eplToOperateOn)
+ .then(onEplDeleteResp, onRequestError);
+ break;
+
+ case actionState.ADD:
+
+ updateEplWithSelectedUnis(eplToOperateOn);
+
+ delete $scope.eplToEdit.uni1Selected;
+ delete $scope.eplToEdit.uni2Selected;
+
+ dbg.p("about to add " + eplToOperateOn.id, 1);
+ dbg.pj(eplToOperateOn);
+ eplServices.createEpl(eplToOperateOn)
+ .then(onEplCreateResp, onRequestError);
+ break;
+
+ case actionState.UPDATE:
+
+ updateEplWithSelectedUnis(eplToOperateOn);
+
+ delete $scope.eplToEdit.uni1Selected;
+ delete $scope.eplToEdit.uni2Selected;
+
+ dbg.p("about to update " + eplToOperateOn.id, 1);
+ eplServices.updateEpl(eplToOperateOn)
+ .then(onEplUpdateResp, onRequestError);
+ break;
+
+ default:
+ dbg.e("invalid action state");
+ break;
+ }
+
+ _eplActionState = actionState.IDLE;
+ }
+
+ //
+ // State query fxns
+ //
+
+ $scope.eplActionInProgress = function () {
+ return ( _eplActionState != actionState.IDLE )
+ }
+ $scope.eplEditInProgress = function () {
+ return ( _eplActionState === actionState.ADD ||
+ _eplActionState === actionState.UPDATE );
+ }
+ $scope.eplUpdateInProgress = function () {
+ return ( _eplActionState === actionState.UPDATE );
+ }
+ $scope.eplAddInProgress = function () {
+ return ( _eplActionState === actionState.ADD );
+ }
+ $scope.eplDelInProgress = function () {
+ return ( _eplActionState === actionState.DEL );
+ }
+ $scope.cosExists = function () {
+ return ( $scope.availableCosIds &&
+ $scope.availableCosIds.length > 0 );
+ }
+ $scope.cosConflict = function () {
+ return ( $scope.eplAddInProgress() &&
+ !$scope.cosExists() );
+ }
+ $scope.eplNameConflict = function () {
+ return ( $scope.eplAddInProgress() &&
+ $scope.eplExists($scope.eplToEdit.id));
+ }
+ $scope.uniConflict = function () {
+ return ( $scope.eplToEdit &&
+ $scope.eplToEdit.uni1Selected &&
+ $scope.eplToEdit.uni2Selected &&
+ $scope.eplEditInProgress() &&
+ ( $scope.eplToEdit.uni1Selected.ip ==
+ $scope.eplToEdit.uni2Selected.ip ));
+ }
+ $scope.showEplInputs = function () {
+ return $scope.eplEditInProgress();
+ }
+ $scope.showEplValues = function () {
+ return (!$scope.showEplInputs() &&
+ validEplIdx($scope.selectedEplIdx));
+ }
+ $scope.showEplNameInput = function () {
+ return $scope.eplAddInProgress();
+ }
+ $scope.showEplName = function () {
+ return (! $scope.showEplNameInput());
+ }
+ $scope.showEplActionButton = function () {
+ return ( $scope.eplAddInProgress() ||
+ ($scope.eplActionInProgress() &&
+ $scope.eplList.length > 0 ));
+ }
+ $scope.activateEplActionButton = function () {
+ return ( $scope.eplActionInProgress() &&
+ !$scope.eplNameConflict() &&
+ !$scope.uniConflict() &&
+ !$scope.cosConflict() )
+ }
+
+ //
+ // Initial Page Set Up
+ //
+
+ eplUrlWatcher = function () { return eplServices.getEplUrl(); }
+ onEplUrlChange = function (newEplUrl, oldEplUrl) {
+ if (newEplUrl !== oldEplUrl) {
+ dbg.p("detected epl url change, getting epl list");
+ eplServices.getEplList()
+ .then(onEplListResp, onRequestError);
+ }
+ }
+ $scope.$watch( eplUrlWatcher, onEplUrlChange );
+
+
+ uniListWatcher = function () { return model.getAvailableUnis(); }
+ onUniListChange = function (newUniList, oldUniList) {
+ if (newUniList !== oldUniList) {
+ dbg.p("detected uni list change")
+ dbg.p("new avilable uni list:")
+ $scope.availableUnis = newUniList;
+ dbg.pj($scope.availableUnis);
+ }
+ }
+ $scope.$watch( uniListWatcher, onUniListChange );
+};
+
+// register controller in the module
+app.controller("EplController", EplController);
+
+}()); \ No newline at end of file
diff --git a/demo-ui/app/controllers/MainController.js b/demo-ui/app/controllers/MainController.js
new file mode 100644
index 0000000..199048b
--- /dev/null
+++ b/demo-ui/app/controllers/MainController.js
@@ -0,0 +1,31 @@
+// Create our module
+var app = angular.module("vcpe", []);
+
+(function() {
+var MainController = function($http, $log, cosServices, eplServices, mefServices, model, dbg ) {
+
+ dbg.p("---> in MainController()");
+
+ // config our app
+ var cfgFile = "../config.json";
+ $http.get(cfgFile).
+ success(function(data) {
+ dbg.p("in cfgFile read callback");
+ dbg.p("incoming data");
+ dbg.pj(data);
+ cosServices.setCosUrl(data.cosMgr);
+ eplServices.setEplUrl(data.eplMgr);
+ mefServices.setEvcUrl(data.evcMgr);
+ mefServices.setUniUrl(data.uniMgr);
+ mefServices.setEvcPathUrl(data.evcPathMgr);
+ model.setAvailableUnis(data.uniList);
+ }).
+ error(function() {
+ dbg.e("Could not read " + cfgFile);
+ });
+};
+
+// register controller in the module
+app.controller("MainController", MainController);
+
+}()); \ No newline at end of file
diff --git a/demo-ui/app/controllers/MefController.js b/demo-ui/app/controllers/MefController.js
new file mode 100644
index 0000000..9531b49
--- /dev/null
+++ b/demo-ui/app/controllers/MefController.js
@@ -0,0 +1,117 @@
+(function() {
+
+var MefController = function($scope, $log, mefServices, model, dbg ) {
+
+ //
+ // Controller Set Up
+ //
+
+ dbg.p("---> in MefController()");
+ $scope.currentEpl = null;
+ $scope.currentEplEvc = null;
+ $scope.currentEvcUnis = [];
+
+ //
+ // Utils
+ //
+
+ $scope.curEplEvcToJson = function () {
+ return angular.toJson($scope.currentEplEvc, true);
+ };
+
+
+ $scope.uniToSpeedString = function(uni) {
+ if (uni) {
+ speed = uni.uni[0].speed;
+ return Object.getOwnPropertyNames(speed)[0];s
+ }
+ else
+ return "";
+ }
+ //
+ // HTTP Response Handlers
+ //
+
+ var onRequestError = function(reason){
+ dbg.e("HTTP Request Problem\n" + JSON.stringify(reason));
+ };
+
+
+ var onUniGetResp = function(data) {
+ dbg.p("in onUniGetResp()");
+ dbg.pj(data);
+
+ // dbg.p("current EVC UNI list before adding");
+ //oSpeedString($scop dbg.pj($scope.currentEvcUnis);
+
+ $scope.currentEvcUnis.push(data);
+
+ // dbg.p("current EVC UNI list after adding");
+ // dbg.pj($scope.currentEvcUnis);
+ }
+
+ var onEvcGetResp = function(data) {
+ dbg.p("in onEvcGetResp()");
+ dbg.pj(data);
+ $scope.currentEplEvc = data;
+
+ // out with the old unis
+ $scope.currentEvcUnis = [];
+
+ // in with the new unis
+ mefServices.getUni($scope.currentEplEvc.uniIdList[0])
+ .then(onUniGetResp, onRequestError);
+ mefServices.getUni($scope.currentEplEvc.uniIdList[1])
+ .then(onUniGetResp, onRequestError);
+ };
+
+ //
+ // State query fxns
+ //
+
+ $scope.showEvcValues = function () {
+ return ( $scope.currentEplEvc != null );
+ }
+
+ $scope.showUniValues = function () {
+ return ( $scope.currentEvcUnis != null );
+ }
+
+ //
+ // Watch for change in selected EPL so tht we can
+ // update the corresponding EVC info
+ //
+
+ eplWatcher = function () { return model.getCurrentEpl(); }
+ onEplChange = function (newEpl, oldEpl) {
+ dbg.p("in MefController:onEplChange");
+ // dbg.p("oldEpl:"); dbg.pj(oldEpl);
+ // dbg.p("newEpl:"); dbg.pj(newEpl);
+
+ // only make a chance if we have a new EPL object
+ if ( newEpl ) {
+ var newEplId = newEpl.id;
+ var oldEplId = "null";
+ if (oldEpl) oldId = oldEpl.id
+
+ dbg.p("detected selected EPL change from " +
+ oldEplId + " to " + newEplId, 1);
+ $scope.currentEpl = newEpl;
+
+ // get the EVC info
+ mefServices.getEvc($scope.currentEpl.evcId)
+ .then(onEvcGetResp, onRequestError);
+ }
+ else {
+ $scope.currentEplEvc = null;
+ $scope.currentEvcUnis = null;
+ }
+
+ }
+ $scope.$watch( eplWatcher, onEplChange );
+};
+
+// register controller in the module
+app.controller("MefController", MefController);
+
+}()); \ No newline at end of file
diff --git a/demo-ui/app/services/cosServices.js b/demo-ui/app/services/cosServices.js
new file mode 100644
index 0000000..c650b6d
--- /dev/null
+++ b/demo-ui/app/services/cosServices.js
@@ -0,0 +1,64 @@
+(function(){
+
+ var cosServices = function ($http, dbg) {
+
+ var _cosBasePath = "/cosmgr/webapi/cos"
+ var _cosUrl = "unset";
+
+ var setCosUrl = function (cosMgrCfg) {
+ dbg.p("in setCosUrl");
+ _cosUrl = "http://"+cosMgrCfg.ip+":"+cosMgrCfg.port+_cosBasePath;
+ dbg.p(_cosUrl);
+ }
+
+ var getCosUrl = function () {
+ dbg.p("in getCosUrl");
+ return _cosUrl;
+ }
+
+ var getCosList = function() {
+ dbg.p("in cosServices.getCosList()",2);
+ var url = _cosUrl+ "/list;"
+ dbg.p("GET: " + url , 2);
+ return $http.get(url)
+ .then(function(response){ return response.data; });
+ };
+ var createCos = function(cos) {
+ dbg.p("in cosServices.createCos()",2)
+ var url = _cosUrl;
+ dbg.p("POST: " + url, 2);
+ dbg.pj(cos);
+ return $http.post(url, cos)
+ .then(function(response){ return response.data; });
+ };
+ var updateCos = function(cos) {
+ dbg.p("in cosServices.updateCos()",2)
+ var url = _cosUrl + "/" + cos.id;
+ dbg.p("PUT: " + url, 2);
+ dbg.pj(cos);
+ return $http.put(url, cos)
+ .then(function(response){ return response.data; });
+ };
+ var deleteCos = function(cos) {
+ dbg.p("in cosServices.deleteCos()",2)
+ var url = _cosUrl + "/" + cos.id;
+ dbg.p("DELELE: " + url, 2);
+ dbg.pj(cos);
+ return $http.delete(url)
+ .then(function(response){ return response.data; });
+ };
+
+ return { // public API
+ setCosUrl : setCosUrl,
+ getCosUrl : getCosUrl,
+ createCos : createCos,
+ getCosList : getCosList,
+ deleteCos : deleteCos,
+ updateCos : updateCos
+ };
+ };
+
+ var module = angular.module("vcpe");
+ module.factory("cosServices", cosServices);
+
+}()); \ No newline at end of file
diff --git a/demo-ui/app/services/dbg.js b/demo-ui/app/services/dbg.js
new file mode 100644
index 0000000..1e12523
--- /dev/null
+++ b/demo-ui/app/services/dbg.js
@@ -0,0 +1,54 @@
+(function(){
+
+ var dbg = function ($log) {
+
+ var dbgFlag = true;
+
+ var on = function() { dbgFlag = true; };
+ var off = function() { dbgFlag = false; };
+
+ var p = function(str, tab, emphasize) {
+ if ( dbgFlag )
+ {
+ var tabStr = "";
+ if (tab) {
+ for (var i = 0; i < tab; i++ )
+ tabStr += " ";
+ }
+ var preStr = "... " + tabStr;
+ var postStr = "";
+ if ( emphasize ) {
+ preStr = tabStr + "####################### ";
+ postStr = " ####################### ";
+ }
+ $log.info(preStr + str + postStr);
+ }
+ };
+
+ var pj = function(obj) {
+ if ( dbgFlag )
+ $log.info(JSON.stringify(obj,null,3))
+ };
+
+ var e = function(eMsg) {
+ $log.error("!! ERROR: " + eMsg);
+ }
+
+ var w = function(eMsg) {
+ $log.warn("!! WARNIING: " + eMsg);
+ }
+
+ return { // Public API
+ on : on, // squelch DBG printing
+ off : off, // enable DBG printing
+ p : p, // print a debug string
+ pj : pj, // print JSON version of an object
+ w : w, // print an warning msg
+ e : e // print an error msg
+ };
+ };
+
+ var module = angular.module("vcpe");
+ module.factory("dbg", dbg);
+
+}()); \ No newline at end of file
diff --git a/demo-ui/app/services/eplServices.js b/demo-ui/app/services/eplServices.js
new file mode 100644
index 0000000..20fb7af
--- /dev/null
+++ b/demo-ui/app/services/eplServices.js
@@ -0,0 +1,64 @@
+(function(){
+
+ var eplServices = function ($http, dbg) {
+
+ var _eplBasePath = "/svcmgr/webapi/svc/epl"
+ var _eplUrl = "unset";
+
+ var setEplUrl = function (eplMgrCfg) {
+ dbg.p("in setEplUrl");
+ _eplUrl = "http://"+eplMgrCfg.ip+":"+eplMgrCfg.port+_eplBasePath;
+ dbg.p(_eplUrl);
+ }
+
+ var getEplUrl = function () {
+ dbg.p("in setEplUrl");
+ return _eplUrl;
+ }
+
+ var getEplList = function() {
+ dbg.p("in eplServices.getEplList()",2);
+ var url = _eplUrl+ "/list;"
+ dbg.p("GET: " + url , 2);
+ return $http.get(url)
+ .then(function(response){ return response.data; });
+ };
+ var createEpl = function(epl) {
+ dbg.p("in eplServices.createEpl()",2)
+ var url = _eplUrl;
+ dbg.p("POST: " + url, 2);
+ dbg.pj(epl);
+ return $http.post(url, epl)
+ .then(function(response){ return response.data; });
+ };
+ var updateEpl = function(epl) {
+ dbg.p("in eplServices.updateEpl()",2)
+ var url = _eplUrl + "/" + epl.id;
+ dbg.p("PUT: " + url, 2);
+ dbg.pj(epl);
+ return $http.put(url, epl)
+ .then(function(response){ return response.data; });
+ };
+ var deleteEpl = function(epl) {
+ dbg.p("in eplServices.deleteEpl()",2)
+ var url = _eplUrl + "/" + epl.id;
+ dbg.p("DELELE: " + url, 2);
+ dbg.pj(epl);
+ return $http.delete(url)
+ .then(function(response){ return response.data; });
+ };
+
+ return { // public API
+ setEplUrl : setEplUrl,
+ getEplUrl : getEplUrl,
+ createEpl : createEpl,
+ getEplList : getEplList,
+ deleteEpl : deleteEpl,
+ updateEpl : updateEpl
+ };
+ };
+
+ var module = angular.module("vcpe");
+ module.factory("eplServices", eplServices);
+
+}()); \ No newline at end of file
diff --git a/demo-ui/app/services/mefServices.js b/demo-ui/app/services/mefServices.js
new file mode 100644
index 0000000..798ceb3
--- /dev/null
+++ b/demo-ui/app/services/mefServices.js
@@ -0,0 +1,71 @@
+(function(){
+
+ var mefServices = function ($http, dbg) {
+
+ var _evcBasePath = "/evcmgr/webapi/evc"
+ var _evcUrl = "unset";
+
+ var _uniBasePath = "/restconf/operational/cl-vcpe-mef:unis/uni"
+ var _uniUrl = "unset";
+
+ var _evcPathBasePath = "/restconf/operational/cl-vcpe-mef:evcs"
+ var _evcPathUrl = "unset";
+
+ //
+ // Configuration services
+ //
+
+ var setEvcUrl = function (evcMgrCfg) {
+ dbg.p("in setEvcUrl");
+ _evcUrl = "http://"+evcMgrCfg.ip+":"+evcMgrCfg.port+_evcBasePath;
+ dbg.p(_evcUrl);
+ }
+
+ var setUniUrl = function (uniMgrCfg) {
+ dbg.p("in setUniUrl");
+ _uniUrl = "http://"+uniMgrCfg.ip+":"+uniMgrCfg.port+_uniBasePath;
+ dbg.p(_uniUrl);
+ }
+
+ var setEvcPathUrl = function (evcPathMgrCfg) {
+ dbg.p("in setEvcPathUrl");
+ _evcPathUrl = "http://"+evcPathMgrCfg.ip+":"+evcPathMgrCfg.port+_evcPathBasePath;
+ dbg.p(_evcPathUrl);
+ }
+
+ //
+ // REST services
+ //
+
+ var getEvc = function(evcId) {
+ dbg.p("in mefServices.getEvc()",2)
+ var url = _evcUrl + "/" + evcId;
+ dbg.p("GET: " + url, 2);
+ return $http.get(url)
+ .then(function(response){ return response.data; });
+ };
+
+ var getUni = function(uniId) {
+ dbg.p("in mefServices.getUni()",2)
+ var url = _uniUrl + "/" + uniId;
+ dbg.p("GET: " + url, 2);
+ // return $http.get(url)
+ // .then(function(response){ return response.data; });
+ return $http({method: 'GET', url: url,
+ headers: {'Authorization': 'Basic YWRtaW46YWRtaW4='}})
+ .then(function(response){ return response.data; });
+ };
+
+ return { // public API
+ setEvcUrl : setEvcUrl,
+ setUniUrl : setUniUrl,
+ setEvcPathUrl : setEvcPathUrl,
+ getEvc : getEvc,
+ getUni : getUni
+ };
+ };
+
+ var module = angular.module("vcpe");
+ module.factory("mefServices", mefServices);
+
+}()); \ No newline at end of file
diff --git a/demo-ui/app/services/model.js b/demo-ui/app/services/model.js
new file mode 100644
index 0000000..c41794b
--- /dev/null
+++ b/demo-ui/app/services/model.js
@@ -0,0 +1,61 @@
+//
+// For data that must be shared accross controllers
+//
+
+(function(){
+var model = function ($log, dbg) {
+
+ var _shared = {
+ availableUnis : [],
+ currentEpl : null
+ };
+
+ var getAvailableUnis = function () {
+ return _shared.availableUnis;
+ }
+
+ var setAvailableUnis = function (availableUnis) {
+ dbg.p("in model:setAvailableUnis");
+ _shared.availableUnis = availableUnis;
+ dbg.pj(_shared.availableUnis);
+ }
+
+ // var getCurrentEplId = function () {
+ // // dbg.p("in model:getCurrentEplId, returning: "+_shared.currentEplId);
+ // return _shared.currentEplId;
+ // }
+
+ // var setCurrentEplId = function (currentEplId) {
+ // // dbg.p("in model:setCurrentEplId, setting to: "+currentEplId);
+ // _shared.currentEplId = currentEplId;
+ // }
+
+ var getCurrentEpl = function () {
+ dbg.p("in model:getCurrentEpl:");
+ //dbg.pj(_shared.currentEpl);
+ return _shared.currentEpl;
+ }
+
+ var setCurrentEpl = function (currentEpl) {
+ // dbg.p("in model:setCurrentEplId, setting to: "+currentEplId);
+ dbg.p("in model:setCurrentEpl");
+ //dbg.pj(currentEpl);
+ _shared.currentEpl = currentEpl;
+ }
+
+
+ var dumpShareDdata = function() { dbg.pj(_shared); };
+
+ return { // Public API
+ getAvailableUnis : getAvailableUnis,
+ setAvailableUnis : setAvailableUnis,
+ getCurrentEpl : getCurrentEpl,
+ setCurrentEpl : setCurrentEpl,
+ dumpShareDdata : dumpShareDdata
+ };
+ };
+
+ var module = angular.module("vcpe");
+ module.factory("model", model);
+
+}()); \ No newline at end of file
diff --git a/demo-ui/app/views/cos-panel.html b/demo-ui/app/views/cos-panel.html
new file mode 100644
index 0000000..682f154
--- /dev/null
+++ b/demo-ui/app/views/cos-panel.html
@@ -0,0 +1,171 @@
+<!--
+
+To Do
+ Change Bandwidth to drop down, with selected levels (10M, 100M, 1G, etc)
+ -->
+
+<div class="primary-lable ">Service Levels</div>
+<div class="cos-list">
+ <div class="list-item choosable"
+ ng-repeat="cos in cosList track by $index"
+
+ ng-class="{'selected-item-idle' : $index === selectedCosIdx &&
+ !cosActionInProgress(),
+ 'selected-item-update' : $index === selectedCosIdx &&
+ cosUpdateInProgress(),
+ 'selected-item-delete' : $index === selectedCosIdx &&
+ cosDelInProgress() }"
+ ng-click="onCosClick($index)">
+ {{ cos.id }}
+ </div>
+</div>
+
+<div class = "action-icon-container">
+
+ <span class="action-icon glyphicon glyphicon-plus"
+ ng-click="onAddCos()"
+ ng-class="{'action' : cosAddInProgress()}">
+ </span>
+
+ <span class="action-icon glyphicon glyphicon-pencil"
+ ng-click="onUpdateCos()"
+ ng-class="{'action' : cosUpdateInProgress()}">
+ </span>
+
+ <span class="action-icon glyphicon glyphicon-minus"
+ ng-click="onDelCos()"
+ ng-class="{'action' : cosDelInProgress()}">
+ </span>
+</div>
+
+<div class="cos-info-contaier">
+ <form role="form" ng-submit="onCosInputSubmit()">
+
+ <!-- Name -->
+
+ <div class="data-row">
+ <div class="label-col">Name:</div>
+ <div class="data-col" ng-show="showCosName()">
+ <span class="data-item">
+ {{ cosList[selectedCosIdx].id }}
+ </span>
+ </div>
+ <div class="data-col" ng-show="showCosNameInput()">
+ <input class="data-input" name="id"
+ type="text" ng-required="showCosInputs()"
+ ng-model="cosToEdit.id">
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="label-col">Bandwidth:</div>
+ <div class="data-col" ng-show="showCosValues()">
+
+ <span class="data-item">
+ {{ bwText(cosList[selectedCosIdx]) }}
+ </span>
+ </div>
+ <div class="data-col" ng-show="showCosInputs()">
+ <select class="cos-dd-input"
+ name="bandwidth"
+ ng-required="showCosInputs()"
+ ng-model="cosToEdit.bwSelected"
+ ng-options="bw.name for bw in availableBWs"
+ >
+ </option>
+ </select>
+ </div>
+ </div>
+
+ <!-- Availability -->
+
+ <div class="data-row">
+ <div class="label-col">Availability:</div>
+ <div class="data-col" ng-show="showCosValues()">
+ <span class="data-item">
+ {{ cosList[selectedCosIdx].availbility }}
+ </span>
+ <span class="data-unit">%</span>
+ </div>
+ <div class="data-col" ng-show="showCosInputs()">
+ <input class="data-input" name="availbility"
+ type="number" step="any" ng-required="showCosInputs()"
+ min="1" max="100"
+ ng-model="cosToEdit.availbility">
+ <span class="data-unit">%</span>
+ </div>
+ </div>
+
+ <!-- Frame Delay -->
+
+ <div class="data-row">
+ <div class="label-col">Frame Delay:</div>
+ <div class="data-col" ng-show="showCosValues()">
+ <span class="data-item">
+ {{ cosList[selectedCosIdx].frameDelay }}
+ </span>
+ <span class="data-unit">ms</span>
+ </div>
+ <div class="data-col" ng-show="showCosInputs()">
+ <input class="data-input" name="frameDelay"
+ type="number" step="any" ng-required="showCosInputs()"
+ min="0"
+ ng-model="cosToEdit.frameDelay">
+ <span class="data-unit">ms</span>
+ </div>
+ </div>
+
+ <!-- Jitter -->
+
+ <div class="data-row">
+ <div class="label-col">Jitter:</div>
+ <div class="data-col" ng-show="showCosValues()">
+ <span class="data-item">
+ {{ cosList[selectedCosIdx].jitter }}
+ </span>
+ <span class="data-unit">ms</span>
+ </div>
+ <div class="data-col" ng-show="showCosInputs()">
+ <input class="data-input" name="jitter"
+ type="number" step="any" ng-required="showCosInputs()"
+ min="0"
+ ng-model="cosToEdit.jitter">
+ <span class="data-unit">ms</span>
+ </div>
+ </div>
+
+ <!-- Frame Loss -->
+
+ <div class="data-row">
+ <div class="label-col">Frame Loss:</div>
+ <div class="data-col" ng-show="showCosValues()">
+ <span class="data-item">
+ {{ cosList[selectedCosIdx].frameLoss }}
+ </span>
+ <span class="data-unit">%</span>
+ </div>
+ <div class="data-col" name="frameLoss"ng-show="showCosInputs()">
+ <input class="data-input" name="frameLoss"
+ type="number" step="any" ng-required="showCosInputs()"
+ min="0" max="100"
+ ng-model="cosToEdit.frameLoss">
+ <span class="data-unit">%</span>
+ </div>
+ </div>
+
+
+ <div class="warning-container">
+ <div class="warning" ng-show="cosNameConflict()">Please Enter Unique Name</div>
+ </div>
+ <div class="button-container">
+ <button type="submit"
+ class="btn btn-sm my-btn-addon"
+ <div ng-class="{'btn-success' : cosAddInProgress(),
+ 'btn-warning' : cosUpdateInProgress(),
+ 'btn-danger' : cosDelInProgress()}"
+ ng-disabled="!activateCosActionButton()"
+ ng-show="showCosActionButton()")>
+ {{ cosActionButtonText }}</button>
+ </div>
+ </form>
+</div>
diff --git a/demo-ui/app/views/css/vcpe.css b/demo-ui/app/views/css/vcpe.css
new file mode 100644
index 0000000..0d08734
--- /dev/null
+++ b/demo-ui/app/views/css/vcpe.css
@@ -0,0 +1,340 @@
+input[type='number'] {
+ font-size: 12px;
+}
+.choosable {
+ cursor: pointer;
+}
+.gradient {
+ background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, #ffffff 100%);
+ background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
+}
+.my-btn-addon {
+ height: 30px;
+ width: 100px;
+}
+.primary-lable {
+ color: darkred;
+ font-size: large;
+ font-weight: bold;
+ text-align: center;
+}
+.list-item {
+ color: black;
+ font-size: small;
+ font-weight: normal;
+ text-align: left;
+ background-color: none;
+}
+.selected-item-idle {
+ background-color: #e3e3e3;
+}
+.selected-item-delete {
+ background-color: #FFE4E1;
+}
+.selected-item-update {
+ background-color: #FFEFD5;
+}
+.primary-container {
+ border: 3px solid black;
+ background-color: #e3e3e3;
+ border-radius: 15px;
+ padding: 10px;
+ height: 400px;
+}
+.secondary-container {
+ border: 1px solid darkgray;
+ background-color: white;
+ padding: 5px 10px;
+ margin: 10px 10px -1px 10px;
+ height: 125px;
+ overflow-y: scroll;
+}
+.action-icon-container {
+ border: 1px solid darkgray;
+ background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, #ffffff 100%);
+ background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
+ margin: 0px 10px;
+ padding: 2px 10px;
+}
+.action-icon {
+ cursor: pointer;
+ padding: 0px 1px;
+ font-size: small;
+ color: black;
+ padding: 2px;
+}
+.action {
+ color: blue !important;
+}
+.warning {
+ color: red !important;
+ font-size: small !important;
+}
+.data-row {
+ display: flex;
+ flex-flow: row nowrap;
+ height: 20px;
+ width: 300;
+}
+.label-col {
+ color: purple;
+ font-size: small;
+ font-weight: normal;
+ text-align: left;
+ flex: 0 0 auto;
+ order: 1;
+ width: 85px;
+}
+.data-col {
+ flex: 0 0 auto;
+ order: 2;
+ color: black;
+ font-size: small;
+ font-weight: normal;
+ text-align: left;
+}
+.data-label {
+ color: purple;
+ font-size: small;
+ font-weight: normal;
+ text-align: left;
+ vertical-align: middle;
+}
+.data-item {
+ color: black;
+ font-size: small;
+ font-weight: bold;
+ text-align: left;
+}
+.data-input {
+ height: 20px;
+ width: 70px;
+ border-radius: 5px;
+}
+.cos-dd-input {
+ height: 20px;
+ width: 70px;
+}
+.epl-dd-input {
+ height: 20px;
+ width: 150px;
+}
+.data-unit {
+ color: black;
+ font-size: small;
+ font-weight: normal;
+ text-align: left;
+ margin-left: 5px;
+ vertical-align: middle;
+}
+.header-container {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+}
+.header-container .hdr {
+ flex: 1 1 auto;
+ order: 1;
+}
+.header-container .img {
+ flex: 1 1 auto;
+ order: 2;
+ align-self: flex-end;
+ margin-bottom: 12px;
+}
+.frame {
+ display: flex;
+ flex-flow: row nowrap;
+ border: 1px solid lightgray;
+ margin: 20px;
+ padding: 20px 0px;
+}
+.frame .left {
+ flex: 1 6 5%;
+ order: 1;
+}
+.frame .right {
+ flex: 1 6 5%;
+ order: 3;
+}
+.frame .content {
+ border: none;
+ flex: 1 6 90%;
+ order: 2;
+}
+.frame .content .action-container {
+ border: none;
+ display: flex;
+ flex-flow: row nowrap;
+}
+.frame .content .action-container .cos-container {
+ border: 3px solid black;
+ background-color: #e3e3e3;
+ border-radius: 15px;
+ padding: 10px;
+ height: 400px;
+ flex: 1 1 50%;
+ order: 1;
+ margin-right: 20px;
+}
+.frame .content .action-container .cos-container .cos-list {
+ border: 1px solid darkgray;
+ background-color: white;
+ padding: 5px 10px;
+ margin: 10px 10px -1px 10px;
+ height: 125px;
+ overflow-y: scroll;
+}
+.frame .content .action-container .cos-container .cos-info-contaier {
+ display: flex;
+ flex-flow: column nowrap;
+ margin: 10px 20px;
+}
+.frame .content .action-container .cos-container .cos-info-contaier .labelContainer {
+ flex: 1 1 33%;
+ order: 1;
+ min-width: 80px;
+ color: purple;
+ font-size: small;
+ font-weight: normal;
+ text-align: left;
+ vertical-align: middle;
+}
+.frame .content .action-container .cos-container .warning-container {
+ height: 15px;
+ margin-top: 10px;
+}
+.frame .content .action-container .epl-container {
+ border: 3px solid black;
+ background-color: #e3e3e3;
+ border-radius: 15px;
+ padding: 10px;
+ height: 400px;
+ flex: 1 1 50%;
+ order: 2;
+ margin-right: 20px;
+}
+.frame .content .action-container .epl-container .epl-list {
+ border: 1px solid darkgray;
+ background-color: white;
+ padding: 5px 10px;
+ margin: 10px 10px -1px 10px;
+ height: 125px;
+ overflow-y: scroll;
+}
+.frame .content .action-container .epl-container .epl-info-contaier {
+ display: flex;
+ flex-flow: column nowrap;
+ margin: 10px 20px;
+}
+.frame .content .action-container .epl-container .epl-info-contaier .labelContainer {
+ flex: 1 1 33%;
+ order: 1;
+ min-width: 80px;
+ color: purple;
+ font-size: small;
+ font-weight: normal;
+ text-align: left;
+ vertical-align: middle;
+}
+.frame .content .action-container .epl-container .warning-container {
+ height: 15px;
+ margin-top: 10px;
+}
+.frame .content .monitor-container .mef-container {
+ border: 3px solid black;
+ background-color: #e3e3e3;
+ border-radius: 15px;
+ padding: 10px;
+ height: 400px;
+ height: 450px;
+ background-color: #B0C4DE;
+ margin: 20px 20px 20px 0px;
+}
+.frame .content .monitor-container .mef-container .primary-mef-lable {
+ color: SteelBlue;
+ font-size: large;
+ font-weight: bold;
+ text-align: center;
+ margin-bottom: 10px;
+}
+.frame .content .monitor-container .mef-container .mef-panel-hdr {
+ border-bottom: 1px solid SlateGray;
+}
+.frame .content .monitor-container .mef-container .secondary-mef-label {
+ color: SlateGray;
+ font-size: small;
+ font-weight: bold;
+ text-align: center;
+ background-color: #e3e3e3;
+}
+.frame .content .monitor-container .mef-container .mef-data-label {
+ color: purple;
+ font-size: small;
+ font-weight: normal;
+ text-align: left;
+ vertical-align: middle;
+}
+.frame .content .monitor-container .mef-container .mef-label-col {
+ color: purple;
+ font-size: small;
+ font-weight: normal;
+ text-align: left;
+ flex: 0 0 auto;
+ order: 1;
+ padding-left: 10px;
+}
+.frame .content .monitor-container .mef-container .evc-label-col {
+ color: purple;
+ font-size: small;
+ font-weight: normal;
+ text-align: left;
+ flex: 0 0 auto;
+ order: 1;
+ padding-left: 10px;
+ width: 200px;
+}
+.frame .content .monitor-container .mef-container .uni-label-col {
+ color: purple;
+ font-size: small;
+ font-weight: normal;
+ text-align: left;
+ flex: 0 0 auto;
+ order: 1;
+ padding-left: 10px;
+ width: 100px;
+}
+.frame .content .monitor-container .mef-container .mef-info-container {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: center;
+}
+.frame .content .monitor-container .mef-container .mef-info-container .mef-secondary-container {
+ border: 1px solid darkgray;
+ background-color: WhiteSmoke;
+ margin: 5px;
+}
+.frame .content .monitor-container .mef-container .mef-info-container .uni1-container {
+ border: 1px solid darkgray;
+ background-color: WhiteSmoke;
+ margin: 5px;
+ border: 2px solid SlateGray;
+ flex: 1 1 24%;
+ order: 1;
+}
+.frame .content .monitor-container .mef-container .mef-info-container .evc-container {
+ border: 1px solid darkgray;
+ background-color: WhiteSmoke;
+ margin: 5px;
+ border: 2px solid SlateGray;
+ flex: 1 1 38%;
+ order: 2;
+}
+.frame .content .monitor-container .mef-container .mef-info-container .uni2-container {
+ border: 1px solid darkgray;
+ background-color: WhiteSmoke;
+ margin: 5px;
+ border: 2px solid SlateGray;
+ flex: 1 1 24%;
+ order: 3;
+}
diff --git a/demo-ui/app/views/epl-panel.html b/demo-ui/app/views/epl-panel.html
new file mode 100644
index 0000000..3de2523
--- /dev/null
+++ b/demo-ui/app/views/epl-panel.html
@@ -0,0 +1,187 @@
+<!--
+
+To Do
+ construct default name based on UNIs and COS
+ display EVC params when clicked
+ changed currently hardcoded widths (150) of input fields/dd's to be set by a class
+ update config file based on watch (already have hit issue), rather than wait
+ update available cos list when new cos added (low priority)
+
+ -->
+
+<!-- List of existing EPLs -->
+
+<div class="primary-lable ">Ethernet Private Line Services</div>
+<div class="epl-list">
+ <div class="list-item choosable"
+ ng-repeat="epl in eplList track by $index"
+
+ ng-class="{'selected-item-idle' : $index === selectedEplIdx &&
+ !eplActionInProgress(),
+ 'selected-item-update' : $index === selectedEplIdx &&
+ eplUpdateInProgress(),
+ 'selected-item-delete' : $index === selectedEplIdx &&
+ eplDelInProgress() }"
+ ng-click="onEplClick($index)">
+ {{ epl.id }}
+ </div>
+</div>
+
+
+<!-- Action Icons (add/mod/del) -->
+
+<div class = "action-icon-container">
+
+ <span class="action-icon glyphicon glyphicon-plus"
+ ng-click="onAddEpl()"
+ ng-class="{'action' : eplAddInProgress()}">
+ </span>
+
+ <span class="action-icon glyphicon glyphicon-pencil"
+ ng-click="onUpdateEpl()"
+ ng-class="{'action' : eplUpdateInProgress()}">
+ </span>
+
+ <span class="action-icon glyphicon glyphicon-minus"
+ ng-click="onDelEpl()"
+ ng-class="{'action' : eplDelInProgress()}">
+ </span>
+</div>
+
+<!-- Data for EPL selected / being acted on -->
+
+<div class="epl-info-contaier">
+ <form role="form" ng-submit="onEplInputSubmit()">
+
+ <!-- Name -->
+
+ <div class="data-row">
+ <div class="label-col">Name:</div>
+ <div class="data-col" ng-show="showEplName()">
+ <span class="data-item">
+ {{ eplList[selectedEplIdx].id }}
+ </span>
+ </div>
+
+ <div class="data-col" ng-show="showEplNameInput()">
+ <input class="data-input" name="id"
+ style="width:150"
+ type="text" ng-required="showEplInputs()"
+ ng-model="eplToEdit.id">
+ </div>
+ </div>
+
+ <!-- Class of servce -->
+
+ <div class="data-row">
+ <div class="label-col">Service level</div>
+ <div class="data-col" ng-show="showEplValues()">
+ <span class="data-item">
+ {{ eplList[selectedEplIdx].cos }}</span>
+ </div>
+ <div class="data-col" ng-show="showEplInputs()">
+ <select class="dd-input"
+ style="width:150"
+ name="cos Id"
+ ng-required="showEplInputs()"
+ ng-model="eplToEdit.cos"
+ >
+ <option ng-repeat="cos in availableCosIds"
+ value="{{ cos }}"
+ ng-selected="{{cos == eplToEdit.cos}}"
+ >
+ {{ cos }}
+ </option>
+ </select>
+ </div>
+ </div>
+
+
+ <!-- UNI 1 -->
+
+ <div class="data-row">
+ <div class="label-col">UNI 1</div>
+ <div class="data-col" ng-show="showEplValues()">
+ <span class="data-item">
+ {{ eplList[selectedEplIdx].uniHostIpList[0] }}&nbsp
+ ( {{ eplList[selectedEplIdx].custAddressList[0] }} )
+ </span>
+ </div>
+
+ <div class="data-col" ng-show="showEplInputs()">
+ <select class="dd-input"
+ style="width:150"
+ name="uni 1"
+ ng-required="showEplInputs()"
+ ng-model="eplToEdit.uni1Selected"
+ ng-options="uni.ip + ' ( ' + uni.address + ' )' for uni in availableUnis"
+ >
+ </option>
+ </select>
+ </div>
+ </div>
+
+
+ <!-- UNI 2 -->
+
+ <div class="data-row">
+ <div class="label-col">UNI 2</div>
+ <div class="data-col" ng-show="showEplValues()">
+ <span class="data-item">
+ {{ eplList[selectedEplIdx].uniHostIpList[1] }}&nbsp
+ ( {{ eplList[selectedEplIdx].custAddressList[1] }} )
+ </span>
+ </div>
+
+ <div class="data-col" ng-show="showEplInputs()">
+ <select class="dd-input"
+ style="width:150"
+ name="uni 1"
+ ng-required="showEplInputs()"
+ ng-model="eplToEdit.uni2Selected"
+ ng-options="uni.ip + ' ( ' + uni.address + ' )' for uni in availableUnis"
+ >
+ </option>
+ </select>
+ </div>
+ </div>
+
+
+ <!-- Evc -->
+
+ <div class="data-row" >
+ <div class="label-col" ng-hide="eplAddInProgress()">Assoc Evc:</div>
+ <div class="data-col">
+ <span class="data-item" ng-hide="eplAddInProgress()">
+ {{ eplList[selectedEplIdx].evcId }}
+ </span>
+ </div>
+ </div>
+
+ <!-- Action Buttons -->
+
+ <div class="warning-container">
+ &nbsp<span class="warning" ng-show="eplNameConflict()">[Please Enter Unique Name]&nbsp&nbsp&nbsp</span>
+ <span class="warning" ng-show="uniConflict()">[UNI-1 and UNI-2 must be different]&nbsp&nbsp&nbsp</span>
+ <span class="warning" ng-show="cosConflict()">[Must create SL before creating EPL]&nbsp&nbsp&nbsp</span>
+ </div>
+ <div class="button-container">
+ <button type="submit"
+ class="btn btn-sm my-btn-addon"
+ <div ng-class="{'btn-success' : eplAddInProgress(),
+ 'btn-warning' : eplUpdateInProgress(),
+ 'btn-danger' : eplDelInProgress()}"
+ ng-disabled="!activateEplActionButton()"
+ ng-show="showEplActionButton()")>
+ {{ eplActionButtonText }}</button>
+ </div>
+
+ <!-- Debug -->
+
+<!--
+ <div>
+ </div>
+ -->
+
+ </form>
+</div>
diff --git a/demo-ui/app/views/less/vcpe.less b/demo-ui/app/views/less/vcpe.less
new file mode 100644
index 0000000..5598160
--- /dev/null
+++ b/demo-ui/app/views/less/vcpe.less
@@ -0,0 +1,365 @@
+@dbg-flg: false;
+
+@side-panel-width: 5%;
+@main-panel-width: 100%-(2*@side-panel-width);
+
+@backgroundGray: #E3E3E3;
+
+@cos-basis: 50%;
+@epl-basis: 100%-(@cos-basis);
+
+
+//
+// Utilities
+//
+
+.dbg-border( // show border if @dbg-flg is true
+ @dbg-bordersFlg,
+ @dbg-borderClr,
+ @dbg-borderStyle)
+ when (@dbg-bordersFlg=true) {
+ border: 3px @dbg-borderStyle @dbg-borderClr;
+ margin: 1px; padding: 1px;
+}
+
+.set-text(@color,
+ @font-size,
+ @font-weight,
+ @text-align) {
+ color:@color; font-size:@font-size;
+ font-weight:@font-weight; text-align:@text-align;
+}
+
+//
+// Common Styles
+//
+
+input[type='number'] { font-size: 12px; }
+
+.choosable {
+ cursor: pointer;
+}
+
+.gradient {
+ background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.my-btn-addon {
+ height: 30px;
+ width: 100px;
+}
+
+.primary-lable {
+ .set-text(darkred, large, bold, center); }
+
+.list-item {
+ .set-text(black, small, normal, left);
+ background-color:none; }
+
+.selected-item-idle {
+ background-color: @backgroundGray; }
+
+.selected-item-delete {
+ background-color: #FFE4E1; }
+
+.selected-item-update {
+ background-color: #FFEFD5; }
+
+.primary-container {
+ border: 3px solid black;
+ .dbg-border(@dbg-flg, blue, solid);
+ background-color: @backgroundGray;
+ border-radius: 15px;
+ padding: 10px;
+ height: 400px;
+}
+
+.secondary-container {
+ border: 1px solid darkgray;
+ .dbg-border(@dbg-flg, green, solid);
+ background-color: white;
+ padding: 5px 10px; // TB RL
+ margin: 10px 10px -1px 10px; // T R B L
+ height: 125px;
+ overflow-y: scroll;
+}
+
+.action-icon-container {
+ border: 1px solid darkgray;
+ .dbg-border(@dbg-flg, magenta, solid);
+ .gradient;
+ margin: 0px 10px; // TB RL
+ padding: 2px 10px; // TB RL
+}
+
+.action-icon {
+ .choosable;
+ padding: 0px 1px; // TB RL
+ font-size: small;
+ color: black;
+ padding: 2px;
+}
+
+.action {
+ color: blue !important;
+}
+
+.warning {
+ color: red !important;
+ font-size: small !important;
+}
+
+.data-row {
+ .dbg-border(@dbg-flg, red, solid);
+ display: flex;
+ flex-flow:row nowrap;
+ height: 20px;
+ width: 300;
+ }
+.label-col {
+ .dbg-border(@dbg-flg, gray, solid);
+ .set-text(purple, small, normal, left);
+ flex: 0 0 auto; order: 1;
+ width: 85px;
+ }
+
+
+.data-col {
+ .dbg-border(@dbg-flg, gray, solid);
+ flex: 0 0 auto; order: 2;
+ .set-text(black, small, normal, left);
+
+ }
+
+.data-label {
+ .set-text(purple, small, normal, left);
+ vertical-align: middle;
+}
+.data-item {
+ .set-text(black, small, bold, left);
+}
+.data-input {
+ height: 20px;
+ width: 70px;
+ border-radius: 5px;
+}
+.cos-dd-input {
+ height: 20px;
+ width: 70px;
+}
+
+.epl-dd-input {
+ height: 20px;
+ width: 150px;
+}
+
+
+.data-unit {
+ .set-text(black, small, normal, left);
+ margin-left: 5px;
+ vertical-align: middle;
+}
+
+//
+// Page starts here
+//
+
+.header-container {
+ display: flex;
+ flex-flow:row nowrap;
+ justify-content: space-between;
+ .hdr {
+ flex: 1 1 auto; order: 1;
+ }
+ .img {
+ flex: 1 1 auto; order: 2;
+ align-self: flex-end;
+ margin-bottom: 12px;
+ }
+}
+
+
+.frame{
+ .dbg-border(@dbg-flg, lightgray, solid);
+ display: flex;
+ flex-flow:row nowrap;
+ border: 1px solid lightgray;
+
+ margin: 20px; // TBRL
+ padding: 20px 0px; // TB RL
+
+ .left { .dbg-border(@dbg-flg, lightgray, solid);
+ flex: 1 6 @side-panel-width; order: 1; }
+
+ .right{ .dbg-border(@dbg-flg, lightgray, solid);
+ flex: 1 6 @side-panel-width; order: 3; }
+
+ .content {
+ border: none;
+ .dbg-border(@dbg-flg, lightgray, solid);
+ flex: 1 6 @main-panel-width; order: 2;
+
+ .action-container {
+ border: none;
+ .dbg-border(@dbg-flg, yellow, solid);
+
+ display: flex;
+ flex-flow:row nowrap;
+
+ .cos-container {
+ .primary-container;
+ flex: 1 1 @cos-basis; order: 1;
+ margin-right: 20px;
+
+ .cos-list {
+ .secondary-container;
+ }
+ .cos-info-contaier {
+ .dbg-border(@dbg-flg, green, solid);
+ display: flex;
+ flex-flow:column nowrap;
+ margin: 10px 20px; // TB RL
+ .labelContainer {
+ .dbg-border(@dbg-flg, yellow, solid);
+ flex: 1 1 33%; order: 1;
+ min-width: 80px;
+ .data-label;
+ }
+ }
+ .warning-container {
+ .dbg-border(@dbg-flg, magenta, solid);
+ height: 15px;
+ margin-top: 10px;
+ }
+ .button-container {
+ .dbg-border(@dbg-flg, magenta, solid);
+ }
+ }
+ .epl-container {
+ .primary-container;
+ flex: 1 1 @epl-basis; order: 2;
+ margin-right: 20px;
+
+ .epl-list {
+ .secondary-container;
+ }
+ .epl-info-contaier {
+ .dbg-border(@dbg-flg, green, solid);
+ display: flex;
+ flex-flow:column nowrap;
+ margin: 10px 20px; // TB RL
+ .labelContainer {
+ .dbg-border(@dbg-flg, yellow, solid);
+ flex: 1 1 33%; order: 1;
+ min-width: 80px;
+ .data-label;
+ }
+ }
+ .warning-container {
+ .dbg-border(@dbg-flg, magenta, solid);
+ height: 15px;
+ margin-top: 10px;
+ }
+ .button-container {
+ .dbg-border(@dbg-flg, magenta, solid);
+ }
+ }
+ }
+
+ .monitor-container {
+ .dbg-border(@dbg-flg, yellow, solid);
+
+
+ .mef-container {
+ .primary-container;
+ height: 450px;
+
+ .dbg-border(@dbg-flg, blue, solid);
+ background-color: #B0C4DE;
+ margin: 20px 20px 20px 0px; // T R B L
+
+ .primary-mef-lable {
+ .set-text(SteelBlue, large, bold, center);
+ margin-bottom: 10px;
+ }
+
+ @mef-container-border-color: SlateGray;
+
+ .mef-panel-hdr {
+ border-bottom: 1px solid @mef-container-border-color;
+ .dbg-border(@dbg-flg, blue, solid);
+ }
+
+ .secondary-mef-label {
+ .set-text(SlateGray, small, bold, center);
+ background-color: @backgroundGray;
+ }
+
+ .mef-data-label {
+ .set-text(purple, small, normal, left);
+ vertical-align: middle;
+
+ }
+ .mef-label-col {
+ .dbg-border(@dbg-flg, gray, solid);
+ .set-text(purple, small, normal, left);
+ flex: 0 0 auto; order: 1;
+ padding-left: 10px;
+ }
+
+ .evc-label-col {
+ .mef-label-col;
+ width: 200px;
+
+ }
+ .uni-label-col {
+ .mef-label-col;
+ width: 100px;
+ }
+
+ .mef-info-container {
+ display: flex;
+ flex-flow:row nowrap;
+ justify-content: center;
+
+ .mef-secondary-container {
+ border: 1px solid darkgray;
+ .dbg-border(@dbg-flg, green, solid);
+ background-color: WhiteSmoke;
+ //padding: 5px 30px; // TB RL
+ margin: 5px;
+ }
+
+ @evc-basis: 38%;
+ @uni-basis: 100%-(2*@evc-basis);
+
+ .uni1-container {
+ .mef-secondary-container;
+ border: 2px solid @mef-container-border-color;
+ .dbg-border(@dbg-flg, darkred, solid);
+ flex: 1 1 @uni-basis; order: 1;
+
+ }
+ .evc-container {
+ .mef-secondary-container;
+ border: 2px solid @mef-container-border-color;
+ .dbg-border(@dbg-flg, darkred, solid);
+ flex: 1 1 @evc-basis; order: 2;
+
+ }
+ .uni2-container {
+ .mef-secondary-container;
+ border: 2px solid @mef-container-border-color;
+ .dbg-border(@dbg-flg, darkred, solid);
+ flex: 1 1 @uni-basis; order: 3;
+
+ }
+ }
+ }
+ }
+ }
+}
+
+
+
diff --git a/demo-ui/app/views/mef-panel.html b/demo-ui/app/views/mef-panel.html
new file mode 100644
index 0000000..df9f60b
--- /dev/null
+++ b/demo-ui/app/views/mef-panel.html
@@ -0,0 +1,370 @@
+<!--
+
+To Do
+ Use cases to handle properly RE EVC/UNI displaying info
+ - EPL exist at start up
+ - no EPL at start up
+ - delete an EPL
+ - delete last EPL
+ -->
+
+<div class="primary-mef-lable">MEF EPL Data</div>
+<div class="mef-info-container">
+
+
+ <!-- UNI 1 -->
+
+ <div class="uni1-container">
+ <div class="mef-panel-hdr">
+ <div class="secondary-mef-label">UNI-1 MEF Attributes</div>
+ <div class="secondary-mef-label"
+ style="font-size: xx-small; font-weight: normal; color: #b3b3b3;">
+ (Source = ODL UNI Mgr DB)
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="uni-label-col">Uni ID:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEvcUnis[0].uni[0]["id"] }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="uni-label-col">IP Address:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEvcUnis[0].uni[0]["ip-address"] }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="uni-label-col">MAC Address:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEvcUnis[0].uni[0]["mac-address"] }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="uni-label-col">Speed:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ uniToSpeedString(currentEvcUnis[0]) }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="uni-label-col">Mac Layer:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEvcUnis[0].uni[0]["mac-layer"] }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="uni-label-col">Phys Medium:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEvcUnis[0].uni[0]["physical-medium"] }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="uni-label-col">MTU Size:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEvcUnis[0].uni[0]["mtu-size"] }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="uni-label-col">Mode:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEvcUnis[0].uni[0]["mode"] }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="uni-label-col">Type:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEvcUnis[0].uni[0]["type"] }}
+ </span>
+ </div>
+ </div>
+
+ </div>
+
+ <!-- EVC -->
+
+ <div class="evc-container">
+
+ <div class="mef-panel-hdr">
+ <div class="secondary-mef-label">EVC MEF Attributes</div>
+ <div class="secondary-mef-label"
+ style="font-size: xx-small; font-weight: normal; color: #b3b3b3;">
+ (Source = EVC Mgr DB)</div>
+ </div>
+ <div class="data-row">
+ <div class="evc-label-col">Evc ID:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEplEvc.id }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="evc-label-col">CoS ID:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEplEvc.cosId }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="evc-label-col">Uni-1/2 IDs:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+
+ <span class="data-item">
+ {{ "[" + currentEplEvc.uniIdList[0] + "] | [" + currentEplEvc.uniIdList[1] + "]"}}
+ </span>
+
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="evc-label-col">Uni-1/2 IPs:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEplEvc.uniIpList[0] }}
+ </span>
+ </div>
+ </div>
+ <div class="data-row">
+ <div class="evc-label-col"></div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEplEvc.uniIpList[1] }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="evc-label-col">Uni-1/2 MACs:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEplEvc.uniMacList[0] }}
+ </span>
+ </div>
+ </div>
+ <div class="data-row">
+ <div class="evc-label-col"></div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEplEvc.uniMacList[1] }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="evc-label-col">1-Way Availability:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEplEvc.oneWayAvailability }}
+ </span>
+ <span class="data-unit">%</span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="evc-label-col">1-Way Frame Delay:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEplEvc.oneWayFrameDelay }}
+ </span>
+ <span class="data-unit">ms</span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="evc-label-col">1-Way Frame Loss Ratio:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEplEvc.oneWayFrameLossRatio }}
+ </span>
+ <span class="data-unit">%</span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="evc-label-col">EVC Type:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEplEvc.evcType }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="evc-label-col">Unicast Frame Delivery:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEplEvc.unicastFrameDelivery }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="evc-label-col">Broadcast Frame Delivery:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEplEvc.broadcastFrameDelivery }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="evc-label-col">Multicast Frame Delivery:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEplEvc.multicastFrameDelivery }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="evc-label-col">CE VLAN ID Preservation:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEplEvc.ceVLanIdPreservation }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="evc-label-col">CE VLAN CoS Preservation:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEplEvc.ceVlanCosPreservation }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="evc-label-col">Max Service Frame Size:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEplEvc.evcMaxSvcFrameSize }}
+ </span>
+ <span class="data-unit">bytes</span>
+ </div>
+ </div>
+ </div>
+
+ <!-- UNI 2 -->
+
+ <div class="uni2-container">
+ <div class="mef-panel-hdr">
+ <div class="secondary-mef-label">UNI-2 MEF Attributes</div>
+ <div class="secondary-mef-label"
+ style="font-size: xx-small; font-weight: normal; color: #b3b3b3;">
+ (Source = ODL UNI Mgr DB)
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="uni-label-col">Uni ID:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEvcUnis[1].uni[0]["id"] }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="uni-label-col">IP Address:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEvcUnis[1].uni[0]["ip-address"] }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="uni-label-col">MAC Address:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEvcUnis[1].uni[0]["mac-address"] }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="uni-label-col">Speed:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ uniToSpeedString(currentEvcUnis[1]) }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="uni-label-col">Mac Layer:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEvcUnis[1].uni[0]["mac-layer"] }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="uni-label-col">Phys Medium:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEvcUnis[1].uni[0]["physical-medium"] }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="uni-label-col">MTU Size:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEvcUnis[0].uni[0]["mtu-size"] }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="uni-label-col">Mode:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEvcUnis[1].uni[0]["mode"] }}
+ </span>
+ </div>
+ </div>
+
+ <div class="data-row">
+ <div class="uni-label-col">Type:</div>
+ <div class="data-col" ng-show="showEvcValues()">
+ <span class="data-item">
+ {{ currentEvcUnis[1].uni[0]["type"] }}
+ </span>
+ </div>
+ </div>
+
+ </div>
+</div> \ No newline at end of file
diff --git a/demo-ui/app/views/vcpe-portal.html b/demo-ui/app/views/vcpe-portal.html
new file mode 100644
index 0000000..437485f
--- /dev/null
+++ b/demo-ui/app/views/vcpe-portal.html
@@ -0,0 +1,71 @@
+<!--
+
+TODO
+ - Use watchers to trigger changes aftger config file reads as opposed
+ to the current "sleep for a bit" approach
+
+ -->
+
+<html ng-app="vcpe">
+<head ng-controller="MainController">
+
+ <script src="../../bower_components/angular/angular.min.js"></script>
+
+ <link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
+
+ <link rel="stylesheet" href="css/vcpe.css" />
+ <script src="../controllers/MainController.js"></script>
+ <script src="../controllers/CosController.js"></script>
+ <script src="../controllers/EplController.js"></script>
+ <script src="../controllers/MefController.js"></script>
+ <script src="../services/cosServices.js"></script>
+ <script src="../services/eplServices.js"></script>
+ <script src="../services/mefServices.js"></script>
+ <script src="../services/model.js"></script>
+ <script src="../services/dbg.js"></script>
+
+</head>
+
+<body>
+<div class="frame">
+<div class="left"></div>
+
+<div class="content">
+
+ <div class="header-container">
+ <div class="hdr">
+ <h2>Virtual Business CPE Demo</h2>
+ </div>
+ </div>
+
+ <div class="action-container">
+
+ <div class="cos-container"
+ ng-controller="CosController"
+ ng-include="'cos-panel.html'">
+ </div>
+
+ <div class="epl-container"
+ ng-controller="EplController"
+ ng-include="'epl-panel.html'">
+ </div>
+
+ </div>
+
+ <div class="monitor-container">
+
+ <div class="mef-container"
+ ng-controller="MefController"
+ ng-include="'mef-panel.html'">
+ </div>
+
+
+ </div>
+
+</div>
+
+<div class="right"></div>
+</div>
+</body>
+</html>