mod2/ui/src/app/comp-spec-validation/comp-spec-validation.component.html

   1 <!--
   2   # ============LICENSE_START=======================================================
   3   # Copyright (c) 2020 AT&T Intellectual Property. All rights reserved.
   4   # ================================================================================
   5   # Licensed under the Apache License, Version 2.0 (the "License");
   6   # you may not use this file except in compliance with the License.
   7   # You may obtain a copy of the License at
   8   #
   9   #      http://www.apache.org/licenses/LICENSE-2.0
  10   #
  11   # Unless required by applicable law or agreed to in writing, software
  12   # distributed under the License is distributed on an "AS IS" BASIS,
  13   # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14   # See the License for the specific language governing permissions and
  15   # limitations under the License.
  16   # ============LICENSE_END=========================================================
  17  -->
  18
  19 <div style="margin-left: 2%; margin-right: 2%;">
  20     <p style="font-size: 26px;">Component Specification Validation</p>
  21     <div style="display: inline-flex; width: 100%; height: 100%; min-height: 450px;">
  22         <div class="validator-input-card">
  23             <div>
  24             <mat-card class="input-section-card">
  25                 <span><b>Action</b></span><span style="color:red">*</span><br>
  26                 <div style="display: inline-flex;">
  27                     <div style="padding-right: 10%; width: 200px;">
  28                         <p-radioButton name="spec-validator-actions" value="validateSpec" [(ngModel)]="spec_validator_action" (click)="validateRadioButton()"></p-radioButton>&nbsp;&nbsp;Validate Spec File
  29                     </div>
  30                     <div>
  31                         <p-radioButton name="spec-validator-actions" value="downloadSchema" [(ngModel)]="spec_validator_action" (click)="downloadRadioButton()"></p-radioButton>&nbsp;&nbsp;Download Schema
  32                     </div>
  33                 </div>
  34             </mat-card>
  35
  36             <mat-card class="input-section-card">
  37                 <span><b>Release</b></span><span style="color:red">*</span><br>
  38                 <div>
  39                     <div style="display: inline-flex; align-items: center;">
  40                         <p-radioButton name="spec-validator-release" value="2007" [(ngModel)]="release"></p-radioButton>&nbsp;&nbsp;2007+
  41                     </div>
  42                 </div>
  43             </mat-card>
  44
  45             <mat-card class="input-section-card">
  46                 <span><b>Type</b></span><span style="color:red">*</span><br>
  47                 <div>
  48                     <div style="display: inline-flex; align-items: center;">
  49                         <p-radioButton name="spec-validator-type" value="k8s" [(ngModel)]="type"></p-radioButton>&nbsp;&nbsp;K8s
  50                     </div>
  51                     <br>
  52                     <div style="display: inline-flex; align-items: center;">
  53                         <p-radioButton name="spec-validator-type" value="docker" [(ngModel)]="type"></p-radioButton>&nbsp;&nbsp;Docker
  54                     </div>
  55                 </div>
  56             </mat-card>
  57
  58             <mat-card *ngIf="spec_validator_action === 'validateSpec'" class="input-section-card">
  59                 <!-- * * * Comp Spec File Select * * * -->
  60                 <div>
  61                     <b>Component Spec File</b><span style="color:red">*</span><br>
  62
  63                     <div style="display: inline-flex;">
  64                         <input #myFile type="file" style="color:blue; font-style: italic; width: fit-content"
  65                             (input)="onCompSpecUpload($event)" name="myfile" accept=".json">
  66
  67                         <button pButton type="button" (click)="resetFile()"
  68                             style="background-color: transparent; border: none; height: 20px;"><i class="pi pi-times"
  69                                 style="color: black;"></i></button>
  70                     </div>
  71                 </div>
  72             </mat-card>
  73
  74             <div>
  75                 <div *ngIf="shouldValidate" style="background-color: rgba(128, 128, 128, 0.315); height: 2px; width: 100%; margin-top: 2%;"></div>
  76                 <div *ngIf="shouldDownload" style="background-color: rgba(128, 128, 128, 0.315); height: 2px; width: 100%; margin-top: 22%;"></div>
  77
  78                 <div style="float: right; margin-top: 8px">
  79                     <div *ngIf="shouldValidate" matTooltip="Fill In Required Fields" [matTooltipDisabled]="!(release === '' || type === '' || compSpecContent === null)" matTooltipPosition="above">
  80                         <button [disabled]="release === '' || type === '' || compSpecContent === null" pButton label="Validate Spec" type="button" (click)="validateSpec()"></button>
  81                     </div>
  82                     <div *ngIf="shouldDownload" matTooltip="Fill In Required Fields" [matTooltipDisabled]="!(release === '' || type === '')" matTooltipPosition="above">
  83                         <button [disabled]="release === '' || type === ''" pButton label="Download Schema" type="button" (click)="downloadSchema()"></button>
  84                     </div>
  85                 </div>
  86             </div>
  87             </div>
  88         </div>
  89
  90         <div *ngIf="shouldValidate" class="validator-output-card">
  91             <span><b>Output:</b></span><br><br>
  92             <div *ngIf="specValidated" style="width: 100%; padding: 1%; border-radius: 3px; overflow: hidden;" [ngClass]="{'greenOutput' : validCompSpec === true, 'redOutput' : validCompSpec === false}">
  93                 <div>
  94                     <span style="font-weight: 500;">{{specValidationOutputHeader}}</span>
  95                     <div *ngIf="specValidationOutputMessage !== ''" style="margin-top: 10px; width: 100%; height: 2px; background-color: rgba(128, 128, 128, 0.315); "></div>
  96
  97                     <div *ngIf="specValidationOutputMessage !== ''" style="margin-top: 10px">
  98                         <p-scrollPanel [style]="{width: '100%', height: '50vh'}">
  99                             <pre style="white-space: pre-wrap;"><b>Summary:</b><br>{{specValidationOutputSummary}}</pre>
 100                             <pre style="white-space: pre-wrap;"><b>Message(s):</b><br>{{specValidationOutputMessage}}</pre>
 101                         </p-scrollPanel>
 102                     </div>
 103
 104                 </div>
 105             </div>
 106         </div>
 107     </div>
 108 </div>