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

EE-3742 update tool bar / action bar / search bar / pagination (#7298) 

Co-authored-by: RexWangPT <rex.wang@portainer.io>
pull/6884/head^2
Chao Geng 2022-07-21 00:31:13 +08:00 committed by GitHub
parent 314fdc850e
commit 9223c0226a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 322 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,9 +6,45 @@
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true"></pr-icon>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="config-searchInput"
/>
</div>
<div class="actionBar !gap-3" ng-if="!$ctrl.offlineMode" authorization="DockerConfigDelete, DockerConfigCreate">
<button
type="button"
class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
authorization="DockerConfigDelete"
ng-disabled="$ctrl.state.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
data-cy="config-removeConfigButton"
>
<pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
</button>
<button
type="button"
class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
ui-sref="docker.configs.new"
authorization="DockerConfigCreate"
data-cy="config-addConfigButton"
>
<pr-icon icon="'plus'" feather="true"></pr-icon>Add config
</button>
</div>
<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>
<span uib-dropdown-toggle aria-label="Settings">
<pr-icon icon="'more-vertical'" feather="true"></pr-icon>
</span>
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader"> Table settings </div>
@ -41,32 +77,6 @@
</span>
</div>
</div>
<div class="actionBar" authorization="DockerConfigDelete, DockerConfigCreate">
<button
type="button"
class="btn btn-sm btn-danger"
authorization="DockerConfigDelete"
ng-disabled="$ctrl.state.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
>
<i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
</button>
<button type="button" class="btn btn-sm btn-primary" ui-sref="docker.configs.new" authorization="DockerConfigCreate">
<i class="fa fa-plus space-right" aria-hidden="true"></i>Add config
</button>
</div>
<div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
/>
</div>
<div class="table-responsive">
<table class="table table-hover nowrap-cells">
<thead>
@ -130,7 +140,7 @@
<div class="footer" ng-if="$ctrl.dataset">
<div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
<div class="paginationControls">
<form class="form-inline">
<form class="form-inline vertical-center">
<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()" data-cy="component-paginationSelect">

2
app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
View File

@ -96,7 +96,7 @@
<div class="footer" ng-if="$ctrl.dataset">
<div class="paginationControls">
<form class="form-inline">
<span class="limitSelector">
<span class="limitSelector vertical-center">
<span style="margin-right: 5px"> Items per page </span>
<select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
<option value="0">All</option>

2
app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.html
View File

@ -32,7 +32,7 @@
</div>
<div class="footer" ng-if="$ctrl.dataset">
<div class="paginationControls">
<form class="form-inline">
<form class="form-inline vertical-center">
<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()" data-cy="component-paginationSelect">

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

@ -61,7 +61,7 @@
</div>
<div class="footer" ng-if="$ctrl.dataset">
<div class="paginationControls">
<form class="form-inline">
<form class="form-inline vertical-center">
<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()" data-cy="component-paginationSelect">

3
app/docker/components/datatables/images-datatable/imagesDatatable.css Normal file
View File

@ -0,0 +1,3 @@
.show-dropdown {
overflow: visible !important;
}

136
app/docker/components/datatables/images-datatable/imagesDatatable.html
View File

@ -1,14 +1,91 @@
<div class="datatable">
<rd-widget>
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBar show-dropdown">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true"></pr-icon>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="image-searchInput"
/>
</div>
<div class="actionBar !gap-3" ng-if="!$ctrl.offlineMode" authorization="DockerImageDelete, DockerImageBuild, DockerImageLoad, DockerImageGet">
<div class="btn-group" authorization="DockerImageDelete">
<button
type="button"
class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
authorization="DockerImageDelete"
ng-disabled="$ctrl.state.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
data-cy="image-removeImageButton"
>
<pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
</button>
<button
type="button"
class="btn btn-sm btn-dangerlight dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
ng-disabled="$ctrl.state.selectedItemCount === 0"
>
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a ng-click="$ctrl.forceRemoveAction($ctrl.state.selectedItems, true)" ng-disabled="$ctrl.state.selectedItemCount === 0">Force Remove</a></li>
</ul>
</div>
<button
type="button"
class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
ui-sref="docker.images.build"
authorization="DockerImageBuild"
data-cy="image-buildImageButton"
>
<pr-icon icon="'plus'" feather="true"></pr-icon>Build a new image
</button>
<div class="btn-group">
<button
type="button"
class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
ui-sref="docker.images.import"
authorization="DockerImageLoad"
ng-disabled="$ctrl.exportInProgress"
data-cy="image-importImageButton"
>
<pr-icon icon="'upload'" feather="true"></pr-icon>Import
</button>
<button
type="button"
class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
ng-disabled="$ctrl.state.selectedItemCount === 0 || $ctrl.exportInProgress"
ng-click="$ctrl.downloadAction($ctrl.state.selectedItems)"
button-spinner="$ctrl.exportInProgress"
authorization="DockerImageGet"
data-cy="image-exportImageButton"
>
<pr-icon icon="'download'" feather="true"></pr-icon>
<span ng-hide="$ctrl.exportInProgress">Export</span>
<span ng-show="$ctrl.exportInProgress">Export in progress...</span>
</button>
</div>
</div>
<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>
<span uib-dropdown-toggle aria-label="Settings">
<pr-icon icon="'more-vertical'" feather="true"></pr-icon>
</span>
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader"> Table settings </div>
@ -41,59 +118,6 @@
</span>
</div>
</div>
<div class="actionBar" ng-if="!$ctrl.offlineMode" authorization="DockerImageDelete, DockerImageBuild, DockerImageLoad, DockerImageGet">
<div class="btn-group" authorization="DockerImageDelete">
<button type="button" class="btn btn-sm btn-danger" ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems, false)">
<i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
</button>
<button
type="button"
class="btn btn-sm btn-danger dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
ng-disabled="$ctrl.state.selectedItemCount === 0"
>
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a ng-click="$ctrl.forceRemoveAction($ctrl.state.selectedItems, true)" ng-disabled="$ctrl.state.selectedItemCount === 0">Force Remove</a></li>
</ul>
</div>
<button type="button" class="btn btn-sm btn-primary" ui-sref="docker.images.build" authorization="DockerImageBuild">
<i class="fa fa-plus space-right" aria-hidden="true"></i>Build a new image
</button>
<div class="btn-group">
<button type="button" class="btn btn-sm btn-primary" ng-disabled="$ctrl.exportInProgress" ui-sref="docker.images.import" authorization="DockerImageLoad">
<i class="fa fa-upload space-right" aria-hidden="true"></i>Import
</button>
<button
type="button"
class="btn btn-sm btn-primary"
ng-disabled="$ctrl.state.selectedItemCount === 0 || $ctrl.exportInProgress"
ng-click="$ctrl.downloadAction($ctrl.state.selectedItems)"
button-spinner="$ctrl.exportInProgress"
authorization="DockerImageGet"
>
<i class="fa fa-download space-right" aria-hidden="true"></i>
<span ng-hide="$ctrl.exportInProgress">Export</span>
<span ng-show="$ctrl.exportInProgress">Export in progress...</span>
</button>
</div>
</div>
<div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
/>
</div>
<div class="table-responsive">
<table class="table table-hover table-filters nowrap-cells">
<thead>
@ -196,7 +220,7 @@
<div class="footer" ng-if="$ctrl.dataset">
<div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
<div class="paginationControls">
<form class="form-inline">
<form class="form-inline vertical-center">
<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()" data-cy="component-paginationSelect">

