Refactor the monolithic LogsTable component (1453 lines) into a modular, maintainable architecture following the channels table pattern. ## What Changed ###🏗 ️ Architecture - Split single large file into focused, single-responsibility components - Introduced custom hook `useLogsData` for centralized state management - Created dedicated column definitions file for better organization - Implemented modal components for user interactions ###📁 New Structure ``` web/src/components/table/usage-logs/ ├── index.jsx # Main page component orchestrator ├── LogsTable.jsx # Pure table rendering component ├── LogsActions.jsx # Actions area (stats + compact mode) ├── LogsFilters.jsx # Search form component ├── LogsColumnDefs.js # Column definitions and renderers └── modals/ ├── ColumnSelectorModal.jsx # Column visibility settings └── UserInfoModal.jsx # User information display web/src/hooks/logs/ └── useLogsData.js # Custom hook for state & logic ``` ###🎯 Key Improvements - **Maintainability**: Clear separation of concerns, easier to understand - **Reusability**: Modular components can be reused independently - **Performance**: Optimized with `useMemo` for column rendering - **Testing**: Single-responsibility components easier to test - **Developer Experience**: Better code organization and readability ###🔧 Technical Details - Preserved all existing functionality and user experience - Maintained backward compatibility through existing import path - Centralized all business logic in `useLogsData` custom hook - Extracted column definitions to separate module with render functions - Split complex UI into focused components (table, actions, filters, modals) ###🐛 Fixes - Fixed Semi UI component import issues (`Typography.Paragraph`) - Resolved module export dependencies - Maintained consistent prop passing patterns ## Breaking Changes None - all existing imports and functionality preserved.
| Name |
Last commit
|
Last Update |
|---|---|---|
| .github | Loading commit data... | |
| bin | Loading commit data... | |
| common | Loading commit data... | |
| constant | Loading commit data... | |
| controller | Loading commit data... | |
| docs | Loading commit data... | |
| dto | Loading commit data... | |
| i18n | Loading commit data... | |
| middleware | Loading commit data... | |
| model | Loading commit data... | |
| relay | Loading commit data... | |
| router | Loading commit data... | |
| service | Loading commit data... | |
| setting | Loading commit data... | |
| types | Loading commit data... | |
| web | Loading commit data... | |
| .dockerignore | Loading commit data... | |
| .env.example | Loading commit data... | |
| .gitignore | Loading commit data... | |
| Dockerfile | Loading commit data... | |
| LICENSE | Loading commit data... | |
| README.en.md | Loading commit data... | |
| README.md | Loading commit data... | |
| VERSION | Loading commit data... | |
| docker-compose.yml | Loading commit data... | |
| go.mod | Loading commit data... | |
| go.sum | Loading commit data... | |
| main.go | Loading commit data... | |
| makefile | Loading commit data... | |
| one-api.service | Loading commit data... |