lpmp 1.0.0

data/public/js/global.js

@@ -0,0 +1,7 @@
+/* 
+ * To change this template, choose Tools | Templates
+ * and open the template in the editor.
+ */
+
+Glb = {}
+Glb.portal = {}

data/public/js/outerframe.js

@@ -0,0 +1,47 @@
+/* 
+ * To change this template, choose Tools | Templates
+ * and open the template in the editor.
+ */
+
+function outer_frame(){
+      Glb.outer_center = new Ext.Panel({
+        id:'outer_center',
+        //title:'Outer center',
+        region:'center',
+        // autoScroll :true
+      });
+      
+      Glb.outer_north = new Ext.Panel({
+          xtype:'panel',
+          region: 'north',
+          id:'outer_north',
+          layout:'anchor',
+          height:70,
+          //autoHeight: true,
+          tbar: [	{hidden:true, id:'glb_outer_north_tbar'} ],
+          border: true
+      });
+      
+      Glb.outer_south = new Ext.Panel({
+          region: 'south',
+          //title: 'Information',
+          autoLoad:'/help',
+          id:'outer_south',
+          collapsible: true,
+          split: true,
+          height: 100,
+          minHeight: 100,
+          collapsed: true
+      });
+      
+      Glb.outer_west = new Ext.Panel({
+          region: 'west',
+          //title: 'Controll Panel',
+          layout : 'accordion',
+          id:'outer_west',
+          collapsible: true,
+          width:200,
+          split: true
+      });
+
+}

data/public/js/portal.js

