Amar-logviewer NPM

Toshiba Log Viewer

Log Viewer is designed to view logs better. This tool provides ability to create custom filter for your log type by adding and updating config files.

How to create custom view for my log file?

Create a XXView.html that consists of filter buttons you need. See example below

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>DB Log Viewer</title>
    <link rel="stylesheet" href="../css/view.css" />
    <link rel="stylesheet" href="../css/XXView.css" />
  </head>
  <body>
    <div class="tab">
      <button class="tablinks" onclick="showData(event, 'Home')">
        Home
      </button>
      <button class="tablinks" onclick="showData(event, 'DefaultView')">
        DefaultView
      </button>
      <button class="tablinks" onclick="showData(event, 'MyFilter1')">
        MyFilter1
      </button>
      <button class="tablinks" onclick="showData(event, 'MyFilter2')">
        MyFilter2
      </button>
      <button class="tablinks" onclick="showData(event, 'Combo')">
        Combo
      </button>
    </div>
    <div class="output">
      <pre id="data"></pre>
    </div>
    <script src="../js/renderer.js"></script>
    <script src="../js/LogViewer.js"></script>
  </body>
</html>

Create a XXConfig.json that should contains filter andregex elements and also markables(optional) . See example below

{
  "regex": {
    "MyFilter1": "(?<=newState\":{).*.+?(?=}})",
    "MyFilter2": "(?<=newState\":{).*.+?(?=}})"
  },
  "filter": {
    "MyFilter1": "topic\":\"/ui/state\",\"correlationId\"",
    "MyFilter2": "topic\":\"/pos/elevate/event\",\"sourceHeader\":\"BNRUIState\""
  },
  "markables": {
    "MyMarker1": {
      "TextFilter": "\"substate\":\"initial\",\"state\":\"initialized\"",
      "Marker": "reload"
    },
    "MyMarker2": {
      "TextFilter": "\"substate\":\"complete\",\"state\":\"transaction\"",
      "Marker": "transComplete"
    }
  }
}

Add a entry of your log file name pattern in logIdentifier.json. See example below
```
{
  "fileNameRegex": {
    "deviceBroker": "device-broker-.*.+?\\.log"
  }
}
```
Point your log file type to appropriate xxView.html inside view.json. See example below
```
{
  "deviceBroker": "../html/DBView.html"
}
```
Finally add entry of your XXConfig.json inside parent config.json.See example below
```
{
  "deviceBroker": "../json/dbConfig.json"
}
```

You can also XXView.css and XXLogViewer.js if needed

Log Viewer Button Options:

Log Viewer has few button options that gives great ability to your Log view.

DefaultView:

DefaultView displays entire log file with color coding on Warnings and Errors

Combo:

Combo will mix all filters into single view.

If you want these options for your log file, just simply add these two buttons to your html view file and you are done!

Run Log Viewer

npm start

Build Log Viewer

To build .exe file

npm run build_win

7zip-min electron electron-find marked word-wrap

2.4.0

4 years ago