Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 07:49:41 +02:00
Code Issues Releases Activity

chore(project): add prettier for code format (#3645)

Browse source 
* chore(project): install prettier and lint-staged

* chore(project): apply prettier to html too

* chore(project): git ignore eslintcache

* chore(project): add a comment about format script

* chore(prettier): update printWidth

* chore(prettier): remove useTabs option

* chore(prettier): add HTML validation

* refactor(prettier): fix closing tags

* feat(prettier): define angular parser for html templates

* style(prettier): run prettier on codebase

Co-authored-by: Anthony Lapenna <lapenna.anthony@gmail.com>
This commit is contained in:
Chaim Lev-Ari 2020-04-11 00:54:53 +03:00 • committed by GitHub
parent 6663073be1
commit cf5056d9c0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
714 changed files with 31228 additions and 28305 deletions
Download patch file Download diff file Expand all files Collapse all files

38
app/docker/components/datatables/configs-datatable/configsDatatable.html
View file

@ -2,9 +2,7 @@
<rd-widget>
<rd-widget-body classes="no-padding">
<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 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>
@ -16,7 +14,7 @@
<div class="menuContent">
<div>
<div class="md-checkbox">
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()"/>
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
<label for="setting_auto_refresh">Auto refresh</label>
</div>
<div ng-if="$ctrl.settings.repeater.autoRefresh">
@ -45,17 +43,30 @@
</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)">
<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">
<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 }">
<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">
@ -89,10 +100,13 @@
</tr>
</thead>
<tbody>
<tr dir-paginate="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}">
<tr
dir-paginate="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 }"
>
<td>
<span class="md-checkbox" authorization="DockerConfigDelete, DockerConfigCreate">
<input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)"/>
<input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
<label for="select_{{ $index }}"></label>
</span>
<a ui-sref="docker.configs.config({id: item.Id})">{{ item.Name }}</a>
@ -115,9 +129,7 @@
</table>
</div>
<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="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
<div class="paginationControls">
<form class="form-inline">
<span class="limitSelector">

4
app/docker/components/datatables/configs-datatable/configsDatatable.js
View file

@ -10,6 +10,6 @@ angular.module('portainer.docker').component('configsDatatable', {
reverseOrder: '<',
showOwnershipColumn: '<',
removeAction: '<',
refreshCallback: '<'
}
refreshCallback: '<',
},
});

26
app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
View file

@ -2,9 +2,7 @@
<rd-widget>
<rd-widget-body classes="no-padding">
<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 class="actionBar">
<form class="form-horizontal">
@ -17,7 +15,13 @@
</select>
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="$ctrl.joinNetworkActionInProgress || !$ctrl.selectedNetwork" ng-click="$ctrl.joinNetworkAction($ctrl.container, $ctrl.selectedNetwork)" button-spinner="$ctrl.joinNetworkActionInProgress">
<button
type="button"
class="btn btn-primary btn-sm"
ng-disabled="$ctrl.joinNetworkActionInProgress || !$ctrl.selectedNetwork"
ng-click="$ctrl.joinNetworkAction($ctrl.container, $ctrl.selectedNetwork)"
button-spinner="$ctrl.joinNetworkActionInProgress"
>
<span ng-hide="$ctrl.joinNetworkActionInProgress">Join network</span>
<span ng-show="$ctrl.joinNetworkActionInProgress">Joining network...</span>
</button>
@ -37,13 +41,21 @@
</tr>
</thead>
<tbody>
<tr dir-paginate="(key, value) in $ctrl.dataset | itemsPerPage: $ctrl.state.paginatedItemLimit" ng-class="{active: item.Checked}">
<td><a ui-sref="docker.networks.network({ id: key, nodeName: $ctrl.nodeName })">{{ key }}</a></td>
<tr dir-paginate="(key, value) in $ctrl.dataset | itemsPerPage: $ctrl.state.paginatedItemLimit" ng-class="{ active: item.Checked }">
<td
><a ui-sref="docker.networks.network({ id: key, nodeName: $ctrl.nodeName })">{{ key }}</a></td
>
<td>{{ value.IPAddress || '-' }}</td>
<td>{{ value.Gateway || '-' }}</td>
<td>{{ value.MacAddress || '-' }}</td>
<td authorization="DockerNetworkDisconnect">
<button type="button" class="btn btn-xs btn-danger" ng-disabled="$ctrl.leaveNetworkActionInProgress" button-spinner="$ctrl.leaveNetworkActionInProgress" ng-click="$ctrl.leaveNetworkAction($ctrl.container, key)">
<button
type="button"
class="btn btn-xs btn-danger"
ng-disabled="$ctrl.leaveNetworkActionInProgress"
button-spinner="$ctrl.leaveNetworkActionInProgress"
ng-click="$ctrl.leaveNetworkAction($ctrl.container, key)"
>
<span ng-hide="$ctrl.leaveNetworkActionInProgress"><i class="fa fa-trash-alt space-right" aria-hidden="true"></i> Leave network</span>
<span ng-show="$ctrl.leaveNetworkActionInProgress">Leaving network...</span>
</button>

4
app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.js
View file

@ -12,6 +12,6 @@ angular.module('portainer.docker').component('containerNetworksDatatable', {
joinNetworkActionInProgress: '<',
leaveNetworkActionInProgress: '<',
leaveNetworkAction: '<',
nodeName: '<'
}
nodeName: '<',
},
});

6
app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.html
View file

@ -2,13 +2,11 @@
<rd-widget>
<rd-widget-body classes="no-padding">
<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 class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }">
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }" />
</div>
<div class="table-responsive">
<table class="table table-hover nowrap-cells">

4
app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.js
View file

@ -8,6 +8,6 @@ angular.module('portainer.docker').component('containerProcessesDatatable', {
headerset: '<',
tableKey: '@',
orderBy: '@',
reverseOrder: '<'
}
reverseOrder: '<',
},
});

68
app/docker/components/datatables/containers-datatable/actions/containersDatatableActions.html
View file

@ -1,31 +1,69 @@
<div class="actionBar" authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate">
<div
class="actionBar"
authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate"
>
<div class="btn-group" role="group" aria-label="...">
<button authorization="DockerContainerStart" type="button" class="btn btn-sm btn-success" ng-click="$ctrl.startAction($ctrl.selectedItems)"
ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noStoppedItemsSelected">
<button
authorization="DockerContainerStart"
type="button"
class="btn btn-sm btn-success"
ng-click="$ctrl.startAction($ctrl.selectedItems)"
ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noStoppedItemsSelected"
>
<i class="fa fa-play space-right" aria-hidden="true"></i>Start
</button>
<button authorization="DockerContainerStop" type="button" class="btn btn-sm btn-danger" ng-click="$ctrl.stopAction($ctrl.selectedItems)"
ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noRunningItemsSelected">
<button
authorization="DockerContainerStop"
type="button"
class="btn btn-sm btn-danger"
ng-click="$ctrl.stopAction($ctrl.selectedItems)"
ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noRunningItemsSelected"
>
<i class="fa fa-stop space-right" aria-hidden="true"></i>Stop
</button>
<button authorization="DockerContainerKill" type="button" class="btn btn-sm btn-danger" ng-click="$ctrl.killAction($ctrl.selectedItems)"
ng-disabled="$ctrl.selectedItemCount === 0">
<button
authorization="DockerContainerKill"
type="button"
class="btn btn-sm btn-danger"
ng-click="$ctrl.killAction($ctrl.selectedItems)"
ng-disabled="$ctrl.selectedItemCount === 0"
>
<i class="fa fa-bomb space-right" aria-hidden="true"></i>Kill
</button>
<button authorization="DockerContainerRestart" type="button" class="btn btn-sm btn-primary" ng-click="$ctrl.restartAction($ctrl.selectedItems)"
ng-disabled="$ctrl.selectedItemCount === 0">
<button
authorization="DockerContainerRestart"
type="button"
class="btn btn-sm btn-primary"
ng-click="$ctrl.restartAction($ctrl.selectedItems)"
ng-disabled="$ctrl.selectedItemCount === 0"
>
<i class="fa fa-sync space-right" aria-hidden="true"></i>Restart
</button>
<button authorization="DockerContainerPause" type="button" class="btn btn-sm btn-primary" ng-click="$ctrl.pauseAction($ctrl.selectedItems)"
ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noRunningItemsSelected">
<button
authorization="DockerContainerPause"
type="button"
class="btn btn-sm btn-primary"
ng-click="$ctrl.pauseAction($ctrl.selectedItems)"
ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noRunningItemsSelected"
>
<i class="fa fa-pause space-right" aria-hidden="true"></i>Pause
</button>
<button authorization="DockerContainerUnpause" type="button" class="btn btn-sm btn-primary" ng-click="$ctrl.resumeAction($ctrl.selectedItems)"
ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noPausedItemsSelected">
<button
authorization="DockerContainerUnpause"
type="button"
class="btn btn-sm btn-primary"
ng-click="$ctrl.resumeAction($ctrl.selectedItems)"
ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noPausedItemsSelected"
>
<i class="fa fa-play space-right" aria-hidden="true"></i>Resume
</button>
<button authorization="DockerContainerDelete" type="button" class="btn btn-sm btn-danger"
ng-disabled="$ctrl.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.selectedItems)">
<button
authorization="DockerContainerDelete"
type="button"
class="btn btn-sm btn-danger"
ng-disabled="$ctrl.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.selectedItems)"
>
<i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
</button>
</div>

4
app/docker/components/datatables/containers-datatable/actions/containersDatatableActions.js
View file

@ -7,6 +7,6 @@ angular.module('portainer.docker').component('containersDatatableActions', {
noStoppedItemsSelected: '=',
noRunningItemsSelected: '=',
noPausedItemsSelected: '=',
showAddAction: '<'
}
showAddAction: '<',
},
});

184
app/docker/components/datatables/containers-datatable/actions/containersDatatableActionsController.js
View file

