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

   1 <!--
   2   ============LICENSE_START==========================================
   3   ONAP Portal
   4   ===================================================================
   5   Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   6   ===================================================================
   7
   8   Unless otherwise specified, all software contained herein is licensed
   9   under the Apache License, Version 2.0 (the "License");
  10   you may not use this software except in compliance with the License.
  11   You may obtain a copy of the License at
  12
  13               http://www.apache.org/licenses/LICENSE-2.0
  14
  15   Unless required by applicable law or agreed to in writing, software
  16   distributed under the License is distributed on an "AS IS" BASIS,
  17   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18   See the License for the specific language governing permissions and
  19   limitations under the License.
  20
  21   Unless otherwise specified, all documentation contained herein is licensed
  22   under the Creative Commons License, Attribution 4.0 Intl. (the "License");
  23   you may not use this documentation except in compliance with the License.
  24   You may obtain a copy of the License at
  25
  26               https://creativecommons.org/licenses/by/4.0/
  27
  28   Unless required by applicable law or agreed to in writing, documentation
  29   distributed under the License is distributed on an "AS IS" BASIS,
  30   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  31   See the License for the specific language governing permissions and
  32   limitations under the License.
  33
  34   ============LICENSE_END============================================
  35
  36
  37   -->
  38   <style>
  39   .table-search-fields{
  40    margin-left: 248px !important;
  41     position: absolute !important;
  42     margin-top: -36px !important;
  43     width:50% !important;
  44   }
  45    .table-search-field{
  46     width:50% !important;
  47   }
  48   </style>
  49 <div class="microservice-add-details-model">
  50
  51                 <div class="b2b-modal-header">
  52                         <h2  id="microservice-add-details-title">Microservice Details</h2>
  53
  54                         <div class="corner-button in">
  55                                 <button type="button" class="close" aria-label="Close" id="microservicedetails-button-cancel"
  56                                         ng-click="$dismiss('cancel')"></button>
  57                         </div>
  58                 </div>
  59
  60                 <div class="b2b-modal-body">
  61         <div id="microservices" class="microservice-scrolling-table">
  62                 <div class="microservice-properties-main"
  63                         scroll-top="microserviceAddDetails.scrollApi">
  64                         <form id="microservices-details-form" name="serviceForm" novalidate
  65                                 autocomplete="off" method="post">
  66                                 <div class="item required">
  67                                         <div class="item-label">Microservice Name</div>
  68                                         <input id="microservice-details-input-name" class="table-search-field"
  69                                                 type="text" name="name" ng-pattern="/^[\w -]*$/" maxlength="100"
  70                                                 ng-model="microserviceAddDetails.service.name"
  71                                                 ng-change="microserviceAddDetails.updateServiceName()"
  72                                                 required />
  73
  74                                         <div class="error-container"
  75                                                 ng-show="(microserviceAddDetails.emptyServiceName || serviceForm.name.$dirty)">
  76                                                 <div ng-messages="serviceForm.name.$error" class="error-container">
  77                                                         <small id="microservices-details-input-name-required"
  78                                                                 class="err-message" ng-message="required">Microservice
  79                                                                 Name is required</small> <small
  80                                                                 id="microservices-details-input-name-pattern"
  81                                                                 class="err-message" ng-message="pattern">Microservice
  82                                                                 Name must be letters, numbers, or underscore</small>
  83                                                 </div>
  84                                         </div>
  85
  86                                         <div class="error-container"
  87                                                 ng-show="microserviceAddDetails.dupliateName == true">
  88                                                 <small id="microservices-details-input-name-dupliated"
  89                                                         class="err-message">Name not available - choose different
  90                                                         name </small>
  91                                         </div>
  92                                 </div>
  93
  94                                 <div class="item required">
  95                                         <div class="item-label">Microservice Description</div>
  96                                         <textarea b2b-reset b2b-reset-textarea id="widgets-details-input-desc"
  97                                                 name="desc" ng-model="microserviceAddDetails.service.desc"
  98                                                 ng-change="microserviceAddDetails.updateDesc()"  class="textAreaDesc"></textarea>
  99                                         <div class="error-container"
 100                                                 ng-show="(microserviceAddDetails.emptyServiceDesc
 101                                         || (serviceForm.desc.$dirty && microserviceAddDetails.service.desc == ''))">
 102                                                 <small id="microservices-details-input-desc-required"
 103                                                         class="err-message">Microservice Description is required</small>
 104                                         </div>
 105                                 </div>
 106
 107
 108
 109                                 <div class="item"
 110                                         ng-show="microserviceAddDetails.isEditMode && microserviceAddDetails.availableWidgets.length > 0">
 111                                         <div class="item-label">Client Widgets</div>
 112                                         <div ng-repeat="widget in microserviceAddDetails.availableWidgets">{{widget.name}}</div>
 113                                 </div>
 114
 115                                 <div class="item required">
 116                                         <div class="item-label">Application Name</div>
 117                                         <div class="service-select">
 118                                                 <div class="table-dropdown">
 119                                                         <select id="microservice-details-input-app" name="app" b2b-dropdown placeholder-text="Select Application" ng-model="microserviceAddDetails.service.application.name" ng-change="microserviceAddDetails.updateApp()">
 120                                                 <option b2b-dropdown-list option-repeat="d in microserviceAddDetails.availableApps" value="{{d.name}}">{{d.name}}</option>
 121                                             </select>
 122                                                 </div>
 123                                         </div>
 124
 125                                         <div class="error-container"
 126                                                 ng-show="(microserviceAddDetails.emptyServiceApp
 127                                         || (serviceForm.app.$dirty && microserviceAddDetails.service.application == null))">
 128                                                 <small id="microservices-details-input-url-required"
 129                                                         class="err-message">Please select microservice
 130                                                         Application</small>
 131                                         </div>
 132                                 </div>
 133
 134                                 <div class="item required">
 135                                         <div class="item-label">Microservice Endpoint URL</div>
 136                                         <input id="microservice-details-input-endpoint-url"
 137                                                 class="table-search-field" ng-model="microserviceAddDetails.service.url"
 138                                                 ng-change="microserviceAddDetails.updateURL()" type="text"
 139                                                 name="url" maxlength="200" />
 140
 141                                         <div class="error-container"
 142                                                 ng-show="(microserviceAddDetails.emptyServiceURL
 143                                         || (serviceForm.url.$dirty && microserviceAddDetails.service.url == ''))">
 144                                                 <small id="microservices-details-input-url-required"
 145                                                         class="err-message">Microservice Endpoint URL is required</small>
 146                                         </div>
 147                                 </div>
 148
 149                                 <div class="item required">
 150                                         <div class="item-label">Security Type</div>
 151                                         <div class="service-select">
 152                                                 <div class="table-dropdown">
 153                                                         <select id="microservice-details-input-security-type" name="microservice-details-input-security-type" b2b-dropdown placeholder-text="Select Security Type" ng-model="microserviceAddDetails.service.security.name" ng-change="microserviceAddDetails.updateApp()">
 154                                                 <option b2b-dropdown-list option-repeat="d in microserviceAddDetails.availableSecurityTypes" value="{{d.name}}">{{d.name}}</option>
 155                                             </select>
 156                                                 </div>
 157                                         </div>
 158                                 </div>
 159
 160                                 <div class="item"
 161                                         ng-show="microserviceAddDetails.service.security.id == 1">
 162                                         <div class="item-label">Username</div>
 163                                         <input id="microservice-details-input-username" class="table-search-field"
 164                                                 type="text" name="username" maxlength="100"
 165                                                 ng-model="microserviceAddDetails.service.username" />
 166                                 </div>
 167
 168                                 <div class="item"
 169                                         ng-show="microserviceAddDetails.service.security.id == 1">
 170                                         <div class="item-label">Password</div>
 171                                         <input id="microservice-details-input-password" class="table-search-field"
 172                                                 type="password" name="password" maxlength="100"
 173                                                 ng-model="microserviceAddDetails.service.password" />
 174                                 </div>
 175
 176
 177                                 <div class="item" ng-show="microserviceAddDetails.isEditMode">
 178                                         <div class="left-test-item">
 179                                                 <div class="item-label">Test Microservice</div>
 180                                         </div>
 181                                         <div class="right-test-item">
 182                                                 <div id="microservice-details-test-button" class="test-button"
 183                                                         ng-click="microserviceAddDetails.testServiceURL()">Test</div>
 184                                         </div>
 185                                 </div>
 186
 187                                 <div class="item" ng-show="microserviceAddDetails.isEditMode">
 188                                         <div class="item-label">JSON output</div>
 189                                         <textarea id="microservice-details-input-json" class="json-field"
 190                                                 name="json"></textarea>
 191                                 </div>
 192
 193                                 <div class="add-para-item">
 194                                         <div class="item-label add-label-left">Add User Parameter</div>
 195                                         <div class="icon-primary-accordion-plus"
 196                                                 ng-click="microserviceAddDetails.addParameter()"></div>
 197                                 </div>
 198                                 <div class="item">
 199                                         <div class="param-label-item-left"
 200                                                 ng-show="microserviceAddDetails.service.parameterList.length > 0">
 201                                                 Parameter Key</div>
 202                                         <div class="para-label-item-right"
 203                                                 ng-show="microserviceAddDetails.service.parameterList.length > 0">
 204                                                 Parameter Default Value</div>
 205
 206                                         <div id="microservice-details-user-paramters"
 207                                                 ng-repeat="parameter in microserviceAddDetails.service.parameterList">
 208
 209                                                 <div class="param-item-left">
 210                                                         <input id="microservice-details-input-user-parameter-key"
 211                                                                 class="table-search-field" type="text" name="param-key" maxlength="200"
 212                                                                 ng-model="parameter.para_key" />
 213                                                 </div>
 214                                                 <div class="param-item-middle">
 215                                                         <input id="microservice-details-input-user-parameter-value"
 216                                                                 class="table-search-fields" type="text" name="param-value"
 217                                                                 maxlength="200" ng-model="parameter.para_value" />
 218                                                 </div>
 219
 220                                                 <div class="icon-primary-accordion-minus para-item-right"
 221                                                         ng-click="microserviceAddDetails.removeParamItem(parameter)"></div>
 222                                         </div>
 223
 224                                         <div class="microservice-property">
 225                                                 <label for="microservices-checkbox-app-is-enabled" class="checkbox">
 226                                         <input type="checkbox" ng-model="microserviceAddDetails.service.active" id="microservices-checkbox-app-is-enabled" >
 227                                         <i class="skin"></i>
 228                                         <span class="property-label checkbox-label">Active</span>
 229                                 </label>
 230                                         </div>
 231
 232                                 </div>
 233
 234                                 <div id="microservice-scroll-end"></div>
 235
 236                         </form>
 237                 </div>
 238
 239
 240         </div>
 241                         </div>
 242                         <br>
 243                         <div class="b2b-modal-footer">
 244                                 <div class="cta-button-group cta-modal-footer-flex">
 245                                         <button class="btn btn-alt btn-small" id="microservice-details-save-button" ng-click="microserviceAddDetails.saveChanges()">Save</button>
 246                                         <button class="btn btn-alt btn-small" id="microservice-details-close-button" ng-click="$dismiss('cancel')">Cancel</button>
 247                                 </div>
 248                         </div>
 249
 250
 251
 252
 253 </div>
 254
 255 <script>
 256 $(document).ready(function(){
 257     $(".ngdialog-close").attr('id','dialog-close');
 258 });
 259 </script>