Преглед изворни кода

HUE-222. Add ability to configure visible table columns

plus:
* Updating JFrame Gallery to pass along various request properties for use in gallery demos.
* Sneaking in some cleanup of the accordion and htmltable.treeview.ajax demos
* This commit is only 1/3 evil (see bug number)
Aaron Newton пре 15 година
родитељ
комит
497385471c

+ 17 - 17
apps/jframegallery/src/jframegallery/templates/accordion.html

@@ -17,20 +17,20 @@ limitations under the License.
 {% endcomment %}
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
 <html>
-	<head>
-		<title>Accordion</title>
-	</head>
-	<body>
-          <p> Below is an accordion, only one of the target areas should be visible at a time, dependent on which toggle was clicked last. </p>
-          <div data-filters="Accordion">
-            <ul>
-              <li class="toggle">Toggle 1</li>
-              <li class="toggle">Toggle 2</li>
-              <li class="toggle">Toggle 3</li>
-            </ul>
-            <div class="target">This area is controlled by Toggle 1.</div>
-            <div class="target">This area is controlled by Toggle 2.</div>
-            <div class="target">This area is controlled by Toggle 3.</div>
-          </div>
-        </body>
-        </html>
+  <head>
+    <title>Accordion</title>
+  </head>
+  <body>
+  <div class="jframe_padded">
+    <p>Below is an accordion, only one of the target areas should be visible at a time, dependent on which toggle was clicked last. </p>
+    <div data-filters="Accordion" style="width: 300px; margin: 10px;">
+      <div class="toggle" style="cursor:pointer; background: #777; padding: 2px;">Toggle 1</div>
+      <div class="target" style="padding: 4px;">This area is controlled by Toggle 1.</div>
+      <div class="toggle" style="cursor:pointer; background: #777; padding: 2px;">Toggle 2</div>
+      <div class="target" style="padding: 4px;">This area is controlled by Toggle 2.</div>
+      <div class="toggle" style="cursor:pointer; background: #777; padding: 2px;">Toggle 3</div>
+      <div class="target" style="padding: 4px;">This area is controlled by Toggle 3.</div>
+    </div>
+  </div>
+</body>
+</html>

+ 116 - 0
apps/jframegallery/src/jframegallery/templates/html-table.configurable.columns.mako