@ -1,106 +1,112 @@
angular.module('portainer.docker')
.controller('ContainersDatatableActionsController', ['$state', 'ContainerService', 'ModalService', 'Notifications', 'HttpRequestHelper',
function ($state, ContainerService, ModalService, Notifications, HttpRequestHelper) {
this.startAction = function(selectedItems) {
var successMessage = 'Container successfully started';
var errorMessage = 'Unable to start container';
executeActionOnContainerList(selectedItems, ContainerService.startContainer, successMessage, errorMessage);
};
angular.module('portainer.docker').controller('ContainersDatatableActionsController', [
'$state',
'ContainerService',
'ModalService',
'Notifications',
'HttpRequestHelper',
function ($state, ContainerService, ModalService, Notifications, HttpRequestHelper) {
this.startAction = function (selectedItems) {
var successMessage = 'Container successfully started';
var errorMessage = 'Unable to start container';
executeActionOnContainerList(selectedItems, ContainerService.startContainer, successMessage, errorMessage);
};
this.stopAction = function(selectedItems) {
var successMessage = 'Container successfully stopped';
var errorMessage = 'Unable to stop container';
executeActionOnContainerList(selectedItems, ContainerService.stopContainer, successMessage, errorMessage);
};
this.stopAction = function (selectedItems) {
var successMessage = 'Container successfully stopped';
var errorMessage = 'Unable to stop container';
executeActionOnContainerList(selectedItems, ContainerService.stopContainer, successMessage, errorMessage);
};
this.restartAction = function(selectedItems) {
var successMessage = 'Container successfully restarted';
var errorMessage = 'Unable to restart container';
executeActionOnContainerList(selectedItems, ContainerService.restartContainer, successMessage, errorMessage);
};
this.restartAction = function (selectedItems) {
var successMessage = 'Container successfully restarted';
var errorMessage = 'Unable to restart container';
executeActionOnContainerList(selectedItems, ContainerService.restartContainer, successMessage, errorMessage);
};
this.killAction = function(selectedItems) {
var successMessage = 'Container successfully killed';
var errorMessage = 'Unable to kill container';
executeActionOnContainerList(selectedItems, ContainerService.killContainer, successMessage, errorMessage);
};
this.killAction = function (selectedItems) {
var successMessage = 'Container successfully killed';
var errorMessage = 'Unable to kill container';
executeActionOnContainerList(selectedItems, ContainerService.killContainer, successMessage, errorMessage);
};
this.pauseAction = function(selectedItems) {
var successMessage = 'Container successfully paused';
var errorMessage = 'Unable to pause container';
executeActionOnContainerList(selectedItems, ContainerService.pauseContainer, successMessage, errorMessage);
};
this.pauseAction = function (selectedItems) {
var successMessage = 'Container successfully paused';
var errorMessage = 'Unable to pause container';
executeActionOnContainerList(selectedItems, ContainerService.pauseContainer, successMessage, errorMessage);
};
this.resumeAction = function(selectedItems) {
var successMessage = 'Container successfully resumed';
var errorMessage = 'Unable to resume container';
executeActionOnContainerList(selectedItems, ContainerService.resumeContainer, successMessage, errorMessage);
};
this.resumeAction = function (selectedItems) {
var successMessage = 'Container successfully resumed';
var errorMessage = 'Unable to resume container';
executeActionOnContainerList(selectedItems, ContainerService.resumeContainer, successMessage, errorMessage);
};
this.removeAction = function(selectedItems) {
var isOneContainerRunning = false;
for (var i = 0; i < selectedItems.length; i++) {
var container = selectedItems[i];
if (container.State === 'running') {
isOneContainerRunning = true;
break;
this.removeAction = function (selectedItems) {
var isOneContainerRunning = false;
for (var i = 0; i < selectedItems.length; i++) {
var container = selectedItems[i];
if (container.State === 'running') {
isOneContainerRunning = true;
break;
}
}
}
var title = 'You are about to remove one or more container.';
if (isOneContainerRunning) {
title = 'You are about to remove one or more running container.';
}
var title = 'You are about to remove one or more container.';
if (isOneContainerRunning) {
title = 'You are about to remove one or more running container.';
}
ModalService.confirmContainerDeletion(title, function (result) {
if(!result) { return; }
ModalService.confirmContainerDeletion(title, function (result) {
if (!result) {
return;
}
var cleanVolumes = false;
if (result[0]) {
cleanVolumes = true;
}
removeSelectedContainers(selectedItems, cleanVolumes);
}
);
};
function executeActionOnContainerList(containers, action, successMessage, errorMessage) {
var actionCount = containers.length;
angular.forEach(containers, function (container) {
HttpRequestHelper.setPortainerAgentTargetHeader(container.NodeName);
action(container.Id)
.then(function success() {
Notifications.success(successMessage, container.Names[0]);
})
.catch(function error(err) {
errorMessage = errorMessage + ':' + container.Names[0];
Notifications.error('Failure', err, errorMessage);
})
.finally(function final() {
--actionCount;
if (actionCount === 0) {
$state.reload();
}
});
});
}
};
function removeSelectedContainers(containers, cleanVolumes) {
var actionCount = containers.length;
angular.forEach(containers, function (container) {
HttpRequestHelper.setPortainerAgentTargetHeader(container.NodeName);
ContainerService.remove(container, cleanVolumes)
.then(function success() {
Notifications.success('Container successfully removed', container.Names[0]);
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to remove container');
})
.finally(function final() {
--actionCount;
if (actionCount === 0) {
$state.reload();
}
function executeActionOnContainerList(containers, action, successMessage, errorMessage) {
var actionCount = containers.length;
angular.forEach(containers, function (container) {
HttpRequestHelper.setPortainerAgentTargetHeader(container.NodeName);
action(container.Id)
.then(function success() {
Notifications.success(successMessage, container.Names[0]);
})
.catch(function error(err) {
errorMessage = errorMessage + ':' + container.Names[0];
Notifications.error('Failure', err, errorMessage);
})
.finally(function final() {
--actionCount;
if (actionCount === 0) {
$state.reload();
}
});
});
});
}
}]);
}
function removeSelectedContainers(containers, cleanVolumes) {
var actionCount = containers.length;
angular.forEach(containers, function (container) {
HttpRequestHelper.setPortainerAgentTargetHeader(container.NodeName);
ContainerService.remove(container, cleanVolumes)
.then(function success() {
Notifications.success('Container successfully removed', container.Names[0]);
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to remove container');
})
.finally(function final() {
--actionCount;
if (actionCount === 0) {
$state.reload();
}
});
});
}
},
]);

210
app/docker/components/datatables/containers-datatable/containersDatatable.html
View file

@ -2,60 +2,65 @@
<rd-widget>
<rd-widget-body classes="no-padding">
<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 class="settings">
<span class="setting" ng-class="{ 'setting-active': $ctrl.columnVisibility.state.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.columnVisibility.state.open">
<span uib-dropdown-toggle ><i class="fa fa-columns space-right" aria-hidden="true"></i>Columns</span>
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader">
Show / Hide Columns
<span
class="setting"
ng-class="{ 'setting-active': $ctrl.columnVisibility.state.open }"
uib-dropdown
dropdown-append-to-body
auto-close="disabled"
is-open="$ctrl.columnVisibility.state.open"
>
<span uib-dropdown-toggle><i class="fa fa-columns space-right" aria-hidden="true"></i>Columns</span>
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader">
Show / Hide Columns
</div>
<div class="menuContent">
<div class="md-checkbox">
<input id="col_vis_state" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.state.display" />
<label for="col_vis_state" ng-bind="$ctrl.columnVisibility.columns.state.label"></label>
</div>
<div class="menuContent">
<div class="md-checkbox" >
<input id="col_vis_state" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.state.display"/>
<label for="col_vis_state" ng-bind="$ctrl.columnVisibility.columns.state.label"></label>
</div>
<div class="md-checkbox">
<input id="col_vis_actions" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.actions.display"/>
<label for="col_vis_actions" ng-bind="$ctrl.columnVisibility.columns.actions.label"></label>
</div>
<div class="md-checkbox">
<input id="col_vis_stack" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.stack.display"/>
<label for="col_vis_stack" ng-bind="$ctrl.columnVisibility.columns.stack.label"></label>
</div>
<div class="md-checkbox">
<input id="col_vis_image" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.image.display"/>
<label for="col_vis_image" ng-bind="$ctrl.columnVisibility.columns.image.label"></label>
</div>
<div class="md-checkbox">
<input id="col_vis_created" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.created.display"/>
<label for="col_vis_created" ng-bind="$ctrl.columnVisibility.columns.created.label"></label>
</div>
<div class="md-checkbox">
<input id="col_vis_ip" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.ip.display"/>
<label for="col_vis_ip" ng-bind="$ctrl.columnVisibility.columns.ip.label"></label>
</div>
<div class="md-checkbox" ng-if="$ctrl.showHostColumn">
<input id="col_vis_host" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.host.display"/>
<label for="col_vis_host" ng-bind="$ctrl.columnVisibility.columns.host.label"></label>
</div>
<div class="md-checkbox">
<input id="col_vis_ports" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.ports.display"/>
<label for="col_vis_ports" ng-bind="$ctrl.columnVisibility.columns.ports.label"></label>
</div>
<div class="md-checkbox">
<input id="col_vis_ownership" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.ownership.display"/>
<label for="col_vis_ownership" ng-bind="$ctrl.columnVisibility.columns.ownership.label"></label>
</div>
<div class="md-checkbox">
<input id="col_vis_actions" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.actions.display" />
<label for="col_vis_actions" ng-bind="$ctrl.columnVisibility.columns.actions.label"></label>
</div>
<div>
<a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.columnVisibility.state.open = false;">Close</a>
<div class="md-checkbox">
<input id="col_vis_stack" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.stack.display" />
<label for="col_vis_stack" ng-bind="$ctrl.columnVisibility.columns.stack.label"></label>
</div>
<div class="md-checkbox">
<input id="col_vis_image" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.image.display" />
<label for="col_vis_image" ng-bind="$ctrl.columnVisibility.columns.image.label"></label>
</div>
<div class="md-checkbox">
<input id="col_vis_created" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.created.display" />
<label for="col_vis_created" ng-bind="$ctrl.columnVisibility.columns.created.label"></label>
</div>
<div class="md-checkbox">
<input id="col_vis_ip" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.ip.display" />
<label for="col_vis_ip" ng-bind="$ctrl.columnVisibility.columns.ip.label"></label>
</div>
<div class="md-checkbox" ng-if="$ctrl.showHostColumn">
<input id="col_vis_host" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.host.display" />
<label for="col_vis_host" ng-bind="$ctrl.columnVisibility.columns.host.label"></label>
</div>
<div class="md-checkbox">
<input id="col_vis_ports" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.ports.display" />
<label for="col_vis_ports" ng-bind="$ctrl.columnVisibility.columns.ports.label"></label>
</div>
<div class="md-checkbox">
<input id="col_vis_ownership" ng-click="$ctrl.onColumnVisibilityChange()" type="checkbox" ng-model="$ctrl.columnVisibility.columns.ownership.display" />
<label for="col_vis_ownership" ng-bind="$ctrl.columnVisibility.columns.ownership.label"></label>
</div>
</div>
<div>
<a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.columnVisibility.state.open = false;">Close</a>
</div>
</div>
</div>
</span>
<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>
@ -66,12 +71,12 @@
</div>
<div class="menuContent">
<div class="md-checkbox">
<input id="setting_container_trunc" type="checkbox" ng-model="$ctrl.settings.truncateContainerName" ng-change="$ctrl.onSettingsContainerNameTruncateChange()"/>
<input id="setting_container_trunc" type="checkbox" ng-model="$ctrl.settings.truncateContainerName" ng-change="$ctrl.onSettingsContainerNameTruncateChange()" />
<label for="setting_container_trunc">Truncate container name</label>
</div>
<div>
<div class="md-checkbox">
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()"/>
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
<label for="setting_auto_refresh">Auto refresh</label>
</div>
<div ng-if="$ctrl.settings.repeater.autoRefresh">
@ -97,23 +102,23 @@
</div>
<div class="menuContent">
<div class="md-checkbox" authorization="DockerContainerStats">
<input id="setting_show_stats" type="checkbox" ng-model="$ctrl.settings.showQuickActionStats" ng-change="$ctrl.onSettingsQuickActionChange()"/>
<input id="setting_show_stats" type="checkbox" ng-model="$ctrl.settings.showQuickActionStats" ng-change="$ctrl.onSettingsQuickActionChange()" />
<label for="setting_show_stats">Stats</label>
</div>
<div class="md-checkbox" authorization="DockerContainerLogs">
<input id="setting_show_logs" type="checkbox" ng-model="$ctrl.settings.showQuickActionLogs" ng-change="$ctrl.onSettingsQuickActionChange()"/>
<input id="setting_show_logs" type="checkbox" ng-model="$ctrl.settings.showQuickActionLogs" ng-change="$ctrl.onSettingsQuickActionChange()" />
<label for="setting_show_logs">Logs</label>
</div>
<div class="md-checkbox" authorization="DockerExecStart">
<input id="setting_show_console" type="checkbox" ng-model="$ctrl.settings.showQuickActionExec" ng-change="$ctrl.onSettingsQuickActionChange()"/>
<input id="setting_show_console" type="checkbox" ng-model="$ctrl.settings.showQuickActionExec" ng-change="$ctrl.onSettingsQuickActionChange()" />
<label for="setting_show_console">Console</label>
</div>
<div class="md-checkbox" authorization="DockerContainerInspect">
<input id="setting_show_inspect" type="checkbox" ng-model="$ctrl.settings.showQuickActionInspect" ng-change="$ctrl.onSettingsQuickActionChange()"/>
<input id="setting_show_inspect" type="checkbox" ng-model="$ctrl.settings.showQuickActionInspect" ng-change="$ctrl.onSettingsQuickActionChange()" />
<label for="setting_show_inspect">Inspect</label>
</div>
<div class="md-checkbox" authorization="DockerContainerAttach">
<input id="setting_show_attach" type="checkbox" ng-model="$ctrl.settings.showQuickActionAttach" ng-change="$ctrl.onSettingsQuickActionChange()"/>
<input id="setting_show_attach" type="checkbox" ng-model="$ctrl.settings.showQuickActionAttach" ng-change="$ctrl.onSettingsQuickActionChange()" />
<label for="setting_show_attach">Attach</label>
</div>
</div>
@ -126,7 +131,8 @@
</span>
</div>
</div>
<containers-datatable-actions ng-if="!$ctrl.offlineMode"
<containers-datatable-actions
ng-if="!$ctrl.offlineMode"
selected-items="$ctrl.state.selectedItems"
selected-item-count="$ctrl.state.selectedItemCount"
no-stopped-items-selected="$ctrl.state.noStoppedItemsSelected"
@ -136,14 +142,26 @@
></containers-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..." auto-focus ng-model-options="{ debounce: 300 }">
<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>
<tr>
<th>
<span class="md-checkbox" ng-if="!$ctrl.offlineMode" authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate">
<span
class="md-checkbox"
ng-if="!$ctrl.offlineMode"
authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate"
>
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
<label for="select_all"></label>
</span>
@ -170,7 +188,7 @@
</div>
<div class="menuContent">
<div class="md-checkbox" ng-repeat="filter in $ctrl.filters.state.values track by $index">
<input id="filter_state_{{ $index }}" type="checkbox" ng-model="filter.display" ng-change="$ctrl.onStateFilterChange()"/>
<input id="filter_state_{{ $index }}" type="checkbox" ng-model="filter.display" ng-change="$ctrl.onStateFilterChange()" />
<label for="filter_state_{{ $index }}">{{ filter.label }}</label>
</div>
</div>
@ -180,7 +198,17 @@
</div>
</div>
</th>
<th ng-if="$ctrl.settings.showQuickActionStats || $ctrl.settings.showQuickActionLogs || $ctrl.settings.showQuickActionExec || $ctrl.settings.showQuickActionAttach|| $ctrl.settings.showQuickActionInspect" ng-show="$ctrl.columnVisibility.columns.actions.display" authorization="DockerContainerStats, DockerContainerLogs, DockerExecStart, DockerContainerInspect, DockerTaskInspect, DockerTaskLogs, DockerContainerAttach">
<th
ng-if="
$ctrl.settings.showQuickActionStats ||
$ctrl.settings.showQuickActionLogs ||
$ctrl.settings.showQuickActionExec ||
$ctrl.settings.showQuickActionAttach ||
$ctrl.settings.showQuickActionInspect
"
ng-show="$ctrl.columnVisibility.columns.actions.display"
authorization="DockerContainerStats, DockerContainerLogs, DockerExecStart, DockerContainerInspect, DockerTaskInspect, DockerTaskLogs, DockerContainerAttach"
>
Quick actions
</th>
<th ng-show="$ctrl.columnVisibility.columns.stack.display">
@ -199,8 +227,8 @@
</th>
<th ng-show="$ctrl.columnVisibility.columns.created.display">
<a ng-click="$ctrl.changeOrderBy('Created')">
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Created' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Created' && $ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Created' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Created' && $ctrl.state.reverseOrder"></i>
Created
</a>
</th>
@ -235,39 +263,69 @@
</tr>
</thead>
<tbody>
<tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))" ng-class="{active: item.Checked}">
<tr
dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
ng-class="{ active: item.Checked }"
>
<td>
<span class="md-checkbox" ng-if="!$ctrl.offlineMode" authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate">
<input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)"/>
<span
class="md-checkbox"
ng-if="!$ctrl.offlineMode"
authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate"
>
<input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
<label for="select_{{ $index }}"></label>
</span>
<a ng-if="!$ctrl.offlineMode" ui-sref="docker.containers.container({ id: item.Id, nodeName: item.NodeName })" title="{{ item | containername }}">{{ item | containername | truncate: $ctrl.settings.containerNameTruncateSize }}</a>
<a ng-if="!$ctrl.offlineMode" ui-sref="docker.containers.container({ id: item.Id, nodeName: item.NodeName })" title="{{ item | containername }}">{{
item | containername | truncate: $ctrl.settings.containerNameTruncateSize
}}</a>
<span ng-if="$ctrl.offlineMode">{{ item | containername | truncate: $ctrl.settings.containerNameTruncateSize }}</span>
</td>
<td ng-show="$ctrl.columnVisibility.columns.state.display">
<span ng-if="['starting','healthy','unhealthy'].indexOf(item.Status) !== -1" class="label label-{{ item.Status|containerstatusbadge }} interactive" uib-tooltip="This container has a health check">{{ item.Status }}</span>
<span ng-if="['starting','healthy','unhealthy'].indexOf(item.Status) === -1" class="label label-{{ item.Status|containerstatusbadge }}">{{ item.Status }}</span>
<span
ng-if="['starting', 'healthy', 'unhealthy'].indexOf(item.Status) !== -1"
class="label label-{{ item.Status | containerstatusbadge }} interactive"
uib-tooltip="This container has a health check"
>{{ item.Status }}</span
>
<span ng-if="['starting', 'healthy', 'unhealthy'].indexOf(item.Status) === -1" class="label label-{{ item.Status | containerstatusbadge }}">{{ item.Status }}</span>
</td>
<td ng-if="!$ctrl.offlineMode && ($ctrl.settings.showQuickActionStats || $ctrl.settings.showQuickActionLogs || $ctrl.settings.showQuickActionExec || $ctrl.settings.showQuickActionAttach || $ctrl.settings.showQuickActionInspect)" ng-show="$ctrl.columnVisibility.columns.actions.display" authorization="DockerContainerStats, DockerContainerLogs, DockerExecStart, DockerContainerInspect, DockerTaskInspect, DockerTaskLogs">
<td
ng-if="
!$ctrl.offlineMode &&
($ctrl.settings.showQuickActionStats ||
$ctrl.settings.showQuickActionLogs ||
$ctrl.settings.showQuickActionExec ||
$ctrl.settings.showQuickActionAttach ||
$ctrl.settings.showQuickActionInspect)
"
ng-show="$ctrl.columnVisibility.columns.actions.display"
authorization="DockerContainerStats, DockerContainerLogs, DockerExecStart, DockerContainerInspect, DockerTaskInspect, DockerTaskLogs"
>
<container-quick-actions container-id="item.Id" node-name="item.NodeName" status="item.Status" state="$ctrl.settings"></container-quick-actions>
</td>
<td ng-if="$ctrl.offlineMode">
</td>
<td ng-if="$ctrl.offlineMode"> </td>
<td ng-show="$ctrl.columnVisibility.columns.stack.display">{{ item.StackName ? item.StackName : '-' }}</td>
<td ng-show="$ctrl.columnVisibility.columns.image.display">
<a ng-if="!$ctrl.offlineMode" ui-sref="docker.images.image({ id: item.Image })">{{ item.Image | trimshasum }}</a>
<span ng-if="$ctrl.offlineMode">{{ item.Image | trimshasum }}</span>
</td>
<td ng-show="$ctrl.columnVisibility.columns.created.display">
{{item.Created | getisodatefromtimestamp}}
{{ item.Created | getisodatefromtimestamp }}
</td>
<td ng-show="$ctrl.columnVisibility.columns.ip.display">{{ item.IP ? item.IP : '-' }}</td>
<td ng-if="$ctrl.showHostColumn" ng-show="$ctrl.columnVisibility.columns.host.display">{{ item.NodeName ? item.NodeName : '-' }}</td>
<td ng-show="$ctrl.columnVisibility.columns.ports.display">
<a ng-if="item.Ports.length > 0" ng-repeat="p in item.Ports" class="image-tag" ng-href="http://{{ $ctrl.state.publicURL || p.host }}:{{p.public}}" target="_blank">
<a
ng-if="item.Ports.length > 0"
ng-repeat="p in item.Ports"
class="image-tag"
ng-href="http://{{ $ctrl.state.publicURL || p.host }}:{{ p.public }}"
target="_blank"
>
<i class="fa fa-external-link-alt" aria-hidden="true"></i> {{ p.public }}:{{ p.private }}
</a>
<span ng-if="item.Ports.length == 0" >-</span>
<span ng-if="item.Ports.length == 0">-</span>
</td>
<td ng-if="$ctrl.showOwnershipColumn" ng-show="$ctrl.columnVisibility.columns.ownership.display">
<span>
@ -286,9 +344,7 @@
</table>
</div>
<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="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
<div class="paginationControls">
<form class="form-inline">
<span class="limitSelector">

4
app/docker/components/datatables/containers-datatable/containersDatatable.js
View file

@ -12,6 +12,6 @@ angular.module('portainer.docker').component('containersDatatable', {
showHostColumn: '<',
showAddAction: '<',
offlineMode: '<',
refreshCallback: '<'
}
refreshCallback: '<',
},
});