@@ -0,0 +1,713 @@
+function portal_init(argument) {
+	Ext.chart.Chart.CHART_URL = '/ext-3.0.0/resources/charts.swf'
+	/*Portal TabPanel*/
+	/*this panel contains some elements about all the hosts info.*/
+	/*click one of the hosts list in the grid,the certain host panel will show.*/
+	
+	/**
+	 * @class Ext.ux.SliderTip
+	 * @extends Ext.Tip
+	 * Simple plugin for using an Ext.Tip with a slider to show the slider value
+	 */
+	Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
+	    minWidth: 10,
+	    offsets : [5, 15],
+	    init : function(slider){
+	        slider.on('dragstart', this.onSlide, this);
+	        slider.on('drag', this.onSlide, this);
+	        slider.on('dragend', this.hide, this);
+	        slider.on('destroy', this.destroy, this);
+	    },
+
+	    onSlide : function(slider){
+	        this.show();
+	        this.body.update(this.getText(slider));
+	        this.doAutoWidth();
+	        this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
+	    },
+
+	    getText : function(slider){
+	        return "Request Interval will be set req/"+String(slider.getValue())+'second';
+	    }
+	});
+
+	Glb.portal.hosts_setInterval = 15000;
+	Glb.portal.hosts_setInterval_handler = {};
+	
+	Glb.portal.tab_panel = new Ext.TabPanel({
+	    title:'Portal',
+		activeTab: 0,
+		height:500,
+		defaults:{ autoScroll:true },
+		listeners:{
+			close:function(panel) {
+				// body...
+				for(x in Glb.portal.hosts_setInterval_handler){
+					window.clearInterval(Glb.portal.hosts_setInterval_handler[x]['interval_id']);
+				}
+			}
+		},
+		tbar:['->',
+			new Ext.Slider({
+		        // renderTo: 'custom-tip-slider',
+		        width: 200,
+		        increment: 1,
+		        minValue: 10,
+		        maxValue: 20,
+				listeners:{
+					change:function(slider,e) {
+						// body...
+						var textItem = Ext.getCmp("Glb_portal_tab_panel_tbtext");
+						textItem.setText(slider.getValue() + " sec");
+					},
+					changecomplete:function(slid,value) {
+						// reset hosts interval
+						// such as hosts grid
+						Glb.portal.hosts_setInterval = value*1000;
+						for(x in Glb.portal.hosts_setInterval_handler){
+							window.clearInterval(Glb.portal.hosts_setInterval_handler[x]['interval_id']);
+							Glb.portal.hosts_setInterval_handler[x]['interval_id'] = setInterval("Glb.portal.hosts_setInterval_handler[x]['interval_fn']()",Glb.portal.hosts_setInterval);
+						}
+						// reset host's elements interval
+						// such as cpu,loadavg etc.
+						Glb.portal.host_setInterval = value*1000;
+						for(x in Glb.portal.host_setInterval_handler){
+							window.clearInterval(Glb.portal.host_setInterval_handler[x]['interval_id']);
+							Glb.portal.host_setInterval_handler[x]['interval_id'] = setInterval("Glb.portal.host_setInterval_handler[x]['interval_fn']()",Glb.portal.host_setInterval);
+						}
+					}
+				},
+				plugins: new Ext.ux.SliderTip({
+				       getText: function(slider){
+			           return String.format('<b>Refresh per {0} sec</b>', slider.getValue());
+			        }
+			    })
+		    }),' ',{
+			// Glb.portal.host_setInterval = 15000;
+			// Glb.portal.hosts_setInterval = 15000;
+			xtype: 'tbtext', text: Glb.portal.hosts_setInterval/1000 + " sec (Default)",id:'Glb_portal_tab_panel_tbtext'
+		},'  ',{
+			xtype:'button',
+			text:'STOP',
+			icon:'stop-icon',
+			ctCls: 'x-btn-text-icon',
+			listeners:{
+				click:function() {
+					// body...
+					for(x in Glb.portal.hosts_setInterval_handler){
+						window.clearInterval(Glb.portal.hosts_setInterval_handler[x]['interval_id']);
+					}
+					for(x in Glb.portal.host_setInterval_handler){
+						window.clearInterval(Glb.portal.host_setInterval_handler[x]['interval_id']);
+					}
+				}
+			}
+		},' ','-',' ',{
+			xtype:'button',
+			text:'START',
+			icon:'start-icon',
+			ctCls: 'x-btn-text-icon',
+			listeners:{
+				click:function() {
+					for(x in Glb.portal.hosts_setInterval_handler){
+						window.clearInterval(Glb.portal.hosts_setInterval_handler[x]['interval_id']);
+						Glb.portal.hosts_setInterval_handler[x]['interval_id'] = setInterval("Glb.portal.hosts_setInterval_handler[x]['interval_fn']()",Glb.portal.hosts_setInterval);
+					}
+					for(x in Glb.portal.host_setInterval_handler){
+						window.clearInterval(Glb.portal.host_setInterval_handler[x]['interval_id']);
+						Glb.portal.host_setInterval_handler[x]['interval_id'] = setInterval("Glb.portal.host_setInterval_handler[x]['interval_fn']()",Glb.portal.host_setInterval);
+					}
+				}
+			}
+		}]
+	});
+	
+	/*Hosts Panel*/
+	/*it contains:*/
+	/*Glb.portal.hosts_grid_panel,and other panels which haven't complete.*/
+	
+	Glb.portal.hosts_panel = new Ext.Panel({
+	     title:'Hosts'
+	});
+	
+	Glb.portal.hosts_tree = new Ext.tree.TreePanel({
+          //xtype: 'treepanel',
+          id: 'Glb_portal_hosts_tree',
+          title: 'Monitor List',
+          // margins: '2 2 0 2',
+          width:150,
+          animate:true,
+          autoScroll: true,
+          rootVisible: false,
+          root: new Ext.tree.AsyncTreeNode({expanded:true}),
+          tools:[{
+              id:'refresh',
+              on:{
+                  click: function(){
+                      var tree = Glb.portal.hosts_tree;
+                      tree.body.mask('Loading', 'x-mask-loading');
+                      tree.root.reload();
+                      tree.root.collapse(true, false);
+                      setTimeout(function(){
+                          tree.body.unmask();
+                          tree.root.expand(true, true);
+                      }, 1000);
+                  }
+              }
+          }],
+          loader: new Ext.tree.TreeLoader({
+              dataUrl:'/hosts/tree/',
+			  requestMethod:'GET'
+          })
+    });
+
+	Glb.portal.hosts_tree.on('click',function(node,e) {
+		Glb.portal.show_host_panel(node.text);
+	});
+/*	
+	Glb.portal.traffic_monitor_panel = new Ext.Panel({
+		title:'Traffic Monitor',
+		layout:'form',
+		items:[{
+				xtype:"panel",
+				layout:'column',
+				tbar:[{
+					xtype:'label',
+					id:'Glb_portal_traffic_monitor_panel_label',
+					text:'OFF'
+				},'->',{
+					xtype:"button",
+					text:"Monitor",
+					listeners:{
+						click:function() {
+							// body...
+							if(Glb.portal.traffic_monitor_switch === true){
+								Glb.portal.traffic_monitor_switch = false;
+								Ext.getCmp("Glb_portal_traffic_monitor_panel_label").setText("OFF")
+							}else{
+								Glb.portal.traffic_monitor_switch = true;
+								Ext.getCmp("Glb_portal_traffic_monitor_panel_label").setText("ON")
+							}
+						}
+					}
+				}]
+			},{
+				xtype:"textfield",
+				id:"Glb_portal_traffic_monitor_panel_textarea",
+				autoScroll:true,
+				width:'100%',
+				height:'100%'
+				// anchor : '100%'
+			}
+		]
+	});
+*/	
+	Glb.portal.hosts_grid_panel = new Ext.Panel({
+	     title:'Hosts Grid',
+		 listeners:{
+			activate:function(panel) {
+				// body...
+				interval_fn = function(argument) {
+					Glb.portal.hosts_grid_store.reload()
+				};
+				Glb.portal.hosts_setInterval_handler[panel.id] = {'interval_id':setInterval("interval_fn()",Glb.portal.hosts_setInterval),'interval_fn':interval_fn};
+			},
+			deactivate:function(panel) {
+				// clear interval
+				window.clearInterval(Glb.portal.hosts_setInterval_handler[panel.id]['interval_id']);
+			},
+			render:function(panel) {
+				// body...
+				interval_fn = function(argument) {
+					Glb.portal.hosts_grid_store.reload()
+				};
+				Glb.portal.hosts_setInterval_handler[panel.id] = {'interval_id':setInterval("interval_fn()",Glb.portal.hosts_setInterval),'interval_fn':interval_fn};
+			}
+		},
+	});
+	
+	Glb.portal.hosts_grid_store = new Ext.data.Store({
+	    proxy: new Ext.data.HttpProxy({url: '/hosts/grid/', method: 'GET'}),
+        autoLoad: {params:{start: 0, limit: 10}},
+        reader: new Ext.data.JsonReader({
+          root: "root",
+          id:'Glb_portal_host_grid_store',
+          totalProperty:'totalCount'
+        }, [
+        	{name: 'ip', mapping: 'ip'},
+            {name: 'name', mapping: 'hostname'},
+            {name: 'cpu', mapping: 'cpu'},
+            {name: 'load', mapping: 'loadavg'},
+            {name: 'mem_total', mapping: 'mem_total'},
+			{name: 'mem_free', mapping: 'mem_free'},
+			{name: 'uptime_total', mapping: 'uptime_total'},
+			{name: 'uptime_idle', mapping: 'uptime_idle'},
+			{name: 'disk_size', mapping: 'disk_size'},
+            {name: 'disk_use', mapping: 'disk_use'}
+        ])
+     });
+
+     Glb.portal.hosts_grid = new Ext.grid.GridPanel({
+          id:'Glb_portal_host_grid',
+          store:Glb.portal.hosts_grid_store,
+          animate:true,
+		  autoWidth:true,
+		  autoHeigth:true,
+		  autoScroll:true,
+	      // height: 400,
+          columns: [
+          	  {id:'ip',header: "IP", width: 200, sortable: true, dataIndex: 'ip',hidden:false},
+              {id:'name',header: "HostName", width: 80, sortable: true, dataIndex: 'name'},
+              {id:'cpu',header: "CPU", width: 60, sortable: true,  dataIndex: 'cpu'},
+              {id:'load',header: "Load", width: 60, sortable: true,  dataIndex: 'load'},
+              {id:'mem_total',header: "Memory Total", width: 80, sortable: true, dataIndex: 'mem_total'},
+			  {id:'mem_free',header: "Memory Free", width: 80, sortable: true, dataIndex: 'mem_free'},
+			  {id:'uptime_total',header: "Uptime Total", width: 80, sortable: true, dataIndex: 'uptime_total'},
+			  {id:'uptime_idle',header: "Uptime Idle", width: 80, sortable: true, dataIndex: 'uptime_idle'},
+			  {id:'disk_size',header: "Disk Total", width: 80, sortable: true, dataIndex: 'disk_size'},
+              {id:'disk_use',header: "Disk Used", width: 60, sortable: true,  dataIndex: 'disk_use'}
+          ],
+          frame:true,
+          region: 'center',
+          tools:[{
+		    id:'refresh',//Glb_portal_host_grid_refresh
+		    qtip: 'Refresh form Data',
+		    handler: function(event, toolEl, panel){
+                Glb.portal.hosts_grid.body.mask('ReLoading', 'x-mask-loading');
+                Glb.portal.hosts_grid_store.reload();
+                setTimeout(function(){
+                     Glb.portal.hosts_grid.body.unmask();
+                }, 1000);
+		    }
+		}],
+		bbar: new Ext.PagingToolbar({
+            pageSize: 10,
+            store: Glb.portal.hosts_grid_store,
+            displayInfo: true,
+            displayMsg: '从 {0} - {1} /总共 {2}',
+            emptyMsg: "空记录"
+        })
+     });
+
+	Glb.portal.hosts_grid.on('rowdblclick',function(grid, rowIndex, e) {
+		var row = Glb.portal.hosts_grid_store.getById(Glb.portal.hosts_grid_store.data.items[rowIndex].id);
+		var name = row.get("name");
+		var ip = row.get("ip");
+		Glb.portal.show_host_panel(ip,name);
+		// alert("rowIndex:"+rowIndex+";ip:"+ip);
+	});
+	
+	Glb.portal.hosts_grid.on('render',function(){
+		if(Glb.portal.hosts_grid_panel.height){
+			Glb.portal.hosts_grid.height = Glb.portal.hosts_grid_panel.height - 10;
+		}else{
+			Glb.portal.hosts_grid.autoHeight = true;
+		}
+		
+		Glb.portal.hosts_grid.doLayout();
+	});
+	
+	Glb.portal.hosts_grid_panel.add(Glb.portal.hosts_grid);
+	Glb.portal.hosts_panel.add(Glb.portal.hosts_grid_panel);
+	Glb.portal.tab_panel.add(Glb.portal.hosts_panel);
+
+	/*Certain Host Panel*/
+	/*when double click one of hosts grid*/
+	/*this panel will be added to the Portal TabPanel*/
+	
+	Glb.portal.host_setInterval = 15000;
+	/*this handler object is a pool for interval handlers*/
+	Glb.portal.host_setInterval_handler = {};
+	
+	Glb.portal.show_host_panel =  function(ip,name){
+		/*generate a certain host panel*/
+		/*and insert it to the Portal TabPanel*/
+		id = "Glb_portal_a_certain_host_panel"+"_ip_"+ip
+		if(Ext.getCmp(id)){
+			// if the tab exist,
+			// then do nothing.
+			// Glb.portal.tab_panel.activeTab(id);
+		}else{
+			Glb.portal.tab_panel.add(Glb.portal.generate_a_certain_host_panel(ip,name));
+			Glb.portal.tab_panel.doLayout();
+		}
+		Glb.portal.tab_panel.activate(id);
+	};
+	
+	Glb.portal.chart_height = 200;
+	Glb.portal.chart_width = 200;
+	
+	Glb.portal.generate_a_certain_host_panel = function(ip,name){
+		interval_fn = function(argument) {
+			try{
+				// element such as:cpu,loadavg,disk,memory's datastore.reload()
+				// then repaint the graph report.
+				// Ext.getCmp("Glb_portal_a_certain_host_panel"+"_ip_"+ip+"_memory_chart").store.reload();
+				// Ext.getCmp("Glb_portal_a_certain_host_panel"+"_ip_"+ip+"_disk_chart").store.reload();
+			
+				var cpu = Ext.getCmp("Glb_portal_a_certain_host_panel"+"_ip_"+ip+"_cpu_chart");
+				var load = Ext.getCmp("Glb_portal_a_certain_host_panel"+"_ip_"+ip+"_load_chart");
+				/*
+				Ext.Ajax.request({
+				   url: '/host/proc/cpu/?ip='+ip,
+				   // response.responseText => {value:72, time: 1253419592}
+				   success: function(response){Glb.portal.insert_a_new_record_to_linechart(cpu,response.responseText)},
+				   failure: function(){Ext.Msg.alert('Attention!','Can\'t get cpu info from host:'+ip)}
+				});
+				Ext.Ajax.request({
+				   url: '/host/proc/loadavg/?ip='+ip,
+				   // response.responseText => {value:6.3, time: 1253419592}
+				   success: function(response){Glb.portal.insert_a_new_record_to_linechart(load,response.responseText)},
+				   failure: function(){Ext.Msg.alert('Attention!','Can\'t get load info from host:'+ip)}
+				});
+				*/
+			
+				/*
+					add 2 requests in one.
+				*/
+				Ext.Ajax.request({
+				   url: '/host/proc/line_chart_store/?ip='+ip,
+				   success: function(response){
+						/*
+						if(Glb.portal.traffic_monitor_switch === true){
+							var textarea = Ext.getCmp("Glb_portal_traffic_monitor_panel_textarea");
+							textarea.setValue(response.responseText +'\n'+ textarea.getValue());
+						}
+						*/
+						// eval("var data = "+response.responseText);
+						var data = Ext.util.JSON.decode(response.responseText);
+						Glb.portal.insert_a_new_record_to_linechart(cpu,Ext.util.JSON.encode(data["cpu"]));
+						Glb.portal.insert_a_new_record_to_linechart(load,Ext.util.JSON.encode(data["load"]));
+					},
+				   failure: function(){Ext.Msg.alert('Attention!','Can\'t get line_chart_store info from host:'+ip)}
+				});
+				
+				processes = Ext.getCmp("Glb_portal_a_certain_host_panel"+"_ip_"+ip+"_processes_info");
+				processes.store.reload();
+			}catch(e){}
+		};
+		
+		return new Ext.Panel({
+			xtype:'portal',
+	    	title:ip+" Monitor",
+			layout:'table',
+			id:"Glb_portal_a_certain_host_panel"+"_ip_"+ip,
+			closable:true,
+			layoutConfig:{
+				columns:2
+			},
+			autoDestroy:true,
+			listeners:{
+				activate:function(panel) {
+					// body...
+					// move interval_fn out.
+					Glb.portal.host_setInterval_handler[panel.id] = {'interval_id':setInterval("interval_fn()",Glb.portal.host_setInterval),'interval_fn':interval_fn};
+					Ext.getCmp("Glb_portal_a_certain_host_panel"+"_ip_"+ip+"_memory_chart").store.reload();
+					Ext.getCmp("Glb_portal_a_certain_host_panel"+"_ip_"+ip+"_disk_chart").store.reload();
+				},
+				close:function(panel) {
+					// body...
+					window.clearInterval(Glb.portal.host_setInterval_handler[panel.id]['interval_id']);
+				},
+				deactivate:function(panel) {
+					// body...
+				}
+			},
+			items:[{
+		          xtype: 'treepanel',
+		          id: 'Glb_portal_host_pids_tree',
+		          title: 'Active Pids List',
+		          // margins: '2 2 0 2',
+				  // rowspan:2,
+		          width:150,
+				  height:Glb.portal.chart_height*2+15,
+				  // autoHeight:true,
+		          animate:true,
+		          autoScroll: true,
+		          rootVisible: false,
+		          root: new Ext.tree.AsyncTreeNode({expanded:true}),
+		          tools:[{
+		              id:'refresh',
+		              on:{
+		                  click: function(){
+		                      var tree = Ext.getCmp('Glb_portal_host_pids_tree');
+		                      tree.body.mask('Loading', 'x-mask-loading');
+		                      tree.root.reload();
+		                      tree.root.collapse(true, false);
+		                      setTimeout(function(){
+		                          tree.body.unmask();
+		                          tree.root.expand(true, true);
+		                      }, 1000);
+		                  }
+		              }
+		          }],
+		          loader: new Ext.tree.TreeLoader({
+		              dataUrl:'/host/proc/pids/?ip='+ip,
+					  requestMethod:'GET'
+		          })
+		    },{	xtype:'portal',
+	            margins:'5 5 5 5',
+				listeners:{
+					render:function(p,e){
+						// var tree = Ext.getCmp("Glb_portal_host_pids_tree")
+						// tree.setHeight(p.getHeight());
+					}
+				},
+				// rowspan:2,
+				// colspan:2,
+	            items:[{
+					columnWidth:.50,
+	                style:'padding:5px 5px 5px 5px',
+	                items:[{
+						xtype:'panel',
+						iconCls:'chart',
+						title:'CPU',
+				        width: Glb.portal.chart_height,
+				        height: Glb.portal.chart_width,
+						// offsets:'5,40,5,5',
+						borderWidth:1,
+						items:[{
+						/*cpu line graph report*/
+						id:"Glb_portal_a_certain_host_panel"+"_ip_"+ip+"_cpu_chart",
+			            xtype: 'linechart',
+						url:'/ext-3.0.0/resources/charts.swf',
+			            store: new Ext.data.JsonStore({
+					        fields:['value', 'time'],
+					        data: [
+					            //{value:72, time: 1253419592}
+					        ]
+					    }),
+			            xField: 'time',
+			            yField: 'value',
+						listeners: {
+							itemclick: function(o){
+								var rec = store.getAt(o.index);
+								Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('value'));
+							}
+						}
+			        }]},{
+						xype:'panel',
+						iconCls:'chart',
+						title:'Load',
+				        width: Glb.portal.chart_height,
+				        height: Glb.portal.chart_width,
+						// offsets:'5,40,5,5',
+						borderWidth:1,
+						items:[{
+						/*load line graph report*/
+						id:"Glb_portal_a_certain_host_panel"+"_ip_"+ip+"_load_chart",
+			            xtype: 'linechart',
+						url:'/ext-3.0.0/resources/charts.swf',
+			            store: new Ext.data.JsonStore({
+					        fields:['value', 'time'],
+					        data: [
+					            //{value:6.3, time: 1253419592}
+					        ]
+					    }),
+			            xField: 'time',
+			            yField: 'value',
+						listeners: {
+							itemclick: function(o){
+								var rec = store.getAt(o.index);
+								EExt.example.msg('Item Selected', 'You chose {0}.', rec.get('value'));
+							}
+						}
+			        }]}]
+				},{
+					columnWidth:.50,
+	                style:'padding:5px 5px 5px 5px',
+	                items:[{
+						xtype:'panel',
+						iconCls:'chart',
+						title:'Memory',
+						id:"Glb_portal_a_certain_host_panel"+"_ip_"+ip+"_memory_panel",
+				        width: Glb.portal.chart_height,
+				        height: Glb.portal.chart_width,
+						// offsets:'5,40,5,5',
+						borderWidth:1,
+						tools:[{
+				              id:'refresh',
+				              on:{
+								  click: function(obj){
+				                      var chart = Ext.getCmp("Glb_portal_a_certain_host_panel"+"_ip_"+ip+"_memory_chart");
+									  var panel = Ext.getCmp("Glb_portal_a_certain_host_panel"+"_ip_"+ip+"_memory_panel");
+				                      panel.body.mask('Loading', 'x-mask-loading');
+				                      chart.store.reload();
+				                      setTimeout(function(){
+				                          panel.body.unmask();
+				                      }, 1000);
+				                  }
+				              },
+							  qtip:'Refresh Memory Chart.'
+				          }],
+						items:[{
+						/*memory pie graph report*/
+						id:"Glb_portal_a_certain_host_panel"+"_ip_"+ip+"_memory_chart",
+						url:'/ext-3.0.0/resources/charts.swf',
+			            store: new Ext.data.Store({
+						    proxy: new Ext.data.HttpProxy({url: '/host/proc/meminfo/?ip='+ip, method: 'GET'}),
+					        reader: new Ext.data.JsonReader({
+					          	root: "root",
+						        fields:
+								[
+						        {name: 'type', mapping: 'type'},
+					            {name: 'count', mapping: 'count'}
+					        	]
+							})
+					    }),
+			            xtype: 'piechart',
+			            dataField: 'count',
+			            categoryField: 'type',
+			            //extra styles get applied to the chart defaults
+			            extraStyle:{
+			                legend:
+			                {
+			                    display: 'bottom',
+			                    padding: 5,
+			                    font:
+			                    {
+			                        family: 'Tahoma',
+			                        size: 13
+			                    }
+			                }
+			            }
+			        }]},{
+						xtype:'panel',
+						iconCls:'chart',
+						title:'Disk',
+						id:"Glb_portal_a_certain_host_panel"+"_ip_"+ip+"_disk_panel",
+				        width: Glb.portal.chart_height,
+				        height: Glb.portal.chart_width,
+						// offsets:'5,40,5,5',
+						borderWidth:1,
+						tools:[{
+				              id:'refresh',
+				              on:{
+								  click: function(obj){
+				                      var chart = Ext.getCmp("Glb_portal_a_certain_host_panel"+"_ip_"+ip+"_disk_chart");
+									  var panel = Ext.getCmp("Glb_portal_a_certain_host_panel"+"_ip_"+ip+"_disk_panel");
+				                      panel.body.mask('Loading', 'x-mask-loading');
+				                      chart.store.reload();
+				                      setTimeout(function(){
+				                          panel.body.unmask();
+				                      }, 1000);
+				                  }
+				              },
+							  qtip:'Refresh Disk Chart.'
+				          }],
+						items:[{
+						/*disk pie graph report*/
+						id:"Glb_portal_a_certain_host_panel"+"_ip_"+ip+"_disk_chart",
+						url:'/ext-3.0.0/resources/charts.swf',
+			            store: new Ext.data.Store({
+						    proxy: new Ext.data.HttpProxy({url: '/host/proc/df/?ip='+ip, method: 'GET'}),
+				            reader: new Ext.data.JsonReader({
+				            	root: "root",
+					            fields:
+								[
+					        	{name: 'type', mapping: 'type'},
+					            {name: 'count', mapping: 'count'}
+								]
+					        })
+					    }),
+			            xtype: 'piechart',
+			            dataField: 'count',
+			            categoryField: 'type',
+			            //extra styles get applied to the chart defaults
+			            extraStyle:{
+			                legend:
+			                {
+			                    display: 'bottom',
+			                    padding: 5,
+			                    font:
+			                    {
+			                        family: 'Tahoma',
+			                        size: 13
+			                    }
+			                }
+			            }
+			        }]}]					
+				}]
+			},{
+				/*Process List Grid*/
+				/*in this host*/
+				/*and it's an entrance to show a certain process info*/
+				colspan: 2,
+				xtype: 'panel',
+				items:[
+					new Ext.grid.GridPanel({
+						id:"Glb_portal_a_certain_host_panel"+"_ip_"+ip+"_processes_info",
+					    store: new Ext.data.Store({
+						      proxy: new Ext.data.HttpProxy({url: '/host/process/grid/?ip='+ip, method: 'GET'}),
+					          reader: new Ext.data.JsonReader({
+					          root: "root",
+					        }, [
+								{name: 'pid', mapping: 'pid'},
+								{name: 'cwd', mapping: 'cwd'},
+								{name: 'exe', mapping: 'exe'},
+					        	{name: 'root', mapping: 'root'},
+					            {name: 'memory', mapping: 'memory'},
+								{name: 'cmdline', mapping: 'cmdline'}
+					        ])
+					    }),
+					    colModel: new Ext.grid.ColumnModel({
+					        defaults: {
+					            width: 120,
+					            sortable: true
+					        },
+					        columns: [
+								{header: 'Pid', sortable: true, dataIndex: 'pid'},
+					            {header: 'Cpu(%)', sortable: true, dataIndex: 'cpu'},
+					            {header: 'cwd', sortable: true, dataIndex: 'cwd'},
+								{header: 'exe', sortable: true, dataIndex: 'exe'},
+								{header: 'root', sortable: true, dataIndex: 'root'},
+								{header: 'Mem(m)', sortable: true, dataIndex: 'memory'},
+					            {header: 'Cmd', dataIndex: 'cmdline'}
+					        ],
+					    }),
+					    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
+					    autoWidth: true,
+					    autoHeight: true,
+					    frame: true,
+					    title: 'Processes in '+name,
+					    iconCls: 'icon-grid'
+					})
+				]
+			}]
+		})
+	};
+	
+/*
+	Line chart store's data struct:
+*/	
+	var LineChartRecord = Ext.data.Record.create([
+	    {name: 'value', type: 'int'},
+	    {name: 'time', type: 'string'}
+	]);
+	
+	Glb.portal.insert_a_new_record_to_linechart = function(chart,record) {
+		// record = '{"value":6.0,"time":"09-28 14h:12m:24s"}'
+		var store = chart.store;
+		var rec = new LineChartRecord(Ext.util.JSON.decode(record));
+		store.add(rec);
+	}
+	
+/*
+	doLayout
+*/
+	Glb.outer_west.add(Glb.portal.hosts_tree);
+	// Glb.outer_west.add(Glb.portal.traffic_monitor_panel);
+	Glb.outer_west.doLayout();
+	Glb.outer_center.add(Glb.portal.tab_panel);
+	Glb.outer_center.doLayout();
+}
+
+
+
+
+
+
+
+
+
+