summaryrefslogtreecommitdiffstats
path: root/ogcp/templates/actions/cache.html
diff options
context:
space:
mode:
Diffstat (limited to 'ogcp/templates/actions/cache.html')
-rw-r--r--ogcp/templates/actions/cache.html192
1 files changed, 192 insertions, 0 deletions
diff --git a/ogcp/templates/actions/cache.html b/ogcp/templates/actions/cache.html
new file mode 100644
index 0000000..07f5b16
--- /dev/null
+++ b/ogcp/templates/actions/cache.html
@@ -0,0 +1,192 @@
+{% extends 'commands.html' %}
+{% import "bootstrap/wtf.html" as wtf %}
+
+{% set sidebar_state = 'disabled' %}
+{% set btn_back = true %}
+
+{% block nav_client %} active{% endblock %}
+{% block nav_client_cache %} active{% endblock %}
+{% block content %}
+
+{% set ip_list = form.ips.data.split(' ') %}
+{% set ip_count = ip_list | length %}
+<h1 class="m-5">
+ {{ _('Manage Cache') }}
+</h1>
+
+<p>{{ _('Check free cache space in the client\'s bubbles:') }}</p>
+
+{{ macros.cmd_selected_clients(selected_clients) }}
+
+<p>{{ _('Select the images to be deleted:') }}</p>
+
+<form class="form-inline" method="POST" id="cacheForm">
+ <table class="table table-hover">
+ <thead class="thead-light">
+ <tr>
+ <th>{{ _('Image') }}</th>
+ <th>{{ _('Clients') }}</th>
+ </tr>
+ </thead>
+
+ <tbody data-target="cache-fieldset" id="cacheTable" class="text-left">
+ {{ form.hidden_tag() }}
+ {% for image in form.images %}
+ <tr data-toggle="fieldset-entry">
+ <td class="radio-container">
+ {{ image.selected(class_="form-control") }}
+ {{ image.image_name() }}
+ {{ image.clients() }}
+ <b>{{ image.image_name.data }} ({{ (images_data[image.selected.label.text]['size'] | int / 2**20)|round(3) }} MiB)</b>
+ </td>
+ <td>{{ ', '.join(images_data[image.selected.label.text]['clients']) }}</td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+ <button class="btn btn-danger" form="cacheForm">
+ {{ _('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>
+
+{% endblock %}