otf-frontend/client/src/app/layout/modeler/modeler.component.pug

   1 //-  Copyright (c) 2019 AT&T Intellectual Property.                             #\r
   2 //-                                                                             #\r
   3 //-  Licensed under the Apache License, Version 2.0 (the "License");            #\r
   4 //-  you may not use this file except in compliance with the License.           #\r
   5 //-  You may obtain a copy of the License at                                    #\r
   6 //-                                                                             #\r
   7 //-      http://www.apache.org/licenses/LICENSE-2.0                             #\r
   8 //-                                                                             #\r
   9 //-  Unless required by applicable law or agreed to in writing, software        #\r
  10 //-  distributed under the License is distributed on an "AS IS" BASIS,          #\r
  11 //-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #\r
  12 //-  See the License for the specific language governing permissions and        #\r
  13 //-  limitations under the License.                                             #\r
  14 //- #############################################################################\r
  15 \r
  16 \r
  17 div(#container, style="width:100%;height:100%")\r
  18         form(#testDefinitionForm="ngForm")\r
  19 \r
  20                 //- Tool Bar\r
  21                 div#tool-bar\r
  22                         input#file(type="file", #file, hidden, (change)="open()")\r
  23                         input#fileForVersion(type="file", #fileForVersion, hidden, (change)="newVersion({fromFile: true})")\r
  24                         .row.pl-2\r
  25                         \r
  26                                 //- BPMN Diagram items  \r
  27 \r
  28                                 .col(style="flex: 0 0 180px;-ms-flex: 0 0 180px;")\r
  29                                         .row.no-margin.pl-1\r
  30                                                 .small.text-muted BPMN Diagram\r
  31                                         .row.p-0.pl-2(style="margin-top: -10px")\r
  32                                                 button(mat-icon-button, [matMenuTriggerFor]="newMenu")\r
  33                                                         mat-icon insert_drive_file \r
  34                                                                 span(style="margin-left: -7px") arrow_drop_down\r
  35                                                 mat-menu(#newMenu="matMenu")\r
  36                                                         button.text-small(mat-menu-item, (click)="newWorkflow()") New Workflow\r
  37                                                 button(mat-icon-button, matTooltip="Open BPMN", (click)="file.click()")\r
  38                                                         mat-icon folder_open\r
  39                                                 button(mat-icon-button, matTooltip="Download BPMN", (click)="download()")\r
  40                                                         mat-icon cloud_download\r
  41                                                 button(mat-icon-button, matTooltip="View XML", disabled)\r
  42                                                         mat-icon code\r
  43                                                 \r
  44 \r
  45                                 mat-divider([vertical]="true")\r
  46 \r
  47                                 //- Test Definition items\r
  48 \r
  49                                 .col-3()\r
  50                                         .row.no-margin.pl-1\r
  51                                                 .small.text-muted Test Definition\r
  52                                         .row.p-0.pl-2(style="margin-top: -10px")\r
  53                                                 //- Save & Update\r
  54                                                 button(mat-icon-button, matTooltip="Save Test Definition", [disabled]="inProgress || !testDefinitionForm.form.valid || (hasBeenSaved && !testDefinitionForm.dirty)", (click)="save()")\r
  55                                                         mat-icon save\r
  56                                                 //- Deploy\r
  57                                                 button(mat-icon-button, matTooltip="Deploy Test Definition", [disabled]="!testDefinitionForm.form.valid || ptd?.currentInstance?.isDeployed || !hasBeenSaved || !testDefinitionForm.pristine || inProgress", (click)="deploy()")\r
  58                                                         mat-icon cloud_upload\r
  59                                                 //- Delete Version\r
  60                                                 button(mat-icon-button, matTooltip="Delete Version", [disabled]="!hasBeenSaved || inProgress", (click)="deleteVersion()")\r
  61                                                         mat-icon delete_forever\r
  62 \r
  63                                                 //- Version Select\r
  64                                                 mat-form-field(*ngIf="ptd", style="width: 80px")\r
  65                                                         mat-select(disableOptionCentering, (selectionChange)="setVersion(ptd.currentVersionName)", placeholder="Version", name="selectedVersion", [(ngModel)]="ptd.currentVersionName")\r
  66                                                                 mat-option(*ngFor="let instance of ptd.bpmnInstances.slice().reverse()", value="{{instance.version}}") {{ instance.version }}\r
  67                                                 button(mat-icon-button, [matMenuTriggerFor]="versionMenu", matTooltip="New Version")\r
  68                                                         mat-icon add\r
  69                                                 mat-menu(#versionMenu="matMenu")\r
  70                                                         button(mat-menu-item, [matMenuTriggerFor]="fromVersion") Create from version\r
  71                                                         button(mat-menu-item, (click)="newVersion()") Create blank version\r
  72                                                         button(mat-menu-item, (click)="fileForVersion.click()") Create from file\r
  73                                                 mat-menu(#fromVersion="matMenu")\r
  74                                                         button(mat-menu-item, *ngFor="let instance of ptd?.bpmnInstances.slice().reverse(); let i = index", (click)="newVersion({versionIndex: ptd.bpmnInstances.length - i - 1})") {{ instance.version }}\r
  75 \r
  76                                         \r
  77                 div#left_panel(#modeler)\r
  78                         .panel-buttons\r
  79                                 .properties-panel-button((click)="toggleProperties()") Properties Panel\r
  80                                 .properties-panel-button((click)="toggleTestDefinition()") Test Definition\r
  81                 div.properties-panel(#sidebar, [hidden]="!showSidebar")\r
  82                         div#properties(#properties, [hidden]="!showProperties", style="width:100%")\r
  83                         div(#testDefinition, *ngIf="ptd", [hidden]="!showTestDefinition", style="width:100%;")\r
  84                                 .col-12\r
  85                                         .row.mt-2\r
  86                                                 .col-12\r
  87                                                         \r
  88                                                         //- Test Definition Form\r
  89 \r
  90                                                         h4 Details\r
  91 \r
  92                                                         mat-form-field(style="width:100%")\r
  93                                                                 input(matInput, type="text", placeholder="Name", name="name", [disabled]="(existingTd && !hasBeenSaved)", [(ngModel)]="ptd.testName", required)\r
  94                                                                 mat-error Required\r
  95                                                         mat-form-field(style="width:100%")\r
  96                                                                 input(matInput, type="text", placeholder="Description", name="description", [disabled]="(existingTd && !hasBeenSaved)", [(ngModel)]="ptd.testDescription", required)\r
  97                                                                 mat-error Required\r
  98                                                         mat-form-field(style="width:100%")\r
  99                                                                 mat-select((selectionChange)="markFormAs('dirty')", name="ns", [disabled]="(existingTd && !hasBeenSaved)", placeholder="Group", [(value)]="ptd.groupId", required)\r
 100                                                                         mat-option(*ngFor="let group of groups", value="{{group._id}}") {{ group.groupName }}\r
 101                                                                 mat-error Required\r
 102                                                         //- mat-form-field(style="width:100%")\r
 103                                                         //-     input(matInput, type="text", *ngIf="!hasBeenSaved", placeholder="Version", name="version", [(ngModel)]="ptd.currentInstance.version", (keyup)="checkVersionUnique()", required)\r
 104                                                         //-     mat-select((selectionChange)="switchVersion(ptd.currentVersionName)", placeholder="Version", name="selectedVersion", *ngIf="hasBeenSaved", [(value)]="ptd.currentVersionName", required)\r
 105                                                         //-             mat-option(*ngFor="let instance of ptd.bpmnInstances", value="{{instance.version}}") {{ instance.version }}\r
 106                                                         //-     mat-error Required\r
 107                                                         //-     button(mat-button, matSuffix, color="primary", *ngIf="hasBeenSaved", (click)="newVersion(this.ptd.processDefinitionKey)", onclick="file.click();") New\r
 108 \r
 109                                         //- .row.mt-2\r
 110                                         //-     .col-12\r
 111                                         //-             h4 Resources\r
 112                                         //-             .text-muted A single .zip file with scripts\r
 113                                         //- input(type="file", #scripts, id="scripts", name="scripts", hidden,  (change)="markFormAs('dirty')", ng2FileSelect, [uploader]="uploader", accept="application/zip")\r
 114                                         //- .row.mt-1(*ngIf="ptd.currentInstance.resourceFileId")\r
 115                                         //-     .col-12\r
 116                                         //-             mat-list\r
 117                                         //-                     mat-list-item\r
 118                                         //-                             mat-icon(mat-list-icon) insert_drive_file\r
 119                                         //-                             h4(mat-line) {{ptd.currentInstance.resourceFileName }}\r
 120                                         //- .row(*ngIf="!ptd.currentInstance.isDeployed")\r
 121                                         //-     .col-md-12\r
 122                                         //-             button(mat-raised-button, onclick="scripts.click()", color="primary") \r
 123                                         //-                     | {{ !ptd.currentInstance.resourceFileId ? 'Choose File' : 'Replace File' }}\r
 124                                                         \r
 125                                         //-     .col-md-12\r
 126                                         //-             div(*ngIf="uploader?.queue.length > 0")\r
 127                                         //-                     label File:\r
 128                                         //-                     ul.list-group(style="position:relative")\r
 129                                         //-                             li.list-group-item(*ngFor="let item of uploader.queue")\r
 130                                         //-                                     | {{ item?.file?.name }}\r
 131                                         //-                                     div.upload-progress([ngStyle]="{'width': item.progress + '%'}")\r
 132                                         //-                     //- button.pull-right(mat-button, (click)="upload()") Upload All\r
 133                                         //-                     label(*ngIf="ptd.currentInstance.resourceFileId && uploader.queue.length > 0 && !saved") This will replace the previous resouce file\r
 134                                         //-                     button.pull-right(mat-button, color="primary", (click)="clearQueue()") Remove All\r
 135                                         //- .row(*ngIf="ptd.currentInstance.isDeployed")\r
 136                                         //-     .col-12(*ngIf="!ptd.currentInstance.resourceFileId")\r
 137                                         //-             | No resources were deployed with this version\r
 138                                         \r
 139                                         .row.mt-3\r
 140                                                 .col-12(*ngIf="ptd.currentInstance.testDataTemplate != {}")\r
 141                                                         h4 testInputTemplate.yaml\r
 142                                                         div(style="border: 1px solid lightgrey; font-size: 12px !important")\r
 143                                                                 codemirror(*ngIf="isRefreshed", [config]="codeConfig", [(ngModel)]="ptd.currentInstance.testDataTemplate", name="testConfig")\r
 144 \r
 145 \r
 146                         #drag(#handle)\r
 147 \r
 148 div(style="position:absolute; bottom: 5px; left: 5px")\r
 149         div(*ngIf="inProgress")\r
 150                 mat-spinner([diameter]="15", style="display:inline")\r
 151                 div.ml-4(style="display:inline") In Progress\r
 152         div(*ngIf="ptd?.currentInstance?.isDeployed") Deployed\r
 153         div(*ngIf="hasBeenSaved && !testDefinitionForm.dirty") saved\r
 154                 mat-icon(style="color:green") check\r
 155         \r
 156         //- div Form valid: {{ form.valid }}\r
 157         //- div Form dirty: {{ form.dirty }}\r
 158         //- div hasBeenSaved: {{ hasBeenSaved }}\r
 159         //- div(*ngIf="ptd?.currentInstance?.bpmnHasChanged") ptd.currentInstance.bpmnHasChanged\r
 160         //- \r
 161         //- button((click)="popup()") popup\r
 162         //- button((click)="nav()") nav\r