chukwa-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ey...@apache.org
Subject [14/19] chukwa git commit: CHUKWA-746. Redesigned Chukwa dashboard. (Eric Yang)
Date Tue, 26 May 2015 00:12:49 GMT
http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/fonts/glyphicons-halflings-regular.woff
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/fonts/glyphicons-halflings-regular.woff b/src/main/web/hicc/fonts/glyphicons-halflings-regular.woff
new file mode 100644
index 0000000..9e61285
Binary files /dev/null and b/src/main/web/hicc/fonts/glyphicons-halflings-regular.woff differ

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/fonts/glyphicons-halflings-regular.woff2
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/fonts/glyphicons-halflings-regular.woff2 b/src/main/web/hicc/fonts/glyphicons-halflings-regular.woff2
new file mode 100644
index 0000000..64539b5
Binary files /dev/null and b/src/main/web/hicc/fonts/glyphicons-halflings-regular.woff2 differ

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/graph-explorer.html
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/graph-explorer.html b/src/main/web/hicc/graph-explorer.html
deleted file mode 100644
index 44768c4..0000000
--- a/src/main/web/hicc/graph-explorer.html
+++ /dev/null
@@ -1,328 +0,0 @@
-<!--
-
- 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.
-
--->
-<!DOCTYPE html>
-<html lang="en">
-  <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) {
-          curOption.attr('disabled', 'disabled');
-        }
-      }
-    };
-
-    $.ajax({ url: "/hicc/v1/metrics/schema", dataType: "json", success: function(data){
-      for(var i in data) {
-        $('#table').append("<option>"+data[i]+"</option>");
-      }
-      // Look through each table option and see if it has anything in its family?
-      $('#table').children().each(
-        function() {
-          var table = $(this).text();
-          $.ajax({ url: encodeURI("/hicc/v1/metrics/schema/"+table), 
-                   dataType: "json", 
-                   success: checkDataLength($(this))
-          });
-        }
-      );
-    }});
-
-
-    function getFamilies() {
-      var size = $('#family option').size();
-      $('#family').find('option').remove();
-      var table = $('#table').val();
-      $.ajax({ url: encodeURI("/hicc/v1/metrics/schema/"+table), dataType: "json", success: function(data){
-        for(var i in data) {
-          $('#family').append("<option>"+data[i]+"</option>");
-        }
-        // Look through each family option and see if it has any columns
-        var table = $('#table').val();
-        $('#family').children().each(
-          function() {
-            var family = $(this).text();
-            $.ajax({ url: encodeURI("/hicc/v1/metrics/source/"+table), 
-                     dataType: "json", 
-                     success: checkDataLength($(this))
-            });
-          }
-        );
-      }});
-    }
-
-    function getColumns() {
-      var size = $('#column option').size();
-      $('#column').find('option').remove();
-      var table = $('#table').val();
-      var family = $('#family').val();
-      $('#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></option>")
-                .attr("value", tableFamily+"/"+data[i])
-                .text(data[i])
-            );
-          }
-        }});
-      });
-    }
-
-    function getRows() {
-      var size = $('#row option').size();
-      $('#row').find('option').remove();
-      $('#chartType').html("");
-      $('#family :selected').each(function(i, selected) {
-        var metric = $(selected).val();
-        var selection = metric+": <select id='ctype"+i+"'><option>lines</option><option>bars</option><option>points</option><option>area</option></select><br>";
-        $('#chartType').append(selection);
-      });
-      $('#table :selected').each(function(i, selected) {
-        var metricGroup = $(selected).val();
-        var url = encodeURI("/hicc/v1/metrics/source/"+metricGroup);
-        $.ajax({ url: url, dataType: "json", success: function(data){
-          for(var i in data) {
-            var test = $('#row').find('option[value="'+data[i]+'"]').val();
-            if(typeof(test) == "undefined") {
-              $('#row').append('<option value="'+data[i]+'">'+data[i]+'</option>');
-            }
-          }
-        }});
-      });
-    }
-
-    function buildChart() {
-      var test = $('#row').val();
-      if(test == null) {
-        $('#row option:eq(0)').attr('selected',true);
-      }
-      var url = [];
-      var idx = 0;
-      $('#family :selected').each(function(i, selected) {
-        var id = '#ctype' + i;
-        var chartType = $(id).val();
-        var chartTypeOption = { show: true };
-        if (chartType=='area') {
-          chartTypeOption = { show: true, fill: true };
-        }
-        $('#row :selected').each(function(j, rowSelected) {
-          var s = { 'label' : $(selected).val() + "/" + $(rowSelected).val(), 'url' : encodeURI("/hicc/v1/metrics/series/" + $(selected).val() + "/" + $(rowSelected).val())};
-          if(chartType=='area') {
-            s['lines']=chartTypeOption;
-          } else {
-            s[chartType]=chartTypeOption;
-          }
-          url[idx++] = s;
-        }); 
-      });
-      var title = $('#title').val();
-      var ymin = $('#ymin').val() ;
-      var ymax = $('#ymax').val();
-      var yunit = $('#yunit').val();
-      var data = { 'title' : title, 'yUnitType' : yunit, 'width' : 300, 'height' : 200, 'series' : url };
-      if(ymin!='') {
-        data['min']=ymin;
-      }
-      if(ymax!='') {
-        data['max']=ymax;
-      }
-      return data;
-    }
-
-    function plot() {
-      var data = buildChart();
-      $.ajax({
-        url: '/hicc/v1/chart/preview',
-        type: 'PUT',
-        contentType: 'application/json',
-        data: JSON.stringify(data),
-        success: function(result) {
-          $('#graph')[0].src="about:blank";
-          $('#graph')[0].contentWindow.document.open();
-          $('#graph')[0].contentWindow.document.write(result);
-          $('#graph')[0].contentWindow.document.close();
-        }
-      });
-    }
-
-    function buildWidget(title, url) {
-      var widget = {
-        title: title,
-        url: url,
-      }
-      widget['tokens'] = title.split(" ");
-      $.ajax({
-        type: "POST",
-        url: '/hicc/v1/widget/create',
-        contentType: "application/json",
-        data: JSON.stringify(widget),
-        success: function(data) {
-          alert("Widget exported.");
-        },
-        fail: function(data) {
-          alert("Widget export failed.");
-        }
-      });
-    }
-
-    function publishChart() {
-      var json = buildChart();
-      var url = "/hicc/v1/chart/save";
-      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.";
-        }
-      } catch(err) {
-        console.log(err);
-        return false;
-      }
-      $.ajax({ 
-        type: "POST",
-        url: url, 
-        contentType : "application/json",
-        data: JSON.stringify(json),
-        success: function(data) {
-          buildWidget(json.title, '/hicc/v1/chart/draw/'+data);
-        },
-        fail: function(data) {
-          alert("Chart export failed.");
-        }
-      });
-    }
-  </script>
-  </head>
-  <body>
-    <form>
-      <center>
-      <table>
-        <tr>
-          <th>Metric Groups</th>
-          <th>Metrics</th>
-          <th>Sources</th>
-          <th>Options</th>
-          <th>Chart Type</th>
-        </tr>
-        <tr>
-          <td>
-            <select id="table" size="10" onMouseUp="getFamilies()" style="min-width: 100px;" class="select">
-            </select>
-          </td>
-          <td>
-            <select id="family" multiple size="10" style="min-width: 110px;" onMouseUp="getRows()">
-            </select>
-          </td>
-          <td>
-            <select id="row" size="10" style="min-width: 100px;">
-            </select>
-          </td>
-          <td>
-            <table>
-              <tr>
-                <td>
-                  <label>Title</label>
-                </td>
-                <td>
-                  <input type=text id="title">
-                </td>
-              </tr>
-              <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>
-              <tr>
-                <td>
-                  <label>Y-axis Unit</label>
-                </td>
-                <td>
-                  <select id="yunit">
-                    <option>bytes</option>
-                    <option>bytes-decimal</option>
-                    <option value="ops">op/s</option>
-                    <option value="percent">%</option>
-                    <option>generic</option>
-                  </select>
-                </td>
-              </tr>
-            </table>
-          </td>
-          <td>
-            <div id="chartType"></div>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <input type=button name="action" value="Plot" onClick="plot()">
-            <input type=button name="action" value="Publish" onClick="publishChart()">
-          </td>
-          <td>
-          </td>
-          <td>
-          </td>
-        </tr>
-      </table>
-    </form>
-    <iframe id="graph" width="95%" class="autoHeight" height="70%" frameBorder="0" scrolling="no"></iframe>
-    </center>
-  </body>
-</html>

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/home/css/component.css
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/css/component.css b/src/main/web/hicc/home/css/component.css
new file mode 100755
index 0000000..98c38bc
--- /dev/null
+++ b/src/main/web/hicc/home/css/component.css
@@ -0,0 +1,620 @@
+/*
+ * 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.
+ */
+@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
+@font-face {
+	font-family: 'codropsicons';
+	src:url('../fonts/codropsicons/codropsicons.eot');
+	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
+		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
+		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
+		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+.container > header,
+.codrops-top {
+	color: #fff;
+	font-family: 'Lato', Arial, sans-serif;
+}
+
+.container > header {
+	margin: 0 auto;
+	padding: 12em 2em;
+	padding-left: 370px;
+	background: rgba(0,0,0,0.05);
+}
+
+.container > header a {
+	color: #566473;
+	text-decoration: none;
+	outline: none;
+}
+
+.container > header a:hover {
+	color: #4f7bab;
+}
+
+.container > header h1 {
+	font-size: 3.2em;
+	line-height: 1.3;
+	margin: 0;
+	font-weight: 300;
+}
+
+.container > header span {
+	display: block;
+	font-size: 55%;
+	color: #74818e;
+	padding: 0 0 0.6em 0.1em;
+}
+
+/* To Navigation Style */
+.codrops-top {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.6);
+	text-transform: uppercase;
+	width: 100%;
+	font-size: 0.69em;
+	line-height: 2.2;
+}
+
+.codrops-top a {
+	text-decoration: none;
+	padding: 0 1em;
+	letter-spacing: 0.1em;
+	color: #888;
+	display: inline-block;
+}
+
+.codrops-top a:hover {
+	background: rgba(255,255,255,0.95);
+	color: #333;
+}
+
+.codrops-top span.right {
+	float: right;
+}
+
+.codrops-top span.right a {
+	float: left;
+	display: block;
+}
+
+.codrops-icon:before {
+	font-family: 'codropsicons';
+	margin: 0 4px;
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+	-webkit-font-smoothing: antialiased;
+}
+
+.codrops-icon-drop:before {
+	content: "\e001";
+}
+
+.codrops-icon-prev:before {
+	content: "\e004";
+}
+
+/* Demo Buttons Style */
+.codrops-demos {
+	padding-top: 1em;
+	font-size: 0.9em;
+}
+
+.codrops-demos a {
+	text-decoration: none;
+	outline: none;
+	display: inline-block;
+	margin: 0.5em;
+	padding: 0.7em 1.1em;
+	border: 3px solid #b1aea6;
+	color: #b1aea6;
+	font-weight: 700;
+}
+
+.codrops-demos a:hover,
+.codrops-demos a.current-demo,
+.codrops-demos a.current-demo:hover {
+	border-color: #89867e;
+	color: #89867e;
+}
+
+@media screen and (max-width: 1025px) {
+	.container > header {
+		margin: 0 auto;
+		padding: 120px 50px;
+		font-size: 70%;
+		text-align: right;
+	}
+}
+
+@media screen and (max-width: 740px) {
+	.codrops-icon span {
+		display: none;
+	}
+
+}
+
+html {
+  min-height: 100%;
+  position: relative;
+}
+
+body {
+  height: 100%;
+}
+
+*,
+*:after,
+*::before {
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+}
+
+@font-face {
+		font-weight: normal;
+		font-style: normal;
+		font-family: 'ecoicons';
+		src: url("../fonts/ecoicons/ecoicons.eot");
+		src: url("../fonts/ecoicons/ecoicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ecoicons/ecoicons.woff") format("woff"), url("../fonts/ecoicons/ecoicons.ttf") format("truetype"), url("../fonts/ecoicons/ecoicons.svg#ecoicons") format("svg");
+}
+
+/* Icomoon.com */
+
+.gn-menu-main,
+.gn-menu-main ul {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		text-transform: none;
+		font-weight: 300;
+		font-family: 'Lato', Arial, sans-serif;
+		line-height: 60px;
+}
+
+.gn-menu-main {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 60px;
+		font-size: 13px;
+		z-index: 100;
+		color: #ffffff;
+		background: #496274;
+		opacity: 0.9;
+}
+
+.gn-menu-main a {
+		display: block;
+		height: 100%;
+		color: white;
+		text-decoration: none;
+		cursor: pointer;
+}
+
+.no-touch .gn-menu-main a:hover,
+.no-touch .gn-menu li.gn-search-item:hover,
+.no-touch .gn-menu li.gn-search-item:hover a {
+		background: white;
+		color: #496274;
+}
+
+.gn-menu-main > li {
+		display: block;
+		float: left;
+		height: 100%;
+		border-right: 1px solid #c6d0da;
+		text-align: center;
+}
+
+/* icon-only trigger (menu item) */
+
+.gn-menu-main li.gn-trigger {
+		position: relative;
+		width: 60px;
+		-webkit-touch-callout: none;
+		-webkit-user-select: none;
+		-khtml-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+}
+
+.gn-menu-main > li:nth-last-child(2) {
+		padding-right: 10px;
+                position: absolute;
+		right: 82px;
+		overflow: hidden;
+		float: left;
+		border-left: none;
+		border-right: 1px solid #c6d0da;
+		white-space: nowrap;
+}
+
+.gn-menu-main > li:last-child {
+		width: 82px;
+		float: right;
+		border-right: none;
+		border-left: none;
+		white-space: nowrap;
+}
+
+.gn-menu-main > li > a {
+		padding: 0 30px;
+		text-transform: uppercase;
+		letter-spacing: 1px;
+		font-weight: bold;
+}
+
+.gn-menu-main:after {
+		display: table;
+		clear: both;
+		content: "";
+}
+
+.gn-menu-wrapper {
+		position: fixed;
+		top: 60px;
+		bottom: 0;
+		left: 0;
+		overflow: hidden;
+		width: 60px;
+		border-top: 1px solid #c6d0da;
+		background: #496274;
+		-webkit-transform: translateX(-60px);
+		-moz-transform: translateX(-60px);
+		transform: translateX(-60px);
+		-webkit-transition: -webkit-transform 0.3s, width 0.3s;
+		-moz-transition: -moz-transform 0.3s, width 0.3s;
+		transition: transform 0.3s, width 0.3s;
+}
+
+.gn-scroller {
+		position: absolute;
+		overflow-y: scroll;
+		width: 370px;
+		height: 100%;
+}
+
+.gn-menu {
+		border-bottom: 1px solid #c6d0da;
+		text-align: left;
+		font-size: 18px;
+}
+
+.gn-menu li:not(:first-child),
+.gn-menu li li {
+		box-shadow: inset 0 1px #c6d0da;
+}
+
+.gn-submenu li {
+		overflow: hidden;
+		height: 0;
+		-webkit-transition: height 0.3s;
+		-moz-transition: height 0.3s;
+		transition: height 0.3s;
+}
+
+.gn-submenu li a {
+		color: white;
+}
+
+input.gn-search {
+		position: relative;
+		z-index: 10;
+		padding-left: 60px;
+		outline: none;
+		border: none;
+		background: transparent;
+		color: #ffffff;
+		font-weight: 300;
+		font-family: 'Lato', Arial, sans-serif;
+		cursor: pointer;
+}
+
+/* placeholder */
+
+.gn-search::-webkit-input-placeholder {
+		color: #ffffff;
+}
+
+.gn-search:-moz-placeholder {
+		color: #ffffff;
+}
+
+.gn-search::-moz-placeholder {
+		color: #ffffff;
+}
+
+.gn-search:-ms-input-placeholder {
+		color: #ffffff;
+}
+
+/* hide placeholder when active in Chrome */
+
+.gn-search:focus::-webkit-input-placeholder,
+.no-touch .gn-menu li.gn-search-item:hover .gn-search:focus::-webkit-input-placeholder {
+		color: transparent;
+}
+
+input.gn-search:focus {
+		cursor: text;
+}
+
+.no-touch .gn-menu li.gn-search-item:hover input.gn-search {
+		color: #496274;
+}
+
+/* placeholder */
+
+.no-touch .gn-menu li.gn-search-item:hover .gn-search::-webkit-input-placeholder {
+		color: #496274;
+}
+
+.no-touch .gn-menu li.gn-search-item:hover .gn-search:-moz-placeholder {
+		color: #496274;
+}
+
+.no-touch .gn-menu li.gn-search-item:hover .gn-search::-moz-placeholder {
+		color: #496274;
+}
+
+.no-touch .gn-menu li.gn-search-item:hover .gn-search:-ms-input-placeholder {
+		color: #496274;
+}
+
+.gn-menu-main a.gn-icon-search {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 60px;
+}
+
+.gn-icon::before {
+		display: inline-block;
+		width: 60px;
+		text-align: center;
+		text-transform: none;
+		font-weight: normal;
+		font-style: normal;
+		font-variant: normal;
+		font-family: 'ecoicons';
+		line-height: 1;
+		speak: none;
+		-webkit-font-smoothing: antialiased;
+}
+
+.gn-icon-help::before {
+		content: "\e000"
+}
+
+.gn-icon-earth::before {
+		content: "\e004"
+}
+
+.gn-icon-cog::before {
+		content: "\e006"
+}
+
+.gn-icon-search::before {
+		content: "\e005"
+}
+
+.gn-icon-download::before {
+		content: "\e007"
+}
+
+.gn-icon-photoshop::before {
+		content: "\e001"
+}
+
+.gn-icon-illustrator::before {
+		content: "\e002"
+}
+
+.gn-icon-archive::before {
+		content: "\e00d"
+}
+
+.gn-icon-article::before {
+		content: "\e003"
+}
+
+.gn-icon-pictures::before {
+		content: "\e008"
+}
+
+.gn-icon-videos::before {
+		content: "\e009"
+}
+
+.gn-icon-poweroff::before {
+		font-family: 'Glyphicons Halflings';
+		font-size: 18px;
+		content: "\e017";
+}
+
+.gn-username {
+		font-family: 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* if an icon anchor has a span, hide the span */
+
+.gn-icon span {
+		width: 0;
+		height: 0;
+		display: block;
+		overflow: hidden;
+}
+
+.gn-icon-menu::before {
+		margin-left: -15px;
+		vertical-align: -2px;
+		width: 30px;
+		height: 3px;
+		background: #ffffff;
+		box-shadow: 0 3px #496274, 0 -6px white, 0 -9px #496274, 0 -12px white;
+		content: '';
+}
+
+.no-touch .gn-icon-menu:hover::before,
+.no-touch .gn-icon-menu.gn-selected:hover::before {
+		background: #496274;
+		box-shadow: 0 3px white, 0 -6px #496274, 0 -9px white, 0 -12px #496274;
+}
+
+.gn-icon-menu.gn-selected::before {
+		background: #ffffff;
+		box-shadow: 0 3px #496274, 0 -6px white, 0 -9px #496274, 0 -12px white;
+}
+
+/* styles for opening menu */
+
+.gn-menu-wrapper.gn-open-all,
+.gn-menu-wrapper.gn-open-part {
+		-webkit-transform: translateX(0px);
+		-moz-transform: translateX(0px);
+		transform: translateX(0px);
+}
+
+.gn-menu-wrapper.gn-open-all {
+		width: 340px
+}
+
+.gn-menu-wrapper.gn-open-all .gn-submenu li {
+		height: 60px
+}
+
+@media screen and (max-width: 422px) { 
+	.gn-menu-wrapper.gn-open-all {
+			-webkit-transform: translateX(0px);
+			-moz-transform: translateX(0px);
+			transform: translateX(0px);
+			width: 100%;
+	}
+
+	.gn-menu-wrapper.gn-open-all .gn-scroller {
+			width: 130%
+	}
+}
+
+/* Style for toggle buttons */
+.toggle-btn-grp { 
+    margin:3px 0; 
+    padding: 0 20px 0 0;
+}
+.toggle-btn { 
+    text-align:centre; 
+    margin:5px 2px;
+    padding:0.4em 3em; 
+    color:#FFF; 
+    background-color:#496274; 
+    display:inline-block; 
+    cursor:pointer;
+}
+
+.toggle-btn:hover { 
+    background:#8AAAC2;
+}
+
+.visuallyhidden { 
+    border: 0; 
+    clip: rect(0 0 0 0); 
+    height: 1px; 
+    margin: -1px; 
+    overflow: hidden; 
+    padding: 0; 
+    position: absolute; 
+    width: 1px; 
+}
+
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { 
+    clip: auto; 
+    height: auto; 
+    margin: 0; 
+    overflow: visible; 
+    position: static; 
+    width: auto; 
+}
+
+.toggle-btn-grp * {
+    width:20px;
+    height:20px;
+    line-height:20px;
+}
+.toggle-btn-grp div {
+    display:inline-block;
+    position:relative;
+    margin:5px 2px;
+}
+
+.toggle-btn-grp div label {
+    position:absolute;
+    z-index:0;
+    padding:0;
+    text-align:center;
+}
+
+.toggle-btn-grp div input {
+    position:absolute;
+    z-index:1;
+    cursor:pointer;
+    opacity:0;
+}
+
+.toggle-btn-grp div:hover label {
+    background:#8AAAC2;
+}
+
+.toggle-btn-grp div input:checked + label {
+    background: white;
+    color: #496274;
+}
+
+.glass {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 99;
+    background: transparent;
+}
+
+.frame {
+    display: none;
+    position: absolute;
+    top: 60px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+}
+
+.frame iframe {
+    width: 100%;
+    height: 100%;
+}
+

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/home/css/jquery.gridster.css
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/css/jquery.gridster.css b/src/main/web/hicc/home/css/jquery.gridster.css
new file mode 100755
index 0000000..ff5c6e9
--- /dev/null
+++ b/src/main/web/hicc/home/css/jquery.gridster.css
@@ -0,0 +1,350 @@
+/*! gridster.js - v0.5.6 - 2014-09-25
+* http://gridster.net/
+* Copyright (c) 2014 ducksboard; Licensed MIT */
+
+/* =============================================================================
+   NORMALIZATION
+========================================================================== */
+
+/* *  {
+  margin: 0;
+  padding: 0;
+} */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
+[hidden] { display: none; }
+
+ul, ol {
+    list-style: none;
+}
+
+/* =============================================================================
+   COMMONS
+========================================================================== */
+
+* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+
+@font-face {
+    font-family:'Glyphicons Halflings';
+    src:url(../../fonts/glyphicons-halflings-regular.eot);
+    src:url(../../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),
+        url(../../fonts/glyphicons-halflings-regular.woff2) format('woff2'),
+        url(../../fonts/glyphicons-halflings-regular.woff) format('woff'),
+        url(../../fonts/glyphicons-halflings-regular.ttf) format('truetype'),
+        url(../../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')
+}
+
+body {
+    background-color: #EEEEEE;
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    font-size: x-small;
+    color: #666666;
+}
+
+.gridster {
+    margin-top: 70px;
+    margin-left: 0 auto;
+    margin-right: 0 auto;
+    margin-bottom: 0 auto;
+    /*position:relative;*/
+}
+
+.gridster > * {
+    -webkit-transition: height .4s, width .4s;
+    -moz-transition: height .4s, width .4s;
+    -o-transition: height .4s, width .4s;
+    -ms-transition: height .4s, width .4s;
+    transition: height .4s, width .4s;
+}
+
+.gridster .gs-w {
+    background: #FFF;
+    cursor: pointer;
+    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
+    box-shadow: 0 0 5px rgba(0,0,0,0.3);
+    z-index: 2;
+    position: absolute;
+}
+
+.ready .gs-w:not(.preview-holder) {
+    -webkit-transition: opacity .3s, left .3s, top .3s;
+    -moz-transition: opacity .3s, left .3s, top .3s;
+    -o-transition: opacity .3s, left .3s, top .3s;
+    transition: opacity .3s, left .3s, top .3s;
+}
+
+.ready .gs-w:not(.preview-holder),
+.ready .resize-preview-holder {
+    -webkit-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
+    -moz-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
+    -o-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
+    transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
+}
+
+.gridster .preview-holder {
+    z-index: 1;
+    position: absolute;
+    background-color: #fff;
+    border-color: #fff;
+    opacity: 0.3;
+}
+
+.gridster .player-revert {
+    z-index: 10!important;
+    -webkit-transition: left .3s, top .3s!important;
+    -moz-transition: left .3s, top .3s!important;
+    -o-transition: left .3s, top .3s!important;
+    transition:  left .3s, top .3s!important;
+}
+
+.gridster .dragging,
+.gridster .resizing {
+    z-index: 10!important;
+    -webkit-transition: all 0s !important;
+    -moz-transition: all 0s !important;
+    -o-transition: all 0s !important;
+    transition: all 0s !important; 
+}
+
+
+.gs-resize-handle {
+    position: absolute;
+    z-index: 1;
+}
+
+.gs-resize-handle-both {
+    width: 20px;
+    height: 20px;
+    bottom: -8px;
+    right: -8px;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
+    background-position: top left;
+    background-repeat: no-repeat;
+    cursor: se-resize;
+    z-index: 20;
+}
+
+.gs-resize-handle-x {
+    top: 0;
+    bottom: 13px;
+    right: -5px;
+    width: 10px;
+    cursor: e-resize;
+}
+
+.gs-resize-handle-y {
+    left: 0;
+    right: 13px;
+    bottom: -5px;
+    height: 10px;
+    cursor: s-resize;
+}
+
+.gs-w:hover .gs-resize-handle,
+.resizing .gs-resize-handle {
+    opacity: 1;
+}
+
+.gs-resize-handle,
+.gs-w.dragging .gs-resize-handle {
+    opacity: 0;
+}
+
+.gs-resize-disabled .gs-resize-handle {
+    display: none!important;
+}
+
+[data-max-sizex="1"] .gs-resize-handle-x,
+[data-max-sizey="1"] .gs-resize-handle-y,
+[data-max-sizey="1"][data-max-sizex="1"] .gs-resize-handle {
+    display: none !important;
+}
+
+/* Uncomment this if you set helper : "clone" in draggable options */
+/*.gridster .player {
+  opacity:0;
+}
+*/
+
+.gridster .player {
+    -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
+    box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
+}
+
+.gs-w:hover .gs-header {
+    opacity: .9;
+    filter: blur(5px);
+}
+
+.gs-header {
+    color: white;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 30px;
+    background-color: #496274;
+    opacity: 0;
+    z-index: 20;
+}
+
+.gs-icon {
+    display:inline-block;
+    font-family:'Glyphicons Halflings';
+    font-style:normal;
+    font-weight:400;
+    font-size: 18px;
+    line-height:30px;
+    -webkit-font-smoothing:antialiased;
+    -moz-osx-font-smoothing:grayscale;
+    padding-left: 2px;
+    padding-right: 2px;
+}
+
+.gs-close-handle:before {
+    content:"\e014"
+}
+
+.gs-close-handle {
+    position: absolute;
+    left: 0;
+    width: 24px;
+    height: 30px;
+}
+
+.gs-zoom-handle:before {
+    content:"\e164"
+}
+
+.gs-zoom-handle {
+    position: absolute;
+    right: 0;
+    width: 24px;
+    height: 30px;
+}
+
+
+.overlay_fix {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 100000;
+    opacity: 0;
+    display: none;
+}
+
+.wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}
+
+li iframe {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  border: 0px;
+}
+
+.tt-dropdown-menu {
+  width: 355px;
+  margin-top: 0px;
+  background-color: #fff;
+  height: 100%;
+}
+
+.typeahead {
+  height: 60px;
+}
+
+.tt-dataset-widgets {
+  width: 355px;
+  margin-top: 0px;
+  background-color: #fff;
+  height: 100%;
+}
+
+.tt-input {
+  position: absolute;
+  top: 0px;
+  width: 240px;
+  height: 38px; 
+  padding: 11px 12px;
+  border: 2px solid #ccc;
+  outline: none;
+}
+
+.tt-hint {
+  position: absolute;
+  top: 0px;
+  width: 240px;
+  height: 60px; 
+  padding: 0px 12px;
+  border: 2px solid #ccc;
+  outline: none;
+}
+
+.tt-suggestions {
+  width: 100%;
+  height: 100%;
+  background-color: #496274;
+  display: block;
+}
+
+.tt-suggestion {
+  clear: both;
+  display: block;
+  box-shadow: inset 0 1px #c6d0da;
+  font-size: 18px;
+  font-weight: bold;
+  height: 60px;
+  color: #fff;
+  background-color: #496274;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.tt-suggestion > p {
+  margin: 0px;
+  padding: 0px 60px;
+}
+
+.tt-suggestion > p:hover,
+.tt-suggestion > p:focus {
+}
+
+.tt-suggestion.tt-cursor {
+  color: #496274;
+  background-color: white;
+}
+
+.input-group span.twitter-typeahead {
+  display: block !important;
+}
+
+.input-group span.twitter-typeahead .tt-dropdown-menu {
+  top: 32px !important;
+}
+
+.input-group.input-group-lg span.twitter-typeahead .tt-dropdown-menu {
+  top: 44px !important;
+}
+
+.input-group.input-group-sm span.twitter-typeahead .tt-dropdown-menu {
+  top: 28px !important;
+}
+
+#the-basics {
+  text-align: center;
+}

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/home/css/jquery.gridster.min.css
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/css/jquery.gridster.min.css b/src/main/web/hicc/home/css/jquery.gridster.min.css
new file mode 100755
index 0000000..9d9fe84
--- /dev/null
+++ b/src/main/web/hicc/home/css/jquery.gridster.min.css
@@ -0,0 +1,2 @@
+/*! gridster.js - v0.5.6 - 2014-09-25 - * http://gridster.net/ - Copyright (c) 2014 ducksboard; Licensed MIT */ 
+.gridster{position:relative}.gridster>*{margin:0 auto;-webkit-transition:height .4s,width .4s;-moz-transition:height .4s,width .4s;-o-transition:height .4s,width .4s;-ms-transition:height .4s,width .4s;transition:height .4s,width .4s}.gridster .gs-w{z-index:2;position:absolute}.ready .gs-w:not(.preview-holder){-webkit-transition:opacity .3s,left .3s,top .3s;-moz-transition:opacity .3s,left .3s,top .3s;-o-transition:opacity .3s,left .3s,top .3s;transition:opacity .3s,left .3s,top .3s}.ready .gs-w:not(.preview-holder),.ready .resize-preview-holder{-webkit-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-moz-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-o-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;transition:opacity .3s,left .3s,top .3s,width .3s,height .3s}.gridster .preview-holder{z-index:1;position:absolute;background-color:#fff;border-color:#fff;opacity:.3}.gridster .player-revert{z-index:10!important;-webkit-transition:left .3s,top .3
 s!important;-moz-transition:left .3s,top .3s!important;-o-transition:left .3s,top .3s!important;transition:left .3s,top .3s!important}.gridster .dragging,.gridster .resizing{z-index:10!important;-webkit-transition:all 0s!important;-moz-transition:all 0s!important;-o-transition:all 0s!important;transition:all 0s!important}.gs-resize-handle{position:absolute;z-index:1}.gs-resize-handle-both{width:20px;height:20px;bottom:-8px;right:-8px;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8y
 MDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=);background-position:top left;background-repeat:no-repeat;cursor:se-resize;z-index:20}.gs-resize-handle-x{top:0;bottom:13px;right:-5px;width:10px;cursor:e-resize}.gs-resize-handle-y{left:0;right:13px;bottom:-5px;height:10px;cursor:s-resize}.gs-w:hover .gs-resize-handle,.resizing .gs-resize-handle{opacity:1}.gs-resize-handle,.gs-w.dragging .gs-resize-handle{opacity:0}.gs-resize-disabled .gs-resize-handle{display:none!important}[data-max-sizex="1"] .gs-resize-handle-x,[data-max-sizey="1"] .gs-resize-handle-y,[data-max-sizey="1"][data-max-sizex="1"] .gs-resize-handle{display:none!important}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/home/css/normalize.css
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/css/normalize.css b/src/main/web/hicc/home/css/normalize.css
new file mode 100644
index 0000000..add2fad
--- /dev/null
+++ b/src/main/web/hicc/home/css/normalize.css
@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legen
 d{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/home/fonts/codropsicons/codropsicons.eot
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/fonts/codropsicons/codropsicons.eot b/src/main/web/hicc/home/fonts/codropsicons/codropsicons.eot
new file mode 100644
index 0000000..f46c7f4
Binary files /dev/null and b/src/main/web/hicc/home/fonts/codropsicons/codropsicons.eot differ

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/home/fonts/codropsicons/codropsicons.svg
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/fonts/codropsicons/codropsicons.svg b/src/main/web/hicc/home/fonts/codropsicons/codropsicons.svg
new file mode 100644
index 0000000..d202d21
--- /dev/null
+++ b/src/main/web/hicc/home/fonts/codropsicons/codropsicons.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+This is a custom SVG font generated by IcoMoon.
+<iconset grid="14"></iconset>
+</metadata>
+<defs>
+<font id="codropsicons" horiz-adv-x="448" >
+<font-face units-per-em="448" ascent="384" descent="-64" />
+<missing-glyph horiz-adv-x="448" />
+<glyph unicode="&#xe001;" d="M 221.657,359.485 ,m0.00,0.00,c 0.00,0.00 -132.984-182.838 -132.205-286.236 0.515-68.522 61.089-123.688 135.314-123.218 74.202,0.479 133.943,56.421 133.428,124.943 C 357.414,178.368 221.657,359.485 221.657,359.485 z"  />
+<glyph unicode="&#xe004;" d="M 384.00,160.00l0.00-32.00 q0.00-13.25 -8.125-22.625t-21.125-9.375l-176.00,0.00 l 73.25-73.50q 9.50-9.00 9.50-22.50t-9.50-22.50l-18.75-19.00q-9.25-9.25 -22.50-9.25q-13.00,0.00 -22.75,9.25l-162.75,163.00q-9.25,9.25 -9.25,22.50q0.00,13.00 9.25,22.75l 162.75,162.50q 9.50,9.50 22.75,9.50q 13.00,0.00 22.50-9.50l 18.75-18.50q 9.50-9.50 9.50-22.75t-9.50-22.75l-73.25-73.25l 176.00,0.00 q 13.00,0.00 21.125-9.375 t 8.125-22.625z" horiz-adv-x="384"  />
+<glyph unicode="&#xe002;" d="M 407.273-23.273c0.00,0.00-325.818,0.00-366.545,0.00s-40.727,40.727-40.727,40.727l0.00,142.545 l 101.818,183.273l 244.364,0.00 l 101.818-183.273c0.00,0.00,0.00-101.818,0.00-142.545S 407.273-23.273, 407.273-23.273z M 325.818,302.545L 122.182,302.545 
+	l-71.273-142.545L 142.545,160.00 c0.00,0.00, 40.727,0.00, 40.727-40.727l0.00-20.364 l 81.455,0.00 l0.00,20.364 c0.00,0.00,0.00,40.727, 40.727,40.727l 91.636,0.00 L 325.818,302.545z M 407.273,119.273l-96.911,0.00 C 307.532,113.917, 305.455,107.503, 305.455,98.909c0.00-40.727-40.727-40.727-40.727-40.727L 183.273,58.182 c0.00,0.00-40.727,0.00-40.727,40.727
+	c0.00,8.593-2.077,15.008-4.908,20.364L 40.727,119.273 l0.00-101.818 l 366.545,0.00 L 407.273,119.273 z M 132.364,221.091l 183.273,0.00 L 325.818,200.727L 122.182,200.727 L 132.364,221.091z M 152.727,261.818l 142.545,0.00 L 305.455,241.455L 142.545,241.455 L 152.727,261.818z"  />
+<glyph unicode="&#xe000;" d="M 368.00,144.00q0.00-13.50 -9.25-22.75l-162.75-162.75q-9.75-9.25 -22.75-9.25q-12.75,0.00 -22.50,9.25l-18.75,18.75q-9.50,9.50 -9.50,22.75t 9.50,22.75l 73.25,73.25l-176.00,0.00 q-13.00,0.00 -21.125,9.375t-8.125,22.625l0.00,32.00 q0.00,13.25 8.125,22.625t 21.125,9.375l 176.00,0.00 l-73.25,73.50q-9.50,9.00 -9.50,22.50t 9.50,22.50l 18.75,18.75q 9.50,9.50 22.50,9.50q 13.25,0.00 22.75-9.50l 162.75-162.75q 9.25-8.75 9.25-22.50z" horiz-adv-x="384"  />
+<glyph unicode="&#xe003;" d="M 224.00-64.00C 100.291-64.00,0.00,36.291,0.00,160.00S 100.291,384.00, 224.00,384.00s 224.00-100.291, 224.00-224.00S 347.709-64.00, 224.00-64.00z
+	 M 224.00,343.273c-101.228,0.00-183.273-82.045-183.273-183.273s 82.045-183.273, 183.273-183.273s 183.273,82.045, 183.273,183.273S 325.228,343.273, 224.00,343.273z M 244.364,122.164C 244.364,111.005, 244.364,98.909, 244.364,98.909l-40.727,0.00 c0.00,0.00,0.00,29.466,0.00,40.727
+	s 9.123,20.364, 20.364,20.364l0.00,0.00c 22.481,0.00, 40.727,18.246, 40.727,40.727s-18.246,40.727-40.727,40.727S 183.273,223.209, 183.273,200.727c0.00-7.453, 2.138-14.356, 5.641-20.364L 145.437,180.364 C 143.727,186.90, 142.545,193.661, 142.545,200.727
+	c0.00,44.983, 36.471,81.455, 81.455,81.455s 81.455-36.471, 81.455-81.455C 305.455,162.831, 279.45,131.247, 244.364,122.164z M 244.364,37.818l-40.727,0.00 l0.00,40.727 l 40.727,0.00 L 244.364,37.818 z"  />
+<glyph unicode="&#x20;" horiz-adv-x="224" />
+<glyph class="hidden" unicode="&#xf000;" d="M0,384L 448 -64L0 -64 z" horiz-adv-x="0" />
+</font></defs></svg>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/home/fonts/codropsicons/codropsicons.ttf
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/fonts/codropsicons/codropsicons.ttf b/src/main/web/hicc/home/fonts/codropsicons/codropsicons.ttf
new file mode 100644
index 0000000..72bed1f
Binary files /dev/null and b/src/main/web/hicc/home/fonts/codropsicons/codropsicons.ttf differ

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/home/fonts/codropsicons/codropsicons.woff
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/fonts/codropsicons/codropsicons.woff b/src/main/web/hicc/home/fonts/codropsicons/codropsicons.woff
new file mode 100644
index 0000000..1003218
Binary files /dev/null and b/src/main/web/hicc/home/fonts/codropsicons/codropsicons.woff differ

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/home/fonts/codropsicons/license.txt
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/fonts/codropsicons/license.txt b/src/main/web/hicc/home/fonts/codropsicons/license.txt
new file mode 100644
index 0000000..88a5cbc
--- /dev/null
+++ b/src/main/web/hicc/home/fonts/codropsicons/license.txt
@@ -0,0 +1,6 @@
+Icon Set:	Font Awesome -- http://fortawesome.github.com/Font-Awesome/
+License:	SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL
+
+
+Icon Set:	Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico
+License:	CC0 -- http://creativecommons.org/publicdomain/zero/1.0/
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/home/fonts/ecoicons/Read Me.txt
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/fonts/ecoicons/Read Me.txt b/src/main/web/hicc/home/fonts/ecoicons/Read Me.txt
new file mode 100644
index 0000000..9d2b9e5
--- /dev/null
+++ b/src/main/web/hicc/home/fonts/ecoicons/Read Me.txt	
@@ -0,0 +1,3 @@
+To modify your generated font, use the *dev.svg* file, located in the *fonts* folder in this package. You can import this dev.svg file to the IcoMoon app. All the tags (class names) and the Unicode points of your glyphs are saved in this file.
+
+See the documentation for more info on how to use this package: http://icomoon.io/#docs/font-face
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/home/fonts/ecoicons/ecoicons.dev.svg
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/fonts/ecoicons/ecoicons.dev.svg b/src/main/web/hicc/home/fonts/ecoicons/ecoicons.dev.svg
new file mode 100644
index 0000000..68fa516
--- /dev/null
+++ b/src/main/web/hicc/home/fonts/ecoicons/ecoicons.dev.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+This is a custom SVG font generated by IcoMoon.
+<iconset grid="16"></iconset>
+</metadata>
+<defs>
+<font id="ecoicons" horiz-adv-x="512" >
+<font-face units-per-em="512" ascent="480" descent="-32" />
+<missing-glyph horiz-adv-x="512" />
+<glyph class="hidden" unicode="&#xf000;" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
+<glyph unicode="&#xe000;" d="M 256-32C 114.618-32,0,82.618,0,224S 114.618,480, 256,480s 256-114.618, 256-256S 397.382-32, 256-32z
+	 M 256,433.455c-115.689,0-209.455-93.766-209.455-209.455s 93.766-209.455, 209.455-209.455s 209.455,93.766, 209.455,209.455S 371.689,433.455, 256,433.455z M 279.273,180.759C 279.273,168.006, 279.273,154.182, 279.273,154.182l-46.545,0 c0,0,0,33.676,0,46.545
+	s 10.426,23.273, 23.273,23.273l0,0c 25.693,0, 46.545,20.852, 46.545,46.545s-20.852,46.545-46.545,46.545S 209.455,296.239, 209.455,270.545c0-8.518, 2.444-16.407, 6.447-23.273L 166.214,247.273 C 164.259,254.743, 162.909,262.47, 162.909,270.545
+	c0,51.409, 41.681,93.091, 93.091,93.091s 93.091-41.681, 93.091-93.091C 349.091,227.235, 319.372,191.139, 279.273,180.759z M 279.273,84.364l-46.545,0 l0,46.545 l 46.545,0 L 279.273,84.364 z" data-tags="help, question" />
+<glyph unicode="&#xe004;" d="M 256-32C 114.618-32,0,82.618,0,224S 114.618,480, 256,480s 256-114.618, 256-256S 397.382-32, 256-32z
+	 M 256,433.455c-115.689,0-209.455-93.766-209.455-209.455s 93.766-209.455, 209.455-209.455s 209.455,93.766, 209.455,209.455S 371.689,433.455, 256,433.455z M 360.937,100.375l-6.028-3.631l-17.455-10.915l-10.287-7.727
+	c-7.633-3.724-15.616-6.679-23.878-9.216l0,10.38 l-2.909,23.994c0,0-1.443,13.824-3.631,17.455s-7.261,8.727-12.358,10.915
+	s-8.727,2.188-11.636,5.818s-5.097,10.193-8.727,16.012S 256,165.097, 256,168.006S 256,200.727, 256,200.727l 3.631,27.648l 8.006,5.818l 9.449,10.915L 283.648,247.273
+	l 22.551-4.375l 16.012,0 l 6.54-13.824l 15.267-12.358l 9.449-15.267l 12.358-4.375l 13.824,0 l 9.449-11.636l 5.818-12.358l 2.188-8.727l0-14.545 l-1.489-8.588
+	C 386.351,125.673, 374.668,112.012, 360.937,100.375z M 304.733,351.279l-16.012-8.727l-5.818-16.733L 273.455,317.091l-31.279,0 L 227.631,311.273L 226.909,299.636
+	L 221.091,290.188L 219.648,279.994l 2.909-8.727l 3.631-8.727c0,0, 8.727-10.193,0-17.455c0,0-10.915,0-13.079,3.631S 194.909,262.54, 192,265.449
+	s-12.358,5.818-12.358,5.818l-11.636,4.375L 157.091,276.364l 0.721,15.267L 157.091,304.733L 152.716,314.182L 140.358,323.631L 139.636,333.824l 1.489,5.655
+	C 170.589,368.78, 211.177,386.909, 256,386.909c 25.297,0, 48.943-6.26, 70.307-16.547L 325.818,366.545L 304.733,351.279z" data-tags="earth, world, globe" />
+<glyph unicode="&#xe006;" d="M 512,270.545l0-93.091 l-57.088-19.014c-3.258-9.868-7.447-19.223-12.055-28.393l 27.066-54.156l-65.839-65.815
+	l-54.202,27.113c-9.123-4.585-18.479-8.774-28.3-12.009L 302.545-32L 209.455-32 l-19.060,57.181c-9.821,3.235-19.177,7.401-28.276,12.009l-54.225-27.113
+	l-65.839,65.815l 27.089,54.156c-4.608,9.169-8.797,18.525-12.055,28.393L0,177.455L0,270.545 l 57.088,19.014c 3.258,9.868, 7.447,19.223, 12.055,28.393L 42.077,372.108
+	l 65.839,65.815l 54.225-27.113c 9.123,4.585, 18.455,8.774, 28.276,12.009L 209.455,480l 93.091,0 l 19.037-57.181c 9.821-3.235, 19.177-7.401, 28.3-12.009l 54.202,27.113
+	l 65.839-65.815l-27.066-54.156c 4.585-9.169, 8.797-18.525, 12.055-28.393L 512,270.545z M 416.721,247.808c-4.026,27.066-14.778,51.875-30.348,72.797
+	l 25.926,43.264L 395.869,380.346L 352.582,354.374c-20.945,15.476-45.684,26.135-72.727,30.138L 267.636,433.455l-23.273,0 L 232.122,384.489C 205.103,380.509, 180.364,369.85, 159.418,354.374
+	L 116.131,380.346L 99.677,363.892l 25.949-43.264C 110.033,299.683, 99.305,274.897, 95.279,247.808L 46.545,235.636l0-23.273 l 48.733-12.172
+	c 4.003-27.066, 14.755-51.875, 30.324-72.797l-25.949-43.264l 16.454-16.454l 43.287,25.972c 20.922-15.476, 45.684-26.135, 72.704-30.138L 244.364,14.545l 23.273,0 
+	l 12.218,48.966c 27.043,4.003, 51.782,14.662, 72.727,30.138l 43.264-25.972l 16.454,16.454l-25.926,43.264c 15.569,20.922, 26.321,45.731, 30.348,72.797
+	L 465.455,212.364l0,23.273 L 416.721,247.808z M 256,154.182c-38.563,0-69.818,31.255-69.818,69.818s 31.255,69.818, 69.818,69.818c 38.54,0, 69.818-31.255, 69.818-69.818S 294.54,154.182, 256,154.182z M 256,247.273
+	c-12.847,0-23.273-10.403-23.273-23.273s 10.426-23.273, 23.273-23.273c 12.87,0, 23.273,10.403, 23.273,23.273S 268.87,247.273, 256,247.273z" data-tags="cog, settings, gear" />
+<glyph unicode="&#xe005;" d="M 512,14.545c0-46.545-46.545-46.545-46.545-46.545l-133.167,133.143C 297.775,76.055, 255.418,61.091, 209.455,61.091
+	c-115.689,0-209.455,93.766-209.455,209.455s 93.766,209.455, 209.455,209.455s 209.455-93.766, 209.455-209.455c0-45.964-14.988-88.32-40.076-122.857L 512,14.545z M 209.455,433.455C 119.482,433.455, 46.545,360.518, 46.545,270.545s 72.937-162.909, 162.909-162.909
+	s 162.909,72.937, 162.909,162.909S 299.427,433.455, 209.455,433.455z" data-tags="search, magnifier" />
+<glyph unicode="&#xe007;" d="M 256-32C 114.618-32,0,82.618,0,224S 114.618,480, 256,480s 256-114.618, 256-256S 397.382-32, 256-32z
+	 M 256,433.455c-115.689,0-209.455-93.766-209.455-209.455s 93.766-209.455, 209.455-209.455s 209.455,93.766, 209.455,209.455S 371.689,433.455, 256,433.455z M 139.636,200.727l 69.818,0 l 46.545,186.182l 46.545-186.182l 69.818,0 l-116.364-116.364L 139.636,200.727z" data-tags="download, arrow-down, bottom" />
+<glyph unicode="&#xe001;" d="M 465.455-32L 46.545-32 c-25.693,0-46.545,20.852-46.545,46.545L0,433.455 c0,25.693, 20.852,46.545, 46.545,46.545l 418.909,0 c 25.693,0, 46.545-20.852, 46.545-46.545l0-418.909 
+	C 512-11.148, 491.148-32, 465.455-32z M 465.455,433.455L 46.545,433.455 l0-418.909 l 418.909,0 L 465.455,433.455 z M 249.111,301.708c 11.334-9.053, 18.735-23.552, 18.735-40.797c0-17.524-5.679-32.023-16.454-41.891
+	c-13.894-13.405-35.747-19.712-60.416-19.712c-6.516,0-12.497,0.279-17.012,1.094l0-69.539 L 139.334,130.863 L 139.334,312.902 c 12.474,2.211, 29.789,3.84, 53.318,3.84
+	C 218.205,316.742, 236.94,311.552, 249.111,301.708z M 173.964,226.956c 4.259-1.094, 9.937-1.373, 17.012-1.373c 26.089,0, 41.984,12.311, 41.984,33.955
+	c0,20.527-14.755,31.488-38.865,31.488c-9.635,0-16.454-0.815-20.131-1.629L 173.964,226.956 z M 330.333,152.227c 15.313,0, 22.109,6.028, 22.109,14.778
+	c0,9.053-5.655,13.708-22.691,19.433c-26.95,9.053-38.307,23.273-38.028,38.889c0,23.552, 20.131,41.891, 52.201,41.891c 15.313,0, 28.625-3.84, 36.585-7.936
+	l-6.819-23.808c-5.958,3.281-17.012,7.657-29.207,7.657c-12.474,0-19.293-5.748-19.293-13.987c0-8.471, 6.516-12.591, 24.111-18.595
+	c 24.948-8.774, 36.585-21.085, 36.864-40.797c0-24.087-19.572-41.891-56.157-41.891c-16.733,0-31.767,4.096-41.984,9.565l 6.796,24.367
+	C 302.825,157.161, 317.836,152.227, 330.333,152.227z" data-tags="photoshop, adobe, file" />
+<glyph unicode="&#xe002;" d="M 465.455-32L 46.545-32 c-25.693,0-46.545,20.852-46.545,46.545L0,433.455 c0,25.693, 20.852,46.545, 46.545,46.545l 418.909,0 c 25.693,0, 46.545-20.852, 46.545-46.545l0-418.909 
+	C 512-11.148, 491.148-32, 465.455-32z M 465.455,433.455L 46.545,433.455 l0-418.909 l 418.909,0 L 465.455,433.455 z M 246.993,316.323l 61.114-185.879l-36.841,0 l-17.012,52.689L 194.513,183.133 l-16.175-52.689L 142.895,130.444 L 203.171,316.323
+	L 246.993,316.323 z M 248.39,208.756l-14.801,45.801C 229.981,265.844, 226.909,278.551, 224.116,289.303L 223.535,289.303 c-2.793-10.752-5.562-23.738-8.937-34.746l-14.499-45.801
+	L 248.39,208.756 z M 350.371,320.721c 11.729,0, 18.967-8.006, 19.247-18.479c0-10.193-7.517-18.199-19.526-18.199c-11.45,0-18.967,8.006-18.967,18.199
+	C 331.124,312.716, 338.897,320.721, 350.371,320.721z M 367.663,130.42l-34.583,0 L 333.079,264.751 l 34.583,0 L 367.663,130.42 z" data-tags="illustrator, adobe, file" />
+<glyph unicode="&#xe00d;" d="M 465.455,14.545c0,0-372.364,0-418.909,0s-46.545,46.545-46.545,46.545l0,162.909 l 116.364,209.455l 279.273,0 l 116.364-209.455c0,0,0-116.364,0-162.909S 465.455,14.545, 465.455,14.545z M 372.364,386.909L 139.636,386.909 
+	l-81.455-162.909L 162.909,224 c0,0, 46.545,0, 46.545-46.545l0-23.273 l 93.091,0 l0,23.273 c0,0,0,46.545, 46.545,46.545l 104.727,0 L 372.364,386.909z M 465.455,177.455l-110.755,0 C 351.465,171.334, 349.091,164.003, 349.091,154.182c0-46.545-46.545-46.545-46.545-46.545L 209.455,107.636 c0,0-46.545,0-46.545,46.545
+	c0,9.821-2.374,17.152-5.609,23.273L 46.545,177.455 l0-116.364 l 418.909,0 L 465.455,177.455 z M 151.273,293.818l 209.455,0 L 372.364,270.545L 139.636,270.545 L 151.273,293.818z M 174.545,340.364l 162.909,0 L 349.091,317.091L 162.909,317.091 L 174.545,340.364z" data-tags="archive, drawer, category, cabinet" />
+<glyph unicode="&#xe003;" d="M 418.909-32L 93.091-32 c-25.693,0-46.545,20.852-46.545,46.545L 46.545,433.455 c0,25.693, 20.852,46.545, 46.545,46.545l 325.818,0 c 25.693,0, 46.545-20.852, 46.545-46.545l0-418.909 
+	C 465.455-11.148, 444.602-32, 418.909-32z M 418.909,433.455L 93.091,433.455 l0-418.909 l 325.818,0 L 418.909,433.455 z M 209.455,340.364L 139.636,340.364 L 139.636,386.909 l 69.818,0 L 209.455,340.364 z M 209.455,247.273L 139.636,247.273 L 139.636,293.818 l 69.818,0 L 209.455,247.273 z M 372.364,154.182L 139.636,154.182 l0,46.545 l 232.727,0 L 372.364,154.182 z M 372.364,61.091L 139.636,61.091 l0,46.545 l 232.727,0 L 372.364,61.091 z M 256,386.909l 116.364,0 l0-139.636 l-116.364,0 L 256,386.909 
+	z" data-tags="article, news, file" />
+<glyph unicode="&#xe008;" d="M 465.455-32L 46.545-32 c-25.693,0-46.545,20.852-46.545,46.545L0,433.455 c0,25.693, 20.852,46.545, 46.545,46.545l 418.909,0 c 25.693,0, 46.545-20.852, 46.545-46.545l0-418.909 
+	C 512-11.148, 491.148-32, 465.455-32z M 465.455,433.455L 46.545,433.455 l0-418.909 l 418.909,0 L 465.455,433.455 z M 232.727,130.909l 69.818,93.091l 116.364-162.909L 93.091,61.091 l 93.091,116.364L 232.727,130.909z M 186.182,270.545C 160.489,270.545, 139.636,291.398, 139.636,317.091s 20.852,46.545, 46.545,46.545s 46.545-20.852, 46.545-46.545
+	S 211.875,270.545, 186.182,270.545z" data-tags="pictures, images, photos" />
+<glyph unicode="&#xe009;" d="M 465.455-32L 46.545-32 c-25.693,0-46.545,20.852-46.545,46.545L0,433.455 c0,25.693, 20.852,46.545, 46.545,46.545l 418.909,0 c 25.693,0, 46.545-20.852, 46.545-46.545l0-418.909 
+	C 512-11.148, 491.148-32, 465.455-32z M 93.091,433.455L 46.545,433.455 l0-46.545 l 46.545,0 L 93.091,433.455 z M 93.091,363.636L 46.545,363.636 l0-46.545 l 46.545,0 L 93.091,363.636 z M 93.091,293.818L 46.545,293.818 l0-46.545 l 46.545,0 L 93.091,293.818 z M 93.091,200.727L 46.545,200.727 l0-46.545 l 46.545,0 L 93.091,200.727 z M 93.091,130.909L 46.545,130.909 l0-46.545 l 46.545,0 L 93.091,130.909 z M 93.091,61.091L 46.545,61.091 l0-46.545 l 46.545,0 L 93.091,61.091 z M 395.636,433.455L 116.364,433.455 
+	l0-418.909 l 279.273,0 L 395.636,433.455 z M 465.455,433.455l-46.545,0 l0-46.545 l 46.545,0 L 465.455,433.455 z M 465.455,363.636l-46.545,0 l0-46.545 l 46.545,0 L 465.455,363.636 z M 465.455,293.818l-46.545,0 l0-46.545 l 46.545,0 L 465.455,293.818 z M 465.455,200.727l-46.545,0 l0-46.545 l 46.545,0 L 465.455,200.727 z M 465.455,130.909l-46.545,0 l0-46.545 l 46.545,0 L 465.455,130.909 z M 465.455,61.091l-46.545,0 l0-46.545 l 46.545,0 L 465.455,61.091 z M 232.727,293.818
+	c 23.273,0, 93.091-46.545, 93.091-69.818s-69.818-69.818-93.091-69.818s-23.18,23.273-23.18,23.273L 209.548,270.545 C 209.548,270.545, 209.455,293.818, 232.727,293.818z" data-tags="videos, movies, film" />
+<glyph unicode="&#x20;" horiz-adv-x="256" />
+</font></defs></svg>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/home/fonts/ecoicons/ecoicons.eot
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/fonts/ecoicons/ecoicons.eot b/src/main/web/hicc/home/fonts/ecoicons/ecoicons.eot
new file mode 100644
index 0000000..9e1b492
Binary files /dev/null and b/src/main/web/hicc/home/fonts/ecoicons/ecoicons.eot differ

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/home/fonts/ecoicons/ecoicons.svg
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/fonts/ecoicons/ecoicons.svg b/src/main/web/hicc/home/fonts/ecoicons/ecoicons.svg
new file mode 100644
index 0000000..264eaa7
--- /dev/null
+++ b/src/main/web/hicc/home/fonts/ecoicons/ecoicons.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+This is a custom SVG font generated by IcoMoon.
+<iconset grid="16"></iconset>
+</metadata>
+<defs>
+<font id="ecoicons" horiz-adv-x="512" >
+<font-face units-per-em="512" ascent="480" descent="-32" />
+<missing-glyph horiz-adv-x="512" />
+<glyph class="hidden" unicode="&#xf000;" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
+<glyph unicode="&#xe000;" d="M 256-32C 114.618-32,0,82.618,0,224S 114.618,480, 256,480s 256-114.618, 256-256S 397.382-32, 256-32z
+	 M 256,433.455c-115.689,0-209.455-93.766-209.455-209.455s 93.766-209.455, 209.455-209.455s 209.455,93.766, 209.455,209.455S 371.689,433.455, 256,433.455z M 279.273,180.759C 279.273,168.006, 279.273,154.182, 279.273,154.182l-46.545,0 c0,0,0,33.676,0,46.545
+	s 10.426,23.273, 23.273,23.273l0,0c 25.693,0, 46.545,20.852, 46.545,46.545s-20.852,46.545-46.545,46.545S 209.455,296.239, 209.455,270.545c0-8.518, 2.444-16.407, 6.447-23.273L 166.214,247.273 C 164.259,254.743, 162.909,262.47, 162.909,270.545
+	c0,51.409, 41.681,93.091, 93.091,93.091s 93.091-41.681, 93.091-93.091C 349.091,227.235, 319.372,191.139, 279.273,180.759z M 279.273,84.364l-46.545,0 l0,46.545 l 46.545,0 L 279.273,84.364 z"  />
+<glyph unicode="&#xe004;" d="M 256-32C 114.618-32,0,82.618,0,224S 114.618,480, 256,480s 256-114.618, 256-256S 397.382-32, 256-32z
+	 M 256,433.455c-115.689,0-209.455-93.766-209.455-209.455s 93.766-209.455, 209.455-209.455s 209.455,93.766, 209.455,209.455S 371.689,433.455, 256,433.455z M 360.937,100.375l-6.028-3.631l-17.455-10.915l-10.287-7.727
+	c-7.633-3.724-15.616-6.679-23.878-9.216l0,10.38 l-2.909,23.994c0,0-1.443,13.824-3.631,17.455s-7.261,8.727-12.358,10.915
+	s-8.727,2.188-11.636,5.818s-5.097,10.193-8.727,16.012S 256,165.097, 256,168.006S 256,200.727, 256,200.727l 3.631,27.648l 8.006,5.818l 9.449,10.915L 283.648,247.273
+	l 22.551-4.375l 16.012,0 l 6.54-13.824l 15.267-12.358l 9.449-15.267l 12.358-4.375l 13.824,0 l 9.449-11.636l 5.818-12.358l 2.188-8.727l0-14.545 l-1.489-8.588
+	C 386.351,125.673, 374.668,112.012, 360.937,100.375z M 304.733,351.279l-16.012-8.727l-5.818-16.733L 273.455,317.091l-31.279,0 L 227.631,311.273L 226.909,299.636
+	L 221.091,290.188L 219.648,279.994l 2.909-8.727l 3.631-8.727c0,0, 8.727-10.193,0-17.455c0,0-10.915,0-13.079,3.631S 194.909,262.54, 192,265.449
+	s-12.358,5.818-12.358,5.818l-11.636,4.375L 157.091,276.364l 0.721,15.267L 157.091,304.733L 152.716,314.182L 140.358,323.631L 139.636,333.824l 1.489,5.655
+	C 170.589,368.78, 211.177,386.909, 256,386.909c 25.297,0, 48.943-6.26, 70.307-16.547L 325.818,366.545L 304.733,351.279z"  />
+<glyph unicode="&#xe006;" d="M 512,270.545l0-93.091 l-57.088-19.014c-3.258-9.868-7.447-19.223-12.055-28.393l 27.066-54.156l-65.839-65.815
+	l-54.202,27.113c-9.123-4.585-18.479-8.774-28.3-12.009L 302.545-32L 209.455-32 l-19.060,57.181c-9.821,3.235-19.177,7.401-28.276,12.009l-54.225-27.113
+	l-65.839,65.815l 27.089,54.156c-4.608,9.169-8.797,18.525-12.055,28.393L0,177.455L0,270.545 l 57.088,19.014c 3.258,9.868, 7.447,19.223, 12.055,28.393L 42.077,372.108
+	l 65.839,65.815l 54.225-27.113c 9.123,4.585, 18.455,8.774, 28.276,12.009L 209.455,480l 93.091,0 l 19.037-57.181c 9.821-3.235, 19.177-7.401, 28.3-12.009l 54.202,27.113
+	l 65.839-65.815l-27.066-54.156c 4.585-9.169, 8.797-18.525, 12.055-28.393L 512,270.545z M 416.721,247.808c-4.026,27.066-14.778,51.875-30.348,72.797
+	l 25.926,43.264L 395.869,380.346L 352.582,354.374c-20.945,15.476-45.684,26.135-72.727,30.138L 267.636,433.455l-23.273,0 L 232.122,384.489C 205.103,380.509, 180.364,369.85, 159.418,354.374
+	L 116.131,380.346L 99.677,363.892l 25.949-43.264C 110.033,299.683, 99.305,274.897, 95.279,247.808L 46.545,235.636l0-23.273 l 48.733-12.172
+	c 4.003-27.066, 14.755-51.875, 30.324-72.797l-25.949-43.264l 16.454-16.454l 43.287,25.972c 20.922-15.476, 45.684-26.135, 72.704-30.138L 244.364,14.545l 23.273,0 
+	l 12.218,48.966c 27.043,4.003, 51.782,14.662, 72.727,30.138l 43.264-25.972l 16.454,16.454l-25.926,43.264c 15.569,20.922, 26.321,45.731, 30.348,72.797
+	L 465.455,212.364l0,23.273 L 416.721,247.808z M 256,154.182c-38.563,0-69.818,31.255-69.818,69.818s 31.255,69.818, 69.818,69.818c 38.54,0, 69.818-31.255, 69.818-69.818S 294.54,154.182, 256,154.182z M 256,247.273
+	c-12.847,0-23.273-10.403-23.273-23.273s 10.426-23.273, 23.273-23.273c 12.87,0, 23.273,10.403, 23.273,23.273S 268.87,247.273, 256,247.273z"  />
+<glyph unicode="&#xe005;" d="M 512,14.545c0-46.545-46.545-46.545-46.545-46.545l-133.167,133.143C 297.775,76.055, 255.418,61.091, 209.455,61.091
+	c-115.689,0-209.455,93.766-209.455,209.455s 93.766,209.455, 209.455,209.455s 209.455-93.766, 209.455-209.455c0-45.964-14.988-88.32-40.076-122.857L 512,14.545z M 209.455,433.455C 119.482,433.455, 46.545,360.518, 46.545,270.545s 72.937-162.909, 162.909-162.909
+	s 162.909,72.937, 162.909,162.909S 299.427,433.455, 209.455,433.455z"  />
+<glyph unicode="&#xe007;" d="M 256-32C 114.618-32,0,82.618,0,224S 114.618,480, 256,480s 256-114.618, 256-256S 397.382-32, 256-32z
+	 M 256,433.455c-115.689,0-209.455-93.766-209.455-209.455s 93.766-209.455, 209.455-209.455s 209.455,93.766, 209.455,209.455S 371.689,433.455, 256,433.455z M 139.636,200.727l 69.818,0 l 46.545,186.182l 46.545-186.182l 69.818,0 l-116.364-116.364L 139.636,200.727z"  />
+<glyph unicode="&#xe001;" d="M 465.455-32L 46.545-32 c-25.693,0-46.545,20.852-46.545,46.545L0,433.455 c0,25.693, 20.852,46.545, 46.545,46.545l 418.909,0 c 25.693,0, 46.545-20.852, 46.545-46.545l0-418.909 
+	C 512-11.148, 491.148-32, 465.455-32z M 465.455,433.455L 46.545,433.455 l0-418.909 l 418.909,0 L 465.455,433.455 z M 249.111,301.708c 11.334-9.053, 18.735-23.552, 18.735-40.797c0-17.524-5.679-32.023-16.454-41.891
+	c-13.894-13.405-35.747-19.712-60.416-19.712c-6.516,0-12.497,0.279-17.012,1.094l0-69.539 L 139.334,130.863 L 139.334,312.902 c 12.474,2.211, 29.789,3.84, 53.318,3.84
+	C 218.205,316.742, 236.94,311.552, 249.111,301.708z M 173.964,226.956c 4.259-1.094, 9.937-1.373, 17.012-1.373c 26.089,0, 41.984,12.311, 41.984,33.955
+	c0,20.527-14.755,31.488-38.865,31.488c-9.635,0-16.454-0.815-20.131-1.629L 173.964,226.956 z M 330.333,152.227c 15.313,0, 22.109,6.028, 22.109,14.778
+	c0,9.053-5.655,13.708-22.691,19.433c-26.95,9.053-38.307,23.273-38.028,38.889c0,23.552, 20.131,41.891, 52.201,41.891c 15.313,0, 28.625-3.84, 36.585-7.936
+	l-6.819-23.808c-5.958,3.281-17.012,7.657-29.207,7.657c-12.474,0-19.293-5.748-19.293-13.987c0-8.471, 6.516-12.591, 24.111-18.595
+	c 24.948-8.774, 36.585-21.085, 36.864-40.797c0-24.087-19.572-41.891-56.157-41.891c-16.733,0-31.767,4.096-41.984,9.565l 6.796,24.367
+	C 302.825,157.161, 317.836,152.227, 330.333,152.227z"  />
+<glyph unicode="&#xe002;" d="M 465.455-32L 46.545-32 c-25.693,0-46.545,20.852-46.545,46.545L0,433.455 c0,25.693, 20.852,46.545, 46.545,46.545l 418.909,0 c 25.693,0, 46.545-20.852, 46.545-46.545l0-418.909 
+	C 512-11.148, 491.148-32, 465.455-32z M 465.455,433.455L 46.545,433.455 l0-418.909 l 418.909,0 L 465.455,433.455 z M 246.993,316.323l 61.114-185.879l-36.841,0 l-17.012,52.689L 194.513,183.133 l-16.175-52.689L 142.895,130.444 L 203.171,316.323
+	L 246.993,316.323 z M 248.39,208.756l-14.801,45.801C 229.981,265.844, 226.909,278.551, 224.116,289.303L 223.535,289.303 c-2.793-10.752-5.562-23.738-8.937-34.746l-14.499-45.801
+	L 248.39,208.756 z M 350.371,320.721c 11.729,0, 18.967-8.006, 19.247-18.479c0-10.193-7.517-18.199-19.526-18.199c-11.45,0-18.967,8.006-18.967,18.199
+	C 331.124,312.716, 338.897,320.721, 350.371,320.721z M 367.663,130.42l-34.583,0 L 333.079,264.751 l 34.583,0 L 367.663,130.42 z"  />
+<glyph unicode="&#xe00d;" d="M 465.455,14.545c0,0-372.364,0-418.909,0s-46.545,46.545-46.545,46.545l0,162.909 l 116.364,209.455l 279.273,0 l 116.364-209.455c0,0,0-116.364,0-162.909S 465.455,14.545, 465.455,14.545z M 372.364,386.909L 139.636,386.909 
+	l-81.455-162.909L 162.909,224 c0,0, 46.545,0, 46.545-46.545l0-23.273 l 93.091,0 l0,23.273 c0,0,0,46.545, 46.545,46.545l 104.727,0 L 372.364,386.909z M 465.455,177.455l-110.755,0 C 351.465,171.334, 349.091,164.003, 349.091,154.182c0-46.545-46.545-46.545-46.545-46.545L 209.455,107.636 c0,0-46.545,0-46.545,46.545
+	c0,9.821-2.374,17.152-5.609,23.273L 46.545,177.455 l0-116.364 l 418.909,0 L 465.455,177.455 z M 151.273,293.818l 209.455,0 L 372.364,270.545L 139.636,270.545 L 151.273,293.818z M 174.545,340.364l 162.909,0 L 349.091,317.091L 162.909,317.091 L 174.545,340.364z"  />
+<glyph unicode="&#xe003;" d="M 418.909-32L 93.091-32 c-25.693,0-46.545,20.852-46.545,46.545L 46.545,433.455 c0,25.693, 20.852,46.545, 46.545,46.545l 325.818,0 c 25.693,0, 46.545-20.852, 46.545-46.545l0-418.909 
+	C 465.455-11.148, 444.602-32, 418.909-32z M 418.909,433.455L 93.091,433.455 l0-418.909 l 325.818,0 L 418.909,433.455 z M 209.455,340.364L 139.636,340.364 L 139.636,386.909 l 69.818,0 L 209.455,340.364 z M 209.455,247.273L 139.636,247.273 L 139.636,293.818 l 69.818,0 L 209.455,247.273 z M 372.364,154.182L 139.636,154.182 l0,46.545 l 232.727,0 L 372.364,154.182 z M 372.364,61.091L 139.636,61.091 l0,46.545 l 232.727,0 L 372.364,61.091 z M 256,386.909l 116.364,0 l0-139.636 l-116.364,0 L 256,386.909 
+	z"  />
+<glyph unicode="&#xe008;" d="M 465.455-32L 46.545-32 c-25.693,0-46.545,20.852-46.545,46.545L0,433.455 c0,25.693, 20.852,46.545, 46.545,46.545l 418.909,0 c 25.693,0, 46.545-20.852, 46.545-46.545l0-418.909 
+	C 512-11.148, 491.148-32, 465.455-32z M 465.455,433.455L 46.545,433.455 l0-418.909 l 418.909,0 L 465.455,433.455 z M 232.727,130.909l 69.818,93.091l 116.364-162.909L 93.091,61.091 l 93.091,116.364L 232.727,130.909z M 186.182,270.545C 160.489,270.545, 139.636,291.398, 139.636,317.091s 20.852,46.545, 46.545,46.545s 46.545-20.852, 46.545-46.545
+	S 211.875,270.545, 186.182,270.545z"  />
+<glyph unicode="&#xe009;" d="M 465.455-32L 46.545-32 c-25.693,0-46.545,20.852-46.545,46.545L0,433.455 c0,25.693, 20.852,46.545, 46.545,46.545l 418.909,0 c 25.693,0, 46.545-20.852, 46.545-46.545l0-418.909 
+	C 512-11.148, 491.148-32, 465.455-32z M 93.091,433.455L 46.545,433.455 l0-46.545 l 46.545,0 L 93.091,433.455 z M 93.091,363.636L 46.545,363.636 l0-46.545 l 46.545,0 L 93.091,363.636 z M 93.091,293.818L 46.545,293.818 l0-46.545 l 46.545,0 L 93.091,293.818 z M 93.091,200.727L 46.545,200.727 l0-46.545 l 46.545,0 L 93.091,200.727 z M 93.091,130.909L 46.545,130.909 l0-46.545 l 46.545,0 L 93.091,130.909 z M 93.091,61.091L 46.545,61.091 l0-46.545 l 46.545,0 L 93.091,61.091 z M 395.636,433.455L 116.364,433.455 
+	l0-418.909 l 279.273,0 L 395.636,433.455 z M 465.455,433.455l-46.545,0 l0-46.545 l 46.545,0 L 465.455,433.455 z M 465.455,363.636l-46.545,0 l0-46.545 l 46.545,0 L 465.455,363.636 z M 465.455,293.818l-46.545,0 l0-46.545 l 46.545,0 L 465.455,293.818 z M 465.455,200.727l-46.545,0 l0-46.545 l 46.545,0 L 465.455,200.727 z M 465.455,130.909l-46.545,0 l0-46.545 l 46.545,0 L 465.455,130.909 z M 465.455,61.091l-46.545,0 l0-46.545 l 46.545,0 L 465.455,61.091 z M 232.727,293.818
+	c 23.273,0, 93.091-46.545, 93.091-69.818s-69.818-69.818-93.091-69.818s-23.18,23.273-23.18,23.273L 209.548,270.545 C 209.548,270.545, 209.455,293.818, 232.727,293.818z"  />
+<glyph unicode="&#x20;" horiz-adv-x="256" />
+</font></defs></svg>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/home/fonts/ecoicons/ecoicons.ttf
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/fonts/ecoicons/ecoicons.ttf b/src/main/web/hicc/home/fonts/ecoicons/ecoicons.ttf
new file mode 100644
index 0000000..84c488b
Binary files /dev/null and b/src/main/web/hicc/home/fonts/ecoicons/ecoicons.ttf differ

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/home/fonts/ecoicons/ecoicons.woff
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/fonts/ecoicons/ecoicons.woff b/src/main/web/hicc/home/fonts/ecoicons/ecoicons.woff
new file mode 100644
index 0000000..ccc1d32
Binary files /dev/null and b/src/main/web/hicc/home/fonts/ecoicons/ecoicons.woff differ

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/home/fonts/ecoicons/license.txt
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/fonts/ecoicons/license.txt b/src/main/web/hicc/home/fonts/ecoicons/license.txt
new file mode 100644
index 0000000..c3589f3
--- /dev/null
+++ b/src/main/web/hicc/home/fonts/ecoicons/license.txt
@@ -0,0 +1,2 @@
+Icon Set:	Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico
+License:	CC0 -- http://creativecommons.org/publicdomain/zero/1.0/
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/home/graph-explorer.html
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/graph-explorer.html b/src/main/web/hicc/home/graph-explorer.html
new file mode 100644
index 0000000..71f7481
--- /dev/null
+++ b/src/main/web/hicc/home/graph-explorer.html
@@ -0,0 +1,346 @@
+<!--
+
+ 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.
+
+-->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+  <link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet" />
+  <link href="../css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
+  <script src="../js/jquery.js" type="text/javascript"></script>
+  <script src="../js/bootstrap.min.js" type="text/javascript"></script>
+  <style>
+    .nowrap td {
+      white-space: nowrap;
+      padding: 5px;
+    }
+
+    body {
+      margin: 5px;
+    }
+
+    #graph {
+      min-height: 400px;
+    }
+  </style>
+  <script>
+    function status(type, message) {
+      $('#status').html('<div class="alert alert-'+type+' alert-dismissible" role="alert">'+
+        '<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
+        '<span aria-hidden="true">&times;</span></button>'+
+        message+'</div>');
+    }
+
+    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) {
+          curOption.attr('disabled', 'disabled');
+        }
+      }
+    };
+
+    $.ajax({ url: "/hicc/v1/metrics/schema", dataType: "json", success: function(data){
+      for(var i in data) {
+        $('#table').append("<option>"+data[i]+"</option>");
+      }
+      // Look through each table option and see if it has anything in its family?
+      $('#table').children().each(
+        function() {
+          var table = $(this).text();
+          $.ajax({ url: encodeURI("/hicc/v1/metrics/schema/"+table), 
+                   dataType: "json", 
+                   success: checkDataLength($(this))
+          });
+        }
+      );
+    }});
+
+
+    function getFamilies() {
+      var size = $('#family option').size();
+      $('#family').find('option').remove();
+      var table = $('#table').val();
+      $.ajax({ url: encodeURI("/hicc/v1/metrics/schema/"+table), dataType: "json", success: function(data){
+        for(var i in data) {
+          $('#family').append("<option>"+data[i]+"</option>");
+        }
+        // Look through each family option and see if it has any columns
+        var table = $('#table').val();
+        $('#family').children().each(
+          function() {
+            var family = $(this).text();
+            $.ajax({ url: encodeURI("/hicc/v1/metrics/source/"+table), 
+                     dataType: "json", 
+                     success: checkDataLength($(this))
+            });
+          }
+        );
+      }});
+    }
+
+    function getColumns() {
+      var size = $('#column option').size();
+      $('#column').find('option').remove();
+      var table = $('#table').val();
+      var family = $('#family').val();
+      $('#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></option>")
+                .attr("value", tableFamily+"/"+data[i])
+                .text(data[i])
+            );
+          }
+        }});
+      });
+    }
+
+    function getRows() {
+      var size = $('#row option').size();
+      $('#row').find('option').remove();
+      $('#chartType').html("");
+      $('#family :selected').each(function(i, selected) {
+        var metric = $(selected).val();
+        var selection = metric+": <select id='ctype"+i+"' class='form-control'><option>lines</option><option>bars</option><option>points</option><option>area</option></select><br>";
+        $('#chartType').append(selection);
+      });
+      $('#table :selected').each(function(i, selected) {
+        var metricGroup = $(selected).val();
+        var url = encodeURI("/hicc/v1/metrics/source/"+metricGroup);
+        $.ajax({ url: url, dataType: "json", success: function(data){
+          for(var i in data) {
+            var test = $('#row').find('option[value="'+data[i]+'"]').val();
+            if(typeof(test) == "undefined") {
+              $('#row').append('<option value="'+data[i]+'">'+data[i]+'</option>');
+            }
+          }
+        }});
+      });
+    }
+
+    function buildChart() {
+      var test = $('#row').val();
+      if(test == null) {
+        $('#row option:eq(0)').attr('selected',true);
+      }
+      var url = [];
+      var idx = 0;
+      $('#family :selected').each(function(i, selected) {
+        var id = '#ctype' + i;
+        var chartType = $(id).val();
+        var chartTypeOption = { show: true };
+        if (chartType=='area') {
+          chartTypeOption = { show: true, fill: true };
+        }
+        $('#row :selected').each(function(j, rowSelected) {
+          var s = { 'label' : $(selected).val() + "/" + $(rowSelected).val(), 'url' : encodeURI("/hicc/v1/metrics/series/" + $(selected).val() + "/" + $(rowSelected).val())};
+          if(chartType=='area') {
+            s['lines']=chartTypeOption;
+          } else {
+            s[chartType]=chartTypeOption;
+          }
+          url[idx++] = s;
+        }); 
+      });
+      var title = $('#title').val();
+      var ymin = $('#ymin').val() ;
+      var ymax = $('#ymax').val();
+      var yunit = $('#yunit').val();
+      var data = { 'title' : title, 'yUnitType' : yunit, 'width' : 300, 'height' : 200, 'series' : url };
+      if(ymin!='') {
+        data['min']=ymin;
+      }
+      if(ymax!='') {
+        data['max']=ymax;
+      }
+      return data;
+    }
+
+    function plot() {
+      var data = buildChart();
+      $.ajax({
+        url: '/hicc/v1/chart/preview',
+        type: 'PUT',
+        contentType: 'application/json',
+        data: JSON.stringify(data),
+        success: function(result) {
+          $('#graph')[0].src="about:blank";
+          $('#graph')[0].contentWindow.document.open();
+          $('#graph')[0].contentWindow.document.write(result);
+          $('#graph')[0].contentWindow.document.close();
+        }
+      });
+    }
+
+    function buildWidget(title, url) {
+      var widget = {
+        title: title,
+        src: url
+      }
+      widget['tokens'] = title.split(" ");
+      $.ajax({
+        type: "POST",
+        url: '/hicc/v1/widget/create',
+        contentType: "application/json",
+        data: JSON.stringify(widget),
+        success: function(data) {
+          status("success", "Widget exported.");
+        },
+        error: function(data) {
+          status("danger", "Widget export failed.");
+        }
+      });
+    }
+
+    function publishChart() {
+      var json = buildChart();
+      var url = "/hicc/v1/chart/save";
+      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.";
+        }
+      } catch(err) {
+        console.log(err);
+        return false;
+      }
+      $.ajax({ 
+        type: "POST",
+        url: url, 
+        contentType : "application/json",
+        data: JSON.stringify(json),
+        success: function(data) {
+          buildWidget(json.title, '/hicc/v1/chart/draw/'+data);
+        },
+        error: function(data) {
+          alert("failed");
+          status("danger", "Chart export failed.");
+        }
+      });
+    }
+  </script>
+  </head>
+  <body>
+    <form>
+      <center>
+      <div id="status"></div>
+      <table class="nowrap">
+        <tr>
+          <th>Metric Groups</th>
+          <th>Metrics</th>
+          <th>Sources</th>
+          <th>Options</th>
+          <th>Chart Type</th>
+        </tr>
+        <tr>
+          <td>
+            <select id="table" size="10" onMouseUp="getFamilies()" style="min-width: 100px;" class="form-control">
+            </select>
+          </td>
+          <td>
+            <select id="family" multiple size="10" style="min-width: 110px;" onMouseUp="getRows()" class="form-control">
+            </select>
+          </td>
+          <td>
+            <select id="row" size="10" style="min-width: 100px;" class="form-control">
+            </select>
+          </td>
+          <td>
+            <table>
+              <tr>
+                <td>
+                  <label>Title</label>
+                </td>
+                <td>
+                  <input type=text id="title" class="form-control" />
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <label>Y-axis Min</label>
+                </td>
+                <td>
+                  <input type="text" id="ymin" class="form-control" />
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <label>Y-axis Max</label>
+                </td>
+                <td>
+                  <input type="text" id="ymax" class="form-control" />
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <label>Y-axis Unit</label>
+                </td>
+                <td>
+                  <select id="yunit" class="form-control">
+                    <option>bytes</option>
+                    <option>bytes-decimal</option>
+                    <option value="ops">op/s</option>
+                    <option value="percent">%</option>
+                    <option>generic</option>
+                  </select>
+                </td>
+              </tr>
+            </table>
+          </td>
+          <td>
+            <div id="chartType"></div>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="5">
+            <input type=button name="action" value="Plot" class="btn btn-default" onClick="plot()">
+            <input type=button name="action" value="Publish" class="btn btn-default" onClick="publishChart()">
+          </td>
+        </tr>
+      </table>
+    </form>
+    <iframe id="graph" width="95%" height="400px" frameBorder="0" scrolling="no"></iframe>
+    </center>
+  </body>
+</html>

