New WebUI

From OpenNMS
Jump to: navigation, search
OpenNMS webUI on a Blackberry
Starting with release 1.3.2, OpenNMS has gained a new-look for the web UI. The immediate drivers for this this work are:
  • Simplification of OpenNMS' existing CSS and pages.
  • Provision of a contemporary look and feel that matches the OpenNMS community house style
  • The need for a baseline appearance that will be inherited by new pages.
  • The need for some "best practice" guidelines for JSP and CSS that can be followed by developers without the guidance of a UI Designer.

The longer term goals are:

  • To improve accessibility and cross platform support (in particular, better support mobile devices such as Blackberry).
  • To simplify the task of customizing the OpenNMS webUI for different customers (a white label OpenNMS).

This is not an entirely straightforward process and will inevitably involve some retrograde steps along the way. This page is intended to track issues with the new WebUI. Please feel free to add your own comments and issues.

Color for severities has disappeared

Issue: Color has disappeared in some places. Events and Path Outages for example.

Yeah, sorry about that. I've put in a quick fix for the events and alarms, but this does need some work. In general the pages with more complex tables have suffered the most.

the current SVN trunk version has a new "tinted" look for events. This is to improve the issues with legends disappearing under background colours and generally imporve useability. Let me know what you think.

Event and Alarm lists

Issue: Event, alarm and notification lists are not as friendly as they were.

I think that the event, alarm and notification lists need attention the most. T has mentioned this, and they are the first "second level" pages scheduled for attention.

Most of these have been done now. The event, alarm and notification list, search and detail pages are now pretty much fixed for the next release.

Default font size and resizing

Issue: The default font size in most places has been made smaller. I can increase the size in my browser settings, but that makes it too big in other places. Most notably in drop-down lists and submit buttons.

The idea is to have everything resize in proportion. We're trying to simplify everything, but there are quite a few exceptions.

Identification of links

Issue: Generally the green text is a link, but some white text is, and some isn't. And the contrast between green text and black text isn't very noticeable. I miss the old links. Blue text and underlined. Makes it really clear what's a link and what isn't.

I'm not sure about the green text at all. Green on green does not work with the tables that have associated severities. We're trying to de-clutter things though. I agree that it's not clear what's a link and what isn't. Part of that is a semantic problem though. It should be obvious what is an annotation and what is an action.

New Headings

Issue:I find white text on the split 2-toned green background somewhat difficult to read.

That will stay for now whilst we sort out the more gross problems.

IE 6 rendering

Issue: It's not good. This should now be fixed. In the meantime, we seem to have found a firefox CSS bug.

Printer Support

Issue: Printing pages from the browser no longer gives a reasonable facsimile of the page. (At least not on Firefox/1.0.8 or IE 6.0).

We are trying to make the UI work on different platforms (it's now tolerable on a blackberry BTW), the printer issues are probably a side effect of that. Here's a question: Do we actually want printed pages to look like a browser window?

We have recently added a minimal print CSS. There are things that you would not want to print that do exist in the browser window (typically headers and footers, colours and links to new pages). We have removed the headers and footers but have not done much with anything else.

Two Column Layout turns into one if right column is too wide

I'm not actually sure how often this happens, but I've seen the two column layout in the node page broken by events that did not break cleanly across short lines.