Show which server you are connected to in a more obvious way #66

Closed
davsclaus opened this Issue Feb 2, 2013 · 14 comments

Projects

None yet

3 participants

@davsclaus
Member

I booted up tomcat and deployed a Camel app to it. And installed jolokia on Tomcat.

Then I booted up hawtio using the mvn jetty:war and connected to the "remote" Tomcat server. This works great btw.

However I think we should make it obvious to the user which server is connected to.
Its certainly important if you start connect to production systems etc.

Maybe have a way in preference to setup color schemes based on reg exp matcing on the connection url. Then you can setup so PROD servers are more highlighted. And TEST servers in another color etc. And local servers in yet another.

And then have a bar below the top menu that spans the page and shows the server you are connected to with the color scheme. Or some other way.

When I was working on mainframes we had our 3270 screen with some color codes in the top of the screen, so we would know if we are on a customer PROD server, or our own DEV server etc.

For starters it would be nice just to show the connect to url.
Then we can consider the color bars etc.

In the picture below its from the preference where I connected to Tomcat. But when I browse the other pages I cannot easily see which server I am connected to.

tomcat

@jstrachan
Member

This relates to #303 - I wonder if we can have a few different styles for nav bar based on if you are connected to a remote node or not; maybe even based on the Fuse Fabric profile of the container you are connected to?

@gashcrumb
Member

I also think we should keep the page title updated with the current tab and maybe the current host/container depending on what's available. That way it shows up in the browser tab and task list and makes it easier to distinguish between several open windows at the OS level. Might be an easy thing to do in the main nav bar controller. And I guess maybe we could add a hook so that plugins can register a function or string or something to be appended to the title, that way we could either use the server hostname by default or the fabric container name if available.

@jstrachan
Member

Great idea!

@gashcrumb gashcrumb was assigned May 14, 2013
@gashcrumb
Member

I wonder, is a title like:

hawtio - 25545@kolossus.gashcrumb.homelinux.org - JVMs

a little long, should I maybe omit the "hawtio -" bit? The 25545@blah blah blah is the JVM runtime name, so usually PID or pid@hostname, definitely handy to distinguish between processes.

@jstrachan
Member

I like the hawtio prefix; then its easier to tell when you've zillions of browser tabs, which ones are hawtio. Maybe hawtio#25545@.... to shorten it a bit?

@gashcrumb
Member

So now plugins can add an entry to the page title if applicable, for example we can get the container name if we're in a fabric container and add it to the page title in it's run function:

try {
  var id = jolokia.getAttribute('org.fusesource.fabric:type=Fabric', 'CurrentContainerName');
  if (id) {
    pageTitle.push(id);
  }
} catch (e) {
  // ignore
}

Just need to inject the pageTitle service.

@jstrachan
Member

Awesome :)

@gashcrumb gashcrumb added a commit that referenced this issue May 15, 2013
@gashcrumb gashcrumb Finish up #66 b3ddf80
@gashcrumb
Member

Okay, added a form to the preferences for this, you can add as many things to match on as you like and pick different colors:

form

The order of precendece is from last to first, i.e. regexs that match at the top of the list will take precedence over matches at the bottom of the list. For example, with the settings shown a URL like:

http://kolossus:35729/hawtio/#/preferences

gives an indicator like:

indicator

whereas if I use the proxy and connect to this URL (which contains localhost):

http://kolossus:35729/hawtio/?url=%2Fhawtio%2Fproxy%2Flocalhost%2F8080%2Fjolokia&_user=admin&_pwd=admin#/jvm/connect

I get the other color:

proxied

And no matches means no indicator... Also if you hover over the indicator with the mouse it'll show the match name as a tooltip. So I think with this + the support for customizing the title I think we've got lots of ways to distinguish between apps/hosts/containers or whatever... thoughts? Is the indicator too subtle?

@davsclaus
Member

This is really hawt. You guys rocks!. Love the color indicator.

I guess one improvement would be to allow to specify a label, so you can have both color + label shown. Then you can use meaningful names as the label. eg:
red square (primary EU broker)

And "primary EU broker" is the label you have specified in the preferences. Then you can still have same colors for different nodes, but the label can also distinguish them. Or vise-versa, if you like.

@jstrachan
Member

Awesome work @gashcrumb! :)

BTW I wonder if we can configure the visual label/indicators more on a per profile basis in Fabric? Then profiles can come out of the box colour coded? e.g. ActiveMQ v Camel v root container v ensemble node stuff etc?

@gashcrumb
Member

The name you assign to the regex is used to set the title attribute, so you can hover over the indicator and see the label. I avoided adding it only 'cause I was worried about taking too much space. Maybe though I could make it a fixed position element and put it elsewhere on the page, along with some of the title customizations as well...

@gashcrumb
Member

Think a more obvious indicator was a good idea, so have moved it to the bottom right. And you can click the arrow to move it out of the way if needed, for example (had to go with a full page capture, sorry!):

whole-page

It also shows the same info that's in the title, so if you're connected to a fabric container the container name will show up there. I'll open up a new issue regarding coloring based on profiles or container names, also it'd probably be better for these settings to be stored in git, or at least have a way to pre-define them server-side, currently they're being put into local storage.

@gashcrumb
Member

So been using this personally for awhile, think this is okay to close?

@davsclaus
Member

Yeah its great now

@davsclaus davsclaus closed this Jun 1, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment