org.onap migration

Change-Id: I52f0b2851f2c765752b6d21f49b32136d7d72a3d
Issue-ID: VID-86
Signed-off-by: Ofir Sonsino <os0695@att.com>

28 files changed, 712 insertions, 988 deletions

diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-change-management/alert-change-management.html b/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-change-management/alert-change-management.html
index bdc95c98..60596f49 100644
--- a/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-change-management/alert-change-management.html
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-change-management/alert-change-management.html
@@ -1,4 +1,4 @@
-<link rel="stylesheet" type="text/css" href="app/vid/scripts/modals/new-change-management/new-change-management.css" />
+<link rel="stylesheet" type="text/css" href="app/vid/styles/modal-create-new.css" />
 <link rel="stylesheet" type="text/css" href="app/vid/scripts/modals/alert-change-management/alert-change-management.css" />
 <div class="modal-header">
     <h3 class="modal-title" id="alert-modal-header">On Hold</h3>
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-modal/alert-modal.controller.js b/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-modal/alert-modal.controller.js
new file mode 100644
index 00000000..6cb3f9c8
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-modal/alert-modal.controller.js
@@ -0,0 +1,33 @@
+(function () {
+    'use strict';
+
+    appDS2.controller("alertModalController", ["$uibModalInstance", "jobInfo",
+        "$log", alertModalController]);
+
+    function alertModalController($uibModalInstance, jobInfo,  $log) {
+        var vm = this;
+        var init = function() {
+            if (jobInfo) {
+                vm.content = jobInfo.message;
+                vm.mode = jobInfo.status;
+                if (vm.mode == "failed") {
+                    vm.Header = "Failed"
+                } else if (vm.mode == "confirm") {
+                    vm.Header = "Confirm"
+                } else {
+                    vm.Header = "Success"
+                }
+            }
+        };
+
+        vm.close = function () {
+            $uibModalInstance.close();
+        };
+
+        vm.ok = function () {
+            $uibModalInstance.close(true);
+        };
+
+        init();
+    }
+})();
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-modal/alert-modal.css b/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-modal/alert-modal.css
new file mode 100644
index 00000000..85382b0e
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-modal/alert-modal.css
@@ -0,0 +1,15 @@
+.modal-header  {
+    border-bottom-color:  #ffb81c;
+}
+.modal-header.success {
+    border-bottom: 3px solid #4ca90c;
+}
+.modal-header.failed {
+    border-bottom: 3px solid #cf2a2a;
+}
+.modal-header.confirm {
+    border-bottom: 3px solid #009FDB;
+}
+.modal-footer {
+    border-radius: 0 0 6px 6px;
+}
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-modal/alert-modal.html b/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-modal/alert-modal.html
new file mode 100644
index 00000000..4fa9d458
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-modal/alert-modal.html
@@ -0,0 +1,15 @@
+<link rel="stylesheet" type="text/css" href="app/vid/styles/modals.css">
+<link rel="stylesheet" type="text/css" href="app/vid/scripts/modals/alert-modal/alert-modal.css" />
+<div class="modal-header" ng-class="vm.mode">
+    <span class="modal-title"  id="alert-modal-header">{{vm.Header}}</span>
+    <span id="cancel" ng-click="vm.close()" class="pull-right modal-close" aria-hidden="true">&times;</span>
+</div>
+<div class="modal-body">
+    <span id="failed-modal-content">{{vm.content}}</span>
+</div>
+<div class="modal-footer">
+    <div class="pull-right">
+        <button data-tests-id="ok" id="ok-button" name="ok" class="btn"
+                ng-click="vm.ok()">OK</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-new-scheduler/alert-new-scheduler.controller.js b/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-new-scheduler/alert-new-scheduler.controller.js
deleted file mode 100644
index 2c5eabed..00000000
--- a/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-new-scheduler/alert-new-scheduler.controller.js
+++ /dev/null
@@ -1,33 +0,0 @@
-(function () {
-    'use strict';
-
-    appDS2.controller("alertNewSchedulerController", ["$uibModalInstance", "jobInfo", "MsoService", "COMPONENT",
-        "$log", alertNewSchedulerController]);
-
-    function alertNewSchedulerController($uibModalInstance, jobInfo, MsoService, COMPONENT, $log) {
-        var vm = this;
-
-        vm.manualTasks = [];
-        vm.MANUAL_TASKS = COMPONENT.MANUAL_TASKS;
-        var init = function() {
-            if (jobInfo) {
-                vm.content = jobInfo;
-            } else {
-                vm.content = "Successfully";
-            }
-
-          
-
-        };
-
-        
-
-      
-
-        vm.close = function () {
-            $uibModalInstance.close();
-        };
-
-        init();
-    }
-})();
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-new-scheduler/alert-new-scheduler.css b/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-new-scheduler/alert-new-scheduler.css
deleted file mode 100644
index 316c2e46..00000000
--- a/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-new-scheduler/alert-new-scheduler.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.modal-header h3 {
-    border-bottom: 3px solid #ffb81c;
-}
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-new-scheduler/alert-new-scheduler.html b/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-new-scheduler/alert-new-scheduler.html
deleted file mode 100644
index e6255cf3..00000000
--- a/vid-app-common/src/main/webapp/app/vid/scripts/modals/alert-new-scheduler/alert-new-scheduler.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<link rel="stylesheet" type="text/css" href="app/vid/scripts/modals/new-change-management/new-change-management.css" />
-<link rel="stylesheet" type="text/css" href="app/vid/scripts/modals/alert-change-management/alert-change-management.css" />
-<div class="modal-header">
-    <h3 class="modal-title" id="alert-modal-header">Response From Server</h3>
-    <span id="cancel" ng-click="vm.close()" class="pull-right modal-close" aria-hidden="true">&times;</span>
-</div>
-<div class="modal-body">
-    <span id="alert-modal-content">{{vm.content}}</span>
-</div>
-<div class="modal-footer">
-<!--     <div ng-include="'app/vid/scripts/modals/change-management-manual-tasks-controller/change-management-manual-tasks.html'"></div> -->
-</div>
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/attach-test-env-manifest/attach-test-env-manifest.controller.js b/vid-app-common/src/main/webapp/app/vid/scripts/modals/attach-test-env-manifest/attach-test-env-manifest.controller.js
new file mode 100644
index 00000000..93024043
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/attach-test-env-manifest/attach-test-env-manifest.controller.js
@@ -0,0 +1,58 @@
+(function () {
+    'use strict';
+
+    appDS2.controller("attachTestEnvManifestController", ["$uibModalInstance", "$uibModal", "$log", "$scope",
+        attachTestEnvManifestController]);
+
+    function attachTestEnvManifestController($uibModalInstance, $uibModal, $log, $scope) {
+        var vm = this;
+
+        var init = function () {
+            vm.manifest = "";
+            vm.error="";
+        };
+
+        vm.close = function () {
+            $uibModalInstance.close();
+        };
+
+        vm.submit = function () {
+            $uibModalInstance.close(vm.manifest);
+        };
+
+        vm.isSubmitDisabled = function () {
+            return !(vm.manifest);
+        };
+
+
+
+        /*
+        Must be $scope because we bind to the onchange of the html (cannot attached to vm variable).
+        We use scope because angular doesn't support ng-change on input file
+        https://github.com/angular/angular.js/issues/1375
+        https://stackoverflow.com/questions/17922557/angularjs-how-to-check-for-changes-in-file-input-fields
+         */
+        $scope.selectAttachmentManifest = function (fileInput) {
+            if (fileInput && fileInput.id) {
+                vm.manifest = "";
+                vm.error="";
+                var file = fileInput.files[0];
+                vm.filename=file.name;
+                var fileReader = new FileReader();
+                fileReader.onload = function (load) {
+                    try {
+                        var lines = load.target.result;
+                        vm.manifest = JSON.parse(lines);
+                    } catch (error) {
+                        $log.error(error);
+                        vm.error = "file: " + vm.filename + " is not a valid JSON"
+                    }
+                    $scope.$apply();
+                };
+                fileReader.readAsText(file);
+            }
+        };
+
+        init();
+    }
+})();
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/attach-test-env-manifest/attach-test-env-manifest.css b/vid-app-common/src/main/webapp/app/vid/scripts/modals/attach-test-env-manifest/attach-test-env-manifest.css
new file mode 100644
index 00000000..ff06addb
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/attach-test-env-manifest/attach-test-env-manifest.css
@@ -0,0 +1,109 @@
+.modal-header {
+    border: none!important;
+    padding: 10px 20px 0px 20px!important;
+    font-family: "OpenSans-Light";
+    font-size: 22px;
+    color: #000000;
+}
+
+.modal-header h3 {
+    font-family: "OpenSans-Light";
+    color:  #000000;
+    color:  #000000;
+    font-size: 22px;
+    font-weight: 300;
+    line-height: 16px;
+    padding-bottom: 20px;
+    border-bottom: 3px solid #009fdb;
+
+}
+
+.control-label {
+    font-family: "OpenSans-Light";
+    color: #5a5a5a;
+    font-size: 13px;
+    font-weight: 400;
+}
+
+.modal-content {
+    width: 468px;
+    height: 242px;
+    border-radius: 8px;
+    background-color:  #ffffff;
+}
+
+body .modal-body {
+    padding-bottom: 0;
+    padding-top: 0;
+    padding-left: 20px;
+    padding-right: 20px;
+    width: 468px;
+    height: 91px;
+}
+
+.modal-footer {
+    margin-top: 0;
+    background-color: #fff;
+}
+
+
+.modal-close {
+    margin: -60px 5px 0 0;
+    color: #5a5a5a;
+    font-size: 20px;
+    cursor: pointer;
+}
+
+.inputfile {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+}
+
+.manifestName{
+    font-family: OpenSans-Semibold;
+    font-size: 12px;
+    color: #191919;
+}
+
+.manifestFileName {
+    width: 389px;
+    height: 37px;
+    background: #FFFFFF;
+    border: 1px solid #D2D2D2;
+    border-radius: 2px;
+    display: inline-block;
+    line-height: 37px;
+    font-weight: normal !important;
+    padding-left: 3px;
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.elipsisImg {
+    width: 37px;
+    padding: 10px;
+    background: #FFFFFF;
+    border: 1px solid #D2D2D2;
+    display: inline-block;
+    cursor: pointer;
+    vertical-align: top;
+    border-radius: 2px;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+}
+
+.labelForImage {
+    vertical-align: top;
+}
+
+.errorLabel {
+    color: red;
+}
+
+
+
+
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/attach-test-env-manifest/attach-test-env-manifest.html b/vid-app-common/src/main/webapp/app/vid/scripts/modals/attach-test-env-manifest/attach-test-env-manifest.html
new file mode 100644
index 00000000..12e0ab33
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/attach-test-env-manifest/attach-test-env-manifest.html
@@ -0,0 +1,26 @@
+<link rel="stylesheet" type="text/css" href="app/vid/styles/modal-buttons.css">
+<link rel="stylesheet" type="text/css"
+      href="app/vid/scripts/modals/attach-test-env-manifest/attach-test-env-manifest.css"/>
+<div class="modal-header">
+    <h3 id="modal-title">Attach Manifest</h3>
+    <span ng-click="vm.close()" class="pull-right modal-close" aria-hidden="true">&times;</span>
+</div>
+<form name="Attach Manifest" ng-submit="vm.submit()">
+    <div class="modal-body">
+        <label id="manifestName"  class="manifestName">Manifest Name</label>
+        <input onchange="angular.element(this).scope().selectAttachmentManifest(this)" type="file"
+               id="testEnvManifestFileInput" class="inputfile" accept=".json"/>
+        <label id="manifestFileName"  class="manifestFileName">{{vm.filename}}</label><label for="testEnvManifestFileInput" class="labelForImage" >
+            <span class="icon-browse"></span>
+        </label><label id="errorLabel" class="errorLabel">{{vm.error}}</label>
+
+    </div>
+    <div class="modal-footer">
+        <div class="pull-right">
+            <button type="submit" id="submit" name="submit" class="btn btn-primary"
+                   ng-disabled="vm.isSubmitDisabled()">Attach
+            </button>
+            <button type="button" id="cancel" name="cancel" class="btn btn-white" ng-click="vm.close()">Cancel</button>
+        </div>
+    </div>
+</form>
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/cancel-pending-workflow/cancel-pending-workflow.controller.js b/vid-app-common/src/main/webapp/app/vid/scripts/modals/cancel-pending-workflow/cancel-pending-workflow.controller.js
new file mode 100644
index 00000000..a04e127d
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/cancel-pending-workflow/cancel-pending-workflow.controller.js
@@ -0,0 +1,29 @@
+(function () {
+    'use strict';
+
+    appDS2.controller("cancelPendingWorkflowController", ["$scope", "$uibModalInstance", "changeManagement",
+        "$log", cancelPendingWorkflowController]);
+
+    function cancelPendingWorkflowController($scope, $uibModalInstance, changeManagement, $log) {
+        var vm = this;
+
+        function init() {
+            if (changeManagement) {
+                vm.workflow = changeManagement;
+            } else {
+                console.log("Pending Workflow is undefined: ", changeManagement);
+                vm.workflow = null;
+            }
+        }
+
+        vm.close = function () {
+            $uibModalInstance.close();
+        };
+
+        vm.ok = function () {
+            $uibModalInstance.close(true);
+        };
+
+        init();
+    }
+})();
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/cancel-pending-workflow/cancel-pending-workflow.css b/vid-app-common/src/main/webapp/app/vid/scripts/modals/cancel-pending-workflow/cancel-pending-workflow.css
new file mode 100644
index 00000000..daf86538
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/cancel-pending-workflow/cancel-pending-workflow.css
@@ -0,0 +1,16 @@
+.modal {
+    position: inherit;
+    text-align: left;
+}
+.modal-dialog {
+    position: absolute;
+    right: 0;
+    display: inline;
+    margin-top: -243px;
+}
+.modal-header {
+    border-bottom-color: #009FDB;
+}
+.modal-content {
+    width: 540px;
+}
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/cancel-pending-workflow/cancel-pending-workflow.html b/vid-app-common/src/main/webapp/app/vid/scripts/modals/cancel-pending-workflow/cancel-pending-workflow.html
new file mode 100644
index 00000000..6dca76d2
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/cancel-pending-workflow/cancel-pending-workflow.html
@@ -0,0 +1,14 @@
+<link rel="stylesheet" type="text/css" href="app/vid/styles/modals.css">
+<link rel="stylesheet" type="text/css" href="app/vid/scripts/modals/cancel-pending-workflow/cancel-pending-workflow.css"/>
+<div class="modal-header">
+    <span class="modal-title" id="pending-modal-header">Pending</span>
+    <span id="cancel" ng-click="vm.close()" class="pull-right modal-close" aria-hidden="true">&times;</span>
+</div>
+<div class="modal-body" id="modal-body">
+    Are you sure you want to delete workflow
+    <br/>
+    {{vm.workflow.scheduleRequest.scheduleName}}?
+</div>
+<div class="modal-footer">
+    <button class="btn btn-cancel-workflow" data-tests-id="cancel" ng-click="vm.ok()">Cancel Workflow</button>
+</div>
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/failed-change-management/failed-change-management.html b/vid-app-common/src/main/webapp/app/vid/scripts/modals/failed-change-management/failed-change-management.html
index 0deaf93d..d51620d0 100644
--- a/vid-app-common/src/main/webapp/app/vid/scripts/modals/failed-change-management/failed-change-management.html
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/failed-change-management/failed-change-management.html
@@ -1,4 +1,4 @@
-<link rel="stylesheet" type="text/css" href="app/vid/scripts/modals/new-change-management/new-change-management.css" />
+<link rel="stylesheet" type="text/css" href="app/vid/styles/modal-create-new.css" />
 <link rel="stylesheet" type="text/css" href="app/vid/scripts/modals/failed-change-management/failed-change-management.css" />
 <div class="modal-header">
     <h3 class="modal-title" id="failed-modal-header">Failed</h3>
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/in-progress-modal-management/in-progress-change-management.html b/vid-app-common/src/main/webapp/app/vid/scripts/modals/in-progress-modal-management/in-progress-change-management.html
index 9b40db2a..615c95ce 100644
--- a/vid-app-common/src/main/webapp/app/vid/scripts/modals/in-progress-modal-management/in-progress-change-management.html
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/in-progress-modal-management/in-progress-change-management.html
@@ -1,4 +1,4 @@
-<link rel="stylesheet" type="text/css" href="app/vid/scripts/modals/new-change-management/new-change-management.css" />
+<link rel="stylesheet" type="text/css" href="app/vid/styles/modal-create-new.css" />
 <link rel="stylesheet" type="text/css" href="app/vid/scripts/modals/in-progress-modal-management/in-progress-change-management.css" />
 <div class="modal-header">
     <h3 class="modal-title" id="in-progress-modal-header">In Progress</h3>
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/mso-commit/mso-commit.css b/vid-app-common/src/main/webapp/app/vid/scripts/modals/mso-commit/mso-commit.css
new file mode 100644
index 00000000..6af5a66e
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/mso-commit/mso-commit.css
@@ -0,0 +1,6 @@
+.modal-dialog .popupContents .log {
+    width: 560px;
+}
+.modal-dialog .cancel-btn {
+    width: 120px;
+}
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/mso-commit/mso-commit.html b/vid-app-common/src/main/webapp/app/vid/scripts/modals/mso-commit/mso-commit.html
new file mode 100644
index 00000000..7698981c
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/mso-commit/mso-commit.html
@@ -0,0 +1,48 @@
+<!--
+  ============LICENSE_START=======================================================
+  VID
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ============LICENSE_END=========================================================
+  -->
+<link rel="stylesheet" type="text/css" href="app/vid/scripts/modals/mso-commit/mso-commit.css"/>
+
+<div class="modal-wrapper popupContents" data-tests-id="msoPopup">
+
+    <div class="statusLine">
+        <img src="app/vid/images/spinner.gif"
+             ngx-visible="{{isSpinnerVisible}}"> </img> <label>Status:</label><span
+            class="status" data-tests-id="msoRequestStatus">{{status}}</span>
+    </div>
+
+    <div class="feedback">
+
+        <div progress-bar control="progressBarControl"
+             value="{{percentProgress}}" increases-only="true"
+             ngx-show="{{isProgressVisible}}"></div>
+
+        <div class="error" ng-hide="isProgressVisible">
+            <img src="app/vid/images/error.png"></img>{{error}}
+        </div>
+
+    </div>
+
+    <pre class="log">{{log}}</pre>
+
+    <div class="buttonRow">
+        <button data-tests-id="msoCommitDialogCloseButton" ngx-enabled="{{isCloseEnabled}}" att-button size="small"
+                ng-click="close();">Close</button>
+    </div>
+</div>
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.controller.js b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.controller.js
index 14ca43b5..f0b85a6e 100644
--- a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.controller.js
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.controller.js
@@ -1,11 +1,16 @@
 (function () {
     'use strict';
 
-    appDS2.controller("newChangeManagementModalController", ["$uibModalInstance", "$uibModal", "AaiService", "changeManagementService",
-        "$log", "$scope", "_", newChangeManagementModalController]);
+    appDS2.controller("newChangeManagementModalController", ["$uibModalInstance", "$uibModal",'$q', "AaiService", "changeManagementService", "Upload",
+        "$log", "$scope", "_", "COMPONENT", "VIDCONFIGURATION", newChangeManagementModalController]);
+
+    function newChangeManagementModalController($uibModalInstance, $uibModal,$q, AaiService, changeManagementService, Upload, $log, $scope, _, COMPONENT, VIDCONFIGURATION) {
 
-    function newChangeManagementModalController($uibModalInstance, $uibModal, AaiService, changeManagementService, $log, $scope, _) {
         var vm = this;
+        vm.configUpdatePatternError = "Invalid file type. Please select a file with a CSV extension.";
+        vm.configUpdateContentError = "Invalid file structure.";
+
+        vm.softwareVersionRegex = "[-a-zA-Z0-9\.]+";
 
         var init = function () {
             vm.changeManagement = {};
@@ -46,8 +51,8 @@
                                             availableVersions.push(extractVNFModel(vnf, response.data.service, newVNFName));
                                         }
                                     });
-                                    var versions = _.uniqBy(availableVersions, ['modelInfo.modelVersion']);
-                                    newVNFName.availableVersions = _.uniq(versions, response.data.service, true);
+                                    var versions = _.uniqBy(availableVersions, 'modelInfo.modelVersion');
+                                    newVNFName.availableVersions = _.sortBy(_.uniq(versions, response.data.service, true),"modelInfo.modelVersion");
                                 }).catch(function (error) {
                                 $log.error(error);
                             });
@@ -107,23 +112,41 @@
             $uibModalInstance.close();
         };
 
