UI initial implementation.
[validation.git] / ui / src / main / webapp / views / findBySubmissionId.html
diff --git a/ui/src/main/webapp/views/findBySubmissionId.html b/ui/src/main/webapp/views/findBySubmissionId.html
new file mode 100644 (file)
index 0000000..2900b25
--- /dev/null
@@ -0,0 +1,182 @@
+<!--
+Copyright (c) 2019 AT&T Intellectual Property. All rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<!DOCTYPE script PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html ng-app="BlueprintValidationUIManagement">
+<head>
+<style>
+.graph, .empty-graph {
+       border: 1px solid #ccc;
+       width: auto;
+       height: 7px;
+       padding: 0;
+       background: #f33;
+}
+
+.pass-bar {
+       background: #1d4;
+}
+
+.pass-bar, .fail-bar {
+       float: left;
+       height: 100%;
+}
+</style>
+</head>
+<body ng-controller="AECFindBySubmissionIdController">
+ <div id="akrainofindbysubmissionidform"
+  style="padding-left: 20px; padding-right: 20px">
+  <div>
+   <h1>Find results by submission</h1>
+  </div>
+
+  <label>Select Submission: </label>
+  <div class="selectStyle">
+   <select class="exampleTable" ng-model="selectedSubmission"
+    ng-init="selectedSubmission=submissionsForDisplay[0]"
+    ng-change="selectedSubmissionChange(selectedSubmission)"
+    ng-options="n for n in submissionsForDisplay">
+   </select>
+  </div>
+
+  <div ng-repeat="result in results">
+
+   <h2>Test info</h2>
+   <p></p>
+   <p>Name: {{result.name}}</p>
+   <p>Generated: {{result.robot.generated}}</p>
+   <p>Generator: {{result.robot.generator}}</p>
+   <p>Errors: {{result.robot.errors}}</p>
+
+   <h2>Test Statistics</h2>
+   <p></p>
+   <table cellspacing="0" cellpadding="10" class="siteStatusTable">
+    <caption>
+     <h3></h3>
+    </caption>
+    <thead>
+     <th>&nbsp;Total statistics&nbsp;</th>
+     <th>Total&nbsp;</th>
+     <th>Pass&nbsp;</th>
+     <th>Fail&nbsp;</th>
+     <th>Pass / Fail&nbsp;</th>
+     </tr>
+    </thead>
+    <tbody>
+     <tr class="border_bottom"
+      ng-repeat="stat in result.robot.statistics.total.stat">
+      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
+       stat.content }}</td>
+      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
+       (stat.fail * 1) + (stat.pass*1) }}</td>
+      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
+       stat.pass }}</td>
+      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
+       stat.fail}}</td>
+      <td style="padding-left: 10px; font-size: 15px; width: 13%;">
+       <div class="graph">
+        <div class="pass-bar"
+         ng-style="{ 'width': {{(100* stat.pass/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
+         title="100%"></div>
+        <div class="fail-bar"
+         ng-style="{ 'width': {{(100* stat.fail/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
+         title="0%"></div>
+       </div>
+      </td>
+     </tr>
+    </tbody>
+   </table>
+
+   <table cellspacing="0" cellpadding="10" class="siteStatusTable">
+    <caption>
+     <h3></h3>
+    </caption>
+    <thead>
+     <th>&nbsp;Statistics by Tag&nbsp;</th>
+     <th>Total&nbsp;</th>
+     <th>Pass&nbsp;</th>
+     <th>Fail&nbsp;</th>
+     <th>Pass / Fail&nbsp;</th>
+     </tr>
+    </thead>
+    <tbody>
+     <tr class="border_bottom"
+      ng-repeat="stat in results.robot.statistics.tag.stat">
+      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
+       stat.content }}</td>
+      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
+       (stat.fail * 1) + (stat.pass*1) }}</td>
+      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
+       stat.pass }}</td>
+      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
+       stat.fail}}</td>
+      <td style="padding-left: 10px; font-size: 15px; width: 13%;">
+       <div class="graph">
+        <div class="pass-bar"
+         ng-style="{ 'width': {{(100* stat.pass/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
+         title="100%"></div>
+        <div class="fail-bar"
+         ng-style="{ 'width': {{(100* stat.fail/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
+         title="0%"></div>
+       </div>
+      </td>
+     </tr>
+    </tbody>
+   </table>
+
+   <table cellspacing="0" cellpadding="10" class="siteStatusTable">
+    <caption>
+     <h3></h3>
+    </caption>
+    <thead>
+     <th>&nbsp;Statistics by Suite&nbsp;</th>
+     <th>Total&nbsp;</th>
+     <th>Pass&nbsp;</th>
+     <th>Fail&nbsp;</th>
+     <th>Pass / Fail&nbsp;</th>
+     </tr>
+    </thead>
+    <tbody>
+     <tr class="border_bottom"
+      ng-repeat="stat in result.robot.statistics.suite.stat">
+      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
+       stat.content }}</td>
+      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
+       (stat.fail * 1) + (stat.pass*1) }}</td>
+      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
+       stat.pass }}</td>
+      <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
+       stat.fail}}</td>
+      <td style="padding-left: 10px; font-size: 15px; width: 13%;">
+       <div class="graph">
+        <div class="pass-bar"
+         ng-style="{ 'width': {{(100* stat.pass/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
+         title="100%"></div>
+        <div class="fail-bar"
+         ng-style="{ 'width': {{(100* stat.fail/((stat.fail * 1) + (stat.pass*1)) )| number:0}} + '%' }"
+         title="0%"></div>
+       </div>
+      </td>
+     </tr>
+    </tbody>
+   </table>
+
+  </div>
+ </div>
+</body>
+
+</html>
+