http://git-wip-us.apache.org/repos/asf/chukwa/blob/dfe84a2c/src/main/web/hicc/home/help/index.html
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/help/index.html b/src/main/web/hicc/home/help/index.html
new file mode 100644
index 0000000..6fd23c5
--- /dev/null
+++ b/src/main/web/hicc/home/help/index.html
@@ -0,0 +1,58 @@
+<!--
+
+ 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.
+
+-->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Help</title>
+    <link href="../../css/bootstrap.min.css" type="text/css" rel="stylesheet" />
+    <link href="../../css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
+    <script src="../../js/jquery.js" type="text/javascript"></script>
+    <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-xs-1 col-md-1 col-lg-1"></div>
+        <div class="col-xs-10 col-md-10 col-lg-10">
+          <h1>Hadoop Infrastructure Care Center Help</h1>
+
+          <h2>Search</h2>
+          <p class="lead">Auto complete search box to find widget by widget title.</p>
+
+          <h2>User Activity</h2>
+          <p class="lead">Default dashboard for user to customize and monitor user activities.</p>
+
+          <h2>System Activity</h2>
+          <p class="lead">System dashboard for monitoring system activities.</p>
+
+          <h2>Graph Explorer</h2>
+          <p class="lead">Add a Graph Explorer widget to current dashboard.</p>
+
+          <h2>Settings</h2>
+          <p class="lead">User preference settings.</p>
+
+          <h2>Help</h2>
+          <p class="lead">This page.</p>
+        </div>
+        <div class="col-xs-1 col-md-1 col-lg-1"></div>
+      </div>
+    </div>
+  </body>
+</html>


Mime
View raw message