Refreshing every {{ refresh_time }} seconds - Version {{ app_version }}
+Refreshing every {{ refresh_time }} seconds
{% endblock %} diff --git a/migration/mongosync_insights/templates/upload_results.html b/migration/mongosync_insights/templates/upload_results.html index 30e2838b..e2525235 100644 --- a/migration/mongosync_insights/templates/upload_results.html +++ b/migration/mongosync_insights/templates/upload_results.html @@ -64,9 +64,81 @@ min-height: 400px; } - #plot { + #plot, + #metrics-plot { margin: 0 auto; max-width: 1450px; + position: relative; + } + + .chart-info-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 20; + } + + .chart-info-badge { + position: absolute; + width: 18px; + height: 18px; + border-radius: 999px; + border: 1px solid #ccc; + background: #fff; + color: #666; + font-size: 11px; + font-weight: 700; + line-height: 16px; + text-align: center; + cursor: pointer; + pointer-events: auto; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); + padding: 0; + } + + .chart-info-badge:hover { + border-color: #00684A; + color: #00684A; + } + + .chart-info-tooltip { + position: absolute; + min-width: 180px; + max-width: 280px; + background: #fff; + border: 1px solid #ccc; + border-radius: 10px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + padding: 8px 10px; + font-size: 12px; + color: #555; + pointer-events: auto; + z-index: 21; + } + + .chart-info-tooltip-title { + margin: 0 0 6px 0; + font-weight: 700; + font-size: 12px; + color: #00684A; + } + + .chart-info-item { + display: flex; + align-items: center; + gap: 6px; + margin: 2px 0; + } + + .chart-info-swatch { + width: 11px; + height: 11px; + border-radius: 2px; + border: 1px solid rgba(0, 0, 0, 0.15); + flex-shrink: 0; } .options-container { @@ -105,6 +177,15 @@ font-weight: 600; } + .options-table th.sortable-th { + cursor: pointer; + user-select: none; + } + + .options-table th.sortable-th:hover { + background-color: rgba(0, 104, 74, 0.08); + } + .options-table td { padding: 10px 15px; border-bottom: 1px solid #e0e0e0; @@ -236,6 +317,36 @@ border-left: 4px solid #00684A; } + .error-detail-content { + display: flex; + flex-direction: column; + gap: 12px; + } + + .error-detail-actions { + display: flex; + gap: 10px; + flex-wrap: wrap; + } + + .error-detail-actions .copy-btn { + padding: 8px 14px; + font-size: 12px; + border: 1px solid #00684A; + background-color: #fff; + color: #00684A; + border-radius: 4px; + cursor: pointer; + transition: all 0.2s ease; + } + + .error-detail-actions .copy-btn:hover { + background-color: #00684A; + color: #fff; + transform: translateY(-2px); + box-shadow: 0 2px 8px rgba(0, 104, 74, 0.2); + } + .error-detail-cell pre { white-space: pre-wrap; word-break: break-word; @@ -243,6 +354,12 @@ font-size: 12px; font-family: 'Courier New', monospace; color: #1a5276; + background-color: #fff; + padding: 12px; + border-radius: 4px; + border: 1px solid #ddd; + max-height: 400px; + overflow-y: auto; } @media (max-width: 768px) { @@ -263,6 +380,196 @@ min-width: 100%; } } + + /* ===== Log Viewer Panel ===== */ + .lv-panel { + display: flex; + flex-direction: column; + height: 75vh; + min-height: 400px; + border: 1px solid #3a3a3a; + border-radius: 6px; + overflow: hidden; + background: #1e1e1e; + } + + .lv-header { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 8px; + padding: 8px 12px; + background: #2a2a2a; + border-bottom: 1px solid #3a3a3a; + } + + .lv-header-left { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 10px; + } + + .lv-header-right { + display: flex; + align-items: center; + gap: 8px; + } + + .lv-title { + font-weight: 600; + font-size: 14px; + color: #e0e0e0; + white-space: nowrap; + } + + .lv-label { + font-size: 11px; + color: #888; + white-space: nowrap; + } + + .lv-severity-filter, .lv-tools { display: flex; align-items: center; gap: 6px; } + .lv-severity-buttons, .lv-view-mode, .lv-semantic-filter { display: flex; gap: 3px; align-items: center; } + + .lv-sev-btn, .lv-mode-btn, .lv-focus-btn { + padding: 2px 8px; + font-size: 11px; + border: 1px solid #555; + border-radius: 4px; + background: transparent; + color: #aaa; + cursor: pointer; + transition: all 0.15s; + } + .lv-sev-btn:hover, .lv-mode-btn:hover, .lv-focus-btn:hover { background: #3a3a3a; color: #ddd; } + .lv-sev-btn.active { background: #444; color: #fff; border-color: #888; } + .lv-mode-btn.active { background: #00684A; color: #fff; border-color: #00684A; } + .lv-focus-btn.active { background: #c9820a; color: #fff; border-color: #c9820a; } + + .lv-sev-btn.info.active { border-color: #4a9; } + .lv-sev-btn.debug.active { border-color: #6a8; } + .lv-sev-btn.trace.active { border-color: #888; } + .lv-sev-btn.warn.active { border-color: #e8a735; } + .lv-sev-btn.error.active { border-color: #e84040; } + .lv-sev-btn.fatal.active { border-color: #d42; background: #5a1a1a; } + .lv-sev-btn.panic.active { border-color: #f0f; background: #5a1a3a; } + + .lv-search { + padding: 4px 8px; + font-size: 12px; + border: 1px solid #555; + border-radius: 4px; + background: #1e1e1e; + color: #e0e0e0; + width: 180px; + } + + .lv-line-count { + font-size: 11px; + color: #888; + white-space: nowrap; + } + + .lv-action-btn { + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + background: transparent; + border: 1px solid #555; + border-radius: 4px; + color: #aaa; + cursor: pointer; + } + .lv-action-btn:hover { background: #3a3a3a; color: #ddd; } + + .lv-viewer { + flex: 1; + overflow-y: auto; + font-family: 'Source Code Pro', Menlo, Consolas, monospace; + font-size: 12px; + line-height: 1.5; + padding: 10px; + background: #1e1e1e; + color: #e0e0e0; + } + + .lv-placeholder { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + color: #888; + gap: 12px; + } + + .lv-log-line { + white-space: pre-wrap; + word-break: break-all; + margin: 0; + padding: 2px 0; + } + .lv-log-line.pretty { white-space: pre; word-break: normal; } + .lv-log-line.summary { white-space: normal; word-break: break-word; font-family: inherit; font-size: 12px; } + + .lv-log-line.error-line { background: rgba(232,64,64,0.12); } + .lv-log-line.warn-line { background: rgba(232,167,53,0.10); } + .lv-log-line.phase-line { background: rgba(0,104,74,0.12); } + + /* Syntax highlighting */ + .lv-log-line .timestamp { color: #7ec8e3; } + .lv-log-line .phase { color: #4ade80; font-weight: 600; } + .lv-log-line .level-error { color: #ef4444; font-weight: 600; } + .lv-log-line .level-warn { color: #eab308; font-weight: 600; } + .lv-log-line .level-info { color: #38bdf8; } + .lv-log-line .level-debug { color: #a78bfa; } + .lv-log-line .level-trace { color: #888; } + .lv-log-line .json-bracket { color: #888; } + .lv-log-line .json-comma { color: #888; } + .lv-log-line .json-colon { color: #888; } + .lv-log-line .json-key { color: #7dd3fc; } + .lv-log-line .json-string { color: #86efac; } + .lv-log-line .json-number { color: #93c5fd; } + .lv-log-line .boolean-true { color: #4ade80; } + .lv-log-line .boolean-false { color: #fb923c; } + .lv-log-line .db-name { color: #67e8f9; } + .lv-log-line .metric-value { color: #c084fc; } + .lv-log-line .duration-avg { color: #38bdf8; } + .lv-log-line .duration-max { color: #fb923c; } + .lv-log-line .operation-count { color: #4ade80; } + .lv-log-line .field-state { color: #f472b6; } + .lv-log-line .field-cancommit { color: #2dd4bf; } + .lv-log-line .field-lagtime { color: #facc15; } + .lv-log-line .field-estimated-total { color: #86efac; } + .lv-log-line .field-estimated-copied { color: #6ee7b7; } + .lv-log-line .invalid-json-badge { display: inline-block; background: #7f1d1d; color: #fca5a5; padding: 0 4px; border-radius: 3px; font-size: 10px; margin-right: 4px; } + + /* Pagination */ + .lv-pagination { + display: flex; + align-items: center; + gap: 10px; + padding: 8px 12px; + background: #2a2a2a; + border-top: 1px solid #3a3a3a; + } + .lv-page-btn { + padding: 4px 12px; + font-size: 12px; + border: 1px solid #555; + border-radius: 4px; + background: transparent; + color: #ccc; + cursor: pointer; + } + .lv-page-btn:hover:not(:disabled) { background: #3a3a3a; } + .lv-page-btn:disabled { opacity: 0.4; cursor: default; } + .lv-page-btn.lv-back-to-tail { border-color: #00684A; color: #4ade80; } + .lv-page-info, .lv-page-total { font-size: 12px; color: #888; } {% endblock %} {% block content %} @@ -278,6 +585,7 @@ + {% endif %}| Collection | -Type | -Reason | -Partitions | -Doc Count | -Expected Partition Size | -Sampler | -IDs Sampled | -Init Started | -Init Duration (s) | +Collection | +Type | +Reason | +Partitions | +Doc Count | +Expected Partition Size | +Sampler | +IDs Sampled | +Init Started | +Init Duration (s) |
|---|
| Friendly Name | -Time | -Level | -Message | +Friendly Name | +Time | +Level | +Message | {{ error.level }} | {{ error.message }} | -
|---|---|---|---|---|---|---|---|