2017-12-06 11:04:02 +00:00
< div class = "datatable" >
< rd-widget >
< rd-widget-body classes = "no-padding" >
< div class = "toolBar" >
2020-04-10 21:54:53 +00:00
< div class = "toolBarTitle" > < i class = "fa" ng-class = "$ctrl.titleIcon" aria-hidden = "true" style = "margin-right: 2px;" > < / i > {{ $ctrl.titleText }} < / div >
2019-07-22 10:54:59 +00:00
< div class = "settings" >
< span class = "setting" ng-class = "{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close = "disabled" is-open = "$ctrl.settings.open" >
< span uib-dropdown-toggle > < i class = "fa fa-cog" aria-hidden = "true" > < / i > Settings< / span >
< div class = "dropdown-menu dropdown-menu-right" uib-dropdown-menu >
< div class = "tableMenu" >
< div class = "menuHeader" >
Table settings
< / div >
< div class = "menuContent" >
< div >
< div class = "md-checkbox" >
2020-04-10 21:54:53 +00:00
< input id = "setting_auto_refresh" type = "checkbox" ng-model = "$ctrl.settings.repeater.autoRefresh" ng-change = "$ctrl.onSettingsRepeaterChange()" / >
2019-07-22 10:54:59 +00:00
< label for = "setting_auto_refresh" > Auto refresh< / label >
< / div >
< div ng-if = "$ctrl.settings.repeater.autoRefresh" >
< label for = "settings_refresh_rate" >
Refresh rate
< / label >
< select id = "settings_refresh_rate" ng-model = "$ctrl.settings.repeater.refreshRate" ng-change = "$ctrl.onSettingsRepeaterChange()" class = "small-select" >
< option value = "10" > 10s< / option >
< option value = "30" > 30s< / option >
< option value = "60" > 1min< / option >
< option value = "120" > 2min< / option >
< option value = "300" > 5min< / option >
< / select >
< span >
< i id = "refreshRateChange" class = "fa fa-check green-icon" aria-hidden = "true" style = "margin-top: 7px; display: none;" > < / i >
< / span >
< / div >
< / div >
< / div >
< div >
< a type = "button" class = "btn btn-default btn-sm" ng-click = "$ctrl.settings.open = false;" > Close< / a >
< / div >
< / div >
< / div >
< / span >
< / div >
2017-12-06 11:04:02 +00:00
< / div >
2019-05-24 06:04:58 +00:00
< div class = "actionBar" ng-if = "!$ctrl.offlineMode" authorization = "DockerNetworkDelete, DockerNetworkCreate" >
2020-04-10 21:54:53 +00:00
< button
type="button"
class="btn btn-sm btn-danger"
authorization="DockerNetworkDelete"
ng-disabled="$ctrl.state.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
>
2018-03-13 05:36:53 +00:00
< i class = "fa fa-trash-alt space-right" aria-hidden = "true" > < / i > Remove
2017-12-06 11:04:02 +00:00
< / button >
2019-05-24 06:04:58 +00:00
< button type = "button" class = "btn btn-sm btn-primary" ui-sref = "docker.networks.new" authorization = "DockerNetworkCreate" >
2017-12-11 14:50:59 +00:00
< i class = "fa fa-plus space-right" aria-hidden = "true" > < / i > Add network
2017-12-06 11:04:02 +00:00
< / button >
< / div >
2018-07-11 14:18:44 +00:00
< div class = "searchBar" >
2017-12-06 11:04:02 +00:00
< i class = "fa fa-search searchIcon" aria-hidden = "true" > < / i >
2020-04-10 21:54:53 +00:00
< input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
/>
2017-12-06 11:04:02 +00:00
< / div >
< div class = "table-responsive" >
2018-07-20 16:31:34 +00:00
< table class = "table table-hover nowrap-cells" >
2017-12-06 11:04:02 +00:00
< thead >
< tr >
2020-04-10 21:54:53 +00:00
< th style = "width: 55px;" >
2020-02-12 19:41:41 +00:00
< span class = "md-checkbox" ng-if = "!$ctrl.offlineMode" authorization = "DockerNetworkDelete, DockerNetworkCreate" >
2017-12-06 11:04:02 +00:00
< input id = "select_all" type = "checkbox" ng-model = "$ctrl.state.selectAll" ng-change = "$ctrl.selectAll()" / >
< label for = "select_all" > < / label >
< / span >
2019-08-12 14:26:44 +00:00
< a ng-click = "$ctrl.expandAll()" ng-if = "$ctrl.hasExpandableItems()" >
< i ng-class = "{ 'fas fa-angle-down': $ctrl.state.expandAll, 'fas fa-angle-right': !$ctrl.state.expandAll }" aria-hidden = "true" > < / i >
< / a >
< / th >
< th >
2017-12-06 11:04:02 +00:00
< a ng-click = "$ctrl.changeOrderBy('Name')" >
Name
2018-03-13 05:36:53 +00:00
< i class = "fa fa-sort-alpha-down" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder" > < / i >
< i class = "fa fa-sort-alpha-up" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder" > < / i >
2017-12-06 11:04:02 +00:00
< / a >
< / th >
< th >
< a ng-click = "$ctrl.changeOrderBy('StackName')" >
Stack
2018-03-13 05:36:53 +00:00
< i class = "fa fa-sort-alpha-down" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'StackName' && !$ctrl.state.reverseOrder" > < / i >
< i class = "fa fa-sort-alpha-up" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder" > < / i >
2017-12-06 11:04:02 +00:00
< / a >
< / th >
< th >
< a ng-click = "$ctrl.changeOrderBy('Driver')" >
Driver
2018-03-13 05:36:53 +00:00
< i class = "fa fa-sort-alpha-down" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'Driver' && !$ctrl.state.reverseOrder" > < / i >
< i class = "fa fa-sort-alpha-up" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'Driver' && $ctrl.state.reverseOrder" > < / i >
2017-12-06 11:04:02 +00:00
< / a >
< / th >
2018-08-22 06:45:14 +00:00
< th >
< a ng-click = "$ctrl.changeOrderBy('Attachable')" >
Attachable
< i class = "fa fa-sort-alpha-down" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'Attachable' && !$ctrl.state.reverseOrder" > < / i >
< i class = "fa fa-sort-alpha-up" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'Attachable' && $ctrl.state.reverseOrder" > < / i >
< / a >
< / th >
2017-12-06 11:04:02 +00:00
< th >
< a ng-click = "$ctrl.changeOrderBy('IPAM.Driver')" >
IPAM Driver
2018-03-13 05:36:53 +00:00
< i class = "fa fa-sort-alpha-down" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'IPAM.Driver' && !$ctrl.state.reverseOrder" > < / i >
< i class = "fa fa-sort-alpha-up" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'IPAM.Driver' && $ctrl.state.reverseOrder" > < / i >
2017-12-06 11:04:02 +00:00
< / a >
< / th >
< th >
2020-04-28 00:34:54 +00:00
< a ng-click = "$ctrl.changeOrderBy('IPAM.IPV4Configs[0].Subnet')" >
IPV4 IPAM Subnet
< i class = "fa fa-sort-alpha-down" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Subnet' && !$ctrl.state.reverseOrder" > < / i >
< i class = "fa fa-sort-alpha-up" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Subnet' && $ctrl.state.reverseOrder" > < / i >
< / a >
< / th >
< th >
< a ng-click = "$ctrl.changeOrderBy('IPAM.IPV4Configs[0].Gateway')" >
IPV4 IPAM Gateway
< i class = "fa fa-sort-alpha-down" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Gateway' && !$ctrl.state.reverseOrder" > < / i >
< i class = "fa fa-sort-alpha-up" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Gateway' && $ctrl.state.reverseOrder" > < / i >
< / a >
< / th >
< th >
< a ng-click = "$ctrl.changeOrderBy('IPAM.IPV6Configs[0].Subnet')" >
IPV6 IPAM Subnet
< i class = "fa fa-sort-alpha-down" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Subnet' && !$ctrl.state.reverseOrder" > < / i >
< i class = "fa fa-sort-alpha-up" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Subnet' && $ctrl.state.reverseOrder" > < / i >
2017-12-06 11:04:02 +00:00
< / a >
< / th >
< th >
2020-04-28 00:34:54 +00:00
< a ng-click = "$ctrl.changeOrderBy('IPAM.IPV6Configs[0].Gateway')" >
IPV6 IPAM Gateway
< i class = "fa fa-sort-alpha-down" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Gateway' && !$ctrl.state.reverseOrder" > < / i >
< i class = "fa fa-sort-alpha-up" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Gateway' && $ctrl.state.reverseOrder" > < / i >
2017-12-06 11:04:02 +00:00
< / a >
< / th >
2018-05-06 07:15:57 +00:00
< th ng-if = "$ctrl.showHostColumn" >
< a ng-click = "$ctrl.changeOrderBy('NodeName')" >
Host
< i class = "fa fa-sort-alpha-down" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'NodeName' && !$ctrl.state.reverseOrder" > < / i >
< i class = "fa fa-sort-alpha-up" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'NodeName' && $ctrl.state.reverseOrder" > < / i >
< / a >
< / th >
2020-06-09 09:55:36 +00:00
< th >
2017-12-06 11:04:02 +00:00
< a ng-click = "$ctrl.changeOrderBy('ResourceControl.Ownership')" >
Ownership
2018-03-13 05:36:53 +00:00
< i class = "fa fa-sort-alpha-down" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder" > < / i >
< i class = "fa fa-sort-alpha-up" aria-hidden = "true" ng-if = "$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder" > < / i >
2017-12-06 11:04:02 +00:00
< / a >
< / th >
< / tr >
< / thead >
< tbody >
2020-04-10 21:54:53 +00:00
< tr
dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
ng-class="{ active: item.Checked }"
network-row-content
item="item"
parent-ctrl="$ctrl"
ng-click="$ctrl.expandItem(item, !item.Expanded)"
allow-checkbox="true"
>
2017-12-06 11:04:02 +00:00
< / tr >
2021-09-07 23:06:18 +00:00
< tr dir-paginate-end ng-show = "item.Expanded" ng-repeat = "it in item.Subs" class = "datatable-highlighted" network-row-content item = "it" parent-ctrl = "$ctrl" > < / tr >
2017-12-06 11:04:02 +00:00
< tr ng-if = "!$ctrl.dataset" >
2018-05-06 07:15:57 +00:00
< td colspan = "9" class = "text-center text-muted" > Loading...< / td >
2017-12-06 11:04:02 +00:00
< / tr >
< tr ng-if = "$ctrl.state.filteredDataSet.length === 0" >
2018-05-06 07:15:57 +00:00
< td colspan = "9" class = "text-center text-muted" > No network available.< / td >
2017-12-06 11:04:02 +00:00
< / tr >
< / tbody >
< / table >
< / div >
< div class = "footer" ng-if = "$ctrl.dataset" >
2020-04-10 21:54:53 +00:00
< div class = "infoBar" ng-if = "$ctrl.state.selectedItemCount !== 0" > {{ $ctrl.state.selectedItemCount }} item(s) selected < / div >
2017-12-06 11:04:02 +00:00
< div class = "paginationControls" >
< form class = "form-inline" >
< span class = "limitSelector" >
< span style = "margin-right: 5px;" >
Items per page
< / span >
< select class = "form-control" ng-model = "$ctrl.state.paginatedItemLimit" ng-change = "$ctrl.changePaginationLimit()" >
< option value = "0" > All< / option >
< option value = "10" > 10< / option >
< option value = "25" > 25< / option >
< option value = "50" > 50< / option >
< option value = "100" > 100< / option >
< / select >
< / span >
< dir-pagination-controls max-size = "5" > < / dir-pagination-controls >
< / form >
< / div >
< / div >
< / rd-widget-body >
< / rd-widget >
< / div >