-
Logs and Command History
-
-
Severity:
-
- All
- INFO
- WARN
- DEBUG
- ERROR
-
-
-
Type:
-
- All
-
-
-
Date Range:
-
-
Apply
+
Logs and Command History
+
-
- Search
-
-
-
-
- EntryID
- Timestamp
- Severity
- TraceID
- Message
-
-
-
-
- 00002
- 2023-08-17 10:15
- INFO
- abc123
-
- Generating new certClick to see command output...
-
-
-
- 00003
- 2023-08-17 10:14
- WARN
- def456
- Cert not exists
-
-
- 00004
- 2023-08-17 10:13
- DEBUG
- def456
- Request revoke
-
-
- 00005
- 2023-08-17 10:12
- ERROR
- ghi789
- Permission denied
-
-
-
-
Load More
+
Load More
\ No newline at end of file
diff --git a/front/main.html b/front/main.html
index 5ddda1c..b23756c 100644
--- a/front/main.html
+++ b/front/main.html
@@ -9,16 +9,16 @@
-
SSH Cert Manager
-
-
Certificate Management
-
+
Certificate Management
+
-
Generate New Certificate
+
Generate New Certificate
@@ -110,6 +110,7 @@
Duration:
+
minutes
hours
diff --git a/front/styles.css b/front/styles.css
index 6560bc1..5833057 100644
--- a/front/styles.css
+++ b/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;
}
\ No newline at end of file