You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@chukwa.apache.org by ey...@apache.org on 2013/08/26 01:32:39 UTC

svn commit: r1517396 - in /incubator/chukwa/trunk: ./ src/main/java/org/apache/hadoop/chukwa/datastore/ src/main/web/hicc/ src/main/web/hicc/css/ src/main/web/hicc/images/ src/main/web/hicc/js/ src/main/web/hicc/js/workspace/ src/main/web/hicc/jsp/

Author: eyang
Date: Sun Aug 25 23:32:38 2013
New Revision: 1517396

URL: http://svn.apache.org/r1517396
Log:
CHUKWA-695. Added ability to export widgets from graph explorer. (Eric Yang)

Added:
    incubator/chukwa/trunk/src/main/web/hicc/css/formalize.css   (with props)
    incubator/chukwa/trunk/src/main/web/hicc/images/button.png   (with props)
    incubator/chukwa/trunk/src/main/web/hicc/images/select_arrow.gif   (with props)
    incubator/chukwa/trunk/src/main/web/hicc/js/jquery.formalize.js   (with props)
Modified:
    incubator/chukwa/trunk/CHANGES.txt
    incubator/chukwa/trunk/NOTICE.txt
    incubator/chukwa/trunk/src/main/java/org/apache/hadoop/chukwa/datastore/WidgetStore.java
    incubator/chukwa/trunk/src/main/web/hicc/css/default.css
    incubator/chukwa/trunk/src/main/web/hicc/css/tab.css
    incubator/chukwa/trunk/src/main/web/hicc/index.jsp
    incubator/chukwa/trunk/src/main/web/hicc/js/workspace/workspace.js
    incubator/chukwa/trunk/src/main/web/hicc/jsp/graph_explorer.jsp

Modified: incubator/chukwa/trunk/CHANGES.txt
URL: http://svn.apache.org/viewvc/incubator/chukwa/trunk/CHANGES.txt?rev=1517396&r1=1517395&r2=1517396&view=diff
==============================================================================
--- incubator/chukwa/trunk/CHANGES.txt (original)
+++ incubator/chukwa/trunk/CHANGES.txt Sun Aug 25 23:32:38 2013
@@ -12,6 +12,8 @@ Release 0.6 - Unreleased
 
   NEW FEATURES
 
+    CHUKWA-695. Added ability to export widgets from graph explorer. (Eric Yang)
+
     CHUKWA-581. Added support for custom reducer package name. (Ivy Tang via Eric Yang)
 
     CHUKWA-669. JMX Adaptor.  (shreyas subramanya via asrabkin)

Modified: incubator/chukwa/trunk/NOTICE.txt
URL: http://svn.apache.org/viewvc/incubator/chukwa/trunk/NOTICE.txt?rev=1517396&r1=1517395&r2=1517396&view=diff
==============================================================================
--- incubator/chukwa/trunk/NOTICE.txt (original)
+++ incubator/chukwa/trunk/NOTICE.txt Sun Aug 25 23:32:38 2013
@@ -58,3 +58,5 @@ Copyright (c) 2008-2010, Ariel Rabkin
 This product includes JUnit
 Copyright (c) 2006 JUnit.org
 
+This product includes formalize
+Copyright (c) 2012 Nathan Smith, http://formalize.me/

