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
  94             ng-hide="selectedLayer == null || selectedTestSuiteName == null">
  95             <div>
  96                 <h2 class="heading-small"></h2>
  97                 <div class="box">
  98                     <h3 class="heading-small">
  99                         <u>General Info</u>
 100                     </h3>
 101                     <p></p>
 102
 103                     <p></p>
 104                     <p>Name: {{selectedRobotTestResult.name}}</p>
 105                     <p>Generated:
 106                         {{selectedRobotTestResult.robot.generated}}</p>
 107                     <p>Generator:
 108                         {{selectedRobotTestResult.robot.generator}}</p>
 109                     <p>Errors:
 110                         {{selectedRobotTestResult.robot.errors}}</p>
 111
 112                     <h2 class="heading-small"></h2>
 113                     <h3 class="heading-small">
 114                         <u>Test Statistics</u>
 115                     </h3>
 116                     <p></p>
 117                     <table class="striped" cellspacing="0"
 118                         cellpadding="10">
 119                         <caption>
 120                             <h3></h3>
 121                         </caption>
 122                         <thead>
 123                             <th>
 124                                 <p>&nbsp;Total statistics&nbsp;</p>
 125                             </th>
 126                             <th>
 127                                 <p>Total&nbsp;</p>
 128                             </th>
 129                             <th>
 130                                 <p>Pass&nbsp;</p>
 131                             </th>
 132                             <th>
 133                                 <p>Fail&nbsp;</p>
 134                             </th>
 135                             <th>
 136                                 <p>Pass / Fail&nbsp;</p>
 137                             </th>
 138                             </tr>
 139                         </thead>
 140                         <tbody>
 141                             <tr
 142                                 ng-repeat="stat in selectedRobotTestResult.robot.statistics.total.stat">
 143                                 <td
 144                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 145                                     stat.content }}</td>
 146                                 <td
 147                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 148                                     (stat.fail * 1) + (stat.pass*1) }}</td>
 149                                 <td
 150                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 151                                     stat.pass }}</td>
 152                                 <td
 153                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 154                                     stat.fail}}</td>
 155                                 <td
 156                                     style="padding-left: 10px; font-size: 15px; width: 13%;">
 157                                     <div class="graph">
 158                                         <div class="pass-bar"
 159                                             ng-style="{ 'width': {{(100* stat.pass/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
 160                                             title="100%"></div>
 161                                         <div class="fail-bar"
 162                                             ng-style="{ 'width': {{(100* stat.fail/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
 163                                             title="0%"></div>
 164                                     </div>
 165                                 </td>
 166                             </tr>
 167                         </tbody>
 168                     </table>
 169
 170                     <br>
 171
 172                     <h3 class="heading-small"></h3>
 173                     <table class="striped" cellspacing="0"
 174                         cellpadding="10">
 175                         <caption>
 176                             <h3></h3>
 177                         </caption>
 178                         <thead>
 179                             <th>
 180                                 <p>&nbsp;Statistics by Tag&nbsp;</p>
 181                             </th>
 182                             <th>
 183                                 <p>Total&nbsp;</p>
 184                             </th>
 185                             <th>
 186                                 <p>Pass&nbsp;</p>
 187                             </th>
 188                             <th>
 189                                 <p>Fail&nbsp;</p>
 190                             </th>
 191                             <th>
 192                                 <p>Pass / Fail&nbsp;</p>
 193                             </th>
 194                             </tr>
 195                         </thead>
 196                         <tbody>
 197                             <tr
 198                                 ng-repeat="stat in selectedRobotTestResult.robot.statistics.tag.stat">
 199                                 <td
 200                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 201                                     stat.content }}</td>
 202                                 <td
 203                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 204                                     (stat.fail * 1) + (stat.pass*1) }}</td>
 205                                 <td
 206                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 207                                     stat.pass }}</td>
 208                                 <td
 209                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 210                                     stat.fail}}</td>
 211                                 <td
 212                                     style="padding-left: 10px; font-size: 15px; width: 13%;">
 213                                     <div class="graph">
 214                                         <div class="pass-bar"
 215                                             ng-style="{ 'width': {{(100* stat.pass/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
 216                                             title="100%"></div>
 217                                         <div class="fail-bar"
 218                                             ng-style="{ 'width': {{(100* stat.fail/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
 219                                             title="0%"></div>
 220                                     </div>
 221                                 </td>
 222                             </tr>
 223                         </tbody>
 224                     </table>
 225
 226                     <br>
 227
 228                     <h3 class="heading-small"></h3>
 229                     <table class="striped" cellspacing="0"
 230                         cellpadding="10">
 231                         <caption>
 232                             <h3></h3>
 233                         </caption>
 234                         <thead>
 235                             <th>
 236                                 <p>&nbsp;Statistics by Suite&nbsp;</p>
 237                             </th>
 238                             <th>
 239                                 <p>Total&nbsp;</p>
 240                             </th>
 241                             <th>
 242                                 <p>Pass&nbsp;</p>
 243                             </th>
 244                             <th>
 245                                 <p>Fail&nbsp;</p>
 246                             </th>
 247                             <th>
 248                                 <p>Pass / Fail&nbsp;</p>
 249                             </th>
 250                             </tr>
 251                         </thead>
 252                         <tbody>
 253                             <tr
 254                                 ng-repeat="stat in selectedRobotTestResult.robot.statistics.suite.stat">
 255                                 <td
 256                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 257                                     stat.content }}</td>
 258                                 <td
 259                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 260                                     (stat.fail * 1) + (stat.pass*1) }}</td>
 261                                 <td
 262                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 263                                     stat.pass }}</td>
 264                                 <td
 265                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 266                                     stat.fail}}</td>
 267                                 <td
 268                                     style="padding-left: 10px; font-size: 15px; width: 13%;">
 269                                     <div class="graph">
 270                                         <div class="pass-bar"
 271                                             ng-style="{ 'width': {{(100* stat.pass/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
 272                                             title="100%"></div>
 273                                         <div class="fail-bar"
 274                                             ng-style="{ 'width': {{(100* stat.fail/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
 275                                             title="0%"></div>
 276                                     </div>
 277                                 </td>
 278                             </tr>
 279                         </tbody>
 280                     </table>
 281                 </div>
 282
 283                 <h2 class="heading-small"></h2>
 284                 <div class="box">
 285                     <h3 class="heading-small">
 286                         <a href="javascript:void(0);"
 287                             ng-click="showDetailsLog = ! showDetailsLog">Test
 288                             Execution Log</a>
 289                     </h3>
 290                     <div ng-show="showDetailsLog">
 291                         <p></p>
 292                         <p>Root Suite Full Name:
 293                             {{selectedRobotTestResult.robot.suite.name}}</p>
 294                         <p>Source:
 295                             {{selectedRobotTestResult.robot.suite.source}}</p>
 296                         <p>Status:
 297                             {{selectedRobotTestResult.robot.suite.status.status}}</p>
 298                         <p>Start time:
 299                             {{selectedRobotTestResult.robot.suite.status.starttime}}</p>
 300                         <p>End time:
 301                             {{selectedRobotTestResult.robot.suite.status.endtime}}</p>
 302
 303                         <h2 class="heading-small"></h2>
 304                         <p></p>
 305                         <p>Sub-suite Full Name:
 306                             {{selectedRobotTestResult.robot.suite.suite.name}}</p>
 307                         <p>Documentation:
 308                             {{selectedRobotTestResult.robot.suite.suite.doc}}</p>
 309                         <p>Source:
 310                             {{selectedRobotTestResult.robot.suite.suite.source}}</p>
 311                         <p>Status:
 312                             {{selectedRobotTestResult.robot.suite.suite.status.status}}</p>
 313                         <p>Start time:
 314                             {{selectedRobotTestResult.robot.suite.suite.status.starttime}}</p>
 315                         <p>End time:
 316                             {{selectedRobotTestResult.robot.suite.suite.status.endtime}}</p>
 317                     </div>
 318                 </div>
 319
 320                 <h2 class="heading-small"></h2>
 321                 <div class="box">
 322                     <ul>
 323                         <h4 class="heading-small">Sub-suite Robot
 324                             keywords</h4>
 325                         <li
 326                             ng-repeat="kw in selectedRobotTestResult.robot.suite.suite.kw"
 327                             ng-include="'kwVal'"></li>
 328                     </ul>
 329                 </div>
 330
 331                 <h2 class="heading-small"></h2>
 332                 <div class="box">
 333                     <h3 class="heading-small">Test Cases</h3>
 334                     <table class="striped" cellspacing="0"
 335                         cellpadding="10">
 336                         <caption>
 337                             <h3></h3>
 338                         </caption>
 339                         <thead>
 340                             <th>
 341                                 <p>&nbsp;Full Name&nbsp;</p>
 342                             </th>
 343                             <th>
 344                                 <p>Documentation&nbsp;</p>
 345                             </th>
 346                             <th>
 347                                 <p>Status&nbsp;</p>
 348                             </th>
 349                             <th>
 350                                 <p>Start Time&nbsp;</p>
 351                             </th>
 352                             <th>
 353                                 <p>End Time&nbsp;</p>
 354                             </th>
 355                             <th>
 356                                 <p>Critical&nbsp;</p>
 357                             </th>
 358                             <th>
 359                                 <p>Message&nbsp;</p>
 360                             </th>
 361                             </tr>
 362                         </thead>
 363                         <tbody>
 364                             <tr
 365                                 ng-repeat="test in selectedRobotTestResult.robot.suite.suite.test"
 366                                 ng-class="{selected:test.id == selectedTestId}"
 367                                 ng-click="setClickedTest(test)">
 368                                 <td
 369                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 370                                     test.name }}</td>
 371                                 <td
 372                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.doc}}</td>
 373                                 <td
 374                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.status}}</td>
 375                                 <td
 376                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.starttime}}</td>
 377                                 <td
 378                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.endtime}}</td>
 379                                 <td
 380                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.critical}}</td>
 381                                 <td
 382                                     style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.content}}</td>
 383                             </tr>
 384                         </tbody>
 385                     </table>
 386                 </div>
 387
 388                 <h2 class="heading-small"></h2>
 389                 <div class="box">
 390                     <ul>
 391                         <h4 class="heading-small">Robot keywords of
 392                             the selected test case</h4>
 393                         <li ng-repeat="kw in selectedTest.kw"
 394                             ng-include="'kwVal3'"></li>
 395                     </ul>
 396                 </div>
 397
 398             </div>
 399         </div>
 400
 401         <script type="text/ng-template" id="kwVal">
 402 <h2 class="heading-small"></h2>
 403                         <h4>
 404                             <a href="javascript:void(0);" ng-click="showDetails = ! showDetails">
 405                                 {{kw.name}}</a>
 406                         </h4>
 407                         <div ng-show="showDetails">
 408                             <p>&emsp;&emsp;&emsp;&emsp; Type:
 409                                 {{kw.type}}</p>
 410                             <p>&emsp;&emsp;&emsp;&emsp; Library:
 411                                 {{kw.library}}</p>
 412                             <p>&emsp;&emsp;&emsp;&emsp;
 413                                 Documentation: {{kw.doc}}</p>
 414                             <p>&emsp;&emsp;&emsp;&emsp; Start time:
 415                                 {{kw.status.starttime}}</p>
 416                             <p>&emsp;&emsp;&emsp;&emsp; End time:
 417                                 {{kw.status.endtime}}</p>
 418                             <p>&emsp;&emsp;&emsp;&emsp; Status:
 419                                 {{kw.status.status}}</p>
 420                             <p></p>
 421                             <p>&emsp;&emsp;&emsp;&emsp; Used Robot
 422                                 keywords:</p>
 423    <ul ng-if="kw.kw">
 424     <li ng-repeat="kw in kw.kw" ng-include="'kwVal'"></li>
 425   </ul>
 426 </script>
 427
 428         <script type="text/ng-template" id="kwVal3">
 429 <h2 class="heading-small"></h2>
 430                         <h4>
 431                             <a href="javascript:void(0);" ng-click="showDetails4 = ! showDetails4">
 432                                 {{kw.name}}</a>
 433                         </h4>
 434                         <div ng-show="showDetails4">
 435                             <p>&emsp;&emsp;&emsp;&emsp; Type:
 436                                 {{kw.type}}</p>
 437                             <p>&emsp;&emsp;&emsp;&emsp; Library:
 438                                 {{kw.library}}</p>
 439                             <p>&emsp;&emsp;&emsp;&emsp;
 440                                 Documentation: {{kw.doc}}</p>
 441                             <p>&emsp;&emsp;&emsp;&emsp; Start time:
 442                                 {{kw.status.starttime}}</p>
 443                             <p>&emsp;&emsp;&emsp;&emsp; End time:
 444                                 {{kw.status.endtime}}</p>
 445                             <p>&emsp;&emsp;&emsp;&emsp; Status:
 446                                 {{kw.status.status}}</p>
 447                             <p></p>
 448                             <p>&emsp;&emsp;&emsp;&emsp; Used Robot
 449                                 keywords:</p>
 450    <ul ng-if="kw.kw">
 451     <li ng-repeat="kw in kw.kw" ng-include="'kwVal3'"></li>
 452   </ul>
 453 </script>
 454     </div>
 455 </div>