adding networks feature

README.md

@@ -15,7 +15,8 @@ This application is an Add-ons for ISPConfig used for VPS Management (Proxmox)
  - Shutdown
  - Reset
  - Hard Stop (unplug the power)
-
+ - Change network states (enable / disable)
+ 
 - Display :
  - Power status
  - Uptime
@@ -37,6 +38,8 @@ This application is an Add-ons for ISPConfig used for VPS Management (Proxmox)
 
 <img src="/misc/admin_vue_1.png" width="400px">   <img src="/misc/graph_vue_1.png" width="400px">
 
+<img src="/misc/admin_task_history.png" width="400px"> 
+
 ## How To implement this module
 - Create Proxmox user for ISPConfig communication with PVEVMUser right
  - Assign VMs to this user
@@ -46,6 +49,7 @@ This application is an Add-ons for ISPConfig used for VPS Management (Proxmox)
  - $conf["pve_password"] 	= 'password';
  - $conf["pve_link"] 		= 'hostname / ip of your cluster head';
  - $conf["pve_realm"] 		= 'realm';
+ - Please do not use your Proxmox root user !
 - Create MySQL table for this module -> misc/vm_proxmox.sql
  - If you are on multi-servers setup you have to do this on each server
 
@@ -53,7 +57,6 @@ This application is an Add-ons for ISPConfig used for VPS Management (Proxmox)
 ## ToDo
 - Admin function : 
  - Snapshot (add / remove)