367
app/docker/components/datatables/containers-datatable/containersDatatableController.js
View file

@ -1,207 +1,210 @@
import _ from 'lodash-es';
angular.module('portainer.docker')
.controller('ContainersDatatableController', ['$scope', '$controller', 'DatatableService', 'EndpointProvider',
function ($scope, $controller, DatatableService, EndpointProvider) {
angular.module('portainer.docker').controller('ContainersDatatableController', [
'$scope',
'$controller',
'DatatableService',
'EndpointProvider',
function ($scope, $controller, DatatableService, EndpointProvider) {
angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
angular.extend(this, $controller('GenericDatatableController', {$scope: $scope}));
var ctrl = this;
var ctrl = this;
this.state = Object.assign(this.state, {
noStoppedItemsSelected: true,
noRunningItemsSelected: true,
noPausedItemsSelected: true,
publicURL: EndpointProvider.endpointPublicURL(),
});
this.state = Object.assign(this.state, {
noStoppedItemsSelected: true,
noRunningItemsSelected: true,
noPausedItemsSelected: true,
publicURL: EndpointProvider.endpointPublicURL()
});
this.settings = Object.assign(this.settings, {
truncateContainerName: true,
containerNameTruncateSize: 32,
showQuickActionStats: true,
showQuickActionLogs: true,
showQuickActionExec: true,
showQuickActionInspect: true,
showQuickActionAttach: false,
});
this.settings = Object.assign(this.settings, {
truncateContainerName: true,
containerNameTruncateSize: 32,
showQuickActionStats: true,
showQuickActionLogs: true,
showQuickActionExec: true,
showQuickActionInspect: true,
showQuickActionAttach: false
});
this.filters = {
state: {
open: false,
enabled: false,
values: []
}
};
this.columnVisibility = {
state: {
open: false
},
columns: {
this.filters = {
state: {
label: 'State',
display: true
open: false,
enabled: false,
values: [],
},
actions: {
label: 'Quick Actions',
display: true
};
this.columnVisibility = {
state: {
open: false,
},
stack: {
label: 'Stack',
display: true
columns: {
state: {
label: 'State',
display: true,
},
actions: {
label: 'Quick Actions',
display: true,
},
stack: {
label: 'Stack',
display: true,
},
image: {
label: 'Image',
display: true,
},
created: {
label: 'Created',
display: true,
},
ip: {
label: 'IP Address',
display: true,
},
host: {
label: 'Host',
display: true,
},
ports: {
label: 'Published Ports',
display: true,
},
ownership: {
label: 'Ownership',
display: true,
},
},
image: {
label: 'Image',
display: true
},
created: {
label: 'Created',
display: true
},
ip: {
label: 'IP Address',
display: true
},
host: {
label: 'Host',
display: true
},
ports: {
label: 'Published Ports',
display: true
},
ownership: {
label: 'Ownership',
display: true
};
this.onColumnVisibilityChange = function () {
DatatableService.setColumnVisibilitySettings(this.tableKey, this.columnVisibility);
};
this.onSelectionChanged = function () {
this.updateSelectionState();
};
this.updateSelectionState = function () {
this.state.noStoppedItemsSelected = true;
this.state.noRunningItemsSelected = true;
this.state.noPausedItemsSelected = true;
for (var i = 0; i < this.dataset.length; i++) {
var item = this.dataset[i];
if (item.Checked) {
this.updateSelectionStateBasedOnItemStatus(item);
}
}
}
};
};
this.onColumnVisibilityChange = function() {
DatatableService.setColumnVisibilitySettings(this.tableKey, this.columnVisibility);
};
this.onSelectionChanged = function() {
this.updateSelectionState();
}
this.updateSelectionState = function() {
this.state.noStoppedItemsSelected = true;
this.state.noRunningItemsSelected = true;
this.state.noPausedItemsSelected = true;
for (var i = 0; i < this.dataset.length; i++) {
var item = this.dataset[i];
if (item.Checked) {
this.updateSelectionStateBasedOnItemStatus(item);
this.updateSelectionStateBasedOnItemStatus = function (item) {
if (item.Status === 'paused') {
this.state.noPausedItemsSelected = false;
} else if (['stopped', 'created'].indexOf(item.Status) !== -1) {
this.state.noStoppedItemsSelected = false;
} else if (['running', 'healthy', 'unhealthy', 'starting'].indexOf(item.Status) !== -1) {
this.state.noRunningItemsSelected = false;
}
}
};
};
this.updateSelectionStateBasedOnItemStatus = function(item) {
if (item.Status === 'paused') {
this.state.noPausedItemsSelected = false;
} else if (['stopped', 'created'].indexOf(item.Status) !== -1) {
this.state.noStoppedItemsSelected = false;
} else if (['running', 'healthy', 'unhealthy', 'starting'].indexOf(item.Status) !== -1) {
this.state.noRunningItemsSelected = false;
}
};
this.applyFilters = function(value) {
var container = value;
var filters = ctrl.filters;
for (var i = 0; i < filters.state.values.length; i++) {
var filter = filters.state.values[i];
if (container.Status === filter.label && filter.display) {
return true;
this.applyFilters = function (value) {
var container = value;
var filters = ctrl.filters;
for (var i = 0; i < filters.state.values.length; i++) {
var filter = filters.state.values[i];
if (container.Status === filter.label && filter.display) {
return true;
}
}
}
return false;
};
return false;
};
this.onStateFilterChange = function() {
var filters = this.filters.state.values;
var filtered = false;
for (var i = 0; i < filters.length; i++) {
var filter = filters[i];
if (!filter.display) {
filtered = true;
this.onStateFilterChange = function () {
var filters = this.filters.state.values;
var filtered = false;
for (var i = 0; i < filters.length; i++) {
var filter = filters[i];
if (!filter.display) {
filtered = true;
}
}
}
this.filters.state.enabled = filtered;
};
this.filters.state.enabled = filtered;
};
this.onSettingsContainerNameTruncateChange = function() {
if (this.settings.truncateContainerName) {
this.settings.containerNameTruncateSize = 32;
} else {
this.settings.containerNameTruncateSize = 256;
}
DatatableService.setDataTableSettings(this.tableKey, this.settings);
};
this.onSettingsQuickActionChange = function() {
DatatableService.setDataTableSettings(this.tableKey, this.settings);
};
this.prepareTableFromDataset = function() {
var availableStateFilters = [];
for (var i = 0; i < this.dataset.length; i++) {
var item = this.dataset[i];
availableStateFilters.push({ label: item.Status, display: true });
}
this.filters.state.values = _.uniqBy(availableStateFilters, 'label');
};
this.updateStoredFilters = function(storedFilters) {
var datasetFilters = this.filters.state.values;
for (var i = 0; i < datasetFilters.length; i++) {
var filter = datasetFilters[i];
var existingFilter = _.find(storedFilters, ['label', filter.label]);
if (existingFilter && !existingFilter.display) {
filter.display = existingFilter.display;
this.filters.state.enabled = true;
this.onSettingsContainerNameTruncateChange = function () {
if (this.settings.truncateContainerName) {
this.settings.containerNameTruncateSize = 32;
} else {
this.settings.containerNameTruncateSize = 256;
}
}
};
DatatableService.setDataTableSettings(this.tableKey, this.settings);
};
this.$onInit = function() {
this.setDefaults();
this.prepareTableFromDataset();
this.onSettingsQuickActionChange = function () {
DatatableService.setDataTableSettings(this.tableKey, this.settings);
};
this.state.orderBy = this.orderBy;
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
if (storedOrder !== null) {
this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy;
}
this.prepareTableFromDataset = function () {
var availableStateFilters = [];
for (var i = 0; i < this.dataset.length; i++) {
var item = this.dataset[i];
availableStateFilters.push({ label: item.Status, display: true });
}
this.filters.state.values = _.uniqBy(availableStateFilters, 'label');
};
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
this.onTextFilterChange();
}
this.updateStoredFilters = function (storedFilters) {
var datasetFilters = this.filters.state.values;
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
if (storedFilters !== null) {
this.filters = storedFilters;
this.filters.state.open = false;
this.updateStoredFilters(storedFilters.state.values);
}
for (var i = 0; i < datasetFilters.length; i++) {
var filter = datasetFilters[i];
var existingFilter = _.find(storedFilters, ['label', filter.label]);
if (existingFilter && !existingFilter.display) {
filter.display = existingFilter.display;
this.filters.state.enabled = true;
}
}
};
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
if (storedSettings !== null) {
this.settings = storedSettings;
this.settings.open = false;
}
this.onSettingsRepeaterChange();
this.$onInit = function () {
this.setDefaults();
this.prepareTableFromDataset();
var storedColumnVisibility = DatatableService.getColumnVisibilitySettings(this.tableKey);
if (storedColumnVisibility !== null) {
this.columnVisibility = storedColumnVisibility;
this.columnVisibility.state.open = false;
}
};
}]);
this.state.orderBy = this.orderBy;
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
if (storedOrder !== null) {
this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy;
}
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
this.onTextFilterChange();
}
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
if (storedFilters !== null) {
this.filters = storedFilters;
this.filters.state.open = false;
this.updateStoredFilters(storedFilters.state.values);
}
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
if (storedSettings !== null) {
this.settings = storedSettings;
this.settings.open = false;
}
this.onSettingsRepeaterChange();
var storedColumnVisibility = DatatableService.getColumnVisibilitySettings(this.tableKey);
if (storedColumnVisibility !== null) {
this.columnVisibility = storedColumnVisibility;
this.columnVisibility.state.open = false;
}
};
},
]);

19
app/docker/components/datatables/events-datatable/eventsDatatable.html
View file

@ -2,13 +2,19 @@
<rd-widget>
<rd-widget-body classes="no-padding">
<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 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 }">
<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">
@ -38,7 +44,10 @@
</tr>
</thead>
<tbody>
<tr dir-paginate="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}">
<tr
dir-paginate="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 }"
>
<td>{{ item.Time | getisodatefromtimestamp }}</td>
<td>{{ item.Type }}</td>
<td>{{ item.Details }}</td>

4
app/docker/components/datatables/events-datatable/eventsDatatable.js
View file

@ -7,6 +7,6 @@ angular.module('portainer.docker').component('eventsDatatable', {
dataset: '<',
tableKey: '@',
orderBy: '@',
reverseOrder: '<'
}
reverseOrder: '<',
},
});

38
app/docker/components/datatables/host-jobs-datatable/jobsDatatable.html
View file

@ -16,7 +16,15 @@
</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 }">
<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">
@ -36,10 +44,8 @@
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"></i>
</a>
<div>
<span uib-dropdown-toggle class="table-filter" ng-if="!$ctrl.filters.state.enabled"> Filter
<i class="fa fa-filter" aria-hidden="true"></i></span>
<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" ng-if="!$ctrl.filters.state.enabled"> Filter <i class="fa fa-filter" aria-hidden="true"></i></span>
<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>
</div>
<div class="dropdown-menu" uib-dropdown-menu>
<div class="tableMenu">
@ -68,19 +74,25 @@
</tr>
</thead>
<tbody>
<tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))">
<tr
dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
>
<td>
<a ui-sref="docker.containers.container.logs({ id: item.Id, nodeName: item.NodeName })" title="{{ item.Id }}">
{{ item | containername }}</a>
<a ui-sref="docker.containers.container.logs({ id: item.Id, nodeName: item.NodeName })" title="{{ item.Id }}"> {{ item | containername }}</a>
</td>
<td>
<span ng-if="['starting','healthy','unhealthy'].indexOf(item.Status) !== -1" class="label label-{{ item.Status|containerstatusbadge }} interactive"
uib-tooltip="This container has a health check">{{ item.Status }}</span>
<span ng-if="['starting','healthy','unhealthy'].indexOf(item.Status) === -1" class="label label-{{ item.Status|containerstatusbadge }}">
{{ item.Status }}</span>
<span
ng-if="['starting', 'healthy', 'unhealthy'].indexOf(item.Status) !== -1"
class="label label-{{ item.Status | containerstatusbadge }} interactive"
uib-tooltip="This container has a health check"
>{{ item.Status }}</span
>
<span ng-if="['starting', 'healthy', 'unhealthy'].indexOf(item.Status) === -1" class="label label-{{ item.Status | containerstatusbadge }}">
{{ item.Status }}</span
>
</td>
<td>
{{item.Created | getisodatefromtimestamp}}
{{ item.Created | getisodatefromtimestamp }}
</td>
</tr>
<tr ng-if="!$ctrl.dataset">

