From mboxrd@z Thu Jan  1 00:00:00 1970
From: kupcevic@sourceware.org <kupcevic@sourceware.org>
Date: 15 Oct 2006 05:09:47 -0000
Subject: [Cluster-devel] conga/luci site/luci/Extensions/StorageReport. ...
Message-ID: <20061015050947.20751.qmail@sourceware.org>
List-Id: <cluster-devel.redhat.com>
To: cluster-devel.redhat.com
MIME-Version: 1.0
Content-Type: text/plain; charset="us-ascii"
Content-Transfer-Encoding: 7bit

CVSROOT:	/cvs/cluster
Module name:	conga
Changes by:	kupcevic at sourceware.org	2006-10-15 05:09:46

Modified files:
	luci/site/luci/Extensions: StorageReport.py 
	luci/storage   : form-macros mappings_provider 

Log message:
	luci storage: cylinders' improvements (path tooltip, 'click me' directions, legend)

Patches:
http://sourceware.org/cgi-bin/cvsweb.cgi/conga/luci/site/luci/Extensions/StorageReport.py.diff?cvsroot=cluster&r1=1.14&r2=1.15
http://sourceware.org/cgi-bin/cvsweb.cgi/conga/luci/storage/form-macros.diff?cvsroot=cluster&r1=1.12&r2=1.13
http://sourceware.org/cgi-bin/cvsweb.cgi/conga/luci/storage/mappings_provider.diff?cvsroot=cluster&r1=1.2&r2=1.3

--- conga/luci/site/luci/Extensions/StorageReport.py	2006/10/14 20:01:52	1.14
+++ conga/luci/site/luci/Extensions/StorageReport.py	2006/10/15 05:09:46	1.15
@@ -1822,27 +1822,34 @@
     high_list = {}
     
     # upper cyl
-    upper_cyl = {'offset'   : 0,
-                 'cyls'     : [],
-                 'highs'    : [],
-                 'js'       : [],
-                 'color'    : 'blue'}
+    upper_cyl = {'offset'     : 0,
+                 'cyls'       : [],
+                 'highs'      : [],
+                 'js'         : [],
+                 'color'      : 'blue', 
+                 'color_css'  : '#0192db', 
+                 'description': mapper_data['pretty_targets_name']}
+    if mapper_data['mapper_type'] == MAPPER_PT_TYPE:
+        upper_cyl['description'] = 'Physical ' + upper_cyl['description']
+    
     offset = 0
     for t in mapper_data['targets_all']:
         if t['mapper_type'] == MAPPER_PT_TYPE:
             if t['props']['partition_type']['value'] == 'logical':
                 continue
         data = {}
-        data['bd']     = t
-        data['id']     = t['path']
+        data['bd']        = t
+        data['id']        = t['path']
         beg = offset
         end = beg + int(t['props']['size']['value'])
-        data['beg']    = beg
-        data['end']    = end
-        data['color']  = 'blue'
+        data['beg']       = beg
+        data['end']       = end
+        data['color']     = 'blue'
+        data['color_css'] = '#0192db'
         if mapper_data['mapper_type'] == MAPPER_PT_TYPE:
             if t['props']['partition_type']['value'] == 'extended' and not t['new']:
-                data['color'] = 'black'
+                data['color']     = 'black'
+                data['color_css'] = 'black'
         upper_cyl['cyls'].append(data)
         offset = end
     
@@ -1861,8 +1868,8 @@
                                    'id'   : h_id,
                                    'type' : 'select'})
         upper_cyl['js'].append([d['id'],
-                                [beg,
-                                 end]])
+                                [beg, end],
+                                d['bd']['pretty_name']])
         high_list[d['id']] = [h_id]
         
         # snapshots
@@ -1892,28 +1899,34 @@
     upper_cyl['js'] = str(upper_cyl['js']).replace('L,', ',').replace('L]', ']').replace('u\'', '\'').replace('L]', ']')
     
     # lower cylinder
