Add alert management functionality in backend and frontend
This commit introduces alert management capabilities, including creating, updating, listing, and removing custom SQL-based alerts in the backend. It adds the necessary database migrations, API endpoints, and frontend pages to manage alerts, enabling users to define thresholds and monitor system health effectively.
This commit is contained in:
@@ -225,6 +225,7 @@ a {
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
button {
|
||||
background: #0f2750;
|
||||
color: var(--text);
|
||||
@@ -730,6 +731,11 @@ details[open] .collapse-chevron {
|
||||
border-color: #be3f63;
|
||||
}
|
||||
|
||||
.small-btn {
|
||||
min-height: 30px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -763,6 +769,121 @@ td {
|
||||
border-color: #7f1d1d;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: #9eb8d6;
|
||||
}
|
||||
|
||||
.alerts-subtitle {
|
||||
margin-top: 2px;
|
||||
color: #a6c0df;
|
||||
}
|
||||
|
||||
.alerts-kpis .alerts-kpi {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.alerts-kpi strong {
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.alerts-kpi.warning {
|
||||
border-color: #9a6426;
|
||||
background: linear-gradient(180deg, #342713, #251b0f);
|
||||
}
|
||||
|
||||
.alerts-kpi.alert {
|
||||
border-color: #a53a46;
|
||||
background: linear-gradient(180deg, #381520, #2b1018);
|
||||
}
|
||||
|
||||
.alerts-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
max-height: 520px;
|
||||
overflow: auto;
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
.alert-item {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #375d8f;
|
||||
background: #10294f;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.alert-item.warning {
|
||||
border-color: #8a6d34;
|
||||
background: linear-gradient(180deg, #2f2516, #261f15);
|
||||
}
|
||||
|
||||
.alert-item.alert {
|
||||
border-color: #9f3e4a;
|
||||
background: linear-gradient(180deg, #361822, #2d131b);
|
||||
}
|
||||
|
||||
.alert-item-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.alert-item-head small {
|
||||
color: #c3d5ef;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.alert-item p {
|
||||
margin: 4px 0;
|
||||
color: #d3e5fb;
|
||||
}
|
||||
|
||||
.alert-message {
|
||||
font-size: 13px;
|
||||
color: #b6cae8;
|
||||
}
|
||||
|
||||
.alert-badge {
|
||||
display: inline-block;
|
||||
border-radius: 999px;
|
||||
padding: 3px 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.alert-badge.warning {
|
||||
color: #f9d8a8;
|
||||
background: #3a2c16;
|
||||
border-color: #a1742f;
|
||||
}
|
||||
|
||||
.alert-badge.alert {
|
||||
color: #fecaca;
|
||||
background: #3a1620;
|
||||
border-color: #ad4552;
|
||||
}
|
||||
|
||||
.alert-form .field-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.alert-form textarea {
|
||||
width: 100%;
|
||||
min-height: 90px;
|
||||
resize: vertical;
|
||||
font-family: "JetBrains Mono", "Consolas", monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.alert-form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.range-picker {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
Reference in New Issue
Block a user