diff options
Diffstat (limited to 'ogcp/templates')
| -rw-r--r-- | ogcp/templates/actions/cache.html | 147 | ||||
| -rw-r--r-- | ogcp/templates/actions/client_details.html | 4 | ||||
| -rw-r--r-- | ogcp/templates/cache_inspector.html | 152 |
3 files changed, 158 insertions, 145 deletions
diff --git a/ogcp/templates/actions/cache.html b/ogcp/templates/actions/cache.html index 46a8699..d64aebe 100644 --- a/ogcp/templates/actions/cache.html +++ b/ogcp/templates/actions/cache.html @@ -54,151 +54,8 @@ {{ _('Delete') }} </button> </form> - -<br> - -<div class="card text-center"> - <div class="card-header"> - {{ _('Detailed cache usage') }} - </div> - <div class="card-body"> - <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> - - <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 = ""; - 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>{{ _('Cache is currently empty in the selected client(s)') }}</b> -</div> {% endif %} +{% include 'cache_inspector.html' %} + {% endblock %} diff --git a/ogcp/templates/actions/client_details.html b/ogcp/templates/actions/client_details.html index 0362d5b..070e4d6 100644 --- a/ogcp/templates/actions/client_details.html +++ b/ogcp/templates/actions/client_details.html @@ -9,6 +9,8 @@ {% block nav_client_add %}active{% endblock %} {% block content %} +{% set ip_list = [form.ip.data] %} + <h2 class="mx-5 subhead-heading">{{_('Client details')}}</h2> <div class="container mt-5"> @@ -106,4 +108,6 @@ </table> {% endif %} +{% include 'cache_inspector.html' %} + {% endblock %} 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 |