github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

EE-3831 Replace sort icon and search icon in all docker pages (#7400)

pull/7412/head
Rex Wang 2022-08-03 17:43:29 +08:00 committed by GitHub
parent 5b40c79ea3
commit d8db8718bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 426 additions and 305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/agent/components/files-datatable/filesDatatable.html
View File

@ -25,25 +25,31 @@
<thead> <thead>
<tr> <tr>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Name')"> <table-column-header
Name col-title="'Name'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'Name'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Name')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Size')"> <table-column-header
Size col-title="'Size'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Size' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Size' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'Size'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Size' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Size')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('ModTime')"> <table-column-header
Last modification col-title="'Last modification'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'ModTime' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'ModTime' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'ModTime'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'ModTime' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('ModTime')"
></table-column-header>
</th> </th>
<th> Actions </th> <th> Actions </th>
</tr> </tr>

46
app/docker/components/datatables/configs-datatable/configsDatatable.html
View File

@ -82,29 +82,37 @@
<thead> <thead>
<tr> <tr>
<th> <th>
<span class="md-checkbox" authorization="DockerConfigDelete, DockerConfigCreate"> <div class="flex flex-nowrap items-center">
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" /> <span class="md-checkbox vertical-center" authorization="DockerConfigDelete, DockerConfigCreate">
<label for="select_all"></label> <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
</span> <label for="select_all"></label>
<a ng-click="$ctrl.changeOrderBy('Name')"> </span>
Name <table-column-header
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></pr-icon> col-title="'Name'"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></pr-icon> can-sort="true"
</a> is-sorted="$ctrl.state.orderBy === 'Name'"
is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Name')"
></table-column-header>
</div>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('CreatedAt')"> <table-column-header
Creation Date col-title="'Creation Date'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'CreatedAt'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'CreatedAt' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('CreatedAt')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')"> <table-column-header
Ownership col-title="'Ownership'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'ResourceControl.Ownership'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')"
></table-column-header>
</th> </th>
</tr> </tr>
</thead> </thead>

36
app/docker/components/datatables/events-datatable/eventsDatatable.html
View File

@ -25,25 +25,31 @@
<thead> <thead>
<tr> <tr>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Time')"> <table-column-header
Date col-title="'Date'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Time' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Time' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'Time'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Time' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Time')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Type')"> <table-column-header
Category col-title="'Category'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Type' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'Type'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Type')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Details')"> <table-column-header
Details col-title="'Details'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Details' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Details' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'Details'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Details' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Details')"
></table-column-header>
</th> </th>
</tr> </tr>
</thead> </thead>

64
app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html
View File

@ -4,8 +4,8 @@
<div class="toolBar"> <div class="toolBar">
<div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div> <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
</div> </div>
<div class="searchBar"> <div class="searchBar vertical-center">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <pr-icon icon="'search'" feather="true"></pr-icon>
<input <input
type="text" type="text"
class="searchInput" class="searchInput"
@ -25,39 +25,49 @@
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" /> <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
<label for="select_all"></label> <label for="select_all"></label>
</span> </span>
<a ng-click="$ctrl.changeOrderBy('Hostname')"> <table-column-header
Name col-title="'Name'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Hostname' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Hostname' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Hostname'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Hostname' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Hostname')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Role')"> <table-column-header
Role col-title="'Role'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Role' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Role' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Role'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Role' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Role')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('EngineVersion')"> <table-column-header
Engine col-title="'Engine'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'EngineVersion' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'EngineVersion' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'EngineVersion'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'EngineVersion' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('EngineVersion')"
></table-column-header>
</th> </th>
<th ng-if="$ctrl.showIpAddressColumn"> <th ng-if="$ctrl.showIpAddressColumn">
<a ng-click="$ctrl.changeOrderBy('Addr')"> <table-column-header
IP Address col-title="'IP Address'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Addr' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Addr' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Addr'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Addr' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Addr')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Status')"> <table-column-header
Status col-title="'Status'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Status'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Status')"
></table-column-header>
</th> </th>
</tr> </tr>
</thead> </thead>

132
app/docker/components/datatables/networks-datatable/networksDatatable.html
View File

@ -91,81 +91,103 @@
</a> </a>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Name')"> <table-column-header
Name col-title="'Name'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"> </pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"> </pr-icon> is-sorted="$ctrl.state.orderBy === 'Name'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Name')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('StackName')"> <table-column-header
Stack col-title="'Stack'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'StackName' && !$ctrl.state.reverseOrder"> </pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"> </pr-icon> is-sorted="$ctrl.state.orderBy === 'StackName'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('StackName')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Driver')"> <table-column-header
Driver col-title="'Driver'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Driver' && !$ctrl.state.reverseOrder"> </pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Driver' && $ctrl.state.reverseOrder"> </pr-icon> is-sorted="$ctrl.state.orderBy === 'Driver'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Driver' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Driver')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Attachable')"> <table-column-header
Attachable col-title="'Attachable'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Attachable' && !$ctrl.state.reverseOrder"> </pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Attachable' && $ctrl.state.reverseOrder"> </pr-icon> is-sorted="$ctrl.state.orderBy === 'Attachable'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Attachable' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Attachable')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('IPAM.Driver')"> <table-column-header
IPAM Driver col-title="'IPAM Driver'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.Driver' && !$ctrl.state.reverseOrder"> </pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.Driver' && $ctrl.state.reverseOrder"> </pr-icon> is-sorted="$ctrl.state.orderBy === 'IPAM.Driver'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'IPAM.Driver' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('IPAM.Driver')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('IPAM.IPV4Configs[0].Subnet')"> <table-column-header
IPV4 IPAM Subnet col-title="'IPV4 IPAM Subnet'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Subnet' && !$ctrl.state.reverseOrder"> </pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Subnet' && $ctrl.state.reverseOrder"> </pr-icon> is-sorted="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Subnet'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Subnet' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('IPAM.IPV4Configs[0].Subnet')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('IPAM.IPV4Configs[0].Gateway')"> <table-column-header
IPV4 IPAM Gateway col-title="'IPV4 IPAM Gateway'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Gateway' && !$ctrl.state.reverseOrder"> </pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Gateway' && $ctrl.state.reverseOrder"> </pr-icon> is-sorted="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Gateway'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Gateway' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('IPAM.IPV4Configs[0].Gateway')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('IPAM.IPV6Configs[0].Subnet')"> <table-column-header
IPV6 IPAM Subnet col-title="'IPV6 IPAM Subnet'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Subnet' && !$ctrl.state.reverseOrder"> </pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Subnet' && $ctrl.state.reverseOrder"> </pr-icon> is-sorted="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Subnet'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Subnet' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('IPAM.IPV6Configs[0].Subnet')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('IPAM.IPV6Configs[0].Gateway')"> <table-column-header
IPV6 IPAM Gateway col-title="'IPV6 IPAM Gateway'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Gateway' && !$ctrl.state.reverseOrder"> </pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Gateway' && $ctrl.state.reverseOrder"> </pr-icon> is-sorted="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Gateway'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Gateway' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('IPAM.IPV6Configs[0].Gateway')"
></table-column-header>
</th> </th>
<th ng-if="$ctrl.showHostColumn"> <th ng-if="$ctrl.showHostColumn">
<a ng-click="$ctrl.changeOrderBy('NodeName')"> <table-column-header
Host col-title="'Host'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'NodeName' && !$ctrl.state.reverseOrder"> </pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'NodeName' && $ctrl.state.reverseOrder"> </pr-icon> is-sorted="$ctrl.state.orderBy === 'NodeName'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'NodeName' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('NodeName')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')"> <table-column-header
Ownership col-title="'Ownership'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'ResourceControl.Ownership'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')"
></table-column-header>
</th> </th>
</tr> </tr>
</thead> </thead>

