Watcher/watcher
4
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

UI Overhaul

Browse Source
This commit is contained in:
Daniel Habenicht
2025-09-07 01:08:06 +02:00
parent 62f384cc7b
commit ab6f99eb6b
12 changed files with 178 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Watcher/Views/Container/Overview.cshtml
View File

@@ -2,7 +2,9 @@
@{
ViewData["Title"] = "Containerübersicht";
}
<head>
<link rel="stylesheet" href="~/css/main.css" />
</head>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
@foreach (var server in Model.Servers)
{

3
Watcher/Views/Home/Index.cshtml
View File

@@ -3,6 +3,9 @@
ViewData["Title"] = "Dashboard";
}
<head>
<link rel="stylesheet" href="~/css/site.css" />
</head>
<h1 class="mb-4">
<i class="bi bi-speedometer2 me-2"></i>Dashboard
</h1>

55
Watcher/Views/Home/_DashboardStats.cshtml
View File

@@ -1,24 +1,23 @@
@model Watcher.ViewModels.DashboardViewModel
@{
ViewData["Title"] = "Dashboard";
}
<div class="container-fluid py-4">
<head>
<link rel="stylesheet" href="~/css/main.css" />
</head>
<!-- Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
<button class="btn btn-outline-secondary btn-sm" onclick="loadDashboardStats()">
<i class="bi bi-arrow-clockwise me-1"></i> Aktualisieren
</button>
<body>
<div class="test">
<p>test</p>
</div>
<!-- KPI Cards -->
<div class="row g-4 mb-4">
<div class="col-12 col-sm-6 col-lg-3">
<div class="card shadow-sm border-0 rounded-3 text-center h-100">
<div class="card-body">
<i class="bi bi-hdd-network text-success fs-2 mb-2"></i>
<h6 class="text-muted">Server Online</h6>
<h6 class="text-text">Server Online</h6>
<h3 class="fw-bold">@Model.ActiveServers</h3>
</div>
</div>
@@ -27,7 +26,7 @@
<div class="card shadow-sm border-0 rounded-3 text-center h-100">
<div class="card-body">
<i class="bi bi-hdd-network-fill text-danger fs-2 mb-2"></i>
<h6 class="text-muted">Server Offline</h6>
<h6 class="text-text">Server Offline</h6>
<h3 class="fw-bold">@Model.OfflineServers</h3>
</div>
</div>
@@ -36,7 +35,7 @@
<div class="card shadow-sm border-0 rounded-3 text-center h-100">
<div class="card-body">
<i class="bi bi-box-seam text-primary fs-2 mb-2"></i>
<h6 class="text-muted">Services Running</h6>
<h6 class="text-text">Services Running</h6>
<h3 class="fw-bold">@Model.RunningContainers</h3>
</div>
</div>
@@ -45,7 +44,7 @@
<div class="card shadow-sm border-0 rounded-3 text-center h-100">
<div class="card-body">
<i class="bi bi-exclamation-triangle text-warning fs-2 mb-2"></i>
<h6 class="text-muted">Service Warnungen</h6>
<h6 class="text-text">Service Warnungen</h6>
<h3 class="fw-bold">@Model.FailedContainers</h3>
</div>
</div>
@@ -76,13 +75,6 @@
<div class="progress-bar bg-success w-100"></div>
</div>
<div class="d-flex justify-content-between align-items-center mb-2">
<span>API</span>
<span class="badge bg-warning">Langsam</span>
</div>
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-warning w-75"></div>
</div>
</div>
</div>
</div>
@@ -108,7 +100,7 @@
<!-- Services -->
<div class="col-12 col-lg-6">
<div class="bg-white shadow rounded-3 p-4 h-100">
<div class="card shadow rounded-3 p-4 h-100">
<h2 class="h5 fw-semibold mb-3">Services</h2>
<ul class="list-group list-group-flush">
@foreach (var service in Model.Containers)
@@ -126,7 +118,7 @@
<!-- Server Liste -->
<div class="col-12 col-lg-6">
<div class="bg-white shadow rounded-3 p-4 h-100">
<div class="card shadow rounded-3 p-4 h-100">
<h2 class="h5 fw-semibold mb-3">Server</h2>
<ul class="list-group list-group-flush">
@foreach (var server in Model.Servers)
@@ -148,23 +140,6 @@
</div>
</div>
</div>
</div>
@section Scripts {
<script>
async function loadDashboardStats() {
try {
const response = await fetch('/Home/DashboardStats');
if (response.ok) {
const html = await response.text();
document.getElementById('dashboard-stats').innerHTML = html;
} else {
console.error('Fehler beim Laden der Dashboard-Daten');
}
} catch (err) {
console.error('Netzwerkfehler:', err);
}
}
</script>
}
</body>

4
Watcher/Views/Server/AddServer.cshtml
View File

