octavia-dashboard/octavia_dashboard/static/dashboard/project/lbaasv2/loadbalancers/table.html

156 lines
5.5 KiB
HTML

<hz-page-header header="{$ 'Load Balancers' | translate $}"></hz-page-header>
<table ng-controller="LoadBalancersTableController as table"
hz-table ng-cloak
st-table="table.items"
st-safe-src="table.src"
default-sort="name"
default-sort-reverse="false"
class="table table-striped table-rsp table-detail">
<!--
TODO(jpomero): This table pattern does not allow for extensibility and should be revisited
once horizon implements a better one.
-->
<thead>
<tr>
<!--
Table-batch-actions:
This is where batch actions like searching, creating, and deleting.
-->
<th colspan="9" class="search-header">
<hz-search-bar icon-classes="fa-search">
<actions allowed="table.batchActions.actions" type="batch"></actions>
</hz-search-bar>
</th>
</tr>
<tr>
<!--
Table-column-headers:
This is where we declaratively define the table column headers.
Include select-col if you want to select all.
Include expander if you want to inline details.
Include action-col if you want to perform actions.
-->
<th class="multi_select_column">
<input type="checkbox" hz-select-all="table.items">
</th>
<th class="expander"></th>
<th class="rsp-p1" st-sort="name" st-sort-default="name" translate>Name</th>
<th class="rsp-p1" st-sort="description" translate>Description</th>
<th class="rsp-p1" st-sort="operating_status" translate>Operating Status</th>
<th class="rsp-p1" st-sort="provisioning_status" translate>Provisioning Status</th>
<th class="rsp-p2" st-sort="vip_address" translate>IP Address</th>
<th class="rsp-p2" st-sort="listeners.length" translate>Listeners</th>
<th class="actions_column" translate>Actions</th>
</tr>
</thead>
<tbody>
<!--
Table-rows:
This is where we declaratively define the table columns.
Include select-col if you want to select all.
Include expander if you want to inline details.
Include action-col if you want to perform actions.
rsp-p1 rsp-p2 are responsive priority as user resizes window.
-->
<tr ng-repeat-start="item in table.items track by item.id"
ng-class="{'st-selected': checked[item.id]}">
<td class="multi_select_column">
<input type="checkbox"
ng-model="tCtrl.selections[item.id].checked"
hz-select="item">
</td>
<td class="expander">
<span class="fa fa-chevron-right"
hz-expand-detail
duration="200">
</span>
</td>
<td class="rsp-p1"><a ng-href="project/load_balancer/{$ ::item.id $}">{$ ::(item.name || item.id) $}</a></td>
<td class="rsp-p1">{$ ::item.description | noValue $}</td>
<td class="rsp-p1">{$ ::item.operating_status | decode:table.operatingStatus $}</td>
<td class="rsp-p1">{$ ::item.provisioning_status | decode:table.provisioningStatus $}</td>
<td class="rsp-p2">{$ ::item.vip_address $}</td>
<td class="rsp-p2">{$ item.listeners.length $}</td>
<td class="actions_column">
<!--
Table-row-action-column:
Actions taken here apply to a single item/row.
-->
<actions allowed="table.rowActions.actions" type="row" item="item"></actions>
</td>
</tr>
<tr ng-repeat-end class="detail-row">
<!--
Detail-row:
Contains detailed information on this item.
Can be toggled using the chevron button.
Ensure colspan is greater or equal to number of column-headers.
-->
<td class="detail" colspan="9">
<!--
The responsive columns that disappear typically should reappear here
with the same responsive priority that they disappear.
E.g. table header with rsp-p2 should be here with rsp-alt-p2
-->
<div class="row">
<span class="rsp-alt-p2">
<dl class="col-sm-2">
<dt translate>IP Address</dt>
<dd>{$ ::item.vip_address $}</dd>
</dl>
<dl class="col-sm-2">
<dt translate>Listeners</dt>
<dd>{$ item.listeners.length $}</dd>
</dl>
</span>
</div>
<div class="row">
<dl class="col-sm-2">
<dt translate>Provider</dt>
<dd>{$ ::item.provider $}</dd>
</dl>
<dl class="col-sm-2" ng-if="item.floating_ip !== undefined">
<dt translate>Floating IP Address</dt>
<dd>{$ item.floating_ip.ip || 'None' | translate $}</dd>
</dl>
<dl class="col-sm-2">
<dt translate>Admin State Up</dt>
<dd>{$ ::item.admin_state_up | yesno $}</dd>
</dl>
<dl class="col-sm-2">
<dt translate>ID</dt>
<dd>{$ ::item.id $}</dd>
</dl>
<dl class="col-sm-2">
<dt translate>Subnet ID</dt>
<dd><a target="_self" ng-href="project/networks/subnets/{$ ::item.vip_subnet_id $}/detail">{$ ::item.vip_subnet_id $}</a></dd>
</dl>
<dl class="col-sm-2">
<dt translate>Port ID</dt>
<dd><a target="_self" ng-href="project/networks/ports/{$ ::item.vip_port_id $}/detail">{$ ::item.vip_port_id $}</a></dd>
</dl>
</div>
</td>
</tr>
<tr table-status table="table" column-count="9"></tr>
</tbody>
<!--
Table-footer:
This is where we display number of items and pagination controls.
-->
<tfoot hz-table-footer items="table.items"></tfoot>
</table>