new servers page

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)

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;
+}
 
 
 /***************************************************/

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>
 

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 %}