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.
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.
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.
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 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".
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
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...
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
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 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.
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.
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) |
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.
Floats the elements to the right and nothing else. Use .clear to restore.
Floats the elements to the left and nothing else. Use .clear to restore.
Clears both on the element and nothing else. Always use after floated elements to restore normal flow.
Makes the element completely transparent by setting 0 opacity.
Removes a lot of things, this one is already in use by all tables by default.