@@ -3,6 +3,10 @@
ViewData["Title"] = "Neuen Server hinzufügen";
}
<head>
<link rel="stylesheet" href="~/css/main.css" />
</head>
<div class="container mt-5" style="max-width: 700px;">
<div class="card shadow rounded-3 p-4">
<h1 class="mb-4 text-primary-emphasis">

44
Watcher/Views/Server/Details.cshtml
View File

@@ -16,6 +16,24 @@
@(Model.IsOnline ? "Online" : "Offline")
</span>
</div>
<div class="row mb-3"></div>
<div class="col-md-5 text-muted small">
<div><i class="bi bi-globe me-1"></i><strong>IP:</strong> @Model.IPAddress</div>
<div><i class="bi bi-pc-display me-1"></i><strong>Typ:</strong> @Model.Type</div>
<div><i class="bi bi-calendar-check me-1"></i><strong>Erstellt:</strong>
@Model.CreatedAt.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</div>
<div><i class="bi bi-clock me-1"></i><strong>Last-Seen:</strong>
@Model.LastSeen.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</div>
<div><i class="bi bi-cpu me-1"></i><strong>CPU:</strong> @(Model.CpuType ?? "not found") </div>
<div><i class="bi bi-cpu me-1"></i><strong>CPU-Kerne: </strong> @Model.CpuCores </div>
<div><i class="bi bi-gpu-card me-1"></i><strong>GPU:</strong> @(Model.GpuType ?? "not found")
</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>
<div class="card-body">
<dl class="row mb-0">
<dt class="col-sm-3">ID</dt>
@@ -45,28 +63,28 @@
</button>
</form>
</div>
</div>
</div>
<div class="mt-4">
<div class="mt-4">
<h6><i class="bi bi-graph-up me-1"></i>CPU Last</h6>
<div class="bg-light border rounded p-4 text-center text-muted" style="height: 500px; width: 100%">
<canvas id="cpuUsageChart" style="width: 800px; height: 400px; border: 1px solid red;"></canvas>
</div>
</div>
</div>
</div>
<h6><i class="bi bi-graph-up me-1"></i>RAM Last</h6>
<div class="bg-light border rounded p-4 text-center text-muted" style="height: 500px; width: 100%">
</div>
<h6><i class="bi bi-graph-up me-1"></i>RAM Last</h6>
<div class="bg-light border rounded p-4 text-center text-muted" style="height: 500px; width: 100%">
<canvas id="ramUsageChart" style="width: 800px; height: 400px; border: 1px solid red;"></canvas>
</div>
</div>
</div>
</div>
<div class="mt-4"></div>
<h6><i class="bi bi-graph-up me-1"></i>GPU Last</h6>
<div class="bg-light border rounded p-4 text-center text-muted" style="height: 500px; width: 100%">
<div class="mt-4"></div>
<h6><i class="bi bi-graph-up me-1"></i>GPU Last</h6>
<div class="bg-light border rounded p-4 text-center text-muted" style="height: 500px; width: 100%">
<canvas id="gpuUsageChart" style="width: 800px; height: 400px; border: 1px solid red;"></canvas>
</div>
</div>
</div>
</div>
</div>

35
Watcher/Views/Server/_ServerCard.cshtml
View File

