Re-UI Snapshots page

public/assets/js/glass-pages/dhcp-config-snapshots.js

@@ -1,13 +1,16 @@
 function view_snapshot(snapshot) {
 	$.post( "/dhcp_config_snapshot_view", "snapshot=" + encodeURIComponent(snapshot), function( data ) {
 
-		$('#modal-title').html("Snapshot '" + snapshot + "'");
-		$('#modal-body').html('<div id="snapshot" style="width:100%; height:800px; color: #95cd24">' + data + '</div>');
+		$('#snapshot_grid').fadeOut(100).fadeIn(100);
+		$('#snapshot_name').html("Snapshot '" + snapshot + "'");
+		$('#snapshot_body').html('<div id="snapshot" style="width:100%; height:800px; color: #95cd24">' + data + '</div>');
+
+        $('html, body').animate({
+            scrollTop: $("#snapshot_grid").offset().top
+        }, 500);
 
 		config_snapshot = ace.edit("snapshot");
 		config_snapshot.setTheme("ace/theme/terminal");
 		config_snapshot.$blockScrolling = Infinity;
-
-		$('#mdModal').modal('show');
 	});
 }

public/templates/dhcp_config_snapshots.html

@@ -7,8 +7,30 @@
                 </h2>
             </div>
             <div class="body">
-                [c_content]
-                <div id="dhcp_config_snapshot_result"></div>
+
+                <table id="dhcp_config_snapshot_result" class="table table-bordered table-striped table-hover js-basic-example dataTable dashboard-task-infos">
+                    <thead>
+                    <tr>
+                        <th style="width:300px">File</th>
+                        <th>Time</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    [c_content]
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="display:none" id="snapshot_grid">
+        <div class="card">
+            <div class="header">
+                <h2>
+                    Snapshot <span id="snapshot_name"></span>
+                </h2>
+            </div>
+            <div class="body">
+                <div id="snapshot_body"></div>
             </div>
         </div>
     </div>
@@ -18,3 +40,12 @@
 <script src="assets/js/ace_editor/theme-terminal.js" type="text/javascript" charset="utf-8"></script>
 <script src="assets/js/glass-pages/dhcp-config-snapshots.js" type="text/javascript" charset="utf-8"></script>
 
+<script type="text/javascript">
+    $('#dhcp_config_snapshot_result').DataTable({
+        dom: 'tip',
+        responsive: true,
+        "pageLength": 10,
+        "aaSorting": [],
+        "order": [[ 1, "desc" ]]
+    });
+</script>

routes/dhcp_config_snapshots.js

@@ -4,6 +4,30 @@ var fs = require('fs');
 var template_render = require('../lib/render_template.js');
 var authorize = require('../lib/authorize.js');
 
+function human_time (time){
+    var time = new Date(time);
+    var year = time.getFullYear();
+    var month = time.getMonth()+1;
+    var date1 = time.getDate();
+    var hour = time.getHours();
+    var minutes = time.getMinutes();
+    var seconds = time.getSeconds();
+
+    var hour = time.getHours();
+    var minute = time.getMinutes();
+    var amPM = (hour > 11) ? "PM" : "AM";
+    if(hour > 12) {
+        hour -= 12;
+    } else if(hour == 0) {
+        hour = "12";
+    }
+    if(minute < 10) {
+        minute = "0" + minute;
+    }
+
+    return year + "-" + month+"-"+date1+" "+hour + ":" + minute + ' ' + amPM;
+}
+
 router.get('/', authorize.auth, function(req, res, next) {
 
 	var content = "";
@@ -18,7 +42,10 @@ router.get('/', authorize.auth, function(req, res, next) {
 
 	var backups = '';
 	fs.readdirSync("./config_backups").forEach(function(file) {
-		backups = backups + "<li><a onclick='view_snapshot(" + JSON.stringify(file) + ")'>" + file + '</a></li>';
+        var stats = fs.statSync("./config_backups/" + file);
+        var mtime = human_time(stats.mtime);
+
+		backups = backups + "<tr><td><a style='cursor:pointer;' onclick='view_snapshot(" + JSON.stringify(file) + ")'>" + file + '</a></td><td>' + mtime + '</td></tr>';
 	});
 
 	if(backups == ''){