64
app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html
View File

@ -4,8 +4,8 @@
<div class="toolBar"> <div class="toolBar">
<div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div> <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
</div> </div>
<div class="searchBar"> <div class="searchBar vertical-center">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <pr-icon icon="'search'" feather="true"></pr-icon>
<input <input
type="text" type="text"
class="searchInput" class="searchInput"
@ -21,39 +21,49 @@
<thead> <thead>
<tr> <tr>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Id')"> <table-column-header
Id col-title="'Id'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Id'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Id' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Id')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Status')"> <table-column-header
Status col-title="'Status'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Status'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Status')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Slot')"> <table-column-header
Slot col-title="'Slot'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Slot' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Slot' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Slot'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Slot' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Slot')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Spec.ContainerSpec.Image')"> <table-column-header
Image col-title="'Image'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Spec.ContainerSpec.Image' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Spec.ContainerSpec.Image' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Spec.ContainerSpec.Image'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Spec.ContainerSpec.Image' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Spec.ContainerSpec.Image')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Updated')"> <table-column-header
Last Update col-title="'Last Update'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Updated' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Updated' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Updated'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Updated' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Updated')"
></table-column-header>
</th> </th>
</tr> </tr>
</thead> </thead>

96
app/docker/components/datatables/nodes-datatable/nodesDatatable.html
View File

