theme
This commit is contained in:
@@ -1,12 +1,26 @@
|
|||||||
:root {
|
:root {
|
||||||
--primary: #2563eb;
|
--primary: #3b82f6;
|
||||||
--primary-dark: #1e40af;
|
/* Blue 500 */
|
||||||
|
--primary-dark: #2563eb;
|
||||||
|
/* Blue 600 */
|
||||||
--success: #10b981;
|
--success: #10b981;
|
||||||
|
/* Emerald 500 */
|
||||||
--danger: #ef4444;
|
--danger: #ef4444;
|
||||||
|
/* Red 500 */
|
||||||
--warning: #f59e0b;
|
--warning: #f59e0b;
|
||||||
--dark: #1f2937;
|
/* Amber 500 */
|
||||||
--light: #f3f4f6;
|
--dark: #f8fafc;
|
||||||
--border: #e5e7eb;
|
/* Slate 50 (Text) */
|
||||||
|
--bg-dark: #0f172a;
|
||||||
|
/* Slate 900 (Body) */
|
||||||
|
--bg-panel: #1e293b;
|
||||||
|
/* Slate 800 (Panels) */
|
||||||
|
--bg-input: #334155;
|
||||||
|
/* Slate 700 (Inputs) */
|
||||||
|
--border: #334155;
|
||||||
|
/* Slate 700 */
|
||||||
|
--text-muted: #94a3b8;
|
||||||
|
/* Slate 400 */
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@@ -16,8 +30,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
|
background: var(--bg-dark);
|
||||||
|
color: var(--dark);
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -36,12 +51,13 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.login-box {
|
.login-box {
|
||||||
background: white;
|
background: var(--bg-panel);
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
border-radius: 12px;
|
border-radius: 16px;
|
||||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
@@ -58,6 +74,7 @@ body {
|
|||||||
color: var(--dark);
|
color: var(--dark);
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
@@ -67,21 +84,25 @@ body {
|
|||||||
.form-group label {
|
.form-group label {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
color: var(--dark);
|
color: var(--text-muted);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control {
|
.form-control {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
border: 2px solid var(--border);
|
background: var(--bg-input);
|
||||||
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
color: var(--dark);
|
||||||
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control:focus {
|
.form-control:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: var(--primary);
|
border-color: var(--primary);
|
||||||
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
@@ -127,25 +148,26 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.alert-success {
|
.alert-success {
|
||||||
background: #d1fae5;
|
background: rgba(16, 185, 129, 0.1);
|
||||||
color: #065f46;
|
color: #34d399;
|
||||||
border: 1px solid #10b981;
|
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-error {
|
.alert-error {
|
||||||
background: #fee2e2;
|
background: rgba(239, 68, 68, 0.1);
|
||||||
color: #991b1b;
|
color: #f87171;
|
||||||
border: 1px solid #ef4444;
|
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navbar */
|
/* Navbar */
|
||||||
.navbar {
|
.navbar {
|
||||||
background: white;
|
background: var(--bg-panel);
|
||||||
padding: 15px 30px;
|
padding: 15px 30px;
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
@@ -161,6 +183,7 @@ body {
|
|||||||
.navbar-brand h2 {
|
.navbar-brand h2 {
|
||||||
color: var(--dark);
|
color: var(--dark);
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-menu {
|
.navbar-menu {
|
||||||
@@ -170,7 +193,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.navbar-menu a {
|
.navbar-menu a {
|
||||||
color: var(--dark);
|
color: var(--text-muted);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
transition: color 0.3s;
|
transition: color 0.3s;
|
||||||
@@ -190,11 +213,12 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
background: white;
|
background: var(--bg-panel);
|
||||||
border-radius: 12px;
|
border-radius: 16px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-header {
|
.panel-header {
|
||||||
@@ -203,12 +227,13 @@ body {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
padding-bottom: 15px;
|
padding-bottom: 15px;
|
||||||
border-bottom: 2px solid var(--border);
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-header h3 {
|
.panel-header h3 {
|
||||||
color: var(--dark);
|
color: var(--dark);
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Job List */
|
/* Job List */
|
||||||
@@ -220,10 +245,11 @@ body {
|
|||||||
|
|
||||||
.job-item {
|
.job-item {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border: 2px solid var(--border);
|
background: var(--bg-input);
|
||||||
border-radius: 8px;
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s;
|
transition: all 0.2s;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
@@ -231,12 +257,12 @@ body {
|
|||||||
|
|
||||||
.job-item:hover {
|
.job-item:hover {
|
||||||
border-color: var(--primary);
|
border-color: var(--primary);
|
||||||
background: var(--light);
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.job-item.active {
|
.job-item.active {
|
||||||
border-color: var(--primary);
|
border-color: var(--primary);
|
||||||
background: #eff6ff;
|
background: rgba(59, 130, 246, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.job-status-icon {
|
.job-status-icon {
|
||||||
@@ -247,10 +273,11 @@ body {
|
|||||||
color: var(--dark);
|
color: var(--dark);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.job-info p {
|
.job-info p {
|
||||||
color: #6b7280;
|
color: var(--text-muted);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -272,11 +299,11 @@ body {
|
|||||||
|
|
||||||
.detail-label {
|
.detail-label {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--dark);
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-value {
|
.detail-value {
|
||||||
color: #4b5563;
|
color: var(--dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-badge {
|
.status-badge {
|
||||||
@@ -288,32 +315,43 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.status-in_progress {
|
.status-in_progress {
|
||||||
background: #fef3c7;
|
background: rgba(245, 158, 11, 0.1);
|
||||||
color: #92400e;
|
color: #fbbf24;
|
||||||
|
border: 1px solid rgba(245, 158, 11, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-passed {
|
.status-passed {
|
||||||
background: #d1fae5;
|
background: rgba(16, 185, 129, 0.1);
|
||||||
color: #065f46;
|
color: #34d399;
|
||||||
|
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-failed {
|
.status-failed {
|
||||||
background: #fee2e2;
|
background: rgba(239, 68, 68, 0.1);
|
||||||
color: #991b1b;
|
color: #f87171;
|
||||||
|
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-aborted {
|
.status-aborted {
|
||||||
background: #f3f4f6;
|
background: rgba(148, 163, 184, 0.1);
|
||||||
color: #374151;
|
color: #cbd5e1;
|
||||||
|
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-waiting {
|
||||||
|
background: rgba(245, 158, 11, 0.1);
|
||||||
|
color: #fbbf24;
|
||||||
|
border: 1px solid rgba(245, 158, 11, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Admin Dashboard */
|
/* Admin Dashboard */
|
||||||
.admin-container {
|
.admin-container {
|
||||||
background: white;
|
background: var(--bg-panel);
|
||||||
border-radius: 12px;
|
border-radius: 16px;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-header {
|
.admin-header {
|
||||||
@@ -333,7 +371,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.user-table th {
|
.user-table th {
|
||||||
background: var(--light);
|
background: var(--bg-input);
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -344,10 +382,11 @@ body {
|
|||||||
.user-table td {
|
.user-table td {
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border);
|
||||||
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-table tr:hover {
|
.user-table tr:hover {
|
||||||
background: var(--light);
|
background: rgba(255, 255, 255, 0.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
@@ -359,13 +398,13 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.badge-admin {
|
.badge-admin {
|
||||||
background: #dbeafe;
|
background: rgba(59, 130, 246, 0.1);
|
||||||
color: #1e40af;
|
color: #60a5fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge-user {
|
.badge-user {
|
||||||
background: #f3f4f6;
|
background: rgba(148, 163, 184, 0.1);
|
||||||
color: #374151;
|
color: #cbd5e1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Modal */
|
/* Modal */
|
||||||
@@ -376,8 +415,9 @@ body {
|
|||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: rgba(0, 0, 0, 0.5);
|
background: rgba(0, 0, 0, 0.7);
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal.active {
|
.modal.active {
|
||||||
@@ -387,11 +427,13 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
background: white;
|
background: var(--bg-panel);
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
border-radius: 12px;
|
border-radius: 16px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-header {
|
.modal-header {
|
||||||
@@ -410,19 +452,24 @@ body {
|
|||||||
border: none;
|
border: none;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #6b7280;
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-btn:hover {
|
||||||
|
color: var(--dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Submit Form */
|
/* Submit Form */
|
||||||
.submit-container {
|
.submit-container {
|
||||||
background: white;
|
background: var(--bg-panel);
|
||||||
border-radius: 12px;
|
border-radius: 16px;
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-indicator {
|
.step-indicator {
|
||||||
@@ -455,29 +502,33 @@ body {
|
|||||||
.step.active .step-number {
|
.step.active .step-number {
|
||||||
background: var(--primary);
|
background: var(--primary);
|
||||||
color: white;
|
color: white;
|
||||||
|
border-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step.completed .step-number {
|
.step.completed .step-number {
|
||||||
background: var(--success);
|
background: var(--success);
|
||||||
color: white;
|
color: white;
|
||||||
|
border-color: var(--success);
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-number {
|
.step-number {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--border);
|
background: var(--bg-input);
|
||||||
color: var(--dark);
|
border: 2px solid var(--border);
|
||||||
|
color: var(--text-muted);
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
|
transition: all 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.step-label {
|
.step-label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #6b7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox-group {
|
.checkbox-group {
|
||||||
@@ -491,11 +542,13 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
color: var(--dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox-item input[type="checkbox"] {
|
.checkbox-item input[type="checkbox"] {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
accent-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio-group {
|
.radio-group {
|
||||||
@@ -510,15 +563,22 @@ body {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
border: 2px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
background: var(--bg-input);
|
||||||
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio-item:hover {
|
.radio-item:hover {
|
||||||
border-color: var(--primary);
|
border-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.radio-item label {
|
||||||
|
color: var(--dark);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.radio-item input[type="radio"]:checked+label {
|
.radio-item input[type="radio"]:checked+label {
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -534,21 +594,22 @@ body {
|
|||||||
.empty-state {
|
.empty-state {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 60px 20px;
|
padding: 60px 20px;
|
||||||
color: #6b7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-state h3 {
|
.empty-state h3 {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
color: var(--dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Context Menu */
|
/* Context Menu */
|
||||||
.context-menu {
|
.context-menu {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: white;
|
background: var(--bg-panel);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
}
|
}
|
||||||
@@ -560,10 +621,11 @@ body {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
transition: background-color 0.2s;
|
transition: background-color 0.2s;
|
||||||
|
color: var(--dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.context-menu-item:hover {
|
.context-menu-item:hover {
|
||||||
background: var(--light);
|
background: var(--bg-input);
|
||||||
}
|
}
|
||||||
|
|
||||||
.context-menu-item:first-child {
|
.context-menu-item:first-child {
|
||||||
@@ -587,28 +649,28 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.branch-validation.success {
|
.branch-validation.success {
|
||||||
background: #d1fae5;
|
background: rgba(16, 185, 129, 0.1);
|
||||||
color: #065f46;
|
color: #34d399;
|
||||||
border: 1px solid #10b981;
|
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.branch-validation.error {
|
.branch-validation.error {
|
||||||
background: #fee2e2;
|
background: rgba(239, 68, 68, 0.1);
|
||||||
color: #991b1b;
|
color: #f87171;
|
||||||
border: 1px solid #ef4444;
|
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.branch-validation.loading {
|
.branch-validation.loading {
|
||||||
background: #fef3c7;
|
background: rgba(245, 158, 11, 0.1);
|
||||||
color: #92400e;
|
color: #fbbf24;
|
||||||
border: 1px solid #f59e0b;
|
border: 1px solid rgba(245, 158, 11, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-spinner {
|
.loading-spinner {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
border: 2px solid #f3f3f3;
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||||
border-top: 2px solid var(--primary);
|
border-top: 2px solid var(--primary);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: spin 1s linear infinite;
|
animation: spin 1s linear infinite;
|
||||||
@@ -626,27 +688,29 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn:disabled {
|
.btn:disabled {
|
||||||
background: #9ca3af;
|
background: var(--bg-input);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scenario Tree Styles */
|
/* Scenario Tree Styles */
|
||||||
.scenario-controls {
|
.scenario-controls {
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
background: var(--light);
|
background: var(--bg-input);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.scenario-tree {
|
.scenario-tree {
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: white;
|
background: var(--bg-panel);
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
@@ -673,6 +737,7 @@ body {
|
|||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
color: var(--dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree-toggle {
|
.tree-toggle {
|
||||||
@@ -707,13 +772,13 @@ body {
|
|||||||
.stack-label {
|
.stack-label {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #4b5563;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.scenario-label {
|
.scenario-label {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #6b7280;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree-children {
|
.tree-children {
|
||||||
@@ -726,6 +791,7 @@ body {
|
|||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
accent-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.layer-node:hover {
|
.layer-node:hover {
|
||||||
@@ -768,28 +834,63 @@ input[type="checkbox"]:indeterminate::before {
|
|||||||
#scenarioTable {
|
#scenarioTable {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
}
|
}
|
||||||
|
|
||||||
#scenarioTable th {
|
#scenarioTable th {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: #f8fafc;
|
background: var(--bg-input);
|
||||||
|
color: var(--dark);
|
||||||
|
text-align: left;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
#scenarioTable td {
|
#scenarioTable td {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
#queue-log {
|
#queue-log {
|
||||||
border: 1px solid #333;
|
border: 1px solid var(--border);
|
||||||
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
|
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
background: #000;
|
||||||
|
color: #0f0;
|
||||||
|
padding: 10px;
|
||||||
|
font-family: monospace;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scenarioSearch {
|
||||||
|
background: var(--bg-input);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
color: var(--dark);
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#scenarioSearch:focus {
|
#scenarioSearch:focus {
|
||||||
border-color: var(--primary);
|
border-color: var(--primary);
|
||||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-waiting {
|
/* Scrollbar Styling */
|
||||||
background: #fef3c7;
|
::-webkit-scrollbar {
|
||||||
color: #92400e;
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--bg-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--border);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--text-muted);
|
||||||
}
|
}
|
||||||
142
doc/api.md
142
doc/api.md
@@ -1,48 +1,130 @@
|
|||||||
# TestArena API Reference
|
# TestArena API Reference
|
||||||
|
|
||||||
|
TestArena provides a RESTful API for programmatic job submission and status monitoring.
|
||||||
|
|
||||||
## Base URL
|
## Base URL
|
||||||
`http://<server-ip>:8080/api`
|
|
||||||
|
All API endpoints are prefixed with `/api`.
|
||||||
|
|
||||||
|
```
|
||||||
|
http://<your-server>/api
|
||||||
|
```
|
||||||
|
|
||||||
|
## Authentication
|
||||||
|
|
||||||
|
The API uses Basic Authentication. You must provide your username and password in the request body for job submission.
|
||||||
|
|
||||||
## Endpoints
|
## Endpoints
|
||||||
|
|
||||||
### 1. Submit a New Queue
|
### 1. Submit Job
|
||||||
`POST /queue`
|
|
||||||
Submits a new set of tasks to the execution queue.
|
Submit a new test job to the queue.
|
||||||
**Payload:**
|
|
||||||
|
- **URL**: `/submit_job`
|
||||||
|
- **Method**: `POST`
|
||||||
|
- **Content-Type**: `application/json`
|
||||||
|
|
||||||
|
#### Request Body
|
||||||
|
|
||||||
|
| Field | Type | Required | Description |
|
||||||
|
| :--- | :--- | :--- | :--- |
|
||||||
|
| `username` | string | Yes | Your TestArena username |
|
||||||
|
| `password` | string | Yes | Your TestArena password |
|
||||||
|
| `branch_name` | string | Yes | Git branch name to test |
|
||||||
|
| `scenarios` | array | Yes | List of scenario names to execute |
|
||||||
|
|
||||||
|
#### Example Request
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl -X POST http://localhost:5000/api/submit_job \
|
||||||
|
-H "Content-Type: application/json" \
|
||||||
|
-d '{
|
||||||
|
"username": "admin",
|
||||||
|
"password": "your_password",
|
||||||
|
"branch_name": "feature/new-driver",
|
||||||
|
"scenarios": ["adc_init_test", "gpio_init_test"]
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Success Response
|
||||||
|
|
||||||
|
**Code**: `200 OK`
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"source": "branch_name",
|
"success": true,
|
||||||
"job_id": [
|
"job_id": 123,
|
||||||
"environment",
|
"status": "waiting",
|
||||||
{
|
"remote_triggered": true,
|
||||||
"task_id": "scenario_path"
|
"message": "Job submitted successfully"
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### 2. Get Status
|
#### Error Response
|
||||||
`GET /status/{id}`
|
|
||||||
Gets the status of a specific queue or task.
|
|
||||||
|
|
||||||
### 3. Abort Queue or Task
|
**Code**: `401 Unauthorized`
|
||||||
`POST /abort/{id}`
|
|
||||||
Aborts a waiting or running queue or a single task.
|
|
||||||
|
|
||||||
### 4. Delete Queue
|
```json
|
||||||
`DELETE /delete/{id}`
|
{
|
||||||
Permanently deletes a queue and its associated data.
|
"error": "Invalid credentials"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
## Local API (Web App)
|
**Code**: `400 Bad Request`
|
||||||
|
|
||||||
### Get Job Details
|
```json
|
||||||
`GET /jobs/{job_id}`
|
{
|
||||||
|
"error": "Missing required fields: username, password, branch_name, scenarios"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
### Get Job Status (Triggers Update)
|
---
|
||||||
`GET /jobs/{job_id}/status`
|
|
||||||
|
|
||||||
### Abort Job
|
### 2. Get Job Status
|
||||||
`POST /jobs/{job_id}/abort`
|
|
||||||
|
|
||||||
### Delete Job
|
Retrieve the status and details of a specific job.
|
||||||
`POST /jobs/{job_id}/delete`
|
|
||||||
|
- **URL**: `/job/<job_id>`
|
||||||
|
- **Method**: `GET`
|
||||||
|
|
||||||
|
#### URL Parameters
|
||||||
|
|
||||||
|
| Parameter | Type | Required | Description |
|
||||||
|
| :--- | :--- | :--- | :--- |
|
||||||
|
| `job_id` | integer | Yes | The ID of the job to retrieve |
|
||||||
|
|
||||||
|
#### Example Request
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl http://localhost:5000/api/job/123
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Success Response
|
||||||
|
|
||||||
|
**Code**: `200 OK`
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"job_id": 123,
|
||||||
|
"status": "in_progress",
|
||||||
|
"branch_name": "feature/new-driver",
|
||||||
|
"scenarios": ["adc_init_test", "gpio_init_test"],
|
||||||
|
"remote_results": {
|
||||||
|
"adc_init_test": ["PASS", "http://.../report.html"],
|
||||||
|
"gpio_init_test": ["FAIL", "http://.../report.html"]
|
||||||
|
},
|
||||||
|
"created_at": "2023-10-27T10:00:00",
|
||||||
|
"completed_at": null,
|
||||||
|
"remote_queue_id": "123"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Error Response
|
||||||
|
|
||||||
|
**Code**: `404 Not Found`
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"error": "Job not found"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|||||||
@@ -1,41 +1,60 @@
|
|||||||
# TestArena Architecture Documentation
|
# TestArena Architecture
|
||||||
|
|
||||||
## Overview
|
TestArena is a web-based platform for managing and executing automated tests on remote hardware setups. It acts as a central hub for users to submit test jobs, monitor execution, and view results.
|
||||||
TestArena is a web-based test management and execution platform designed to orchestrate test scenarios across different environments. It consists of a Flask-based frontend/backend that communicates with a remote execution server.
|
|
||||||
|
|
||||||
## System Components
|
## System Overview
|
||||||
|
|
||||||
### 1. Web Application (Flask)
|
The system consists of three main layers:
|
||||||
- **Frontend**: Built with HTML, CSS (Vanilla), and JavaScript. Provides a dashboard for monitoring jobs, submitting new tests, and viewing logs.
|
|
||||||
- **Backend**: Flask server handling authentication, job management, and API requests.
|
|
||||||
- **Database**: PostgreSQL (in Docker) or SQLite. Managed via SQLAlchemy. Stores users and job history.
|
|
||||||
|
|
||||||
### 2. Remote Execution Server
|
1. **Web Frontend (Flask)**:
|
||||||
- Handles the actual execution of test scenarios.
|
- Provides the user interface for job submission, dashboard monitoring, and administration.
|
||||||
- Exposes APIs for queueing, status polling, and aborting/deleting jobs.
|
- Handles user authentication and input validation.
|
||||||
- Provides access to execution logs and results.
|
- Exposes REST APIs for programmatic access.
|
||||||
|
|
||||||
## Key Workflows
|
2. **Backend Logic (Python/Flask)**:
|
||||||
|
- **Job Management**: Manages the lifecycle of test jobs (Waiting -> In Progress -> Passed/Failed).
|
||||||
|
- **Remote Execution**: Communicates with the remote test server via HTTP APIs to trigger queues and poll status.
|
||||||
|
- **Database**: Uses SQLite (via SQLAlchemy) to store user data, job history, and results.
|
||||||
|
|
||||||
### Job Submission
|
3. **Remote Test Server (External)**:
|
||||||
1. User selects a branch and validates it via SSH on the remote server.
|
- Executes the actual test scenarios on hardware/simulators.
|
||||||
2. User selects test scenarios to run.
|
- Exposes APIs for queue management (`/api/queue`, `/api/status`, `/api/abort`).
|
||||||
3. User reviews and submits the job.
|
- Hosts the test results and logs.
|
||||||
4. The web app creates a local `Job` record and sends a POST request to the remote `/api/queue` endpoint using the local Job ID as the `remote_queue_id`.
|
|
||||||
|
|
||||||
### Status Polling
|
## Key Components
|
||||||
1. A background thread in the Flask app polls the remote server every 20 seconds for all `waiting` or `in_progress` jobs.
|
|
||||||
2. The dashboard also polls the local API every 5 seconds when a job is being viewed to provide real-time updates.
|
|
||||||
3. Tab persistence is handled in the frontend to ensure the user's view (Scenarios vs Logs) is maintained during polling.
|
|
||||||
|
|
||||||
### Job Search (Global)
|
### 1. Job Processing Flow
|
||||||
- Users can search for jobs by **Job ID** or **Username** globally.
|
|
||||||
- By default, non-admin users only see their own jobs. Searching allows them to see others' jobs if they have the ID or username.
|
|
||||||
|
|
||||||
### Job Abort/Delete
|
1. **Submission**: User submits a job via UI or API (`POST /api/submit_job`).
|
||||||
- Users can abort running jobs or delete them entirely. These actions are synchronized with the remote server using the `POST /abort/{id}` and `DELETE /delete/{id}` APIs.
|
2. **Validation**: System validates credentials and branch existence (via SSH).
|
||||||
|
3. **Queueing**: A local `Job` record is created. The system sends a payload to the Remote Server's `/api/queue` endpoint.
|
||||||
|
4. **Monitoring**: A background thread in the Flask app polls the Remote Server every 20 seconds.
|
||||||
|
- Checks Queue Status (`/api/status/<queue_id>`).
|
||||||
|
- Checks Task Status (`/api/status/<task_id>`).
|
||||||
|
- Updates local DB with progress and results.
|
||||||
|
5. **Completion**:
|
||||||
|
- When all tasks finish, the job is marked as `passed` or `failed`.
|
||||||
|
- **Cleanup**: An SSH command is automatically executed to clean up the remote workspace.
|
||||||
|
- **Timeout**: If a job runs > 1 hour, it is auto-aborted.
|
||||||
|
|
||||||
## Technology Stack
|
### 2. Database Schema
|
||||||
- **Backend**: Python, Flask, Flask-SQLAlchemy, Flask-Login, Requests.
|
|
||||||
- **Frontend**: HTML5, CSS3, JavaScript (ES6).
|
- **Users**: `id`, `username`, `password_hash`, `is_admin`
|
||||||
- **Remote Communication**: REST API, SSH (for branch validation and scenario scanning).
|
- **Jobs**: `id`, `user_id`, `branch_name`, `scenarios`, `status`, `remote_queue_id`, `remote_results`, `queue_log`
|
||||||
|
|
||||||
|
### 3. API Layer
|
||||||
|
|
||||||
|
- **`POST /api/submit_job`**: Programmatic job submission.
|
||||||
|
- **`GET /api/job/<id>`**: Status retrieval.
|
||||||
|
|
||||||
|
## Deployment
|
||||||
|
|
||||||
|
- **Containerization**: Docker & Docker Compose.
|
||||||
|
- **Web Server**: Gunicorn (WSGI) behind Caddy (Reverse Proxy/SSL).
|
||||||
|
- **Database**: SQLite (Persistent volume).
|
||||||
|
|
||||||
|
## Security
|
||||||
|
|
||||||
|
- **Authentication**: Flask-Login for UI, Basic Auth for API.
|
||||||
|
- **SSH**: Uses `sshpass` with strict host checking disabled (internal network) for remote operations.
|
||||||
|
- **Environment**: Secrets managed via `.env` file.
|
||||||
|
|||||||
Reference in New Issue
Block a user