mirror of
https://github.com/portainer/portainer.git
synced 2025-08-02 20:35:25 +02:00
chore(project): add prettier for code format (#3645)
* 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
GitHub
parent
6663073be1
commit
cf5056d9c0
714 changed files with 31228 additions and 28305 deletions
|
|
@ -1,6 +1,6 @@
|
|||
angular.module('portainer.docker').component('containerCapabilities', {
|
||||
templateUrl: './containerCapabilities.html',
|
||||
bindings: {
|
||||
capabilities: '='
|
||||
}
|
||||
capabilities: '=',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,12 +11,9 @@
|
|||
</label>
|
||||
</div>
|
||||
<div class="col-xs-4 col-sm-2 col-md-1">
|
||||
<label class="switch" style="margin-left: 20px;">
|
||||
<input type="checkbox" name="capability" ng-model="cap.allowed"><i></i>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-xs-0 col-sm-1 col-md-1">
|
||||
<label class="switch" style="margin-left: 20px;"> <input type="checkbox" name="capability" ng-model="cap.allowed" /><i></i> </label>
|
||||
</div>
|
||||
<div class="col-xs-0 col-sm-1 col-md-1"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<div class="btn-group btn-group-xs" role="group" aria-label="..." style="display:inline-flex;">
|
||||
<div class="btn-group btn-group-xs" role="group" aria-label="..." style="display: inline-flex;">
|
||||
<a
|
||||
authorization="DockerContainerLogs"
|
||||
ng-if="$ctrl.state.showQuickActionLogs && $ctrl.taskId === undefined"
|
||||
style="margin: 0 2.5px;"
|
||||
ui-sref="docker.containers.container.logs({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
|
||||
title="Logs">
|
||||
title="Logs"
|
||||
>
|
||||
<i class="fa fa-file-alt space-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
<a
|
||||
|
|
@ -12,15 +13,17 @@
|
|||
ng-if="$ctrl.state.showQuickActionLogs && $ctrl.taskId !== undefined"
|
||||
style="margin: 0 2.5px;"
|
||||
ui-sref="docker.tasks.task.logs({id: $ctrl.taskId})"
|
||||
title="Logs">
|
||||
title="Logs"
|
||||
>
|
||||
<i class="fa fa-file-alt space-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
<a
|
||||
authorization="DockerContainerInspect"
|
||||
authorization="DockerContainerInspect"
|
||||
ng-if="$ctrl.state.showQuickActionInspect && $ctrl.taskId === undefined"
|
||||
style="margin: 0 2.5px;"
|
||||
ui-sref="docker.containers.container.inspect({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
|
||||
title="Inspect">
|
||||
title="Inspect"
|
||||
>
|
||||
<i class="fa fa-info-circle space-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
<a
|
||||
|
|
@ -28,7 +31,8 @@
|
|||
ng-if="$ctrl.state.showQuickActionInspect && $ctrl.taskId !== undefined"
|
||||
style="margin: 0 2.5px;"
|
||||
ui-sref="docker.tasks.task({id: $ctrl.taskId})"
|
||||
title="Inspect">
|
||||
title="Inspect"
|
||||
>
|
||||
<i class="fa fa-info-circle space-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
<a
|
||||
|
|
@ -36,7 +40,8 @@
|
|||
ng-if="$ctrl.state.showQuickActionStats && ['starting', 'running', 'healthy', 'unhealthy'].indexOf($ctrl.status) !== -1 && $ctrl.taskId === undefined"
|
||||
style="margin: 0 2.5px;"
|
||||
ui-sref="docker.containers.container.stats({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
|
||||
title="Stats">
|
||||
title="Stats"
|
||||
>
|
||||
<i class="fa fa-chart-area space-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
<a
|
||||
|
|
@ -44,7 +49,8 @@
|
|||
ng-if="$ctrl.state.showQuickActionExec && ['starting', 'running', 'healthy', 'unhealthy'].indexOf($ctrl.status) !== -1 && $ctrl.taskId === undefined"
|
||||
style="margin: 0 2.5px;"
|
||||
ui-sref="docker.containers.container.exec({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
|
||||
title="Exec Console">
|
||||
title="Exec Console"
|
||||
>
|
||||
<i class="fa fa-terminal space-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
<a
|
||||
|
|
@ -52,7 +58,8 @@
|
|||
ng-if="$ctrl.state.showQuickActionAttach && ['starting', 'running', 'healthy', 'unhealthy'].indexOf($ctrl.status) !== -1 && $ctrl.taskId === undefined"
|
||||
style="margin: 0 2.5px;"
|
||||
ui-sref="docker.containers.container.attach({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
|
||||
title="Attach Console">
|
||||
title="Attach Console"
|
||||
>
|
||||
<i class="fa fa-plug space-right" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@ angular.module('portainer.docker').component('containerQuickActions', {
|
|||
nodeName: '<',
|
||||
status: '<',
|
||||
state: '<',
|
||||
taskId: '<'
|
||||
}
|
||||
taskId: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,26 +1,25 @@
|
|||
angular
|
||||
.module('portainer.docker')
|
||||
.controller('ContainerRestartPolicyController', [function ContainerRestartPolicyController() {
|
||||
var ctrl = this;
|
||||
angular.module('portainer.docker').controller('ContainerRestartPolicyController', [
|
||||
function ContainerRestartPolicyController() {
|
||||
var ctrl = this;
|
||||
|
||||
this.state = {
|
||||
editModel : {}
|
||||
};
|
||||
|
||||
ctrl.save = save;
|
||||
|
||||
function save() {
|
||||
if (ctrl.state.editModel.name === ctrl.name && ctrl.state.editModel.maximumRetryCount === ctrl.maximumRetryCount) {
|
||||
return;
|
||||
}
|
||||
ctrl.updateRestartPolicy(ctrl.state.editModel);
|
||||
}
|
||||
|
||||
this.$onInit = function() {
|
||||
ctrl.state.editModel = {
|
||||
name: ctrl.name ? ctrl.name : 'no',
|
||||
maximumRetryCount: ctrl.maximumRetryCount
|
||||
this.state = {
|
||||
editModel: {},
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
ctrl.save = save;
|
||||
|
||||
function save() {
|
||||
if (ctrl.state.editModel.name === ctrl.name && ctrl.state.editModel.maximumRetryCount === ctrl.maximumRetryCount) {
|
||||
return;
|
||||
}
|
||||
ctrl.updateRestartPolicy(ctrl.state.editModel);
|
||||
}
|
||||
|
||||
this.$onInit = function () {
|
||||
ctrl.state.editModel = {
|
||||
name: ctrl.name ? ctrl.name : 'no',
|
||||
maximumRetryCount: ctrl.maximumRetryCount,
|
||||
};
|
||||
};
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
angular.module('portainer.docker')
|
||||
.component('containerRestartPolicy', {
|
||||
angular.module('portainer.docker').component('containerRestartPolicy', {
|
||||
templateUrl: './container-restart-policy.html',
|
||||
controller: 'ContainerRestartPolicyController',
|
||||
bindings: {
|
||||
'name': '<',
|
||||
'maximumRetryCount': '<',
|
||||
'updateRestartPolicy': '&'
|
||||
}
|
||||
name: '<',
|
||||
maximumRetryCount: '<',
|
||||
updateRestartPolicy: '&',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
angular.module('portainer.docker').component('dashboardClusterAgentInfo', {
|
||||
templateUrl: './dashboardClusterAgentInfo.html',
|
||||
controller: 'DashboardClusterAgentInfoController'
|
||||
controller: 'DashboardClusterAgentInfoController',
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
angular.module('portainer.docker')
|
||||
.controller('DashboardClusterAgentInfoController', ['AgentService', 'Notifications',
|
||||
function (AgentService, Notifications) {
|
||||
var ctrl = this;
|
||||
angular.module('portainer.docker').controller('DashboardClusterAgentInfoController', [
|
||||
'AgentService',
|
||||
'Notifications',
|
||||
function (AgentService, Notifications) {
|
||||
var ctrl = this;
|
||||
|
||||
this.$onInit = function() {
|
||||
AgentService.agents()
|
||||
.then(function success(data) {
|
||||
ctrl.agentCount = data.length;
|
||||
})
|
||||
.catch(function error(err) {
|
||||
Notifications.error('Failure', err, 'Unable to retrieve agent information');
|
||||
});
|
||||
};
|
||||
|
||||
}]);
|
||||
this.$onInit = function () {
|
||||
AgentService.agents()
|
||||
.then(function success(data) {
|
||||
ctrl.agentCount = data.length;
|
||||
})
|
||||
.catch(function error(err) {
|
||||
Notifications.error('Failure', err, 'Unable to retrieve agent information');
|
||||
});
|
||||
};
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@ angular.module('portainer.docker').component('configsDatatable', {
|
|||
reverseOrder: '<',
|
||||
showOwnershipColumn: '<',
|
||||
removeAction: '<',
|
||||
refreshCallback: '<'
|
||||
}
|
||||
refreshCallback: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@ angular.module('portainer.docker').component('containerNetworksDatatable', {
|
|||
joinNetworkActionInProgress: '<',
|
||||
leaveNetworkActionInProgress: '<',
|
||||
leaveNetworkAction: '<',
|
||||
nodeName: '<'
|
||||
}
|
||||
nodeName: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -8,6 +8,6 @@ angular.module('portainer.docker').component('containerProcessesDatatable', {
|
|||
headerset: '<',
|
||||
tableKey: '@',
|
||||
orderBy: '@',
|
||||
reverseOrder: '<'
|
||||
}
|
||||
reverseOrder: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,6 @@ angular.module('portainer.docker').component('containersDatatableActions', {
|
|||
noStoppedItemsSelected: '=',
|
||||
noRunningItemsSelected: '=',
|
||||
noPausedItemsSelected: '=',
|
||||
showAddAction: '<'
|
||||
}
|
||||
showAddAction: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@ angular.module('portainer.docker').component('containersDatatable', {
|
|||
showHostColumn: '<',
|
||||
showAddAction: '<',
|
||||
offlineMode: '<',
|
||||
refreshCallback: '<'
|
||||
}
|
||||
refreshCallback: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
};
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,6 @@ angular.module('portainer.docker').component('eventsDatatable', {
|
|||
dataset: '<',
|
||||
tableKey: '@',
|
||||
orderBy: '@',
|
||||
reverseOrder: '<'
|
||||
}
|
||||
reverseOrder: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -7,6 +7,6 @@ angular.module('portainer.docker').component('jobsDatatable', {
|
|||
dataset: '<',
|
||||
tableKey: '@',
|
||||
orderBy: '@',
|
||||
reverseOrder: '<'
|
||||
}
|
||||
});
|
||||
reverseOrder: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -14,6 +14,6 @@ angular.module('portainer.docker').component('imagesDatatable', {
|
|||
forceRemoveAction: '<',
|
||||
exportInProgress: '<',
|
||||
offlineMode: '<',
|
||||
refreshCallback: '<'
|
||||
}
|
||||
refreshCallback: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@ angular.module('portainer.docker').component('macvlanNodesDatatable', {
|
|||
reverseOrder: '<',
|
||||
showIpAddressColumn: '<',
|
||||
accessToNodeDetails: '<',
|
||||
state: '='
|
||||
}
|
||||
state: '=',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@ angular.module('portainer.docker').component('networksDatatable', {
|
|||
showHostColumn: '<',
|
||||
removeAction: '<',
|
||||
offlineMode: '<',
|
||||
refreshCallback: '<'
|
||||
}
|
||||
refreshCallback: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
};
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,6 @@ angular.module('portainer.docker').component('nodeTasksDatatable', {
|
|||
dataset: '<',
|
||||
tableKey: '@',
|
||||
orderBy: '@',
|
||||
reverseOrder: '<'
|
||||
}
|
||||
reverseOrder: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@ angular.module('portainer.docker').component('nodesDatatable', {
|
|||
reverseOrder: '<',
|
||||
showIpAddressColumn: '<',
|
||||
accessToNodeDetails: '<',
|
||||
refreshCallback: '<'
|
||||
}
|
||||
refreshCallback: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@ angular.module('portainer.docker').component('secretsDatatable', {
|
|||
reverseOrder: '<',
|
||||
showOwnershipColumn: '<',
|
||||
removeAction: '<',
|
||||
refreshCallback: '<'
|
||||
}
|
||||
refreshCallback: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@ angular.module('portainer.docker').component('serviceTasksDatatable', {
|
|||
nodes: '<',
|
||||
agentProxy: '<',
|
||||
textFilter: '=',
|
||||
showTaskLogsButton: '<'
|
||||
}
|
||||
showTaskLogsButton: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@ angular.module('portainer.docker').component('servicesDatatableActions', {
|
|||
selectedItems: '=',
|
||||
selectedItemCount: '=',
|
||||
showUpdateAction: '<',
|
||||
showAddAction: '<'
|
||||
}
|
||||
showAddAction: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -15,6 +15,6 @@ angular.module('portainer.docker').component('servicesDatatable', {
|
|||
showAddAction: '<',
|
||||
showStackColumn: '<',
|
||||
showTaskLogsButton: '<',
|
||||
refreshCallback: '<'
|
||||
}
|
||||
refreshCallback: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,6 @@ angular.module('portainer.docker').component('tasksDatatable', {
|
|||
nodes: '<',
|
||||
showSlotColumn: '<',
|
||||
showLogsButton: '<',
|
||||
agentProxy: '<'
|
||||
}
|
||||
agentProxy: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -13,6 +13,6 @@ angular.module('portainer.docker').component('volumesDatatable', {
|
|||
removeAction: '<',
|
||||
showBrowseAction: '<',
|
||||
offlineMode: '<',
|
||||
refreshCallback: '<'
|
||||
}
|
||||
refreshCallback: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@ angular.module('portainer.docker').component('dockerSidebarContent', {
|
|||
swarmManagement: '<',
|
||||
standaloneManagement: '<',
|
||||
adminAccess: '<',
|
||||
offlineMode: '<'
|
||||
}
|
||||
offlineMode: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<li class="sidebar-list">
|
||||
<a ui-sref="docker.volumes" ui-sref-active="active">Volumes <span class="menu-icon fa fa-cubes fa-fw"></span></a>
|
||||
</li>
|
||||
<li class="sidebar-list" ng-if="$ctrl.endpointApiVersion >= 1.30 && $ctrl.swarmManagement">
|
||||
<li class="sidebar-list" ng-if="$ctrl.endpointApiVersion >= 1.3 && $ctrl.swarmManagement">
|
||||
<a ui-sref="docker.configs" ui-sref-active="active">Configs <span class="menu-icon fa fa-file-code fa-fw"></span></a>
|
||||
</li>
|
||||
<li class="sidebar-list" ng-if="$ctrl.endpointApiVersion >= 1.25 && $ctrl.swarmManagement">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<rd-header>
|
||||
<rd-header-title title-text="Host overview">
|
||||
<a data-toggle="tooltip" title="Refresh" ui-sref="{{$ctrl.refreshUrl}}"
|
||||
ui-sref-opts="{reload: true}">
|
||||
<a data-toggle="tooltip" title="Refresh" ui-sref="{{ $ctrl.refreshUrl }}" ui-sref-opts="{reload: true}">
|
||||
<i class="fa fa-sync" aria-hidden="true"></i>
|
||||
</a>
|
||||
</rd-header-title>
|
||||
|
|
@ -13,19 +12,21 @@
|
|||
<host-details-panel
|
||||
host="$ctrl.hostDetails"
|
||||
is-browse-enabled="$ctrl.isAgent && $ctrl.agentApiVersion > 1 && !$ctrl.offlineMode && $ctrl.hostFeaturesEnabled"
|
||||
browse-url="{{$ctrl.browseUrl}}"
|
||||
browse-url="{{ $ctrl.browseUrl }}"
|
||||
is-job-enabled="$ctrl.isJobEnabled && !$ctrl.offlineMode && $ctrl.hostFeaturesEnabled"
|
||||
job-url="{{$ctrl.jobUrl}}"
|
||||
job-url="{{ $ctrl.jobUrl }}"
|
||||
></host-details-panel>
|
||||
|
||||
<engine-details-panel engine="$ctrl.engineDetails"></engine-details-panel>
|
||||
|
||||
<jobs-datatable
|
||||
ng-if="$ctrl.isJobEnabled && $ctrl.jobs && !$ctrl.offlineMode && $ctrl.hostFeaturesEnabled"
|
||||
title-text="Jobs" title-icon="fa-tasks"
|
||||
title-text="Jobs"
|
||||
title-icon="fa-tasks"
|
||||
dataset="$ctrl.jobs"
|
||||
table-key="jobs"
|
||||
order-by="Created" reverse-order="true"
|
||||
order-by="Created"
|
||||
reverse-order="true"
|
||||
></jobs-datatable>
|
||||
|
||||
<devices-panel ng-if="$ctrl.isAgent && $ctrl.agentApiVersion > 1 && !$ctrl.offlineMode && $ctrl.hostFeaturesEnabled" devices="$ctrl.devices"></devices-panel>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ angular.module('portainer.docker').component('hostOverview', {
|
|||
jobUrl: '@',
|
||||
isJobEnabled: '<',
|
||||
hostFeaturesEnabled: '<',
|
||||
jobs: '<'
|
||||
jobs: '<',
|
||||
},
|
||||
transclude: true
|
||||
transclude: true,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr ng-if="$ctrl.devices && $ctrl.devices.length" ng-repeat="device in $ctrl.devices">
|
||||
<td>{{device.Name}}</td>
|
||||
<td>{{device.Vendor}}</td>
|
||||
<td>{{ device.Name }}</td>
|
||||
<td>{{ device.Vendor }}</td>
|
||||
</tr>
|
||||
<tr ng-if="!$ctrl.devices">
|
||||
<td colspan="2" class="text-center text-muted">Loading...</td>
|
||||
|
|
@ -28,4 +28,4 @@
|
|||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
angular.module('portainer.docker').component('devicesPanel', {
|
||||
templateUrl: './devices-panel.html',
|
||||
bindings: {
|
||||
devices: '<'
|
||||
}
|
||||
devices: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr ng-if="$ctrl.disks" ng-repeat="disk in $ctrl.disks">
|
||||
<td>{{disk.Vendor}}</td>
|
||||
<td>{{disk.Size | humansize}}</td>
|
||||
<td>{{ disk.Vendor }}</td>
|
||||
<td>{{ disk.Size | humansize }}</td>
|
||||
</tr>
|
||||
<tr ng-if="!$ctrl.disks">
|
||||
<td colspan="2" class="text-center text-muted">Loading...</td>
|
||||
|
|
@ -28,4 +28,4 @@
|
|||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
angular.module('portainer.docker').component('disksPanel', {
|
||||
templateUrl: './disks-panel.html',
|
||||
bindings: {
|
||||
disks: '<'
|
||||
}
|
||||
disks: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@
|
|||
<tbody>
|
||||
<tr>
|
||||
<td>Version</td>
|
||||
<td>{{ $ctrl.engine.releaseVersion }} <span ng-if="$ctrl.engine.apiVersion">(API: {{ $ctrl.engine.apiVersion }})</span></td>
|
||||
<td
|
||||
>{{ $ctrl.engine.releaseVersion }} <span ng-if="$ctrl.engine.apiVersion">(API: {{ $ctrl.engine.apiVersion }})</span></td
|
||||
>
|
||||
</tr>
|
||||
<tr ng-if="$ctrl.engine.rootDirectory">
|
||||
<td>Root directory</td>
|
||||
|
|
@ -31,11 +33,11 @@
|
|||
</tr>
|
||||
<tr ng-if="$ctrl.engine.engineLabels.length">
|
||||
<td>Engine Labels</td>
|
||||
<td>{{ $ctrl.engine.engineLabels | labelsToStr:', ' }}</td>
|
||||
<td>{{ $ctrl.engine.engineLabels | labelsToStr: ', ' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
angular.module('portainer.docker').component('engineDetailsPanel', {
|
||||
templateUrl: './engine-details-panel.html',
|
||||
bindings: {
|
||||
engine: '<'
|
||||
}
|
||||
engine: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,8 +11,7 @@
|
|||
</tr>
|
||||
<tr ng-if="$ctrl.host.os">
|
||||
<td>OS Information</td>
|
||||
<td>{{ $ctrl.host.os.type }} {{$ctrl.host.os.arch}}
|
||||
{{$ctrl.host.os.name}}</td>
|
||||
<td>{{ $ctrl.host.os.type }} {{ $ctrl.host.os.arch }} {{ $ctrl.host.os.name }}</td>
|
||||
</tr>
|
||||
<tr ng-if="$ctrl.host.kernelVersion">
|
||||
<td>Kernel Version</td>
|
||||
|
|
@ -28,10 +27,10 @@
|
|||
</tr>
|
||||
<tr ng-if="$ctrl.isBrowseEnabled || $ctrl.isJobEnabled">
|
||||
<td colspan="2">
|
||||
<button class="btn btn-primary btn-sm" title="Browse" ng-if="$ctrl.isBrowseEnabled" ui-sref="{{$ctrl.browseUrl}}">
|
||||
<button class="btn btn-primary btn-sm" title="Browse" ng-if="$ctrl.isBrowseEnabled" ui-sref="{{ $ctrl.browseUrl }}">
|
||||
Browse
|
||||
</button>
|
||||
<button class="btn btn-primary btn-sm" title="Execute job" ng-if="$ctrl.isJobEnabled" ui-sref="{{$ctrl.jobUrl}}">
|
||||
<button class="btn btn-primary btn-sm" title="Execute job" ng-if="$ctrl.isJobEnabled" ui-sref="{{ $ctrl.jobUrl }}">
|
||||
Execute job
|
||||
</button>
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@ angular.module('portainer.docker').component('hostDetailsPanel', {
|
|||
isJobEnabled: '<',
|
||||
isBrowseEnabled: '<',
|
||||
browseUrl: '@',
|
||||
jobUrl: '@'
|
||||
}
|
||||
jobUrl: '@',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
angular
|
||||
.module('portainer.docker')
|
||||
.controller('NodeAvailabilitySelectController', [
|
||||
function NodeAvailabilitySelectController() {
|
||||
this.onChange = onChange;
|
||||
angular.module('portainer.docker').controller('NodeAvailabilitySelectController', [
|
||||
function NodeAvailabilitySelectController() {
|
||||
this.onChange = onChange;
|
||||
|
||||
function onChange() {
|
||||
this.onSave({ availability: this.availability });
|
||||
}
|
||||
function onChange() {
|
||||
this.onSave({ availability: this.availability });
|
||||
}
|
||||
]);
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
<div class="input-group input-group-sm">
|
||||
<select name="nodeAvailability" class="selectpicker form-control" ng-model="$ctrl.availability"
|
||||
ng-change="$ctrl.onChange()">
|
||||
<select name="nodeAvailability" class="selectpicker form-control" ng-model="$ctrl.availability" ng-change="$ctrl.onChange()">
|
||||
<option value="active">Active</option>
|
||||
<option value="pause">Pause</option>
|
||||
<option value="drain">Drain</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@ angular.module('portainer.docker').component('nodeAvailabilitySelect', {
|
|||
bindings: {
|
||||
availability: '<',
|
||||
originalValue: '<',
|
||||
onSave: '&'
|
||||
}
|
||||
onSave: '&',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -12,12 +12,9 @@ angular.module('portainer.docker').controller('NodeLabelsTableController', [
|
|||
}
|
||||
|
||||
function updateLabel(label) {
|
||||
if (
|
||||
label.value !== label.originalValue ||
|
||||
label.key !== label.originalKey
|
||||
) {
|
||||
if (label.value !== label.originalValue || label.key !== label.originalKey) {
|
||||
ctrl.onChangedLabels({ labels: ctrl.labels });
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -14,15 +14,13 @@
|
|||
<td>
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-addon fit-text-size">Name</span>
|
||||
<input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo"
|
||||
ng-change="$ctrl.updateLabel(label)">
|
||||
<input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" ng-change="$ctrl.updateLabel(label)" />
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-addon fit-text-size">Value</span>
|
||||
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar"
|
||||
ng-change="$ctrl.updateLabel(label)">
|
||||
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="$ctrl.updateLabel(label)" />
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.removeLabel($index)">
|
||||
<i class="fa fa-trash" aria-hidden="true"></i>
|
||||
|
|
@ -32,4 +30,4 @@
|
|||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@ angular.module('portainer.docker').component('nodeLabelsTable', {
|
|||
controller: 'NodeLabelsTableController',
|
||||
bindings: {
|
||||
labels: '<',
|
||||
onChangedLabels: '&'
|
||||
}
|
||||
onChangedLabels: '&',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,96 +1,91 @@
|
|||
angular
|
||||
.module('portainer.docker')
|
||||
.controller('SwarmNodeDetailsPanelController', [
|
||||
'NodeService', 'LabelHelper', 'Notifications', '$state',
|
||||
function SwarmNodeDetailsPanelController(NodeService, LabelHelper, Notifications, $state) {
|
||||
var ctrl = this;
|
||||
ctrl.state = {
|
||||
managerAddress: '',
|
||||
hasChanges: false
|
||||
};
|
||||
ctrl.$onChanges = $onChanges;
|
||||
ctrl.addLabel = addLabel;
|
||||
ctrl.updateNodeLabels = updateNodeLabels;
|
||||
ctrl.updateNodeAvailability = updateNodeAvailability;
|
||||
ctrl.saveChanges = saveChanges;
|
||||
ctrl.cancelChanges = cancelChanges;
|
||||
angular.module('portainer.docker').controller('SwarmNodeDetailsPanelController', [
|
||||
'NodeService',
|
||||
'LabelHelper',
|
||||
'Notifications',
|
||||
'$state',
|
||||
function SwarmNodeDetailsPanelController(NodeService, LabelHelper, Notifications, $state) {
|
||||
var ctrl = this;
|
||||
ctrl.state = {
|
||||
managerAddress: '',
|
||||
hasChanges: false,
|
||||
};
|
||||
ctrl.$onChanges = $onChanges;
|
||||
ctrl.addLabel = addLabel;
|
||||
ctrl.updateNodeLabels = updateNodeLabels;
|
||||
ctrl.updateNodeAvailability = updateNodeAvailability;
|
||||
ctrl.saveChanges = saveChanges;
|
||||
ctrl.cancelChanges = cancelChanges;
|
||||
|
||||
var managerRole = 'manager';
|
||||
var managerRole = 'manager';
|
||||
|
||||
function $onChanges() {
|
||||
if (!ctrl.details) {
|
||||
return;
|
||||
}
|
||||
if (ctrl.details.role === managerRole) {
|
||||
ctrl.state.managerAddress = '(' + ctrl.details.managerAddress + ')';
|
||||
}
|
||||
function $onChanges() {
|
||||
if (!ctrl.details) {
|
||||
return;
|
||||
}
|
||||
|
||||
function addLabel() {
|
||||
ctrl.details.nodeLabels.push({
|
||||
key: '',
|
||||
value: '',
|
||||
originalValue: '',
|
||||
originalKey: ''
|
||||
});
|
||||
}
|
||||
|
||||
function updateNodeLabels(labels) {
|
||||
ctrl.details.nodeLabels = labels;
|
||||
ctrl.state.hasChanges = true;
|
||||
}
|
||||
|
||||
function updateNodeAvailability(availability) {
|
||||
ctrl.details.availability = availability;
|
||||
ctrl.state.hasChanges = true;
|
||||
}
|
||||
|
||||
function saveChanges() {
|
||||
var originalNode = ctrl.originalNode;
|
||||
var config = {
|
||||
Name: originalNode.Name,
|
||||
Availability: ctrl.details.availability,
|
||||
Role: originalNode.Role,
|
||||
Labels: LabelHelper.fromKeyValueToLabelHash(ctrl.details.nodeLabels),
|
||||
Id: originalNode.Id,
|
||||
Version: originalNode.Version
|
||||
};
|
||||
|
||||
NodeService.updateNode(config)
|
||||
.then(onUpdateSuccess)
|
||||
.catch(notifyOnError);
|
||||
|
||||
function onUpdateSuccess() {
|
||||
Notifications.success('Node successfully updated', 'Node updated');
|
||||
$state.go(
|
||||
'docker.nodes.node',
|
||||
{ id: originalNode.Id },
|
||||
{ reload: true }
|
||||
);
|
||||
}
|
||||
|
||||
function notifyOnError(error) {
|
||||
Notifications.error('Failure', error, 'Failed to update node');
|
||||
}
|
||||
}
|
||||
|
||||
function cancelChanges() {
|
||||
cancelLabelChanges();
|
||||
ctrl.details.availability = ctrl.originalNode.Availability;
|
||||
ctrl.state.hasChanges = false;
|
||||
}
|
||||
|
||||
function cancelLabelChanges() {
|
||||
ctrl.details.nodeLabels = ctrl.details.nodeLabels
|
||||
.filter(function(label) {
|
||||
return label.originalValue || label.originalKey;
|
||||
})
|
||||
.map(function(label) {
|
||||
return Object.assign(label, {
|
||||
value: label.originalValue,
|
||||
key: label.originalKey
|
||||
});
|
||||
});
|
||||
if (ctrl.details.role === managerRole) {
|
||||
ctrl.state.managerAddress = '(' + ctrl.details.managerAddress + ')';
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
function addLabel() {
|
||||
ctrl.details.nodeLabels.push({
|
||||
key: '',
|
||||
value: '',
|
||||
originalValue: '',
|
||||
originalKey: '',
|
||||
});
|
||||
}
|
||||
|
||||
function updateNodeLabels(labels) {
|
||||
ctrl.details.nodeLabels = labels;
|
||||
ctrl.state.hasChanges = true;
|
||||
}
|
||||
|
||||
function updateNodeAvailability(availability) {
|
||||
ctrl.details.availability = availability;
|
||||
ctrl.state.hasChanges = true;
|
||||
}
|
||||
|
||||
function saveChanges() {
|
||||
var originalNode = ctrl.originalNode;
|
||||
var config = {
|
||||
Name: originalNode.Name,
|
||||
Availability: ctrl.details.availability,
|
||||
Role: originalNode.Role,
|
||||
Labels: LabelHelper.fromKeyValueToLabelHash(ctrl.details.nodeLabels),
|
||||
Id: originalNode.Id,
|
||||
Version: originalNode.Version,
|
||||
};
|
||||
|
||||
NodeService.updateNode(config).then(onUpdateSuccess).catch(notifyOnError);
|
||||
|
||||
function onUpdateSuccess() {
|
||||
Notifications.success('Node successfully updated', 'Node updated');
|
||||
$state.go('docker.nodes.node', { id: originalNode.Id }, { reload: true });
|
||||
}
|
||||
|
||||
function notifyOnError(error) {
|
||||
Notifications.error('Failure', error, 'Failed to update node');
|
||||
}
|
||||
}
|
||||
|
||||
function cancelChanges() {
|
||||
cancelLabelChanges();
|
||||
ctrl.details.availability = ctrl.originalNode.Availability;
|
||||
ctrl.state.hasChanges = false;
|
||||
}
|
||||
|
||||
function cancelLabelChanges() {
|
||||
ctrl.details.nodeLabels = ctrl.details.nodeLabels
|
||||
.filter(function (label) {
|
||||
return label.originalValue || label.originalKey;
|
||||
})
|
||||
.map(function (label) {
|
||||
return Object.assign(label, {
|
||||
value: label.originalValue,
|
||||
key: label.originalKey,
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -16,22 +16,24 @@
|
|||
<tr>
|
||||
<td>Availability</td>
|
||||
<td>
|
||||
<node-availability-select on-save="$ctrl.updateNodeAvailability(availability)"
|
||||
availability="$ctrl.details.availability" original-value="$ctrl.details.availability">
|
||||
<node-availability-select
|
||||
on-save="$ctrl.updateNodeAvailability(availability)"
|
||||
availability="$ctrl.details.availability"
|
||||
original-value="$ctrl.details.availability"
|
||||
>
|
||||
</node-availability-select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Status</td>
|
||||
<td><span class="label label-{{ $ctrl.details.status | nodestatusbadge }}">{{
|
||||
$ctrl.details.status }}</span></td>
|
||||
<td
|
||||
><span class="label label-{{ $ctrl.details.status | nodestatusbadge }}">{{ $ctrl.details.status }}</span></td
|
||||
>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="nopadding">
|
||||
<a class="btn btn-default btn-sm pull-right" ng-click="$ctrl.addLabel(node)">
|
||||
<i class="fa fa-plus-circle" aria-hidden="true"></i> label
|
||||
</a>
|
||||
<a class="btn btn-default btn-sm pull-right" ng-click="$ctrl.addLabel(node)"> <i class="fa fa-plus-circle" aria-hidden="true"></i> label </a>
|
||||
</div>
|
||||
Node Labels
|
||||
</td>
|
||||
|
|
@ -39,20 +41,17 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<node-labels-table labels="$ctrl.details.nodeLabels"
|
||||
on-changed-labels="$ctrl.updateNodeLabels(labels)"></node-labels-table>
|
||||
<node-labels-table labels="$ctrl.details.nodeLabels" on-changed-labels="$ctrl.updateNodeLabels(labels)"></node-labels-table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-primary btn-sm"
|
||||
ng-disabled="!$ctrl.state.hasChanges" ng-click="$ctrl.saveChanges()">
|
||||
<button type="button" class="btn btn-primary btn-sm" ng-disabled="!$ctrl.state.hasChanges" ng-click="$ctrl.saveChanges()">
|
||||
Apply changes
|
||||
</button>
|
||||
<button type="button" class="btn btn-default btn-sm dropdown-toggle"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
|
|
@ -64,8 +63,7 @@
|
|||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@ angular.module('portainer.docker').component('swarmNodeDetailsPanel', {
|
|||
controller: 'SwarmNodeDetailsPanelController',
|
||||
bindings: {
|
||||
details: '<',
|
||||
originalNode: '<'
|
||||
}
|
||||
originalNode: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@ angular.module('portainer.docker').component('porImageRegistry', {
|
|||
templateUrl: './porImageRegistry.html',
|
||||
controller: 'porImageRegistryController',
|
||||
bindings: {
|
||||
'model': '=', // must be of type PorImageRegistryModel
|
||||
'pullWarning': '<',
|
||||
'autoComplete': '<',
|
||||
'labelClass': '@',
|
||||
'inputClass': '@'
|
||||
model: '=', // must be of type PorImageRegistryModel
|
||||
pullWarning: '<',
|
||||
autoComplete: '<',
|
||||
labelClass: '@',
|
||||
inputClass: '@',
|
||||
},
|
||||
require: {
|
||||
form: '^form'
|
||||
}
|
||||
form: '^form',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,15 +5,28 @@
|
|||
Registry
|
||||
</label>
|
||||
<div ng-class="$ctrl.inputClass">
|
||||
<select ng-options="registry as registry.Name for registry in $ctrl.availableRegistries track by registry.Name" ng-model="$ctrl.model.Registry" id="image_registry"
|
||||
selected-item-id="ctrl.selectedItemId" class="form-control"></select>
|
||||
<select
|
||||
ng-options="registry as registry.Name for registry in $ctrl.availableRegistries track by registry.Name"
|
||||
ng-model="$ctrl.model.Registry"
|
||||
id="image_registry"
|
||||
selected-item-id="ctrl.selectedItemId"
|
||||
class="form-control"
|
||||
></select>
|
||||
</div>
|
||||
<label for="image_name" ng-class="$ctrl.labelClass" class="margin-sm-top control-label text-left">Image</label>
|
||||
<div ng-class="$ctrl.inputClass" class="margin-sm-top">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon" id="registry-name">{{$ctrl.displayedRegistryURL()}}</span>
|
||||
<input type="text" class="form-control" aria-describedby="registry-name" uib-typeahead="image for image in $ctrl.availableImages | filter:$viewValue | limitTo:5"
|
||||
ng-model="$ctrl.model.Image" name="image_name" placeholder="e.g. myImage:myTag" required>
|
||||
<span class="input-group-addon" id="registry-name">{{ $ctrl.displayedRegistryURL() }}</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
aria-describedby="registry-name"
|
||||
uib-typeahead="image for image in $ctrl.availableImages | filter:$viewValue | limitTo:5"
|
||||
ng-model="$ctrl.model.Image"
|
||||
name="image_name"
|
||||
placeholder="e.g. myImage:myTag"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -22,11 +35,12 @@
|
|||
<!-- don't use registry -->
|
||||
<div ng-if="!$ctrl.model.UseRegistry">
|
||||
<div class="form-group">
|
||||
<label for="image_name" ng-class="$ctrl.labelClass" class="control-label text-left">Image
|
||||
<label for="image_name" ng-class="$ctrl.labelClass" class="control-label text-left"
|
||||
>Image
|
||||
<portainer-tooltip position="bottom" message="Image and repository should be publicly available."></portainer-tooltip>
|
||||
</label>
|
||||
<div ng-class="$ctrl.inputClass">
|
||||
<input type="text" class="form-control" ng-model="$ctrl.model.Image" name="image_name" placeholder="e.g. registry:port/myImage:myTag" required>
|
||||
<input type="text" class="form-control" ng-model="$ctrl.model.Image" name="image_name" placeholder="e.g. registry:port/myImage:myTag" required />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -35,7 +49,10 @@
|
|||
<div class="form-group" ng-show="$ctrl.form.image_name.$invalid">
|
||||
<div class="col-sm-12 small text-warning">
|
||||
<div ng-messages="$ctrl.form.image_name.$error">
|
||||
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Image name is required. <span ng-if="$ctrl.canPull">Tag must be specified otherwise Portainer will pull all tags associated to the image.</span></p>
|
||||
<p ng-message="required"
|
||||
><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Image name is required.
|
||||
<span ng-if="$ctrl.canPull">Tag must be specified otherwise Portainer will pull all tags associated to the image.</span></p
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ class porImageRegistryController {
|
|||
if (this.isKnownRegistry(registry)) {
|
||||
const url = this.getRegistryURL(registry);
|
||||
const registryImages = _.filter(this.images, (image) => _.includes(image, url));
|
||||
images = _.map(registryImages, (image) => _.replace(image, new RegExp(url + '\/?'), ''));
|
||||
images = _.map(registryImages, (image) => _.replace(image, new RegExp(url + '/?'), ''));
|
||||
} else {
|
||||
const registries = _.filter(this.availableRegistries, (reg) => this.isKnownRegistry(reg));
|
||||
const registryImages = _.flatMap(registries, (registry) => _.filter(this.images, (image) => _.includes(image, registry.URL)));
|
||||
|
|
@ -64,7 +64,7 @@ class porImageRegistryController {
|
|||
const [registries, dockerhub, images] = await Promise.all([
|
||||
this.RegistryService.registries(),
|
||||
this.DockerHubService.dockerhub(),
|
||||
this.autoComplete ? this.ImageService.images() : []
|
||||
this.autoComplete ? this.ImageService.images() : [],
|
||||
]);
|
||||
this.images = this.ImageService.getUniqueTagListFromImages(images);
|
||||
this.availableRegistries = _.concat(dockerhub, registries);
|
||||
|
|
@ -73,7 +73,7 @@ class porImageRegistryController {
|
|||
if (!id) {
|
||||
this.model.Registry = dockerhub;
|
||||
} else {
|
||||
this.model.Registry = _.find(this.availableRegistries, { 'Id': id });
|
||||
this.model.Registry = _.find(this.availableRegistries, { Id: id });
|
||||
}
|
||||
} catch (err) {
|
||||
this.Notifications.error('Failure', err, 'Unable to retrieve registries');
|
||||
|
|
|
|||
|
|
@ -6,6 +6,6 @@ angular.module('portainer.docker').component('logViewer', {
|
|||
displayTimestamps: '=',
|
||||
logCollectionChange: '<',
|
||||
sinceTimestamp: '=',
|
||||
lineCount: '='
|
||||
}
|
||||
lineCount: '=',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -11,7 +11,11 @@
|
|||
<portainer-tooltip position="bottom" message="Disabling this option allows you to pause the log collection process and the auto-scrolling."></portainer-tooltip>
|
||||
</label>
|
||||
<label class="switch" style="margin-left: 20px;">
|
||||
<input type="checkbox" ng-model="$ctrl.state.logCollection" ng-change="$ctrl.state.autoScroll = $ctrl.state.logCollection; $ctrl.logCollectionChange($ctrl.state.logCollection)"><i></i>
|
||||
<input
|
||||
type="checkbox"
|
||||
ng-model="$ctrl.state.logCollection"
|
||||
ng-change="$ctrl.state.autoScroll = $ctrl.state.logCollection; $ctrl.logCollectionChange($ctrl.state.logCollection)"
|
||||
/><i></i>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -20,9 +24,7 @@
|
|||
<label for="tls" class="control-label text-left">
|
||||
Wrap lines
|
||||
</label>
|
||||
<label class="switch" style="margin-left: 20px;">
|
||||
<input type="checkbox" ng-model="$ctrl.state.wrapLines"><i></i>
|
||||
</label>
|
||||
<label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="$ctrl.state.wrapLines" /><i></i> </label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
|
@ -30,9 +32,7 @@
|
|||
<label for="tls" class="control-label text-left">
|
||||
Display timestamps
|
||||
</label>
|
||||
<label class="switch" style="margin-left: 20px;">
|
||||
<input type="checkbox" ng-model="$ctrl.displayTimestamps"><i></i>
|
||||
</label>
|
||||
<label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="$ctrl.displayTimestamps" /><i></i> </label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
Search
|
||||
</label>
|
||||
<div class="col-sm-11">
|
||||
<input class="form-control" type="text" name="logs_search" ng-model="$ctrl.state.search" ng-change="$ctrl.state.selectedLines.length = 0;" placeholder="Filter...">
|
||||
<input class="form-control" type="text" name="logs_search" ng-model="$ctrl.state.search" ng-change="$ctrl.state.selectedLines.length = 0;" placeholder="Filter..." />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
Lines
|
||||
</label>
|
||||
<div class="col-sm-11">
|
||||
<input class="form-control" type="number" name="lines_count" ng-model="$ctrl.lineCount" placeholder="Enter no of lines...">
|
||||
<input class="form-control" type="number" name="lines_count" ng-model="$ctrl.lineCount" placeholder="Enter no of lines..." />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" ng-if="$ctrl.state.copySupported">
|
||||
|
|
@ -67,9 +67,21 @@
|
|||
Actions
|
||||
</label>
|
||||
<div class="col-sm-11">
|
||||
<button class="btn btn-primary btn-sm" ng-click="$ctrl.copy()" ng-disabled="($ctrl.state.filteredLogs.length === 1 && !$ctrl.state.filteredLogs[0]) || !$ctrl.state.filteredLogs.length"><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy</button>
|
||||
<button class="btn btn-primary btn-sm" ng-click="$ctrl.copySelection()" ng-disabled="($ctrl.state.filteredLogs.length === 1 && !$ctrl.state.filteredLogs[0]) || !$ctrl.state.filteredLogs.length || !$ctrl.state.selectedLines.length"><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy selected lines</button>
|
||||
<button class="btn btn-primary btn-sm" ng-click="$ctrl.clearSelection()" ng-disabled="$ctrl.state.selectedLines.length === 0"><i class="fa fa-times space-right" aria-hidden="true"></i>Unselect</button>
|
||||
<button
|
||||
class="btn btn-primary btn-sm"
|
||||
ng-click="$ctrl.copy()"
|
||||
ng-disabled="($ctrl.state.filteredLogs.length === 1 && !$ctrl.state.filteredLogs[0]) || !$ctrl.state.filteredLogs.length"
|
||||
><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy</button
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary btn-sm"
|
||||
ng-click="$ctrl.copySelection()"
|
||||
ng-disabled="($ctrl.state.filteredLogs.length === 1 && !$ctrl.state.filteredLogs[0]) || !$ctrl.state.filteredLogs.length || !$ctrl.state.selectedLines.length"
|
||||
><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy selected lines</button
|
||||
>
|
||||
<button class="btn btn-primary btn-sm" ng-click="$ctrl.clearSelection()" ng-disabled="$ctrl.state.selectedLines.length === 0"
|
||||
><i class="fa fa-times space-right" aria-hidden="true"></i>Unselect</button
|
||||
>
|
||||
<span>
|
||||
<i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-left: 7px; display: none;"></i>
|
||||
</span>
|
||||
|
|
@ -81,9 +93,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" style="height:54%;">
|
||||
<div class="col-sm-12" style="height:100%;">
|
||||
<pre ng-class="{ 'wrap_lines': $ctrl.state.wrapLines }" class="log_viewer" scroll-glue="$ctrl.state.autoScroll" force-glue>
|
||||
<div class="row" style="height: 54%;">
|
||||
<div class="col-sm-12" style="height: 100%;">
|
||||
<pre ng-class="{ wrap_lines: $ctrl.state.wrapLines }" class="log_viewer" scroll-glue="$ctrl.state.autoScroll" force-glue>
|
||||
<div ng-repeat="line in $ctrl.state.filteredLogs = ($ctrl.data | filter:$ctrl.state.search) track by $index" class="line" ng-if="line"><p class="inner_line" ng-click="$ctrl.selectLine(line)" ng-class="{ 'line_selected': $ctrl.state.selectedLines.indexOf(line) > -1 }">{{ line }}</p></div>
|
||||
<div ng-if="!$ctrl.state.filteredLogs.length" class="line"><p class="inner_line">No log line matching the '{{ $ctrl.state.search }}' filter</p></div>
|
||||
<div ng-if="$ctrl.state.filteredLogs.length === 1 && !$ctrl.state.filteredLogs[0]" class="line"><p class="inner_line">No logs available</p></div>
|
||||
|
|
|
|||
|
|
@ -1,47 +1,47 @@
|
|||
import moment from 'moment';
|
||||
|
||||
angular.module('portainer.docker')
|
||||
.controller('LogViewerController', ['clipboard',
|
||||
function (clipboard) {
|
||||
angular.module('portainer.docker').controller('LogViewerController', [
|
||||
'clipboard',
|
||||
function (clipboard) {
|
||||
this.state = {
|
||||
availableSinceDatetime: [
|
||||
{ desc: 'Last day', value: moment().subtract(1, 'days').format() },
|
||||
{ desc: 'Last 4 hours', value: moment().subtract(4, 'hours').format() },
|
||||
{ desc: 'Last hour', value: moment().subtract(1, 'hours').format() },
|
||||
{ desc: 'Last 10 minutes', value: moment().subtract(10, 'minutes').format() },
|
||||
],
|
||||
copySupported: clipboard.supported,
|
||||
logCollection: true,
|
||||
autoScroll: true,
|
||||
wrapLines: true,
|
||||
search: '',
|
||||
filteredLogs: [],
|
||||
selectedLines: [],
|
||||
};
|
||||
|
||||
this.state = {
|
||||
availableSinceDatetime: [
|
||||
{ desc: 'Last day', value: moment().subtract(1, 'days').format() },
|
||||
{ desc: 'Last 4 hours', value: moment().subtract(4, 'hours').format() },
|
||||
{ desc: 'Last hour', value: moment().subtract(1, 'hours').format() },
|
||||
{ desc: 'Last 10 minutes', value: moment().subtract(10, 'minutes').format() }
|
||||
],
|
||||
copySupported: clipboard.supported,
|
||||
logCollection: true,
|
||||
autoScroll: true,
|
||||
wrapLines: true,
|
||||
search: '',
|
||||
filteredLogs: [],
|
||||
selectedLines: []
|
||||
};
|
||||
this.copy = function () {
|
||||
clipboard.copyText(this.state.filteredLogs);
|
||||
$('#refreshRateChange').show();
|
||||
$('#refreshRateChange').fadeOut(2000);
|
||||
};
|
||||
|
||||
this.copy = function() {
|
||||
clipboard.copyText(this.state.filteredLogs);
|
||||
$('#refreshRateChange').show();
|
||||
$('#refreshRateChange').fadeOut(2000);
|
||||
};
|
||||
this.copySelection = function () {
|
||||
clipboard.copyText(this.state.selectedLines);
|
||||
$('#refreshRateChange').show();
|
||||
$('#refreshRateChange').fadeOut(2000);
|
||||
};
|
||||
|
||||
this.copySelection = function() {
|
||||
clipboard.copyText(this.state.selectedLines);
|
||||
$('#refreshRateChange').show();
|
||||
$('#refreshRateChange').fadeOut(2000);
|
||||
};
|
||||
this.clearSelection = function () {
|
||||
this.state.selectedLines = [];
|
||||
};
|
||||
|
||||
this.clearSelection = function() {
|
||||
this.state.selectedLines = [];
|
||||
};
|
||||
|
||||
this.selectLine = function(line) {
|
||||
var idx = this.state.selectedLines.indexOf(line);
|
||||
if (idx === -1) {
|
||||
this.state.selectedLines.push(line);
|
||||
} else {
|
||||
this.state.selectedLines.splice(idx, 1);
|
||||
}
|
||||
};
|
||||
}]);
|
||||
this.selectLine = function (line) {
|
||||
var idx = this.state.selectedLines.indexOf(line);
|
||||
if (idx === -1) {
|
||||
this.state.selectedLines.push(line);
|
||||
} else {
|
||||
this.state.selectedLines.splice(idx, 1);
|
||||
}
|
||||
};
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@ angular.module('portainer.docker').component('networkMacvlanForm', {
|
|||
controller: 'NetworkMacvlanFormController',
|
||||
bindings: {
|
||||
data: '=',
|
||||
applicationState: '<'
|
||||
}
|
||||
});
|
||||
applicationState: '<',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@
|
|||
</span>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group" style="margin-bottom: 0">
|
||||
<div class="form-group" style="margin-bottom: 0;">
|
||||
<div class="boxselector_wrapper">
|
||||
<div>
|
||||
<input type="radio" id="network_config" ng-model="$ctrl.data.Scope" value="local">
|
||||
<input type="radio" id="network_config" ng-model="$ctrl.data.Scope" value="local" />
|
||||
<label for="network_config">
|
||||
<div class="boxselector_header">
|
||||
<i class="fa fa-cog" aria-hidden="true" style="margin-right: 2px;"></i>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" id="network_deploy" ng-model="$ctrl.data.Scope" value="swarm" ng-disabled="$ctrl.availableNetworks.length === 0">
|
||||
<input type="radio" id="network_deploy" ng-model="$ctrl.data.Scope" value="swarm" ng-disabled="$ctrl.availableNetworks.length === 0" />
|
||||
<label for="network_deploy" ng-class="$ctrl.availableNetworks.length === 0 ? 'boxselector_disabled' : ''">
|
||||
<div class="boxselector_header">
|
||||
<i class="fa fa-sitemap" aria-hidden="true" style="margin-right: 2px;"></i>
|
||||
|
|
@ -44,15 +44,20 @@
|
|||
<div class="form-group">
|
||||
<label for="network_card" class="col-sm-3 col-lg-2 control-label text-left">Parent network card</label>
|
||||
<div class="col-sm-9 col-lg-10">
|
||||
<input type="text" class="form-control" name="network_card" ng-model="$ctrl.data.ParentNetworkCard" placeholder="e.g. eth0 or ens160 ..."
|
||||
ng-required="$ctrl.data.Scope === 'local' && !$ctrl.data.ParentNetworkCard">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="network_card"
|
||||
ng-model="$ctrl.data.ParentNetworkCard"
|
||||
placeholder="e.g. eth0 or ens160 ..."
|
||||
ng-required="$ctrl.data.Scope === 'local' && !$ctrl.data.ParentNetworkCard"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" ng-show="macvlanConfigurationForm.network_card.$invalid">
|
||||
<div class="col-sm-12 small text-warning">
|
||||
<div ng-messages="macvlanConfigurationForm.network_card.$error">
|
||||
<p ng-message="required">
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Parent network card must be specified.</p>
|
||||
<p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Parent network card must be specified.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -61,17 +66,25 @@
|
|||
<div ng-if="$ctrl.applicationState.endpoint.mode.agentProxy && $ctrl.applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<macvlan-nodes-datatable title-text="Select the nodes where you want to deploy the local configuration" title-icon="fa-hdd"
|
||||
dataset="$ctrl.nodes" table-key="nodes" state="$ctrl.data.DatatableState" order-by="Hostname" show-ip-address-column="$ctrl.applicationState.endpoint.apiVersion >= 1.25"
|
||||
access-to-node-details="!$ctrl.applicationState.application.authentication || $ctrl.isAdmin" name="node_selector"
|
||||
ng-model="tmp" ng-required="$ctrl.requiredNodeSelection()"></macvlan-nodes-datatable>
|
||||
<macvlan-nodes-datatable
|
||||
title-text="Select the nodes where you want to deploy the local configuration"
|
||||
title-icon="fa-hdd"
|
||||
dataset="$ctrl.nodes"
|
||||
table-key="nodes"
|
||||
state="$ctrl.data.DatatableState"
|
||||
order-by="Hostname"
|
||||
show-ip-address-column="$ctrl.applicationState.endpoint.apiVersion >= 1.25"
|
||||
access-to-node-details="!$ctrl.applicationState.application.authentication || $ctrl.isAdmin"
|
||||
name="node_selector"
|
||||
ng-model="tmp"
|
||||
ng-required="$ctrl.requiredNodeSelection()"
|
||||
></macvlan-nodes-datatable>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" ng-show="macvlanConfigurationForm.node_selector.$invalid">
|
||||
<div class="col-sm-12 small text-warning">
|
||||
<div ng-messages="macvlanConfigurationForm.node_selector.$error">
|
||||
<p ng-message="required">
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> At least one node must be selected.</p>
|
||||
<p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> At least one node must be selected.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -86,8 +99,13 @@
|
|||
<div class="form-group">
|
||||
<label for="config_network" class="col-sm-2 col-lg-1 control-label text-left">Configuration</label>
|
||||
<div class="col-sm-9">
|
||||
<select class="form-control" ng-options="net.Name for net in $ctrl.availableNetworks" ng-model="$ctrl.data.SelectedNetworkConfig"
|
||||
name="config_network" ng-required="$ctrl.requiredConfigSelection()">
|
||||
<select
|
||||
class="form-control"
|
||||
ng-options="net.Name for net in $ctrl.availableNetworks"
|
||||
ng-model="$ctrl.data.SelectedNetworkConfig"
|
||||
name="config_network"
|
||||
ng-required="$ctrl.requiredConfigSelection()"
|
||||
>
|
||||
<option selected disabled hidden value="">Select a network</option>
|
||||
</select>
|
||||
</div>
|
||||
|
|
@ -96,8 +114,7 @@
|
|||
<div class="form-group" ng-show="macvlanConfigurationForm.config_network.$invalid">
|
||||
<div class="col-sm-12 small text-warning">
|
||||
<div ng-messages="macvlanConfigurationForm.config_network.$error">
|
||||
<p ng-message="required">
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Select a configuration network.</p>
|
||||
<p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Select a configuration network.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -105,4 +122,4 @@
|
|||
</div>
|
||||
<!-- deploy-inputs -->
|
||||
</ng-form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,50 +1,51 @@
|
|||
angular.module('portainer.docker')
|
||||
.controller('NetworkMacvlanFormController', ['$q', 'NodeService', 'NetworkService', 'Notifications', 'StateManager', 'Authentication',
|
||||
function ($q, NodeService, NetworkService, Notifications, StateManager, Authentication) {
|
||||
var ctrl = this;
|
||||
angular.module('portainer.docker').controller('NetworkMacvlanFormController', [
|
||||
'$q',
|
||||
'NodeService',
|
||||
'NetworkService',
|
||||
'Notifications',
|
||||
'StateManager',
|
||||
'Authentication',
|
||||
function ($q, NodeService, NetworkService, Notifications, StateManager, Authentication) {
|
||||
var ctrl = this;
|
||||
|
||||
ctrl.requiredNodeSelection = function () {
|
||||
if (ctrl.data.Scope !== 'local' || ctrl.data.DatatableState === undefined) {
|
||||
return false;
|
||||
}
|
||||
return ctrl.data.DatatableState.selectedItemCount === 0;
|
||||
};
|
||||
|
||||
ctrl.requiredConfigSelection = function () {
|
||||
if (ctrl.data.Scope !== 'swarm') {
|
||||
return false;
|
||||
}
|
||||
return !ctrl.data.SelectedNetworkConfig;
|
||||
};
|
||||
|
||||
function initComponent() {
|
||||
if (StateManager.getState().application.authentication) {
|
||||
var isAdmin = Authentication.isAdmin();
|
||||
ctrl.isAdmin = isAdmin;
|
||||
}
|
||||
var provider = ctrl.applicationState.endpoint.mode.provider;
|
||||
var apiVersion = ctrl.applicationState.endpoint.apiVersion;
|
||||
$q.all({
|
||||
nodes: provider !== 'DOCKER_SWARM_MODE' || NodeService.nodes(),
|
||||
networks: NetworkService.networks(
|
||||
provider === 'DOCKER_STANDALONE' || provider === 'DOCKER_SWARM_MODE',
|
||||
false,
|
||||
provider === 'DOCKER_SWARM_MODE' && apiVersion >= 1.25
|
||||
)
|
||||
})
|
||||
.then(function success(data) {
|
||||
if (data.nodes !== true) {
|
||||
ctrl.nodes = data.nodes;
|
||||
}
|
||||
ctrl.availableNetworks = data.networks.filter(function (item) {
|
||||
return item.ConfigOnly === true;
|
||||
});
|
||||
})
|
||||
.catch(function error(err) {
|
||||
Notifications.error('Failure', err, 'Unable to retrieve informations for macvlan');
|
||||
});
|
||||
ctrl.requiredNodeSelection = function () {
|
||||
if (ctrl.data.Scope !== 'local' || ctrl.data.DatatableState === undefined) {
|
||||
return false;
|
||||
}
|
||||
return ctrl.data.DatatableState.selectedItemCount === 0;
|
||||
};
|
||||
|
||||
initComponent();
|
||||
ctrl.requiredConfigSelection = function () {
|
||||
if (ctrl.data.Scope !== 'swarm') {
|
||||
return false;
|
||||
}
|
||||
return !ctrl.data.SelectedNetworkConfig;
|
||||
};
|
||||
|
||||
function initComponent() {
|
||||
if (StateManager.getState().application.authentication) {
|
||||
var isAdmin = Authentication.isAdmin();
|
||||
ctrl.isAdmin = isAdmin;
|
||||
}
|
||||
var provider = ctrl.applicationState.endpoint.mode.provider;
|
||||
var apiVersion = ctrl.applicationState.endpoint.apiVersion;
|
||||
$q.all({
|
||||
nodes: provider !== 'DOCKER_SWARM_MODE' || NodeService.nodes(),
|
||||
networks: NetworkService.networks(provider === 'DOCKER_STANDALONE' || provider === 'DOCKER_SWARM_MODE', false, provider === 'DOCKER_SWARM_MODE' && apiVersion >= 1.25),
|
||||
})
|
||||
.then(function success(data) {
|
||||
if (data.nodes !== true) {
|
||||
ctrl.nodes = data.nodes;
|
||||
}
|
||||
ctrl.availableNetworks = data.networks.filter(function (item) {
|
||||
return item.ConfigOnly === true;
|
||||
});
|
||||
})
|
||||
.catch(function error(err) {
|
||||
Notifications.error('Failure', err, 'Unable to retrieve informations for macvlan');
|
||||
});
|
||||
}
|
||||
]);
|
||||
|
||||
initComponent();
|
||||
},
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ export function MacvlanFormData() {
|
|||
this.Scope = 'local';
|
||||
this.SelectedNetworkConfig = '';
|
||||
this.DatatableState = {
|
||||
selectedItems: []
|
||||
selectedItems: [],
|
||||
};
|
||||
this.ParentNetworkCard = '';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
angular.module('portainer.docker').component('volumesNfsForm', {
|
||||
templateUrl: './volumesnfsForm.html',
|
||||
bindings: {
|
||||
data: '='
|
||||
}
|
||||
data: '=',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,4 +5,4 @@ export function VolumesNFSFormData() {
|
|||
this.version = 'NFS4';
|
||||
this.options = 'rw,noatime,rsize=8192,wsize=8192,tcp,timeo=14';
|
||||
this.versions = ['NFS4', 'NFS'];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
Use NFS volume
|
||||
</label>
|
||||
<label class="switch" style="margin-left: 20px;">
|
||||
<input type="checkbox" name="useNFS" ng-model="$ctrl.data.useNFS">
|
||||
<input type="checkbox" name="useNFS" ng-model="$ctrl.data.useNFS" />
|
||||
<i></i>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -18,15 +18,13 @@
|
|||
<div class="form-group col-md-12">
|
||||
<label for="nfs_address" class="col-sm-2 col-md-1 control-label text-left">Address</label>
|
||||
<div class="col-sm-10 col-md-11">
|
||||
<input type="text" class="form-control" ng-model="$ctrl.data.serverAddress" name="nfs_address" placeholder="e.g. my.nfs-server.com OR xxx.xxx.xxx.xxx"
|
||||
required>
|
||||
<input type="text" class="form-control" ng-model="$ctrl.data.serverAddress" name="nfs_address" placeholder="e.g. my.nfs-server.com OR xxx.xxx.xxx.xxx" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-md-12" ng-show="nfsInformationForm.nfs_address.$invalid">
|
||||
<div class="small text-warning">
|
||||
<div ng-messages="nfsInformationForm.nfs_address.$error">
|
||||
<p ng-message="required">
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
|
||||
<p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -35,15 +33,13 @@
|
|||
<div class="form-group col-md-12">
|
||||
<label for="nfs_version" class="col-sm-2 col-md-1 control-label text-left">NFS Version</label>
|
||||
<div class="col-sm-10 col-md-11">
|
||||
<select class="form-control" ng-model="$ctrl.data.version" name="nfs_version" ng-options="version for version in $ctrl.data.versions"
|
||||
required></select>
|
||||
<select class="form-control" ng-model="$ctrl.data.version" name="nfs_version" ng-options="version for version in $ctrl.data.versions" required></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-md-12" ng-show="nfsInformationForm.nfs_version.$invalid">
|
||||
<div class="small text-warning">
|
||||
<div ng-messages="nfsInformationForm.nfs_version.$error">
|
||||
<p ng-message="required">
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
|
||||
<p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -52,34 +48,31 @@
|
|||
<div class="form-group col-md-12">
|
||||
<label for="nfs_mountpoint" class="col-sm-2 col-md-1 control-label text-left">Mount point</label>
|
||||
<div class="col-sm-10 col-md-11">
|
||||
<input type="text" class="form-control" ng-model="$ctrl.data.mountPoint" name="nfs_mountpoint" placeholder="e.g. /export/share or :/export/share"
|
||||
required>
|
||||
<input type="text" class="form-control" ng-model="$ctrl.data.mountPoint" name="nfs_mountpoint" placeholder="e.g. /export/share or :/export/share" required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-md-12" ng-show="nfsInformationForm.nfs_mountpoint.$invalid">
|
||||
<div class="small text-warning">
|
||||
<div ng-messages="nfsInformationForm.nfs_mountpoint.$error">
|
||||
<p ng-message="required">
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
|
||||
<p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- !mount-point-input -->
|
||||
<!-- options-input -->
|
||||
<div class="form-group col-md-12">
|
||||
<label for="nfs_options" class="col-sm-2 col-md-1 control-label text-left">Options
|
||||
<label for="nfs_options" class="col-sm-2 col-md-1 control-label text-left"
|
||||
>Options
|
||||
<portainer-tooltip position="bottom" message="Comma separated list of options"></portainer-tooltip>
|
||||
</label>
|
||||
<div class="col-sm-10 col-md-11">
|
||||
<input type="text" class="form-control" ng-model="$ctrl.data.options" name="nfs_options" placeholder="e.g. rw,noatime,tcp ..."
|
||||
required>
|
||||
<input type="text" class="form-control" ng-model="$ctrl.data.options" name="nfs_options" placeholder="e.g. rw,noatime,tcp ..." required />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-md-12" ng-show="nfsInformationForm.nfs_options.$invalid">
|
||||
<div class="small text-warning">
|
||||
<div ng-messages="nfsInformationForm.nfs_options.$error">
|
||||
<p ng-message="required">
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
|
||||
<p ng-message="required"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -87,4 +80,4 @@
|
|||
</ng-form>
|
||||
</div>
|
||||
<!-- !NFS-settings -->
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue