121 lines
6.5 KiB
HTML
121 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{fragments/manage-layout}">
|
|
|
|
<head>
|
|
<title>Dashboard</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div layout:fragment="content">
|
|
<!-- Page Heading -->
|
|
<div class="d-sm-flex align-items-center justify-content-between mb-4">
|
|
<h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Server Health -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card shadow mb-4">
|
|
<div class="card-header py-3">
|
|
<h6 class="m-0 font-weight-bold text-primary">Site Health & Telemetry</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="small font-weight-bold">CPU Load <span
|
|
class="float-right" th:text="${cpuPercentage} + '%'">0%</span></h4>
|
|
<div class="progress mb-4">
|
|
<div th:class="'progress-bar ' + (${cpuPercentage} > 80 ? 'bg-danger' : (${cpuPercentage} > 50 ? 'bg-warning' : 'bg-success'))"
|
|
role="progressbar" th:style="'width: ' + ${cpuPercentage} + '%'"
|
|
th:aria-valuenow="${cpuPercentage}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
|
|
<h4 class="small font-weight-bold">Memory (RAM) <span
|
|
class="float-right" th:text="${usedRamMb} + ' MB / ' + ${totalRamMb} + ' MB (' + ${ramPercentage} + '%)'">0 MB / 0 MB</span></h4>
|
|
<div class="progress mb-4">
|
|
<div th:class="'progress-bar ' + (${ramPercentage} > 80 ? 'bg-danger' : (${ramPercentage} > 50 ? 'bg-warning' : 'bg-info'))"
|
|
role="progressbar" th:style="'width: ' + ${ramPercentage} + '%'"
|
|
th:aria-valuenow="${ramPercentage}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
|
|
<h4 class="small font-weight-bold">Disk Space (I/O) <span
|
|
class="float-right" th:text="${usedSpaceGb} + ' GB / ' + ${totalSpaceGb} + ' GB (' + ${ioPercentage} + '%)'">0 GB / 0 GB</span></h4>
|
|
<div class="progress mb-4">
|
|
<div th:class="'progress-bar ' + (${ioPercentage} > 80 ? 'bg-danger' : (${ioPercentage} > 50 ? 'bg-warning' : 'bg-primary'))"
|
|
role="progressbar" th:style="'width: ' + ${ioPercentage} + '%'"
|
|
th:aria-valuenow="${ioPercentage}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Draft -->
|
|
<div class="card shadow mb-4">
|
|
<div class="card-header py-3">
|
|
<h6 class="m-0 font-weight-bold text-primary">Quick Draft</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<form th:action="@{/manage/quick-draft}" method="post">
|
|
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" name="title" placeholder="Title" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<textarea class="form-control" name="content" rows="4" placeholder="What's on your mind?"></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-outline-primary btn-sm">Save Draft</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6 mb-4">
|
|
<!-- At a Glance -->
|
|
<div class="card shadow mb-4">
|
|
<div class="card-header py-3">
|
|
<h6 class="m-0 font-weight-bold text-primary">At a Glance</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row text-center mb-3">
|
|
<div class="col-6">
|
|
<i class="fas fa-file-alt fa-2x text-gray-300 mb-2"></i>
|
|
<h4 class="h5 text-gray-800"><span th:text="${postCount}">0</span> Posts</h4>
|
|
</div>
|
|
<div class="col-6">
|
|
<i class="fas fa-file fa-2x text-gray-300 mb-2"></i>
|
|
<h4 class="h5 text-gray-800"><span th:text="${pageCount}">0</span> Pages</h4>
|
|
</div>
|
|
</div>
|
|
<p class="text-muted text-center mb-0 small">Running Spring Boot 4.0.6 (Java 21)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Activity -->
|
|
<div class="card shadow mb-4">
|
|
<div class="card-header py-3">
|
|
<h6 class="m-0 font-weight-bold text-primary">Recent Activity</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item d-flex justify-content-between align-items-center" th:each="post : ${recentPosts}">
|
|
<div>
|
|
<span class="text-muted small mr-2" th:text="${#temporals.format(post.createdDate, 'dd/MM/yyyy HH:mm')}">Date</span>
|
|
<a th:href="@{/manage/posts/{id}/edit(id=${post.id})}" th:text="${post.title}">Post Title</a>
|
|
</div>
|
|
<span class="badge badge-pill"
|
|
th:classappend="${post.status == 'PUBLISHED' ? 'badge-success' : (post.status == 'DRAFT' ? 'badge-secondary' : 'badge-warning')}"
|
|
th:text="${post.status}">DRAFT</span>
|
|
</li>
|
|
<li class="list-group-item text-muted text-center small" th:if="${#lists.isEmpty(recentPosts)}">
|
|
No recent activity
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|