```

✨ feat(dashboard): Ajoute affichage des serveurs Google Compute et OVH.
Ajoute le script mqtt et la class ServerCard pour afficher le status serveur.
```

assets/admin.js

@@ -30,6 +30,9 @@ function script() {
 }
 
 function full() {
+
+
+
     const sidebar = document.getElementById('sidebar');
     const sidebarToggle = document.getElementById('sidebar-toggle');
 

assets/class/ServerCard.js

@@ -13,7 +13,64 @@ export class ServerCard extends HTMLDivElement{
         this.update()
     }
     update() {
-        fetch("/api-interne/server/"+this.getAttribute('id')).then(e=>e.json()).then((rslt)=>{
+        let mqttClient =  mqtt.connect('wss://wsmqtt.esy-web.dev');
+        mqttClient.on("connect", () => {
+            mqttClient.subscribe('server/'+this.getAttribute('id')+'/metric')
+            mqttClient.subscribe('server/'+this.getAttribute('id')+'/online')
+        });
+
+        mqttClient.on("message", (topic, message) => {
+            if(topic == "server/"+this.getAttribute('id')+"/online") {
+                let json = JSON.parse(message.toString());
+                if(json.status) {
+                    this.s.classList = "s font-semibold bg-RUNNING";
+                    this.s.innerText = "RUNNING";
+                } else {
+                    this.s.classList = "s font-semibold bg-STOPPED";
+                    this.s.innerText = "STOPPED";
+                }
+            }
+            if(topic == "server/"+this.getAttribute('id')+"/metric") {
+                let json = JSON.parse(message.toString());
+                this.cpu.querySelector('.p').innerText = json.cpu + "%";
+                this.cpu.querySelector('.gauge >div').style.width = json.cpu + "%";
+
+                if (json.cpu <= 70) {
+                    this.cpu.querySelector('.gauge >div').classList = "bg-green-500 h-2 rounded-l-full";
+                }
+                if (json.cpu>=71 && json.cpu <=90) {
+                    this.cpu.querySelector('.gauge >div').classList = "bg-orange-500 h-2 rounded-l-full";
+                }
+                if (json.cpu>=91) {
+                    this.cpu.querySelector('.gauge >div').classList = "bg-red-500 h-2 rounded-l-full";
+                }
+                this.ram.querySelector('.p').innerText = json.memory + "%";
+                this.ram.querySelector('.gauge >div').style.width = json.memory + "%";
+
+                if (json.memory <= 70) {
+                    this.ram.querySelector('.gauge >div').classList = "bg-green-500 h-2 rounded-l-full";
+                }
+                if (json.memory>=71 && json.memory <=90) {
+                    this.ram.querySelector('.gauge >div').classList = "bg-orange-500 h-2 rounded-l-full";
+                }
+                if (json.ram>=91) {
+                    this.ram.querySelector('.gauge >div').classList = "bg-red-500 h-2 rounded-l-full";
+                }
+                this.hdd.querySelector('.p').innerText = json.disk + "%";
+                this.hdd.querySelector('.gauge >div').style.width = json.disk + "%";
+
+                if (json.disk <= 70) {
+                    this.hdd.querySelector('.gauge >div').classList = "bg-green-500 h-2 rounded-l-full";
+                }
+                if (json.disk>=71 && json.disk <=90) {
+                    this.hdd.querySelector('.gauge >div').classList = "bg-orange-500 h-2 rounded-l-full";
+                }
+                if (json.disk>=91) {
+                    this.hdd.querySelector('.gauge >div').classList = "bg-red-500 h-2 rounded-l-full";
+                }
+            }
+        });
+        /*fetch("/api-interne/server/"+this.getAttribute('id')).then(e=>e.json()).then((rslt)=>{
             this.s.classList = "s font-semibold bg-"+rslt.status;
             this.s.innerText = rslt.status;
 
@@ -28,6 +85,6 @@ export class ServerCard extends HTMLDivElement{
             this.hdd.querySelector('.p').innerText  = rslt.hdd+"%";
             this.hdd.querySelector('.gauge >div').style.width = rslt.hdd+"%";
             this.hdd.querySelector('.gauge >div').classList = "bg-"+rslt.hdd_color+"-500 h-2 rounded-l-full";
-        })
+        })*/
     }
 }

src/Controller/Artemis/DashboardController.php

@@ -4,10 +4,13 @@ namespace App\Controller\Artemis;
 
 use App\Entity\Customer;
 use App\Entity\CustomerAdvertPayment;
+use App\Repository\ComputeRepository;
 use App\Repository\CustomerAdvertPaymentRepository;
 use App\Repository\CustomerDevisRepository;
 use App\Repository\CustomerOrderRepository;
 use App\Service\Docuseal\SignClient;
+use App\Service\Google\ComputeEngineClient;
+use App\Service\Ovh\Client;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\RequestStack;
@@ -22,6 +25,9 @@ class DashboardController extends AbstractController
                             CustomerOrderRepository $customerOrderRepository,
                             CustomerAdvertPaymentRepository $customerAdvertPaymentRepository,
                             CustomerDevisRepository $customerDevisRepository,
+                            ComputeRepository $computeRepository,
+                            ComputeEngineClient $computeEngineClient,
+                            Client $client,
                             SignClient $signClient,
                             UploaderHelper $uploaderHelper,
     ): Response
@@ -96,7 +102,13 @@ class DashboardController extends AbstractController
                 ];
             }
         } else {
-
+            $servers = [];
+            foreach ($computeEngineClient->list() as $instance) {
+                $servers[] = $computeEngineClient->detail($instance);
+            }
+            foreach ($client->servers() as $instance) {
+                $servers[] = $client->detail($instance);
+            }
         }
 
 

