- Completely revamped welcome page and configuration management overview in order to streamline the configuration menu.

SVN:trunk[821]
2026-04-20 09:08:42 +02:00 · 2010-09-11 20:37:42 +00:00
parent cfa54ccb43
commit 85dfd8527d
10 changed files with 467 additions and 133 deletions
--- a/application/itopwebpage.class.inc.php
+++ b/application/itopwebpage.class.inc.php
@@ -101,7 +101,22 @@ class iTopWebPage extends NiceWebPage
 					 			SetUserPreference('menu_pane', 'open', true);
 					 		}
 					 	}
-					}
+					},
+			center:	{
+					 	onresize_end: function(name, elt, state, options, layout)
+					 	{
+					 			$('.v-resizable').each( function() {
+					 				var fixedWidth = $(this).parent().innerWidth() - 6;
+					 				$(this).width(fixedWidth);
+					 				// Make sure it cannot be resized horizontally
+									$(this).resizable('options', { minWidth: fixedWidth, maxWidth:  fixedWidth });
+									// Now adjust all the child 'items'
+					 				var innerWidth = $(this).innerWidth() - 10;
+					 				$(this).find('.item').width(innerWidth);
+					 			});
+					 	}
+				
+				 	}
 		});
 		myLayout.addPinBtn( "#tPinMenu", "west" );
 		//myLayout.open( "west" );
@@ -227,6 +242,67 @@ class iTopWebPage extends NiceWebPage
 			changeYear: true
 		});
 	$('.resizable').resizable(); // Make resizable everything that claims to be resizable !
+	// Adjust initial size
+	$('.v-resizable').each( function()
+		{
+			var parent_id = $(this).parent().id;
+			// Restore the saved height
+			var iHeight = GetUserPreference(parent_id+'_'+this.id+'_height', undefined);
+			if (iHeight != undefined)
+			{
+				$(this).height(parseInt(iHeight, 10)); // Parse in base 10 !);
+			}
+			// Adjust the child 'item''s height and width to fit
+			var container = $(this);
+			var fixedWidth = container.parent().innerWidth() - 6;
+			// Set the width to fit the parent
+			$(this).width(fixedWidth);
+			var headerHeight = $(this).find('.drag_handle').height();
+			// Now adjust the width and height of the child 'item'
+			container.find('.item').height(container.innerHeight() - headerHeight - 12).width(fixedWidth - 10);
+		}
+	);
+	// Make resizable, vertically only everything that claims to be v-resizable !
+	$('.v-resizable').resizable( { handles: 's', minHeight: $(this).find('.drag_handle').height(), minWidth: $(this).parent().innerWidth() - 6, maxWidth: $(this).parent().innerWidth() - 6, stop: function()
+		{
+			// Adjust the content
+			var container = $(this);
+			var headerHeight = $(this).find('.drag_handle').height();
+			container.find('.item').height(container.innerHeight() - headerHeight - 12);//.width(container.innerWidth());
+			var parent_id = $(this).parent().id;
+			SetUserPreference(parent_id+'_'+this.id+'_height', $(this).height(), true); // true => persistent
+		}
+	} );
+	// Restore the persisted sortable order, for all sortable lists... if any
+	$('.sortable').each(function()
+	{
+		var sTemp = GetUserPreference(this.id+'_order', undefined);
+		if (sTemp != undefined)
+		{
+			var aSerialized = sTemp.split(',');
+			var sortable = $(this);
+		    $.each(aSerialized, function(i,v) {
+		      var item = $('#menu_'+v);
+		      if (item.length >  0) // Check that the menu exists
+		      {
+		      		sortable.append(item);
+		      }
+		    });
+		}
+	});
+
+	// Make sortable, everything that claims to be sortable
+	$('.sortable').sortable( {axis: 'y', cursor: 'move', handle: '.drag_handle', stop: function()
+		{
+			if ($(this).hasClass('persistent'))
+			{
+				// remember the sort order for next time the page is loaded...
+				sSerialized = $(this).sortable('serialize', {key: 'menu'});
+				var sTemp = sSerialized.replace(/menu=/g, '');
+				SetUserPreference(this.id+'_order', sTemp.replace(/&/g, ','), true); // true => persistent !
+			}
+		}
+	});
 	docWidth = $(document).width();
 	$('#ModalDlg').dialog({ autoOpen: false, modal: true, width: 0.8*docWidth }); // JQuery UI dialogs
 	ShowDebug();
