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

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