AT Results Detail

MODULE	SUITE	ENVIRONMENT	EXECUTION DATE	DURATION TIME(Min)

TOTAL CASES	PASSED CASES	FAILED CASES	SKIPPED CASES	PASSED RATE
						<p style="margin-top: 5px;">Double click the textarea and add your comments, then save by this button:
							<button disabled type="submit" class="btn btn-secondary btn-sm" id="submitBtn">Save</button>
						</p>
					</div>
				  </form>
			</div>
			<div class="col-5">
			</div>

		</div>
		<div class="row clearfix">
			<div class="col-md-12 column">
				<table id="cases-details-table" class="table table-bordered table-striped table-hover table-responsive">
					<thead class="thead-light">
						<tr>
							<th>CLASS</th>
							<th>METHOD</th>
                            <th>
                              <select id="status-selector" onchange="filterByStatus()" class="custom-select" style="font-weight:bold; padding-bottom:0px; border:none; background-color:#e9ecef; height:auto; width:auto;">
                                <option value="STATUS" selected>STATUS</option>
                                <option value="PASSED">PASSED</option>
                                <option value="FAILED">FAILED</option>
                                <option value="SKIPPED">SKIPPED</option>                   
                              </select>
                            </th>
							<th>DURATION</th>
							<th>TESTID</th>
							<th>DESCRIPTION</th>
						</tr>
					</thead>
					<tbody>
						<tr th:each="cr: ${cycle.caseResults}">
							<td th:text="${cr.cls}"  style="width:22%; word-break:break-all; word-wrap:break-word; white-space:inherit"/>
							<td style="width:20%; word-break:break-all; word-wrap:break-word; white-space:inherit">
							  <a th:href="'#records-' + ${cr.shortCls} + '-' + ${cr.method}" th:text="${cr.method}" data-toggle="modal" style="color:Black; font-weight:bold"/>
							</td>
							<td th:name="${cr.shortCls} + '-' + ${cr.method}" th:class="${cr.caseStatusEnum}" th:text="${cr.caseStatusEnum}" style="width:4%;"/>
							<td th:text="${cr.duration}" style="width:4%;"/>
							<td th:text="${cr.testIds}" style="width:10%;"/>
							<td style="width:40%; word-break:break-word; word-wrap:break-word; white-space:inherit">[[${cr.title}]]<br/>[[${cr.description}]]</td>
						</tr>
					</tbody>
				</table>
				
				<div name="debug">
					<div th:each="fcr: ${cycle.failedCaseResults}" class="modal fade" th:id="'debug-' + ${fcr.shortCls} + '-' + ${fcr.method}" aria-hidden="true">
						<div class="modal-dialog modal-dialog-scrollable modal-xl" style="max-width:90% !important;">
							<div class="modal-content">

								<div class="modal-header">
									<h5 class="modal-title">Debug Information</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">×</span>				
								</div>
								<div class="modal-body">
									<ul class="nav nav-tabs">
										<li class="nav-item">
											<a class="nav-link active" th:href="'#error-' + ${fcr.shortCls} + '-' + ${fcr.method}" data-toggle="tab">Error</a>
										</li>
                                        <li class="nav-item">
                                            <a class="nav-link" th:href="'#logs-' + ${fcr.shortCls} + '-' + ${fcr.method}" data-toggle="tab">Logs</a>
                                        </li>										
										<li  class="nav-item" role="presentation">
											<a class="nav-link" th:href="'#screenshot-' + ${fcr.shortCls} + '-' + ${fcr.method}" data-toggle="tab">Screenshot</a>
										</li>
									</ul>
									<div class="tab-content">
										<div class="tab-pane fade show active" th:id="'error-' + ${fcr.shortCls} + '-' + ${fcr.method}">
											<pre><code th:text="${fcr.clue}"/></pre>
										</div>
                                        <div class="tab-pane fade" th:id="'logs-' + ${fcr.shortCls} + '-' + ${fcr.method}">
                                            <pre><code th:utext="${fcr.logs}"/></pre>
                                        </div>
										<div class="tab-pane fade" th:id="'screenshot-' + ${fcr.shortCls} + '-' + ${fcr.method}">
											<img class="img-fluid" th:src="${fcr.screenshotBase64}"/>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div name="records">
					<div th:each="cr: ${cycle.caseResults}" class="modal fade" th:id="'records-' + ${cr.shortCls} + '-' + ${cr.method}" aria-hidden="true">
						<div class="modal-dialog modal-dialog-scrollable modal-xl" style="max-width:90% !important;">
							<div class="modal-content">

								<div class="modal-header">
									<h5 class="modal-title">Execution Records</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">×</span>				
								</div>
								<div class="modal-body">
									<ul class="nav nav-tabs">
										<li class="nav-item">
											<a class="nav-link active" th:href="'#cr-records-' + ${cr.shortCls} + '-' + ${cr.method}" data-toggle="tab">Records</a>
										</li>
                                        <li class="nav-item">
                                            <a class="nav-link" th:href="'#cr-logs-' + ${cr.shortCls} + '-' + ${cr.method}" data-toggle="tab">Logs</a>
                                        </li>
									</ul>
									<div class="tab-content">
										<div class="tab-pane fade show active" th:id="'cr-records-' + ${cr.shortCls} + '-' + ${cr.method}">
											<pre><code th:text="${cr.records}"/></pre>
										</div>
                                        <div class="tab-pane fade" th:id="'cr-logs-' + ${cr.shortCls} + '-' + ${cr.method}">
                                            <pre><code th:utext="${cr.logs}"/></pre>
                                        </div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</div>

    <div th:insert="fragments/all.html :: footer"/>

	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById('mychart'));
		var option = {
			title: {
				text: 'Results Chart',
				left: 'center',
				textStyle: {
					color: 'gray',
					//'normal','italic','oblique'
					fontStyle: 'italic',
					//'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
					fontWeight: 'normal',
					fontFamily: 'arial',
					fontSize: 14
				}

			},
			tooltip: {
				trigger: 'item',
				formatter: "{b} : {c} ({d}%)"
			},

			color: ['green', 'red', 'grey'],

			legend: {
				type: 'scroll',
				orient: 'vertical',
				left: 'right',
				data: ['PASSED', 'FAILED', 'SKIPPED'],
			},
			series: [
				{
					name: 'Results chart',
					type: 'pie',    //chart type
					radius: '40%',  //cycle radius
					center: ['50%', '40%'],
					data: [          // data array，name and value
					{ name: 'PASSED', value: [[${cycle.testCycle.passedCases}]] },
						{ name: 'FAILED', value: [[${cycle.testCycle.failedCases}]] },
						{ name: 'SKIPPED', value: [[${cycle.testCycle.skippedCases}]] }
					],
					itemStyle: {
						emphasis: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		};
		myChart.setOption(option);
	</script>

</body>

</html>