From 7f729d73099187272924c9a026fa4783f53e3e51 Mon Sep 17 00:00:00 2001
From: Guillaumebeuzeboc <guillaume.beuzeboc@gmail.com>
Date: Fri, 17 May 2024 11:07:09 +0200
Subject: [PATCH 1/5] WIP

---
 .../devices/templates/devices/devices.html    | 530 +++++++++++++++++-
 1 file changed, 528 insertions(+), 2 deletions(-)
diff --git a/cos_registration_server/devices/templates/devices/devices.html b/cos_registration_server/devices/templates/devices/devices.html
index cb37768..39812b7 100644
--- a/cos_registration_server/devices/templates/devices/devices.html
+++ b/cos_registration_server/devices/templates/devices/devices.html
@@ -1,6 +1,528 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Devices</title>
+
+    <link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-4.11.0.min.css" />
+
+    <link rel="icon" href="https://assets.ubuntu.com/v1/ab36e6ed-vanilla_favicon_32px.png" type="image/x-icon" />
+
+  </head>
+
+  <body class="is-paper">
+    <div class="l-application" role="presentation">
+        <div class="l-navigation-bar">
+          <div class="p-panel is-dark">
+            <div class="p-panel__header">
+              <a class="p-panel__logo" href="#">
+                <!--img class="p-panel__logo-icon" src="https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg" alt="" width="24" height="24">
+                <img class="p-panel__logo-name is-fading-when-collapsed" src="https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg" alt="JAAS" height="16"-->
+                <h4>ROB COS</h4>
+              </a>
+              <div class="p-panel__controls">
+                <span class="p-panel__toggle js-menu-toggle">Menu</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <header class="l-navigation is-collapsed">
+          <div class="l-navigation__drawer">
+            <div class="p-panel is-dark">
+              <div class="p-panel__header is-sticky">
+                <a class="p-panel__logo" href="#">
+                  <!--img class="p-panel__logo-icon" src="https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg" alt="" width="24" height="24">
+                  <img class="p-panel__logo-name is-fading-when-collapsed" src="https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg" alt="JAAS" height="16"-->
+                  <h4>ROB COS</h4>
+                </a>
+                <div class="p-panel__controls u-hide--large">
+                  <button class="p-button--base is-dark has-icon u-no-margin u-hide--medium js-menu-close"><i class="is-light p-icon--close"></i></button>
+                  <button class="p-button--base is-dark has-icon u-no-margin u-hide--small js-menu-pin"><i class="is-light p-icon--pin"></i></button>
+                </div>
+              </div>
+              <div class="p-panel__content">
+
+      <div class="p-side-navigation--icons" id="drawer-icons">
+        <nav aria-label="Main">
+          <ul class="p-side-navigation__list">
+            <li class="p-side-navigation__item--title">
+              <a class="p-side-navigation__link" href="#"><span class="p-side-navigation__label">Devices</span></a>
+            </li>
+
 {% if devices_list %}
