Trình phân tích tình trạng và phân tích đầu ra CLI
.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;
}
Kiểm soát phiên
Khôi phục biểu ngữ
Cách sử dụng bảng điều khiển
Trình hướng dẫn giới thiệu ba bước
Phần đầu vào
Phần kết quả
Trình phân tích tình trạng và phân tích đầu ra CLI
Đánh giá và hiển thị tình trạng thiết bị mạng của nhiều nhà cung cấp. Phân tích đầu ra CLI từ các thiết bị Cisco, Aruba, Juniper, Broadcom SONiC, Dell, Fortigate và Palo Alto.
Cách sử dụng công cụ này
- Chọn nhà cung cấp:Chọn nhà cung cấp thiết bị của bạn hoặc sử dụng Tự động phát hiện để nhận dạng tự động
- Tải mẫu:Nhấp vào danh sách thả xuống dữ liệu mẫu để xem kết quả đầu ra mẫu cho các nhà cung cấp khác nhau
- Dán đầu ra:Sao chép đầu ra CLI từ thiết bị của bạn và dán nó vào vùng văn bản
- Phân tích:Nhấp vào "Phân tích đầu ra" để phân tích dữ liệu và tạo thông tin chi tiết về sức khỏe
- Đánh giá thông tin chi tiết:Kiểm tra bảng Health Insights để biết các khuyến nghị hữu ích
- Xuất khẩu:Lưu kết quả dưới dạng JSON, CSV hoặc báo cáo văn bản để làm tài liệu
1
Chọn nhà cung cấp
2
Chọn đầu vào
3
Phân tích
Bước 1: Chọn nhà cung cấp
Bước 2: Chọn Phương thức nhập
Thư viện mẫu (hiển thị khi mẫu được chọn)
Vùng dán (hiển thị khi chọn dán)
Bước 3: Phân tích
Bước 1: Chọn nhà cung cấp mạng của bạn
Chọn nhà cung cấp cho thiết bị mạng của bạn hoặc để chúng tôi tự động phát hiện
Bước 2: Chọn Phương thức nhập
Dán đầu ra CLI của riêng bạn hoặc khám phá bằng dữ liệu mẫu
Bước 3: Phân tích đầu ra
Xem lại các lựa chọn của bạn và bắt đầu phân tích
Người bán: Tự động phát hiện
Phương thức nhập: Không được chọn
Sẵn sàng: ❌ Hoàn thành Bước 2