Introduction

This document provides a high level overview of the Chukwa Console (aka HICC). It describes how to setup the Chukwa HICC console and integrate the Chukwa console as a standalone web portal. It is targeted to developers who just want to use the Chukwa web UI component to display their own data set.

For information about setting up the full Chukwa system (instead of just HICC), please read Chukwa_Quick_Start.

What is Chukwa Console (HICC)?

HICC is a java based portal platform for service management. The basic features for HICC include:

Install Chukwa Console

Chukwa HICC UI is a Java web application running on top of the Tomcat application server. Here is the steps required to get it up and running.

User Guide

The user's views are store in your $CHUKWA_DATA_DIR/views directory. Each view is stored under <name>.view file as a JSON object.

To create a new view, do the following:

To add more widgets to the view,

To remove widget from the view.

Customization

In this part of the documnent, I will describe how to customize the HICC console for your own application.

View Permission

(** TODO **)

This will describe the HICC user based permission system.

Add Your Own Widget

Example 1. Simple Hello World

First, we will build a Hello World widget.

You can now go to the HICC UI. Click on Options -> Add Widget. You will see the widget tree has a new category calls "Test". Open it up and you will see your Hello World widget. Click Add. Then it will add the widget to your view and it will display Hello world as in the widget area.

Example 2. Hello Your Name

In this example, we will extend example 1 to take configuration parameter.

You can now go to the HICC UI ( *** refresh the UI so it will load the new descriptor file *** ). Click on Options -> Add Widget. You will see the widget tree has a new category calls "Test". Open it up and you will see your Hello World widget. Click Add. Then it will add the widget to your view and it will display Hello as in widget area. (If you already has the hello widget add in the page from example 1, you can remove it and readd it to your page).

Now, the fun part, in the widget, move your mouse to the widget's title bar. You will see the "edit" option. Click on it and you will see the widget edit option. There is an option calls "your name". Type in your name as "joe" and click "save". The widget will refresh and display "Hello joe". HICC will pass the configuration parameter to the jsp as a request parameter. Hence, the JSP page will be able to get the parameter and display it.

More Detail About The Examples

The HICC UI framework consists of 3 parts.

Inside individual descriptor file, you need to specify the following JSON fields:

Descriptor File Format

Field ID

Decsription

Comment

id

a unique id for the widget

title

The name/title of the widget. It will be displayed in the widget selection UI.

categories

A comma separated list. It is used to specified the components category in the widget selection tree.

module

The called back URL for the widget. The content for the widget to be displayed.

description

description of the widget. The description is display in the widget selection UI.

screendump

(optional) A small thumbnail of what the widget look like.

version

version number of the widget. The format is: MajorVersion.MinorVersion. HICC will use the value to handle widget upgrade

refresh

the default refresh rate for the widget in minute. For example, 15, means the widget will be refresh in 15 minutes.

parameters

List of the configuration parameters for the widget (see the configuration parameter table below for detail).

Configuration Parameter Table

Type

Description

Example

Comment

Edit Field (String)

Single edit box

{"name":"table","type":"string","value":"ClientTrace","edit":"0"}

Drop Down Single Selection

A drop box to allow user to do single item selection

{"name":"height", "type":"select", "value":"200", "label":"Height","options":[{"label":"200","value":"200"},{"label":"400","value":"400"}, {"label":"600","value":"600"},{"label":"800","value":"800"},{"label":"1000","value":"1000"}]}

Multiple Selection

A list control which allow multiple selection.

{"name":"fruits", "type":"select_multiple", "value":"apple", "label":"fruits you like", "options":[{"label":"Apple","value":"apple"}, {"label":"Orange","value":"orange"}, {"label":"Banana","value":"banana"},]}

Radio Box

A radio button control

{"name":"legend","type":"radio","value":"on", "label":"Show Legends", "options":[{"label":"On","value":"on"},{"label":"Off","value":"off"}]}

More Examples

(*** TODO ***)

Charting Widget Component

(*** TODO *** Need to provide more detail and/or more example for this)

In order to use the chart component, you need to create a dataMap variable and put the graph data information inside it. Then call the Chart component to draw the chart.

A good example is in: src/web/hicc/jsp/single-series-chart-javascript.jsp. Inside the jsp file, it first opens the database and read the data. Then it will call the Chart component and return the chart to the front end.

You can also package your data from rest API or database, then call the Chart as below and return the object to the front end. (TODO: need to link to the Javadoc of the Chart component.)

       if(dataMap.size()!=0) {
           if(request.getParameter("render")!=null) {
               render=xf.getParameter("render");
           }
           Chart c = new Chart(request);           
           c.setYAxisLabels(false);
           if(request.getParameter("x_label")!=null && xf.getParameter("x_label").equals("on")) {
               c.setXAxisLabels(true);
           } else {
               c.setXAxisLabels(false);
           }
           c.setYAxisLabel("");
           if(request.getParameter("x_axis_label")!=null) {
               c.setXAxisLabel(xf.getParameter("x_axis_label"));
           } else {
               c.setXAxisLabel("Time");
           }
           if(title!=null) {
               c.setTitle(title);
           } else {
               c.setTitle(metrics.toString());
           }
           if(request.getParameter("y_axis_max")!=null) {
               double max = Double.parseDouble(xf.getParameter("y_axis_max"));
               c.setYMax(max);
           }
           if(request.getParameter("legend")!=null && xf.getParameter("legend").equals("off")) {
               c.setLegend(false);
           }
           c.setGraphType(graphType);
           c.setXLabelsRange(labels);
           c.setSize(width,height);
           c.setDataSet(render,dataMap);
           out.println(c.plot());
        }

Target Widget Component

(*** TODO ***)

Chukwa_Console_Integration_Guide (last edited 2009-09-20 23:54:56 by localhost)