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 ------------------------------------------------------------------------------ - TDB. This will description the HICC user based permission system. === Add Your Own Widget === - In this section, I will describe how to create your own widget for HICC. First, we will build a '''Hello World 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 + * 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. * 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). {{{ { @@ -87, +90 @@ 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. + ==== 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. + * Inside the hello_world.descriptor file, put the following: {{{ + { + "id":"hellow_word", + "title":"Hello Word", + "version":"2.0", + "categories":"Test,My Widget", + "module":"iframe/jsp/hello.jsp", + "description":"Hello world", + "screendump":"\/images\/start.png", + "refresh":"15", + "parameters":[ + {"name":"your name","type":"string","value":"","edit":"1"}, + ] + } + }}} + * create tomcat/webapps/hicc/jsp/hello.jsp and put {{{ Hello <% out.print(request.getParameter("your name")); %>. }}} in the file. + * remove the cache files + * 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. + + 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". + + === 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 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. + * 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. +
