123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- {% 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 %}
|