A front-end for my websocket-tail websocket server, written in react.
- nodejs v10.x
- typescript (npm i -g typescript)
- yarn package manager
- websocket-tail server (https://github.com/LogicBite/websocket-tail)
Clone the repository:
git clone https://github.com/ExtraHash/react-tail-printer
Change the directory into the repository you've cloned:
cd react-tail-printer
Install the dependencies
yarn
Fill out the config file with your own websocket host and port (the ones from your websocket-tail server you have running)
nano ./src/Config/config.json
This command will open it to edit in nano, but you can use whatever text editor you'd prefer.
Finally, start the application:
yarn start
You can customize the log output. Three methods of customization are currently available:
You can add custom css styles to each line of the log output based on a JSON file of values you provide, which is at src/Constants/styleConfig.json
. Here's an example styleConfig.json:
{
"success": {
"strings": ["TurtleCoin", "[checkpoints]", "added to main chain"],
"class": "has-text-success has-text-weight-bold"
},
"danger": {
"strings": ["ERROR"],
"class": "has-text-danger has-text-weight-bold"
},
"primary": {
"strings": ["Stop signal sent"],
"class": "has-text-primary has-text-weight-bold"
},
"violet": {
"strings": ["==="],
"class": "has-text-violet has-text-weight-bold"
}
}
You can name the values anything you'd like. If the log has contains any of the strings in the value.strings
array, it will apply the CSS class of whatever is in the value.class
. Example: if my log output contains "TurtleCoin", a css class will be applied to the line of "has-text-success has-text-weight-bold". (From the success
value).
You can place your custom css classnames in src/config/styles.css
.
Sometimes you might have substrings you want to completely remove from the log output. You can include an array of substrings at src/Config/substringsToRemove.json
and react-tail-printer will trim them out of the log. Here's an example:
["[protocol]", "[Core]", "[daemon]", "[node_server]", "[RocksDBWrapper]"]
Sometimes you may not want to display specific lines at all in the log output. You can add any strings to an array at src/Config/linesToIgnore.json
and if the log output contains any of the provided strings, it will not be displayed to the user. In this example, i'm removing some ASCII art by removing any lines that contain these specific characters:
["█", "═", "_", "|"]