2013
02.04

Afin d’avoir une vue globale sur les VZ gérées pas OenVZ, et de pouvoir y accéder rapidement, je me suis créé ma propre page WEB pour gérer mes VZ.

Rien à voir avec ovz-web-panel qui offre une interface riche et complète.

Je souhaitais avoir une page simple et avoir les informations essentielles au premier coup d’oeil.

openVz_web
On retrouve dans cette page la liste des VZ avec leur numéro, le nom associé , les boutons status+start/stop , et la récupération de la commande vzctl status machine.

Le principal intérêt est pour les boutons stop/start. Avec Jquery, et du css , on peut faire de joli chose, comme une barre de progression afin de voir l’évolution de l’arrêt/démarrage de la machine.
openVz_web_stopopenVz_web_stop_OK

1. fonctionnement globale sur clic
2. Fonctions javascript
– –2.1 Fonctions ajax
– –2.2 Fonctions startMachine/stopMachine
– –2.3 La fonction progress_bar
3. Fonctions php
 

1. Fonctionnement globale sur clic

Lorsqu’on clique sur le bouton STOP ou START, un javascript fait appel à une fonction ajax(cmd,machine) qui envoie la requête au serveur WEB, affiche la barre de progression, affiche le résultat de la commande puis recharge la page.
 

2. Fonctions javascript

J’utilise différentes fonction javascript avec les outils Ajax et Jquery.
Pour rappel, les fonctions Ajax permettent de faire un requête sur le serveur WEB, et d’attendre le retour de la fonction et de faire des actions en cas de succès ou d’erreurs de la fonction.

 
2.1 Fonctions ajax
La fonction appelée par le clic est ajax( la commande, la machine )
Si la commande est du type stop ou start, on appelle la fonction adéquate, sinon on appelle la fonction javascript getInfo.
Une fois la fonction bien finie ( request.done ) :
– on affiche le résultat de la commande ( $(‘#progress information’).html(msg); )
– si la commande était start ou stop, on actualise la page pour prendre en compte le nouvel état de la machine ( history.go(0) ). sinon on affiche le résultat de la commande dans la barre cible ( $(‘#infoAction’+cible).html(msg); )

Par exemple, en cliquant sur le bouton STOP sur la machine 204, on appelle la fonction ajax(‘vzctl stop 204′,’204′);’

Si la fonction finit mal ( request.fail ) , on affiche une alerte d’erreur.

function ajax(cmd,machine){
var cible = machine;
var requete = cmd;
var request = $.ajax({
  url: "sshServeur.php",
  type: "POST",
  data: {commande : requete },
  dataType: "html",
  beforeSend: function() {
        if(/start/.test(requete)) startMachine(cible);
        else if(/stop/.test(requete)) stopMachine(cible);
        else getInfo(requete,cible);
 },
});
        request.done(function(msg) {
        $(‘#progress strong’).html("100%");
        $(‘#progress progress’).attr(‘value’,100).text("100%");
        $(‘#progress information’).html(msg);
        if(/start|stop/.test(cmd)) history.go(0);
        else{
                getInfo(requete,cible);
                $(‘#infoAction’+cible).html(msg);
                if(cible=="Commande") $(‘#infoAction’+cible+"History").append(cmd+"");
        }
        });
        request.fail(function(jqXHR, textStatus) {
                  alert( "Request " +cmd+" failed: " + textStatus );
        });

}

2.2 Fonctions startMachine/stopMachine
Les fonctions startMachine/stopMachine permettent :
– on supprime le refreshInterval précédent ( raz du compte à rebours javascript )
– on modifie le div qui affiche la progression du process
– on affiche la div ( zindex à 1 = superposition de de la div au reste )
– on appelle la fonction qui crée la barre de progression ( progress_bar ).
Le paramètre passé à la fonction définit le délai de mise à jour ( plus il est grand, plus la progression est lente ).

function startMachine(machine){
        clearInterval(refreshIntervalId);
        $(‘#progress commande’).html("Machine "+machine+" demarrage … ");
        document.getElementById(‘progress’).style.zIndex=1;
        var refreshIntervalId=setInterval(function(){ progress_bar(refreshIntervalId); },20);
}

 
2.3 La fonction progress_bar
La fonction progress_bar permet d’afficher une barre de chargement et d’afficher le résultat de la commande une fois finie. Elle a en paramètre l’id du setInterval afin de l’arrêter via clearInterval(id_interval);.
Pour le css, vous trouverez en fin de le lien vers la source.

function progress_bar(id_interval){
   var val=$(‘#progress progress’).attr(‘value’);
   var newVal = val*1+0.25;
   var txt = Math.floor(newVal)+‘%’;
   if(val>=100){
        $(‘#progress strong’).html("100%");
        setTimeout(function(){
                document.getElementById(‘progress’).style.zIndex=-1;
        $(‘#progress progress’).attr(‘value’,0).text("0%");
        $(‘#progress strong’).html("0%");
        $(‘#progress information’).html("");
        },2000);
        clearInterval(id_interval);
          return;
        }
   $(‘#progress progress’).attr(‘value’,newVal).text(txt);
   $(‘#progress strong’).html(txt);
}

En fait la fonction est récursive, et dès que la valeur val est >= 100, on affiche le résultat, on supprime l’appel à la fonction récursive ( clearInterval ).

Ma div progress se présente ainsi

<div id="progress" style="z-index:-1">
   <p><commande>Retrieving data</commande>…<strong>0%</strong></p>
   <progress value="0" min="0" max="100">0%</progress>
        <br/>
        <information></information>
</div>
 

Par défaut elle a un z-index:-1; qui la fait rendre invisible ( en fait caché derrière le reste).
Afin de la rendre joli, lorsqu’on l’affiche, elle est transparente ( voir dans le css background-color:rgba(0,0,0,0.8); ).

 

3. Fonctions php

La fonction ajax appelle le fichier sshServeur sur le serveur. Ce fichier appelle exécute la commande via ssh sur le serveur distant qui est le serveur HOTE des VZ. Afin d’éviter les problèmes de login/mot de passe, le plus simple a été de mettre en place une cle publique/privé sur ces serveurs.Afin de lancer la commande, je passe par la fonction PHP shell_exec.

<?php
$cmd=$_POST[‘commande’];
$retour=shell_exec("ssh root@serveurDistant -C ‘$cmd’");
        echo ‘<pre> $retour \</pre\>;
?>
 

Voici les sites pour l’inspiration
Côté CSS que j’ai pompé grossièrement, le rendu est juste super, et ce site est vraiment bien utile pour ceux qui comme moi n’ont pas la fibre graphique 🙂
Côté AJAX parce que ajax + jquery , c’est bien pratique

Les fichiers utilisés se trouvent en partage , comme d’habitude.

Aucun commentaire.

Ajoutez votre commentaire

%d blogueurs aiment cette page :