otf-frontend/client/src/app/layout/control-panel/control-panel.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([@routerTransition], style="margin-top: -15px")\r
  18     .row.fullWidth.mb-4(style="position:relative")\r
  19         div.pull-tab\r
  20             div.arrow\r
  21         mat-card#canvas-card(style="width: 100%; resize:vertical; overflow: hidden")\r
  22             mat-card-content#canvas(style="height: 100%")\r
  23                 div(style="position: absolute; bottom: 5px; left: 10px")\r
  24                     div.small.text-muted Test Definition: {{ testResult?.historicTestDefinition?.testName }}\r
  25                     div.small.text-muted Version: {{ testResult?.historicTestDefinition?.bpmnInstances[0]?.version }}\r
  26                 div(style="position: absolute; bottom: 5px; right: 25px")\r
  27                     div.small.text-muted(*ngIf="processState")\r
  28                         | Status: {{ processState }}\r
  29     .row.mb-4\r
  30         .col\r
  31             .pull-left\r
  32                 h3 {{ testResult?.historicTestInstance?.testInstanceName }} Execution Log\r
  33                 div {{ testResult?.historicTestInstance?.testInstanceDescription }}\r
  34             button.mr-2.pull-right(color="accent", mat-raised-button, (click)="refreshAllData()") Refresh\r
  35                 i.fa.fa-2x.fa-fw.fa-refresh.fast-spin(*ngIf="spin")\r
  36             button.mr-2.pull-right(*ngIf="processState && processState == 'Running'", color="warn", mat-raised-button, (click)="cancelExecution()") Cancel Execution\r
  37     .row.mb-4\r
  38         .col-12\r
  39             mat-tab-group([selectedIndex]="0", dinamicHeight, color="accent", backgroundColor="primary")\r
  40                 mat-tab(label="Overview")\r
  41                     .col-12.mt-2\r
  42                         .row.mb-4(style="text-align:center")\r
  43                             .col\r
  44                                 b Test Result:\r
  45                                 div {{ testResult?.testResult }}\r
  46                             .col\r
  47                                 b Start Time:\r
  48                                 div {{ testResult?.startTime }}\r
  49                             .col\r
  50                                 b End Time:\r
  51                                 div {{ testResult?.endTime }}\r
  52                             .col\r
  53                                 b Total Time:\r
  54                                 div {{ testResult?.totalTime }}\r
  55                             .col\r
  56                                 b Date Executed:\r
  57                                 div {{ testResult?.date }}\r
  58                             .col\r
  59                                 b Executed By:\r
  60                                 div {{ testResult?.historicEmail }}\r
  61                         hr\r
  62                         .row.mb-4(*ngIf="testResult?.testResultMessage")\r
  63                             .col-12\r
  64                                 h5 Test Result Message\r
  65                                 | {{ testResult?.testResultMessage }}\r
  66                         .row\r
  67                             .col-12\r
  68                                 h5 Test Details\r
  69                                 //- table(datatable, [dtOptions]="dtOptions", class="row-border hover")\r
  70                                 //-     thead\r
  71                                 //-         tr\r
  72                                 //-             th(*ngFor="let column of columns") {{ column.title }}\r
  73                                 //-     tbody\r
  74                                 //-         tr(*ngFor="let key of data")\r
  75                                 //-             td(*ngFor="let column of columns") {{ key[column.data] }}\r
  76                                 ngx-json-viewer(*ngIf="testResult && testResult.testDetails != {}", [json]="testResult.testDetails", style="font-size: 1.3em")\r
  77                                 //- div(*ngIf="testResult && testResult.testDetails != {}", [innerHTML]="json2html(testResult.testDetails)")\r
  78                                 //- div(*ngIf="testResult") {{ json2html(testResult.testDetails) != '' ? '' : 'No test details were set during execution.' }}\r
  79 \r
  80                 mat-tab(*ngIf="testResult?.testInstanceResults.length > 0", label="Test Instance Results")\r
  81                     .col-12.mt-2\r
  82                         .row\r
  83                             .col-3\r
  84                                 h5 Test Instances\r
  85                                 mat-list\r
  86                                     mat-list-item(style="cursor: pointer", *ngFor="let key of objectKeys(instanceDataSource); last as last; first as first", (click)="selectTestInstance(key)")\r
  87                                         h5 {{ instanceDataSource[key][0].historicTestInstance.testInstanceName }}\r
  88                                         mat-icon([hidden]="selectedTestInstance != key") keyboard_arrow_left\r
  89                                         mat-divider([inset]="true", *ngIf="!last")\r
  90                                 mat-divider(vertical)\r
  91 \r
  92                             .col-9\r
  93                                 mat-accordion([multi]="true")\r
  94                                     mat-expansion-panel(*ngFor="let element of instanceDataSource[selectedTestInstance]; let i = index;")\r
  95                                         mat-expansion-panel-header()\r
  96                                             mat-panel-title {{ '#' + (i + 1)}}\r
  97                                             mat-panel-description\r
  98                                                 | {{ element.testResult }}\r
  99                                         .col-12\r
 100                                             .row(style="text-align:center")\r
 101                                                 .col\r
 102                                                     b Test Result:\r
 103                                                     div {{ element.testResult }}\r
 104                                                 .col\r
 105                                                     b Start Time:\r
 106                                                     div {{ element.startTime }}\r
 107                                                 .col\r
 108                                                     b End Time:\r
 109                                                     div {{ element.endTime }}\r
 110                                                 .col\r
 111                                                     b Total Time:\r
 112                                                     div {{ element.totalTime }}\r
 113                                                 .col\r
 114                                                     b Date Executed:\r
 115                                                     div {{ element.date }}\r
 116                                             hr\r
 117                                             div(style="float:right")\r
 118                                                 button(mat-raised-button, color="primary", [routerLink]="['/control-panel']", [queryParams]="{id: element._id}") Full Execution\r
 119                                             .row.mb-4(*ngIf="element.testResultMessage")\r
 120                                                 .col-12\r
 121                                                     h5 Test Result Message\r
 122                                                     | {{ element.testResultMessage }}\r
 123                                             .row\r
 124                                                 .col-12\r
 125                                                     h5 Test Details\r
 126                                                     ngx-json-viewer(*ngIf="element && element.testDetails != {}", [json]="element.testDetails")\r
 127                                                     //- div(*ngIf="element && element.testDetails != {}", [innerHTML]="json2html(element.testDetails)")\r
 128                                                     //- div(*ngIf="testResult") {{ json2html(element.testDetails) != '' ? '' : 'No test details were set during execution.' }}\r
 129 \r
 130                 mat-tab(*ngIf="testResult?.testHeadResults.length > 0", label="Test Head Results")\r
 131                     .col-12.mt-2\r
 132                         .row\r
 133                             .col-3\r
 134                                 h5 Test Heads\r
 135                                 mat-list\r
 136                                     mat-list-item(style="cursor: pointer", *ngFor="let key of objectKeys(dataSource); last as last; first as first", (click)="selectTestHead(key)")\r
 137                                         div\r
 138                                             h5 {{ dataSource[key][0].testHeadName }}\r
 139                                             div.small(style="margin-top:-11px;") {{ dataSource[key][0].bpmnVthTaskId }}\r
 140                                         mat-icon([hidden]="selectedTestHead != key") keyboard_arrow_left\r
 141                                         mat-divider([inset]="true", *ngIf="!last")\r
 142                                 mat-divider(vertical)\r
 143 \r
 144                             .col-9\r
 145                                 div(*ngFor="let testHead of testHeads")\r
 146                                     mat-accordion([multi]="true", *ngIf="selectedTestHead == testHead.testHeadId + testHead.bpmnVthTaskId")\r
 147                                         mat-expansion-panel(*ngFor="let element of dataSource[testHead.testHeadId + testHead.bpmnVthTaskId]; let i = index;")\r
 148                                             mat-expansion-panel-header()\r
 149                                                 mat-panel-title {{ '#' + (i + 1)}}\r
 150                                                 mat-panel-description\r
 151                                                     | {{ element.totalTime }}\r
 152                                             ngx-json-viewer([json]="element.testHeadRequestResponse")\r
 153                                             app-robot-report(*ngIf="element.testHeadResponse", [response]="element.testHeadResponse")\r
 154 \r
 155                     //- (*ngFor="let testHead of testHeads")\r
 156                     //-     mat-card\r
 157                     //-         mat-card-header.COMPLETED-dash\r
 158                     //-             mat-card-title.pull-left {{testHead.testHeadName}} Results\r
 159                     //-             .pull-right {{testHead.bpmnVthTaskId}}\r
 160                     //-         mat-card-content\r
 161                     //-             table(mat-table, multiTemplateDataRows, [dataSource]="dataSource[testHead.testHeadId + testHead.bpmnVthTaskId]")\r
 162 \r
 163                     //-                 ng-container(matColumnDef="startTime")\r
 164                     //-                     th(mat-header-cell, *matHeaderCellDef) Start Time\r
 165                     //-                     td(mat-cell, *matCellDef="let element") {{ element.startTime}}\r
 166 \r
 167                     //-                 ng-container(matColumnDef="endTime")\r
 168                     //-                     th(mat-header-cell, *matHeaderCellDef) End Time\r
 169                     //-                     td(mat-cell, *matCellDef="let element") {{ element.endTime }}\r
 170 \r
 171                     //-                 ng-container(matColumnDef="totalTime")\r
 172                     //-                     th(mat-header-cell, *matHeaderCellDef) Total Time\r
 173                     //-                     td(mat-cell, *matCellDef="let element") {{ element.totalTime }}\r
 174 \r
 175                     //-                 ng-container(matColumnDef="expandedDetail")\r
 176                     //-                     td(mat-cell, style="padding:0px", *matCellDef="let element; let i = dataIndex", [attr.colspan]="displayedColumns.length")\r
 177                     //-                         div([@detailExpand]="(testHead.testHeadId + testHead.bpmnVthTaskId + i) == expandedElement ? 'expanded' : 'collapsed'")\r
 178                     //-                             codemirror([config]="codeConfig", [value]='element.testHeadResponse', name="testHeadResult")\r
 179                     //-                             app-robot-report(*ngIf="element.testHeadResponse", [response]="element.testHeadResponse")\r
 180 \r
 181                     //-                 tr(mat-header-row, *matHeaderRowDef="displayedColumns")\r
 182                     //-                 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
 183                     //-                 tr.example-detail-row(mat-row, *matRowDef="let row; columns: ['expandedDetail']")\r
 184 \r
 185                 mat-tab(label="Task Log", *ngIf="taskLog != ''")\r
 186                     .col-12.mt-2\r
 187                         h5 Task Logs\r
 188                         div {{ taskLog }}\r
 189 \r
 190                 mat-tab(label="Test Parameters", *ngIf="testResult?.historicTestInstance")\r
 191                     .col-12.mt-2\r
 192                         h5 Test Data\r
 193                         ngx-json-viewer([json]="testResult.historicTestInstance.testData", [expanded]="false", style="font-size: 1.3em")\r
 194                         //- div([innerHTML]="json2html(testResult.historicTestInstance.testData, 1)")\r
 195                         //- | {{ testResult.historicTestInstance.testData ? '' : 'No test data set.'}}\r
 196                         h5.mt-1 Test Head Input\r
 197                         ngx-json-viewer([json]="testResult.historicTestInstance.vthInput", [expanded]="false", style="font-size: 1.3em")\r
 198                         //- div([innerHTML]="json2html(testResult.historicTestInstance.vthInput, 1)")\r
 199                         //- | {{ testResult.historicTestInstance.vthInput ? '' : 'No test head input set.'}}\r
 200 \r
 201 \r
 202                 mat-tab(*ngIf="executionJobLogDataSource != undefined", label="Execution Job Log")\r
 203                     .col-12.mt-2\r
 204                         .row\r
 205                             .col-3\r
 206                                 h5 Execution Job Log\r
 207                                 mat-list\r
 208                                     mat-list-item(style="cursor: pointer", *ngFor="let key of objectKeys(executionJobLogDataSource); last as last; first as first", (click)="selectExecutionJobLog(key)")\r
 209                                         h5 {{ executionJobLogDataSource[key][0].activityId }}\r
 210                                         mat-icon([hidden]="selectedExecutionJobLog != key") keyboard_arrow_left\r
 211                                         mat-divider([inset]="true", *ngIf="!last")\r
 212                                 mat-divider(vertical)\r
 213 \r
 214                             .col-9\r
 215                                 mat-accordion([multi]="true")\r
 216                                     mat-expansion-panel(*ngFor="let element of executionJobLogDataSource[selectedExecutionJobLog]; let i = index;")\r
 217                                         mat-expansion-panel-header()\r
 218                                             mat-panel-title {{ '#' + (i + 1)}}\r
 219                                             mat-panel-description\r
 220                                                 | {{ element.id }}\r
 221                                         ngx-json-viewer([json]="element")\r
 222                                         //- div([innerHTML]="json2html(element)")\r
 223                                         //-     | {{ element ? '' : 'No job log' }}\r
 224 \r
 225                 mat-tab(*ngIf="executionExternalTaskLogDataSource != undefined", label="Execution External Task Log")\r
 226                     .col-12.mt-2\r
 227                         .row\r
 228                             .col-3\r
 229                                 h5 Execution External Task Log\r
 230                                 mat-list\r
 231                                     mat-list-item(style="cursor: pointer", *ngFor="let key of objectKeys(executionExternalTaskLogDataSource); last as last; first as first", (click)="selectExecutionExternalTaskLog(key)")\r
 232                                         h5 {{ executionExternalTaskLogDataSource[key][0].activityId }}\r
 233                                         mat-icon([hidden]="selectedExecutionExternalTaskLog != key") keyboard_arrow_left\r
 234                                         mat-divider([inset]="true", *ngIf="!last")\r
 235                                 mat-divider(vertical)\r
 236 \r
 237                             .col-9\r
 238                                 mat-accordion([multi]="true")\r
 239                                     mat-expansion-panel(*ngFor="let element of executionExternalTaskLogDataSource[selectedExecutionExternalTaskLog]; let i = index;")\r
 240                                         mat-expansion-panel-header()\r
 241                                             mat-panel-title {{ '#' + (i + 1)}}\r
 242                                             mat-panel-description\r
 243                                                 | {{ element.id }}\r
 244                                         ngx-json-viewer([json]="element")\r
 245                                         //- div([innerHTML]="json2html(element)")\r
 246                                         //-     | {{ element ? '' : 'No external task log' }}\r
 247 \r
 248 \r
 249                 mat-tab(*ngIf="executionVariablesDataSource != undefined", label="Execution Variables")\r
 250                     .col-12.mt-2\r
 251                         .row\r
 252                             .col-3\r
 253                                 h5 Execution Variables\r
 254                                 mat-list\r
 255                                     mat-list-item(style="cursor: pointer", *ngFor="let key of objectKeys(executionVariablesDataSource); last as last; first as first", (click)="selectExecutionVariable(key)")\r
 256                                         h5 {{ executionVariablesDataSource[key][0].variableName }}\r
 257                                         mat-icon([hidden]="selectedExecutionVariable != key") keyboard_arrow_left\r
 258                                         mat-divider([inset]="true", *ngIf="!last")\r
 259                                 mat-divider(vertical)\r
 260 \r
 261                             .col-9\r
 262                                 mat-accordion([multi]="true")\r
 263                                     mat-expansion-panel(*ngFor="let element of executionVariablesDataSource[selectedExecutionVariable]; let i = index;")\r
 264                                         mat-expansion-panel-header()\r
 265                                             mat-panel-title {{ '#' + (i + 1)}}\r
 266                                             mat-panel-description\r
 267                                                 | {{ element.id }}\r
 268                                         ngx-json-viewer([json]="element")\r
 269                                         //- div([innerHTML]="json2html(element)")\r
 270                                         //-     | {{ element ? '' : 'No variables' }}\r