diff options
Diffstat (limited to 'ogcp/templates/cache_inspector.html')
| -rw-r--r-- | ogcp/templates/cache_inspector.html | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/ogcp/templates/cache_inspector.html b/ogcp/templates/cache_inspector.html new file mode 100644 index 0000000..42dd983 --- /dev/null +++ b/ogcp/templates/cache_inspector.html @@ -0,0 +1,152 @@ +{% if storage_data is defined and images_data is defined and client_images is defined and ip_list is defined %} + +<br> +{% if images_data|length > 0 %} +<div class="card text-center"> + <div class="card-header"> + {{ _('Detailed cache usage') }} + </div> + <div class="card-body"> + {% if ip_list|length > 1 %} + <label for="cacheSelect">Choose a client:</label> + <select id="cacheSelect" onchange="onClientSelected()"> + {% for client_ip in ip_list %} + <option value="{{ client_ip }}">{{ client_ip }}</option> + {% endfor %} + </select> + {% endif %} + + <ul class="list-group list-group-horizontal"> + <li class="list-group-item w-50"> + <canvas id="cacheChart" class="mb-2"></canvas> + </li> + <li class="list-group-item w-50"> + <p>{{ _('Images in cache:') }}</p> + <div id="cacheList"></div> + </li> + </ul> + <ul class="list-group list-group-horizontal"> + <li class="list-group-item w-50"> + {{ _('Disk size') }} + </li> + <li class="list-group-item w-50"> + {{ _('used') }} (%) + </li> + <li class="list-group-item w-50"> + {{ _('available') }} (%) + </li> + </ul> + <ul class="list-group list-group-horizontal"> + <li id="totalCacheItem" class="list-group-item w-50"></li> + <li id="usedCacheItem" class="list-group-item w-50"></li> + <li id="freeCacheItem" class="list-group-item w-50"></li> + </ul> + </div> +</div> + +<!-- jQuery --> +<script src="{{ url_for('static', filename='AdminLTE/plugins/jquery/jquery.min.js') }}"></script> +<!-- ChartJS --> +<script src="{{ url_for('static', filename='AdminLTE/plugins/chart.js/Chart.min.js') }}"></script> +<script> + var cacheChartConfig = { + type: 'doughnut', + data: { + labels: ['Used', 'Available'], + datasets: [ + { + label: 'Disk usage', + data: [ + 0, + 1, + ], + backgroundColor: [ + 'rgb(255, 99, 132)', + 'rgb(54, 162, 235)', + ], + }, + ], + }, + options: { + responsive: true, + plugins: { + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Chart.js Doughnut Chart' + }, + }, + }, + }; + var cacheChart = new Chart( + document.getElementById('cacheChart'), + cacheChartConfig, + ); + + var storageData = {{ storage_data|tojson|safe }}; + var imageData = {{ images_data|tojson|safe }}; + var clientImages = {{ client_images|tojson|safe }}; + + function onClientSelected() { + var selectElement = document.getElementById("cacheSelect"); + var selectedOption = selectElement.options[selectElement.selectedIndex].text; + updateChart(selectedOption); + } + + function toGiB(v, decimals) { + return (v / Math.pow(2, 30)).toFixed(decimals); + } + + function updateChart(ip) { + var totalCache = toGiB(storageData[ip].total, 3); + var usedCache = toGiB(storageData[ip].used, 3); + var freeCache = toGiB(storageData[ip].total - storageData[ip].used, 3) + + cacheChart.data.datasets[0].data = [ + usedCache, + freeCache, + ] + cacheChart.update(); + + var totalCacheItem = document.getElementById("totalCacheItem"); + totalCacheItem.innerHTML = totalCache + " GiB"; + + var usedCacheItem = document.getElementById("usedCacheItem"); + usedCacheItem.innerHTML = usedCache + " GiB (" + Math.round((usedCache / totalCache) * 100) + "%)"; + + var freeCacheItem = document.getElementById("freeCacheItem"); + freeCacheItem.innerHTML = freeCache + " GiB (" + Math.round((freeCache / totalCache) * 100) + "%)"; + + var cacheList = document.getElementById("cacheList"); + cacheList.innerHTML = ""; + if (clientImages[ip]) { + clientImages[ip].forEach(function(img) { + cacheList.innerHTML += imageData[img]["name"] + " (" + (imageData[img]["size"] / Math.pow(2, 20)).toFixed(3) + " MiB)<br>"; + }); + } + } + + updateChart("{{ ip_list[0] }}"); + + // Update pill data + $('.badge-pill').each(function(index) { + for (var ip in storageData) { + if ($(this).html().includes(ip)) { + var totalCache = storageData[ip].total; + var usedCache = storageData[ip].used; + var freeCache = toGiB(totalCache - usedCache, 1) + $(this).html($(this).html() + '<br>free: ' + freeCache + ' GiB'); + break; + } + } + }); +</script> +{% else %} +<div class="card text-center p-3"> + <b>{{ _('No cache contents') }}</b> +</div> +{% endif %} + +{% endif %}
\ No newline at end of file |