mirror of
https://github.com/outbackdingo/step-ca-webui.git
synced 2026-01-27 10:20:25 +00:00
logs done
This commit is contained in:
stone-24tch3r
163
front/logs.html
163
front/logs.html
@@ -1,4 +1,3 @@
|
||||
<!-- logs.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
@@ -9,86 +8,98 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="topbar">
|
||||
<div class="logo">SSH Cert Manager</div>
|
||||
<div class="topbar-logo">SSH Cert Manager</div>
|
||||
<div>
|
||||
<button class="nav-button">Dashboard</button>
|
||||
<button class="nav-button">Logs</button>
|
||||
<button class="nav-button">Menu</button>
|
||||
<button class="topbar-nav-button">Dashboard</button>
|
||||
<button class="topbar-nav-button">Logs</button>
|
||||
<button class="topbar-nav-button">Menu</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-container">
|
||||
<h1>Logs and Command History</h1>
|
||||
<div class="filters">
|
||||
<label>Severity:
|
||||
<select>
|
||||
<option>All</option>
|
||||
<option>INFO</option>
|
||||
<option>WARN</option>
|
||||
<option>DEBUG</option>
|
||||
<option>ERROR</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Type:
|
||||
<select>
|
||||
<option>All</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Date Range:
|
||||
<input type="date" placeholder="From">
|
||||
<input type="date" placeholder="To">
|
||||
</label>
|
||||
<button class="filter-button">Apply</button>
|
||||
<h1 class="main-header">Logs and Command History</h1>
|
||||
<div class="main-container-content">
|
||||
<div class="logs-filters-container">
|
||||
<label class="logs-filters-item">Commands only:
|
||||
<select>
|
||||
<option>No</option>
|
||||
<option>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="logs-filters-item logs-filters-datepicker">Date Range:
|
||||
<input type="date" placeholder="From">
|
||||
<input type="date" placeholder="To">
|
||||
</label>
|
||||
<label class="logs-filters-item">Keywords:
|
||||
<input type="text" placeholder="Search...">
|
||||
</label>
|
||||
<fieldset class="logs-filters-fieldset">
|
||||
<legend class="logs-filters-legend">Severity:</legend>
|
||||
<label>
|
||||
<input type="checkbox" value="INFO" checked>
|
||||
INFO
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" value="WARN" checked>
|
||||
WARN
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" value="DEBUG" checked>
|
||||
DEBUG
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" value="ERROR" checked>
|
||||
ERROR
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
<button class="small-button">Apply</button>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>EntryID</th>
|
||||
<th>Timestamp</th>
|
||||
<th>Severity</th>
|
||||
<th>TraceID</th>
|
||||
<th>Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>00002</td>
|
||||
<td>2023-08-17 10:15</td>
|
||||
<td>INFO</td>
|
||||
<td>abc123</td>
|
||||
<td>
|
||||
Generating new cert<br>
|
||||
$ step ca certificate ...<br>
|
||||
<a href="#">Click to see command output...</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>00003</td>
|
||||
<td>2023-08-17 10:14</td>
|
||||
<td>WARN</td>
|
||||
<td>def456</td>
|
||||
<td>Cert not exists</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>00004</td>
|
||||
<td>2023-08-17 10:13</td>
|
||||
<td>DEBUG</td>
|
||||
<td>def456</td>
|
||||
<td>Request revoke</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>00005</td>
|
||||
<td>2023-08-17 10:12</td>
|
||||
<td>ERROR</td>
|
||||
<td>ghi789</td>
|
||||
<td>Permission denied</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="filters">
|
||||
<input type="text" placeholder="Search...">
|
||||
<button class="filter-button">Search</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>EntryID</th>
|
||||
<th>Timestamp</th>
|
||||
<th>Severity</th>
|
||||
<th>TraceID</th>
|
||||
<th>Message</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>00002</td>
|
||||
<td>2023-08-17 10:15</td>
|
||||
<td>INFO</td>
|
||||
<td>abc123</td>
|
||||
<td>
|
||||
Generating new cert<br>
|
||||
$ step ca certificate ...<br>
|
||||
<a href="#">Click to see command output...</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>00003</td>
|
||||
<td>2023-08-17 10:14</td>
|
||||
<td>WARN</td>
|
||||
<td>def456</td>
|
||||
<td>Cert not exists</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>00004</td>
|
||||
<td>2023-08-17 10:13</td>
|
||||
<td>DEBUG</td>
|
||||
<td>def456</td>
|
||||
<td>Request revoke</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>00005</td>
|
||||
<td>2023-08-17 10:12</td>
|
||||
<td>ERROR</td>
|
||||
<td>ghi789</td>
|
||||
<td>Permission denied</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button class="load-more">Load More</button>
|
||||
<button class="main-bottom-button">Load More</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -9,16 +9,16 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="topbar">
|
||||
<div class="logo">SSH Cert Manager</div>
|
||||
<div class="nav-buttons-container">
|
||||
<button class="nav-button">Dashboard</button>
|
||||
<button class="nav-button">Logs</button>
|
||||
<button class="nav-button">Menu</button>
|
||||
<div class="topbar-logo">SSH Cert Manager</div>
|
||||
<div class="topbar-nav-container">
|
||||
<button class="topbar-nav-button">Dashboard</button>
|
||||
<button class="topbar-nav-button">Logs</button>
|
||||
<button class="topbar-nav-button">Menu</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-container">
|
||||
<h1 class="main-container-header">Certificate Management</h1>
|
||||
<div class="certs-table-container">
|
||||
<h1 class="main-header">Certificate Management</h1>
|
||||
<div class="main-container-content">
|
||||
<table class="certs-table">
|
||||
<thead class="certs-table-header">
|
||||
<tr>
|
||||
@@ -31,65 +31,65 @@
|
||||
<tr>
|
||||
<td>Cert 1</td>
|
||||
<td>Active</td>
|
||||
<td class="actions-container-td">
|
||||
<button class="action-button">Renew</button>
|
||||
<button class="action-button">Revoke</button>
|
||||
<button class="action-button">View</button>
|
||||
<button class="action-button">Do smth else</button>
|
||||
<td class="certs-actions-td">
|
||||
<button class="small-button">Renew</button>
|
||||
<button class="small-button">Revoke</button>
|
||||
<button class="small-button">View</button>
|
||||
<button class="small-button">Do smth else</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cert 2</td>
|
||||
<td>Expired</td>
|
||||
<td class="actions-container-td">
|
||||
<button class="action-button">Delete</button>
|
||||
<button class="action-button">Delete</button>
|
||||
<td class="certs-actions-td">
|
||||
<button class="small-button">Delete</button>
|
||||
<button class="small-button">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cert 3</td>
|
||||
<td>Test</td>
|
||||
<td class="actions-container-td">
|
||||
<button class="action-button">Delete</button>
|
||||
<button class="action-button">Yes</button>
|
||||
<button class="action-button">No no no</button>
|
||||
<td class="certs-actions-td">
|
||||
<button class="small-button">Delete</button>
|
||||
<button class="small-button">Yes</button>
|
||||
<button class="small-button">No no no</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cert 5</td>
|
||||
<td>Test</td>
|
||||
<td class="actions-container-td">
|
||||
<button class="action-button">Delete</button>
|
||||
<td class="certs-actions-td">
|
||||
<button class="small-button">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cert 4</td>
|
||||
<td>Test</td>
|
||||
<td class="actions-container-td">
|
||||
<button class="action-button">Delete</button>
|
||||
<button class="action-button">I</button>
|
||||
<button class="action-button">Love</button>
|
||||
<button class="action-button">You</button>
|
||||
<td class="certs-actions-td">
|
||||
<button class="small-button">Delete</button>
|
||||
<button class="small-button">I</button>
|
||||
<button class="small-button">Love</button>
|
||||
<button class="small-button">You</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cert 6</td>
|
||||
<td>Test</td>
|
||||
<td class="actions-container-td">
|
||||
<button class="action-button">Delete</button>
|
||||
<td class="certs-actions-td">
|
||||
<button class="small-button">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cert 7</td>
|
||||
<td>Test</td>
|
||||
<td class="actions-container-td">
|
||||
<button class="action-button">Delete</button>
|
||||
<td class="certs-actions-td">
|
||||
<button class="small-button">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button id="generateCertBtn" class="generate-button">Generate New Certificate</button>
|
||||
<button id="generateCertBtn" class="main-bottom-button">Generate New Certificate</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
@@ -110,6 +110,7 @@
|
||||
|
||||
<label for="duration">Duration:</label>
|
||||
<input type="number" id="duration" name="duration" required>
|
||||
<!--suppress HtmlFormInputWithoutLabel -->
|
||||
<select id="durationUnit" name="durationUnit">
|
||||
<option value="minutes">minutes</option>
|
||||
<option value="hours">hours</option>
|
||||
|
||||
174
front/styles.css
174
front/styles.css
@@ -1,4 +1,3 @@
|
||||
/* Main */
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -12,6 +11,8 @@ body {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Topbar */
|
||||
|
||||
.topbar {
|
||||
background-color: #cc0000;
|
||||
color: white;
|
||||
@@ -21,13 +22,13 @@ body {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
.topbar-logo {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.nav-buttons-container {
|
||||
.topbar-nav-container {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
@@ -35,7 +36,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
.topbar-nav-button {
|
||||
background-color: #aa0000;
|
||||
color: white;
|
||||
border: none;
|
||||
@@ -44,78 +45,47 @@ body {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Main */
|
||||
|
||||
.main-container {
|
||||
max-width: 1000px;
|
||||
width: calc(100% - 40px); /* Ensures horizontal margins 20px */
|
||||
margin-block: 20px; /* Vertical margins */
|
||||
width: calc(100% - 40px); /* Ensures horizontal margins 20px */
|
||||
margin-block: 20px; /* Vertical margins */
|
||||
background-color: white;
|
||||
border: 2px solid #cc0000;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1; /* Grow and take up available space in parent */
|
||||
flex: 1; /* Grow and take up available space in parent */
|
||||
overflow: hidden; /* Clips not fitting content */
|
||||
align-self: center; /* Center horizontally */
|
||||
box-sizing: border-box; /* Include padding and border in element's total width and height */
|
||||
align-self: center; /* Center horizontally */
|
||||
box-sizing: border-box; /* Include padding and border in element's total width and height */
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.main-container {
|
||||
width: calc(100% - 10px); /* Ensures horizontal margins 5px */
|
||||
width: calc(100% - 10px); /* Ensures horizontal margins 5px */
|
||||
margin-block: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-container-header {
|
||||
.main-header {
|
||||
color: #cc0000;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.certs-table-container {
|
||||
.main-container-content {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
flex: 1; /* Grow and take up available space in parent (main-container) */
|
||||
overflow-y: auto; /* Enable vertical scrolling if content not fits */
|
||||
flex: 1; /* Grow and take up available space in parent (main-container) */
|
||||
overflow-y: auto; /* Enable vertical scrolling if content not fits */
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.certs-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.actions-container-td {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) { /* Stack buttons vertically */
|
||||
.actions-container-td {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 451px) and (max-width: 600px) {
|
||||
.actions-container-td { /* Needs to be duplicated */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.actions-container-td button {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.action-button, .filter-button {
|
||||
background-color: #cc0000;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.generate-button {
|
||||
.main-bottom-button {
|
||||
background-color: #cc0000;
|
||||
color: white;
|
||||
border: none;
|
||||
@@ -126,7 +96,7 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
/* Table */
|
||||
|
||||
th, td {
|
||||
border: 1px solid #ddd;
|
||||
@@ -138,46 +108,87 @@ th {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Certs */
|
||||
|
||||
.certs-actions-td {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
/* Stack buttons vertically */
|
||||
.certs-actions-td {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 451px) and (max-width: 600px) {
|
||||
.certs-actions-td { /* Needs to be duplicated */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.certs-actions-td button {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Logs */
|
||||
|
||||
.filters {
|
||||
margin-bottom: 20px;
|
||||
.logs-filters-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
width: 80%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.filters select, .filters input[type="date"], .filters input[type="text"] {
|
||||
margin-right: 10px;
|
||||
padding: 5px;
|
||||
.logs-filters-item {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #f2f2f2;
|
||||
border: 1px solid #ddd;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-top: 20px;
|
||||
.logs-filters-fieldset {
|
||||
display: flex;
|
||||
align-items: center; /* Centers legend vertically in fieldset */
|
||||
padding-block: 5px;
|
||||
padding-left: 30px;
|
||||
margin-left: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logs-filters-legend {
|
||||
position: absolute;
|
||||
left: -40px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
|
||||
.modal-layer-container { /* Lays 100% over the whole page */
|
||||
display: none; /* Initially hidden */
|
||||
position: fixed; /* Stay in place relive to the browser window */
|
||||
.modal-layer-container { /* Lays 100% over the whole page */
|
||||
display: none; /* Initially hidden */
|
||||
position: fixed; /* Stay in place relive to the browser window */
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto; /* Scroll if needed */
|
||||
background-color: rgba(0, 0, 0, 0.4); /* slightly shaded background */
|
||||
overflow: auto; /* Scroll if needed */
|
||||
background-color: rgba(0, 0, 0, 0.4); /* slightly shaded background */
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin-inline: auto; /* Horizontally */
|
||||
margin-block: 15%; /* Vertically */
|
||||
margin-inline: auto; /* Horizontally */
|
||||
margin-block: 15%; /* Vertically */
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
@@ -186,7 +197,7 @@ th {
|
||||
|
||||
.modal-close {
|
||||
color: #aaa;
|
||||
float: right; /* Positioned at the right relative to the modal-content */
|
||||
float: right; /* Positioned at the right relative to the modal-content */
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
@@ -206,15 +217,15 @@ th {
|
||||
background-color: #cc0000;
|
||||
color: white;
|
||||
border: none;
|
||||
padding-inline: 20px; /* Horizontal */
|
||||
padding-block: 10px; /* Vertical */
|
||||
padding-inline: 20px; /* Horizontal */
|
||||
padding-block: 10px; /* Vertical */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-layer-container pre {
|
||||
background-color: #f0f0f0;
|
||||
padding: 10px;
|
||||
overflow-x: auto; /* Horizontal scrolling if needed */
|
||||
overflow-x: auto; /* Horizontal scrolling if needed */
|
||||
}
|
||||
|
||||
.modal-layer-container .logs {
|
||||
@@ -222,4 +233,15 @@ th {
|
||||
padding: 10px;
|
||||
min-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Generic */
|
||||
|
||||
.small-button {
|
||||
background-color: #cc0000;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
Reference in New Issue
Block a user