The op5 Monitor user interface is using Kohana as framework some of the back end parts for the widgets are handled by Kohana. But this chapter will only describe the widget development in it self.
Each widget has one main widget class. It needs to be in a PHP-file with the same name as the widget you are creating, and must must be called an uppercased version of the same name, with a _Widget suffix.
While you could print your widget content from the index function as above, it's better to move your content to a separate view file to distinguish functions and content .
1
|
Go to the application folder: cd /opt/monitor/op5/ninja/application
|
2
|
Create the following folders:mkdir -p custom_widgets/hello_world mkdir custom_widgets/hello_world/css mkdir custom_widgets/hello_world/images mkdir custom_widgets/hello_world/js
|
You could use this to create a gazillion of “Hello World”-widgets, or you could create a widget that has multiple datasources like the built-in widget “Unacknowledged service problems” that is described in op5 Monitor User Manual.
The example we have been working on here in this chapter is very basic and the output is not much to use. Once you have understood the basics you will probably like to create a more useful widget.
One way to get more information about how you can create a more advanced widget is to take a look at one of the widgets shipped with op5 Monitor.
To make it easy for other users to install and start using your widget you should make a package of it. Then one can install the package in the Tactical Overview in the op5 Monitor GUI.
1
|
Create an xml file that looks like this:<?xml version="1.0" encoding="UTF-8"?> <!-- Manifest file for widget to be used in Ninja4Nagios --> <widget_content> <author>John Doe</author> <version>1.0</version> <Friendly_name>My cool widget</Friendly_name> <description>A cool widget for op5 Monitor Tactical Overeview.</description> <page>tac/index</page> </widget_content>
|
To set up a widget contact you first need to create a access right. When that is configured create a contact with the same name as the access right and specify which contact groups(s) is should be a member of.
This file has two variables, “widget_name” specifies which widget that should be shown by default if no widget is set in the iframe. The next one is “username” and this sets the user that should be allowed to fetch the widget.
<iframe src="http://<SERVER_NAME>/ninja/index.php/external_widget/show_widget/<OPTIONAL WIDGET_NAME>" height="500px" frameborder=0 width="600px" scrolling='no'></iframe>
In this iframe you will need to change the <SERVER_NAME> to you op5 monitor host name and <OPTIONAL WIDGET_NAME> can either be removed and the default widget will be used or you can specify a widget name to view another widget.
In op5 Monitor 5.6 the whole widget system is redeveloped to add more functionality such as multiple instances of a widget. If you have created widgets in op5 Monitor prior to 5.6 they will not work out of the box.
In old-style widgets, you usually needed to create a javascript file with the
var my_widget = new widget('my_widget', 'widget-content');
<div class="widget-header"><span class="<?php echo $widget_id ?>_editable" id="<?php echo $widget_id ?>_title"><?php echo $title ?></span></div>
<div class="widget-editbox">
<?php echo form::open('ajax/save_widget_setting', array('id' => $widget_id.'_form', 'onsubmit' => 'return false;')); ?>
<label for="<?php echo $widget_id ?>_refresh"><?php echo $this->translate->_('Refresh (sec)') ?>:</label>
<input size="3" type="text" name="<?php echo $widget_id ?>_refresh" id="<?php echo $widget_id ?>_refresh" value="<?php echo $refresh_rate ?>" />
<div id="<?php echo $widget_id ?>_slider"></div>
<?php echo form::close() ?>
<div class="widget-content">
public function __construct()
# needed to figure out path to widget
$this->set_widget_name(__CLASS__, basename(__FILE__));
public function index($arguments=false, $master=false)
# required to enable us to assign the correct
# variables to the calling controller
$this->master_obj = $master;
$view_path = $this->view_path('view');
if (is_object($arguments[0])) {
$current_status = $arguments[0];
$current_status = new Current_status_Model();
if (!$current_status->data_present()) {
$current_status->analyze_status_data();
$widget_id = $this->widgetname;
if (isset($arguments['refresh_interval'])) {
$refresh_rate = $arguments['refresh_interval'];
$title = $this->translate->_('My Widget');
if (isset($arguments['widget_title'])) {
$title = $arguments['widget_title'];
# let view template know if wrapping div should be hidden or not
$ajax_call = request::is_ajax() ? true : false;
require_once($view_path);
echo json::encode( $this->output());
$this->js = array('/js/my_widget');
$this->css = array('/css/my_widget');
# call parent helper to assign all
# variables to master controller
public function __construct($model)
parent::__construct($model);
* Do any global initiation here
$view_path = $this->view_path('view');
$current_status = $this->get_current_status();
$arguments = $this->get_arguments();
$this->js = array('/js/my_widget');
$this->css = array('/css/my_widget');
public function options() {
$options = parent::options();
$options[] = new option('my_widget', // your widget name (or something else unique)
'option1', // a unique option name
$this->translate->_('My first option'), // your label
'input', // option type - input, checkbox, dropdown, etc
array('size'=>5), // extra attributes for the field
'default1'); // default value
$options[] = new option('my_widget',
$view_path = $this->view_path('view');
$current_status = $this->get_current_status();
$arguments = $this->get_arguments();
protected $duplicatable = true;
var my_widget = new widget('my_widget', 'widget-content');
$('#my_widget_setting').change(function() {
my_widget.save_custom_val($(this).val(), 'my_widget_setting');
$('#'+my_widget.widget_id+' .my_widget_setting').change(function() {
my_widget.save_custom_val($(this).val(), 'my_widget_setting');