feat(firewall): Enterprise-UI-Redesign — KPI-Strip, Zone-Badges, Filter-Bar (v1.1.136)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-28 16:39:57 +02:00
parent fa86b14635
commit 76b5a4586c
9 changed files with 458 additions and 83 deletions
--- a/management-ui/src/styles/enterprise.css
+++ b/management-ui/src/styles/enterprise.css
@@ -2764,3 +2764,131 @@ h1, h2, h3, h4, h5, h6 {
  align-items: center;
  justify-content: space-between;
 }
+
+/* ── Firewall Enterprise Redesign ─────────────────────────────────── */
+
+/* KPI strip */
+.fw-kpi-strip {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+.fw-kpi-card {
+  flex: 1;
+  min-width: 150px;
+  background: #fff;
+  border: 1px solid #E2E8F0;
+  border-radius: 8px;
+  padding: 14px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.fw-kpi-card--policy {
+  border-left: 3px solid #EF4444;
+}
+.fw-kpi-label {
+  font-size: 10px;
+  font-weight: 600;
+  color: #64748B;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+}
+.fw-kpi-value {
+  font-size: 26px;
+  font-weight: 700;
+  color: #0F172A;
+  line-height: 1.1;
+  font-variant-numeric: tabular-nums;
+}
+.fw-kpi-value--mono {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 14px;
+  color: #B91C1C;
+  font-weight: 700;
+  letter-spacing: .03em;
+}
+.fw-kpi-sub {
+  font-size: 11px;
+  color: #94A3B8;
+}
+
+/* Action badge */
+.fw-action-badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: .06em;
+  padding: 3px 9px;
+  border-radius: 4px;
+  font-family: 'JetBrains Mono', monospace;
+  white-space: nowrap;
+}
+.fw-action-badge--accept { background: #DCFCE7; color: #15803D; }
+.fw-action-badge--drop   { background: #FEE2E2; color: #B91C1C; }
+.fw-action-badge--reject { background: #FEF3C7; color: #B45309; }
+
+/* Zone badge */
+.fw-zone-badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: .05em;
+  padding: 2px 7px;
+  border-radius: 3px;
+  text-transform: uppercase;
+  font-family: 'JetBrains Mono', monospace;
+  white-space: nowrap;
+}
+.fw-zone-badge--wan     { background: #FEE2E2; color: #B91C1C; border: 1px solid #FECACA; }
+.fw-zone-badge--lan     { background: #DCFCE7; color: #15803D; border: 1px solid #BBF7D0; }
+.fw-zone-badge--dmz     { background: #FEF3C7; color: #B45309; border: 1px solid #FDE68A; }
+.fw-zone-badge--mgmt    { background: #DBEAFE; color: #1D4ED8; border: 1px solid #BFDBFE; }
+.fw-zone-badge--cluster { background: #F3E8FF; color: #7E22CE; border: 1px solid #E9D5FF; }
+.fw-zone-badge--vpn     { background: #E0F2FE; color: #0369A1; border: 1px solid #BAE6FD; }
+.fw-zone-badge--any     { background: #F1F5F9; color: #475569; border: 1px solid #CBD5E1; }
+.fw-zone-badge--default { background: #F1F5F9; color: #475569; border: 1px solid #CBD5E1; }
+
+/* Rule row */
+.fw-rule-row--disabled td {
+  opacity: 0.38;
+}
+.fw-rule-row--disabled td:first-child {
+  opacity: 1 !important;
+}
+
+/* Enabled status dot */
+.fw-rule-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  flex-shrink: 0;
+}
+.fw-rule-dot--on  { background: #22C55E; box-shadow: 0 0 0 2px #DCFCE7; }
+.fw-rule-dot--off { background: #CBD5E1; }
+
+/* Flow arrow */
+.fw-flow-arrow {
+  color: #94A3B8;
+  font-size: 15px;
+  line-height: 1;
+}
+
+/* Filter bar */
+.fw-filter-bar {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+  align-items: center;
+}
+.fw-filter-bar-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}