ipojo/webconsole-plugin/src/main/resources/res/instance.html

<script type="text/javascript" src="${pluginRoot}/res/ui/instance_detail.js"></script>
<script>
    var root_url = '${pluginRoot}';
    var instances_url = '${pluginRoot}' + '/instances';
    var factories_url = '${pluginRoot}' + '/factories';
    var handlers_url = '${pluginRoot}' + '/handlers';
    var instance_name = '${name}';
</script>

<!-- status line -->
<p class="statline">&nbsp;</p>

<!-- top header -->
<form method="post" enctype="multipart/form-data" action="">
	<div class="ui-widget-header ui-corner-top buttonGroup">
		<button class="instancesButton" type="button">Instances</button>
		<button class="factoriesButton" type="button">Factories</button>
		<button class="handlersButton" type="button">Handlers</button>
	</div>
</form>

<table id="plugin_table" class="nicetable noauto ui-widget-content">
	<tbody>
	    <!-- template -->
		<tr>
			<td class="Nname lheader">Instance Name</td>
			<td class="Vname">&nbsp;</td>
		</tr>
        <tr>
            <td class="Nstate lheader">State</td>
            <td class="Vstate">&nbsp;</td>
        </tr>
        <tr>
            <td class="Nfactory lheader">Factory</td>
            <td class="Vfactory">&nbsp;</td> <!-- TODO Link if possible --> 
        </tr>
        <tr>
            <td class="Nservices lheader">Provided Services</td>
            <td class="Vservices">
                <table class="services ui-widget-content">
                    <thead>
                        <tr>
                            <th class="col_Name">Specifications</th>
                            <th class="col_State">State</th>
                            <th class="col_Id">Service Id</th>
                            <th class="col_Properties">Service Properties</th>
                        </tr>
                    </thead>
                    <tbody>
                       <tr class="ui-widget-content"><!-- template -->
                            <td class="ui-widget-content name">&nbsp; </td>
                            <td class="ui-widget-content state">&nbsp; </td>
                            <td class="ui-widget-content id">&nbsp;</td>
                            <td class="ui-widget-content properties">&nbsp;</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td class="NreqServices lheader">Required Services</td>
            <td class="VreqServices">
                <table class="reqServices ui-widget-content">
                    <thead>
                        <tr>
                            <th class="col_Name">Specification</th>
                            <th class="col_State">State</th>
                            <th class="col_Filter">Filter</th>
                            <th class="col_Policy">Binding Policy</th>
                            <th class="col_Optional">Optional</th>
                            <th class="col_Aggregate">Aggregate</th>
                            <th class="col_Matching">Matching Services</th>
                            <th class="col_Used">Used Services</th>
                        </tr>
                    </thead>
                    <tbody>
                       <tr class="ui-widget-content"><!-- template -->
                            <td class="ui-widget-content name">&nbsp; </td>
                            <td class="ui-widget-content state">&nbsp;</td>
                            <td class="ui-widget-content filter">&nbsp; </td>                        
                            <td class="ui-widget-content policy">&nbsp;</td>
                            <td class="ui-widget-content optional">&nbsp; </td>
                            <td class="ui-widget-content aggregate">&nbsp; </td>
                            <td class="ui-widget-content matching">&nbsp; </td>
                            <td class="ui-widget-content used">&nbsp; </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td class="Narchitecture lheader">Architecture</td>
            <td class="Varchitecture"><div class="architecture"><pre class="architecture_content">&nbsp;</pre></div></td>
        </tr>
        
	</tbody>
</table>

<!-- bottom header -->
<form method="post" enctype="multipart/form-data" action="">
    <div class="ui-widget-header ui-corner-bottom buttonGroup">
        <button class="instancesButton" type="button">Instances</button>
        <button class="factoriesButton" type="button">Factories</button>
        <button class="handlersButton" type="button">Handlers</button>
    </div>
</form>

<!-- status line -->
<p class="statline">&nbsp;</p>