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

refactor(docker/switch/component): implement new design [EE-3688] (#7239)

Browse source 
* refactor(docker/switch/component): implement new design [EE=3688]

* revert create volume

* revert por-switch on exec.html

* refactor(container): switch fields on container creation page and edition page

* refactor(container): switch fields on networking/secret/servicewebhook/swarmvisual

* bug fixed

* code review issues

* merge code

* fix teaser for container edition

* fix encode secret toggle bug on adding secret page

* fixed a bug for service webhook toggle
This commit is contained in:
Zhang Hao 2022-07-20 08:39:44 +08:00 • committed by GitHub
parent e07253bcef
commit 43bbeed141
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 194 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

36
app/docker/views/containers/create/createContainerController.js
View file

@ -110,6 +110,42 @@ angular.module('portainer.docker').controller('CreateContainerController', [
settingUnlimitedResources: false,
};
$scope.onAlwaysPullChange = onAlwaysPullChange;
$scope.handlePublishAllPortsChange = handlePublishAllPortsChange;
$scope.handleAutoRemoveChange = handleAutoRemoveChange;
$scope.handlePrivilegedChange = handlePrivilegedChange;
$scope.handleInitChange = handleInitChange;
function onAlwaysPullChange(checked) {
return $scope.$evalAsync(() => {
$scope.formValues.alwaysPull = checked;
});
}
function handlePublishAllPortsChange(checked) {
return $scope.$evalAsync(() => {
$scope.config.HostConfig.PublishAllPorts = checked;
});
}
function handleAutoRemoveChange(checked) {
return $scope.$evalAsync(() => {
$scope.config.HostConfig.AutoRemove = checked;
});
}
function handlePrivilegedChange(checked) {
return $scope.$evalAsync(() => {
$scope.config.HostConfig.Privileged = checked;
});
}
function handleInitChange(checked) {
return $scope.$evalAsync(() => {
$scope.config.HostConfig.Init = checked;
});
}
$scope.handleEnvVarChange = handleEnvVarChange;
function handleEnvVarChange(value) {
$scope.formValues.Env = value;

71
app/docker/views/containers/create/createcontainer.html
View file

@ -48,11 +48,15 @@
<!-- always-pull -->
<div class="form-group">
<div class="col-sm-12">
<label for="ownership" class="control-label text-left">
Always pull the image
<portainer-tooltip message="'When enabled, Portainer will automatically try to pull the specified image before creating the container.'"></portainer-tooltip>
</label>
<label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="formValues.alwaysPull" ng-disabled="!state.pullImageValidity" /><i></i> </label>
<por-switch-field
name="'alwaysPull'"
label-class="'col-sm-2'"
checked="formValues.alwaysPull"
disabled="!state.pullImageValidity"
label="'Always pull the image'"
on-change="(onAlwaysPullChange)"
tooltip="'When enabled, Portainer will automatically try to pull the specified image before creating the container.'"
></por-switch-field>
</div>
</div>
<!-- !always-pull -->
@ -64,18 +68,12 @@
<div class="col-sm-12 form-section-title"> Webhooks </div>
<div class="form-group">
<div class="col-sm-12">
<label class="control-label text-left">
Create a container webhook
<portainer-tooltip
position="'top'"
message="'Create a webhook (or callback URI) to automate the recreate this container. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and recreate this container.'"
></portainer-tooltip>
</label>
<label class="switch box-selector-item limited business" style="margin-left: 20px">
<input type="checkbox" ng-model="formValues.EnableWebhook" disabled="disabled" ng-checked="false" />
<i class="orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
</label>
<be-feature-indicator feature="containerWebhookFeature"></be-feature-indicator>
<por-switch-field
feature-id="'container-webhook'"
label-class="'col-sm-2'"
label="'Create a container webhook'"
tooltip="'Create a webhook (or callback URI) to automate the recreate this container. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and recreate this container.'"
></por-switch-field>
</div>
</div>
</div>
@ -85,13 +83,13 @@
<!-- publish-exposed-ports -->
<div class="form-group">
<div class="col-sm-12">
<label class="control-label text-left">
Publish all exposed network ports to random host ports
<portainer-tooltip
message="'When enabled, Portainer will let Docker automatically map a random port on the host to each one defined in the image Dockerfile.'"
></portainer-tooltip>
</label>
<label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="config.HostConfig.PublishAllPorts" /><i></i> </label>
<por-switch-field
label-class="'col-sm-2'"
checked="config.HostConfig.PublishAllPorts"
label="'Publish all exposed network ports to random host ports'"
on-change="(handlePublishAllPortsChange)"
tooltip="'When enabled, Portainer will let Docker automatically map a random port on the host to each one defined in the image Dockerfile.'"
></por-switch-field>
</div>
</div>
<!-- !publish-exposed-ports -->
@ -156,13 +154,13 @@
<!-- autoremove -->
<div class="form-group">
<div class="col-sm-12">
<label for="ownership" class="control-label text-left">
Auto remove
<portainer-tooltip
message="'When enabled, Portainer will automatically remove the container when it exits. This is useful when you want to use the container only once.'"
></portainer-tooltip>
</label>
<label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="config.HostConfig.AutoRemove" /><i></i> </label>
<por-switch-field
label-class="'col-sm-2'"
checked="config.HostConfig.AutoRemove"
label="'Auto remove'"
on-change="(handleAutoRemoveChange)"
tooltip="'When enabled, Portainer will automatically remove the container when it exits. This is useful when you want to use the container only once.'"
></por-switch-field>
</div>
</div>
<!-- !autoremove -->
@ -614,16 +612,19 @@
<!-- privileged-mode -->
<div class="form-group" ng-if="isAdmin || allowPrivilegedMode">
<div class="col-sm-12">
<label for="privileged_mode" class="control-label text-left"> Privileged mode </label>
<label class="switch" style="margin-left: 20px"> <input type="checkbox" name="privileged_mode" ng-model="config.HostConfig.Privileged" /><i></i> </label>
<por-switch-field
label-class="'col-sm-2'"
checked="config.HostConfig.Privileged"
label="'Privileged mode'"
on-change="(handlePrivilegedChange)"
></por-switch-field>
</div>
</div>
<!-- !privileged-mode -->
<!-- init -->
<div class="form-group" ng-if="applicationState.endpoint.apiVersion >= 1.37">
<div class="col-sm-12">
<label for="init" class="control-label text-left"> Init </label>
<label class="switch" style="margin-left: 20px"> <input type="checkbox" name="init" ng-model="config.HostConfig.Init" /><i></i> </label>
<por-switch-field label-class="'col-sm-2'" checked="config.HostConfig.Init" label="'Init'" on-change="(handleInitChange)"></por-switch-field>
</div>
</div>
<!-- !init -->

23
app/docker/views/containers/edit/container.html
View file

@ -107,17 +107,18 @@
<td>Finished</td>
<td>{{ container.State.FinishedAt | getisodate }}</td>
</tr>
<tr ng-if="isAdmin && displayRecreateButton && applicationState.endpoint.type !== 4">
<td colspan="1">
Container webhook
<portainer-tooltip
position="'top'"
message="'Webhook (or callback URI) used to automate the recreation of this container. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and recreate this container.'"
></portainer-tooltip>
<label class="switch box-selector-item limited business" style="margin-left: 20px">
<input disable-authorization="DockerContainerUpdate" type="checkbox" ng-model="WebhookExists" disabled="disabled" ng-checked="false" /><i></i>
</label>
<be-feature-indicator feature="containerWebhookFeature"></be-feature-indicator>
<tr ng-if="isAdmin && displayCreateWebhookButton && applicationState.endpoint.type !== 4">
<td colspan="6">
<div class="form-group">
<div class="col-sm-12">
<por-switch-field
tooltip="'Webhook (or callback URI) used to automate the recreation of this container. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and recreate this container.'"
label-class="'col-sm-2'"
label="'Container webhook'"
feature-id="'container-webhook'"
></por-switch-field>
</div>
</div>
</td>
</tr>
<tr authorization="DockerContainerLogs, DockerContainerInspect, DockerContainerStats, DockerExecStart">

2
app/docker/views/containers/edit/containerController.js
View file

@ -52,6 +52,7 @@ angular.module('portainer.docker').controller('ContainerController', [
$scope.activityTime = 0;
$scope.portBindings = [];
$scope.displayRecreateButton = false;
$scope.displayCreateWebhookButton = false;
$scope.containerWebhookFeature = FeatureId.CONTAINER_WEBHOOK;
$scope.config = {
@ -150,6 +151,7 @@ angular.module('portainer.docker').controller('ContainerController', [
!allowPrivilegedModeForRegularUsers;
$scope.displayRecreateButton = !inSwarm && !autoRemove && (admin || !settingRestrictsRegularUsers);
$scope.displayCreateWebhookButton = $scope.displayRecreateButton;
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve container info');