-    <p>Devices list:</p>
-    <ul>
+          {% for device in devices_list %}
+          <li class="p-side-navigation__item">
+            <a class="p-side-navigation__link" href="{% url 'devices:device' device.uid %}"><span class="p-side-navigation__label">{{ device.uid }}</span></a>
+          </li>
+          <li class="p-side-navigation__item">
+            <a class="p-side-navigation__link" href="{% url 'devices:device' device.uid %}"><span class="p-side-navigation__label">{{ device.uid }}</span></a>
+          </li>
+          <li class="p-side-navigation__item">
+            <a class="p-side-navigation__link" href="{% url 'devices:device' device.uid %}"><span class="p-side-navigation__label">{{ device.uid }}</span></a>
+          </li>
+          <li class="p-side-navigation__item">
+            <a class="p-side-navigation__link" href="{% url 'devices:device' device.uid %}"><span class="p-side-navigation__label">{{ device.uid }}</span></a>
+          </li>
+          {% endfor %}
+          </ul>
+      {% else %}
+          <li class="p-side-navigation__item">
+            <span class="p-side-navigation__text"><span class="p-side-navigation__label">No devices are available.</span></span>
+          </li>
+      {% endif %}
+          </ul>
+        </nav>
+        </div>
+              </div>
+            </div>
+          </div>
+        </header>
+
+        <main class="l-main">
+          <div class="p-panel">
+            <div class="p-panel__header">
+              <h4 class="p-panel__title"></h4>
+              <!-- div class="p-panel__controls">
+                <button class="u-no-margin--bottom js-aside-open">Open aside</button>
+              </div-->
+            </div>
+            <div class="p-panel__content">
+              <div class="u-fixed-width">
+                <table aria-label="JAAS table example" class="p-main-table">
+                  <thead>
+                    <tr>
+                      <th><span class="status-icon is-blocked">Blocked (3)</span></th>
+                      <th></th>
+                      <th>Owner</th>
+                      <th>Cloud/Region</th>
+                      <th>Credential</th>
+                      <th>Controller</th>
+                      <th class="u-align--right">Last Updated</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr data-test-model-uuid="2f995dee-392e-4459-8eb9-839c501590af">
+                      <td class="" data-test-column="name">
+                        <div><a href="#/models/gomboli@external/hadoopspark">hadoopspark</a></div>
+                      </td>
+                      <td class="u-overflow--visible" data-test-column="summary">
+                        <div class="u-flex">
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr0">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>11</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr0">Applications</span>
+                          </div>
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr1">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>10</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr1">Units</span>
+                          </div>
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr2">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>6</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr2">Machines</span>
+                          </div>
+                        </div>
+                      </td>
+                      <td class="" data-test-column="owner"><a href="#_" class="p-link--soft">gomboli</a></td>
+                      <td class="" data-test-column="cloud"><a href="#_" class="p-link--soft">google/us-east1</a></td>
+                      <td class="" data-test-column="credential"><a href="#_" class="p-link--soft">Algebra-json</a></td>
+                      <td class="" data-test-column="controller">JAAS</td>
+                      <td class="u-align--right" data-test-column="updated">2020-06-17</td>
+                    </tr>
+                    <tr data-test-model-uuid="d291b9ed-1e66-4023-84fe-57130e17a0b2">
+                      <td class="" data-test-column="name">
+                        <div><a href="#/models/gomboli@external/mymodel4">mymodel4</a></div>
+                      </td>
+                      <td class="u-overflow--visible" data-test-column="summary">
+                        <div class="u-flex">
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr3">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>7</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr3">Applications</span>
+                          </div>
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr4">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>11</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr4">Units</span>
+                          </div>
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr5">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>11</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr5">Machines</span>
+                          </div>
+                        </div>
+                      </td>
+                      <td class="" data-test-column="owner"><a href="#_" class="p-link--soft">gomboli</a></td>
+                      <td class="" data-test-column="cloud"><a href="#_" class="p-link--soft">google/us-central1</a></td>
+                      <td class="" data-test-column="credential"><a href="#_" class="p-link--soft">clean-algebra-206308</a></td>
+                      <td class="" data-test-column="controller">JAAS</td>
+                      <td class="u-align--right" data-test-column="updated">2020-06-17</td>
+                    </tr>
+                    <tr data-test-model-uuid="5f612488-b60b-4256-814a-ba1abaa7db23">
+                      <td class="" data-test-column="name">
+                        <div><a href="#/models/gomboli@external/testing">testing</a></div>
+                      </td>
+                      <td class="u-overflow--visible" data-test-column="summary">
+                        <div class="u-flex">
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr6">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>2</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr6">Applications</span>
+                          </div>
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr7">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>2</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr7">Units</span>
+                          </div>
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr8">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>4</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr8">Machines</span>
+                          </div>
+                        </div>
+                      </td>
+                      <td class="" data-test-column="owner"><a href="#_" class="p-link--soft">gomboli</a></td>
+                      <td class="" data-test-column="cloud"><a href="#_" class="p-link--soft">google/europe-west1</a></td>
+                      <td class="" data-test-column="credential"><a href="#_" class="p-link--soft">clean-algebra-206308</a></td>
+                      <td class="" data-test-column="controller">JAAS</td>
+                      <td class="u-align--right" data-test-column="updated">2020-06-17</td>
+                    </tr>
+                  </tbody>
+                </table>
+                <table aria-label="JAAS table example" class="p-main-table">
+                  <thead>
+                    <tr>
+                      <th><span class="status-icon is-alert">Alert (2)</span></th>
+                      <th></th>
+                      <th>Owner</th>
+                      <th>Cloud/Region</th>
+                      <th>Credential</th>
+                      <th>Controller</th>
+                      <th class="u-align--right">Last Updated</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr data-test-model-uuid="e1e81a64-3385-4779-8643-05e3d5ed4523">
+                      <td class="" data-test-column="name">
+                        <div><a href="#/models/gomboli@external/canonical-kubernetes">canonical-kubernetes</a></div>
+                      </td>
+                      <td class="u-overflow--visible" data-test-column="summary">
+                        <div class="u-flex">
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr9">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>6</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr9">Applications</span>
+                          </div>
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr10">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>10</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr10">Units</span>
+                          </div>
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr11">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>10</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr11">Machines</span>
+                          </div>
+                        </div>
+                      </td>
+                      <td class="" data-test-column="owner"><a href="#_" class="p-link--soft">gomboli</a></td>
+                      <td class="" data-test-column="cloud"><a href="#_" class="p-link--soft">google/us-central1</a></td>
+                      <td class="" data-test-column="credential"><a href="#_" class="p-link--soft">clean-algebra-206308</a></td>
+                      <td class="" data-test-column="controller">JAAS</td>
+                      <td class="u-align--right" data-test-column="updated">2020-06-17</td>
+                    </tr>
+                    <tr data-test-model-uuid="7ffe956a-06ac-4ae9-8aac-04eba4a93da5">
+                      <td class="" data-test-column="name">
+                        <div><a href="#/models/gomboli@external/mymodel">mymodel</a></div>
+                      </td>
+                      <td class="u-overflow--visible" data-test-column="summary">
+                        <div class="u-flex">
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr12">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>6</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr12">Applications</span>
+                          </div>
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr13">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>10</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr13">Units</span>
+                          </div>
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr14">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>10</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr14">Machines</span>
+                          </div>
+                        </div>
+                      </td>
+                      <td class="" data-test-column="owner"><a href="#_" class="p-link--soft">gomboli</a></td>
+                      <td class="" data-test-column="cloud"><a href="#_" class="p-link--soft">google/us-east1</a></td>
+                      <td class="" data-test-column="credential"><a href="#_" class="p-link--soft">clean-algebra-206308</a></td>
+                      <td class="" data-test-column="controller">JAAS</td>
+                      <td class="u-align--right" data-test-column="updated">2020-06-17</td>
+                    </tr>
+                  </tbody>
+                </table>
+                <table aria-label="JAAS table example" class="p-main-table">
+                  <thead>
+                    <tr>
+                      <th><span class="status-icon is-running">Running (3)</span></th>
+                      <th></th>
+                      <th>Owner</th>
+                      <th>Cloud/Region</th>
+                      <th>Credential</th>
+                      <th>Controller</th>
+                      <th class="u-align--right">Last Updated</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr data-test-model-uuid="57650e3c-815f-4540-89df-81fd5d70b7ef">
+                      <td class="" data-test-column="name">
+                        <div><a href="#/models/hatch@external/group-test">group-test</a></div>
+                      </td>
+                      <td class="u-overflow--visible" data-test-column="summary">
+                        <div class="u-flex">
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr15">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>9</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr15">Applications</span>
+                          </div>
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr16">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>0</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr16">Units</span>
+                          </div>
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr17">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>0</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr17">Machines</span>
+                          </div>
+                        </div>
+                      </td>
+                      <td class="" data-test-column="owner"><a href="#_" class="p-link--soft">hatch</a></td>
+                      <td class="" data-test-column="cloud"><a href="#_" class="p-link--soft">google/us-central1</a></td>
+                      <td class="" data-test-column="credential"><a href="#_" class="p-link--soft">admin</a></td>
+                      <td class="" data-test-column="controller">JAAS</td>
+                      <td class="u-align--right" data-test-column="updated">2020-06-17</td>
+                    </tr>
+                    <tr data-test-model-uuid="e6782960-fb0b-460e-82a1-64ee03f9a39b">
+                      <td class="" data-test-column="name">
+                        <div><a href="#/models/hatch@external/new-search-aggregate">new-search-aggregate</a></div>
+                      </td>
+                      <td class="u-overflow--visible" data-test-column="summary">
+                        <div class="u-flex">
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr18">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>2</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr18">Applications</span>
+                          </div>
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr19">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>0</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr19">Units</span>
+                          </div>
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr20">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>0</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr20">Machines</span>
+                          </div>
+                        </div>
+                      </td>
+                      <td class="" data-test-column="owner"><a href="#_" class="p-link--soft">hatch</a></td>
+                      <td class="" data-test-column="cloud"><a href="#_" class="p-link--soft">google/us-central1</a></td>
+                      <td class="" data-test-column="credential"><a href="#_" class="p-link--soft">jujuongce</a></td>
+                      <td class="" data-test-column="controller">JAAS</td>
+                      <td class="u-align--right" data-test-column="updated">2020-06-17</td>
+                    </tr>
+                    <tr data-test-model-uuid="930f4bb0-070a-462a-8d4e-19d9772c08f2">
+                      <td class="" data-test-column="name">
+                        <div><a href="#/models/hatch@external/unplaced">unplaced</a></div>
+                      </td>
+                      <td class="u-overflow--visible" data-test-column="summary">
+                        <div class="u-flex">
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr21">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>5</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr21">Applications</span>
+                          </div>
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr22">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>0</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr22">Units</span>
+                          </div>
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr23">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>0</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr23">Machines</span>
+                          </div>
+                        </div>
+                      </td>
+                      <td class="" data-test-column="owner"><a href="#_" class="p-link--soft">hatch</a></td>
+                      <td class="" data-test-column="cloud"><a href="#_" class="p-link--soft">google/us-central1</a></td>
+                      <td class="" data-test-column="credential"><a href="#_" class="p-link--soft">juju</a></td>
+                      <td class="" data-test-column="controller">JAAS</td>
+                      <td class="u-align--right" data-test-column="updated">2020-06-17</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </main>
+
+        <!--aside class="l-aside" id="aside-panel">
+          <div class="p-panel">
+            <div class="p-panel__header">
+              <h4 class="p-panel__title">Aside panel</h4>
+              <div class="p-panel__controls">
+                <button class="p-button--base js-aside-close u-no-margin--bottom has-icon"><i class="p-icon--close"></i></button>
+              </div>
+            </div>
+            <div class="p-panel__content">
+              <form class="p-form p-form--stacked">
+        <div class="p-form__group row">
+
+          <div class="col-4">
+            <label for="full-name-stacked" class="p-form__label">Full name</label>
+          </div>
+
+          <div class="col-8">
+            <div class="p-form__control">
+              <input type="text" id="full-name-stacked" name="fullName" autocomplete="name">
+            </div>
+          </div>
+        </div>
+        <div class="p-form__group row">
+
+          <div class="col-4">
+            <label for="username-stacked" class="p-form__label">Username</label>
+          </div>
+
+          <div class="col-8">
+            <div class="p-form__control">
+              <input type="text" id="username-stacked" name="username-stacked" autocomplete="username" aria-describedby="exampleHelpTextMessage">
+              <p class="p-form-help-text" id="exampleHelpTextMessage">
+                30 characters or fewer.
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="p-form__group row p-form-validation is-error">
+
+          <div class="col-4">
+            <label for="username-stacked-error" class="p-form__label is-required">Email address</label>
+          </div>
+
+          <div class="col-8">
+            <div class="p-form__control">
+              <input type="text" id="username-stacked-error" class="p-form-validation__input" aria-invalid="true" name="username-stackederror" autocomplete="username" aria-describedby="username-error-message-stacked" required>
+              <p class="p-form-validation__message" id="username-error-message-stacked">This field is required.</p>
+            </div>
+          </div>
+        </div>
+        <div class="p-form__group row">
+
+          <div class="col-4">
+            <label for="address-optional-stacked0" class="p-form__label">Address line 1</label>
+          </div>
+
+          <div class="col-8">
+            <div class="p-form__control">
+              <input type="text" id="address-optional-stacked0" name="address-optional-stacked" autocomplete="address-line1">
+            </div>
+          </div>
+        </div>
+        <div class="p-form__group row">
+
+          <div class="col-4">
+            <label for="address-optional-stacked1" class="p-form__label">Address line 2</label>
+          </div>
+
+          <div class="col-8">
+            <div class="p-form__control">
+              <input type="text" id="address-optional-stacked1" name="address-optional-stacked" autocomplete="address-line3">
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-12">
+            <button class="p-button--positive u-float-right" name="add-details">Add details</button>
+          </div>
+        </div>
+      </form>
+            </div>
+          </div>
+        </aside-->
+
+        <aside class="l-status">
+          <div class="p-panel demo-status">
+            <div class="u-fixed-width">
+              Status bar
+            </div>
+          </div>
+        </aside>
+
+      <script>
+      /*
+        Set up event handlers for application layout examples.
+        This is for demo purposes only. Real applications should implement it within their application code.
+      */
+      function setupAppLayoutExamples() {
+        var aside = document.querySelector('.l-aside');
+        var navigation = document.querySelector('.l-navigation');
+
+        var menuToggle = document.querySelector('.js-menu-toggle');
+        var menuClose = document.querySelector('.js-menu-close');
+        var menuPin = document.querySelector('.js-menu-pin');
+        var asideOpen = document.querySelector('.js-aside-open');
+        var asideClose = document.querySelector('.js-aside-close');
+        var asideResize = document.querySelectorAll('.js-aside-resize');
+        var asidePin = document.querySelector('.js-aside-pin');
+
+        if (menuToggle) {
+          menuToggle.addEventListener('click', function () {
+            navigation.classList.toggle('is-collapsed');
+          });
+        }
+
+        if (menuClose) {
+          menuClose.addEventListener('click', function (e) {
+            navigation.classList.add('is-collapsed');
+            document.activeElement.blur();
+          });
+        }
+
+        if (asideOpen) {
+          asideOpen.addEventListener('click', function () {
+            aside.classList.remove('is-collapsed');
+          });
+        }
+
+        if (asideClose) {
+          asideClose.addEventListener('click', function () {
+            aside.classList.add('is-collapsed');
+          });
+        }
+
+        [].slice.call(asideResize).forEach(function (button) {
+          button.addEventListener('click', function () {
+            button.dataset.resizeClass;
+            var panel = document.getElementById(button.getAttribute('aria-controls'));
+            if (panel) {
+              panel.classList.remove('is-narrow');
+              panel.classList.remove('is-medium');
+              panel.classList.remove('is-wide');
+              if (button.dataset.resizeClass) {
+                panel.classList.add(button.dataset.resizeClass);
+              }
+            }
+          });
+        });
+
+        if (menuPin) {
+          menuPin.addEventListener('click', function () {
+            navigation.classList.toggle('is-pinned');
+            if (navigation.classList.contains('is-pinned')) {
+              menuPin.querySelector('i').classList.add('p-icon--close');
+              menuPin.querySelector('i').classList.remove('p-icon--pin');
+            } else {
+              menuPin.querySelector('i').classList.add('p-icon--pin');
+              menuPin.querySelector('i').classList.remove('p-icon--close');
+            }
+            document.activeElement.blur();
+          });
+        }
+
+        if (asidePin) {
+          asidePin.addEventListener('click', function () {
+            aside.classList.toggle('is-pinned');
+            if (aside.classList.contains('is-pinned')) {
+              asidePin.innerText = 'Unpin';
+            } else {
+              asidePin.innerText = 'Pin';
+            }
+          });
+        }
+      }
+
+      setupAppLayoutExamples();
+      </script>
+    <!-- <header id="navigation" class="p-navigation is-dark">
+        <div class="p-navigation__row">
+          <div class="p-navigation__banner">
+            <div class="p-navigation__tagged-logo">
+              <a class="p-navigation__link" href="#">
+                <div class="p-navigation__logo-tag">
+                  <img class="p-navigation__logo-icon" src="https://assets.ubuntu.com/v1/82818827-CoF_white.svg" alt="">
+                </div>
+                <span class="p-navigation__logo-title" id="nav">
+                    Canonical Observability Stack
+                </span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </header>
+    <main class="p-section">
+        <div class="u-fixed-width">
+{% if devices_list %}
+    <h1>Devices list:</h1>
+    <ul class="p-list--divided">
     {% for device in devices_list %}
         <li><a href="{% url 'devices:device' device.uid %}">{{ device.uid }}</a></li>
     {% endfor %}
