From faf1980b4cda2c5b9ad06ab564cc2bcf935ad714 Mon Sep 17 00:00:00 2001
From: Guilherme Fontenele <guilherme@fontenele.net>
Date: Fri, 30 Dec 2016 16:52:24 -0200
Subject: [PATCH] Container info colors etc

---
 app.html  | 30 ++++++++++++++++++++++++------
 js/app.js | 27 +++++++++++++++++++++++----
 2 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/app.html b/app.html
index 86f53d9..feda348 100644
--- a/app.html
+++ b/app.html
@@ -92,6 +92,10 @@
         .table-without-margin-bottom {
             margin-bottom: 0;
         }
+
+        .modal-lg {
+            width: 96%;
+        }
         
         /*#terminal-bar {*/
             /*position: fixed;*/
@@ -388,12 +392,26 @@ <h4 class="modal-title">Server info</h4>
                     <h4 class="modal-title"><span class="container-name"></span> <span class="label status-info label-right" style="margin-right: 10px"></span></h4>
                 </div>
                 <div class="modal-body">
-                    <table class="tb-container-info table table-bordered table-condensed table-hover table-striped table-without-margin-bottom">
-                        <tbody></tbody>
-                    </table>
-                    <table class="tb-container-top table table-bordered table-condensed table-hover table-striped table-without-margin-bottom" style="display: none;">
-                        <tbody></tbody>
-                    </table>
+                    <div class="panel panel-default">
+                        <div class="panel-heading">Info</div>
+                        <table class="tb-container-info table table-bordered table-condensed table-hover table-striped table-without-margin-bottom">
+                            <tbody></tbody>
+                        </table>
+                    </div>
+                    <div class="panel panel-default">
+                        <div class="panel-heading">Stats</div>
+                        <table class="tb-container-stats table table-bordered table-condensed table-hover table-striped table-without-margin-bottom" style="display: none;">
+                            <thead></thead>
+                            <tbody></tbody>
+                        </table>
+                    </div>
+                    <div class="panel panel-default">
+                        <div class="panel-heading">Top</div>
+                        <table class="tb-container-top table table-bordered table-condensed table-hover table-striped table-without-margin-bottom" style="display: none;">
+                            <thead></thead>
+                            <tbody></tbody>
+                        </table>
+                    </div>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
diff --git a/js/app.js b/js/app.js
index 40cc59c..e7225b7 100644
--- a/js/app.js
+++ b/js/app.js
@@ -672,8 +672,23 @@ $(document).ready(function() {
                             $.post('/container-stats',{'containerId':containerId}, function(dataStats, textStatus, event) {
                                 wdtLoading.done();
                                 $('#modal-container-info .modal-body table.tb-container-top').show();
-                                var html = '<tr><td width="130">Image</td><td>teste</td></tr>';
+                                var html = '';
+                                for(var i in dataTop.result.Processes) {
+                                    var item = dataTop.result.Processes[i];
+                                    html+= '<tr>';
+                                    for(var j in item) {
+                                        html+= '<td>' + item[j] + '</td>';
+                                    }
+                                    html+= '</tr>';
+                                }
                                 $('#modal-container-info .modal-body table.tb-container-top tbody').html(html);
+                                var html = '<tr>';
+                                for(var i in dataTop.result.Titles) {
+                                    var item = dataTop.result.Titles[i];
+                                    html+= '<th>' + item + '</th>';
+                                }
+                                html+= '</tr>';
+                                $('#modal-container-info .modal-body table.tb-container-top thead').html(html);
                                 console.log('topp', dataTop);
                                 console.log('stats', dataStats);
                                 // @TODO STATS
@@ -700,7 +715,7 @@ $(document).ready(function() {
                     .removeClass('bg-success')
                     .addClass(statusBgClass);
 
-                $('#modal-container-info .container-name').html(data.result.Name.substr(1));
+                $('#modal-container-info .container-name').html(data.result.Name.substr(1) + ' - Info');
 
                 var html = '<tr><td width="130">Image</td><td>' + data.result.Config.Image + '</td></tr>';
                 html+= '<tr><td>Name</td><td>' + data.result.Name.substr(1) + '</td></tr>';
@@ -746,28 +761,32 @@ $(document).ready(function() {
 
                 $('#modal-container-log .modal-body table tbody').html('');
                 var name = $(that).parents('.container-item').find('.container-name').text();
-                $('#modal-container-log .container-name').text(name);
+                $('#modal-container-log .container-name').text(name + ' - Logs');
 
                 var html = '';
                 for(var i in data.result) {
                     var item = data.result[i];
                     var statusString = '';
                     var statusClass = '';
+                    var statusBgClass = '';
                     switch(item.Kind) {
                         case 0:
                             statusString = 'Modified';
                             statusClass = 'label-warning';
+                            statusBgClass = 'warning';
                             break;
                         case 1:
                             statusString = 'Added';
                             statusClass = 'label-success';
+                            statusBgClass = 'success';
                             break;
                         case 2:
                             statusString = 'Deleted';
                             statusClass = 'label-danger';
+                            statusBgClass = 'danger';
                             break;
                     }
-                    html+= '<tr><td>' + item.Path + '<span class="label label-right ' + statusClass + '">' + statusString + '</span></td></tr>';
+                    html+= '<tr class="' + statusBgClass + '"><td>' + item.Path + '<span class="label label-right ' + statusClass + '">' + statusString + '</span></td></tr>';
                 }
 
                 $('#modal-container-log .modal-body table tbody').html(html);