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;
}
Елементи керування сеансом
Відновити банер
Як користуватися панеллю
Триетапний майстер адаптації
Розділ введення
Розділ результатів
Синтаксичний аналізатор виводу CLI та аналізатор справності
Оцінка та візуалізація мережевих пристроїв різних постачальників. Проаналізуйте вихід CLI з пристроїв Cisco, Aruba, Juniper, Broadcom SONiC, Dell, Fortigate та Palo Alto.
Як користуватися цим інструментом
- Виберіть постачальника:Виберіть постачальника пристрою або скористайтеся автовизначенням для автоматичної ідентифікації
- Завантажити зразок:Клацніть спадне меню зразків даних, щоб переглянути приклади результатів для різних постачальників
- Вставити результат:Скопіюйте вихід CLI зі свого пристрою та вставте його в текстове поле
- Проаналізуйте:Натисніть «Аналізувати вихідні дані», щоб проаналізувати дані та отримати статистику здоров’я
- Огляд статистики:Перегляньте практичні рекомендації на панелі Health Insights
- Експорт:Збережіть результати як JSON, CSV або текстовий звіт для документації
1
Виберіть Постачальник
2
Виберіть Введення
3
Аналізуйте
Крок 1: Виберіть постачальника
Крок 2: Виберіть метод введення
Галерея зразків (показується, коли вибрано зразок)
Область вставлення (відображається, коли вибрано вставлення)
Крок 3: Проаналізуйте
Крок 1. Виберіть постачальника мережі
Виберіть постачальника для ваших мережевих пристроїв або дозвольте нам виконати автоматичне визначення
Крок 2: Виберіть метод введення
Вставте власний вихід CLI або ознайомтеся зі зразками даних
Крок 3: Аналіз результату
Перегляньте свій вибір і почніть аналіз
Постачальник: Автоматичне визначення
Метод введення: Не вибрано
Готовий: ❌ Виконайте крок 2