nfv/nfv/nfv-vim/nfv_vim/webserver/templates/hosts.handlebars

<div class="tab-headers">
    <ul id="inventory" class="nav nav-tabs" data-sticky-tabs="sticky">
        <li class="active">
            <a><h4>Hosts</h4></a>
        </li>
    </ul>
</div>

<div class="tab-content">
    <div class="tab-pane active">
        <table class="table table-bordered table-striped main-table" id="hosts">
            <thead>
                <tr>
                    <th>&nbsp;</th>
                    <th class="sortable normal_column">UUID</th>
                    <th class="sortable normal_column">Name</th>
                    <th class="sortable normal_column">Personality</th>
                    <th class="sortable normal_column">State</th>
                    <th class="sortable normal_column">Action</th>
                </tr>
            </thead>
            <tbody>
            {{#hosts}}
            <tr class="fluid clickable" data-toggle="collapse" data-target="#data{{uuid}}">
                <td><img class="center-block" src="/images/details_open.png"/></td>
                <td class="html_refresh" id="host_{{uuid}}_uuid">{{uuid}}</td>
                <td class="html_refresh" id="host_{{uuid}}_name">{{name}}</td>
                <td class="html_refresh" id="host_{{uuid}}_personality">{{personality}}</td>
                <td class="html_refresh" id="host_{{uuid}}_state">{{state}}</td>
                <td class="html_refresh" id="host_{{uuid}}_action">{{action}}</td>
            </tr>
            <tr class="collapse image_toggle" id="data{{uuid}}">
                <td colspan="6" style="background-color: #f5f5f5">
                    <div class="container">
                        <h5>NFVI-HOST:</h5>
                        <table class="table table-condensed table-bordered table-striped" style="width:95%; margin-bottom: 6px">
                            <thead>
                                <tr>
                                    <th>uuid</th>
                                    <th>name</th>
                                    <th>personality</th>
                                    <th>administrative-state</th>
                                    <th>operational-state</th>
                                    <th>availability-status</th>
                                    <th>openstack-control</th>
                                    <th>openstack-compute</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="html_refresh" id="nfvi_host_{{nfvi_host.uuid}}_uuid">{{nfvi_host.nfvi_data.uuid}}</td>
                                    <td class="html_refresh" id="nfvi_host_{{nfvi_host.uuid}}_name">{{nfvi_host.nfvi_data.name}}</td>
                                    <td class="html_refresh" id="nfvi_host_{{nfvi_host.uuid}}_personality">{{nfvi_host.nfvi_data.personality}}</td>
                                    <td class="html_refresh" id="nfvi_host_{{nfvi_host.uuid}}_admin_state">{{nfvi_host.nfvi_data.admin_state}}</td>
                                    <td class="html_refresh" id="nfvi_host_{{nfvi_host.uuid}}_oper_state">{{nfvi_host.nfvi_data.oper_state}}</td>
                                    <td class="html_refresh" id="nfvi_host_{{nfvi_host.uuid}}_avail_status">{{nfvi_host.nfvi_data.avail_status}}</td>
                                    <td class="html_refresh" id="nfvi_host_{{nfvi_host.uuid}}_openstack_control">{{nfvi_host.openstack_control}}</td>
                                    <td class="html_refresh" id="nfvi_host_{{nfvi_host.uuid}}_openstack_compute">{{nfvi_host.openstack_compute}}</td>
                                </tr>
                            </tbody>
                        </table>

                        <table class="table table-condensed table-bordered table-striped" style="width:95%;">
                            <thead>
                                <tr>
                                    <th>component</th>
                                    <th>name</th>
                                    <th>operational-state</th>
                                    <th>availability-status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>sub-function</td>
                                    <td class="html_refresh" id="nfvi_host_{{nfvi_host.uuid}}_sub_name">{{nfvi_host.nfvi_data.subfunction_name}}</td>
                                    <td class="html_refresh" id="nfvi_host_{{nfvi_host.uuid}}_sub_oper_state">{{nfvi_host.nfvi_data.subfunction_oper}}</td>
                                    <td class="html_refresh" id="nfvi_host_{{nfvi_host.uuid}}_sub_avail_status">{{nfvi_host.nfvi_data.subfunction_avail}}</td>
                                </tr>
                                <tr>
                                    <td>networking</td>
                                    <td class="html_refresh" id="nfvi_host_{{nfvi_host.uuid}}_data_ports">{{nfvi_host.nfvi_data.data_ports_name}}</td>
                                    <td class="html_refresh" id="nfvi_host_{{nfvi_host.uuid}}_ports_oper_state">{{nfvi_host.nfvi_data.data_ports_oper}}</td>
                                    <td class="html_refresh" id="nfvi_host_{{nfvi_host.uuid}}_ports_avail_status">{{nfvi_host.nfvi_data.data_ports_avail}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
            {{/hosts}}
            <tfoot>
                <tr>
                    <td colspan="6">
                        {{#ifCompare hosts.length '==' '1'}}
                            <span class="table_count">Displaying {{hosts.length}} item</span>
                        {{else}}
                            <span class="table_count">Displaying {{hosts.length}} items</span>
                        {{/ifCompare}}
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>