@ -61,60 +61,76 @@
<thead> <thead>
<tr> <tr>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Hostname')"> <table-column-header
Name col-title="'Name'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Hostname' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Hostname' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'Hostname'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Hostname' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Hostname')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Role')"> <table-column-header
Role col-title="'Role'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Role' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Role' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'Role'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Role' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Role')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('CPUs')"> <table-column-header
CPU col-title="'CPU'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'CPUs' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'CPUs' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'CPUs'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'CPUs' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('CPUs')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Memory')"> <table-column-header
Memory col-title="'Memory'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Memory' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Memory' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'Memory'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Memory' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Memory')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('EngineVersion')"> <table-column-header
Engine col-title="'Engine'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'EngineVersion' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'EngineVersion' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'EngineVersion'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'EngineVersion' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('EngineVersion')"
></table-column-header>
</th> </th>
<th ng-if="$ctrl.showIpAddressColumn"> <th ng-if="$ctrl.showIpAddressColumn">
<a ng-click="$ctrl.changeOrderBy('Addr')"> <table-column-header
IP Address col-title="'IP Address'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Addr' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Addr' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'Addr'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Addr' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Addr')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Status')"> <table-column-header
Status col-title="'Status'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Status' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'Status'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Status')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Availability')"> <table-column-header
Availability col-title="'Availability'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Availability' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Availability' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'Availability'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Availability' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Availability')"
></table-column-header>
</th> </th>
</tr> </tr>
</thead> </thead>

46
app/docker/components/datatables/secrets-datatable/secretsDatatable.html
View File

@ -82,29 +82,37 @@
<thead> <thead>
<tr> <tr>
<th> <th>
<span class="md-checkbox" authorization="DockerSecretDelete, DockerSecretCreate"> <div class="flex flex-nowrap items-center">
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" /> <span class="md-checkbox vertical-center" authorization="DockerSecretDelete, DockerSecretCreate">
<label for="select_all"></label> <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
</span> <label for="select_all"></label>
<a ng-click="$ctrl.changeOrderBy('Name')"> </span>
Name <table-column-header
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></pr-icon> col-title="'Name'"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></pr-icon> can-sort="true"
</a> is-sorted="$ctrl.state.orderBy === 'Name'"
is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Name')"
></table-column-header>
</div>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('CreatedAt')"> <table-column-header
Creation Date col-title="'Creation Date'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'CreatedAt'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'CreatedAt' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('CreatedAt')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')"> <table-column-header
Ownership col-title="'Ownership'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'ResourceControl.Ownership'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')"
></table-column-header>
</th> </th>
</tr> </tr>
</thead> </thead>

36
app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html
View File

@ -30,25 +30,31 @@
<th style="width: 22%">Task</th> <th style="width: 22%">Task</th>
<th>Actions</th> <th>Actions</th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Slot')"> <table-column-header
Slot col-title="'Slot'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Slot' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Slot' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Slot'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Slot' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Slot')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('NodeId')"> <table-column-header
Node col-title="'Node'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeId' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeId' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'NodeId'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'NodeId' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('NodeId')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Updated')"> <table-column-header
Last Update col-title="'Last Update'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Updated' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Updated' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Updated'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Updated' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Updated')"
></table-column-header>
</th> </th>
</tr> </tr>
</thead> </thead>

84
app/docker/components/datatables/services-datatable/servicesDatatable.html
View File

