Add multiple servers to the dashboard view

author: Daniel García Moreno <danigm@soleta.eu> 2022-09-14 14:01:18 +0200
committer: Javier Sánchez Parra <jsanchez@soleta.eu> 2022-09-27 09:48:36 +0200
commit: 0c66443db89fec72c5fb2af0588a02695683613c (patch)
tree: bfdf3da7d960b1a17943e689d5b92c0f1b72337b /ogcp
parent: ea182079989407e382917d95cc86c77dbee7bff8 (diff)
8 files changed, 417 insertions, 309 deletions
diff --git a/ogcp/og_server.py b/ogcp/og_server.py
index 0f542ff..38d9a01 100644
--- a/ogcp/og_server.py
+++ b/ogcp/og_server.py
@@ -37,6 +37,11 @@ class OGServer:
                           json=payload)
         return r
 
+    @property
+    def id(self):
+        ip = self.ip.replace('.', '-')
+        return f'server_{ip}_{self.port}'
+
 
 servers = []
 if {'IP', 'PORT', 'API_TOKEN'} <= app.config.keys():
diff --git a/ogcp/static/css/soleta.css b/ogcp/static/css/soleta.css
index beca3a9..5edf03f 100644
--- a/ogcp/static/css/soleta.css
+++ b/ogcp/static/css/soleta.css
@@ -11,19 +11,19 @@ html, body {
     margin: 10px;
 }
 
