Display a log file in dashboard

Dashboard
1

Continuing the discussion from I need to display a program event log in dashboard:

@shrickus tried your suggestion in post #8, and it almost works, except there are no line breaks, and the log displays as one long string.
I've tried putting a change node between the exec node and the ui_template node, to change \n to <b> but it's still doesn't display individual lines of the log.

Any suggestions?

log

2

Wow, there's a blast from the past...

There are lots of html tricks for displaying plain text with line breaks in a browser. I like to put a bit of CSS styling into my ui_template node, like so:

<style>
    #mylog {
        min-height: 300px;
        padding: 0;
        white-space: pre;
    }
</style>

<div id="mylog" ng-bind="msg.payload" contenteditable="true">
    <!-- file contents will go here -->
</div>

which works well if you just want to show some multi-line text. I've also used Angular syntax to render a payload array into separate <li> elements or table rows, for instance. It really depends on whether your data is unstructured text, or columns of data.

5 Likes
3

Yes, that works exactly as I want, but I don't understand how you've done it!
How come it now breaks as it should without changing line breaks to html elements?

4

That bit of styling tells the <div> element to respect "preformatted" text (line breaks, tabs, indentation, etc). This overrides the usual html rendering that collapses all white space to a single space.

Alternately, you could use a <pre> element (which is the old way to show preformatted text).

5

Ah! Thanks for the help.

6

I have been trying to format my log data. This was extremely helpful. Thanks Dave.

7

Hi.
My flows are writing some messages into a file. I used your template to display these on my dashboard. Unfortunately only the newest written line is displayed. What am I doing wrong?