6
app/docker/components/datatables/host-jobs-datatable/jobsDatatable.js
View file

@ -7,6 +7,6 @@ angular.module('portainer.docker').component('jobsDatatable', {
dataset: '<',
tableKey: '@',
orderBy: '@',
reverseOrder: '<'
}
});
reverseOrder: '<',
},
});

257
app/docker/components/datatables/host-jobs-datatable/jobsDatatableController.js
View file

@ -1,141 +1,150 @@
import _ from 'lodash-es';
angular.module('portainer.docker')
.controller('JobsDatatableController', ['$scope', '$controller', '$q', '$state', 'PaginationService', 'DatatableService', 'ContainerService', 'ModalService', 'Notifications',
function ($scope, $controller, $q, $state, PaginationService, DatatableService, ContainerService, ModalService, Notifications) {
angular.module('portainer.docker').controller('JobsDatatableController', [
'$scope',
'$controller',
'$q',
'$state',
'PaginationService',
'DatatableService',
'ContainerService',
'ModalService',
'Notifications',
function ($scope, $controller, $q, $state, PaginationService, DatatableService, ContainerService, ModalService, Notifications) {
angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
angular.extend(this, $controller('GenericDatatableController', {$scope: $scope}));
var ctrl = this;
var ctrl = this;
this.filters = {
state: {
open: false,
enabled: false,
values: [],
},
};
this.filters = {
state: {
open: false,
enabled: false,
values: []
}
};
this.applyFilters = function (value) {
var container = value;
var filters = ctrl.filters;
for (var i = 0; i < filters.state.values.length; i++) {
var filter = filters.state.values[i];
if (container.Status === filter.label && filter.display) {
return true;
}
}
return false;
};
this.onStateFilterChange = function () {
var filters = this.filters.state.values;
var filtered = false;
for (var i = 0; i < filters.length; i++) {
var filter = filters[i];
if (!filter.display) {
filtered = true;
}
}
this.filters.state.enabled = filtered;
DatatableService.setDataTableFilters(this.tableKey, this.filters);
};
this.prepareTableFromDataset = function () {
var availableStateFilters = [];
for (var i = 0; i < this.dataset.length; i++) {
var item = this.dataset[i];
availableStateFilters.push({
label: item.Status,
display: true
});
}
this.filters.state.values = _.uniqBy(availableStateFilters, 'label');
};
this.updateStoredFilters = function (storedFilters) {
var datasetFilters = this.filters.state.values;
for (var i = 0; i < datasetFilters.length; i++) {
var filter = datasetFilters[i];
var existingFilter = _.find(storedFilters, ['label', filter.label]);
if (existingFilter && !existingFilter.display) {
filter.display = existingFilter.display;
this.filters.state.enabled = true;
}
}
};
function confirmPurgeJobs() {
return showConfirmationModal();
function showConfirmationModal() {
var deferred = $q.defer();
ModalService.confirm({
title: 'Are you sure ?',
message: 'Clearing job history will remove all stopped jobs containers.',
buttons: {
confirm: {
label: 'Purge',
className: 'btn-danger'
}
},
callback: function onConfirm(confirmed) {
deferred.resolve(confirmed);
}
});
return deferred.promise;
this.applyFilters = function (value) {
var container = value;
var filters = ctrl.filters;
for (var i = 0; i < filters.state.values.length; i++) {
var filter = filters.state.values[i];
if (container.Status === filter.label && filter.display) {
return true;
}
}
return false;
};
this.purgeAction = function () {
confirmPurgeJobs().then(function success(confirmed) {
if (!confirmed) {
return $q.when();
}
ContainerService.prune({ label: ['io.portainer.job.endpoint'] }).then(function success() {
this.onStateFilterChange = function () {
var filters = this.filters.state.values;
var filtered = false;
for (var i = 0; i < filters.length; i++) {
var filter = filters[i];
if (!filter.display) {
filtered = true;
}
}
this.filters.state.enabled = filtered;
DatatableService.setDataTableFilters(this.tableKey, this.filters);
};
this.prepareTableFromDataset = function () {
var availableStateFilters = [];
for (var i = 0; i < this.dataset.length; i++) {
var item = this.dataset[i];
availableStateFilters.push({
label: item.Status,
display: true,
});
}
this.filters.state.values = _.uniqBy(availableStateFilters, 'label');
};
this.updateStoredFilters = function (storedFilters) {
var datasetFilters = this.filters.state.values;
for (var i = 0; i < datasetFilters.length; i++) {
var filter = datasetFilters[i];
var existingFilter = _.find(storedFilters, ['label', filter.label]);
if (existingFilter && !existingFilter.display) {
filter.display = existingFilter.display;
this.filters.state.enabled = true;
}
}
};
function confirmPurgeJobs() {
return showConfirmationModal();
function showConfirmationModal() {
var deferred = $q.defer();
ModalService.confirm({
title: 'Are you sure ?',
message: 'Clearing job history will remove all stopped jobs containers.',
buttons: {
confirm: {
label: 'Purge',
className: 'btn-danger',
},
},
callback: function onConfirm(confirmed) {
deferred.resolve(confirmed);
},
});
return deferred.promise;
}
}
this.purgeAction = function () {
confirmPurgeJobs().then(function success(confirmed) {
if (!confirmed) {
return $q.when();
}
ContainerService.prune({ label: ['io.portainer.job.endpoint'] })
.then(function success() {
Notifications.success('Success', 'Job history cleared');
$state.reload();
}).catch(function error(err) {
})
.catch(function error(err) {
Notifications.error('Failure', err.message, 'Unable to clear job history');
});
});
};
});
};
this.$onInit = function() {
this.setDefaults();
this.prepareTableFromDataset();
this.$onInit = function () {
this.setDefaults();
this.prepareTableFromDataset();
this.state.orderBy = this.orderBy;
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
if (storedOrder !== null) {
this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy;
}
this.state.orderBy = this.orderBy;
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
if (storedOrder !== null) {
this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy;
}
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
this.onTextFilterChange();
}
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
this.onTextFilterChange();
}
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
if (storedFilters !== null) {
this.filters = storedFilters;
this.updateStoredFilters(storedFilters.state.values);
}
if (this.filters && this.filters.state) {
this.filters.state.open = false;
}
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
if (storedFilters !== null) {
this.filters = storedFilters;
this.updateStoredFilters(storedFilters.state.values);
}
if (this.filters && this.filters.state) {
this.filters.state.open = false;
}
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
if (storedSettings !== null) {
this.settings = storedSettings;
this.settings.open = false;
}
this.onSettingsRepeaterChange();
};
}
]);
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
if (storedSettings !== null) {
this.settings = storedSettings;
this.settings.open = false;
}
this.onSettingsRepeaterChange();
};
},
]);

67
app/docker/components/datatables/images-datatable/imagesDatatable.html
View file

@ -2,9 +2,7 @@
<rd-widget>
<rd-widget-body classes="no-padding">
<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 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>
@ -16,7 +14,7 @@
<div class="menuContent">
<div>
<div class="md-checkbox">
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()"/>
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
<label for="setting_auto_refresh">Auto refresh</label>
</div>
<div ng-if="$ctrl.settings.repeater.autoRefresh">
@ -46,11 +44,17 @@
</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)">
<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">
<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>
@ -63,19 +67,33 @@
</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
<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
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 }">
<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">
@ -102,11 +120,11 @@
</div>
<div class="menuContent">
<div class="md-checkbox">
<input id="filter_usage_usedImages" type="checkbox" ng-model="$ctrl.filters.state.showUsedImages" ng-change="$ctrl.onUsageFilterChange()"/>
<input id="filter_usage_usedImages" type="checkbox" ng-model="$ctrl.filters.state.showUsedImages" ng-change="$ctrl.onUsageFilterChange()" />
<label for="filter_usage_usedImages">Used images</label>
</div>
<div class="md-checkbox">
<input id="filter_usage_unusedImages" type="checkbox" ng-model="$ctrl.filters.state.showUnusedImages" ng-change="$ctrl.onUsageFilterChange()"/>
<input id="filter_usage_unusedImages" type="checkbox" ng-model="$ctrl.filters.state.showUnusedImages" ng-change="$ctrl.onUsageFilterChange()" />
<label for="filter_usage_unusedImages">Unused images</label>
</div>
</div>
@ -147,14 +165,19 @@
</tr>
</thead>
<tbody>
<tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))" ng-class="{active: item.Checked}">
<tr
dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
ng-class="{ active: item.Checked }"
>
<td>
<span class="md-checkbox" ng-if="!$ctrl.offlineMode">
<input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)"/>
<input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
<label for="select_{{ $index }}"></label>
</span>
<a ng-if="!$ctrl.offlineMode" ui-sref="docker.images.image({ id: item.Id, nodeName: item.NodeName })" class="monospaced" title="{{ item.Id }}">{{ item.Id | truncate:40 }}</a>
<span ng-if="$ctrl.offlineMode">{{ item.Id | truncate:40 }}</span>
<a ng-if="!$ctrl.offlineMode" ui-sref="docker.images.image({ id: item.Id, nodeName: item.NodeName })" class="monospaced" title="{{ item.Id }}">{{
item.Id | truncate: 40
}}</a>
<span ng-if="$ctrl.offlineMode">{{ item.Id | truncate: 40 }}</span>
<span style="margin-left: 10px;" class="label label-warning image-tag" ng-if="::item.ContainerCount === 0">Unused</span>
</td>
<td>
@ -174,9 +197,7 @@
</table>
</div>
<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="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
<div class="paginationControls">
<form class="form-inline">
<span class="limitSelector">

