mirror of https://github.com/portainer/portainer
feat(ui): renovate the Docker volume list page EE-3513 (#7377)
andres-portainer
GitHub
parent
d0a9c046b3
commit
1e78234f04
|
|
@ -7,7 +7,7 @@
|
||||||
{{ $ctrl.titleText }}
|
{{ $ctrl.titleText }}
|
||||||
</div>
|
</div>
|
||||||
<div class="searchBar vertical-center">
|
<div class="searchBar vertical-center">
|
||||||
<pr-icon icon="'search'" feather="true"></pr-icon>
|
<pr-icon icon="'search'" feather="true" class="leading-none"></pr-icon>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
class="searchInput"
|
class="searchInput"
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
|
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
|
||||||
data-cy="volume-removeVolumeButton"
|
data-cy="volume-removeVolumeButton"
|
||||||
>
|
>
|
||||||
<pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
|
<pr-icon icon="'trash-2'" feather="true" mode="'danger'" class="leading-none"></pr-icon>Remove
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|
@ -37,7 +37,7 @@
|
||||||
authorization="DockerVolumeCreate"
|
authorization="DockerVolumeCreate"
|
||||||
data-cy="volume-addVolumeButton"
|
data-cy="volume-addVolumeButton"
|
||||||
>
|
>
|
||||||
<pr-icon icon="'plus'" feather="true"></pr-icon>Add volume
|
<pr-icon icon="'plus'" feather="true" class="leading-none"></pr-icon>Add volume
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="settings">
|
<div class="settings">
|
||||||
|
|
@ -63,8 +63,8 @@
|
||||||
<option value="120">2min</option>
|
<option value="120">2min</option>
|
||||||
<option value="300">5min</option>
|
<option value="300">5min</option>
|
||||||
</select>
|
</select>
|
||||||
<span>
|
<span class="inline-block w-3">
|
||||||
<i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none"></i>
|
<pr-icon id="refreshRateChange" icon="'check'" style="display: none" mode="'success'" feather="true"></pr-icon>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -81,20 +81,24 @@
|
||||||
<table class="table table-hover table-filters nowrap-cells">
|
<table class="table table-hover table-filters nowrap-cells">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open">
|
<th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open" class="flex gap-1">
|
||||||
<span class="md-checkbox" ng-if="!$ctrl.offlineMode" authorization="DockerVolumeDelete, DockerVolumeCreate">
|
<span class="md-checkbox" ng-if="!$ctrl.offlineMode" authorization="DockerVolumeDelete, DockerVolumeCreate">
|
||||||
<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('Id')">
|
<table-column-header
|
||||||
Name
|
col-title="'Name'"
|
||||||
<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"
|
||||||
<div>
|
ng-click="$ctrl.changeOrderBy('Id')"
|
||||||
<span uib-dropdown-toggle class="table-filter" ng-if="!$ctrl.filters.state.enabled">Filter <i class="fa fa-filter" aria-hidden="true"></i></span>
|
></table-column-header>
|
||||||
<span uib-dropdown-toggle class="table-filter filter-active" ng-if="$ctrl.filters.state.enabled">Filter <i class="fa fa-check" aria-hidden="true"></i></span>
|
<span uib-dropdown-toggle class="table-filter flex gap-1 self-end" ng-if="!$ctrl.filters.state.enabled"
|
||||||
</div>
|
>Filter <pr-icon icon="'filter'" feather="true"></pr-icon
|
||||||
|
></span>
|
||||||
|
<span uib-dropdown-toggle class="table-filter filter-active flex gap-1 self-end" ng-if="$ctrl.filters.state.enabled"
|
||||||
|
>Filter <pr-icon icon="'check'" feather="true"></pr-icon
|
||||||
|
></span>
|
||||||
<div class="dropdown-menu" uib-dropdown-menu>
|
<div class="dropdown-menu" uib-dropdown-menu>
|
||||||
<div class="tableMenu">
|
<div class="tableMenu">
|
||||||
<div class="menuHeader"> Filter by usage </div>
|
<div class="menuHeader"> Filter by usage </div>
|
||||||
|
|
@ -115,46 +119,58 @@
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
<a ng-click="$ctrl.changeOrderBy('StackName')">
|
<table-column-header
|
||||||
Stack
|
col-title="'Stack'"
|
||||||
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && !$ctrl.state.reverseOrder"></i>
|
can-sort="true"
|
||||||
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"></i>
|
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'"
|
||||||
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Driver' && !$ctrl.state.reverseOrder"></i>
|
can-sort="true"
|
||||||
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Driver' && $ctrl.state.reverseOrder"></i>
|
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('Mountpoint')">
|
<table-column-header
|
||||||
Mount point
|
col-title="'Mount point'"
|
||||||
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Mountpoint' && !$ctrl.state.reverseOrder"></i>
|
can-sort="true"
|
||||||
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Mountpoint' && $ctrl.state.reverseOrder"></i>
|
is-sorted="$ctrl.state.orderBy === 'Mountpoint'"
|
||||||
</a>
|
is-sorted-desc="$ctrl.state.orderBy === 'Mountpoint' && $ctrl.state.reverseOrder"
|
||||||
|
ng-click="$ctrl.changeOrderBy('Mountpoint')"
|
||||||
|
></table-column-header>
|
||||||
</th>
|
</th>
|
||||||
<th>
|
<th>
|
||||||
<a ng-click="$ctrl.changeOrderBy('CreatedAt')">
|
<table-column-header
|
||||||
Created
|
col-title="'Created'"
|
||||||
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && !$ctrl.state.reverseOrder"></i>
|
can-sort="true"
|
||||||
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && $ctrl.state.reverseOrder"></i>
|
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 ng-if="$ctrl.showHostColumn">
|
<th ng-if="$ctrl.showHostColumn">
|
||||||
<a ng-click="$ctrl.changeOrderBy('NodeName')">
|
<table-column-header
|
||||||
Host
|
col-title="'Host'"
|
||||||
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeName' && !$ctrl.state.reverseOrder"></i>
|
can-sort="true"
|
||||||
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeName' && $ctrl.state.reverseOrder"></i>
|
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'"
|
||||||
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></i>
|
can-sort="true"
|
||||||
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></i>
|
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>
|
||||||
|
|
@ -174,7 +190,7 @@
|
||||||
<span ng-if="$ctrl.offlineMode">{{ item.Id | truncate: 40 }}</span>
|
<span ng-if="$ctrl.offlineMode">{{ item.Id | truncate: 40 }}</span>
|
||||||
<btn authorization="DockerAgentBrowseList" ng-if="$ctrl.showBrowseAction && !$ctrl.offlineMode">
|
<btn authorization="DockerAgentBrowseList" ng-if="$ctrl.showBrowseAction && !$ctrl.offlineMode">
|
||||||
<a ui-sref="docker.volumes.volume.browse({ id: item.Id, nodeName: item.NodeName })" class="btn btn-xs btn-primary space-left">
|
<a ui-sref="docker.volumes.volume.browse({ id: item.Id, nodeName: item.NodeName })" class="btn btn-xs btn-primary space-left">
|
||||||
<i class="fa fa-search"></i> browse
|
<pr-icon icon="'search'" feather="true"></pr-icon> browse
|
||||||
</a>
|
</a>
|
||||||
</btn>
|
</btn>
|
||||||
<span style="margin-left: 10px" class="label label-warning image-tag space-left" ng-if="item.dangling">Unused</span>
|
<span style="margin-left: 10px" class="label label-warning image-tag space-left" ng-if="item.dangling">Unused</span>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue