src/app/test/test.component.html

   1 <!--
   2 ============LICENSE_START==========================================
   3 ===================================================================
   4 Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
   5 ===================================================================
   6
   7 Unless otherwise specified, all software contained herein is licensed
   8 under the Apache License, Version 2.0 (the License);
   9 you may not use this software except in compliance with the License.
  10 You may obtain a copy of the License at
  11
  12     http://www.apache.org/licenses/LICENSE-2.0
  13
  14 Unless required by applicable law or agreed to in writing, software
  15 distributed under the License is distributed on an "AS IS" BASIS,
  16 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17 See the License for the specific language governing permissions and
  18 limitations under the License.
  19
  20 ============LICENSE_END============================================
  21 -->
  22 <simple-notifications [options]="options"></simple-notifications>
  23 <ngx-spinner bdColor="rgba(51,51,51,0.8)"
  24   size="large"
  25   color="orange"
  26   loadingText="Uploading test spreadsheet..."
  27   type="ball-scale-multiple"></ngx-spinner>
  28 <ng-progress [positionUsing]="'marginLeft'" [minimum]="0.15" [maximum]="1" [speed]="200" [showSpinner]="false" [direction]="'leftToRightIncreased'" [color]="'#6ab344'"
  29     [trickleSpeed]="250" [thick]="true" [ease]="'linear'"></ng-progress>
  30
  31 <div class="card" style=" margin-bottom: 23px;">
  32     <div class="card-block" style="border-top: 5px solid #6ab344;border-top-right-radius: 7px;border-top-left-radius: 7px;">
  33         <div class="row" style="padding: 10px 15px">
  34             <div class="col-lg-3 col-sm-6 col-md-4 col-xs-12">
  35                 <label>Action:</label>
  36                 <input class="form-control" type="text" disabled value="{{action}}" />
  37             </div>
  38
  39             <div class="col-lg-3 col-sm-6 col-md-4 col-xs-12">
  40                 <label>Vnf Id:</label>
  41                 <input class="form-control" type="text" [(ngModel)]="this.actionIdentifiers['vnf-id']" />
  42
  43             </div>
  44
  45             <div class="col-lg-3 col-sm-6 col-md-4 col-xs-12" *ngIf="this.actionIdentifiers['vserver-id']">
  46                 <label>Vserver-Id(optional):</label>
  47                 <input class="form-control" disabled type="text" [(ngModel)]="this.actionIdentifiers['vserver-id']" />
  48
  49             </div>
  50         </div>
  51         <div class="row" style="padding: 10px 15px">
  52
  53             <div class="col-12">
  54                 <div class="input-group">
  55                     <input id="excelInputFile" #myInput1 hidden class="file" type="file" (change)="upload($event)">
  56                     <input [(ngModel)]="uploadFileName" type="text" class="input-lg" disabled placeholder="Upload SpreadSheet" name="uploadFileName" style="width:80%">
  57                     <button (click)="excelBrowseOption($event)" [disabled]="!enableBrowse" class="browse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary input-lg"
  58                         type="button">Upload SpreadSheet
  59                     </button>
  60                 </div>
  61             </div>
  62
  63         </div>
  64         <div class="row" style="padding: 10px 15px">
  65                 <div class="col-lg-3 col-sm-6 col-md-4 col-xs-12">
  66                     <label>Force Flag  </label>
  67                     <input [(ngModel)]="force" name="Force Flag" type="checkbox">
  68                 </div>
  69         </div>
  70
  71     </div>
  72 </div>
  73 <br>
  74
  75 <div class="card">
  76
  77     <div class="card-block">
  78
  79         <div class="row">
  80             <div class="col-md-6">
  81                 <span style="margin-left: 5%"><b>REQUEST:</b></span>
  82             </div>
  83             <div class="col-md-6">
  84                 <span style="margin-left: 5%"><b>RESPONSE:</b></span>
  85             </div>
  86
  87             <div class="col-md-6">
  88                 <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
  89
  90                     <div style="height:200px;width:100%;border:solid 2px grey;overflow:scroll;overflow-x:hidden;overflow-y:scroll;">
  91                         <p style="height:450px;" disabled class="text-center">
  92                             {{apiRequest}}
  93                         </p>
  94                     </div>
  95                 </div>
  96
  97             </div>
  98
  99             <div class="col-md-6">
 100                 <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
 101
 102                     <div style="height:200px;width:100%;border:solid 2px grey;overflow:scroll;overflow-x:hidden;overflow-y:scroll;">
 103                         <p style="height:450px;" disabled class="text-center">
 104                             {{apiResponse}}
 105                         </p>
 106                     </div>
 107                 </div>
 108
 109             </div>
 110
 111             <div class="col-md-12">
 112                 <div class="row justify-content-center" style="padding-top:0.3cm">
 113
 114                     <button style="margin-left:6%;" [disabled]="!enableTestButton" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary"
 115                         type="submit" (click)="testVnf()">Execute Test
 116                     </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 117
 118                 </div>
 119
 120             </div>
 121
 122         </div>
 123
 124     </div>
 125
 126     <div style="padding-left:60%;padding-bottom:0.5cm">
 127         <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary" type="button" [disabled]="!enableDownload" (click)="download()">Download Raw Request/Response
 128         </button>
 129         <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" type="button" [disabled]="!enableAbort" (click)="abortTest()">Abandon Test
 130         </button>
 131
 132     </div>
 133 </div>
 134 <br>
 135 <div class="card">
 136     <div class="card-block">
 137
 138         <div class="mdl-dialog__content" style="border:solid 1px grey;">
 139
 140             <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="margin-left: 25%">
 141                 <input placeholder="Request Id" [(ngModel)]="requestId" class="mdl-textfield__input" id="requestId" required name="requestId">
 142             </div><br/>
 143             <button style="margin-left: 33%" type="submit" [disabled]="!enablePollButton" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary"
 144                 (click)=pollTestStatus()>Poll Test Status
 145             </button>
 146             <br/><br/>
 147             <div class="col-md-12">
 148                 <span style="margin-left: 11%"><b>POLL TEST STATUS RESPONSE</b></span>
 149             </div>
 150
 151             <div style="margin-left: 11%;height:150px;width:80%;border:solid 2px grey;overflow:scroll;overflow-x:hidden;overflow-y:hidden;">
 152
 153                 <div *ngIf="showStatusResponseDiv">
 154                     <div *ngIf="enableCounterDiv"><b>Poll test no {{pollCounter}}</b></div>
 155                     <table>
 156                         <thead></thead>
 157                         <tbody>
 158                             <tr>
 159                                 <td>
 160                                     <div class="android-title mdl-layout-title">TimeStamp :</div>
 161                                 </td>
 162                                 <td>
 163                                     <div class="android-title mdl-layout-title">{{outputTimeStamp}}</div>
 164                                 </td>
 165                             </tr>
 166                             <tr>
 167                                 <td>
 168                                     <div class="android-title mdl-layout-title">Status :</div>
 169                                 </td>
 170                                 <td>
 171                                     <div class="android-title mdl-layout-title">{{status}}</div>
 172                                 </td>
 173                             </tr>
 174                             <tr>
 175                                 <td>
 176                                     <div class="android-title mdl-layout-title">Status Reason:</div>
 177                                 </td>
 178                                 <td>
 179                                     <div class="android-title mdl-layout-title">{{statusReason}}</div>
 180                                 </td>
 181                             </tr>
 182                         </tbody>
 183                     </table>
 184                 </div>
 185                 <div *ngIf="!showStatusResponseDiv">
 186                     <div *ngIf="enableCounterDiv"><b>Poll test no {{pollCounter}}</b></div>
 187                     <span>{{statusResponse}}</span>
 188                 </div>
 189
 190                 <div *ngIf="errorResponse">
 191                     <p style="height:450px;" disabled class="text-center">
 192                         {{errorResponse}}
 193                     </p>
 194                 </div>
 195
 196             </div>
 197         </div>
 198     </div>
 199 </div>