4
app/docker/components/datatables/images-datatable/imagesDatatable.js
View file

@ -14,6 +14,6 @@ angular.module('portainer.docker').component('imagesDatatable', {
forceRemoveAction: '<',
exportInProgress: '<',
offlineMode: '<',
refreshCallback: '<'
}
refreshCallback: '<',
},
});

123
app/docker/components/datatables/images-datatable/imagesDatatableController.js
View file

@ -1,71 +1,72 @@
angular.module('portainer.docker')
.controller('ImagesDatatableController', ['$scope', '$controller', 'DatatableService',
function ($scope, $controller, DatatableService) {
angular.module('portainer.docker').controller('ImagesDatatableController', [
'$scope',
'$controller',
'DatatableService',
function ($scope, $controller, DatatableService) {
angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
angular.extend(this, $controller('GenericDatatableController', {$scope: $scope}));
var ctrl = this;
var ctrl = this;
this.filters = {
state: {
open: false,
enabled: false,
showUsedImages: true,
showUnusedImages: true,
},
};
this.filters = {
state: {
open: false,
enabled: false,
showUsedImages: true,
showUnusedImages: true
}
};
this.applyFilters = function (value) {
var image = value;
var filters = ctrl.filters;
if ((image.ContainerCount === 0 && filters.state.showUnusedImages) || (image.ContainerCount !== 0 && filters.state.showUsedImages)) {
return true;
}
return false;
};
this.applyFilters = function(value) {
var image = value;
var filters = ctrl.filters;
if ((image.ContainerCount === 0 && filters.state.showUnusedImages)
|| (image.ContainerCount !== 0 && filters.state.showUsedImages)) {
return true;
}
return false;
};
this.onstateFilterChange = function () {
var filters = this.filters.state;
var filtered = false;
if (!filters.showUsedImages || !filters.showUnusedImages) {
filtered = true;
}
this.filters.state.enabled = filtered;
DatatableService.setDataTableFilters(this.tableKey, this.filters);
};
this.onstateFilterChange = function() {
var filters = this.filters.state;
var filtered = false;
if (!filters.showUsedImages || !filters.showUnusedImages) {
filtered = true;
}
this.filters.state.enabled = filtered;
DatatableService.setDataTableFilters(this.tableKey, this.filters);
};
this.$onInit = function () {
this.setDefaults();
this.prepareTableFromDataset();
this.$onInit = function() {
this.setDefaults();
this.prepareTableFromDataset();
this.state.orderBy = this.orderBy;
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
if (storedOrder !== null) {
this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy;
}
this.state.orderBy = this.orderBy;
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
if (storedOrder !== null) {
this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy;
}
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
this.onTextFilterChange();
}
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
this.onTextFilterChange();
}
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
if (storedFilters !== null) {
this.filters = storedFilters;
}
if (this.filters && this.filters.state) {
this.filters.state.open = false;
}
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
if (storedFilters !== null) {
this.filters = storedFilters;
}
if (this.filters && this.filters.state) {
this.filters.state.open = false;
}
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
if (storedSettings !== null) {
this.settings = storedSettings;
this.settings.open = false;
}
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
if (storedSettings !== null) {
this.settings = storedSettings;
this.settings.open = false;
}
this.onSettingsRepeaterChange();
};
}]);
this.onSettingsRepeaterChange();
};
},
]);

22
app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html
View file

@ -2,13 +2,19 @@
<rd-widget>
<rd-widget-body classes="no-padding">
<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 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 }">
<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">
@ -56,8 +62,10 @@
</tr>
</thead>
<tbody>
<tr dir-paginate="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}">
<tr
dir-paginate="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 }"
>
<td>
<span class="md-checkbox">
<input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
@ -103,4 +111,4 @@
</div>
</rd-widget-body>
</rd-widget>
</div>
</div>

4
app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.js
View file

@ -10,6 +10,6 @@ angular.module('portainer.docker').component('macvlanNodesDatatable', {
reverseOrder: '<',
showIpAddressColumn: '<',
accessToNodeDetails: '<',
state: '='
}
state: '=',
},
});

18
app/docker/components/datatables/networks-datatable/network-row-content/networkRowContent.html
View file

@ -1,14 +1,22 @@
<td ng-if="allowCheckbox">
<span class="md-checkbox" ng-if="!parentCtrl.offlineMode" authorization="DockerNetworkDelete, DockerNetworkCreate">
<input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="parentCtrl.selectItem(item, $event); $event.stopPropagation()" ng-disabled="parentCtrl.disableRemove(item)"/>
<input
id="select_{{ $index }}"
type="checkbox"
ng-model="item.Checked"
ng-click="parentCtrl.selectItem(item, $event); $event.stopPropagation()"
ng-disabled="parentCtrl.disableRemove(item)"
/>
<label for="select_{{ $index }}"></label>
</span>
<a ng-if="parentCtrl.itemCanExpand(item)"><i ng-class="{ 'fas fa-angle-down': item.Expanded, 'fas fa-angle-right': !item.Expanded }" class="space-right" aria-hidden="true"></i></a>
<a ng-if="parentCtrl.itemCanExpand(item)"
><i ng-class="{ 'fas fa-angle-down': item.Expanded, 'fas fa-angle-right': !item.Expanded }" class="space-right" aria-hidden="true"></i
></a>
</td>
<td ng-if="!allowCheckbox"></td>
<td>
<a ng-if="!parentCtrl.offlineMode" ui-sref="docker.networks.network({ id: item.Id, nodeName: item.NodeName })" title="{{ item.Name }}">{{ item.Name | truncate:40 }}</a>
<span ng-if="parentCtrl.offlineMode">{{ item.Name | truncate:40 }}</span>
<a ng-if="!parentCtrl.offlineMode" ui-sref="docker.networks.network({ id: item.Id, nodeName: item.NodeName })" title="{{ item.Name }}">{{ item.Name | truncate: 40 }}</a>
<span ng-if="parentCtrl.offlineMode">{{ item.Name | truncate: 40 }}</span>
<span style="margin-left: 10px;" class="label label-info image-tag space-left" ng-if="item.ResourceControl.System">System</span>
</td>
<td>{{ item.StackName ? item.StackName : '-' }}</td>
@ -25,4 +33,4 @@
<i ng-class="item.ResourceControl.Ownership | ownershipicon" aria-hidden="true"></i>
{{ item.ResourceControl.Ownership ? item.ResourceControl.Ownership : item.ResourceControl.Ownership = RCO.ADMINISTRATORS }}
</span>
</td>
</td>

37
app/docker/components/datatables/networks-datatable/network-row-content/networkRowContent.js
View file

@ -1,20 +1,21 @@
import { ResourceControlOwnership as RCO } from 'Portainer/models/resourceControl/resourceControlOwnership';
angular.module('portainer.docker')
.directive('networkRowContent', [function networkRowContent() {
var directive = {
templateUrl: './networkRowContent.html',
restrict: 'A',
transclude: true,
scope: {
item: '<',
parentCtrl: '<',
allowCheckbox: '<',
allowExpand: '<'
},
controller: ($scope) => {
$scope.RCO = RCO;
}
};
return directive;
}]);
angular.module('portainer.docker').directive('networkRowContent', [
function networkRowContent() {
var directive = {
templateUrl: './networkRowContent.html',
restrict: 'A',
transclude: true,
scope: {
item: '<',
parentCtrl: '<',
allowCheckbox: '<',
allowExpand: '<',
},
controller: ($scope) => {
$scope.RCO = RCO;
},
};
return directive;
},
]);

46
app/docker/components/datatables/networks-datatable/networksDatatable.html
View file

@ -2,9 +2,7 @@
<rd-widget>
<rd-widget-body classes="no-padding">
<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 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>
@ -16,7 +14,7 @@
<div class="menuContent">
<div>
<div class="md-checkbox">
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()"/>
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
<label for="setting_auto_refresh">Auto refresh</label>
</div>
<div ng-if="$ctrl.settings.repeater.autoRefresh">
@ -45,8 +43,13 @@
</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)">
<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">
@ -55,13 +58,21 @@
</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 }">
<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>
<tr>
<th style="width:55px;">
<th style="width: 55px;">
<span class="md-checkbox" ng-if="!$ctrl.offlineMode" authorization="DockerNetworkDelete, DockerNetworkCreate">
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
<label for="select_all"></label>
@ -150,12 +161,17 @@
</tr>
</thead>
<tbody>
<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">
</tr>
<tr dir-paginate-end ng-show="item.Expanded" ng-repeat="it in item.Subs" style="background: #d5e8f3;"
network-row-content item="it" parent-ctrl="$ctrl">
<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"
>
</tr>
<tr dir-paginate-end ng-show="item.Expanded" ng-repeat="it in item.Subs" style="background: #d5e8f3;" network-row-content item="it" parent-ctrl="$ctrl"> </tr>
<tr ng-if="!$ctrl.dataset">
<td colspan="9" class="text-center text-muted">Loading...</td>
</tr>
@ -166,9 +182,7 @@
</table>
</div>
<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="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
<div class="paginationControls">
<form class="form-inline">
<span class="limitSelector">

4
app/docker/components/datatables/networks-datatable/networksDatatable.js
View file

@ -12,6 +12,6 @@ angular.module('portainer.docker').component('networksDatatable', {
showHostColumn: '<',
removeAction: '<',
offlineMode: '<',
refreshCallback: '<'
}
refreshCallback: '<',
},
});

136
app/docker/components/datatables/networks-datatable/networksDatatableController.js
View file

@ -1,78 +1,80 @@
import _ from 'lodash-es';
angular.module('portainer.docker')
.controller('NetworksDatatableController', ['$scope', '$controller', 'NetworkHelper', 'DatatableService',
function ($scope, $controller, NetworkHelper, DatatableService) {
angular.module('portainer.docker').controller('NetworksDatatableController', [
'$scope',
'$controller',
'NetworkHelper',
'DatatableService',
function ($scope, $controller, NetworkHelper, DatatableService) {
angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
angular.extend(this, $controller('GenericDatatableController', {$scope: $scope}));
this.disableRemove = function (item) {
return NetworkHelper.isSystemNetwork(item);
};
this.disableRemove = function(item) {
return NetworkHelper.isSystemNetwork(item);
};
this.state = Object.assign(this.state, {
expandedItems: [],
});
this.state = Object.assign(this.state, {
expandedItems: []
})
/**
* Do not allow system networks to be selected
*/
this.allowSelection = function (item) {
return !this.disableRemove(item);
};
/**
* Do not allow system networks to be selected
*/
this.allowSelection = function(item) {
return !this.disableRemove(item);
this.$onInit = function () {
this.setDefaults();
this.prepareTableFromDataset();
this.state.orderBy = this.orderBy;
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
if (storedOrder !== null) {
this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy;
}
this.$onInit = function() {
this.setDefaults();
this.prepareTableFromDataset();
this.state.orderBy = this.orderBy;
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
if (storedOrder !== null) {
this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy;
}
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
this.onTextFilterChange();
}
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
if (storedFilters !== null) {
this.filters = storedFilters;
}
if (this.filters && this.filters.state) {
this.filters.state.open = false;
}
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
if (storedSettings !== null) {
this.settings = storedSettings;
this.settings.open = false;
}
this.onSettingsRepeaterChange();
};
this.expandItem = function(item, expanded) {
item.Expanded = expanded;
};
this.itemCanExpand = function(item) {
return item.Subs.length > 0;
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
this.onTextFilterChange();
}
this.hasExpandableItems = function() {
return _.filter(this.state.filteredDataSet, (item) => this.itemCanExpand(item)).length;
};
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
if (storedFilters !== null) {
this.filters = storedFilters;
}
if (this.filters && this.filters.state) {
this.filters.state.open = false;
}
this.expandAll = function() {
this.state.expandAll = !this.state.expandAll;
_.forEach(this.state.filteredDataSet, (item) => {
if (this.itemCanExpand(item)) {
this.expandItem(item, this.state.expandAll);
}
});
};
}
]);
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
if (storedSettings !== null) {
this.settings = storedSettings;
this.settings.open = false;
}
this.onSettingsRepeaterChange();
};
this.expandItem = function (item, expanded) {
item.Expanded = expanded;
};
this.itemCanExpand = function (item) {
return item.Subs.length > 0;
};
this.hasExpandableItems = function () {
return _.filter(this.state.filteredDataSet, (item) => this.itemCanExpand(item)).length;
};
this.expandAll = function () {
this.state.expandAll = !this.state.expandAll;
_.forEach(this.state.filteredDataSet, (item) => {
if (this.itemCanExpand(item)) {
this.expandItem(item, this.state.expandAll);
}
});
};
},
]);

27
app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html
View file

