summaryrefslogtreecommitdiffstats
path: root/ogcp/templates
diff options
context:
space:
mode:
authorAlejandro Sirgo Rica <asirgo@soleta.eu>2024-08-29 11:55:52 +0200
committerAlejandro Sirgo Rica <asirgo@soleta.eu>2024-09-02 15:05:45 +0200
commitd00e437b8d76bc32732643a92f0ea32fbe0b7901 (patch)
treecf8998b06022b7ca8e29eedb74c0a32b1ecea6b5 /ogcp/templates
parent78a26f947fba1af6b339567cb58e0f852d253137 (diff)
ogcp: add support for multi-disk partition and format
Add support for selecting different disks in the disk inspector. Add disk_inspector.html as a template to show the disk contents of a client. The view can define the variable readonly_disk_inspector to make the view non editable. Use disk_inspector.html in the following views: - client details - partition and format Update code to obtain the partitions of a client to better fit the requirements of disk_inspector.html Remove code to setup the SetupForm as the contents of the disks are now dynamically loaded through javascript.
Diffstat (limited to 'ogcp/templates')
-rw-r--r--ogcp/templates/actions/client_details.html29
-rw-r--r--ogcp/templates/actions/select_client.html42
-rw-r--r--ogcp/templates/actions/setup.html226
-rw-r--r--ogcp/templates/disk_inspector.html306
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 %}