Files
interview-demo-code/frontend/admin
Nikita Kiselev b39a344a7d feat(admin): refactor logs viewer with table display and detailed dialog
Backend changes:
- Update LogsHandler.php to parse Monolog logs using regex
- Add parseLogLines() method to extract structured data from logs
- Support ISO 8601 format with microseconds and timezone
- Parse JSON context with nested objects and escaped characters support
- Add formatDateTime() method for readable date formatting
- Add findJsonEnd() method for correct JSON object extraction
- Return data in JSON format instead of plain string

Frontend changes:
- Update logs.js store: change data structure from string to array of objects
- Add loading flag for loading indicator
- Remove caching check for data freshness

- Completely refactor LogsViewer.vue component:
  * Replace textarea with PrimeVue DataTable with pagination and sorting
  * Add "Actions" column with view button (eye icon)
  * Use Badge component for log levels with color indicators
  * Remove "Context" column from table (unreadable in table view)
  * Add dialog with detailed log information:
    - Date and time (formatted and raw)
    - Level with color indicator
    - Channel
    - Message
    - Context (formatted JSON)
    - Raw string
  * Add word wrap for all text fields in dialog
  * Dialog closes on outside click (dismissableMask)
  * Configure pagination: 15 records per page by default

UX improvements:
- Improved log readability with structured display
- Easy navigation through large number of records via pagination
- Quick access to detailed information through dialog
- Color-coded levels for quick visual assessment
2025-11-24 00:09:32 +03:00
..

admin

This template should help get you started developing with Vue 3 in Vite.

VS Code + Vue (Official) (and disable Vetur).

Customize configuration

See Vite Configuration Reference.

Project Setup

bun install

Compile and Hot-Reload for Development

bun dev

Compile and Minify for Production

bun run build

Lint with ESLint

bun lint