templates/artemis/base.twig

@@ -299,5 +299,7 @@
 <security-wall></security-wall>
 {#<ip-wall></ip-wall>#}
 <lockdown-wall></lockdown-wall>
+
+<script src="{{ asset('libs/mqtt.min.js') }}"></script>
 </body>
 </html>

templates/artemis/dashboard.twig

@@ -213,35 +213,12 @@
 
             <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
 
+                {% for server in servers %}
                 <div class="flex flex-col items-center p-3 rounded-lg shadow-md bg-white dark:bg-gray-800 border-l-4 border-green-500">
-                    <span class="text-sm font-semibold text-gray-900 dark:text-white truncate w-full text-center">WEB-PROD-01</span>
-                    <span class="mt-1 px-2 text-xs font-bold text-white bg-green-500 rounded">OK</span>
-                </div>
-
-                <div class="flex flex-col items-center p-3 rounded-lg shadow-md bg-white dark:bg-gray-800 border-l-4 border-yellow-500">
-                    <span class="text-sm font-semibold text-gray-900 dark:text-white truncate w-full text-center">DB-MAIN-02</span>
-                    <span class="mt-1 px-2 text-xs font-bold text-gray-900 bg-yellow-500 rounded">ALERTE</span>
-                </div>
-
-                <div class="flex flex-col items-center p-3 rounded-lg shadow-md bg-white dark:bg-gray-800 border-l-4 border-red-500">
-                    <span class="text-sm font-semibold text-gray-900 dark:text-white truncate w-full text-center">STAGING-03</span>
-                    <span class="mt-1 px-2 text-xs font-bold text-white bg-red-500 rounded">DOWN</span>
-                </div>
-
-                <div class="flex flex-col items-center p-3 rounded-lg shadow-md bg-white dark:bg-gray-800 border-l-4 border-green-500">
-                    <span class="text-sm font-semibold text-gray-900 dark:text-white truncate w-full text-center">MAIL-04</span>
-                    <span class="mt-1 px-2 text-xs font-bold text-white bg-green-500 rounded">OK</span>
-                </div>
-
-                <div class="flex flex-col items-center p-3 rounded-lg shadow-md bg-white dark:bg-gray-800 border-l-4 border-orange-500">
-                    <span class="text-sm font-semibold text-gray-900 dark:text-white truncate w-full text-center">BACKUP-05</span>
-                    <span class="mt-1 px-2 text-xs font-bold text-white bg-orange-500 rounded">LATENCE</span>
-                </div>
-
-                <div class="flex flex-col items-center p-3 rounded-lg shadow-md bg-white dark:bg-gray-800 border-l-4 border-green-500">
-                    <span class="text-sm font-semibold text-gray-900 dark:text-white truncate w-full text-center">DEV-TEST</span>
-                    <span class="mt-1 px-2 text-xs font-bold text-white bg-green-500 rounded">OK</span>
+                    <span class="text-sm font-semibold text-gray-900 dark:text-white truncate w-full text-center">{{ server.name }}</span>
+                    <span class="mt-1 px-2 text-xs font-bold text-white bg-{% if server.status == "RUNNING" %}green{% else %}red{% endif %}-500 rounded">{% if server.status == "RUNNING" %}OK{% else %}DOWN{% endif %}</span>
                 </div>
+                {% endfor %}
 
             </div>