[UI] UI enhancements
[validation.git] / ui / src / main / webapp / app / AECBlueprintValidationUI / GetBySubmissionId / GetBySubmissionIdTemplate.html
index 3e86330..8d6324c 100644 (file)
@@ -32,175 +32,357 @@ limitations under the License.
     float: left;
     height: 100%;
 }
+
+div.box {
+    border: 1px solid black;
+}
 </style>
 
  <h1 class="heading-page">Get results by submission</h1>
 
+ <h2 class="heading-small">General matching string:</h2>
+ <div>
+  <input ng-model="filterGeneralMatch" type="text" placeholder="?"
+   style="margin-top: 5px; width: 260px;">
+ </div>
+
  <h2 class="heading-small">Select Submission:</h2>
 
  <div>
   <select ng-model="selectedSubmission"
    ng-init="selectedSubmission=submissionsForDisplay[0]"
    ng-change="selectedSubmissionChange(selectedSubmission)"
-   ng-options="n for n in submissionsForDisplay">
+   ng-options="n for n in submissionsForDisplay | filter:filterGeneralMatch">
   </select>
  </div>
 
- <h2 class="heading-small">Select a blueprint layer of the selected
-  submission:</h2>
- <div>
-  <select ng-model="selectedLayer" ng-init="resultsLayers[0]"
-   ng-change="selectedResultsLayerChange(selectedLayer)"
-   ng-options="n for n in resultsLayers">
-  </select>
+ <div ng-show="loading">
+  <img src=" static/fusion/images/giphy.gif" />
  </div>
 
- <h2 class="heading-small">Select a test suite of the selected
-  (submission, layer) pair in order to be displayed:</h2>
- <div>
-  <select ng-model="selectedTestSuiteName"
-   ng-init="resultsLayerTestSuitesNames[0]"
-   ng-change="selectedTestSuitesNameChange(selectedTestSuiteName)"
-   ng-options="n for n in resultsLayerTestSuitesNames">
-  </select>
- </div>
+ <h2 class="heading-small"></h2>
+ <div ng-show="showResults">
+  <h2 class="heading-small">Select a blueprint layer of the
+   selected submission:</h2>
+  <div>
+   <select ng-model="selectedLayer" ng-init="resultsLayers[0]"
+    ng-change="selectedResultsLayerChange(selectedLayer)"
+    ng-options="n for n in resultsLayers">
+   </select>
+  </div>
 
+  <h2 class="heading-small">Select a test suite of the selected
+   (submission, layer) pair in order to be displayed:</h2>
+  <div>
+   <select ng-model="selectedTestSuiteName"
+    ng-init="resultsLayerTestSuitesNames[0]"
+    ng-change="selectedTestSuitesNameChange(selectedTestSuiteName)"
+    ng-options="n for n in resultsLayerTestSuitesNames">
+   </select>
+  </div>
+ </div>
 
  <br> <br> <br>
 
- <div>
+ <div
+  ng-hide="selectedSubmission == null || selectedLayer == null || selectedTestSuiteName == null">
+  <div>
+   <h2 class="heading-small"></h2>
+   <div class="box">
+    <h3 class="heading-small">
+     <u>General Info</u>
+    </h3>
+    <p></p>
 