-.nav {
+.nav.ogcp-nav {
   position: relative;
 }
 
-.nav-item {
+.ogcp-nav .nav-item {
   padding-left: 20px;
   position: relative;
 }
 
-.nav-link {
+.ogcp-nav .nav-link {
   padding: 0;
 }
-.active > .nav-link {
+.ogcp-nav .active > .nav-link {
   font-weight: bold;
   background: slategrey;
   border-radius: 10rem;
diff --git a/ogcp/templates/base.html b/ogcp/templates/base.html
index da5f1db..9d53d5c 100644
--- a/ogcp/templates/base.html
+++ b/ogcp/templates/base.html
@@ -15,7 +15,7 @@
 </head>
 <body>
     <div class="main d-flex flex-column align-items-stretch h-100">
-        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <nav class="ogcp-nav navbar navbar-expand-lg navbar-dark bg-dark">
             <a class="navbar-brand" href="#">OpenGnsys</a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
diff --git a/ogcp/templates/dashboard.html b/ogcp/templates/dashboard.html
index e1d9dc4..38dbafd 100644
--- a/ogcp/templates/dashboard.html
+++ b/ogcp/templates/dashboard.html
@@ -3,310 +3,396 @@
 {% block nav_dashboard %}active{% endblock %}
 
 {% block content %}
+
 <div class="row">
-  <div class="col-{{ colsize }}">
-    <ul class="list-group list-group-horizontal">
-      <li class="list-group-item w-50">
-        {{ _('Date') }}
-      </li>
-      <li class="list-group-item w-50">
-        <p class="card-text">{{ time_dict['now'] }}</p>
-      </li>
-    </ul>
-    <ul class="list-group list-group-horizontal">
-      <li class="list-group-item w-50">
-        {{ _('Uptime') }}
-      </li>
-      <li class="list-group-item w-50">
-        <p class="card-text">{{ time_dict['boot'] }}</p>
-      </li>
-    </ul>
-    <ul class="list-group list-group-horizontal">
-      <li class="list-group-item w-50">
-        {{ _('ogServer uptime') }}
-      </li>
-      <li class="list-group-item w-50">
-        <p class="card-text">{{ time_dict['start'] }}</p>
-      </li>
-    </ul>
-    <ul class="list-group list-group-horizontal">
-      <li class="list-group-item w-50">
-        {{ _('Connected clients (ogClient)') }}
-      </li>
-      <li class="list-group-item w-50">
-        <p class="card-text">{{ clients['clients'] | length }}</p>
-      </li>
-    </ul>
-    <ul class="list-group list-group-horizontal">
-      <li class="list-group-item w-50">
-        {{ _('Number of images') }}
-      </li>
-      <li class="list-group-item w-50">
-        <p class="card-text">{{ images | length }}</p>
-      </li>
-    </ul>
-  </div>
+  <div class="card col-12">
+    <table class="table">
+      <thead>
+        <tr>
+          <th>Server</th>
+          <th>Uptime</th>
+          <th>ogServer uptime</th>
+          <th>Connected clients</th>
+          <th>Number of images</th>
+          <th>Disk</th>
+          <th>Memory</th>
+          <th>Swap</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for id, server in servers.items() %}
+        <tr>
+          <th>{{ server.name }}</th>
+          <td>{{ server.time_dict.boot }}</td>
+          <td>{{ server.time_dict.start }}</td>
+          <td>{{ server.clients | length }}</td>
+          <td>{{ server.images | length }}</td>
+          <td>
+            {% set disk = server.disk %}
+            {% set used = (((disk['total'] - disk['free']) / disk['total']) * 100)|int %}
+            <div class="progress progress-lg">
+              <div class="progress-bar bg-primary" style="width: {{used}}%"></div>
+            </div>
+          </td>
+          <td>
+            {% set memory = server.stats.memory %}
+            {% set used = (((memory['size'] - memory['free']) / memory['size']) * 100)|int %}
+            <div class="progress progress-lg">
+              <div class="progress-bar bg-primary" style="width: {{used}}%"></div>
+            </div>
+          </td>
+          {% set swap = server.stats.swap %}
+          {% if swap.size %}
+            <td>
+              {% set used = (((swap['size'] - swap['free']) / swap['size']) * 100)|int %}
+              <div class="progress progress-lg">
+                <div class="progress-bar bg-primary" style="width: {{used}}%"></div>
+              </div>
+            </td>
+          {% else %}
+            <td>No swap</td>
+          {% endif %}
+        </tr>
+        {% endfor %}
+      </tbody>
 
-  <!-- disk stats -->
-  <div class="col-{{ colsize }}">
-    <div class="card text-center">
-      <div class="card-header">
-        {{ _('Disk stats') }}
-      </div>
-      <div class="card-body">
-        <canvas id="diskChart" class="mb-2"></canvas>
-        <ul class="list-group list-group-horizontal">
-          <li class="list-group-item w-50">
-            {{ _('Disk size') }}
-          </li>
-          <li class="list-group-item w-50">
-            {{ _('used') }} (%)
-          </li>
-          <li class="list-group-item w-50">
-            {{ _('available') }} (%)
-          </li>
-        </ul>
-        <ul class="list-group list-group-horizontal">
-          <li class="list-group-item w-50">
-            {{ disk['total'] // 2**30 }} Gbytes
-          </li>
-          <li class="list-group-item w-50">
-            {{ (disk['total'] - disk['free']) // 2**30 }} Gbytes
-            ({{ (((disk['total'] - disk['free']) / disk['total']) * 100)|int }}%)
-          </li>
-          <li class="list-group-item w-50">
-            {{ disk['free'] // 2**30 }} Gbytes
-            ({{ ((disk['free'] / disk['total']) * 100)|int }}%)
-          </li>
-        </ul>
-      </div>
-    </div>
+    </table>
   </div>
+</div>
 
-  <!-- Memory stats -->
-  <div class="col-{{ colsize }}">
-    <div class="card text-center">
-      <div class="card-header">
-        {{ _('Memory') }}
-      </div>
-      <div class="card-body">
-        <canvas id="memoryChart" class="mb-2"></canvas>
-        <ul class="list-group list-group-horizontal">
-          <li class="list-group-item w-50">
-            {{ _('Memory size') }}
-          </li>
-          <li class="list-group-item w-50">
-            {{ _('used') }} (%)
-          </li>
-          <li class="list-group-item w-50">
-            {{ _('available') }} (%)
-          </li>
-        </ul>
-        <ul class="list-group list-group-horizontal">
-          <li class="list-group-item w-50">
-            {{ (stats['memory']['size'] / 2**30)|round(3) }} Gbytes
-          </li>
-          <li class="list-group-item w-50">
-            {{ ((stats['memory']['size'] - stats['memory']['free']) / 2**30)|round(3) }} Gbytes
-            ({{ (((stats['memory']['size'] - stats['memory']['free']) / stats['memory']['size']) * 100)|int }}%)
-          </li>
-          <li class="list-group-item w-50">
-            {{ (stats['memory']['free'] / 2**30)|round(3) }} Gbytes
-            ({{ ((stats['memory']['free'] / stats['memory']['size']) * 100)|int }}%)
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
+<hr />
 
-  <!-- Swap stats -->
-  <div class="col-{{ colsize }}">
-    <div class="card text-center">
-      <div class="card-header">
-        {{ _('Swap') }}
-      </div>
-      <div class="card-body">
-        {% if stats['swap']['size'] %}
-        <canvas id="swapChart" class="mb-2"></canvas>
-        <ul class="list-group list-group-horizontal">
-          <li class="list-group-item w-50">
-            {{ _('swap size') }}
-          </li>
-          <li class="list-group-item w-50">
-            {{ _('used') }} (%)
-          </li>
-          <li class="list-group-item w-50">
-            {{ _('available') }} (%)
-          </li>
-        </ul>
-        <ul class="list-group list-group-horizontal">
-          <li class="list-group-item w-50">
-            {{ (stats['swap']['size'] / 2**30)|round(3) }} Gbytes
-          </li>
-          <li class="list-group-item w-50">
-            {{ ((stats['swap']['size'] - stats['swap']['free']) / 2**30)|round(3) }} Gbytes
-            ({{ (((stats['swap']['size'] - stats['swap']['free']) / stats['swap']['size']) * 100)|int }}%)
-          </li>
-          <li class="list-group-item w-50">
-            {{ (stats['swap']['free'] / 2**30)|round(3) }} Gbytes
-            ({{ ((stats['swap']['free'] / stats['swap']['size']) * 100)|int }}%)
-          </li>
-        </ul>
-        {% else %}
-        <h2>No swap</h2>
-        {% endif %}
-      </div>
-    </div>
-  </div>
+<ul class="nav nav-tabs" id="serversTab" role="tablist">
+{% for id, server in servers.items() %}
+  <li class="nav-item" role="presentation">
+      <button class="nav-link {% if loop.first %}active{% endif %}" id="{{ id }}-tab" data-toggle="tab" data-target="#{{ id }}" type="button" role="tab" aria-controls="{{ id }}" aria-selected="true">
+        {{ server.name }}
+      </button>
+  </li>
+{% endfor %}
+</ul>
 
-  <!-- latest images -->
-  <div class="col-{{ colsize }}">
-    <div class="card text-center">
-      <div class="card-header">
-        {{ _('Latest images') }}
-      </div>
-        {% for image in images[:10] %}
+<div class="tab-content" id="serversTabContent">
+{% for id, server in servers.items() %}
+    {% set stats = server.stats %}
+    {% set time_dict = server.time_dict %}
+    {% set images = server.images %}
+    {% set disk = server.disk %}
+    {% set oglive_list = server.oglive_list %}
+
+    <div class="tab-pane {% if loop.first %}show active{% endif %}" id="{{ id }}" role="tabpanel">
+      <div class="row">
+        <div class="col-{{ colsize }}">
           <ul class="list-group list-group-horizontal">
             <li class="list-group-item w-50">
-              {{ image['name'] }}
+              {{ _('Date') }}
             </li>
             <li class="list-group-item w-50">
-              {{ image['modified'] }}
+              <p class="card-text">{{ time_dict['now'] }}</p>
             </li>
           </ul>
-        {% endfor %}
-    </div>
-  </div>
+          <ul class="list-group list-group-horizontal">
+            <li class="list-group-item w-50">
+              {{ _('Uptime') }}
+            </li>
+            <li class="list-group-item w-50">
+              <p class="card-text">{{ time_dict['boot'] }}</p>
+            </li>
+          </ul>
+          <ul class="list-group list-group-horizontal">
+            <li class="list-group-item w-50">
+              {{ _('ogServer uptime') }}
+            </li>
+            <li class="list-group-item w-50">
+              <p class="card-text">{{ time_dict['start'] }}</p>
+            </li>
+          </ul>
+          <ul class="list-group list-group-horizontal">
+            <li class="list-group-item w-50">
+              {{ _('Connected clients (ogClient)') }}
+            </li>
+            <li class="list-group-item w-50">
+              <p class="card-text">{{ server.clients | length }}</p>
+            </li>
+          </ul>
+          <ul class="list-group list-group-horizontal">
+            <li class="list-group-item w-50">
+              {{ _('Number of images') }}
+            </li>
+            <li class="list-group-item w-50">
+              <p class="card-text">{{ images | length }}</p>
+            </li>
+          </ul>
+        </div>
+
+        <!-- disk stats -->
+        <div class="col-{{ colsize }}">
+          <div class="card text-center">
+            <div class="card-header">
+              {{ _('Disk stats') }}
+            </div>
+            <div class="card-body">
+              <canvas id="diskChart-{{ id }}" class="mb-2"></canvas>
+              <ul class="list-group list-group-horizontal">
+                <li class="list-group-item w-50">
+                  {{ _('Disk size') }}
+                </li>
+                <li class="list-group-item w-50">
+                  {{ _('used') }} (%)
+                </li>
+                <li class="list-group-item w-50">
+                  {{ _('available') }} (%)
+                </li>
+              </ul>
+              <ul class="list-group list-group-horizontal">
+                <li class="list-group-item w-50">
+                  {{ disk['total'] // 2**30 }} Gbytes
+                </li>
+                <li class="list-group-item w-50">
+                  {{ (disk['total'] - disk['free']) // 2**30 }} Gbytes
+                  ({{ (((disk['total'] - disk['free']) / disk['total']) * 100)|int }}%)
+                </li>
+                <li class="list-group-item w-50">
+                  {{ disk['free'] // 2**30 }} Gbytes
+                  ({{ ((disk['free'] / disk['total']) * 100)|int }}%)
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <!-- Memory stats -->
+        <div class="col-{{ colsize }}">
+          <div class="card text-center">
+            <div class="card-header">
+              {{ _('Memory') }}
+            </div>
+            <div class="card-body">
+              <canvas id="memoryChart-{{ id }}" class="mb-2"></canvas>
+              <ul class="list-group list-group-horizontal">
+                <li class="list-group-item w-50">
+                  {{ _('Memory size') }}
+                </li>
+                <li class="list-group-item w-50">
+                  {{ _('used') }} (%)
+                </li>
+                <li class="list-group-item w-50">
+                  {{ _('available') }} (%)
+                </li>
+              </ul>
+              <ul class="list-group list-group-horizontal">
+                <li class="list-group-item w-50">
+                  {{ (stats['memory']['size'] / 2**30)|round(3) }} Gbytes
+                </li>
+                <li class="list-group-item w-50">
+                  {{ ((stats['memory']['size'] - stats['memory']['free']) / 2**30)|round(3) }} Gbytes
+                  ({{ (((stats['memory']['size'] - stats['memory']['free']) / stats['memory']['size']) * 100)|int }}%)
+                </li>
+                <li class="list-group-item w-50">
+                  {{ (stats['memory']['free'] / 2**30)|round(3) }} Gbytes
+                  ({{ ((stats['memory']['free'] / stats['memory']['size']) * 100)|int }}%)
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <!-- Swap stats -->
+        <div class="col-{{ colsize }}">
+          <div class="card text-center">
+            <div class="card-header">
+              {{ _('Swap') }}
+            </div>
+            <div class="card-body">
+              {% if stats['swap']['size'] %}
+              <canvas id="swapChart-{{ id }}" class="mb-2"></canvas>
+              <ul class="list-group list-group-horizontal">
+                <li class="list-group-item w-50">
+                  {{ _('swap size') }}
+                </li>
+                <li class="list-group-item w-50">
+                  {{ _('used') }} (%)
+                </li>
+                <li class="list-group-item w-50">
+                  {{ _('available') }} (%)
+                </li>
+              </ul>
+              <ul class="list-group list-group-horizontal">
+                <li class="list-group-item w-50">
+                  {{ (stats['swap']['size'] / 2**30)|round(3) }} Gbytes
+                </li>
+                <li class="list-group-item w-50">
+                  {{ ((stats['swap']['size'] - stats['swap']['free']) / 2**30)|round(3) }} Gbytes
+                  ({{ (((stats['swap']['size'] - stats['swap']['free']) / stats['swap']['size']) * 100)|int }}%)
+                </li>
+                <li class="list-group-item w-50">
+                  {{ (stats['swap']['free'] / 2**30)|round(3) }} Gbytes
+                  ({{ ((stats['swap']['free'] / stats['swap']['size']) * 100)|int }}%)
+                </li>
+              </ul>
+              {% else %}
+              <h2>No swap</h2>
+              {% endif %}
+            </div>
+          </div>
+        </div>
 
-  <!-- ogLives -->
-  <div class="col-{{ colsize }}">
-    <div class="card text-center">
-      <div class="card-header">
-        {{ _('ogLive images') }}
+        <!-- latest images -->
+        <div class="col-{{ colsize }}">
+          <div class="card text-center">
+            <div class="card-header">
+              {{ _('Latest images') }}
+            </div>
+              {% for image in images[:10] %}
+                <ul class="list-group list-group-horizontal">
+                  <li class="list-group-item w-50">
+                    {{ image['name'] }}
+                  </li>
+                  <li class="list-group-item w-50">
+                    {{ image['modified'] }}
+                  </li>
+                </ul>
+              {% endfor %}
+          </div>
+        </div>
+
+        <!-- ogLives -->
+        <div class="col-{{ colsize }}">
+          <div class="card text-center">
+            <div class="card-header">
+              {{ _('ogLive images') }}
+            </div>
+              <ul class="list-group">
+                {% for oglive in oglive_list['oglive'] %}
+                  <li class="list-group-item">
+                    {{ oglive['directory'] }}
+                  {% if loop.index0 == oglive_list['default'] %}
+                    ({{ _('default') }})
+                  {% endif %}
+                  </li>
+                {% endfor %}
+              </ul>
+          </div>
+        </div>
       </div>
-        <ul class="list-group">
-          {% for oglive in oglive_list['oglive'] %}
-            <li class="list-group-item">
-              {{ oglive['directory'] }}
-            {% if loop.index0 == oglive_list['default'] %}
-              ({{ _('default') }})
-            {% endif %}
-            </li>
-          {% endfor %}
-        </ul>
     </div>
-  </div>
+{% endfor %}
 </div>
 {% endblock %}
 
 {% block extrabody %}
-<script>
-  const diskChartConfig = {
-    type: 'doughnut',
-    data: {
-      labels: ['Used', 'Available'],
-      datasets: [
-        {
-          label: 'Disk usage',
-          data: [
-            {{ (disk['total'] - disk['free']) // 2**30 }},
-            {{ disk['free'] // 2**30 }},
+{% for id, server in servers.items() %}
+    {% set stats = server.stats %}
+    {% set disk = server.disk %}
+    <script>
+      var diskChartConfig = {
+        type: 'doughnut',
+        data: {
+          labels: ['Used', 'Available'],
+          datasets: [
+            {
+              label: 'Disk usage',
+              data: [
+                {{ (disk['total'] - disk['free']) // 2**30 }},
+                {{ disk['free'] // 2**30 }},
+              ],
+              backgroundColor: [
+                'rgb(255, 99, 132)',
+                'rgb(54, 162, 235)',
+              ],
+            },
           ],
-          backgroundColor: [
-            'rgb(255, 99, 132)',
-            'rgb(54, 162, 235)',
-          ],
-        },
-      ],
-    },
-    options: {
-      responsive: true,
-      plugins: {
-        legend: {
-          position: 'top',
         },
-        title: {
-          display: true,
-          text: 'Chart.js Doughnut Chart'
+        options: {
+          responsive: true,
+          plugins: {
+            legend: {
+              position: 'top',
+            },
+            title: {
+              display: true,
+              text: 'Chart.js Doughnut Chart'
+            },
+          },
         },
-      },
-    },
-  };
-  var diskChart = new Chart(
-    document.getElementById('diskChart'),
-    diskChartConfig,
-  );
-  const memoryChartConfig = {
-    type: 'doughnut',
-    data: {
-      labels: ['Used', 'Available'],
-      datasets: [
-        {
-          label: 'Memory usage',
-          data: [
-            {{ ((stats['memory']['size'] - stats['memory']['free']) / 2**30)|round(3) }},
-            {{ (stats['memory']['free'] / 2**30)|round(3) }},
+      };
+      var diskChart = new Chart(
+        document.getElementById('diskChart-{{ id }}'),
+        diskChartConfig,
+      );
+      var memoryChartConfig = {
+        type: 'doughnut',
+        data: {
+          labels: ['Used', 'Available'],
+          datasets: [
+            {
+              label: 'Memory usage',
+              data: [
+                {{ ((stats['memory']['size'] - stats['memory']['free']) / 2**30)|round(3) }},
+                {{ (stats['memory']['free'] / 2**30)|round(3) }},
+              ],
+              backgroundColor: [
+                'rgb(179, 180, 146)',
+                'rgb(203, 184, 169)',
+              ],
+            },
           ],
-          backgroundColor: [
-            'rgb(179, 180, 146)',
-            'rgb(203, 184, 169)',
-          ],
-        },
-      ],
-    },
-    options: {
-      responsive: true,
-      plugins: {
-        legend: {
-          position: 'top',
         },
-        title: {
-          display: true,
-          text: 'Chart.js Doughnut Chart'
+        options: {
+          responsive: true,
+          plugins: {
+            legend: {
+              position: 'top',
+            },
+            title: {
+              display: true,
+              text: 'Chart.js Doughnut Chart'
+            },
+          },
         },
-      },
-    },
-  };
-  var memoryChart = new Chart(
-    document.getElementById('memoryChart'),
-    memoryChartConfig,
-  );
-  {% if stats['swap']['size'] %}
-  const swapChartConfig = {
-    type: 'doughnut',
-    data: {
-      labels: ['Used', 'Available'],
-      datasets: [
-        {
-          label: 'Swap usage',
-          data: [
-            {{ ((stats['swap']['size'] - stats['swap']['free']) / 2**30)|round(3) }},
-            {{ (stats['swap']['free'] / 2**30)|round(3) }},
+      };
+      var memoryChart = new Chart(
+        document.getElementById('memoryChart-{{ id }}'),
+        memoryChartConfig,
+      );
+      {% if stats['swap']['size'] %}
+      var swapChartConfig = {
+        type: 'doughnut',
+        data: {
+          labels: ['Used', 'Available'],
+          datasets: [
+            {
+              label: 'Swap usage',
+              data: [
+                {{ ((stats['swap']['size'] - stats['swap']['free']) / 2**30)|round(3) }},
+                {{ (stats['swap']['free'] / 2**30)|round(3) }},
+              ],
+              backgroundColor: [
+                'rgb(191, 171, 37)',
+                'rgb(216, 164, 127)',
+              ],
+            },
           ],
-          backgroundColor: [
-            'rgb(191, 171, 37)',
-            'rgb(216, 164, 127)',
-          ],
-        },
-      ],
-    },
-    options: {
-      responsive: true,
-      plugins: {
-        legend: {
-          position: 'top',
         },
-        title: {
-          display: true,
-          text: 'Chart.js Doughnut Chart'
+        options: {
+          responsive: true,
+          plugins: {
+            legend: {
+              position: 'top',
+            },
+            title: {
+              display: true,
+              text: 'Chart.js Doughnut Chart'
+            },
+          },
         },
-      },
-    },
-  };
-  var swapChart = new Chart(
-    document.getElementById('swapChart'),
-    swapChartConfig,
-  );
-  {% endif %}
-</script>
+      };
+      var swapChart = new Chart(
+        document.getElementById('swapChart-{{ id }}'),
+        swapChartConfig,
+      );
+      {% endif %}
+    </script>
+
+{% endfor %}
 {% endblock %}
diff --git a/ogcp/templates/macros.html b/ogcp/templates/macros.html
index ce457ec..4ff8477 100644
--- a/ogcp/templates/macros.html
+++ b/ogcp/templates/macros.html
@@ -1,6 +1,6 @@
 {% macro scopes_tree_collapse(scopes, state='', selection_mode='scopes') -%}
 
-<ul id="scopes" class="nav flex-column nav-pills">
+<ul id="scopes" class="nav ogcp-nav flex-column nav-pills">
   {{ scopes_tree_collapse_level(scopes["scope"], "", state, selection_mode) }}
 </ul>
 <script>
@@ -78,7 +78,7 @@
 <hr><h2>{{_('Selected clients')}}</h2>
 <div class="card">
   <div class="card-body">
-    <ul id="clients-color-legend" class="d-flex flex-wrap justify-content-center nav nav-pills">
+    <ul id="clients-color-legend" class="d-flex flex-wrap justify-content-center nav ogcp-nav nav-pills">
       <li class="nav-item"><i class="nav-icon far fa-circle"></i> {{_('Apagado')}} </li>
       <li class="nav-item"><i class="nav-icon fas fa-circle text-wol"></i> {{_('WoL sent')}} </li>
       <li class="nav-item"><i class="nav-icon fas fa-circle text-warning"></i> ogLive </li>
diff --git a/ogcp/templates/servers.html b/ogcp/templates/servers.html
index 05b7c18..9a466ea 100644
--- a/ogcp/templates/servers.html
+++ b/ogcp/templates/servers.html
@@ -11,7 +11,7 @@
 {% endblock %}
 
 {% block sidebar %}
-    <ul id="servers-list" class="nav flex-column nav-pills">
+    <ul id="servers-list" class="nav ogcp-nav flex-column nav-pills">
         {% for server in servers %}
         {% set server_str = server["ip"] ~ ":" ~ server["port"] %}
             <li class="nav-item">
diff --git a/ogcp/templates/users.html b/ogcp/templates/users.html
index bd8e450..72f23f3 100644
--- a/ogcp/templates/users.html
+++ b/ogcp/templates/users.html
@@ -11,7 +11,7 @@
 {% endblock %}
 
 {% block sidebar %}
-    <ul id="users-list" class="nav flex-column nav-pills">
+    <ul id="users-list" class="nav ogcp-nav flex-column nav-pills">
         {% for user in users %}
             <li id="user-{{ user['USER'] }}" class="nav-item">
                 <input class="form-check-input" type="checkbox" form="usersForm"
diff --git a/ogcp/views.py b/ogcp/views.py
index dc2a3c2..7b6c7ae 100644
--- a/ogcp/views.py
+++ b/ogcp/views.py
@@ -333,28 +333,45 @@ def index():
     if not current_user.is_authenticated:
         return redirect(url_for('login'))
 
-    try:
-        clients = get_clients()
-    except requests.exceptions.RequestException as err:
-        flash(_('ogServer connection failed: {}.').format(err),
-              category='error')
-        logout_user()
-        return redirect(url_for('index'))
-    images_response = g.server.get('/images')
-    images = images_response.json()['images']
-    images.sort(key=image_modified_date_from_str, reverse=True)
-    disk = images_response.json()['disk']
-    oglive_list = g.server.get('/oglive/list').json()
-    stats = g.server.get('/stats').json()
-    timestamp = datetime.datetime.fromtimestamp(stats.get('time').get('now'))
-    now = timestamp.strftime('%Y-%m-%d  %H:%M:%S')
-    boot = display_time(stats.get('time').get('boot'))
-    start = display_time(stats.get('time').get('start'))
-    time_dict = {'now': now, 'boot': boot, 'start': start}
-    return render_template('dashboard.html', clients=clients,
-                           images=images, disk=disk, colsize="6",
-                           oglive_list=oglive_list, stats=stats,
-                           time_dict=time_dict)
+    images_response = multi_request('get', '/images')
+    dashboard_servers = {}
+    for i in images_response:
+        server_name = i['server'].name
+        server_id = i['server'].id
+        images = i['json']['images']
+        images.sort(key=image_modified_date_from_str, reverse=True)
+        disk = i['json']['disk']
+
+        if server_name not in dashboard_servers:
+            dashboard_servers[server_id] = {'name': server_name}
+
+        dashboard_servers[server_id]['images'] = images
+        dashboard_servers[server_id]['disk'] = disk
+
+    oglive_list = multi_request('get', '/oglive/list')
+    for i in oglive_list:
+        server_id = i['server'].id
+        dashboard_servers[server_id]['oglive_list'] = i['json']
+
+    all_stats = multi_request('get', '/stats')
+    for i in all_stats:
+        server_id = i['server'].id
+        stats = i['json']
+        dashboard_servers[server_id]['stats'] = stats
+
+        timestamp = datetime.datetime.fromtimestamp(stats.get('time').get('now'))
+        now = timestamp.strftime('%Y-%m-%d  %H:%M:%S')
+        boot = display_time(stats.get('time').get('boot'))
+        start = display_time(stats.get('time').get('start'))
+        time_dict = {'now': now, 'boot': boot, 'start': start}
+        dashboard_servers[server_id]['time_dict'] = time_dict
+
+    clients_response = multi_request('get', '/clients')
+    for i in clients_response:
+        server_id = i['server'].id
+        dashboard_servers[server_id]['clients'] = i['json']['clients']
+
+    return render_template('dashboard.html', servers=dashboard_servers, colsize="6")
 
 @app.route('/login', methods=['GET', 'POST'])
 def login():
author	Daniel García Moreno <danigm@soleta.eu>	2022-09-14 14:01:18 +0200
committer	Javier Sánchez Parra <jsanchez@soleta.eu>	2022-09-27 09:48:36 +0200
commit	0c66443db89fec72c5fb2af0588a02695683613c (patch)
tree	bfdf3da7d960b1a17943e689d5b92c0f1b72337b /ogcp
parent	ea182079989407e382917d95cc86c77dbee7bff8 (diff)