A more "console" based server log

Hey everyone. I’m in the process of re-designing the server log on the log page. Im doing this not because the page was bad but I thought it would be better if that page acted more like a console since you can enter commands. 90% of what I’m doing is just adding some more CSS. But I am adding in some minimal JavaScript to make it auto scroll to the bottom. I’ll be able to post screenshots tonight or tomorrow.

In short it behaves much more like an actual console. it I also am going to parse the log lines and add color where appropriate.

Does anyone like this idea? It’s something that I really wanted but I don’t have to issue a pull request.

Here is an example screenshot. This currently does not display color, but instead just strips out the tags so it is at least readable. I plan on adding color support, but it’s a bit more difficult than I first thought it would be. I will tackle it when I have time.


1 Like

Are you able to address the whitespace changes? These commits are wonderful but all the whitspace modifications mess with the history a lot.

Mess with the history how so? Most of this is just removing borders and padding. I haven’t experienced any issues yet.

Is there an example of something I could check for?

It won’t be functional issues within the webui, but the git history will then be littered with dozens of unintentional whitespace changes.

The history is lost is seen with the “blame” functionality of git/github. It will then report that untouched areas of a given file were last modified here, when it in fact had no relationship to the improvements you’re trying to implement. Have yo seen my responses to your previous git issues? I’ve been asking if you use the atom file editor, which notoriously does this editing by default.

Oh I’m so sorry, I mis-understood. I’m using sublime text generally, sometimes vim. I turned on a setting for other reasons in sublime text to trim all whitespace. I’ll make sure I turn that setting off for this project. And I’ll remake these changes in a fresh branch off master. From here on in I’ll make sure my commits don’t have that issue.

And I do apologize for that. I know it’s a pain.

I just went back and looked at your comments. I apologize again for not seeing those comments. I never got notified of them for some reason. No matter what, I’ll make sure my pulls in the future don’t change the whitespace.

Thanks for your consideration; I definitely want you to get credit for your work and this console update is something I’m rather excited about to improve the webui.

What’s the state of your changes–aside from the whitespace–is it ready to review?

Its almost ready for review. Just need to tweak some more css to see if I can get the console window to keep its size relative to the browser window size.

I cant seem to get MineOS setup on my laptop as a dev environment and my server is off at the moment due to some electrical work, so I can’t test it there. Ill finish it up and issue a pull for review as soon as I can.

Glad you like the changes! Other than the github issues, is there a roadmap or list of things that need working on? I can continue to suggest and make changes to my liking, but I want to make this better for everyone not just myself.

Okay, so here is the diff for my branch for review. The beautiful, you can actually see what changed diff haha. I didn’t issue a pull just yet, since I couldn’t quite get the styles to work for both the console log and the Spigot BuildTools output. So right now this is just for the server log. For some reason the BuildTools output was acting very strangely when I applied the same css. Ill keep looking into that. If you want me to issue a pull as is, please let me know.

I also couldn’t get the more responsive feel working for the height either. At least not without reworking some of the HTML and CSS fairly extensively, so I opted not to do it. We can always change up the height a bit with some media queries though.


I like the idea, I have been using BareTail for monitoring just because it automatically shows me the end of the file (I use a Windows box for gaming and a lot of day to day stuff, Linux for my servers, etc), and had installed an auto scroll utility in firefox to help me work with that and the server settings screen. Will the box be a set size in the browser window after this? Also the coloring would be awesome! Can hardly wait for the real thing to land!

Did you get my patch CSS comment written on your commit comments?

No I am just seeing it now. I never for a notification about it… Ill have to check my settings on GitHub. Ill take a look!

Thanks for the feedback! The box is going to be set… I haven’t had good luck with getting it to resize with the window. I may be able to do something so it at least gets bigger on larger monitors… but I’ve been getting strange results. Once I push my version out, I’m definitely open to ideas on how to make it responsive. Ideally this window will take up as much room as it can on the screen to be able to show the maximum number of lines in the log.

As for the colors, I’m excited about it too! Definitely something I want to work on. I just need to write a parser for it. Not hard, just time consuming. I haven’t been able to find a good library for it. There may be one for Node.JS to do that conversion on the server side, but I personally don’t like that approach. UI processing shouldn’t happen on the server.

When you start working on the colorization, make sure it’s a new branch! Don’t let adoption of finished work get delayed by future ideas!

I think I was able to solve this with the vh CSS rule, so see if it works for you as well as it did for me. I suspect I can pull this into the main master once you feel good about these updates (before you even get started on the colorization).

Haha, just issued a pull request saying the exact same thing.

Alright, so I’ve finished my first draft of a colored console. I would love some thoughts and feedback before I issue the pull. I can change the colors around a bit. I did my best to keep it true to the game colors and so I made the console have a black background. But if this is not preferred, I can update it.

Its a fairly meaty pull request so I have not made it yet. You can see the diff here:

I apologize about the package.json file… npm alphabetized the dependency list… I can undo that if you like. Not hard before I make my pull request.


When the time comes, I might end up modifying the comma-first convention you used in the colorize function. While I understand the merits of comma first (from isaacs old thread), it’s inconsistent with the entire remainder of the codebase I’ve written in node/js and I think that maybe when I start a new project (and am with the level of familiarity I have now), I may one day adopt comma-first, but not yet.

If possible, undo the alphabetization of the package.json because soon I’ll want to pull in the nodev4 branch which will bring along the old list order.

When this merge happens, I hope to clean up package.json a bit, but I’ll probably still stay away from automatic dependencies, e.g., “^1.4.6”. There’s a lot at risk and little to gain when taking new minor versions of so many utilities; not all npm softwares use semver, after all–and security/bugfixing is already satisified with “1.4.x”.

Other than that, I might consider some soft of button/toggle that will let users switch between colorized and non-colorized. Colorized, on one hand, is far more representative of what a user would see connecting to the console, but I’m hoping there’s a light weight to fallback on to non-colorized, with colorized as the default.

Don’t worry to implement such a toggle, though; I think I can work off your PR to get there.

Sorry about the comma first. Normally I try to keep with the style of the project I am working in. But we use coma first at work and it’s just a bit second nature to me now.

Updating package.json should be trivial just didn’t know npm did that untill I saw the diff. Also, I hope it’s okay that I added another library (angular sanitize). It really is needed, angular throws a fit that I am adding html without it, but I personally hate just adding libraries unless they really are needed. Wasn’t sure how you feel about that.

I should be able to get that done tonight. I think a toggle is a great idea!

Just want to say that this is an awesome idea to have in the webUI, Great work guys. Now all I have to do is get my ubuntu node working so I can see this in action…

I see that that the scrollilng part of the logs has been updated, looks good!. Is the color to come, or am I missing a setting?

This is great. I had in mind to post a request for something like this. Thanks so much!