2017-12-06 11:04:02 +00:00
< div class = "datatable" >
< rd-widget >
< rd-widget-body classes = "no-padding" >
< div class = "toolBar" >
2022-07-19 03:29:50 +00:00
< div class = "toolBarTitle vertical-center" >
2022-08-10 04:12:20 +00:00
< div class = "widget-icon space-right" >
< pr-icon icon = "$ctrl.titleIcon" feather = "true" > < / pr-icon >
< / div >
2022-07-19 03:29:50 +00:00
{{ $ctrl.titleText }}
< / div >
2022-07-20 16:31:13 +00:00
< div class = "searchBar vertical-center" >
2022-08-04 15:41:12 +00:00
< pr-icon icon = "'search'" feather = "true" class-name = "'searchIcon'" > < / pr-icon >
2022-07-20 16:31:13 +00:00
< input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
2022-07-25 03:03:22 +00:00
placeholder="Search for a network..."
2022-07-20 16:31:13 +00:00
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="network-searchInput"
/>
< / div >
< div class = "actionBar !gap-3" ng-if = "!$ctrl.offlineMode" authorization = "DockerNetworkDelete, DockerNetworkCreate" >
< button
type="button"
class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
authorization="DockerNetworkDelete"
ng-disabled="$ctrl.state.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
data-cy="network-removeNetworkButton"
>
2022-08-10 04:12:20 +00:00
< pr-icon icon = "'trash-2'" feather = "true" > < / pr-icon > Remove
2022-07-20 16:31:13 +00:00
< / button >
< button
type="button"
class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
ui-sref="docker.networks.new"
authorization="DockerNetworkCreate"
data-cy="network-addNetworkButton"
>
< pr-icon icon = "'plus'" feather = "true" > < / pr-icon > Add network
< / button >
< / 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" >
2022-07-20 16:31:13 +00:00
< span uib-dropdown-toggle aria-label = "Settings" >
< pr-icon icon = "'more-vertical'" feather = "true" > < / pr-icon >
< / span >
2019-07-22 10:54:59 +00:00
< div class = "dropdown-menu dropdown-menu-right" uib-dropdown-menu >
< div class = "tableMenu" >
2022-01-17 05:53:32 +00:00
< div class = "menuHeader" > Table settings < / div >
2019-07-22 10:54:59 +00:00
< 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" >
2022-01-17 05:53:32 +00:00
< label for = "settings_refresh_rate" > Refresh rate < / label >
2019-07-22 10:54:59 +00:00
< 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 >
2022-01-17 05:53:32 +00:00
< i id = "refreshRateChange" class = "fa fa-check green-icon" aria-hidden = "true" style = "margin-top: 7px; display: none" > < / i >
2019-07-22 10:54:59 +00:00
< / 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 >
< 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 >
2022-01-17 05:53:32 +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 >
2022-08-03 09:43:29 +00:00
< table-column-header
col-title="'Name'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Name'"
is-sorted-desc="$ctrl.state.orderBy === 'Name' & & $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Name')"
>< / table-column-header >
2017-12-06 11:04:02 +00:00
< / th >
< th >
2022-08-03 09:43:29 +00:00
< table-column-header
col-title="'Stack'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'StackName'"
is-sorted-desc="$ctrl.state.orderBy === 'StackName' & & $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('StackName')"
>< / table-column-header >
2017-12-06 11:04:02 +00:00
< / th >
< th >
2022-08-03 09:43:29 +00:00
< table-column-header
col-title="'Driver'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Driver'"
is-sorted-desc="$ctrl.state.orderBy === 'Driver' & & $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Driver')"
>< / table-column-header >
2017-12-06 11:04:02 +00:00
< / th >
2018-08-22 06:45:14 +00:00
< th >
2022-08-03 09:43:29 +00:00
< table-column-header
col-title="'Attachable'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Attachable'"
is-sorted-desc="$ctrl.state.orderBy === 'Attachable' & & $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Attachable')"
>< / table-column-header >
2018-08-22 06:45:14 +00:00
< / th >
2017-12-06 11:04:02 +00:00
< th >
2022-08-03 09:43:29 +00:00
< table-column-header
col-title="'IPAM Driver'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'IPAM.Driver'"
is-sorted-desc="$ctrl.state.orderBy === 'IPAM.Driver' & & $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('IPAM.Driver')"
>< / table-column-header >
2017-12-06 11:04:02 +00:00
< / th >
< th >
2022-08-03 09:43:29 +00:00
< table-column-header
col-title="'IPV4 IPAM Subnet'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Subnet'"
is-sorted-desc="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Subnet' & & $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('IPAM.IPV4Configs[0].Subnet')"
>< / table-column-header >
2020-04-28 00:34:54 +00:00
< / th >
< th >
2022-08-03 09:43:29 +00:00
< table-column-header
col-title="'IPV4 IPAM Gateway'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Gateway'"
is-sorted-desc="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Gateway' & & $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('IPAM.IPV4Configs[0].Gateway')"
>< / table-column-header >
2020-04-28 00:34:54 +00:00
< / th >
< th >
2022-08-03 09:43:29 +00:00
< table-column-header
col-title="'IPV6 IPAM Subnet'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Subnet'"
is-sorted-desc="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Subnet' & & $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('IPAM.IPV6Configs[0].Subnet')"
>< / table-column-header >
2017-12-06 11:04:02 +00:00
< / th >
< th >
2022-08-03 09:43:29 +00:00
< table-column-header
col-title="'IPV6 IPAM Gateway'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Gateway'"
is-sorted-desc="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Gateway' & & $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('IPAM.IPV6Configs[0].Gateway')"
>< / table-column-header >
2017-12-06 11:04:02 +00:00
< / th >
2018-05-06 07:15:57 +00:00
< th ng-if = "$ctrl.showHostColumn" >
2022-08-03 09:43:29 +00:00
< table-column-header
col-title="'Host'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'NodeName'"
is-sorted-desc="$ctrl.state.orderBy === 'NodeName' & & $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('NodeName')"
>< / table-column-header >
2018-05-06 07:15:57 +00:00
< / th >
2020-06-09 09:55:36 +00:00
< th >
2022-08-03 09:43:29 +00:00
< table-column-header
col-title="'Ownership'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'ResourceControl.Ownership'"
is-sorted-desc="$ctrl.state.orderBy === 'ResourceControl.Ownership' & & $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')"
>< / table-column-header >
2017-12-06 11:04:02 +00:00
< / 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" >
2022-07-20 16:31:13 +00:00
< form class = "form-inline vertical-center" >
2017-12-06 11:04:02 +00:00
< span class = "limitSelector" >
2022-01-17 05:53:32 +00:00
< span style = "margin-right: 5px" > Items per page < / span >
2021-09-24 01:00:55 +00:00
< select class = "form-control" ng-model = "$ctrl.state.paginatedItemLimit" ng-change = "$ctrl.changePaginationLimit()" data-cy = "component-paginationSelect" >
2017-12-06 11:04:02 +00:00
< 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 >