Initial OpenECOMP Portal commit

Change-Id: I804b80e0830c092e307da1599bd9fbb5c3e2da77
Signed-off-by: talasila <talasila@research.att.com>

8 files changed, 843 insertions, 0 deletions

diff --git a/ecomp-portal-FE/client/app/views/applications/application-details-dialog/application-details.controller.js b/ecomp-portal-FE/client/app/views/applications/application-details-dialog/application-details.controller.js
new file mode 100644
index 00000000..8c6ffe48
--- /dev/null
+++ b/ecomp-portal-FE/client/app/views/applications/application-details-dialog/application-details.controller.js
@@ -0,0 +1,244 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+'use strict';
+(function () {
+    class AppDetailsModalCtrl {
+        constructor($scope, $log, applicationsService, errorMessageByCode,
+                    ECOMP_URL_REGEX,userProfileService, $cookies, confirmBoxService) {
+            let emptyImg = null;
+            this.emptyImgForPreview = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+
+            let newAppModel = {
+                'id': null,
+                'name': null,
+                'imageUrl': null,
+                'description': null,
+                'notes': null,
+                'url': null,
+                'alternateUrl': null,
+                'restUrl': null,
+                'isOpen': false,
+                'username': null,
+                'appPassword': null,
+                'thumbnail': emptyImg,
+                'isEnabled': true,
+                'restrictedApp': false
+            };
+
+            let init = () => {
+                $log.info('AppDetailsModalCtrl::init');
+                this.isSaving = false;
+                if($scope.ngDialogData && $scope.ngDialogData.app){
+                    $log.debug('AppDetailsModalCtrl:init:: Edit app mode for', $scope.ngDialogData.app);
+                    this.isEditMode = true;
+                    this.app = _.clone($scope.ngDialogData.app);
+                }else{
+                    $log.debug('AppDetailsModalCtrl:init:: New app mode');
+                    this.isEditMode = false;
+                    this.app = _.clone(newAppModel);
+                }
+                this.originalImage = null
+            };
+
+            this.ECOMP_URL_REGEX = ECOMP_URL_REGEX;
+
+            this.imageApi = {};
+            this.removeImage = () => {
+                $log.debug('AppDetailsModalCtrl:removeImage:: entering removeImage');
+
+                confirmBoxService.confirm("Are you sure you want to remove the image?").then(isConfirmed => {
+                    if(isConfirmed){
+                        this.imageApi.clearFile();
+                        this.app.thumbnail = emptyImg;
+                        this.originalImage = null;
+                        this.app.imageUrl = null;
+                    }
+                }).catch(err => {
+                    $log.error('AppDetailsModalCtrl:removeImage error:: ',err);
+                });
+            };
+
+            this.conflictMessages = {};
+            this.scrollApi = {};
+            let handleConflictErrors = err => {
+                if(!err.data){
+                    return;
+                }
+                if(!err.data.length){
+                    err.data = [err.data]
+                }
+                _.forEach(err.data, item => {
+                    _.forEach(item.fields, field => {
+                        this.conflictMessages[field.name] = errorMessageByCode[item.errorCode];
+                        $scope.appForm[field.name].$setValidity('conflict', false);
+                        watchOnce[field.name]();
+                    });
+                });
+                this.scrollApi.scrollTop();
+            };
+
+            let resetConflict = fieldName => {
+                delete this.conflictMessages[fieldName];
+                if($scope.appForm[fieldName]){
+                    $scope.appForm[fieldName].$setValidity('conflict', true);
+                }
+            };
+
+
+            let emptyCookies = () => {
+                $log.debug('AppDetailsModalCtrl:emptyCookies:: entering emptyCookies');
+                userProfileService.getUserProfile()
+                    .then(profile=> {
+                        $scope.userId = profile.orgUserId;
+                        $log.debug('AppDetailsModalCtrl:emptyCookies for the following userId: ' + profile.orgUserId);
+                        if ($cookies.getObject($scope.userId + '_apps') != undefined && $cookies.getObject($scope.userId + '_apps') != null) {
+                            $cookies.remove($scope.userId + '_apps');
+                            $log.debug('AppDetailsModalCtrl:emptyCookies removed: ' + $scope.userId + '_apps');
+                        }
+                        if ($cookies.getObject($scope.userId + '_widget') != undefined && $cookies.getObject($scope.userId + '_widget') != null) {
+                            $cookies.remove($scope.userId + '_widget');
+                            $log.debug('AppDetailsModalCtrl:emptyCookies removed: ' + $scope.userId + '_widget');
+                        }
+                    }).catch(err => {
+                        $log.error('AppDetailsModalCtrl:emptyCookies error:: '+ JSON.stringify(err));
+                    });
+            };
+
+
+            let watchOnce = {
+                name: () => {
+                    let unregisterName = $scope.$watch('appDetails.app.name', (newVal, oldVal) => {
+                        if(newVal.toLowerCase() !== oldVal.toLowerCase()){
+                            resetConflict('name');
+                            unregisterName();
+                        }
+                    });
+                },
+                url: () => {
+                    let unregisterUrl = $scope.$watch('appDetails.app.url', (newVal, oldVal) => {
+                        if(newVal.toLowerCase() !== oldVal.toLowerCase()) {
+                            resetConflict('url');
+                            unregisterUrl();
+                        }
+                    });
+                }
+            };
+
+            this.saveChanges = () => {
+                if($scope.appForm.$invalid){
+                    return;
+                }
+                this.isSaving = true;
+
+                if (this.app.restrictedApp) {
+                    this.app.restUrl = null;
+                    this.app.isOpen = true;
+                    this.app.username = null;
+                    this.app.appPassword = null;
+                    this.app.uebTopicName = null;
+                    this.app.uebKey = null;
+                    this.app.uebSecret = null;
+                }
+                if(this.isEditMode){
+                    applicationsService.updateOnboardingApp(this.app)
+                        .then(() => {
+                            $log.debug('AppDetailsModalCtrl:updateOnboardingApp:: App update succeeded!');
+                            $scope.closeThisDialog(true);
+                            emptyCookies();
+                        }).catch(err => {
+                            if(err.status === 409){
+                                handleConflictErrors(err);
+                            }
+                            if(err.status === 500){
+                                confirmBoxService.showInformation('There was a problem updating the application changes. ' +
+                                    'Please try again later.').then(isConfirmed => {});
+                            }
+                            if(err.status === 403){
+                                confirmBoxService.showInformation('There was a problem updating the application changes. ' +
+                                    'Please try again. If the problem persists, then try again later.').then(isConfirmed => {});
+                            }
+                            $log.error('applicationsService:updateOnboardingApp error status:: '+ err.status);
+                            $log.error('applicationsService:updateOnboardingApp error:: '+ JSON.stringify(err));
+                        }).finally(()=>{
+                            this.isSaving = false;
+                            var objOffsetVersion = objAgent.indexOf("MSIE");
+                            if (objOffsetVersion != -1) {
+                                $log.debug('AppDetailsModalCtrl:updateOnboardingApp:: Browser is IE, forcing Refresh');
+                                $window.location.reload();
+                            }
+                        });
+                }else{
+                    applicationsService.addOnboardingApp(this.app)
+                        .then(() => {
+                            $log.debug('App creation succeeded!');
+                            $scope.closeThisDialog(true);
+                            emptyCookies();
+                        }).catch(err => {
+                            if(err.status === 409){
+                                handleConflictErrors(err);
+                            }
+                            if(err.status === 500){
+                                confirmBoxService.showInformation('There was a problem adding the application information. ' +
+                                    'Please try again later.').then(isConfirmed => {});
+                            }
+                            $log.error('applicationsService:addOnboardingApp error status:: '+ err.status);
+                            $log.error('applicationsService:addOnboardingApp error:: '+ JSON.stringify(err));
+                        }).finally(()=>{
+                            this.isSaving = false;
+                            var objOffsetVersion = objAgent.indexOf("MSIE");
+                            if (objOffsetVersion != -1) {
+                                $log.debug('applicationsService:addOnboardingApp:: Browser is IE, forcing Refresh');
+                                $window.location.reload();
+                            }
+                        });
+                }
+            };
+
+
+            init();
+
+            $scope.$watch('appDetails.originalImage', (newVal, oldVal) => {
+              if((!newVal || !newVal.resized) && !this.app.imageUrl){
+                  if (!newVal) {
+                      $log.debug('applicationsService:$scope.$watch:: originalImage: newVal is null');
+                  } else {
+                      $log.debug('applicationsService:$scope.$watch:: originalImage: newVal is not resized and no imageUrl');
+                  }
+                  this.app.imageUrl = null;
+                  this.app.thumbnail = emptyImg;
+                  return;
+              }
+
+                if(!(_.isEqual(newVal, oldVal))){
+                    $log.debug('applicationsService:$scope.$watch:: thumbnail updated!');
+                    this.app.imageUrl = null;
+                    this.app.thumbnail = newVal.resized.dataURL;
+                }
+            });
+
+            $scope.$on('$stateChangeStart', e => {
+                e.preventDefault();
+            });
+        }
+    }
+    AppDetailsModalCtrl.$inject = ['$scope', '$log', 'applicationsService', 'errorMessageByCode',
+        'ECOMP_URL_REGEX','userProfileService','$cookies', 'confirmBoxService'];
+    angular.module('ecompApp').controller('AppDetailsModalCtrl', AppDetailsModalCtrl);
+})();
diff --git a/ecomp-portal-FE/client/app/views/applications/application-details-dialog/application-details.controller.spec.js b/ecomp-portal-FE/client/app/views/applications/application-details-dialog/application-details.controller.spec.js
new file mode 100644
index 00000000..34042c14
--- /dev/null
+++ b/ecomp-portal-FE/client/app/views/applications/application-details-dialog/application-details.controller.spec.js
@@ -0,0 +1,19 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
diff --git a/ecomp-portal-FE/client/app/views/applications/application-details-dialog/application-details.modal.html b/ecomp-portal-FE/client/app/views/applications/application-details-dialog/application-details.modal.html
new file mode 100644
index 00000000..57f4e61d
--- /dev/null
+++ b/ecomp-portal-FE/client/app/views/applications/application-details-dialog/application-details.modal.html
@@ -0,0 +1,183 @@
+<!--
+  ================================================================================
+  eCOMP Portal
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="application-details-modal">
+    <div class="title">Application Details</div>
+    <div class="app-properties-main" scroll-top="appDetails.scrollApi">
+        <form name="appForm" novalidate autocomplete="off">
+            <script type="text/javascript">
+                document.getElementById("appForm").reset();
+            </script>
+            <div class="left-container">
+                <div class="property">
+                    <input id="checkbox-app-is-restricted" type="checkbox" class="checkbox-field" ng-disabled="appDetails.isEditMode" ng-model="appDetails.app.restrictedApp" ng-checked="appDetails.app.restrictedApp"/>
+                    <div class="property-label checkbox-label">Hyperlink only application</div>
+                </div>
+                <div class="property required">
+                    <div class="property-label">Application Name</div>
+                    <input id="input-app-name" class="input-field" type="text"
+                           ng-model="appDetails.app.name"
+                           maxlength="100"
+                           name="name"
+                           ng-pattern="/^[a-zA-Z0-9_\-\s\&]*$/"
+                           required/>
+                    <div id="error-container-conflict" class="error-container" ng-show="appDetails.conflictMessages.name" id="conflictMessages-name">
+                        <small id="app-name-error-conflict" class="err-message" ng-bind="appDetails.conflictMessages.name"></small>
+                    </div>
+                    <div id="error-container-edit" class="error-container" ng-show="appForm.name.$dirty || appDetails.isEditMode">
+                        <div ng-messages="appForm.name.$error" class="error-container">
+                            <small id="app-name-error-required" class="err-message" ng-message="required">Application name is required</small>
+                            <small id="app-name-error-alpha-num" class="err-message" ng-message="pattern">Application name must be alphanumeric</small>
+                        </div>
+                    </div>
+                </div>
+                <div class="property required">
+                    <div id="url-property-label" class="property-label">URL</div>
+                    <input class="input-field" id="input-app-url"
+                           ng-model="appDetails.app.url"
+                           maxlength="256"
+                           name="url"
+                           type="url" placeholder="https://"
+                           ng-pattern="appDetails.ECOMP_URL_REGEX"
+                           required />
+                    <div class="error-container" ng-show="appDetails.conflictMessages.url" id="div-app-name-err-url">
+                        <small class="err-message" ng-bind="appDetails.conflictMessages.url"></small>
+                    </div>
+                    <div class="error-container" ng-show="appForm.url.$dirty || appDetails.isEditMode">
+                        <div ng-messages="appForm.url.$error" class="error-container">
+                            <small id="error-app-url-req" class="err-message" ng-message="required">Application URL is required</small>
+                            <small id="error-app-url-invalid" class="err-message" ng-show="appForm.url.$error.url">Application URL must be a valid URL</small>
+                        </div>
+                    </div>
+                </div>
+               
+                <div class="property" ng-show="!appDetails.app.restrictedApp">
+                    <div class="property-label">Rest API URL</div>
+                    <input class="input-field" id="input-app-rest-url"
+                           ng-model="appDetails.app.restUrl"
+                           name="restUrl"
+                           type="url" placeholder="https://"
+                           ng-pattern="appDetails.ECOMP_URL_REGEX"
+                           maxlength="256"/>
+                    <div class="error-container" ng-show="appForm.restUrl.$dirty || appDetails.isEditMode">
+                        <div ng-messages="appForm.restUrl.$error" class="error-container">
+                            <small class="err-message" ng-show="appForm.restUrl.$error.url">Application REST URL must be a valid URL</small>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="property required" ng-show="!appDetails.app.restrictedApp">
+                    <div id="username-property-label"  class="property-label">Username</div>
+                    <input class="input-field" type="text"
+                           ng-model="appDetails.app.username"
+                           name="username"
+                           maxlength="256"
+                           ng-required="!appDetails.app.restrictedApp"/>
+                    <div class="error-container" ng-show="appForm.username.$dirty || appDetails.isEditMode">
+                        <div ng-messages="appForm.username.$error" class="error-container">
+                            <small  id="error-appusername-reqd" class="err-message" ng-message="required">Rest Api Username is required</small>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="property required" ng-show="!appDetails.app.restrictedApp">
+                    <div id="pwd-property-label"  class="property-label">Password</div>
+                    <input class="input-field" type="password"  id="input-mylogins-password"
+                           ng-model="appDetails.app.appPassword" autocomplete="new-password"
+                           name="appPassword"
+                           maxlength="256"
+                           ng-required="!appDetails.app.restrictedApp"/>
+                    <div class="error-container" ng-show="appForm.appPassword.$dirty || appDetails.isEditMode">
+                        <div ng-messages="appForm.appPassword.$error" class="error-container">
+                            <small id="error-mylogins-password-reqd" class="err-message" ng-message="required">Rest Api Password is required</small>
+                        </div>
+                    </div>
+                </div>
+
+
+                <div class="property" ng-show="!appDetails.app.restrictedApp">
+                    <div class="property-label">Communication Inbox</div>
+                    <input class="input-field" type="text" id="input-UEB-topicname"
+                           ng-model="appDetails.app.uebTopicName"
+                           name="uebTopicName" readonly="readonly"/>
+                </div>
+                <div class="property" ng-show="!appDetails.app.restrictedApp">
+                    <div class="property-label">Communication Key</div>
+                    <input class="input-field" type="text" id="input-UEB-communication-key"
+                           ng-model="appDetails.app.uebKey"
+                           name="uebKey" readonly="readonly" />
+                </div>
+                <div class="property" ng-show="!appDetails.app.restrictedApp">
+                    <div class="property-label">Communication Secret</div>
+                    <input class="input-field" type="text" id="input-UEB-communication-secret"
+                           ng-model="appDetails.app.uebSecret"
+                           name="uebSecret" readonly="readonly" />
+                </div>
+
+            </div>
+            <div class="right-container">
+                <div class="property">
+                    <div class="property-label">Upload Image</div>
+                    <input type="file" id="input-app-image-upload"
+                           class="input-file-field"
+                           accept="image/*"
+                           ng-model="appDetails.originalImage"
+                           name="appImage"
+                           image-upload="appDetails.originalImage"
+                           image-upload-resize-max-height="300"
+                           image-upload-resize-max-width="360"
+                           image-upload-resize-quality="0.7"
+                           image-upload-api="appDetails.imageApi"/>
+
+                    <div class="error-container" ng-show="appForm.appImage.$dirty">
+                        <div ng-messages="appForm.appImage.$error" class="error-container">
+                            <small id="error-app-invalid-image" class="err-message" ng-message="mimeType">Uploaded file must be an image</small>
+                            <small id="error-app-invalid-image-size" class="err-message" ng-message="imageSize">Image file must be smaller than 1MB</small>
+                        </div>
+                    </div>
+                    <div class="property-label preview">
+                        <span class="left-label">Preview</span>
+                        <span class="remove" ng-click="appDetails.removeImage()">Remove</span>
+                    </div>
+                    <img id="image-app-preview" class="image-preview" ng-src="{{appDetails.app.imageUrl || appDetails.app.thumbnail || appDetails.emptyImgForPreview}}"/>
+
+                    <div class="property">
+                        <input id="checkbox-app-is-open" type="checkbox" class="checkbox-field" ng-model="appDetails.app.isOpen" ng-checked="appDetails.app.isOpen || appDetails.app.restrictedApp" ng-disabled="appDetails.app.restrictedApp" />
+                        <div class="property-label checkbox-label">Allow guest access</div>
+                    </div>
+                    <div class="property">
+                        <input id="checkbox-app-is-enabled" type="checkbox" class="checkbox-field" ng-model="appDetails.app.isEnabled"/>
+                        <div class="property-label checkbox-label">Active</div>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+    <div class="dialog-control">
+        <span class="ecomp-save-spinner" ng-show="appDetails.isSaving"></span>
+        <div id="button-save-app" class="next-button" ng-class="{disabled: appForm.$invalid}" ng-click="appDetails.saveChanges()">Save</div>
+        <div id="button-app-cancel" class="cancel-button" ng-click="closeThisDialog()">Cancel</div>
+    </div>
+</div>
+
+<script type="application/javascript">
+    $(document).ready(function(){
+        $(".ngdialog-content").css("top","-150px")
+    });
+</script>
diff --git a/ecomp-portal-FE/client/app/views/applications/application-details-dialog/application-details.modal.less b/ecomp-portal-FE/client/app/views/applications/application-details-dialog/application-details.modal.less
new file mode 100644
index 00000000..6db4845a
--- /dev/null
+++ b/ecomp-portal-FE/client/app/views/applications/application-details-dialog/application-details.modal.less
@@ -0,0 +1,122 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+ .application-details-modal {
+  height: 700px;
+
+  .title {
+    .n18r;
+    border-bottom: @a 3px solid;
+
+  }
+
+  .app-properties-main{
+    padding-left: 16px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    height: 630px;
+    overflow-y: auto;
+
+
+    .left-container{
+      display: inline-block;
+      width: 48%;
+
+    }
+    .right-container{
+      display: inline-block;
+      width: 48%;
+      float: right;
+
+
+    }
+
+    .property{
+      position: relative;
+      margin-bottom: 18px;
+      .property-label{
+        .o14r;
+      }
+      .checkbox-label{
+        display: inline-block;
+        padding-left: 3px;
+      }
+      .checkbox-field{
+        padding: 0;
+        margin: 0;
+        vertical-align: middle;
+        position: relative;
+        top: -1px;
+      }
+      .preview{
+        width: 220px;
+        margin-top: 22px;
+        display: block;
+
+        .left-label{
+          display:inline-block;
+          float: left;
+        }
+        .remove{
+          cursor: pointer;
+          display: inline-block;
+          float: right;
+          .a14r;
+        }
+      }
+
+      .input-field{
+        .custom-input-field;
+        width: 220px;
+      }
+
+      .input-file-field{
+        width: 220px;
+      }
+      .select-field {
+        .custom-select-field;
+      }
+
+      .image-preview{
+        background: #f0f0f0;
+        background-size: cover;
+        width: 220px;
+        height: 184px;
+        margin-top: 10px;
+        border: 2px solid #e8e8e8;
+        border-radius: 4px;
+      }
+
+      .error-container{
+        position: absolute;
+        width: 220px;
+        display: block;
+        height: 12px;
+        line-height: 12px;
+
+        .err-message{
+          color: red;
+          font-size: 10px;
+        }
+      }
+    }
+
+  }
+
+}
diff --git a/ecomp-portal-FE/client/app/views/applications/applications.controller.js b/ecomp-portal-FE/client/app/views/applications/applications.controller.js
new file mode 100644
index 00000000..7214fd2d
--- /dev/null
+++ b/ecomp-portal-FE/client/app/views/applications/applications.controller.js
@@ -0,0 +1,111 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+'use strict';
+(function () {
+    class ApplicationsCtrl {
+        constructor($log, applicationsService, confirmBoxService, ngDialog,userProfileService,$cookies) {
+            $log.info('ApplicationsCtrl::init: Starting up');
+
+            this.emptyImgForPreview = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+            let getOnboardingApps = () => {
+                this.isLoadingTable = true;
+                applicationsService.getOnboardingApps()
+                    .then(appsList => {
+                        this.appsList = appsList;
+                    }).catch(err => {
+                        $log.error(err);
+                    }).finally(()=> {
+                        this.isLoadingTable = false;
+                    });
+            };
+
+            let init = () => {
+                this.isLoadingTable = false;
+                getOnboardingApps();
+
+                this.searchString = '';
+                this.appsTableHeaders = [
+                    {name: 'Application Name', value: 'name', isSortable: true},
+                    {name: 'Active', value: 'isEnabled', isSortable: true},
+                    {name: 'Integration Type', value: 'restrictedApp', isSortable: true},
+                    {name: 'Guest Access', value: 'isOpen', isSortable: true},
+                    {name: 'URL', value: 'url', isSortable: true},
+                    {name: 'REST URL', value: 'restUrl', isSortable: true},                
+                    {name: 'Communication Topic', value: 'uebTopicName', isSortable: true},
+                    {name: 'Communication Key', value: 'uebKey', isSortable: true},
+                    {name: 'Communication Secret', value: 'uebSecret', isSortable: true},
+                ];
+                this.appsList = [];
+            };
+
+            init();
+
+            this.openAddNewAppModal = (selectedApp) => {
+                let data = null;
+                if (selectedApp) {
+                    if (!selectedApp.id) {
+                        $log.error('App id not found');
+                        return;
+                    }
+                    data = {
+                        app: selectedApp
+                    }
+                }
+                ngDialog.open({
+                    templateUrl: 'app/views/applications/application-details-dialog/application-details.modal.html',
+                    controller: 'AppDetailsModalCtrl',
+                    controllerAs: 'appDetails',
+                    data: data
+                }).closePromise.then(needUpdate => {
+                    if (needUpdate.value === true) {
+                        $log.debug('ApplicationsCtrl:openAddNewAppModal:: updating table data...');
+                        getOnboardingApps();
+                    }
+                });
+
+
+            };
+
+            this.deleteApp = application => {
+                $log.debug('ApplicationsCtrl:deleteApp:: ', application.name);
+
+                confirmBoxService.deleteItem(application.name).then(isConfirmed => {
+                    if(isConfirmed){
+                        if(!application || !application.id){
+                            $log.error('ApplicationsCtrl:deleteApp:: No application or ID... cannot delete');
+                            return;
+                        }
+                        applicationsService.deleteOnboardingApp(application.id).then(() => {
+                            this.appsList.splice(this.appsList.indexOf(application), 1);
+                        }).catch(err => {
+                            $log.error(err);
+                        });
+                    }
+                }).catch(err => {
+                    $log.error('ApplicationsCtrl:deleteApp error:: ', err);
+                });
+
+            };
+
+        }
+    }
+    ApplicationsCtrl.$inject = ['$log', 'applicationsService', 'confirmBoxService', 'ngDialog','userProfileService','$cookies'];
+    angular.module('ecompApp').controller('ApplicationsCtrl', ApplicationsCtrl);
+})();
diff --git a/ecomp-portal-FE/client/app/views/applications/applications.controller.spec.js b/ecomp-portal-FE/client/app/views/applications/applications.controller.spec.js
new file mode 100644
index 00000000..34042c14
--- /dev/null
+++ b/ecomp-portal-FE/client/app/views/applications/applications.controller.spec.js
@@ -0,0 +1,19 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
diff --git a/ecomp-portal-FE/client/app/views/applications/applications.less b/ecomp-portal-FE/client/app/views/applications/applications.less
new file mode 100644
index 00000000..eed77ac2
--- /dev/null
+++ b/ecomp-portal-FE/client/app/views/applications/applications.less
@@ -0,0 +1,45 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * 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.
+ * ================================================================================
+ */
+ .applications-page-main{
+    .bg_w;
+    position: @page-main-position;
+    top: @page-main-top;
+    left: @page-main-left;
+    right: @page-main-right;
+    bottom: @page-main-bottom;
+    padding-top: @padding-top;
+    overflow-y: @page-main-overflow-y;
+    padding-left: @padding-left-side;
+
+    .apps-table {
+        width: @table-width;
+        margin: @table-margin;
+
+        .delete-app{
+            .ico_trash_default;
+        }
+        .small-thumbnail{
+            width: 72px;
+            height: 60px;
+            border: 1px solid #d8d8d8;
+            border-radius: 2px;
+        }
+    }
+}
diff --git a/ecomp-portal-FE/client/app/views/applications/applications.tpl.html b/ecomp-portal-FE/client/app/views/applications/applications.tpl.html
new file mode 100644
index 00000000..a27821b1
--- /dev/null
+++ b/ecomp-portal-FE/client/app/views/applications/applications.tpl.html
@@ -0,0 +1,100 @@
+<!--
+  ================================================================================
+  eCOMP Portal
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  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.
+  ================================================================================
+  -->
+<div class="w-ecomp-main">
+    <div class="w-ecomp-main-container">
+        <div class="applications-page-main" id="contentId">
+            <div id='app-title' class="w-ecomp-main-view-title">Application Onboarding</div>
+            <div class="apps-table">
+                <div class="table-control">
+                    <input class="table-search"
+                           id="app-input-table-search"
+                           type="text"
+                           placeholder="Search by Application Name"
+                           ng-model="searchAppName"/>
+                    <div id="button-openAddNewApp" class="add-button" ng-click="apps.openAddNewAppModal()">Add App</div>
+                </div>
+                <span class="ecomp-spinner" ng-show="apps.isLoadingTable"></span>
+                <div class="c-ecomp-att-abs-table default" ng-hide="apps.isLoadingTable" id="div-app-table">
+                    <table att-table id="app-onboarding-table"
+                           table-data="apps.appsList"
+                           search-string="apps.searchString"
+                           view-per-page="apps.viewPerPageIgnored"
+                           current-page="apps.currentPageIgnored"
+                           total-page="apps.totalPageIgnored">
+                        <thead att-table-row type="header" id="att-table-row">
+                            <tr>
+                                <th id="app-header-delete" att-table-header sortable="false">Delete</th>
+                                <th id="app-header-Thumbnail" att-table-header sortable="false">Thumbnail</th>
+                                <th id="app-header-AppName" att-table-header sortable="true">Application Name</th>
+                                <th id="app-header-Active" att-table-header sortable="false">Active?</th>
+                                <th id="app-header-IntType" att-table-header sortable="false">Integration Type</th>
+                                <th id="app-header-Guest" att-table-header sortable="false">Guest Access</th>
+                                <th id="app-header-URL" att-table-header sortable="false">URL</th>
+                                <th id="app-header-RESTURL" att-table-header sortable="false">REST URL</th>
+                                <th id="app-header-Topic" att-table-header sortable="false">Communication Topic</th>
+                                <th id="app-header-CommKey" att-table-header sortable="false">Communication Key</th>
+                                <th id="app-header-Secret" att-table-header sortable="false">Communication Secret</th>
+                            </tr>
+                        </thead>
+                        <tbody att-table-row type="body"
+                               class="table-body"
+                               row-repeat="rowData in apps.appsList | filter:{name:searchAppName}  | orderBy: 'name'">
+                            <tr>
+                                <td ng-click="apps.deleteApp(rowData)">
+                                    <div id="{{$index}}-app-delete" class="ion-trash-b"></div>
+                                </td>
+                                <td ng-click="apps.openAddNewAppModal(rowData)">
+                                    <img id="{{$index}}-app-imageUrl" class="small-thumbnail" ng-src="{{rowData.imageUrl || apps.emptyImgForPreview}}">
+                                </td>
+                                <td ng-click="apps.openAddNewAppModal(rowData)">
+                                    <div id="{{$index}}-name">{{rowData.name}}</div>
+                                </td>
+                                <td ng-click="apps.openAddNewAppModal(rowData)">
+                                    <div id="{{$index}}-isEnabled">{{(rowData.isEnabled) ? 'yes' : 'no'}}</div>
+                                </td>
+                                <td ng-click="apps.openAddNewAppModal(rowData)">
+                                    <div id="{{$index}}-restrictedApp">{{(rowData.restrictedApp) ? 'link' : 'standard'}}</div>
+                                </td>
+                                <td ng-click="apps.openAddNewAppModal(rowData)">
+                                    <div id="{{$index}}-isOpen">{{(rowData.isOpen) ? 'yes' : 'no'}}</div>
+                                </td>
+                                <td ng-click="apps.openAddNewAppModal(rowData)">
+                                    <div id="{{$index}}-url">{{rowData.url | elipsis: 27}}</div>
+                                </td>
+                                <td ng-click="apps.openAddNewAppModal(rowData)">
+                                    <div id="{{$index}}-restUrl">{{rowData.restUrl | elipsis: 27}}</div>
+                                </td>
+                                <td ng-click="apps.openAddNewAppModal(rowData)">
+                                    <div id="{{$index}}-uebTopicName">{{rowData.uebTopicName}}</div>
+                                </td>
+                                <td ng-click="apps.openAddNewAppModal(rowData)">
+                                    <div id="{{$index}}-uebKey">{{rowData.uebKey}}</div>
+                                </td>
+                                <td ng-click="apps.openAddNewAppModal(rowData)">
+                                    <div id="{{$index}}-uebSecret">{{rowData.uebSecret}}</div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>