OpenStackify the scoreboard style.

Remove the Pure Storage background and switch to OpenStack colors in
favor of some more muted choices.

Remove the font face and non-minified jquery.

Added in a favicon (borrowed from Horizon) and link to an official logo.

Change-Id: I7abe01d5b465bbafafd8163278c321f83277662b

monitoring/scoreboard/static/scoreboard.css

@@ -1,21 +1,11 @@
 
-@font-face {
-    font-family: 'Myriad Pro Regular';
-    font-style: normal;
-    font-weight: normal;
-    src: local('Myriad Pro Regular'), url('/static/MYRIADPRO-REGULAR.woff') format('woff');
-}
-
 body {
-    font-family: 'Myriad Pro Regular';
+    font-family: helvetica, arial, sans-serif;
-    background-image: url("site_bg.png");
+    background: white url("site_bg.jpg") no-repeat scroll 0px 0px;
-    background-repeat: repeat-x;
+    color: #535353;
-    background-attachment: fixed;
 }
 
 .pretty_table {
-    box-shadow: 5px 5px 2px #888888;
-
     -moz-border-radius-bottomleft:5px;
     -webkit-border-bottom-left-radius:5px;
     border-bottom-left-radius:5px;
@@ -68,21 +58,21 @@ body {
     vertical-align: middle;
     text-align: center;
     padding: 5px;
-    border: solid 1px black;
+    border: solid 1px grey;
+    color: black;
 }
 
 .pretty_table_header {
-    background-color:#5C5C5C;
+    background-color:#F1F1F1;
-    text-align:center;
+    text-align: center;
-    color:#ffffff;
+    color: black;
-    border: solid 1px black;
+    border: solid 1px grey;
     padding: 5px;
-    /* white-space: nowrap; */
 }
 
 .pretty_table_header:hover {
-    font-weight: bold;
+    cursor: pointer;
-    cursor:pointer;
+    text-decoration: underline;
 }
 
 .success {
@@ -90,9 +80,9 @@ body {
 }
 
 .success:hover {
-    font-weight: bold;
+    cursor: pointer;
-    cursor:pointer;
+    border: solid 1px #3C763D;
-    background-color: #33CC00;
+    text-decoration: underline;
 }
 
 .fail {
@@ -100,44 +90,36 @@ body {
 }
 
 .fail:hover {
-    font-weight: bold;
     cursor:pointer;
-    background-color: #FF0000;
+    text-decoration: underline;
 }
 
 .unknown {
-    background-color: #A0A0A0;
+    background-color: #FF0000;
 }
 
 .unknown:hover {
-    font-weight: bold;
     cursor:pointer;
-    background-color: #808080;
+    text-decoration: underline;
 }
 
 .no_result {
-    background-color: #E0E0E0;
+    background-color: white;
     opacity: 0.75;
 }
 
 .scoreboard_container {
     margin-top: 10px;
-    margin-left: auto;
+    margin-left: 10px;
-    margin-right: auto;
     width: 90%;
 }
 
 .query_box_container {
     margin-top: 15px;
-    margin-left: auto;
+    margin-left: 10px;
-    margin-right: auto;
+    background: rgba(255, 255, 255, 0);
-    background: #5C5C5C;
     width: 90%;
-    border: solid 1px black;
+    color: #535353;
-    border-radius: 5px;
-    -webkit-border-radius: 5px;
-    color: #ffffff;
-    box-shadow: 5px 5px 2px #888888;
 }
 
 .query_box {
@@ -146,23 +128,19 @@ body {
 }
 
 .query_box_title {
-    font-size: 250%;
+    font-size: 150%;
-    font-weight: bold;
-    display: inline-block;
-}
-
-.query_box form {
-    margin-left: 25px;
     display: inline-block;
+    color: #264D69;
+    margin: 2px;s
 }
 
 .query_box input {
-    border-radius:5px;
+    margin-top: 2px;
-    -webkit-border-radius:5px;
+    margin-bottom: 2px;
-    margin-left: 5px;
+    margin-left: 10px;
-    margin-right: 5px;
+    margin-right: 10px;
-    border: solid 1px black;
+    border: solid 1px #bbb;
-    padding: 5px
+    /* padding: 5px; */
 }
 
 .overlay_opaque {
@@ -178,7 +156,7 @@ body {
 
 .overlay_title {
     width: 100%;
-    font-size: 250%;
+    font-size: 125%;
     font-weight: bold;
     text-align: center;
     position: absolute;
@@ -196,3 +174,6 @@ body {
     z-index: 100000; /* more than the opaque one */
 }
 
+#logo {
+    margin-left: 10px;
+}

monitoring/scoreboard/static/scoreboard.js

@@ -264,6 +264,10 @@ var Scoreboard = (function () {
         return input;
     }
 
+    var add_break_to_form = function (form) {
+        $('<br/>').appendTo(form);
+    }
+
     var get_param_by_name = function (name) {
         name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
         var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
@@ -295,6 +299,7 @@ var Scoreboard = (function () {
 
         add_input_to_form(form, 'text', 'Project Name', 'project', current_project);
         add_input_to_form(form, 'text', 'CI Account Username', 'user', current_user);
+        add_break_to_form(form);
         add_input_to_form(form, 'text', 'Timeframe (hours)', 'timeframe', current_timeframe);
         add_input_to_form(form, 'date', 'Start Date', 'start', start_date);
         add_input_to_form(form, 'date', 'End Date', 'end', end_date);

monitoring/scoreboard/templates/index.html

@@ -1,11 +1,15 @@
 <html>
     <head>
+        <link rel='icon' type='image/png' href='/static/favicon.ico'>
         <script type='text/javascript' src='/static/jquery-2.1.3.min.js'></script>
         <script type='text/javascript' src='/static/scoreboard.js'></script>
         <script type='text/javascript' src='http://fgnass.github.io/spin.js/spin.js'></script>
         <link rel='stylesheet' type='text/css' href='/static/scoreboard.css'>
     </head>
     <body>
+        <div id="logo">
+            <img src="/static/open-stack-cloud-computing-logo-2.png" />
+        </div>
         <div id='query-box'></div>
         <div id='scoreboard'></div>
         <script type='text/javascript'>