- - Networks : Enable / Disable
 
 - Display: 
  - Vps console integration (stuck for the moment ... :( )

ajax_config.php

+<?php
+/*
+Copyright (c) 2016, Gody - ORM
+All rights reserved.
+*/
+
+require_once '../../lib/config.inc.php';
+require_once '../../lib/app.inc.php';
+
+include './lib/pve2_api.class.php'; // maybe we can move this class to another location? 
+
+/******************************************
+* Begin Form configuration
+******************************************/
+
+$list_def_file = "list/proxmox_vm.list.php";
+
+/******************************************
+* End Form configuration
+******************************************/
+
+//* Check permissions for module
+$app->auth->check_module_permissions('proxmox');
+
+$prox_id = $app->functions->intval($_REQUEST['id']);
+
+if($_POST && !empty($prox_id))
+{
+	// Verify assignation VM
+	if($_SESSION["s"]["user"]["typ"] != 'admin' && !$app->auth->has_clients($_SESSION['s']['user']['userid'])) 
+	{
+		$client_group_id = $app->functions->intval($_SESSION["s"]["user"]["default_group"]);
+		$vm = $app->db->queryOneRecord("SELECT vm_containers, vm_id FROM proxmox_vm WHERE id = $prox_id AND sys_groupid = $client_group_id");	
+	}
+	else
+	{
+		$vm = $app->db->queryOneRecord("SELECT vm_containers, vm_id FROM proxmox_vm WHERE id = $prox_id");
+	}
+
+	$vm_containers = $vm['vm_containers'];
+	$vm_id = $app->functions->intval($vm['vm_id']);
+	
+	if(isset($vm_id) && isset($vm_containers))
+	{
+		$pve2 = new PVE2_API($conf["pve_link"], $conf["pve_username"], $conf["pve_realm"], $conf["pve_password"]);
+	
+		if ($pve2) {
+			if ($pve2->login()) {
+					
+				$vm_temp = $pve2->get("/cluster/resources");
+				$key = array_search($vm_id, array_column( $vm_temp , 'vmid'));
+				$vm_pvesvr = $vm_temp[$key]['node'];
+
+				// Get VM configurations
+				$vm_config = $pve2->get("/nodes/{$vm_pvesvr}/{$vm_containers}/{$vm_id}/config");
+				$vm_interface = $vm_config[$_REQUEST['interface']];
+				
+				$interface_settings = explode(',', $vm_config[$_REQUEST['interface']]	);	
+				
+				if( ($key = array_search('link_down=1',$interface_settings)) !== false ) 
+				{
+					unset($interface_settings[$key]);
+				}
+				else
+				{
+					$interface_settings[] = 'link_down=1';
+				}
+				
+				/*
+				 * Post new network vm configuration
+				 * For change VM configurations your Proxmox user need VM.Config.Network right (PVEVMAdmin vs PVEVMUser) 
+				 */ 
+				$vm_interface = array($_REQUEST['interface'] => implode(",", $interface_settings));
+				$vm_config = $pve2->post("/nodes/{$vm_pvesvr}/{$vm_containers}/{$vm_id}/config", $vm_interface );
+				
+				// TODO : return to vm information with succes or error message
+				// echo (!empty( $vm_config ) ? 'Ok' : 'NOK' );
+
+			} else {
+				echo "Login to Proxmox Host failed.\n";
+				exit;
+			}
+		} else {
+			echo "Could not create PVE2_API object.\n";
+			exit;
+		}
+	}
+}
+
+$app->uses('listform_actions');
+$app->listform_actions->onLoad();
+?>

ajax_graph.php

 <?php 
+/*
+Copyright (c) 2016, Gody - ORM
+All rights reserved.
+*/
 
 require_once '../../lib/config.inc.php';
 require_once '../../lib/app.inc.php';
@@ -14,11 +18,10 @@ $vm_pvesvr = $_REQUEST['vm_pvesvr'];
 
 if($_POST)
 {
-	// Vrification Apartenance VM (user vs admin)
-	$client_group_id = $app->functions->intval($_SESSION["s"]["user"]["default_group"]);
-
+	// Verify assignation VM
 	if($_SESSION["s"]["user"]["typ"] != 'admin' && !$app->auth->has_clients($_SESSION['s']['user']['userid'])) 
 	{
+		$client_group_id = $app->functions->intval($_SESSION["s"]["user"]["default_group"]);
 		$vm = $app->db->queryOneRecord("SELECT vm_containers, vm_id FROM proxmox_vm WHERE id = $prox_id AND sys_groupid = $client_group_id");	
 	}
 	else
@@ -29,7 +32,6 @@ if($_POST)
 	$vm_containers = $vm['vm_containers'];
 	$vm_id = $app->functions->intval($vm['vm_id']);
 	
-	
 	if(isset($vm_pvesvr) &&  isset($vm_id) && isset($vm_containers))
 	{
 		$pve2 = new PVE2_API($conf["pve_link"], $conf["pve_username"], $conf["pve_realm"], $conf["pve_password"]);
@@ -97,5 +99,4 @@ if($_POST)
 	}
 }
 
-
 ?>

form/proxmox_vm_informations.tform.php

@@ -59,6 +59,7 @@ $form["tabs"]['informations'] = array (
 	'title'  => "Informations", // Need to translate with variable
 	'width'  => 100,
 	'template'  => "templates/proxmox_vm_informations.htm",
+	'readonly' => true,
 	'fields'  => array (
 		//#################################
 		// Begin Datatable fields
@@ -85,57 +86,7 @@ $form["tabs"]['graphics'] = array (
 	'title'  => "Graphics", // Need to translate with variable
 	'width'  => 100,
 	'template'  => "templates/proxmox_vm_graphiques.htm",
-	'readonly' => false,
-	/*
-	'fields'  => array (
-		//#################################
-		// Begin Datatable fields
-		//#################################
-		'id' => array (
-			'datatype' => 'INTEGER',
-			'formtype' => 'TEXT',
-			'default' => '',
-			'value'  => '',
-			'separator' => '',
-			'width'  => '30',
-			'maxlength' => '255',
-			'rows'  => '',
-			'cols'  => '',
-			'searchable' => 2
-		),
-		
-		//#################################
-		// ENDE Datatable fields
-		//#################################
-	)*/
+	'readonly' => true,
 );
 
-$form["tabs"]['networks'] = array (
-	'title'  => "Networks", // Need to translate with variable
-	'width'  => 100,
-	'template'  => "templates/proxmox_vm_networks.htm",
-	'readonly' => false,
-	/*
-	'fields'  => array (
-		//#################################
-		// Begin Datatable fields
-		//#################################
-		'id' => array (
-			'datatype' => 'INTEGER',
-			'formtype' => 'TEXT',
-			'default' => '',
-			'value'  => '',
-			'separator' => '',
-			'width'  => '30',
-			'maxlength' => '255',
-			'rows'  => '',
-			'cols'  => '',
-			'searchable' => 2
-		),
-		
-		//#################################
-		// ENDE Datatable fields
-		//#################################
-	)*/
-);
 ?>

lib/lang/ca_proxmox_vm.lng

@@ -41,9 +41,14 @@ $wb["vm_confirm_kill"] = 'Stopper la machine virtuelle ?';
 $wb["vm_confirm_shutdown"] = 'Arreter la machine virtuelle ?';
 $wb["vm_select_timeframe_txt"] = 'Merci de choisir une période' ;
 $wb["vm_interface_txt"] = 'Interface';
-$wb["vm_bridge_txt"] = 'Mode';
-$wb["vm_rate_txt"] = 'Limitation (Mb/s)';
+$wb["vm_bridge_txt"] = 'Bridge Name';
+$wb["vm_rate_txt"] = 'Max rate (Mb/s)';
 $wb["vm_tag_txt"] = 'Vlan';
-$wb["vm_link_txt"] = 'Désactivé';
+$wb["vm_disconnect_txt"] = 'Désactivé';
+$wb["vm_mac_txt"] = 'Adresse mac';
+$wb["vm_mode_txt"] = 'Mode';
+$wb["vm_model_txt"] = 'Model';
+$wb["vm_firewall_txt"] = 'Firewall';
+$wb["vm_queues_txt"] = 'Multiqueues';
 
 ?>

lib/lang/en_proxmox_vm.lng

 <?php
-
+$wb["id_txt"] = 'id';
 $wb["_csrf_id_txt"] = '_csrf_id';
 $wb["_csrf_key_txt"] = '_csrf_key';
 $wb["proxy_directives_txt"] = 'proxy_directives';
@@ -39,10 +39,15 @@ $wb["vm_max_year"] = 'Year (max)';
 $wb["vm_confirm_reset"] = 'Reset the virtual machine ?';
 $wb["vm_confirm_kill"] = 'Kill the virtual machine ?';
 $wb["vm_confirm_shutdown"] = 'Shutdown the virtual machine ?';
-$wb["vm_select_timeframe_txt"] = 'Choose a timeframe please' ;
+$wb["vm_select_timeframe_txt"] = 'Choose a timeframe please';
 $wb["vm_interface_txt"] = 'Interface';
-$wb["vm_bridge_txt"] = 'Mode';
-$wb["vm_rate_txt"] = 'Rate (Mb/s)';
+$wb["vm_bridge_txt"] = 'Bride name';
+$wb["vm_rate_txt"] = 'Max rate (Mb/s)';
 $wb["vm_tag_txt"] = 'Vlan';
-$wb["vm_link_txt"] = 'Disable';
+$wb["vm_disconnect_txt"] = 'Disabled';
+$wb["vm_mac_txt"] = 'Mac Address';
+$wb["vm_mode_txt"] = 'Mode';
+$wb["vm_model_txt"] = 'Model';
+$wb["vm_firewall_txt"] = 'Firewall';
+$wb["vm_queues_txt"] = 'Multiqueues';
 ?>

lib/lang/fr_proxmox_vm.lng

@@ -41,9 +41,13 @@ $wb["vm_confirm_kill"] = 'Stopper la machine virtuelle ?';
 $wb["vm_confirm_shutdown"] = 'Arreter la machine virtuelle ?';
 $wb["vm_select_timeframe_txt"] = 'Merci de choisir une période' ;
 $wb["vm_interface_txt"] = 'Interface';
-$wb["vm_bridge_txt"] = 'Mode';
-$wb["vm_rate_txt"] = 'Limitation (Mb/s)';
+$wb["vm_bridge_txt"] = 'Bridge name';
+$wb["vm_rate_txt"] = 'Max rate (Mb/s)';
 $wb["vm_tag_txt"] = 'Vlan';
-$wb["vm_link_txt"] = 'Désactivé';
-
+$wb["vm_disconnect_txt"] = 'Désactivé';
+$wb["vm_mac_txt"] = 'Adresse mac';
+$wb["vm_mode_txt"] = 'Mode';
+$wb["vm_model_txt"] = 'Model';
+$wb["vm_firewall_txt"] = 'Firewall';
+$wb["vm_queues_txt"] = 'Multiqueues';
 ?>

proxmox_action.php

 <?php
 /*
-Copyright (c) 2010, Till Brehm, projektfarm Gmbh
+Copyright (c) 2016, Gody - ORM
 All rights reserved.
 */
 
@@ -28,9 +28,11 @@ $vm_pvesvr = $_REQUEST['vm_pvesvr'];
 
 if(isset($prox_id) && !empty($prox_id))
 {	
-	$client_group_id = $app->functions->intval($_SESSION["s"]["user"]["default_group"]);
+	// Verify assignation VM
 
-	if($_SESSION["s"]["user"]["typ"] != 'admin' && !$app->auth->has_clients($_SESSION['s']['user']['userid'])) {
+	if($_SESSION["s"]["user"]["typ"] != 'admin' && !$app->auth->has_clients($_SESSION['s']['user']['userid'])) 
+	{
+		$client_group_id = $app->functions->intval($_SESSION["s"]["user"]["default_group"]);
 		$vm = $app->db->queryOneRecord("SELECT vm_containers, vm_id FROM proxmox_vm WHERE id = $prox_id AND sys_groupid = $client_group_id");	
 	}
 	else

proxmox_vm_del.php

 <?php
 /*
-Copyright (c) 2010 Till Brehm, projektfarm Gmbh and Oliver Vogel www.muv.com
+Copyright (c) 2016, Gody - ORM
 All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification,
-are permitted provided that the following conditions are met:
-
-    * Redistributions of source code must retain the above copyright notice,
-      this list of conditions and the following disclaimer.
-    * Redistributions in binary form must reproduce the above copyright notice,
-      this list of conditions and the following disclaimer in the documentation
-      and/or other materials provided with the distribution.
-    * Neither the name of ISPConfig nor the names of its contributors
-      may be used to endorse or promote products derived from this software without
-      specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
-ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
-WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
-IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,
-INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
-BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
-OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
-NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
-EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
 
 /******************************************

proxmox_vm_edit.php

 <?php
+/*
+Copyright (c) 2016, Gody - ORM
+All rights reserved.
+*/
 
 /******************************************
 * Begin Form configuration
@@ -100,4 +104,4 @@ class page_action extends tform_actions {
 $page = new page_action;
 $page->onLoad();
 
-?>
\ No newline at end of file
+?>

proxmox_vm_informations.php

 <?php
-
+/*
+Copyright (c) 2016, Gody - ORM
+All rights reserved.
+*/
 
 /******************************************
 * Begin Form configuration
@@ -19,20 +22,15 @@ include './lib/pve2_api.class.php';
 //* Check permissions for module
 $app->auth->check_module_permissions('proxmox');
 
-
 // Loading classes
 $app->uses('tpl,tform,tform_actions');
 $app->load('tform');
 
-print_r($_REQUEST);
-
 class page_action extends tform_actions {
 		
 	function onShowEnd() {
 		global $app, $conf;
-
-		//$vm_info['vm_id'] = $app->functions->intval($this->dataRecord['vm_id']);
-
+	
 		$pve2 = new PVE2_API($conf["pve_link"], $conf["pve_username"], $conf["pve_realm"], $conf["pve_password"]);
 		
 		if ($pve2) {
@@ -41,7 +39,6 @@ class page_action extends tform_actions {
 				$vm_id = $app->functions->intval($this->dataRecord['vm_id']);
 				$vm_containers = $this->dataRecord['vm_containers'] ;
 				
-			
 				$vm_temp = $pve2->get("/cluster/resources");
 				$key = array_search($vm_id, array_column( $vm_temp , 'vmid'));
 				$vm_pvesvr = $vm_temp[$key]['node'];
@@ -49,48 +46,16 @@ class page_action extends tform_actions {
 				$app->tpl->setVar("vm_id", $vm_id);
 				$app->tpl->setVar("vm_pvesvr", $vm_pvesvr);
 				
-				
 				switch($_REQUEST['next_tab'])
 				{
 					case 'graphics':
 						//DO SOMETHING HERE
 						break; 
 					
-					case 'networks':
-						$vm_config = $pve2->get("/nodes/{$vm_pvesvr}/{$vm_containers}/{$vm_id}/config");
-						
-						$keys = array_keys($vm_config);
-						$net_temp = preg_grep('/^net[0-9]+/',$keys);
-						
-						
-						echo '<pre>';
-						$arr_net = array();
-						foreach($net_temp as $net)
-						{
-							$settings_temp = explode(',', $vm_config[$net]);
-							
-							$arr_net[$net]['interface'] = $net;
-							
-							foreach($settings_temp as $settings )
-							{
-								list($k, $v) = explode('=', $settings);
-								$arr_net[$net]['checked'] = ($k == 'link_down' && $v == 1 ? 'checked' : '');
-								$arr_net[$net][$k] = $v;
-							}
-						}
-						
-						$app->tpl->setloop('networks', $arr_net);
-						
-						
-					print_r($arr_net);
-						echo '</pre>';
-						
-						
-						break;
 					case 'informations':
 					default:
 						$vm_status = $pve2->get("/nodes/{$vm_pvesvr}/{$vm_containers}/{$vm_id}/status/current");
-							
+					
 						if ($vm_status != false)
 						{
 							$app->tpl->setVar("vm_name", $vm_status['name']);
@@ -109,12 +74,37 @@ class page_action extends tform_actions {
 						{
 							$app->error($app->tform->wordbook["vm_err_assignation"]);
 						}
-						break;
 						
+						$vm_config = $pve2->get("/nodes/{$vm_pvesvr}/{$vm_containers}/{$vm_id}/config");
+						
+						$keys = array_keys($vm_config);
+						$net_temp = preg_grep('/^net[0-9]+/',$keys);
+						
+						$arr_net = array();
+						foreach($net_temp as $net)
+						{
+							$settings_temp = explode(',', $vm_config[$net]);
+							
+							$arr_net[$net]['interface'] = $net;
+							
+							foreach($settings_temp as $settings )
+							{
+								list($k, $v) = explode('=', $settings);
+								
+								if (preg_match('/(e1000|vmxnet3|virtio|rtl8139)/i', $k ) )
+								{
+									$arr_net[$net]['mac'] = $v;
+								}
+								$arr_net[$net]['link_state'] = ($k == 'link_down' && $v == 1 ? 'Yes' : 'No');
+								$arr_net[$net][$k] = $v;
+							}
+						}
+						
+						$app->tpl->setloop('networks', $arr_net);
+						
+						break;
 				}
 				
-				
-				
 			} else {
 				//print("Login to Proxmox Host failed.\n");
 				$app->error($app->tform->wordbook["vm_err_login"]);
@@ -128,34 +118,8 @@ class page_action extends tform_actions {
 			
 		parent::onShowEnd();
 	}
-	
-	/*
-	function onSubmit() {
-		global $app, $conf;
-				
-		parent::onSubmit();
-	}
-	
-
-	
-	function onAfterInsert() {
-		global $app, $conf;
-		
-	}	
-	
-	function onBeforeUpdate() {
-		global $app, $conf;
-
-	}		
-	
-	function onAfterUpdate() {
-		global $app, $conf;
-		
-	}
-	*/
 }
 
-
 $page = new page_action;
 $page->onLoad();
 

proxmox_vm_list.php

 <?php
+/*
+Copyright (c) 2016, Gody - ORM
+All rights reserved.
+*/
+
 require_once '../../lib/config.inc.php';
 require_once '../../lib/app.inc.php';
 

proxmox_vm_logs.php

 <?php
+/*
+Copyright (c) 2016, Gody - ORM
+All rights reserved.
+*/
 
 require_once '../../lib/config.inc.php';
 require_once '../../lib/app.inc.php';
@@ -12,32 +16,25 @@ $app->auth->check_module_permissions('proxmox');
 // Loading classes
 $app->uses('tpl');
 
+$template = 'templates/proxmox_vm_logs.htm';
+
+// Loading the template
+$app->uses('tpl');
+$app->tpl->newTemplate("form.tpl.htm");
+$app->tpl->setInclude('content_tpl', $template);
+		
 
 $pve2 = new PVE2_API($conf["pve_link"], $conf["pve_username"], $conf["pve_realm"], $conf["pve_password"]);
 		
 if ($pve2) {
 	if ($pve2->login()) {
-			
-		$template = 'templates/proxmox_vm_logs.htm';
-		
-		// Loading the template
-		$app->uses('tpl');
-		$app->tpl->newTemplate("form.tpl.htm");
-		$app->tpl->setInclude('content_tpl', $template);
-
-		$title = $app->lng("task_title_txt");
-		$start_time = $app->lng("start_time_txt");
-		$end_time = $app->lng("end_time_txt");
-		$username = $app->lng("username_txt");
-		$description = $app->lng("description_txt");
-		$status = $app->lng("status_txt");
-
-		$app->tpl->setVar("task_title_txt", $title);
-		$app->tpl->setVar("start_time_txt", $start_time);
-		$app->tpl->setVar("end_time_txt", $end_time);
-		$app->tpl->setVar("username_txt", $username);
-		$app->tpl->setVar("description_txt", $description);
-		$app->tpl->setVar("status_txt", $status);
+	
+		$app->tpl->setVar("task_title_txt", $app->lng("task_title_txt") );
+		$app->tpl->setVar("start_time_txt", $app->lng("start_time_txt") );
+		$app->tpl->setVar("end_time_txt", $app->lng("end_time_txt") );
+		$app->tpl->setVar("username_txt", $app->lng("username_txt") );
+		$app->tpl->setVar("description_txt", $app->lng("description_txt") );
+		$app->tpl->setVar("status_txt", $app->lng("status_txt") );
 
 		$tasks_history = $pve2->get("/cluster/tasks");
 
@@ -54,11 +51,9 @@ if ($pve2) {
 		}
 		
 		$app->tpl->setloop('task_logs', $tasks_logs);
-		
-		
-		$app->tpl_defaults();
-		$app->tpl->pparse();
 	}
 }
 
+$app->tpl_defaults();
+$app->tpl->pparse();
 ?>

templates/proxmox_vm_graphiques.htm

@@ -9,64 +9,59 @@
 <p class="fieldset-legend">{tmpl_var name="toolsarea_head_txt"}</p>
 
 <div class="tab-content">
-	<div class="tab-pane active fade in">
-			<div class="form-group">
-				<label class="col-sm-3 control-label"  for="refreshinterval"><tmpl_var name="vm_timeframe"></label>
-				<div class="col-sm-9">
-					<select id="periode"  name="periode" class="form-control">
-						<option>{tmpl_var name="vm_select_timeframe_txt"}</option>
-						<option value="ah"><tmpl_var name="vm_avg_hour"></option>
-						<option value="mh"><tmpl_var name="vm_max_hour"></option>
-						<option value="ad"><tmpl_var name="vm_avg_day"></option>
-						<option value="md"><tmpl_var name="vm_max_day"></option>
-						<option value="aw"><tmpl_var name="vm_avg_week"></option>
-						<option value="mw"><tmpl_var name="vm_max_week"></option>
-						<option value="am"><tmpl_var name="vm_avg_month"></option>
-						<option value="mm"><tmpl_var name="vm_max_month"></option>
-						<option value="ay"><tmpl_var name="vm_avg_year"></option>
-						<option value="my"><tmpl_var name="vm_max_year"></option>
-					</select>
-				</div>
-			</div>
-			
-			<div class="form-group" id="graph">
-				
-			</div>
-			
-			<div class="clear"><div class="right">
-				<button class="btn btn-default formbutton-default" type="button" data-load-content="proxmox/proxmox_vm_list.php">{tmpl_var name='btn_cancel_txt'}</button>
-			</div></div>
+	<div class="form-group">
+		<label class="col-sm-3 control-label"  for="refreshinterval"><tmpl_var name="vm_timeframe"></label>
+		<div class="col-sm-9">
+			<select id="periode"  name="periode" class="form-control">
+				<option>{tmpl_var name="vm_select_timeframe_txt"}</option>
+				<option value="ah"><tmpl_var name="vm_avg_hour"></option>
+				<option value="mh"><tmpl_var name="vm_max_hour"></option>
+				<option value="ad"><tmpl_var name="vm_avg_day"></option>
+				<option value="md"><tmpl_var name="vm_max_day"></option>
+				<option value="aw"><tmpl_var name="vm_avg_week"></option>
+				<option value="mw"><tmpl_var name="vm_max_week"></option>
+				<option value="am"><tmpl_var name="vm_avg_month"></option>
+				<option value="mm"><tmpl_var name="vm_max_month"></option>
+				<option value="ay"><tmpl_var name="vm_avg_year"></option>
+				<option value="my"><tmpl_var name="vm_max_year"></option>
+			</select>
+		</div>
+	</div>
+	
+	<div class="form-group" id="graph">
+		
+	</div>
+	
+	<div class="clear"><div class="right">
+		<button class="btn btn-default formbutton-default" type="button" data-load-content="proxmox/proxmox_vm_list.php">{tmpl_var name='btn_cancel_txt'}</button>
+	</div></div>
 			
-	</div>	
 </div>
 
 
 <script language="javascript" type="text/javascript">
-    $('#periode').change(function(){
+    jQuery('#periode').change(function(){
 		
-		$.post( "/proxmox/ajax_graph.php", {periode:$(this).val(), vm:{tmpl_var name='id'}, vm_pvesvr:'{tmpl_var name='vm_pvesvr'}'},
+		jQuery.post( "/proxmox/ajax_graph.php", {periode:jQuery(this).val(), vm:{tmpl_var name='id'}, vm_pvesvr:'{tmpl_var name='vm_pvesvr'}'},
 			function(resultat) {
-			
-			console.log(resultat);
 				var tbl_image = JSON.parse(resultat);
 
-				$('#graph').empty();
+				jQuery('#graph').empty();