--- a/application/template.class.inc.php
+++ b/application/template.class.inc.php
@@ -86,7 +86,6 @@ class DisplayTemplate
 			$iStart = $iEnd;
 			$iEnd = strlen($this->m_sTemplate); 
 			$iCount++;
-			if ($iCount > 10) break; //@@@ Why ?? Debug ??
 		}
 		$oPage->add(substr($this->m_sTemplate, $iAfterTagPos));
 	}
--- a/application/templates/welcome_menu.html
+++ b/application/templates/welcome_menu.html
@@ -1,114 +1,201 @@
-<div style="width:100%;background: url(../images/welcome.jpg) top left no-repeat;">
 <style>
-.dashboard {
-vertical-align:top;
-width:50%;
-border:0px solid #000;
-background-color:#F9F9F1;
-padding:10px;
-text-align:left;
-font-size:10pt;
+.main_container {
+	width: 100%;
+	border: 0;
+	overflow-y: hidden;
+	overflow-x: hidden;
+	margin-bottom: 5px;
+	margin-top: 5px;
+	border-bottom: #ccc 1px solid;
+	border-top: #ccc 1px solid;
 }
-.dashboard2 {
-vertical-align:top;
-width:50%;
-border:0px solid #000;
-moz-border-radius:10px;
-padding:5px;
-text-align:left;
+.main_header {
+	width:100%;
+	height: 60px;
+	cursor: move;
+	background-color: #F1F1F6;
+}
+.main_header h1 {
+	color: #1C94C4;
+	margin-top:0;
+	margin-bottom:0;
+	padding-top: 10px;
+	padding-bottom: 10px;p
+	font-size: 16px;
+	line-height: 16px;
+}
+.main_header img {
+	margin-top: 10px;
+	margin-right: 10px;
+	float:left;
+}
+.item {
+	overflow-y: auto;
+	overflow-x: hidden;
+	background-color: #fff;
+	padding: 5px;
+	height: auto;
+}
+.main_menu {
+	overflow-y: auto;
+	overflow-x: hidden;
+	height: auto;
+	background-color: #eee;
+	width: 100%;
+}
+.element {
+	display: inline-block;
+}
+.element a {
+	font-size: 10px;
+}
+.element a.actions {
+	font-size: 16px;
+	text-decoration: none;
+	background: transparent;
+	color: #666;
+}
+.element a img {
+	border: 0;
+}
+.summary-details {
+	float:right;
+	margin-top: 5px;
 }

-td.dashboard li {
-margin-top: 5px;
-display: list-item;
+.summary-details td {
+	text-align: center;
+	background: transparent;
+	padding: 5px;
 }
-td div.display_block {
-padding:0;
+.summary-details th {
+	text-align: center;
+	background: #CCC;
+	padding: 5px;
+	color: #eee;
+}
+a.summary {
+	text-decoration: none;
+	background: transparent;
+	color: #666;
+}
+a.summary:hover {
+	text-decoration: underline;
 }
 </style>
-<p></p>
-<p></p>
-<p style="text-align:left; font-size:32px;padding-left:400px;padding-top:40px;margin-bottom:30px;margin-top:0;color:#FFFFFF;"><itopstring>UI:WelcomeMenu:Title</itopstring></p>
-<p></p>
-<table border="0" style="padding:10px;border-spacing: 10px;width:100%">
-<tr>
-<td class="dashboard2">
+<script>
+var sSerialized = '';
+function DumpPositions()
+{
+	sSerialized = $('.sortable').sortable('serialize', {key: 'menu'});
+	alert(sSerialized);
+}
+
+function RestorePositions()
+{	height: auto;
+    var arr = $('#main_menu .main_container').get();    
+    arr.reverse();
+
+	var sTemp = sSerialized.replace(/menu=/g, '');
+	alert(sTemp);
+	var aSerialized = sTemp.split('&');
+	console.log(aSerialized);
+    $.each(aSerialized, function(i,v) {
+      console.log(i+' => '+v);
+      var $menu = $('#menu_'+v);
+      if ($menu.length >  0) // Check that the menu exists
+      {
+      	$('#main_menu').append($menu);
+      }
+    });
+}
+</script>
+<div id="main_menu" class="sortable persistent">
+
+<div id="menu_1" class="main_container v-resizable">
+
+<div class="main_header drag_handle" id="main_cfg">
+
+<img src="../modules/itop-config-mgmt-1.0.0/images/database.png"/>
+<itopblock BlockClass="DisplayBlock" type="summary" asynchronous="false" encoding="text/oql" parameters="title[block]:Menu_ConfigManagement;context_filter:1;label[block]:UI_WelcomeMenu_AllConfigItems;status[block]:status;status_codes[block]:implementation,production,obsolete">SELECT FunctionalCI</itopblock>
+
+</div>
+
+<div class="item">
+
+<div class="element">
+<itopcheck class="BusinessProcess">
+<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql" parameters="context_filter:1">SELECT BusinessProcess</itopblock>
+</itopcheck>
+</div>
+
+<div class="element">
+<itopcheck class="Contact">
+<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql" parameters="context_filter:1">SELECT Contact</itopblock>
+</itopcheck>
+</div>
+
+<div class="element">
+<itopcheck class="Location">
+<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql" parameters="context_filter:1">SELECT Location</itopblock>
+</itopcheck>
+</div>
+
+<div class="element">
+<itopcheck class="Server">
+<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql" parameters="context_filter:1">SELECT Server</itopblock>
+</itopcheck>
+</div>
+
+<div class="element">
+<itopcheck class="DatabaseInstance">
+<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql" parameters="context_filter:1">SELECT DatabaseInstance</itopblock>
+</itopcheck>
+</div>
+
+<div class="element">
+<itopcheck class="NetworkDevice">
+<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql" parameters="context_filter:1">SELECT NetworkDevice</itopblock>
+</itopcheck>
+</div>
+
+</div>
+</div>
+
 <itopcheck class="UserRequest">
-<img src="../modules/itop-request-mgmt-1.0.0/images/user-request.png" style="float:left"></img>
-<p style="text-align:left; font-family:Verdana, Arial, sans-serif; font-size:16px;"><itopstring>Request Management</itopstring></p>
-<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql">SELECT UserRequest</itopblock>
+
+<div id="menu_2" class="main_container v-resizable">
+
+<div class="main_header drag_handle" id="main_helpdesk">
+<img src="../modules/itop-request-mgmt-1.0.0/images/user-request-deadline.png"/>
+<itopblock BlockClass="DisplayBlock" type="summary" asynchronous="false" encoding="text/oql" parameters="title[block]:Menu_RequestManagement;context_filter:1;label[block]:UI_WelcomeMenu_AllOpenRequests;status[block]:status;status_codes[block]:new,assigned,escalated_tto,escalated_ttr,resolved">SELECT UserRequest WHERE status != "closed"</itopblock>
+</div>
+
+<div class="item">
 <p style="text-align:left; font-family:Verdana, Arial, sans-serif; font-size:14px;"><itopstring>UI:WelcomeMenu:MyCalls</itopstring></p>
 <itopblock BlockClass="DisplayBlock" type="list" asynchronous="false" encoding="text/oql" parameters="menu:0">SELECT UserRequest AS i WHERE i.caller_id = :current_contact_id AND status NOT IN ("closed", "resolved")</itopblock>
+</div>
+
+</div>
+
 </itopcheck>
-</td>
-<td class="dashboard2">
+
 <itopcheck class="Incident">
-<img src="../modules/itop-incident-mgmt-1.0.0/images/incident-deadline.png" style="float:left"></img>
-<p style="text-align:left; font-family:Verdana, Arial, sans-serif; font-size:16px;"><itopstring>Incident Management</itopstring></p>
-<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql">SELECT Incident</itopblock>
+
+<div id="menu_3" class="main_container v-resizable">
+
+<div class="main_header drag_handle" id="main_incident">
+<img src="../modules/itop-incident-mgmt-1.0.0/images/incident-escalated.png"/>
+<itopblock BlockClass="DisplayBlock" type="summary" asynchronous="false" encoding="text/oql" parameters="title[block]:Menu_IncidentManagement;context_filter:1;label[block]:UI_WelcomeMenu_OpenIncidents;status[block]:status;status_codes[block]:new,assigned,escalated_tto,escalated_ttr,resolved">SELECT Incident WHERE status != "closed"</itopblock>
+</div>
+
+<div class="item">
 <p style="text-align:left; font-family:Verdana, Arial, sans-serif; font-size:14px;"><itopstring>UI:WelcomeMenu:MyIncidents</itopstring></p>
 <itopblock BlockClass="DisplayBlock" type="list" asynchronous="false" encoding="text/oql" parameters="menu:0">SELECT Incident AS i WHERE i.agent_id = :current_contact_id AND status NOT IN ("closed", "resolved")</itopblock>
-</itopcheck>
-</td>
-</tr>
-<tr>
-<td colspan="2" width="100%">
-<p style="text-align:left; font-family:Verdana, Arial, sans-serif; font-size:16px;"><itopstring>Configuration Management</itopstring></p>
-<table border="0" style="border-spacing: 10px;width:100%">
-<tr>
-<td>
-<itopcheck class="BusinessProcess">
-<img src="../modules/itop-config-mgmt-1.0.0/images/business-process.png" style="float:left"></img>
-<p style="text-align:left; font-family:Verdana, Arial, sans-serif; font-size:16px;"><itopstring>Class:BusinessProcess</itopstring></p>
-<itopblock BlockClass="DisplayBlock" type="count" asynchronous="false" encoding="text/oql" parameters="format:UI_CountOfObjectsShort">SELECT BusinessProcess</itopblock></p>
-<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql">SELECT BusinessProcess</itopblock>
-</itopcheck>
-</td>
-<td>
-<itopcheck class="Contact">
-<img src="../modules/itop-config-mgmt-1.0.0/images/team.png" style="float:left"></img>
-<p style="text-align:left; font-family:Verdana, Arial, sans-serif; font-size:16px;"><itopstring>Class:Contact</itopstring></p>
-<itopblock BlockClass="DisplayBlock" type="count" asynchronous="false" encoding="text/oql" parameters="format:UI_CountOfObjectsShort">SELECT Contact</itopblock></p>
-<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql">SELECT Contact</itopblock>
-</itopcheck>
-</td>
-<td>
-<itopcheck class="Location">
-<img src="../modules/itop-config-mgmt-1.0.0/images/location.png" style="float:left"></img>
-<p style="text-align:left; font-family:Verdana, Arial, sans-serif; font-size:16px;"><itopstring>Class:Location</itopstring></p>
-<itopblock BlockClass="DisplayBlock" type="count" asynchronous="false" encoding="text/oql" parameters="format:UI_CountOfObjectsShort">SELECT Location</itopblock></p>
-<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql">SELECT Location</itopblock>
-</itopcheck>
-</td>
-</tr>
-<tr>
-<td>
-<itopcheck class="Server">
-<img src="../modules/itop-config-mgmt-1.0.0/images/server.png" style="float:left"></img>
-<p style="text-align:left; font-family:Verdana, Arial, sans-serif; font-size:16px;"><itopstring>Class:Server</itopstring>
-<itopblock BlockClass="DisplayBlock" type="count" asynchronous="false" encoding="text/oql" parameters="format:UI_CountOfObjectsShort">SELECT Server</itopblock></p>
-<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql">SELECT Server</itopblock>
-</itopcheck>
-</td>
-<td>
-<itopcheck class="DatabaseInstance">
-<img src="../modules/itop-config-mgmt-1.0.0/images/database.png" style="float:left"></img>
-<p style="text-align:left; font-family:Verdana, Arial, sans-serif; font-size:16px;"><itopstring>Class:DatabaseInstance</itopstring></p>
-<itopblock BlockClass="DisplayBlock" type="count" asynchronous="false" encoding="text/oql" parameters="format:UI_CountOfObjectsShort">SELECT DatabaseInstance</itopblock></p>
-<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql">SELECT DatabaseInstance</itopblock>
-</itopcheck>
-</td>
-<td>
-<itopcheck class="NetworkDevice">
-<img src="../modules/itop-config-mgmt-1.0.0/images/interface.png" style="float:left"></img>
-<p style="text-align:left; font-family:Verdana, Arial, sans-serif; font-size:16px;"><itopstring>Class:NetworkDevice</itopstring></p>
-<itopblock BlockClass="DisplayBlock" type="count" asynchronous="false" encoding="text/oql" parameters="format:UI_CountOfObjectsShort">SELECT NetworkDevice</itopblock></p>
-<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql">SELECT NetworkDevice</itopblock>
-</itopcheck>
-</td>
-</tr>
-</table>
-</td>
-</tr>
-</table>
+</div>
+
+</itopcheck>
+
+</div>
+
 </div>
--- a/core/metamodel.class.php
+++ b/core/metamodel.class.php
@@ -315,7 +315,7 @@ abstract class MetaModel
 			return self::GetClassDescription($sClass);
 		}
 	}
-	final static public function GetClassIcon($sClass, $bImgTag = true)
+	final static public function GetClassIcon($sClass, $bImgTag = true, $sMoreStyles = '')
 	{
 		self::_check_subclass($sClass);

@@ -334,7 +334,7 @@ abstract class MetaModel
 		}
 		if ($bImgTag && ($sIcon != ''))
 		{
-			$sIcon = "<img src=\"$sIcon\" style=\"vertical-align:middle;\"/>";
+			$sIcon = "<img src=\"$sIcon\" style=\"vertical-align:middle;$sMoreStyles\"/>";
 		}
 		return $sIcon;
 	}
--- a/dictionaries/dictionary.itop.ui.php
+++ b/dictionaries/dictionary.itop.ui.php
@@ -318,8 +318,10 @@ Dict::Add('EN US', 'English', 'English', array(
 <li>Manage the most important asset of your IT: Documentation.</li>
 </ul>
 </p>',
-
+	'UI:WelcomeMenu:AllOpenRequests' => 'Open requests: %1$d',
 	'UI:WelcomeMenu:MyCalls' => 'My requests',
+	'UI:WelcomeMenu:OpenIncidents' => 'Open incidents: %1$d',
+	'UI:WelcomeMenu:AllConfigItems' => 'Configuration Items: %1$d',
 	'UI:WelcomeMenu:MyIncidents' => 'Incidents assigned to me',
 	'UI:AllOrganizations' => ' All Organizations ',
 	'UI:YourSearch' => 'Your Search',
@@ -352,7 +354,7 @@ Dict::Add('EN US', 'English', 'English', array(
 	'UI:Button:ResetPassword' => ' Reset Password ',
 	
 	'UI:SearchToggle' => 'Search',
-	'UI:ClickToCreateNew' => 'Click here to create a new %1$s',
+	'UI:ClickToCreateNew' => 'Create a new %1$s',
 	'UI:SearchFor_Class' => 'Search for %1$s objects',
 	'UI:NoObjectToDisplay' => 'No object to display.',
 	'UI:Error:MandatoryTemplateParameter_object_id' => 'Parameter object_id is mandatory when link_attr is specified. Check the definition of the display template.',
@@ -836,6 +838,8 @@ When associated with a trigger, each action is given an "order" number, specifyi
 	'UI:PasswordConfirm' => '(Confirm)',
 	'UI:BeforeAdding_Class_ObjectsSaveThisObject' => 'Before adding more %1$s objects, save this object.',
 	'UI:DisplayThisMessageAtStartup' => 'Display this message at startup',
+	'UI:RelationshipGraph' => 'Graphical view',
+	'UI:RelationshipList' => 'List',

 	'Portal:Title' => 'iTop user portal',
 	'Portal:Refresh' => 'Refresh',
--- a/dictionaries/fr.dictionary.itop.ui.php
+++ b/dictionaries/fr.dictionary.itop.ui.php
@@ -319,7 +319,10 @@ Dict::Add('FR FR', 'French', 'Français', array(
 </ul>
 </p>',

+	'UI:WelcomeMenu:AllOpenRequests' => 'Requêtes en cours: %1$d',
 	'UI:WelcomeMenu:MyCalls' => 'Mes Appels Support',
+	'UI:WelcomeMenu:OpenIncidents' => 'Incidents en cours: %1$d',
+	'UI:WelcomeMenu:AllConfigItems' => 'Actifs: %1$d',
 	'UI:WelcomeMenu:MyIncidents' => 'Mes Incidents',
 	'UI:AllOrganizations' => ' Toutes les Organizations ',
 	'UI:YourSearch' => 'Votre recherche',
@@ -354,7 +357,7 @@ Dict::Add('FR FR', 'French', 'Français', array(
 	
 	'UI:SearchToggle' => 'Recherche',

-	'UI:ClickToCreateNew' => 'Cliquez ici pour créer un nouvel objet de type %1$s',
+	'UI:ClickToCreateNew' => 'Créer un nouvel objet de type %1$s',
 	'UI:NoObjectToDisplay' => 'Aucun objet à afficher.',
 	'UI:Error:MandatoryTemplateParameter_object_id' => 'Le paramètre object_id est obligatoire quand link_attr est spécifié. Vérifiez la définition du modèle.',
 	'UI:Error:MandatoryTemplateParameter_link_attr' => 'Le paramètre target_attr est obligatoire quand link_attr est spécifié. Vérifiez la définition du modèle.',
@@ -846,6 +849,8 @@ Lors de l\'association à un déclencheur, on attribue à chaque action un numé
 	'UI:PasswordConfirm' => '(Confirmer)',
 	'UI:BeforeAdding_Class_ObjectsSaveThisObject' => 'Enregistrez l\'objet courant avant de créer de nouveaux éléments de type %1$s.',
 	'UI:DisplayThisMessageAtStartup' => 'Afficher ce message au démarrage',
+	'UI:RelationshipGraph' => 'Vue graphique',
+	'UI:RelationshipList' => 'Liste',

 	'Portal:Title' => 'Portail utilisateur iTop',
 	'Portal:Refresh' => 'Rafraîchir',
--- a/modules/itop-config-mgmt-1.0.0/cis_menu.html
+++ b/modules/itop-config-mgmt-1.0.0/cis_menu.html
@@ -1,20 +1,175 @@
-<h1><itopstring>UI:ConfigurationManagementMenu:Title</itopstring></h1>
-<table border="0" padding="5" class="layout" width="100%">
-<tr>
-<td class="dashboard">
-<itopblock BlockClass="DisplayBlock" type="open_flash_chart" parameters="chart_type:pie;group_by:status;chart_title:UI-ConfigurationManagementMenu-InfraByStatus" asynchronous="false" encoding="text/oql">SELECT FunctionalCI</itopblock>
-</td>
-<td class="dashboard">
-<itopblock BlockClass="DisplayBlock" type="open_flash_chart" parameters="chart_type:bars;group_by:finalclass;chart_title:UI-ConfigurationManagementMenu-InfraByType" asynchronous="false" encoding="text/oql">SELECT FunctionalCI</itopblock>
-</td>
-</tr>
-<tr>
-<td class="dashboard">
-<h2><itopstring>UI-ConfigurationManagementMenu-InfraByType</itopstring></h2>
-<itopblock BlockClass="DisplayBlock" type="count" parameters="group_by:finalclass" asynchronous="false" encoding="text/oql">SELECT FunctionalCI</itopblock>
-</td>
-<td>
-&nbsp;
-</td>
-</tr>
-</table>
+<style>
+.main_container {
+	width: 100%;
+	border: 0;
+	overflow-y: hidden;
+	overflow-x: hidden;
+	margin-bottom: 5px;
+	margin-top: 5px;
+	border-bottom: #ccc 1px solid;
+	border-top: #ccc 1px solid;
+}
+.main_header {
+	width:100%;
+	height: 60px;
+	cursor: move;
+	background-color: #F1F1F6;
+}
+.main_header h1 {
+	color: #1C94C4;
+	margin-top:0;
+	margin-bottom:0;
+	padding-top: 10px;
+	padding-bottom: 10px;p
+	font-size: 16px;
+	line-height: 16px;
+}
+.main_header img {
+	margin-top: 10px;
+	margin-right: 10px;
+	float:left;
+}
+.item {
+	overflow-y: auto;
+	overflow-x: hidden;
+	background-color: #fff;
+	padding: 5px;
+	height: auto;
+}
+.main_menu {
+	overflow-y: auto;
+	overflow-x: hidden;
+	height: auto;
+	background-color: #eee;
+	width: 100%;
+}
+.element {
+	display: inline-block;
+}
+.element a {
+	font-size: 10px;
+}
+.element a.actions {
+	font-size: 16px;
+	text-decoration: none;
+	background: transparent;
+	color: #666;
+}
+.element a img {
+	border: 0;
+}
+.summary-details {
+	float:right;
+	margin-top: 5px;
+}
+
+.summary-details td {
+	text-align: center;
+	background: transparent;
+	padding: 5px;
+}
+.summary-details th {
+	text-align: center;
+	background: #CCC;
+	padding: 5px;
+	color: #eee;
+}
+a.summary {
+	text-decoration: none;
+	background: transparent;
+	color: #666;
+}
+a.summary:hover {
+	text-decoration: underline;
+}
+</style>
+<div id="ci_menu" class="sortable persistent">
+
+<!-- ######################################### -->
+
+<div id="menu_1" class="main_container v-resizable">
+
+<div class="main_header drag_handle" id="config_devices">
+<img src="../modules/itop-config-mgmt-1.0.0/images/server.png"/>
+<itopblock BlockClass="DisplayBlock" type="summary" asynchronous="false" encoding="text/oql" parameters="title[block]:Menu_ConfigManagement_Devices;context_filter:1;label[block]:Menu_ConfigManagement_AllDevices;status[block]:status;status_codes[block]:implementation,production,obsolete">SELECT Device</itopblock>
+</div><!-- Drag Handle -->
+
+<div class="item">
+<div class="element">
+<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql" parameters="context_filter:1">SELECT Server</itopblock>
+</div><!-- element -->
+
+<div class="element">
+<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql" parameters="context_filter:1">SELECT NetworkDevice</itopblock>
+</div><!-- element -->
+
+<div class="element">
+<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql" parameters="context_filter:1">SELECT PC</itopblock>
+</div><!-- element -->
+
+<div class="element">
+<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql" parameters="context_filter:1">SELECT MobilePhone</itopblock>
+</div><!-- element -->
+
+<div class="element">
+<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql" parameters="context_filter:1">SELECT Printer</itopblock>
+</div><!-- element -->
+
+</div><!-- item -->
+
+</div><!-- menu_1 -->
+
+<!-- ######################################### -->
+
+<div id="menu_2" class="main_container v-resizable">
+
+<div class="main_header drag_handle" id="config_applications">
+<img src="../modules/itop-config-mgmt-1.0.0/images/application.png"/>
+<h1><itopstring>Menu:ConfigManagement:SWAndApps</itopstring></h1>
+</div><!-- Drag Handle -->
+
+<div class="item">
+<div class="element">
+<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql" parameters="context_filter:1">SELECT ApplicationInstance</itopblock>
+</div><!-- element -->
+
+<div class="element">
+<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql" parameters="context_filter:1">SELECT DatabaseInstance</itopblock>
+</div><!-- element -->
+
+<div class="element">
+<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql" parameters="context_filter:1">SELECT Patch</itopblock>
+</div><!-- element -->
+
+<div class="element">
+<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql" parameters="context_filter:1">SELECT Licence</itopblock>
+</div><!-- element -->
+</div><!-- item -->
+
+</div><!-- menu_2 -->
+
+<!-- ######################################### -->
+
+<div id="menu_3" class="main_container v-resizable">
+
+<div class="main_header drag_handle" id="cfg_misc">
+<img src="../modules/itop-config-mgmt-1.0.0/images/subnet.png"/>
+<h1><itopstring>Menu:ConfigManagement:Misc</itopstring></h1>
+</div><!-- drag handle -->
+
+<div class="item">
+
+<div class="element">
+<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql" parameters="context_filter:1">SELECT NetworkInterface</itopblock>
+</div><!-- element -->
+
+<div class="element">
+<itopblock BlockClass="DisplayBlock" type="actions" asynchronous="false" encoding="text/oql" parameters="context_filter:1">SELECT Subnet</itopblock>
+</div><!-- element -->
+
+</div><!-- item -->
+</div><!-- menu_3 -->
+
+<!-- ######################################### -->
+
+</div>
--- a/modules/itop-config-mgmt-1.0.0/en.dict.itop-config-mgmt.php
+++ b/modules/itop-config-mgmt-1.0.0/en.dict.itop-config-mgmt.php
@@ -986,7 +986,11 @@ Dict::Add('EN US', 'English', 'English', array(
 'Menu:NewCI' => 'New CI',
 'Menu:NewCI+' => 'New CI',
 'Menu:SearchCIs' => 'Search for CIs',
-'Menu:SearchCIs+' => 'Search for CIs',
+'Menu:SearchCIs+' => 'Search for CIs',
+'Menu:ConfigManagement:Devices' => 'Devices',
+'Menu:ConfigManagement:AllDevices' => 'Number of devices: %1$d',
+'Menu:ConfigManagement:SWAndApps' => 'Software and Applications',
+'Menu:ConfigManagement:Misc' => 'Miscellaneous',

 ));
 ?>
--- a/modules/itop-config-mgmt-1.0.0/fr.dict.itop-config-mgmt.php
+++ b/modules/itop-config-mgmt-1.0.0/fr.dict.itop-config-mgmt.php
@@ -960,5 +960,9 @@ Dict::Add('FR FR', 'French', 'Français', array(
 'Menu:MobilePhone+' => 'Tous les téléphones portables',
 'Menu:PC' => 'Ordinateurs personnels',
 'Menu:PC+' => 'Tous les ordinateurs personnels',
+'Menu:ConfigManagement:Devices' => 'Equipements',
+'Menu:ConfigManagement:AllDevices' => 'Nombre d\'équipements: %1$d',
+'Menu:ConfigManagement:SWAndApps' => 'Logiciels et Applications',
+'Menu:ConfigManagement:Misc' => 'Divers',
 ));
 ?>
--- a/modules/itop-config-mgmt-1.0.0/model.itop-config-mgmt.php
+++ b/modules/itop-config-mgmt-1.0.0/model.itop-config-mgmt.php
@@ -1572,17 +1572,17 @@ new SearchMenuNode('SearchCIs', 'FunctionalCI', $oCINode->GetIndex(), 1 /* fRank
 new OQLMenuNode('BusinessProcess', 'SELECT BusinessProcess', $oCINode->GetIndex(), 2 /* fRank */);
 new OQLMenuNode('ApplicationSolution', 'SELECT ApplicationSolution', $oCINode->GetIndex(), 3 /* fRank */);

-$oSWNode = new TemplateMenuNode('ConfigManagementSoftware', '', $oCINode->GetIndex(), 4 /* fRank */);
-new OQLMenuNode('Licence', 'SELECT Licence', $oSWNode->GetIndex(), 0 /* fRank */);
-new OQLMenuNode('Patch', 'SELECT Patch', $oSWNode->GetIndex(), 1 /* fRank */);
-new OQLMenuNode('ApplicationInstance', 'SELECT SoftwareInstance', $oSWNode->GetIndex(), 2 /* fRank */);
+//$oSWNode = new TemplateMenuNode('ConfigManagementSoftware', '', $oCINode->GetIndex(), 4 /* fRank */);
+//new OQLMenuNode('Licence', 'SELECT Licence', $oSWNode->GetIndex(), 0 /* fRank */);
+//new OQLMenuNode('Patch', 'SELECT Patch', $oSWNode->GetIndex(), 1 /* fRank */);
+//new OQLMenuNode('ApplicationInstance', 'SELECT SoftwareInstance', $oSWNode->GetIndex(), 2 /* fRank */);

 $oHWNode = new TemplateMenuNode('ConfigManagementHardware', '', $oCINode->GetIndex(), 5 /* fRank */);
-new OQLMenuNode('Subnet', 'SELECT Subnet', $oHWNode->GetIndex(), 0 /* fRank */);
+//new OQLMenuNode('Subnet', 'SELECT Subnet', $oHWNode->GetIndex(), 0 /* fRank */);
 new OQLMenuNode('NetworkDevice', 'SELECT NetworkDevice', $oHWNode->GetIndex(), 1 /* fRank */);
 new OQLMenuNode('Server', 'SELECT Server', $oHWNode->GetIndex(), 2 /* fRank */);
 new OQLMenuNode('Printer', 'SELECT Printer', $oHWNode->GetIndex(), 3 /* fRank */);
-new OQLMenuNode('MobilePhone', 'SELECT MobilePhone', $oHWNode->GetIndex(), 4 /* fRank */);
+//new OQLMenuNode('MobilePhone', 'SELECT MobilePhone', $oHWNode->GetIndex(), 4 /* fRank */);
 new OQLMenuNode('PC', 'SELECT PC', $oHWNode->GetIndex(), 5 /* fRank */);

 ?>