[Front] Implémentation de restart/stop et ré-implémentation de info

FGRibreau · Nov 22, 2011 · ae73188 · ae73188
1 parent 4f0cf36
commit ae73188
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 61 deletions.
diff --git a/public/appjs/ProcessView.js b/public/appjs/ProcessView.js
@@ -6,6 +6,8 @@ App.ProcessView = Backbone.View.extend({
   // Cache the template
   tmpl: $('#process-tmpl').html(),
 
+  tmplInfo: $('#tplInfo'),
+
 
   // DOM Event specific to an item
   events: {
@@ -25,19 +27,101 @@ App.ProcessView = Backbone.View.extend({
     return this;
   },
 
-  info: function(){
-    this.model.info();
+  info: function(e){
+    if(e){
+      e.preventDefault()
+    }
+
+    var $row = $(this.el);
+
+    $row.addClass('load');
+
+    // Get process info
+    this.model.info(function(infos){
+
+      // Show process info
+      this._showInfo($row, infos);
+
+      $row.removeClass('load');
+
+    }.bind(this));
   },
 
-  restart: function(){
-    this.model.restart();
+  restart: function(e){
+    if(e){
+      e.preventDefault()
+    }
+
+    var $row = $(this.el);
+
+    $row.addClass('load');
+
+    this.model.restart(function(result){
+      $row.removeClass('load');
+      _.delay(this.model.collection.fetch.bind(this.model.collection), 1000);
+    }.bind(this));
   },
 
-  stop: function(){
-    this.model.stop();
+  stop: function(e){
+    if(e){
+      e.preventDefault()
+    }
+
+    var $row = $(this.el);
+
+    $row.addClass('load');
+
+    this.model.stop(function(result){
+      $row.removeClass('load');
+      _.delay(this.model.collection.fetch.bind(this.model.collection), 1000);
+    }.bind(this));
+
   },
 
   remove: function(){
     $(this.el).remove();
+  },
+
+  // Helpers
+
+  _formatInfo: function(results){
+
+    if(results.status == 'error'){
+      return $('<strong>'+results.details+'</strong>');
+    }
+
+    var $div = $('<div/>');
+
+    results.details.forEach(function(log){
+      $div.append(log[0]);
+      $div.append('<pre class="prettyprint">'+log[1]+'</pre>');
+    });
+
+    return $div;
+  },
+
+  _showInfo: function($row, results){
+    // Add
+    var $next = $row.next();
+
+    if($next.length == 0 || $next.is('.row')){
+      $next = this.tmplInfo
+        .clone()
+        .removeClass('hidden')
+        .insertAfter($row)
+        .alert();
+    }
+
+    if(results.status == 'error'){
+      $next.removeClass('info').addClass('error');
+    }
+
+    $next
+      .find('.alert-message-content')
+        .html(this._formatInfo(results))
+        .find('pre')
+          .each(function(){
+            this.scrollTop=900000;
+          });
   }
 });
diff --git a/public/img/load.gif b/public/img/load.gif
diff --git a/views/index.ejs b/views/index.ejs
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Forever Web UI</title>
+  <title>Forever Web UI v</title>
 
   <link rel="stylesheet" href="/css/bootstrap.1.4.0.min.css" />
 
@@ -10,73 +10,57 @@
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
 
-  <style type="text/css">
-    body {
-      padding-top: 10px;
-    }
-
-
-    pre {
-      max-height:200px;
-      overflow:auto;
-    }
-
-    .hidden{display:none}
-    .span5{text-align:right;}
-
-    .hero-unit{position:relative;}
-  </style>
+  <link rel="stylesheet" href="/css/style.css" /> 
 </head>
 <body>
 
   <div class="container">
-      <!-- Main hero unit for a primary marketing message or call to action -->
-      <div class="hero-unit">
-        <h1>Forever Web UI</h1>
-        <p>A simple web ui for efficient node administration</p>
-
-        <div style="position:absolute;bottom:10px;right:10px">
-          <span href="#" class="btn refresh">Refresh list</span>
-        </div>
+    <!-- Main hero unit for a primary marketing message or call to action -->
+    <div class="hero-unit">
+      <h1>Forever Web UI <small>beta</small></h1>
+      <p>Simple web UI for efficient nodejs administration</p>
+
+      <div class="menubar left">Process count <span id="process-count">0</span></div>
+      <div class="menubar right">
+        <span href="#" class="btn refresh">Refresh list</span>
       </div>
+    </div>
+
+    <div id="process-list">
+
+    </div>
 
-      <p>Process count <span id="process-count">0</span></p>
-
-      <div id="process-list">
-
-      </div>
-
-
-      <footer>
-        <p>Forever Web UI v0.1 - by @FGRibreau</p>
-      </footer>
-
-    </div> <!-- /container -->
+    <footer>
+      <p>Forever Web UI v<span id="app-version"></span> - by <a href="http://twitter.com/FGRibreau">@FGRibreau</a></p>
+    </footer>
 
+  </div> <!-- /container -->
 
-    <div id="tplInfo" class="alert-message block-message info hidden">
-      <a class="close" href="#">×</a>
-      <div class="alert-message-content"></div>
-    </div>
 
 
-    <script id="process-tmpl" type="text/html">
-        <div class="span11">
-          <h2>
-            {{file}}
-          </h2>
-        </div>
+  <div id="tplInfo" class="alert-message block-message info hidden">
+    <a class="close" href="#">×</a>
+    <div class="alert-message-content"></div>
+  </div>
 
-        <div class="span5">
-          <a class="btn info" href="/info/{{pid}}">Info</a>
-          <a class="btn primary restart" href="/restart/{{pid}}">Restart</a>
-          <a class="btn danger stop" href="/stop/{{pid}}">Stop</a>
-        </div>
-    </script>
+  <script id="process-tmpl" type="text/html">
+      <div class="span11">
+        <h2>
+          {{file}}
+          <small>{{time}}</small>
+        </h2>
+      </div>
 
+      <div class="span5">
+        <a class="btn info" href="/info/{{uid}}">Info</a>
+        <a class="btn primary restart" href="/restart/{{uid}}">Restart</a>
+        <a class="btn danger stop" href="/stop/{{uid}}">Stop</a>
+      </div>
+  </script>
 
 <!-- Backbone dependencies -->
 <script src="/js/jquery.1.7.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="/js/pretty.js" type="text/javascript" charset="utf-8"></script>
 <script src="/js/underscore.1.2.2.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="/js/backbone.0.5.3.dev.js" type="text/javascript" charset="utf-8"></script>
 
@@ -85,13 +69,13 @@
 <!-- Template lib -->
 <script src="/js/mustache.js" type="text/javascript" charset="utf-8"></script>
 
+<!-- App -->
 <script type="text/javascript" charset="utf-8">
-  var App = {};
+  var App = {version: "0.1.0"};
 </script>
 <script src="/appjs/Process.js" type="text/javascript" charset="utf-8"></script>
 <script src="/appjs/ProcessView.js" type="text/javascript" charset="utf-8"></script>
 <script src="/appjs/ProcessList.js" type="text/javascript" charset="utf-8"></script>
-<script src="/appjs/ProcessListView.js" type="text/javascript" charset="utf-8"></script>
 <script src="/appjs/AppView.js" type="text/javascript" charset="utf-8"></script>
 
 <script type="text/javascript" charset="utf-8">