chukwa-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ey...@apache.org
Subject [3/9] chukwa git commit: CHUKWA-777. Added Home page and some widgets for the demo purpose. (Eric Yang)
Date Sun, 13 Sep 2015 20:27:56 GMT
CHUKWA-777. Added Home page and some widgets for the demo purpose. (Eric Yang)


Project: http://git-wip-us.apache.org/repos/asf/chukwa/repo
Commit: http://git-wip-us.apache.org/repos/asf/chukwa/commit/602b55f9
Tree: http://git-wip-us.apache.org/repos/asf/chukwa/tree/602b55f9
Diff: http://git-wip-us.apache.org/repos/asf/chukwa/diff/602b55f9

Branch: refs/heads/master
Commit: 602b55f962657f35baab7a0c2f42de8947f6fb4b
Parents: 253797e
Author: Eric Yang <eyang@apache.org>
Authored: Sat Sep 5 14:14:27 2015 -0700
Committer: Eric Yang <eyang@apache.org>
Committed: Sat Sep 5 20:57:16 2015 -0700

----------------------------------------------------------------------
 CHANGES.txt                                    |  2 +
 src/main/web/hicc/apps/apps-usage.html         | 56 +++++++++++++++
 src/main/web/hicc/apps/index.html              | 38 +++++++++++
 src/main/web/hicc/apps/pie.js                  | 27 ++++++++
 src/main/web/hicc/clusters/index.html          | 38 +++++++++++
 src/main/web/hicc/home/apps.html               | 76 +++++++++++++++++++++
 src/main/web/hicc/home/clusters.html           | 76 +++++++++++++++++++++
 src/main/web/hicc/home/css/component.css       |  6 ++
 src/main/web/hicc/home/css/jquery.gridster.css |  1 +
 src/main/web/hicc/home/downloads.html          | 76 +++++++++++++++++++++
 src/main/web/hicc/home/index.html              | 29 ++++++--
 src/main/web/hicc/home/js/jquery.gridster.js   |  2 +-
 src/main/web/hicc/home/tile.html               | 34 +++++++--
 src/main/web/hicc/home/users.html              | 76 +++++++++++++++++++++
 src/main/web/hicc/services/services.html       | 76 +++++++++++++++++++++
 src/main/web/hicc/users/index.html             | 38 +++++++++++
 16 files changed, 637 insertions(+), 14 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/chukwa/blob/602b55f9/CHANGES.txt
----------------------------------------------------------------------
diff --git a/CHANGES.txt b/CHANGES.txt
index ca9eefa..d70aa71 100644
--- a/CHANGES.txt
+++ b/CHANGES.txt
@@ -4,6 +4,8 @@ Trunk (unreleased changes)
 
   NEW FEATURES
 
+    CHUKWA-777. Added Home page and some widgets for the demo purpose. (Eric Yang)
+
     CHUKWA-776. Added Docker support.  (Eric Yang)
 
     CHUKWA-772. Added ChukwaParquetWriter.  (Eric Yang)