@@ -0,0 +1,116 @@
+## Licensed to Cloudera, Inc. under one
+## or more contributor license agreements.  See the NOTICE file
+## distributed with this work for additional information
+## regarding copyright ownership.  Cloudera, Inc. licenses this file
+## to you under the Apache License, Version 2.0 (the
+## "License"); you may not use this file except in compliance
+## with the License.  You may obtain a copy of the License at
+##
+##     http://www.apache.org/licenses/LICENSE-2.0
+##
+## Unless required by applicable law or agreed to in writing, software
+## distributed under the License is distributed on an "AS IS" BASIS,
+## WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+## See the License for the specific language governing permissions and
+## limitations under the License.
+
+<%
+  data = [
+    {"id":56,"timezone":"Europe/Amsterdam","name":"Amsterdam","geo/lat":52.3789,"geo/long":4.90067},
+    {"id":46,"timezone":"America/New_York","name":"Atlanta","geo/lat":33.7525,"geo/long":-84.3888},
+    {"id":42,"timezone":"America/Chicago","name":"Austin","geo/lat":30.2669,"geo/long":-97.7428},
+    {"id":63,"timezone":"America/New_York","name":"Baltimore","geo/lat":39.294255,"geo/long":-76.614275},
+    {"id":24,"timezone":"America/New_York","name":"Boston","geo/lat":42.3583,"geo/long":-71.0603},
+    {"id":32,"timezone":"America/Chicago","name":"Chicago","geo/lat":41.8858,"geo/long":-87.6181},
+    {"id":64,"timezone":"America/New_York","name":"Cleveland","geo/lat":41.499819,"geo/long":-81.693716},
+    {"id":43,"timezone":"America/Chicago","name":"Dallas / Fort Worth","geo/lat":32.7887,"geo/long":-96.7676},
+    {"id":25,"timezone":"America/Denver","name":"Denver","geo/lat":39.734,"geo/long":-105.026},
+    {"id":47,"timezone":"America/New_York","name":"Detroit","geo/lat":42.3333,"geo/long":-83.0484},
+    {"id":48,"timezone":"America/Chicago","name":"Houston","geo/lat":29.7594,"geo/long":-95.3594},
+    {"id":66,"timezone":"America/New_York","name":"Indianapolis","geo/lat":39.767016,"geo/long":-86.156255},
+    {"id":65,"timezone":"America/Chicago","name":"Kansas City","geo/lat":39.090431,"geo/long":-94.583644},
+    {"id":49,"timezone":"America/Los_Angeles","name":"Las Vegas","geo/lat":36.1721,"geo/long":-115.122},
+    {"id":61,"timezone":"Europe/London","name":"London","geo/lat":51.50714,"geo/long":-0.126171},
+    {"id":34,"timezone":"America/Los_Angeles","name":"Los Angeles","geo/lat":34.0443,"geo/long":-118.251},
+    {"id":39,"timezone":"America/New_York","name":"Miami","geo/lat":25.7323,"geo/long":-80.2436},
+    {"id":67,"timezone":"America/Chicago","name":"Milwaukee","geo/lat":43.038902,"geo/long":-87.906474},
+    {"id":51,"timezone":"America/Chicago","name":"Minneapolis / St. Paul","geo/lat":44.9609,"geo/long":-93.2642},
+    {"id":70,"timezone":"America/New_York","name":"Montreal","geo/lat":45.545447,"geo/long":-73.639076},
+    {"id":52,"timezone":"America/Chicago","name":"New Orleans","geo/lat":29.9544,"geo/long":-90.075},
+    {"id":22,"timezone":"America/New_York","name":"New York City","geo/lat":40.7255,"geo/long":-73.9983},
+    {"id":72,"timezone":"America/Chicago","name":"Omaha","geo/lat":41.254006,"geo/long":-95.999258},
+    {"id":33,"timezone":"America/New_York","name":"Philadelphia","geo/lat":39.8694,"geo/long":-75.2731},
+    {"id":53,"timezone":"America/Phoenix","name":"Phoenix","geo/lat":33.4483,"geo/long":-112.073},
+    {"id":60,"timezone":"America/New_York","name":"Pittsburgh","geo/lat":40.4405,"geo/long":-79.9961},
+    {"id":37,"timezone":"America/Los_Angeles","name":"Portland","geo/lat":45.527,"geo/long":-122.685},
+    {"id":57,"timezone":"America/New_York","name":"Raleigh / Durham","geo/lat":35.7797,"geo/long":-78.6434},
+    {"id":73,"timezone":"America/New_York","name":"Richmond","geo/lat":37.542979,"geo/long":-77.469092},
+    {"id":71,"timezone":"America/Denver","name":"Salt Lake City","geo/lat":40.760779,"geo/long":-111.891047},
+    {"id":68,"timezone":"America/Chicago","name":"San Antonio","geo/lat":29.424122,"geo/long":-98.493628},
+    {"id":38,"timezone":"America/Los_Angeles","name":"San Diego","geo/lat":32.7153,"geo/long":-117.156},
+    {"id":23,"timezone":"America/Los_Angeles","name":"San Francisco","geo/lat":37.7587,"geo/long":-122.433},
+    {"id":41,"timezone":"America/Los_Angeles","name":"Seattle","geo/lat":47.6036,"geo/long":-122.326},
+    {"id":62,"timezone":"America/Chicago","name":"St. Louis","geo/lat":38.627491,"geo/long":-90.198417},
+    {"id":69,"timezone":"America/New_York","name":"Toronto","geo/lat":43.670233,"geo/long":-79.386755},
+    {"id":59,"timezone":"America/Vancouver","name":"Vancouver","geo/lat":49.259515,"geo/long":-123.103867},
+    {"id":31,"timezone":"America/New_York","name":"Washington, DC","geo/lat":38.8964,"geo/long":-77.0447}
+  ]
+  columns = ['id', 'timezone', 'name', 'geo/lat', 'geo/long']
+  active_columns = columns[:]
+  if get_var('show_columns') is not None:
+    active_columns = []
+    for col in get_list('show_columns'):
+        active_columns.append(columns[int(col)])
+%>
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html>
+  <head>
+    <title>Configurable Columns</title>
+  </head>
+  <body>
+    <table data-filters="HtmlTable">
+      <thead>
+        <tr>
+          % for i, col in enumerate(active_columns):
+            % if i == len(active_columns) - 1:
+              <th data-filters="CollapsingElements">
+                <a class="collapser ccs-table_config_link"></a>
+                ${col}
+                <form action="${request_path}" method="GET" class="ccs-hidden collapsible ccs-table_config">
+                  <ul>
+                    % for i, option in enumerate(columns):
+                      <%
+                        checked = ""
+                        if option in active_columns:
+                          checked = 'checked="checked"'
+                      %>
+                      <li><label><input type="checkbox" name="show_columns" value="${i}" ${checked}/> ${option}</label></li>
+                    % endfor
+                  </ul>
+                  <a class="ccs-checkAll" data-filters="ArtButton" data-check-group=".ccs-table_config input">checkAll</a>
+                  <a class="ccs-checkNone" data-filters="ArtButton" data-check-group=".ccs-table_config input">checkNone</a>
+                  <input type="submit" value="Apply" data-filters="ArtButton"/>
+                </form>
+              </th>
+            % else:
+              <th>${col}</th>
+            % endif
+          % endfor
+        </tr>
+      </thead>
+      <tbody>
+        % for d in data:
+          <tr>
+          % for name in active_columns:
+              <td>
+                ${d.get(name)}
+              </td>
+          % endfor
+          </tr>
+        % endfor
+      </tbody>
+    </table>
+    
+  </body>
+</head>

