summaryrefslogtreecommitdiffstats
path: root/ecomp-portal-FE-common/client/app/views/microservice-onboarding
diff options
context:
space:
mode:
authorst782s <statta@research.att.com>2017-05-04 07:48:42 -0400
committerst782s <statta@research.att.com>2017-05-04 12:28:17 -0400
commitb54df0ddd0c6a0372327c5aa3668e5a6458fcd64 (patch)
treee69cfa9b314a801bd187cf0145d1d4306436229c /ecomp-portal-FE-common/client/app/views/microservice-onboarding
parent39d1e62c84041831bfc52cca73b5ed5efaf57d27 (diff)
[PORTAL-7] Rebase
This rebasing includes common libraries and common overlays projects abstraction of components Change-Id: I9a24a338665c7cd058978e8636bc412d9e2fdce8 Signed-off-by: st782s <statta@research.att.com>
Diffstat (limited to 'ecomp-portal-FE-common/client/app/views/microservice-onboarding')
-rw-r--r--ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.html205
-rw-r--r--ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.js336
-rw-r--r--ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.less234
-rw-r--r--ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.controller.js87
-rw-r--r--ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.less26
-rw-r--r--ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.tpl.html75
6 files changed, 963 insertions, 0 deletions
diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.html b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.html
new file mode 100644
index 00000000..a8b20739
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.html
@@ -0,0 +1,205 @@
+<!--
+ ================================================================================
+ 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="microservice-add-details-model">
+ <div id="microservice-add-details-title" class="title">microservice Details</div>
+
+ <div id="microservices" class="microservice-scrolling-table">
+ <div class="microservice-properties-main"
+ scroll-top="microserviceAddDetails.scrollApi">
+ <form id="microservices-details-form" name="serviceForm" novalidate
+ autocomplete="off">
+ <div class="item required">
+ <div class="item-label">microservice Name</div>
+ <input id="microservice-details-input-name" class="table-search-field"
+ type="text" name="name" ng-pattern="/^[\w -]*$/" maxlength="100"
+ ng-model="microserviceAddDetails.service.name"
+ ng-change="microserviceAddDetails.updateServiceName()"
+ ng-disabled="microserviceAddDetails.isEditMode" required />
+
+ <div class="error-container"
+ ng-show="(microserviceAddDetails.emptyServiceName || serviceForm.name.$dirty)">
+ <div ng-messages="serviceForm.name.$error" class="error-container">
+ <small id="microservices-details-input-name-required"
+ class="err-message" ng-message="required">Microservice
+ Name is required</small> <small
+ id="microservices-details-input-name-pattern"
+ class="err-message" ng-message="pattern">Microservice
+ Name must be letters, numbers, or underscore</small>
+ </div>
+ </div>
+
+ <div class="error-container"
+ ng-show="microserviceAddDetails.isEditMode == false && microserviceAddDetails.dupliateName == true">
+ <small id="microservices-details-input-name-dupliated"
+ class="err-message">Name not available - choose different
+ name </small>
+ </div>
+ </div>
+
+ <div class="item required">
+ <div class="item-label">microservice Description</div>
+ <textarea b2b-reset b2b-reset-textarea id="widgets-details-input-desc"
+ name="desc" ng-model="microserviceAddDetails.service.desc"
+ ng-change="microserviceAddDetails.updateDesc()"></textarea>
+ <div class="error-container"
+ ng-show="(microserviceAddDetails.emptyServiceDesc
+ || (serviceForm.desc.$dirty && microserviceAddDetails.service.desc == ''))">
+ <small id="microservices-details-input-desc-required"
+ class="err-message">Microservice Description is required</small>
+ </div>
+ </div>
+
+
+
+ <div class="item"
+ ng-show="microserviceAddDetails.isEditMode && microserviceAddDetails.availableWidgets.length > 0">
+ <div class="item-label">Client Widgets</div>
+ <div ng-repeat="widget in microserviceAddDetails.availableWidgets">{{widget.name}}</div>
+ </div>
+
+ <div class="item required">
+ <div class="item-label">Application Name</div>
+ <div class="service-select">
+ <div class="table-dropdown">
+ <select id="microservice-details-input-app" name="app" b2b-dropdown placeholder-text="Select Application" ng-model="microserviceAddDetails.service.application.name" ng-change="microserviceAddDetails.updateApp()">
+ <option b2b-dropdown-list option-repeat="d in microserviceAddDetails.availableApps" value="{{d.name}}">{{d.name}}</option>
+ </select>
+ </div>
+ </div>
+
+ <div class="error-container"
+ ng-show="(microserviceAddDetails.emptyServiceApp
+ || (serviceForm.app.$dirty && microserviceAddDetails.service.application == null))">
+ <small id="microservices-details-input-url-required"
+ class="err-message">Please select microservice
+ Application</small>
+ </div>
+ </div>
+
+ <div class="item required">
+ <div class="item-label">microservice Endpoint URL</div>
+ <input id="microservice-details-input-endpoint-url"
+ class="table-search-field" ng-model="microserviceAddDetails.service.url"
+ ng-change="microserviceAddDetails.updateURL()" type="text"
+ name="url" maxlength="200" />
+
+ <div class="error-container"
+ ng-show="(microserviceAddDetails.emptyServiceURL
+ || (serviceForm.url.$dirty && microserviceAddDetails.service.url == ''))">
+ <small id="microservices-details-input-url-required"
+ class="err-message">Microservice Endpoint URL is required</small>
+ </div>
+ </div>
+
+ <div class="item required">
+ <div class="item-label">Security Type</div>
+ <div class="service-select">
+ <div class="table-dropdown">
+ <select id="microservice-details-input-security-type" name="microservice-details-input-security-type" b2b-dropdown placeholder-text="Select Application" ng-model="microserviceAddDetails.service.security.name" ng-change="microserviceAddDetails.updateApp()">
+ <option b2b-dropdown-list option-repeat="d in microserviceAddDetails.availableSecurityTypes" value="{{d.name}}">{{d.name}}</option>
+ </select>
+ </div>
+ </div>
+ </div>
+
+ <div class="item"
+ ng-show="microserviceAddDetails.service.security.id == 1">
+ <div class="item-label">Username</div>
+ <input id="microservice-details-input-username" class="table-search-field"
+ type="text" name="username" maxlength="100"
+ ng-model="microserviceAddDetails.service.username" />
+ </div>
+
+ <div class="item"
+ ng-show="microserviceAddDetails.service.security.id == 1">
+ <div class="item-label">Password</div>
+ <input id="microservice-details-input-password" class="table-search-field"
+ type="password" name="password" maxlength="100"
+ ng-model="microserviceAddDetails.service.password" />
+ </div>
+
+
+ <div class="item" ng-show="microserviceAddDetails.isEditMode">
+ <div class="left-test-item">
+ <div class="item-label">Test Microservice</div>
+ </div>
+ <div class="right-test-item">
+ <div id="microservice-details-test-button" class="test-button"
+ ng-click="microserviceAddDetails.testServiceURL()">Test</div>
+ </div>
+ </div>
+
+ <div class="item" ng-show="microserviceAddDetails.isEditMode">
+ <div class="item-label">JSON output</div>
+ <textarea id="microservice-details-input-json" class="json-field"
+ name="json"></textarea>
+ </div>
+
+ <div class="add-para-item">
+ <div class="item-label add-label-left">Add User Parameter</div>
+ <div class="icon-primary-accordion-plus"
+ ng-click="microserviceAddDetails.addParameter()"></div>
+ </div>
+ <div class="item">
+ <div class="para-label-item-left"
+ ng-show="microserviceAddDetails.service.parameterList.length > 0">
+ Parameter Key</div>
+ <div class="para-label-item-right"
+ ng-show="microserviceAddDetails.service.parameterList.length > 0">
+ Parameter Default Value</div>
+
+ <div id="microservice-details-user-paramters"
+ ng-repeat="parameter in microserviceAddDetails.service.parameterList">
+
+ <div class="para-item-left">
+ <input id="microservice-details-input-user-parameter-key"
+ class="table-search-field" type="text" name="param-key" maxlength="200"
+ ng-model="parameter.para_key" />
+ </div>
+ <div class="para-item-middle">
+ <input id="microservice-details-input-user-parameter-value"
+ class="table-search-field" type="text" name="param-value"
+ maxlength="200" ng-model="parameter.para_value" />
+ </div>
+
+ <div class="icon-primary-accordion-minus para-item-right"
+ ng-click="microserviceAddDetails.removeParamItem(parameter)"></div>
+ </div>
+
+ <div class="microservice-property">
+ <input id="microservices-checkbox-app-is-enabled" type="checkbox"
+ class="checkbox-field"
+ ng-model="microserviceAddDetails.service.active" />
+ <div class="property-label checkbox-label">Active</div>
+ </div>
+
+ </div>
+
+ <div id="microservice-scroll-end"></div>
+ <div class="dialog-control">
+ <button class="btn btn-alt btn-small" id="microservice-details-save-button" ng-click="microserviceAddDetails.saveChanges()">Save</button>
+ <button class="btn btn-alt btn-small" id="microservice-details-close-button" ng-click="microserviceAddDetails.closeThisDialog()">Close</button>
+ </div>
+ </form>
+ </div>
+
+
+ </div>
+</div>
diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.js b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.js
new file mode 100644
index 00000000..f6123349
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.js
@@ -0,0 +1,336 @@
+/*-
+ * ================================================================================
+ * 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 MicroserviceAddDetailsCtrl {
+ constructor($scope, $log, $interval, widgetsCatalogService, applicationsService, adminsService, microserviceService, errorMessageByCode, ECOMP_URL_REGEX, $window,userProfileService, confirmBoxService, $cookies) {
+
+
+ let getAvailableApps = () => {
+ applicationsService.getAppsForSuperAdminAndAccountAdmin().then(apps => {
+ this.availableApps=[];
+ apps.unshift({
+ id: 1,
+ name: "ECOMP Portal"
+ });
+ for(var i = 0; i < apps.length; i++) {
+ this.availableApps.push({
+ id: apps[i].id,
+ name: apps[i].name
+ });
+ if(this.isEditMode == true && this.service.appId == apps[i].id){
+ this.service.application = this.availableApps[i];
+ }
+ }
+ }).catch(err => {
+ $log.error(err);
+ });
+ };
+
+ let getAvailableWidgets = () => {
+ microserviceService.getWidgetListByService(this.service.id).then(widgets =>{
+ this.availableWidgets = [];
+ for(var i = 0; i < widgets.length; i++){
+ this.availableWidgets.push({
+ name: widgets[i]
+ })
+ }
+ }).catch(err => {
+ $log.error(err);
+ });
+ };
+
+
+ let getAvailableSecurityTypes = () => {
+ this.availableSecurityTypes = [];
+ this.availableSecurityTypes.push({
+ id: 0,
+ name: 'No Authentication'
+ });
+ this.availableSecurityTypes.push({
+ id: 1,
+ name: 'Basic Authentication'
+ });
+ this.availableSecurityTypes.push({
+ id: 2,
+ name: 'Cookie based Authentication'
+ });
+ }
+
+ let init = () => {
+ $log.info('MicroserviceAddDetailsCtrl::init');
+ this.service = [];
+ this.service.parameterList = [];
+ this.service.active = true;
+ this.emptyServiceName = false;
+ this.emptyServiceDesc = false;
+ this.emptyServiceURL = false;
+ this.emptyServiceApp = false;
+ this.dupliateName = false;
+ this.serviceList = $scope.ngDialogData.list;
+
+ if ($scope.ngDialogData && $scope.ngDialogData.service) {
+
+ this.isEditMode = true;
+ this.service = _.clone($scope.ngDialogData.service);
+
+ console.log(this.service);
+ if(this.service.active == 'Y')
+ this.service.active = true;
+ else
+ this.service.active = false;
+ } else {
+ this.isEditMode = false;
+ }
+ getAvailableApps();
+ getAvailableSecurityTypes();
+ //getAvailableWidgets();
+
+ /**
+ * 0: Basic Authentication
+ *
+ * TODO: change the structure
+ */
+ if(this.service.securityType == "No Authentication"){
+ this.service.security = this.availableSecurityTypes[0];
+ }else if(this.service.securityType == "Basic Authentication"){
+ this.service.security = this.availableSecurityTypes[1];
+ }else if(this.service.securityType == "Cookie based Authentication"){
+ this.service.security = this.availableSecurityTypes[2];
+ }
+ };
+
+ this.ECOMP_URL_REGEX = ECOMP_URL_REGEX;
+ this.conflictMessages = {};
+ this.scrollApi = {};
+
+ let resetConflict = fieldName => {
+ delete this.conflictMessages[fieldName];
+ if($scope.widgetForm[fieldName]){
+ $scope.widgetForm[fieldName].$setValidity('conflict', true);
+ }
+ };
+
+ this.addParameter = () => {
+ document.getElementById('microservice-scroll-end').scrollIntoView();
+ this.service.parameterList.push({});
+ }
+
+ this.closeThisDialog = () => {
+ $scope.closeThisDialog(true);
+ }
+
+ this.removeParamItem = (parameter) => {
+ microserviceService.getUserParameterById(parameter.id).then((res) => {
+ if(res.length > 0){
+ var message = res.length + " users have their own widget parameters. Are you sure you want to delete?";
+ confirmBoxService.editItem(message).then(isConfirmed => {
+ if(isConfirmed){
+ microserviceService.deleteUserParameterById(parameter.id).then((res) => {
+ for(var i = 0; i < this.service.parameterList.length; i++){
+ if(this.service.parameterList[i].para_key == parameter.para_key
+ && this.service.parameterList[i].para_value == parameter.para_value){
+ this.service.parameterList.splice(i, 1);
+ return;
+ }
+ }
+ });
+ }
+ });
+ }
+ else{
+ for(var i = 0; i < this.service.parameterList.length; i++){
+ if(this.service.parameterList[i].para_key == parameter.para_key
+ && this.service.parameterList[i].para_value == parameter.para_value){
+ this.service.parameterList.splice(i, 1);
+ return;
+ }
+ }
+ }
+ });
+
+
+ }
+
+ this.updateServiceName = () => {
+ this.dupliateName = false;
+ for(var i = 0; i < this.serviceList.length; i++){
+ if(this.serviceList[i].name == this.service.name){
+ this.dupliateName = true;
+ return;
+ }
+ }
+ }
+
+ this.updateDesc = () => {
+ this.emptyServiceDesc = false;
+ }
+
+ this.updateURL = () => {
+ this.emptyServiceURL = false;
+ }
+
+ this.updateApp = () => {
+ this.emptyServiceApp = false;
+ }
+
+ //This is a fix for dropdown selection, due to b2b dropdown only update value field
+ $scope.$watch('microserviceAddDetails.service.application.name', (newVal, oldVal) => {
+ for(var i=0;i<$scope.microserviceAddDetails.availableApps.length;i++){
+ if($scope.microserviceAddDetails.availableApps[i].name==newVal){
+ $scope.microserviceAddDetails.service.application=angular.copy($scope.microserviceAddDetails.availableApps[i]);
+ }
+ }
+ });
+ $scope.$watch('microserviceAddDetails.service.security.name', (newVal, oldVal) => {
+ for(var i=0;i<$scope.microserviceAddDetails.availableSecurityTypes.length;i++){
+ if($scope.microserviceAddDetails.availableSecurityTypes[i].name==newVal){
+ $scope.microserviceAddDetails.service.security=angular.copy($scope.microserviceAddDetails.availableSecurityTypes[i]);
+ }
+ }
+ });
+
+ let emptyCookies = () => {
+ userProfileService.getUserProfile()
+ .then(profile=> {
+ $log.info('AppDetailsModalCtrl::emptyCookies profile: ', profile);
+ $scope.attuid = profile.attuid;
+ $log.info('user has the following attuid: ' + profile.attuid);
+ if ($cookies.getObject($scope.attuid + '_widget') != undefined && $cookies.getObject($scope.attuid + '_widget') != null) {
+ $cookies.remove($scope.attuid + '_widget');
+ }
+ });
+ };
+
+ this.testServiceURL = () =>{
+ //console.log(this.service.id);
+ widgetsCatalogService.getServiceJSON(this.service.id).then(res => {
+ document.getElementById("microservice-details-input-json").innerHTML = (JSON.stringify(res));
+ });
+ }
+
+ this.saveChanges = () => {
+ /* TODO: add form validation */
+
+ var isValid = true;
+ this.updateServiceName();
+
+ if(this.service.name == ''
+ || this.service.name == undefined){
+ this.emptyServiceName = true;
+ isValid = false;
+ }
+
+ if(this.dupliateName == true
+ && this.isEditMode == false){
+ isValid = false;
+ }
+
+
+ if(this.service.desc == ''
+ || this.service.desc == undefined){
+ this.emptyServiceDesc = true;
+ isValid = false;
+ }
+
+ if(this.service.url == ''
+ || this.service.url == undefined){
+ this.emptyServiceURL = true;
+ isValid = false;
+ }
+
+ if(this.service.application == undefined
+ || this.service.application == null){
+ this.emptyServiceApp = true;
+ isValid = false;
+ }
+
+ if(!isValid)
+ return;
+
+ /*
+ * Check the parameter list, delete those parameters that don't
+ * have key
+ */
+ for(var i = 0; i < this.service.parameterList.length; i++){
+ if(this.service.parameterList[i].para_key == undefined
+ || this.service.parameterList[i].para_key == null
+ || this.service.parameterList[i].para_key == ""){
+ this.service.parameterList.splice(i, 1);
+ i--;
+ }
+ }
+
+ var securityType;
+ var username;
+ var password;
+ if(this.service.security == undefined ||
+ this.service.security == null)
+ securityType = "No Authentication";
+ else{
+ securityType = this.service.security.name;
+ username = this.service.username;
+ password = this.service.password;
+ }
+
+ var active = 'N';
+ if(this.service.active == true)
+ active = 'Y';
+
+ var newService = {
+ name: this.service.name,
+ desc: this.service.desc,
+ appId: this.service.application.id,
+ url: this.service.url,
+ securityType: securityType,
+ username: username,
+ password: password,
+ active: active,
+ parameterList: this.service.parameterList
+ };
+
+ if(this.isEditMode){
+ // console.log(this.service.parameterList);
+ var message = "Are you sure you want to change '" + this.service.name + "'?"
+ confirmBoxService.editItem(message).then(isConfirmed => {
+ if(isConfirmed){
+ microserviceService.updateService(this.service.id, newService).then(() => {
+ // TODO: result validation check
+ this.closeThisDialog();
+ });
+ }
+ });
+ }else{
+ microserviceService.createService(newService).then(() => {
+ // TODO: result validation check
+ $scope.closeThisDialog(true);
+ });
+ }
+
+ };
+ init();
+ $scope.$on('$stateChangeStart', e => {
+ e.preventDefault();
+ });
+ }
+ }
+ MicroserviceAddDetailsCtrl.$inject = ['$scope', '$log', '$interval', 'widgetsCatalogService', 'applicationsService', 'adminsService', 'microserviceService', 'errorMessageByCode', 'ECOMP_URL_REGEX', '$window','userProfileService', 'confirmBoxService', '$cookies'];
+ angular.module('ecompApp').controller('MicroserviceAddDetailsCtrl', MicroserviceAddDetailsCtrl);
+})();
diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.less b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.less
new file mode 100644
index 00000000..fa607fee
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.less
@@ -0,0 +1,234 @@
+.microservice-add-details-model{
+ height: 550px;
+ overflow-y: auto;
+ .title {
+ .dGray18r; //AT&T Dark Gray
+ border-bottom: @blue-active 3px solid;
+ }
+ .microservice-details-title {
+ color: #191919;
+ font-family: "Omnes-ECOMP-W02", Arial;;
+ font-size: 24px;
+ padding-bottom: 15px;
+ padding-top:30px;
+ margin-left: 25px;
+ }
+ .microservice-properties-main {
+ padding-top: 20px;
+ padding-left: 20px;
+ padding-right: 20px;
+ margin-bottom: 50px;
+
+ height: 100%;
+ width:100%;
+
+ .microservice-property{
+ margin-top: 10px;
+ position: relative;
+ .property-label{
+ .dGray14r;
+ }
+ .checkbox-label{
+ display: inline-block;
+ padding-left: 3px;
+ }
+ .checkbox-field{
+ padding: 0;
+ margin: 0;
+ vertical-align: middle;
+ position: relative;
+ top: -1px;
+ }
+ }
+ .add-para-item{
+ position: relative;
+ .add-label-left{
+ line-height: 25px;
+ height: 30px;
+ vertical-align: middle;
+ display:inline-block;
+
+ margin-right: 10px;
+ background: @portalWhite;
+ .dGray14r;
+ }
+ .add-label-right{
+ height: 14px;
+ width: 14px;
+ display:inline-block;
+ }
+ }
+ .item{
+ position: relative;
+ margin-bottom: 15px;
+ width:400px;
+ .service-select{
+ select{
+ cursor: pointer;
+ position: relative;
+ border: 1px solid #5a5a5a;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ line-height: 15px;
+ height: 32px;
+ padding-left: 10px;
+ padding-right: 10px;
+ border-radius: 0px;
+ }
+ display:inline-block;
+ width: 100%;
+ }
+ .error-container{
+ position: absolute;
+ width: 280px;
+ display: block;
+ height: 12px;
+ line-height: 12px;
+
+ .err-message{
+ color: @funcRed;
+ font-size: 9px;
+ }
+ .valid-message{
+ color: @funcGreen;
+ font-size: 9px;
+ }
+ }
+ .auth-item-left{
+ padding-top: 0;
+ line-height: 30px;
+ height: 30px;
+ vertical-align: middle;
+ display:inline-block;
+ width: 15%;
+ //border-radius: 2px;
+ //border: 1px solid @portalLGray;
+ margin-right: 10px;
+ background: @portalWhite;
+ white-space: nowrap;
+ .dGray14r;
+ }
+ .auth-item-right{
+ display:inline-block;
+ width: 45%;
+ border-radius: 2px;
+ border: 1px solid @portalLGray;
+ background: @portalWhite;
+ vertical-align: middle;
+ }
+ .para-label-item-left{
+ line-height: 30px;
+ height: 30px;
+ vertical-align: middle;
+ display:inline-block;
+ width: 45%;
+ margin-right: 10px;
+ background: @portalWhite;
+ white-space: nowrap;
+ .dGray14r;
+ }
+ .para-label-item-right{
+ line-height: 30px;
+ height: 30px;
+ display:inline-block;
+ width: 45%;
+ background: @portalWhite;
+ vertical-align: middle;
+ white-space: nowrap;
+ .dGray14r;
+ }
+ .para-item-left{
+ line-height: 30px;
+ height: 36px;
+ margin:3px;
+ vertical-align: middle;
+ display:inline-block;
+ width: 43%;
+ border-radius: 2px;
+ border: 1px solid @portalLGray;
+ margin-right: 10px;
+ background: @portalWhite;
+ white-space: nowrap;
+ .dGray14r;
+ }
+ .para-item-middle{
+ line-height: 30px;
+ height: 36px;
+ margin:3px;
+ display:inline-block;
+ width: 43%;
+ border-radius: 2px;
+ border: 1px solid @portalLGray;
+ background: @portalWhite;
+ vertical-align: middle;
+ white-space: nowrap;
+ .dGray14r;
+ }
+ .json-field{
+ position: relative;
+ .custom-input-field;
+ height:80px;
+ }
+ .left-test-item{
+ display: inline-block;
+ width: 85%;
+ background: @portalWhite;
+ }
+
+ .right-test-item{
+ position: relative;
+ display: inline-block;
+ width: 15%;
+ float: right;
+ }
+
+ .test-button {
+ .btn-blue;
+ }
+ .para-item-right{
+ margin-top: 10px;
+ height: 14px;
+ width: 14px;
+ float: right;
+ display:inline-block;
+ }
+ .input-field{
+ .custom-input-field;
+ width: 100%;
+ }
+ .textarea-field{
+ position: relative;
+ .custom-input-field;
+ height:50px;
+ }
+ .submit-button {
+ margin-top: 25px;
+ position: relative;
+ float: right;
+ width: 20%;
+ .btn-blue;
+ }
+
+
+
+ .add-para-button{
+ height: 14px;
+ width: 14px;
+ float: right;
+ }
+ .item-label{
+ .dGray14r;
+ }
+ }
+ }
+}
+.microservice-scrolling-table{
+ width: 548px;
+ margin-left: 16px;
+ height: 430px;
+ overflow: auto;
+}
+#microservice-scroll-end{
+ height: 20px;
+} \ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.controller.js b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.controller.js
new file mode 100644
index 00000000..6e711b75
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.controller.js
@@ -0,0 +1,87 @@
+'use strict';
+(function () {
+ class MicroserviceOnboardingCtrl {
+ constructor($log, applicationsService, microserviceService, ngDialog, confirmBoxService,
+ userProfileService, $cookies, $scope) {
+
+
+ let getOnboardingServices = () => {
+ microserviceService.getServiceList().then(res => {
+ $scope.serviceList = res;
+ }).catch(err => {
+ $log.error('MicroserviceOnboardingCtrl::getOnboardingServices caught error', err);
+ });
+ };
+
+
+
+ let init = () => {
+ $scope.serviceList = [];
+ getOnboardingServices();
+ this.serviceTableHeaders = [
+ {name: 'Microservice Name', value: 'name', isSortable: false},
+ {name: 'Service Endpoint URL', value: 'url', isSortable: false},
+ {name: 'Security Type', value: 'securityType', isSortable: false}
+ ];
+ };
+
+ this.openAddNewMicroserviceModal = (selectedService) => {
+ let data = null;
+ if(selectedService){
+ if(!selectedService.id){
+ $log.error('MicroserviceOnboardingCtrl:openAddNewMicroserviceModal:service id not found');
+ return;
+ }
+ data = {
+ service:selectedService,
+ list: $scope.serviceList
+ }
+ }else{
+ data = {
+ list: $scope.serviceList
+ }
+ }
+
+ ngDialog.open({
+ templateUrl: 'app/views/microservice-onboarding/microservice-add-details/microservice-add-details.html',
+ controller: 'MicroserviceAddDetailsCtrl',
+ controllerAs: 'microserviceAddDetails',
+ data: data
+ }).closePromise.then(needUpdate => {
+ if(needUpdate.value === true){
+ getOnboardingServices();
+ }
+ });
+ };
+
+ this.deleteService = service => {
+ confirmBoxService.deleteItem(service.name).then(isConfirmed => {
+ if(isConfirmed){
+ if(!service || !service.id){
+ $log.error('MicroserviceOnboardingCtrl::deleteService: No service or ID... cannot delete');
+ return;
+ }
+ microserviceService.deleteService(service.id).then((res) => {
+ if(res.status == "WARN"){
+ confirmBoxService.showInformation("Failed: widgets " + res.response + " are assoicated with this microservice!");
+ }else{
+ $scope.serviceList.splice($scope.serviceList.indexOf(service), 1);
+ }
+ }).catch(err => {
+ $log.error('MicroserviceOnboardingCtrl::deleteService error:',err);
+ });
+ }
+ }).catch(err => {
+ $log.error('MicroserviceOnboardingCtrl::deleteService error:',err);
+ });
+
+
+ };
+
+ init();
+ }
+ }
+ MicroserviceOnboardingCtrl.$inject = ['$log', 'applicationsService', 'microserviceService', 'ngDialog', 'confirmBoxService',
+ 'userProfileService','$cookies', '$scope'];
+ angular.module('ecompApp').controller('MicroserviceOnboardingCtrl', MicroserviceOnboardingCtrl);
+})(); \ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.less b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.less
new file mode 100644
index 00000000..7565b432
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.less
@@ -0,0 +1,26 @@
+.microservice-onboarding{
+ //.bg_portalWhite;//white for 1702
+ .bg_portalGray; // gray for 1610
+ 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;
+
+ .microservices-table {
+ width: @table-width;
+ margin: 0 auto;
+
+ .add-button{
+ width: 180px;
+ }
+ }
+
+ .delete-microservice{
+ .ico_trash_default;
+ }
+
+} \ No newline at end of file
diff --git a/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.tpl.html b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.tpl.html
new file mode 100644
index 00000000..e3b3128a
--- /dev/null
+++ b/ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-onboarding.tpl.html
@@ -0,0 +1,75 @@
+<!--
+ ================================================================================
+ 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="microservice-onboarding" id="page-content">
+ <div id="microservice-onboarding-title"
+ class="w-ecomp-main-view-title">Microservice Onboarding</div>
+ <div class="microservices-table">
+ <div class="table-control">
+ <div class="table-control-buttons">
+ <button class="btn btn-alt btn-small" id="microservice-onboarding-button-add" ng-click="microserviceOnboarding.openAddNewMicroserviceModal()">
+ <i class="icon-people-userbookmark" aria-hidden="true"></i>&nbsp;Add Microservice
+ </button>
+ </div>
+ <div>
+ <div class="c-ecomp-b2b-abs-table default">
+ <table b2b-table table-data="serviceList"
+ search-string="microserviceOnboarding.searchString"
+ view-per-page="microserviceOnboarding.viewPerPageIgnored"
+ current-page="microserviceOnboarding.currentPageIgnored"
+ total-page="microserviceOnboarding.totalPageIgnored">
+ <thead b2b-table-row type="header">
+ <tr>
+ <th id="microservice-catalog-th-header-name"
+ ng-repeat="header in microserviceOnboarding.serviceTableHeaders"
+ b2b-table-header key="{{header.value}}"
+ sortable="{{header.isSortable}}">{{header.name}}</th>
+ <th id="microservices-catalog-th-header-delete"
+ b2b-table-header sortable="false">Delete</th>
+ </tr>
+ </thead>
+ <tbody b2b-table-row type="body" class="table-body"
+ row-repeat="rowData in serviceList">
+
+ <tr>
+ <td b2b-table-body
+ ng-repeat="header in microserviceOnboarding.serviceTableHeaders"
+ ng-click="microserviceOnboarding.openAddNewMicroserviceModal(rowData)">
+ <div
+ id="microservices-catalog-microservice-name-{{rowData.id}}"
+ ng-bind="rowData[header.value]"></div>
+ </td>
+
+ <td b2b-table-body>
+ <div id="microservice-onboarding-div-delete-{{$index}}"
+ class="icon-misc-trash"
+ ng-click="microserviceOnboarding.deleteService(rowData)"></div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>