ui/src/main/webapp/app/AECBlueprintValidationUI/GetBySubmissionId/GetBySubmissionIdTemplate.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
  17 <div id="page-content" class="content" style="padding: 25px;">
  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 </style>
  36
  37  <h1 class="heading-page">Get results by submission</h1>
  38
  39  <h2 class="heading-small">Select Submission:</h2>
  40
  41  <div>
  42   <select ng-model="selectedSubmission"
  43    ng-init="selectedSubmission=submissionsForDisplay[0]"
  44    ng-change="selectedSubmissionChange(selectedSubmission)"
  45    ng-options="n for n in submissionsForDisplay">
  46   </select>
  47  </div>
  48
  49  <h2 class="heading-small">Select a blueprint layer of the selected
  50   submission:</h2>
  51  <div>
  52   <select ng-model="selectedLayer" ng-init="resultsLayers[0]"
  53    ng-change="selectedResultsLayerChange(selectedLayer)"
  54    ng-options="n for n in resultsLayers">
  55   </select>
  56  </div>
  57
  58  <h2 class="heading-small">Select a test suite of the selected
  59   (submission, layer) pair in order to be displayed:</h2>
  60  <div>
  61   <select ng-model="selectedTestSuiteName"
  62    ng-init="resultsLayerTestSuitesNames[0]"
  63    ng-change="selectedTestSuitesNameChange(selectedTestSuiteName)"
  64    ng-options="n for n in resultsLayerTestSuitesNames">
  65   </select>
  66  </div>
  67
  68
  69  <br> <br> <br>
  70
  71  <div>
  72
  73   <h2>
  74    <u>Test info</u>
  75   </h2>
  76
  77   <p></p>
  78   <p>Name: {{selectedRobotTestResult.name}}</p>
  79   <p>Generated: {{selectedRobotTestResult.robot.generated}}</p>
  80   <p>Generator: {{selectedRobotTestResult.robot.generator}}</p>
  81   <p>Errors: {{selectedRobotTestResult.robot.errors}}</p>
  82
  83   <h2 class="heading-small"></h2>
  84   <h3 class="heading-small">
  85    <u>Test Statistics</u>
  86   </h3>
  87   <p></p>
  88   <table class="striped" cellspacing="0" cellpadding="10">
  89    <caption>
  90     <h3></h3>
  91    </caption>
  92    <thead>
  93     <th><p>&nbsp;Total statistics&nbsp;</p></th>
  94     <th><p>Total&nbsp;</p></th>
  95     <th><p>Pass&nbsp;</p></th>
  96     <th><p>Fail&nbsp;</p></th>
  97     <th><p>Pass / Fail&nbsp;</p></th>
  98     </tr>
  99    </thead>
 100    <tbody>
 101     <tr
 102      ng-repeat="stat in selectedRobotTestResult.robot.statistics.total.stat">
 103      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 104       stat.content }}</td>
 105      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 106       (stat.fail * 1) + (stat.pass*1) }}</td>
 107      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 108       stat.pass }}</td>
 109      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 110       stat.fail}}</td>
 111      <td style="padding-left: 10px; font-size: 15px; width: 13%;">
 112       <div class="graph">
 113        <div class="pass-bar"
 114         ng-style="{ 'width': {{(100* stat.pass/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
 115         title="100%"></div>
 116        <div class="fail-bar"
 117         ng-style="{ 'width': {{(100* stat.fail/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
 118         title="0%"></div>
 119       </div>
 120      </td>
 121     </tr>
 122    </tbody>
 123   </table>
 124
 125   <br>
 126
 127   <h3 class="heading-small"></h3>
 128   <table class="striped" cellspacing="0" cellpadding="10">
 129    <caption>
 130     <h3></h3>
 131    </caption>
 132    <thead>
 133     <th><p>&nbsp;Statistics by Tag&nbsp;</p></th>
 134     <th><p>Total&nbsp;</p></th>
 135     <th><p>Pass&nbsp;</p></th>
 136     <th><p>Fail&nbsp;</p></th>
 137     <th><p>Pass / Fail&nbsp;</p></th>
 138     </tr>
 139    </thead>
 140    <tbody>
 141     <tr
 142      ng-repeat="stat in selectedRobotTestResult.robot.statistics.tag.stat">
 143      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 144       stat.content }}</td>
 145      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 146       (stat.fail * 1) + (stat.pass*1) }}</td>
 147      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 148       stat.pass }}</td>
 149      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 150       stat.fail}}</td>
 151      <td style="padding-left: 10px; font-size: 15px; width: 13%;">
 152       <div class="graph">
 153        <div class="pass-bar"
 154         ng-style="{ 'width': {{(100* stat.pass/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
 155         title="100%"></div>
 156        <div class="fail-bar"
 157         ng-style="{ 'width': {{(100* stat.fail/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
 158         title="0%"></div>
 159       </div>
 160      </td>
 161     </tr>
 162    </tbody>
 163   </table>
 164
 165   <br>
 166
 167   <h3 class="heading-small"></h3>
 168   <table class="striped" cellspacing="0" cellpadding="10">
 169    <caption>
 170     <h3></h3>
 171    </caption>
 172    <thead>
 173     <th><p>&nbsp;Statistics by Suite&nbsp;</p></th>
 174     <th><p>Total&nbsp;</p></th>
 175     <th><p>Pass&nbsp;</p></th>
 176     <th><p>Fail&nbsp;</p></th>
 177     <th><p>Pass / Fail&nbsp;</p></th>
 178     </tr>
 179    </thead>
 180    <tbody>
 181     <tr
 182      ng-repeat="stat in selectedRobotTestResult.robot.statistics.suite.stat">
 183      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 184       stat.content }}</td>
 185      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 186       (stat.fail * 1) + (stat.pass*1) }}</td>
 187      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 188       stat.pass }}</td>
 189      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 190       stat.fail}}</td>
 191      <td style="padding-left: 10px; font-size: 15px; width: 13%;">
 192       <div class="graph">
 193        <div class="pass-bar"
 194         ng-style="{ 'width': {{(100* stat.pass/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
 195         title="100%"></div>
 196        <div class="fail-bar"
 197         ng-style="{ 'width': {{(100* stat.fail/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
 198         title="0%"></div>
 199       </div>
 200      </td>
 201     </tr>
 202    </tbody>
 203   </table>
 204
 205  </div>
 206 </div>