diff options
Diffstat (limited to 'ogcp/templates/actions')
| -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 |
3 files changed, 47 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 %} |