CLI Output Parser & Health Analyzer
.calc-container {
max-width: 1000px;
margin: 20px auto;
padding: 20px;
}
.calc-header {
margin-bottom: 30px;
padding: 25px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
color: white;
}
.calc-header h2 {
margin-top: 0;
color: white;
font-size: 28px;
margin-bottom: 10px;
}
.calc-header p {
margin: 10px 0 20px 0;
opacity: 0.95;
font-size: 15px;
}
.input-section {
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.section-title {
margin-top: 0;
margin-bottom: 20px;
color: #333;
border-left: 5px solid #667eea;
padding-left: 15px;
font-size: 20px;
}
.vendor-selector {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.vendor-btn {
padding: 10px 20px;
border: 2px solid #667eea;
background: white;
color: #667eea;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
}
.vendor-btn:hover {
background: #f0f0ff;
transform: translateY(-1px);
}
.vendor-btn.active {
background: #667eea;
color: white;
}
.command-suggestions {
background: #f8f9fa;
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
}
.command-suggestions h3 {
margin-bottom: 15px;
color: #333;
}
.command-chips {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.command-chip {
background: white;
border: 1px solid #dee2e6;
padding: 8px 16px;
border-radius: 20px;
font-family: 'Courier New', monospace;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
color: inherit;
}
.command-chip:hover {
background: #667eea;
color: white;
border-color: #667eea;
}
.command-chip:focus {
outline: none;
background: #667eea;
color: white;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}
.command-chip:active {
transform: scale(0.98);
}
.input-area {
margin-bottom: 20px;
}
.input-area label {
display: block;
margin-bottom: 10px;
font-weight: 600;
color: #333;
}
#cliInput {
width: 100%;
min-height: 300px;
padding: 15px;
border: 2px solid #ced4da;
border-radius: 6px;
font-family: 'Courier New', monospace;
font-size: 13px;
resize: vertical;
transition: all 0.3s ease;
}
#cliInput:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}
.button-group {
display: flex;
gap: 15px;
margin-bottom: 30px;
}
.btn {
padding: 12px 30px;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.btn-primary {
background: #4CAF50;
color: white;
}
.btn-primary:hover {
background: #45a049;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.btn-primary:active {
background: #3d8b40;
transform: translateY(0);
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover {
background: #5a6268;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.results-section {
display: none;
}
.results-section.active {
display: block;
}
.summary-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.summary-card {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
border-left: 5px solid #667eea;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.summary-card.warning {
border-left-color: #ffc107;
}
.summary-card.error {
border-left-color: #dc3545;
}
.summary-card.success {
border-left-color: #4CAF50;
}
.summary-card h3 {
font-size: 14px;
color: #6c757d;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.summary-card .value {
font-size: 32px;
font-weight: bold;
color: #333;
}
.chassis-visualization {
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.chassis-visualization h3 {
margin-top: 0;
margin-bottom: 20px;
color: #333;
border-left: 5px solid #667eea;
padding-left: 15px;
font-size: 20px;
}
.chassis-container {
display: flex;
flex-direction: column;
gap: 15px;
}
.slot-row {
background: white;
border: 2px solid #dee2e6;
border-radius: 8px;
padding: 15px;
}
.slot-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #dee2e6;
}
.slot-title {
font-weight: bold;
font-size: 16px;
}
.slot-stats {
font-size: 14px;
color: #6c757d;
}
.ports-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
gap: 8px;
}
.port-box {
background: #4CAF50;
color: white;
padding: 8px;
border-radius: 6px;
text-align: center;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
position: relative;
}
.port-box:hover {
transform: scale(1.1);
z-index: 10;
}
.port-box.warning {
background: #ffc107;
color: #000;
}
.port-box.error {
background: #dc3545;
}
.port-box.disabled {
background: #6c757d;
}
.port-box.down {
background: #adb5bd;
}
.port-tooltip {
display: none;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 8px 12px;
border-radius: 6px;
font-size: 12px;
white-space: nowrap;
z-index: 100;
margin-bottom: 5px;
}
.port-box:hover .port-tooltip {
display: block;
}
.interface-table {
margin-top: 30px;
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.interface-table h3 {
margin-top: 0;
margin-bottom: 20px;
color: #333;
border-left: 5px solid #667eea;
padding-left: 15px;
font-size: 20px;
}
.interface-table table {
width: 100%;
border-collapse: collapse;
background: white;
}
.interface-table th {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
color: white;
padding: 12px;
text-align: left;
font-weight: 600;
position: sticky;
top: 0;
z-index: 10;
}
.interface-table td {
padding: 12px;
border-bottom: 1px solid #dee2e6;
}
.interface-table tr:hover {
background: #f8f9fa;
}
.status-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
.status-up {
background: #d4edda;
color: #155724;
}
.status-down {
background: #f8d7da;
color: #721c24;
}
.status-admin-down {
background: #d6d8db;
color: #383d41;
}
.error-count {
color: #dc3545;
font-weight: bold;
}
.filter-controls {
display: flex;
gap: 15px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.filter-controls select,
.filter-controls input {
padding: 8px 12px;
border: 1px solid #dee2e6;
border-radius: 6px;
font-size: 14px;
}
.legend {
display: flex;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 20px;
padding: 15px;
background: white;
border-radius: 8px;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
}
.legend-box {
width: 20px;
height: 20px;
border-radius: 4px;
}
.export-section {
margin-top: 30px;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
}
.export-section h3 {
margin-bottom: 15px;
}
/* Three-Step Onboarding Wizard */
.onboarding-wizard {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
margin-bottom: 30px;
}
.wizard-steps {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
position: relative;
}
.wizard-steps::before {
content: '';
position: absolute;
top: 20px;
left: 60px;
right: 60px;
height: 2px;
background: #dee2e6;
z-index: 0;
}
.wizard-step {
flex: 1;
text-align: center;
position: relative;
z-index: 1;
}
.step-circle {
width: 40px;
height: 40px;
border-radius: 50%;
background: #dee2e6;
color: #6c757d;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
font-weight: bold;
transition: all 0.3s ease;
}
.wizard-step.active .step-circle {
background: #667eea;
color: white;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}
.wizard-step.completed .step-circle {
background: #4CAF50;
color: white;
}
.wizard-step.completed .step-circle::before {
content: '✓';
}
.step-label {
font-size: 14px;
color: #6c757d;
}
.wizard-step.active .step-label {
color: #667eea;
font-weight: 600;
}
.wizard-step.completed .step-label {
color: #4CAF50;
}
.wizard-content {
min-height: 200px;
}
.wizard-section {
display: none;
}
.wizard-section.active {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.wizard-buttons {
display: flex;
justify-content: space-between;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #dee2e6;
}
.sample-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 20px;
}
.sample-card {
background: #f8f9fa;
border: 2px solid #dee2e6;
border-radius: 8px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.sample-card:hover {
border-color: #667eea;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
.sample-card:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}
.sample-card img {
width: 48px;
height: 48px;
margin-bottom: 10px;
}
.sample-card h4 {
margin: 10px 0 5px;
color: #333;
font-size: 16px;
}
.sample-card p {
color: #666;
font-size: 13px;
margin: 0;
}
.input-method-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}
.method-card {
background: #f8f9fa;
border: 2px solid #dee2e6;
border-radius: 8px;
padding: 30px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.method-card:hover {
border-color: #667eea;
transform: translateY(-2px);
}
.method-card:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}
.method-card.selected {
border-color: #667eea;
background: rgba(102, 126, 234, 0.05);
}
.method-icon {
font-size: 48px;
margin-bottom: 15px;
}
.method-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 10px;
}
.method-desc {
font-size: 14px;
color: #666;
}
/* Progressive Disclosure */
.collapsible-section {
border: 1px solid #dee2e6;
border-radius: 8px;
margin-bottom: 20px;
background: white;
}
.accordion-header {
padding: 15px 20px;
background: #f8f9fa;
border-radius: 8px 8px 0 0;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.2s ease;
}
.accordion-header:hover {
background: #e9ecef;
}
.accordion-header h3 {
margin: 0;
font-size: 18px;
color: #333;
}
.section-header {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
color: white;
padding: 15px 20px;
}
.section-header h3 {
margin: 0;
font-size: 18px;
}
.toggle-indicator {
font-size: 20px;
transition: transform 0.3s ease;
color: #667eea;
}
.toggle-indicator.open {
transform: rotate(180deg);
}
.section-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.section-content.open {
max-height: 5000px;
padding: 20px;
}
.health-score-prominent {
background: white;
border: 2px solid #dee2e6;
border-radius: 12px;
padding: 30px;
text-align: center;
margin-bottom: 30px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.health-score-prominent h3 {
margin-top: 0;
margin-bottom: 15px;
color: #333;
}
.health-interpretation {
margin-top: 15px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
font-size: 14px;
color: #666;
}
.view-details-btn {
margin-top: 15px;
padding: 10px 20px;
background: #667eea;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: background 0.2s ease;
}
.view-details-btn:hover {
background: #5568d3;
}
.view-details-btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
}
@media (max-width: 768px) {
.header h1 {
font-size: 1.8em;
}
.summary-cards {
grid-template-columns: 1fr;
}
.ports-grid {
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}
/* Minimum touch target size for mobile accessibility */
.btn, button, .command-chip, .vendor-btn {
min-height: 44px;
min-width: 44px;
}
}
.health-score {
font-size: 48px;
font-weight: bold;
text-align: center;
margin: 20px 0;
}
.health-score.excellent {
color: #4CAF50;
}
.health-score.good {
color: #5cb85c;
}
.health-score.fair {
color: #ffc107;
}
.health-score.poor {
color: #fd7e14;
}
.health-score.critical {
color: #dc3545;
}
.transceiver-info {
margin-top: 30px;
}
.transceiver-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 15px;
}
.transceiver-card {
background: white;
border: 2px solid #dee2e6;
border-radius: 8px;
padding: 15px;
}
.transceiver-card.warning {
border-color: #ffc107;
background: #fff8e1;
}
.transceiver-card.error {
border-color: #dc3545;
background: #ffebee;
}
.optical-power {
display: flex;
justify-content: space-between;
margin: 10px 0;
font-size: 14px;
}
.optical-power .label {
color: #6c757d;
}
.optical-power .value {
font-weight: bold;
}
/* Missing classes previously provided by external stylesheet */
.how-to-use {
border-left: 4px solid #bee5eb;
background: #f0f8ff;
border-radius: 8px;
margin-bottom: 20px;
overflow: hidden;
}
.how-to-use-header {
display: flex;
justify-content: space-between;
padding: 12px 15px;
cursor: pointer;
font-weight: 600;
color: #333;
user-select: none;
}
.how-to-use-header:hover {
background: rgba(0,0,0,0.04);
}
.how-to-use-content {
padding: 0 15px 15px;
display: none;
}
.toggle-icon {
font-size: 14px;
color: #667eea;
}
.alert {
padding: 12px 16px;
border-radius: 6px;
margin-bottom: 15px;
}
.alert-info {
background: #d1ecf1;
color: #0c5460;
border: 1px solid #bee5eb;
}
.alert-success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.session-controls {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 15px;
padding: 10px;
background: #f8f9fa;
border-radius: 6px;
}
.session-status {
font-size: 13px;
color: #6c757d;
}
.btn-small {
padding: 6px 12px;
font-size: 13px;
}
.tooltip-trigger {
display: inline-block;
width: 18px;
height: 18px;
background: #667eea;
color: white;
border-radius: 50%;
text-align: center;
font-size: 12px;
cursor: help;
margin-left: 5px;
line-height: 18px;
vertical-align: middle;
}
Sessiya İdarəetmələri
Banneri bərpa edin
Paneldən necə istifadə etməli
Üç Addımlı Onboarding Sihirbazı
Giriş bölməsi
Nəticələr Bölməsi
CLI Çıxış Ayrışdırıcısı və Sağlamlıq Analizatoru
Çox satıcılı şəbəkə cihazının sağlamlığının qiymətləndirilməsi və vizuallaşdırılması. Cisco, Aruba, Juniper, Broadcom SONiC, Dell, Fortigate və Palo Alto cihazlarından CLI çıxışını təhlil edin.
Bu Alətdən Necə İstifadə Edilir
- Satıcı seçin:Cihaz satıcınızı seçin və ya avtomatik identifikasiya üçün Auto-Detect-dən istifadə edin
- Yük nümunəsi:Fərqli təchizatçılar üçün nümunə çıxışları görmək üçün nümunə data açılan menyusuna klikləyin
- Çıxışı Yapışdırın:Cihazınızdan CLI çıxışını kopyalayın və mətn sahəsinə yapışdırın
- Təhlil edin:Məlumatları təhlil etmək və sağlamlıq haqqında məlumat yaratmaq üçün "Nəticəni təhlil et" üzərinə klikləyin
- Baxışları nəzərdən keçirin:Fəaliyyət göstərə bilən tövsiyələr üçün Health Insights panelini yoxlayın
- İxrac:Nəticələri sənədlər üçün JSON, CSV və ya mətn hesabatı kimi yadda saxlayın
1
Satıcı seçin
2
Daxiletmə seçin
3
Təhlil edin
Addım 1: Satıcı seçin
Addım 2: Daxiletmə Metodunu seçin
Nümunə Qalereyası (nümunə seçildikdə göstərilir)
Yapıştırma sahəsi (yapışdırıldıqda göstərilir)
Addım 3: Təhlil edin
Addım 1: Şəbəkə Satıcınızı seçin
Şəbəkə cihazlarınız üçün təchizatçı seçin və ya bizə avtomatik aşkarlamağa icazə verin
Addım 2: Daxiletmə Metodunu seçin
Öz CLI çıxışınızı yapışdırın və ya nümunə məlumatları ilə araşdırın
Addım 3: Nəticəni təhlil edin
Seçimlərinizi nəzərdən keçirin və təhlilə başlayın
Satıcı: Avtomatik aşkarlama
Daxiletmə üsulu: Seçilməyib
Hazır: ❌ 2-ci Addımı tamamlayın