Merge pull request mesos#172 from mesosphere/master

Merge left column into jobs table, widen the table
egoOyiri · Dec 16, 2013 · cf0d0cc · cf0d0cc
2 parents ef5745c + 4bbf3e0
commit cf0d0cc
Show file tree

Hide file tree

Showing 21 changed files with 4,055 additions and 2,045 deletions.
diff --git a/README.md b/README.md
@@ -158,15 +158,6 @@ Get a job name from the job listing above. Then:
 * Example: `curl -L -X DELETE chronos-node:4400/scheduler/job/request_event_counter_hourly`
 * Response: HTTP 204
 
-### Deleting All Jobs
-
-Note: *don't do this*.
-
-* Endpoint: __/scheduler/jobs__
-* Method: __DELETE__
-* Example: `curl -L -X DELETE chronos-node:4400/scheduler/jobs`
-* Response: HTTP 204
-
 ### Deleting All Tasks for a Job
 
 Deleting tasks for a job is useful if a job gets stuck. Get a job name from the job listing above. Then:

diff --git a/src/main/resources/assets/app.build.js b/src/main/resources/assets/app.build.js
@@ -1,35 +1,39 @@
 ({
-    appDir: "./app",
-    baseUrl: "scripts",
-    mainConfigFile: "./app/scripts/main.js",
-    dir: "./build",
-    pragmasOnSave: {
-      excludeTpl: true
+  appDir: './app',
+  baseUrl: 'scripts',
+  mainConfigFile: './app/scripts/main.js',
+  dir: './build',
+  pragmasOnSave: {
+    excludeCoffeeScript: true,
+    excludeTpl: true
+  },
+  excludeShallow: [
+    'css-builder',
+    'less-builder',
+    'lessc-server'
+  ],
+  findNestedDependencies: true,
+  optimize: 'uglify',
+  optimizeCss: 'standard.keepLines',
+  fileExclusionRegExp: /^\.|spec|tests/,
+  generateSourceMaps: false,
+  preserveLicenseComments: false,
+  skipDirOptimize: true,
+  modules: [
+    {
+      name: 'main',
+      include: [
+        'styles'
+      ],
+      excludeShallow: [
+        'spec_runner'
+      ]
     },
-    excludeShallow: [
-      'css-builder',
-      'less-builder',
-      'lessc-server'
-    ],
-    findNestedDependencies: true,
-    optimize: "uglify",
-    fileExclusionRegExp: /^\.|spec|tests/,
-    optimizeCss: "standard.keepLines",
-    generateSourceMaps: false,
-    preserveLicenseComments: false,
-    modules: [
-      {
-        name: "main",
-        include: [
-          "jquery",
-          "styles"
-        ],
-        excludeShallow: [
-          'spec_runner'
-        ]
-      },
-      {
-        name: "styles"
-      }
-    ]
+    {
+      name: 'styles'
+    }
+  ],
+  uglify: {
+    beautify: false
+  }
 })
diff --git a/src/main/resources/assets/app/index.html b/src/main/resources/assets/app/index.html
@@ -12,57 +12,58 @@
   <body class="chronos">
     <div class="chronos-wrapper chronos-wrapper-tranquility">
       <div class="app row-fluid">
-        <div class="span2 menu box" id="main-menu">
-          <a class="brand" href="/#">
-            <h1 id="logo">Chronos</h1>
-          </a>
-
-          <div class="search-wrapper">
-            <form id="search-form">
-              <i class="icon-search"></i>
-              <input type="text" class="span12" id="search-filter" placeholder="Search by job name, status or owner">
-            </form>
-          </div>
-
-          <ul class="nav nav-list stat-menu">
-            <li class="no-select total-jobs">
-              <div class="stat-count all-jobs-count">0</div>
-              <div class="stat-label">Total Jobs</div>
-            </li>
-
-            <li class="no-select total-jobs">
-              <div class="stat-count failed-jobs-count"
-                   data-rv-text="jobs:errCount < .lastRunStatus">0</div>
-              <div class="stat-label">Failed Jobs</div>
-            </li>
-          </ul>
-
-          <div>
-            <button class="btn btn-block clear-btn view-graph">
-              <i class="icon-retweet"></i> Dependency Graph
-            </button>
-            <button class="btn btn-block clear-btn new-job">✚ New Job</button>
-            <a class="btn btn-block clear-btn" href="stats.html">
-              Runtime statistics
-            </a>
+        <div class="span7 menu box" id="main-menu">
+          <div class="row-fluid" style="margin-bottom: 10px;">
+            <div class="span5">
+              <a class="brand pull-left" href="/#" id="logo">Chronos</a>
+              <div class="pull-left btn-bg-group" id="btn-bg">
+                <button class="btn btn-bg btn-bg-tranquility"
+                  data-theme="tranquility"
+                  id="btn-bg-tranquility"
+                  title="Tranquility"></button>
+                <button class="btn btn-bg btn-bg-prowess"
+                  data-theme="prowess"
+                  id="btn-bg-prowess"
+                  title="Prowess"></button>
+                <button class="btn btn-bg btn-bg-serenity"
+                  data-theme="serenity"
+                  id="btn-bg-serenity"
+                  title="Serenity"></button>
+              </div>
+            </div>
+            <div class="span7">
+              <ul class="stat-menu inline">
+                <li class="total-jobs">
+                  <span class="stat-label">Total Jobs</span>
+                  <span class="stat-count all-jobs-count">0</span>
+                </li>
+                <li class="total-jobs">
+                  <span class="stat-label">Failed Jobs</span>
+                  <span class="stat-count failed-jobs-count"
+                       data-rv-text="jobs:errCount < .lastRunStatus">0</span>
+                </li>
+              </ul>
+            </div>
           </div>
-
-          <div class="menu-footer text-center" id="btn-bg">
-            <button class="btn btn-bg btn-bg-tranquility"
-              data-theme="tranquility"
-              id="btn-bg-tranquility"
-              title="Tranquility"></button>
-            <button class="btn btn-bg btn-bg-prowess"
-              data-theme="prowess"
-              id="btn-bg-prowess"
-              title="Prowess"></button>
-            <button class="btn btn-bg btn-bg-serenity"
-              data-theme="serenity"
-              id="btn-bg-serenity"
-              title="Serenity"></button>
+          <div class="row-fluid">
+            <div class="span5">
+              <div class="search-wrapper">
+                <form id="search-form">
+                  <i class="icon-search"></i>
+                  <input type="text" class="span12" id="search-filter" placeholder="Search job name or status">
+                </form>
+              </div>
+            </div>
+            <div class="span7 text-right">
+              <button class="btn clear-btn view-graph">
+                <i class="icon-retweet"></i> Graph
+              </button>
+              <a class="btn clear-btn" href="stats.html">
+                Statistics
+              </a>
+              <button class="btn clear-btn new-job">✚ New Job</button>
+            </div>
           </div>
-        </div>
-        <div class="span5 results">
           <div class="row-fluid results-header">
             <div class="span9 header-name">
               <span>Name</span>
@@ -75,7 +76,7 @@ <h1 id="logo">Chronos</h1>
               <span class="toggle up hide">▲</span>
             </div>
           </div>
-          <div class="row-fluid">
+          <div class="results">
             <ul class="joblist unstyled"></ul>
           </div>
         </div>

diff --git a/src/main/resources/assets/app/scripts/collections/results.js b/src/main/resources/assets/app/scripts/collections/results.js
@@ -1,16 +1,13 @@
 /**
  * Results Collection
- *
  */
 define([
-         'backbone',
-         'underscore',
-         'collections/base_jobs'
-       ], function(Backbone, _, JobsCollection) {
+  'collections/base_jobs'
+], function(JobsCollection) {
 
-  var ResultsCollection;
+  'use strict';
 
-  ResultsCollection = JobsCollection.extend({
+  var ResultsCollection = JobsCollection.extend({
     initialize: function() {
       this.listenTo(this, {
         change: this.update,
@@ -25,12 +22,10 @@ define([
     },
 
     updateErrorCount: function() {
-      var count = 0,
-          errors = this.where({'lastRunStatus': 'failure'});
+      var errors = this.where({'lastRunStatus': 'failure'});
 
       this.errorCount = errors.length;
     }
-
   });
 
   return ResultsCollection;

diff --git a/src/main/resources/assets/app/scripts/components/configured_rivets.js b/src/main/resources/assets/app/scripts/components/configured_rivets.js
@@ -1,7 +1,7 @@
 define([
   'backbone',
   'underscore',
-  'vendor/rivets'
+  'rivets'
 ], function(Backbone, _, rivets) {
 
   'use strict';

diff --git a/src/main/resources/assets/app/scripts/main.js b/src/main/resources/assets/app/scripts/main.js
@@ -9,12 +9,15 @@ require.config({
     'backbone/declarative'  : 'vendor/backbone.declarative',
     'backbone/validations'  : 'vendor/backbone.validations',
     'backbone/mousetrap'    : 'vendor/backbone.mousetrap',
-    'bootstrap/tooltip'     : 'vendor/bootstrap/js/bootstrap-tooltip',
     'bootstrap/alert'       : 'vendor/bootstrap/js/bootstrap-alert',
     'bootstrap/button'      : 'vendor/bootstrap/js/bootstrap-button',
+    'bootstrap/collapse'    : 'vendor/bootstrap/js/bootstrap-collapse',
     'bootstrap/dropdown'    : 'vendor/bootstrap/js/bootstrap-dropdown',
     'bootstrap/timepicker'  : 'vendor/bootstrap-timepicker/js/bootstrap-timepicker',
+    'bootstrap/tooltip'     : 'vendor/bootstrap/js/bootstrap-tooltip',
+    'bootstrap/transition'  : 'vendor/bootstrap/js/bootstrap-transition',
     'd3'                    : 'vendor/d3.v3',
+    'rivets'                : 'vendor/rivets-0.5.13',
     'underscore'            : 'vendor/lodash',
     'moment'                : 'vendor/moment.min',
     'backpack'              : 'vendor/backpack',

diff --git a/src/main/resources/assets/app/scripts/routers/application.js b/src/main/resources/assets/app/scripts/routers/application.js
@@ -49,6 +49,11 @@ function($,
 
       window.app.lightbox = new GraphboxView();
       window.app.resultsCollection.trigger('reset');
+
+      window.app.jobsCollectionView.$el.tooltip({
+        container: window.app.applicationView.$el,
+        selector: '[data-toggle="tooltip"]'
+      });
     },
 
     navigateJob: function(jobName) {

diff --git a/src/main/resources/assets/app/scripts/styles/buttons.less b/src/main/resources/assets/app/scripts/styles/buttons.less
@@ -1,13 +1,13 @@
 .btn-bg {
   background: black;
   border: none;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-  height: 10px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  height: 8px;
   padding: 0;
   -webkit-transition: background-color 0.25s;
   transition: background-color 0.25s;
-  width: 10px;
+  width: 8px;
 }
 
 .btn-bg + .btn-bg {
@@ -32,3 +32,8 @@
 .btn-bg-serenity:hover {
   background-color: #025E75;
 }
+
+.btn-bg-group {
+  line-height: 34px;
+  margin-left: 10px;
+}
diff --git a/src/main/resources/assets/app/scripts/styles/chronos.less b/src/main/resources/assets/app/scripts/styles/chronos.less
@@ -46,10 +46,6 @@ html > body .tooltip,
   display: none;
 }
 
-.stat-count {
-  font-family: @russoFontFamily;
-}
-
 #job-form label.radio input {
   width: auto;
 }