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 ------------------------------------------------------------------------------ == Introduction == - ---- /!\ '''Edit conflict - other version:''' ---- 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 (instead of just HICC), please read ["Chukwa Quick Start"]. @@ -22, +21 @@ * 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 - - ---- /!\ '''Edit conflict - your version:''' ---- - 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 (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: - * 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 - - - ---- /!\ '''End of edit conflict''' ---- == 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. @@ -78, +56 @@ * goto: http://<host>:8080/hicc - ---- /!\ '''Edit conflict - other version:''' ---- == User Guide == - ---- /!\ '''Edit conflict - your version:''' ---- - == User Guide == - - ---- /!\ '''End of edit conflict''' ---- 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: @@ -96, +69 @@ * Click '''Options''' -> '''Add Widget''' * Explorer the widget tree and add widget into the potral. - - ---- /!\ '''Edit conflict - other version:''' ---- 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 @@ -111, +82 @@ This will describe the HICC user based permission system. - ---- /!\ '''Edit conflict - your version:''' ---- - 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 **) - - This will describe the HICC user based permission system. - - ---- /!\ '''End of edit conflict''' ---- - === Add Your Own Widget === In this section, I will describe how to create your own widget for HICC. ==== Example 1. Simple Hello World ==== First, we will build a '''Hello World widget'''. * cd $CHUKWA_DATA_DIR/descriptors - - ---- /!\ '''Edit conflict - other version:''' ---- * create a hello_world.descriptor file. The name of the file is not important as long as it is unique. - - ---- /!\ '''Edit conflict - your version:''' ---- - * create a hello_world.descriptor file. The name of the file is not important as long as it is unique. - - ---- /!\ '''End of edit conflict''' ---- * 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", @@ -156, +104 @@ } }}} * create tomcat/webapps/hicc/jsp/hello.jsp and put "Hello world" in the file. - - ---- /!\ '''Edit conflict - other version:''' ---- * remove the cache files (if they exist) - - ---- /!\ '''Edit conflict - your version:''' ---- - * remove the cache files (if they exist) - - ---- /!\ '''End of edit conflict''' ---- * remove $CONFIG_DATA_DIR/descriptors/*.cache * remove $CONFIG_DATA_DIR/views/*.cache * Congralution! You just finish your first HICC Widget. - ---- /!\ '''Edit conflict - other version:''' ---- 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. - - ---- /!\ '''Edit conflict - your version:''' ---- - 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. - - ---- /!\ '''End of edit conflict''' ---- ==== Example 2. Hello Your Name ==== In this example, we will extend example 1 to take configuration parameter. * cd $CHUKWA_DATA_DIR/descriptors - - ---- /!\ '''Edit conflict - other version:''' ---- * create a hello_world.descriptor file. - - ---- /!\ '''Edit conflict - your version:''' ---- - * create a hello_world.descriptor file. - - ---- /!\ '''End of edit conflict''' ---- * Inside the hello_world.descriptor file, put the following: {{{ { "id":"hellow_word", @@ -206, +134 @@ } }}} * create tomcat/webapps/hicc/jsp/hello.jsp and put {{{ Hello <% out.print(request.getParameter("your name")); %>. }}} in the file. - - ---- /!\ '''Edit conflict - other version:''' ---- * remove the cache files (if they exist) - - ---- /!\ '''Edit conflict - your version:''' ---- - * remove the cache files (if they exist) - - ---- /!\ '''End of edit conflict''' ---- * remove $CONFIG_DATA_DIR/descriptors/*.cache * remove $CONFIG_DATA_DIR/views/*.cache * Congralution! You just finish your second HICC Widget. - ---- /!\ '''Edit conflict - other version:''' ---- 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. - ---- /!\ '''Edit conflict - your version:''' ---- - 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. - - - ---- /!\ '''End of edit conflict''' ---- - === More Detail About The Examples === The HICC UI framework consists of 3 parts. * The framework and view - - ---- /!\ '''Edit conflict - other version:''' ---- * 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 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. @@ -261, +171 @@ '''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 || {"name":"height","type":"select","value":"200","label":"Height","options":[{"label":"200","value":"200"},{"label":"400","value":"400"}, + || 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":"frusts 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"}]} }}} || || @@ -277, +188 @@ === Target Widget Component === (*** TODO ***) - ---- /!\ '''Edit conflict - your version:''' ---- - * 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 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 || {"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"}]} || || - || 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 ***) - - ---- /!\ '''End of edit conflict''' ---- -