@ -2,13 +2,19 @@
<rd-widget>
<rd-widget-body classes="no-padding">
<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 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 }">
<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">
@ -52,9 +58,16 @@
</tr>
</thead>
<tbody>
<tr dir-paginate="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}">
<td><a ui-sref="docker.tasks.task({id: item.Id})" class="monospaced">{{ item.Id }}</a></td>
<td><span class="label label-{{ item.Status.State | taskstatusbadge }}">{{ item.Status.State }}</span></td>
<tr
dir-paginate="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 }"
>
<td
><a ui-sref="docker.tasks.task({id: item.Id})" class="monospaced">{{ item.Id }}</a></td
>
<td
><span class="label label-{{ item.Status.State | taskstatusbadge }}">{{ item.Status.State }}</span></td
>
<td>{{ item.Slot ? item.Slot : '-' }}</td>
<td>{{ item.Spec.ContainerSpec.Image | hideshasum }}</td>
<td>{{ item.Updated | getisodate }}</td>

4
app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.js
View file

@ -7,6 +7,6 @@ angular.module('portainer.docker').component('nodeTasksDatatable', {
dataset: '<',
tableKey: '@',
orderBy: '@',
reverseOrder: '<'
}
reverseOrder: '<',
},
});

29
app/docker/components/datatables/nodes-datatable/nodesDatatable.html
View file

@ -2,9 +2,7 @@
<rd-widget>
<rd-widget-body classes="no-padding">
<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 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>
@ -16,7 +14,7 @@
<div class="menuContent">
<div>
<div class="md-checkbox">
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()"/>
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
<label for="setting_auto_refresh">Auto refresh</label>
</div>
<div ng-if="$ctrl.settings.repeater.autoRefresh">
@ -46,7 +44,15 @@
</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 }">
<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">
@ -111,7 +117,10 @@
</tr>
</thead>
<tbody>
<tr dir-paginate="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}">
<tr
dir-paginate="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 }"
>
<td>
<a ui-sref="docker.nodes.node({id: item.Id})" ng-if="$ctrl.accessToNodeDetails">{{ item.Name || item.Hostname }}</a>
<span ng-if="!$ctrl.accessToNodeDetails">{{ item.Name || item.Hostname }}</span>
@ -121,8 +130,12 @@
<td>{{ item.Memory | humansize }}</td>
<td>{{ item.EngineVersion }}</td>
<td ng-if="$ctrl.showIpAddressColumn">{{ item.Addr }}</td>
<td><span class="label label-{{ item.Status | nodestatusbadge }}">{{ item.Status }}</span></td>
<td><span class="label label-{{ item.Availability | dockerNodeAvailabilityBadge }}">{{ item.Availability }}</span></td>
<td
><span class="label label-{{ item.Status | nodestatusbadge }}">{{ item.Status }}</span></td
>
<td
><span class="label label-{{ item.Availability | dockerNodeAvailabilityBadge }}">{{ item.Availability }}</span></td
>
</tr>
<tr ng-if="!$ctrl.dataset">
<td colspan="7" class="text-center text-muted">Loading...</td>

4
app/docker/components/datatables/nodes-datatable/nodesDatatable.js
View file

@ -10,6 +10,6 @@ angular.module('portainer.docker').component('nodesDatatable', {
reverseOrder: '<',
showIpAddressColumn: '<',
accessToNodeDetails: '<',
refreshCallback: '<'
}
refreshCallback: '<',
},
});

36
app/docker/components/datatables/secrets-datatable/secretsDatatable.html
View file

@ -2,9 +2,7 @@
<rd-widget>
<rd-widget-body classes="no-padding">
<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 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>
@ -16,7 +14,7 @@
<div class="menuContent">
<div>
<div class="md-checkbox">
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()"/>
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
<label for="setting_auto_refresh">Auto refresh</label>
</div>
<div ng-if="$ctrl.settings.repeater.autoRefresh">
@ -45,8 +43,13 @@
</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)">
<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">
@ -55,7 +58,15 @@
</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 }">
<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">
@ -89,10 +100,13 @@
</tr>
</thead>
<tbody>
<tr dir-paginate="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}">
<tr
dir-paginate="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 }"
>
<td>
<span class="md-checkbox" authorization="DockerSecretDelete, DockerSecretCreate">
<input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)"/>
<input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
<label for="select_{{ $index }}"></label>
</span>
<a ui-sref="docker.secrets.secret({id: item.Id})">{{ item.Name }}</a>
@ -115,9 +129,7 @@
</table>
</div>
<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="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
<div class="paginationControls">
<form class="form-inline">
<span class="limitSelector">

4
app/docker/components/datatables/secrets-datatable/secretsDatatable.js
View file

@ -10,6 +10,6 @@ angular.module('portainer.docker').component('secretsDatatable', {
reverseOrder: '<',
showOwnershipColumn: '<',
removeAction: '<',
refreshCallback: '<'
}
refreshCallback: '<',
},
});

30
app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html
View file

@ -1,6 +1,6 @@
<div style="background-color: #d5e8f3; padding: 2px">
<div style="background-color: #d5e8f3; padding: 2px;">
<table class="table table-condensed table-hover nowrap-cells">
<thead style="background-color: #e7f6ff">
<thead style="background-color: #e7f6ff;">
<tr>
<th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open" style="width: 10%;">
<a ng-click="$ctrl.changeOrderBy('Status.State')">
@ -19,7 +19,7 @@
</div>
<div class="menuContent">
<div class="md-checkbox" ng-repeat="filter in $ctrl.filters.state.values track by $index">
<input id="filter_state_{{ $ctrl.serviceId }}_{{ $index }}" type="checkbox" ng-model="filter.display" ng-change="$ctrl.onStateFilterChange()"/>
<input id="filter_state_{{ $ctrl.serviceId }}_{{ $index }}" type="checkbox" ng-model="filter.display" ng-change="$ctrl.onStateFilterChange()" />
<label for="filter_state_{{ $ctrl.serviceId }}_{{ $index }}">{{ filter.label }}</label>
</div>
</div>
@ -55,17 +55,33 @@
</tr>
</thead>
<tbody style="background-color: #f1f9fd;">
<tr ng-repeat="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder))">
<tr
ng-repeat="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder))"
>
<td class="text-center">
<span class="label label-{{ item.Status.State | taskstatusbadge }} space-right">{{ item.Status.State }}</span>
</td>
<td>
<a ng-if="!$ctrl.agentProxy || !item.Container" ui-sref="docker.tasks.task({id: item.Id})" class="monospaced">{{ item.Id }}</a>
<a ng-if="$ctrl.agentProxy && item.Container" ui-sref="docker.containers.container({ id: item.Container.Id, nodeName: item.Container.NodeName })" class="monospaced">{{ item.Id }}</a>
<a ng-if="$ctrl.agentProxy && item.Container" ui-sref="docker.containers.container({ id: item.Container.Id, nodeName: item.Container.NodeName })" class="monospaced">{{
item.Id
}}</a>
</td>
<td>
<container-quick-actions ng-if="!$ctrl.agentProxy || !item.Container" container-id="item.ContainerId" task-id="item.Id" status="item.Status.State" state="$ctrl.state"></container-quick-actions>
<container-quick-actions ng-if="$ctrl.agentProxy && item.Container" container-id="item.Container.Id" node-name="item.Container.NodeName" status="item.Status.State" state="$ctrl.state"></container-quick-actions>
<container-quick-actions
ng-if="!$ctrl.agentProxy || !item.Container"
container-id="item.ContainerId"
task-id="item.Id"
status="item.Status.State"
state="$ctrl.state"
></container-quick-actions>
<container-quick-actions
ng-if="$ctrl.agentProxy && item.Container"
container-id="item.Container.Id"
node-name="item.Container.NodeName"
status="item.Status.State"
state="$ctrl.state"
></container-quick-actions>
</td>
<td>{{ item.Slot ? item.Slot : '-' }}</td>
<td>{{ item.NodeId | tasknodename: $ctrl.nodes }}</td>

4
app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.js
View file

@ -10,6 +10,6 @@ angular.module('portainer.docker').component('serviceTasksDatatable', {
nodes: '<',
agentProxy: '<',
textFilter: '=',
showTaskLogsButton: '<'
}
showTaskLogsButton: '<',
},
});

155
app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatableController.js
View file

@ -1,93 +1,94 @@
import _ from 'lodash-es';
angular.module('portainer.docker')
.controller('ServiceTasksDatatableController', ['$scope', '$controller', 'DatatableService',
function ($scope, $controller, DatatableService) {
angular.module('portainer.docker').controller('ServiceTasksDatatableController', [
'$scope',
'$controller',
'DatatableService',
function ($scope, $controller, DatatableService) {
angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
angular.extend(this, $controller('GenericDatatableController', {$scope: $scope}));
var ctrl = this;
var ctrl = this;
this.state = Object.assign(this.state, {
showQuickActionStats: true,
showQuickActionLogs: true,
showQuickActionConsole: true,
showQuickActionInspect: true,
showQuickActionExec: true,
showQuickActionAttach: false,
});
this.state = Object.assign(this.state, {
showQuickActionStats: true,
showQuickActionLogs: true,
showQuickActionConsole: true,
showQuickActionInspect: true,
showQuickActionExec: true,
showQuickActionAttach: false
});
this.filters = {
state: {
open: false,
enabled: false,
values: [],
},
};
this.filters = {
state: {
open: false,
enabled: false,
values: []
this.applyFilters = function (item) {
var filters = ctrl.filters;
for (var i = 0; i < filters.state.values.length; i++) {
var filter = filters.state.values[i];
if (item.Status.State === filter.label && filter.display) {
return true;
}
};
}
return false;
};
this.applyFilters = function(item) {
var filters = ctrl.filters;
for (var i = 0; i < filters.state.values.length; i++) {
var filter = filters.state.values[i];
if (item.Status.State === filter.label && filter.display) {
return true;
}
this.onStateFilterChange = function () {
var filters = this.filters.state.values;
var filtered = false;
for (var i = 0; i < filters.length; i++) {
var filter = filters[i];
if (!filter.display) {
filtered = true;
}
return false;
};
}
this.filters.state.enabled = filtered;
};
this.onStateFilterChange = function() {
var filters = this.filters.state.values;
var filtered = false;
for (var i = 0; i < filters.length; i++) {
var filter = filters[i];
if (!filter.display) {
filtered = true;
}
}
this.filters.state.enabled = filtered;
};
this.prepareTableFromDataset = function () {
var availableStateFilters = [];
for (var i = 0; i < this.dataset.length; i++) {
var item = this.dataset[i];
availableStateFilters.push({ label: item.Status.State, display: true });
}
this.filters.state.values = _.uniqBy(availableStateFilters, 'label');
};
this.prepareTableFromDataset = function() {
var availableStateFilters = [];
for (var i = 0; i < this.dataset.length; i++) {
var item = this.dataset[i];
availableStateFilters.push({ label: item.Status.State, display: true });
}
this.filters.state.values = _.uniqBy(availableStateFilters, 'label');
};
this.$onInit = function () {
this.setDefaults();
this.prepareTableFromDataset();
this.$onInit = function() {
this.setDefaults();
this.prepareTableFromDataset();
this.state.orderBy = this.orderBy;
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
if (storedOrder !== null) {
this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy;
}
this.state.orderBy = this.orderBy;
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
if (storedOrder !== null) {
this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy;
}
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
this.onTextFilterChange();
}
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
this.onTextFilterChange();
}
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
if (storedFilters !== null) {
this.filters = storedFilters;
}
if (this.filters && this.filters.state) {
this.filters.state.open = false;
}
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
if (storedFilters !== null) {
this.filters = storedFilters;
}
if (this.filters && this.filters.state) {
this.filters.state.open = false;
}
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
if (storedSettings !== null) {
this.settings = storedSettings;
this.settings.open = false;
}
this.onSettingsRepeaterChange();
};
}
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
if (storedSettings !== null) {
this.settings = storedSettings;
this.settings.open = false;
}
this.onSettingsRepeaterChange();
};
},
]);

19
app/docker/components/datatables/services-datatable/actions/servicesDatatableActions.html
View file

@ -1,11 +1,22 @@
<div class="actionBar" authorization="DockerServiceUpdate, DockerServiceDelete, DockerServiceCreate">
<div class="btn-group" role="group" aria-label="...">
<button ng-if="$ctrl.showUpdateAction" type="button" class="btn btn-sm btn-primary" authorization="DockerServiceUpdate"
ng-disabled="$ctrl.selectedItemCount === 0" ng-click="$ctrl.updateAction($ctrl.selectedItems)">
<button
ng-if="$ctrl.showUpdateAction"
type="button"
class="btn btn-sm btn-primary"
authorization="DockerServiceUpdate"
ng-disabled="$ctrl.selectedItemCount === 0"
ng-click="$ctrl.updateAction($ctrl.selectedItems)"
>
<i class="fa fa-sync space-right" aria-hidden="true"></i>Update
</button>
<button type="button" class="btn btn-sm btn-danger" authorization="DockerServiceDelete"
ng-disabled="$ctrl.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.selectedItems)">
<button
type="button"
class="btn btn-sm btn-danger"
authorization="DockerServiceDelete"
ng-disabled="$ctrl.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.selectedItems)"
>
<i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
</button>
</div>

4
app/docker/components/datatables/services-datatable/actions/servicesDatatableActions.js
View file

@ -5,6 +5,6 @@ angular.module('portainer.docker').component('servicesDatatableActions', {
selectedItems: '=',
selectedItemCount: '=',
showUpdateAction: '<',
showAddAction: '<'
}
showAddAction: '<',
},
});

