Skip to content

Fukász Rómeó Ervin / cloud

Go to a project
Switch branch/tag
Find file
Normal viewHistoryPermalink
stat.html 2.52 KB
Newer Older
webui: Added base statistics
696d4d85
 
tarokkk committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 
{% load l10n %}
<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data_cpu = new google.visualization.DataTable();
        data_cpu.addColumn('string', 'Topping');
        data_cpu.addColumn('number', 'Slices');
        data_cpu.addRows([
          ['Free CPU', {{STAT.CPU.FREE_CPU}}],
          ['Allocated CPU', {{STAT.CPU.ALLOC_CPU}}],
          ['Used CPU', {{STAT.CPU.USED_CPU}}],
        ]);

        // Set chart options
        var cpu_options = {'title':'Cloud CPU usage percent (100/CPU)',
                       'width':400,
                       'height':300,
                       slices: {0: {color: 'blue'}, 1:{color: 'orange'},
                           2:{color: 'red'}}
                        };

        var data_mem = new google.visualization.DataTable();
        data_mem.addColumn('string', 'Topping');
        data_mem.addColumn('number', 'Slices');
        data_mem.addRows([
          ['Free Memory', {{STAT.MEM.FREE_MEM|unlocalize}}],
          ['Allocated Memory', {{STAT.MEM.ALLOC_MEM|unlocalize}}],
          ['Used Memory', {{STAT.MEM.USED_MEM|unlocalize}}],
        ]);

        // Set chart options
        var mem_options = {'title':'Cloud Memory usage in {{STAT.DIMENSION}}',
                       'width':400,
                       'height':300,
                       slices: {0: {color: 'blue'}, 1:{color: 'orange'},
                           2:{color: 'red'}}
        };
        // Instantiate and draw our chart, passing in some options.
        var chart = new
            google.visualization.PieChart(document.getElementById('chart_cpu_div'));
        chart.draw(data_cpu, cpu_options);
        var chart = new
            google.visualization.PieChart(document.getElementById('chart_mem_div'));
        chart.draw(data_mem, mem_options);
      }
    </script>
  </head>

  <body>
      <!--Div that will hold the pie chart-->
    <div>Running VMs: {{STAT.VMS}}</div>
    <div id="chart_cpu_div"></div>
    <div id="chart_mem_div"></div>
  </body>
</html>