-  <h2>
-   <u>Test info</u>
-  </h2>
-
-  <p></p>
-  <p>Name: {{selectedRobotTestResult.name}}</p>
-  <p>Generated: {{selectedRobotTestResult.robot.generated}}</p>
-  <p>Generator: {{selectedRobotTestResult.robot.generator}}</p>
-  <p>Errors: {{selectedRobotTestResult.robot.errors}}</p>
-
-  <h2 class="heading-small"></h2>
-  <h3 class="heading-small">
-   <u>Test Statistics</u>
-  </h3>
-  <p></p>
-  <table class="striped" cellspacing="0" cellpadding="10">
-   <caption>
-    <h3></h3>
-   </caption>
-   <thead>
-    <th><p>&nbsp;Total statistics&nbsp;</p></th>
-    <th><p>Total&nbsp;</p></th>
-    <th><p>Pass&nbsp;</p></th>
-    <th><p>Fail&nbsp;</p></th>
-    <th><p>Pass / Fail&nbsp;</p></th>
-    </tr>
-   </thead>
-   <tbody>
-    <tr
-     ng-repeat="stat in selectedRobotTestResult.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>
-
-  <br>
-
-  <h3 class="heading-small"></h3>
-  <table class="striped" cellspacing="0" cellpadding="10">
-   <caption>
-    <h3></h3>
-   </caption>
-   <thead>
-    <th><p>&nbsp;Statistics by Tag&nbsp;</p></th>
-    <th><p>Total&nbsp;</p></th>
-    <th><p>Pass&nbsp;</p></th>
-    <th><p>Fail&nbsp;</p></th>
-    <th><p>Pass / Fail&nbsp;</p></th>
-    </tr>
-   </thead>
-   <tbody>
-    <tr
-     ng-repeat="stat in selectedRobotTestResult.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>
-
-  <br>
-
-  <h3 class="heading-small"></h3>
-  <table class="striped" cellspacing="0" cellpadding="10">
-   <caption>
-    <h3></h3>
-   </caption>
-   <thead>
-    <th><p>&nbsp;Statistics by Suite&nbsp;</p></th>
-    <th><p>Total&nbsp;</p></th>
-    <th><p>Pass&nbsp;</p></th>
-    <th><p>Fail&nbsp;</p></th>
-    <th><p>Pass / Fail&nbsp;</p></th>
-    </tr>
-   </thead>
-   <tbody>
-    <tr
-     ng-repeat="stat in selectedRobotTestResult.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>
+    <p></p>
+    <p>Name: {{selectedRobotTestResult.name}}</p>
+    <p>Generated: {{selectedRobotTestResult.robot.generated}}</p>
+    <p>Generator: {{selectedRobotTestResult.robot.generator}}</p>
+    <p>Errors: {{selectedRobotTestResult.robot.errors}}</p>
+
+    <h2 class="heading-small"></h2>
+    <h3 class="heading-small">
+     <u>Test Statistics</u>
+    </h3>
+    <p></p>
+    <table class="striped" cellspacing="0" cellpadding="10">
+     <caption>
+      <h3></h3>
+     </caption>
+     <thead>
+      <th><p>&nbsp;Total statistics&nbsp;</p></th>
+      <th><p>Total&nbsp;</p></th>
+      <th><p>Pass&nbsp;</p></th>
+      <th><p>Fail&nbsp;</p></th>
+      <th><p>Pass / Fail&nbsp;</p></th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr
+       ng-repeat="stat in selectedRobotTestResult.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>
+
+    <br>
+
+    <h3 class="heading-small"></h3>
+    <table class="striped" cellspacing="0" cellpadding="10">
+     <caption>
+      <h3></h3>
+     </caption>
+     <thead>
+      <th><p>&nbsp;Statistics by Tag&nbsp;</p></th>
+      <th><p>Total&nbsp;</p></th>
+      <th><p>Pass&nbsp;</p></th>
+      <th><p>Fail&nbsp;</p></th>
+      <th><p>Pass / Fail&nbsp;</p></th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr
+       ng-repeat="stat in selectedRobotTestResult.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>
+
+    <br>
+
+    <h3 class="heading-small"></h3>
+    <table class="striped" cellspacing="0" cellpadding="10">
+     <caption>
+      <h3></h3>
+     </caption>
+     <thead>
+      <th><p>&nbsp;Statistics by Suite&nbsp;</p></th>
+      <th><p>Total&nbsp;</p></th>
+      <th><p>Pass&nbsp;</p></th>
+      <th><p>Fail&nbsp;</p></th>
+      <th><p>Pass / Fail&nbsp;</p></th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr
+       ng-repeat="stat in selectedRobotTestResult.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>
+
+   <h2 class="heading-small"></h2>
+   <div class="box">
+    <h3 class="heading-small">
+     <a href="#" ng-click="showDetailsLog = ! showDetailsLog">Test
+      Execution Log</a>
+    </h3>
+    <div ng-show="showDetailsLog">
+     <p></p>
+     <p>Root Suite Full Name:
+      {{selectedRobotTestResult.robot.suite.name}}</p>
+     <p>Source: {{selectedRobotTestResult.robot.suite.source}}</p>
+     <p>Status:
+      {{selectedRobotTestResult.robot.suite.status.status}}</p>
+     <p>Start time:
+      {{selectedRobotTestResult.robot.suite.status.starttime}}</p>
+     <p>End time:
+      {{selectedRobotTestResult.robot.suite.status.endtime}}</p>
+
+     <h2 class="heading-small"></h2>
+     <p></p>
+     <p>Sub-suite Full Name:
+      {{selectedRobotTestResult.robot.suite.suite.name}}</p>
+     <p>Documentation:
+      {{selectedRobotTestResult.robot.suite.suite.doc}}</p>
+     <p>Source: {{selectedRobotTestResult.robot.suite.suite.source}}</p>
+     <p>Status:
+      {{selectedRobotTestResult.robot.suite.suite.status.status}}</p>
+     <p>Start time:
+      {{selectedRobotTestResult.robot.suite.suite.status.starttime}}</p>
+     <p>End time:
+      {{selectedRobotTestResult.robot.suite.suite.status.endtime}}</p>
+    </div>
+   </div>
+
+   <h2 class="heading-small"></h2>
+   <div class="box">
+    <ul>
+     <h4 class="heading-small">Sub-suite Robot keywords</h4>
+     <li ng-repeat="kw in selectedRobotTestResult.robot.suite.suite.kw">
+      <h2 class="heading-small"></h2>
+      <h4>
+       <a href="#" ng-click="showDetails = ! showDetails">
+        {{kw.name}}</a>
+      </h4>
+      <div ng-show="showDetails">
+       <p>&emsp;&emsp;&emsp;&emsp; Type: {{kw.type}}</p>
+       <p>&emsp;&emsp;&emsp;&emsp; Library: {{kw.library}}</p>
+       <p>&emsp;&emsp;&emsp;&emsp; Documentation: {{kw.doc}}</p>
+       <p>&emsp;&emsp;&emsp;&emsp; Start time:
+        {{kw.status.starttime}}</p>
+       <p>&emsp;&emsp;&emsp;&emsp; End time: {{kw.status.endtime}}</p>
+       <p>&emsp;&emsp;&emsp;&emsp; Status: {{kw.status.status}}</p>
+       <p></p>
+       <p>&emsp;&emsp;&emsp;&emsp; Used Robot keywords</p>
+       <ul>
+        <li ng-repeat="kw2 in kw.kw">
+         <h4>
+          <a href="#" ng-click="showDetails2 = ! showDetails2">&emsp;&emsp;&emsp;&emsp;
+           {{kw2.name}}</a>
+         </h4>
+         <div ng-show="showDetails2">
+          <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; Type:
+           {{kw2.type}}</p>
+          <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
+           Library: {{kw2.library}}</p>
+          <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
+           Documentation: {{kw2.doc}}</p>
+          <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; Start
+           time: {{kw2.status.starttime}}</p>
+          <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; End
+           time: {{kw2.status.endtime}}</p>
+          <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
+           Status: {{kw2.status.status}}</p>
+         </div>
+        </li>
+       </ul>
       </div>