-        vm.schedule = function () {
-            $uibModalInstance.close(vm.changeManagement);
-
-            var modalInstance = $uibModal.open({
-                templateUrl: 'app/vid/scripts/modals/new-scheduler/new-scheduler.html',
-                controller: 'newSchedulerController',
-                controllerAs: 'vm',
-                resolve: {
-                    changeManagement: function () {
-                        return vm.changeManagement;
-                    }
-                }
+        vm.uploadConfigFile = function (file) {
+            var defer = $q.defer();
+            Upload.upload({
+                url: "change-management/uploadConfigUpdateFile",
+                file: file,
+                transformResponse: [function (data) {
+                    return data;
+                }]
+            })
+            .then(function (configUpdateResponse) {
+                vm.changeManagement.configUpdateFile = configUpdateResponse && JSON.parse(configUpdateResponse.data).payload;
+                defer.resolve(true);
+            })
+            .catch(function (error) {
+                defer.resolve(false);
             });
+            return defer.promise;
+        };
 
-            modalInstance.result.then(function (result) {
-                console.log("This is the result of the new change management modal.", result);
-            })
+
+        vm.openModal = function () {
+            $scope.widgetParameter = ""; // needed by the scheduler?
+
+            // properties needed by the scheduler so it knows whether to show
+            // policy or sniro related features on the scheduler UI or not.
+            vm.changeManagement.policyYN = "Y";
+            vm.changeManagement.sniroYN = "Y";
+
+            var data = {
+                widgetName: 'Portal-Common-Scheduler',
+                widgetData: vm.changeManagement,
+                widgetParameter: $scope.widgetParameter
+            };
+
+            window.parent.postMessage(data, VIDCONFIGURATION.SCHEDULER_PORTAL_URL);
         };
 
         vm.loadSubscribers = function () {
@@ -165,11 +188,11 @@
                             if (vnfsData[i]) {
                                 const nodeType = vnfsData[i]['node-type'];
                                 if (nodeType === "generic-vnf") {
-                                    _.forEach(vnfsData[i]['related-to'], function (node) {
-                                        if (node['node-type'] === 'vserver') {
-                                            vm.vnfs.push(vnfsData[i]);
-                                        }
-                                    })
+                                    if (_.find(vnfsData[i]['related-to'], function (node) {
+                                            return node['node-type'] === 'vserver'
+                                        }) !== undefined) {
+                                        vm.vnfs.push(vnfsData[i]);
+                                    }
                                 } else if (nodeType === "service-instance") {
                                     vm.serviceInstances.push(vnfsData[i]);
                                 }
@@ -197,63 +220,50 @@
             );
         };
 
+        var fromVNFVersions = [];
+
         vm.loadVNFVersions = function () {
-            vm.fromVNFVersions = [];
+            fromVNFVersions = [];
             vm.serviceInstancesToGetVersions = [];
             var versions = [];
             _.forEach(vm.vnfs, function (vnf) {
                 if (vnf.properties['nf-role'] === vm.changeManagement['vnfType']) {
 
-                vm.serviceInstancesToGetVersions.push(vnf);
-
-                versions.push(vnf.properties["model-invariant-id"]);
-
+                    vm.serviceInstancesToGetVersions.push({
+                        "model-invariant-id": vnf.properties["model-invariant-id"],
+                        "model-version-id": vnf.properties["model-version-id"] }
+                    );
 
+                    versions.push(vnf.properties["model-invariant-id"]);
                 }
             });
 
-            AaiService.getVnfVersionsByInvariantId(versions).then(function (response) {
-                if (response.data) {
-                    var key = response.data.model["0"]["model-invariant-id"];
-                    var value = response.data.model["0"]["model-vers"]["model-ver"]["0"]["model-version"];
-                    var element = {"key": key, "value": value};
-                    vm.fromVNFVersions.push(element);
-                }
-                //TODO promise all and call the new api to get the versions.
-                // vm.fromVNFVersions.push(response.data.model["0"]["model-vers"]["model-ver"]["0"]["model-version"]);
-                // if(vm.serviceInstancesToGetVersions.length > 0){
-                //
-                // var promiseArrOfGetVnfs = preparePromiseArrOfGetVersions('a9a77d5a-123e-4ca2-9eb9-0b015d2ee0fb');
-                //
-                // Promise.all(promiseArrOfGetVnfs).then(function (allData) {
-                //     vm.vnfs = _.flattenDeep(_.without(allData, null));
-                //     var filteredVnfs = _.sortedUniqBy(vm.vnfs, function (vnf) {
-                //         return vnf.properties.vnfType;
-                //     });
-                //
-                //     _.forEach(filteredVnfs, function (vnf) {
-                //         vm.vnfTypes.push(vnf.properties.vnfType)
-                //     });
-                //
-                // }).catch(function (error) {
-                //     $log(error);
-                // });
-                // }
-            })
-            // debugger;
+            if (versions.length > 0) {
+                AaiService.getVnfVersionsByInvariantId(versions).then(function (response) {
+                    if (response.data) {
+
+                        $log.debug("getVnfVersionsByInvariantId: response", response);
+
+                        fromVNFVersions = vm.serviceInstancesToGetVersions
+                            .map(function (serviceInstanceToGetVersion) {
+                                const model = _.find(response.data.model, {'model-invariant-id': serviceInstanceToGetVersion['model-invariant-id']});
+                                $log.debug("getVnfVersionsByInvariantId: model for " + serviceInstanceToGetVersion['model-invariant-id'], model);
+
+                                const modelVer = _.find(model["model-vers"]["model-ver"], {'model-version-id': serviceInstanceToGetVersion['model-version-id']});
+                                $log.debug("getVnfVersionsByInvariantId: modelVer for " + serviceInstanceToGetVersion['model-version-id'], modelVer);
+
+                                var modelVersionId = serviceInstanceToGetVersion["model-version-id"];
+                                var modelVersion = modelVer["model-version"];
 
+                                return {"key": modelVersionId, "value": modelVersion};
+                            });
+
+                        vm.fromVNFVersions = _.uniqBy(fromVNFVersions, 'value');
+                    }
+                })
+            }
         };
 
-        // function preparePromiseArrOfGetVersions(serviceInstances) {
-        //     var promiseArr = [];
-        //     for (var i = 0; i < serviceInstances.length; i++) {
-        //         var modelInvariantId = serviceInstances[i].properties["model-invariant-id"];
-        //         promiseArr.push(
-        //             getVnfs(modelInvariantId)
-        //         );
-        //     }
-        //     return promiseArr;
-        // }
 
         function getVnfs(modelInvariantId) {
             return new Promise(function (resolve, reject) {
@@ -281,12 +291,20 @@
             });
         }
 
+        var getVersionNameForId = function(versionId) {
+            var version = _.find(fromVNFVersions, {"key": versionId});
+            return version.value;
+        };
+
         vm.loadVNFNames = function () {
             vm.vnfNames = [];
+            const vnfs = vm.changeManagement.fromVNFVersion ? vm.vnfs : [];
+            _.forEach(vnfs, function (vnf) {
 
-            _.forEach(vm.vnfs, function (vnf) {
+                var selectedVersionNumber = getVersionNameForId(vm.changeManagement.fromVNFVersion);
 
-                if (vnf.properties['nf-role'] === vm.changeManagement.vnfType) {
+                if (vnf.properties['nf-role'] === vm.changeManagement.vnfType &&
+                    selectedVersionNumber === getVersionNameForId(vnf.properties["model-version-id"])) {
                     var vServer = {};
 
                     _.forEach(vnf['related-to'], function (node) {
@@ -295,11 +313,27 @@
                         }
                     });
 
+                    var serviceInstancesIds =
+                        _.filter(vnf['related-to'], {'node-type': 'service-instance'})
+                            .map(function (serviceInstance) { return serviceInstance.id });
+
+                    var serviceInstances = _.filter(vm.serviceInstances, function(serviceInstance) {
+                        return _.includes(serviceInstancesIds, serviceInstance.id);
+                    });
+
+                    // logging only
+                    if (serviceInstancesIds.length === 0) {
+                        $log.error("loadVNFNames: no serviceInstancesIds for vnf", vnf);
+                    } else {
+                        $log.debug("loadVNFNames: serviceInstancesIds", serviceInstancesIds);
+                        $log.debug("loadVNFNames: serviceInstances", serviceInstances);
+                    }
+
                     vm.vnfNames.push({
                         "id": vnf.properties["vnf-id"],
                         "name": vnf.properties["vnf-name"],
                         "invariant-id": vnf.properties["model-invariant-id"],
-                        "service-instance-node": _.filter(vm.serviceInstances, {id: vnf["related-to"][0].id}),
+                        "service-instance-node": serviceInstances,
                         "modelVersionId": vnf.properties["model-version-id"],
                         "properties": vnf.properties,
                         'cloudConfiguration': vServer,
@@ -316,30 +350,32 @@
                 tenantId: ''
             };
 
-            var splitedUrlByDash = _.split(url, '/', 100);
+            /*
+             e.g., in both URLs below -
+               - lcpCloudRegionId == 'rdm5b'
+               - tenantId == '0675e0709bd7444a9e13eba8b40edb3c'
 
-            cloudConfiguration.lcpCloudRegionId = splitedUrlByDash[7];
-            cloudConfiguration.tenantId = splitedUrlByDash[10];
+             "url": "https://aai-conexus-e2e.ecomp.cci.att.com:8443/aai/v10/cloud-infrastructure/cloud-regions/cloud-region/att-aic/rdm5b/tenants/tenant/0675e0709bd7444a9e13eba8b40edb3c/vservers/vserver/932b330d-733e-427d-a519-14eebd261f70"
+             "url": "/aai/v11/cloud-infrastructure/cloud-regions/cloud-region/att-aic/rdm5b/tenants/tenant/0675e0709bd7444a9e13eba8b40edb3c/vservers/vserver/932b330d-733e-427d-a519-14eebd261f70"
+             */
+
+            var cloudRegionMatch = url.match(/\/cloud-regions\/cloud-region\/[^\/]+\/([^\/]+)/);
+            var tenantMatch = url.match(/\/tenants\/tenant\/([^\/]+)/);
+
+            cloudConfiguration.lcpCloudRegionId = cloudRegionMatch[1];
+            cloudConfiguration.tenantId = tenantMatch[1];
 
             return cloudConfiguration;
         };
 
         vm.loadWorkFlows = function () {
-            var vnfs = [];
-            angular.forEach(vm.changeManagement.vnfNames, function (vnfName) {
-                vnfs.push(vnfName.name)
-            });
-
-            //TODO: When we'll have the mappings, use the backend call to get the workflows
-            // changeManagementService.getWorkflows(vnfs)
-            // .then(function(response) {
-            //     vm.workflows = response.data;
-            // })
-            // .catch(function(error) {
-            //     $log.error(error);
-            // });
-
-            vm.workflows = ["Update", "Replace"];
+            changeManagementService.getWorkflows(vm.changeManagement.vnfNames)
+                .then(function(response) {
+                    vm.workflows = response.data.workflows;
+                })
+                .catch(function(error) {
+                    $log.error(error);
+                });
         };
 
         //Must be $scope because we bind to the onchange of the html (cannot attached to vm variable).
@@ -364,6 +400,14 @@
             console.log("Will add version for selected vnf name: " + vnfName.name);
         };
 
+        vm.isConfigUpdate = function () {
+            return vm.changeManagement.workflow === COMPONENT.WORKFLOWS.vnfConfigUpdate;
+        }
+
+        vm.shouldShowVnfInPlaceFields = function () {
+            return vm.changeManagement.workflow === COMPONENT.WORKFLOWS.vnfInPlace;
+        };
+
         init();
     }
 })();
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.css b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.css
deleted file mode 100644
index 9d270987..00000000
--- a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.css
+++ /dev/null
@@ -1,130 +0,0 @@
-.btn-white {
-    font-family: "Open Sans";
-    border-radius: 2px;
-    border: 1px solid #d8d8d8;
-    background-color:  #ffffff;
-    width: 94px;
-    height: 30px;
-    color: #5a5a5a;
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 36px;
-    text-align: center;
-    padding: 4px 12px !important;
-}
-
-.btn-primary {
-    font-family: "Open Sans";
-    border-radius: 2px;
-    border: 1px solid #0091c8;
-    background-color:  #009fdb;
-    width: 94px;
-    height: 30px;
-    color:  #ffffff;
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 36px;
-    text-align: center;
-    padding: 4px 12px !important;
-}
-
-.modal-header {
-    border: none!important;
-    padding: 15px 15px 0px 15px!important;
-}
-
-.modal-header h3 {
-    font-family: "Open Sans";
-    color:  #191919;
-    font-size: 22px;
-    font-weight: 300;
-    line-height: 16px;
-    padding-bottom: 20px;
-    border-bottom: 3px solid #009fdb;
-
-}
-
-.control-label {
-    font-family: "Open Sans";
-    color: #5a5a5a;
-    font-size: 13px;
-    font-weight: 400;
-}
-
-.modal-footer {
-    background-color: #eaeaea;
-}
-
-.modal-dialog {
-    width: 587px;
-    border-radius: 8px;
-}
-
-.modal-content {
-    width: 587px;
-    border-radius: 8px;
-    background-color:  #ffffff;
-}
-
-button.dropdown-toggle {
-    text-align: left;
-}
-
-button[disabled].dropdown-toggle {
-    opacity: 1;
-    cursor: not-allowed;
-    background-color: #eee;
-    border: 1px solid #aaa;
-    color: #a0a0a0;
-}
-
-multiselect[disabled] {
-    cursor: not-allowed;
-}
-
-a.item-unselected:before {
-    font-family: "icomoon"!important;
-    content: "\e90c";
-    color: #4ca90c;
-}
-
-.modal-close {
-    margin: -40px 5px 0 0;
-    color: #5a5a5a;
-    font-size: 20px;
-    cursor: pointer;
-}
-
-.vnf-versions-container .table {
-    position: relative;
-    background-color: #f8f8f8;
-    background-clip: padding-box;
-    border-radius: 6px;
-    outline: 0;
-}
-
-.vnf-versions-name {
-    padding-top: 6px;
-    font-family: "Open Sans";
-    position: absolute;
-}
-
-.vnf-versions-select-as-text {
-    font-family: "Open Sans";
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    border: none;
-    overflow:hidden;
-    background-color: #f8f8f8;
-    height: 31px;
-}
-
-.vnf-files-select {
-    z-index: 999;
-    opacity: 0.0;
-    position: absolute;
-    width: 23%;
-    cursor: pointer;
-    height:100%;
-}
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.html b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.html
index 71c7eb33..4473ee3b 100644
--- a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.html
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.html
@@ -1,51 +1,51 @@
-<link rel="stylesheet" type="text/css" href="app/vid/scripts/modals/new-change-management/new-change-management.css" />
+<link rel="stylesheet" type="text/css" href="app/vid/styles/modal-create-new.css" />
 <div class="modal-header">
     <h3 class="modal-title" id="modal-title">New VNF Change</h3>
     <span ng-click="vm.close()" class="pull-right modal-close" aria-hidden="true">&times;</span>
 </div>
-<form name="newChangeManagement" ng-submit="vm.schedule()">
+<form class="form-create" name="newChangeManagement" ng-submit="vm.openModal();vm.close();" novalidate>
     <div class="modal-body">
         <div class="form-group">
             <label class="control-label">Subscriber</label>
             <select class="form-control" ng-model="vm.changeManagement.subscriberId" ng-change="vm.loadServiceTypes()" name="subscriber" id="subscriber" data-tests-id="subscriberName" required>
                 <option value="" disabled>Select subscriber</option>
-                <option data-tests-id="subscriberNameOption" ng-repeat="item in vm.subscribers" ng-value="item['global-customer-id']">{{item['subscriber-name']}}</option>
+                <option data-tests-id="subscriberNameOption" class="subscriberNameOption" ng-repeat="item in vm.subscribers" ng-value="item['global-customer-id']" ng-disabled="!(item['is-permitted'])">{{item['subscriber-name']}}</option>
             </select>
         </div>
         <div class="form-group">
             <label class="control-label">Service type</label>
-            <select class="form-control" ng-model="vm.changeManagement.serviceType" ng-change="vm.loadVNFTypes()" name="serviceType" id="serviceType" ng-options="item['service-type'] for item in vm.serviceTypes" required data-ng-disabled="newChangeManagement.subscriber.$pristine">
+            <select class="form-control" ng-model="vm.changeManagement.serviceType" ng-change="vm.loadVNFTypes()" name="serviceType" id="serviceType" ng-options="item['service-type'] disable when !(item['is-permitted']) for item in vm.serviceTypes" required data-ng-disabled="newChangeManagement.subscriber.$pristine" data-tests-id="serviceType">
                 <option value="" disabled>Select service type</option>
             </select>
         </div>
         <div class="form-group">
-            <label class="control-label">VNF type</label>
+            <label class="control-label">NF Role</label>
             <select class="form-control" ng-model="vm.changeManagement.vnfType" ng-change="vm.loadVNFVersions()" name="vnfType" id="vnfType" ng-options="item for item in vm.vnfTypes" required data-ng-disabled="newChangeManagement.serviceType.$pristine">
-                <option value="" disabled>Select VNF type</option>
+                <option value="" disabled>NF Role</option>
             </select>
         </div>
         <div class="form-group">
-            <label class="control-label">Source Version</label>
+            <label class="control-label">Source VNF Model Version</label>
             <select class="form-control" ng-model="vm.changeManagement.fromVNFVersion" ng-change="vm.loadVNFNames()" name="fromVNFVersion" id="fromVNFVersion" ng-options="item.key as item.value for item in vm.fromVNFVersions" required data-ng-disabled="newChangeManagement.vnfType.$pristine">
-                <option value="" disabled>Select from VNF version</option>
+                <option value="" disabled>Select VNF Model Version</option>
             </select>
         </div>
         <div class="form-group">
-            <label class="control-label">VNF name</label>
+            <label class="control-label">Available VNF</label>
             <multiselect ng-model="vm.changeManagement.vnfNames" ng-change="vm.loadWorkFlows()" name="vnfName" id="vnfName" options="vm.vnfNames" display-prop="name" id-prop="id" required data-ng-disabled="newChangeManagement.fromVNFVersion.$pristine"></multiselect>
         </div>
         <div ng-show="vm.changeManagement.vnfNames && vm.changeManagement.vnfNames.length > 0" class="form-group vnf-versions-container">
             <table class="table table-bordered">
                 <tbody>
                 <tr ng-repeat="vnfName in vm.changeManagement.vnfNames">
-                    <td class="col-md-6"><span class="vnf-versions-name">{{vnfName.name}}</span></td>
-                    <td class="col-md-3">
-                        <select ng-model="vnfName.version" ng-change="vm.selectVersionForVNFName(vnfName)" class="vnf-versions-select-as-text">
-                            <option value="" disabled="" selected="selected">Select Target Version</option>
+                    <td class="col-md-2"><span class="vnf-versions-name">{{vnfName.name}}</span></td>
+                    <td class="col-md-2">
+                        <select ng-model="vnfName.version" ng-change="vm.selectVersionForVNFName(vnfName)" class="vnf-versions-select-as-text" id="{{vnfName['invariant-id']}}-target-version-select">
+                            <option value="" disabled="" selected="selected">Select Target VNF Model Version</option>
                             <option ng-repeat="version in vnfName.availableVersions">{{version.modelInfo.modelVersion}}</option>
                         </select>
                     </td>
-                    <td class="col-md-3 vnf-versions-name">
+                    <td class="col-md-1 vnf-versions-name">
                         <input ng-model="vnfName.filePath" onchange="angular.element(this).scope().selectFileForVNFName(this)" type="file" id="{{vnfName['invariant-id']}}" class="vnf-files-select" />
                         <span class="vnf-versions-name">Select File<span class="caret"></span></span></td>
                 </tr>
@@ -58,6 +58,32 @@
                 <option value="" disabled>Select workflow</option>
             </select>
         </div>
+        <div class="form-group" ng-if="vm.isConfigUpdate()">
+            <label class="control-label">Attach configuration file</label>
+            <div class="file-wrapper">
+                <input id="config-update-input" class="file-input" type="file" ngf-select ng-model="vm.configUpdateFile" ngf-validate-async-fn="vm.uploadConfigFile($file)" name="configUpdateFile"
+                       accept=".csv" ngf-pattern=".csv" required> </input>
+                <label id="config-update-label" class="file-input-label">{{vm.configUpdateFile&&vm.configUpdateFile.name||"Select File"}} </label>
+                <label for="config-update-input"><span class="icon-browse"></span></label>
+            </div>
+            <label id="errorLabel" class="icon-alert error" ng-if="newChangeManagement.configUpdateFile.$error.pattern">{{vm.configUpdatePatternError}}</label>
+            <label id="errorContentLabel" class="icon-alert error" ng-if="newChangeManagement.configUpdateFile.$error.validateAsyncFn">{{vm.configUpdateContentError}}</label>
+        </div>
+        <div ng-if="vm.shouldShowVnfInPlaceFields()">
+            <div class="form-group">
+                <label class="control-label">operations-timeout</label>
+                <input class="form-control" ng-model="vm.changeManagement.operationTimeout" name="operationTimeout" type="text" id="operations-timeout" pattern="[0-9]+" required>
+            </div>
+            <div class="form-group">
+                <label class="control-label">existing-software-version</label>
+                <input class="form-control" ng-model="vm.changeManagement.existingSoftwareVersion" name="existingSoftwareVersion" type="text" id="existing-software-version" pattern="{{vm.softwareVersionRegex}}" required>
+            </div>
+            <div class="form-group">
+                <label class="control-label">new-software-version</label>
+                <input class="form-control" ng-model="vm.changeManagement.newSoftwareVersion" name="newSoftwareVersion" type="text" id="new-software-version" pattern="{{vm.softwareVersionRegex}}" required>
+            </div>
+
+        </div>
     </div>
     <div class="modal-footer">
         <div class="pull-right">
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-scheduler/new-scheduler.controller.js b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-scheduler/new-scheduler.controller.js
deleted file mode 100644
index c8f44c71..00000000
--- a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-scheduler/new-scheduler.controller.js
+++ /dev/null
@@ -1,455 +0,0 @@
-(function () {
-    'use strict';
-
-    appDS2.controller("newSchedulerController", ["$scope", "$uibModal", "$uibModalInstance", "AaiService", "SchedulerService", "_",
-        "$log", "changeManagement", "$timeout", "$interval", "$filter", "VIDCONFIGURATION", "changeManagementService", newSchedulerController]);
-
-    function newSchedulerController($scope, $uibModal, $uibModalInstance, AaiService, SchedulerService, _, $log, changeManagement, $timeout, $interval, $filter, VIDCONFIGURATION, changeManagementService) {
-        var vm = this;
-        var pollpromise;
-
-        var init = function () {
-            vm.scheduler = {};
-            vm.schedulingInfo = {};
-            var callbackData = extractChangeManagementCallbackDataStr(changeManagement);
-            vm.vnfObject = changeManagement;
-            vm.schedulerObj = {
-                domain: 'ChangeManagement',
-                scheduleId: '',
-                scheduleName: 'VnfUpgrade/DWF',
-                userId: '',
-                domainData: [{
-                    'WorkflowName': vm.scheduler.policy,
-                    'CallbackUrl': 'http://127.0.0.1:8989/scheduler/v1/loopbacktest/vid',
-                    'CallbackData': callbackData
-                }],
-
-                schedulingInfo: {
-                    normalDurationInSeconds: '',
-                    additionalDurationInSeconds: '',
-                    concurrencyLimit: '',
-                    policyId: '',
-                    vnfDetails: [
-                        {
-                            groupId: "",
-                            node: [],
-                            changeWindow: [{
-                                startTime: '',
-                                endTime: ''
-                            }]
-
-                        }
-                    ]
-                },
-
-            }
-            vm.schedulerObj1 = {
-                "domain": "ChangeManagement",
-                "scheduleName": "VnfUpgrade/DWF",
-                "userId": "su7376",
-                "domainData": [
-                    {
-                        "WorkflowName": "HEAT Stack Software Update for vNFs",
-                        "CallbackUrl": "http://127.0.0.1:8989/scheduler/v1/loopbacktest/vid",
-                        "CallbackData": "testing"
-                    }
-                ],
-                "schedulingInfo": {
-                    "normalDurationInSeconds": 60,
-                    "additionalDurationInSeconds": 60,
-                    "concurrencyLimit": 60,
-                    "policyId": "SNIRO_CM_1707.Config_MS_Demo_TimeLimitAndVerticalTopology_zone_localTime.1.xml",
-                    "vnfDetails": [
-                        {
-                            "groupId": "group1",
-                            "node": ["satmo415vbc", "satmo455vbc"],
-                            "changeWindow": [
-                                {
-                                    "startTime": "2017-08-08T16:37:30.521Z",
-                                    "endTime": "2017-08-08T16:37:30.521Z"
-                                }
-                            ]
-                        }
-                    ]
-                }
-            };
-
-
-            vm.format = 'yyyy/MM/dd';
-            vm.todate = new Date();
-            vm.checkboxSelection = 'false';
-            vm.fromDate = '';
-            vm.toDate = '';
-            vm.timeSlots = [];
-
-            vm.changeManagement = {};
-
-            vm.subscribers = [];
-
-            AaiService.getSubscribers(function (response) {
-                vm.subscribers = response;
-            });
-
-            vm.serviceTypes = [];
-            AaiService.getServices(function (response) {
-                vm.serviceTypes = response.data.service;
-            });
-
-            changeManagementService.getWorkflows()
-                .then(function (response) {
-                    vm.workflows = response.data;
-                })
-                .catch(function (error) {
-                    $log.error(error);
-                });
-
-            //TODO: Get the VNF names from backend dynamically
-            vm.vnfNames = [];
-
-            //TODO: Get the VNF types from backend dynamically
-            vm.vnfTypes = [];
-
-            AaiService.getLoggedInUserID(function (response) {
-                vm.userID = response.data;
-            });
-            vm.policys = [];
-
-            var policyName = JSON.stringify({
-                policyName: "SNIRO_1710.*",
-                configAttributes: {
-                    service: "PlacementOptimizationPolicy"
-                }
-            });
-            SchedulerService.getPolicyInfo(policyName, function (response) {
-                vm.policys = response.data.entity;
-            });
-        };
-
-        vm.radioSelections = function (test) {
-            if (vm.checkboxSelection == "true") {
-                vm.fromDate = '';
-                vm.toDate = ''
-            }
-        }
-        vm.close = function () {
-            $uibModalInstance.close();
-        };
-
-
-        function convertToSecs(number) {
-            var totalSecs;
-            if (vm.selectedOption === 'hours') {
-                totalSecs = number * 3600;
-
-            }
-            else if (vm.selectedOption === 'minutes') {
-                totalSecs = number * 60;
-            } else {
-                totalSecs = number;
-            }
-            return totalSecs;
-        }
-
-        vm.submit = function () {
-            vm.schedulingInfo = {
-                scheduleId: vm.schedulerID,
-                approvalDateTime: '2017-08-08T16:37:30.521Z',
-                approvalUserId: "sy6266",
-                approvalStatus: 'Accepted',
-                approvalType: 'Tier 2'
-            };
-
-            var approvalObj = JSON.stringify(vm.schedulingInfo);
-            SchedulerService.getSubmitForapprovedTimeslots(approvalObj, function (response) {
-                if (response.status == 200) {
-                    openConfirmationModal("Successfully Sent for Approval");
-                }
-
-            });
-        };
-
-        vm.reject = function () {
-            vm.schedulingInfo = {
-                scheduleId: vm.schedulerID,
-                approvalDateTime: '2017-08-08T16:37:30.521Z',
-                approvalUserId: "sy6266",
-                approvalStatus: 'Rejected',
-                approvalType: 'Tier 2'
-            }
-
-            var approvalObj = JSON.stringify(vm.schedulingInfo)
-            SchedulerService.getSubmitForapprovedTimeslots(approvalObj, function (response) {
-                if (response.status == 200) {
-                    openConfirmationModal("Successfully sent for Rejection");
-                }
-
-            });
-        };
-
-        vm.schedule = function (myForm) {
-            $scope.$watch('fromDate', validateDates(myForm));
-            $scope.$watch('toDate', validateDates(myForm));
-            if (myForm.$valid) {
-                sendSchedulerReq()
-            }
-        };
-
-
-        function sendSchedulerReq() {
-            var changeWindow = [{
-                startTime: '',
-                endTime: ''
-            }];
-            vm.timeSlots = [];
-            var fromDate = $filter('date')(new Date(vm.fromDate), "yyyy-MM-ddTHH:mmZ", "UTC");
-            var toDate = $filter('date')(new Date(vm.toDate), "yyyy-MM-ddTHH:mmZ", "UTC");
-
-            changeWindow[0].startTime = fromDate;
-            changeWindow[0].endTime = toDate;
-            vm.schedulerObj.userId = vm.userID;
-            vm.schedulerObj.domainData[0].WorkflowName = changeManagement.workflow;
-            vm.schedulerObj.schedulingInfo.normalDurationInSeconds = convertToSecs(vm.scheduler.duration);
-            vm.schedulerObj.schedulingInfo.additionalDurationInSeconds = convertToSecs(vm.scheduler.fallbackDuration);
-            vm.schedulerObj.schedulingInfo.concurrencyLimit = vm.scheduler.concurrency;
-            vm.schedulerObj.schedulingInfo.policyId = vm.scheduler.policy.policyName;
-            vm.schedulerObj.schedulingInfo['vnfDetails'][0].groupId = 'groupId';
-            vm.schedulerObj.schedulingInfo['vnfDetails'][0].node = getVnfData(changeManagement.vnfNames);
-
-            vm.schedulerObj.schedulingInfo['vnfDetails'][0].changeWindow = changeWindow;
-            if (vm.checkboxSelection == "true") {               //When Scheduled now we remove the changeWindow
-                delete vm.schedulerObj.schedulingInfo['vnfDetails'][0].changeWindow;
-            }
-            vm.schedulerObj.schedulingInfo['vnfDetails'][0].changeWindow = changeWindow;
-            delete vm.schedulerObj.schedulingInfo['vnfDetails'][0].changeWindow;
-
-            var requestScheduler = JSON.stringify(vm.schedulerObj);
-            console.log(requestScheduler);
-            SchedulerService.getStatusSchedulerId(requestScheduler, function (response) {
-                vm.schedulerID = response.data.uuid;
-                vm.isSpinnerVisible = true;
-                if (vm.schedulerID) {
-                    var scheduledID = JSON.stringify({scheduleId: vm.schedulerID});
-                    seviceCallToGetTimeSlots();
-                }
-            });
-        }
-
-        function seviceCallToGetTimeSlots() {
-
-            SchedulerService.getTimeSotsForSchedulerId(vm.schedulerID, function (response) {
-                if (vm.checkboxSelection == "false") {
-                    if (response.data.entity.schedule) {
-                        var scheduleColl = JSON.parse(response.data.entity.schedule);
-                        if (scheduleColl.length > 0) {
-                            vm.timeSlots = scheduleColl;
-                            vm.isSpinnerVisible = false;
-                            hasvaluereturnd = false;
-                            $scope.stopPoll();
-                            openConfirmationModal(response.data.entity.scheduleId + " Successfully Returned TimeSlots.");
-                        }
-
-                    }
-                    else {
-                        if (vm.timeSlots.length == 0 && hasthresholdreached == false) {
-                            var polltime = VIDCONFIGURATION.SCHEDULER_POLLING_INTERVAL_MSECS;
-                            pollpromise = poll(polltime, function () {
-                                if (vm.timeSlots.length == 0) {
-                                    hasvaluereturnd = true;
-                                    seviceCallToGetTimeSlots()
-                                }
-                                else {
-                                    hasvaluereturnd = false;
-                                }
-
-                            });
-
-                        } else {
-                            openConfirmationModal("Timeout error.")
-                        }
-                    }
-
-                }
-                else {
-                    if (response.data.entity) {
-                        vm.isSpinnerVisible = false;
-                        openConfirmationModal(response.data.entity.scheduleId + " Successfully Ready for Schedule.")
-                    }
-                }
-
-            });
-
-        }
-
-        function openConfirmationModal(jobInfo) {
-            var modalInstance = $uibModal.open({
-                templateUrl: 'app/vid/scripts/modals/alert-new-scheduler/alert-new-scheduler.html',
-                controller: 'alertNewSchedulerController',
-                controllerAs: 'vm',
-                resolve: {
-                    jobInfo: function () {
-                        return jobInfo;
-                    }
-                }
-            });
-        }
-
-        var hasvaluereturnd = true; // Flag to check
-        var hasthresholdreached = false;
-        var thresholdvalue = VIDCONFIGURATION.SCHEDULER_MAX_POLLS; // interval threshold value
-
-        function poll(interval, callback) {
-            return $interval(function () {
-                if (hasvaluereturnd) {  //check flag before start new call
-                    callback(hasvaluereturnd);
-                }
-
-                thresholdvalue = thresholdvalue - 1;  //Decrease threshold value
-                if (thresholdvalue == 0) {
-                    $scope.stopPoll(); // Stop $interval if it reaches to threshold
-                }
-            }, interval)
-        }
-
-
-// stop interval.
-        $scope.stopPoll = function () {
-            $interval.cancel(pollpromise);
-            thresholdvalue = 0;     //reset all flags.
-            hasvaluereturnd = false;
-            hasthresholdreached = true;
-            vm.isSpinnerVisible = false;
-        }
-
-        function getVnfData(arrColl) {
-            var vnfcolletion = [];
-
-            for (var i = 0; i < arrColl.length; i++) {
-                vnfcolletion.push(arrColl[i].name);
-            }
-
-            return vnfcolletion
-        }
-
-        function validateDates(form) {
-            if (vm.checkboxSelection == "false") {
-
-                if (form.startDate.$error.invalidDate || form.endDate.$error.invalidDate) {
-                    form.startDate.$setValidity("endBeforeStart", true);  //already invalid (per validDate directive)
-                } else {
-                    //depending on whether the user used the date picker or typed it, this will be different (text or date type).
-                    //creating a new date object takes care of that.
-                    var endDate = new Date(vm.toDate);
-                    var startDate = new Date(vm.fromDate);
-                    form.startDate.$setValidity("endBeforeStart", endDate >= startDate);
-                }
-            }
-        }
-
-
-        function extractChangeManagementCallbackDataStr(changeManagement) {
-            var result = {};
-
-            result.requestType = changeManagement.workflow;
-            result.requestDetails = [];
-
-            _.forEach(changeManagement.vnfNames, function (vnf) {
-
-                    var data = {
-                        vnfName: vnf.name,
-                        vnfInstanceId: vnf.id,
-                        modelInfo: {
-                            modelType: 'vnf',
-                            modelInvariantId: vnf.properties['model-invariant-id'],
-                            modelVersionId: vnf.modelVersionId,
-                            modelName: vnf.properties['vnf-name'],
-                            modelVersion: vnf.version,
-                            modelCustomizationName: vnf.properties['model-customization-name'],
-                            modelCustomizationId: vnf.properties['model-customization-id']
-                        },
-                        cloudConfiguration: {
-                            lcpCloudRegionId: vnf.availableVersions[0].cloudConfiguration.lcpCloudRegionId,
-                            tenantId: vnf.availableVersions[0].cloudConfiguration.tenantId
-                        },
-                        requestInfo: {
-                            source: vnf.availableVersions[0].requestInfo.source,
-                            suppressRollback: vnf.availableVersions[0].requestInfo.suppressRollback,
-                            requestorId: vnf.availableVersions[0].requestInfo.requestorId
-                        },
-                        relatedInstanceList: [],
-                        requestParameters: {
-                            usePreload: vnf.availableVersions[0].requestParameters.usePreload
-                        }
-                    };
-
-                    var serviceInstanceId = '';
-                    _.forEach(vnf['service-instance-node'], function (instanceNode) {
-                        if(instanceNode['node-type'] === 'service-instance'){
-                            serviceInstanceId = instanceNode.properties['service-instance-id'];
-                        }
-                    });
-
-
-                    _.forEach(vnf.availableVersions[0].relatedInstanceList, function (related) {
-
-                        var rel = related.relatedInstance;
-
-                        var relatedInstance = {
-                            instanceId: serviceInstanceId,
-                            modelInfo: {
-                                modelType: rel.modelInfo.modelType,
-                                modelInvariantId: rel.modelInfo.modelInvariantId,
-                                modelVersionId: rel.modelInfo.modelVersionId,
-                                modelName: rel.modelInfo.modelName,
-                                modelVersion: rel.modelInfo.modelVersion,
-                                modelCustomizationName: rel.modelInfo.modelCustomizationName,
-                                modelCustomizationId: rel.modelInfo.modelCustomizationId
-                            }
-                        };
-
-                        if (rel.vnfInstanceId)
-                            relatedInstance.instanceId = rel.vnfInstanceId;
-
-                        data.relatedInstanceList.push({relatedInstance: relatedInstance});
-                    });
-
-
-                    result.requestDetails.push(data);
-                }
-            );
-
-
-            // _.forEach(changeManagement.vnfNames, function (vnfName) {
-            //     if (vnfName && vnfName.version) {
-            //         if (vnfName.selectedFile) {
-            //             vnfName.version.requestParameters.userParams = vnfName.selectedFile;
-            //         }
-            //         result.requestDetails.push(vnfName.version)
-            //     }
-            // });
-
-            return JSON.stringify(result);
-        }
-
-        init();
-    };
-
-    appDS2.directive('validDate', function () {
-        return {
-            restrict: 'A',
-            require: 'ngModel',
-            link: function (scope, element, attrs, control) {
-                control.$parsers.push(function (viewValue) {
-                    var newDate = model.$viewValue;
-                    control.$setValidity("invalidDate", true);
-                    if (typeof newDate === "object" || newDate == "") return newDate;  // pass through if we clicked date from popup
-                    if (!newDate.match(/^\d{1,2}\/\d{1,2}\/((\d{2})|(\d{4}))$/))
-                        control.$setValidity("invalidDate", false);
-                    return viewValue;
-                });
-            }
-        };
-    })
-
-
-})();
-
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-scheduler/new-scheduler.css b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-scheduler/new-scheduler.css
deleted file mode 100644
index 8da5c55c..00000000
--- a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-scheduler/new-scheduler.css
+++ /dev/null
@@ -1,145 +0,0 @@
-.btn-white {
-    font-family: OpenSans;
-    border-radius: 2px;
-    border: 1px solid #d8d8d8;
-    background-color:  #ffffff;
-    width: 94px;
-    height: 30px;
-    color: #5a5a5a;
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 36px;
-    text-align: center;
-}
-
-.btn-primary {
-    font-family: OpenSans;
-    border-radius: 2px;
-    border: 1px solid #0091c8;
-    background-color:  #009fdb;
-    width: 94px;
-    height: 30px;
-    color:  #ffffff;
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 36px;
-    text-align: center;
-}
-
-.modal-header {
-    border: none!important;
-    padding: 15px 15px 0px 15px!important;
-}
-
-.modal-header h3 {
-    font-family: OpenSans;
-    color:  #5a5a5a;
-    font-size: 22px;
-    font-weight: 300;
-    line-height: 16px;
-    padding-bottom: 20px;
-    border-bottom: 3px solid #009fdb;
-
-}
-
-.modal-footer {
-    background-color: #eaeaea;
-}
-
-.modal-dialog {
-    width: 587px;
-    border-radius: 8px;
-}
-
-.modal-content {
-    width: 587px;
-    border-radius: 8px;
-    background-color:  #ffffff;
-}
-.label-font{
-	    font-size: 1em;
-}
-.calender-icon{
-	background-image: url(../../../../../app/fusion/external/ebz/images/Calendar.svg); 
-	background-repeat:no-repeat;
-    background-position:98%;
-    border-radius: 6px;
-    border: 1px solid #888;
-    color: #444;
-    font-family: clearview_att_regular;
-    width: 100%;
-    outline: 0;
-    padding: 7px 10px;
-    text-transform: none;
-    z-index: 0;
-    height: 40px;
-    position: relative;
-    
-}
-
-input.calender-icon:focus{
-	background-image: url(../../../../../app/fusion/external/ebz/images/Calendar_blue.svg); 
-	background-repeat:no-repeat;
-}
-
-
-
-.timeslots-content{
-	margin-top: 0px;
-    margin-bottom: 0px;
-    height: 10em;
-}
-.find-block{
-	float:5em;
-}
-.timeslots-block{ 
-/* 	margin-top: 1em; */
-    height: 85px;
- } 
- .policy-combo{
-    background-image: none;
- }
- 
- div[ng-controller=newSchedulerController] .schedulerVisible {
-	visibility: visible;
-}
-div[ng-controller=newSchedulerController] .schedulerHidden {
-	visibility: hidden;
-}
-
-.table {
-    border: 1px solid #eaeaea;
-    box-sizing: border-box;
-    background-color: #ffffff;
-    box-shadow: 0px 2px 7px 0px rgba(34, 31, 31, 0.17);
-    font-family: OpenSans;
-    color: #5a5a5a;
-    font-size: 14px;
-    font-weight: 400;
-}
-.table>thead {
-    background-color: #d2d2d2;
-    font-family: OpenSans;
-    color: #191919;
-    font-size: 13px;
-    font-weight: 600;
-    line-height: 40px;
-}
-
-.table-headline-row {
-    font-family: OpenSans;
-    color: #5a5a5a;
-    font-size: 14px;
-    font-weight: 600;
-    background-color: #eaeaea;
-    box-shadow: 0px 1px 1px 0px rgba(34, 31, 31, 0.19);
-}
-
-.table-bordered{border:1px solid #eaeaea;}
-.table-bordered>tbody>tr>td,
-.table-bordered>tbody>tr>th,
-.table-bordered>tfoot>tr>td,
-.table-bordered>tfoot>tr>th,
-.table-bordered>thead>tr>td,
-.table-bordered>thead>tr>th{border:1px solid #eaeaea;}
-
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-scheduler/new-scheduler.html b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-scheduler/new-scheduler.html
deleted file mode 100644
index 498ff2ec..00000000
--- a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-scheduler/new-scheduler.html
+++ /dev/null
@@ -1,101 +0,0 @@
-<link rel="stylesheet" type="text/css" href="app/vid/scripts/modals/new-scheduler/new-scheduler.css" />
-<div class="modal-header">
-    <h3 class="modal-title" id="modal-title">Scheduler Change</h3>
-</div>
-<form name="newschedulermodalForm" ng-submit="vm.schedule(newschedulermodalForm)">
-    <div class="modal-body">
-   
-	    <div class="form-group" >
-            <label><input type="radio" ng-model="vm.checkboxSelection" ng-change="vm.radioSelections()" value="true">Now</label>
-            <label><input type="radio"  ng-model="vm.checkboxSelection"  ng-change="vm.radioSelections()" value="false">Range</label>
-	     </div>
-<!-- 	   <div class="form-group"> -->
-<!-- 	      <input type="radio"  ng-model="checkboxSelection" value="false"  ><label>Range</label> -->
-<!-- 	     </div> -->
-    
-    	
-        <div class="form-group" >
-            <label class="control-label">From Date</label>
-            <input ng-disabled="(vm.checkboxSelection=='true')? true:false"  valid-date name="startDate" ng-model="vm.fromDate" id="startDate" datetime-picker ng-required="false"  hour="23" minute='59' class="calender-icon"/>
-            
-        </div>
-        <div class="form-group"  >
-            <label class="control-label">To Date</label>
-            <input  ng-disabled="(vm.checkboxSelection=='true')? true:false" valid-date name="endDate" ng-model="vm.toDate" id="endDate" datetime-picker ng-required="false"  hour="23" minute='59' class="calender-icon"  />
-                 <span ng-show="newschedulermodalForm.startDate.$error.endBeforeStart">To date must be on or after From date.</span> 
-			    <span ng-show="newschedulermodalForm.startDate.$error.invalidDate || newschedulermodalForm.endDate.$error.invalidDate">Check dates for validity</span>
-			    <span ng-show="newschedulermodalForm.startDate.$error.required || newschedulermodalForm.endDate.$error.required">A required date is missing</span>
-             </div>  
-             
-        <div class="form-group"  >
-       <label>Please Select Option For Duration and FallBack</label>
-       
-          <select class="form-control" name="selecttime" data-tests-id="timeUnitSelect" ng-model="vm.selectedOption" ng-change="vm.updateMinMax()">
-            <option value="hours">HOURS</option>
-            <option value="minutes">MINUTES</option>
-            <option value="seconds">SECONDS</option>
-          </select>
-        </div>
-        <div class="row">
-        <div class="form-group col-md-6 col-xs-12">
-         <label class="control-label">Duration</label>
-          <input  type="number" style="font-size: 1em;" data-tests-id="durationInput" name="durationinput" ng-model="vm.scheduler.duration" ng-required="true">
-        
-        </div>
-        <div class="form-group col-md-6 col-xs-12"  >
-         <label class="control-label">Fallback Duration</label>
-          <input  type="number" style="font-size: 1em;" name="fallbackinput" data-tests-id="fallbackInput" ng-model="vm.scheduler.fallbackDuration"  ng-required="true">
-         
-         
-        </div>
-          </div>
-         <div class="form-group">
-         <label class="control-label">Concurrency Limit</label>
-          <input  type="number" style="font-size: 1em;" name="input" data-tests-id="concurrencyLimitInput" ng-model="vm.scheduler.concurrency" min="1" max="30" ng-required="true">
-        </div>
-          <div class="form-group">
-            <label class="control-label">Policy</label>
-            <select  class="policy-combo" ng-model="vm.scheduler.policy" id="policy"  ng-options="item.policyName for item in vm.policys">
-                <option value="">Select Policy</option>
-            </select>
-        </div>
-		 <div class="form-group">
-            <button type="submit" id="find" name="Find" ng-disabled="vm.isClicked" class="btn btn-primary find-block">Find</button>
-             <span class="spinner" ng-show="vm.isSpinnerVisible">
-				<img src="app/vid/images/spinner.gif">
-					</img>
-				
-			</span>
-    
-         </div>
-         
-           <div class="form-group" ng-show="(vm.checkboxSelection=='false')? true:false">
-<!--             <label class="control-label">Time Slots</label> -->
-<!--             <textarea rows="10" cols="50" class="timeslots-block" ></textarea> -->
-            <table class="table table-bordered">
-			   <thead class="thead-default">
-			      <tr>
-			         <th>Start Time</th>
-			         <th>End Time</th>
-			      </tr>
-			   </thead>
-			   <tbody>
-			   
-			      <tr class="table-headline-row" ng-repeat="timeslot in vm.timeSlots">
-			         <td>{{timeslot.startTime}}</td>
-			         <td>{{timeslot.finishTime}}</td>
-			      </tr>
-			   </tbody>
-         </table>
-        </div>
-			
-    </div>
-    <div class="modal-footer">
-        <div class="pull-right">
-            <button type="button" id="btn" name="submit" class="btn btn-primary" ng-click="vm.submit()">Schedule</button>
-            <button type="button" id="btn" name="submit" class="btn btn-primary" ng-click="vm.reject()">Reject</button>
-            <button type="button" id="cancel" name="cancel" class="btn btn-white" ng-click="vm.close()">Cancel</button>
-        </div>
-    </div>
-</form>
-
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-test-environment/new-test-environment.controller.js b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-test-environment/new-test-environment.controller.js
new file mode 100644
index 00000000..daec9b2e
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-test-environment/new-test-environment.controller.js
@@ -0,0 +1,65 @@
+(function () {
+    'use strict';
+
+    appDS2.controller("newTestEnvironmentModalController", ["$uibModalInstance", "$uibModal", "AaiService", "TestEnvironmentsService","OwningEntityService",
+        "$log", "$scope", "_", "COMPONENT","$rootScope", newTestEnvironmentsModalController]);
+
+    function newTestEnvironmentsModalController($uibModalInstance, $uibModal, AaiService, TestEnvironmentsService,OwningEntityService, $log, $scope, _, COMPONENT, $rootScope) {
+        var vm = this;
+        vm.newEnvironment = {};
+
+        var init = function () {
+            vm.newEnvironment.operationalEnvironmentType = "VNF";
+            loadCategoryParameters();
+            loadEcompEnvironmentsList();
+        };
+
+        var loadEcompEnvironmentsList = function () {
+            TestEnvironmentsService.loadAAIestEnvironments("ECOMP")
+            .then(function(response) {
+                vm.environments = response.operationalEnvironment;
+            })
+            .catch(function (error) {
+                vm.aaiConnectError = error.message;
+                $log.error(error);
+            });
+        };
+
+        var loadCategoryParameters = function () {
+            OwningEntityService.getOwningEntityProperties(function(response){
+               vm.environmentsTypesList = response["operational-environment-type"].map(function (x){
+                    return x.name;});
+               vm.workloadContextList = response["workload-context"].map(function (x){
+                   return x.name;});
+            },COMPONENT.TENANT_ISOLATION_FAMILY);
+        }
+
+
+        vm.setEcompEnvironment = function (selectedIndex) {
+            var ecompEnvironment = vm.environments[selectedIndex];
+            vm.newEnvironment.ecompInstanceId = ecompEnvironment.operationalEnvironmentId;
+            vm.newEnvironment.ecompInstanceName = ecompEnvironment.operationalEnvironmentName;
+            vm.newEnvironment.tenantContext = ecompEnvironment.tenantContext;
+        };
+
+        vm.close = function () {
+            $uibModalInstance.close();
+        };
+
+        vm.createEnvironment = function () {
+            if($scope.newTestEnvironment.$valid) {
+                vm.newEnvironment.workloadContext = vm.newEnvironment.operationalEnvironmentType + '_' + vm.newEnvironment.workloadContext;
+                var requestDetails = vm.newEnvironment;
+                $rootScope.$broadcast(COMPONENT.MSO_CREATE_ENVIRONMENT, {
+                    url : COMPONENT.OPERATIONAL_ENVIRONMENT_CREATE,
+                    requestDetails : requestDetails
+                });
+                vm.close();
+            }
+        };
+
+
+
+        init();
+    }
+})();
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-test-environment/new-test-environment.html b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-test-environment/new-test-environment.html
new file mode 100644
index 00000000..cd14a76c
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-test-environment/new-test-environment.html
@@ -0,0 +1,50 @@
+<link rel="stylesheet" type="text/css" href="app/vid/styles/modal-create-new.css" />
+<div class="modal-header">
+    <h3 class="modal-title" id="modal-title">New Test Environment</h3>
+    <span ng-click="vm.close()" class="pull-right modal-close" aria-hidden="true">&times;</span>
+</div>
+<form class="form-create" data-tests-id="test-new-environment-form" name="newTestEnvironment" ng-submit="vm.createEnvironment()">
+    <div class="modal-body">
+        <div class="form-group">
+            <label class="control-label" for="environmentName">Environment Name</label>
+            <input id="environmentName" class="form-control" ng-model="vm.newEnvironment.instanceName" name="instanceName" data-tests-id="environment-name" placeholder="Enter environment name" required>
+        </div>
+        <div class="form-group">
+            <label class="control-label" for="ecompInstanceId">ECOMP Environment ID</label>
+            <select class="form-control" ng-class="{'grayedOut': !selectedIndex, 'connect-error': vm.aaiConnectError}" ng-model="selectedIndex" name="ecompInstanceId" id="ecompInstanceId" data-tests-id="ecomp-instance-id" required ng-change="vm.setEcompEnvironment(selectedIndex)">
+                <option value="" disabled selected hidden>Select environment ID</option>
+                <option data-tests-id="environment-id-option" class="environmentIdOption" ng-repeat="item in vm.environments" ng-value="$index">{{item.operationalEnvironmentId}}</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label class="control-label" for="ecompInstanceName">ECOMP Environment Name</label>
+            <input id="ecompInstanceName" class="form-control" ng-model="vm.newEnvironment.ecompInstanceName" name="ecompInstanceName" data-tests-id="ecomp-instance-name" required disabled>
+        </div>
+        <div class="form-group">
+            <label class="control-label" for="tenantContext">Select VSP</label>
+            <input id="tenantContext" class="form-control" ng-model="vm.newEnvironment.tenantContext" name="tenantContext" data-tests-id="tenant-context" required disabled>
+        </div>
+        <div class="form-group">
+            <label class="control-label" for="operationalEnvironmentType">Environment Type</label>
+            <select class="form-control" ng-class="{'grayedOut': !vm.newEnvironment.operationalEnvironmentType}"  ng-model="vm.newEnvironment.operationalEnvironmentType" name="operationalEnvironmentType" id="operationalEnvironmentType" data-tests-id="operational-environment-type" required>
+                <option value="" disabled selected hidden>Enter environment type</option>
+                <option data-tests-id="environment-type-option" class="environmentTypeOption" ng-repeat="item in vm.environmentsTypesList" ng-value="item">{{item}}</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label class="control-label" for="workloadContext">Workload Context</label>
+            <select class="form-control" ng-class="{'grayedOut': !vm.newEnvironment.workloadContext}" ng-model="vm.newEnvironment.workloadContext" name="workloadContext" id="workloadContext" data-tests-id="workload-context" required>
+                <option value="" disabled selected hidden>Select workload context</option>
+                <option data-tests-id="workload-context-option" class="workloadContextOption" ng-repeat="item in vm.workloadContextList" ng-value="item">{{vm.newEnvironment.operationalEnvironmentType + '_' + item}}</option>
+            </select>
+        </div>
+        <div data-tests-id="test-new-environment-error" class="connect-error" ng-if="vm.aaiConnectError">{{vm.aaiConnectError}}</div>
+    </div>
+    <div class="modal-footer">
+        <div class="pull-right">
+            <button data-tests-id="submit-button" type="submit" id="submit" name="submit" class="btn btn-primary" data-ng-disabled="newTestEnvironment.$invalid">Create</button>
+            <button data-tests-id="cancel-button" type="button" id="cancel" name="cancel" class="btn btn-white" ng-click="vm.close()">Cancel</button>
+        </div>
+    </div>
+</form>
+
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/pending-change-management/pending-change-management.html b/vid-app-common/src/main/webapp/app/vid/scripts/modals/pending-change-management/pending-change-management.html
index 911e86c2..59c30c54 100644
--- a/vid-app-common/src/main/webapp/app/vid/scripts/modals/pending-change-management/pending-change-management.html
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/pending-change-management/pending-change-management.html
@@ -1,4 +1,4 @@
-<link rel="stylesheet" type="text/css" href="app/vid/scripts/modals/new-change-management/new-change-management.css" />
+<link rel="stylesheet" type="text/css" href="app/vid/styles/modal-create-new.css" />
 <link rel="stylesheet" type="text/css" href="app/vid/scripts/modals/pending-change-management/pending-change-management.css" />
 <div class="modal-header">
     <h3 class="modal-title" id="pending-modal-header">Pending</h3>
@@ -8,5 +8,5 @@
     <span id="pending-modal-content">{{vm.content}}</span>
 </div>
 <div class="modal-footer">
-    <div ng-include="'app/vid/scripts/modals/change-management-manual-tasks-controller/change-management-manual-tasks.html'"></div>
+    <!--<div ng-include="'app/vid/scripts/modals/change-management-manual-tasks-controller/change-management-manual-tasks.html'"></div>-->
 </div>
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/service-metadata/service-metadata.css b/vid-app-common/src/main/webapp/app/vid/scripts/modals/service-metadata/service-metadata.css
new file mode 100644
index 00000000..2c7f3a10
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/service-metadata/service-metadata.css
@@ -0,0 +1,37 @@
+.modal-dialog * {
+    font-family: OpenSans-Regular, sans-serif;
+}
+.modal-dialog {
+    width: 540px;
+}
+.modal-dialog service-metadata{
+    background: white;
+}
+.modal-dialog .modal-footer {
+    background: #F8F8F8;
+    border-radius: 0 0 8px 8px;
+}
+.modal-dialog .cancel-btn {
+    width: 120px;
+}
+.modal-dialog .title {
+    font-size: 22px;
+    color: #000000;
+}
+.modal-dialog .top {
+    margin: 15px 20px;
+    border-bottom: 3px solid #009FDB;
+    padding-bottom: 15px;
+}
+.modal-dialog .modal-x {
+    float: right;
+    margin-top: 10px;
+    height: 15px;
+    cursor:pointer;
+}
+.modal-dialog service-metadata label {
+    margin-bottom: 3px;
+}
+.modal-dialog service-metadata .field {
+    margin-top: 11px;
+}
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/modals/service-metadata/service-metadata.html b/vid-app-common/src/main/webapp/app/vid/scripts/modals/service-metadata/service-metadata.html
new file mode 100644
index 00000000..47ed3e42
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/modals/service-metadata/service-metadata.html
@@ -0,0 +1,12 @@
+<link rel="stylesheet" type="text/css" href="app/vid/scripts/modals/service-metadata/service-metadata.css"/>
+<div class="top">
+    <span class="title">{{selectedMetadata[0].value}}</span>
+    <span class="top-btn sprite modal-x" data-ng-click="cancel()"></span>
+</div>
+
+<div class="meatadata-modal-body" id="modal-body">
+    <service-metadata service-metadata-fields="selectedMetadata"></service-metadata>
+</div>
+<div class="modal-footer">
+    <button class="cancel-btn grey" data-tests-id="cancel" data-ng-click="cancel()">Close</button>
+</div>
\ No newline at end of file