@@ -8,3 +530,7 @@
 {% else %}
     <p>No devices are available.</p>
 {% endif %}
+      </div>
+    </main> -->
+  </body>
+</html>
\ No newline at end of file

From 9a62d4e1477343f555983aeebd603fad64161d95 Mon Sep 17 00:00:00 2001
From: Guillaumebeuzeboc <guillaume.beuzeboc@gmail.com>
Date: Mon, 25 Aug 2025 18:16:25 +0200
Subject: [PATCH 2/5] WIP devices and device ui

---
 .../devices/templates/devices/device.html     | 378 +++++++++++++++++-
 .../devices/templates/devices/devices.html    | 221 +---------
 2 files changed, 377 insertions(+), 222 deletions(-)

diff --git a/cos_registration_server/devices/templates/devices/device.html b/cos_registration_server/devices/templates/devices/device.html
index 8bddaa5..75df2d7 100644
--- a/cos_registration_server/devices/templates/devices/device.html
+++ b/cos_registration_server/devices/templates/devices/device.html
@@ -1,10 +1,368 @@
-<p>Device {{device.uid}} with ip {{device.address}}, was created on the {{device.creation_date}}</p>
-<ul>
-{% for application_link in links_list%}
-    <li><a href="{{request.scheme}}://{{application_link.main_link}}">{{ application_link.name }}</a>
-        {% for name, link in application_link.additional_links.items %}
-            <ul><a href="{{request.scheme}}://{{link}}">{{ name }}</a></ul>
-        {% endfor %}
-    </li>
-{% endfor %}
-</ul>
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Devices</title>
+
+    <link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-4.11.0.min.css" />
+
+    <link rel="icon" href="https://assets.ubuntu.com/v1/ab36e6ed-vanilla_favicon_32px.png" type="image/x-icon" />
+
+  </head>
+
+  <body class="is-paper">
+    <div class="l-application" role="presentation">
+        <div class="l-navigation-bar">
+          <div class="p-panel is-dark">
+            <div class="p-panel__header">
+              <a class="p-panel__logo" href="../devices">
+                <!--img class="p-panel__logo-icon" src="https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg" alt="" width="24" height="24">
+                <img class="p-panel__logo-name is-fading-when-collapsed" src="https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg" alt="JAAS" height="16"-->
+                <h4>COS for devices</h4>
+              </a>
+              <div class="p-panel__controls">
+                <span class="p-panel__toggle js-menu-toggle">Menu</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <header class="l-navigation is-collapsed">
+          <div class="l-navigation__drawer">
+            <div class="p-panel is-dark">
+              <div class="p-panel__header is-sticky">
+                <a class="p-panel__logo" href="../devices">
+                  <!--img class="p-panel__logo-icon" src="https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg" alt="" width="24" height="24">
+                  <img class="p-panel__logo-name is-fading-when-collapsed" src="https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg" alt="JAAS" height="16"-->
+                  <h4>COS for devices</h4>
+                </a>
+                <div class="p-panel__controls u-hide--large">
+                  <button class="p-button--base is-dark has-icon u-no-margin u-hide--medium js-menu-close"><i class="is-light p-icon--close"></i></button>
+                  <button class="p-button--base is-dark has-icon u-no-margin u-hide--small js-menu-pin"><i class="is-light p-icon--pin"></i></button>
+                </div>
+              </div>
+              <div class="p-panel__content">
+
+      <div class="p-side-navigation--icons" id="drawer-icons">
+        <nav aria-label="Main">
+          <ul class="p-side-navigation__list">
+            <li class="p-side-navigation__item--title">
+              <a class="p-side-navigation__link" href="#"><span class="p-side-navigation__label">Devices</span></a>
+            </li>
+
+{% if devices_list %}
+          {% for device in devices_list %}
+          <li class="p-side-navigation__item">
+            <a class="p-side-navigation__link" href="{% url 'devices:device' device.uid %}"><span class="p-side-navigation__label">{{ device.uid }}</span></a>
+          </li>
+          {% endfor %}
+          </ul>
+      {% else %}
+          <li class="p-side-navigation__item">
+            <span class="p-side-navigation__text"><span class="p-side-navigation__label">No devices are available.</span></span>
+          </li>
+      {% endif %}
+          </ul>
+        </nav>
+        </div>
+              </div>
+            </div>
+          </div>
+        </header>
+
+        <main class="l-main">
+          <div class="p-panel">
+            <div class="p-panel__header">
+              <h4 class="p-panel__title"></h4>
+              <!-- div class="p-panel__controls">
+                <button class="u-no-margin--bottom js-aside-open">Open aside</button>
+              </div-->
+            </div>
+            <div class="p-panel__content">
+              <div class="u-fixed-width">
+                <table aria-label="JAAS table example" class="p-main-table">
+            <thead>
+              <tr>
+                <th class="p-table__cell--icon-placeholder p-table__colump--ip"><span class="p-icon status-icon uuid">UUID</span></th>
+                <th>IP</th>
+                <th>Status</th>
+                <th>Created</th>
+                <th class="u-align--right">Last Updated</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr style="background: rgba(0,0,0, 0.1)" data-test-model-uuid="2f995dee-392e-4459-8eb9-839c501590af">
+                <td class="" data-test-column="uuid"><a href="#_" class="u-truncate p-link--soft">{{device.uid}}</a></td>
+                <td class="" data-test-column="IP"><a href="#_" class="u-truncate p-link--soft">{{device.address}}</a></td>
+                <td class="" data-test-column="Status"><a href="#_" class="u-truncate p-link--soft"><i class="p-icon--success"></i></a></td>
+                <td class="" data-test-column="Created"><a href="#_" class="u-truncate p-link--soft">{{device.creation_date}}</a></td>
+                <td class="u-align--right" data-test-column="updated">September 17, 2025, 3:15 a.m.</td>
+              </tr>
+            </tbody>
+          </table>
+
+                 <ul>
+                 {% for application_link in links_list%}
+                     <li><a href="{{request.scheme}}://{{application_link.main_link}}">{{ application_link.name }}</a>
+                         {% for name, link in application_link.additional_links.items %}
+                             <ul><a href="{{request.scheme}}://{{link}}">{{ name }}</a></ul>
+                         {% endfor %}
+                     </li>
+                 {% endfor %}
+                 </ul>
+                <!--table aria-label="JAAS table example" class="p-main-table">
+                  <thead>
+                    <tr>
+                      <th><span class="status-icon is-blocked">Blocked (3)</span></th>
+                      <th></th>
+                      <th>Owner</th>
+                      <th>Cloud/Region</th>
+                      <th>Credential</th>
+                      <th>Controller</th>
+                      <th class="u-align--right">Last Updated</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr data-test-model-uuid="2f995dee-392e-4459-8eb9-839c501590af">
+                      <td class="" data-test-column="name">
+                        <div><a href="#/models/gomboli@external/hadoopspark">hadoopspark</a></div>
+                      </td>
+                      <td class="u-overflow--visible" data-test-column="summary">
+                        <div class="u-flex">
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr0">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>11</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr0">Applications</span>
+                          </div>
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr1">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>10</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr1">Units</span>
+                          </div>
+                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr2">
+                            <div class="has-icon"><i class="p-icon--information"></i><span>6</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr2">Machines</span>
+                          </div>
+                        </div>
+                      </td>
+                      <td class="" data-test-column="owner"><a href="#_" class="p-link--soft">gomboli</a></td>
+                      <td class="" data-test-column="cloud"><a href="#_" class="p-link--soft">google/us-east1</a></td>
+                      <td class="" data-test-column="credential"><a href="#_" class="p-link--soft">Algebra-json</a></td>
+                      <td class="" data-test-column="controller">JAAS</td>
+                      <td class="u-align--right" data-test-column="updated">2020-06-17</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div-->
+            </div>
+          </div>
+        </main>
+
+        <!--aside class="l-aside" id="aside-panel">
+          <div class="p-panel">
+            <div class="p-panel__header">
+              <h4 class="p-panel__title">Aside panel</h4>
+              <div class="p-panel__controls">
+                <button class="p-button--base js-aside-close u-no-margin--bottom has-icon"><i class="p-icon--close"></i></button>
+              </div>
+            </div>
+            <div class="p-panel__content">
+              <form class="p-form p-form--stacked">
+        <div class="p-form__group row">
+
+          <div class="col-4">
+            <label for="full-name-stacked" class="p-form__label">Full name</label>
+          </div>
+
+          <div class="col-8">
+            <div class="p-form__control">
+              <input type="text" id="full-name-stacked" name="fullName" autocomplete="name">
+            </div>
+          </div>
+        </div>
+        <div class="p-form__group row">
+
+          <div class="col-4">
+            <label for="username-stacked" class="p-form__label">Username</label>
+          </div>
+
+          <div class="col-8">
+            <div class="p-form__control">
+              <input type="text" id="username-stacked" name="username-stacked" autocomplete="username" aria-describedby="exampleHelpTextMessage">
+              <p class="p-form-help-text" id="exampleHelpTextMessage">
+                30 characters or fewer.
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="p-form__group row p-form-validation is-error">
+
+          <div class="col-4">
+            <label for="username-stacked-error" class="p-form__label is-required">Email address</label>
+          </div>
+
+          <div class="col-8">
+            <div class="p-form__control">
+              <input type="text" id="username-stacked-error" class="p-form-validation__input" aria-invalid="true" name="username-stackederror" autocomplete="username" aria-describedby="username-error-message-stacked" required>
+              <p class="p-form-validation__message" id="username-error-message-stacked">This field is required.</p>
+            </div>
+          </div>
+        </div>
+        <div class="p-form__group row">
+
+          <div class="col-4">
+            <label for="address-optional-stacked0" class="p-form__label">Address line 1</label>
+          </div>
+
+          <div class="col-8">
+            <div class="p-form__control">
+              <input type="text" id="address-optional-stacked0" name="address-optional-stacked" autocomplete="address-line1">
+            </div>
+          </div>
+        </div>
+        <div class="p-form__group row">
+
+          <div class="col-4">
+            <label for="address-optional-stacked1" class="p-form__label">Address line 2</label>
+          </div>
+
+          <div class="col-8">
+            <div class="p-form__control">
+              <input type="text" id="address-optional-stacked1" name="address-optional-stacked" autocomplete="address-line3">
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-12">
+            <button class="p-button--positive u-float-right" name="add-details">Add details</button>
+          </div>
+        </div>
+      </form>
+            </div>
+          </div>
+        </aside-->
+
+        <aside class="l-status">
+          <div class="p-panel demo-status">
+            <div class="u-fixed-width">
+              &emsp;<i class="p-icon--success"></i>
+              All servers operationals
+            </div>
+          </div>
+        </aside>
+
+
+      <script>
+      /*
+        Set up event handlers for application layout examples.
+        This is for demo purposes only. Real applications should implement it within their application code.
+      */
+      function setupAppLayoutExamples() {
+        var aside = document.querySelector('.l-aside');
+        var navigation = document.querySelector('.l-navigation');
+
+        var menuToggle = document.querySelector('.js-menu-toggle');
+        var menuClose = document.querySelector('.js-menu-close');
+        var menuPin = document.querySelector('.js-menu-pin');
+        var asideOpen = document.querySelector('.js-aside-open');
+        var asideClose = document.querySelector('.js-aside-close');
+        var asideResize = document.querySelectorAll('.js-aside-resize');
+        var asidePin = document.querySelector('.js-aside-pin');
+
+        if (menuToggle) {
+          menuToggle.addEventListener('click', function () {
+            navigation.classList.toggle('is-collapsed');
+          });
+        }
+
+        if (menuClose) {
+          menuClose.addEventListener('click', function (e) {
+            navigation.classList.add('is-collapsed');
+            document.activeElement.blur();
+          });
+        }
+
+        if (asideOpen) {
+          asideOpen.addEventListener('click', function () {
+            aside.classList.remove('is-collapsed');
+          });
+        }
+
+        if (asideClose) {
+          asideClose.addEventListener('click', function () {
+            aside.classList.add('is-collapsed');
+          });
+        }
+
+        [].slice.call(asideResize).forEach(function (button) {
+          button.addEventListener('click', function () {
+            button.dataset.resizeClass;
+            var panel = document.getElementById(button.getAttribute('aria-controls'));
+            if (panel) {
+              panel.classList.remove('is-narrow');
+              panel.classList.remove('is-medium');
+              panel.classList.remove('is-wide');
+              if (button.dataset.resizeClass) {
+                panel.classList.add(button.dataset.resizeClass);
+              }
+            }
+          });
+        });
+
+        if (menuPin) {
+          menuPin.addEventListener('click', function () {
+            navigation.classList.toggle('is-pinned');
+            if (navigation.classList.contains('is-pinned')) {
+              menuPin.querySelector('i').classList.add('p-icon--close');
+              menuPin.querySelector('i').classList.remove('p-icon--pin');
+            } else {
+              menuPin.querySelector('i').classList.add('p-icon--pin');
+              menuPin.querySelector('i').classList.remove('p-icon--close');
+            }
+            document.activeElement.blur();
+          });
+        }
+
+        if (asidePin) {
+          asidePin.addEventListener('click', function () {
+            aside.classList.toggle('is-pinned');
+            if (aside.classList.contains('is-pinned')) {
+              asidePin.innerText = 'Unpin';
+            } else {
+              asidePin.innerText = 'Pin';
+            }
+          });
+        }
+      }
+
+      setupAppLayoutExamples();
+      </script>
+    <!-- <header id="navigation" class="p-navigation is-dark">
+        <div class="p-navigation__row">
+          <div class="p-navigation__banner">
+            <div class="p-navigation__tagged-logo">
+              <a class="p-navigation__link" href="#">
+                <div class="p-navigation__logo-tag">
+                  <img class="p-navigation__logo-icon" src="https://assets.ubuntu.com/v1/82818827-CoF_white.svg" alt="">
+                </div>
+                <span class="p-navigation__logo-title" id="nav">
+                    Canonical Observability Stack
+                </span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </header>
+    <main class="p-section">
+        <div class="u-fixed-width">
+{% if devices_list %}
+    <h1>Devices list:</h1>
+    <ul class="p-list--divided">
+    {% for device in devices_list %}
+        <li><a href="{% url 'devices:device' device.uid %}">{{ device.uid }}</a></li>
+    {% endfor %}
+    </ul>
+{% else %}
+    <p>No devices are available.</p>
+{% endif %}
+      </div>
+    </main> -->
+  </body>
+</html>
diff --git a/cos_registration_server/devices/templates/devices/devices.html b/cos_registration_server/devices/templates/devices/devices.html
index 39812b7..9fe48f6 100644
--- a/cos_registration_server/devices/templates/devices/devices.html
+++ b/cos_registration_server/devices/templates/devices/devices.html
@@ -20,7 +20,7 @@
               <a class="p-panel__logo" href="#">
                 <!--img class="p-panel__logo-icon" src="https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg" alt="" width="24" height="24">
                 <img class="p-panel__logo-name is-fading-when-collapsed" src="https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg" alt="JAAS" height="16"-->