1
app/docker/components/datatables/images-datatable/imagesDatatableController.js
View File

@ -1,3 +1,4 @@
import './imagesDatatable.css';
angular.module('portainer.docker').controller('ImagesDatatableController', [
'$scope',
'$controller',

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

@ -92,7 +92,7 @@
</div>
<div class="footer" ng-if="$ctrl.dataset">
<div class="paginationControls">
<form class="form-inline">
<form class="form-inline vertical-center">
<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()" data-cy="component-paginationSelect">

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

@ -6,9 +6,45 @@
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true"></pr-icon>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
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"
>
<pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
</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>
<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>
<span uib-dropdown-toggle aria-label="Settings">
<pr-icon icon="'more-vertical'" feather="true"></pr-icon>
</span>
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader"> Table settings </div>
@ -41,32 +77,6 @@
</span>
</div>
</div>
<div class="actionBar" ng-if="!$ctrl.offlineMode" authorization="DockerNetworkDelete, DockerNetworkCreate">
<button
type="button"
class="btn btn-sm btn-danger"
authorization="DockerNetworkDelete"
ng-disabled="$ctrl.state.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
>
<i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
</button>
<button type="button" class="btn btn-sm btn-primary" ui-sref="docker.networks.new" authorization="DockerNetworkCreate">
<i class="fa fa-plus space-right" aria-hidden="true"></i>Add network
</button>
</div>
<div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
/>
</div>
<div class="table-responsive">
<table class="table table-hover nowrap-cells">
<thead>
@ -183,7 +193,7 @@
<div class="footer" ng-if="$ctrl.dataset">
<div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
<div class="paginationControls">
<form class="form-inline">
<form class="form-inline vertical-center">
<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()" data-cy="component-paginationSelect">

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

@ -83,7 +83,7 @@
</div>
<div class="footer" ng-if="$ctrl.dataset">
<div class="paginationControls">
<form class="form-inline">
<form class="form-inline vertical-center">
<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()" data-cy="component-paginationSelect">

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

@ -6,9 +6,24 @@
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true"></pr-icon>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="node-searchInput"
/>
</div>
<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>
<span uib-dropdown-toggle aria-label="Settings">
<pr-icon icon="'more-vertical'" feather="true"></pr-icon>
</span>
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader"> Table settings </div>
@ -41,18 +56,6 @@
</span>
</div>
</div>
<div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
/>
</div>
<div class="table-responsive">
<table class="table table-hover nowrap-cells">
<thead>
@ -147,7 +150,7 @@
</div>
<div class="footer" ng-if="$ctrl.dataset">
<div class="paginationControls">
<form class="form-inline">
<form class="form-inline vertical-center">
<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()" data-cy="component-paginationSelect">

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

@ -6,9 +6,45 @@
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true"></pr-icon>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="secret-searchInput"
/>
</div>
<div class="actionBar !gap-3" ng-if="!$ctrl.offlineMode" authorization="DockerSecretDelete, DockerSecretCreate">
<button
type="button"
class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
authorization="DockerSecretDelete"
ng-disabled="$ctrl.state.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
data-cy="secret-removeSecretButton"
>
<pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
</button>
<button
type="button"
class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
ui-sref="docker.secrets.new"
authorization="DockerSecretCreate"
data-cy="secret-addSecretButton"
>
<pr-icon icon="'plus'" feather="true"></pr-icon>Add secret
</button>
</div>
<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>
<span uib-dropdown-toggle aria-label="Settings">
<pr-icon icon="'more-vertical'" feather="true"></pr-icon>
</span>
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader"> Table settings </div>
@ -41,32 +77,6 @@
</span>
</div>
</div>
<div class="actionBar" authorization="DockerSecretDelete, DockerSecretCreate">
<button
type="button"
class="btn btn-sm btn-danger"
authorization="DockerSecretDelete"
ng-disabled="$ctrl.state.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
>
<i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
</button>
<button type="button" class="btn btn-sm btn-primary" ui-sref="docker.secrets.new" authorization="DockerSecretCreate">
<i class="fa fa-plus space-right" aria-hidden="true"></i>Add secret
</button>
</div>
<div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
/>
</div>
<div class="table-responsive">
<table class="table table-hover nowrap-cells">
<thead>
@ -130,7 +140,7 @@
<div class="footer" ng-if="$ctrl.dataset">
<div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
<div class="paginationControls">
<form class="form-inline">
<form class="form-inline vertical-center">
<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()" data-cy="component-paginationSelect">

10
app/docker/components/datatables/services-datatable/actions/servicesDatatableActions.html
View File

@ -3,21 +3,23 @@
<button
ng-if="$ctrl.showUpdateAction"
type="button"
class="btn btn-sm btn-primary"
class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
authorization="DockerServiceUpdate"
ng-disabled="$ctrl.selectedItemCount === 0"
ng-click="$ctrl.updateAction($ctrl.selectedItems)"
data-cy="service-updateServiceButton"
>
<i class="fa fa-sync space-right" aria-hidden="true"></i>Update
<pr-icon icon="'refresh-cw'" feather="true" mode="'danger'"></pr-icon>Update
</button>
<button
type="button"
class="btn btn-sm btn-danger"
class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
authorization="DockerServiceDelete"
ng-disabled="$ctrl.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.selectedItems)"
data-cy="service-removeServiceButton"
>
<i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
<pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
</button>
</div>
<button type="button" class="btn btn-sm btn-primary" ui-sref="docker.services.new" ng-if="$ctrl.showAddAction" authorization="DockerServiceCreate">

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

@ -6,10 +6,32 @@
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true"></pr-icon>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="service-searchInput"
/>
</div>
<services-datatable-actions
selected-items="$ctrl.state.selectedItems"
selected-item-count="$ctrl.state.selectedItemCount"
show-add-action="$ctrl.showAddAction"
show-update-action="$ctrl.showUpdateAction"
endpoint-id="$ctrl.endpointId"
></services-datatable-actions>
<div class="settings">
<datatable-columns-visibility columns="$ctrl.columnVisibility.columns" on-change="($ctrl.onColumnVisibilityChange)"></datatable-columns-visibility>
<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>
<span uib-dropdown-toggle aria-label="Settings">
<pr-icon icon="'more-vertical'" feather="true"></pr-icon>
</span>
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader"> Table settings </div>
@ -42,25 +64,6 @@
</span>
</div>
</div>
<services-datatable-actions
selected-items="$ctrl.state.selectedItems"
selected-item-count="$ctrl.state.selectedItemCount"
show-add-action="$ctrl.showAddAction"
show-update-action="$ctrl.showUpdateAction"
endpoint-id="$ctrl.endpointId"
></services-datatable-actions>
<div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
focus-if="!$ctrl.notAutoFocus"
ng-model-options="{ debounce: 300 }"
/>
</div>
<div class="table-responsive">
<table class="table table-hover nowrap-cells">
<thead>
@ -215,7 +218,7 @@
<div class="footer" ng-if="$ctrl.dataset">
<div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
<div class="paginationControls">
<form class="form-inline">
<form class="form-inline vertical-center">
<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()" data-cy="component-paginationSelect">

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

@ -102,7 +102,7 @@
</div>
<div class="footer" ng-if="$ctrl.dataset">
<div class="paginationControls">
<form class="form-inline">
<form class="form-inline vertical-center">
<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()" data-cy="component-paginationSelect">

66
app/docker/components/datatables/volumes-datatable/volumesDatatable.html
View File

@ -6,9 +6,45 @@
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true"></pr-icon>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="volume-searchInput"
/>
</div>
<div class="actionBar !gap-3" ng-if="!$ctrl.offlineMode" authorization="DockerVolumeDelete, DockerVolumeCreate">
<button
type="button"
class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
authorization="DockerVolumeDelete"
ng-disabled="$ctrl.state.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
data-cy="volume-removeVolumeButton"
>
<pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
</button>
<button
type="button"
class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
ui-sref="docker.volumes.new"
authorization="DockerVolumeCreate"
data-cy="volume-addVolumeButton"
>
<pr-icon icon="'plus'" feather="true"></pr-icon>Add volume
</button>
</div>
<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>
<span uib-dropdown-toggle aria-label="Settings">
<pr-icon icon="'more-vertical'" feather="true"></pr-icon>
</span>
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader"> Table settings </div>
@ -41,32 +77,6 @@
</span>
</div>
</div>
<div class="actionBar" ng-if="!$ctrl.offlineMode" authorization="DockerVolumeDelete, DockerVolumeCreate">
<button
type="button"
class="btn btn-sm btn-danger"
authorization="DockerVolumeDelete"
ng-disabled="$ctrl.state.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
>
<i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
</button>
<button type="button" class="btn btn-sm btn-primary" ui-sref="docker.volumes.new" authorization="DockerVolumeCreate">
<i class="fa fa-plus space-right" aria-hidden="true"></i>Add volume
</button>
</div>
<div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
/>
</div>
<div class="table-responsive">
<table class="table table-hover table-filters nowrap-cells">
<thead>
@ -193,7 +203,7 @@
<div class="footer" ng-if="$ctrl.dataset">
<div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
<div class="paginationControls">
<form class="form-inline">
<form class="form-inline vertical-center">
<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()" data-cy="component-paginationSelect">

59
app/portainer/components/datatables/registries-datatable/registriesDatatable.html
View File

@ -1,32 +1,39 @@
<div class="datatable">
<rd-widget>
<rd-widget-header icon="{{ $ctrl.titleIcon }}" feather-icon="true" title-text="{{ $ctrl.titleText }}"></rd-widget-header>
<rd-widget-body classes="no-padding">
<div class="actionBar" ng-if="$ctrl.isAdmin">
<button
ng-if="!$ctrl.endpointType"
type="button"
class="btn btn-sm btn-danger"
ng-disabled="$ctrl.state.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
>
<i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
</button>
<button type="button" class="btn btn-sm btn-primary" ui-sref="portainer.registries.new" data-cy="add-registry">
<i class="fa fa-plus space-right" aria-hidden="true"></i>Add registry
</button>
</div>
<div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
/>
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true"></pr-icon>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="volume-searchInput"
/>
</div>
<div class="actionBar !gap-3" ng-if="$ctrl.isAdmin">
<button
ng-if="!$ctrl.endpointType"
type="button"
class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
ng-disabled="$ctrl.state.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
data-cy="registry-removeRegistryButton"
>
<pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
</button>
<button type="button" class="btn btn-sm btn-primary h-fit vertical-center !ml-0" ui-sref="portainer.registries.new" data-cy="registry-addRegistryButton">
<pr-icon icon="'plus'" feather="true"></pr-icon>Add registry
</button>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover nowrap-cells">