From a6d15ac90bf51543dcf71f62c1a8b5053f0484b9 Mon Sep 17 00:00:00 2001
From: alice <alice@packetimpact.net>
Date: Wed, 2 Jun 2021 02:26:05 +0200
Subject: [PATCH] new servers page

---
 lambdainst/views.py              |  9 ++----
 static/css/style.css             | 41 +++++++++++++++-----------
 templates/ccvpn/index.html       |  2 +-
 templates/lambdainst/status.html | 50 +++++++++-----------------------
 4 files changed, 42 insertions(+), 60 deletions(-)

diff --git a/lambdainst/views.py b/lambdainst/views.py
index 508dd9e..075a309 100644
--- a/lambdainst/views.py
+++ b/lambdainst/views.py
@@ -40,6 +40,8 @@ def get_locations():
     for (_), loc in 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
     return locations
 
 
@@ -448,12 +450,7 @@ def status(request):
     locations = get_locations()
 
     ctx = {
-        'title': _("Status"),
-        'n_users': VPNUser.objects.filter(expiration__gte=timezone.now()).count(),
-        'n_sess': django_lcore.count_active_sessions(),
-        'n_gws': sum(len(l['servers']) for cc, l in locations),
-        'n_countries': len(set(cc for cc, l in locations)),
-        'total_bw': sum(l['bandwidth'] for cc, l in locations),
+        'title': _("Servers"),
         'locations': locations,
     }
     return render(request, 'lambdainst/status.html', ctx)
diff --git a/static/css/style.css b/static/css/style.css
index c10030b..7a83dd9 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -11,6 +11,8 @@ html, body {
 body {
     margin: 0 auto;
     background: #eee;
+    display: flex;
+    flex-direction: column;
 }
 
 html, button, input, select, textarea,
@@ -229,12 +231,11 @@ header .site-menu a{
 
 .content {
     padding: 0em 2em 3em 2em;
-    background: #fff;
-    overflow: auto;
-
-    -webkit-box-shadow: -1px 1px 2px -1px rgba(0,0,0,0.53);
-    -moz-box-shadow: -1px 1px 2px -1px rgba(0,0,0,0.53);
-    box-shadow: -1px 1px 2px -1px rgba(0,0,0,0.53);
+    flex-grow: 1;
+    min-height: min-content;
+}
+.content.pure-g {
+    justify-content: center;
 }
 
 .content h1 {
@@ -246,6 +247,12 @@ header .site-menu a{
 .content h2 {
     font-size: 1.5em;
     font-weight: normal;
+
+    font-weight: 400;
+    text-align: center;
+    font-family: 'Arvo', serif;
+    font-size: 1.6em;
+    margin: 1em;
 }
 
 .content h3 {
@@ -816,12 +823,16 @@ a.home-signup-button {
 #gateways table {
     width: 100%;
 }
+#gateways td {
+    padding: 10px;
+}
 #gateways table thead td {
     text-align: center;
     font-size: 1.1em;
-    font-weight: 600;
     border: 1px solid #bbb;
     border-top: 0;
+    color: #1c619a;
+    background: #ddd;
 }
 #gateways table thead tr td:first-child {
     border-left: 0;
@@ -830,11 +841,9 @@ a.home-signup-button {
     border-right: 0;
 }
 #gateways table tbody tr td:first-child {
-    font-size: 1.2em;
     border-left: 0;
 }
 #gateways table tbody tr td {
-    padding: 10px;
     border: 1px solid #bbb;
 }
 #gateways table tbody tr td:first-child {
@@ -849,17 +858,15 @@ a.home-signup-button {
 #gateways table tbody tr:nth-child(even) {
     background: #eee;
 }
-#gateways table tr td:not(:first-child) {
-    width: 20%;
-}
-#gateways table tr td .td-info {
-    display: block;
-    font-size: 0.8em;
-    font-weight: normal;
-}
 #gateways .host_name {
     font-family: monospace;
 }
+#gateways td {
+    white-space: nowrap;
+}
+#gateways .right {
+    text-align: right;
+}
 
 
 /***************************************************/
diff --git a/templates/ccvpn/index.html b/templates/ccvpn/index.html
index 83f7be4..78d6622 100644
--- a/templates/ccvpn/index.html
+++ b/templates/ccvpn/index.html
@@ -57,7 +57,7 @@
         {{gateway_locations|json_script:"locations-data"}}
         <script type="text/javascript" src="{% static 'js/map.js' %}"></script>
         <p class="more">
-            <a href="/servers">more on our infrastructure</a>
+            <a href="/status">more on our infrastructure</a>
         </p>
     </div>
 
diff --git a/templates/lambdainst/status.html b/templates/lambdainst/status.html
index 6d5e673..0ad8b88 100644
--- a/templates/lambdainst/status.html
+++ b/templates/lambdainst/status.html
@@ -4,58 +4,36 @@
 {% load bw %}
 
 {% block content %}
-<div class="content" id="gateways">
-    <h1>{% trans 'Our Servers' %}</h1>
+<div class="pure-g content">
+<div class="pure-u-1 pure-u-xl-2-3" id="gateways">
+    <h2>{% trans 'Our Servers' %}</h2>
 
-    <ul>
-        <li>
-            {% blocktrans trimmed with n_users=n_users %}
-                We have <em>{{ n_users }}</em> active users.
-            {% endblocktrans %}
-            {% blocktrans trimmed with n_sess=n_sess %}
-                <em>{{ n_sess }}</em> are using our VPN right now.
-            {% endblocktrans %}
-        </li>
-        <li>
-            {% blocktrans trimmed with n_gw=n_gw n_countries=n_countries %}
-                They are connected to <em>{{ n_gws }}</em> servers spread across
-                <em>{{ n_countries }}</em> countries to provide a low-latency
-                and secure access anywhere in the world.
-            {% endblocktrans %}
-        </li>
-        <li>
-            {% with total_bw|bwformat as total_bw_f %}
-                {% blocktrans trimmed with total_bw=total_bw_f %}
-                    Our network has a total bandwidth of <em>{{ total_bw }}</em> and
-                    all our servers are DDoS-protected.
-                {% endblocktrans %}
-            {% endwith %}
-        </li>
-    </ul>
-
-    <h2>{% trans 'Locations' %}</h2>
     <table>
         <thead>
             <tr><td>{% trans 'Location' %}</td>
                 <td>{% trans 'Hostname' %}</td>
                 <td>{% trans 'Servers' %}</td>
-                <td>{% trans 'Bandwidth' %}</td>
+                <td>{% trans 'Load' %}</td>
             </tr>
         </thead>
         <tbody>
             {% for country, d in locations %}
-                <tr><td>{{ d.country_name }}</td>
-                    <td class="host_line">
+                <tr><td class="left">{{ d.country_name }}</td>
+                    <td class="left host_line">
                         <span class="host_name">{{ d.hostname }}</span>
                     </td>
-                    <td>{{ d.servers|length }}</td>
-                    <td>{{ d.bandwidth|bwformat }}</td>
+                    <td class="right">{{ d.servers|length }}</td>
+                    <td class="right">
+                        {{ d.load_percent|floatformat:1 }}%
+                        of
+                        {{ d.bandwidth|bwformat }}
+                    </td>
                 </tr>
             {% endfor %}
         </tbody>
     </table>
 </div>
-    <script type="text/javascript" src="/static/ping.js"></script>
-</section>
+</div>
+<script type="text/javascript" src="/static/ping.js"></script>
 
 {% endblock %}