implemented origins & leases auto refresh button

app/main.py

@@ -76,6 +76,28 @@ def __get_token(request: Request) -> dict:
     return jwt.decode(token=token, key=jwt_decode_key, algorithms=ALGORITHMS.RS256, options={'verify_aud': False})
 
 
+def __json_config() -> dict:
+    return {
+        'VERSION': str(VERSION),
+        'COMMIT': str(COMMIT),
+        'DEBUG': str(DEBUG),
+        'DLS_URL': str(DLS_URL),
+        'DLS_PORT': str(DLS_PORT),
+        'SITE_KEY_XID': str(SITE_KEY_XID),
+        'INSTANCE_REF': str(INSTANCE_REF),
+        'ALLOTMENT_REF': [str(ALLOTMENT_REF)],
+        'TOKEN_EXPIRE_DELTA': str(TOKEN_EXPIRE_DELTA),
+        'LEASE_EXPIRE_DELTA': str(LEASE_EXPIRE_DELTA),
+        'LEASE_RENEWAL_PERIOD': str(LEASE_RENEWAL_PERIOD),
+        'CORS_ORIGINS': str(CORS_ORIGINS),
+        'TZ': str(TZ),
+        # static / calculated
+        'LEASE_RENEWAL_DELTA': str(LEASE_RENEWAL_DELTA),
+        'LEASE_CALCULATED_RENEWAL': str(Lease.calculate_renewal(LEASE_RENEWAL_PERIOD, LEASE_RENEWAL_DELTA)),
+        'CLIENT_TOKEN_EXPIRE_DELTA': str(CLIENT_TOKEN_EXPIRE_DELTA),
+    }
+
+
 @app.get('/', summary='* Index')
 async def index():
     return RedirectResponse('/-/')
@@ -93,21 +115,7 @@ async def _health():
 
 @app.get('/-/config', summary='* Config', description='returns environment variables.')
 async def _config():
-    return JSONr({
-        'VERSION': str(VERSION),
-        'COMMIT': str(COMMIT),
-        'DEBUG': str(DEBUG),
-        'DLS_URL': str(DLS_URL),
-        'DLS_PORT': str(DLS_PORT),
-        'SITE_KEY_XID': str(SITE_KEY_XID),
-        'INSTANCE_REF': str(INSTANCE_REF),
-        'ALLOTMENT_REF': [str(ALLOTMENT_REF)],
-        'TOKEN_EXPIRE_DELTA': str(TOKEN_EXPIRE_DELTA),
-        'LEASE_EXPIRE_DELTA': str(LEASE_EXPIRE_DELTA),
-        'LEASE_RENEWAL_PERIOD': str(LEASE_RENEWAL_PERIOD),
-        'CORS_ORIGINS': str(CORS_ORIGINS),
-        'TZ': str(TZ),
-    })
+    return JSONr(__json_config())
 
 
 @app.get('/-/readme', summary='* Readme')
@@ -115,28 +123,32 @@ async def _readme(request: Request):
     from markdown import markdown
     content = load_file('../README.md').decode('utf-8')
     markdown = markdown(text=content, extensions=['tables', 'fenced_code', 'md_in_html', 'nl2br', 'toc'])
-    context = {'request': request, 'markdown': markdown, 'VERSION': VERSION}
+    context = {'request': request, 'VERSION': VERSION, 'markdown': markdown }
     return templates.TemplateResponse(name='views/dashboard_readme.html', context=context)
 
 
 @app.get('/-/manage', summary='* Management UI')
 async def _manage(request: Request):
-    return templates.TemplateResponse(name='views/manage.html', context={'request': request, 'VERSION': VERSION})
+    context = {'request': request, 'VERSION': VERSION}
+    return templates.TemplateResponse(name='views/manage.html', context=context)
 
 
 @app.get('/-/dashboard', summary='* Dashboard')
 async def _dashboard(request: Request):
-    return templates.TemplateResponse(name='views/dashboard.html', context={'request': request, 'VERSION': VERSION})
+    context = {'request': request, 'VERSION': VERSION, 'CONFIG': __json_config()}
+    return templates.TemplateResponse(name='views/dashboard.html', context=context)
 
 
 @app.get('/-/dashboard/origins', summary='* Dashboard - Origins')
 async def _dashboard_origins(request: Request):
-    return templates.TemplateResponse(name='views/dashboard_origins.html', context={'request': request, 'VERSION': VERSION})
+    context = {'request': request, 'VERSION': VERSION}
+    return templates.TemplateResponse(name='views/dashboard_origins.html', context=context)
 
 
 @app.get('/-/dashboard/leases', summary='* Dashboard - Leases')
 async def _dashboard_origins(request: Request):
-    return templates.TemplateResponse(name='views/dashboard_leases.html', context={'request': request, 'VERSION': VERSION})
+    context = {'request': request, 'VERSION': VERSION}
+    return templates.TemplateResponse(name='views/dashboard_leases.html', context=context)
 
 
 @app.get('/-/origins', summary='* Origins')

app/templates/components/sidebar.html

@@ -8,15 +8,50 @@
             </li>
              <li class="nav-item">
                 <a class="nav-link {{ 'active' if request.url.path == '/-/dashboard/origins' }}" aria-current="page" href="/-/dashboard/origins">
