Checkpoint

NOTICE

@@ -1,7 +1,2 @@
 Operator Dashboard for Apache CloudStack (tm)
 Copyright 2013 Chip Childers
-
-The Retriever bootstrap theme is included in this source package 
-within the cs-oper-dash/app/assets/stylesheets/bootstrap_and_overrides.css.scss 
-and cs-oper-dash/app/assets/images/stich.png files. This was obtained
-from Damian Sowers via https://github.com/damian-sowers/retriever-bootstrap

cs-operator-dash/app/assets/stylesheets/bootstrap_and_overrides.css.scss

@@ -1,69 +1,203 @@
 @import "bootstrap";
 @import "bootstrap-responsive";
 
-h1 {
- font-family: 'Raleway', sans-serif;
- font-weight:600;
-}
-h2, h3, h4, h5 {
- font-family: 'Raleway', sans-serif;
- font-weight:400;
-}
-.navbar-inner {
- padding-top:10px;
- filter: none;
- background-image: url('/assets/stich.png');
- background-repeat: repeat-x;
- height:49px;
-}
-.navbar .brand {
- font-family: 'Raleway', sans-serif;
- font-size:30px;
- font-size: 28px;
- font-weight: 400;
- color: #eee;
- text-shadow: 0 2px 0 #000;
-}
-.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
- color: #eee;
- text-decoration: none;
- background-color: #222;
- margin-top:-10px;
- padding-top:20px;
- padding-bottom:18px;
- -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
- -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
- box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-}
-.navbar .nav > li > a {
- float: none;
- font-size:16px;
- padding: 10px 15px 10px;
- color: #eee;
- text-decoration: none;
- text-shadow: 0 1px 0 #000;
-}
-.navbar .nav > li > a:hover {
- color:#0088cc;
-}
-.collapse {
- background-color:#333;
-}
-@media (max-width: 979px) {
-.nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus {
- background-color: #000;
- color:#fff;
- }
-}
-.well {
- background-color: #fff;
- border: 1px solid #ddd;
- background: -webkit-linear-gradient(top, #ffffff, #f9f9f9);
- background: -moz-linear-gradient(top, #ffffff, #f9f9f9);
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
-}
-.container {
- margin-left: 50px;
- margin-right: 50px;
+/** Home Page **/
+body {
+ padding-top: 60px;
+ padding-bottom: 40px;
+ background-color: #f5f5f5;
 }
+
+/** Login Page **/
+#login {
+ padding-top: 40px;
+ padding-bottom: 40px;
+}
+
+#login .form-signin {
+ max-width: 300px;
+ padding: 19px 29px 29px;
+ margin: 0 auto 20px;
+ background-color: #fff;
+ border: 1px solid #e5e5e5;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
+ -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
+ box-shadow: 0 1px 2px rgba(0,0,0,.05);
+}
+#login .form-signin .form-signin-heading,
+#login .form-signin .checkbox {
+ margin-bottom: 10px;
+}
+#login .form-signin input[type="text"],
+#login .form-signin input[type="password"] {
+ font-size: 16px;
+ height: auto;
+ margin-bottom: 15px;
+ padding: 7px 9px;
+}
+
+/** 2 level sub menu **/
+.dropdown-menu-with-subs .sub-menu {
+ left: 100%;
+ position: absolute;
+ top: 0;
+ visibility: hidden;
+ margin-top: -1px;
+}
+
+.dropdown-menu-with-subs li:hover .sub-menu {
+ visibility: visible;
+ display: block;
+}
+
+.navbar .sub-menu:before {
+ border-bottom: 7px solid transparent;
+ border-left: none;
+ border-right: 7px solid rgba(0, 0, 0, 0.2);
+ border-top: 7px solid transparent;
+ left: -7px;
+ top: 10px;
+}
+.navbar .sub-menu:after {
+ border-top: 6px solid transparent;
+ border-left: none;
+ border-right: 6px solid #fff;
+ border-bottom: 6px solid transparent;
+ left: 10px;
+ top: 11px;
+ left: -6px;
+}
+
+/** Global **/
+#content {
+ margin-left:0px;
+}
+.hide-sidebar, .show-sidebar {
+ cursor: pointer;
+}
+.padd-bottom {
+ margin-bottom: 5px;
+}
+.breadcrumb {
+ margin: 0 0 0px;
+ padding: 10px 0px;
+ background-color: transparent;
+}
+
+.block {
+ border: 1px solid #ccc;
+ background: white;
+ margin: 1em 0em;
+ border-top: none;
+}
+
+.block-content {
+ margin: 1em;
+ min-height: .25em;
+}
+
+.block-header {
+ margin-bottom: 0px;
+ border-right: none;
+ border-left: none;
+ -webkit-border-radius: 0px;
+ -moz-border-radius: 0px;
+ border-radius: 0px;
+}
+.block-header div {
+ padding-top: 10px;
+}
+
+.easyPieChart {
+ margin: 0px auto;
+}
+
+.chart-bottom-heading {
+ margin-top: 5px;
+ text-align: center;
+}
+
+/** Side Bar **/
+.bs-docs-sidenav {
+ max-width: 228px;
+ margin: 30px 0 0;
+ padding: 0;
+ background-color: #fff;
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
+ -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
+ box-shadow: 0 1px 4px rgba(0,0,0,.065);
+}
+.bs-docs-sidenav > li > a {
+ display: block;
+ width: 190px \9;
+ margin: 0 0 -1px;
+ padding: 8px 14px;
+ border: 1px solid #e5e5e5;
+}
+.bs-docs-sidenav > li:first-child > a {
+ -webkit-border-radius: 6px 6px 0 0;
+ -moz-border-radius: 6px 6px 0 0;
+ border-radius: 6px 6px 0 0;
+}
+.bs-docs-sidenav > li:last-child > a {
+ -webkit-border-radius: 0 0 6px 6px;
+ -moz-border-radius: 0 0 6px 6px;
+ border-radius: 0 0 6px 6px;
+}
+.bs-docs-sidenav > .active > a {
+ position: relative;
+ z-index: 2;
+ padding: 9px 15px;
+ border: 0;
+ text-shadow: 0 1px 0 rgba(0,0,0,.15);
+ -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
+ -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
+ box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
+}
+/* Chevrons */
+.bs-docs-sidenav .icon-chevron-right {
+ float: right;
+ margin-top: 2px;
+ margin-right: -6px;
+ opacity: .25;
+}
+.bs-docs-sidenav > li > a:hover {
+ background-color: #f5f5f5;
+}
+.bs-docs-sidenav a:hover .icon-chevron-right {
+ opacity: .5;
+}
+.bs-docs-sidenav .active .icon-chevron-right,
+.bs-docs-sidenav .active a:hover .icon-chevron-right {
+ opacity: 1;
+}
+.bs-docs-sidenav.affix {
+ top: 40px;
+}
+.bs-docs-sidenav.affix-bottom {
+ position: absolute;
+ top: auto;
+ bottom: 270px;
+}
+
+/* Icons
+------------------------- */
+.the-icons {
+ margin-left: 0;
+ list-style: none;
+}
+.the-icons li {
+ float: left;
+ width: 25%;
+ line-height: 25px;
+}
+.the-icons i:hover {
+ background-color: rgba(255,0,0,.25);
+}
+

