added svcapi ui and camunda code
[it/otf.git] / otf-frontend / client / src / app / layout / modeler / modeler.component.pug
diff --git a/otf-frontend/client/src/app/layout/modeler/modeler.component.pug b/otf-frontend/client/src/app/layout/modeler/modeler.component.pug
new file mode 100644 (file)
index 0000000..a62cd9d
--- /dev/null
@@ -0,0 +1,162 @@
+//-  Copyright (c) 2019 AT&T Intellectual Property.                             #\r
+//-                                                                             #\r
+//-  Licensed under the Apache License, Version 2.0 (the "License");            #\r
+//-  you may not use this file except in compliance with the License.           #\r
+//-  You may obtain a copy of the License at                                    #\r
+//-                                                                             #\r
+//-      http://www.apache.org/licenses/LICENSE-2.0                             #\r
+//-                                                                             #\r
+//-  Unless required by applicable law or agreed to in writing, software        #\r
+//-  distributed under the License is distributed on an "AS IS" BASIS,          #\r
+//-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #\r
+//-  See the License for the specific language governing permissions and        #\r
+//-  limitations under the License.                                             #\r
+//- #############################################################################\r
+\r
+\r
+div(#container, style="width:100%;height:100%")\r
+       form(#testDefinitionForm="ngForm")\r
+\r
+               //- Tool Bar\r
+               div#tool-bar\r
+                       input#file(type="file", #file, hidden, (change)="open()")\r
+                       input#fileForVersion(type="file", #fileForVersion, hidden, (change)="newVersion({fromFile: true})")\r
+                       .row.pl-2\r
+                       \r
+                               //- BPMN Diagram items  \r
+\r
+                               .col(style="flex: 0 0 180px;-ms-flex: 0 0 180px;")\r
+                                       .row.no-margin.pl-1\r
+                                               .small.text-muted BPMN Diagram\r
+                                       .row.p-0.pl-2(style="margin-top: -10px")\r
+                                               button(mat-icon-button, [matMenuTriggerFor]="newMenu")\r
+                                                       mat-icon insert_drive_file \r
+                                                               span(style="margin-left: -7px") arrow_drop_down\r
+                                               mat-menu(#newMenu="matMenu")\r
+                                                       button.text-small(mat-menu-item, (click)="newWorkflow()") New Workflow\r
+                                               button(mat-icon-button, matTooltip="Open BPMN", (click)="file.click()")\r
+                                                       mat-icon folder_open\r
+                                               button(mat-icon-button, matTooltip="Download BPMN", (click)="download()")\r
+                                                       mat-icon cloud_download\r
+                                               button(mat-icon-button, matTooltip="View XML", disabled)\r
+                                                       mat-icon code\r
+                                               \r
+\r
+                               mat-divider([vertical]="true")\r
+\r
+                               //- Test Definition items\r
+\r
+                               .col-3()\r
+                                       .row.no-margin.pl-1\r
+                                               .small.text-muted Test Definition\r
+                                       .row.p-0.pl-2(style="margin-top: -10px")\r
+                                               //- Save & Update\r
+                                               button(mat-icon-button, matTooltip="Save Test Definition", [disabled]="inProgress || !testDefinitionForm.form.valid || (hasBeenSaved && !testDefinitionForm.dirty)", (click)="save()")\r
+                                                       mat-icon save\r
+                                               //- Deploy\r
+                                               button(mat-icon-button, matTooltip="Deploy Test Definition", [disabled]="!testDefinitionForm.form.valid || ptd?.currentInstance?.isDeployed || !hasBeenSaved || !testDefinitionForm.pristine || inProgress", (click)="deploy()")\r
+                                                       mat-icon cloud_upload\r
+                                               //- Delete Version\r
+                                               button(mat-icon-button, matTooltip="Delete Version", [disabled]="!hasBeenSaved || inProgress", (click)="deleteVersion()")\r
+                                                       mat-icon delete_forever\r
+\r
+                                               //- Version Select\r
+                                               mat-form-field(*ngIf="ptd", style="width: 80px")\r
+                                                       mat-select(disableOptionCentering, (selectionChange)="setVersion(ptd.currentVersionName)", placeholder="Version", name="selectedVersion", [(ngModel)]="ptd.currentVersionName")\r
+                                                               mat-option(*ngFor="let instance of ptd.bpmnInstances.slice().reverse()", value="{{instance.version}}") {{ instance.version }}\r
+                                               button(mat-icon-button, [matMenuTriggerFor]="versionMenu", matTooltip="New Version")\r
+                                                       mat-icon add\r
+                                               mat-menu(#versionMenu="matMenu")\r
+                                                       button(mat-menu-item, [matMenuTriggerFor]="fromVersion") Create from version\r
+                                                       button(mat-menu-item, (click)="newVersion()") Create blank version\r
+                                                       button(mat-menu-item, (click)="fileForVersion.click()") Create from file\r
+                                               mat-menu(#fromVersion="matMenu")\r
+                                                       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
+\r
+                                       \r
+               div#left_panel(#modeler)\r
+                       .panel-buttons\r
+                               .properties-panel-button((click)="toggleProperties()") Properties Panel\r
+                               .properties-panel-button((click)="toggleTestDefinition()") Test Definition\r
+               div.properties-panel(#sidebar, [hidden]="!showSidebar")\r
+                       div#properties(#properties, [hidden]="!showProperties", style="width:100%")\r
+                       div(#testDefinition, *ngIf="ptd", [hidden]="!showTestDefinition", style="width:100%;")\r
+                               .col-12\r
+                                       .row.mt-2\r
+                                               .col-12\r
+                                                       \r
+                                                       //- Test Definition Form\r
+\r
+                                                       h4 Details\r
+\r
+                                                       mat-form-field(style="width:100%")\r
+                                                               input(matInput, type="text", placeholder="Name", name="name", [disabled]="(existingTd && !hasBeenSaved)", [(ngModel)]="ptd.testName", required)\r
+                                                               mat-error Required\r
+                                                       mat-form-field(style="width:100%")\r
+                                                               input(matInput, type="text", placeholder="Description", name="description", [disabled]="(existingTd && !hasBeenSaved)", [(ngModel)]="ptd.testDescription", required)\r
+                                                               mat-error Required\r
+                                                       mat-form-field(style="width:100%")\r
+                                                               mat-select((selectionChange)="markFormAs('dirty')", name="ns", [disabled]="(existingTd && !hasBeenSaved)", placeholder="Group", [(value)]="ptd.groupId", required)\r
+                                                                       mat-option(*ngFor="let group of groups", value="{{group._id}}") {{ group.groupName }}\r
+                                                               mat-error Required\r
+                                                       //- mat-form-field(style="width:100%")\r
+                                                       //-     input(matInput, type="text", *ngIf="!hasBeenSaved", placeholder="Version", name="version", [(ngModel)]="ptd.currentInstance.version", (keyup)="checkVersionUnique()", required)\r
+                                                       //-     mat-select((selectionChange)="switchVersion(ptd.currentVersionName)", placeholder="Version", name="selectedVersion", *ngIf="hasBeenSaved", [(value)]="ptd.currentVersionName", required)\r
+                                                       //-             mat-option(*ngFor="let instance of ptd.bpmnInstances", value="{{instance.version}}") {{ instance.version }}\r
+                                                       //-     mat-error Required\r
+                                                       //-     button(mat-button, matSuffix, color="primary", *ngIf="hasBeenSaved", (click)="newVersion(this.ptd.processDefinitionKey)", onclick="file.click();") New\r
+\r
+                                       //- .row.mt-2\r
+                                       //-     .col-12\r
+                                       //-             h4 Resources\r
+                                       //-             .text-muted A single .zip file with scripts\r
+                                       //- input(type="file", #scripts, id="scripts", name="scripts", hidden,  (change)="markFormAs('dirty')", ng2FileSelect, [uploader]="uploader", accept="application/zip")\r
+                                       //- .row.mt-1(*ngIf="ptd.currentInstance.resourceFileId")\r
+                                       //-     .col-12\r
+                                       //-             mat-list\r
+                                       //-                     mat-list-item\r
+                                       //-                             mat-icon(mat-list-icon) insert_drive_file\r
+                                       //-                             h4(mat-line) {{ptd.currentInstance.resourceFileName }}\r
+                                       //- .row(*ngIf="!ptd.currentInstance.isDeployed")\r
+                                       //-     .col-md-12\r
+                                       //-             button(mat-raised-button, onclick="scripts.click()", color="primary") \r
+                                       //-                     | {{ !ptd.currentInstance.resourceFileId ? 'Choose File' : 'Replace File' }}\r
+                                                       \r
+                                       //-     .col-md-12\r
+                                       //-             div(*ngIf="uploader?.queue.length > 0")\r
+                                       //-                     label File:\r
+                                       //-                     ul.list-group(style="position:relative")\r
+                                       //-                             li.list-group-item(*ngFor="let item of uploader.queue")\r
+                                       //-                                     | {{ item?.file?.name }}\r
+                                       //-                                     div.upload-progress([ngStyle]="{'width': item.progress + '%'}")\r
+                                       //-                     //- button.pull-right(mat-button, (click)="upload()") Upload All\r
+                                       //-                     label(*ngIf="ptd.currentInstance.resourceFileId && uploader.queue.length > 0 && !saved") This will replace the previous resouce file\r
+                                       //-                     button.pull-right(mat-button, color="primary", (click)="clearQueue()") Remove All\r
+                                       //- .row(*ngIf="ptd.currentInstance.isDeployed")\r
+                                       //-     .col-12(*ngIf="!ptd.currentInstance.resourceFileId")\r
+                                       //-             | No resources were deployed with this version\r
+                                       \r
+                                       .row.mt-3\r
+                                               .col-12(*ngIf="ptd.currentInstance.testDataTemplate != {}")\r
+                                                       h4 testInputTemplate.yaml\r
+                                                       div(style="border: 1px solid lightgrey; font-size: 12px !important")\r
+                                                               codemirror(*ngIf="isRefreshed", [config]="codeConfig", [(ngModel)]="ptd.currentInstance.testDataTemplate", name="testConfig")\r
+\r
+\r
+                       #drag(#handle)\r
+\r
+div(style="position:absolute; bottom: 5px; left: 5px")\r
+       div(*ngIf="inProgress")\r
+               mat-spinner([diameter]="15", style="display:inline")\r
+               div.ml-4(style="display:inline") In Progress\r
+       div(*ngIf="ptd?.currentInstance?.isDeployed") Deployed\r
+       div(*ngIf="hasBeenSaved && !testDefinitionForm.dirty") saved\r
+               mat-icon(style="color:green") check\r
+       \r
+       //- div Form valid: {{ form.valid }}\r
+       //- div Form dirty: {{ form.dirty }}\r
+       //- div hasBeenSaved: {{ hasBeenSaved }}\r
+       //- div(*ngIf="ptd?.currentInstance?.bpmnHasChanged") ptd.currentInstance.bpmnHasChanged\r
+       //- \r
+       //- button((click)="popup()") popup\r
+       //- button((click)="nav()") nav\r