-    lower_cyl = {'offset'   : 0,
-                 'cyls'     : [],
-                 'highs'    : [],
-                 'js'       : [],
-                 'color'    : 'red'}
+    lower_cyl = {'offset'     : 0,
+                 'cyls'       : [],
+                 'highs'      : [],
+                 'js'         : [],
+                 'color'      : 'red', 
+                 'color_css'  : '#a43737', 
+                 'description': mapper_data['pretty_sources_name']}
+    
     offset = 0
     for t in mapper_data['sources']:
         data = {}
-        data['bd']     = t
-        data['id']     = t['path']
+        data['bd']        = t
+        data['id']        = t['path']
         beg = offset
         end = beg + int(t['props']['size']['value'])
-        data['beg']    = beg
-        data['end']    = end
-        data['color']  = 'red'
+        data['beg']       = beg
+        data['end']       = end
+        data['color']     = 'red'
+        data['color_css'] = '#a43737'
         lower_cyl['cyls'].append(data)
         offset = end
     
     if mapper_data['mapper_type'] == MAPPER_PT_TYPE:
-        lower_cyl['cyls']  = []
-        lower_cyl['color'] = 'blue'
-        lower_cyl['offset'] = 9999999999999999999999999
+        lower_cyl['description'] = 'Logical ' + mapper_data['pretty_targets_name']
+        lower_cyl['cyls']        = []
+        lower_cyl['color']       = 'blue'
+        lower_cyl['color_css']   = '#0192db'
+        lower_cyl['offset']      = 9999999999999999999999999
         
         offset = 0
         for t in mapper_data['targets_all']:
@@ -1923,13 +1936,14 @@
             if part_beg < lower_cyl['offset']:
                 lower_cyl['offset'] = part_beg
             data = {}
-            data['bd']     = t
-            data['id']     = t['path']
+            data['bd']        = t
+            data['id']        = t['path']
             beg = offset
             end = beg + int(t['props']['size']['value'])
-            data['beg']    = beg
-            data['end']    = end
-            data['color']  = 'blue'
+            data['beg']       = beg
+            data['end']       = end
+            data['color']     = 'blue'
+            data['color_css'] = '#0192db'
             lower_cyl['cyls'].append(data)
             offset = end
             
@@ -1956,8 +1970,8 @@
                                    'id'   : h_id,
                                    'type' : 'select'})
         lower_cyl['js'].append([d['id'],
-                                [beg,
-                                 end]])
+                                [beg, end],
+                                d['bd']['pretty_name']])
         high_list[d['id']] = [h_id]
     lower_cyl['js'] = str(lower_cyl['js']).replace('L,', ',').replace('L]', ']').replace('u\'', '\'').replace('L]', ']')
     
--- conga/luci/storage/form-macros	2006/10/14 20:01:52	1.12
+++ conga/luci/storage/form-macros	2006/10/15 05:09:46	1.13
@@ -522,14 +522,14 @@
      <iframe style="border: none;"
              tal:attributes="src     python:'mappings_provider?storagename=' + storagename + '&mapper_id=' + mapper['mapper_id'] + '&selected_path=' + bd_path;
                              width   string:700px;
-                             height  string:180"></iframe>
+                             height  string:195"></iframe>
     </div>
     
     <div id="textual_view" 
          tal:attributes="class mappings_view_classnames/textual_view">
     <br/>
     <div>
-     <h3>
+     <h3 style="font-size: small;">
       <span tal:omit-tag="" 
             tal:define="targets mapper/targets_all">
        <span tal:omit-tag="" 
@@ -551,7 +551,7 @@
     </div>
     <br/>
     <div>
-     <h3>
+     <h3 style="font-size: small;">
       <span tal:omit-tag="" 
             tal:define="sources mapper/sources">
        <span tal:omit-tag="" 
@@ -1431,7 +1431,7 @@
                             URL python:tmp_URL + '?storagename=' + storagename + '&pagetype=62'"
                 tal:attributes="href python:URL + '&mapper_type=' + bd_data['mapper_type'] + '&mapper_id=' + bd_data['mapper_id'] + '&bd_path=' + bd_data['path']"
                 style="font-size: xx-small;"
