gerrit.onap Code Review - ccsdk/cds.git/blob

   1 <div class="execution-setup-container">
   2     <div class="row">
   3         <!-- Left column: form fields -->
   4         <div class="col-md-4">
   5             <div class="card setup-card">
   6                 <div class="card-body">
   7                     <h5 class="card-title">Blueprint Selection</h5>
   8
   9                     <div class="form-group">
  10                         <label for="blueprintName">Blueprint Name</label>
  11                         <select id="blueprintName"
  12                                 class="form-control"
  13                                 [(ngModel)]="blueprintName"
  14                                 (ngModelChange)="onBlueprintNameChange()">
  15                             <option value="" disabled>Select a blueprint...</option>
  16                             <option *ngFor="let name of uniquePackageNames" [value]="name">
  17                                 {{ name }}
  18                             </option>
  19                         </select>
  20                     </div>
  21
  22                     <div class="form-group">
  23                         <label for="blueprintVersion">Version</label>
  24                         <select id="blueprintVersion"
  25                                 class="form-control"
  26                                 [(ngModel)]="blueprintVersion"
  27                                 (ngModelChange)="onBlueprintVersionChange()"
  28                                 [disabled]="availableVersions.length === 0">
  29                             <option value="" disabled>Select version...</option>
  30                             <option *ngFor="let ver of availableVersions" [value]="ver">
  31                                 {{ ver }}
  32                             </option>
  33                         </select>
  34                     </div>
  35
  36                     <div class="form-group">
  37                         <label for="actionName">Action Name</label>
  38                         <select id="actionName"
  39                                 class="form-control"
  40                                 [(ngModel)]="actionName"
  41                                 (ngModelChange)="onActionChange()"
  42                                 [disabled]="availableActions.length === 0">
  43                             <option value="" disabled>Select an action...</option>
  44                             <option *ngFor="let action of availableActions" [value]="action">
  45                                 {{ action }}
  46                             </option>
  47                         </select>
  48                     </div>
  49
  50                     <!-- Action Inputs: loading state -->
  51                     <div *ngIf="loadingSpec" class="action-inputs-loading mt-2">
  52                         <i class="fa fa-spinner fa-spin mr-1"></i>
  53                         <small class="text-muted">Loading action inputs...</small>
  54                     </div>
  55
  56                     <!-- Action Inputs: spec load failed -->
  57                     <div *ngIf="actionName && !loadingSpec && specLoadFailed" class="action-inputs-error mt-2">
  58                         <small class="text-muted">
  59                             <i class="fa fa-exclamation-triangle mr-1"></i>
  60                             Could not load input schema. Edit the JSON payload manually.
  61                         </small>
  62                     </div>
  63
  64                     <!-- Action Inputs: dynamic form -->
  65                     <div *ngIf="actionName && !loadingSpec && inputGroups.length > 0"
  66                          class="action-inputs-section mt-3" id="actionInputs">
  67                         <label class="section-label">Action Inputs</label>
  68
  69                         <div *ngFor="let group of inputGroups" class="input-group-block">
  70                             <!-- Primitive input (not a data type reference) -->
  71                             <div *ngIf="!group.isComplex" class="form-group">
  72                                 <label [for]="'input-' + group.inputName" class="input-field-label">
  73                                     {{ group.inputName }}
  74                                     <span class="text-danger" *ngIf="group.required">*</span>
  75                                 </label>
  76                                 <input *ngIf="group.type !== 'boolean'"
  77                                        [id]="'input-' + group.inputName"
  78                                        class="form-control form-control-sm"
  79                                        [type]="group.type === 'integer' ? 'number' : 'text'"
  80                                        [(ngModel)]="group.value"
  81                                        (ngModelChange)="onFieldChange()"
  82                                        [placeholder]="group.description"
  83                                        [attr.data-input-name]="group.inputName">
  84                                 <select *ngIf="group.type === 'boolean'"
  85                                         [id]="'input-' + group.inputName"
  86                                         class="form-control form-control-sm"
  87                                         [(ngModel)]="group.value"
  88                                         (ngModelChange)="onFieldChange()"
  89                                         [attr.data-input-name]="group.inputName">
  90                                     <option value="">-- select --</option>
  91                                     <option value="true">true</option>
  92                                     <option value="false">false</option>
  93                                 </select>
  94                             </div>
  95
  96                             <!-- Complex input (data type with nested fields) -->
  97                             <div *ngIf="group.isComplex" class="complex-input-group">
  98                                 <label class="complex-group-label">
  99                                     {{ group.inputName }}
 100                                     <span class="text-danger" *ngIf="group.required">*</span>
 101                                 </label>
 102                                 <div class="complex-fields">
 103                                     <div *ngFor="let field of group.fields" class="form-group">
 104                                         <label [for]="'field-' + group.inputName + '-' + field.name"
 105                                                class="input-field-label">
 106                                             {{ field.name }}
 107                                             <span class="text-danger" *ngIf="field.required">*</span>
 108                                         </label>
 109                                         <input *ngIf="field.type !== 'boolean'"
 110                                                [id]="'field-' + group.inputName + '-' + field.name"
 111                                                class="form-control form-control-sm"
 112                                                [type]="field.type === 'integer' ? 'number' : 'text'"
 113                                                [(ngModel)]="field.value"
 114                                                (ngModelChange)="onFieldChange()"
 115                                                [placeholder]="field.description"
 116                                                [attr.data-field-name]="field.name">
 117                                         <select *ngIf="field.type === 'boolean'"
 118                                                 [id]="'field-' + group.inputName + '-' + field.name"
 119                                                 class="form-control form-control-sm"
 120                                                 [(ngModel)]="field.value"
 121                                                 (ngModelChange)="onFieldChange()"
 122                                                 [attr.data-field-name]="field.name">
 123                                             <option value="">-- select --</option>
 124                                             <option value="true">true</option>
 125                                             <option value="false">false</option>
 126                                         </select>
 127                                     </div>
 128                                 </div>
 129                             </div>
 130                         </div>
 131                     </div>
 132
 133                     <hr>
 134
 135                     <div class="execution-actions">
 136                         <button class="btn btn-primary btn-execute"
 137                                 [disabled]="!canExecute()"
 138                                 (click)="executeBlueprint()">
 139                             <i class="fa fa-play mr-1" *ngIf="!isExecuting"></i>
 140                             <i class="fa fa-spinner fa-spin mr-1" *ngIf="isExecuting"></i>
 141                             {{ isExecuting ? 'Executing...' : 'Execute' }}
 142                         </button>
 143                         <button class="btn btn-outline-secondary ml-2"
 144                                 (click)="resetPayload()">
 145                             <i class="fa fa-refresh mr-1"></i> Reset
 146                         </button>
 147                     </div>
 148                 </div>
 149             </div>
 150         </div>
 151
 152         <!-- Right column: JSON payload editor -->
 153         <div class="col-md-8">
 154             <div class="card editor-card">
 155                 <div class="card-body">
 156                     <h5 class="card-title">Request Payload (ExecutionServiceInput)</h5>
 157                     <div class="ace-editor-wrapper">
 158                         <ace-editor
 159                             [(text)]="payloadText"
 160                             [mode]="'json'"
 161                             [theme]="'eclipse'"
 162                             [options]="aceOptions"
 163                             style="min-height: 350px; width: 100%; font-size: 13px;">
 164                         </ace-editor>
 165                     </div>
 166                 </div>
 167             </div>
 168
 169             <!-- Response panel -->
 170             <div class="card response-card mt-3" *ngIf="lastResponseText">
 171                 <div class="card-body">
 172                     <h5 class="card-title">
 173                         <i class="fa fa-check-circle text-success mr-1" *ngIf="lastResponse"></i>
 174                         <i class="fa fa-times-circle text-danger mr-1" *ngIf="!lastResponse"></i>
 175                         Execution Response
 176                     </h5>
 177                     <div class="ace-editor-wrapper">
 178                         <ace-editor
 179                             [text]="lastResponseText"
 180                             [mode]="'json'"
 181                             [theme]="'eclipse'"
 182                             [readOnly]="true"
 183                             [options]="{ maxLines: 20, minLines: 5, showPrintMargin: false }"
 184                             style="min-height: 150px; width: 100%; font-size: 13px;">
 185                         </ace-editor>
 186                     </div>
 187                 </div>
 188             </div>
 189         </div>
 190     </div>
 191 </div>