web-log-viewer 0.0.4 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -14
- package/build/public/build/bundle.css +1 -1
- package/build/public/build/bundle.js +1 -1
- package/build/public/build/bundle.js.map +1 -1
- package/build/server.js +68 -29
- package/package.json +14 -4
package/README.md
CHANGED
|
@@ -9,19 +9,20 @@ In the server component:
|
|
|
9
9
|
|
|
10
10
|
1. reads one line of text from `stdin`
|
|
11
11
|
2. transforms the line of text into JSON using a **parser**
|
|
12
|
-
3. sends that JSON data to the web client
|
|
12
|
+
3. sends that JSON data to the web client via **websocket**
|
|
13
13
|
|
|
14
14
|
In the web client:
|
|
15
15
|
|
|
16
16
|
4. transforms the received JSON data into another JSON structure using a **formatter**
|
|
17
17
|
5. displays the formatted data in an HTML table
|
|
18
|
+
6. allow the user to see the full contents of the *parsed* message
|
|
18
19
|
|
|
19
20
|
# Usage
|
|
20
21
|
Display the contents of a file. Use the default parser, which parses each line of text with [json5](https://www.npmjs.com/package/json5)
|
|
21
22
|
```
|
|
22
23
|
cat file.log | web-log-viewer
|
|
23
24
|
```
|
|
24
|
-
Then go to http://localhost:8000
|
|
25
|
+
Then go to http://localhost:8000. You can use `tail` instead of `cat` to follow changes made to the file.
|
|
25
26
|
|
|
26
27
|
|
|
27
28
|
Pipe the `stdout` of a command. Use a custom parser to transform lines of text to JSON.
|
|
@@ -53,36 +54,37 @@ module.exports = (rawMessage: string) => {
|
|
|
53
54
|
```
|
|
54
55
|
|
|
55
56
|
# Formatter
|
|
56
|
-
Formatters run in the web client; their purpose is to select which fields of the JSON object should be displayed by the web client. Note that a single server can have several web clients (i.e., browser tabs),
|
|
57
|
+
Formatters run in the web client; their purpose is to select which fields of the JSON object should be displayed by the web client. Note that a single server can have several web clients (i.e., browser tabs), each with their own formatter.
|
|
57
58
|
|
|
58
|
-
A formatter consists of an object, where each
|
|
59
|
+
A formatter consists of an object, where each field consists of a function. Each function is executed with the JSON object sent by the server component, and must return the value that will be displayed to the user.
|
|
59
60
|
|
|
60
61
|
For example, the following formatter will display three fields:
|
|
61
62
|
|
|
62
63
|
```javascript
|
|
64
|
+
const formatDate = d => new Date(d).toISOString();
|
|
65
|
+
|
|
63
66
|
({
|
|
64
67
|
'#': (log, seq) => seq,
|
|
65
68
|
message: log => log.message,
|
|
66
69
|
level: log => log.meta.logLevel,
|
|
67
|
-
time: log =>
|
|
70
|
+
time: log => formatDate(log.timestamp),
|
|
68
71
|
})`
|
|
69
72
|
```
|
|
70
73
|
|
|
71
74
|
Errors that occur in these formatter functions are ignored, and the return will return empty string instead.
|
|
72
75
|
|
|
73
|
-
|
|
76
|
+
**NOTE**: this uses `eval`!
|
|
77
|
+
|
|
78
|
+
# TODO (or, stuff that will never get done)
|
|
74
79
|
- should accept a transformer function that maps a single line from `stdin` into a list of `RawMessage`s. Some examples would be:
|
|
75
80
|
- 1:1 mapping (the default) would not do any transformations. For when we have a log file with JSON (or JSON5) format
|
|
76
81
|
- 1:1 mapping, transforming a textual (e.g., `log4j`) log file into JSON
|
|
77
82
|
- 1:n mapping, transforming a JSON file, wich potentially included lots of information in arrays, into a list of `RawMessage`s
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
- `src/types.ts` is currently a symbolic link!
|
|
83
|
-
- grouping rows (e.g., by transaction ID)
|
|
83
|
+
- the client (svelte) should display the status of the connection with the server
|
|
84
|
+
- the client (svelte) should be able to restore the connection with the server when it is available again
|
|
85
|
+
- security when accessing the logs?
|
|
86
|
+
- grouping rows (e.g., group all messages belonging to the same request)
|
|
84
87
|
- filtering by timestamp
|
|
85
88
|
- log line color
|
|
86
|
-
- possibility to return a primary and secondary value for each column
|
|
89
|
+
- possibility to return a primary and secondary value for each column; return a color/css; return a width for the column
|
|
87
90
|
- use https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.Sandbox?
|
|
88
|
-
- revert to default formatter
|
|
@@ -1 +1 @@
|
|
|
1
|
-
main.svelte-
|
|
1
|
+
main.svelte-1apqcv2.svelte-1apqcv2{display:flex;flex-direction:column;height:100%}.windowLogs.svelte-1apqcv2.svelte-1apqcv2{height:100%;overflow:auto}.windowLogs-filterInput.svelte-1apqcv2.svelte-1apqcv2{border-radius:5px;font-size:20px;padding:20px;width:100%;max-width:900px;margin:0px 0px 25px 0px}.windowLogs-table.svelte-1apqcv2.svelte-1apqcv2{table-layout:auto;white-space:nowrap;text-align:left;border-collapse:separate;border-spacing:0;position:relative;width:100%;font-size:14px}.windowLogs-table.svelte-1apqcv2 td.svelte-1apqcv2,.windowLogs-table.svelte-1apqcv2 th.svelte-1apqcv2{padding:2px 7px;overflow:hidden;text-overflow:ellipsis}.windowLogs-table.svelte-1apqcv2 td.svelte-1apqcv2{font-family:monospace}.windowLogs-table.svelte-1apqcv2 th.svelte-1apqcv2{position:sticky;top:0px;background-color:var(--gray-100);padding:10px 7px;border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);color:var(--primary-color);font-weight:500;letter-spacing:0.9px;font-size:16px}.windowLogs-table.svelte-1apqcv2 th.svelte-1apqcv2:first-child{border-top-left-radius:5px;border-left:1px solid var(--gray-200)}.windowLogs-table.svelte-1apqcv2 th.svelte-1apqcv2:last-child{border-top-right-radius:5px;border-right:1px solid var(--gray-200)}.windowLogs-table.svelte-1apqcv2 tr.windowLogs-selectedRow td.svelte-1apqcv2,.windowLogs-table.svelte-1apqcv2 tr:hover td.svelte-1apqcv2{background-color:rgba(111, 161, 87, 0.15)}.windowLogs-table.svelte-1apqcv2 td.svelte-1apqcv2{border-top:1px solid var(--gray-100)}.windowLogs-table.svelte-1apqcv2 td.svelte-1apqcv2:first-child{border-left:1px solid var(--gray-200)}.windowLogs-table.svelte-1apqcv2 td.svelte-1apqcv2:last-child{border-right:1px solid var(--gray-200)}main.svelte-1apqcv2.svelte-1apqcv2{padding:1em 1em;margin:0 auto}h1.svelte-1apqcv2.svelte-1apqcv2{text-align:left;color:var(--primary-color);text-transform:uppercase;font-size:30px;font-weight:800;letter-spacing:5px;margin-top:0px}h1.svelte-1apqcv2 small.svelte-1apqcv2{text-transform:lowercase;font-size:20px;letter-spacing:normal;font-weight:normal;color:var(--gray-600)}h1.svelte-1apqcv2 small.svelte-1apqcv2:not(:last-child)::after{content:'·';margin-left:10px;margin-right:-5px}.message.svelte-1apqcv2.svelte-1apqcv2{border:1px solid;border-radius:5px;padding:20px;margin:20px 0px;border-color:var(--gray-600);color:var(--gray-600);background-color:var(--gray-100)}.message--info.svelte-1apqcv2.svelte-1apqcv2{text-align:center;border-color:#0c5460;color:#0c5460;background-color:#0c546022}.logMessageDetails.svelte-faon1y.svelte-faon1y{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10}.logMessageDetails-backdrop.svelte-faon1y.svelte-faon1y{position:fixed;width:100%;height:100%;background-color:#00000066}.logMessageDetails-actions.svelte-faon1y.svelte-faon1y{position:relative;margin-top:10px;display:flex;justify-content:flex-end}.logMessageDetails-actions.svelte-faon1y>.svelte-faon1y:not(:last-child){margin-right:10px}.logMessageDetails-actions.svelte-faon1y .logMessageDetails-closeButton.svelte-faon1y{margin-right:auto}.logMessageDetails-container.svelte-faon1y.svelte-faon1y{display:flex;flex-direction:column;background-color:#f5f5f5;position:relative;max-width:1200px;margin-left:auto;margin-right:auto;margin-top:20px;margin-bottom:20px;padding:20px 30px;border-radius:10px;box-shadow:0px 2px 5px 0px #444;max-height:calc(100% - 40px);overflow:auto}.code.svelte-faon1y.svelte-faon1y{white-space:pre;font-family:monospace;color:#555;background-color:white;line-height:1.2rem;text-align:left;overflow:auto;border:1px solid #dedede;border-radius:3px;padding:10px;width:100%}.logMessageDetails-config.svelte-faon1y .subtitle.svelte-faon1y{margin-top:30px;margin-bottom:14px;border:none;background-color:transparent;padding:0px;text-transform:uppercase;font-size:17px;letter-spacing:1.3px}.logMessageDetails-configToggler.svelte-faon1y span.svelte-faon1y{display:inline-block}.logMessageDetails-config--collapsed.svelte-faon1y .logMessageDetails-configToggler span.svelte-faon1y{transform:rotate(-90deg)}.formatterConfig.svelte-faon1y.svelte-faon1y{display:flex;justify-content:space-between;align-items:stretch}.logMessageDetails-config--collapsed.svelte-faon1y .formatterConfig.svelte-faon1y{max-height:0px;overflow:hidden}.formatterConfig.svelte-faon1y>.svelte-faon1y{width:50%}.formatterConfig.svelte-faon1y>.svelte-faon1y:not(:last-child){margin-right:20px}.formatterConfig-value.svelte-faon1y h4.svelte-faon1y{display:flex;align-items:center}.formatterConfig-value.svelte-faon1y .button.svelte-faon1y{margin-left:4px}.formatterConfig-keybindingSelector.svelte-faon1y.svelte-faon1y{margin-left:auto}.formatterConfig-keybindingSelector.svelte-faon1y button.svelte-faon1y{padding:0px;margin:0px;border:none;text-transform:uppercase;font-size:10px;letter-spacing:1px;cursor:pointer}.formatterConfig-keybindingSelector.svelte-faon1y button.svelte-faon1y:not(:last-child)::after{content:'|';margin-left:5px}.formatterConfig-keybindingSelector.svelte-faon1y .selected.svelte-faon1y{font-weight:bold}.formatterConfig-value.svelte-faon1y .code.svelte-faon1y{height:200px;margin:0px;overflow:hidden}.formatterConfig-preview.svelte-faon1y .code.svelte-faon1y{height:200px}h3.svelte-faon1y.svelte-faon1y{text-align:left;margin-top:30px;margin-bottom:14px;text-transform:uppercase;font-size:17px;letter-spacing:1.3px}h4.svelte-faon1y.svelte-faon1y{text-align:left;margin-bottom:10px;text-transform:uppercase;letter-spacing:01px;color:#666;font-size:12px;margin-top:0px}
|