ogcp: select images of selected partition in image/update

Select the image field value containing the restored image of the
partition selected by the user.

Create a dictionary where the key is the value= of the partition
field and the value is the id of the image restored in the
partition. Add each dictionary entry only only if the corresponding
image exists in the repository.
Pass the dictionary to the HTML template and convert it to JS.

2 files changed, 52 insertions, 7 deletions

diff --git a/ogcp/templates/actions/image_update.html b/ogcp/templates/actions/image_update.html
index 361165a..352b0d0 100644
--- a/ogcp/templates/actions/image_update.html
+++ b/ogcp/templates/actions/image_update.html
@@ -13,10 +13,43 @@
 
 {{ macros.cmd_selected_clients(selected_clients) }}
 
-{{ wtf.quick_form(form,
-                  action=url_for('action_image_update'),
-                  method='post',
-                  button_map={'update': 'primary'},
-                  extra_classes='mx-5') }}
+<form  class="form mx-5" method="POST" action="{{ url_for('action_image_update') }}">
+    {{ form.hidden_tag() }}
+
+    {{ form.ip }}
+
+    <div class="form-group">
+        {{ form.os.label(class="form-label") }}
+        {{ form.os(class="form-control", onchange="onPartitionClicked(this.value)") }}
+    </div>
+
+    <div class="form-group">
+        {{ form.image.label(class="form-label") }}
+        {{ form.image(class="form-control") }}
+    </div>
+
+    <div class="form-group form-check">
+        {{ form.backup(class="form-check-input") }}
+        {{ form.backup.label(class="form-check-label") }}
+    </div>
+
+    <div class="form-group">
+        {{ form.update(class="btn btn-primary") }}
+    </div>
+</form>
+
+<script>
+    const partContent = {{ part_content|tojson|safe }};
+    const imageField = document.querySelector('select[name="{{ form.image.name }}"]');
+    const partField = document.querySelector('select[name="{{ form.os.name }}"]');
+
+    function onPartitionClicked(selectedValue) {
+        if (selectedValue in partContent) {
+            imageField.value = partContent[selectedValue]
+        }
+    }
+
+    onPartitionClicked(partField.value)
+</script>
 
 {% endblock %}
diff --git a/ogcp/views.py b/ogcp/views.py
index 097041f..3ceffdf 100644
--- a/ogcp/views.py
+++ b/ogcp/views.py
@@ -2309,25 +2309,37 @@ def action_image_update():
 
     invalid_part_types = get_invalid_image_partition_types()
 
+    part_content = {}
     for part in r.json()['partitions'][1:]:
         part_type = PART_TYPE_CODES.get(int(part.get('code')), 'UNKNOWN')
 
         if part_type in invalid_part_types:
             continue
 
+        partition_value = f"{part.get('disk')} {part.get('partition')} {part.get('code')}"
+        partition_text = f"Disk {part.get('disk')} | Partition {part.get('partition')} "
+        f"| {PART_TYPE_CODES.get(part.get('code'), 'UNKNOWN')} "
+        f"{FS_CODES.get(part.get('filesystem'), 'UNKNOWN')}"
+
         form.os.choices.append(
-            (f"{part.get('disk')} {part.get('partition')} {part.get('code')}",
+            (partition_value,
              f"Disk {part.get('disk')} | Partition {part.get('partition')} "
              f"| {PART_TYPE_CODES.get(part.get('code'), 'UNKNOWN')} "
              f"{FS_CODES.get(part.get('filesystem'), 'UNKNOWN')}")
         )
 
+        if part['image']:
+            for image in images[repo_id]:
+                if image['id'] == part['image']:
+                    part_content[partition_value] = part['image']
+                    break
+
     scopes, _clients = get_scopes(set(ips))
     selected_clients = list(get_selected_clients(scopes['scope']).items())
 
     return render_template('actions/image_update.html', form=form,
                            selected_clients=selected_clients,
-                           scopes=scopes)
+                           scopes=scopes, part_content=part_content)
 
 
 @app.route('/action/reboot', methods=['GET', 'POST'])