@@ -8,9 +8,16 @@
<div class="card h-100 border-secondary shadow-sm">
<div class="card-body d-flex flex-column gap-3">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="card-title text-dark mb-0">
<i class="bi bi-pc-display me-2 text-muted"></i>(#@s.Id) @s.Name
<h5 class="card-title text-text mb-0">
<i class="bi bi-pc-display me-2 text-text"></i>(#@s.Id) @s.Name
</h5>
<div class="col-md-5 text-text small">
<div><i class="bi bi-globe me-1"></i><strong>IP:</strong> @s.IPAddress</div>
<div><i class="bi bi-pc-display me-1"></i><strong>Typ:</strong> @s.Type</div>
</div>
<span class="badge
@(s.IsOnline ? "bg-success text-light" : "bg-danger text-light")">
<i class="bi @(s.IsOnline ? "bi-check-circle" : "bi-x-circle") me-1"></i>
@@ -18,24 +25,7 @@
</span>
</div>
<div class="row mb-3">
<div class="col-md-5 text-muted small">
<div><i class="bi bi-globe me-1"></i><strong>IP:</strong> @s.IPAddress</div>
<div><i class="bi bi-pc-display me-1"></i><strong>Typ:</strong> @s.Type</div>
<div><i class="bi bi-calendar-check me-1"></i><strong>Erstellt:</strong>
@s.CreatedAt.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</div>
<div><i class="bi bi-clock me-1"></i><strong>Last-Seen:</strong>
@s.LastSeen.ToLocalTime().ToString("dd.MM.yyyy HH:mm")</div>
<div><i class="bi bi-cpu me-1"></i><strong>CPU:</strong> @(s.CpuType ?? "not found") </div>
<div><i class="bi bi-cpu me-1"></i><strong>CPU-Kerne: </strong> @s.CpuCores </div>
<div><i class="bi bi-gpu-card me-1"></i><strong>GPU:</strong> @(s.GpuType ?? "not found")
</div>
<div><i class="bi bi-memory me-1"></i><strong>RAM:</strong> @(s.RamSize) </div>
<div><i class="bi bi-hdd me-1"></i><strong>Disk Space:</strong> ... </div>
</div>
</div>
<div class="d-flex flex-wrap gap-2">
<div class="d-flex flex-wrap gap-4">
<a asp-action="EditServer" asp-route-id="@s.Id" class="btn btn-outline-primary">
<i class="bi bi-pencil-square me-1"></i> Bearbeiten
@@ -46,11 +36,6 @@
<i class="bi bi-bar-chart-fill me-1"></i> Metrics
</a>
<a asp-asp-controller="Container" asp-action="Overview" asp-route-id="@s.Id"
class="btn btn-outline-primary">
<i class="bi bi-box-fill me-1"></i> Container
</a>
<form asp-action="Delete" asp-controller="Server" asp-route-id="@s.Id" method="post"
onsubmit="return confirm('Diesen Server wirklich löschen?');" class="m-0">
<button type="submit" class="btn btn-outline-danger">

4
Watcher/Views/Server/overview.cshtml
View File

@@ -2,7 +2,9 @@
@{
ViewData["Title"] = "Serverübersicht";
}
<head>
<link rel="stylesheet" href="~/css/main.css" />
</head>
<div class="d-flex align-items-center justify-content-between mb-4">
<h1 class="h2 fw-bold mb-0">
<i class="bi bi-hdd-network me-2 text-primary"></i>Serverübersicht

9
Watcher/Views/Shared/_Layout.cshtml
View File

@@ -14,7 +14,7 @@
<head>
<meta charset="utf-8" />
<title>@ViewData["Title"] - Watcher</title>
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/main.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
@@ -24,12 +24,12 @@
}
.sidebar {
width: 240px;
width: 15rem;
height: 100vh;
position: fixed;
background-color: #212121;
left: 0;
top: 0;
background-color: #343a40;
color: white;
display: flex;
flex-direction: column;
@@ -73,6 +73,9 @@
<li class="nav-item">
<a class="nav-link" href="#">Netzwerk</a>
</li>
<li class="nav-item"></li>
<a class="nav-link" href="/Server/Overview">Servers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Container/Overview">Services</a>
</li>

53
Watcher/Views/Shared/_Layout.cshtml.css
View File

@@ -1,53 +0,0 @@
/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
html, body {
min-height: 100vh;
overflow-y: auto;
}
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
a {
color: #0077cc;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
}

1
Watcher/wwwroot/css/ServerOverview.css
View File

@@ -1 +0,0 @@

66
Watcher/wwwroot/css/main.css Normal file
View File

@@ -0,0 +1,66 @@
:root {
--color-bg: #141414;
--color-surface: #212121;
--color-accent: #415a77;
--color-primary: #616161;
--color-text: #f9feff;
--color-muted: #c0c0c0;
--color-success: #14a44d;
--color-danger: #ff6b6b;
}
body {
background-color: var(--color-bg);
color: var(--color-primary);
}
a {
color: var(--color-primary);
}
.card, .navbar, .form-control, .dropdown-menu {
background-color: var(--color-surface);
color: var(--color-text);
border: none;
}
.form-control {
background-color: var(--color-accent);
color: var(--color-text);
}
.form-control::placeholder {
color: var(--color-muted);
}
.navbar .nav-link,
.dropdown-item {
color: var(--color-text);
}
.btn-primary {
background-color: var(--color-primary);
border: none;
}
.btn-danger {
background-color: var(--color-danger);
border: none;
}
.btn-pocketid {
background-color: var(--color-success);
color: white;
}
.btn-pocketid:hover {
background-color: #0f8c3c;
}
.table {
color: var(--color-text);
}
hr {
border-top: 1px solid var(--color-accent);
}

10
Watcher/wwwroot/css/site.css
View File

@@ -1,9 +1,9 @@
:root {
--color-bg: #0d1b2a;
--color-surface: #1b263b;
--color-bg: #141414;
--color-surface: #212121;
--color-accent: #415a77;
--color-primary: #0d6efd;
--color-text: #ffffff;
--color-primary: white;
--color-text: #f9feff;
--color-muted: #c0c0c0;
--color-success: #14a44d;
--color-danger: #ff6b6b;
@@ -11,7 +11,7 @@
body {
background-color: var(--color-bg);
color: var(--color-text);
color: var(--color-primary);
}
a {