jfx/ci-report

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

{% block title %}{{ parent() }} / {{ project.name }}{% 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 id="br_lvl3" class="breadcrumb-item active">Dashboard</li>
</ol>
{% endblock %}

{% block container %}
<div class="row">
    {% if lastCampaign is not null %}
    <div class="col-4">
        <div class="card border-{{ statusColorClass(lastCampaign.status) }}">
            <div class="card-body">
                <h4 class="card-title text-{{ statusColorClass(lastCampaign.status) }}">
                    <button id="button_status" type="button" class="btn btn-{{ statusColorClass(lastCampaign.status) }} btn-sm">
                        <i class="fa {{ statusIconClass(lastCampaign.status) }} fa-3x"></i>
                    </button>
                    &nbsp;{{ lastCampaign.percentage }} %
                </h4>
                <p id="p-id" class="card-text text-{{ statusColorClass(lastCampaign.status) }}">#{{ lastCampaign.refid }}</p>
                <p id="p-passed" class="card-text text-success">Passed tests: {{ lastCampaign.passed }}
                    <span class="text-muted">/ {{ lastCampaign.enabled }}</span>
                </p>
                <p id="p-failed" class="card-text text-danger">Failed tests: {{ lastCampaign.failed }}</p>
                {% if lastCampaign.errored > 0 %}
                    <p id="p-errored" class="card-text text-danger">Errored tests: {{ lastCampaign.errored }}</p>
                {% endif %}
                {% if lastCampaign.skipped > 0 %}
                    <p id="p-skipped" class="card-text text-warning">Skipped tests: {{ lastCampaign.skipped }}</p>
                {% endif %}
                {% if lastCampaign.disabled > 0 %}
                    <p id="p-disabled" class="card-text text-muted">Disabled tests: {{ lastCampaign.disabled }}</p>
                {% endif %}
                <p id="p-start" class="card-text text-muted">Start: {{ lastCampaign.start|date('d/m/Y H:i:s') }}</p>
                <p id="p-end" class="card-text text-muted">End: {{ datetimeFormat(lastCampaign.end) }}</p>
                <div class="text-center">
                <a id="a-details" href="{{ path('campaign-view', {'prefid': project.refid, 'crefid': lastCampaign.refid}) }}" class="btn btn-outline-{{ statusColorClass(lastCampaign.status) }}">Details</a>
                </div>
            </div>
        </div>  
    </div>
    <div class="col-8 justify-content-center align-self-center">
        <canvas id="lineChart" ></canvas>
    </div>
    {% endif %}
</div>

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

<div class="row">
<div class="col-12">
<table id="t-campaign" class="table table-bordered">
    <thead>
        <tr>
            <th>#Id</th>
            <th>%</th>
            <th><span class="text-success">Passed</span></th>
            <th><span class="text-danger">Failed</span></th>
            <th><span class="text-danger">Errored</span></th>
            <th><span class="text-warning">Skipped</span></th>
            <th><span class="text-muted">Disabled</span></th>
            <th><span class="text-muted">Start</span></th>
            <th><span class="text-muted">End</span></th>
            <th>Document</th>
        </tr>
    </thead>
    <tbody>
        {% for campaign in campaigns %}
        <tr id="tr-campaign-{{ campaign.refid }}" class="table-{{ statusColorClass(campaign.status) }}">
            <td><a id="a-campaign-{{ campaign.refid }}" href="{{ path('campaign-view', {'prefid': project.refid, 'crefid': campaign.refid}) }}">#{{ campaign.refid }}</a></td>
            <td>{{ campaign.percentage }} %</td>
            <td>{{ campaign.passed }} / {{ campaign.enabled }}</td>
            <td>{{ campaign.failed }}</td>
            <td>{{ campaign.errored }}</td>
            <td>{{ campaign.skipped }}</td>
            <td>{{ campaign.disabled }}</td>
            <td>{{ campaign.start|date('d/m/Y H:i:s') }}</td>
            <td>{{ datetimeFormat(campaign.end) }}</td>
            <td></td>
        </tr>
        {% else %}
            <tr><td colspan="10">No campaign</td></tr>
        {% endfor %}
    </tbody>
</table>
</div>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
{% set lineGraphValues = graphLineCampaignsValues(campaigns) %}
<script>
    var graph_x_axis = [{{ lineGraphValues['xAxis']|raw }}];
    var graph_red = [{{ lineGraphValues['red'] }}];
    var graph_yellow = [{{ lineGraphValues['yellow'] }}];
    var graph_green = [{{ lineGraphValues['green'] }}];

    var ctx = document.getElementById("lineChart");
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: graph_x_axis,
        datasets: [
          {
            lineTension: 0,
            data: graph_red,
            label: "Failed/Errored",
            fill: "origin",
            borderColor: "#ff0000",
            backgroundColor: "#ff8f9a"
          },
          {
            lineTension: 0,
            data: graph_yellow,
            label: "Skipped",
            fill: "origin",
            borderColor: "#ffbf00",
            backgroundColor: "#ffe28a"
          },
          {
            lineTension: 0,
            data: graph_green,
            label: "Passed",
            fill: "origin",
            borderColor: "#31b404",
            backgroundColor: "#98e7aa"
          }
        ]
      },
      options: {
        title: {
            display: true,
            text: 'Campaigns trend'
        },
        legend: {
            position: 'bottom'   

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