Improve alert handling and UI for Alerts and Dashboard pages
Added expandable alert details to the Alerts page, providing more insights into each warning or alert. Enhanced the Dashboard to display distinct counts for warnings and alerts, along with updated KPIs and improved styling for better visual hierarchy. These changes improve usability and clarity in monitoring alert statuses.
This commit is contained in:
@@ -264,14 +264,21 @@ button {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dashboard-kpis .kpi-card {
|
||||
.dashboard-kpis-grid .kpi-card {
|
||||
border-left: 4px solid #2f7eca;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 12px 30px #0416344d;
|
||||
}
|
||||
|
||||
.dashboard-kpis .kpi-card::after {
|
||||
.dashboard-kpis-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.dashboard-kpis-grid .kpi-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -30px;
|
||||
@@ -282,12 +289,16 @@ button {
|
||||
background: radial-gradient(circle, #5bc2ff33, transparent 70%);
|
||||
}
|
||||
|
||||
.dashboard-kpis .kpi-card.ok {
|
||||
.dashboard-kpis-grid .kpi-card.ok {
|
||||
border-left-color: #2fa86f;
|
||||
}
|
||||
|
||||
.dashboard-kpis .kpi-card.alert {
|
||||
border-left-color: #d47a2a;
|
||||
.dashboard-kpis-grid .kpi-card.warning {
|
||||
border-left-color: #f39c1f;
|
||||
}
|
||||
|
||||
.dashboard-kpis-grid .kpi-card.alert {
|
||||
border-left-color: #ff5f6d;
|
||||
}
|
||||
|
||||
.dashboard-targets-head {
|
||||
@@ -341,6 +352,10 @@ button {
|
||||
background: #f2a43a;
|
||||
}
|
||||
|
||||
.kpi-orb.red {
|
||||
background: #ff5570;
|
||||
}
|
||||
|
||||
.kpi-label {
|
||||
color: #b9d2ed;
|
||||
font-weight: 500;
|
||||
@@ -412,9 +427,15 @@ button {
|
||||
}
|
||||
|
||||
.status-chip.alert {
|
||||
color: #fde68a;
|
||||
background: #3a2c12;
|
||||
border-color: #9b7b2f;
|
||||
color: #fecaca;
|
||||
background: #401724;
|
||||
border-color: #bd4761;
|
||||
}
|
||||
|
||||
.status-chip.warning {
|
||||
color: #ffe4af;
|
||||
background: #3e2b11;
|
||||
border-color: #c78824;
|
||||
}
|
||||
|
||||
.details-btn {
|
||||
@@ -789,13 +810,15 @@ td {
|
||||
}
|
||||
|
||||
.alerts-kpi.warning {
|
||||
border-color: #9a6426;
|
||||
background: linear-gradient(180deg, #342713, #251b0f);
|
||||
border-color: #f39c1f;
|
||||
background: linear-gradient(180deg, #4e300f, #32200d);
|
||||
box-shadow: 0 10px 24px #c6771238, inset 0 1px 0 #ffd28030;
|
||||
}
|
||||
|
||||
.alerts-kpi.alert {
|
||||
border-color: #a53a46;
|
||||
background: linear-gradient(180deg, #381520, #2b1018);
|
||||
border-color: #ff5f6d;
|
||||
background: linear-gradient(180deg, #5a1627, #3b111c);
|
||||
box-shadow: 0 10px 24px #bf2f4f3f, inset 0 1px 0 #ff9aad2e;
|
||||
}
|
||||
|
||||
.alerts-list {
|
||||
@@ -814,13 +837,21 @@ td {
|
||||
}
|
||||
|
||||
.alert-item.warning {
|
||||
border-color: #8a6d34;
|
||||
background: linear-gradient(180deg, #2f2516, #261f15);
|
||||
border-color: #d38f2a;
|
||||
background: linear-gradient(180deg, #4a3012, #34220f);
|
||||
}
|
||||
|
||||
.alert-item.alert {
|
||||
border-color: #9f3e4a;
|
||||
background: linear-gradient(180deg, #361822, #2d131b);
|
||||
border-color: #d8526a;
|
||||
background: linear-gradient(180deg, #52202e, #38151f);
|
||||
}
|
||||
|
||||
.alert-item:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.alert-item.is-open {
|
||||
box-shadow: 0 14px 28px #07163166;
|
||||
}
|
||||
|
||||
.alert-item-head {
|
||||
@@ -855,15 +886,54 @@ td {
|
||||
}
|
||||
|
||||
.alert-badge.warning {
|
||||
color: #f9d8a8;
|
||||
background: #3a2c16;
|
||||
border-color: #a1742f;
|
||||
color: #ffe8bf;
|
||||
background: #5d370f;
|
||||
border-color: #e79f3a;
|
||||
}
|
||||
|
||||
.alert-badge.alert {
|
||||
color: #fecaca;
|
||||
background: #3a1620;
|
||||
border-color: #ad4552;
|
||||
color: #ffe0e4;
|
||||
background: #5e1929;
|
||||
border-color: #f06a81;
|
||||
}
|
||||
|
||||
.alert-details-grid {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #ffffff20;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px 12px;
|
||||
}
|
||||
|
||||
.alert-details-grid div {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.alert-details-grid span {
|
||||
font-size: 11px;
|
||||
color: #b7cbe6;
|
||||
}
|
||||
|
||||
.alert-details-grid strong {
|
||||
font-size: 13px;
|
||||
color: #edf4ff;
|
||||
}
|
||||
|
||||
.alert-sql {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 4px;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
background: #081a33a6;
|
||||
border: 1px solid #376097;
|
||||
}
|
||||
|
||||
.alert-sql code {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.alert-form .field-full {
|
||||
@@ -1161,6 +1231,9 @@ select:-webkit-autofill {
|
||||
.grid.three {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.dashboard-kpis-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.main {
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
|
||||
Reference in New Issue
Block a user