tartiflette/app/templates/appci_branch.html

{% extends "base.html" %}
{% block content %}

<h2 class="text-center my-3">{{ branch.display_name }}</h2>
<div id="levelSummary" style="height: 270px;" class="col-sm-6 offset-sm-3 my-3"></div>

<div class="row">
    <div class="mx-auto">
	<div style="text-align:center;">
		<button id="filter_onlyNeedAttention" type="button" class="btn btn-light btn-sm" href="javascript:void(0)" onclick="toggle(this)">Show only app that needs attention</button>
	</div>
        <div>
            <table class="table table-responsive ci-app-table">
                <thead>
                    <tr>
                        <th class="ci-app-row-title"></th>
                        <th class="ci-app-test-title ci-app-level"><div>Quality level</div></th>
                        {% for test in test_categories %}
                         <th class="ci-app-test-title"><div><span>{{ test[1] }}</span></div></th>
                        {% endfor %}
                         <th class="ci-app-test-title"></th>
                         <th></th>
                    </tr>
                </thead>
                <tbody>
                {% for result in app_results %}
                <tr app="{{ result.app.name }}" class="resultline {% if result.needs_attention %}ci-needs-attention{% endif  %}" {% if result.outdated %}style="opacity: 0.8; background-color: #e9e9e9;"{% endif %} >
                    <td class="ci-app-row-title">
                        {% if result.app.long_term_good_quality %}
                            <span class="oi oi-star" title="Long-term good quality" aria-hidden="true" style="color: goldenrod;"></span>
                        {% endif %}
                        {% if result.app.long_term_broken %}
                            <span class="oi oi-flag" title="Long-term broken" aria-hidden="true" style="color: firebrick;"></span>
                        {% endif %}
                        <a href="{{ url_for('main.appci_app', app=result.app.name) }}">
                            <span class="font-weight-bold" title="More tests / info for this app">
                                {{ result.app.name }}</span>
                        </a>
                    </td>
                    <td class="ci-app-level" value="{{ result.level }}">
                    <div title="Level">
                        <strong>{{ result.level if result.level >= 0 else "?" }}</strong>
                        {% if result.level < result.app.public_level|int %} 
                        <span class="ml-1 oi oi-arrow-thick-bottom" title="Regression" aria-hidden="true" style="color: crimson;"></span>
                        {% elif result.level > result.app.public_level|int %}
                        <span class="ml-1 oi oi-arrow-thick-top" title="Improvement" aria-hidden="true" style="color: limegreen;"></span>
                        {% endif %}
                    </div></td>
                    {% for test in test_categories %}
                    {% set r = result.results[test[0]] %}
                        <td class="ci-app-test-result">
                            <div title="{{ test[1] }}" value="{{ r }}"></div>
                        </td>
                    {% endfor %}
                    <td class="ci-app-test-info px-0">
			{% if result.date == None %}
			    <span class="daysAgo" href="{{ branch.last_build_url(result.app) }}">???</span>
			{% else %}
			    <span class="daysAgo" timestamp="{{ result.date.timestamp() }}" href="{{ branch.last_build_url(result.app) }}"></span>
			{% endif %}
                        {% if result.outdated %}
                        <span class="oi oi-clock text-warning"
                              aria-hidden="true"
                              title="This test is outdated"></span>
                        {% endif %}
                        {% if result.app.testing_pr %}
                        <span class="oi oi-fork text-info"
                              aria-hidden="true"
                              title="An active testing branch exists for this app."></span>
                        {% endif %}
                    </td>
                    <td class="px-0">
                        <a href="{{ result.app.repo }}">
                         <span class="oi oi-external-link text-info"
                              aria-hidden="true"
                              title="To the Git repo!"></span>
                        </a>
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="{{ url_for('static', filename='js/canvasjs.min.js') }}"></script>
<script>
window.onload = function () {
  var chart = new CanvasJS.Chart("levelSummary", {
      animationEnabled: false,
      data: [{
          type: "doughnut",
          startAngle: -90,
          //innerRadius: 60,
          indexLabelFontSize: 17,
          indexLabel: "{label} - {y}",
          toolTipContent: "<b>{label}:</b> {y}",
          dataPoints: [
              { y: $(".ci-app-level[value=-1]").length, label: "Unknown", color: "#cccccc" },
              { y: $(".ci-app-level[value=0]").length,  label: "Level 0", color: "#d9534f" },
              { y: $(".ci-app-level[value=1]").length,  label: "Level 1", color: "#E26D4F" },
              { y: $(".ci-app-level[value=2]").length,  label: "Level 2", color: "#E98D4E" },
              { y: $(".ci-app-level[value=3]").length,  label: "Level 3", color: "#f0ad4e" },
              { y: $(".ci-app-level[value=4]").length,  label: "Level 4", color: "#CBB052" },
              { y: $(".ci-app-level[value=5]").length,  label: "Level 5", color: "#A6B255" },
              { y: $(".ci-app-level[value=6]").length,  label: "Level 6", color: "#7AB659" },
              { y: $(".ci-app-level[value=7]").length,  label: "Level 7", color: "#5cb85c" },
              { y: $(".ci-app-level[value=8]").length,  label: "Level 8", color: "#4695d5" },
              { y: $(".ci-app-level[value=9]").length,  label: "Level 9", color: "#8960b3" }
          ]
      }]
  });
  chart.render();
  $("input[type='radio']").change(function() { update_filters(); });
  update_filters();
}

function toggle(e) {
    $(e).toggleClass("btn-light");
    $(e).toggleClass("btn-primary");
    update_filters();
}

function update_filters() {
    var onlyNeedAttention = $("#filter_onlyNeedAttention").hasClass("btn-primary");
    $(".resultline").hide();
    $(".ci-needs-attention").show();
    if (!onlyNeedAttention) { $(".resultline").show(); }
}

</script>

{% endblock %}