[UI] Support UI partial control
[validation.git] / ui / src / main / webapp / app / BluvalUI / ValidationResults / TestSuiteResults / TestSuiteResultsModal.html
diff --git a/ui/src/main/webapp/app/BluvalUI/ValidationResults/TestSuiteResults/TestSuiteResultsModal.html b/ui/src/main/webapp/app/BluvalUI/ValidationResults/TestSuiteResults/TestSuiteResultsModal.html
new file mode 100644 (file)
index 0000000..82eb5fe
--- /dev/null
@@ -0,0 +1,455 @@
+<!--
+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.
+-->
+<div id="page-content" class="content" style="padding: 25px;">
+
+    <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%;
+}
+
+div.box {
+    border: 1px solid black;
+}
+
+.bluvalDetails .property {
+    width: 30%;
+    display: inline-block;
+    box-sizing: border-box;
+    text-align: left;
+}
+
+.bluvalDetails .value {
+    text-align: left;
+    padding-left: 10px;
+    width: 70%;
+    display: inline-block;
+    box-sizing: border-box;
+}
+
+.selected {
+    background-color: #337ab7;
+    font-weight: bold;
+}
+
+#page-content {
+    margin-left: 20px;
+}
+</style>
+
+    <div ng-show="showTestSuitesResults">
+        <h2 class="heading-small"></h2>
+        <h1 class="heading-page">Display Test Suites Results</h1>
+
+        <h2 class="heading-small"></h2>
+        <div>
+            <h2 class="heading-small">Select a blueprint layer:</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 layer 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
+            ng-hide="selectedLayer == null || selectedTestSuiteName == null">
+            <div>
+                <h2 class="heading-small"></h2>
+                <div class="box">
+                    <h3 class="heading-small">
+                        <u>General Info</u>
+                    </h3>
+                    <p></p>
+
+                    <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="javascript:void(0);"
+                            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"
+                            ng-include="'kwVal'"></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>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr
+                                ng-repeat="test in selectedRobotTestResult.robot.suite.suite.test"
+                                ng-class="{selected:test.id == selectedTestId}"
+                                ng-click="setClickedTest(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>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <h2 class="heading-small"></h2>
+                <div class="box">
+                    <ul>
+                        <h4 class="heading-small">Robot keywords of
+                            the selected test case</h4>
+                        <li ng-repeat="kw in selectedTest.kw"
+                            ng-include="'kwVal3'"></li>
+                    </ul>
+                </div>
+
+            </div>
+        </div>
+
+        <script type="text/ng-template" id="kwVal">
+<h2 class="heading-small"></h2>
+                        <h4>
+                            <a href="javascript:void(0);" 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 ng-if="kw.kw">
+    <li ng-repeat="kw in kw.kw" ng-include="'kwVal'"></li>
+  </ul>
+</script>
+
+        <script type="text/ng-template" id="kwVal3">
+<h2 class="heading-small"></h2>
+                        <h4>
+                            <a href="javascript:void(0);" ng-click="showDetails4 = ! showDetails4">
+                                {{kw.name}}</a>
+                        </h4>
+                        <div ng-show="showDetails4">
+                            <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 ng-if="kw.kw">
+    <li ng-repeat="kw in kw.kw" ng-include="'kwVal3'"></li>
+  </ul>
+</script>
+    </div>
+</div>
\ No newline at end of file