@ -78,53 +78,67 @@
</a> </a>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Name')"> <table-column-header
Name col-title="'Name'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'Name'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Name')"
></table-column-header>
</th> </th>
<th ng-if="$ctrl.showStackColumn"> <th ng-if="$ctrl.showStackColumn">
<a ng-click="$ctrl.changeOrderBy('StackName')"> <table-column-header
Stack col-title="'Stack'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'StackName' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'StackName'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('StackName')"
></table-column-header>
</th> </th>
<th ng-show="$ctrl.columnVisibility.columns.image.display"> <th ng-show="$ctrl.columnVisibility.columns.image.display">
<a ng-click="$ctrl.changeOrderBy('Image')"> <table-column-header
Image col-title="'Image'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Image' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'Image'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Image')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Mode')"> <table-column-header
Scheduling Mode col-title="'Scheduling Mode'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Mode' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Mode' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'Mode'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Mode' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Mode')"
></table-column-header>
</th> </th>
<th ng-show="$ctrl.columnVisibility.columns.ports.display"> <th ng-show="$ctrl.columnVisibility.columns.ports.display">
<a ng-click="$ctrl.changeOrderBy('Ports')"> <table-column-header
Published Ports col-title="'Published Ports'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Ports' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Ports' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'Ports'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Ports' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Ports')"
></table-column-header>
</th> </th>
<th ng-show="$ctrl.columnVisibility.columns.updated.display"> <th ng-show="$ctrl.columnVisibility.columns.updated.display">
<a ng-click="$ctrl.changeOrderBy('UpdatedAt')"> <table-column-header
Last Update col-title="'Last Update'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'UpdatedAt' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'UpdatedAt' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'UpdatedAt'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'UpdatedAt' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('UpdatedAt')"
></table-column-header>
</th> </th>
<th ng-show="$ctrl.columnVisibility.columns.ownership.display"> <th ng-show="$ctrl.columnVisibility.columns.ownership.display">
<a ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')"> <table-column-header
Ownership col-title="'Ownership'"
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></pr-icon> can-sort="true"
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></pr-icon> is-sorted="$ctrl.state.orderBy === 'ResourceControl.Ownership'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')"
></table-column-header>
</th> </th>
</tr> </tr>
</thead> </thead>

87
app/docker/components/datatables/tasks-datatable/tasksDatatable.html
View File

@ -1,57 +1,72 @@
<div class="datatable"> <div class="datatable">
<rd-widget> <rd-widget>
<rd-widget-header icon="{{ $ctrl.titleIcon }}" feather-icon="true" title-text="{{ $ctrl.titleText }}"></rd-widget-header>
<rd-widget-body classes="no-padding"> <rd-widget-body classes="no-padding">
<div class="searchBar"> <div class="toolBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <div class="toolBarTitle vertical-center">
<input <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
type="text" {{ $ctrl.titleText }}
class="searchInput" </div>
ng-model="$ctrl.state.textFilter" <div class="searchBar vertical-center">
ng-change="$ctrl.onTextFilterChange()" <pr-icon icon="'search'" feather="true"></pr-icon>
placeholder="Search..." <input
ng-model-options="{ debounce: 300 }" type="text"
/> class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search for a task..."
ng-model-options="{ debounce: 300 }"
/>
</div>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">
<thead> <thead>
<tr> <tr>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Status')"> <table-column-header
Status col-title="'Status'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Status'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Status')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Id')"> <table-column-header
Id col-title="'Id'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Id'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Id' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Id')"
></table-column-header>
</th> </th>
<th>Actions</th> <th>Actions</th>
<th ng-if="$ctrl.showSlotColumn"> <th ng-if="$ctrl.showSlotColumn">
<a ng-click="$ctrl.changeOrderBy('Slot')"> <table-column-header
Slot col-title="'Slot'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Slot' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Slot' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Slot'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Slot' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Slot')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('NodeId')"> <table-column-header
Node col-title="'Node'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeId' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeId' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'NodeId'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'NodeId' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('NodeId')"
></table-column-header>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Updated')"> <table-column-header
Last Update col-title="'Last Update'"
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Updated' && !$ctrl.state.reverseOrder"></i> can-sort="true"
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Updated' && $ctrl.state.reverseOrder"></i> is-sorted="$ctrl.state.orderBy === 'Updated'"
</a> is-sorted-desc="$ctrl.state.orderBy === 'Updated' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Updated')"
></table-column-header>
</th> </th>
</tr> </tr>
</thead> </thead>

4
app/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions.tsx
View File

@ -120,7 +120,7 @@ function TaskQuickActions({ taskId, state }: TaskProps) {
params={{ id: taskId }} params={{ id: taskId }}
title="Logs" title="Logs"
> >
<i className="fa fa-file-alt space-right" aria-hidden="true" /> <Icon icon="file-text" feather className="space-right" />
</Link> </Link>
</Authorized> </Authorized>
)} )}
@ -128,7 +128,7 @@ function TaskQuickActions({ taskId, state }: TaskProps) {
{state.showQuickActionInspect && ( {state.showQuickActionInspect && (
<Authorized authorizations="DockerTaskInspect"> <Authorized authorizations="DockerTaskInspect">
<Link to="docker.tasks.task" params={{ id: taskId }} title="Inspect"> <Link to="docker.tasks.task" params={{ id: taskId }} title="Inspect">
<i className="fa fa-info-circle space-right" aria-hidden="true" /> <Icon icon="info" feather className="space-right" />
</Link> </Link>
</Authorized> </Authorized>
)} )}