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