ui/src/main/webapp/app/BluvalUI/ValidationResults/TestSuiteResults/TestSuiteResultsModal.html

   1 <!--
   2 Copyright (c) 2019 AT&T Intellectual Property. All rights reserved.
   3
   4 Licensed under the Apache License, Version 2.0 (the "License");
   5 you may not use this file except in compliance with the License.
   6 You may obtain a copy of the License at
   7
   8        http://www.apache.org/licenses/LICENSE-2.0
   9
  10 Unless required by applicable law or agreed to in writing, software
  11 distributed under the License is distributed on an "AS IS" BASIS,
  12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 See the License for the specific language governing permissions and
  14 limitations under the License.
  15 -->
  16 <div>
  17
  18     <style scoped>
  19 @import "app/css/modal.css";
  20
  21 .graph, .empty-graph {
  22     border: 1px solid #ccc;
  23     width: auto;
  24     height: 7px;
  25     padding: 0;
  26     background: #f33;
  27 }
  28
  29 .pass-bar {
  30     background: #1d4;
  31 }
  32
  33 .pass-bar, .fail-bar {
  34     float: left;
  35     height: 100%;
  36 }
  37
  38 div.box {
  39     border: 1px solid black;
  40     overflow-x: scroll;
  41 }
  42 </style>
  43
  44     <div ng-show="showTestSuitesResults">
  45         <h2 class="heading-small"></h2>
  46         <h1 class="heading-page">Display Test Suites Results</h1>
  47
  48         <h2 class="heading-small"></h2>
  49         <div>
  50             <h2 class="heading-small">Select a blueprint layer:</h2>
  51             <div>
  52                 <select ng-model="selectedLayer"
  53                     ng-init="resultsLayers[0]"
  54                     ng-change="selectedResultsLayerChange(selectedLayer)"
  55                     ng-options="n for n in resultsLayers">
  56                 </select>
  57             </div>
  58
  59             <h2 class="heading-small">Select a test suite of the
  60                 selected layer in order to be displayed:</h2>
  61             <div>
  62                 <select ng-model="selectedTestSuiteName"
  63                     ng-init="resultsLayerTestSuitesNames[0]"
  64                     ng-change="selectedTestSuitesNameChange(selectedTestSuiteName)"
  65                     ng-options="n for n in resultsLayerTestSuitesNames">
  66                 </select>
  67             </div>
  68         </div>
  69
  70         <br> <br> <br>
  71
  72         <div ng-hide="!selectedLayer || !selectedTestSuiteName">
  73             <div>
  74                 <h2 class="heading-small"></h2>
  75                 <div class="box">
  76                     <h3 class="heading-small">
  77                         <u>General Info</u>
  78                     </h3>
  79                     <p></p>
  80
  81                     <p></p>
  82                     <p>Name: {{selectedRobotTestResult.name}}</p>
  83                     <p>Generated:
  84                         {{selectedRobotTestResult.robot.generated}}</p>
  85                     <p>Generator:
  86                         {{selectedRobotTestResult.robot.generator}}</p>
  87                     <p>Errors:
  88                         {{selectedRobotTestResult.robot.errors}}</p>
  89
  90                     <h2 class="heading-small"></h2>
  91                     <h3 class="heading-small">
  92                         <u>Test Statistics</u>
  93                     </h3>
  94                     <p></p>
  95                     <table class="striped" cellspacing="0"
  96                         cellpadding="10">
  97                         <caption>
  98                             <h3></h3>
  99                         </caption>
 100                         <thead>
 101                             <th>
 102                                 <p>&nbsp;Total statistics&nbsp;</p>
 103                             </th>
 104                             <th>
 105                                 <p>Total&nbsp;</p>
 106                             </th>
 107                             <th>
 108                                 <p>Pass&nbsp;</p>
 109                             </th>
 110                             <th>
 111                                 <p>Fail&nbsp;</p>
 112                             </th>
 113                             <th>
 114                                 <p>Pass / Fail&nbsp;</p>
 115                             </th>
 116                             </tr>
 117                         </thead>
 118                         <tbody>
 119                             <tr
 120                                 ng-repeat="stat in selectedRobotTestResult.robot.statistics.total.stat">
 121                                 <td
 122                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 123                                     stat.content }}</td>
 124                                 <td
 125                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 126                                     (stat.fail * 1) + (stat.pass*1) }}</td>
 127                                 <td
 128                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 129                                     stat.pass }}</td>
 130                                 <td
 131                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 132                                     stat.fail}}</td>
 133                                 <td
 134                                     style="padding-left: 10px; font-size: 15px; width: 13%;">
 135                                     <div class="graph">
 136                                         <div class="pass-bar"
 137                                             ng-style="{ 'width': {{(100* stat.pass/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
 138                                             title="100%"></div>
 139                                         <div class="fail-bar"
 140                                             ng-style="{ 'width': {{(100* stat.fail/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
 141                                             title="0%"></div>
 142                                     </div>
 143                                 </td>
 144                             </tr>
 145                         </tbody>
 146                     </table>
 147
 148                     <br>
 149
 150                     <h3 class="heading-small"></h3>
 151                     <table class="striped" cellspacing="0"
 152                         cellpadding="10">
 153                         <caption>
 154                             <h3></h3>
 155                         </caption>
 156                         <thead>
 157                             <th>
 158                                 <p>&nbsp;Statistics by Tag&nbsp;</p>
 159                             </th>
 160                             <th>
 161                                 <p>Total&nbsp;</p>
 162                             </th>
 163                             <th>
 164                                 <p>Pass&nbsp;</p>
 165                             </th>
 166                             <th>
 167                                 <p>Fail&nbsp;</p>
 168                             </th>
 169                             <th>
 170                                 <p>Pass / Fail&nbsp;</p>
 171                             </th>
 172                             </tr>
 173                         </thead>
 174                         <tbody>
 175                             <tr
 176                                 ng-repeat="stat in selectedRobotTestResult.robot.statistics.tag.stat">
 177                                 <td
 178                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 179                                     stat.content }}</td>
 180                                 <td
 181                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 182                                     (stat.fail * 1) + (stat.pass*1) }}</td>
 183                                 <td
 184                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 185                                     stat.pass }}</td>
 186                                 <td
 187                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 188                                     stat.fail}}</td>
 189                                 <td
 190                                     style="padding-left: 10px; font-size: 15px; width: 13%;">
 191                                     <div class="graph">
 192                                         <div class="pass-bar"
 193                                             ng-style="{ 'width': {{(100* stat.pass/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
 194                                             title="100%"></div>
 195                                         <div class="fail-bar"
 196                                             ng-style="{ 'width': {{(100* stat.fail/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
 197                                             title="0%"></div>
 198                                     </div>
 199                                 </td>
 200                             </tr>
 201                         </tbody>
 202                     </table>
 203
 204                     <br>
 205
 206                     <h3 class="heading-small"></h3>
 207                     <table class="striped" cellspacing="0"
 208                         cellpadding="10">
 209                         <caption>
 210                             <h3></h3>
 211                         </caption>
 212                         <thead>
 213                             <th>
 214                                 <p>&nbsp;Statistics by Suite&nbsp;</p>
 215                             </th>
 216                             <th>
 217                                 <p>Total&nbsp;</p>
 218                             </th>
 219                             <th>
 220                                 <p>Pass&nbsp;</p>
 221                             </th>
 222                             <th>
 223                                 <p>Fail&nbsp;</p>
 224                             </th>
 225                             <th>
 226                                 <p>Pass / Fail&nbsp;</p>
 227                             </th>
 228                             </tr>
 229                         </thead>
 230                         <tbody>
 231                             <tr
 232                                 ng-repeat="stat in selectedRobotTestResult.robot.statistics.suite.stat">
 233                                 <td
 234                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 235                                     stat.content }}</td>
 236                                 <td
 237                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 238                                     (stat.fail * 1) + (stat.pass*1) }}</td>
 239                                 <td
 240                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 241                                     stat.pass }}</td>
 242                                 <td
 243                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 244                                     stat.fail}}</td>
 245                                 <td
 246                                     style="padding-left: 10px; font-size: 15px; width: 13%;">
 247                                     <div class="graph">
 248                                         <div class="pass-bar"
 249                                             ng-style="{ 'width': {{(100* stat.pass/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
 250                                             title="100%"></div>
 251                                         <div class="fail-bar"
 252                                             ng-style="{ 'width': {{(100* stat.fail/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
 253                                             title="0%"></div>
 254                                     </div>
 255                                 </td>
 256                             </tr>
 257                         </tbody>
 258                     </table>
 259                 </div>
 260
 261                 <h2 class="heading-small"></h2>
 262                 <div class="box">
 263                     <h3 class="heading-small">
 264                         <a href="javascript:void(0);"
 265                             ng-click="showDetailsLog = ! showDetailsLog">Test
 266                             Execution Log</a>
 267                     </h3>
 268                     <div ng-show="showDetailsLog">
 269                         <p></p>
 270                         <p>Root Suite Full Name:
 271                             {{selectedRobotTestResult.robot.suite.name}}</p>
 272                         <p>Source:
 273                             {{selectedRobotTestResult.robot.suite.source}}</p>
 274                         <p>Status:
 275                             {{selectedRobotTestResult.robot.suite.status.status}}</p>
 276                         <p>Start time:
 277                             {{selectedRobotTestResult.robot.suite.status.starttime}}</p>
 278                         <p>End time:
 279                             {{selectedRobotTestResult.robot.suite.status.endtime}}</p>
 280
 281                         <h2 class="heading-small"></h2>
 282                         <p></p>
 283                         <p>Sub-suite Full Name:
 284                             {{selectedRobotTestResult.robot.suite.suite.name}}</p>
 285                         <p>Documentation:
 286                             {{selectedRobotTestResult.robot.suite.suite.doc}}</p>
 287                         <p>Source:
 288                             {{selectedRobotTestResult.robot.suite.suite.source}}</p>
 289                         <p>Status:
 290                             {{selectedRobotTestResult.robot.suite.suite.status.status}}</p>
 291                         <p>Start time:
 292                             {{selectedRobotTestResult.robot.suite.suite.status.starttime}}</p>
 293                         <p>End time:
 294                             {{selectedRobotTestResult.robot.suite.suite.status.endtime}}</p>
 295                     </div>
 296                 </div>
 297
 298                 <h2 class="heading-small"></h2>
 299                 <div class="box">
 300                     <ul>
 301                         <h4 class="heading-small">Sub-suite Robot
 302                             keywords</h4>
 303                         <li
 304                             ng-repeat="kw in selectedRobotTestResult.robot.suite.suite.kw"
 305                             ng-include="'kwVal'"></li>
 306                     </ul>
 307                 </div>
 308
 309                 <h2 class="heading-small"></h2>
 310                 <div class="box">
 311                     <h3 class="heading-small">Test Cases</h3>
 312                     <table class="striped" cellspacing="0"
 313                         cellpadding="10">
 314                         <caption>
 315                             <h3></h3>
 316                         </caption>
 317                         <thead>
 318                             <th>
 319                                 <p>&nbsp;Full Name&nbsp;</p>
 320                             </th>
 321                             <th>
 322                                 <p>Documentation&nbsp;</p>
 323                             </th>
 324                             <th>
 325                                 <p>Status&nbsp;</p>
 326                             </th>
 327                             <th>
 328                                 <p>Start Time&nbsp;</p>
 329                             </th>
 330                             <th>
 331                                 <p>End Time&nbsp;</p>
 332                             </th>
 333                             <th>
 334                                 <p>Critical&nbsp;</p>
 335                             </th>
 336                             <th>
 337                                 <p>Message&nbsp;</p>
 338                             </th>
 339                             </tr>
 340                         </thead>
 341                         <tbody>
 342                             <tr
 343                                 ng-repeat="test in selectedRobotTestResult.robot.suite.suite.test"
 344                                 ng-class="{selected:test.id == selectedTestId}"
 345                                 ng-click="setClickedTest(test)">
 346                                 <td
 347                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 348                                     test.name }}</td>
 349                                 <td
 350                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.doc}}</td>
 351                                 <td
 352                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.status}}</td>
 353                                 <td
 354                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.starttime}}</td>
 355                                 <td
 356                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.endtime}}</td>
 357                                 <td
 358                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.critical}}</td>
 359                                 <td
 360                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.content}}</td>
 361                             </tr>
 362                         </tbody>
 363                     </table>
 364                 </div>
 365
 366                 <h2 class="heading-small"></h2>
 367                 <div class="box">
 368                     <ul>
 369                         <h4 class="heading-small">Robot keywords of
 370                             the selected test case</h4>
 371                         <li ng-repeat="kw in selectedTest.kw"
 372                             ng-include="'kwVal3'"></li>
 373                     </ul>
 374                 </div>
 375
 376             </div>
 377         </div>
 378
 379         <script type="text/ng-template" id="kwVal">
 380 <h2 class="heading-small"></h2>
 381                         <h4>
 382                             <a href="javascript:void(0);" ng-click="showDetails = ! showDetails">
 383                                 {{kw.name}} (Nested depth: {{$depth = $parent.$depth && $parent.$depth + 1 || 1}})</a>
 384                         </h4>
 385                         <div ng-show="showDetails" ng-style="{'margin-left': 50*$depth+'px'}">
 386                             <p>Type: <i>
 387                                 {{kw.type}}</i></p>
 388                             <p>Library: <i>
 389                                 {{kw.library}}</i></p>
 390                             <p>Documentation: <i> {{kw.doc}}</i></p>
 391                             <p>Start time:
 392                                 <i>{{kw.status.starttime}}</i></p>
 393                             <p>End time:
 394                                 <i>{{kw.status.endtime}}</i></p>
 395                             <p>Status:
 396                                 <i>{{kw.status.status}}</i></p>
 397                             <p ng-if="kw.arguments">Arguments:
 398                                 <ul>
 399                                     <li ng-repeat="arg in kw.arguments.arg">&emsp;&emsp;&emsp;&emsp;<i>{{arg}}</i></li>
 400                                 </ul>
 401                             </p>
 402                             <p ng-if="kw.msg">Message:
 403                                 <i>{{kw.msg.content}}</i></p>
 404                             <p></p>
 405                             <p ng-if="kw.kw">Used Robot keywords:</p>
 406    <ul ng-if="kw.kw">
 407     <li ng-repeat="kw in kw.kw" ng-include="'kwVal'"></li>
 408   </ul>
 409 </script>
 410
 411         <script type="text/ng-template" id="kwVal3">
 412 <h2 class="heading-small"></h2>
 413                         <h4>
 414                             <a href="javascript:void(0);" ng-click="showDetails4 = ! showDetails4">
 415                                 {{kw.name}} (Nested depth: {{$depth = $parent.$depth && $parent.$depth + 1 || 1}})</a>
 416                         </h4>
 417                         <div ng-show="showDetails4" ng-style="{'margin-left': 50*$depth+'px'}">
 418                             <p>Type: <i>
 419                                 {{kw.type}}</i></p>
 420                             <p>Library: <i>
 421                                 {{kw.library}}</i></p>
 422                             <p>Documentation: <i> {{kw.doc}}</i></p>
 423                             <p>Start time:
 424                                 <i>{{kw.status.starttime}}</i></p>
 425                             <p>End time:
 426                                 <i>{{kw.status.endtime}}</i></p>
 427                             <p>Status:
 428                                 <i>{{kw.status.status}}</i></p>
 429                             <p ng-if="kw.arguments">Arguments:
 430                                 <ul>
 431                                     <li ng-repeat="arg in kw.arguments.arg">&emsp;&emsp;&emsp;&emsp;<i>{{arg}}</i></li>
 432                                 </ul>
 433                             </p>
 434                             <p ng-if="kw.msg">Message:
 435                                 <i>{{kw.msg.content}}</i></p>
 436                             <p></p>
 437                             <p ng-if="kw.kw">Used Robot keywords:</p>
 438    <ul ng-if="kw.kw">
 439     <li ng-repeat="kw in kw.kw" ng-include="'kwVal3'"></li>
 440   </ul>
 441 </script>
 442     </div>
 443 </div>