Création d'un Tableau de bord dynamique ======================================= ![category](web) ![tag](angularjs) ![tag](design) Il est souvent utile de créer un tableau de bord. Un tableau de bord est souvent une somme de petit graphique qui sont mis à jours dynamiquement. Pour expliciter la mise en place d'un tableau de bord nous allons créer un tableau de bord autour du suivi d'une machine (cpu, mem, disk) ![201511101035.png](./upload/201511101035.png) Pour cela nous allons créer: - serveur de webservice fournissant les infos cpu, nem, disk - une ihm web utilisant angularjs, angular-chartjs et ngmaterial rafraichissant ces infos Le serveur ---------- Nous allons utilisons Python/Flask et psutil (pour obtenir les infos systèmes) ```bash pip install psutil ``` Notre fichier server.py ```python from flask import Flask from flask import json from flask.ext.cors import CORS import datetime import time import psutil app = Flask(__name__) cors = CORS(app) @app.route('/getinfo', methods = ['GET']) def api_getinfo(): now = datetime.datetime.now() return json.dumps({'timer' :now.strftime("%H:%M:%S"), 'cpu' : psutil.cpu_percent(), 'mem' : psutil.virtual_memory().percent, 'disk1' : psutil.disk_usage('/').percent, 'disk2' : psutil.disk_usage('/media/sdb1').percent}) if __name__ == '__main__': app.run() ``` L'ihm ----- Elle utilise trois fichiers mycss.css ```css .main { min-height:95%; padding: 20px; } ``` index.html ```html Test
``` app.js ```javascript var app = angular.module("MyAppli", ['picardy.fontawesome', 'ngMaterial', 'chart.js']); // add constant app.constant("API_GETINFO", "http://localhost:5000/getinfo"); // add controler app.controller('AppController', function($scope, $http, API_GETINFO, $timeout) { $scope.getInfo = function() { $http.get(API_GETINFO). success(function(data, status, headers, config) { // add info if ( $scope.cnt == 0) { var timer = data.timer; } else { var timer = ""; }; $scope.labels.push(timer); $scope.data[0].push(data.cpu); $scope.data[1].push(data.mem); // del old info $scope.labels.shift(); $scope.data[0].shift(); $scope.data[1].shift(); // maj cnt $scope.cnt = $scope.cnt + 1; if ( $scope.cnt > 9 ) { $scope.cnt = 0; }; $scope.datadisk1 = [100-data.disk1, data.disk1]; $scope.datadisk2 = [100-data.disk2, data.disk2]; }). error(function(data, status, headers, config) { console.log('error'); }); $timeout($scope.getInfo, 1000); } $scope.getInit = function() { // init value $scope.series = ['Cpu', 'Memory']; $scope.labels = []; $scope.data = [[],[], []]; for (var i = 50; i > 0; i--) { $scope.labels.push(''); $scope.data[0].push(''); $scope.data[1].push(''); $scope.data[2].push(100); }; $scope.cnt = 0; $scope.datadisk1 = [0, 0]; $scope.datadisk2 = [0, 0]; $scope.labeldisk = ["Free", "Use"]; $scope.getInfo(); }; // init data $scope.getInit(); }); ``` Explication ----------- Le principe est assez simple: - j'initialise les valeurs - pour les dotnuts: je mets à jours toutes les seconde (1000 ms) les valeurs - pour le graphiques: je prépare un tableau de 50 valeurs, puis toute les seconde je récupère une nouvelle valeur que je place à la fin de mon tableau (push) et je supprime le premier élément (shift)