Fixed search highlighting bug. Some minor UI changes as well.

Jahaja · Sep 23, 2014 · cd87afc · cd87afc
1 parent d72f2cc
commit cd87afc
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 33 deletions.
diff --git a/psdash/static/css/psdash.css b/psdash/static/css/psdash.css
@@ -174,7 +174,7 @@ a:hover {
 }
 
 #dashboard div.box.swap {
-    min-width: 300px;
+    min-width: 350px;
 }
 
 #dashboard div.box.memory {

diff --git a/psdash/static/js/psdash.js b/psdash/static/js/psdash.js
@@ -75,15 +75,21 @@ function init_log() {
             if(resp.position == -1) {
                 $status.text("EOF Reached.");
             } else {
+                // split up the content on found pos.
+                var content_before = resp.content.slice(0, resp.buffer_pos);
+                var content_after = resp.content.slice(resp.buffer_pos + params["text"].length);
+
+                // escape html in log content
                 resp.content = $('<div/>').text(resp.content).html();
+
+                // highlight matches
                 var matched_text = '<span class="matching-text">' + params['text'] + '</span>';
                 var found_text = '<span class="found-text">' + params["text"] + '</span>';
-                var content_before = resp.content.slice(0, resp.buffer_pos);
-                var content_after = resp.content.slice(resp.buffer_pos + params["text"].length);
                 content_before = replace_all(params["text"], matched_text, content_before);
                 content_after = replace_all(params["text"], matched_text, content_after);
                 resp.content = content_before + found_text + content_after;
                 $el.html(resp.content);
+
                 $status.text("Position " + resp.position + " of " + resp.filesize + ".");
             }
 

diff --git a/psdash/templates/disks.html b/psdash/templates/disks.html
@@ -6,7 +6,7 @@
                 <span>Disks</span>
             </div>
             <div class="box-content">
-                <table id="processes" class="table">
+                <table id="processes" class="table table-condensed">
                     <thead>
                         <tr>
                             <th>Device</th>

diff --git a/psdash/templates/index.html b/psdash/templates/index.html
@@ -63,35 +63,6 @@
                 </table>
             </div>
         </div>
-        <div class="box swap">
-            <div class="box-header">
-                <span>Swap</span>
-            </div>
-            <div class="box-content">
-                <table class="table">
-                    <tr>
-                        <td class="label-col">Total</td>
-                        <td class="total">{{ swap.total|filesizeformat }}</td>
-                    </tr>
-                    <tr>
-                        <td class="label-col">Used</td>
-                        <td class="used">{{ swap.used|filesizeformat }} ({{ swap.percent }} %)</td>
-                    </tr>
-                    <tr>
-                        <td class="label-col">Free</td>
-                        <td class="free">{{ swap.free|filesizeformat }}</td>
-                    </tr>
-                    <tr>
-                        <td class="label-col">Swapped in</td>
-                        <td class="swapped-in">{{ swap.swapped_in|filesizeformat }}</td>
-                    </tr>
-                    <tr>
-                        <td class="label-col">Swapped out</td>
-                        <td class="swapped-out">{{ swap.swapped_out|filesizeformat }}</td>
-                    </tr>
-                </table>
-            </div>
-        </div>
         <div class="box network">
             <div class="box-header">
                 <span>Network</span>
@@ -148,6 +119,35 @@
                 </table>
             </div>
         </div>
+        <div class="box swap">
+            <div class="box-header">
+                <span>Swap</span>
+            </div>
+            <div class="box-content">
+                <table class="table">
+                    <tr>
+                        <td class="label-col">Total</td>
+                        <td class="total">{{ swap.total|filesizeformat }}</td>
+                    </tr>
+                    <tr>
+                        <td class="label-col">Used</td>
+                        <td class="used">{{ swap.used|filesizeformat }} ({{ swap.percent }} %)</td>
+                    </tr>
+                    <tr>
+                        <td class="label-col">Free</td>
+                        <td class="free">{{ swap.free|filesizeformat }}</td>
+                    </tr>
+                    <tr>
+                        <td class="label-col">Swapped in</td>
+                        <td class="swapped-in">{{ swap.swapped_in|filesizeformat }}</td>
+                    </tr>
+                    <tr>
+                        <td class="label-col">Swapped out</td>
+                        <td class="swapped-out">{{ swap.swapped_out|filesizeformat }}</td>
+                    </tr>
+                </table>
+            </div>
+        </div>
         <div class="box users">
             <div class="box-header">
                 <span>Users</span>