summaryrefslogtreecommitdiffstats
path: root/ogcp/templates/actions/cache.html
diff options
context:
space:
mode:
authorAlejandro Sirgo Rica <asirgo@soleta.eu>2024-07-16 11:41:41 +0200
committerAlejandro Sirgo Rica <asirgo@soleta.eu>2024-07-16 12:55:31 +0200
commit314a173b6cc3125190786e43158b7a60063f33bf (patch)
tree626c3d0e2820d4020e2bf4fb641320a0d5d6827d /ogcp/templates/actions/cache.html
parent5af2b3738be739796ae98ce68a3ea9162c7248bf (diff)
ogcp: show cache contents in client details
Show cache contents in client details for a more complete view of the client's state. Move the cache inspector code to its own template for reusability.
Diffstat (limited to 'ogcp/templates/actions/cache.html')
-rw-r--r--ogcp/templates/actions/cache.html147
1 files changed, 2 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 %}