Merge pull request mesos#2 from mesosphere/ui-changes

UI Changes and Improvements
egoOyiri · Nov 27, 2013 · ada7538 · ada7538
2 parents 02a060d + bd33731
commit ada7538
Show file tree

Hide file tree

Showing 53 changed files with 1,097 additions and 15,049 deletions.
diff --git a/src/main/resources/assets/.jshintrc b/src/main/resources/assets/.jshintrc
@@ -1,18 +1,20 @@
 {
     "node": true,
     "browser": true,
-    "es5": true,
-    "esnext": true,
+    "eqnull": true,
     "bitwise": true,
     "camelcase": true,
     "curly": true,
     "eqeqeq": true,
+    "globals": {
+        "define": false,
+        "require": false
+    },
     "immed": true,
-    "indent": 4,
+    "indent": 2,
     "latedef": true,
     "newcap": true,
     "noarg": true,
-    "quotmark": "single",
     "regexp": true,
     "undef": true,
     "unused": true,

diff --git a/src/main/resources/assets/app.build.js b/src/main/resources/assets/app.build.js
@@ -13,13 +13,6 @@
     ],
     findNestedDependencies: true,
     optimize: "uglify",
-    closure: {
-      CompilerOptions: {
-      },
-      charset: 'UTF-8',
-      CompilationLevel: 'SIMPLE_OPTIMIZATIONS',
-      loggingLevel: 'SEVERE'
-    },
     fileExclusionRegExp: /^\.|spec|tests/,
     optimizeCss: "standard.keepLines",
     generateSourceMaps: false,
@@ -36,13 +29,7 @@
         ]
       },
       {
-        name: "styles",
-        include: [
-          "fonts"
-        ]
-      },
-      {
-        name: "fonts"
+        name: "styles"
       }
     ]
 })
diff --git a/src/main/resources/assets/app/index.html b/src/main/resources/assets/app/index.html
@@ -1,41 +1,89 @@
 <!DOCTYPE html>
-<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
   <head>
-    <meta charset="utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>Chronos</title>
-    <meta name="description" content=""/>
-    <meta name="viewport" content="width=device-width"/>
+    <meta name="viewport" content="width=device-width">
   </head>
 
   <body class="chronos">
-    <div class="chronos-wrapper blue">
+    <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>
 
-        <div class="span2 menu" id="main-menu"></div>
+          <ul class="nav nav-list stat-menu">
+            <li class="no-select total-jobs">
+              <div class="stat-count all-jobs-count"
+                   data-rv-text="jobs.length">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 class="span5 results">
-          <div class="row-fluid results-header no-select"></div>
+          <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>
 
+          <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>
+        </div>
+        <div class="span5 results">
+          <div class="row-fluid results-header">
+            <div class="span9 header-name">
+              <span>Name</span>
+              <span class="toggle down">▼</span>
+              <span class="toggle up hide">▲</span>
+            </div>
+            <div class="span3 header-last-run">
+              <span>Last</span>
+              <span class="toggle down">▼</span>
+              <span class="toggle up hide">▲</span>
+            </div>
+          </div>
           <div class="row-fluid">
-            <ul class="joblist"></ul>
+            <ul class="joblist unstyled"></ul>
           </div>
         </div>
-
         <div class="span5 right-pane"></div>
-
       </div>
     </div>
 
-    <!--[if lt IE 7]>
-        <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
-    <![endif]-->
-
     <script data-main="scripts/main.js" src="scripts/require.js"></script>
   </body>
 </html>
diff --git a/src/main/resources/assets/app/scripts/collections/details.js b/src/main/resources/assets/app/scripts/collections/details.js
@@ -1,24 +1,17 @@
 /**
  * Details Collection
- *
  */
 define([
-  'jquery',
-  'backbone',
   'underscore',
   'collections/base_jobs',
   'components/functor'
-], function($,
-            Backbone,
-            _,
+], function(_,
             JobsCollection,
             Functor) {
 
-  var DetailsCollection;
+  'use strict';
 
-  var slice = Array.prototype.slice;
-
-  DetailsCollection = JobsCollection.extend({
+  var DetailsCollection = JobsCollection.extend({
 
     initialize: function() {
       this.listenTo(this, {
@@ -71,19 +64,17 @@ define([
         }).value();
         path = base.concat(names).join('/');
       } else {
-        path = '/'
+        path = '/';
       }
 
-      console.log('details serialize', path);
-
       // TODO: hack to fix jobs/:jobName////////////// infinite redirect
-      if (path.slice(-1) == '-') {
+      if (path.slice(-1) === '-') {
         return false;
       }
 
-      app.router.navigate(path, {trigger: true});
+      app.router.navigate(path);
     }
   });
 
   return DetailsCollection;
-})
+});
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,9 +1,10 @@
 define([
-  'jquery',
   'backbone',
   'underscore',
-  'cs!vendor/rivets'
-], function($, Backbone, _, rivets) {
+  'vendor/rivets'
+], function(Backbone, _, rivets) {
+
+  'use strict';
 
   var collectionEvents = 'add remove reset';
 
@@ -20,37 +21,34 @@ define([
           obj.on(collectionEvents, callback).
             on('change:' + keypath, callback);
         } else {
-          obj.on('change:' + keypath, callback)
+          obj.on('change:' + keypath, callback);
         }
       },
       unsubscribe: function(obj, keypath, callback) {
         if (isColl(obj)) {
           obj.off(collectionEvents, callback).
             off('change:' + keypath, callback);
         } else {
-          obj.off('change:' + keypath, callback)
+          obj.off('change:' + keypath, callback);
         }
       },
       read: function(obj, keypath) {
         if (isColl(obj)) {
           return obj[keypath] || obj;
         } else {
           return obj.get(keypath);
-        };
+        }
       },
       publish: function(obj, keypath, value) {
         if (isColl(obj)) {
           obj[keypath] = value;
         } else {
           obj.set(keypath, value);
-        };
+        }
       }
     }
   });
 