-     </td>
-    </tr>
-   </tbody>
-  </table>
+     </li>
+    </ul>
+   </div>
+
+   <h2 class="heading-small"></h2>
+   <div class="box">
+    <h3 class="heading-small">Test Cases</h3>
+    <table class="striped" cellspacing="0" cellpadding="10">
+     <caption>
+      <h3></h3>
+     </caption>
+     <thead>
+      <th><p>&nbsp;Full Name&nbsp;</p></th>
+      <th><p>Documentation&nbsp;</p></th>
+      <th><p>Status&nbsp;</p></th>
+      <th><p>Start Time&nbsp;</p></th>
+      <th><p>End Time&nbsp;</p></th>
+      <th><p>Critical&nbsp;</p></th>
+      <th><p>Message&nbsp;</p></th>
+      <th><p>Robot keywords&nbsp;</p></th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr
+       ng-repeat="test in selectedRobotTestResult.robot.suite.suite.test">
+       <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{
+        test.name }}</td>
+       <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.doc}}</td>
+       <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.status}}</td>
+       <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.starttime}}</td>
+       <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.endtime}}</td>
+       <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.critical}}</td>
+       <td style="padding-left: 10px; font-size: 15px; width: 13%;">{{test.status.content}}</td>
+       <td style="padding-left: 10px; font-size: 15px; width: 13%;">
+
+        <ul>
+         <li ng-repeat="testKw in test.kw">
+          <h2 class="heading-small"></h2>
+          <h4>
+           <a href="#" ng-click="showDetails3 = ! showDetails3">
+            {{testKw.name}}</a>
+          </h4>
+          <div ng-show="showDetails3">
+           <p>&emsp;&emsp;&emsp;&emsp; Type: {{testKw.type}}</p>
+           <p>&emsp;&emsp;&emsp;&emsp; Library: {{testKw.library}}</p>
+           <p>&emsp;&emsp;&emsp;&emsp; Documentation: {{testKw.doc}}</p>
+           <p>&emsp;&emsp;&emsp;&emsp; Start time:
+            {{testKw.status.starttime}}</p>
+           <p>&emsp;&emsp;&emsp;&emsp; End time:
+            {{testKw.status.endtime}}</p>
+           <p>&emsp;&emsp;&emsp;&emsp; Status:
+            {{testKw.status.status}}</p>
+           <p></p>
+           <p>&emsp;&emsp;&emsp;&emsp; Used Robot keywords</p>
+           <ul>
+            <li ng-repeat="testKw2 in testKw.kw">
+             <h4>
+              <a href="#" ng-click="showDetails4 = ! showDetails4">&emsp;&emsp;&emsp;&emsp;
+               {{testKw2.name}}</a>
+             </h4>
+             <div ng-show="showDetails4">
+              <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
+               Type: {{testKw2.type}}</p>
+              <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
+               Library: {{testKw2.library}}</p>
+              <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
+               Documentation: {{testKw2.doc}}</p>
+              <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
+               Start time: {{testKw2.status.starttime}}</p>
+              <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
+               End time: {{testKw2.status.endtime}}</p>
+              <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
+               Status: {{testKw2.status.status}}</p>
+             </div>
+            </li>
+           </ul>
+       </td>
+
+      </tr>
+     </tbody>
+    </table>
+   </div>
 
+  </div>
  </div>
 </div>
\ No newline at end of file