baangt/baangt/templates/dashboard.html

{% extends "base.html" %}

{% block title %}
    BAANGT Dashboard
{% endblock %}


{% block content %}

<main>

<!-- testrun list -->
<div class="container-fluid mt-2">

    <!-- filters -->
    {% if data.names %}
    <div class="row mx-2 pt-3 rounded shadow">
        <div class="col-md-1 h4">Filters:</div>
        <div class="col-lg-3 mb-3 input-group">
            <div class="input-group-prepend">
                <label class="input-group-text px-4" for="selectName">Name</label>
            </div>
            <select class="custom-select" id="selectName">
                <option value="0" selected>None</option>
                {% for name in data.names %}
                    <option value="{{ loop.index }}">{{ name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-lg-3 mb-3 input-group">
            <div class="input-group-prepend">
                <label class="input-group-text px-4" for="selectStage">Stage</label>
            </div>
            <select class="custom-select" id="selectStage">
                <option value="0" selected>None</option>
                {% for stage in data.stages %}
                    <option value="{{ loop.index }}">{{ stage }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    {% endif %}

    <!-- header -->
    <div class="row mx-2 mb-2 mt-3">
        <div class="col-lg-3 h3">Testrun</div>
        <div class="col-lg-3 h3">Summary</div>
        <div class="col-lg-3 h3">Results</div>
        <div class="col-lg-3 h3">Duration</div>
    </div>

    <!-- testrun list -->
    {% for item in data.records %}
        <div class="row hovered-item border-top py-3 mx-2" id="{{ item.id }}" data-name="{{ item.name }}" data-stage="{{ item.stage }}">
            <div class="col-lg-3 text-break">
                <p class="text-primary">{{ item.name }}</p>
                <p class="text-secondary">{{ item.stage }}</p> 
            </div>
            <div class="col-lg-3">
                <div class="row my-auto">
                    <div class="col-4 p-0">
                        <canvas class="statusChart" width="100" height="100"></canvas>
                    </div>
                    <div class="col-2 border-right px-0 figure my-auto">
                        <div class="test-digit">{{ item.figures.records }}</div>
                        <div class="test-status">TESTS</div>
                    </div>
                    {% if item.figures.successful > 0  %}
                        <div class="col-2 text-success px-0 figure">
                            <div class="test-digit">{{ item.figures.successful }}</div>
                            <div class="test-status">PASSED</div>
                        </div>
                    {% endif %}
                    {% if item.figures.error > 0  %}
                        <div class="col-2 text-danger px-0 figure">
                            <div class="test-digit">{{ item.figures.error }}</div>
                            <div class="test-status">FAILED</div>
                        </div>
                    {% endif %}
                    {% if item.figures.paused > 0  %}
                        <div class="col-2 text-secondary px-0 figure">
                            <div class="test-digit">{{ item.figures.paused }}</div>
                            <div class="test-status">PAUSED</div>
                        </div>
                    {% endif %}
                </div>
            </div>
            <div class="col-lg-3 p-0 pl-2">
                <canvas class="resultsChart timeChart" height="100"></canvas>
            </div>
            <div class="col-lg-3 p-0 pl-2">
                <canvas class="durationChart timeChart" height="100"></canvas>
            </div>
        </div>

    {% endfor %}

</div>
</main>

<style>
    .figure {
      min-width: 4rem;
      margin-bottom: auto;
      margin-top: auto;
      padding: 0;
    }

    .statusChart {
        min-width: 6rem;
        min-height: 6rem;
    }

    .timeChart {
        min-height: 6rem;
    } 

    .test-digit {
        font-size: 2.7rem;
        text-align: center !important;
    }

    .test-state {
        font-size: 1rem;
        text-align: center !important;
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script type="text/javascript">

    document.querySelectorAll('select').forEach(select => {
        select.onchange = () => {
            // get name
            const name_index = document.querySelector('#selectName').value;
            const name = document.querySelector('#selectName').children[name_index].text;
            // get stage
            const stage_index = document.querySelector('#selectStage').value;
            const stage = document.querySelector('#selectStage').children[stage_index].text;
            // apply filters
            document.querySelectorAll('.hovered-item').forEach(item => {
                if ((name_index == "0" || item.dataset['name'] == name) && (stage_index == "0" || item.dataset['stage'] == stage)) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
        };
    });

    {% for item in data.records %}
        var item_{{ loop.index }} = document.querySelector('#{{ item.id }}');

        var status_{{ loop.index }} = new Chart(item_{{ loop.index }}.querySelector('.statusChart'), {{ item.status }});
        var results_{{ loop.index }} = new Chart(item_{{ loop.index }}.querySelector('.resultsChart'), {{ item.results }});
        var duration_{{ loop.index }} = new Chart(item_{{ loop.index }}.querySelector('.durationChart'), {{ item.duration }});
    {% endfor %}
</script>

{% endblock %}