-                tal:content="python: 'Go to ' + bd_data['pretty_mapper_type']"></a>
+                tal:content="python: 'Go to ' + bd_data['pretty_mapper_type'] + ' view'"></a>
             </span>
            </span>
            <span tal:omit-tag=""
--- conga/luci/storage/mappings_provider	2006/10/07 01:04:01	1.2
+++ conga/luci/storage/mappings_provider	2006/10/15 05:09:46	1.3
@@ -136,14 +136,44 @@
          var y = Y;
          for (var i=0; i<c_data.length; i++) {
             var elem = c_data[i];
-            var id = elem[0];
+            var id   = elem[0];
             var beg  = elem[1][0];
             var end  = elem[1][1];
             if (x > beg && x < end)
                select_subcyl(id, h_data);
          }
       }
-
+      
+      
+      
+      
+      
+      function cyl_over(msg_board, X, Y, c_data, h_data) {
+         if (Y < 0 || Y > 40) {
+            msg_board.style.visibility = 'invisible';
+            return;
+         }
+         var x = X - ellipse(Y);
+         var y = Y;
+         for (var i=0; i<c_data.length; i++) {
+            var elem = c_data[i];
+            var beg  = elem[1][0];
+            var end  = elem[1][1];
+            if (x > beg && x < end) {
+               var descr = elem[2];
+               msg_board.innerHTML        = descr;
+               msg_board.style.width      = (descr.length + 1) + 'ex';
+               msg_board.style.left       = X - 35;
+               msg_board.style.top        = Y + 15;
+               msg_board.style.visibility = 'visible';
+               return;
+            }
+         }
+         msg_board.style.visibility = 'invisible';
+      }
+      
+      
+      
 
 
    </script>
@@ -176,16 +206,37 @@
 
 
 
-<span>
+<div>
+   
+   
+   
+
+   
+   
    
    <!-- upper cylinder -->
    <div tal:define="cyl       mapp_info/upper_cyl;
                     X_offset  python:X_offset + cyl['offset']"
         tal:condition="cyl/cyls"
-        tal:attributes="style python:here.add_commas('position:absolute', here.add_commas('left: ' + str(X_offset), 'top: ' + str(Y_offset)))">
+        tal:attributes="style  python:here.add_commas('position:absolute', here.add_commas('left: ' + str(X_offset), 'top: ' + str(Y_offset)))">
+    
+    <!-- description -->
+    <div tal:define="style_1         python:here.add_commas('left: -1em', 'top: -1.5ex');
+                     style_2         python:here.add_commas(style_1, 'position: absolute');
+                     style_3         python:here.add_commas(style_2, 'width: ' + str(cyl_width))"
+         tal:attributes="style style_3">
+     <div tal:define="style_1         python:here.add_commas('font-size: xx-small', 'text-align: left');
+                      style_2         python:here.add_commas(style_1, 'white-space: nowrap');
+                      style_3         python:here.add_commas(style_2, 'color: ' + cyl['color_css'])"
+          tal:attributes="style style_3">
+      <span tal:replace="cyl/description"/>:
+     </div>
+    </div>
     
     <div tal:define="one_temp_assignment  python:here.add_commas('position:absolute', here.add_commas('left: ' + str(curve_width), 'top: 0'))"
          tal:attributes="onmousedown  python:'cyl_click(event.clientX-' + str(curve_width) + '-' + str(X_offset) + ', event.clientY-' + str(Y_offset) + ', ' + cyl['js'] + ', ' + mapp_info['js'] + ')';
+                         onmousemove  python:'cyl_over(document.getElementById(\'upper_msg_board\'), event.clientX-' + str(curve_width) + '-' + str(X_offset) + ', event.clientY-' + str(Y_offset) + ', ' + cyl['js'] + ', ' + mapp_info['js'] + ')';
+                         onmouseout   python:'document.getElementById(\'upper_msg_board\').style.visibility = \'hidden\'';
                          style        python:here.add_commas('cursor: pointer', one_temp_assignment);
                          id           string:upper_cylinder">
      