-                <h4>ROB COS</h4>
+                <h4>COS for devices</h4>
               </a>
               <div class="p-panel__controls">
                 <span class="p-panel__toggle js-menu-toggle">Menu</span>
@@ -36,7 +36,7 @@ <h4>ROB COS</h4>
                 <a class="p-panel__logo" href="#">
                   <!--img class="p-panel__logo-icon" src="https://assets.ubuntu.com/v1/7144ec6d-logo-jaas-icon.svg" alt="" width="24" height="24">
                   <img class="p-panel__logo-name is-fading-when-collapsed" src="https://assets.ubuntu.com/v1/2e04d794-logo-jaas.svg" alt="JAAS" height="16"-->
-                  <h4>ROB COS</h4>
+                  <h4>COS for devices</h4>
                 </a>
                 <div class="p-panel__controls u-hide--large">
                   <button class="p-button--base is-dark has-icon u-no-margin u-hide--medium js-menu-close"><i class="is-light p-icon--close"></i></button>
@@ -57,15 +57,6 @@ <h4>ROB COS</h4>
           <li class="p-side-navigation__item">
             <a class="p-side-navigation__link" href="{% url 'devices:device' device.uid %}"><span class="p-side-navigation__label">{{ device.uid }}</span></a>
           </li>
-          <li class="p-side-navigation__item">
-            <a class="p-side-navigation__link" href="{% url 'devices:device' device.uid %}"><span class="p-side-navigation__label">{{ device.uid }}</span></a>
-          </li>
-          <li class="p-side-navigation__item">
-            <a class="p-side-navigation__link" href="{% url 'devices:device' device.uid %}"><span class="p-side-navigation__label">{{ device.uid }}</span></a>
-          </li>
-          <li class="p-side-navigation__item">
-            <a class="p-side-navigation__link" href="{% url 'devices:device' device.uid %}"><span class="p-side-navigation__label">{{ device.uid }}</span></a>
-          </li>
           {% endfor %}
           </ul>
       {% else %}