-                    <i class="bi-pc-display-horizontal"></i> Origins
+                    <i class="bi-pc-display-horizontal"></i> Origins <span id="origin-cnt" class="badge text-bg-secondary"></span>
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link {{ 'active' if request.url.path == '/-/dashboard/leases' }}" aria-current="page" href="/-/dashboard/leases">
-                    <i class="bi-layers"></i> Leases
+                    <i class="bi-layers"></i> Leases <span id="lease-cnt" class="badge text-bg-secondary"></span>
                 </a>
             </li>
         </ul>
+        <script type="application/javascript">
+            function loadLOriginCnt() {
+                let xhr = new XMLHttpRequest();
+                xhr.open("GET", '/-/origins?leases=false', true);
+                xhr.onreadystatechange = function () {
+                    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+                        const x = JSON.parse(xhr.response)
+                        document.getElementById('origin-cnt').innerHTML = x.length
+                    }
+                };
+                xhr.send();
+            }
+
+            function loadLeaseCnt() {
+                let xhr = new XMLHttpRequest();
+                xhr.open("GET", '/-/leases?origin=false', true);
+                xhr.onreadystatechange = function () {
+                    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+                        const x = JSON.parse(xhr.response)
+                        document.getElementById('lease-cnt').innerHTML = x.length
+                    }
+                };
+                xhr.send();
+            }
+
+            // load initial
+            loadLOriginCnt()
+            loadLeaseCnt()
+
+            // refresh every 5 seconds
+            setInterval(() => {
+                loadLOriginCnt()
+                loadLeaseCnt()
+            }, 5000);
+        </script>
 
         <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
             <span>Help</span>

app/templates/views/dashboard.html

@@ -29,7 +29,26 @@
         </div>
     </div>
 
-    <pre id="config"></pre>
+    <div class="card mb-4">
+        <div class="card-body">
+            <h5 class="card-title">Configuration</h5>
+            <h6 class="card-subtitle mb-2 text-body-secondary">
+                Using timezone: {{ CONFIG.TZ }}. Make sure this is correct and match your clients!
+            </h6>
+            <p class="card-text">
+                Your clients renew their license every {{ CONFIG.LEASE_CALCULATED_RENEWAL }}.<br/>
+                If the renewal fails, the license is {{ CONFIG.LEASE_RENEWAL_DELTA }} valid.<br/>
+                <br/>
+                Your client-token file (.tok) is valid for {{ CONFIG.CLIENT_TOKEN_EXPIRE_DELTA }}.
+            </p>
+        </div>
+    </div>
+
+    <div class="card">
+        <div class="card-body">
+            <pre id="config"></pre>
+        </div>
+    </div>
 </div>
 {% endblock %}
 

app/templates/views/dashboard_leases.html

@@ -18,9 +18,10 @@
                     </button>
                 </div>
 
-                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="load()" title="refresh">
+                <button type="button" class="btn btn-sm btn-outline-secondary me-2" onclick="load()" title="refresh">
                     <i class="bi bi-arrow-clockwise"></i>
                 </button>
+                <button id="btn-auto-refresh" type="button" class="btn btn-sm active">auto-refresh</button>
             </div>
         </div>
 
@@ -31,11 +32,29 @@
 {% block scripts %}
 {{ super() }}
 <script type="application/javascript">
+    let autoRefresh = true
+
     function load() {
         const leases = document.getElementById('leases')
         fetchLeases(leases)
     }
 
     load()
+
+    setInterval(() => {
+        if(autoRefresh)
+            load()
+    }, 5000);
+
+    const btnAutoRefresh = document.getElementById('btn-auto-refresh')
+    btnAutoRefresh.addEventListener("click", () => {
+        if(btnAutoRefresh.classList.contains('active')) {
+            autoRefresh = false
+            btnAutoRefresh.classList.remove('active')
+        } else {
+            autoRefresh = false
+            btnAutoRefresh.classList.add('active')
+        }
+    }, true);
 </script>
 {% endblock %}

app/templates/views/dashboard_origins.html

@@ -21,9 +21,10 @@
                     </button>
                 </div>
 
-                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="load()" title="refresh">
+                <button type="button" class="btn btn-sm btn-outline-secondary me-2" onclick="load()" title="refresh">
                     <i class="bi bi-arrow-clockwise"></i>
                 </button>
+                <button id="btn-auto-refresh" type="button" class="btn btn-sm active">auto-refresh</button>
             </div>
         </div>
 
@@ -34,6 +35,8 @@
 {% block scripts %}
 {{ super() }}
     <script type="application/javascript">
+        let autoRefresh = true
+
         function load() {
             const origins = document.getElementById('origins')
             fetchOriginsWithLeases(origins)
@@ -47,5 +50,21 @@
             if (response)
                 deleteOrigins().finally(() => load())
         }
+
+        setInterval(() => {
+            if(autoRefresh)
+                load()
+        }, 5000);
+
+        const btnAutoRefresh = document.getElementById('btn-auto-refresh')
+        btnAutoRefresh.addEventListener("click", () => {
+            if(btnAutoRefresh.classList.contains('active')) {
+                autoRefresh = false
+                btnAutoRefresh.classList.remove('active')
+            } else {
+                autoRefresh = false
+                btnAutoRefresh.classList.add('active')
+            }
+        }, true);
     </script>
 {% endblock %}