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   <style>
  21   .table-search-fields{
  22    margin-left: 248px !important;
  23     position: absolute !important;
  24     margin-top: -36px !important;
  25     width:50% !important;
  26   }
  27    .table-search-field{
  28     width:50% !important;
  29   }
  30   </style>
  31 <div class="microservice-add-details-model">
  32
  33                 <div class="b2b-modal-header">
  34                         <h2 class="title" id="microservice-add-details-title">Microservice Details</h2>
  35
  36                         <div class="corner-button in">
  37                                 <button type="button" class="close" aria-label="Close" id="microservicedetails-button-cancel"
  38                                         ng-click="$dismiss('cancel')"></button>
  39                         </div>
  40                 </div>
  41
  42                 <div class="b2b-modal-body">
  43         <div id="microservices" class="microservice-scrolling-table">
  44                 <div class="microservice-properties-main"
  45                         scroll-top="microserviceAddDetails.scrollApi">
  46                         <form id="microservices-details-form" name="serviceForm" novalidate
  47                                 autocomplete="off">
  48                                 <div class="item required">
  49                                         <div class="item-label">Microservice Name</div>
  50                                         <input id="microservice-details-input-name" class="table-search-field"
  51                                                 type="text" name="name" ng-pattern="/^[\w -]*$/" maxlength="100"
  52                                                 ng-model="microserviceAddDetails.service.name"
  53                                                 ng-change="microserviceAddDetails.updateServiceName()"
  54                                                 required />
  55
  56                                         <div class="error-container"
  57                                                 ng-show="(microserviceAddDetails.emptyServiceName || serviceForm.name.$dirty)">
  58                                                 <div ng-messages="serviceForm.name.$error" class="error-container">
  59                                                         <small id="microservices-details-input-name-required"
  60                                                                 class="err-message" ng-message="required">Microservice
  61                                                                 Name is required</small> <small
  62                                                                 id="microservices-details-input-name-pattern"
  63                                                                 class="err-message" ng-message="pattern">Microservice
  64                                                                 Name must be letters, numbers, or underscore</small>
  65                                                 </div>
  66                                         </div>
  67
  68                                         <div class="error-container"
  69                                                 ng-show="microserviceAddDetails.dupliateName == true">
  70                                                 <small id="microservices-details-input-name-dupliated"
  71                                                         class="err-message">Name not available - choose different
  72                                                         name </small>
  73                                         </div>
  74                                 </div>
  75
  76                                 <div class="item required">
  77                                         <div class="item-label">Microservice Description</div>
  78                                         <textarea b2b-reset b2b-reset-textarea id="widgets-details-input-desc"
  79                                                 name="desc" ng-model="microserviceAddDetails.service.desc"
  80                                                 ng-change="microserviceAddDetails.updateDesc()"></textarea>
  81                                         <div class="error-container"
  82                                                 ng-show="(microserviceAddDetails.emptyServiceDesc
  83                                         || (serviceForm.desc.$dirty && microserviceAddDetails.service.desc == ''))">
  84                                                 <small id="microservices-details-input-desc-required"
  85                                                         class="err-message">Microservice Description is required</small>
  86                                         </div>
  87                                 </div>
  88
  89
  90
  91                                 <div class="item"
  92                                         ng-show="microserviceAddDetails.isEditMode && microserviceAddDetails.availableWidgets.length > 0">
  93                                         <div class="item-label">Client Widgets</div>
  94                                         <div ng-repeat="widget in microserviceAddDetails.availableWidgets">{{widget.name}}</div>
  95                                 </div>
  96
  97                                 <div class="item required">
  98                                         <div class="item-label">Application Name</div>
  99                                         <div class="service-select">
 100                                                 <div class="table-dropdown">
 101                                                         <select id="microservice-details-input-app" name="app" b2b-dropdown placeholder-text="Select Application" ng-model="microserviceAddDetails.service.application.name" ng-change="microserviceAddDetails.updateApp()">
 102                                                 <option b2b-dropdown-list option-repeat="d in microserviceAddDetails.availableApps" value="{{d.name}}">{{d.name}}</option>
 103                                             </select>
 104                                                 </div>
 105                                         </div>
 106
 107                                         <div class="error-container"
 108                                                 ng-show="(microserviceAddDetails.emptyServiceApp
 109                                         || (serviceForm.app.$dirty && microserviceAddDetails.service.application == null))">
 110                                                 <small id="microservices-details-input-url-required"
 111                                                         class="err-message">Please select microservice
 112                                                         Application</small>
 113                                         </div>
 114                                 </div>
 115
 116                                 <div class="item required">
 117                                         <div class="item-label">Microservice Endpoint URL</div>
 118                                         <input id="microservice-details-input-endpoint-url"
 119                                                 class="table-search-field" ng-model="microserviceAddDetails.service.url"
 120                                                 ng-change="microserviceAddDetails.updateURL()" type="text"
 121                                                 name="url" maxlength="200" />
 122
 123                                         <div class="error-container"
 124                                                 ng-show="(microserviceAddDetails.emptyServiceURL
 125                                         || (serviceForm.url.$dirty && microserviceAddDetails.service.url == ''))">
 126                                                 <small id="microservices-details-input-url-required"
 127                                                         class="err-message">Microservice Endpoint URL is required</small>
 128                                         </div>
 129                                 </div>
 130
 131                                 <div class="item required">
 132                                         <div class="item-label">Security Type</div>
 133                                         <div class="service-select">
 134                                                 <div class="table-dropdown">
 135                                                         <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()">
 136                                                 <option b2b-dropdown-list option-repeat="d in microserviceAddDetails.availableSecurityTypes" value="{{d.name}}">{{d.name}}</option>
 137                                             </select>
 138                                                 </div>
 139                                         </div>
 140                                 </div>
 141
 142                                 <div class="item"
 143                                         ng-show="microserviceAddDetails.service.security.id == 1">
 144                                         <div class="item-label">Username</div>
 145                                         <input id="microservice-details-input-username" class="table-search-field"
 146                                                 type="text" name="username" maxlength="100"
 147                                                 ng-model="microserviceAddDetails.service.username" />
 148                                 </div>
 149
 150                                 <div class="item"
 151                                         ng-show="microserviceAddDetails.service.security.id == 1">
 152                                         <div class="item-label">Password</div>
 153                                         <input id="microservice-details-input-password" class="table-search-field"
 154                                                 type="password" name="password" maxlength="100"
 155                                                 ng-model="microserviceAddDetails.service.password" />
 156                                 </div>
 157
 158
 159                                 <div class="item" ng-show="microserviceAddDetails.isEditMode">
 160                                         <div class="left-test-item">
 161                                                 <div class="item-label">Test Microservice</div>
 162                                         </div>
 163                                         <div class="right-test-item">
 164                                                 <div id="microservice-details-test-button" class="test-button"
 165                                                         ng-click="microserviceAddDetails.testServiceURL()">Test</div>
 166                                         </div>
 167                                 </div>
 168
 169                                 <div class="item" ng-show="microserviceAddDetails.isEditMode">
 170                                         <div class="item-label">JSON output</div>
 171                                         <textarea id="microservice-details-input-json" class="json-field"
 172                                                 name="json"></textarea>
 173                                 </div>
 174
 175                                 <div class="add-para-item">
 176                                         <div class="item-label add-label-left">Add User Parameter</div>
 177                                         <div class="icon-primary-accordion-plus"
 178                                                 ng-click="microserviceAddDetails.addParameter()"></div>
 179                                 </div>
 180                                 <div class="item">
 181                                         <div class="param-label-item-left"
 182                                                 ng-show="microserviceAddDetails.service.parameterList.length > 0">
 183                                                 Parameter Key</div>
 184                                         <div class="para-label-item-right"
 185                                                 ng-show="microserviceAddDetails.service.parameterList.length > 0">
 186                                                 Parameter Default Value</div>
 187
 188                                         <div id="microservice-details-user-paramters"
 189                                                 ng-repeat="parameter in microserviceAddDetails.service.parameterList">
 190
 191                                                 <div class="param-item-left">
 192                                                         <input id="microservice-details-input-user-parameter-key"
 193                                                                 class="table-search-field" type="text" name="param-key" maxlength="200"
 194                                                                 ng-model="parameter.para_key" />
 195                                                 </div>
 196                                                 <div class="param-item-middle">
 197                                                         <input id="microservice-details-input-user-parameter-value"
 198                                                                 class="table-search-fields" type="text" name="param-value"
 199                                                                 maxlength="200" ng-model="parameter.para_value" />
 200                                                 </div>
 201
 202                                                 <div class="icon-primary-accordion-minus para-item-right"
 203                                                         ng-click="microserviceAddDetails.removeParamItem(parameter)"></div>
 204                                         </div>
 205
 206                                         <div class="microservice-property">
 207                                                 <label for="microservices-checkbox-app-is-enabled" class="checkbox">
 208                                         <input type="checkbox" ng-model="microserviceAddDetails.service.active" id="microservices-checkbox-app-is-enabled" >
 209                                         <i class="skin"></i>
 210                                         <span class="property-label checkbox-label">Active</span>
 211                                 </label>
 212                                         </div>
 213
 214                                 </div>
 215
 216                                 <div id="microservice-scroll-end"></div>
 217
 218                         </form>
 219                 </div>
 220
 221
 222         </div>
 223                         </div>
 224                         <br>
 225                         <div class="b2b-modal-footer">
 226                                 <div class="cta-button-group cta-modal-footer-flex">
 227                                         <button class="btn btn-alt btn-small" id="microservice-details-save-button" ng-click="microserviceAddDetails.saveChanges()">Save</button>
 228                                         <button class="btn btn-alt btn-small" id="microservice-details-close-button" ng-click="$dismiss('cancel')">Close</button>
 229                                 </div>
 230                         </div>
 231
 232
 233
 234
 235 </div>
 236
 237 <script>
 238 $(document).ready(function(){
 239     $(".ngdialog-close").attr('id','dialog-close');
 240 });
 241 </script>