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