A simple web based client to view and filter logs. This project was originally implemented using server side view rendering and hacked together XHR requests to update the front-end in real time. Currently transitioning to a React based front-end with a RESTful API.
TODO
- Implement config interface
- Implement logfile directory interface
- Integrate front-end with API
- Rethink route handling on the front-end (React router)
- Improve front-end request handling (possible Redux longterm)
- Write front-end tests and increase server test coverage
- Include more API call examples in readme
- Server side config validation (probably JSON schema)
Running This Project
- Running the dev environment:
npm run dev - Running the dev environment in debug mode:
npm run dev-debug - Running the backend with an optimized front-end build :
npm start - Building the front-end:
npm run build - Running tests (and standard linter):
npm test - Running the standard linter (included in
npm test):npm run lint
Note: Running or building the client lints with babel-eslint
Client Side
Implemented in React and bundled with Webpack.
Sketch Mockups (work in progress)
Phone Viewport
Tablet Viewport
Desktop Viewport
Prototype Demo
This prototype is implemented using Express/Jade view rendering and hacked together front end code (but it looks kinda pretty).
File Demo Watch here
Live Demo Watch here
Server Side
Routes
POST /api/config
Modifies the config. Only the supplied keys are applied, other keys are left as is.
Example requests body
"datetimePattern": "\\[(\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}Z)\\]" "levelPattern": "\\[([\\w\\s]+|\\w+)\\]:\\s" "timeFormatter": "h:MM:ss"Example Response
"success": true "msg": "Config set: true" "data": "datetimePattern": "\\[(\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}Z)\\]" "levelPattern": "\\[([\\w\\s]+|\\w+)\\]:\\s" "timeFormatter": "h:MM:ss" "inputTimezone": 0 "outputTimezone": 8 "directories": "path": "/var/log/somelogs" "name": "Some Wonderful Logs" "key": 0 "active": false "path": "/var/log/someotherlogs" "name": "Some Other Wonderful Logs" "key": 1 "active": true GET /api/config
Example Response
"success": true "msg": "Config read" "data": "datetimePattern": "\\[(\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}Z)\\]" "levelPattern": "\\[([\\w\\s]+|\\w+)\\]:\\s" "timeFormatter": "h:MM:ss" "inputTimezone": 0 "outputTimezone": 8 "directories": "path": "/var/log/somelogs" "name": "Some Wonderful Logs" "key": 0 "active": false "path": "/var/log/someotherlogs" "name": "Some Other Wonderful Logs" "key": 1 "active": true GET /api/file
Example Request
GET http://localhost:4000/api/file?key=0&startdt=1489387840000&enddt=1490333975974&level=4&pagesize=20&pagenum=1
| Param | Type | Description |
|---|---|---|
| key | integer | Key for a given logfile retreieved from GET /api/directory |
| pagenum | integer | Current page number |
| pagesize | integer | Number of log entries per page |
| startdt | datetime string | Starting datetime |
| enddt | datetime string | Ending datetime |
| level | One of Level Enum | Log severity level defined below |
Level Enum
| Level | Value |
|---|---|
| Error | 0 |
| Warning | 1 |
| Info | 2 |
| Verbose | 3 |
| Debug | 4 |
Example Response
"success": true "msg": "Queried /Users/nick/Documents/slask/src/server/test/fixtures/testlog.log" "data": "text": "You must be pretty desperate if you're looking at the logs" "level": 2 "levelStr": "info" "datetime": 1489387840000 "datetimeStr": "6:50:40" "text": "Hello world" "level": 0 "levelStr": "error" "datetime": 1489387841000 "datetimeStr": "6:50:41" "text": "Lovely weather we're having" "level": 1 "levelStr": "warn" "datetime": 1489387841000 "datetimeStr": "6:50:41" "text": "That's all for now folks" "level": 4 "levelStr": "debug" "datetime": 1489387841000 "datetimeStr": "6:50:41" "text": "You must be pretty desperate if you're looking at the logs" "level": 4 "levelStr": "debug" "datetime": 1489387840000 "datetimeStr": "6:50:40" GET /api/directories
Lists directories added by PUT /api/directories
Example Response
"success": true "msg": "Successfully listed directories" "data": "path": "/var/log/somelogs" "name": "Some Wonderful Logs" "key": 0 "active": false "path": "/var/log/someotherlogs" "name": "Some Other Wonderful Logs" "key": 1 "active": true PUT /api/directories
Adds a new directory to the list retrieved from GET /api/directories
Example Request
"path": "/var/log/somelogs" "name": "Some Wonderful Logs"Example Response
"success": true "msg": "Successfully listed directories" "data": "path": "/var/log/somelogs" "name": "Some Wonderful Logs" "key": 0 "active": false "path": "/var/log/someotherlogs" "name": "Some Other Wonderful Logs" "key": 1 "active": true POST /api/directories
Modify directory to the list retrieved from GET /api/directories
Example Request
"path": "/var/log/somelogs" "name": "Some Wonderful New Name Logs" "key": 0Example Response
"success": true "msg": "Successfully modified directory" "data": "path": "/var/log/somelogs" "name": "Some Wonderful Logs" "key": 0 "active": false "path": "/var/log/someotherlogs" "name": "Some Other Wonderful Logs" "key": 1 "active": true GET /api/directory
Gets the directory listing for the directory set in POST /api/directory
Example Response
"success": true "msg": "Successfully retrieved directory listing" "data": "name": "log0.log" "key": 0 "name": "log1.log" "key": 1 POST /api/directory
Sets the active directory to be used for GET /api/file. Please note this directory will be parsed ahead of time so requests on GET /api/file are very quick.
Example Request
"key": 0Example Response
"success": true "msg": "Successfully set active directory" "data": "key": 0 }