@@ -90,7 +81,11 @@ <h4 class="p-panel__title"></h4>
               </div-->
             </div>
             <div class="p-panel__content">
-              <div class="u-fixed-width">
+            <h1>
+              &emsp;<i class="p-icon--success"></i>
+              All servers are operational!
+            </h1>
+              <!--div class="u-fixed-width">
                 <table aria-label="JAAS table example" class="p-main-table">
                   <thead>
                     <tr>
@@ -127,201 +122,10 @@ <h4 class="p-panel__title"></h4>
                       <td class="" data-test-column="controller">JAAS</td>
                       <td class="u-align--right" data-test-column="updated">2020-06-17</td>
                     </tr>
-                    <tr data-test-model-uuid="d291b9ed-1e66-4023-84fe-57130e17a0b2">
-                      <td class="" data-test-column="name">
-                        <div><a href="#/models/gomboli@external/mymodel4">mymodel4</a></div>
-                      </td>
-                      <td class="u-overflow--visible" data-test-column="summary">
-                        <div class="u-flex">
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr3">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>7</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr3">Applications</span>
-                          </div>
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr4">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>11</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr4">Units</span>
-                          </div>
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr5">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>11</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr5">Machines</span>
-                          </div>
-                        </div>
-                      </td>
-                      <td class="" data-test-column="owner"><a href="#_" class="p-link--soft">gomboli</a></td>
-                      <td class="" data-test-column="cloud"><a href="#_" class="p-link--soft">google/us-central1</a></td>
-                      <td class="" data-test-column="credential"><a href="#_" class="p-link--soft">clean-algebra-206308</a></td>
-                      <td class="" data-test-column="controller">JAAS</td>
-                      <td class="u-align--right" data-test-column="updated">2020-06-17</td>
-                    </tr>
-                    <tr data-test-model-uuid="5f612488-b60b-4256-814a-ba1abaa7db23">
-                      <td class="" data-test-column="name">
-                        <div><a href="#/models/gomboli@external/testing">testing</a></div>
-                      </td>
-                      <td class="u-overflow--visible" data-test-column="summary">
-                        <div class="u-flex">
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr6">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>2</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr6">Applications</span>
-                          </div>
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr7">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>2</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr7">Units</span>
-                          </div>
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr8">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>4</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr8">Machines</span>
-                          </div>
-                        </div>
-                      </td>
-                      <td class="" data-test-column="owner"><a href="#_" class="p-link--soft">gomboli</a></td>
-                      <td class="" data-test-column="cloud"><a href="#_" class="p-link--soft">google/europe-west1</a></td>
-                      <td class="" data-test-column="credential"><a href="#_" class="p-link--soft">clean-algebra-206308</a></td>
-                      <td class="" data-test-column="controller">JAAS</td>
-                      <td class="u-align--right" data-test-column="updated">2020-06-17</td>
-                    </tr>
-                  </tbody>
-                </table>
-                <table aria-label="JAAS table example" class="p-main-table">
-                  <thead>
-                    <tr>
-                      <th><span class="status-icon is-alert">Alert (2)</span></th>
-                      <th></th>
-                      <th>Owner</th>
-                      <th>Cloud/Region</th>
-                      <th>Credential</th>
-                      <th>Controller</th>
-                      <th class="u-align--right">Last Updated</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr data-test-model-uuid="e1e81a64-3385-4779-8643-05e3d5ed4523">
-                      <td class="" data-test-column="name">
-                        <div><a href="#/models/gomboli@external/canonical-kubernetes">canonical-kubernetes</a></div>
-                      </td>
-                      <td class="u-overflow--visible" data-test-column="summary">
-                        <div class="u-flex">
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr9">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>6</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr9">Applications</span>
-                          </div>
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr10">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>10</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr10">Units</span>
-                          </div>
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr11">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>10</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr11">Machines</span>
-                          </div>
-                        </div>
-                      </td>
-                      <td class="" data-test-column="owner"><a href="#_" class="p-link--soft">gomboli</a></td>
-                      <td class="" data-test-column="cloud"><a href="#_" class="p-link--soft">google/us-central1</a></td>
-                      <td class="" data-test-column="credential"><a href="#_" class="p-link--soft">clean-algebra-206308</a></td>
-                      <td class="" data-test-column="controller">JAAS</td>
-                      <td class="u-align--right" data-test-column="updated">2020-06-17</td>
-                    </tr>
-                    <tr data-test-model-uuid="7ffe956a-06ac-4ae9-8aac-04eba4a93da5">
-                      <td class="" data-test-column="name">
-                        <div><a href="#/models/gomboli@external/mymodel">mymodel</a></div>
-                      </td>
-                      <td class="u-overflow--visible" data-test-column="summary">
-                        <div class="u-flex">
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr12">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>6</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr12">Applications</span>
-                          </div>
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr13">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>10</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr13">Units</span>
-                          </div>
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr14">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>10</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr14">Machines</span>
-                          </div>
-                        </div>
-                      </td>
-                      <td class="" data-test-column="owner"><a href="#_" class="p-link--soft">gomboli</a></td>
-                      <td class="" data-test-column="cloud"><a href="#_" class="p-link--soft">google/us-east1</a></td>
-                      <td class="" data-test-column="credential"><a href="#_" class="p-link--soft">clean-algebra-206308</a></td>
-                      <td class="" data-test-column="controller">JAAS</td>
-                      <td class="u-align--right" data-test-column="updated">2020-06-17</td>
-                    </tr>
-                  </tbody>
-                </table>
-                <table aria-label="JAAS table example" class="p-main-table">
-                  <thead>
-                    <tr>
-                      <th><span class="status-icon is-running">Running (3)</span></th>
-                      <th></th>
-                      <th>Owner</th>
-                      <th>Cloud/Region</th>
-                      <th>Credential</th>
-                      <th>Controller</th>
-                      <th class="u-align--right">Last Updated</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr data-test-model-uuid="57650e3c-815f-4540-89df-81fd5d70b7ef">
-                      <td class="" data-test-column="name">
-                        <div><a href="#/models/hatch@external/group-test">group-test</a></div>
-                      </td>
-                      <td class="u-overflow--visible" data-test-column="summary">
-                        <div class="u-flex">
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr15">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>9</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr15">Applications</span>
-                          </div>
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr16">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>0</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr16">Units</span>
-                          </div>
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr17">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>0</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr17">Machines</span>
-                          </div>
-                        </div>
-                      </td>
-                      <td class="" data-test-column="owner"><a href="#_" class="p-link--soft">hatch</a></td>
-                      <td class="" data-test-column="cloud"><a href="#_" class="p-link--soft">google/us-central1</a></td>
-                      <td class="" data-test-column="credential"><a href="#_" class="p-link--soft">admin</a></td>
-                      <td class="" data-test-column="controller">JAAS</td>
-                      <td class="u-align--right" data-test-column="updated">2020-06-17</td>
-                    </tr>
-                    <tr data-test-model-uuid="e6782960-fb0b-460e-82a1-64ee03f9a39b">
-                      <td class="" data-test-column="name">
-                        <div><a href="#/models/hatch@external/new-search-aggregate">new-search-aggregate</a></div>
-                      </td>
-                      <td class="u-overflow--visible" data-test-column="summary">
-                        <div class="u-flex">
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr18">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>2</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr18">Applications</span>
-                          </div>
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr19">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>0</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr19">Units</span>
-                          </div>
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr20">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>0</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr20">Machines</span>
-                          </div>
-                        </div>
-                      </td>
-                      <td class="" data-test-column="owner"><a href="#_" class="p-link--soft">hatch</a></td>
-                      <td class="" data-test-column="cloud"><a href="#_" class="p-link--soft">google/us-central1</a></td>
-                      <td class="" data-test-column="credential"><a href="#_" class="p-link--soft">jujuongce</a></td>
-                      <td class="" data-test-column="controller">JAAS</td>
-                      <td class="u-align--right" data-test-column="updated">2020-06-17</td>
-                    </tr>
-                    <tr data-test-model-uuid="930f4bb0-070a-462a-8d4e-19d9772c08f2">
-                      <td class="" data-test-column="name">
-                        <div><a href="#/models/hatch@external/unplaced">unplaced</a></div>
-                      </td>
-                      <td class="u-overflow--visible" data-test-column="summary">
-                        <div class="u-flex">
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr21">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>5</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr21">Applications</span>
-                          </div>
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr22">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>0</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr22">Units</span>
-                          </div>
-                          <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr23">
-                            <div class="has-icon"><i class="p-icon--information"></i><span>0</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr23">Machines</span>
-                          </div>
-                        </div>
-                      </td>
-                      <td class="" data-test-column="owner"><a href="#_" class="p-link--soft">hatch</a></td>
-                      <td class="" data-test-column="cloud"><a href="#_" class="p-link--soft">google/us-central1</a></td>
-                      <td class="" data-test-column="credential"><a href="#_" class="p-link--soft">juju</a></td>
-                      <td class="" data-test-column="controller">JAAS</td>
-                      <td class="u-align--right" data-test-column="updated">2020-06-17</td>
-                    </tr>
                   </tbody>
                 </table>
               </div>
