ui/src/main/webapp/app/BluvalUI/ValidationResults/ValidationResultsTemplate.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 .grid {
  20     width: 100%;
  21     height: 400px;
  22 }
  23
  24 .grid .ui-grid-header-cell {
  25     text-align: center;
  26 }
  27
  28 .icon-add-widget:before {
  29     content: "\e717";
  30 }
  31
  32 .ui-grid-icon-angle-down {
  33     margin-top: 5px;
  34 }
  35
  36 body {
  37     font-size: 13px;
  38 }
  39
  40 .Row {
  41     display: table;
  42     width: 100%;
  43 }
  44
  45 .Column {
  46     display: table-cell;
  47 }
  48
  49 .table-bordered, .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th,
  50     .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th,
  51     .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
  52     border: 1px solid #d1d1d1;
  53 }
  54
  55 .table {
  56     width: 100%;
  57     max-width: 100%;
  58     margin-bottom: 20px;
  59 }
  60
  61 table {
  62     background-color: transparent;
  63     border-collapse: collapse;
  64     border-spacing: 0;
  65     display: table;
  66 }
  67
  68 .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>th {
  69     font-family: Open Sans;
  70     font-style: normal;
  71     font-weight: 600;
  72 }
  73
  74 .table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th,
  75     .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th,
  76     .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th
  77     {
  78     border-top: 0;
  79 }
  80
  81 .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th,
  82     .table>thead>tr>td, .table>thead>tr>th {
  83     padding: 2px 10px 3px;
  84 }
  85
  86 .table>tbody>tr.success>td, .table>tbody>tr.success>th, .table>tbody>tr>td.success,
  87     .table>tbody>tr>th.success, .table>tfoot>tr.success>td, .table>tfoot>tr.success>th,
  88     .table>tfoot>tr>td.success, .table>tfoot>tr>th.success, .table>thead>tr.success>td,
  89     .table>thead>tr.success>th, .table>thead>tr>td.success, .table>thead>tr>th.success
  90     {
  91     background-color: #dff0d8;
  92 }
  93
  94 .table>tbody>tr.warning>td, .table>tbody>tr.warning>th, .table>tbody>tr>td.warning,
  95     .table>tbody>tr>th.warning, .table>tfoot>tr.warning>td, .table>tfoot>tr.warning>th,
  96     .table>tfoot>tr>td.warning, .table>tfoot>tr>th.warning, .table>thead>tr.warning>td,
  97     .table>thead>tr.warning>th, .table>thead>tr>td.warning, .table>thead>tr>th.warning
  98     {
  99     background-color: #fcf8e3;
 100 }
 101
 102 .ilocal {
 103     border: solid black;
 104     border-width: 0 3px 3px 0;
 105     display: inline-block;
 106     padding: 3px;
 107 }
 108
 109 .up {
 110     transform: rotate(-135deg);
 111     -webkit-transform: rotate(-135deg);
 112 }
 113
 114 .down {
 115     transform: rotate(45deg);
 116     -webkit-transform: rotate(45deg);
 117 }
 118 </style>
 119
 120     <h1 class="heading-page">Blueprint Validation Results</h1>
 121
 122     <div ng-show="loadingResults">
 123         <img src=" static/fusion/images/giphy.gif" />
 124     </div>
 125
 126     <h2 class="heading-small"></h2>
 127     <div ng-show="!loadingResults">
 128         <label
 129             style="float: left; margin-top: 10px; margin-right: 10px;">Blueprint
 130             layer:</label>
 131         <div
 132             class="form-field form-field__glued pull-left size-onefifth"
 133             style="float: left; width: 220px; margin-right: 20px;">
 134             <input ng-model="filterLayer" type="text"
 135                 placeholder="Search for layer?"
 136                 style="margin-top: 5px; width: 220px;">
 137         </div>
 138
 139         <label
 140             style="float: left; margin-top: 10px; margin-right: 10px;">Result:</label>
 141         <div
 142             class="form-field form-field__glued pull-left size-onefifth"
 143             style="float: left; width: 260px; margin-right: 40px;">
 144             <input ng-model="filterResult" type="text"
 145                 placeholder="Search for result?"
 146                 style="margin-top: 5px; width: 260px;">
 147         </div>
 148
 149         <label
 150             style="float: left; margin-top: 10px; margin-right: 10px;">Timestamp:</label>
 151         <div
 152             class="form-field form-field__glued pull-left size-onefifth"
 153             style="float: left; width: 260px; margin-right: 40px;">
 154             <input ng-model="filtertimestamp.timestamp" type="text"
 155                 placeholder="Search for timestamp?"
 156                 style="margin-top: 5px; width: 260px;">
 157         </div>
 158
 159         <div style="float: right;">
 160             <button style="margin-left: 25px; margin-top: 4px;"
 161                 type="submit" class="btn btn-alt btn-small"
 162                 ng-click="refreshValidationResults();">Refresh</button>
 163         </div>
 164
 165         <h2 class="heading-small"></h2>
 166         <table class="table table-striped table-bordered">
 167             <thead>
 168                 <tr style="background-color: grey;">
 169                     <th class>Lab&nbsp;</th>
 170                     <th class>Blueprint&nbsp;</th>
 171                     <th class>Version</th>
 172                     <th class>Timestamp&nbsp;</th>
 173                     <th class>
 174                         <p>Date/Time of result</p>
 175                         <p>
 176                             storage&nbsp; <i class="up ilocal"
 177                                 ng-click="descendingOrder()"></i> <i
 178                                 class="down ilocal"
 179                                 ng-click="ascendingOrder()"></i>
 180                         </p>
 181                     </th>
 182                     <th class>Optional test cases&nbsp;</th>
 183                     <th class>All layers&nbsp;</th>
 184                     <th class>Layer(s)&nbsp;</th>
 185                     <th class>Submission Id&nbsp;</th>
 186                     <th class>Result&nbsp;</th>
 187                 </tr>
 188             </thead>
 189             <tbody>
 190                 <tr class="border_bottom"
 191                     ng-repeat="validationNexusTestResult in filterWithResult(filterWithLayer(validationNexusTestResults,filterLayer), filterResult) | filter:filtertimestamp | orderBy:dateTimeSort:descending"
 192                     ng-class="{success: (validationNexusTestResult.result===true), warning: (validationNexusTestResult.result===false)}">
 193                     <td class
 194                         style="padding-left: 10px; font-size: 15px; width: 13%;">
 195                         {{ getLab(validationNexusTestResult.silo, silos)
 196                         }}</td>
 197                     <td class
 198                         style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 199                         validationNexusTestResult.blueprintName }}</td>
 200                     <td class
 201                         style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 202                         validationNexusTestResult.version }}</td>
 203                     <td class
 204                         style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 205                         validationNexusTestResult.timestamp }}</td>
 206                     <td class
 207                         style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 208                         validationNexusTestResult.dateOfStorage }}</td>
 209                     <td class
 210                         style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 211                         validationNexusTestResult.optional }}</td>
 212                     <td class
 213                         style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 214                         validationNexusTestResult.allLayers }}</td>
 215                     <td class
 216                         style="padding-left: 10px; font-size: 15px; width: 13%;">
 217                         <div
 218                             ng-repeat="layer in  getBlueprintLayers(validationNexusTestResult.wRobotNexusTestResults)">
 219                             {{layer}}</div>
 220                     </td>
 221                     <td class
 222                         style="padding-left: 10px; font-size: 15px; width: 13%;">{{
 223                         validationNexusTestResult.submissionId }}</td>
 224                     <td class
 225                         style="padding-left: 10px; font-size: 15px; width: 13%;">
 226                         <button
 227                             style="margin-left: 25px; margin-top: 4px;"
 228                             type="submit" class="btn btn-alt btn-small"
 229                             ng-click="getTestSuiteResults(validationNexusTestResult);">{{
 230                             mapResult(validationNexusTestResult)}}</button>
 231                         </button>
 232                     </td>
 233                 </tr>
 234             </tbody>
 235         </table>
 236
 237     </div>
 238
 239 </div>