luskbyte/docker-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add initial project files

Browse Source
This commit is contained in:
luskbyte
2026-04-24 15:36:53 -03:00
parent f1d8fefc5a
commit f618d107ed
13 changed files with 1937 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+22
View File
@@ -0,0 +1,22 @@
# Go
*.o
*.a
*.so
.DS_Store
docker-manager
docker-manager-bin
# IDE
.vscode/
.idea/
*.swp
*.swo
*~
# Build
bin/
dist/
# Environment
.env
.env.local
Dockerfile
+20
View File
@@ -0,0 +1,20 @@
FROM golang:1.22-alpine AS builder
WORKDIR /app
COPY . .
RUN go build -o docker-manager .
FROM alpine:latest
RUN apk --no-cache add ca-certificates
WORKDIR /app
COPY --from=builder /app/docker-manager .
COPY --from=builder /app/static ./static
EXPOSE 3000
CMD ["./docker-manager"]
build.sh
+3
View File
@@ -0,0 +1,3 @@
#!/bin/bash
cd /home/lucas/docker-manager
go build -o docker-manager .
docker-compose.yml
+12
View File
@@ -0,0 +1,12 @@
version: '3.8'
services:
docker-manager:
build: .
ports:
- "3000:3000"
volumes:
- /var/run/docker.sock:/var/run/docker.sock
environment:
- PORT=3000
restart: unless-stopped
docker/client.go
+130
View File
@@ -0,0 +1,130 @@
package docker
import (
"bytes"
"context"
"encoding/json"
"fmt"
"io"
"net"
"net/http"
"os"
"os/exec"
"path/filepath"
"strings"
)
type Client struct {
http *http.Client
socket string
}
func DetectSocket() string {
// 1. DOCKER_HOST env var
if host := os.Getenv("DOCKER_HOST"); host != "" {
if strings.HasPrefix(host, "unix://") {
return strings.TrimPrefix(host, "unix://")
}
}
// 2. docker context inspect (active context)
if sockPath := getContextSocket(); sockPath != "" {
return sockPath
}
// 3. Known paths
knownPaths := []string{
"/var/run/docker.sock",
filepath.Join(os.Getenv("HOME"), ".docker/run/docker.sock"),
filepath.Join(os.Getenv("HOME"), "Library/containers/com.docker.docker/Data/docker.raw.sock"),
"/run/docker.sock",
}
for _, path := range knownPaths {
if _, err := os.Stat(path); err == nil {
return path
}
}
// 4. Fallback
return "/var/run/docker.sock"
}
func getContextSocket() string {
cmd := exec.Command("docker", "context", "inspect")
out, err := cmd.Output()
if err != nil {
return ""
}
var contexts []map[string]interface{}
if err := json.Unmarshal(out, &contexts); err != nil {
return ""
}
if len(contexts) > 0 {
if meta, ok := contexts[0]["Metadata"].(map[string]interface{}); ok {
if host, ok := meta["host"].(string); ok && strings.HasPrefix(host, "unix://") {
return strings.TrimPrefix(host, "unix://")
}
}
}
return ""
}
func NewClient(socketPath string) *Client {
httpClient := &http.Client{
Transport: &http.Transport{
DialContext: func(ctx context.Context, network, addr string) (net.Conn, error) {
return net.Dial("unix", socketPath)
},
},
}
return &Client{
http: httpClient,
socket: socketPath,
}
}
func (c *Client) Do(method, path string, body io.Reader) (*http.Response, error) {
url := fmt.Sprintf("http://localhost%s", path)
req, err := http.NewRequest(method, url, body)
if err != nil {
return nil, err
}
return c.http.Do(req)
}
func (c *Client) DoWithJSONBody(method, path string, bodyData interface{}) (*http.Response, error) {
jsonBody, err := json.Marshal(bodyData)
if err != nil {
return nil, err
}
body := bytes.NewReader(jsonBody)
return c.Do(method, path, body)
}
func (c *Client) GetJSON(path string, result interface{}) error {
resp, err := c.Do("GET", path, nil)
if err != nil {
return err
}
defer resp.Body.Close()
if resp.StatusCode != http.StatusOK {
return fmt.Errorf("docker api error: %d", resp.StatusCode)
}
return json.NewDecoder(resp.Body).Decode(result)
}
func (c *Client) DoStream(method, path string, body io.Reader) (io.ReadCloser, error) {
resp, err := c.Do(method, path, body)
if err != nil {
return nil, err
}
if resp.StatusCode != http.StatusOK && resp.StatusCode != http.StatusCreated {
resp.Body.Close()
return nil, fmt.Errorf("docker api error: %d", resp.StatusCode)
}
return resp.Body, nil
}
go.mod
+3
View File
@@ -0,0 +1,3 @@
module docker-manager
go 1.22
handlers/containers.go
+121
View File
@@ -0,0 +1,121 @@
package handlers
import (
"docker-manager/docker"
"encoding/json"
"fmt"
"io"
"net/http"
)
func ListContainersHandler(w http.ResponseWriter, r *http.Request, client *docker.Client) {
var containers []map[string]interface{}
if err := client.GetJSON("/containers/json?all=true", &containers); err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
w.Header().Set("Content-Type", "application/json")
if containers == nil {
w.Write([]byte("[]"))
} else {
json.NewEncoder(w).Encode(containers)
}
}
func StartContainerHandler(w http.ResponseWriter, r *http.Request, client *docker.Client, id string) {
if resp, err := client.Do("POST", fmt.Sprintf("/containers/%s/start", id), nil); err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
} else {
defer resp.Body.Close()
w.WriteHeader(resp.StatusCode)
}
}
func StopContainerHandler(w http.ResponseWriter, r *http.Request, client *docker.Client, id string) {
if resp, err := client.Do("POST", fmt.Sprintf("/containers/%s/stop", id), nil); err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
} else {
defer resp.Body.Close()
w.WriteHeader(resp.StatusCode)
}
}
func RestartContainerHandler(w http.ResponseWriter, r *http.Request, client *docker.Client, id string) {
if resp, err := client.Do("POST", fmt.Sprintf("/containers/%s/restart", id), nil); err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
} else {
defer resp.Body.Close()
w.WriteHeader(resp.StatusCode)
}
}
func RemoveContainerHandler(w http.ResponseWriter, r *http.Request, client *docker.Client, id string) {
if resp, err := client.Do("DELETE", fmt.Sprintf("/containers/%s?force=true", id), nil); err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
} else {
defer resp.Body.Close()
w.WriteHeader(resp.StatusCode)
}
}
func GetLogsHandler(w http.ResponseWriter, r *http.Request, client *docker.Client, id string) {
body, err := client.DoStream("GET", fmt.Sprintf("/containers/%s/logs?stdout=true&stderr=true&tail=200", id), nil)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
defer body.Close()
// Docker logs returns docker stream format, need to parse it
logs := parseLogs(body)
w.Header().Set("Content-Type", "application/json")
json.NewEncoder(w).Encode(map[string]string{"logs": logs})
}
// Docker log stream format: [8 bytes header][payload]
// Header: [1 byte stream type][3 bytes padding][4 bytes payload length]
func parseLogs(body io.Reader) string {
var result string
buffer := make([]byte, 4096)
for {
n, err := body.Read(buffer)
if err != nil && err != io.EOF {
break
}
if n == 0 {
break
}
// Parse docker stream format
data := buffer[:n]
for i := 0; i < len(data); {
if i+8 > len(data) {
break
}
// Skip 8-byte header
i += 8
// Read until next header or end
start := i
for i < len(data) && i+8 <= len(data) {
i += 8
if i > len(data) {
i = len(data)
break
}
}
if start < len(data) {
result += string(data[start : len(data)])
i = len(data)
}
}
}
// Fallback: if stream format parsing fails, just return the raw data as text
if result == "" {
return string(buffer)
}
return result
}
handlers/images.go
+71
View File
@@ -0,0 +1,71 @@
package handlers
import (
"docker-manager/docker"
"encoding/json"
"fmt"
"net/http"
"strings"
)
func ListImagesHandler(w http.ResponseWriter, r *http.Request, client *docker.Client) {
var images []map[string]interface{}
if err := client.GetJSON("/images/json", &images); err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
w.Header().Set("Content-Type", "application/json")
if images == nil {
w.Write([]byte("[]"))
} else {
json.NewEncoder(w).Encode(images)
}
}
func RemoveImageHandler(w http.ResponseWriter, r *http.Request, client *docker.Client, id string) {
if resp, err := client.Do("DELETE", fmt.Sprintf("/images/%s?force=true", id), nil); err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
} else {
defer resp.Body.Close()
w.WriteHeader(resp.StatusCode)
}
}
func PullImageHandler(w http.ResponseWriter, r *http.Request, client *docker.Client) {
name := r.URL.Query().Get("name")
if name == "" {
http.Error(w, "name parameter required", http.StatusBadRequest)
return
}
// Strip tag if contains ":"
ref := name
if strings.Contains(name, ":") {
parts := strings.Split(name, ":")
ref = parts[0]
}
body, err := client.DoStream("POST", fmt.Sprintf("/images/create?fromImage=%s", ref), nil)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
defer body.Close()
w.Header().Set("Content-Type", "application/json")
w.Header().Set("Transfer-Encoding", "chunked")
// Stream pull progress as JSON lines
decoder := json.NewDecoder(body)
for {
var line map[string]interface{}
if err := decoder.Decode(&line); err != nil {
break
}
json.NewEncoder(w).Encode(line)
if flusher, ok := w.(http.Flusher); ok {
flusher.Flush()
}
}
}
handlers/info.go
+18
View File
@@ -0,0 +1,18 @@
package handlers
import (
"docker-manager/docker"
"encoding/json"
"net/http"
)
func InfoHandler(w http.ResponseWriter, r *http.Request, client *docker.Client) {
var info map[string]interface{}
if err := client.GetJSON("/info", &info); err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
w.Header().Set("Content-Type", "application/json")
json.NewEncoder(w).Encode(info)
}
main.go
+137
View File
@@ -0,0 +1,137 @@
package main
import (
"docker-manager/docker"
"docker-manager/handlers"
"fmt"
"net/http"
"os"
"strings"
)
func main() {
// Detect Docker socket
socketPath := docker.DetectSocket()
fmt.Printf("Using Docker socket: %s\n", socketPath)
client := docker.NewClient(socketPath)
// Create router
mux := http.NewServeMux()
// API routes
mux.HandleFunc("/api/info", corsMiddleware(func(w http.ResponseWriter, r *http.Request) {
handlers.InfoHandler(w, r, client)
}))
mux.HandleFunc("/api/containers", corsMiddleware(func(w http.ResponseWriter, r *http.Request) {
handlers.ListContainersHandler(w, r, client)
}))
mux.HandleFunc("/api/images", corsMiddleware(func(w http.ResponseWriter, r *http.Request) {
if r.Method == "GET" {
handlers.ListImagesHandler(w, r, client)
}
}))
mux.HandleFunc("/api/", corsMiddleware(func(w http.ResponseWriter, r *http.Request) {
handleDynamicRoutes(w, r, client)
}))
// Serve static files
mux.Handle("/", http.FileServer(http.Dir("static")))
// Get port from env or default to 3000
port := os.Getenv("PORT")
if port == "" {
port = "3000"
}
addr := fmt.Sprintf(":%s", port)
fmt.Printf("Starting server on %s\n", addr)
if err := http.ListenAndServe(addr, mux); err != nil {
fmt.Fprintf(os.Stderr, "Server error: %v\n", err)
os.Exit(1)
}
}
func corsMiddleware(next http.HandlerFunc) http.HandlerFunc {
return func(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Methods", "GET, POST, DELETE, OPTIONS")
w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
if r.Method == "OPTIONS" {
w.WriteHeader(http.StatusOK)
return
}
next(w, r)
}
}
func handleDynamicRoutes(w http.ResponseWriter, r *http.Request, client *docker.Client) {
path := r.URL.Path
// /api/containers/{id}/start
if strings.HasSuffix(path, "/start") && strings.HasPrefix(path, "/api/containers/") {
id := extractID(path, "/api/containers/", "/start")
handlers.StartContainerHandler(w, r, client, id)
return
}
// /api/containers/{id}/stop
if strings.HasSuffix(path, "/stop") && strings.HasPrefix(path, "/api/containers/") {
id := extractID(path, "/api/containers/", "/stop")
handlers.StopContainerHandler(w, r, client, id)
return
}
// /api/containers/{id}/restart
if strings.HasSuffix(path, "/restart") && strings.HasPrefix(path, "/api/containers/") {
id := extractID(path, "/api/containers/", "/restart")
handlers.RestartContainerHandler(w, r, client, id)
return
}
// /api/containers/{id} DELETE
if strings.HasPrefix(path, "/api/containers/") && r.Method == "DELETE" {
id := strings.TrimPrefix(path, "/api/containers/")
id = strings.TrimSuffix(id, "/")
if id != "" && !strings.Contains(id, "/") {
handlers.RemoveContainerHandler(w, r, client, id)
return
}
}
// /api/containers/{id}/logs
if strings.HasSuffix(path, "/logs") && strings.HasPrefix(path, "/api/containers/") {
id := extractID(path, "/api/containers/", "/logs")
handlers.GetLogsHandler(w, r, client, id)
return
}
// /api/images/{id} DELETE
if strings.HasPrefix(path, "/api/images/") && r.Method == "DELETE" {
id := strings.TrimPrefix(path, "/api/images/")
id = strings.TrimSuffix(id, "/")
if id != "" && !strings.Contains(id, "/") {
handlers.RemoveImageHandler(w, r, client, id)
return
}
}
// /api/images/pull POST
if r.Method == "GET" && strings.HasPrefix(path, "/api/images/pull") {
handlers.PullImageHandler(w, r, client)
return
}
http.Error(w, "Not Found", http.StatusNotFound)
}
func extractID(path, prefix, suffix string) string {
id := strings.TrimPrefix(path, prefix)
id = strings.TrimSuffix(id, suffix)
return id
}
static/app.js
+514
View File
@@ -0,0 +1,514 @@
const API_BASE = '/api';
const state = {
tab: 'dashboard',
containers: [],
images: [],
info: null,
connected: false,
logsContainerId: null,
};
function init() {
setupEventListeners();
fetchInitialData();
setInterval(fetchInitialData, 30000);
}
function setupEventListeners() {
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
e.target.classList.add('active');
state.tab = e.target.dataset.tab;
renderTabs();
});
});
document.querySelector('.modal-close').addEventListener('click', closeLogsModal);
document.getElementById('logs-modal').addEventListener('click', (e) => {
if (e.target.id === 'logs-modal') closeLogsModal();
});
document.getElementById('logs-refresh').addEventListener('click', refreshLogs);
document.getElementById('logs-tail').addEventListener('change', refreshLogs);
document.getElementById('confirm-cancel').addEventListener('click', closeConfirmModal);
document.getElementById('confirm-ok').addEventListener('click', confirmAction);
document.getElementById('confirm-modal').addEventListener('click', (e) => {
if (e.target.id === 'confirm-modal') closeConfirmModal();
});
document.getElementById('pull-btn').addEventListener('click', pullImage);
document.getElementById('pull-input').addEventListener('keypress', (e) => {
if (e.key === 'Enter') pullImage();
});
}
async function fetchInitialData() {
try {
await Promise.all([
fetchInfo(),
fetchContainers(),
fetchImages(),
]);
state.connected = true;
updateStatusIndicator();
} catch (err) {
state.connected = false;
updateStatusIndicator();
}
renderTabs();
}
async function fetchInfo() {
const res = await fetch(`${API_BASE}/info`);
if (!res.ok) throw new Error('Failed to fetch info');
state.info = await res.json();
}
async function fetchContainers() {
const res = await fetch(`${API_BASE}/containers`);
if (!res.ok) throw new Error('Failed to fetch containers');
state.containers = (await res.json()) || [];
}
async function fetchImages() {
const res = await fetch(`${API_BASE}/images`);
if (!res.ok) throw new Error('Failed to fetch images');
state.images = (await res.json()) || [];
}
function updateStatusIndicator() {
const indicator = document.querySelector('.status-indicator');
const statusText = document.querySelector('.status-text');
if (state.connected) {
indicator.classList.add('connected');
statusText.textContent = 'Connected';
statusText.classList.add('connected');
statusText.classList.remove('disconnected');
} else {
indicator.classList.remove('connected');
statusText.textContent = 'Disconnected';
statusText.classList.add('disconnected');
statusText.classList.remove('connected');
}
}
function renderTabs() {
document.querySelectorAll('.tab-content').forEach(tab => {
tab.classList.remove('active');
});
document.getElementById(state.tab).classList.add('active');
if (state.tab === 'dashboard') {
renderDashboard();
} else if (state.tab === 'containers') {
renderContainers();
} else if (state.tab === 'images') {
renderImages();
}
}
function renderDashboard() {
const running = state.containers.filter(c => c.State === 'running').length;
const stopped = state.containers.filter(c => c.State === 'exited').length;
const total = state.containers.length;
document.getElementById('containers-total-count').textContent = total;
document.getElementById('containers-running-count').textContent = running;
document.getElementById('containers-stopped-count').textContent = stopped;
document.getElementById('images-count').textContent = state.images.length;
document.getElementById('docker-version').textContent = state.info?.ServerVersion || '-';
document.getElementById('docker-os').textContent =
`${state.info?.Os || '-'} / ${state.info?.Architecture || '-'}`;
document.getElementById('docker-cpus').textContent =
state.info?.NCPU ? `${state.info.NCPU}` : '-';
document.getElementById('docker-memory').textContent =
state.info?.MemTotal ? formatBytes(state.info.MemTotal) : '-';
document.getElementById('docker-kernel').textContent =
state.info?.KernelVersion || '-';
document.getElementById('docker-server').textContent =
state.info?.ServerVersion || '-';
}
function renderContainers() {
const container = document.getElementById('containers-list');
if (!state.containers.length) {
container.innerHTML = '<div class="empty-state"><div class="empty-icon">📦</div><p>No containers found</p></div>';
return;
}
const html = `
<table class="data-table">
<thead>
<tr>
<th>Name</th>
<th>Image</th>
<th>Status</th>
<th>Ports</th>
<th>Created</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
${state.containers.map(c => {
const name = (c.Names || []).map(n => n.replace(/^\//,'')).join(', ') || c.Id.slice(0, 12);
const image = c.Image || '-';
const status = getStatusBadge(c.State);
const ports = getPortsHtml(c.Ports);
const created = formatRelativeTime(c.Created);
const actions = getContainerActions(c);
return `
<tr>
<td>${escapeHtml(name)}</td>
<td>${escapeHtml(image)}</td>
<td>${status}</td>
<td>${ports}</td>
<td>${created}</td>
<td>${actions}</td>
</tr>
`;
}).join('')}
</tbody>
</table>
`;
container.innerHTML = html;
attachContainerEventListeners();
}
function getPortsHtml(ports) {
if (!ports || !ports.length) return '<span class="text-muted">No ports</span>';
const unique = new Map();
ports.forEach(p => {
const key = `${p.PrivatePort}/${p.Type}`;
if (!unique.has(key)) {
unique.set(key, p.PublicPort || '-');
}
});
return Array.from(unique.entries())
.map(([priv, pub]) => `<span class="port-chip">${pub}→${priv}</span>`)
.join('');
}
function getContainerActions(container) {
const isRunning = container.State === 'running';
return `
<div class="action-buttons">
${isRunning ? `
<button class="btn btn-sm btn-warning" data-action="stop" data-id="${container.Id}">Stop</button>
<button class="btn btn-sm btn-warning" data-action="restart" data-id="${container.Id}">Restart</button>
` : `
<button class="btn btn-sm btn-success" data-action="start" data-id="${container.Id}">Start</button>
`}
<button class="btn btn-sm" data-action="logs" data-id="${container.Id}">Logs</button>
<button class="btn btn-sm btn-danger" data-action="remove" data-id="${container.Id}">Remove</button>
</div>
`;
}
function attachContainerEventListeners() {
document.querySelectorAll('[data-action]').forEach(btn => {
btn.addEventListener('click', (e) => {
const action = e.target.closest('[data-action]').dataset.action;
const id = e.target.closest('[data-action]').dataset.id;
handleContainerAction(action, id);
});
});
}
function getStatusBadge(state) {
const badges = {
'running': { class: 'badge-running', label: 'running' },
'paused': { class: 'badge-paused', label: 'paused' },
'exited': { class: 'badge-exited', label: 'exited' },
'created': { class: 'badge-created', label: 'created' },
};
const badge = badges[state] || { class: 'badge-exited', label: state };
return `<span class="badge ${badge.class}">${badge.label}</span>`;
}
async function handleContainerAction(action, id) {
try {
if (action === 'logs') {
state.logsContainerId = id;
await fetchAndShowLogs();
return;
}
if (action === 'remove') {
showConfirmModal(
'Remove Container',
'Are you sure you want to remove this container?',
async () => {
await executeContainerAction(action, id);
}
);
return;
}
await executeContainerAction(action, id);
} catch (err) {
showToast(`Error: ${err.message}`, 'error');
}
}
async function executeContainerAction(action, id) {
let url = '';
let method = 'POST';
switch (action) {
case 'start':
url = `${API_BASE}/containers/${id}/start`;
break;
case 'stop':
url = `${API_BASE}/containers/${id}/stop`;
break;
case 'restart':
url = `${API_BASE}/containers/${id}/restart`;
break;
case 'remove':
url = `${API_BASE}/containers/${id}`;
method = 'DELETE';
break;
default:
return;
}
const res = await fetch(url, { method });
if (!res.ok) throw new Error(`Failed to ${action} container`);
showToast(`Container ${action}ed successfully`, 'success');
await Promise.all([fetchContainers(), fetchInitialData()]);
renderTabs();
}
async function fetchAndShowLogs() {
try {
const tail = document.getElementById('logs-tail').value;
const res = await fetch(`${API_BASE}/containers/${state.logsContainerId}/logs?tail=${tail}`);
if (!res.ok) throw new Error('Failed to fetch logs');
const data = await res.json();
let logs = data.logs || 'No logs available';
logs = stripAnsi(logs);
document.getElementById('logs-content').textContent = logs;
document.getElementById('logs-modal').style.display = 'flex';
} catch (err) {
showToast(`Error: ${err.message}`, 'error');
}
}
function stripAnsi(text) {
return text.replace(/\x1b\[[0-9;]*m/g, '');
}
function refreshLogs() {
if (state.logsContainerId) {
fetchAndShowLogs();
}
}
function closeLogsModal() {
document.getElementById('logs-modal').style.display = 'none';
}
function renderImages() {
const container = document.getElementById('images-list');
if (!state.images.length) {
container.innerHTML = '<div class="empty-state"><div class="empty-icon">🖼</div><p>No images found</p></div>';
return;
}
const rows = [];
state.images.forEach((img) => {
const tags = img.RepoTags || ['untagged'];
const size = formatBytes(img.Size || 0);
const created = formatRelativeTime(img.Created);
tags.forEach((tag, tagIdx) => {
const isFirstTag = tagIdx === 0;
const actions = isFirstTag ? `<button class="btn btn-sm btn-danger" data-action="remove-image" data-id="${img.Id}">Remove</button>` : '';
rows.push(`
<tr>
<td>${escapeHtml(tag.split(':')[0] || '-')}</td>
<td>${escapeHtml(tag.split(':')[1] || '-')}</td>
<td>${escapeHtml(img.Id.slice(0, 12))}</td>
<td>${isFirstTag ? size : ''}</td>
<td>${isFirstTag ? created : ''}</td>
<td>${actions}</td>
</tr>
`);
});
});
const html = `
<table class="data-table">
<thead>
<tr>
<th>Repository</th>
<th>Tag</th>
<th>ID</th>
<th>Size</th>
<th>Created</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
${rows.join('')}
</tbody>
</table>
`;
container.innerHTML = html;
attachImageEventListeners();
}
function attachImageEventListeners() {
document.querySelectorAll('[data-action="remove-image"]').forEach(btn => {
btn.addEventListener('click', (e) => {
const id = e.target.dataset.id;
showConfirmModal(
'Remove Image',
'Are you sure you want to remove this image?',
async () => {
try {
const res = await fetch(`${API_BASE}/images/${id}`, { method: 'DELETE' });
if (!res.ok) throw new Error('Failed to remove image');
showToast('Image removed successfully', 'success');
await fetchImages();
renderTabs();
} catch (err) {
showToast(`Error: ${err.message}`, 'error');
}
}
);
});
});
}
async function pullImage() {
const input = document.getElementById('pull-input');
const name = input.value.trim();
if (!name) {
showToast('Please enter an image name', 'error');
return;
}
const progressDiv = document.getElementById('pull-progress');
progressDiv.style.display = 'block';
progressDiv.innerHTML = '';
const layerStates = {};
try {
const res = await fetch(`${API_BASE}/images/pull?name=${encodeURIComponent(name)}`);
if (!res.ok) throw new Error('Failed to pull image');
const reader = res.body.getReader();
const decoder = new TextDecoder();
while (true) {
const { done, value } = await reader.read();
if (done) break;
const lines = decoder.decode(value).split('\n').filter(l => l);
for (const line of lines) {
try {
const data = JSON.parse(line);
if (data.id && data.status) {
const layerId = data.id;
if (!layerStates[layerId]) {
layerStates[layerId] = document.createElement('div');
layerStates[layerId].className = 'pull-progress-item';
layerStates[layerId].dataset.layerId = layerId;
progressDiv.appendChild(layerStates[layerId]);
}
layerStates[layerId].textContent = `${layerId.slice(0, 12)}: ${data.status}`;
progressDiv.scrollTop = progressDiv.scrollHeight;
}
} catch (e) {
// Not JSON, skip
}
}
}
showToast('Image pulled successfully', 'success');
await fetchImages();
renderTabs();
input.value = '';
progressDiv.style.display = 'none';
} catch (err) {
showToast(`Error: ${err.message}`, 'error');
progressDiv.style.display = 'none';
}
}
function showConfirmModal(title, message, onConfirm) {
window.pendingConfirmAction = onConfirm;
document.getElementById('confirm-title').textContent = title;
document.getElementById('confirm-message').textContent = message;
document.getElementById('confirm-modal').style.display = 'flex';
}
function closeConfirmModal() {
window.pendingConfirmAction = null;
document.getElementById('confirm-modal').style.display = 'none';
}
function confirmAction() {
if (window.pendingConfirmAction) {
window.pendingConfirmAction();
}
closeConfirmModal();
}
function formatBytes(bytes) {
if (!bytes) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
}
function formatRelativeTime(timestamp) {
if (!timestamp) return '-';
const date = new Date(timestamp);
const now = new Date();
const diff = now - date;
const seconds = Math.floor(diff / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
if (seconds < 60) return `${seconds}s ago`;
if (minutes < 60) return `${minutes}m ago`;
if (hours < 24) return `${hours}h ago`;
return `${days}d ago`;
}
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
function showToast(message, type = 'info') {
const toast = document.getElementById('toast');
toast.textContent = message;
toast.className = `toast show ${type}`;
setTimeout(() => {
toast.classList.remove('show');
}, 3000);
}
init();
static/index.html
+144
View File
@@ -0,0 +1,144 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Docker Manager</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<div class="navbar-left">
<svg class="docker-logo" version="1.1" viewBox="0 0 122.88 88.17" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">.st0{fill:#0091E2;}</style>
<path class="st0" d="M121.68,33.34c-0.34-0.28-3.42-2.62-10.03-2.62c-1.71,0-3.48,0.17-5.19,0.46c-1.25-8.72-8.49-12.94-8.78-13.16 l-1.77-1.03l-1.14,1.65c-1.42,2.22-2.51,4.73-3.13,7.29c-1.2,4.96-0.46,9.63,2.05,13.62c-3.02,1.71-7.92,2.11-8.95,2.17l-80.93,0 c-2.11,0-3.82,1.71-3.82,3.82c-0.11,7.07,1.08,14.13,3.53,20.8c2.79,7.29,6.95,12.71,12.31,16.01c6.04,3.7,15.9,5.81,27.01,5.81 c5.01,0,10.03-0.46,14.99-1.37c6.9-1.25,13.51-3.65,19.6-7.12c5.02-2.91,9.52-6.61,13.34-10.94c6.44-7.24,10.26-15.33,13.05-22.51 c0.4,0,0.74,0,1.14,0c7.01,0,11.34-2.79,13.73-5.19c1.6-1.48,2.79-3.31,3.65-5.36l0.51-1.48L121.68,33.34L121.68,33.34z M71.59,39.38h10.83c0.51,0,0.97-0.4,0.97-0.97v-9.69c0-0.51-0.4-0.97-0.97-0.97l0,0l-10.83,0c-0.51,0-0.97,0.4-0.97,0.97l0,0v9.69 C70.68,38.98,71.08,39.38,71.59,39.38L71.59,39.38z M56.49,11.63h10.83c0.51,0,0.97-0.4,0.97-0.97V0.97c0-0.51-0.46-0.97-0.97-0.97 L56.49,0c-0.51,0-0.97,0.4-0.97,0.97l0,0v9.69C55.52,11.17,55.97,11.63,56.49,11.63L56.49,11.63z M56.49,25.53h10.83 c0.51,0,0.97-0.46,0.97-0.97v-9.69c0-0.51-0.46-0.97-0.97-0.97H56.49c-0.51,0-0.97,0.4-0.97,0.97l0,0v9.69 C55.52,25.08,55.97,25.53,56.49,25.53L56.49,25.53z M41.5,25.53h10.83c0.51,0,0.97-0.46,0.97-0.97v-9.69c0-0.51-0.4-0.97-0.97-0.97 l0,0H41.5c-0.51,0-0.97,0.4-0.97,0.97l0,0v9.69C40.53,25.08,40.93,25.53,41.5,25.53L41.5,25.53z M26.28,25.53h10.83 c0.51,0,0.97-0.46,0.97-0.97v-9.69c0-0.51-0.4-0.97-0.97-0.97l0,0H26.28c-0.51,0-0.97,0.4-0.97,0.97v9.69 C25.37,25.08,25.77,25.53,26.28,25.53L26.28,25.53z M56.49,39.38h10.83c0.51,0,0.97-0.4,0.97-0.97v-9.69c0-0.51-0.4-0.97-0.97-0.97 l0,0l-10.83,0c-0.51,0-0.97,0.4-0.97,0.97l0,0v9.69C55.52,38.98,55.97,39.38,56.49,39.38L56.49,39.38L56.49,39.38z M41.5,39.38 h10.83c0.51,0,0.97-0.4,0.97-0.97l0,0v-9.69c0-0.51-0.4-0.97-0.97-0.97l0,0l-10.83,0c-0.51,0-0.97,0.4-0.97,0.97l0,0v9.69 C40.53,38.98,40.93,39.38,41.5,39.38L41.5,39.38L41.5,39.38z M26.28,39.38h10.83c0.51,0,0.97-0.4,0.97-0.97l0,0v-9.69 c0-0.51-0.4-0.97-0.97-0.97l0,0l-10.83,0c-0.51,0-0.97,0.4-0.97,0.97v9.69C25.37,38.98,25.77,39.38,26.28,39.38L26.28,39.38z M11.35,39.38h10.83c0.51,0,0.97-0.4,0.97-0.97l0,0v-9.69c0-0.51-0.4-0.97-0.97-0.97l0,0l-10.83,0c-0.51,0-0.97,0.4-0.97,0.97l0,0 v9.69C10.44,38.98,10.84,39.38,11.35,39.38L11.35,39.38L11.35,39.38z"/>
</svg>
<h1>Docker UI</h1>
</div>
<div class="navbar-center">
<button class="tab-btn active" data-tab="dashboard">Dashboard</button>
<button class="tab-btn" data-tab="containers">Containers</button>
<button class="tab-btn" data-tab="images">Images</button>
</div>
<div class="navbar-right">
<div class="status-container">
<div class="status-indicator"></div>
<span class="status-text">Disconnected</span>
</div>
</div>
</nav>
<main class="app-container">
<div id="dashboard" class="tab-content active">
<h2>Dashboard</h2>
<div class="dashboard-grid status-grid">
<div class="status-card status-total">
<div class="status-count" id="containers-total-count">0</div>
<div class="status-label">Total Containers</div>
</div>
<div class="status-card status-running">
<div class="status-count" id="containers-running-count">0</div>
<div class="status-label">Running</div>
</div>
<div class="status-card status-stopped">
<div class="status-count" id="containers-stopped-count">0</div>
<div class="status-label">Stopped</div>
</div>
<div class="status-card status-images">
<div class="status-count" id="images-count">0</div>
<div class="status-label">Total Images</div>
</div>
</div>
<div class="system-info-card">
<h3>System Info</h3>
<div class="system-info-grid">
<div class="info-item">
<div class="info-label">Docker Version</div>
<div class="info-value" id="docker-version">-</div>
</div>
<div class="info-item">
<div class="info-label">OS / Architecture</div>
<div class="info-value" id="docker-os">-</div>
</div>
<div class="info-item">
<div class="info-label">CPUs</div>
<div class="info-value" id="docker-cpus">-</div>
</div>
<div class="info-item">
<div class="info-label">Memory</div>
<div class="info-value" id="docker-memory">-</div>
</div>
<div class="info-item">
<div class="info-label">Kernel Version</div>
<div class="info-value" id="docker-kernel">-</div>
</div>
<div class="info-item">
<div class="info-label">Server Version</div>
<div class="info-value" id="docker-server">-</div>
</div>
</div>
</div>
</div>
<div id="containers" class="tab-content">
<h2>Containers</h2>
<div id="containers-list" class="table-container"></div>
</div>
<div id="images" class="tab-content">
<h2>Images</h2>
<div class="pull-section">
<input type="text" id="pull-input" placeholder="Image name (e.g., nginx:latest)" class="pull-input">
<button id="pull-btn" class="btn btn-primary">Pull</button>
<div id="pull-progress" class="pull-progress" style="display: none;"></div>
</div>
<div id="images-list" class="table-container"></div>
</div>
</main>
<!-- Logs Modal -->
<div id="logs-modal" class="modal" style="display: none;">
<div class="modal-content logs-modal-content">
<div class="modal-header">
<h3>Container Logs</h3>
<div class="logs-controls">
<select id="logs-tail" class="logs-tail-select">
<option value="50">Last 50 lines</option>
<option value="100" selected>Last 100 lines</option>
<option value="200">Last 200 lines</option>
<option value="500">Last 500 lines</option>
</select>
<button id="logs-refresh" class="btn btn-small">Refresh</button>
</div>
<button class="modal-close">&times;</button>
</div>
<div class="modal-body logs-modal-body">
<pre id="logs-content" class="logs-content"></pre>
</div>
</div>
</div>
<!-- Confirm Modal -->
<div id="confirm-modal" class="modal" style="display: none;">
<div class="modal-content confirm-modal-content">
<div class="modal-header">
<h3 id="confirm-title">Confirm Action</h3>
</div>
<div class="modal-body confirm-modal-body">
<p id="confirm-message"></p>
</div>
<div class="modal-footer">
<button id="confirm-cancel" class="btn">Cancel</button>
<button id="confirm-ok" class="btn btn-danger">Confirm</button>
</div>
</div>
</div>
<!-- Toast Notifications -->
<div id="toast" class="toast"></div>
<script src="app.js"></script>
</body>
</html>
static/style.css
+742
View File
@@ -0,0 +1,742 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg: #0d1117;
--surface: #161b22;
--card: #21262d;
--border: #30363d;
--text: #c9d1d9;
--text-muted: #8b949e;
--accent: #58a6ff;
--success: #3fb950;
--danger: #f85149;
--warning: #d29922;
}
body {
background-color: var(--bg);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
line-height: 1.5;
}
/* Navbar */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background-color: var(--surface);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
z-index: 1000;
gap: 20px;
}
.navbar-left {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.docker-logo {
width: 32px;
height: 32px;
color: #2496ed;
flex-shrink: 0;
}
.navbar-left h1 {
font-size: 18px;
font-weight: 600;
color: var(--text);
}
.navbar-center {
display: flex;
gap: 0;
flex: 1;
justify-content: flex-start;
margin-left: 20px;
}
.tab-btn {
background: none;
border: none;
color: var(--text-muted);
padding: 20px 16px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
border-bottom: 2px solid transparent;
transition: all 0.2s;
}
.tab-btn:hover {
color: var(--text);
}
.tab-btn.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
.navbar-right {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.status-container {
display: flex;
align-items: center;
gap: 8px;
}
.status-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--danger);
animation: pulse 2s infinite;
flex-shrink: 0;
}
.status-indicator.connected {
background-color: var(--success);
}
.status-text {
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
}
.status-text.connected {
color: var(--success);
}
.status-text.disconnected {
color: var(--danger);
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* App Container */
.app-container {
margin-top: 60px;
padding: 30px 20px;
max-width: 1440px;
margin-left: auto;
margin-right: auto;
}
.app-container h2 {
font-size: 24px;
font-weight: 600;
margin-bottom: 20px;
color: var(--text);
}
.app-container h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
margin-top: 24px;
color: var(--text);
}
.app-container h3:first-child {
margin-top: 0;
}
.system-info-card {
background-color: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 20px;
margin-top: 24px;
}
.system-info-card h3 {
margin-top: 0;
margin-bottom: 16px;
}
/* Tab Content */
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* Dashboard */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 30px;
}
.status-grid {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.system-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.info-item {
display: flex;
flex-direction: column;
}
.info-label {
font-size: 12px;
color: var(--text-muted);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.info-value {
font-size: 16px;
font-weight: 600;
color: var(--text);
word-break: break-word;
}
.status-card {
background: linear-gradient(135deg, var(--card) 0%, #262c36 100%);
border: 1px solid var(--border);
border-radius: 8px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
transition: all 0.2s;
}
.status-card:hover {
transform: translateY(-2px);
border-color: var(--accent);
box-shadow: 0 4px 12px rgba(88, 166, 255, 0.1);
}
.status-count {
font-size: 32px;
font-weight: 700;
color: var(--text);
line-height: 1;
}
.status-label {
font-size: 12px;
color: var(--text-muted);
margin-top: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-running .status-count {
color: var(--success);
}
.status-stopped .status-count {
color: var(--danger);
}
.status-total .status-count {
color: var(--accent);
}
.status-images .status-count {
color: var(--accent);
}
/* Tables */
.table-container {
overflow-x: auto;
}
.data-table {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--border);
border-radius: 8px;
background-color: var(--card);
overflow: hidden;
}
.data-table thead {
background-color: var(--surface);
border-bottom: 1px solid var(--border);
}
.data-table th {
padding: 12px 16px;
text-align: left;
font-weight: 600;
font-size: 12px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.data-table td {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
font-size: 14px;
}
.data-table tbody tr:hover {
background-color: #262c36;
}
.data-table tbody tr:last-child td {
border-bottom: none;
}
/* Badges */
.badge {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.badge-running {
background-color: rgba(63, 185, 80, 0.2);
color: var(--success);
}
.badge-exited {
background-color: rgba(248, 81, 73, 0.2);
color: var(--danger);
}
.badge-paused {
background-color: rgba(210, 153, 34, 0.2);
color: var(--warning);
}
.badge-created {
background-color: rgba(88, 166, 255, 0.2);
color: var(--accent);
}
/* Port Chips */
.port-chip {
display: inline-block;
background-color: rgba(88, 166, 255, 0.2);
color: var(--accent);
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
margin-right: 4px;
font-family: 'Monaco', 'Courier New', monospace;
}
/* Action Buttons */
.action-buttons {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.btn {
padding: 6px 12px;
border: 1px solid var(--border);
background-color: var(--surface);
color: var(--text);
border-radius: 6px;
cursor: pointer;
font-size: 12px;
font-weight: 500;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 4px;
}
.btn:hover {
background-color: var(--card);
border-color: var(--accent);
color: var(--accent);
}
.btn-sm {
padding: 4px 8px;
font-size: 11px;
}
.btn-small {
padding: 4px 8px;
font-size: 11px;
}
.btn-primary {
background-color: var(--accent);
color: var(--bg);
border-color: var(--accent);
}
.btn-primary:hover {
background-color: #79c0ff;
border-color: #79c0ff;
}
.btn-danger {
color: var(--danger);
border-color: var(--danger);
}
.btn-danger:hover {
background-color: rgba(248, 81, 73, 0.1);
}
.btn-success {
color: var(--success);
border-color: var(--success);
}
.btn-success:hover {
background-color: rgba(63, 185, 80, 0.1);
}
.btn-warning {
color: var(--warning);
border-color: var(--warning);
}
.btn-warning:hover {
background-color: rgba(210, 153, 34, 0.1);
}
/* Empty State */
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-muted);
}
.empty-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}
.empty-state p {
font-size: 16px;
margin: 0;
}
.text-muted {
color: var(--text-muted);
}
/* Pull Section */
.pull-section {
margin-bottom: 24px;
display: flex;
gap: 8px;
}
.pull-input {
flex: 1;
padding: 8px 12px;
background-color: var(--surface);
border: 1px solid var(--border);
color: var(--text);
border-radius: 6px;
font-size: 14px;
}
.pull-input::placeholder {
color: var(--text-muted);
}
.pull-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}
.pull-progress {
padding: 12px;
background-color: var(--card);
border: 1px solid var(--border);
border-radius: 6px;
font-size: 12px;
color: var(--text-muted);
max-height: 200px;
overflow-y: auto;
}
.pull-progress-item {
padding: 4px 0;
border-bottom: 1px solid var(--border);
font-family: 'Monaco', 'Courier New', monospace;
}
.pull-progress-item:last-child {
border-bottom: none;
}
/* Modal */
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
}
.modal-content {
background-color: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
display: flex;
flex-direction: column;
max-height: 80vh;
overflow: hidden;
}
.logs-modal-content {
width: 90%;
max-width: 960px;
}
.confirm-modal-content {
width: 90%;
max-width: 360px;
}
.modal-header {
padding: 16px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 {
font-size: 16px;
color: var(--text);
margin: 0;
flex: 1;
}
.logs-controls {
display: flex;
gap: 8px;
align-items: center;
}
.logs-tail-select {
padding: 6px 8px;
background-color: var(--surface);
border: 1px solid var(--border);
color: var(--text);
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
.logs-tail-select:focus {
outline: none;
border-color: var(--accent);
}
.modal-close {
background: none;
border: none;
color: var(--text-muted);
font-size: 24px;
cursor: pointer;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.modal-close:hover {
color: var(--text);
}
.modal-body {
flex: 1;
overflow-y: auto;
padding: 16px;
}
.logs-modal-body {
background-color: #010409;
padding: 0;
}
.logs-content {
background-color: #010409;
color: var(--text);
font-family: 'Monaco', 'Courier New', monospace;
font-size: 12px;
line-height: 1.4;
white-space: pre-wrap;
word-wrap: break-word;
margin: 0;
padding: 16px;
}
.confirm-modal-body {
padding: 20px;
min-height: 100px;
}
.confirm-modal-body p {
margin: 0;
color: var(--text);
font-size: 14px;
line-height: 1.6;
}
.modal-footer {
padding: 16px;
border-top: 1px solid var(--border);
display: flex;
justify-content: flex-end;
gap: 8px;
}
/* Toast */
.toast {
position: fixed;
bottom: 20px;
right: 20px;
background-color: var(--card);
color: var(--text);
padding: 12px 16px;
border-radius: 6px;
border: 1px solid var(--border);
max-width: 300px;
word-wrap: break-word;
opacity: 0;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 1500;
transform: translateY(120px);
}
.toast.show {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.toast.success {
border-color: var(--success);
color: var(--success);
}
.toast.error {
border-color: var(--danger);
color: var(--danger);
}
.toast.info {
border-color: var(--accent);
color: var(--accent);
}
/* Responsive */
@media (max-width: 768px) {
.navbar {
flex-wrap: wrap;
height: auto;
padding: 10px;
}
.navbar-left h1 {
display: none;
}
.navbar-center {
width: 100%;
order: 3;
justify-content: flex-start;
margin-top: 10px;
}
.tab-btn {
padding: 12px 12px;
font-size: 12px;
}
.app-container {
margin-top: 120px;
padding: 20px 10px;
}
.dashboard-grid,
.status-grid,
.system-info-grid {
grid-template-columns: repeat(2, 1fr);
}
.data-table {
font-size: 12px;
}
.data-table th,
.data-table td {
padding: 8px 12px;
}
.action-buttons {
flex-direction: column;
}
.action-buttons .btn {
width: 100%;
justify-content: center;
}
.pull-section {
flex-direction: column;
}
.logs-modal-content,
.confirm-modal-content {
width: 95%;
}
}