Implement router provisioning lifecycle and deployment UI
This commit is contained in:
litoral05
+414
-63
@@ -9,46 +9,75 @@ body {
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
button {
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
min-width: 1280px;
|
||||
display: flex;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
/* SIDEBAR */
|
||||
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
width: 250px;
|
||||
background: #0d0d0d;
|
||||
color: white;
|
||||
padding: 24px 16px;
|
||||
padding: 26px 16px 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid #171717;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 36px;
|
||||
gap: 8px;
|
||||
margin-bottom: 34px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 18px;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(135deg, #5da8ff, #b7e236);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-weight: 900;
|
||||
font-size: 24px;
|
||||
color: #0d0d0d;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 115px;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.brand strong {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
letter-spacing: 0.5px;
|
||||
color: #5da8ff;
|
||||
}
|
||||
|
||||
.brand span {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #b7e236;
|
||||
letter-spacing: 2px;
|
||||
font-size: 13px;
|
||||
color: white;
|
||||
letter-spacing: 4px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
nav {
|
||||
@@ -60,12 +89,13 @@ nav button {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: #d1d5db;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 9px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
gap: 11px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
nav button.active,
|
||||
@@ -76,12 +106,24 @@ nav button:hover {
|
||||
|
||||
.status-card {
|
||||
margin-top: auto;
|
||||
background: #1a1a1a;
|
||||
background: #181818;
|
||||
border: 1px solid #262626;
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.status-card strong {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.status-card p {
|
||||
margin: 0;
|
||||
color: #b7e236;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
@@ -91,107 +133,181 @@ nav button:hover {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* MAIN */
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 32px;
|
||||
padding: 30px;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin: 0;
|
||||
font-size: 30px;
|
||||
font-size: 26px;
|
||||
line-height: 1.1;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
margin: 4px 0 0;
|
||||
margin: 6px 0 0;
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.health,
|
||||
.primary {
|
||||
.primary,
|
||||
.secondary {
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
padding: 12px 18px;
|
||||
font-weight: 700;
|
||||
border-radius: 9px;
|
||||
padding: 11px 18px;
|
||||
font-weight: 800;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.health {
|
||||
background: white;
|
||||
color: #111827;
|
||||
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.health::before {
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #b7e236;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
margin-right: 9px;
|
||||
}
|
||||
|
||||
.primary {
|
||||
background: #b7e236;
|
||||
color: #0d0d0d;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.primary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 18px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.metric-card,
|
||||
.panel {
|
||||
background: white;
|
||||
border-radius: 18px;
|
||||
padding: 22px;
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
|
||||
border-radius: 14px;
|
||||
padding: 20px;
|
||||
border: 1px solid #eceff3;
|
||||
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
min-height: 118px;
|
||||
}
|
||||
|
||||
.metric-card span {
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.metric-card strong {
|
||||
display: block;
|
||||
font-size: 34px;
|
||||
margin-top: 8px;
|
||||
margin-top: 10px;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
/* TABLE */
|
||||
|
||||
.panel {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 14px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
padding: 15px 18px;
|
||||
border-bottom: 1px solid #edf0f3;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
th {
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
background: #fbfbfc;
|
||||
}
|
||||
|
||||
td {
|
||||
color: #374151;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
background: #e5e7eb;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.badge.provisioned {
|
||||
.badge::before {
|
||||
content: "";
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.badge.provisioned,
|
||||
.badge.active,
|
||||
.badge.online,
|
||||
.badge.success {
|
||||
color: #16a34a;
|
||||
background: #dcfce7;
|
||||
}
|
||||
|
||||
.badge.pending {
|
||||
.badge.pending,
|
||||
.badge.inactive,
|
||||
.badge.warning {
|
||||
color: #ca8a04;
|
||||
background: #fef9c3;
|
||||
}
|
||||
|
||||
.badge.failed {
|
||||
.badge.failed,
|
||||
.badge.offline {
|
||||
color: #dc2626;
|
||||
background: #fee2e2;
|
||||
}
|
||||
@@ -201,95 +317,330 @@ th {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
/* ERROR */
|
||||
|
||||
.error-banner {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 18px;
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* MODAL */
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.modal {
|
||||
width: 520px;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
|
||||
width: 760px;
|
||||
max-width: calc(100vw - 48px);
|
||||
background: #f7f8fa;
|
||||
border-radius: 18px;
|
||||
padding: 22px;
|
||||
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 22px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.modal-header p {
|
||||
margin: 4px 0 0;
|
||||
margin: 5px 0 0;
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
border: 0;
|
||||
background: #f3f4f6;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.router-form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.router-form label {
|
||||
background: white;
|
||||
border: 1px solid #eceff3;
|
||||
border-radius: 14px;
|
||||
padding: 14px;
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.router-form input {
|
||||
height: 42px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 10px;
|
||||
height: 40px;
|
||||
border: 1px solid #dfe3e8;
|
||||
border-radius: 8px;
|
||||
padding: 0 12px;
|
||||
font: inherit;
|
||||
background: #fbfbfc;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.router-form input:focus {
|
||||
outline: 2px solid rgba(93, 168, 255, 0.25);
|
||||
border-color: #5da8ff;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
border: 0;
|
||||
/* RESPONSIVE */
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.cards {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.router-form {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.router-form select {
|
||||
height: 40px;
|
||||
border: 1px solid #dfe3e8;
|
||||
border-radius: 8px;
|
||||
padding: 0 12px;
|
||||
background: #fbfbfc;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.router-form select:focus {
|
||||
outline: 2px solid rgba(93, 168, 255, 0.25);
|
||||
border-color: #5da8ff;
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.custom-select-button {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: 1px solid #dfe3e8;
|
||||
border-radius: 8px;
|
||||
padding: 0 12px;
|
||||
background: #fbfbfc;
|
||||
color: #111827;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.custom-select-menu {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-height: 220px;
|
||||
overflow-y: auto;
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
padding: 12px 18px;
|
||||
background: #f3f4f6;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.primary:disabled {
|
||||
opacity: 0.6;
|
||||
.custom-select-option {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #111827;
|
||||
text-align: left;
|
||||
padding: 9px 10px;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.custom-select-option:hover {
|
||||
background: #eef6ff;
|
||||
}
|
||||
|
||||
.table-action {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.table-action.danger {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.table-action.danger:hover {
|
||||
background: #fee2e2;
|
||||
}
|
||||
|
||||
.confirm-dialog {
|
||||
width: 430px;
|
||||
background: white;
|
||||
border-radius: 18px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
.confirm-dialog h2 {
|
||||
margin: 0;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.confirm-dialog p {
|
||||
margin: 10px 0 22px;
|
||||
color: #6b7280;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.danger-button {
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
padding: 11px 18px;
|
||||
font-weight: 800;
|
||||
font-size: 14px;
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.danger-button:hover {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.panel-empty {
|
||||
padding: 22px;
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.table-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.small-action {
|
||||
height: 34px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
padding: 0 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
font-weight: 800;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.primary-action {
|
||||
background: #b7e236;
|
||||
color: #0d0d0d;
|
||||
}
|
||||
|
||||
.table-action.warning {
|
||||
color: #ca8a04;
|
||||
}
|
||||
|
||||
.table-action.warning:hover {
|
||||
background: #fef9c3;
|
||||
}
|
||||
|
||||
.table-action:disabled,
|
||||
.small-action:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.warning-action {
|
||||
color: #ca8a04;
|
||||
background: #fef9c3;
|
||||
}
|
||||
|
||||
.table-action:disabled,
|
||||
.small-action:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.deployment-modal {
|
||||
width: 720px;
|
||||
max-width: calc(100vw - 48px);
|
||||
background: white;
|
||||
border-radius: 18px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.deployment-summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 14px;
|
||||
padding: 14px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 800;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.deployment-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.log-box {
|
||||
background: #050505;
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
min-height: 220px;
|
||||
max-height: 360px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.log-box pre {
|
||||
margin: 0;
|
||||
color: #b7e236;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
font-family: "JetBrains Mono", Consolas, monospace;
|
||||
}
|
||||
Reference in New Issue
Block a user