http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/bower_components/spin.js/spin.js
----------------------------------------------------------------------
diff --git a/griffin-ui/bower_components/spin.js/spin.js 
b/griffin-ui/bower_components/spin.js/spin.js
new file mode 100644
index 0000000..1a3258d
--- /dev/null
+++ b/griffin-ui/bower_components/spin.js/spin.js
@@ -0,0 +1,377 @@
+/**
+ * Copyright (c) 2011-2014 Felix Gnass
+ * Licensed under the MIT license
+ * http://spin.js.org/
+ *
+ * Example:
+    var opts = {
+      lines: 12             // The number of lines to draw
+    , length: 7             // The length of each line
+    , width: 5              // The line thickness
+    , radius: 10            // The radius of the inner circle
+    , scale: 1.0            // Scales overall size of the spinner
+    , corners: 1            // Roundness (0..1)
+    , color: '#000'         // #rgb or #rrggbb
+    , opacity: 1/4          // Opacity of the lines
+    , rotate: 0             // Rotation offset
+    , direction: 1          // 1: clockwise, -1: counterclockwise
+    , speed: 1              // Rounds per second
+    , trail: 100            // Afterglow percentage
+    , fps: 20               // Frames per second when using setTimeout()
+    , zIndex: 2e9           // Use a high z-index by default
+    , className: 'spinner'  // CSS class to assign to the element
+    , top: '50%'            // center vertically
+    , left: '50%'           // center horizontally
+    , shadow: false         // Whether to render a shadow
+    , hwaccel: false        // Whether to use hardware acceleration (might be 
buggy)
+    , position: 'absolute'  // Element positioning
+    }
+    var target = document.getElementById('foo')
+    var spinner = new Spinner(opts).spin(target)
+ */
+;(function (root, factory) {
+
+  /* CommonJS */
+  if (typeof module == 'object' && module.exports) module.exports = factory()
+
+  /* AMD module */
+  else if (typeof define == 'function' && define.amd) define(factory)
+
+  /* Browser global */
+  else root.Spinner = factory()
+}(this, function () {
+  "use strict"
+
+  var prefixes = ['webkit', 'Moz', 'ms', 'O'] /* Vendor prefixes */
+    , animations = {} /* Animation rules keyed by their name */
+    , useCssAnimations /* Whether to use CSS animations or setTimeout */
+    , sheet /* A stylesheet to hold the @keyframe or VML rules. */
+
+  /**
+   * Utility function to create elements. If no tag name is given,
+   * a DIV is created. Optionally properties can be passed.
+   */
+  function createEl (tag, prop) {
+    var el = document.createElement(tag || 'div')
+      , n
+
+    for (n in prop) el[n] = prop[n]
+    return el
+  }
+
+  /**
+   * Appends children and returns the parent.
+   */
+  function ins (parent /* child1, child2, ...*/) {
+    for (var i = 1, n = arguments.length; i < n; i++) {
+      parent.appendChild(arguments[i])
+    }
+
+    return parent
+  }
+
+  /**
+   * Creates an opacity keyframe animation rule and returns its name.
+   * Since most mobile Webkits have timing issues with animation-delay,
+   * we create separate rules for each line/segment.
+   */
+  function addAnimation (alpha, trail, i, lines) {
+    var name = ['opacity', trail, ~~(alpha * 100), i, lines].join('-')
+      , start = 0.01 + i/lines * 100
+      , z = Math.max(1 - (1-alpha) / trail * (100-start), alpha)
+      , prefix = useCssAnimations.substring(0, 
useCssAnimations.indexOf('Animation')).toLowerCase()
+      , pre = prefix && '-' + prefix + '-' || ''
+
+    if (!animations[name]) {
+      sheet.insertRule(
+        '@' + pre + 'keyframes ' + name + '{' +
+        '0%{opacity:' + z + '}' +
+        start + '%{opacity:' + alpha + '}' +
+        (start+0.01) + '%{opacity:1}' +
+        (start+trail) % 100 + '%{opacity:' + alpha + '}' +
+        '100%{opacity:' + z + '}' +
+        '}', sheet.cssRules.length)
+
+      animations[name] = 1
+    }
+
+    return name
+  }
+
+  /**
+   * Tries various vendor prefixes and returns the first supported property.
+   */
+  function vendor (el, prop) {
+    var s = el.style
+      , pp
+      , i
+
+    prop = prop.charAt(0).toUpperCase() + prop.slice(1)
+    if (s[prop] !== undefined) return prop
+    for (i = 0; i < prefixes.length; i++) {
+      pp = prefixes[i]+prop
+      if (s[pp] !== undefined) return pp
+    }
+  }
+
+  /**
+   * Sets multiple style properties at once.
+   */
+  function css (el, prop) {
+    for (var n in prop) {
+      el.style[vendor(el, n) || n] = prop[n]
+    }
+
+    return el
+  }
+
+  /**
+   * Fills in default values.
+   */
+  function merge (obj) {
+    for (var i = 1; i < arguments.length; i++) {
+      var def = arguments[i]
+      for (var n in def) {
+        if (obj[n] === undefined) obj[n] = def[n]
+      }
+    }
+    return obj
+  }
+
+  /**
+   * Returns the line color from the given string or array.
+   */
+  function getColor (color, idx) {
+    return typeof color == 'string' ? color : color[idx % color.length]
+  }
+
+  // Built-in defaults
+
+  var defaults = {
+    lines: 12             // The number of lines to draw
+  , length: 7             // The length of each line
+  , width: 5              // The line thickness
+  , radius: 10            // The radius of the inner circle
+  , scale: 1.0            // Scales overall size of the spinner
+  , corners: 1            // Roundness (0..1)
+  , color: '#000'         // #rgb or #rrggbb
+  , opacity: 1/4          // Opacity of the lines
+  , rotate: 0             // Rotation offset
+  , direction: 1          // 1: clockwise, -1: counterclockwise
+  , speed: 1              // Rounds per second
+  , trail: 100            // Afterglow percentage
+  , fps: 20               // Frames per second when using setTimeout()
+  , zIndex: 2e9           // Use a high z-index by default
+  , className: 'spinner'  // CSS class to assign to the element
+  , top: '50%'            // center vertically
+  , left: '50%'           // center horizontally
+  , shadow: false         // Whether to render a shadow
+  , hwaccel: false        // Whether to use hardware acceleration (might be 
buggy)
+  , position: 'absolute'  // Element positioning
+  }
+
+  /** The constructor */
+  function Spinner (o) {
+    this.opts = merge(o || {}, Spinner.defaults, defaults)
+  }
+
+  // Global defaults that override the built-ins:
+  Spinner.defaults = {}
+
+  merge(Spinner.prototype, {
+    /**
+     * Adds the spinner to the given target element. If this instance is 
already
+     * spinning, it is automatically removed from its previous target b calling
+     * stop() internally.
+     */
+    spin: function (target) {
+      this.stop()
+
+      var self = this
+        , o = self.opts
+        , el = self.el = createEl(null, {className: o.className})
+
+      css(el, {
+        position: o.position
+      , width: 0
+      , zIndex: o.zIndex
+      , left: o.left
+      , top: o.top
+      })
+
+      if (target) {
+        target.insertBefore(el, target.firstChild || null)
+      }
+
+      el.setAttribute('role', 'progressbar')
+      self.lines(el, self.opts)
+
+      if (!useCssAnimations) {
+        // No CSS animation support, use setTimeout() instead
+        var i = 0
+          , start = (o.lines - 1) * (1 - o.direction) / 2
+          , alpha
+          , fps = o.fps
+          , f = fps / o.speed
+          , ostep = (1 - o.opacity) / (f * o.trail / 100)
+          , astep = f / o.lines
+
+        ;(function anim () {
+          i++
+          for (var j = 0; j < o.lines; j++) {
+            alpha = Math.max(1 - (i + (o.lines - j) * astep) % f * ostep, 
o.opacity)
+
+            self.opacity(el, j * o.direction + start, alpha, o)
+          }
+          self.timeout = self.el && setTimeout(anim, ~~(1000 / fps))
+        })()
+      }
+      return self
+    }
+
+    /**
+     * Stops and removes the Spinner.
+     */
+  , stop: function () {
+      var el = this.el
+      if (el) {
+        clearTimeout(this.timeout)
+        if (el.parentNode) el.parentNode.removeChild(el)
+        this.el = undefined
+      }
+      return this
+    }
+
+    /**
+     * Internal method that draws the individual lines. Will be overwritten
+     * in VML fallback mode below.
+     */
+  , lines: function (el, o) {
+      var i = 0
+        , start = (o.lines - 1) * (1 - o.direction) / 2
+        , seg
+
+      function fill (color, shadow) {
+        return css(createEl(), {
+          position: 'absolute'
+        , width: o.scale * (o.length + o.width) + 'px'
+        , height: o.scale * o.width + 'px'
+        , background: color
+        , boxShadow: shadow
+        , transformOrigin: 'left'
+        , transform: 'rotate(' + ~~(360/o.lines*i + o.rotate) + 'deg) 
translate(' + o.scale*o.radius + 'px' + ',0)'
+        , borderRadius: (o.corners * o.scale * o.width >> 1) + 'px'
+        })
+      }
+
+      for (; i < o.lines; i++) {
+        seg = css(createEl(), {
+          position: 'absolute'
+        , top: 1 + ~(o.scale * o.width / 2) + 'px'
+        , transform: o.hwaccel ? 'translate3d(0,0,0)' : ''
+        , opacity: o.opacity
+        , animation: useCssAnimations && addAnimation(o.opacity, o.trail, 
start + i * o.direction, o.lines) + ' ' + 1 / o.speed + 's linear infinite'
+        })
+
+        if (o.shadow) ins(seg, css(fill('#000', '0 0 4px #000'), {top: '2px'}))
+        ins(el, ins(seg, fill(getColor(o.color, i), '0 0 1px rgba(0,0,0,.1)')))
+      }
+      return el
+    }
+
+    /**
+     * Internal method that adjusts the opacity of a single line.
+     * Will be overwritten in VML fallback mode below.
+     */
+  , opacity: function (el, i, val) {
+      if (i < el.childNodes.length) el.childNodes[i].style.opacity = val
+    }
+
+  })
+
+
+  function initVML () {
+
+    /* Utility function to create a VML tag */
+    function vml (tag, attr) {
+      return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" 
class="spin-vml">', attr)
+    }
+
+    // No CSS transforms but VML support, add a CSS rule for VML elements:
+    sheet.addRule('.spin-vml', 'behavior:url(#default#VML)')
+
+    Spinner.prototype.lines = function (el, o) {
+      var r = o.scale * (o.length + o.width)
+        , s = o.scale * 2 * r
+
+      function grp () {
+        return css(
+          vml('group', {
+            coordsize: s + ' ' + s
+          , coordorigin: -r + ' ' + -r
+          })
+        , { width: s, height: s }
+        )
+      }
+
+      var margin = -(o.width + o.length) * o.scale * 2 + 'px'
+        , g = css(grp(), {position: 'absolute', top: margin, left: margin})
+        , i
+
+      function seg (i, dx, filter) {
+        ins(
+          g
+        , ins(
+            css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx})
+          , ins(
+              css(
+                vml('roundrect', {arcsize: o.corners})
+              , { width: r
+                , height: o.scale * o.width
+                , left: o.scale * o.radius
+                , top: -o.scale * o.width >> 1
+                , filter: filter
+                }
+              )
+            , vml('fill', {color: getColor(o.color, i), opacity: o.opacity})
+            , vml('stroke', {opacity: 0}) // transparent stroke to fix color 
bleeding upon opacity change
+            )
+          )
+        )
+      }
+
+      if (o.shadow)
+        for (i = 1; i <= o.lines; i++) {
+          seg(i, -2, 
'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)')
+        }
+
+      for (i = 1; i <= o.lines; i++) seg(i)
+      return ins(el, g)
+    }
+
+    Spinner.prototype.opacity = function (el, i, val, o) {
+      var c = el.firstChild
+      o = o.shadow && o.lines || 0
+      if (c && i + o < c.childNodes.length) {
+        c = c.childNodes[i + o]; c = c && c.firstChild; c = c && c.firstChild
+        if (c) c.opacity = val
+      }
+    }
+  }
+
+  if (typeof document !== 'undefined') {
+    sheet = (function () {
+      var el = createEl('style', {type : 'text/css'})
+      ins(document.getElementsByTagName('head')[0], el)
+      return el.sheet || el.styleSheet
+    }())
+
+    var probe = css(createEl('group'), {behavior: 'url(#default#VML)'})
+
+    if (!vendor(probe, 'transform') && probe.adj) initVML()
+    else useCssAnimations = vendor(probe, 'animation')
+  }
+
+  return Spinner
+
+}));

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/bower_components/spin.js/spin.min.js
----------------------------------------------------------------------
diff --git a/griffin-ui/bower_components/spin.js/spin.min.js 
b/griffin-ui/bower_components/spin.js/spin.min.js
new file mode 100644
index 0000000..bd3ae4f
--- /dev/null
+++ b/griffin-ui/bower_components/spin.js/spin.min.js
@@ -0,0 +1,2 @@
+// http://spin.js.org/#v2.3.2
+!function(a,b){"object"==typeof 
module&&module.exports?module.exports=b():"function"==typeof 
define&&define.amd?define(b):a.Spinner=b()}(this,function(){"use 
strict";function a(a,b){var c,d=document.createElement(a||"div");for(c in 
b)d[c]=b[c];return d}function b(a){for(var 
b=1,c=arguments.length;c>b;b++)a.appendChild(arguments[b]);return a}function 
c(a,b,c,d){var 
e=["opacity",b,~~(100*a),c,d].join("-"),f=.01+c/d*100,g=Math.max(1-(1-a)/b*(100-f),a),h=j.substring(0,j.indexOf("Animation")).toLowerCase(),i=h&&"-"+h+"-"||"";return
 m[e]||(k.insertRule("@"+i+"keyframes 
"+e+"{0%{opacity:"+g+"}"+f+"%{opacity:"+a+"}"+(f+.01)+"%{opacity:1}"+(f+b)%100+"%{opacity:"+a+"}100%{opacity:"+g+"}}",k.cssRules.length),m[e]=1),e}function
 d(a,b){var c,d,e=a.style;if(b=b.charAt(0).toUpperCase()+b.slice(1),void 
0!==e[b])return b;for(d=0;d<l.length;d++)if(c=l[d]+b,void 0!==e[c])return 
c}function e(a,b){for(var c in b)a.style[d(a,c)||c]=b[c];return a}function 
f(a){for(var b=1;b<arguments.length;b++){var c=arg
 uments[b];for(var d in c)void 0===a[d]&&(a[d]=c[d])}return a}function 
g(a,b){return"string"==typeof a?a:a[b%a.length]}function 
h(a){this.opts=f(a||{},h.defaults,n)}function i(){function c(b,c){return 
a("<"+b+' xmlns="urn:schemas-microsoft.com:vml" 
class="spin-vml">',c)}k.addRule(".spin-vml","behavior:url(#default#VML)"),h.prototype.lines=function(a,d){function
 f(){return e(c("group",{coordsize:k+" "+k,coordorigin:-j+" 
"+-j}),{width:k,height:k})}function 
h(a,h,i){b(m,b(e(f(),{rotation:360/d.lines*a+"deg",left:~~h}),b(e(c("roundrect",{arcsize:d.corners}),{width:j,height:d.scale*d.width,left:d.scale*d.radius,top:-d.scale*d.width>>1,filter:i}),c("fill",{color:g(d.color,a),opacity:d.opacity}),c("stroke",{opacity:0}))))}var
 
i,j=d.scale*(d.length+d.width),k=2*d.scale*j,l=-(d.width+d.length)*d.scale*2+"px",m=e(f(),{position:"absolute",top:l,left:l});if(d.shadow)for(i=1;i<=d.lines;i++)h(i,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(i=1;i<=d.l
 ines;i++)h(i);return b(a,m)},h.prototype.opacity=function(a,b,c,d){var 
e=a.firstChild;d=d.shadow&&d.lines||0,e&&b+d<e.childNodes.length&&(e=e.childNodes[b+d],e=e&&e.firstChild,e=e&&e.firstChild,e&&(e.opacity=c))}}var
 
j,k,l=["webkit","Moz","ms","O"],m={},n={lines:12,length:7,width:5,radius:10,scale:1,corners:1,color:"#000",opacity:.25,rotate:0,direction:1,speed:1,trail:100,fps:20,zIndex:2e9,className:"spinner",top:"50%",left:"50%",shadow:!1,hwaccel:!1,position:"absolute"};if(h.defaults={},f(h.prototype,{spin:function(b){this.stop();var
 
c=this,d=c.opts,f=c.el=a(null,{className:d.className});if(e(f,{position:d.position,width:0,zIndex:d.zIndex,left:d.left,top:d.top}),b&&b.insertBefore(f,b.firstChild||null),f.setAttribute("role","progressbar"),c.lines(f,c.opts),!j){var
 
g,h=0,i=(d.lines-1)*(1-d.direction)/2,k=d.fps,l=k/d.speed,m=(1-d.opacity)/(l*d.trail/100),n=l/d.lines;!function
 o(){h++;for(var 
a=0;a<d.lines;a++)g=Math.max(1-(h+(d.lines-a)*n)%l*m,d.opacity),c.opacity(f,a*d.direction+i,g,
 d);c.timeout=c.el&&setTimeout(o,~~(1e3/k))}()}return c},stop:function(){var 
a=this.el;return 
a&&(clearTimeout(this.timeout),a.parentNode&&a.parentNode.removeChild(a),this.el=void
 0),this},lines:function(d,f){function h(b,c){return 
e(a(),{position:"absolute",width:f.scale*(f.length+f.width)+"px",height:f.scale*f.width+"px",background:b,boxShadow:c,transformOrigin:"left",transform:"rotate("+~~(360/f.lines*k+f.rotate)+"deg)
 
translate("+f.scale*f.radius+"px,0)",borderRadius:(f.corners*f.scale*f.width>>1)+"px"})}for(var
 
i,k=0,l=(f.lines-1)*(1-f.direction)/2;k<f.lines;k++)i=e(a(),{position:"absolute",top:1+~(f.scale*f.width/2)+"px",transform:f.hwaccel?"translate3d(0,0,0)":"",opacity:f.opacity,animation:j&&c(f.opacity,f.trail,l+k*f.direction,f.lines)+"
 "+1/f.speed+"s linear infinite"}),f.shadow&&b(i,e(h("#000","0 0 4px 
#000"),{top:"2px"})),b(d,b(i,h(g(f.color,k),"0 0 1px rgba(0,0,0,.1)")));return 
d},opacity:function(a,b,c){b<a.childNodes.length&&(a.childNodes[b].style.opacity=c)}}),"undefi
 ned"!=typeof document){k=function(){var c=a("style",{type:"text/css"});return 
b(document.getElementsByTagName("head")[0],c),c.sheet||c.styleSheet}();var 
o=e(a("group"),{behavior:"url(#default#VML)"});!d(o,"transform")&&o.adj?i():j=d(o,"animation")}return
 h});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/build.xml
----------------------------------------------------------------------
diff --git a/griffin-ui/build.xml b/griffin-ui/build.xml
new file mode 100644
index 0000000..b9f8282
--- /dev/null
+++ b/griffin-ui/build.xml
@@ -0,0 +1,28 @@
+<assembly 
xmlns="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.2"; 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"; 
xsi:schemaLocation="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.2
 http://maven.apache.org/xsd/assembly-1.1.2.xsd";>
+       <id>resources</id>
+       <formats>
+               <format>zip</format>
+       </formats>
+       <fileSets>
+               <fileSet>
+                       <directory>${project.basedir}</directory><!--
+                       <includes>
+
+                               <include>apidocs/**</include>
+                               <include>bower_components/**</include>
+                       
+                               <include>**/**</include>
+                       </includes>
+                       -->     
+                       <excludes>
+                               <exclude>**/node_modules/**</exclude>
+                               <exclude>**/tests/**</exclude>
+                               <exclude>target/**</exclude>
+                               <exclude>pom.xml</exclude>
+                               <exclude>build.xml</exclude>
+                       </excludes>
+                       <useDefaultExcludes>true</useDefaultExcludes>
+               </fileSet>
+
+       </fileSets>
+</assembly>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/css/main.css
----------------------------------------------------------------------
diff --git a/griffin-ui/css/main.css b/griffin-ui/css/main.css
new file mode 100644
index 0000000..745b483
--- /dev/null
+++ b/griffin-ui/css/main.css
@@ -0,0 +1,1053 @@
+/*!
+ * BLOCKS - Responsive Dashboard Theme
+ *
+ * Hey! Thanks for download this theme!
+ * This bootstrap theme is totally free. You can edit, share, distribute, use 
and whatever you want.
+ * Credits are always appreciated.
+ * Please, feel free to contact me if you have any questions regarding this 
theme.
+ *
+ *
+ * Copyright 2013
+ * Created by: Carlos Alvarez
+ * URL: http://Alvarez.is
+ * Designed and built based on Twitter Bootstrap.
+ */
+
+ /*
+       Copyright (c) 2016 eBay Software Foundation.
+       Licensed 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.
+ */
+
+/* COLOR REFERENCE
+- #1f1f1f (Background Color)
+- #3d3d3d (Dash-unit and half-unit Section)
+- #262626 (Footer)
+- #fa1d2d (Red - Used in selectors, parragraphs, bars and other)
+- #b2c831 (Green - Used in titles, badges, bars and other)
+- #bdbdbd & #fff (Font colors)
+*/
+
+
+/**********BASE CONFIGURATIONS**********/
+body {
+  background:#1f1f1f;
+    font-family: 'Open Sans', sans-serif;
+    height: 100%;
+}
+
+html{
+  height: 100%;
+}
+
+h1 {
+font-family: 'Raleway', sans-serif;}
+
+h3,h4 , h5 {
+  font-family: 'Open Sans', sans-serif;
+  font-weight:lighter;
+}
+
+h2{
+  font-size:22px;
+}
+
+h3 {
+  font-size:46px;
+  color:#b2c831
+}
+
+h5 {
+  color:#b2c831;
+  margin-left:5px;
+}
+
+/***********BLOCKS & WRAPS***********/
+
+/*--- Dash Unit / Used in Dashboard page ---*/
+.dash-unit {
+  margin-bottom: 30px;
+  padding-bottom:10px;
+  border: 1px solid #383737;
+  background-image:url('../img/sep-half.png');
+  background-color: #3d3d3d;
+  color:white;
+  height:290px;
+}
+
+.dash-unit:hover {
+  background-color: #4f4f4f;
+  -moz-box-shadow:    3px 3px 2px 0px #151515;
+    -webkit-box-shadow: 3px 3px 2px 0px #151515;
+    box-shadow:         3px 3px 2px 0px #151515;
+
+}
+
+.dash-unit dtitle {
+  font-size:11px;
+  text-transform:uppercase;
+  color:#ffffff;
+  margin:8px;
+  padding:0px;
+  height:inherit
+  }
+
+.dash-unit hr {
+    border: 0;
+    border-top: 1px solid #151515;
+    border-top-style: dashed;
+  margin-top:3px;
+}
+
+.dash-unit h1 {
+  font-family: 'Raleway', sans-serif;
+  font-weight:300;
+  font-size: 20px;
+  line-height: 2px;
+  letter-spacing: 0px;
+  color: #ffffff;
+  padding-top:10px;
+  padding-left:5px;
+  margin-top:2px;
+  text-align:center;
+}
+
+.dash-unit h2 {
+  font-family: 'Open Sans', sans-serif;
+  font-weight: bold;
+  font-size: 30px;
+  line-height: 26px;
+  letter-spacing: 0px;
+  color: #ffffff;
+  padding-top:10px;
+  padding-left:5px;
+  margin-top:2px;
+  text-align:center;
+}
+
+
+.dash-unit h3 {
+  font-weight:300;
+  font-size: 15px;
+  line-height: 2px;
+  letter-spacing: 0px;
+  color: #b2c831;
+  padding-top:10px;
+  padding-left:5px;
+  margin-top:2px;
+  text-align:center;
+}
+
+
+.dash-unit p {
+  font-size: 14px;
+  font-weight: 200;
+  line-height: 16px;
+  color: inherit;
+  margin: 0 0 10px;
+  padding:5px;
+ }
+
+.dash-unit h4 {
+  padding-left:5px;
+  margin-top:2px;
+  font-size: 13px;
+  font-weight:lighter;
+  line-height: 1;
+  letter-spacing: 0px;
+  color: #fff;
+}
+
+.dash-unit bold{
+  font-family: 'Open Sans', sans-serif;
+  font-size:26px;
+  font-weight:bold;
+  color:#fff;
+  vertical-align:middle;
+}
+
+
+/**********Half-Unit / Used in index.html**********/
+.half-unit {
+  margin-bottom: 30px;
+  padding-bottom: 4px;
+  border: 1px solid #383737;
+  background-image:url('../img/sep-half.png');
+  background-color: #3d3d3d;
+  color:white;
+  height:130px;
+}
+
+.half-unit:hover {
+  background-color: #4f4f4f;
+  -moz-box-shadow:    3px 3px 2px 0px #151515;
+    -webkit-box-shadow: 3px 3px 2px 0px #151515;
+    box-shadow:         3px 3px 2px 0px #151515;
+
+}
+
+.half-unit dtitle {
+  font-size:10px;
+  text-transform:uppercase;
+  color:#ffffff;
+  margin:8px;
+  padding:0px;
+  height:inherit
+  }
+
+.half-unit hr {
+    border: 0;
+    border-top: 1px solid #151515;
+    border-top-style: dashed;
+  margin-top:3px;
+}
+
+.half-unit h1 {
+  font-family: 'Raleway', sans-serif;
+  font-weight:300;
+  font-size: 20px;
+  line-height: 1;
+  letter-spacing: 0px;
+  color: #ffffff;
+  padding-top:10px;
+  padding-left:5px;
+  margin-top:2px;
+  text-align:center;
+}
+
+.half-unit h4 {
+  padding-left:5px;
+  margin-top:2px;
+  font-size: 13px;
+  font-weight:lighter;
+  line-height: 1;
+  letter-spacing: 0px;
+  color: #fff;
+}
+
+
+.half-unit bold{
+  font-family: 'Open Sans', sans-serif;
+  font-size:26px;
+  font-weight:bold;
+  color:#fff;
+  vertical-align:middle;
+}
+
+/**********Styling Elements**********/
+.cont {
+  text-align:center;
+  margin-top:30px;
+}
+
+.cont ok {
+  color:#b2c831;
+}
+
+.cont bad {
+  color:#fa1d2d;
+}
+
+.cont2 {
+  text-align:center;
+  margin-top:-15px;
+  font-size:12px;
+  line-height:7px;
+}
+
+.cont2 bold{
+  font-size:10px;
+  font-weight:bold;
+  color:#b2c831
+}
+
+.text p {
+  font-family: 'Open Sans', sans-serif;
+  margin-left:8px;
+  font-size:14px;
+  line-height:18px;
+}
+
+.text grey {
+  font-size:11px;
+  color:silver
+}
+
+
+/***********Bootstrap Default Modifications***********/
+
+.thumbnail {
+  border:0px;
+  text-align:center;
+  -webkit-box-shadow: 0px;
+     -moz-box-shadow: 0px;
+          box-shadow: 0px;
+    background: none;
+    text-align: center;
+
+}
+
+.modal-header {
+  background-image:url('../img/sep-half.png');
+  background-color: #4f4f4f;
+  color:#fff;
+}
+
+.btn-circle {
+  width: 60px;
+  height: 30px;
+  padding: 4px 8px;
+  font-size: 16px;
+  line-height: 1.33;
+  border-radius: 15px 15px 15px 15px;
+
+  border-width:2px;
+  border-color:#2A9FD6;
+  cursor:pointer;
+}
+
+.btn-circle:hover{
+    /*background: #b2c831;
+    color:#000;*/
+}
+
+/*input[type=submit] {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 15px;
+  background: #b2c831;
+  color: #fff;
+  border: none;
+  padding: 8px 28px 10px 26px;
+    *-webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+}
+input[type=text], textarea {
+  background: #cdcbcc;
+  font-size: 13px;
+  display: block;
+  width: 100%;
+  border: none;
+  box-shadow: none;
+  height: 30px;
+  line-height: 18px;
+  padding: 0;
+  text-indent: 18px;
+  margin: 0 0 18px;
+}*/
+textarea {
+  line-height: 18px;
+  padding: 18px;
+  width: 100%;
+  text-indent: 0;
+}
+.textarea-container { margin: 0 18px; }
+.textarea-container textarea { margin-left: -18px; }
+#contact textarea { width: 100%; height: 45px; }
+
+
+.progress-bar {
+  background-color: #b2c831;
+}
+
+
+
+
+/***********LineIcons Styles***********/
+
+
+.info-user {
+  text-align:center;
+  font-size: 24px;
+  color: #b2c831;
+  }
+
+.fs1 {
+  padding:5px 5px 5px 5px;
+  position:relative;
+}
+
+.fs1:hover {
+  position:relative;
+  color: #fff;
+  cursor:pointer
+}
+
+.fs2 {
+  padding:5px 5px 5px 5px;
+  position:relative;
+  font-size:35px;
+  vertical-align: text-bottom
+}
+
+/**********Clock Configuration**********/
+
+digiclock {
+  font-size: 30px;
+  color: #fff;
+  text-align: center;
+  line-height: 60px;
+  margin-left: auto
+}
+
+.clockcenter {
+  text-align:center;
+}
+
+
+/**********Mail Style Configuration**********/
+
+.framemail {
+    cursor: default;
+}
+.framemail .window {
+    font-size: 0;
+    margin-top: -1px;
+    overflow: hidden;
+    margin-left: -18px;
+}
+.framemail .window .mail li {
+    background-color:#3d3d3d;
+    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), 
hsla(0,0%,0%,.05));
+    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), 
hsla(0,0%,0%,.05));
+    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), 
hsla(0,0%,0%,.05));
+    background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), 
hsla(0,0%,0%,.05));
+    background-image:         linear-gradient(hsla(0,0%,100%,.05), 
hsla(0,0%,0%,.05));
+    border-top: 1px solid #888;
+    position: relative;
+    margin-left:-18px;
+}
+.framemail .window .mail li:first-child {
+    border-top: none;
+}
+.framemail .window .mail li:hover {
+    background-color: #5d5b5b;
+}
+.framemail .window .mail li:after,
+.framemail .window .mail li:before {
+    border-left: 8px solid transparent;
+    border-top: 8px solid #df6;
+    content: '';
+    height: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 0;
+}
+.framemail .window .mail li:before {
+    border-top-color: #bbb;
+    border-width: 9px;
+}
+.framemail .window .mail li:nth-child(1):after,
+.framemail .window .mail li:nth-child(1):before {
+    border: none;
+}
+.framemail .window .mail li:nth-child(2):after {
+    border-top-color: #fa1d2d;
+}
+.framemail .window .mail li i {
+    display: inline-block;
+    height: 48px;
+    width: 6px;
+}
+.framemail .window .mail li .read {
+    background-color: #ddd;
+}
+.framemail .window .mail li .unread {
+    background: #b2c831;
+}
+.framemail .window .mail li img {
+    background: #819da2;
+    border-radius: 2px;
+    height: 36px;
+    left: 12px;
+    position: absolute;
+    top: 6px;
+    width: 36px;
+}
+.framemail .window .mail li p {
+    font: 13px/24px sans-serif;
+    left: 56px;
+    position: absolute;
+    top: 3px;
+}
+.framemail .window .mail li .sender {
+    color: #e9e8e8;
+    font-weight: bold;
+    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
+}
+.framemail .window .mail li .message {
+    color: #999;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    top: 21px;
+    white-space: nowrap;
+}
+.framemail .window .mail li .message strong {
+    color: #999;
+}
+.framemail .window .mail li .actions {
+    height: 16px;
+    position: absolute;
+    right: 19px;
+    text-align: right;
+    top: 0;
+    width: 96px;
+}
+.framemail .window .mail li .actions img {
+    background: none;
+    display: inline-block;
+    height: 16px;
+    margin-left: 6px;
+    opacity: .1;
+    position: relative;
+    width: 16px;
+}
+.framemail .window .mail li:hover .actions img {
+    opacity: .25;
+}
+.framemail .window .mail li .actions img:hover {
+    opacity: .75;
+}
+
+
+/**********DONUT CHARTS STYLES**********/
+#load {
+  width: 11.313em;
+  height: 11.313em;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  margin-bottom: 1.063em;
+  background-position: center center;
+  margin:auto;
+}
+
+#space {
+  width: 11.313em;
+  height: 11.313em;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  margin-bottom: 1.063em;
+  background-position: center center;
+  margin:auto;
+}
+
+
+/**********LINE AND BARS**********/
+
+.section-graph {
+  position: relative;
+  height: 130px;
+  color: #fff;
+  background-image: linear-gradient(color-stops(#b2c831, #b2c831 50%, #b2c831 
50%));
+  margin-bottom:20px;
+}
+.section-graph .graph-info {
+  z-index: 99;
+  position: absolute;
+  font-weight: bold;
+  margin-top: 12px;
+  margin-left: 21px;
+  width: 100px;
+}
+.section-graph .graph-info .graph-arrow {
+  width: 0;
+  height: 0;
+  margin-top: 18px;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 4px solid white;
+  float: left;
+}
+.section-graph .graph-info .graph-info-big {
+  font-size: 24px;
+  float: left;
+  margin-left: 3px;
+}
+.section-graph .graph-info .graph-info-small {
+  margin-left: 3px;
+  font-size: 12px;
+  font-weight: normal;
+  color: rgba(255, 255, 255, 0.5);
+  clear: left;
+  margin-left: 8px;
+}
+/*
+ * Info Section
+ */
+.info-aapl {
+  text-align: center;
+
+}
+.info-aapl ul {
+  margin-left:30%;
+
+}
+.info-aapl li {
+  margin: 0;
+  display: block;
+  width: 9px;
+  height: 40px;
+  margin-right: 6px;
+  background-color: #f5f0ec;
+  float:left;
+  position: relative;
+}
+.info-aapl li span {
+  display: block;
+  width: 9px;
+  height: 40px;
+  position: absolute;
+  bottom: 0;
+}
+.info-aapl li span.orange {
+  background-color: #fa1d2d;
+}
+.info-aapl li span.green {
+  background-color: #b2c831;
+}
+
+/**********TWITTER WIDGET **********/
+#jstwitter ul li{
+  color:#bdbdbd;
+  padding:.5em .75em;
+}
+
+#jstwitter ul{
+  margin-left:0;
+  list-style:none
+}
+
+#jstwitter:first-child{
+  border-top:0
+}
+
+ul#jstwitter li a{
+  font-size:10px;
+  font-style:italic;
+  color:#666;
+  text-decoration:none
+}
+
+/********** CUSTOMIZED BUTTON **********/
+.btnnew {
+  display: inline-block;
+  *border-left: 0 none #707070;
+  border-right: 0 none #707070;
+  border-top: 0 none #707070;
+  border-bottom: 0 none #707070;
+  display: inline;
+    padding: 4px 12px;
+    margin-bottom: 0;
+  *margin-left: .3em;
+    font-size: 14px;
+    line-height: 20px;
+    color: #b2c831;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+  background-color: #5a5a5a;
+  *background-color: #5a5a5a;
+    background-repeat: repeat-x;
+  *-webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+    zoom: 1;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px 
rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 
0, 0, 0.05);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 
0.05);
+  background-image: linear-gradient(to bottom, #707070, #707070);*
+}
+
+/********** SWITCH BUTTON **********/
+.switch {
+  position: relative;
+  margin: 20px auto;
+  height: 26px;
+  width: 120px;
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: 3px;
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 
255, 0.1);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 
0.1);
+}
+
+.switch-label {
+  position: relative;
+  z-index: 2;
+  float: left;
+  width: 58px;
+  line-height: 26px;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.35);
+  text-align: center;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
+  cursor: pointer;
+}
+.switch-label:active {
+  font-weight: bold;
+}
+
+.switch-label-off {
+  padding-left: 2px;
+}
+
+.switch-label-on {
+  padding-right: 2px;
+}
+
+/*
+ * Note: using adjacent or general sibling selectors combined with
+ *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
+ *       See this article for more info and a potential fix:
+ *       http://css-tricks.com/webkit-sibling-bug/
+ */
+.switch-input {
+  display: none;
+}
+.switch-input:checked + .switch-label {
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.65);
+  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
+  -webkit-transition: 0.15s ease-out;
+  -moz-transition: 0.15s ease-out;
+  -o-transition: 0.15s ease-out;
+  transition: 0.15s ease-out;
+}
+.switch-input:checked + .switch-label-on ~ .switch-selection {
+  left: 60px;
+  /* Note: left: 50% doesn't transition in WebKit */
+}
+
+.switch-selection {
+  display: block;
+  position: absolute;
+  z-index: 1;
+  top: 2px;
+  left: 2px;
+  width: 58px;
+  height: 22px;
+  background: #b2c831;
+  border-radius: 3px;
+  background-image: -webkit-linear-gradient(top, #b6c753, #b2c831);
+  background-image: -moz-linear-gradient(top, #b6c753, #b2c831);
+  background-image: -o-linear-gradient(top, #b6c753, #b2c831);
+  background-image: linear-gradient(to bottom, #b6c753, #b2c831);
+  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 
0, 0.2);
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
+  -webkit-transition: left 0.15s ease-out;
+  -moz-transition: left 0.15s ease-out;
+  -o-transition: left 0.15s ease-out;
+  transition: left 0.15s ease-out;
+}
+.switch-blue .switch-selection {
+  background: #3aa2d0;
+  background-image: -webkit-linear-gradient(top, #4fc9ee, #3aa2d0);
+  background-image: -moz-linear-gradient(top, #4fc9ee, #3aa2d0);
+  background-image: -o-linear-gradient(top, #4fc9ee, #3aa2d0);
+  background-image: linear-gradient(to bottom, #4fc9ee, #3aa2d0);
+}
+.switch-yellow .switch-selection {
+  background: #fa1d2d;
+  background-image: -webkit-linear-gradient(top, #f93e4b, #fa1d2d);
+  background-image: -moz-linear-gradient(top, #f93e4b, #fa1d2d);
+  background-image: -o-linear-gradient(top, #f93e4b, #fa1d2d);
+  background-image: linear-gradient(to bottom, #f93e4b, #fa1d2d);
+}
+
+
+/**********Gauge Chart**********/
+#canvas {
+  display: block;
+  width: 150px;
+  margin: 30px auto;
+}
+
+/**********Accordion Styling**********/
+
+.accordion-group {
+  border: 1px solid #222;
+}
+.accordion-heading {
+  background-color: #5a5a5a;
+  *background-color: #5a5a5a;
+    background-repeat: repeat-x;
+  *-webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+    zoom: 1;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px 
rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 
0, 0, 0.05);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 
0.05);
+  background-image: linear-gradient(to bottom, #707070, #707070);*
+}
+
+/**********Link Styling**********/
+a {
+  color: #b2c831;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #dff948;
+  text-decoration: none;
+}
+
+.bark-link {
+  color: #b2c831;
+  text-decoration: underline;
+}
+
+.bark-link:hover {
+  color: #dff948;
+  text-decoration: none;
+}
+
+/**navigation bar**/
+.docs-search{
+  margin:10px 0;
+  border-radius:20px;
+  background:#626262;
+  vertical-align:middle;
+  padding:4px 0 4px 10px;
+}
+
+.docs-search input{
+  background:#626262;
+  border:0
+}
+
+.docs-search input:focus{
+  outline:none;
+  color:#fff;
+}
+
+.navbar-search {
+    position: relative;
+    float: left;
+    margin-top: 14px;
+    margin-bottom: 0;
+}
+
+.navbar-search .search-query {
+    padding: 4px 9px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-size: 13px;
+    font-weight: normal;
+    line-height: 1;
+    color: #ffffff;
+    background-color: #848484;
+    border: 1px solid #151515;
+    border-radius:14px;
+    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 
255, 255, 0.15);
+    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 
255, 255, 0.15);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 
255, 0.15);
+    -webkit-transition: none;
+    -moz-transition: none;
+    -ms-transition: none;
+    -o-transition: none;
+    transition: none;
+}
+
+.navbar-search .search-query:disabled{
+    background-color: #626262;
+    cursor: not-allowed;
+}
+
+.navbar-search .search-query:-moz-placeholder {
+    color: #cccccc;
+}
+.navbar-search .search-query::-webkit-input-placeholder {
+    color: #cccccc;
+}
+.navbar-search .search-query:focus,.navbar-search .search-query.focused {
+    padding: 5px 10px;
+    color: #333333;
+    text-shadow: 0 1px 0 #ffffff;
+    background-color: #ffffff;
+    border: 0;
+    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
+    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
+    outline: 0;
+}
+
+
+
+/**********FooterWrap Section**********/
+@media (min-width: 992px) {
+    #footerwrap {
+      width: 75%;
+    }
+}
+
+@media (max-width: 991px) { 
+    #footerwrap {
+      width: 100%
+    }
+}
+
+#footerwrap {
+    padding-left: 30px;
+    height: 90px;
+    background:#262626;
+    padding-top:10px;
+    padding-bottom: 10px;
+    border-top-style: solid;
+    border-top-width:8px;
+    border-top-color:#1d1d1d;
+    /*overflow-y:auto;*/
+    z-index:200;
+
+}
+
+#footerwrap p {
+  color:white;
+  font-size:12px;
+  margin:0;
+}
+
+/*#footerwrap>.container-fluid{
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform:translateY(100%);
+  animation: scrolling 2s linear infinite;
+}
+
+@keyframes scrolling {
+ 0%   {
+ transform: translateY(0%);
+ }
+ 100% {
+ transform: translateY(-100%);
+ }
+}*/
+
+
+/***********FULLCALENDAR STYLE***********/
+
+#external-events {
+  padding: 0 10px;
+  border: 1px solid #8b8b8a;
+    background-color: #8b8b8a;
+    -webkit-border-radius: 4px;
+       -moz-border-radius: 4px;
+            border-radius: 4px;
+  text-align: left;
+  }
+
+#external-events h4 {
+  font-size: 16px;
+  margin-top: 0;
+  padding-top: 1em;
+  }
+
+.external-event { /* try to mimick the look of a real event */
+  margin: 10px 0;
+  padding: 2px 4px;
+  background: #b2c831;
+  color: #fff;
+  font-size: .85em;
+  cursor: pointer;
+  }
+
+#external-events p {
+  margin: 1.5em 0;
+  font-size: 11px;
+  color: #b2c831;
+  }
+
+#external-events p input {
+  margin: 0;
+  vertical-align: middle;
+  }
+
+#calendar {
+  width:100%;
+  }
+
+.symbol.required:before {
+    content: "*";
+    display: inline;
+    color: #E6674A;
+}
+
+.has-success .symbol:before {
+    content: "\f00c";
+    display: inline;
+    font-family: FontAwesome;
+    color: #468847
+}
+
+.has-error .symbol:before {
+    content: "\f00d";
+    display: inline;
+    font-family: FontAwesome;
+    color: #C82E29
+}
+
+.text-small {
+    font-size: 12px!important
+}
+
+.has-error .error {
+    color: #a94442;
+}
+
+/**********Media Styles**********/
+
+@media (max-width: 360px){
+/*Calendar Adsjustments*/
+.fc-header {margin-top:15px;}
+.fc-header-title h2{font-size:10px; }
+.fc-header-right {display:none}
+}
+/* portrait tablet */
+@media (min-width: 767px) and (max-width: 768px) {
+  .info-aapl ul {
+      margin-left:10px;
+      float:left;
+}
+
+#load {
+  margin-left:5px;
+  margin-right:10px;
+}
+
+#space {
+  margin-left:5px;
+  margin-right:10px;
+}
+
+}
+
+/* Landscape iphone 5 and samsung galaxy */
+@media (min-width: 560px) and (max-width: 685px) {
+  .info-aapl ul {
+      margin-left:40%;
+  }
+
+}
+
+@media (min-width: 1024px) {
+  .modal-xg {
+    width: 1024px;
+  }
+}
+
+.form-control {
+  color: #000000;
+}
+
+tbody {
+  word-break:break-all;
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/css/sidebar.css
----------------------------------------------------------------------
diff --git a/griffin-ui/css/sidebar.css b/griffin-ui/css/sidebar.css
new file mode 100644
index 0000000..abf44ae
--- /dev/null
+++ b/griffin-ui/css/sidebar.css
@@ -0,0 +1,179 @@
+/*
+       Copyright (c) 2016 eBay Software Foundation.
+       Licensed 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.
+*/
+/*side-bar start*/
+.sidebar-stat-center{
+       padding:10px 0;
+       display: flex;
+       align-items: center
+}
+
+.sidebar-stat-center>img{
+       max-width:24px;
+       margin-right:5px;
+}
+
+.sidebar-stat-center>span{
+       font-size:18px;
+       color:#fff
+}
+
+.well .faChevron{
+       color: white;
+}
+
+.side-bar-scroll{
+       padding:0px;
+       background:transparent;
+       border:0px;
+}
+
+.sideBar{
+       overflow:scroll;
+       height:650px;
+       overflow-x: hidden;
+}
+
+.sideBar::-webkit-scrollbar-track
+{
+       -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+       border-radius: 10px;
+       background-color: #F5F5F5;
+}
+
+.sideBar::-webkit-scrollbar
+{
+       width: 12px;
+       border-radius: 10px;
+       background-color: #F5F5F5;
+}
+
+.sideBar::-webkit-scrollbar-thumb
+{
+       border-radius: 10px;
+       -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+       background-color: #D62929;
+}
+
+.well .side-metrics{
+  font-size: 14px;
+}
+.well .faArrows{
+       background:#ff5c33;
+       color:black;
+}
+
+.well .side-date{
+       color: white;
+       /*position: absolute;*/
+       /*left: 80px;*/
+       /*margin-left: 10px;*/
+}
+
+.well .side-name{
+       color: #999966;
+       /*position: absolute;*/
+       /*left: 210px;*/
+       /*margin-left: 20px;*/
+}
+
+a>.side-name:hover{
+       color: #b2c831;
+       /*position: absolute;*/
+       /*left: 210px;*/
+       /*margin-left: 20px;*/
+}
+
+.well .side-percent{
+       color: #40bf80;
+       /*position: absolute;*/
+       /*left: 390px;*/
+}
+
+.well .side-percent-red{
+       color: #f00;
+}
+
+#gprs{
+  position: absolute;
+  top:5px;
+  clip: rect(0, 50px, 50px, 0);
+  top: -8px;
+  /* clip: shape(top, right, bottom, left); NB 'rect' is the only available 
option */
+}
+
+.well-next{
+       padding:0px;
+       background:#262626;
+       border:0px;
+       position:relative;
+}
+
+.vcenter {
+    display: inline-block;
+    vertical-align: middle;
+    float: none;
+}
+
+/*side-bar end*/
+
+/* led start */
+.led-red {
+    /*margin: 20px auto;*/
+    margin-top: -26px;
+    margin-left: 180px;
+    width: 12px;
+    height: 12px;
+    background-color: #940;
+    border-radius: 50%;
+    box-shadow: #000 0 -1px 7px 1px, inset #600 0 -1px 9px, #F00 0 2px 12px;
+}
+
+.led-yellow {
+    /*margin: 20px auto;*/
+    /*margin-top: -26px;
+    margin-left: 180px;*/
+    width: 12px;
+    height: 12px;
+    background-color: #A90;
+    border-radius: 50%;
+    box-shadow: #000 0 -1px 7px 1px, inset #660 0 -1px 9px, #DD0 0 2px 12px;
+}
+
+.led-green {
+    /*margin: 20px auto;*/
+    /*margin-top: -26px;
+    margin-left: 180px;*/
+    width: 12px;
+    height: 12px;
+    background-color: #690;
+    border-radius: 50%;
+    box-shadow: #000 0 -1px 7px 1px, inset #460 0 -1px 9px, #7D0 0 2px 12px;
+}
+/* led end   */
+
+@media (max-width: 1200px) {
+       #sidebar-option {
+               height: auto;
+               display: block;
+       }
+}
+
+@media (min-width: 1200px) {
+       #sidebar-option {
+               height: 180px;
+               display: flex;
+               align-items: center;
+       }
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/css/treeview-check.css
----------------------------------------------------------------------
diff --git a/griffin-ui/css/treeview-check.css 
b/griffin-ui/css/treeview-check.css
new file mode 100644
index 0000000..971b874
--- /dev/null
+++ b/griffin-ui/css/treeview-check.css
@@ -0,0 +1,81 @@
+/*
+       Copyright (c) 2016 eBay Software Foundation.
+       Licensed 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.
+*/
+div[angular-treeviewcheck] {
+  /* prevent user selection */
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  /* default */
+  /*font-family: Tahoma;
+  font-size:13px;
+  color: #555;*/
+  font-size:14px;
+  text-decoration: none;
+}
+
+div[tree-model-check] ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: none;
+  overflow: hidden;
+}
+
+div[tree-model-check] li {
+  position: relative;
+  padding: 0 0 0 20px;
+  color:#ffffff
+  line-height: 20px;
+}
+
+div[tree-model-check] li>span:hover {
+  color:#ffffff;
+}
+
+div[tree-model-check] li .expanded {
+  padding: 1px 8px;
+ /*background-image: 
url("http://cfile23.uf.tistory.com/image/205B973A50C13F4B19D9BD";);*/
+  background-repeat: no-repeat;
+}
+
+
+div[tree-model-check] li .collapsed {
+  padding: 1px 10px;
+  /*background-image: url("../img/folder-closed.png");*/
+ /*background-image: 
url("http://cfile23.uf.tistory.com/image/1459193A50C13F4B1B05FB";);*/
+  background-repeat: no-repeat;
+}
+
+div[tree-model-check] li .normal {
+  padding: 1px 10px;
+  /*background-image: url("../img/file.png");*/
+  /*background-image: 
url("http://cfile23.uf.tistory.com/image/165B663A50C13F4B196CCA";);*/
+  background-repeat: no-repeat;
+}
+
+div[tree-model-check] li i, div[tree-model-check] li span {
+  cursor: pointer;
+}
+
+div[tree-model-check] li .selected {
+  background-color: #aaddff;
+  font-weight: bold;
+  /*background-color: #D9F40E;*/
+  color:#000000;
+  padding: 1px 5px;
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/css/treeview.css
----------------------------------------------------------------------
diff --git a/griffin-ui/css/treeview.css b/griffin-ui/css/treeview.css
new file mode 100644
index 0000000..a5e4fbc
--- /dev/null
+++ b/griffin-ui/css/treeview.css
@@ -0,0 +1,81 @@
+/*
+       Copyright (c) 2016 eBay Software Foundation.
+       Licensed 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.
+*/
+div[angular-treeview] {
+  /* prevent user selection */
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  /* default */
+  /*font-family: Tahoma;
+  font-size:13px;
+  color: #555;*/
+  font-size:14px;
+  text-decoration: none;
+}
+
+div[tree-model] ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: none;
+  overflow: hidden;
+}
+
+div[tree-model] li {
+  position: relative;
+  padding: 0 0 0 20px;
+  color:#ffffff
+  line-height: 20px;
+}
+
+div[tree-model] li>span:hover {
+  color:#ffffff;
+}
+
+div[tree-model] li .expanded {
+  padding: 1px 8px;
+ /*background-image: 
url("http://cfile23.uf.tistory.com/image/205B973A50C13F4B19D9BD";);*/
+  background-repeat: no-repeat;
+}
+
+
+div[tree-model] li .collapsed {
+  padding: 1px 10px;
+  /*background-image: url("../img/folder-closed.png");*/
+ /*background-image: 
url("http://cfile23.uf.tistory.com/image/1459193A50C13F4B1B05FB";);*/
+  background-repeat: no-repeat;
+}
+
+div[tree-model] li .normal {
+  padding: 1px 10px;
+  /*background-image: url("../img/file.png");*/
+  /*background-image: 
url("http://cfile23.uf.tistory.com/image/165B663A50C13F4B196CCA";);*/
+  background-repeat: no-repeat;
+}
+
+div[tree-model] li i, div[tree-model] li span {
+  cursor: pointer;
+}
+
+div[tree-model] li .selected {
+  background-color: #aaddff;
+  font-weight: bold;
+  /*background-color: #D9F40E;*/
+  color:#000000;
+  padding: 1px 5px;
+}

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/img/1.PNG
----------------------------------------------------------------------
diff --git a/griffin-ui/img/1.PNG b/griffin-ui/img/1.PNG
new file mode 100644
index 0000000..e9a3063
Binary files /dev/null and b/griffin-ui/img/1.PNG differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/img/2.PNG
----------------------------------------------------------------------
diff --git a/griffin-ui/img/2.PNG b/griffin-ui/img/2.PNG
new file mode 100644
index 0000000..af12dc4
Binary files /dev/null and b/griffin-ui/img/2.PNG differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/img/bollinger.png
----------------------------------------------------------------------
diff --git a/griffin-ui/img/bollinger.png b/griffin-ui/img/bollinger.png
new file mode 100644
index 0000000..efb1f49
Binary files /dev/null and b/griffin-ui/img/bollinger.png differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/img/construction.gif
----------------------------------------------------------------------
diff --git a/griffin-ui/img/construction.gif b/griffin-ui/img/construction.gif
new file mode 100644
index 0000000..7d03450
Binary files /dev/null and b/griffin-ui/img/construction.gif differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/img/favicon.ico
----------------------------------------------------------------------
diff --git a/griffin-ui/img/favicon.ico b/griffin-ui/img/favicon.ico
new file mode 100644
index 0000000..c5ccacf
Binary files /dev/null and b/griffin-ui/img/favicon.ico differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/img/logo.gif
----------------------------------------------------------------------
diff --git a/griffin-ui/img/logo.gif b/griffin-ui/img/logo.gif
new file mode 100644
index 0000000..bf26825
Binary files /dev/null and b/griffin-ui/img/logo.gif differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/img/mad.png
----------------------------------------------------------------------
diff --git a/griffin-ui/img/mad.png b/griffin-ui/img/mad.png
new file mode 100644
index 0000000..aa85a76
Binary files /dev/null and b/griffin-ui/img/mad.png differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/img/sidebar1.png
----------------------------------------------------------------------
diff --git a/griffin-ui/img/sidebar1.png b/griffin-ui/img/sidebar1.png
new file mode 100644
index 0000000..6a64412
Binary files /dev/null and b/griffin-ui/img/sidebar1.png differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/img/sidebar2.png
----------------------------------------------------------------------
diff --git a/griffin-ui/img/sidebar2.png b/griffin-ui/img/sidebar2.png
new file mode 100644
index 0000000..425b863
Binary files /dev/null and b/griffin-ui/img/sidebar2.png differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/img/yoy.png
----------------------------------------------------------------------
diff --git a/griffin-ui/img/yoy.png b/griffin-ui/img/yoy.png
new file mode 100644
index 0000000..2f071ac
Binary files /dev/null and b/griffin-ui/img/yoy.png differ

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/index.html
----------------------------------------------------------------------
diff --git a/griffin-ui/index.html b/griffin-ui/index.html
new file mode 100644
index 0000000..6f79eb1
--- /dev/null
+++ b/griffin-ui/index.html
@@ -0,0 +1,185 @@
+<!--
+       Copyright (c) 2016 eBay Software Foundation.
+       Licensed 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>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="icon" href="/img/favicon.ico">
+
+    <title>Griffin - Data Quality Service</title>
+
+    <!-- Bootstrap Core CSS -->
+    <link href="bower_components/bootswatch/cyborg/bootstrap.css" 
rel="stylesheet">
+    <!-- Custom Fonts -->
+    <link href="bower_components/font-awesome/css/font-awesome.min.css" 
rel="stylesheet" type="text/css">
+
+    <link href="bower_components/AngularJS-Toaster/toaster.css" 
rel="stylesheet">
+
+    <link href="css/main.css" rel="stylesheet">
+    <link href="css/treeview.css" rel="stylesheet">
+    <link href="css/treeview-check.css" rel="stylesheet">
+    <link href="css/sidebar.css" rel="stylesheet">
+    <link href="pages/rules/rule.css" rel="stylesheet">
+    <link href="pages/metrics/metrics.css" rel="stylesheet">
+    <link href="pages/template/bigchart.css" rel="stylesheet">
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media 
queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+        <script 
src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js";></script>
+        <script 
src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js";></script>
+    <![endif]-->
+
+</head>
+
+
+<body>
+    <toaster-container toaster-options="{'time-out': 3000, 
'close-button':true, 'animation-class': 
'toast-center-right'}"></toaster-container>
+
+    <nav class="navbar navbar-default navbar-fixed-top" 
ng-controller="NavCtrl">
+      <div class="container-fluid">
+        <!-- Brand and toggle get grouped for better mobile display -->
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed" 
data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a href="#/" class="navbar-brand" 
style="padding-top:5px;padding-bottom:0;"><img src="/img/logo.gif" title="Data 
Quality Service" style="max-height:40px;"/></a>
+        </div>
+
+        <!-- Collect the nav links, forms, and other content for toggling -->
+        <div class="collapse navbar-collapse" id="navbar-collapse">
+          <ul class="nav navbar-nav">
+            <li ng-class="{active:isActive('/health')}"><a href="#/health"><i 
class="icon-home icon-white"></i> Health</a></li>
+            <li ng-class="{active:isActive('/rules') || 
isActive('/createrule')}"><a href="#/rules"><i class="icon-folder-open 
icon-white"></i> Models</a></li>
+            <!-- <li><a href="#/undercons"><i class="icon-calendar 
icon-white"></i> Data Profiling</a></li> -->
+            <li ng-class="{active:isActive('/mydashboard') || 
isActive('/subscribemodel')}"><a href="#/mydashboard"><i class="icon-calendar 
icon-white"></i> My Dashboard</a></li>
+          </ul>
+
+          <ul class="nav navbar-nav navbar-right">
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown" 
role="button" aria-haspopup="true" aria-expanded="false">{{fullName}} <i 
class="fa fa-user fa-fw"></i><span class="caret"></span></a>
+              <ul class="dropdown-menu dropdown-user">
+                    <li><a href="#/undercons"><i class="fa fa-user fa-fw"></i> 
User Profile</a></li>
+                    <li><a href="#/undercons"><i class="fa fa-gear fa-fw"></i> 
Settings</a></li>
+                    <li class="divider"></li>
+                    <li><a href="/apidocs/index.html" target="_blank"><i 
class="fa fa-book fa-fw"></i> API DOCs</a></li>
+                    <li><a 
href="https://github.com/eBay/griffin/blob/master/griffin-doc/userguide.md"; 
target="_blank"><i class="fa fa-question-circle fa-fw"></i> User Guide</a></li>
+                    <li><a href="mailto://ebay-griffin-d...@googlegroups.com"; 
><i class="fa fa-envelope fa-fw"></i> Contact us</a></li>
+                    <li class="divider"></li>
+                    <li><a href="" ng-click="logout()"><i class="fa 
fa-sign-out fa-fw"></i> Logout</a>
+                    </li>
+                </ul>
+            </li>
+          </ul>
+
+          <form class="navbar-search navbar-right nav navbar-nav" >
+
+            <input id="searchBox" type="text" class="search-query" 
placeholder="Search..." 
ng-disabled="!isActive('/rules')&&!isActive('/dataassets')">
+          </form>
+          <!-- <form class="navbar-form navbar-right" role="search" 
style="padding-right:150px;">
+            <div class="form-group">
+              <input type="text" class="form-control search-query" 
id="searchBox" ng-disabled="!isActive('/rules')&&!isActive('/dataassets')" 
placeholder="Search.." style="border-radius:19px;">
+            </div>
+          </form> -->
+        </div><!-- /.navbar-collapse -->
+      </div><!-- /.container-fluid -->
+    </nav>
+
+
+    <div class="container-fluid"  us-spinner="{color:'#ffffff', lines:13, 
width:14, length:28, radius:42, shadow:true, hwaccel:true, speed:0.8}" 
spinner-on="false" 
style="padding-top:56px;padding-bottom:90px;height:100%;padding-right:0;" 
id="mainContent">
+
+
+      <div class="col-md-9 col-xs-12" >
+        <!-- <button type="button" class="btn btn-default btn-circle btn-lg" 
style="position: absolute; top: 0px; right: 10px; "><i class="fa 
fa-arrow-left"></i></button> -->
+        <button type="button" class="btn btn-primary btn-circle" 
style="position: absolute; top: 0px; right: 10px; z-index:99" 
onclick="history.back();"><span style="margin-bottom:20px;">Back</span></button>
+        <!-- main content goes here-->
+        <div id="mainWindow" class="row" ng-view style="overflow-y: 
auto;overflow-x:hidden; padding-right: 10px;" ng-controller="MainCtrl">
+
+        </div>
+      </div>
+
+      <div class="col-xs-12 col-md-3" style="padding-right:0;">
+        <!-- <div id="rightbar" ng-controller="SideBarCtrl" class="" 
style="background-color:#262626;"> -->
+          <ng-include src="'/sidebar.html'"/>
+        <!-- </div> -->
+
+      </div>
+
+      <div id="footerwrap" class="navbar-fixed-bottom" 
ng-controller="FooterCtrl">
+            <!-- <footer class="clearfix"></footer> -->
+            <div class="container-fluid">
+              <div class="row ">
+                  <p 
ng-show="!notifications">{{timestamp|date:'short':'-0700'}} - Welcome 
<label>{{fullName}}</label>!</p>
+                  <p ng-repeat="r in notifications">
+                    {{r.timestamp|date:'short':'-0700'}} - 
<label>{{r.owner}}</label> {{r.operation}}d a {{r.target}} named
+                    <a ng-if="r.target=='model'" 
href="#/viewrule/{{r.name}}">{{r.name}}</a>
+                    <label ng-if="r.target=='dataasset'">"{{r.name}}"</label>
+                  </p>
+              </div><!-- /row -->
+            </div><!-- /container -->
+      </div><!-- /footerwrap -->
+
+    </div>
+
+    <div id="bigChartContainer"  class="big-chart-container" 
style="display:none;" ng-controller="BigChartCtrl">
+      <div id="bigChartShow" class="big-chart-content">
+        <div class="container-fluid">
+          <div class="pull-right" 
style="position:fixed;right:20px;top:10px;z-index:1050;">
+            <button type="button" id="bigChartClose" class="bark-close thick" 
aria-label="Close" ng-click="closeBigChart()">
+            </button>
+          </div>
+
+          <div class="pull-right" 
style="position:fixed;right:150px;top:10px;z-index:1050;">
+            <a href ng-click="downloadSample()" 
style="font-size:15px;color:#d48265;"><u>Download Sample</u></a>
+          </div>
+
+          <div class="row">
+            <!--<highchart config="chartConfig" />-->
+            <div id="bigChartDiv"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="modal fade" id="download-sample" role="dialog" 
ng-controller="DownloadSampleCtrl">
+               <div class="modal-dialog modal-xg modal-lg">
+                       <div class="modal-content">
+                               <div class="modal-header">
+                                       <button type="button" class="close" 
data-dismiss="modal" aria-hidden="true">&times;</button>
+                                       <h4 
class="modal-title">{{selectedModelName}}</h4>
+                               </div>
+                               <div class="modal-body">
+                                       <ng-include 
src="'/pages/metrics/download-sample.html'"/>
+                               </div>
+                               <div class="modal-footer">
+                                       <button type="button" class="btn 
btn-default" data-dismiss="modal">Close</button>
+                               </div>
+                       </div>
+               </div>
+       </div>
+
+    <script data-main="js/main" 
src="bower_components/requirejs/require.js"></script>
+
+</body>
+
+</html>

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/js/app.js
----------------------------------------------------------------------
diff --git a/griffin-ui/js/app.js b/griffin-ui/js/app.js
new file mode 100644
index 0000000..e2dc9fe
--- /dev/null
+++ b/griffin-ui/js/app.js
@@ -0,0 +1,42 @@
+/*
+       Copyright (c) 2016 eBay Software Foundation.
+       Licensed 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.
+*/
+define([
+    'angular',
+    './controllers/index',
+    './directives/index',
+    './filters/index',
+    './services/index',
+    'ngSmartTable',
+    'angularRoute',
+    'ngToaster',
+    'ngCookies',
+    'angularSpinner',
+    'echarts',
+    'echarts-dark'
+], function (angular) {
+    'use strict';
+
+    return angular.module('app', [
+        'app.services',
+        'app.controllers',
+        'smart-table',
+        'app.filters',
+        'app.directives',
+        'ngRoute',
+        'toaster',
+        'ngCookies',
+        'angularSpinner'
+    ]);
+});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/js/bs.js
----------------------------------------------------------------------
diff --git a/griffin-ui/js/bs.js b/griffin-ui/js/bs.js
new file mode 100644
index 0000000..f6f67d3
--- /dev/null
+++ b/griffin-ui/js/bs.js
@@ -0,0 +1,31 @@
+/*
+       Copyright (c) 2016 eBay Software Foundation.
+       Licensed 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.
+*/
+define([
+    'require',
+    'jquery',
+    'bootstrap',
+    'angular',
+    'app',
+    'routes'
+], function (require, $, bootstrap, angular) {
+    'use strict';
+
+   require(['domReady!'], function (document) {
+
+        $('#mainWindow').height($('#mainContent').height());
+
+        angular.bootstrap(document, ['app']);
+    });
+});

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/js/controllers/bigChart-ctrl.js
----------------------------------------------------------------------
diff --git a/griffin-ui/js/controllers/bigChart-ctrl.js 
b/griffin-ui/js/controllers/bigChart-ctrl.js
new file mode 100644
index 0000000..5525cd2
--- /dev/null
+++ b/griffin-ui/js/controllers/bigChart-ctrl.js
@@ -0,0 +1,58 @@
+/*
+       Copyright (c) 2016 eBay Software Foundation.
+       Licensed 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.
+*/
+define(['./module'], function(controllers) {
+    'use strict';
+    controllers.controller('BigChartCtrl', ['$scope', '$http', '$config', 
'$filter', '$timeout', '$compile', '$routeParams', '$barkChart', '$rootScope', 
function($scope, $http, $config, $filter, $timeout, $compile, $routeParams, 
$barkChart, $rootScope) {
+
+      var echarts = require('echarts');
+
+      pageInit();
+
+      function pageInit() {
+        resizeBigChart();
+        $scope.bigChart = echarts.init($('#bigChartDiv').get(0), 'dark');
+      }
+
+      function resizeBigChart() {
+        document.getElementById('bigChartDiv').style.width = 
window.innerWidth+'px';
+        document.getElementById('bigChartDiv').style.height = 
window.innerHeight+'px';
+      }
+
+      $scope.closeBigChart = function(){
+        console.log('close big chart!');
+        $('#bigChartContainer').hide();
+        // $('#mainWindow').show();
+      }
+
+      $scope.downloadSample = function() {
+        $rootScope.$broadcast('downloadSample', $scope.selectedModel);
+      }
+
+      $(window).resize(function() {
+        console.log('big chart resize');
+          resizeBigChart();
+          $scope.bigChart.resize();
+      });
+
+      $rootScope.showBigChart = function(option) {
+        $scope.selectedModel = option.title.text;
+        $('#bigChartContainer').show();
+        // $('#mainWindow').hide();
+        $scope.bigChart.clear();
+        $scope.bigChart.setOption(option);
+      }
+
+    }]);
+});
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/incubator-griffin/blob/a8ba6ba9/griffin-ui/js/controllers/createdataasset-ctrl.js
----------------------------------------------------------------------
diff --git a/griffin-ui/js/controllers/createdataasset-ctrl.js 
b/griffin-ui/js/controllers/createdataasset-ctrl.js
new file mode 100644
index 0000000..d951851
--- /dev/null
+++ b/griffin-ui/js/controllers/createdataasset-ctrl.js
@@ -0,0 +1,180 @@
+/*
+       Copyright (c) 2016 eBay Software Foundation.
+       Licensed 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.
+*/
+define(['./module'], function (controllers) {
+    'use strict';
+    controllers.controller('CreateDataAssetCtrl', ['$scope', '$http', 
'$config', '$location', 'toaster', '$timeout', '$route', '$filter', function 
($scope, $http, $config, $location, toaster, $timeout, $route, $filter) {
+        $scope.currentStep = 1;
+
+        // $scope.platformOptions = ['Teradata', 'Apollo'];
+        // $scope.systemOptions = ['Sojourner', 'SiteSpeed', 'Bullseye', 
'PDS', 'GPS'];
+        //$scope.assetTypeOptions = ['hdfsfile', 'hivetable'];
+        $scope.assetTypeOptions = ['hivetable'];
+
+        $scope.formatTypeOptions = ['yyyyMMdd', 'yyyy-MM-dd','HH'];
+
+        $scope.regex = '^\\/(?:[0-9a-zA-Z\\_\\-\\.]+\\/?)+';
+
+        // $scope.regex = new RegExp('^\\/(?:[0-9a-zA-Z\\_\\-\\.]+\\/?)+');
+
+        var allModels = $config.uri.dbtree;
+        $http.get(allModels).success(function(data) {
+            $scope.platformOptions = data;
+        });
+
+        //$scope.platformOptions = 
[{"id":null,"platform":"Teradata","systems":[{"id":null,"name":"gdw_tables","assets":[{"id":108,"name":"dw_bid"},{"id":109,"name":"dw_trans"}]}]},{"id":null,"platform":"Apollo","systems":[{"id":null,"name":"Sojourner","assets":[{"id":22,"name":"ubi_event"}]},{"id":null,"name":"SiteSpeed","assets":[{"id":21,"name":"sitespeed"}]},{"id":null,"name":"PDS","assets":[{"id":20,"name":"last_categories_accessed"}]},{"id":null,"name":"Bullseye","assets":[{"id":1,"name":"be_view_event_queue"},{"id":2,"name":"be_search_event_queue"},{"id":3,"name":"be_item_watch_event_queue"},{"id":4,"name":"be_bid_event_queue"},{"id":5,"name":"be_transaction_event_queue"},{"id":6,"name":"dmg"},{"id":7,"name":"loyaltysgmnt"},{"id":8,"name":"cust_dna_cat_score"},{"id":9,"name":"badge_interest"},{"id":10,"name":"cust_dna_vq_feed"},{"id":11,"name":"user_dna"},{"id":12,"name":"adchoice_user_pref"},{"id":13,"name":"cust_dna_vq_cat_feed"},{"id":14,"name":"cpcp_dealsv17"},{"id":15,"n
 
ame":"bbe_tbl_trx"},{"id":17,"name":"bbe_tbl_neg"},{"id":16,"name":"bbe_tbl_neu"},{"id":19,"name":"rtm_segment_dict"},{"id":18,"name":"bbe_tbl_pos"}]}]}];
+        $scope.systemOptions = $filter('strarr')('modelsystem');//['Bullseye', 
'GPS', 'Hadoop', 'PDS', 'IDLS', 'Pulsar', 'Kafka'];
+
+        // $scope.getSystemOptions = function(platformIndex){
+        //     if(platformIndex==undefined){
+        //         $scope.systemOptions = [];
+        //     }else{
+        //         $scope.systemOptions = 
$scope.platformOptions[platformIndex].systems;
+        //     }
+        // };
+
+        $scope.updateHdfsPath = function(typeIndex){
+            if(typeIndex != 0 ){
+                $scope.form.basic.path = '';
+            }
+        };
+
+           $scope.addSchema = function() {
+               $scope.form.basic.schema.push({
+                   name: '',
+                   type: 'string',
+                   desc: '',
+                   sample: ''
+               });
+           };
+
+      $scope.addPatitionColumn = function() {
+               $scope.form.basic.partitions.push({
+                   name: '',
+                   format: "yyyyMMdd"
+               });
+           };
+
+           $scope.deleteSchema = function(index) {
+               $scope.form.basic.schema.splice(index, 1);
+           };
+
+      $scope.deletePartition = function(index) {
+               $scope.form.basic.partitions.splice(index, 1);
+           };
+
+        $scope.$on('$viewContentLoaded', function() {
+            $scope.$emit('initReq');
+            resizeWindow();
+        });
+
+        $scope.$on('resizeHandler', function(e) {
+            if ($route.current.$$route.controller == "CreateDataAssetCtrl") {
+                resizeWindow();
+            }
+        });
+
+        function resizeWindow() {
+                    $('.formStep').height(window.innerHeight  -  
$('.formStep').offset().top - $('#footerwrap').outerHeight()-20);
+                    $('fieldset').height(window.innerHeight  -  
$('fieldset').offset().top - $('#footerwrap').outerHeight()- 
$('.btn-container').height() -80);
+                    $('.y-scrollable').css({
+                        'max-height': $('fieldset').height()
+                    });
+
+        }
+
+           // Initial Value
+        $scope.form = {
+            basic: {
+                platform: 'Apollo',
+                schema: [{
+                    name: '',
+                    type: 'string',
+                    desc: '',
+                    sample: ''
+                }],
+                partitions: []
+            },
+            submit: function(form) {
+                if (!form.$valid) {
+                    var field = null
+                      , firstError = null ;
+                    for (field in form) {
+                        if (field[0] != '$') {
+                            if (firstError === null  && !form[field].$valid) {
+                                firstError = form[field].$name;
+                            }
+
+                            if (form[field].$invalid) {
+                                form[field].$dirty = true;
+                            }
+                        }
+                    }
+                    angular.element('.ng-invalid[name=' + firstError + 
']').focus();
+                    errorMessage($scope.currentStep);
+                } else {
+                    form.$setPristine();
+                    this.data={
+                      basic: this.basic
+                    };
+                    this.data.basic.path += 
this.data.basic.path.substring(this.data.basic.path.length-1)=="/"?'':'/';
+                    //this.data.basic.path += 
(this.basic.folderFormat==undefined?"":this.basic.folderFormat);
+
+
+
+                    $('#confirm-pu').modal('show');
+                }
+            },
+
+            save: function() {
+
+
+                var msg = {
+                       'system' : 
$scope.systemOptions[$scope.form.basic.system],
+                       'assetType' : 
$scope.assetTypeOptions[$scope.form.basic.type],
+                  'assetName' : $scope.form.basic.assetName,
+                       'assetHDFSPath' : $scope.form.data.basic.path + 
($scope.form.data.basic.folderFormat==undefined?"":$scope.form.data.basic.folderFormat),
+                       'platform' : $scope.form.basic.platform,
+                       'schema' : $scope.form.basic.schema,
+                  'partitions' : $scope.form.basic.partitions,
+                  'owner' : $scope.form.basic.owner
+                }
+
+                $http.post($config.uri.adddataasset, msg).success(function() {
+                    $('#confirm-pu').on('hidden.bs.modal', function(e) {
+                        $('#confirm-pu').off('hidden.bs.modal');
+                        $location.path('/dataassets');
+                        $scope.$apply();
+                    });
+
+                         $('#confirm-pu').modal('hide');
+
+                }).error(function(data){
+                  toaster.pop('error', 'Save data asset failed, please try 
again!', data.message);
+                });
+            },
+
+        };
+
+        var errorMessage = function(i, msg) {
+            var errorMsgs = ['Please input valid values'];
+            if (!msg) {
+                toaster.pop('error', 'Error', errorMsgs[i - 1], 0);
+            } else {
+                toaster.pop('error', 'Error', msg, 0);
+            }
+        };
+
+    }]);
+});

Reply via email to