Server Card schöner gemacht
This commit is contained in:
@@ -8,28 +8,180 @@
|
|||||||
<link rel="stylesheet" href="~/css/services-overview.css" />
|
<link rel="stylesheet" href="~/css/services-overview.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
<div class="container-fluid mt-4">
|
||||||
<div >
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||||
<table class="ServiceList">
|
<h4><i class="bi bi-box-seam me-2"></i>Container & Services</h4>
|
||||||
<tr>
|
<span class="badge bg-primary">@Model.Containers.Count Container</span>
|
||||||
<th>Container-ID</th>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Image</th>
|
|
||||||
<th>Host</th>
|
|
||||||
<th>Aktionen</th>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
@foreach (Container container in Model.Containers)
|
|
||||||
{
|
|
||||||
<tr class="ServiceRow">
|
|
||||||
<td>@container.ContainerId</td>
|
|
||||||
<td>@container.Name</td>
|
|
||||||
<td>@container.Image</td>
|
|
||||||
<td><a class="ServiceEntry" href="/Server/Details/@container.ServerId">@container.Server?.Name</a></td>
|
|
||||||
<td>nicht verfügbar</td>
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@if (!Model.Containers.Any())
|
||||||
|
{
|
||||||
|
<div class="alert alert-info">
|
||||||
|
<i class="bi bi-info-circle me-2"></i>Keine Container gefunden. Container werden automatisch von den Agents erkannt.
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
var groupedContainers = Model.Containers.GroupBy(c => c.Server?.Name ?? "Unbekannt");
|
||||||
|
|
||||||
|
foreach (var serverGroup in groupedContainers.OrderBy(g => g.Key))
|
||||||
|
{
|
||||||
|
<div class="mb-4">
|
||||||
|
<h5 class="text-muted mb-3">
|
||||||
|
<i class="bi bi-hdd-network me-2"></i>@serverGroup.Key
|
||||||
|
<span class="badge bg-secondary ms-2">@serverGroup.Count()</span>
|
||||||
|
</h5>
|
||||||
|
|
||||||
|
<div class="row g-3">
|
||||||
|
@foreach (var container in serverGroup)
|
||||||
|
{
|
||||||
|
<div class="col-12 col-lg-6 col-xl-4">
|
||||||
|
<div class="card container-card shadow-sm">
|
||||||
|
<div class="card-header d-flex justify-content-between align-items-center">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<i class="bi bi-box me-2 text-primary"></i>
|
||||||
|
<strong>@container.Name</strong>
|
||||||
|
</div>
|
||||||
|
<span class="badge @(container.IsRunning ? "bg-success" : "bg-danger")">
|
||||||
|
<i class="bi @(container.IsRunning ? "bi-play-fill" : "bi-stop-fill")"></i>
|
||||||
|
@(container.IsRunning ? "Running" : "Stopped")
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="container-info">
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label"><i class="bi bi-tag me-1"></i>ID:</span>
|
||||||
|
<span class="info-value">@(container.ContainerId != null && container.ContainerId.Length > 12 ? container.ContainerId.Substring(0, 12) : container.ContainerId)</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label"><i class="bi bi-image me-1"></i>Image:</span>
|
||||||
|
<span class="info-value">@container.Image</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="info-label"><i class="bi bi-server me-1"></i>Host:</span>
|
||||||
|
<span class="info-value">
|
||||||
|
<a href="/Server/Details/@container.ServerId" class="text-decoration-none">
|
||||||
|
@container.Server?.Name
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Action Buttons -->
|
||||||
|
<div class="action-buttons mt-3 d-flex gap-2">
|
||||||
|
<button class="btn btn-sm btn-outline-warning flex-fill" onclick="restartContainer('@container.ContainerId')">
|
||||||
|
<i class="bi bi-arrow-clockwise"></i> Restart
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-sm btn-outline-danger flex-fill" onclick="stopContainer('@container.ContainerId')">
|
||||||
|
<i class="bi bi-stop-circle"></i> Stop
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-sm btn-outline-info flex-fill" onclick="updateContainer('@container.ContainerId')">
|
||||||
|
<i class="bi bi-arrow-up-circle"></i> Update
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Expandable Metrics Section -->
|
||||||
|
<div class="mt-3">
|
||||||
|
<button class="btn btn-sm btn-outline-secondary w-100 toggle-metrics"
|
||||||
|
data-container-id="@container.Id"
|
||||||
|
onclick="toggleMetrics(this, @container.Id)">
|
||||||
|
<i class="bi bi-graph-up me-1"></i>
|
||||||
|
Metriken anzeigen
|
||||||
|
<i class="bi bi-chevron-down float-end"></i>
|
||||||
|
</button>
|
||||||
|
<div class="metrics-panel collapse" id="metrics-@container.Id">
|
||||||
|
<div class="metrics-content mt-3 p-3 bg-light rounded">
|
||||||
|
<div class="metric-item">
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small><i class="bi bi-cpu me-1"></i>CPU</small>
|
||||||
|
<small class="text-muted"><span class="metric-value">--</span>%</small>
|
||||||
|
</div>
|
||||||
|
<div class="progress" style="height: 8px;">
|
||||||
|
<div class="progress-bar bg-info" role="progressbar" style="width: 0%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-item mt-3">
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small><i class="bi bi-memory me-1"></i>RAM</small>
|
||||||
|
<small class="text-muted"><span class="metric-value">--</span> MB</small>
|
||||||
|
</div>
|
||||||
|
<div class="progress" style="height: 8px;">
|
||||||
|
<div class="progress-bar bg-success" role="progressbar" style="width: 0%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="metric-item mt-3">
|
||||||
|
<div class="d-flex justify-content-between mb-1">
|
||||||
|
<small><i class="bi bi-ethernet me-1"></i>Network</small>
|
||||||
|
<small class="text-muted">
|
||||||
|
<i class="bi bi-arrow-down text-success"></i> <span class="metric-value">--</span> MB/s
|
||||||
|
<i class="bi bi-arrow-up text-primary ms-2"></i> <span class="metric-value">--</span> MB/s
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-3">
|
||||||
|
<small class="text-muted">
|
||||||
|
<i class="bi bi-info-circle me-1"></i>
|
||||||
|
Metriken werden in Echtzeit aktualisiert
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@section Scripts {
|
||||||
|
<script>
|
||||||
|
function toggleMetrics(button, containerId) {
|
||||||
|
const panel = document.getElementById('metrics-' + containerId);
|
||||||
|
const icon = button.querySelector('.float-end');
|
||||||
|
|
||||||
|
if (panel.classList.contains('show')) {
|
||||||
|
panel.classList.remove('show');
|
||||||
|
button.innerHTML = '<i class="bi bi-graph-up me-1"></i>Metriken anzeigen<i class="bi bi-chevron-down float-end"></i>';
|
||||||
|
} else {
|
||||||
|
panel.classList.add('show');
|
||||||
|
button.innerHTML = '<i class="bi bi-graph-up me-1"></i>Metriken verbergen<i class="bi bi-chevron-up float-end"></i>';
|
||||||
|
// Hier könnten echte Metriken geladen werden
|
||||||
|
loadContainerMetrics(containerId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadContainerMetrics(containerId) {
|
||||||
|
// Placeholder für zukünftige API-Calls
|
||||||
|
console.log('Loading metrics for container:', containerId);
|
||||||
|
// TODO: Echte Metriken vom Backend laden
|
||||||
|
}
|
||||||
|
|
||||||
|
function restartContainer(containerId) {
|
||||||
|
if (confirm('Container wirklich neu starten?')) {
|
||||||
|
console.log('Restarting container:', containerId);
|
||||||
|
// TODO: API Call zum Neustarten
|
||||||
|
alert('Restart-Funktion wird implementiert');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopContainer(containerId) {
|
||||||
|
if (confirm('Container wirklich stoppen?')) {
|
||||||
|
console.log('Stopping container:', containerId);
|
||||||
|
// TODO: API Call zum Stoppen
|
||||||
|
alert('Stop-Funktion wird implementiert');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateContainer(containerId) {
|
||||||
|
if (confirm('Container-Image aktualisieren?')) {
|
||||||
|
console.log('Updating container:', containerId);
|
||||||
|
// TODO: API Call zum Updaten
|
||||||
|
alert('Update-Funktion wird implementiert');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
}
|
||||||
|
|||||||
@@ -11,50 +11,176 @@
|
|||||||
<div id="server-cards-container">
|
<div id="server-cards-container">
|
||||||
|
|
||||||
<div class="container mt-4">
|
<div class="container mt-4">
|
||||||
<div class="card shadow-sm">
|
<!-- Server Overview Card -->
|
||||||
<div class="card-header d-flex justify-content-between align-items-center">
|
<div class="card shadow-sm mb-4">
|
||||||
|
<div class="card-header d-flex justify-content-between align-items-center bg-white border-bottom">
|
||||||
<h5 class="mb-0">
|
<h5 class="mb-0">
|
||||||
<i class="bi bi-hdd-network me-2 text-primary"></i>@Model.Name
|
<i class="bi bi-hdd-network me-2 text-primary"></i>@Model.Name
|
||||||
</h5>
|
</h5>
|
||||||
<span class="badge @(Model.IsOnline ? "bg-success" : "bg-danger")">
|
<div class="d-flex gap-2 align-items-center">
|
||||||
<i class="bi @(Model.IsOnline ? "bi-check-circle" : "bi-x-circle") me-1"></i>
|
<span class="badge @(Model.IsOnline ? "bg-success" : "bg-danger") px-3 py-2">
|
||||||
@(Model.IsOnline ? "Online" : "Offline")
|
<i class="bi @(Model.IsOnline ? "bi-check-circle" : "bi-x-circle") me-1"></i>
|
||||||
</span>
|
@(Model.IsOnline ? "Online" : "Offline")
|
||||||
|
</span>
|
||||||
|
<a asp-action="EditServer" asp-route-id="@Model.Id" class="btn btn-sm btn-outline-primary">
|
||||||
|
<i class="bi bi-pencil"></i> Bearbeiten
|
||||||
|
</a>
|
||||||
|
<form asp-action="Delete" asp-route-id="@Model.Id" method="post" class="d-inline m-0"
|
||||||
|
onsubmit="return confirm('Diesen Server wirklich löschen?');">
|
||||||
|
<button type="submit" class="btn btn-sm btn-outline-danger">
|
||||||
|
<i class="bi bi-trash"></i> Löschen
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="infocard row g-4 mb-4">
|
<div class="card-body">
|
||||||
<div class="info col-6 text-text col-lg-3">
|
<div class="row g-4">
|
||||||
<div><i class="bi bi-globe me-1"></i><strong>IP:</strong> @Model.IPAddress</div>
|
<!-- System Information -->
|
||||||
<div><i class="bi bi-pc-display me-1"></i><strong>Typ:</strong> @Model.Type</div>
|
<div class="col-12 col-md-6 col-lg-3">
|
||||||
<div><i class="bi bi-calendar-check me-1"></i><strong>Erstellt:</strong>
|
<h6 class="text-muted mb-3 pb-2 border-bottom">
|
||||||
@Model.CreatedAt.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</div>
|
<i class="bi bi-info-circle me-2"></i>System
|
||||||
<div><i class="bi bi-clock me-1"></i><strong>Last-Seen:</strong>
|
</h6>
|
||||||
@Model.LastSeen.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</div>
|
<div class="info-list">
|
||||||
</div>
|
<div class="info-item">
|
||||||
<div class="hardware col-6 text-text col-lg-3">
|
<span class="info-label">
|
||||||
<div><i class="bi bi-cpu me-1"></i><strong>CPU:</strong> @(Model.CpuType ?? "not found") </div>
|
<i class="bi bi-globe text-primary me-1"></i>IP-Adresse
|
||||||
<div><i class="bi bi-cpu me-1"></i><strong>CPU-Kerne: </strong> @Model.CpuCores </div>
|
</span>
|
||||||
<div><i class="bi bi-gpu-card me-1"></i><strong>GPU:</strong> @(Model.GpuType ?? "not found")
|
<span class="info-value">@Model.IPAddress</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="info-label">
|
||||||
|
<i class="bi bi-pc-display text-primary me-1"></i>Typ
|
||||||
|
</span>
|
||||||
|
<span class="info-value">@Model.Type</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="info-label">
|
||||||
|
<i class="bi bi-calendar-check text-primary me-1"></i>Erstellt
|
||||||
|
</span>
|
||||||
|
<span class="info-value">@Model.CreatedAt.ToLocalTime().ToString("dd.MM.yyyy")</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="info-label">
|
||||||
|
<i class="bi bi-clock text-primary me-1"></i>Last Seen
|
||||||
|
</span>
|
||||||
|
<span class="info-value">
|
||||||
|
@{
|
||||||
|
var timeSinceLastSeen = DateTime.UtcNow - Model.LastSeen;
|
||||||
|
if (timeSinceLastSeen.TotalMinutes < 1)
|
||||||
|
{
|
||||||
|
<span class="text-success">Gerade eben</span>
|
||||||
|
}
|
||||||
|
else if (timeSinceLastSeen.TotalMinutes < 60)
|
||||||
|
{
|
||||||
|
<span>vor @((int)timeSinceLastSeen.TotalMinutes) Min</span>
|
||||||
|
}
|
||||||
|
else if (timeSinceLastSeen.TotalHours < 24)
|
||||||
|
{
|
||||||
|
<span>vor @((int)timeSinceLastSeen.TotalHours) Std</span>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<span>@Model.LastSeen.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</span>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div><i class="bi bi-memory me-1"></i><strong>RAM:</strong> @(Model.RamSize) </div>
|
|
||||||
<div><i class="bi bi-hdd me-1"></i><strong>Disk Space:</strong> ... </div>
|
|
||||||
</div>
|
|
||||||
<div class="hardware col-6 text-text col-lg-3">
|
|
||||||
<div class="card-footer text-end">
|
|
||||||
<a asp-action="EditServer" asp-route-id="@Model.Id" class="btn btn-outline-primary me-2">
|
|
||||||
<i class="bi bi-pencil"></i> Bearbeiten
|
|
||||||
</a>
|
|
||||||
<form asp-action="Delete" asp-route-id="@Model.Id" method="post" class="d-inline"
|
|
||||||
onsubmit="return confirm('Diesen Server wirklich löschen?');">
|
|
||||||
<button type="submit" class="btn btn-outline-danger">
|
|
||||||
<i class="bi bi-trash"></i> Löschen
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<!-- Hardware - CPU & GPU -->
|
||||||
|
<div class="col-12 col-md-6 col-lg-3">
|
||||||
|
<h6 class="text-muted mb-3 pb-2 border-bottom">
|
||||||
|
<i class="bi bi-cpu me-2"></i>Prozessor & Grafik
|
||||||
|
</h6>
|
||||||
|
<div class="info-list">
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="info-label">
|
||||||
|
<i class="bi bi-cpu text-info me-1"></i>CPU
|
||||||
|
</span>
|
||||||
|
<span class="info-value">
|
||||||
|
@if (!string.IsNullOrWhiteSpace(Model.CpuType))
|
||||||
|
{
|
||||||
|
@Model.CpuType
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<span class="text-muted">Unbekannt</span>
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="info-label">
|
||||||
|
<i class="bi bi-grid text-info me-1"></i>CPU-Kerne
|
||||||
|
</span>
|
||||||
|
<span class="info-value">
|
||||||
|
@if (Model.CpuCores > 0)
|
||||||
|
{
|
||||||
|
@Model.CpuCores
|
||||||
|
<span class="text-muted">Cores</span>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<span class="text-muted">Unbekannt</span>
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="info-label">
|
||||||
|
<i class="bi bi-gpu-card text-info me-1"></i>GPU
|
||||||
|
</span>
|
||||||
|
<span class="info-value">
|
||||||
|
@if (!string.IsNullOrWhiteSpace(Model.GpuType))
|
||||||
|
{
|
||||||
|
@Model.GpuType
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<span class="text-muted">Keine / Unbekannt</span>
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hardware - Memory -->
|
||||||
|
<div class="col-12 col-md-6 col-lg-3">
|
||||||
|
<h6 class="text-muted mb-3 pb-2 border-bottom">
|
||||||
|
<i class="bi bi-memory me-2"></i>Speicher
|
||||||
|
</h6>
|
||||||
|
<div class="info-list">
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="info-label">
|
||||||
|
<i class="bi bi-memory text-success me-1"></i>RAM
|
||||||
|
</span>
|
||||||
|
<span class="info-value">
|
||||||
|
@if (Model.RamSize > 0)
|
||||||
|
{
|
||||||
|
var ramGB = Model.RamSize / (1024.0 * 1024.0 * 1024.0);
|
||||||
|
@($"{ramGB:F1} GB")
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<span class="text-muted">Unbekannt</span>
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Description -->
|
||||||
|
@if (!string.IsNullOrWhiteSpace(Model.Description))
|
||||||
|
{
|
||||||
|
<div class="col-12 col-lg-3">
|
||||||
|
<h6 class="text-muted mb-3 pb-2 border-bottom">
|
||||||
|
<i class="bi bi-card-text me-2"></i>Beschreibung
|
||||||
|
</h6>
|
||||||
|
<p class="text-muted small mb-0">@Model.Description</p>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,20 +1,75 @@
|
|||||||
.info {
|
/* Server Details - Info Card */
|
||||||
margin: 2rem;
|
.info-list {
|
||||||
margin-top: 3rem;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hardware {
|
.info-item {
|
||||||
margin: 2rem;
|
display: flex;
|
||||||
margin-top: 3rem;
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #6c757d;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--color-text, #212529);
|
||||||
|
font-weight: 400;
|
||||||
|
padding-left: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value .text-muted {
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section Headers in Info Card */
|
||||||
|
.card-body h6.text-muted {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body h6.text-muted i {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Graph Container */
|
||||||
.graphcontainer {
|
.graphcontainer {
|
||||||
height: 25rem;
|
height: 25rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: var(--color-surface);
|
background-color: var(--color-surface, #f8f9fa);
|
||||||
|
border-radius: 0.375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.graph {
|
.graph {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 22rem;
|
height: 22rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.info-item {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.card-header .d-flex.gap-2 {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header .btn-sm {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -1,12 +1,115 @@
|
|||||||
.ServiceList {
|
/* Container Card Styling */
|
||||||
width: 80%;
|
.container-card {
|
||||||
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||||
|
background: var(--color-background-secondary, #fff);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ServiceRow {
|
.container-card:hover {
|
||||||
border-style: solid;
|
transform: translateY(-2px);
|
||||||
border-color: var(--color-text);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ServiceEntry {
|
.container-card .card-header {
|
||||||
text-decoration: none;
|
background-color: rgba(0, 0, 0, 0.03);
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-card .card-body {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Container Info Rows */
|
||||||
|
.container-info {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.4rem 0;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-row:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
color: #6c757d;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
color: var(--color-text, #212529);
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Action Buttons */
|
||||||
|
.action-buttons .btn {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
padding: 0.4rem 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Metrics Panel */
|
||||||
|
.metrics-panel {
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metrics-panel.show {
|
||||||
|
max-height: 500px;
|
||||||
|
transition: max-height 0.4s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metrics-content {
|
||||||
|
background-color: #f8f9fa !important;
|
||||||
|
border: 1px solid #dee2e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-item {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-item:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Toggle Button */
|
||||||
|
.toggle-metrics {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-metrics:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Adjustments */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.action-buttons {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons .btn {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Badge Styling */
|
||||||
|
.badge {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding: 0.35em 0.65em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Server Group Header */
|
||||||
|
h5.text-muted {
|
||||||
|
font-weight: 600;
|
||||||
|
border-bottom: 2px solid #dee2e6;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user