-  _.extend(rivets.binders, {
-  });
-
   _.extend(rivets.formatters, {
 
     boolEnabled: function(val) {
@@ -65,19 +63,6 @@ define([
       return !val;
     },
 
-    lastRunDescr: {
-      read: function(val) {
-        if (!!val.lastRunError) {
-          return 'Last run @ ' + val.lastRunTime + ' was successful.';
-        } else if (!!val.lastRunSuccess) {
-          return 'Last run @ ' + val.lastRunTime + ' failed.';
-        } else {
-          return 'Job has not run yet.';
-        }
-      },
-      publish: false
-    },
-
     eq: function(val, comparisonVal) {
       return val === comparisonVal;
     },

diff --git a/src/main/resources/assets/app/scripts/components/functor.js b/src/main/resources/assets/app/scripts/components/functor.js
@@ -1,5 +1,7 @@
 define([], function() {
-  function Functor(v) { return (function() { return v; }); }
+  'use strict';
+
+  function Functor(v) { return function() { return v; }; }
 
   return Functor;
 });
diff --git a/src/main/resources/assets/app/scripts/components/parent_view.js b/src/main/resources/assets/app/scripts/components/parent_view.js
@@ -1,7 +1,8 @@
 define([
+  'jquery',
   'underscore'
 ],
-function(_) {
+function($, _) {
   'use strict';
 
   var namespace = "_childViews",
@@ -28,7 +29,7 @@ function(_) {
     }
   }
 
-  function ResolveView(view) {
+  function resolveView(view) {
     if (_.isString(view)) {
       return require(view);
     } else if (_.isFunction(view)) {
@@ -43,11 +44,11 @@ function(_) {
         viewOpts  = (options && options.viewOptions),
         view  = views[model.cid],
         viewClassName = get(this, 'viewClassName'),
-        viewClass;
+        ViewClass;
 
     if (!view) {
-      viewClass = ResolveView(viewClassName);
-      view = new viewClass({
+      ViewClass = resolveView(viewClassName);
+      view = new ViewClass({
         model: model,
         options: viewOpts || {}
       });
@@ -150,8 +151,7 @@ function(_) {
     },
 
     _childrenSorted: function(collection, options) {
-      var parentView = this,
-          $container = this.$childViewContainer(),
+      var $container = this.$childViewContainer(),
           views = get(this, 'views'),
           view;
 
@@ -165,13 +165,28 @@ function(_) {
     },
 
     _renderChildViews: function(collection) {
-      var parentView = this,
-          view;
+      var _this = this;
 
       this.trigger('parentView:beforeRenderChildren');
 
+      // Collect child HTML into a single Array of strings. Rendering to DOM
+      // elements too early is expensive with a large number of elements.
+      var childrenStrings = new Array(collection.length);
       collection.each(function(model) {
-        parentView._childAdded(model, collection, {});
+        var view = AddOne.call(_this, model, collection);
+        childrenStrings.push(view.toHTML());
+      });
+
+      // Render big children String to the DOM.
+      this.$childViewContainer().html(childrenStrings.join(''));
+
+      // Iterate over new DOM elements and give their associated views
+      // references to them so Rivets can take over updates from here.
+      this.$childViewContainer().find('[data-cid]').each(function(index, element) {
+        var $el = $(element);
+        var view = get(_this, 'views')[$el.data('cid')];
+
+        view.setElement(element);
       });
 
       this.trigger('parentView:afterRenderChildren');

diff --git a/src/main/resources/assets/app/scripts/components/tooltip_view.js b/src/main/resources/assets/app/scripts/components/tooltip_view.js
@@ -19,14 +19,14 @@ function(_) {
   }
 
   var InstanceMethods = {
-    addTooltips: function() {
+    addTooltips: function(eventName) {
       if (get(this, 'tooltipsObserved')) { return; }
       set(this, 'tooltipsObserved', true);
 
-      this.listenTo(this, {
-        render: function() {
-          this.$('[data-toggle="tooltip"]').tooltip();
-        }
+      eventName = eventName || 'render';
+
+      this.listenTo(this, eventName, function() {
+        this.$('[data-toggle="tooltip"]').tooltip();
       });
     }
   };