Group images by repos

Make the sidebar from the images menu display the list of repos grouped
by repos

ogcp/static/js/ogcp.js

@@ -137,6 +137,25 @@ function keepSelectedClients() {
     });
 }
 
+function keepImagesTreeState() {
+    const images_tree = $('#servers .collapse')
+    console.log(images_tree)
+    images_tree.on('hidden.bs.collapse', function (event) {
+        event.stopPropagation();
+        localStorage.removeItem(this.id);
+    });
+    images_tree.on('shown.bs.collapse', function (event) {
+        event.stopPropagation();
+        localStorage.setItem(this.id, 'show');
+    });
+
+    images_tree.each(function () {
+        if (localStorage.getItem(this.id) == 'show') {
+            $(this).collapse('show');
+        }
+    });
+}
+
 function keepReposTreeState() {
     const repos_tree = $('#repos-list .collapse')
 

ogcp/templates/images.html

@@ -14,6 +14,7 @@
     // in the scope
     document.addEventListener('readystatechange', () => {
         if (document.readyState === 'complete') {
+            keepImagesTreeState();
             checkImageServer();
         }
     });
@@ -24,22 +25,31 @@
     <ul id="servers" class="nav ogcp-nav flex-column nav-pills">
         {% for response in responses %}
         {% set server_str = response["server"]["ip"] ~ ":" ~ response["server"]["port"] %}
+        {% set parent_id = "repos-" ~ loop.index0 %}
                 <li class="nav-item">
                 <input class="form-check-input" type="checkbox" form="imagesForm"
                        id="{{ server_str }}" value="{{ server_str }}"
                        onclick="return false;" name="image-server" hidden/>
-                <a class="nav-link" data-toggle="collapse" data-target="#images-{{ loop.index0 }}">
+                <a class="nav-link" data-toggle="collapse" data-target="#repos-{{ loop.index0 }}">
                     <b>{{ response["server"]["name"] }}</b>
                 </a>
-                <ul id="images-{{ loop.index0 }}" class="nav flex-column nav-pills collapse">
-                    {% for image in response["json"]["images"] %}
-                        <li id="{{ image["name"] }}_{{ image["id"] }}" class="nav-item">
-                            <input class="form-check-input" type="checkbox" form="imagesForm"
-                                   data-server="{{ server_str }}" value="{{ image["id"] }}"
-                                   {% if image.get("selected", False) %}checked{% endif %}
-                                   name="{{ image["name"] }}_{{ image["id"] }}" />
-                                    {{ image["name"] }}
-                        </li>
+                <ul id="{{ parent_id }}" class="nav flex-column nav-pills collapse">
+                    {% for repo, repo_data in response["repos"].items() %}
+                        <li class="nav-item">
+                        <a class="nav-link" data-toggle="collapse" data-target="#{{parent_id}}-{{ loop.index0 }}">
+                            <b>{{ repo_data["name"] }}</b>
+                        </a>
+                        <ul id="{{parent_id}}-{{ loop.index0 }}" class="nav ogcp-nav flex-column nav-pills collapse">
+                            {% for image in repo_data["images"] %}
+                                <li id="{{ image["name"] }}_{{ image["id"] }}" class="nav-item">
+                                    <input class="form-check-input" type="checkbox" form="imagesForm"
+                                        data-server="{{ server_str }}" value="{{ image["id"] }}"
+                                        {% if image.get("selected", False) %}checked{% endif %}
+                                        name="{{ image["name"] }}_{{ image["id"] }}" />
+                                     {{ image["name"] }}
+                                </li>
+                            {% endfor %}
+                        </ul>
                     {% endfor %}
                 </ul>
             </li>

ogcp/views.py

@@ -1479,10 +1479,34 @@ def commands():
     scopes, clients = get_scopes()
     return render_template('commands.html', scopes=scopes, clients=clients)
 
+def get_images_grouped_by_repos():
+    responses = multi_request('get', '/images')
+    servers=[]
+    for resp in responses:
+        server={}
+        server['server'] = resp['server']
+        images=resp['json']['images']
+        all_repos=get_repositories(resp['server'])
+        repos={}
+        for image in images:
+            repo_id=image['repo_id']
+            repo_data={}
+            if repo_id not in repos:
+                repo_name = [repo['name'] for repo in all_repos
+                             if repo_id == repo['id']][0]
+                repos[repo_id] = {}
+                repos[repo_id]['name'] = repo_name
+                repos[repo_id]['images'] = [image]
+            else:
+                repos[repo_id]['images'].append(image)
+        server['repos'] = repos
+        servers.append(server)
+    return servers
+
 @app.route('/images/', methods=['GET'])
 @login_required
 def images():
-    responses = multi_request('get', '/images')
+    responses = get_images_grouped_by_repos()
     return render_template('images.html', responses=responses)
 
 
@@ -1942,7 +1966,7 @@ def action_image_info():
     form.software_id.data = image['software_id']
     form.description.data = image['description']
 
-    responses = multi_request('get', '/images')
+    responses = get_images_grouped_by_repos()
 
     return render_template('actions/image_details.html', form=form,
                            responses=responses)
@@ -1972,7 +1996,7 @@ def action_image_delete():
             return redirect(url_for('images'))
         image_name, image_id = images[0]
         server = get_server_from_ip_port(params['image-server'])
-        responses = multi_request('get', '/images')
+        responses = get_images_grouped_by_repos()
         form.ids.data = image_id
         form.server.data = params['image-server']
         if not validate_elements(images, max_len=1):