优化流式传输&fix bugs
This commit is contained in:
@@ -5,17 +5,19 @@ import CustomSelectV2 from '../../components/customSelectV2.js';
|
||||
import { debounce } from '../../utils/utils.js';
|
||||
import FilterPopover from '../../components/filterPopover.js';
|
||||
import { STATIC_ERROR_MAP, STATUS_CODE_MAP } from './logList.js';
|
||||
import SystemLogTerminal from './systemLog.js';
|
||||
|
||||
const dataStore = {
|
||||
groups: new Map(),
|
||||
keys: new Map(),
|
||||
};
|
||||
|
||||
class LogsPage {
|
||||
constructor() {
|
||||
this.state = {
|
||||
logs: [],
|
||||
pagination: { page: 1, pages: 1, total: 0, page_size: 20 },
|
||||
isLoading: true,
|
||||
// [优化] 统一将所有可筛选字段在此处初始化,便于管理
|
||||
filters: {
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
@@ -26,33 +28,106 @@ class LogsPage {
|
||||
status_codes: new Set(),
|
||||
},
|
||||
selectedLogIds: new Set(),
|
||||
currentView: 'error',
|
||||
};
|
||||
this.elements = {
|
||||
tableBody: document.getElementById('logs-table-body'),
|
||||
selectedCount: document.querySelector('.flex-1.text-sm span.font-semibold:nth-child(1)'),
|
||||
totalCount: document.querySelector('.flex-1.text-sm span:last-child'),
|
||||
pageSizeSelect: document.querySelector('[data-component="custom-select-v2"] select'),
|
||||
pageInfo: document.querySelector('.flex.w-\\[100px\\]'),
|
||||
paginationBtns: document.querySelectorAll('[data-pagination-controls] button'),
|
||||
selectAllCheckbox: document.querySelector('thead .table-head-cell input[type="checkbox"]'),
|
||||
searchInput: document.getElementById('log-search-input'),
|
||||
errorTypeFilterBtn: document.getElementById('filter-error-type-btn'),
|
||||
errorCodeFilterBtn: document.getElementById('filter-error-code-btn'),
|
||||
tabsContainer: document.querySelector('[data-sliding-tabs-container]'),
|
||||
contentContainer: document.getElementById('log-content-container'),
|
||||
errorFilters: document.getElementById('error-logs-filters'),
|
||||
systemControls: document.getElementById('system-logs-controls'),
|
||||
errorTemplate: document.getElementById('error-logs-template'),
|
||||
systemTemplate: document.getElementById('system-logs-template'),
|
||||
};
|
||||
this.initialized = !!this.elements.tableBody;
|
||||
this.initialized = !!this.elements.contentContainer;
|
||||
if (this.initialized) {
|
||||
this.logList = new LogList(this.elements.tableBody, dataStore);
|
||||
const selectContainer = document.querySelector('[data-component="custom-select-v2"]');
|
||||
if (selectContainer) { new CustomSelectV2(selectContainer); }
|
||||
this.logList = null;
|
||||
this.systemLogTerminal = null;
|
||||
this.debouncedLoadAndRender = debounce(() => this.loadAndRenderLogs(), 300);
|
||||
}
|
||||
}
|
||||
async init() {
|
||||
if (!this.initialized) return;
|
||||
this._initPermanentEventListeners();
|
||||
await this.loadGroupsOnce();
|
||||
this.state.currentView = null;
|
||||
this.switchToView('error');
|
||||
}
|
||||
_initPermanentEventListeners() {
|
||||
this.elements.tabsContainer.addEventListener('click', (event) => {
|
||||
const tabItem = event.target.closest('[data-tab-target]');
|
||||
if (!tabItem) return;
|
||||
event.preventDefault();
|
||||
const viewName = tabItem.dataset.tabTarget;
|
||||
if (viewName) {
|
||||
this.switchToView(viewName);
|
||||
}
|
||||
});
|
||||
}
|
||||
switchToView(viewName) {
|
||||
if (this.state.currentView === viewName && this.elements.contentContainer.innerHTML !== '') return;
|
||||
if (this.systemLogTerminal) {
|
||||
this.systemLogTerminal.disconnect();
|
||||
this.systemLogTerminal = null;
|
||||
}
|
||||
this.state.currentView = viewName;
|
||||
this.elements.contentContainer.innerHTML = '';
|
||||
if (viewName === 'error') {
|
||||
this.elements.errorFilters.classList.remove('hidden');
|
||||
this.elements.systemControls.classList.add('hidden');
|
||||
const template = this.elements.errorTemplate.content.cloneNode(true);
|
||||
this.elements.contentContainer.appendChild(template);
|
||||
requestAnimationFrame(() => {
|
||||
this._initErrorLogView();
|
||||
});
|
||||
} else if (viewName === 'system') {
|
||||
this.elements.errorFilters.classList.add('hidden');
|
||||
this.elements.systemControls.classList.remove('hidden');
|
||||
const template = this.elements.systemTemplate.content.cloneNode(true);
|
||||
this.elements.contentContainer.appendChild(template);
|
||||
requestAnimationFrame(() => {
|
||||
this._initSystemLogView();
|
||||
});
|
||||
}
|
||||
}
|
||||
_initErrorLogView() {
|
||||
this.elements.tableBody = document.getElementById('logs-table-body');
|
||||
this.elements.selectedCount = document.querySelector('.flex-1.text-sm span.font-semibold:nth-child(1)');
|
||||
this.elements.totalCount = document.querySelector('.flex-1.text-sm span:last-child');
|
||||
this.elements.pageSizeSelect = document.querySelector('[data-component="custom-select-v2"] select');
|
||||
this.elements.pageInfo = document.querySelector('.flex.w-\\[100px\\]');
|
||||
this.elements.paginationBtns = document.querySelectorAll('[data-pagination-controls] button');
|
||||
this.elements.selectAllCheckbox = document.querySelector('thead .table-head-cell input[type="checkbox"]');
|
||||
this.elements.searchInput = document.getElementById('log-search-input');
|
||||
this.elements.errorTypeFilterBtn = document.getElementById('filter-error-type-btn');
|
||||
this.elements.errorCodeFilterBtn = document.getElementById('filter-error-code-btn');
|
||||
this.logList = new LogList(this.elements.tableBody, dataStore);
|
||||
const selectContainer = document.querySelector('[data-component="custom-select-v2"]');
|
||||
if (selectContainer) { new CustomSelectV2(selectContainer); }
|
||||
this.initFilterPopovers();
|
||||
this.initEventListeners();
|
||||
await this.loadGroupsOnce();
|
||||
await this.loadAndRenderLogs();
|
||||
this.loadAndRenderLogs();
|
||||
}
|
||||
_initSystemLogView() {
|
||||
this.systemLogTerminal = new SystemLogTerminal(
|
||||
this.elements.contentContainer,
|
||||
this.elements.systemControls
|
||||
);
|
||||
Swal.fire({
|
||||
title: '实时系统日志',
|
||||
text: '您即将连接到实时日志流。这会与服务器建立一个持续的连接。',
|
||||
icon: 'info',
|
||||
confirmButtonText: '我明白了,开始连接',
|
||||
showCancelButton: true,
|
||||
cancelButtonText: '取消',
|
||||
target: '#main-content-wrapper',
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
this.systemLogTerminal.connect();
|
||||
} else {
|
||||
const errorLogTab = Array.from(this.elements.tabsContainer.querySelectorAll('[data-tab-target="error"]'))[0];
|
||||
if (errorLogTab) errorLogTab.click();
|
||||
}
|
||||
});
|
||||
}
|
||||
initFilterPopovers() {
|
||||
const errorTypeOptions = [
|
||||
|
||||
Reference in New Issue
Block a user