191
app/docker/components/datatables/services-datatable/actions/servicesDatatableActionsController.js
View file

@ -1,96 +1,107 @@
angular.module('portainer.docker')
.controller('ServicesDatatableActionsController', ['$q', '$state', 'ServiceService', 'ServiceHelper', 'Notifications', 'ModalService', 'ImageHelper','WebhookService','EndpointProvider',
function ($q, $state, ServiceService, ServiceHelper, Notifications, ModalService, ImageHelper, WebhookService, EndpointProvider) {
this.scaleAction = function scaleService(service) {
var config = ServiceHelper.serviceToConfig(service.Model);
config.Mode.Replicated.Replicas = service.Replicas;
ServiceService.update(service, config)
.then(function success() {
Notifications.success('Service successfully scaled', 'New replica count: ' + service.Replicas);
$state.reload();
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to scale service');
service.Scale = false;
service.Replicas = service.ReplicaCount;
});
};
this.removeAction = function(selectedItems) {
ModalService.confirmDeletion(
'Do you want to remove the selected service(s)? All the containers associated to the selected service(s) will be removed too.',
function onConfirm(confirmed) {
if(!confirmed) { return; }
removeServices(selectedItems);
}
);
};
this.updateAction = function(selectedItems) {
ModalService.confirmServiceForceUpdate(
'Do you want to force an update of the selected service(s)? All the tasks associated to the selected service(s) will be recreated.',
function (result) {
if(!result) { return; }
var pullImage = false;
if (result[0]) {
pullImage = true;
}
forceUpdateServices(selectedItems, pullImage);
}
);
};
function forceUpdateServices(services, pullImage) {
var actionCount = services.length;
angular.forEach(services, function (service) {
angular.module('portainer.docker').controller('ServicesDatatableActionsController', [
'$q',
'$state',
'ServiceService',
'ServiceHelper',
'Notifications',
'ModalService',
'ImageHelper',
'WebhookService',
'EndpointProvider',
function ($q, $state, ServiceService, ServiceHelper, Notifications, ModalService, ImageHelper, WebhookService, EndpointProvider) {
this.scaleAction = function scaleService(service) {
var config = ServiceHelper.serviceToConfig(service.Model);
if (pullImage) {
config.TaskTemplate.ContainerSpec.Image = ImageHelper.removeDigestFromRepository(config.TaskTemplate.ContainerSpec.Image);
}
// As explained in https://github.com/docker/swarmkit/issues/2364 ForceUpdate can accept a random
// value or an increment of the counter value to force an update.
config.TaskTemplate.ForceUpdate++;
config.Mode.Replicated.Replicas = service.Replicas;
ServiceService.update(service, config)
.then(function success() {
Notifications.success('Service successfully updated', service.Name);
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to force update service', service.Name);
})
.finally(function final() {
--actionCount;
if (actionCount === 0) {
.then(function success() {
Notifications.success('Service successfully scaled', 'New replica count: ' + service.Replicas);
$state.reload();
}
});
});
}
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to scale service');
service.Scale = false;
service.Replicas = service.ReplicaCount;
});
};
function removeServices(services) {
var actionCount = services.length;
angular.forEach(services, function (service) {
ServiceService.remove(service)
.then(function success() {
return WebhookService.webhooks(service.Id, EndpointProvider.endpointID());
})
.then(function success(data) {
return $q.when(data.length !== 0 && WebhookService.deleteWebhook(data[0].Id));
})
.then(function success() {
Notifications.success('Service successfully removed', service.Name);
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to remove service');
})
.finally(function final() {
--actionCount;
if (actionCount === 0) {
$state.reload();
this.removeAction = function (selectedItems) {
ModalService.confirmDeletion(
'Do you want to remove the selected service(s)? All the containers associated to the selected service(s) will be removed too.',
function onConfirm(confirmed) {
if (!confirmed) {
return;
}
removeServices(selectedItems);
}
);
};
this.updateAction = function (selectedItems) {
ModalService.confirmServiceForceUpdate(
'Do you want to force an update of the selected service(s)? All the tasks associated to the selected service(s) will be recreated.',
function (result) {
if (!result) {
return;
}
var pullImage = false;
if (result[0]) {
pullImage = true;
}
forceUpdateServices(selectedItems, pullImage);
}
);
};
function forceUpdateServices(services, pullImage) {
var actionCount = services.length;
angular.forEach(services, function (service) {
var config = ServiceHelper.serviceToConfig(service.Model);
if (pullImage) {
config.TaskTemplate.ContainerSpec.Image = ImageHelper.removeDigestFromRepository(config.TaskTemplate.ContainerSpec.Image);
}
// As explained in https://github.com/docker/swarmkit/issues/2364 ForceUpdate can accept a random
// value or an increment of the counter value to force an update.
config.TaskTemplate.ForceUpdate++;
ServiceService.update(service, config)
.then(function success() {
Notifications.success('Service successfully updated', service.Name);
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to force update service', service.Name);
})
.finally(function final() {
--actionCount;
if (actionCount === 0) {
$state.reload();
}
});
});
});
}
}]);
}
function removeServices(services) {
var actionCount = services.length;
angular.forEach(services, function (service) {
ServiceService.remove(service)
.then(function success() {
return WebhookService.webhooks(service.Id, EndpointProvider.endpointID());
})
.then(function success(data) {
return $q.when(data.length !== 0 && WebhookService.deleteWebhook(data[0].Id));
})
.then(function success() {
Notifications.success('Service successfully removed', service.Name);
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to remove service');
})
.finally(function final() {
--actionCount;
if (actionCount === 0) {
$state.reload();
}
});
});
}
},
]);

55
app/docker/components/datatables/services-datatable/servicesDatatable.html
View file

@ -2,9 +2,7 @@
<rd-widget>
<rd-widget-body classes="no-padding">
<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 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>
@ -16,7 +14,7 @@
<div class="menuContent">
<div>
<div class="md-checkbox">
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()"/>
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
<label for="setting_auto_refresh">Auto refresh</label>
</div>
<div ng-if="$ctrl.settings.repeater.autoRefresh">
@ -52,13 +50,21 @@
></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..." auto-focus ng-model-options="{ debounce: 300 }">
<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>
<tr>
<th style="width:55px;">
<th style="width: 55px;">
<span class="md-checkbox" authorization="DockerServiceUpdate, DockerServiceDelete, DockerServiceCreate">
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
<label for="select_all"></label>
@ -119,10 +125,15 @@
</tr>
</thead>
<tbody>
<tr ng-click="$ctrl.expandItem(item, !item.Expanded)" 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}" class="interactive">
<tr
ng-click="$ctrl.expandItem(item, !item.Expanded)"
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 }"
class="interactive"
>
<td>
<span class="md-checkbox" authorization="DockerServiceUpdate, DockerServiceDelete, DockerServiceCreate">
<input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event); $event.stopPropagation()"/>
<input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event); $event.stopPropagation()" />
<label for="select_{{ $index }}"></label>
</span>
<a><i ng-class="{ 'fas fa-angle-down': item.Expanded, 'fas fa-angle-right': !item.Expanded }" class="space-right" aria-hidden="true"></i></a>
@ -134,20 +145,36 @@
<td>{{ item.Image | hideshasum }}</td>
<td ng-controller="ServicesDatatableActionsController as actionCtrl">
{{ item.Mode }}
<code>{{ item.Tasks | runningtaskscount }}</code> / <code>{{ item.Mode === 'replicated' ? item.Replicas : ($ctrl.nodes | availablenodecount:item) }}</code>
<code>{{ item.Tasks | runningtaskscount }}</code> / <code>{{ item.Mode === 'replicated' ? item.Replicas : ($ctrl.nodes | availablenodecount: item) }}</code>
<span ng-if="item.Mode === 'replicated' && !item.Scale" authorization="DockerServiceUpdate">
<a class="interactive" ng-click="item.Scale = true; item.ReplicaCount = item.Replicas; $event.stopPropagation();">
<i class="fa fa-arrows-alt-v" aria-hidden="true"></i> Scale
</a>
</span>
<span ng-if="item.Mode === 'replicated' && item.Scale">
<input class="input-sm" type="number" min="0" step="1" ng-model="item.Replicas" on-enter-key="actionCtrl.scaleAction(item)" auto-focus ng-click="$event.stopPropagation();"/>
<input
class="input-sm"
type="number"
min="0"
step="1"
ng-model="item.Replicas"
on-enter-key="actionCtrl.scaleAction(item)"
auto-focus
ng-click="$event.stopPropagation();"
/>
<a class="interactive" ng-click="item.Scale = false; $event.stopPropagation();"><i class="fa fa-times"></i></a>
<a class="interactive" ng-click="actionCtrl.scaleAction(item); $event.stopPropagation();"><i class="fa fa-check-square"></i></a>
</span>
</td>
<td>
<a ng-if="item.Ports && item.Ports.length > 0 && p.PublishedPort" ng-repeat="p in item.Ports" class="image-tag" ng-href="http://{{ $ctrl.state.publicURL }}:{{ p.PublishedPort }}" target="_blank" ng-click="$event.stopPropagation();">
<a
ng-if="item.Ports && item.Ports.length > 0 && p.PublishedPort"
ng-repeat="p in item.Ports"
class="image-tag"
ng-href="http://{{ $ctrl.state.publicURL }}:{{ p.PublishedPort }}"
target="_blank"
ng-click="$event.stopPropagation();"
>
<i class="fa fa-external-link-alt" aria-hidden="true"></i> {{ p.PublishedPort }}:{{ p.TargetPort }}
</a>
<span ng-if="!item.Ports || item.Ports.length === 0">-</span>
@ -172,7 +199,7 @@
agent-proxy="$ctrl.agentProxy"
show-task-logs-button="$ctrl.showTaskLogsButton"
text-filter="$ctrl.state.textFilter"
><service-tasks-datatable>
></service-tasks-datatable>
</td>
</tr>
<tr ng-if="!$ctrl.dataset">
@ -185,9 +212,7 @@
</table>
</div>
<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="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
<div class="paginationControls">
<form class="form-inline">
<span class="limitSelector">

4
app/docker/components/datatables/services-datatable/servicesDatatable.js
View file

@ -15,6 +15,6 @@ angular.module('portainer.docker').component('servicesDatatable', {
showAddAction: '<',
showStackColumn: '<',
showTaskLogsButton: '<',
refreshCallback: '<'
}
refreshCallback: '<',
},
});

177
app/docker/components/datatables/services-datatable/servicesDatatableController.js
View file

