added svcapi ui and camunda code
[it/otf.git] / otf-frontend / client / src / app / layout / control-panel / control-panel.component.pug
diff --git a/otf-frontend/client/src/app/layout/control-panel/control-panel.component.pug b/otf-frontend/client/src/app/layout/control-panel/control-panel.component.pug
new file mode 100644 (file)
index 0000000..56b688f
--- /dev/null
@@ -0,0 +1,270 @@
+//-  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([@routerTransition], style="margin-top: -15px")\r
+    .row.fullWidth.mb-4(style="position:relative")\r
+        div.pull-tab\r
+            div.arrow\r
+        mat-card#canvas-card(style="width: 100%; resize:vertical; overflow: hidden")\r
+            mat-card-content#canvas(style="height: 100%")\r
+                div(style="position: absolute; bottom: 5px; left: 10px")\r
+                    div.small.text-muted Test Definition: {{ testResult?.historicTestDefinition?.testName }}\r
+                    div.small.text-muted Version: {{ testResult?.historicTestDefinition?.bpmnInstances[0]?.version }}\r
+                div(style="position: absolute; bottom: 5px; right: 25px")\r
+                    div.small.text-muted(*ngIf="processState")\r
+                        | Status: {{ processState }}\r
+    .row.mb-4\r
+        .col\r
+            .pull-left\r
+                h3 {{ testResult?.historicTestInstance?.testInstanceName }} Execution Log\r
+                div {{ testResult?.historicTestInstance?.testInstanceDescription }}\r
+            button.mr-2.pull-right(color="accent", mat-raised-button, (click)="refreshAllData()") Refresh\r
+                i.fa.fa-2x.fa-fw.fa-refresh.fast-spin(*ngIf="spin")\r
+            button.mr-2.pull-right(*ngIf="processState && processState == 'Running'", color="warn", mat-raised-button, (click)="cancelExecution()") Cancel Execution\r
+    .row.mb-4\r
+        .col-12\r
+            mat-tab-group([selectedIndex]="0", dinamicHeight, color="accent", backgroundColor="primary")\r
+                mat-tab(label="Overview")\r
+                    .col-12.mt-2\r
+                        .row.mb-4(style="text-align:center")\r
+                            .col\r
+                                b Test Result:\r
+                                div {{ testResult?.testResult }}\r
+                            .col\r
+                                b Start Time:\r
+                                div {{ testResult?.startTime }}\r
+                            .col\r
+                                b End Time:\r
+                                div {{ testResult?.endTime }}\r
+                            .col\r
+                                b Total Time:\r
+                                div {{ testResult?.totalTime }}\r
+                            .col\r
+                                b Date Executed:\r
+                                div {{ testResult?.date }}\r
+                            .col\r
+                                b Executed By:\r
+                                div {{ testResult?.historicEmail }}\r
+                        hr\r
+                        .row.mb-4(*ngIf="testResult?.testResultMessage")\r
+                            .col-12\r
+                                h5 Test Result Message\r
+                                | {{ testResult?.testResultMessage }}\r
+                        .row\r
+                            .col-12\r
+                                h5 Test Details\r
+                                //- table(datatable, [dtOptions]="dtOptions", class="row-border hover")\r
+                                //-     thead\r
+                                //-         tr\r
+                                //-             th(*ngFor="let column of columns") {{ column.title }}\r
+                                //-     tbody\r
+                                //-         tr(*ngFor="let key of data")\r
+                                //-             td(*ngFor="let column of columns") {{ key[column.data] }}\r
+                                ngx-json-viewer(*ngIf="testResult && testResult.testDetails != {}", [json]="testResult.testDetails", style="font-size: 1.3em")\r
+                                //- div(*ngIf="testResult && testResult.testDetails != {}", [innerHTML]="json2html(testResult.testDetails)")\r
+                                //- div(*ngIf="testResult") {{ json2html(testResult.testDetails) != '' ? '' : 'No test details were set during execution.' }}\r
+\r
+                mat-tab(*ngIf="testResult?.testInstanceResults.length > 0", label="Test Instance Results")\r
+                    .col-12.mt-2\r
+                        .row\r
+                            .col-3\r
+                                h5 Test Instances\r
+                                mat-list\r
+                                    mat-list-item(style="cursor: pointer", *ngFor="let key of objectKeys(instanceDataSource); last as last; first as first", (click)="selectTestInstance(key)")\r
+                                        h5 {{ instanceDataSource[key][0].historicTestInstance.testInstanceName }}\r
+                                        mat-icon([hidden]="selectedTestInstance != key") keyboard_arrow_left\r
+                                        mat-divider([inset]="true", *ngIf="!last")\r
+                                mat-divider(vertical)\r
+\r
+                            .col-9\r
+                                mat-accordion([multi]="true")\r
+                                    mat-expansion-panel(*ngFor="let element of instanceDataSource[selectedTestInstance]; let i = index;")\r
+                                        mat-expansion-panel-header()\r
+                                            mat-panel-title {{ '#' + (i + 1)}}\r
+                                            mat-panel-description\r
+                                                | {{ element.testResult }}\r
+                                        .col-12\r
+                                            .row(style="text-align:center")\r
+                                                .col\r
+                                                    b Test Result:\r
+                                                    div {{ element.testResult }}\r
+                                                .col\r
+                                                    b Start Time:\r
+                                                    div {{ element.startTime }}\r
+                                                .col\r
+                                                    b End Time:\r
+                                                    div {{ element.endTime }}\r
+                                                .col\r
+                                                    b Total Time:\r
+                                                    div {{ element.totalTime }}\r
+                                                .col\r
+                                                    b Date Executed:\r
+                                                    div {{ element.date }}\r
+                                            hr\r
+                                            div(style="float:right")\r
+                                                button(mat-raised-button, color="primary", [routerLink]="['/control-panel']", [queryParams]="{id: element._id}") Full Execution\r
+                                            .row.mb-4(*ngIf="element.testResultMessage")\r
+                                                .col-12\r
+                                                    h5 Test Result Message\r
+                                                    | {{ element.testResultMessage }}\r
+                                            .row\r
+                                                .col-12\r
+                                                    h5 Test Details\r
+                                                    ngx-json-viewer(*ngIf="element && element.testDetails != {}", [json]="element.testDetails")\r
+                                                    //- div(*ngIf="element && element.testDetails != {}", [innerHTML]="json2html(element.testDetails)")\r
+                                                    //- div(*ngIf="testResult") {{ json2html(element.testDetails) != '' ? '' : 'No test details were set during execution.' }}\r
+\r
+                mat-tab(*ngIf="testResult?.testHeadResults.length > 0", label="Test Head Results")\r
+                    .col-12.mt-2\r
+                        .row\r
+                            .col-3\r
+                                h5 Test Heads\r
+                                mat-list\r
+                                    mat-list-item(style="cursor: pointer", *ngFor="let key of objectKeys(dataSource); last as last; first as first", (click)="selectTestHead(key)")\r
+                                        div\r
+                                            h5 {{ dataSource[key][0].testHeadName }}\r
+                                            div.small(style="margin-top:-11px;") {{ dataSource[key][0].bpmnVthTaskId }}\r
+                                        mat-icon([hidden]="selectedTestHead != key") keyboard_arrow_left\r
+                                        mat-divider([inset]="true", *ngIf="!last")\r
+                                mat-divider(vertical)\r
+\r
+                            .col-9\r
+                                div(*ngFor="let testHead of testHeads")\r
+                                    mat-accordion([multi]="true", *ngIf="selectedTestHead == testHead.testHeadId + testHead.bpmnVthTaskId")\r
+                                        mat-expansion-panel(*ngFor="let element of dataSource[testHead.testHeadId + testHead.bpmnVthTaskId]; let i = index;")\r
+                                            mat-expansion-panel-header()\r
+                                                mat-panel-title {{ '#' + (i + 1)}}\r
+                                                mat-panel-description\r
+                                                    | {{ element.totalTime }}\r
+                                            ngx-json-viewer([json]="element.testHeadRequestResponse")\r
+                                            app-robot-report(*ngIf="element.testHeadResponse", [response]="element.testHeadResponse")\r
+\r
+                    //- (*ngFor="let testHead of testHeads")\r
+                    //-     mat-card\r
+                    //-         mat-card-header.COMPLETED-dash\r
+                    //-             mat-card-title.pull-left {{testHead.testHeadName}} Results\r
+                    //-             .pull-right {{testHead.bpmnVthTaskId}}\r
+                    //-         mat-card-content\r
+                    //-             table(mat-table, multiTemplateDataRows, [dataSource]="dataSource[testHead.testHeadId + testHead.bpmnVthTaskId]")\r
+\r
+                    //-                 ng-container(matColumnDef="startTime")\r
+                    //-                     th(mat-header-cell, *matHeaderCellDef) Start Time\r
+                    //-                     td(mat-cell, *matCellDef="let element") {{ element.startTime}}\r
+\r
+                    //-                 ng-container(matColumnDef="endTime")\r
+                    //-                     th(mat-header-cell, *matHeaderCellDef) End Time\r
+                    //-                     td(mat-cell, *matCellDef="let element") {{ element.endTime }}\r
+\r
+                    //-                 ng-container(matColumnDef="totalTime")\r
+                    //-                     th(mat-header-cell, *matHeaderCellDef) Total Time\r
+                    //-                     td(mat-cell, *matCellDef="let element") {{ element.totalTime }}\r
+\r
+                    //-                 ng-container(matColumnDef="expandedDetail")\r
+                    //-                     td(mat-cell, style="padding:0px", *matCellDef="let element; let i = dataIndex", [attr.colspan]="displayedColumns.length")\r
+                    //-                         div([@detailExpand]="(testHead.testHeadId + testHead.bpmnVthTaskId + i) == expandedElement ? 'expanded' : 'collapsed'")\r
+                    //-                             codemirror([config]="codeConfig", [value]='element.testHeadResponse', name="testHeadResult")\r
+                    //-                             app-robot-report(*ngIf="element.testHeadResponse", [response]="element.testHeadResponse")\r
+\r
+                    //-                 tr(mat-header-row, *matHeaderRowDef="displayedColumns")\r
+                    //-                 tr.example-element-row(mat-row, *matRowDef="let element; columns: displayedColumns; let i = dataIndex", [class.example-expanded-row]="expandedElement === element", (click)="expand(testHead.testHeadId + testHead.bpmnVthTaskId + i)")\r
+                    //-                 tr.example-detail-row(mat-row, *matRowDef="let row; columns: ['expandedDetail']")\r
+\r
+                mat-tab(label="Task Log", *ngIf="taskLog != ''")\r
+                    .col-12.mt-2\r
+                        h5 Task Logs\r
+                        div {{ taskLog }}\r
+\r
+                mat-tab(label="Test Parameters", *ngIf="testResult?.historicTestInstance")\r
+                    .col-12.mt-2\r
+                        h5 Test Data\r
+                        ngx-json-viewer([json]="testResult.historicTestInstance.testData", [expanded]="false", style="font-size: 1.3em")\r
+                        //- div([innerHTML]="json2html(testResult.historicTestInstance.testData, 1)")\r
+                        //- | {{ testResult.historicTestInstance.testData ? '' : 'No test data set.'}}\r
+                        h5.mt-1 Test Head Input\r
+                        ngx-json-viewer([json]="testResult.historicTestInstance.vthInput", [expanded]="false", style="font-size: 1.3em")\r
+                        //- div([innerHTML]="json2html(testResult.historicTestInstance.vthInput, 1)")\r
+                        //- | {{ testResult.historicTestInstance.vthInput ? '' : 'No test head input set.'}}\r
+\r
+\r
+                mat-tab(*ngIf="executionJobLogDataSource != undefined", label="Execution Job Log")\r
+                    .col-12.mt-2\r
+                        .row\r
+                            .col-3\r
+                                h5 Execution Job Log\r
+                                mat-list\r
+                                    mat-list-item(style="cursor: pointer", *ngFor="let key of objectKeys(executionJobLogDataSource); last as last; first as first", (click)="selectExecutionJobLog(key)")\r
+                                        h5 {{ executionJobLogDataSource[key][0].activityId }}\r
+                                        mat-icon([hidden]="selectedExecutionJobLog != key") keyboard_arrow_left\r
+                                        mat-divider([inset]="true", *ngIf="!last")\r
+                                mat-divider(vertical)\r
+\r
+                            .col-9\r
+                                mat-accordion([multi]="true")\r
+                                    mat-expansion-panel(*ngFor="let element of executionJobLogDataSource[selectedExecutionJobLog]; let i = index;")\r
+                                        mat-expansion-panel-header()\r
+                                            mat-panel-title {{ '#' + (i + 1)}}\r
+                                            mat-panel-description\r
+                                                | {{ element.id }}\r
+                                        ngx-json-viewer([json]="element")\r
+                                        //- div([innerHTML]="json2html(element)")\r
+                                        //-     | {{ element ? '' : 'No job log' }}\r
+\r
+                mat-tab(*ngIf="executionExternalTaskLogDataSource != undefined", label="Execution External Task Log")\r
+                    .col-12.mt-2\r
+                        .row\r
+                            .col-3\r
+                                h5 Execution External Task Log\r
+                                mat-list\r
+                                    mat-list-item(style="cursor: pointer", *ngFor="let key of objectKeys(executionExternalTaskLogDataSource); last as last; first as first", (click)="selectExecutionExternalTaskLog(key)")\r
+                                        h5 {{ executionExternalTaskLogDataSource[key][0].activityId }}\r
+                                        mat-icon([hidden]="selectedExecutionExternalTaskLog != key") keyboard_arrow_left\r
+                                        mat-divider([inset]="true", *ngIf="!last")\r
+                                mat-divider(vertical)\r
+\r
+                            .col-9\r
+                                mat-accordion([multi]="true")\r
+                                    mat-expansion-panel(*ngFor="let element of executionExternalTaskLogDataSource[selectedExecutionExternalTaskLog]; let i = index;")\r
+                                        mat-expansion-panel-header()\r
+                                            mat-panel-title {{ '#' + (i + 1)}}\r
+                                            mat-panel-description\r
+                                                | {{ element.id }}\r
+                                        ngx-json-viewer([json]="element")\r
+                                        //- div([innerHTML]="json2html(element)")\r
+                                        //-     | {{ element ? '' : 'No external task log' }}\r
+\r
+\r
+                mat-tab(*ngIf="executionVariablesDataSource != undefined", label="Execution Variables")\r
+                    .col-12.mt-2\r
+                        .row\r
+                            .col-3\r
+                                h5 Execution Variables\r
+                                mat-list\r
+                                    mat-list-item(style="cursor: pointer", *ngFor="let key of objectKeys(executionVariablesDataSource); last as last; first as first", (click)="selectExecutionVariable(key)")\r
+                                        h5 {{ executionVariablesDataSource[key][0].variableName }}\r
+                                        mat-icon([hidden]="selectedExecutionVariable != key") keyboard_arrow_left\r
+                                        mat-divider([inset]="true", *ngIf="!last")\r
+                                mat-divider(vertical)\r
+\r
+                            .col-9\r
+                                mat-accordion([multi]="true")\r
+                                    mat-expansion-panel(*ngFor="let element of executionVariablesDataSource[selectedExecutionVariable]; let i = index;")\r
+                                        mat-expansion-panel-header()\r
+                                            mat-panel-title {{ '#' + (i + 1)}}\r
+                                            mat-panel-description\r
+                                                | {{ element.id }}\r
+                                        ngx-json-viewer([json]="element")\r
+                                        //- div([innerHTML]="json2html(element)")\r
+                                        //-     | {{ element ? '' : 'No variables' }}\r