@@ -198,20 +249,38 @@
       <div metal:use-macro="here/mappings_macros/macros/draw-highlights"/>
      </span>
      
+     <div id="upper_msg_board"
+          style="position: absolute; border: 2px solid black; padding: 2px; background-color: lightyellow; visibility: hidden; z-index: 100; white-space: nowrap;">
+     </div>
      
     </div>
    </div>
  
-
+   
    <!-- lower cylinder -->
    <div tal:define="cyl             mapp_info/lower_cyl;
                     lower_Y_offset  python:Y_offset + 80;
                     X_offset        python:X_offset + cyl['offset']"
         tal:condition="cyl/cyls"
-        tal:attributes="style python:here.add_commas('position:absolute', here.add_commas('left: ' + str(X_offset), 'top: ' + str(lower_Y_offset)))">
+        tal:attributes="style  python:here.add_commas('position:absolute', here.add_commas('left: ' + str(X_offset), 'top: ' + str(lower_Y_offset)))">
     
+    <!-- description -->
+    <div tal:define="style_1         python:here.add_commas('left: -1em', 'top: -1.5ex');
+                     style_2         python:here.add_commas(style_1, 'position: absolute');
+                     style_3         python:here.add_commas(style_2, 'width: ' + str(cyl_width))"
+         tal:attributes="style style_3">
+     <div tal:define="style_1         python:here.add_commas('font-size: xx-small', 'text-align: left');
+                      style_2         python:here.add_commas(style_1, 'white-space: nowrap');
+                      style_3         python:here.add_commas(style_2, 'color: ' + cyl['color_css'])"
+          tal:attributes="style style_3">
+      <span tal:replace="cyl/description"/>:
+     </div>
+    </div>
+     
     <div tal:define="one_temp_assignment  python:here.add_commas('position:absolute', here.add_commas('left: ' + str(curve_width), 'top: 0'))"
          tal:attributes="onmousedown  python:'cyl_click(event.clientX-' + str(curve_width) + '-' + str(X_offset) + ', event.clientY-' + str(lower_Y_offset) + ', ' + cyl['js'] + ', ' + mapp_info['js'] + ')'; 
+                         onmousemove  python:'cyl_over(document.getElementById(\'lower_msg_board\'), event.clientX-' + str(curve_width) + '-' + str(X_offset) + ', event.clientY-' + str(lower_Y_offset) + ', ' + cyl['js'] + ', ' + mapp_info['js'] + ')';
+                         onmouseout   python:'document.getElementById(\'lower_msg_board\').style.visibility = \'hidden\'';
                          style        python:here.add_commas('cursor: pointer', one_temp_assignment);
                          id           string:lower_cylinder">
      
@@ -224,12 +293,29 @@
       <div metal:use-macro="here/mappings_macros/macros/draw-highlights"/>
      </span>
      
+     <div id="lower_msg_board"
+          style="position: absolute; border: 2px solid black; padding: 2px; background-color: lightyellow; visibility: hidden; z-index: 100; white-space: nowrap;">
+     </div>
      
     </div>
    </div>
- 
-
-</span>
+   
+   
+   <!-- select me message -->
+   <div tal:define="cyl             mapp_info/lower_cyl;
+                    Y_offset        python:Y_offset + 80 + 40 + 10;
+                    X_offset        python:X_offset;
+                    style_1         python:here.add_commas('left: ' + str(X_offset), 'top: ' + str(Y_offset));
+                    style_2         python:here.add_commas('position: absolute', style_1);
+                    style_3         python:here.add_commas(style_2, 'width: ' + str(cyl_width))"
+        tal:attributes="style style_3">
+    <div style="font-size: x-small; text-align: center;">
+     Click cylinders to view properties, unselect all to view <span tal:replace="mapper/pretty_type"/>'s properties
+    </div>
+   </div>
+   
+   
+</div>