@ -1,104 +1,107 @@
import _ from 'lodash-es';
angular.module('portainer.docker')
.controller('ServicesDatatableController', ['$scope', '$controller', 'DatatableService', 'EndpointProvider',
function ($scope, $controller, DatatableService, EndpointProvider) {
angular.module('portainer.docker').controller('ServicesDatatableController', [
'$scope',
'$controller',
'DatatableService',
'EndpointProvider',
function ($scope, $controller, DatatableService, EndpointProvider) {
angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
angular.extend(this, $controller('GenericDatatableController', {$scope: $scope}));
var ctrl = this;
var ctrl = this;
this.state = Object.assign(this.state,{
expandAll: false,
expandedItems: [],
publicURL: EndpointProvider.endpointPublicURL()
});
this.expandAll = function() {
this.state.expandAll = !this.state.expandAll;
for (var i = 0; i < this.state.filteredDataSet.length; i++) {
var item = this.state.filteredDataSet[i];
this.expandItem(item, this.state.expandAll);
}
};
this.expandItem = function(item, expanded) {
item.Expanded = expanded;
if (item.Expanded) {
if (this.state.expandedItems.indexOf(item.Id) === -1) {
this.state.expandedItems.push(item.Id);
}
} else {
var index = this.state.expandedItems.indexOf(item.Id);
if (index > -1) {
this.state.expandedItems.splice(index, 1);
}
}
DatatableService.setDataTableExpandedItems(this.tableKey, this.state.expandedItems);
};
function expandPreviouslyExpandedItem(item, storedExpandedItems) {
var expandedItem = _.find(storedExpandedItems, function(storedId) {
return item.Id === storedId;
this.state = Object.assign(this.state, {
expandAll: false,
expandedItems: [],
publicURL: EndpointProvider.endpointPublicURL(),
});
if (expandedItem) {
ctrl.expandItem(item, true);
}
}
this.expandAll = function () {
this.state.expandAll = !this.state.expandAll;
for (var i = 0; i < this.state.filteredDataSet.length; i++) {
var item = this.state.filteredDataSet[i];
this.expandItem(item, this.state.expandAll);
}
};
this.expandItems = function(storedExpandedItems) {
var expandedItemCount = 0;
this.state.expandedItems = storedExpandedItems;
for (var i = 0; i < this.dataset.length; i++) {
var item = this.dataset[i];
expandPreviouslyExpandedItem(item, storedExpandedItems);
this.expandItem = function (item, expanded) {
item.Expanded = expanded;
if (item.Expanded) {
++expandedItemCount;
if (this.state.expandedItems.indexOf(item.Id) === -1) {
this.state.expandedItems.push(item.Id);
}
} else {
var index = this.state.expandedItems.indexOf(item.Id);
if (index > -1) {
this.state.expandedItems.splice(index, 1);
}
}
DatatableService.setDataTableExpandedItems(this.tableKey, this.state.expandedItems);
};
function expandPreviouslyExpandedItem(item, storedExpandedItems) {
var expandedItem = _.find(storedExpandedItems, function (storedId) {
return item.Id === storedId;
});
if (expandedItem) {
ctrl.expandItem(item, true);
}
}
if (expandedItemCount === this.dataset.length) {
this.state.expandAll = true;
}
};
this.expandItems = function (storedExpandedItems) {
var expandedItemCount = 0;
this.state.expandedItems = storedExpandedItems;
this.$onInit = function() {
this.setDefaults();
this.prepareTableFromDataset();
for (var i = 0; i < this.dataset.length; i++) {
var item = this.dataset[i];
expandPreviouslyExpandedItem(item, storedExpandedItems);
if (item.Expanded) {
++expandedItemCount;
}
}
this.state.orderBy = this.orderBy;
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
if (storedOrder !== null) {
this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy;
}
if (expandedItemCount === this.dataset.length) {
this.state.expandAll = true;
}
};
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
this.onTextFilterChange();
}
this.$onInit = function () {
this.setDefaults();
this.prepareTableFromDataset();
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
if (storedFilters !== null) {
this.filters = storedFilters;
}
if (this.filters && this.filters.state) {
this.filters.state.open = false;
}
this.state.orderBy = this.orderBy;
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
if (storedOrder !== null) {
this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy;
}
var storedExpandedItems = DatatableService.getDataTableExpandedItems(this.tableKey);
if (storedExpandedItems !== null) {
this.expandItems(storedExpandedItems);
}
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
this.onTextFilterChange();
}
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
if (storedSettings !== null) {
this.settings = storedSettings;
this.settings.open = false;
}
this.onSettingsRepeaterChange();
};
}]);
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
if (storedFilters !== null) {
this.filters = storedFilters;
}
if (this.filters && this.filters.state) {
this.filters.state.open = false;
}
var storedExpandedItems = DatatableService.getDataTableExpandedItems(this.tableKey);
if (storedExpandedItems !== null) {
this.expandItems(storedExpandedItems);
}
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
if (storedSettings !== null) {
this.settings = storedSettings;
this.settings.open = false;
}
this.onSettingsRepeaterChange();
};
},
]);

46
app/docker/components/datatables/tasks-datatable/tasksDatatable.html
View file

@ -2,13 +2,18 @@
<rd-widget>
<rd-widget-body classes="no-padding">
<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 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..." ng-model-options="{ debounce: 300 }">
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
ng-model-options="{ debounce: 300 }"
/>
</div>
<div class="table-responsive">
<table class="table table-hover nowrap-cells">
@ -53,15 +58,36 @@
</tr>
</thead>
<tbody>
<tr dir-paginate="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}">
<td><span class="label label-{{ item.Status.State | taskstatusbadge }}">{{ item.Status.State }}</span></td>
<tr
dir-paginate="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 }"
>
<td
><span class="label label-{{ item.Status.State | taskstatusbadge }}">{{ item.Status.State }}</span></td
>
<td>
<a ng-if="!$ctrl.agentProxy || !item.Container" ui-sref="docker.tasks.task({id: item.Id})" class="monospaced">{{ item.ServiceName }}{{ item.Slot ? '.' + item.Slot : '' }}{{ '.' + item.Id }}</a>
<a ng-if="$ctrl.agentProxy && item.Container" ui-sref="docker.containers.container({ id: item.Container.Id, nodeName: item.Container.NodeName })" class="monospaced">{{ item.ServiceName }}{{ item.Slot ? '.' + item.Slot : '' }}{{ '.' + item.Id }}</a>
<a ng-if="!$ctrl.agentProxy || !item.Container" ui-sref="docker.tasks.task({id: item.Id})" class="monospaced"
>{{ item.ServiceName }}{{ item.Slot ? '.' + item.Slot : '' }}{{ '.' + item.Id }}</a
>
<a ng-if="$ctrl.agentProxy && item.Container" ui-sref="docker.containers.container({ id: item.Container.Id, nodeName: item.Container.NodeName })" class="monospaced"
>{{ item.ServiceName }}{{ item.Slot ? '.' + item.Slot : '' }}{{ '.' + item.Id }}</a
>
</td>
<td>
<container-quick-actions ng-if="!$ctrl.agentProxy || !item.Container" container-id="item.ContainerId" task-id="item.Id" status="item.Status.State" state="$ctrl.state"></container-quick-actions>
<container-quick-actions ng-if="$ctrl.agentProxy && item.Container" container-id="item.Container.Id" node-name="item.Container.NodeName" status="item.Status.State" state="$ctrl.state"></container-quick-actions>
<container-quick-actions
ng-if="!$ctrl.agentProxy || !item.Container"
container-id="item.ContainerId"
task-id="item.Id"
status="item.Status.State"
state="$ctrl.state"
></container-quick-actions>
<container-quick-actions
ng-if="$ctrl.agentProxy && item.Container"
container-id="item.Container.Id"
node-name="item.Container.NodeName"
status="item.Status.State"
state="$ctrl.state"
></container-quick-actions>
</td>
<td ng-if="$ctrl.showSlotColumn">{{ item.Slot ? item.Slot : '-' }}</td>
<td>{{ item.NodeId | tasknodename: $ctrl.nodes }}</td>

4
app/docker/components/datatables/tasks-datatable/tasksDatatable.js
View file

@ -11,6 +11,6 @@ angular.module('portainer.docker').component('tasksDatatable', {
nodes: '<',
showSlotColumn: '<',
showLogsButton: '<',
agentProxy: '<'
}
agentProxy: '<',
},
});

84
app/docker/components/datatables/tasks-datatable/tasksDatatableController.js
View file

@ -1,47 +1,49 @@
angular.module('portainer.docker')
.controller('TasksDatatableController', ['$scope', '$controller', 'DatatableService',
function ($scope, $controller, DatatableService) {
angular.module('portainer.docker').controller('TasksDatatableController', [
'$scope',
'$controller',
'DatatableService',
function ($scope, $controller, DatatableService) {
angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
angular.extend(this, $controller('GenericDatatableController', {$scope: $scope}));
this.state = Object.assign(this.state, {
showQuickActionStats: true,
showQuickActionLogs: true,
showQuickActionExec: true,
showQuickActionInspect: true,
showQuickActionAttach: false,
});
this.state = Object.assign(this.state, {
showQuickActionStats: true,
showQuickActionLogs: true,
showQuickActionExec: true,
showQuickActionInspect: true,
showQuickActionAttach: false
});
this.$onInit = function () {
this.setDefaults();
this.prepareTableFromDataset();
this.$onInit = function() {
this.setDefaults();
this.prepareTableFromDataset();
this.state.orderBy = this.orderBy;
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
if (storedOrder !== null) {
this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy;
}
this.state.orderBy = this.orderBy;
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
if (storedOrder !== null) {
this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy;
}
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
this.onTextFilterChange();
}
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
this.onTextFilterChange();
}
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
if (storedFilters !== null) {
this.filters = storedFilters;
}
if (this.filters && this.filters.state) {
this.filters.state.open = false;
}
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
if (storedFilters !== null) {
this.filters = storedFilters;
}
if (this.filters && this.filters.state) {
this.filters.state.open = false;
}
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
if (storedSettings !== null) {
this.settings = storedSettings;
this.settings.open = false;
}
this.onSettingsRepeaterChange();
};
}]);
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
if (storedSettings !== null) {
this.settings = storedSettings;
this.settings.open = false;
}
this.onSettingsRepeaterChange();
};
},
]);

46
app/docker/components/datatables/volumes-datatable/volumesDatatable.html
View file

@ -2,9 +2,7 @@
<rd-widget>
<rd-widget-body classes="no-padding">
<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 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>
@ -16,7 +14,7 @@
<div class="menuContent">
<div>
<div class="md-checkbox">
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()"/>
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
<label for="setting_auto_refresh">Auto refresh</label>
</div>
<div ng-if="$ctrl.settings.repeater.autoRefresh">
@ -45,8 +43,13 @@
</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)">
<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">
@ -55,7 +58,15 @@
</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 }">
<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">
@ -82,11 +93,11 @@
</div>
<div class="menuContent">
<div class="md-checkbox">
<input id="filter_usage_usedImages" type="checkbox" ng-model="$ctrl.filters.state.showUsedVolumes" ng-change="$ctrl.onUsageFilterChange()"/>
<input id="filter_usage_usedImages" type="checkbox" ng-model="$ctrl.filters.state.showUsedVolumes" ng-change="$ctrl.onUsageFilterChange()" />
<label for="filter_usage_usedImages">Used volumes</label>
</div>
<div class="md-checkbox">
<input id="filter_usage_unusedImages" type="checkbox" ng-model="$ctrl.filters.state.showUnusedVolumes" ng-change="$ctrl.onUsageFilterChange()"/>
<input id="filter_usage_unusedImages" type="checkbox" ng-model="$ctrl.filters.state.showUnusedVolumes" ng-change="$ctrl.onUsageFilterChange()" />
<label for="filter_usage_unusedImages">Unused volumes</label>
</div>
</div>
@ -141,14 +152,19 @@
</tr>
</thead>
<tbody>
<tr dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))" ng-class="{active: item.Checked}">
<tr
dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
ng-class="{ active: item.Checked }"
>
<td>
<span class="md-checkbox" ng-if="!$ctrl.offlineMode" authorization="DockerVolumeDelete, DockerVolumeCreate">
<input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)"/>
<input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
<label for="select_{{ $index }}"></label>
</span>
<a ng-if="!$ctrl.offlineMode" ui-sref="docker.volumes.volume({ id: item.Id, nodeName: item.NodeName })" class="monospaced" title="{{ item.Id }}">{{ item.Id | truncate:40 }}</a>
<span ng-if="$ctrl.offlineMode">{{ item.Id | truncate:40 }}</span>
<a ng-if="!$ctrl.offlineMode" ui-sref="docker.volumes.volume({ id: item.Id, nodeName: item.NodeName })" class="monospaced" title="{{ item.Id }}">{{
item.Id | truncate: 40
}}</a>
<span ng-if="$ctrl.offlineMode">{{ item.Id | truncate: 40 }}</span>
<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">
<i class="fa fa-search"></i> browse
@ -178,9 +194,7 @@
</table>
</div>
<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="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
<div class="paginationControls">
<form class="form-inline">
<span class="limitSelector">

4
app/docker/components/datatables/volumes-datatable/volumesDatatable.js
View file

@ -13,6 +13,6 @@ angular.module('portainer.docker').component('volumesDatatable', {
removeAction: '<',
showBrowseAction: '<',
offlineMode: '<',
refreshCallback: '<'
}
refreshCallback: '<',
},
});

123
app/docker/components/datatables/volumes-datatable/volumesDatatableController.js
View file

@ -1,70 +1,71 @@
angular.module('portainer.docker')
.controller('VolumesDatatableController', ['$scope', '$controller', 'DatatableService',
function ($scope, $controller, DatatableService) {
angular.module('portainer.docker').controller('VolumesDatatableController', [
'$scope',
'$controller',
'DatatableService',
function ($scope, $controller, DatatableService) {
angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
angular.extend(this, $controller('GenericDatatableController', {$scope: $scope}));
var ctrl = this;
var ctrl = this;
this.filters = {
state: {
open: false,
enabled: false,
showUsedVolumes: true,
showUnusedVolumes: true,
},
};
this.filters = {
state: {
open: false,
enabled: false,
showUsedVolumes: true,
showUnusedVolumes: true
}
};
this.applyFilters = function (value) {
var volume = value;
var filters = ctrl.filters;
if ((volume.dangling && filters.state.showUnusedVolumes) || (!volume.dangling && filters.state.showUsedVolumes)) {
return true;
}
return false;
};
this.applyFilters = function(value) {
var volume = value;
var filters = ctrl.filters;
if ((volume.dangling && filters.state.showUnusedVolumes)
|| (!volume.dangling && filters.state.showUsedVolumes)) {
return true;
}
return false;
};
this.onstateFilterChange = function () {
var filters = this.filters.state;
var filtered = false;
if (!filters.showUsedVolumes || !filters.showUnusedVolumes) {
filtered = true;
}
this.filters.state.enabled = filtered;
DatatableService.setDataTableFilters(this.tableKey, this.filters);
};
this.onstateFilterChange = function() {
var filters = this.filters.state;
var filtered = false;
if (!filters.showUsedVolumes || !filters.showUnusedVolumes) {
filtered = true;
}
this.filters.state.enabled = filtered;
DatatableService.setDataTableFilters(this.tableKey, this.filters);
};
this.$onInit = function () {
this.setDefaults();
this.prepareTableFromDataset();
this.$onInit = function() {
this.setDefaults();
this.prepareTableFromDataset();
this.state.orderBy = this.orderBy;
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
if (storedOrder !== null) {
this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy;
}
this.state.orderBy = this.orderBy;
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
if (storedOrder !== null) {
this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy;
}
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
this.onTextFilterChange();
}
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
this.onTextFilterChange();
}
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
if (storedFilters !== null) {
this.filters = storedFilters;
}
if (this.filters && this.filters.state) {
this.filters.state.open = false;
}
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
if (storedFilters !== null) {
this.filters = storedFilters;
}
if (this.filters && this.filters.state) {
this.filters.state.open = false;
}
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
if (storedSettings !== null) {
this.settings = storedSettings;
this.settings.open = false;
}
this.onSettingsRepeaterChange();
};
}]);
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
if (storedSettings !== null) {
this.settings = storedSettings;
this.settings.open = false;
}
this.onSettingsRepeaterChange();
};
},
]);