Ninja - DOJO - Dev. Manual

This manual is about the new layout DOJO for the Nagios GUI NINJA.

DOJO aims to improve the structure, style and semantics of NINJA. Making the layout more dynamic, responsive and remove deprecated ways of handling layout.

DOJO will effectively make all custom skins unusable due to its enourmous changes to CSS, newly released skins for ninja include default, classic and hello kitty.

DOJO enforces the earlier experimental NOC behaviour on ninja, it cannot be switched back to the older sidebar menu.

Layout

Menus

The menus have move from a sidebar style to a drop-down behaviour (earlier experimental NOC) to give the data as much space as possible. Some menu-items have been moved (host problems, service problems and unhandled problems) to a joined unhandled problems quickbar icon.

Quickbar

The quickbar contains some of the older top-bar icons and functionality, such as settings and refresh but has been extended with a shortcut to unhandled problems and tactical overview. In ninja it also links to this documentation.

The aim with the quickbar is that all customers should be able to pin menu items, filtered/saved searches and external links to an icon in the topbar for easy access to as much as possible based on their needs.

Install SASS

All developers must install SASS and Compass since we don't keep the compiled CSS in the repos, only SASS.

In order to install sass and compass, run the make:

make install-sass

Or install the gems manually through

gem install sass (may need to sudo)
gem install compass (may need to sudo)

Once installed you can proceed to browse to the skin folder of your choice and type in the compass command.

cd ~/<repo>/monitor/ninja/application/views/themes/default/css/default
compass watch

Compass will poll for any changes to the SASS and compile to CSS, if no CSS is found it will do a first time compilation initially.

Or you can run the command make in the root directory after each SASS change

make

SASS

SASS syntax

SASS is a white-space sensitive indentation hierarchy language that does not use curly brackets or semi-colons as in regular CSS. It has support for inheritance, nesting, variables and "mixins".

SASS quick guide

Variables

Variables in SASS are denoted using the dollar-sign and are assigned using the colon, they contain CSS values, i.e. not pure numbers and text but type-specific values and can be used in place of any comparative value type.

$fontF: "Verdana"
$fontS: 16pt
$fontW: bold

p
	font: $fontS $fontW normal $fontF

Nesting

In regular CSS there is no nesting, if we want to declare a style to a parent, its children and their children, we have to create three independent scopes

.container {
	properties...
}
.container .content {
	properties...
}
.container .content span {
	properties...
}

In SASS we have a nested way of doing this using the indentation hierarchy

.container
	properties...
	.content 
		properties...
		span 
			properties...

Sub-property nesting

SASS takes CSS nesting to another level, allowing sub-properties to be declared as nests, here we want to declare font properties to a p tag.

p
	font
		family: "Verdana"
		size: 12pt
		weight: normal
		style: italic

Mixins

Sort of like functions that can take 0 or more arguments and return a set of (possibly dynamic) CSS properties.

@mixin demo
	font
		family: "Verdana"
		size: 12pt
		weight: normal
		style: italic

In and of itself it does nothing, if it is not used it will not be in the resulting CSS, but if we want this font style to be used in all table cells, p tags and spans but with different colors we use it as such.

p
	@include demo
	color: #444
td
	@include demo
	color: #666
span
	@include demo
	color: #888

The reason for using mixins and not only inherited selectors is that mixins can take arguments and return dynamic sets of properties. Here we declare a global font and size but we want the selector using the mixin to determine the color and style of the font.


$font: "Verdana"
$size: 12pt

@mixin demo($color, $style)
	font
		family: $font
		size: $size
		weight: normal
		style: $style
	color: $color
p
	@include demo(#444, normal)
td
	@include demo(#666, oblique)
span
	@include demo(#888, italic)

Inheritance

Inheritance is used in much the same way as mixins except that they take existing selectors instead of the compilation level mixin definition. Here we declare a p tag style and a span tag that inherits the style of the p tag and declares its own.

Both the p and span selectors will be contained in the resulting stylesheet!

p
	font
		family: "Verdana"
		size: 12pt
		weight: normal
		style: italic

span
	@extend p
	color: #567

Read more on SASS website, and more about compass and its support mixins on theirs.

Configuration

The new CSS is generated using the SASS 'pre-processor', giving it far more power while developing. One of these powers is variables, and with variables DOJO includes a configuration file, found under themes/default/dojo/config.sass.

In this file you can set general configurations, such as the header height, fonts, different colors and more.

All img tag icons should be replaced by sprite spans

Ninja now uses CSS sprites instead of independent icon images, a first glance test lowered the request count from 94 -> 36 and uncached load-time by 1.4 seconds. Icon images can be replaced everywhere an icon is used from the icon folders and is a PNG image.

GIF icons cannot be included in spritesheets by compass, use the old icon images for icons, gif icons will be updated to PNG.

In order to utilize this development feature all img tags relating to icons should move from the old e.g.

echo html::image(
	$this->add_path('icons/12x12/shield-'.strtolower($row['status']).'.png'),
	array(
		'title' => $row['status'], 'alt' => $row['status'], 
		'style' => 'margin-bottom: -2px'
	)
);

To the new

echo '<span class="icon-12 x12-'.
	strtolower($row['status']).'" '.
	'	title="'.$row['status'].'"></span>';
// The style is omitted because inline style is no-no

Resulting in, maybe something like this

<span class="icon-12 x12-up" title="up"></span>';

The class is broken down to

icon-12

x12-

up

This is an icon and it is of size 12x12

It is part of the spritesheet x12 (like all 12x12 icons)

And it's the one formerly named up (up.png)

The class for icons such as shield-not-disabled would hence become:

icon-16

x16-

shield-not-disabled

This is an icon and it is of size 16x16

It is part of the spritesheet x16 (like all 16x16 icons)

And it's the one formerly named shield-not-disabled (shield-not-disabled.png)

Global Auxiliary Selectors

.alpha

Sets the opacity of the element to 0.4 by default and nothing else, the amount it sets can be configured in the SASS configuration file.

.right

Floats the elements to the right and nothing else. Use .clear to restore.

.left

Floats the elements to the left and nothing else. Use .clear to restore.

.clear

Clears both on the element and nothing else. Always use after floated elements to restore normal flow.

.none (legacy .white)

Makes the element completely transparent by setting 0 opacity.

.nullify (legacy .white)

Removes a lot of things, this one is already in use by all tables by default.

 All Data Structures Functions Variables

Generated on 22 Nov 2012 for ninja by  doxygen 1.6.1