Modified: incubator/chukwa/trunk/src/main/java/org/apache/hadoop/chukwa/datastore/WidgetStore.java
URL: http://svn.apache.org/viewvc/incubator/chukwa/trunk/src/main/java/org/apache/hadoop/chukwa/datastore/WidgetStore.java?rev=1517396&r1=1517395&r2=1517396&view=diff
==============================================================================
--- incubator/chukwa/trunk/src/main/java/org/apache/hadoop/chukwa/datastore/WidgetStore.java (original)
+++ incubator/chukwa/trunk/src/main/java/org/apache/hadoop/chukwa/datastore/WidgetStore.java Sun Aug 25 23:32:38 2013
@@ -63,7 +63,7 @@ public class WidgetStore {
       try {
         fs = FileSystem.get(config);
         FSDataOutputStream out = fs.create(widgetFile,true);
-        out.writeUTF(widget.deserialize().toString());
+        out.writeBytes(widget.deserialize().toString());
         out.close();
       } catch (IOException ex) {
         log.error(ExceptionUtil.getStackTrace(ex));

Modified: incubator/chukwa/trunk/src/main/web/hicc/css/default.css
URL: http://svn.apache.org/viewvc/incubator/chukwa/trunk/src/main/web/hicc/css/default.css?rev=1517396&r1=1517395&r2=1517396&view=diff
==============================================================================
--- incubator/chukwa/trunk/src/main/web/hicc/css/default.css (original)
+++ incubator/chukwa/trunk/src/main/web/hicc/css/default.css Sun Aug 25 23:32:38 2013
@@ -40,7 +40,7 @@ A.sectionLink:link {font-family:Arial;co
 
 
 body {font-family:Arial;background-color:#ffffff;}
-
+.error input {color:#FFCCCC;}
 .messageTable {font:normal 11px Arial;background-color:#999999;border-style:solid;border-top:0;border-bottom:0;border-width:1px;border-color:#777772;}
 .messageTableContent {font:normal 11px Arial;background-color:#FFFFFF;color:#1E4F66;text-align:left;}
 .messageTableLeft {font:bold 11px Arial;background-color:#e9e8e6;text-align:left;color:#555555;vertical-align:top;}
@@ -709,3 +709,4 @@ fieldset > .row:last-child {
 *.ygtvlabel {
     font-size:11px;
 }
+

Added: incubator/chukwa/trunk/src/main/web/hicc/css/formalize.css
URL: http://svn.apache.org/viewvc/incubator/chukwa/trunk/src/main/web/hicc/css/formalize.css?rev=1517396&view=auto
==============================================================================
--- incubator/chukwa/trunk/src/main/web/hicc/css/formalize.css (added)
+++ incubator/chukwa/trunk/src/main/web/hicc/css/formalize.css Sun Aug 25 23:32:38 2013
@@ -0,0 +1,382 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF 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.
+ */
+.input_tiny {
+  width: 50px;
+}
+
+.input_small {
+  width: 100px;
+}
+
+.input_medium {
+  width: 150px;
+}
+
+.input_large {
+  width: 200px;
+}
+
+.input_xlarge {
+  width: 250px;
+}
+
+.input_xxlarge {
+  width: 300px;
+}
+
+.input_full {
+  width: 100%;
+}
+
+.input_full_wrap {
+  display: block;
+  padding-right: 8px;
+}
+
+input[type="search"]::-webkit-search-decoration {
+  display: none;
+}
+
+input:invalid,
+button:invalid,
+a.button:invalid,
+select:invalid,
+textarea:invalid {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+input:focus,
+button:focus,
+a.button:focus,
+select:focus,
+textarea:focus {
+  -webkit-box-shadow: #0066ff 0 0 5px 0;
+  -moz-box-shadow: #0066ff 0 0 5px 0;
+  box-shadow: #0066ff 0 0 5px 0;
+  z-index: 1;
+}
+
+input[type="file"]:focus, input[type="file"]:active,
+input[type="radio"]:focus,
+input[type="radio"]:active,
+input[type="checkbox"]:focus,
+input[type="checkbox"]:active {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+button,
+a.button,
+input[type="reset"],
+input[type="submit"],
+input[type="button"] {
+  -webkit-appearance: none;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-background-clip: padding;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  background: #dddddd url('../images/button.png?1298351022') repeat-x;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
+  background-image: -webkit-linear-gradient(#ffffff, #dddddd);
+  background-image: -moz-linear-gradient(#ffffff, #dddddd);
+  background-image: -o-linear-gradient(#ffffff, #dddddd);
+  background-image: linear-gradient(#ffffff, #dddddd);
+  border: 1px solid;
+  border-color: #dddddd #bbbbbb #999999;
+  cursor: pointer;
+  color: #333333;
+  display: inline-block;
+  font: bold 12px/1.3 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
+  outline: 0;
+  overflow: visible;
+  margin: 0;
+  padding: 3px 10px;
+  text-shadow: white 0 1px 1px;
+  text-decoration: none;
+  vertical-align: top;
+  width: auto;
+  *padding-top: 2px;
+  *padding-bottom: 0;
+}
+button:hover,
+a.button:hover,
+input[type="reset"]:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover {
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(1px, #eeeeee), color-stop(100%, #cccccc));
+  background-image: -webkit-linear-gradient(#ffffff, #eeeeee 1px, #cccccc);
+  background-image: -moz-linear-gradient(#ffffff, #eeeeee 1px, #cccccc);
+  background-image: -o-linear-gradient(#ffffff, #eeeeee 1px, #cccccc);
+  background-image: linear-gradient(#ffffff, #eeeeee 1px, #cccccc);
+  text-decoration: none;
+}
+button:active,
+a.button:active,
+input[type="reset"]:active,
+input[type="submit"]:active,
+input[type="button"]:active {
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #eeeeee));
+  background-image: -webkit-linear-gradient(#dddddd, #eeeeee);
+  background-image: -moz-linear-gradient(#dddddd, #eeeeee);
+  background-image: -o-linear-gradient(#dddddd, #eeeeee);
+  background-image: linear-gradient(#dddddd, #eeeeee);
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0;
+  box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0;
+  border-color: #999999 #bbbbbb #dddddd;
+}
+button::-moz-focus-inner,
+a.button::-moz-focus-inner,
+input[type="reset"]::-moz-focus-inner,
+input[type="submit"]::-moz-focus-inner,
+input[type="button"]::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+a.button {
+  *padding-bottom: 3px;
+}
+
+button {
+  *padding-top: 1px;
+  *padding-bottom: 1px;
+}
+
+textarea,
+select,
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="time"],
+input[type="url"],
+input[type="week"] {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-background-clip: padding;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  -ms-border-radius: 0;
+  -o-border-radius: 0;
+  border-radius: 0;
+  -webkit-appearance: none;
+  background-color: white;
+  border: 1px solid;
+  border-color: #848484 #c1c1c1 #e1e1e1;
+  color: black;
+  outline: 0;
+  margin: 0;
+  padding: 2px 3px;
+  text-align: left;
+  font-size: 13px;
+  font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
+  height: 1.8em;
+  vertical-align: top;
+  *padding-top: 2px;
+  *padding-bottom: 1px;
+  *height: auto;
+}
+textarea[disabled],
+select[disabled],
+input[type="date"][disabled],
+input[type="datetime"][disabled],
+input[type="datetime-local"][disabled],
+input[type="email"][disabled],
+input[type="month"][disabled],
+input[type="number"][disabled],
+input[type="password"][disabled],
+input[type="search"][disabled],
+input[type="tel"][disabled],
+input[type="text"][disabled],
+input[type="time"][disabled],
+input[type="url"][disabled],
+input[type="week"][disabled] {
+  background-color: #eeeeee;
+}
+
+button[disabled],
+input[disabled],
+select[disabled],
+select[disabled] option,
+select[disabled] optgroup,
+textarea[disabled],
+a.button_disabled {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  user-select: none;
+  color: #888888;
+  cursor: default;
+}
+
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  color: #888888;
+}
+
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+  color: #888888;
+}
+
+input.placeholder_text,
+textarea.placeholder_text {
+  color: #888888;
+}
+
+textarea,
+select[size],
+select[multiple] {
+  height: auto;
+}
+
+select[size="0"],
+select[size="1"] {
+  height: 1.8em;
+  *height: auto;
+}
+
+@media (-webkit-min-device-pixel-ratio: 0) {
+  select[size],
+  select[multiple],
+  select[multiple][size] {
+    background-image: none;
+    padding-right: 3px;
+  }
+
+  select,
+  select[size="0"],
+  select[size="1"] {
+    background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==);
+    background-repeat: no-repeat;
+    background-position: right center;
+    padding-right: 20px;
+  }
+
+  ::-webkit-validation-bubble-message {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, black));
+    border: 0;
+    color: white;
+    font: 13px/17px "Lucida Grande", Arial, "Liberation Sans", FreeSans, sans-serif;
+    overflow: hidden;
+    padding: 15px 15px 17px;
+    text-shadow: black 0 0 1px;
+    min-height: 16px;
+  }
+
+  ::-webkit-validation-bubble-arrow,
+  ::-webkit-validation-bubble-top-outer-arrow,
+  ::-webkit-validation-bubble-top-inner-arrow {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    background: #666666;
+    border-color: #666666;
+  }
+}
+textarea {
+  min-height: 40px;
+  overflow: auto;
+  resize: vertical;
+  width: 100%;
+}
+
+optgroup {
+  color: black;
+  font-style: normal;
+  font-weight: normal;
+  font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
+}
+optgroup::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+.ie6_button,
+* html button,
+* html a.button {
+  background: #dddddd url('../images/button.png?1298351022') repeat-x;
+  border: 1px solid;
+  border-color: #dddddd #bbbbbb #999999;
+  cursor: pointer;
+  color: #333333;
+  font: bold 12px/1.2 Arial, sans-serif;
+  padding: 2px 10px 0;
+  text-decoration: none;
+  overflow: visible;
+  vertical-align: top;
+  width: auto;
+}
+
+* html a.button {
+  position: relative;
+  top: 3px;
+  padding-bottom: 2px;
+}
+
+* html button {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
+.ie6_input,
+* html textarea,
+* html select {
+  background: white;
+  border: 1px solid;
+  border-color: #848484 #c1c1c1 #e1e1e1;
+  color: black;
+  padding: 2px 3px 1px;
+  font-size: 13px;
+  font-family: Arial, sans-serif;
+  vertical-align: top;
+}
+
+* html select {
+  margin-top: 1px;
+}
+
+.placeholder_text,
+.ie6_input_disabled,
+.ie6_button_disabled {
+  color: #888888;
+}
+
+.ie6_input_disabled {
+  background: #eeeeee;
+}

Propchange: incubator/chukwa/trunk/src/main/web/hicc/css/formalize.css
------------------------------------------------------------------------------
    svn:executable = *

Modified: incubator/chukwa/trunk/src/main/web/hicc/css/tab.css
URL: http://svn.apache.org/viewvc/incubator/chukwa/trunk/src/main/web/hicc/css/tab.css?rev=1517396&r1=1517395&r2=1517396&view=diff
==============================================================================
--- incubator/chukwa/trunk/src/main/web/hicc/css/tab.css (original)
+++ incubator/chukwa/trunk/src/main/web/hicc/css/tab.css Sun Aug 25 23:32:38 2013
@@ -15,169 +15,81 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.tab-on {
-        font: bold 11px/16px arial, helvetica, sans-serif;
-        border-style:normal;border-top:1px;border-bottom:0px;border-width:5px;border-color:#ffffff; 
-        white-space: nowrap; background-color: #FDB5FF; background-image: url('images/titlebar.gif');
-        background: #3875D7;
-}       
-        
-.tab-hover {
-        font: bold 11px/16px arial, helvetica, sans-serif;
-        border-style:normal;border-top:1px;border-bottom:0px;border-width:5px;border-color:#ffffff; cursor:pointer;
-        white-space: nowrap;
-        background: #3875D7;
-}
-        
-.tab-off {
-        font: bold 11px/16px arial, helvetica, sans-serif;
-        border-style:normal;border-top:1px;border-bottom:0px;border-width:5px;border-color:#ffffff; cursor:pointer;
-        white-space: nowrap;
-        background-color: #eeeeee;
-}       
 
-.tab-off a {
-        font: bold 11px/16px arial, helvetica, sans-serif;
-        color: #000000;
+.tabrow {
+   top: 2px;
+   list-style: none;
+   padding: 0;
+   line-height: 24px;
+   height: 26px;
+   overflow: hidden;
+   font-size: 12px;
+   font-family: verdana;
+   position: relative;
+}
+.tabrow li {
+   left: 15px;
+   border: 1px solid #AAA;
+   background: #D1D1D1;
+   background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
+   background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
+   background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
+   background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
+   background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
+   display: inline-block;
+   position: relative;
+   z-index: 0;
+   border-top-left-radius: 6px;
+   border-top-right-radius: 6px;
+   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
+   text-shadow: 0 1px #FFF;
+   margin: 0 -5px;
+   padding: 0 20px;
+}
+.tabrow a {
+   color: #555;
+   text-decoration: none;
+}
+.tabrow li.selected {
+   background: #FFF;
+   color: #333;
+   z-index: 2;
+   border-bottom-color: #FFF;
+}
+.tabrow:before {
+   position: absolute;
+   content: " ";
+   width: 100%;
+   bottom: 0;
+   left: 0;
+   border-bottom: 1px solid #AAA;
+   z-index: 1;
+}
+.tabrow li:before,
+.tabrow li:after {
+   border: 1px solid #AAA;
+   position: absolute;
+   bottom: -1px;
+   width: 5px;
+   height: 5px;
+   content: " ";
+}
+.tabrow li:before {
+   left: -6px;
+   border-bottom-right-radius: 6px;
+   border-width: 0 1px 1px 0;
+   box-shadow: 2px 2px 0 #D1D1D1;
+}
+.tabrow li:after {
+   right: -6px;
+   border-bottom-left-radius: 6px;
+   border-width: 0 0 1px 1px;
+   box-shadow: -2px 2px 0 #D1D1D1;
 }
-
-.tab-on a, tab-hover a {
-        font: bold 11px/16px arial, helvetica, sans-serif;
-        color: #ffffff;
-}
-
-.subtab-on { 
-        font:normal 11px Arial;color:#002E30; height:19px;vertical-align:middle;
-        border-style:solid;border-top:1px;border-bottom:0px;border-width:1px;border-color:#777772;
-        background-color: #FFFFFF;
-}
- 
-.subtab-hover {
-        font:normal 11px Arial;color:#002E30; height:19px;vertical-align:middle;
-        border-style:solid;border-top:0;border-bottom:0px;border-width:1px;border-color:#777772; cursor:pointer;
-        background-repeat: repeat-x;
-        background-image: url('images/navbar-selected.gif');
-}
- 
-.subtab-off { 
-        font:normal 11px Arial;color:#002E30; height:19px;vertical-align:middle;
-        border-style:solid;border-top:0;border-bottom:0px;border-width:1px;border-color:#777772; cursor:pointer;
-        background-repeat: repeat-x;
-        background-image: url('images/navbar-hover.gif');
-}
-
-#tablist { font: bold 11px verdana, arial, sans-serif;
-	list-style-type: none;
-	margin: 4px 0px 0px 0px;
-}
-#tablist li {
-	float: left;
-	height: 21px; margin: 2px 0px 0px 0px;
-}
-#tablist a {
-	font: bold 11px/16px arial, helvetica, sans-serif;
-	float: left;
-	display: block;
-	text-decoration: none; padding: 2px 3px;
-	padding : 2px 10px 2px 10px;
-}
- 
-#tablist a:hover {
-	color: #fff;
-}
-
-/*
-#tablist {
-	border-bottom : 1px solid #ccc;
-	margin : 0;
-	padding-bottom : 19px;
-	padding-left : 10px;
-}
-
-#tablist ul, #tablist li	{
-	display : inline;
-	list-style-type : none;
-	margin : 0;
-	padding : 0;
-}
-
-	
-#tablist a:link, #tablist a:visited	{
-	background : #E8EBF0;
-	border : 1px solid #ccc;
-	color : #666;
-	float : left;
-	font-size : small;
-	font-weight : normal;
-	line-height : 14px;
-	margin-right : 8px;
-	padding : 2px 10px 2px 10px;
-	text-decoration : none;
-}
-
-#tablist a:link.active, #tablist a:visited.active	{
-	background : #fff;
-	border-bottom : 1px solid #fff;
-	color : #000;
-}
-
-#tablist a:hover	{
-	color : #f00;
-}
-
-	
-body.section-1 #tablist li#nav-1 a, 
-body.section-2 #tablist li#nav-2 a,
-body.section-3 #tablist li#nav-3 a,
-body.section-4 #tablist li#nav-4 a {
-	background : #fff;
-	border-bottom : 1px solid #fff;
-	color : #000;
-}
-
-#tablist #subnav-1,
-#tablist #subnav-2,
-#tablist #subnav-3,
-#tablist #subnav-4 {
-	display : none;
-	width: 90%;
-}
-
-body.section-1 #tablist ul#subnav-1, 
-body.section-2 #tablist ul#subnav-2,
-body.section-3 #tablist ul#subnav-3,
-body.section-4 #tablist ul#subnav-4 {
-	display : inline;
-	left : 10px;
-	position : absolute;
-	top : 95px;
+.tabrow li.selected:before {
+   box-shadow: 2px 2px 0 #FFF;
 }
-
-body.section-1 #tablist ul#subnav-1 a, 
-body.section-2 #tablist ul#subnav-2 a,
-body.section-3 #tablist ul#subnav-3 a,
-body.section-4 #tablist ul#subnav-4 a {
-	background : #fff;
-	border : none;
-	border-left : 1px solid #ccc;
-	color : #999;
-	font-size : smaller;
-	font-weight : bold;
-	line-height : 10px;
-	margin-right : 4px;
-	padding : 2px 10px 2px 10px;
-	text-decoration : none;
-}
-
- #tablist ul a:hover {
-	color : #f00 !important;
+.tabrow li.selected:after {
+   box-shadow: -2px 2px 0 #FFF;
 }
 
-#contents {
-	background : #fff;
-	border : 1px solid #ccc;
-	border-top : none;
-	clear : both;
-	margin : 0px;
-	padding : 15px;
-}*/

Added: incubator/chukwa/trunk/src/main/web/hicc/images/button.png
URL: http://svn.apache.org/viewvc/incubator/chukwa/trunk/src/main/web/hicc/images/button.png?rev=1517396&view=auto
==============================================================================
Binary file - no diff available.

Propchange: incubator/chukwa/trunk/src/main/web/hicc/images/button.png
------------------------------------------------------------------------------
    svn:executable = *

Propchange: incubator/chukwa/trunk/src/main/web/hicc/images/button.png
------------------------------------------------------------------------------
    svn:mime-type = application/octet-stream

Added: incubator/chukwa/trunk/src/main/web/hicc/images/select_arrow.gif
URL: http://svn.apache.org/viewvc/incubator/chukwa/trunk/src/main/web/hicc/images/select_arrow.gif?rev=1517396&view=auto
==============================================================================
Binary file - no diff available.

Propchange: incubator/chukwa/trunk/src/main/web/hicc/images/select_arrow.gif
------------------------------------------------------------------------------
    svn:executable = *

Propchange: incubator/chukwa/trunk/src/main/web/hicc/images/select_arrow.gif
------------------------------------------------------------------------------
    svn:mime-type = application/octet-stream

Modified: incubator/chukwa/trunk/src/main/web/hicc/index.jsp
URL: http://svn.apache.org/viewvc/incubator/chukwa/trunk/src/main/web/hicc/index.jsp?rev=1517396&r1=1517395&r2=1517396&view=diff
==============================================================================
--- incubator/chukwa/trunk/src/main/web/hicc/index.jsp (original)
+++ incubator/chukwa/trunk/src/main/web/hicc/index.jsp Sun Aug 25 23:32:38 2013
@@ -87,6 +87,7 @@
 <link href="css/menu.css" rel="stylesheet" type="text/css">
 <link href="css/tab.css" rel="stylesheet" type="text/css">
 <link href="css/timeframe.css" rel="stylesheet" type="text/css">
+<link rel="stylesheet" href="formalize.css" />
 <!-- all the necessary js files -->
 <script type="text/javascript" src="./js/yahoo-dom-event.js"></script>
 <script type="text/javascript" src="./js/treeview-min.js"></script>
@@ -105,6 +106,7 @@
 <script type="text/javascript" src="/hicc/js/slider.js"></script>
 <script type="text/javascript" src="/hicc/js/swfobject.js"></script>
 <script type="text/javascript" src="/hicc/js/time.js"></script>
+<script src="js/jquery.formalize.js"></script>
 
 <script type="text/javascript">
 var _users_list=''; //'[% users_list_json %]'.evalJSON();
@@ -216,15 +218,7 @@ Select the widget from the widget tree t
 </div>
 <!-- end of widget catalog -->
 <!-- page selector -->
-<table class="page_selector_table" width="100%" cellspacing=0 cellpadding=0>
-<tr><td>
-<div id="page_selector" style="display:block;">
-<ul id="tablist">
-</ul>
-</div>
-</td>
-</tr>
-</table>
+<ul id="tablist" class="tabrow"></ul>
 </td></tr>
 <tr><td id="workspaceContainer" colspan="3">
 <!-- content location -->

Added: incubator/chukwa/trunk/src/main/web/hicc/js/jquery.formalize.js
URL: http://svn.apache.org/viewvc/incubator/chukwa/trunk/src/main/web/hicc/js/jquery.formalize.js?rev=1517396&view=auto
==============================================================================
--- incubator/chukwa/trunk/src/main/web/hicc/js/jquery.formalize.js (added)
+++ incubator/chukwa/trunk/src/main/web/hicc/js/jquery.formalize.js Sun Aug 25 23:32:38 2013
@@ -0,0 +1,198 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF 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.
+ */
+/*
+  Formalize - version 1.2
+
+  Note: This file depends on the jQuery library.
+*/
+
+// Module pattern:
+// http://yuiblog.com/blog/2007/06/12/module-pattern
+var FORMALIZE = (function($, window, document, undefined) {
+  // Internet Explorer detection.
+  function IE(version) {
+    var b = document.createElement('b');
+    b.innerHTML = '<!--[if IE ' + version + ']><br><![endif]-->';
+    return !!b.getElementsByTagName('br').length;
+  }
+
+  // Private constants.
+  var PLACEHOLDER_SUPPORTED = 'placeholder' in document.createElement('input');
+  var AUTOFOCUS_SUPPORTED = 'autofocus' in document.createElement('input');
+  var IE6 = IE(6);
+  var IE7 = IE(7);
+
+  // Expose innards of FORMALIZE.
+  return {
+    // FORMALIZE.go
+    go: function() {
+      var i, j = this.init;
+
+      for (i in j) {
+        j.hasOwnProperty(i) && j[i]();
+      }
+    },
+    // FORMALIZE.init
+    init: {
+      // FORMALIZE.init.disable_link_button
+      disable_link_button: function() {
+        $(document.documentElement).on('click', 'a.button_disabled', function() {
+          return false;
+        });
+      },
+      // FORMALIZE.init.full_input_size
+      full_input_size: function() {
+        if (!IE7 || !$('textarea, input.input_full').length) {
+          return;
+        }
+
+        // This fixes width: 100% on <textarea> and class="input_full".
+        // It ensures that form elements don't go wider than container.
+        $('textarea, input.input_full').wrap('<span class="input_full_wrap"></span>');
+      },
+      // FORMALIZE.init.ie6_skin_inputs
+      ie6_skin_inputs: function() {
+        // Test for Internet Explorer 6.
+        if (!IE6 || !$('input, select, textarea').length) {
+          // Exit if the browser is not IE6,
+          // or if no form elements exist.
+          return;
+        }
+
+        // For <input type="submit" />, etc.
+        var button_regex = /button|submit|reset/;
+
+        // For <input type="text" />, etc.
+        var type_regex = /date|datetime|datetime-local|email|month|number|password|range|search|tel|text|time|url|week/;
+
+        $('input').each(function() {
+          var el = $(this);
+
+          // Is it a button?
+          if (this.getAttribute('type').match(button_regex)) {
+            el.addClass('ie6_button');
+
+            /* Is it disabled? */
+            if (this.disabled) {
+              el.addClass('ie6_button_disabled');
+            }
+          }
+          // Or is it a textual input?
+          else if (this.getAttribute('type').match(type_regex)) {
+            el.addClass('ie6_input');
+
+            /* Is it disabled? */
+            if (this.disabled) {
+              el.addClass('ie6_input_disabled');
+            }
+          }
+        });
+
+        $('textarea, select').each(function() {
+          /* Is it disabled? */
+          if (this.disabled) {
+            $(this).addClass('ie6_input_disabled');
+          }
+        });
+      },
+      // FORMALIZE.init.autofocus
+      autofocus: function() {
+        if (AUTOFOCUS_SUPPORTED || !$(':input[autofocus]').length) {
+          return;
+        }
+
+        var el = $('[autofocus]')[0];
+
+        if (!el.disabled) {
+          el.focus();
+        }
+      },
+      // FORMALIZE.init.placeholder
+      placeholder: function() {
+        if (PLACEHOLDER_SUPPORTED || !$(':input[placeholder]').length) {
+          // Exit if placeholder is supported natively,
+          // or if page does not have any placeholder.
+          return;
+        }
+
+        FORMALIZE.misc.add_placeholder();
+
+        $(':input[placeholder]').each(function() {
+          // Placeholder obscured in older browsers,
+          // so there's no point adding to password.
+          if (this.type === 'password') {
+            return;
+          }
+
+          var el = $(this);
+          var text = el.attr('placeholder');
+
+          el.focus(function() {
+            if (el.val() === text) {
+              el.val('').removeClass('placeholder_text');
+            }
+          }).blur(function() {
+            FORMALIZE.misc.add_placeholder();
+          });
+
+          // Prevent <form> from accidentally
+          // submitting the placeholder text.
+          el.closest('form').submit(function() {
+            if (el.val() === text) {
+              el.val('').removeClass('placeholder_text');
+            }
+          }).on('reset', function() {
+            setTimeout(FORMALIZE.misc.add_placeholder, 50);
+          });
+        });
+      }
+    },
+    // FORMALIZE.misc
+    misc: {
+      // FORMALIZE.misc.add_placeholder
+      add_placeholder: function() {
+        if (PLACEHOLDER_SUPPORTED || !$(':input[placeholder]').length) {
+          // Exit if placeholder is supported natively,
+          // or if page does not have any placeholder.
+          return;
+        }
+
+        $(':input[placeholder]').each(function() {
+          // Placeholder obscured in older browsers,
+          // so there's no point adding to password.
+          if (this.type === 'password') {
+            return;
+          }
+
+          var el = $(this);
+          var text = el.attr('placeholder');
+
+          if (!el.val() || el.val() === text) {
+            el.val(text).addClass('placeholder_text');
+          }
+        });
+      }
+    }
+  };
+// Alias jQuery, window, document.
+})(jQuery, this, this.document);
+
+// Automatically calls all functions in FORMALIZE.init
+jQuery(document).ready(function() {
+  FORMALIZE.go();
+});

Propchange: incubator/chukwa/trunk/src/main/web/hicc/js/jquery.formalize.js
------------------------------------------------------------------------------
    svn:executable = *

Modified: incubator/chukwa/trunk/src/main/web/hicc/js/workspace/workspace.js
URL: http://svn.apache.org/viewvc/incubator/chukwa/trunk/src/main/web/hicc/js/workspace/workspace.js?rev=1517396&r1=1517395&r2=1517396&view=diff
==============================================================================
--- incubator/chukwa/trunk/src/main/web/hicc/js/workspace/workspace.js (original)
+++ incubator/chukwa/trunk/src/main/web/hicc/js/workspace/workspace.js Sun Aug 25 23:32:38 2013
@@ -179,7 +179,7 @@ portalView.prototype = {
 	// add the tablist part
 	var tabNode=document.createElement("li");
 	tabNode.id="li_"+t;
-	tabNode.className="tab-off";
+	//tabNode.className="tab-off";
 
 	var tabInputSpan=document.createElement("span");
 	tabInputSpan.id="page_tab_input_span_"+t;
@@ -212,15 +212,15 @@ portalView.prototype = {
 	tabSpan.id='page_tab_span_'+t;
         tabSpan.onmouseover=function() {
             var id=this.id.substring(14);
-            if ($('li_'+id).className!='tab-on') {
+            /*if ($('li_'+id).className!='tab-on') {
                 $('li_'+id).className='tab-hover';
-            } 
+            }*/ 
         };
         tabSpan.onmouseout=function() {
             var id=this.id.substring(14);
-            if ($('li_'+id).className!='tab-on') {
+            /*if ($('li_'+id).className!='tab-on') {
                 $('li_'+id).className='tab-off';
-            }
+            }*/
         };
 
 	var tabHref=document.createElement("a");
@@ -1643,7 +1643,7 @@ portalPage.prototype = {
 	}
 	this.initEvents();
 	this.view.currentPage=this.view.findPage(this.page_tag);
-	$('li_'+this.page_tag).className='tab-on';
+	$('li_'+this.page_tag).className='selected';
 	$('page_'+this.page_tag).style.display='block';
 	$('page_control_'+this.page_tag).style.display='block';
 	$('page_tab_input_span_'+this.page_tag).style.display='none';

Modified: incubator/chukwa/trunk/src/main/web/hicc/jsp/graph_explorer.jsp
URL: http://svn.apache.org/viewvc/incubator/chukwa/trunk/src/main/web/hicc/jsp/graph_explorer.jsp?rev=1517396&r1=1517395&r2=1517396&view=diff
==============================================================================
--- incubator/chukwa/trunk/src/main/web/hicc/jsp/graph_explorer.jsp (original)
+++ incubator/chukwa/trunk/src/main/web/hicc/jsp/graph_explorer.jsp Sun Aug 25 23:32:38 2013
@@ -30,9 +30,27 @@
 %>
 <html>
   <head>
+  <link href="/hicc/css/default.css" rel="stylesheet" type="text/css">
+  <link href="/hicc/css/formalize.css" rel="stylesheet" type="text/css">
   <script src="/hicc/js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
+  <script src="/hicc/js/jquery.formalize.js"></script>
   <script src="/hicc/js/autoHeight.js" type="text/javascript" charset="utf-8"></script>
   <script>
+    function randString(n) {
+      if(!n) {
+        n = 5;
+      }
+
+      var text = '';
+      var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+      for(var i=0; i < n; i++) {
+        text += possible.charAt(Math.floor(Math.random() * possible.length));
+      }
+
+      return text;
+    }
+
     var checkDataLength = function(curOption) {
       return function(data) {
         if (data.length == 0) {
@@ -88,22 +106,16 @@
       $('#family :selected').each(function(i, selected) {
         var family = $(selected).val();
         var url = encodeURI("/hicc/v1/metrics/schema/"+table+"/"+family);
+        var tableFamily = table+"/"+family;
+        // Look through each column option and see if it has any rows
         $.ajax({ url: url, dataType: "json", success: function(data){
           for(var i in data) {
-            $('#column').append("<option>"+data[i]+"</option>");
+            $('#column').append(
+              $("<option></option>")
+                .attr("value", tableFamily+"/"+data[i])
+                .text(data[i])
+            );
           }
-          // Look through each column option and see if it has any rows
-          var table = $('#table').val();
-          var family = $('#family').val();
-          $('#column').children().each(
-            function() {
-              var column = $(this).text();
-              $.ajax({ url: encodeURI("/hicc/v1/metrics/schema/"+table+"/"+family+"/"+column), 
-                       dataType: "json", 
-                       success: checkDataLength($(this))
-              });
-            }
-          );
         }});
       });
     }
@@ -111,12 +123,10 @@
     function getRows() {
       var size = $('#row option').size();
       $('#row').find('option').remove();
-      var table = $('#table').val();
-      var family = $('#family').val();
       var column = $('#column').val();
       $('#column :selected').each(function(i, selected) {
-        var column = $(selected).val();
-        var url = encodeURI("/hicc/v1/metrics/rowkey/"+table+"/"+family+"/"+column);
+        var tfColumn = $(selected).val();
+        var url = encodeURI("/hicc/v1/metrics/rowkey/"+tfColumn);
         $.ajax({ url: url, dataType: "json", success: function(data){
           for(var i in data) {
             var test = $('#row').find('option[value="'+data[i]+'"]').val();
@@ -133,15 +143,13 @@
       if(test == null) {
         $('#row option:eq(0)').attr('selected',true);
       }
-      var family = $("#family").val();
-      var data = [];
+      var url = [];
+      var idx = 0;
       $('#column :selected').each(function(i, selected) {
-        data[i] = $(selected).val();
+        $('#row :selected').each(function(j, rowSelected) {
+          url[idx++] = encodeURI("/hicc/v1/metrics/series/" + $(selected).val() + "/rowkey/" + $(rowSelected).val());
+        }); 
       });
-      var url = [];
-      for(var i in data) {
-        url[i] = encodeURI("/hicc/v1/metrics/series/" + $('#table').val() + "/" + family + "/" + data[i] + "/rowkey/" + $('#row').val());
-      } 
       var title = $('#title').val();
       var ymin = $('#ymin').val();
       var ymax = $('#ymax').val();
@@ -151,6 +159,140 @@
         doIframe();
       });
     }
+
+    function buildWidget() {
+      var json = {};
+      json.id          = randString(10);
+      json.title       = $('#title').val();
+      json.version     = "0.1";
+      json.categories  = $('#table').val()+","+$("#family").val();
+      json.url         = "iframe/jsp/chart.jsp";
+      json.description = "User defined widget.";
+      json.refresh     = "15";
+      json.parameters  = [
+       {
+         "name"  : "title",
+         "type"  : "string",
+         "value" : $('#title').val(),
+         "edit"  : "1",
+         "label" : "Title"
+       },
+       {
+         "name"    : "period",
+         "type"    : "custom",
+         "control" : "period_control",
+         "value"   : "",
+         "label"   : "Period"
+       },
+       {
+         "name"    : "width",
+         "type"    : "select",
+         "value"   : "300",
+         "label"   : "Width",
+         "options" : [
+           {"label":"300","value":"300"},
+           {"label":"400","value":"400"},
+           {"label":"500","value":"500"},
+           {"label":"600","value":"600"},
+           {"label":"800","value":"800"},
+           {"label":"1000","value":"1000"},
+           {"label":"1200","value":"1200"}
+         ]
+       },
+       {
+         "name"    : "height",
+         "type"    : "select",
+         "value"   : "200",
+         "label"   : "Height",
+         "options" : [
+           {"label":"200","value":"200"},
+           {"label":"400","value":"400"},
+           {"label":"600","value":"600"},
+           {"label":"800","value":"800"},
+           {"label":"1000","value":"1000"}
+         ]
+       },
+       {
+         "name"    : "legend",
+         "type"    : "radio",
+         "value"   : "on",
+         "label"   : "Show Legends",
+         "options" : [
+           {"label":"On","value":"on"},
+           {"label":"Off","value":"off"}
+         ]
+       }
+      ];
+
+      var idx = 0;
+      var selections = {};
+      selections.name = "data";
+      selections.type = "select_multiple";
+      selections.label = "Metric";
+      selections.options = [];
+      selections.value = [];
+
+      var test = $('#row').val();
+      if(test == null) {
+        $('#row option:eq(0)').attr('selected',true);
+      }
+      var family = $("#family").val();
+
+      /* loop through series to construct URLs */
+      $('#column :selected').each(function(i, selected) {
+        var option = {};
+        option.label = $('#table').val() + "." + 
+          family + "." + 
+          $(selected).val() + "." + 
+          $('#row').val();
+        var values = encodeURI("/hicc/v1/metrics/series/" + 
+             $(selected).val() + 
+             "/rowkey/" + $('#row').val());
+        option.value = values;
+        selections.value[idx] = values;
+        selections.options[idx++] = option;
+      });
+      var size = Object.keys(json.parameters).length;
+      json.parameters[size++]=selections;
+      console.log(JSON.stringify(json));
+      if(idx==0) {
+        throw "no series selected.";
+      }
+      return json;
+    }
+
+    function exportWidget() {
+      var json;
+      var url = "/hicc/v1/widget";
+      try {
+        if($('#title').val()=="") {
+          $("#title").val("Please provide a title");
+          $("#title").addClass("error");
+          $("#title").bind("click", function() {
+            $("#title").val("");
+            $("#title").removeClass("error");
+            $("#title").unbind("click");
+          });
+          throw "no title provided.";
+        }
+        json = buildWidget();
+      } catch(err) {
+        console.log(err);
+        return false;
+      }
+      $.ajax({ 
+        type: "PUT",
+        url: url, 
+        contentType : "application/json",
+        data: JSON.stringify(json),
+        success: function(data) {
+          alert("Widget exported.");
+        },
+        fail: function(data) {
+          alert("Widget export failed.");
+        }
+      });
+    }
   </script>
   </head>
   <body>
@@ -165,33 +307,49 @@
         <tr>
           <td>
             Table<br>
-            <select id="table" size="10" onMouseUp="getFamilies()">
+            <select id="table" size="10" onMouseUp="getFamilies()" style="min-width: 100px;" class="select">
             </select>
           </td>
           <td>
             Column Family<br>
-            <select id="family" multiple size="10" onMouseUp="getColumns()">
-            <option>test</option>
+            <select id="family" multiple size="10" style="min-width: 110px;" onMouseUp="getColumns()">
             </select>
           </td>
           <td>
             Column<br>
-            <select id="column" multiple size="10" onMouseUp="getRows()">
+            <select id="column" multiple size="10" style="min-width: 100px;" onMouseUp="getRows()">
             </select>
           </td>
           <td>
             Row<br>
-            <select id="row" size="10">
+            <select id="row" size="10" style="min-width: 100px;">
             </select>
           </td>
           <td>
-            Y-axis Min: <input type="text" id="ymin" /><br />
-            Y-axis Max: <input type="text" id="ymax" /><br />
+            <table>
+              <tr>
+                <td>
+                  <label>Y-axis Min</label>
+                </td>
+                <td>
+                  <input type="text" id="ymin" />
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <label>Y-axis Max</label>
+                </td>
+                <td>
+                  <input type="text" id="ymax" />
+                </td>
+              </tr>
+            </table>
           </td>
         </tr>
         <tr>
           <td>
             <input type=button name="action" value="Plot" onClick="plot()">
+            <input type=button name="action" value="Export" onClick="exportWidget()">
           </td>
           <td>
           </td>