-            </div>
+            </div-->
           </div>
         </main>
 
@@ -409,13 +213,6 @@ <h4 class="p-panel__title">Aside panel</h4>
           </div>
         </aside-->
 
-        <aside class="l-status">
-          <div class="p-panel demo-status">
-            <div class="u-fixed-width">
-              Status bar
-            </div>
-          </div>
-        </aside>
 
       <script>
       /*
@@ -533,4 +330,4 @@ <h1>Devices list:</h1>
       </div>
     </main> -->
   </body>
-</html>
\ No newline at end of file
+</html>

From 44ff014a74926633f6387540f264de933dc30cba Mon Sep 17 00:00:00 2001
From: Guillaumebeuzeboc <guillaume.beuzeboc@gmail.com>
Date: Tue, 26 Aug 2025 11:08:44 +0200
Subject: [PATCH 3/5] wip

---
 .../devices/templates/devices/device.html     | 24 ++++++--
 .../devices/templates/devices/devices.html    | 59 ++++++++++++++-----
 cos_registration_server/devices/views.py      |  1 +
 3 files changed, 63 insertions(+), 21 deletions(-)

diff --git a/cos_registration_server/devices/templates/devices/device.html b/cos_registration_server/devices/templates/devices/device.html
index 75df2d7..3460ab7 100644
--- a/cos_registration_server/devices/templates/devices/device.html
+++ b/cos_registration_server/devices/templates/devices/device.html
@@ -49,7 +49,7 @@ <h4>COS for devices</h4>
         <nav aria-label="Main">
           <ul class="p-side-navigation__list">
             <li class="p-side-navigation__item--title">
-              <a class="p-side-navigation__link" href="#"><span class="p-side-navigation__label">Devices</span></a>
+              <a class="p-side-navigation__link" href="/devices"><span class="p-side-navigation__label">Devices</span></a>
             </li>
 
 {% if devices_list %}
@@ -103,15 +103,29 @@ <h4 class="p-panel__title"></h4>
             </tbody>
           </table>
 
-                 <ul>
+                 <!-- <ul> -->
                  {% for application_link in links_list%}
-                     <li><a href="{{request.scheme}}://{{application_link.main_link}}">{{ application_link.name }}</a>
+                     <div class="u-fixed-width">
+                     <table aria-label="Table with demo content">
+                       <thead>
+                         <tr>
+                           <th><a href="{{request.scheme}}://{{application_link.main_link}}">{{ application_link.name }}</a></th>
+                         </tr>
+                       </thead>
+                         </thead>
+                         <tbody>
+                     <!-- <li><a href="{{request.scheme}}://{{application_link.main_link}}">{{ application_link.name }}</a> -->
                          {% for name, link in application_link.additional_links.items %}
-                             <ul><a href="{{request.scheme}}://{{link}}">{{ name }}</a></ul>
+                             <!-- <ul><a href="{{request.scheme}}://{{link}}">{{ name }}</a></ul> -->
+                           <tr>
+                             <th><a href="{{request.scheme}}://{{link}}">{{ name }}</a></th>
+                           </tr>
                          {% endfor %}
                      </li>
+                      </tbody>
+                      </table>
                  {% endfor %}
-                 </ul>
+                 <!-- </ul> -->
                 <!--table aria-label="JAAS table example" class="p-main-table">
                   <thead>
                     <tr>
diff --git a/cos_registration_server/devices/templates/devices/devices.html b/cos_registration_server/devices/templates/devices/devices.html
index 9fe48f6..81222bd 100644
--- a/cos_registration_server/devices/templates/devices/devices.html
+++ b/cos_registration_server/devices/templates/devices/devices.html
@@ -49,21 +49,21 @@ <h4>COS for devices</h4>
         <nav aria-label="Main">
           <ul class="p-side-navigation__list">
             <li class="p-side-navigation__item--title">
-              <a class="p-side-navigation__link" href="#"><span class="p-side-navigation__label">Devices</span></a>
+              <a class="p-side-navigation__link" href="/devices">
+                  <span class="p-side-navigation__label">Warehouse 1</span>
+                  <span class="p-side-navigation__status">
+                    <i class="p-icon--success"></i>
+                  </span>
+              </a>
             </li>
-
-{% if devices_list %}
-          {% for device in devices_list %}
-          <li class="p-side-navigation__item">
-            <a class="p-side-navigation__link" href="{% url 'devices:device' device.uid %}"><span class="p-side-navigation__label">{{ device.uid }}</span></a>
-          </li>
-          {% endfor %}
-          </ul>
-      {% else %}
           <li class="p-side-navigation__item">
-            <span class="p-side-navigation__text"><span class="p-side-navigation__label">No devices are available.</span></span>
+            <a class="p-side-navigation__link" href="/devices">
+                <span class="p-side-navigation__label">Warehouse 2</span>
+                  <span class="p-side-navigation__status">
+                    <i class="p-icon--warning"></i>
+                  </span>
+            </a>
           </li>
-      {% endif %}
           </ul>
         </nav>
         </div>
@@ -81,10 +81,29 @@ <h4 class="p-panel__title"></h4>
               </div-->
             </div>
             <div class="p-panel__content">
-            <h1>
-              &emsp;<i class="p-icon--success"></i>
-              All servers are operational!
-            </h1>
+              <div class="u-fixed-width">
+                <table aria-label="JAAS table example" class="p-main-table">
+            <thead>
+              <tr>
+                <th class="p-table__cell--icon-placeholder p-table__colump--ip"><span class="p-icon status-icon uuid">UUID</span></th>
+                <th>IP</th>
+                <th>Status</th>
+                <th>Created</th>
+                <th class="u-align--right">Last Updated</th>
+              </tr>
+            </thead>
+          {% for device in devices_list %}
+            <tbody>
+              <tr style="background: rgba(0,0,0, 0.1)" data-test-model-uuid="2f995dee-392e-4459-8eb9-839c501590af">
+                    <td class="" data-test-column="uuid"><a href="/devices/{{device.uid}}" class="u-truncate p-link--soft">{{device.uid}}</a></td>
+                <td class="" data-test-column="IP"><a href="#_" class="u-truncate p-link--soft">{{device.address}}</a></td>
+                <td class="" data-test-column="Status"><a href="#_" class="u-truncate p-link--soft"><i class="p-icon--success"></i></a></td>
+                <td class="" data-test-column="Created"><a href="#_" class="u-truncate p-link--soft">{{device.creation_date}}</a></td>
+                <td class="u-align--right" data-test-column="updated">September 17, 2025, 3:15 a.m.</td>
+              </tr>
+            </tbody>
+          {% endfor %}
+          </table>
               <!--div class="u-fixed-width">
                 <table aria-label="JAAS table example" class="p-main-table">
                   <thead>
@@ -213,6 +232,14 @@ <h4 class="p-panel__title">Aside panel</h4>
           </div>
         </aside-->
 
+        <aside class="l-status">
+          <div class="p-panel demo-status">
+            <div class="u-fixed-width">
+              &emsp;<i class="p-icon--success"></i>
+              All servers operationals
+            </div>
+          </div>
+        </aside>
 
       <script>
       /*
diff --git a/cos_registration_server/devices/views.py b/cos_registration_server/devices/views.py
index b293b1d..c663ba1 100644
--- a/cos_registration_server/devices/views.py
+++ b/cos_registration_server/devices/views.py
@@ -109,6 +109,7 @@ def __init__(
     )
     links.append(ApplicationLinks("Bag files", bag_files))
     context = {
+        "devices_list": Device.objects.all(),
         "device": device,
         "links_list": links,
     }

From dca9be67887f7f06c927c6de54ad58afe9a6be26 Mon Sep 17 00:00:00 2001
From: Guillaumebeuzeboc <guillaume.beuzeboc@gmail.com>
Date: Tue, 26 Aug 2025 12:03:32 +0200
Subject: [PATCH 4/5] wip

---
 .../devices/templates/devices/device.html      | 18 ++++++++++++++++++
 cos_registration_server/devices/views.py       |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/cos_registration_server/devices/templates/devices/device.html b/cos_registration_server/devices/templates/devices/device.html
index 3460ab7..a5f97a5 100644
--- a/cos_registration_server/devices/templates/devices/device.html
+++ b/cos_registration_server/devices/templates/devices/device.html
@@ -47,6 +47,24 @@ <h4>COS for devices</h4>
 
       <div class="p-side-navigation--icons" id="drawer-icons">
         <nav aria-label="Main">
+          <ul class="p-side-navigation__list">
+            <li class="p-side-navigation__item--title">
+              <a class="p-side-navigation__link" href="/devices">
+                  <span class="p-side-navigation__label">Warehouse 1</span>
+                  <span class="p-side-navigation__status">
+                    <i class="p-icon--success"></i>
+                  </span>
+              </a>
+            </li>
+          <li class="p-side-navigation__item">
+            <a class="p-side-navigation__link" href="/devices">
+                <span class="p-side-navigation__label">Warehouse 2</span>
+                  <span class="p-side-navigation__status">
+                    <i class="p-icon--warning"></i>
+                  </span>
+            </a>
+          </li>
+          </ul>
           <ul class="p-side-navigation__list">
             <li class="p-side-navigation__item--title">
               <a class="p-side-navigation__link" href="/devices"><span class="p-side-navigation__label">Devices</span></a>
diff --git a/cos_registration_server/devices/views.py b/cos_registration_server/devices/views.py
index c7bca92..321ffc7 100644
--- a/cos_registration_server/devices/views.py
+++ b/cos_registration_server/devices/views.py
@@ -16,7 +16,7 @@ class devices(generic.ListView):  # type: ignore[type-arg]
 
     template_name = "devices/devices.html"
     context_object_name = "devices_list"
-    paginate_by = 25
+    paginate_by = 11
 
     def get_queryset(self) -> Any:
         """Return all devices on GET."""

From 31e40b597d4883082f4a87e6809e4a42b2d3e08b Mon Sep 17 00:00:00 2001
From: Guillaumebeuzeboc <guillaume.beuzeboc@gmail.com>
Date: Tue, 26 Aug 2025 19:12:01 +0200
Subject: [PATCH 5/5] wip

---
 .../devices/templates/devices/device.html                   | 6 +++---
 .../devices/templates/devices/devices.html                  | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/cos_registration_server/devices/templates/devices/device.html b/cos_registration_server/devices/templates/devices/device.html
index a5f97a5..35cfe1d 100644
--- a/cos_registration_server/devices/templates/devices/device.html
+++ b/cos_registration_server/devices/templates/devices/device.html
@@ -49,7 +49,7 @@ <h4>COS for devices</h4>
         <nav aria-label="Main">
           <ul class="p-side-navigation__list">
             <li class="p-side-navigation__item--title">
-              <a class="p-side-navigation__link" href="/devices">
+              <a class="p-side-navigation__link" href="../../devices">
                   <span class="p-side-navigation__label">Warehouse 1</span>
                   <span class="p-side-navigation__status">
                     <i class="p-icon--success"></i>
@@ -57,7 +57,7 @@ <h4>COS for devices</h4>
               </a>
             </li>
           <li class="p-side-navigation__item">
-            <a class="p-side-navigation__link" href="/devices">
+            <a class="p-side-navigation__link" href="../../devices">
                 <span class="p-side-navigation__label">Warehouse 2</span>
                   <span class="p-side-navigation__status">
                     <i class="p-icon--warning"></i>
@@ -67,7 +67,7 @@ <h4>COS for devices</h4>
           </ul>
           <ul class="p-side-navigation__list">
             <li class="p-side-navigation__item--title">
-              <a class="p-side-navigation__link" href="/devices"><span class="p-side-navigation__label">Devices</span></a>
+              <a class="p-side-navigation__link" href="../../devices"><span class="p-side-navigation__label">Devices</span></a>
             </li>
 
 {% if devices_list %}
diff --git a/cos_registration_server/devices/templates/devices/devices.html b/cos_registration_server/devices/templates/devices/devices.html
index 5e01085..3bbb015 100644
--- a/cos_registration_server/devices/templates/devices/devices.html
+++ b/cos_registration_server/devices/templates/devices/devices.html
@@ -49,7 +49,7 @@ <h4>COS for devices</h4>
         <nav aria-label="Main">
           <ul class="p-side-navigation__list">
             <li class="p-side-navigation__item--title">
-              <a class="p-side-navigation__link" href="/devices">
+              <a class="p-side-navigation__link" href="../devices">
                   <span class="p-side-navigation__label">Warehouse 1</span>
                   <span class="p-side-navigation__status">
                     <i class="p-icon--success"></i>
@@ -57,7 +57,7 @@ <h4>COS for devices</h4>
               </a>
             </li>
           <li class="p-side-navigation__item">
-            <a class="p-side-navigation__link" href="/devices">
+            <a class="p-side-navigation__link" href="../devices">
                 <span class="p-side-navigation__label">Warehouse 2</span>
                   <span class="p-side-navigation__status">
                     <i class="p-icon--warning"></i>
@@ -95,7 +95,7 @@ <h4 class="p-panel__title"></h4>
           {% for device in devices_list %}
             <tbody>
               <tr style="background: rgba(0,0,0, 0.1)" data-test-model-uuid="2f995dee-392e-4459-8eb9-839c501590af">
-                    <td class="" data-test-column="uuid"><a href="/devices/{{device.uid}}" class="u-truncate p-link--soft">{{device.uid}}</a></td>
+                <td class="" data-test-column="uuid"><a href="../devices/{{device.uid}}" class="u-truncate p-link--soft">{{device.uid}}</a></td>
                 <td class="" data-test-column="IP"><a href="#_" class="u-truncate p-link--soft">{{device.address}}</a></td>
                 <td class="" data-test-column="Status"><a href="#_" class="u-truncate p-link--soft"><i class="p-icon--success"></i></a></td>
                 <td class="" data-test-column="Created"><a href="#_" class="u-truncate p-link--soft">{{device.creation_date}}</a></td>

Blocked (3)		Owner	Cloud/Region	Credential	Controller	Last Updated
+ hadoopspark +	+ + + 11 + + + 10 + + + 6 + + +	gomboli	google/us-east1	Algebra-json	JAAS	2020-06-17
+ mymodel4 +	+ + + 7 + + + 11 + + + 11 + + +	gomboli	google/us-central1	clean-algebra-206308	JAAS	2020-06-17
+ testing +	+ + + 2 + + + 2 + + + 4 + + +	gomboli	google/europe-west1	clean-algebra-206308	JAAS	2020-06-17
Alert (2)		Owner	Cloud/Region	Credential	Controller	Last Updated
+ canonical-kubernetes +	+ + + 6 + + + 10 + + + 10 + + +	gomboli	google/us-central1	clean-algebra-206308	JAAS	2020-06-17
+ mymodel +	+ + + 6 + + + 10 + + + 10 + + +	gomboli	google/us-east1	clean-algebra-206308	JAAS	2020-06-17
Running (3)		Owner	Cloud/Region	Credential	Controller	Last Updated
+ group-test +	+ + + 9 + + + 0 + + + 0 + + +	hatch	google/us-central1	admin	JAAS	2020-06-17
+ new-search-aggregate +	+ + + 2 + + + 0 + + + 0 + + +	hatch	google/us-central1	jujuongce	JAAS	2020-06-17
+ unplaced +	+ + + 5 + + + 0 + + + 0 + + +	hatch	google/us-central1	juju	JAAS	2020-06-17