Dear Wiki user, You have subscribed to a wiki page or wiki category on "Hadoop Wiki" for change notification.
The following page has been changed by TerenceKwan: http://wiki.apache.org/hadoop/Chukwa_Console_Integration_Guide ------------------------------------------------------------------------------ [[TableOfContents]] == Introduction == - This document provides a high level overview of the Chukwa Console (aka HICC). Then it will describe how to setup the Chukwa HICC console and integrate the Chukwa console as a standalone management portal. It is targeted to developers who just want to use the Chukwa web UI component to display their own data set. + 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 management 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, please read ["Chukwa Quick Start"]. + For information about setting up the full Chukwa system (instead of just HICC), please read ["Chukwa Quick Start"]. - == Why using Chukwa Console? == + == What is Chukwa Console (HICC)? == - - TBD. Describe the Pros and Cons of Chukwa Console. - + HICC is a java based portal platform for service management. The basic features for HICC include: + * Individual user view management + * Basic Drag and Drop Web portal functions + * Multiple view per user + * Multiple tab page per view + * Multiple widgets per tab page + * Drag and Drop relayout individual view + * Basic view permission system + * external widgets integration + * data integration. Using HICC existing UI component to display chart, table and graph. + * direct UI integration. Component can provide a URL and HICC will display the html page as a widget on the portal page + == 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. @@ -44, +54 @@ * check out the web UI * goto: http://<host>:8080/hicc + == User Guide == - == Customization == - In this part of the documnent, I will describe how to customize the management console for your own application. - - === Create Your Own Default View === - 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: @@ -60, +66 @@ * Click '''Options''' -> '''Add Widget''' * Explorer the widget tree and add widget into the potral. + To remove widget from the view. + * move the mouse to the widget's title bar and click the "X" delete button + * after confirmation of the deletion, the widget will be remove from the page + * To save the modification. Click "Save Dashboard" + + == Customization == + In this part of the documnent, I will describe how to customize the HICC console for your own application. + === View Permission === + (** TODO **) + - - TDB. This will description the HICC user based permission system. + This will describe the HICC user based permission system. === Add Your Own Widget === In this section, I will describe how to create your own widget for HICC. @@ -69, +85 @@ ==== Example 1. Simple Hello World ==== First, we will build a '''Hello World widget'''. * cd $CHUKWA_DATA_DIR/descriptors - * create a hello_world.descriptor file. The same of the file is not important as long as it is unique. + * create a hello_world.descriptor file. The name of the file is not important as long as it is unique. * Inside the hello_world.descriptor file, put the following (remember, the content is in JSON format. Make sure that it is a valid JSON string). {{{ { "id":"hellow_word", @@ -85, +101 @@ } }}} * create tomcat/webapps/hicc/jsp/hello.jsp and put "Hello world" in the file. - * remove the cache files + * remove the cache files (if they exist) * remove $CONFIG_DATA_DIR/descriptors/*.cache * remove $CONFIG_DATA_DIR/views/*.cache * Congralution! You just finish your first HICC Widget. - You can now go to the HICC UI. Click on '''Options''' -> '''Add Widget'''. You will see the widget tree has a new category call "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 hello.jsp file. + 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. * cd $CHUKWA_DATA_DIR/descriptors - * create a hello_world.descriptor file. The same of the file is not important as long as it is unique. + * create a hello_world.descriptor file. * Inside the hello_world.descriptor file, put the following: {{{ { "id":"hellow_word", @@ -114, +130 @@ } }}} * create tomcat/webapps/hicc/jsp/hello.jsp and put {{{ Hello <% out.print(request.getParameter("your name")); %>. }}} in the file. - * remove the cache files + * remove the cache files (if they exist) * remove $CONFIG_DATA_DIR/descriptors/*.cache * remove $CONFIG_DATA_DIR/views/*.cache * Congralution! You just finish your second HICC Widget. - 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 call "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 hello.jsp file. + 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. You will see that there is an option call "your name". Type in your name as "joe" and click "save". The widget will refresh and display "Hello joe". + 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. * The framework and view - * The framework will handle the view management and user management. It will also handle descriptor version control and widget loading. + * The framework will handle the view management, user management, javascript level drag and drop. It will also handle descriptor version control and widget loading. * The descriptor - * You can think of the descriptor file is a Java class file, PHP class definition or any OO class definition. It provides the id (similar to class name), description, refresh time in second and per widget instance parameters (similar to class internal variable). When the view load up a widget, it will pass the parameter to individual URL specified in the descriptor file. + * You can think of the descriptor file as a Java class file, PHP class definition or any OO class definition. It provides the id (similar to class name), description, refresh time in second and per widget instance parameters (similar to class's internal variables). When the view loads up a widget, it will pass the parameters to individual URL specified in the descriptor file. * Your widget * Just think of it as a web page. The descriptor file will pass the configured parameter to your URL and you can use the parameter to display the web page. + 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 Selection || A drop box to allow user to do single item selection || || || + || 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 ***) + + === Target Widget Component === + (*** TODO ***) +