+ 1 - 1
apps/jframegallery/src/jframegallery/templates/html-table.treeview.ajax.mako

@@ -19,7 +19,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
 <html>
   <head>
-    <title>Process Viewer</title>
+    <title>HtmlTable Treeview w/ Ajax</title>
     <style>
     .table-depth-0>td:first-child { padding-left: 10px; }
     .table-depth-1>td:first-child { padding-left: 25px; }

+ 6 - 2
apps/jframegallery/src/jframegallery/views.py

@@ -48,12 +48,16 @@ def index(request):
 
 def show(request, path):
   post_vars = None
-  if (request.POST): post_vars = request.POST.iteritems()
+  if request.POST: post_vars = request.POST.iteritems()
   if request.REQUEST.get('sleep'):
     sleep = int(request.REQUEST.get('sleep'))
     time.sleep(sleep)
+  
   return render(path, request, dict(
-    post_vars = post_vars
+    post_vars = post_vars,
+    get_var = request.REQUEST.get,
+    get_list = request.REQUEST.getlist,
+    request_path = request.path
   ))
   
 def flash(request):

BIN
desktop/core/static/art/icons/small_cog.png


+ 36 - 1
desktop/core/static/css/shared.css

@@ -308,7 +308,42 @@ table[data-filters*=HtmlTable].treeView tr.table-expanded a.expand {
 	background: url(/static/art/divots.png) 0px -14px;
 }
 
-
+table a.ccs-table_config_link {
+	display: inline-block;
+	float: right;
+	width: 16px;
+	height: 16px;
+	background: url(../art/icons/small_cog.png);
+}
+table form.ccs-table_config {
+	position: absolute;
+	background: #fff;
+	border: 1px solid #777;
+	border-radius: 2px;
+	-moz-border-radius: 2px;
+	-webkit-border-radius: 2px;
+	min-width: 200px;
+	right: 25px;
+	top: 5px;
+}
+table form.ccs-table_config label {
+	display: block;
+}
+table form.ccs-table_config label:hover {
+	color: #36f;
+}
+table form.ccs-table_config ul {
+	padding: 2px;
+	max-height: 200px;
+	overflow: auto;
+	border-bottom:1px solid #777;
+}
+table form.ccs-table_config li {
+	padding: 2px;
+}
+table form.ccs-table_config .art {
+	margin: 4px;
+}
 /* stickywin solid; this is the login window styles */
 div.solid-win div.body-left { 
 	background: url(../art/sticky-win-solid-back.png); 

+ 12 - 11
desktop/core/static/js/Source/BehaviorFilters/Behavior.CollapsingElements.js

@@ -24,18 +24,19 @@ script: Behavior.Collapsible.js
 */
 
 Behavior.addGlobalFilters({
+
 	CollapsingElements: function(element, methods) {
-                element.addEvent('click:relay(.collapser)', function(event, clicked) {
-                        event.preventDefault();
-		        var togglers = element.getElements('.collapser');
-		        var sections = element.getElements('.collapsible');
-                        if(togglers.length != sections.length) {
-                                dbug.warn("CollapsingElements filter exiting; togglers length (%s) != sections length (%s)", togglers.length, sections.length);
-                                return;
-                        }
-                        var section = sections[togglers.indexOf(clicked)];
-                        if (section) section.get('reveal').toggle();
-                });
+		element.addEvent('click:relay(.collapser)', function(event, clicked) {
+			event.preventDefault();
+			var togglers = element.getElements('.collapser');
+			var sections = element.getElements('.collapsible');
+			if(togglers.length != sections.length) {
+				dbug.warn("CollapsingElements filter exiting; togglers length (%s) != sections length (%s)", togglers.length, sections.length);
+				return;
+			}
+			var section = sections[togglers.indexOf(clicked)];
+			if (section) section.get('reveal').toggle();
+		});
 	}
 
 });