add additional info to docker js update

websiteFunctions/templates/websiteFunctions/DockerSiteHome.html

@@ -12,28 +12,10 @@
             padding: 20px;
         }
 
-        .alert {
-            border-radius: 0;
-            margin-bottom: 15px;
-            padding: 12px 15px;
-        }
-
-        .alert-info {
-            background-color: #f0f6ff;
-            border-color: #e5eeff;
-            color: #5c7cff;
-        }
-
-        .alert-warning {
-            background-color: #fff8e6;
-            border-color: #ffe5b2;
-            color: #b97900;
-        }
-
         .page-header {
-            margin: 0 0 20px;
+            margin-bottom: 30px;
-            padding-bottom: 15px;
             border-bottom: 1px solid #eee;
+            padding-bottom: 15px;
         }
 
         .page-header h2 {
@@ -42,320 +24,291 @@
             color: #333;
         }
 
-        .info-section {
+        .info-box {
             background: #fff;
-            border-radius: 4px;
+            border-radius: 8px;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
             margin-bottom: 20px;
+            border: 1px solid #e9ecef;
         }
 
-        .info-section .header {
+        .info-box-header {
             padding: 15px 20px;
-            border-bottom: 1px solid #eee;
+            border-bottom: 1px solid #e9ecef;
-            background: #fafafa;
+            background: #f8f9fa;
+            border-radius: 8px 8px 0 0;
         }
 
-        .info-section .header h3 {
+        .info-box-header h4 {
             margin: 0;
             font-size: 16px;
             font-weight: 600;
-            color: #333;
+            color: #495057;
         }
 
-        .info-section .content {
+        .info-box-content {
             padding: 20px;
         }
 
-        .info-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 20px;
-        }
-
-        .info-item {
-            background: #fff;
-            padding: 15px;
-            border-radius: 4px;
-            border: 1px solid #eee;
-        }
-
-        .info-item h4 {
-            margin: 0 0 15px;
-            color: #666;
-            font-size: 14px;
-            font-weight: 600;
-            text-transform: uppercase;
-        }
-
         .status-badge {
-            display: inline-block;
+            display: inline-flex;
-            padding: 4px 8px;
+            align-items: center;
-            border-radius: 12px;
+            padding: 6px 12px;
-            font-size: 12px;
+            border-radius: 50px;
+            font-size: 13px;
             font-weight: 500;
         }
 
-        .status-running {
+        .status-badge.running {
-            background: #e6fff0;
+            background-color: #e8f5e9;
-            color: #00b341;
+            color: #2e7d32;
         }
 
-        .status-stopped {
+        .status-badge.stopped {
-            background: #ffe6e6;
+            background-color: #ffebee;
-            color: #ff0000;
+            color: #c62828;
         }
 
-        .resource-bar {
+        .status-badge::before {
-            height: 6px;
+            content: '';
-            background: #eee;
+            display: inline-block;
-            border-radius: 3px;
+            width: 8px;
-            margin: 8px 0;
+            height: 8px;
-            overflow: hidden;
+            border-radius: 50%;
+            margin-right: 8px;
         }
 
-        .resource-bar .fill {
+        .status-badge.running::before {
-            height: 100%;
+            background-color: #2e7d32;
-            background: #2196F3;
+        }
-            border-radius: 3px;
+
+        .status-badge.stopped::before {
+            background-color: #c62828;
+        }
+
+        .resource-meter {
+            margin-bottom: 20px;
+        }
+
+        .resource-meter .label {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 8px;
+            color: #495057;
+            font-size: 13px;
+        }
+
+        .progress {
+            height: 8px;
+            border-radius: 4px;
+            background-color: #e9ecef;
+            margin-bottom: 5px;
+        }
+
+        .progress-bar {
+            border-radius: 4px;
             transition: width 0.3s ease;
         }
 
-        .resource-bar .fill.high {
+        .progress-bar-memory {
-            background: #ff4444;
+            background-color: #2196f3;
+        }
+
+        .progress-bar-cpu {
+            background-color: #4caf50;
         }
 
         .table {
             margin: 0;
         }
 
-        .table > thead > tr > th {
+        .table thead th {
-            background: #fafafa;
+            background: #f8f9fa;
-            border-bottom: 2px solid #eee;
+            border-bottom: 2px solid #dee2e6;
-            color: #666;
+            color: #495057;
             font-weight: 600;
             font-size: 13px;
-            padding: 12px 15px;
         }
 
-        .table > tbody > tr > td {
+        .table td {
-            padding: 12px 15px;
+            vertical-align: middle;
-            border-top: 1px solid #eee;
+            color: #495057;
-            color: #333;
             font-size: 13px;
+            border-color: #e9ecef;
         }
 
-        .table-striped > tbody > tr:nth-of-type(odd) {
+        .env-table td:first-child {
-            background-color: #fafafa;
+            font-family: monospace;
+            color: #2196f3;
+        }
+
+        .masked-value {
+            font-family: monospace;
+            color: #9e9e9e;
         }
 
         .logs-section {
+            margin-top: 30px;
+        }
+
+        .logs-content {
             background: #1e1e1e;
             color: #fff;
             padding: 15px;
             border-radius: 4px;
             font-family: monospace;
+            font-size: 12px;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+
+        .action-buttons {
             margin-top: 20px;
         }
 
-        .logs-section pre {
+        .btn {
-            margin: 0;
+            padding: 8px 16px;
-            white-space: pre-wrap;
+            border-radius: 4px;
-            word-wrap: break-word;
+            font-weight: 500;
-            color: #d4d4d4;
+            transition: all 0.2s;
-            font-size: 12px;
-            line-height: 1.5;
         }
 
-        .btn-action {
+        .btn-icon {
-            padding: 6px 12px;
-            border-radius: 4px;
-            font-size: 13px;
-            font-weight: 500;
             margin-right: 8px;
         }
 
-        .btn-recreate {
+        .refresh-button {
-            background: #ff9800;
+            background: none;
-            color: #fff;
             border: none;
+            color: #6c757d;
+            cursor: pointer;
+            padding: 5px;
+            margin-left: 10px;
+            transition: transform 0.2s;
         }
 
-        .btn-recreate:hover {
+        .refresh-button:hover {
-            background: #f57c00;
+            transform: rotate(180deg);
         }
 
-        /* Environment Variables Table */
-        .env-table td:first-child {
-            font-weight: 500;
-            color: #666;
-        }
-
-        .env-table td:last-child {
-            font-family: monospace;
-            background: #fafafa;
-        }
-
-        .masked-value {
-            color: #999;
-            font-style: italic;
-        }
-
-        /* Responsive Design */
         @media (max-width: 768px) {
-            .info-grid {
+            .info-box {
-                grid-template-columns: 1fr;
+                margin-bottom: 15px;
-            }
-
-            .info-section .content {
-                padding: 15px;
             }
             
             .table-responsive {
                 margin-bottom: 0;
-                border: none;
             }
         }
-
-        .container-name {
-            font-weight: 500;
-            color: #333;
-        }
-        .actions {
-            display: flex;
-            gap: 8px;
-        }
-        .btn-sm {
-            padding: 5px 10px;
-            font-size: 12px;
-        }
-        .btn-sm i {
-            margin-right: 4px;
-        }
-        .text-muted {
-            color: #666;
-            font-size: 13px;
-            margin-left: 8px;
-        }
-        .d-flex {
-            display: flex;
-        }
-        .justify-content-between {
-            justify-content: space-between;
-        }
-        .align-items-center {
-            align-items: center;
-        }
     </style>
 
+    <script>
+        $(document).ready(function () {
+            $('[data-toggle="tooltip"]').tooltip();
+        });
+    </script>
+
+
     <div class="container-fluid" ng-controller="ListDockersitecontainer">
-        <div class="alert alert-info">
-            {% trans "Looks like something is wrong with your initial setup, please double check on Setup Wizard." %}
-        </div>
-
-        <div class="alert alert-warning">
-            {% trans "Looks like your websites are not secured with automatic backups." %}
-            <a href="#" class="alert-link">Configure now</a>.
-        </div>
-
         <div class="page-header">
-            <h2>{% trans "CONTAINERS" %}</h2>
+            <h2>{% trans "Currently Managing:" %} {$ cName $}
-            <small>{% trans "Manage containers on server" %}</small>
+                <button class="refresh-button" ng-click="refreshStatus()">
+                    <i class="fas fa-sync-alt"></i>
+                </button>
+            </h2>
         </div>
 
-        <!-- Container List Section -->
+        <div class="row">
-        <div class="info-section" ng-show="conatinerview">
+            <div class="col-md-6">
-            <div class="header">
+                <div class="info-box">
-                <h3>{% trans "Available Containers" %}</h3>
+                    <div class="info-box-header">
-                <span style="display: none" id="sitename">{{ dockerSite.SiteName }}</span>
+                        <h4>{% trans "Basic Information" %}</h4>
                     </div>
-            <div class="content">
+                    <div class="info-box-content">
-                <div class="table-responsive">
+                        <p><strong>Container ID:</strong> {$ cid $}</p>
-                    <table class="table table-hover">
+                        <p>
+                            <strong>Status:</strong> 
+                            <span class="status-badge" ng-class="status">{$ status $}</span>
+                        </p>
+                        <p><strong>Created:</strong> {$ created | date:'medium' $}</p>
+                        <p><strong>Uptime:</strong> {$ uptime $}</p>
+                    </div>
+                </div>
+
+                <div class="info-box">
+                    <div class="info-box-header">
+                        <h4>{% trans "Resource Usage" %}</h4>
+                    </div>
+                    <div class="info-box-content">
+                        <div class="resource-meter">
+                            <div class="label">
+                                <span>Memory Usage</span>
+                                <span>{$ memoryUsagePercent | number:1 $}%</span>
+                            </div>
+                            <div class="progress">
+                                <div class="progress-bar progress-bar-memory" 
+                                     ng-style="{'width': memoryUsagePercent + '%'}" 
+                                     aria-valuemin="0" 
+                                     aria-valuemax="100">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="resource-meter">
+                            <div class="label">
+                                <span>CPU Usage</span>
+                                <span>{$ cpuUsagePercent | number:1 $}%</span>
+                            </div>
+                            <div class="progress">
+                                <div class="progress-bar progress-bar-cpu" 
+                                     ng-style="{'width': cpuUsagePercent + '%'}" 
+                                     aria-valuemin="0" 
+                                     aria-valuemax="100">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-md-6">
+                <div class="info-box">
+                    <div class="info-box-header">
+                        <h4>{% trans "Network & Ports" %}</h4>
+                    </div>
+                    <div class="info-box-content">
+                        <div class="table-responsive" ng-if="ports && (ports | objLength) > 0">
+                            <table class="table">
                                 <thead>
                                     <tr>
-                                <th>Name</th>
+                                        <th>Container Port</th>
-                                <th>Launch</th>
+                                        <th>Host Binding</th>
                                     </tr>
                                 </thead>
                                 <tbody>
-                            <tr ng-repeat="web in ContainerList track by $index">
+                                    <tr ng-repeat="(containerPort, hostBindings) in ports">
+                                        <td>{$ containerPort $}</td>
                                         <td>
-                                    <div class="container-name">{$ web.name $}</div>
+                                            <span ng-repeat="binding in hostBindings">
-                                </td>
+                                                {$ binding.HostIp || '0.0.0.0' $}:{$ binding.HostPort $}
-                                <td>
+                                            </span>
-                                    <button class="btn btn-primary btn-sm" ng-click="Lunchcontainer(web.id)">
-                                        <i class="fa fa-external-link"></i> Launch
-                                    </button>
                                         </td>
                                     </tr>
                                 </tbody>
                             </table>
                         </div>
-                <div id="listFail" class="alert alert-danger" style="display: none;">
+                        <p ng-if="!ports || (ports | objLength) === 0" class="text-muted">
-                    <p>{% trans "Error message:" %} {$ errorMessage $}</p>
+                            No ports exposed
-                </div>
-            </div>
-        </div>
-
-        <!-- Container Details Section -->
-        <div ng-hide="conatinerview">
-            <div class="info-section">
-                <div class="header">
-                    <div class="d-flex justify-content-between align-items-center">
-                        <h3>
-                            {% trans "Container:" %} {$ cName $}
-                            <small class="text-muted">ID: {$ cid $}</small>
-                        </h3>
-                        <div class="actions">
-                            <button class="btn btn-primary btn-sm" ng-click="refreshStatus()">
-                                <i class="fa fa-refresh"></i> Refresh
-                            </button>
-                            <button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#Recreatedockerapp">
-                                <i class="fa fa-recycle"></i> Recreate
-                            </button>
-                            <button class="btn btn-default btn-sm" ng-click="conatinerview = true">
-                                <i class="fa fa-arrow-left"></i> Back
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <div class="content">
-                    <div class="info-grid">
-                        <!-- Basic Information -->
-                        <div class="info-item">
-                            <h4>{% trans "Basic Information" %}</h4>
-                            <p><strong>Container ID:</strong> {$ cid $}</p>
-                            <p>
-                                <strong>Status:</strong> 
-                                <span class="status-badge" ng-class="{'status-running': status === 'running', 'status-stopped': status !== 'running'}">
-                                    {$ status $}
-                                </span>
                         </p>
-                            <p><strong>Created:</strong> {$ created | date:'medium' $}</p>
-                            <p><strong>Uptime:</strong> {$ uptime $}</p>
-                        </div>
-
-                        <!-- Resource Usage -->
-                        <div class="info-item">
-                            <h4>{% trans "Resource Usage" %}</h4>
-                            <p>Memory Usage</p>
-                            <div class="resource-bar">
-                                <div class="fill" ng-class="{'high': memoryUsagePercent > 80}" 
-                                     ng-style="{'width': memoryUsagePercent + '%'}"></div>
-                            </div>
-                            <p>CPU Usage</p>
-                            <div class="resource-bar">
-                                <div class="fill" ng-class="{'high': cpuUsagePercent > 80}" 
-                                     ng-style="{'width': cpuUsagePercent + '%'}"></div>
-                            </div>
                     </div>
                 </div>
 
-                    <!-- Volumes -->
+                <div class="info-box">
-                    <div class="info-item">
+                    <div class="info-box-header">
                         <h4>{% trans "Volumes" %}</h4>
-                        <div class="table-responsive" ng-if="volumes && volumes.length">
+                    </div>
-                            <table class="table table-striped">
+                    <div class="info-box-content">
+                        <div class="table-responsive" ng-if="volumes && volumes.length > 0">
+                            <table class="table">
                                 <thead>
                                     <tr>
                                         <th>Source</th>
@@ -372,14 +325,23 @@
                                 </tbody>
                             </table>
                         </div>
-                        <p ng-if="!volumes || !volumes.length" class="text-muted">No volumes mounted</p>
+                        <p ng-if="!volumes || volumes.length === 0" class="text-muted">
+                            No volumes mounted
+                        </p>
+                    </div>
+                </div>
+            </div>
         </div>
 
-                    <!-- Environment Variables -->
+        <div class="row">
-                    <div class="info-item">
+            <div class="col-md-12">
+                <div class="info-box">
+                    <div class="info-box-header">
                         <h4>{% trans "Environment Variables" %}</h4>
-                        <div class="table-responsive" ng-if="environment && environment.length">
+                    </div>
-                            <table class="table table-striped env-table">
+                    <div class="info-box-content">
+                        <div class="table-responsive" ng-if="environment && environment.length > 0">
+                            <table class="table env-table">
                                 <thead>
                                     <tr>
                                         <th>Variable</th>
@@ -394,12 +356,22 @@
                                 </tbody>
                             </table>
                         </div>
-                        <p ng-if="!environment || !environment.length" class="text-muted">No environment variables set</p>
+                        <p ng-if="!environment || environment.length === 0" class="text-muted">
+                            No environment variables set
+                        </p>
+                    </div>
+                </div>
+            </div>
         </div>
 
-                    <!-- Logs -->
+        <div class="row">
-                    <div class="logs-section">
+            <div class="col-md-12">
+                <div class="info-box logs-section">
+                    <div class="info-box-header">
                         <h4>{% trans "Container Logs" %}</h4>
+                    </div>
+                    <div class="info-box-content">
+                        <div class="logs-content">
                             <pre ng-bind="logs"></pre>
                         </div>
                     </div>
@@ -407,8 +379,22 @@
             </div>
         </div>
 
-    <script>
+        <div class="action-buttons">
-        $(document).ready(function() {
+            <button ng-disabled="status=='running'" class="btn btn-success" ng-click="cAction('start')">
-            $('[data-toggle="tooltip"]').tooltip();
+                <i class="fas fa-play btn-icon"></i> Start
-        });
+            </button>
-    </script>
+            <button ng-disabled="status!='running'" class="btn btn-primary" ng-click="restarthStatus()">
+                <i class="fas fa-sync-alt btn-icon"></i> Restart
+            </button>
+            <button ng-disabled="status!='running'" class="btn btn-danger" ng-click="StopContainerAPP()">
+                <i class="fas fa-stop btn-icon"></i> Stop
+            </button>
+            <button class="btn btn-warning" data-toggle="modal" data-target="#Recreatedockerapp">
+                <i class="fas fa-redo btn-icon"></i> Recreate
+            </button>
+        </div>
+    </div>
+
+    {% include "websiteFunctions/dockerRecreateModal.html" %}
+
+{% endblock %}