ecomp-portal-FE-common/client/app/views/microservice-onboarding/microservice-add-details/microservice-add-details.html

   1 <!--\r
   2   ================================================================================\r
   3   ECOMP Portal\r
   4   ================================================================================\r
   5   Copyright (C) 2017 AT&T Intellectual Property\r
   6   ================================================================================\r
   7   Licensed under the Apache License, Version 2.0 (the "License");\r
   8   you may not use this file except in compliance with the License.\r
   9   You may obtain a copy of the License at\r
  10   \r
  11        http://www.apache.org/licenses/LICENSE-2.0\r
  12   \r
  13   Unless required by applicable law or agreed to in writing, software\r
  14   distributed under the License is distributed on an "AS IS" BASIS,\r
  15   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  16   See the License for the specific language governing permissions and\r
  17   limitations under the License.\r
  18   ================================================================================\r
  19   -->\r
  20 <div class="microservice-add-details-model">\r
  21         <div id="microservice-add-details-title" class="title">microservice Details</div>\r
  22 \r
  23         <div id="microservices" class="microservice-scrolling-table">\r
  24                 <div class="microservice-properties-main"\r
  25                         scroll-top="microserviceAddDetails.scrollApi">\r
  26                         <form id="microservices-details-form" name="serviceForm" novalidate\r
  27                                 autocomplete="off">\r
  28                                 <div class="item required">\r
  29                                         <div class="item-label">microservice Name</div>\r
  30                                         <input id="microservice-details-input-name" class="table-search-field"\r
  31                                                 type="text" name="name" ng-pattern="/^[\w -]*$/" maxlength="100"\r
  32                                                 ng-model="microserviceAddDetails.service.name"\r
  33                                                 ng-change="microserviceAddDetails.updateServiceName()"\r
  34                                                 ng-disabled="microserviceAddDetails.isEditMode" required />\r
  35 \r
  36                                         <div class="error-container"\r
  37                                                 ng-show="(microserviceAddDetails.emptyServiceName || serviceForm.name.$dirty)">\r
  38                                                 <div ng-messages="serviceForm.name.$error" class="error-container">\r
  39                                                         <small id="microservices-details-input-name-required"\r
  40                                                                 class="err-message" ng-message="required">Microservice\r
  41                                                                 Name is required</small> <small\r
  42                                                                 id="microservices-details-input-name-pattern"\r
  43                                                                 class="err-message" ng-message="pattern">Microservice\r
  44                                                                 Name must be letters, numbers, or underscore</small>\r
  45                                                 </div>\r
  46                                         </div>\r
  47 \r
  48                                         <div class="error-container"\r
  49                                                 ng-show="microserviceAddDetails.isEditMode == false && microserviceAddDetails.dupliateName == true">\r
  50                                                 <small id="microservices-details-input-name-dupliated"\r
  51                                                         class="err-message">Name not available - choose different\r
  52                                                         name </small>\r
  53                                         </div>\r
  54                                 </div>\r
  55 \r
  56                                 <div class="item required">\r
  57                                         <div class="item-label">microservice Description</div>\r
  58                                         <textarea b2b-reset b2b-reset-textarea id="widgets-details-input-desc"\r
  59                                                 name="desc" ng-model="microserviceAddDetails.service.desc"\r
  60                                                 ng-change="microserviceAddDetails.updateDesc()"></textarea>\r
  61                                         <div class="error-container"\r
  62                                                 ng-show="(microserviceAddDetails.emptyServiceDesc \r
  63                                         || (serviceForm.desc.$dirty && microserviceAddDetails.service.desc == ''))">\r
  64                                                 <small id="microservices-details-input-desc-required"\r
  65                                                         class="err-message">Microservice Description is required</small>\r
  66                                         </div>\r
  67                                 </div>\r
  68 \r
  69 \r
  70 \r
  71                                 <div class="item"\r
  72                                         ng-show="microserviceAddDetails.isEditMode && microserviceAddDetails.availableWidgets.length > 0">\r
  73                                         <div class="item-label">Client Widgets</div>\r
  74                                         <div ng-repeat="widget in microserviceAddDetails.availableWidgets">{{widget.name}}</div>\r
  75                                 </div>\r
  76 \r
  77                                 <div class="item required">\r
  78                                         <div class="item-label">Application Name</div>\r
  79                                         <div class="service-select">                                    \r
  80                                                 <div class="table-dropdown">\r
  81                                                         <select id="microservice-details-input-app" name="app" b2b-dropdown placeholder-text="Select Application" ng-model="microserviceAddDetails.service.application.name" ng-change="microserviceAddDetails.updateApp()">\r
  82                                                 <option b2b-dropdown-list option-repeat="d in microserviceAddDetails.availableApps" value="{{d.name}}">{{d.name}}</option>\r
  83                                             </select>\r
  84                                                 </div>\r
  85                                         </div>\r
  86 \r
  87                                         <div class="error-container"\r
  88                                                 ng-show="(microserviceAddDetails.emptyServiceApp \r
  89                                         || (serviceForm.app.$dirty && microserviceAddDetails.service.application == null))">\r
  90                                                 <small id="microservices-details-input-url-required"\r
  91                                                         class="err-message">Please select microservice\r
  92                                                         Application</small>\r
  93                                         </div>\r
  94                                 </div>\r
  95 \r
  96                                 <div class="item required">\r
  97                                         <div class="item-label">microservice Endpoint URL</div>\r
  98                                         <input id="microservice-details-input-endpoint-url"\r
  99                                                 class="table-search-field" ng-model="microserviceAddDetails.service.url"\r
 100                                                 ng-change="microserviceAddDetails.updateURL()" type="text"\r
 101                                                 name="url" maxlength="200" />\r
 102 \r
 103                                         <div class="error-container"\r
 104                                                 ng-show="(microserviceAddDetails.emptyServiceURL \r
 105                                         || (serviceForm.url.$dirty && microserviceAddDetails.service.url == ''))">\r
 106                                                 <small id="microservices-details-input-url-required"\r
 107                                                         class="err-message">Microservice Endpoint URL is required</small>\r
 108                                         </div>\r
 109                                 </div>\r
 110 \r
 111                                 <div class="item required">\r
 112                                         <div class="item-label">Security Type</div>\r
 113                                         <div class="service-select">                                    \r
 114                                                 <div class="table-dropdown">\r
 115                                                         <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()">\r
 116                                                 <option b2b-dropdown-list option-repeat="d in microserviceAddDetails.availableSecurityTypes" value="{{d.name}}">{{d.name}}</option>                                             \r
 117                                             </select>\r
 118                                                 </div>\r
 119                                         </div>                          \r
 120                                 </div>\r
 121 \r
 122                                 <div class="item"\r
 123                                         ng-show="microserviceAddDetails.service.security.id == 1">\r
 124                                         <div class="item-label">Username</div>\r
 125                                         <input id="microservice-details-input-username" class="table-search-field"\r
 126                                                 type="text" name="username" maxlength="100"\r
 127                                                 ng-model="microserviceAddDetails.service.username" />\r
 128                                 </div>\r
 129 \r
 130                                 <div class="item"\r
 131                                         ng-show="microserviceAddDetails.service.security.id == 1">\r
 132                                         <div class="item-label">Password</div>\r
 133                                         <input id="microservice-details-input-password" class="table-search-field"\r
 134                                                 type="password" name="password" maxlength="100"\r
 135                                                 ng-model="microserviceAddDetails.service.password" />\r
 136                                 </div>\r
 137 \r
 138 \r
 139                                 <div class="item" ng-show="microserviceAddDetails.isEditMode">\r
 140                                         <div class="left-test-item">\r
 141                                                 <div class="item-label">Test Microservice</div>\r
 142                                         </div>\r
 143                                         <div class="right-test-item">\r
 144                                                 <div id="microservice-details-test-button" class="test-button"\r
 145                                                         ng-click="microserviceAddDetails.testServiceURL()">Test</div>\r
 146                                         </div>\r
 147                                 </div>\r
 148 \r
 149                                 <div class="item" ng-show="microserviceAddDetails.isEditMode">\r
 150                                         <div class="item-label">JSON output</div>\r
 151                                         <textarea id="microservice-details-input-json" class="json-field"\r
 152                                                 name="json"></textarea>\r
 153                                 </div>\r
 154 \r
 155                                 <div class="add-para-item">\r
 156                                         <div class="item-label add-label-left">Add User Parameter</div>\r
 157                                         <div class="icon-primary-accordion-plus"\r
 158                                                 ng-click="microserviceAddDetails.addParameter()"></div>\r
 159                                 </div>\r
 160                                 <div class="item">\r
 161                                         <div class="para-label-item-left"\r
 162                                                 ng-show="microserviceAddDetails.service.parameterList.length > 0">\r
 163                                                 Parameter Key</div>\r
 164                                         <div class="para-label-item-right"\r
 165                                                 ng-show="microserviceAddDetails.service.parameterList.length > 0">\r
 166                                                 Parameter Default Value</div>\r
 167 \r
 168                                         <div id="microservice-details-user-paramters"\r
 169                                                 ng-repeat="parameter in microserviceAddDetails.service.parameterList">\r
 170 \r
 171                                                 <div class="para-item-left">\r
 172                                                         <input id="microservice-details-input-user-parameter-key"\r
 173                                                                 class="table-search-field" type="text" name="param-key" maxlength="200"\r
 174                                                                 ng-model="parameter.para_key" />\r
 175                                                 </div>\r
 176                                                 <div class="para-item-middle">\r
 177                                                         <input id="microservice-details-input-user-parameter-value"\r
 178                                                                 class="table-search-field" type="text" name="param-value"\r
 179                                                                 maxlength="200" ng-model="parameter.para_value" />\r
 180                                                 </div>\r
 181 \r
 182                                                 <div class="icon-primary-accordion-minus para-item-right"\r
 183                                                         ng-click="microserviceAddDetails.removeParamItem(parameter)"></div>\r
 184                                         </div>\r
 185 \r
 186                                         <div class="microservice-property">\r
 187                                                 <input id="microservices-checkbox-app-is-enabled" type="checkbox"\r
 188                                                         class="checkbox-field"\r
 189                                                         ng-model="microserviceAddDetails.service.active" />\r
 190                                                 <div class="property-label checkbox-label">Active</div>\r
 191                                         </div>\r
 192                                         \r
 193                                 </div>\r
 194                                         \r
 195                                 <div id="microservice-scroll-end"></div>\r
 196                                 <div class="dialog-control">\r
 197                                         <button class="btn btn-alt btn-small" id="microservice-details-save-button" ng-click="microserviceAddDetails.saveChanges()">Save</button>                               \r
 198                                         <button class="btn btn-alt btn-small" id="microservice-details-close-button" ng-click="microserviceAddDetails.closeThisDialog()">Close</button> \r
 199                                 </div>\r
 200                         </form>\r
 201                 </div>\r
 202 \r
 203 \r
 204         </div>\r
 205 </div>\r