templates: show excluded clients from partition operation

Show the list of IPs of the clients withut the selected disk to
partition in the partition and format form.

1 files changed, 27 insertions, 6 deletions

diff --git a/ogcp/templates/disk_inspector.html b/ogcp/templates/disk_inspector.html
index 90a8996..0b9ab4f 100644
--- a/ogcp/templates/disk_inspector.html
+++ b/ogcp/templates/disk_inspector.html
@@ -1,6 +1,6 @@
 {% if selected_disk is defined and setup_data is defined %}
 
-<form class="form-inline" method="POST" id="setupForm">
+<form class="form-inline mx-5" method="POST" id="setupForm">
     {{ disk_form.hidden_tag() }}
     {{ disk_form.ips() }}
 
@@ -85,18 +85,24 @@
     </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>
+<div class="form-group mx-5">
+    <div id="clientWarningMsg"></div>
+</div>
+
+<div class="form-group mx-5">
+    <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>
 
-<div class="card text-center">
+<div class="card text-center mx-5">
     <div class="card-header">
       {{ _('Partition graph') }}
     </div>
@@ -115,6 +121,10 @@
 
     let selectedDisk = {{selected_disk}};
     let setupData = {{setup_data|tojson|safe}}
+
+{% if excluded_client_disks is defined %}
+    let excludedClientDisks = {{excluded_client_disks|tojson|safe}}
+{% endif %}
     let diskSize = 0;
 
     let chartConfig = {
@@ -291,6 +301,17 @@
         }
 
         updatePartitionChart();
+
+{% if excluded_client_disks is defined %}
+        let missingClientsText = "";
+        if (excludedClientDisks[selectedDisk].length) {
+            missingClientsText = "<p>{{ _('Clients missing the target disk:') }}</p>";
+        }
+        for (const c of excludedClientDisks[selectedDisk]) {
+            missingClientsText += '<div class="card d-inline-block" style="padding: 5px;">' + c + '</div>';
+        }
+        $('#clientWarningMsg').html(missingClientsText);
+{% endif %}
     }
 
     function handleDiskChange(selectElement) {