diff options
Diffstat (limited to 'ogcp/templates')
| -rw-r--r-- | ogcp/templates/actions/client_details.html | 29 | ||||
| -rw-r--r-- | ogcp/templates/actions/select_client.html | 42 | ||||
| -rw-r--r-- | ogcp/templates/actions/setup.html | 226 | ||||
| -rw-r--r-- | ogcp/templates/disk_inspector.html | 306 |
4 files changed, 353 insertions, 250 deletions
diff --git a/ogcp/templates/actions/client_details.html b/ogcp/templates/actions/client_details.html index a718450..6bccace 100644 --- a/ogcp/templates/actions/client_details.html +++ b/ogcp/templates/actions/client_details.html @@ -37,31 +37,10 @@ </form> </div> -{% if setup|length > 0 %} -<table class="table"> - <tbody class="text-center"> - <tr> - <th>{{_('Partition')}}</th> - <th>{{_('Type')}}</th> - <th>{{_('Filesystem')}}</th> - <th>{{_('Size')}} (MiB)</th> - <th>{{_('Image')}}</th> - <th colspan="2"></th> - </tr> - </tbody> - <tbody class="text-center"> - {% for entry in setup %} - <tr> - <td>{{ entry.partition }}</td> - <td>{{ entry.code }}</td> - <td>{{ entry.filesystem }}</td> - <td>{{ entry.size // 1024}}</td> - <td>{{ entry.image }}</td> - </tr> - {% endfor %} - </tbody> -</table> -{% endif %} +{% set show_part_images = True %} +{% set readonly_disk_inspector = True %} +{% include 'disk_inspector.html' %} + {% include 'cache_inspector.html' %} diff --git a/ogcp/templates/actions/select_client.html b/ogcp/templates/actions/select_client.html index 0415621..a44c551 100644 --- a/ogcp/templates/actions/select_client.html +++ b/ogcp/templates/actions/select_client.html @@ -17,6 +17,48 @@ {{ macros.cmd_selected_clients(selected_clients) }} +{% if common_disk_data|length > 0 %} + +<div class="form-group mx-5"> + <label class="control-label">{{ _('Disk inventory') }}</label> + <table class="table table-bordered"> + <thead class="thead-light"> + <tr> + <th>{{ _('Disk') }}</th> + <th>{{ _('Size (MiB)') }}</th> + <th>{{ _('Clients') }}</th> + </tr> + </thead> + <tbody> + {% for disk, data in common_disk_data.items() %} + {% for size, ips in data.inventory.items() %} + <tr> + {% if loop.first %} + <td rowspan="{{ data.inventory | length }}">{{ disk }}</td> + {% endif %} + <td> + {% if size == data.common_size %} + <strong>{{ size // 1024 }}</strong> + {% else %} + {{ size // 1024 }} + {% endif %} + </td> + <td> + {% for ip in ips %} + <div class="card d-inline-block" style="padding: 5px;">{{ ip }}</div> + {% endfor %} + </td> + </tr> + {% endfor %} + + {% endfor %} + </tbody> + </table> + <p>{{ _('Note: the disk size in bold represents the selected common size for partitioning') }}</p> +</div> + +{% endif %} + {{ wtf.quick_form(form, action=url_for('action_setup_show'), method='get', diff --git a/ogcp/templates/actions/setup.html b/ogcp/templates/actions/setup.html index 934d72f..6ae7c15 100644 --- a/ogcp/templates/actions/setup.html +++ b/ogcp/templates/actions/setup.html @@ -9,230 +9,6 @@ <h2 class="mx-5 subhead-heading">{{_('Partition and Format')}}</h2> -<form method="GET" id="changeDiskForm"> - <input type="hidden" name="ips" value="{{ ips }}"/> - <input type="hidden" name="selected_client" value="{{ base_client }}"/> -</form> - -<form class="form-inline" method="POST" id="setupForm"> - <table class="table"> - <thead class="text-center"> - <tr> - <th>{{ _('Disk') }}</th> - <th>{{ _('Partition Table Type') }}</th> - <th>{{ _('Total Disk Size') }} (MiB)</th> - </tr> - </thead> - - <tbody data-target="partitons-fieldset" id="setupTable" class="text-center"> - <tr> - <td> - <select form="changeDiskForm" name="disk" onchange="this.form.submit()"> - {% for disk in disks %} - <option {% if disk == selected_disk %}selected{% endif %} - value="{{ disk }}">{{ disk }}</option> - {% endfor %} - </select> - </td> - {{ form.hidden_tag() }} - <td>{{ form.disk_type(class_="form-control") }}</td> - <td>{{ disk_size }}</td> - </tr> - </tbody> - </table> - <table class="table"> - <thead class="text-center"> - <tr> - <th>{{ _('Partition') }}</th> - <th>{{ _('Type') }}</th> - <th>{{ _('Filesystem') }}</th> - <th>{{ _('Size') }} (MiB)</th> - <th colspan="2"></th> - </tr> - </thead> - - <tbody data-target="partitons-fieldset" id="partitionsTable" class="text-center"> - {% for partition in form.partitions %} - <tr data-toggle="fieldset-entry"> - {{ partition.hidden_tag() }} - <td>{{ partition.partition.data }}</td> - <td>{{ partition.part_type(class_="form-control") }}</td> - <td>{{ partition.fs(class_="form-control") }}</td> - <td>{{ partition.size(class_="form-control", oninput="handleEdit(this)") }}</td> - <td> - <button class="btn btn-danger" type="button" onclick="RemovePartition(this)"> - {{ _('Remove') }} - </button> - </td> - </tr> - {% endfor %} - </tbody> - </table> -</form> - -<button class="btn btn-primary" data-target="#partitionsTable" onclick="AddPartition(this)"> - {{ _('Add a new partition') }} -</button> - -<button class="btn btn-success" form="setupForm"> - {{ _('Accept') }} -</button> - -<div class="card text-center"> - <div class="card-header"> - {{ _('Partition graph') }} - </div> - <div class="card-body mx-auto col-7"> - <canvas id="partitionChart" class="mb-2"></canvas> - </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> - const usedColor = 'rgb(255, 99, 132)'; - const freeColor = 'rgb(54, 162, 235)'; - let diskSize = {{ disk_size }}; - - let chartConfig = { - type: 'doughnut', - data: { - labels: [], - datasets: [ - { - label: 'Partitions', - data: [], - backgroundColor: [], - }, - ], - }, - options: { - responsive: true, - plugins: { - legend: { - position: 'top', - }, - title: { - display: true, - text: 'Chart.js Doughnut Chart' - }, - }, - }, - }; - - let partitionChart = new Chart( - document.getElementById('partitionChart'), - chartConfig, - ); - - function addPartitionToChart(chart, label, value, bgColor) { - chart.data.labels.push(label) - chart.data.datasets[0].data.push(value); - chart.data.datasets[0].backgroundColor.push(bgColor); - } - - function resetChart() { - partitionChart.data.labels = []; - partitionChart.data.datasets[0].data = []; - partitionChart.data.datasets[0].backgroundColor = []; - } - - function updateChart() { - resetChart(); - - let freeSpace = diskSize; - let partNum = 1; - $('#partitionsTable tr').each(function() { - let partitionSize = parseInt($(this).find('td').eq(3).find('input').val().trim()); - if (isNaN(partitionSize)) { - partitionSize = 0; - } - freeSpace -= partitionSize; - addPartitionToChart(partitionChart, 'Partition ' + partNum, partitionSize, usedColor); - partNum++; - }); - - addPartitionToChart(partitionChart, 'Free', Math.max(freeSpace, 0), freeColor); - partitionChart.update(); - } - - $(document).ready(function() { - updateChart(); - }); - - function handleEdit(element) { - const numericValue = parseInt(element.value); - - if (isNaN(numericValue)) { - updateChart(); - return; - } - - let freeSpace = diskSize; - $('#partitionsTable tr').each(function() { - let partitionSize = parseInt($(this).find('td').eq(3).find('input').val().trim()); - if (isNaN(partitionSize)) { - partitionSize = 0; - } - freeSpace -= partitionSize; - }); - - if (freeSpace < 0) { - element.value = numericValue + freeSpace; - } - - updateChart(); - } - - function AddPartition(evt) { - const target = $($(evt).data("target")); - const oldrow = target.find("[data-toggle=fieldset-entry]:last"); - const row = oldrow.clone(true, true); - const elem_id = row.find(".form-control")[0].id; - const elem_num = parseInt(elem_id.replace(/(.*)-(\d{1,4})/m, '$2')) + 1; - // Increment WTForms unique identifiers - row.find('.form-control').each(function() { - const id = $(this).attr('id').replace(/(.*)-(\d{1,4})-(.*)/, `$1-${elem_num}-$3`); - $(this).attr('name', id).attr('id', id).val('').removeAttr("checked"); - }); - let part_field = row.find('td').filter(':first')[0]; - part_field.innerText = elem_num + 1; - row.show(); - oldrow.after(row); - - updateChart(); - } - - function RemovePartition(evt) { - const target = $(evt).parent().parent(); - const table = target.parent(); - - if (table[0].children.length > 1) { - target.remove(); - // Reassign rows ids - table.find('tr').each(function(index) { - function update_references() { - const id = $(this).attr('id').replace(/(.*)-(\d{1,4})-(.*)/, `$1-${index}-$3`); - $(this).attr('name', id).attr('id', id); - } - - let part_field = $(this).find('td').filter(':first')[0]; - part_field.innerText = index + 1; - $(this).find('input').filter(':first').each(update_references); - $(this).find('.form-control').each(update_references); - }); - } else { - table.find('tr').each(function(index) { - $(this).find('.form-control').each(function() { - $(this).val('').removeAttr("checked"); - }); - }); - } - updateChart(); - } - -</script> +{% include 'disk_inspector.html' %} {% endblock %} diff --git a/ogcp/templates/disk_inspector.html b/ogcp/templates/disk_inspector.html new file mode 100644 index 0000000..90a8996 --- /dev/null +++ b/ogcp/templates/disk_inspector.html @@ -0,0 +1,306 @@ +{% if selected_disk is defined and setup_data is defined %} + +<form class="form-inline" method="POST" id="setupForm"> + {{ disk_form.hidden_tag() }} + {{ disk_form.ips() }} + + <table class="table"> + <thead class="text-center"> + <tr> + <th>{{ _('Disk') }}</th> + <th>{{ _('Partition Table Type') }}</th> + <th>{{ _('Total Disk Size') }} (MiB)</th> + </tr> + </thead> + + <tbody data-target="partitons-fieldset" id="diskTable" class="text-center"> + <tr> + <td> + {{ disk_form.disk(class_="form-control", onchange="handleDiskChange(this)") }} + </td> + {{ disk_form.hidden_tag() }} + <td> + {% if readonly_disk_inspector is defined %} + {{ disk_form.disk_type(class_="form-control", id="diskType", readonly="readonly") }} + {% else %} + {{ disk_form.disk_type(class_="form-control", id="diskType") }} + {% endif %} + </td> + <td id="diskSize">{{ disk_size }}</td> + </tr> +</tbody> + </table> + <table class="table"> + <thead class="text-center"> + <tr> + <th>{{ _('Partition') }}</th> + <th>{{ _('Type') }}</th> + <th>{{ _('Filesystem') }}</th> + <th>{{ _('Size') }} (MiB)</th> + {% if show_part_images is defined %} + <th>{{ _('Image') }}</th> + {% endif %} + <th colspan="2"></th> + </tr> + </thead> + + <tbody data-target="partitons-fieldset" id="partitionsTable" class="text-center"> + {% for partition in disk_form.partitions %} + <tr data-toggle="fieldset-entry"> + {{ partition.hidden_tag() }} + <td>{{ partition.partition.data }}</td> + <td> + {% if readonly_disk_inspector is defined %} + {{ partition.part_type(class_="form-control", readonly="readonly") }} + {% else %} + {{ partition.part_type(class_="form-control") }} + {% endif %} + </td> + <td> + {% if readonly_disk_inspector is defined %} + {{ partition.fs(class_="form-control", readonly="readonly") }} + {% else %} + {{ partition.fs(class_="form-control") }} + {% endif %} + </td> + <td> + {% if readonly_disk_inspector is defined %} + {{ partition.size(class_="form-control", oninput="handleEdit(this)", readonly="readonly") }} + {% else %} + {{ partition.size(class_="form-control", oninput="handleEdit(this)") }} + {% endif %} + </td> + {% if show_part_images is defined %} + <td></td> + {% endif %} + <td> + <button class="btn btn-danger" type="button" onclick="RemovePartition(this, true)" + {% if readonly_disk_inspector is defined %}style="display: none;"{% endif %}> + {{ _('Remove') }} + </button> + </td> + </tr> + {% endfor %} + </tbody> + </table> +</form> + +<button class="btn btn-primary" data-target="#partitionsTable" id="addPartButton" onclick="AddPartition(this, true)" +{% if readonly_disk_inspector is defined %}style="display: none;"{% endif %}> + {{ _('Add a new partition') }} +</button> + +{% if not readonly_disk_inspector is defined %} + <button class="btn btn-success" form="setupForm"> + {{ _('Submit') }} + </button> +{% endif %} + +<div class="card text-center"> + <div class="card-header"> + {{ _('Partition graph') }} + </div> + <div class="card-body mx-auto col-7"> + <canvas id="partitionChart" class="mb-2"></canvas> + </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> + const usedColor = 'rgb(255, 99, 132)'; + const freeColor = 'rgb(54, 162, 235)'; + + let selectedDisk = {{selected_disk}}; + let setupData = {{setup_data|tojson|safe}} + let diskSize = 0; + + let chartConfig = { + type: 'doughnut', + data: { + labels: [], + datasets: [ + { + label: 'Partitions', + data: [], + backgroundColor: [], + }, + ], + }, + options: { + responsive: true, + plugins: { + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Chart.js Doughnut Chart' + }, + }, + }, + }; + + let partitionChart = new Chart( + document.getElementById('partitionChart'), + chartConfig, + ); + + function addPartitionToChart(chart, label, value, bgColor) { + chart.data.labels.push(label) + chart.data.datasets[0].data.push(value); + chart.data.datasets[0].backgroundColor.push(bgColor); + } + + function resetChart() { + partitionChart.data.labels = []; + partitionChart.data.datasets[0].data = []; + partitionChart.data.datasets[0].backgroundColor = []; + } + + function updatePartitionChart() { + resetChart(); + + let freeSpace = diskSize; + let partNum = 1; + $('#partitionsTable tr').each(function() { + let partitionSize = parseInt($(this).find('td').eq(3).find('input').val().trim()); + if (isNaN(partitionSize)) { + partitionSize = 0; + } + freeSpace -= partitionSize; + addPartitionToChart(partitionChart, 'Partition ' + partNum, partitionSize, usedColor); + partNum++; + }); + + addPartitionToChart(partitionChart, 'Free', Math.max(freeSpace, 0), freeColor); + partitionChart.update(); + } + + function handleEdit(element) { + const numericValue = parseInt(element.value); + + if (isNaN(numericValue)) { + updatePartitionChart(); + return; + } + + let freeSpace = diskSize; + $('#partitionsTable tr').each(function() { + let partitionSize = parseInt($(this).find('td').eq(3).find('input').val().trim()); + if (isNaN(partitionSize)) { + partitionSize = 0; + } + freeSpace -= partitionSize; + }); + + if (freeSpace < 0) { + element.value = numericValue + freeSpace; + } + + updatePartitionChart(); + } + + function AddPartition(evt, updateChart) { + const target = $($(evt).data("target")); + const oldrow = target.find("[data-toggle=fieldset-entry]:last"); + const row = oldrow.clone(true, true); + const elem_id = row.find(".form-control")[0].id; + const elem_num = parseInt(elem_id.replace(/(.*)-(\d{1,4})/m, '$2')) + 1; + // Increment WTForms unique identifiers + row.find('.form-control').each(function() { + const id = $(this).attr('id').replace(/(.*)-(\d{1,4})-(.*)/, `$1-${elem_num}-$3`); + $(this).attr('name', id).attr('id', id).val('').removeAttr("checked"); + }); + let part_field = row.find('td').filter(':first')[0]; + part_field.innerText = elem_num + 1; + row.show(); + oldrow.after(row); + + if (updateChart) { + updatePartitionChart(); + } + } + + function RemovePartition(evt, updateChart) { + const target = $(evt).parent().parent(); + const table = target.parent(); + + if (table[0].children.length > 1) { + target.remove(); + // Reassign rows ids + table.find('tr').each(function(index) { + function update_references() { + const id = $(this).attr('id').replace(/(.*)-(\d{1,4})-(.*)/, `$1-${index}-$3`); + $(this).attr('name', id).attr('id', id); + } + + let part_field = $(this).find('td').filter(':first')[0]; + part_field.innerText = index + 1; + $(this).find('input').filter(':first').each(update_references); + $(this).find('.form-control').each(update_references); + }); + } else { + table.find('tr').each(function(index) { + $(this).find('.form-control').each(function() { + $(this).val('').removeAttr("checked"); + }); + }); + } + if (updateChart) { + updatePartitionChart(); + } + } + + function setDiskData(diskNumber) { + selectedDisk = diskNumber; + let partitions = setupData[selectedDisk]; + diskSize = Math.floor(partitions[0].size / 1024); + + $('#diskSize').text(diskSize); + $('#diskType').val(partitions[0].code); + + const partitionsTable = $('#partitionsTable'); + let partNumber = partitionsTable.find('tr').length; + const targetPartNumber = partitions.length - 1; + + while (partNumber < targetPartNumber) { + AddPartition($('#addPartButton'), false); + partNumber++; + } + + while (partNumber > targetPartNumber) { + RemovePartition(partitionsTable.find('tr:last').find('button'), false); + partNumber--; + } + + for (let i = 1; i < partitions.length; i++) { + let p = partitions[i]; + + let row = partitionsTable.find('tr').eq(i - 1); + + row.find('td').eq(0).text(p.partition); + row.find('td').eq(1).find('select').val(p.code); + row.find('td').eq(2).find('select').val(p.filesystem); + row.find('td').eq(3).find('input').val(Math.floor(p.size / 1024)); + {% if show_part_images is defined %} + row.find('td').eq(4).text(p.image); + {% endif %} + } + + updatePartitionChart(); + } + + function handleDiskChange(selectElement) { + setDiskData(selectElement.value); + } + + $(document).ready(function() { + setDiskData(selectedDisk); + }); + +</script> + +{% endif %} |