src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.html

   1 <!--
   2 Copyright 2020 TATA ELXSI
   3
   4 Licensed under the Apache License, Version 2.0 (the 'License');
   5 you may not use this file except in compliance with the License.
   6 You may obtain a copy of the License at
   7
   8     http://www.apache.org/licenses/LICENSE-2.0
   9
  10 Unless required by applicable law or agreed to in writing, software
  11 distributed under the License is distributed on an "AS IS" BASIS,
  12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 See the License for the specific language governing permissions and
  14 limitations under the License.
  15
  16 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
  17 -->
  18 <form [formGroup]="vimNewAccountForm" (ngSubmit)="newVimAccountSubmit()" autocomplete="off">
  19     <div class="row d-flex flex-row justify-content-between">
  20         <div class="d-flex align-items-center header-style">{{'PAGE.VIMDETAILS.NEWVIMACCOUNT' | translate}} </div>
  21     </div>
  22     <div class="context-style bg-white p-3">
  23         <div class="row form-group content-style">
  24             <label class="col-sm-12 col-form-label mandatory-label"
  25                 [ngClass]="{'text-danger': vimNewAccountForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' | translate}}</label>
  26             <div class="col-sm-3">
  27                 <label for="name">{{'PAGE.VIMDETAILS.NAME' | translate}}*</label>
  28             </div>
  29             <div class="col-sm-3">
  30                 <input autocomplete="off" class="form-control" placeholder="{{'PAGE.VIMDETAILS.NAME' | translate}}"
  31                     type="text" formControlName="name" id="name"
  32                     [ngClass]="{ 'is-invalid': submitted && f.name.errors }">
  33             </div>
  34             <div class="col-sm-3">
  35                 <label for="vim_tenant_name">{{'PAGE.VIMDETAILS.TENANTNAME' | translate}}*</label>
  36             </div>
  37             <div class="col-sm-3">
  38                 <input autocomplete="off" class="form-control"
  39                     placeholder="{{'PAGE.VIMDETAILS.TENANTNAME' | translate}}" type="text"
  40                     formControlName="vim_tenant_name" id="vim_tenant_name"
  41                     [ngClass]="{ 'is-invalid': submitted && f.vim_tenant_name.errors }">
  42             </div>
  43         </div>
  44         <div class="row form-group content-style">
  45             <div class="col-sm-3">
  46                 <label for="vim_type">{{'PAGE.VIMDETAILS.VIMTYPE' | translate}}*</label>
  47             </div>
  48             <div class="col-sm-3">
  49                 <ng-select bindLabel="title" bindValue="value" [items]="vimType" placeholder="{{'SELECT' | translate}}"
  50                     formControlName="vim_type" id="vim_type" [(ngModel)]="selectedVimType"
  51                     [ngClass]="{ 'is-invalid': submitted && f.vim_type.errors }">
  52                 </ng-select>
  53             </div>
  54             <div class="col-sm-3">
  55                 <label for="description">{{'PAGE.VIMDETAILS.DESCRIPTION' | translate}}</label>
  56             </div>
  57             <div class="col-sm-3">
  58                 <textarea class="form-control" placeholder="{{'PAGE.VIMDETAILS.DESCRIPTION' | translate}}" type="text"
  59                     formControlName="description" id="description"></textarea>
  60             </div>
  61         </div>
  62         <div class="row form-group content-style">
  63             <div class="col-sm-3">
  64                 <label for="vim_url">{{'PAGE.VIMDETAILS.VIMURL' | translate}}*</label>
  65             </div>
  66             <div class="col-sm-3">
  67                 <input autocomplete="off" class="form-control" placeholder="{{'PAGE.VIMDETAILS.VIMURL' | translate}}"
  68                     type="url" formControlName="vim_url" id="vim_url"
  69                     [ngClass]="{ 'is-invalid': submitted && f.vim_url.errors }">
  70                 <div *ngIf="vimNewAccountForm.invalid" class="invalid-feedback">
  71                     <div *ngIf="f.vim_url.errors && f.vim_url.value">{{'DOMVALIDATIONS.INVALIDURL' | translate}}</div>
  72                 </div>
  73             </div>
  74             <div class="col-sm-3">
  75                 <label for="schema_type">{{'PAGE.VIMDETAILS.SCHEMATYPE' | translate}}</label>
  76             </div>
  77             <div class="col-sm-3">
  78                 <input autocomplete="off" class="form-control"
  79                     placeholder="{{'PAGE.VIMDETAILS.SCHEMATYPE' | translate}}" type="text" formControlName="schema_type"
  80                     id="schema_type">
  81             </div>
  82         </div>
  83         <div class="row form-group content-style">
  84             <div class="col-sm-3">
  85                 <label for="vim_user">{{'PAGE.VIMDETAILS.VIMUSERNAME' | translate}}*</label>
  86             </div>
  87             <div class="col-sm-3">
  88                 <input autocomplete="off" class="form-control"
  89                     placeholder="{{'PAGE.VIMDETAILS.VIMUSERNAME' | translate}}" type="text" formControlName="vim_user"
  90                     id="vim_user" [ngClass]="{ 'is-invalid': submitted && f.vim_user.errors }">
  91             </div>
  92         </div>
  93         <div class="row form-group content-style">
  94             <div class="col-sm-3">
  95                 <label for="vim_password">{{'PAGE.VIMDETAILS.VIMPASSWORD' | translate}}*</label>
  96             </div>
  97             <div class="col-sm-3">
  98                 <input autocomplete="off" class="form-control" placeholder="VIM Password" type="password"
  99                     formControlName="vim_password" id="vim_password"
 100                     [ngClass]="{ 'is-invalid': submitted && f.vim_password.errors }">
 101             </div>
 102         </div>
 103         <div class="row" [hidden]="!selectedVimType">
 104             <div class="col-12">
 105                 <button type="button" class="btn btn-block border-0 bg-light text-dark"
 106                     (click)="isCollapsed = !isCollapsed"
 107                     [attr.aria-expanded]="!isCollapsed">{{'PAGE.VIMDETAILS.CONFIGPARAMETERS' | translate}}</button>
 108             </div>
 109         </div>
 110         <div formGroupName="vimconfig" id="configurationparameters" class="collapse mt-3" [ngbCollapse]="isCollapsed">
 111             <div class="row" [hidden]="!selectedVimType">
 112                 <div class="col-sm-3">
 113                     <label>{{'UPLOADCONFIG' | translate}}</label>
 114                 </div>
 115                 <div class="col-sm-3 form-group">
 116                     <div class="custom-file">
 117                         <input type="file" #fileInput class="custom-file-input"
 118                             (change)="filesDropped($event.target.files)" id="customFile">
 119                         <label class="custom-file-label" #fileInputLabel
 120                             for="customFile">{{'CHOOSEFILE' | translate}}</label>
 121                     </div>
 122                 </div>
 123             </div>
 124             <div *ngIf="selectedVimType == 'openstack'">
 125                 <div class="row form-group content-style">
 126                     <div class="col-sm-3">
 127                         <label for="sdn_controller">{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}</label>
 128                     </div>
 129                     <div class="col-sm-3">
 130                         <input autocomplete="off" class="form-control"
 131                             placeholder="{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}" type="text"
 132                             formControlName="sdn_controller" id="sdn_controller">
 133                     </div>
 134                     <div class="col-sm-3">
 135                         <label for="APIversion">{{'PAGE.VIMDETAILS.APIVERSION' | translate}}</label>
 136                     </div>
 137                     <div class="col-sm-3">
 138                         <input autocomplete="off" class="form-control"
 139                             placeholder="{{'PAGE.VIMDETAILS.APIVERSION' | translate}}" type="text"
 140                             formControlName="APIversion" id="APIversion">
 141                     </div>
 142                 </div>
 143                 <div class="row form-group content-style">
 144                     <div class="col-sm-3">
 145                         <label for="sdn_port_mapping">{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}</label>
 146                     </div>
 147                     <div class="col-sm-3">
 148                         <input autocomplete="off" class="form-control"
 149                             placeholder="{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}" type="text"
 150                             formControlName="sdn_port_mapping" id="sdn_port_mapping">
 151                     </div>
 152                     <div class="col-sm-3">
 153                         <label for="project_domain_id">{{'PAGE.VIMDETAILS.PROJECTDOMAINID' | translate}}</label>
 154                     </div>
 155                     <div class="col-sm-3">
 156                         <input autocomplete="off" class="form-control"
 157                             placeholder="{{'PAGE.VIMDETAILS.PROJECTDOMAINID' | translate}}" type="text"
 158                             formControlName="project_domain_id" id="project_domain_id">
 159                     </div>
 160                 </div>
 161                 <div class="row form-group content-style">
 162                     <div class="col-sm-3">
 163                         <label for="vim_network_name">{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}</label>
 164                     </div>
 165                     <div class="col-sm-3">
 166                         <input autocomplete="off" class="form-control"
 167                             placeholder="{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}" type="text"
 168                             formControlName="vim_network_name" id="vim_network_name">
 169                     </div>
 170                     <div class="col-sm-3">
 171                         <label for="project_domain_name">{{'PAGE.VIMDETAILS.PROJECTDOMAINNAME' | translate}}</label>
 172                     </div>
 173                     <div class="col-sm-3">
 174                         <input autocomplete="off" class="form-control"
 175                             placeholder="{{'PAGE.VIMDETAILS.PROJECTDOMAINNAME' | translate}}" type="text"
 176                             formControlName="project_domain_name" id="project_domain_name">
 177                     </div>
 178                 </div>
 179                 <div class="row form-group content-style">
 180                     <div class="col-sm-3">
 181                         <label for="config_vim_ype">{{'PAGE.VIMDETAILS.VIMTYPE' | translate}}</label>
 182                     </div>
 183                     <div class="col-sm-3">
 184                         <input autocomplete="off" class="form-control"
 185                             placeholder="{{'PAGE.VIMDETAILS.VIM_TYPE' | translate}}" type="text"
 186                             formControlName="config_vim_ype" id="config_vim_ype">
 187                     </div>
 188                     <div class="col-sm-3">
 189                         <label for="user_domain_id">{{'PAGE.VIMDETAILS.USERDOMAINID' | translate}}</label>
 190                     </div>
 191                     <div class="col-sm-3">
 192                         <input autocomplete="off" class="form-control"
 193                             placeholder="{{'PAGE.VIMDETAILS.USERDOMAINID' | translate}}" type="text"
 194                             formControlName="user_domain_id" id="user_domain_id">
 195                     </div>
 196                 </div>
 197                 <div class="row form-group content-style">
 198                     <div class="col-sm-3">
 199                         <label for="security_groups">{{'PAGE.VIMDETAILS.SECURITYGROUPS' | translate}}</label>
 200                     </div>
 201                     <div class="col-sm-3">
 202                         <input autocomplete="off" class="form-control"
 203                             placeholder="{{'PAGE.VIMDETAILS.SECURITYGROUPS' | translate}}" type="text"
 204                             formControlName="security_groups" id="security_groups">
 205                     </div>
 206                     <div class="col-sm-3">
 207                         <label for="user_domain_name">{{'PAGE.VIMDETAILS.USERDOMAINUSER' | translate}}</label>
 208                     </div>
 209                     <div class="col-sm-3">
 210                         <input autocomplete="off" class="form-control"
 211                             placeholder="{{'PAGE.VIMDETAILS.USERDOMAINUSER' | translate}}" type="text"
 212                             formControlName="user_domain_name" id="user_domain_name">
 213                     </div>
 214                 </div>
 215                 <div class="row form-group content-style">
 216                     <div class="col-sm-3">
 217                         <label for="availabilityZone">{{'PAGE.VIMDETAILS.AVAILABILITYZONE' | translate}}</label>
 218                     </div>
 219                     <div class="col-sm-3">
 220                         <input autocomplete="off" class="form-control"
 221                             placeholder="{{'PAGE.VIMDETAILS.AVAILABILITYZONE' | translate}}" type="text"
 222                             formControlName="availabilityZone" id="availabilityZone">
 223                     </div>
 224                     <div class="col-sm-3">
 225                         <label for="keypair">{{'PAGE.VIMDETAILS.KEYPAIR' | translate}}</label>
 226                     </div>
 227                     <div class="col-sm-3">
 228                         <input autocomplete="off" class="form-control"
 229                             placeholder="{{'PAGE.VIMDETAILS.KEYPAIR' | translate}}" type="text"
 230                             formControlName="keypair" id="keypair">
 231                     </div>
 232                 </div>
 233                 <div class="row form-group content-style">
 234                     <div class="col-sm-3">
 235                         <label for="region_name">{{'PAGE.VIMDETAILS.REGIONALNAME' | translate}}</label>
 236                     </div>
 237                     <div class="col-sm-3">
 238                         <input autocomplete="off" class="form-control"
 239                             placeholder="{{'PAGE.VIMDETAILS.REGIONALNAME' | translate}}" type="text"
 240                             formControlName="region_name" id="region_name">
 241                     </div>
 242                     <div class="col-sm-3">
 243                         <label
 244                             for="dataplane_physical_net">{{'PAGE.VIMDETAILS.DATAPLANEPHYSICALNET' | translate}}</label>
 245                     </div>
 246                     <div class="col-sm-3">
 247                         <input autocomplete="off" class="form-control"
 248                             placeholder="{{'PAGE.VIMDETAILS.DATAPLANEPHYSICALNET' | translate}}" type="text"
 249                             formControlName="dataplane_physical_net" id="dataplane_physical_net">
 250                     </div>
 251                 </div>
 252                 <div class="row form-group content-style">
 253                     <div class="col-sm-3">
 254                         <label for="insecure">{{'PAGE.VIMDETAILS.INSECURE' | translate}}</label>
 255                     </div>
 256                     <div class="col-sm-3">
 257                         <ng-select [items]="boolValue" bindLabel="name" bindValue="id"
 258                             placeholder="{{'PAGE.VIMDETAILS.INSECURE' | translate}}" formControlName="insecure"
 259                             id="insecure">
 260                         </ng-select>
 261                     </div>
 262                     <div class="col-sm-3">
 263                         <label for="use_floating_ip">{{'PAGE.VIMDETAILS.USEFLOATINGIP' | translate}}</label>
 264                     </div>
 265                     <div class="col-sm-3">
 266                         <ng-select [items]="boolValue" bindLabel="name" bindValue="id" id="use_floating_ip"
 267                             placeholder="{{'PAGE.VIMDETAILS.USEFLOATINGIP' | translate}}"
 268                             formControlName="use_floating_ip">
 269                         </ng-select>
 270                     </div>
 271                 </div>
 272                 <div class="row form-group content-style">
 273                     <div class="col-sm-3">
 274                         <label for="use_internal_endpoint">{{'PAGE.VIMDETAILS.USEINTERNALENDPOINT' | translate}}</label>
 275                     </div>
 276                     <div class="col-sm-3">
 277                         <ng-select [items]="boolValue" bindLabel="name" bindValue="id"
 278                             placeholder="{{'PAGE.VIMDETAILS.USEINTERNALENDPOINT' | translate}}"
 279                             formControlName="use_internal_endpoint" id="use_internal_endpoint">
 280                         </ng-select>
 281                     </div>
 282                     <div class="col-sm-3">
 283                         <label for="microversion">{{'PAGE.VIMDETAILS.MICROVERSION' | translate}}</label>
 284                     </div>
 285                     <div class="col-sm-3">
 286                         <input autocomplete="off" class="form-control"
 287                             placeholder="{{'PAGE.VIMDETAILS.MICROVERSION' | translate}}" type="text"
 288                             formControlName="microversion" id="microversion">
 289                     </div>
 290                 </div>
 291                 <div class="row form-group content-style">
 292                     <div class="col-sm-3">
 293                         <label for="additional_conf">{{'PAGE.VIMDETAILS.ADDITIONALCONFIG' | translate}}</label>
 294                     </div>
 295                     <div class="col-sm-3">
 296                         <input autocomplete="off" class="form-control"
 297                             placeholder="{{'PAGE.VIMDETAILS.ADDITIONALCONFIGPLACEHOLDER' | translate}}" type="text"
 298                             formControlName="additional_conf" id="additional_conf">
 299                     </div>
 300                     <div class="col-sm-3">
 301                         <label for="use_existing_flavors">{{'PAGE.VIMDETAILS.USEEXISTINGFLAVOURS' | translate}}</label>
 302                     </div>
 303                     <div class="col-sm-3">
 304                         <ng-select [items]="boolValue" bindLabel="name" bindValue="id"
 305                             placeholder="{{'PAGE.VIMDETAILS.USEEXISTINGFLAVOURS' | translate}}"
 306                             formControlName="use_existing_flavors" id="use_existing_flavors">
 307                         </ng-select>
 308                     </div>
 309                 </div>
 310                 <div class="row form-group content-style">
 311                     <div class="col-sm-3">
 312                         <label for="location">{{'PAGE.VIMDETAILS.VIMLOCATION' | translate}}</label>
 313                     </div>
 314                     <div class="col-sm-9">
 315                         <ng-select [items]="getVIMLocation" bindLabel="label" bindValue="value"
 316                             placeholder="{{'PAGE.VIMDETAILS.VIMLOCATION' | translate}}" formControlName="location"
 317                             id="location" (keydown.enter)="fetchLocationLatLong($event.target.value)">
 318                         </ng-select>
 319                         <small>{{'PAGE.VIM.LOACTIONINFO' | translate}}</small>
 320                     </div>
 321                 </div>
 322             </div>
 323             <div *ngIf="selectedVimType == 'openvim' || selectedVimType == 'opennebula'">
 324                 <div class="row form-group content-style">
 325                     <div class="col-sm-3">
 326                         <label for="sdn_controller">{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}</label>
 327                     </div>
 328                     <div class="col-sm-3">
 329                         <input autocomplete="off" class="form-control"
 330                             placeholder="{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}" type="text"
 331                             formControlName="sdn_controller" id="sdn_controller">
 332                     </div>
 333                 </div>
 334                 <div class="row form-group content-style">
 335                     <div class="col-sm-3">
 336                         <label for="sdn_port_mapping">{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}</label>
 337                     </div>
 338                     <div class="col-sm-3">
 339                         <input autocomplete="off" class="form-control"
 340                             placeholder="{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}" type="text"
 341                             formControlName="sdn_port_mapping" id="sdn_port_mapping">
 342                     </div>
 343                 </div>
 344                 <div class="row form-group content-style">
 345                     <div class="col-sm-3">
 346                         <label for="vim_network_name">{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}</label>
 347                     </div>
 348                     <div class="col-sm-3">
 349                         <input autocomplete="off" class="form-control"
 350                             placeholder="{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}" type="text"
 351                             formControlName="vim_network_name" id="vim_network_name">
 352                     </div>
 353                 </div>
 354                 <div class="row form-group content-style">
 355                     <div class="col-sm-3">
 356                         <label for="additional_conf">{{'PAGE.VIMDETAILS.ADDITIONALCONFIG' | translate}}</label>
 357                     </div>
 358                     <div class="col-sm-3">
 359                         <input autocomplete="off" class="form-control"
 360                             placeholder="{{'PAGE.VIMDETAILS.ADDITIONALCONFIGPLACEHOLDER' | translate}}" type="text"
 361                             formControlName="additional_conf" id="additional_conf">
 362                     </div>
 363                 </div>
 364             </div>
 365             <div *ngIf="selectedVimType == 'vmware'">
 366                 <div class="row form-group content-style">
 367                     <div class="col-sm-3">
 368                         <label for="sdn_controller">{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}</label>
 369                     </div>
 370                     <div class="col-sm-3">
 371                         <input autocomplete="off" class="form-control"
 372                             placeholder="{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}" type="text"
 373                             formControlName="sdn_controller" id="sdn_controller">
 374                     </div>
 375                     <div class="col-sm-3">
 376                         <label for="orgname">{{'PAGE.VIMDETAILS.ORGNAME' | translate}}</label>
 377                     </div>
 378                     <div class="col-sm-3">
 379                         <input autocomplete="off" class="form-control"
 380                             placeholder="{{'PAGE.VIMDETAILS.ORGNAME' | translate}}" type="text"
 381                             formControlName="orgname" id="orgname">
 382                     </div>
 383                 </div>
 384                 <div class="row form-group content-style">
 385                     <div class="col-sm-3">
 386                         <label for="sdn_port_mapping">{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}</label>
 387                     </div>
 388                     <div class="col-sm-3">
 389                         <input autocomplete="off" class="form-control"
 390                             placeholder="{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}" type="text"
 391                             formControlName="sdn_port_mapping" id="sdn_port_mapping">
 392                     </div>
 393                     <div class="col-sm-3">
 394                         <label for="vcenter_ip">{{'PAGE.VIMDETAILS.VCENTERIP' | translate}}</label>
 395                     </div>
 396                     <div class="col-sm-3">
 397                         <input autocomplete="off" class="form-control"
 398                             placeholder="{{'PAGE.VIMDETAILS.VCENTERIP' | translate}}" type="text"
 399                             formControlName="vcenter_ip" id="vcenter_ip">
 400                     </div>
 401                 </div>
 402                 <div class="row form-group content-style">
 403                     <div class="col-sm-3">
 404                         <label for="vim_network_name">{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}</label>
 405                     </div>
 406                     <div class="col-sm-3">
 407                         <input autocomplete="off" class="form-control"
 408                             placeholder="{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}" type="text"
 409                             formControlName="vim_network_name" id="vim_network_name">
 410                     </div>
 411                     <div class="col-sm-3">
 412                         <label for="vcenter_port">{{'PAGE.VIMDETAILS.VCENTERPORT' | translate}}</label>
 413                     </div>
 414                     <div class="col-sm-3">
 415                         <input autocomplete="off" class="form-control"
 416                             placeholder="{{'PAGE.VIMDETAILS.VCENTERPORT' | translate}}" type="text"
 417                             formControlName="vcenter_port" id="vcenter_port">
 418                     </div>
 419                 </div>
 420                 <div class="row form-group content-style">
 421                     <div class="col-sm-3">
 422                         <label for="admin_username">{{'PAGE.VIMDETAILS.ADMINUSERNAME' | translate}}</label>
 423                     </div>
 424                     <div class="col-sm-3">
 425                         <input autocomplete="off" class="form-control"
 426                             placeholder="{{'PAGE.VIMDETAILS.ADMINUSERNAME' | translate}}" type="text"
 427                             formControlName="admin_username" id="admin_username">
 428                     </div>
 429                     <div class="col-sm-3">
 430                         <label for="vcenter_user">{{'PAGE.VIMDETAILS.VCENTERUSER' | translate}}</label>
 431                     </div>
 432                     <div class="col-sm-3">
 433                         <input autocomplete="off" class="form-control"
 434                             placeholder="{{'PAGE.VIMDETAILS.VCENTERUSER' | translate}}" type="text"
 435                             formControlName="vcenter_user" id="vcenter_user">
 436                     </div>
 437                 </div>
 438                 <div class="row form-group content-style">
 439                     <div class="col-sm-3">
 440                         <label for="admin_password">{{'PAGE.VIMDETAILS.ADMINPASSWORD' | translate}}</label>
 441                     </div>
 442                     <div class="col-sm-3">
 443                         <input autocomplete="off" class="form-control"
 444                             placeholder="{{'PAGE.VIMDETAILS.ADMINPASSWORD' | translate}}" type="text"
 445                             formControlName="admin_password" id="admin_password">
 446                     </div>
 447                     <div class="col-sm-3">
 448                         <label for="vcenter_password">{{'PAGE.VIMDETAILS.VCENTERPASSWORD' | translate}}</label>
 449                     </div>
 450                     <div class="col-sm-3">
 451                         <input autocomplete="off" class="form-control"
 452                             placeholder="{{'PAGE.VIMDETAILS.VCENTERPASSWORD' | translate}}" type="text"
 453                             formControlName="vcenter_password" id="vcenter_password">
 454                     </div>
 455                 </div>
 456                 <div class="row form-group content-style">
 457                     <div class="col-sm-3">
 458                         <label for="nsx_manager">{{'PAGE.VIMDETAILS.NSXMANAGER' | translate}}</label>
 459                     </div>
 460                     <div class="col-sm-3">
 461                         <input autocomplete="off" class="form-control"
 462                             placeholder="{{'PAGE.VIMDETAILS.NSXMANAGER' | translate}}" type="text"
 463                             formControlName="nsx_manager" id="nsx_manager">
 464                     </div>
 465                     <div class="col-sm-3">
 466                         <label for="vrops_site">{{'PAGE.VIMDETAILS.VROPSSITE' | translate}}</label>
 467                     </div>
 468                     <div class="col-sm-3">
 469                         <input autocomplete="off" class="form-control"
 470                             placeholder="{{'PAGE.VIMDETAILS.VROPSSITE' | translate}}" type="text"
 471                             formControlName="vrops_site" id="vrops_site">
 472                     </div>
 473                 </div>
 474                 <div class="row form-group content-style">
 475                     <div class="col-sm-3">
 476                         <label for="nsx_user">{{'PAGE.VIMDETAILS.NSXUSER' | translate}}</label>
 477                     </div>
 478                     <div class="col-sm-3">
 479                         <input autocomplete="off" class="form-control"
 480                             placeholder="{{'PAGE.VIMDETAILS.NSXUSER' | translate}}" type="text"
 481                             formControlName="nsx_user" id="nsx_user">
 482                     </div>
 483                     <div class="col-sm-3">
 484                         <label for="vrops_user">{{'PAGE.VIMDETAILS.VROPSUSER' | translate}}</label>
 485                     </div>
 486                     <div class="col-sm-3">
 487                         <input autocomplete="off" class="form-control"
 488                             placeholder="{{'PAGE.VIMDETAILS.VROPSUSER' | translate}}" type="text"
 489                             formControlName="vrops_user" id="vrops_user">
 490                     </div>
 491                 </div>
 492                 <div class="row form-group content-style">
 493                     <div class="col-sm-3">
 494                         <label for="nsx_password">{{'PAGE.VIMDETAILS.NSXPASSWORD' | translate}}</label>
 495                     </div>
 496                     <div class="col-sm-3">
 497                         <input autocomplete="off" class="form-control"
 498                             placeholder="{{'PAGE.VIMDETAILS.NSXPASSWORD' | translate}}" type="text"
 499                             formControlName="nsx_password" id="nsx_password">
 500                     </div>
 501                     <div class="col-sm-3">
 502                         <label for="vrops_password">{{'PAGE.VIMDETAILS.VROPSPASSWORD' | translate}}</label>
 503                     </div>
 504                     <div class="col-sm-3">
 505                         <input autocomplete="off" class="form-control"
 506                             placeholder="{{'PAGE.VIMDETAILS.VROPSPASSWORD' | translate}}" type="text"
 507                             formControlName="vrops_password" id="vrops_password">
 508                     </div>
 509                 </div>
 510                 <div class="row form-group content-style">
 511                     <div class="col-sm-3">
 512                         <label for="additional_conf">{{'PAGE.VIMDETAILS.ADDITIONALCONFIG' | translate}}</label>
 513                     </div>
 514                     <div class="col-sm-3">
 515                         <input autocomplete="off" class="form-control"
 516                             placeholder="{{'PAGE.VIMDETAILS.ADDITIONALCONFIGPLACEHOLDER' | translate}}" type="text"
 517                             formControlName="additional_conf" id="additional_conf">
 518                     </div>
 519                 </div>
 520             </div>
 521             <div *ngIf="selectedVimType == 'aws'">
 522                 <div class="row form-group content-style">
 523                     <div class="col-sm-3">
 524                         <label for="sdn_controller">{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}</label>
 525                     </div>
 526                     <div class="col-sm-3">
 527                         <input autocomplete="off" class="form-control"
 528                             placeholder="{{'PAGE.VIMDETAILS.SDNCONTROLLER' | translate}}" type="text"
 529                             formControlName="sdn_controller" id="sdn_controller">
 530                     </div>
 531                     <div class="col-sm-3">
 532                         <label for="vpc_cidr_block">{{'PAGE.VIMDETAILS.VPCCIDRBLOCK' | translate}}</label>
 533                     </div>
 534                     <div class="col-sm-3">
 535                         <input autocomplete="off" class="form-control"
 536                             placeholder="{{'PAGE.VIMDETAILS.VPCCIDRBLOCK' | translate}}" type="text"
 537                             formControlName="vpc_cidr_block" id="vpc_cidr_block">
 538                     </div>
 539                 </div>
 540                 <div class="row form-group content-style">
 541                     <div class="col-sm-3">
 542                         <label for="sdn_port_mapping">{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}</label>
 543                     </div>
 544                     <div class="col-sm-3">
 545                         <input autocomplete="off" class="form-control"
 546                             placeholder="{{'PAGE.VIMDETAILS.SDNPORTMAPPING' | translate}}" type="text"
 547                             formControlName="sdn_port_mapping" id="sdn_port_mapping">
 548                     </div>
 549                     <div class="col-sm-3">
 550                         <label for="security_groups">{{'PAGE.VIMDETAILS.SECURITYGROUPS' | translate}}</label>
 551                     </div>
 552                     <div class="col-sm-3">
 553                         <input autocomplete="off" class="form-control"
 554                             placeholder="{{'PAGE.VIMDETAILS.SECURITYGROUPS' | translate}}" type="text"
 555                             formControlName="security_groups" id="security_groups">
 556                     </div>
 557                 </div>
 558                 <div class="row form-group content-style">
 559                     <div class="col-sm-3">
 560                         <label for="vim_network_name">{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}</label>
 561                     </div>
 562                     <div class="col-sm-3">
 563                         <input autocomplete="off" class="form-control"
 564                             placeholder="{{'PAGE.VIMDETAILS.VIMNETWORKNAME' | translate}}" type="text"
 565                             formControlName="vim_network_name" id="vim_network_name">
 566                     </div>
 567                     <div class="col-sm-3">
 568                         <label for="keypair">{{'PAGE.VIMDETAILS.KEYPAIR' | translate}}</label>
 569                     </div>
 570                     <div class="col-sm-3">
 571                         <input autocomplete="off" class="form-control"
 572                             placeholder="{{'PAGE.VIMDETAILS.KEYPAIR' | translate}}" type="text"
 573                             formControlName="keypair" id="keypair">
 574                     </div>
 575                 </div>
 576                 <div class="row form-group content-style">
 577                     <div class="col-sm-3">
 578                         <label for="region_name">{{'PAGE.VIMDETAILS.REGIONALNAME' | translate}}</label>
 579                     </div>
 580                     <div class="col-sm-3">
 581                         <input autocomplete="off" class="form-control"
 582                             placeholder="{{'PAGE.VIMDETAILS.REGIONALNAME' | translate}}" type="text"
 583                             formControlName="region_name" id="region_name">
 584                     </div>
 585                     <div class="col-sm-3">
 586                         <label for="flavor_info">{{'PAGE.VIMDETAILS.FLAVORIINFO' | translate}}</label>
 587                     </div>
 588                     <div class="col-sm-3">
 589                         <input autocomplete="off" class="form-control"
 590                             placeholder="{{'PAGE.VIMDETAILS.FLAVORIINFO' | translate}}" type="text"
 591                             formControlName="flavor_info" id="flavor_info">
 592                     </div>
 593                 </div>
 594                 <div class="row form-group content-style">
 595                     <div class="col-sm-3">
 596                         <label for="additional_conf">{{'PAGE.VIMDETAILS.ADDITIONALCONFIG' | translate}}</label>
 597                     </div>
 598                     <div class="col-sm-3">
 599                         <input autocomplete="off" class="form-control"
 600                             placeholder="{{'PAGE.VIMDETAILS.ADDITIONALCONFIGPLACEHOLDER' | translate}}" type="text"
 601                             formControlName="additional_conf" id="additional_conf">
 602                     </div>
 603                 </div>
 604             </div>
 605             <div *ngIf="selectedVimType == 'azure'">
 606                 <div class="row form-group content-style">
 607                     <div class="col-sm-3">
 608                         <label for="subscription_id">{{'PAGE.VIMDETAILS.SUBSCRIPTIONID' | translate}}</label>
 609                     </div>
 610                     <div class="col-sm-3">
 611                         <input autocomplete="off" class="form-control"
 612                             placeholder="{{'PAGE.VIMDETAILS.SUBSCRIPTIONID' | translate}}" type="text"
 613                             formControlName="subscription_id" id="subscription_id">
 614                     </div>
 615                     <div class="col-sm-3">
 616                         <label for="region_name">{{'PAGE.VIMDETAILS.REGIONALNAME' | translate}}</label>
 617                     </div>
 618                     <div class="col-sm-3">
 619                         <input autocomplete="off" class="form-control"
 620                             placeholder="{{'PAGE.VIMDETAILS.REGIONALNAME' | translate}}" type="text"
 621                             formControlName="region_name" id="region_name">
 622                     </div>
 623                 </div>
 624                 <div class="row form-group content-style">
 625                     <div class="col-sm-3">
 626                         <label for="resource_group">{{'PAGE.VIMDETAILS.RESOURCEGROUP' | translate}}</label>
 627                     </div>
 628                     <div class="col-sm-3">
 629                         <input autocomplete="off" class="form-control"
 630                             placeholder="{{'PAGE.VIMDETAILS.RESOURCEGROUP' | translate}}" type="text"
 631                             formControlName="resource_group" id="resource_group">
 632                     </div>
 633                     <div class="col-sm-3">
 634                         <label for="vnet_name">{{'PAGE.VIMDETAILS.VNETNAME' | translate}}</label>
 635                     </div>
 636                     <div class="col-sm-3">
 637                         <input autocomplete="off" class="form-control"
 638                             placeholder="{{'PAGE.VIMDETAILS.VNETNAME' | translate}}" type="text"
 639                             formControlName="vnet_name" id="vnet_name">
 640                     </div>
 641                 </div>
 642                 <div class="row form-group content-style">
 643                     <div class="col-sm-3">
 644                         <label for="flavors_pattern">{{'PAGE.VIMDETAILS.FLAVORSPATTERN' | translate}}</label>
 645                     </div>
 646                     <div class="col-sm-3">
 647                         <input autocomplete="off" class="form-control"
 648                             placeholder="{{'PAGE.VIMDETAILS.FLAVORSPATTERN' | translate}}" type="text"
 649                             formControlName="flavors_pattern" id="flavors_pattern">
 650                     </div>
 651                 </div>
 652             </div>
 653         </div>
 654     </div>
 655     <div class="modal-footer">
 656         <button type="button" (click)="onVimAccountBack()"
 657             class="btn btn-danger">{{'PAGE.VIMDETAILS.BACKTOVIMACCOUNTS' | translate}}</button>
 658         <button type="submit" class="btn btn-primary">{{'CREATE' | translate}}</button>
 659     </div>
 660 </form>
 661 <app-loader [waitingMessage]="message" *ngIf="isLocationLoadingResults"></app-loader>