http://git-wip-us.apache.org/repos/asf/chukwa/blob/602b55f9/src/main/web/hicc/apps/apps-usage.html
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/apps/apps-usage.html b/src/main/web/hicc/apps/apps-usage.html
new file mode 100644
index 0000000..4e25506
--- /dev/null
+++ b/src/main/web/hicc/apps/apps-usage.html
@@ -0,0 +1,56 @@
+<!--
+  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>Applications Usage</title>
+    <link href="../css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
+    <link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet" />
+    <link href="../css/chartist.css" type="text/css" rel="stylesheet" />
+    <script src="../js/jquery.js"></script>
+    <script src="../js/bootstrap.min.js" type="text/javascript"></script>
+    <script src="../js/chartist.min.js" type="text/javascript"></script>
+<style>
+.outer {
+    display: table;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+}
+
+.middle {
+    display: table-cell;
+    vertical-align: middle;
+}
+
+.inner {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+</style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="middle">
+        <div class="ct-chart ct-perfect-fourth inner"></div>
+      </div>
+    </div>
+    <script src="pie.js"></script>
+  </body>
+</html>

http://git-wip-us.apache.org/repos/asf/chukwa/blob/602b55f9/src/main/web/hicc/apps/index.html
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/apps/index.html b/src/main/web/hicc/apps/index.html
new file mode 100644
index 0000000..61467ba
--- /dev/null
+++ b/src/main/web/hicc/apps/index.html
@@ -0,0 +1,38 @@
+<!--
+  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>Top Applications</title>
+    <link href="/hicc/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
+    <link href="/hicc/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
+    <script src="/hicc/js/jquery.js"></script>
+    <script src="/hicc/js/bootstrap.min.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <table class="table">
+      <tr><th>Top Applications</th><th>Resource Usage</th></tr>
+      <tr><td>Mapreduce</td><td>45%</td></tr>
+      <tr><td>HBase</td><td>29%</td></tr>
+      <tr><td>Hive</td><td>21%</td></tr>
+      <tr><td>Spark</td><td>3%</td></tr>
+      <tr><td>BigSQL</td><td>2%</td></tr>
+      <tr><td>R</td><td>1%</td></tr>
+    </table>
+  </body>
+</html>

http://git-wip-us.apache.org/repos/asf/chukwa/blob/602b55f9/src/main/web/hicc/apps/pie.js
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/apps/pie.js b/src/main/web/hicc/apps/pie.js
new file mode 100644
index 0000000..9f4d72c
--- /dev/null
+++ b/src/main/web/hicc/apps/pie.js
@@ -0,0 +1,27 @@
+var data = {
+  labels: ['Mapreduce', 'HBase', 'Hive', 'Spark', 'BigSQL', 'R'],
+  series: [45, 29, 21,3, 2, 1]
+};
+
+var options = {
+  labelInterpolationFnc: function(value) {
+    return value[0]
+  }
+};
+
+var responsiveOptions = [
+  ['screen and (min-width: 200px)', {
+    chartPadding: 20,
+    labelOffset: 20,
+    labelDirection: 'explode',
+    labelInterpolationFnc: function(value) {
+      return value;
+    }
+  }],
+  ['screen and (min-width: 400px)', {
+    labelOffset: 80,
+    chartPadding: 20
+  }]
+];
+
+new Chartist.Pie('.ct-chart', data, options, responsiveOptions);

http://git-wip-us.apache.org/repos/asf/chukwa/blob/602b55f9/src/main/web/hicc/clusters/index.html
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/clusters/index.html b/src/main/web/hicc/clusters/index.html
new file mode 100644
index 0000000..44ce78b
--- /dev/null
+++ b/src/main/web/hicc/clusters/index.html
@@ -0,0 +1,38 @@
+<!--
+  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>Top Users</title>
+    <link href="/hicc/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
+    <link href="/hicc/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
+    <script src="/hicc/js/jquery.js"></script>
+    <script src="/hicc/js/bootstrap.min.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <table class="table">
+      <tr><th>Top Active Clusters</th><th>System Load</th></tr>
+      <tr><td>af:00:f3:1a:09:ab</td><td>10.1</td></tr>
+      <tr><td>ef:20:63:1c:05:01</td><td>5.2</td></tr>
+      <tr><td>ef:20:63:1c:05:07</td><td>3.9</td></tr>
+      <tr><td>cd:21:62:b1:45:5a</td><td>2.1</td></tr>
+      <tr><td>4d:11:72:31:14:44</td><td>1.4</td></tr>
+      <tr><td>11:11:99:31:91:94</td><td>0.6</td></tr>
+    </table>
+  </body>
+</html>

http://git-wip-us.apache.org/repos/asf/chukwa/blob/602b55f9/src/main/web/hicc/home/apps.html
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/apps.html b/src/main/web/hicc/home/apps.html
new file mode 100644
index 0000000..a281b68
--- /dev/null
+++ b/src/main/web/hicc/home/apps.html
@@ -0,0 +1,76 @@
+<!--
+  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" class="no-js">
+  <head>
+    <title>Tile</title>
+    <link href="../css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
+    <link href="../css/bootstrap.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>
+      .tile {
+        color: #ffffff;
+        background-color: #5bc0de;
+      }
+      .row {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display:         flex;
+      }
+      .banner {
+        background-color: #ffffff;
+      }
+    </style>
+  </head>
+  <body onResize="resize()">
+    <div class="jumbotron">
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-5 col-md-5 text-center tile">
+            <h2><span class="glyphicon glyphicon-picture" aria-hidden="true"></span></h2>
+            Applications
+        </div>
+        <div class="col-xs-7 col-md-7 text-center banner">
+          <p><h1>409</h1> Running</p>
+        </div>
+      </div>
+    </div>
+    </div>
+
+    <script src="js/jquery.js"></script>
+    <script>
+      var tracker;
+
+      function resize() {
+        clearTimeout(tracker);
+        tracker = setTimeout(render, 50);
+      }
+
+      function render() {
+        document.body.style.overflow = 'hidden';
+        tracker = setTimeout(render, 3000);
+      }
+
+      $( document ).ready(function() {
+        render();
+      });
+    </script>
+  </body>
+</html>

http://git-wip-us.apache.org/repos/asf/chukwa/blob/602b55f9/src/main/web/hicc/home/clusters.html
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/clusters.html b/src/main/web/hicc/home/clusters.html
new file mode 100644
index 0000000..a7fa49b
--- /dev/null
+++ b/src/main/web/hicc/home/clusters.html
@@ -0,0 +1,76 @@
+<!--
+  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" class="no-js">
+  <head>
+    <title>Tile</title>
+    <link href="../css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
+    <link href="../css/bootstrap.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>
+      .tile {
+        color: #ffffff;
+        background-color: #5bc0de;
+      }
+      .row {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display:         flex;
+      }
+      .banner {
+        background-color: #ffffff;
+      }
+    </style>
+  </head>
+  <body onResize="resize()">
+    <div class="jumbotron">
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-5 col-md-5 text-center tile">
+            <h2><span class="glyphicon glyphicon-cloud" aria-hidden="true"></span></h2>
+            Clusters
+        </div>
+        <div class="col-xs-7 col-md-7 text-center banner">
+          <p><h1>98</h1> Running</p>
+        </div>
+      </div>
+    </div>
+    </div>
+
+    <script src="js/jquery.js"></script>
+    <script>
+      var tracker;
+
+      function resize() {
+        clearTimeout(tracker);
+        tracker = setTimeout(render, 50);
+      }
+
+      function render() {
+        document.body.style.overflow = 'hidden';
+        tracker = setTimeout(render, 3000);
+      }
+
+      $( document ).ready(function() {
+        render();
+      });
+    </script>
+  </body>
+</html>

http://git-wip-us.apache.org/repos/asf/chukwa/blob/602b55f9/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
index 9828873..9b4bcec 100755
--- a/src/main/web/hicc/home/css/component.css
+++ b/src/main/web/hicc/home/css/component.css
@@ -457,6 +457,12 @@ input.gn-search:focus {
 		content: "\e017";
 }
 
+.gn-icon-home::before {
+		font-family: 'Glyphicons Halflings';
+		font-size: 18px;
+		content: "\e021";
+}
+
 .gn-username {
 		font-family: 'Helvetica Neue', Arial, sans-serif;
 }

http://git-wip-us.apache.org/repos/asf/chukwa/blob/602b55f9/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
index a0f3acf..ee40430 100755
--- a/src/main/web/hicc/home/css/jquery.gridster.css
+++ b/src/main/web/hicc/home/css/jquery.gridster.css
@@ -257,6 +257,7 @@ li iframe {
   width: 100%;
   height: 100%;
   border: 0px;
+  overflow: hidden;
 }
 
 .tt-dropdown-menu {

http://git-wip-us.apache.org/repos/asf/chukwa/blob/602b55f9/src/main/web/hicc/home/downloads.html
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/downloads.html b/src/main/web/hicc/home/downloads.html
new file mode 100644
index 0000000..f8d4353
--- /dev/null
+++ b/src/main/web/hicc/home/downloads.html
@@ -0,0 +1,76 @@
+<!--
+  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" class="no-js">
+  <head>
+    <title>Tile</title>
+    <link href="../css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
+    <link href="../css/bootstrap.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>
+      .tile {
+        color: #ffffff;
+        background-color: #5bc0de;
+      }
+      .row {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display:         flex;
+      }
+      .banner {
+        background-color: #ffffff;
+      }
+    </style>
+  </head>
+  <body onResize="resize()">
+    <div class="jumbotron">
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-5 col-md-5 text-center tile">
+            <h2><span class="glyphicon glyphicon-download" aria-hidden="true"></span></h2>
+            Trial
+        </div>
+        <div class="col-xs-7 col-md-7 text-center banner">
+          <p><h1>208</h1> Downloads</p>
+        </div>
+      </div>
+    </div>
+    </div>
+
+    <script src="js/jquery.js"></script>
+    <script>
+      var tracker;
+
+      function resize() {
+        clearTimeout(tracker);
+        tracker = setTimeout(render, 50);
+      }
+
+      function render() {
+        document.body.style.overflow = 'hidden';
+        tracker = setTimeout(render, 3000);
+      }
+
+      $( document ).ready(function() {
+        render();
+      });
+    </script>
+  </body>
+</html>

http://git-wip-us.apache.org/repos/asf/chukwa/blob/602b55f9/src/main/web/hicc/home/index.html
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/index.html b/src/main/web/hicc/home/index.html
index 38578bd..37656cc 100755
--- a/src/main/web/hicc/home/index.html
+++ b/src/main/web/hicc/home/index.html
@@ -34,7 +34,7 @@
     <script src="js/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>
     <script src="js/typeahead.bundle.js" type="text/javascript"></script>
   </head>
-  <body onunload="">
+  <body>
     <div id="glass" class="glass" onclick="toggleGlass()"></div>
     <div class="frame">
       <ul><li><iframe id="frame"></iframe></li></ul>
@@ -51,7 +51,8 @@
                   <input placeholder="Search" id="url" type="search" class="gn-search">
                   <a class="gn-icon gn-icon-search"><span>Search</span></a>
                 </li>
-                <li><a class="gn-icon gn-icon-illustrator" onclick="setDashboard('default')">User
Activities</a></li>
+                <li><a class="gn-icon gn-icon-home" onclick="setDashboard('default')">Home</a></li>
+                <li><a class="gn-icon gn-icon-illustrator" onclick="setDashboard('user')">User
Activities</a></li>
                 <li><a class="gn-icon gn-icon-article" onclick="setDashboard('system')">System
Activities</a></li>
                 <li><a class="gn-icon gn-icon-pictures" onclick="showFrame('graph-explorer.html')">Graph
Explorer</a></li>
                 <li><a class="gn-icon gn-icon-cog" onclick="showFrame('settings')">Settings</a></li>
@@ -80,7 +81,7 @@
     <script src="js/classie.js"></script>
     <script src="js/gnmenu.js"></script>
     <script>
-
+window.onunload = function(){};
 var dashboard = 'default';
 var widgets = [];
 var widgetsToUrl = {};
@@ -224,9 +225,25 @@ function showFrame(target) {
   gnMenu._closeMenu();
 }
 
+// Read a page's GET URL variables and return them as an associative array.
+function getUrlVars()
+{
+    var vars = [], hash;
+    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+    for(var i = 0; i < hashes.length; i++)
+    {
+        hash = hashes[i].split('=');
+        vars.push(hash[0]);
+        vars[hash[0]] = hash[1];
+    }
+    return vars;
+}
+
 var gnMenu = new gnMenu( document.getElementById( 'gn-menu' ) );
 $(function(){ //DOM Ready
-
+  if(getUrlVars()['view']!=null) {
+    dashboard = getUrlVars()['view'];
+  }
   $.getJSON('/hicc/v1/session/key/period',
     function(data) {
       var value = (data['period'] == null) ? "last1hr" : data['period'];
@@ -256,7 +273,7 @@ $(function(){ //DOM Ready
 
   $.getJSON('/hicc/v1/session/key/dashboard',
     function(data) {
-      var value = (data['dashboard'] == null) ? "default" : data['dashboard'];
+      var value = (data['dashboard'] != null) ? data['dashboard'] : "default";
       dashboard = value;
       load();
     }
@@ -281,7 +298,7 @@ function logout() {
     url: '/hicc/logout',
     success: function(data) {
       document.cookie = 'JSESSIONID=;path=/hicc;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
-      window.location.assign("/hicc/login.jsp");
+      window.location.assign("/hicc/v1/login/check");
     }
   });
 }

http://git-wip-us.apache.org/repos/asf/chukwa/blob/602b55f9/src/main/web/hicc/home/js/jquery.gridster.js
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/js/jquery.gridster.js b/src/main/web/hicc/home/js/jquery.gridster.js
index 1276676..0f61c44 100755
--- a/src/main/web/hicc/home/js/jquery.gridster.js
+++ b/src/main/web/hicc/home/js/jquery.gridster.js
@@ -1198,7 +1198,7 @@
 
             this.empty_cells(col, row, size_x, size_y);
         }
-        var html = '<li><iframe src="'+url+'"/></li>';
+        var html = '<li><iframe src="'+url+'" seamless /></li>';
         var $w = $(html).attr({
                 'data-col': pos.col,
                 'data-row': pos.row,

http://git-wip-us.apache.org/repos/asf/chukwa/blob/602b55f9/src/main/web/hicc/home/tile.html
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/tile.html b/src/main/web/hicc/home/tile.html
index 1fc905e..cf1aa91 100644
--- a/src/main/web/hicc/home/tile.html
+++ b/src/main/web/hicc/home/tile.html
@@ -19,18 +19,38 @@
 <html lang="en" class="no-js">
   <head>
     <title>Tile</title>
-    <link href="../../css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
-    <link href="../../css/bootstrap.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>
+    <link href="../css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
+    <link href="../css/bootstrap.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>
+      .tile {
+        color: #ffffff;
+        background-color: #5bc0de;
+      }
+      .row {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display:         flex;
+      }
+    </style>
   </head>
   <body onResize="resize()">
-    <div class="container-fluid">
+    <div class="jumbotron">
+    <div class="container">
       <div class="row">
-        <div class=".col-xs-1 .col-sm-1 .col-md-1 .col-lg-1 glyhicon-hdd"></div>
-        <div class=".col-xs-1 .col-sm-2 .col-md-2 .col-lg-2">1000</div>
+        <div class="col-xs-5 col-md-5 text-center tile">
+            <h2><span class="glyphicon glyphicon-picture" aria-hidden="true"></span></h2>
+            Applications
+        </div>
+        <div class="col-xs-7 col-md-7 text-center">
+          <p><h1>4</h1> Running</p>
+        </div>
       </div>
     </div>
+    </div>
+
     <script src="js/jquery.js"></script>
     <script>
       var tracker;

http://git-wip-us.apache.org/repos/asf/chukwa/blob/602b55f9/src/main/web/hicc/home/users.html
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/home/users.html b/src/main/web/hicc/home/users.html
new file mode 100644
index 0000000..0a62948
--- /dev/null
+++ b/src/main/web/hicc/home/users.html
@@ -0,0 +1,76 @@
+<!--
+  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" class="no-js">
+  <head>
+    <title>Tile</title>
+    <link href="../css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
+    <link href="../css/bootstrap.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>
+      .tile {
+        color: #ffffff;
+        background-color: #5bc0de;
+      }
+      .row {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display:         flex;
+      }
+      .banner {
+        background-color: #ffffff;
+      }
+    </style>
+  </head>
+  <body onResize="resize()">
+    <div class="jumbotron">
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-5 col-md-5 text-center tile">
+            <h2><span class="glyphicon glyphicon-user" aria-hidden="true"></span></h2>
+            Users
+        </div>
+        <div class="col-xs-7 col-md-7 text-center banner">
+          <p><h1>25</h1> Working</p>
+        </div>
+      </div>
+    </div>
+    </div>
+
+    <script src="js/jquery.js"></script>
+    <script>
+      var tracker;
+
+      function resize() {
+        clearTimeout(tracker);
+        tracker = setTimeout(render, 50);
+      }
+
+      function render() {
+        document.body.style.overflow = 'hidden';
+        tracker = setTimeout(render, 3000);
+      }
+
+      $( document ).ready(function() {
+        render();
+      });
+    </script>
+  </body>
+</html>

http://git-wip-us.apache.org/repos/asf/chukwa/blob/602b55f9/src/main/web/hicc/services/services.html
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/services/services.html b/src/main/web/hicc/services/services.html
new file mode 100644
index 0000000..70ef63e
--- /dev/null
+++ b/src/main/web/hicc/services/services.html
@@ -0,0 +1,76 @@
+<!--
+  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" class="no-js">
+  <head>
+    <title>Tile</title>
+    <link href="../css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
+    <link href="../css/bootstrap.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>
+      .tile {
+        color: #ffffff;
+        background-color: #5bc0de;
+      }
+      .row {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display:         flex;
+      }
+      .banner {
+        background-color: #ffffff;
+      }
+    </style>
+  </head>
+  <body onResize="resize()">
+    <div class="jumbotron">
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-5 col-md-5 text-center tile">
+            <h2><span class="glyphicon glyphicon-credit-card" aria-hidden="true"></span></h2>
+            Services
+        </div>
+        <div class="col-xs-7 col-md-7 text-center banner">
+          <p><h1>9</h1> Running</p>
+        </div>
+      </div>
+    </div>
+    </div>
+
+    <script src="js/jquery.js"></script>
+    <script>
+      var tracker;
+
+      function resize() {
+        clearTimeout(tracker);
+        tracker = setTimeout(render, 50);
+      }
+
+      function render() {
+        document.body.style.overflow = 'hidden';
+        tracker = setTimeout(render, 3000);
+      }
+
+      $( document ).ready(function() {
+        render();
+      });
+    </script>
+  </body>
+</html>

http://git-wip-us.apache.org/repos/asf/chukwa/blob/602b55f9/src/main/web/hicc/users/index.html
----------------------------------------------------------------------
diff --git a/src/main/web/hicc/users/index.html b/src/main/web/hicc/users/index.html
new file mode 100644
index 0000000..a8585d4
--- /dev/null
+++ b/src/main/web/hicc/users/index.html
@@ -0,0 +1,38 @@
+<!--
+  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>Top Users</title>
+    <link href="/hicc/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
+    <link href="/hicc/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
+    <script src="/hicc/js/jquery.js"></script>
+    <script src="/hicc/js/bootstrap.min.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <table class="table">
+      <tr><th>Top Users</th><th>Bytes Processed</th></tr>
+      <tr><td>John</td><td>12 TB<td></tr>
+      <tr><td>Frank</td><td>3 TB</td></tr>
+      <tr><td>Kevin</td><td>900 GB</td></tr>
+      <tr><td>Phoebe</td><td>890 GB</td></tr>
+      <tr><td>Jim</td><td>500 GB</td></tr>
+      <tr><td>Standley</td><td>121 GB</td></tr>
+    </table>
+  </body>
+</html>


Mime
View raw message