jfx/ci-report

{% extends 'base.html.twig' %}

{% block title %}{{ parent() }} / {{ project.name }} / Campaign #{{ campaign.refid }} / Suite #{{ suite.refid }}{% endblock %}

{% block breadcrumb %}
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a id="br_lvl1" href="{{ path('homepage') }}">ci-report</a></li>
    <li class="breadcrumb-item"><a id="br_lvl2" href="{{ path('project-view', {'prefid': project.refid}) }}">{{ project.name }}</a></li>
    <li class="breadcrumb-item"><a id="br_lvl3" href="{{ path('campaign-view', {'prefid': project.refid, 'crefid': campaign.refid}) }}">Campaign #{{ campaign.refid }}</a></li>
    <li id="br_lvl4" class="breadcrumb-item active">Suite #{{ suite.refid }}</li>
    <li class="ml-auto">
        <div class="btn-group btn-group-sm" role="group" aria-label="Previous Next">
            {% if prevSuite %}
            <a id="a-top-prev" href="{{ path('suite-view', {'prefid': project.refid, 'crefid': campaign.refid, 'srefid': prevSuite.refid}) }}" class="btn btn-outline-dark">Prev</a>
            {% else %}
            <button id="b-top-prev" type="button" class="btn btn-outline-dark" disabled>Prev</button>
            {% endif %}
            {% if nextSuite %}
            <a id="a-top-next" href="{{ path('suite-view', {'prefid': project.refid, 'crefid': campaign.refid, 'srefid': nextSuite.refid}) }}" class="btn btn-outline-dark">Next</a>
            {% else %}
            <button id="b-top-next" type="button" class="btn btn-outline-dark" disabled>Next</button>
            {% endif %}
        </div>
    </li>
</ol>
{% endblock %}

{% block container %}
<div class="row">
    <div class="col-4">
        <div class="card border-{{ statusColorClass(suite.status) }}">
            <div class="card-body">
                <h4 class="card-title text-{{ statusColorClass(suite.status) }}">
                    <button id="button_status" type="button" class="btn btn-{{ statusColorClass(suite.status) }} btn-sm">
                        <i class="fa {{ statusIconClass(suite.status) }} fa-3x"></i>
                    </button>
                    &nbsp;{{ suite.percentage }} %
                </h4>
                <p id="p-id" class="card-text text-{{ statusColorClass(suite.status) }}">{{ suite.name }}</p>
                <p id="p-passed" class="card-text text-success">Passed tests: {{ suite.passed }}
                    <span class="text-muted">/ {{ suite.enabled }}</span>
                </p>
                <p id="p-failed" class="card-text text-danger">Failed tests: {{ suite.failed }}</p>
                <p id="p-errored" class="card-text text-danger">Errored tests: {{ suite.errored }}</p>
                <p id="p-skipped" class="card-text text-warning">Skipped tests: {{ suite.skipped }}</p>
                <p id="p-disabled" class="card-text text-muted">Disabled tests: {{ suite.disabled }}</p>
                <p id="p-duration" class="card-text">Duration: {{ suite.duration }}s</p>
                <p id="p-time" class="card-text text-muted">Time: {{ suite.datetime|date('d/m/Y H:i:s') }}</p>
                <p id="p-warning" class="card-text text-muted">Warning limit: {{ suite.warning }} %</p>
                <p id="p-success" class="card-text text-muted">Success limit: {{ suite.success }} %</p>
            </div>
        </div>
    </div>
    <div class="col-8 justify-content-center align-self-center">
        <canvas id="pieChart"></canvas>
    </div>
</div>

<div class="row div-margin-top">
    <div class="col-12">
        <h5>Failed or errored tests</h5>
        <hr>
    </div>
</div>

<div class="row div-margin-top">
    <div class="col-12">
        <h5>Tests</h5>
        <hr>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <table id="t-test" class="table table-bordered">
            <thead>
                <tr>
                    <th>Package / Class / Name</th>
                    <th>Status</th>
                    <th>Duration</th>
                    <th>Log</th>
                </tr>
            </thead>
            <tbody>
                {% for test in tests %}
                    {{  include('suite/test-row.html.twig', { 'test': test }) }}
                {% else %}
                    <tr><td colspan="7">No test</td></tr>
                {% endfor %}
            </tbody>
        </table>

        <a id="a-campaign" href="{{ path('campaign-view', {'prefid': project.refid, 'crefid': campaign.refid}) }}" class="btn btn-outline-dark">Back to campaign</a>

        <div class="btn-group" role="group" aria-label="Previous Next">
            {% if prevSuite %}
            <a id="a-bottom-prev" href="{{ path('suite-view', {'prefid': project.refid, 'crefid': campaign.refid, 'srefid': prevSuite.refid}) }}" class="btn btn-outline-dark">Prev</a>
            {% else %}
            <button id="b-bottom-prev" type="button" class="btn btn-outline-dark" disabled>Prev</button>
            {% endif %}
            {% if nextSuite %}
            <a id="a-bottom-next" href="{{ path('suite-view', {'prefid': project.refid, 'crefid': campaign.refid, 'srefid': nextSuite.refid}) }}" class="btn btn-outline-dark">Next</a>
            {% else %}
            <button id="b-bottom-next" type="button" class="btn btn-outline-dark" disabled>Next</button>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
    var graph_label = ["Errored","Failed","Skipped","Passed"];
    var graph_data = [{{ suite.errored }},{{ suite.failed }},{{ suite.skipped }},{{ suite.passed }},];

    var ctx = document.getElementById("pieChart");
    var myChart = new Chart(ctx, {
      type: 'pie',
      data: {
        labels: graph_label,
        datasets: [
          {
            data: graph_data,
            backgroundColor: ["#ff8f9a", "#ff8f9a","#ffe28a","#98e7aa"]
          }
        ]
      },
      options: {
        title: {
            display: true,
            text: 'Suite report'
        },
        legend: {
            position: 'bottom'   

        }
      }
    });
</script>
{% endblock %}