fix: improve containers page command column display

- Truncate long commands with ellipsis, click to show full command in modal
- Sort containers by state: running first, then created, then exited

Author: qfdk

public/css/modern-style.css

@@ -197,6 +197,15 @@ footer strong {
     border-radius: 3px;
 }
 
+/* Command Cell Truncation */
+.command-cell {
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
 /* Container Stats */
 .container-stats {
     font-family: 'Courier New', monospace;

routes/containers.js

@@ -11,6 +11,8 @@ const returnContainersRouter = (io) => {
             res.locals.formatName = (str) => {
                 return str[0].split('/')[1];
             };
+            const stateOrder = {running: 0, created: 1, exited: 2};
+            containers.sort((a, b) => (stateOrder[a.State] ?? 3) - (stateOrder[b.State] ?? 3));
             docker.listImages(null, (err, listImages) => {
                 res.render('containers',
                     {

views/containers.html

@@ -31,7 +31,7 @@
                     <tr>
                         <td class="text-break"><%= formatName(container.Names) %></td>
                         <td class="text-break"><%= container.Image %></td>
-                        <td class="text-break"><%= container.Command %></td>
+                        <td class="command-cell" data-toggle="modal" data-target="#commandModal" data-command="<%= container.Command %>"><%= container.Command %></td>
                         <td>
                             <% if(container.Ports && container.Ports[0]){ %>
                             [TCP] <%= container.Ports[0].PrivatePort %>
@@ -174,4 +174,29 @@ <h4 class="modal-title" id="myModalLabel">New container</h4>
         </div>
     </div>
 </div>
+<!-- Command Detail Modal -->
+<div class="modal fade" id="commandModal" tabindex="-1" role="dialog" aria-labelledby="commandModalLabel">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+                <h4 class="modal-title" id="commandModalLabel">Command</h4>
+            </div>
+            <div class="modal-body">
+                <pre id="commandContent" style="white-space: pre-wrap; word-break: break-all;"></pre>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
 <%- include('include/footer.html') %>
+<script>
+    $('#commandModal').on('show.bs.modal', function (e) {
+        var command = $(e.relatedTarget).data('command');
+        $('#commandContent').text(command);
+    });
+</script>