cs-operator-dash/app/controllers/events_controller.rb

@@ -8,4 +8,8 @@ def json
  render json: @events
  end
 
+ def view
+ @event = Event.find(params[:id])
+ end
+
 end

cs-operator-dash/app/views/events/index.html.erb

@@ -1,17 +1,27 @@
-<h1>Event Viewer</h1>
-<table id="events">
+<div class="block">
+ <div class="navbar navbar-inner block-header">
+ <div class="muted pull-left">Events</div>
+ <div class="pull-right"><span class="badge badge-info"><%= @events.count %></span>
+ </div>
+</div>
+<div class="block-content collapse in">
+<table id="events" class="table table-striped">
  <thead>
  <tr>
- <th>Type</th>
+ <th>Event</th>
+ <th>Status</th>
  <th>Content</th>
  </tr>
 </thead>
 <tbody>
  <% @events.each do |event| %>
  <tr>
  <td><%= event["event"] %></td>
+ <td><%= event["status"] %></td>
  <td><%= event.to_json() %></td>
  </tr>
  <% end %>
 </tbody>
 </table>
+</div>
+

cs-operator-dash/app/views/events/view.html.erb

@@ -0,0 +1,24 @@
+<div class="block">
+ <div class="navbar navbar-inner block-header">
+ <div class="muted pull-left">Event Details</div>
+ </div>
+</div>
+<div class="block-content collapse in">
+<table id="events" class="table table-striped">
+ <thead>
+ <tr>
+ <th>Field</th>
+ <th>Content</th>
+ </tr>
+</thead>
+<tbody>
+ <% @event.attributes.each do |attr| %>
+ <tr>
+ <td><%= attr[0] %></td>
+ <td><%= attr[1] %></td>
+ </tr>
+ <% end %>
+</tbody>
+</table>
+</div>
+

cs-operator-dash/app/views/layouts/_navigation.html.erb

@@ -1,6 +1,9 @@
 <%= link_to "Operations Dashboard", "/", :class => 'brand' %>
 <div class="nav-collapse collapse">
- <ul class="nav pull-right">
+ <ul class="nav">
+ <li class="active">
+ <a href="#">Dashboard</a>
+ </li>
  <li>
  <%= link_to('Event Viewer', '/events/index') %>
  </li>

cs-operator-dash/app/views/layouts/application.html.erb

@@ -11,16 +11,16 @@
  <body>
  <header class="navbar navbar-fixed-top">
  <nav class="navbar-inner">
- <div class="container">
+ <div class="container-fluid">
  <%= render 'layouts/navigation' %>
  </div>
  </nav>
  </header>
  <main role="main">
- <div class="container">
+ <div class="container-fluid">
  <div class="content">
- <div class="row">
- <div class="span12">
+ <div class="row-fluid">
+ <div class="span12" id="content">
  <%= render 'layouts/messages' %>
  <%= yield %>
  </div>