c6a2510db8
✨ feat(Website): Crée une clé API et DNS principal lors de la création. 🔒 fix(ApiSubscriber): Valide le header EsyWebDns pour l'accès API. ✨ feat(ServerCard): Met à jour l'affichage des métriques serveur. ✨ feat(StatusController): Ajoute un endpoint pour vérifier l'état du site. 🐛 fix(CustomerController): Corrige une faute de frappe dans un flash message.
76 lines
3.3 KiB
JavaScript
76 lines
3.3 KiB
JavaScript
export class ServerCard extends HTMLDivElement{
|
|
connectedCallback() {
|
|
let element = this;
|
|
|
|
this.s = element.querySelector('.s');
|
|
this.cpu = element.querySelector('.cpu');
|
|
this.ram = element.querySelector('.ram');
|
|
this.hdd = element.querySelector('.hdd');
|
|
|
|
setInterval(()=>{
|
|
this.update()
|
|
},5000)
|
|
this.update()
|
|
}
|
|
update() {
|
|
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") {
|
|
console.log(topic,message.toString());
|
|
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";
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|