update cluster load display

lambdainst/views.py

@@ -1,3 +1,4 @@
+from math import ceil
 import base64
 import hmac
 from datetime import datetime, timedelta
@@ -41,7 +42,7 @@ def get_locations():
         code = loc['country_code'].upper()
         loc['country_name'] = countries_d.get(code, code)
 
-        loc['load_percent'] = (loc['usage'].get('net', 0) / (loc['bandwidth'] / 1e6)) * 100
+        loc['load_percent'] = ceil((loc['usage'].get('net', 0) / (loc['bandwidth'] / 1e6)) * 100)
     return locations
 
 

static/css/style.css

@@ -888,6 +888,29 @@ a.home-signup-button {
     text-align: right;
 }
 
+.bandwidth {
+    display: block;
+    position: relative;
+    width: 100%;
+    border: 1px solid #666;
+    background: #eee;
+    text-align: center;
+}
+.bandwidth .inner {
+    position: absolute;
+    top: 0; left: 0; bottom: 0;
+    background-color: #BCC8D1;
+    z-index: 100;
+}
+.bandwidth .inner.high {
+    background-color: #D1B2B2;
+}
+.bandwidth .label {
+    position: relative;
+    z-index: 200;
+}
+
+
 
 /***************************************************/
 /********************* WireGuard                   */

templates/lambdainst/status.html

@@ -12,7 +12,6 @@
         <thead>
             <tr><td>{% trans 'Location' %}</td>
                 <td>{% trans 'Hostname' %}</td>
-                <td>{% trans 'Servers' %}</td>
                 <td>{% trans 'Load' %}</td>
             </tr>
         </thead>
@@ -22,11 +21,15 @@
                     <td class="left host_line">
                         <span class="host_name">{{ d.hostname }}</span>
                     </td>
-                    <td class="right">{{ d.servers|length }}</td>
                     <td class="right">
-                        {{ d.load_percent|floatformat:1 }}%
-                        of
-                        {{ d.bandwidth|bwformat }}
+                        <span class="bandwidth">
+                            <span class="inner {% if d.load_percent > 75 %}high{% endif %}" style="width: {{d.load_percent}}%"></span>
+                            <span class="label">
+                                {{ d.load_percent }}%
+                                of
+                                {{ d.bandwidth|bwformat }}
+                            </span>
+                        </span>
                     </td>
                 </tr>
             {% endfor %}