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

refactor(docker/services): migrate scale form to react [EE-6057] (#10208)

Browse source
This commit is contained in:
Chaim Lev-Ari 2023-09-04 20:24:41 +01:00 • committed by GitHub
parent f7366d9788
commit e82b34b775
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 543 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,32 +1,17 @@
import { confirmDelete } from '@@/modals/confirm';
import { confirmServiceForceUpdate } from '@/react/docker/services/common/update-service-modal';
import { convertServiceToConfig } from '@/react/docker/services/common/convertServiceToConfig';
angular.module('portainer.docker').controller('ServicesDatatableActionsController', [
'$q',
'$state',
'ServiceService',
'ServiceHelper',
'Notifications',
'ImageHelper',
'WebhookService',
function ($q, $state, ServiceService, ServiceHelper, Notifications, ImageHelper, WebhookService) {
function ($q, $state, ServiceService, Notifications, ImageHelper, WebhookService) {
const ctrl = this;
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) {
confirmDelete('Do you want to remove the selected service(s)? All the containers associated to the selected service(s) will be removed too.').then((confirmed) => {
if (!confirmed) {
@ -51,7 +36,7 @@ angular.module('portainer.docker').controller('ServicesDatatableActionsControlle
function forceUpdateServices(services, pullImage) {
var actionCount = services.length;
angular.forEach(services, function (service) {
var config = ServiceHelper.serviceToConfig(service.Model);
var config = convertServiceToConfig(service.Model);
if (pullImage) {
config.TaskTemplate.ContainerSpec.Image = ImageHelper.removeDigestFromRepository(config.TaskTemplate.ContainerSpec.Image);
}

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

@ -178,32 +178,11 @@
</td>
<td ng-if="$ctrl.showStackColumn">{{ item.StackName ? item.StackName : '-' }}</td>
<td ng-show="$ctrl.columnVisibility.columns.image.display">{{ item.Image | hideshasum }}</td>
<td ng-controller="ServicesDatatableActionsController as actionCtrl">
<td>
{{ item.Mode }}
<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 vertical-center" ng-click="item.Scale = true; item.ReplicaCount = item.Replicas; $event.stopPropagation();">
<pr-icon icon="'minimize-2'"></pr-icon>
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();"
/>
<a class="interactive vertical-center" ng-click="item.Scale = false; $event.stopPropagation();">
<pr-icon icon="'x'"></pr-icon>
</a>
<a class="interactive vertical-center" ng-click="actionCtrl.scaleAction(item); $event.stopPropagation();">
<pr-icon icon="'check-square'"></pr-icon>
</a>
<span ng-if="item.Mode === 'replicated'">
<docker-services-datatable-scale-service-button service="item"></docker-services-datatable-scale-service-button>
</span>
</td>
<td ng-show="$ctrl.columnVisibility.columns.ports.display">

12
app/docker/helpers/serviceHelper.js
View file

@ -21,18 +21,6 @@ angular.module('portainer.docker').factory('ServiceHelper', [
tasks = otherServicesTasks;
};
helper.serviceToConfig = function (service) {
return {
Name: service.Spec.Name,
Labels: service.Spec.Labels,
TaskTemplate: service.Spec.TaskTemplate,
Mode: service.Spec.Mode,
UpdateConfig: service.Spec.UpdateConfig,
Networks: service.Spec.Networks,
EndpointSpec: service.Spec.EndpointSpec,
};
};
helper.translateKeyValueToPlacementPreferences = function (keyValuePreferences) {
if (keyValuePreferences) {
var preferences = [];

117
app/docker/models/service.js
View file

@ -1,117 +0,0 @@
import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
export function ServiceViewModel(data, runningTasks, allTasks) {
this.Model = data;
this.Id = data.ID;
this.Tasks = [];
this.Name = data.Spec.Name;
this.CreatedAt = data.CreatedAt;
this.UpdatedAt = data.UpdatedAt;
this.Image = data.Spec.TaskTemplate.ContainerSpec.Image;
this.Version = data.Version.Index;
if (data.Spec.Mode.Replicated) {
this.Mode = 'replicated';
this.Replicas = data.Spec.Mode.Replicated.Replicas;
} else {
this.Mode = 'global';
if (allTasks) {
this.Replicas = allTasks.length;
}
}
if (runningTasks) {
this.Running = runningTasks.length;
}
if (data.Spec.TaskTemplate.Resources) {
if (data.Spec.TaskTemplate.Resources.Limits) {
this.LimitNanoCPUs = data.Spec.TaskTemplate.Resources.Limits.NanoCPUs;
this.LimitMemoryBytes = data.Spec.TaskTemplate.Resources.Limits.MemoryBytes;
}
if (data.Spec.TaskTemplate.Resources.Reservations) {
this.ReservationNanoCPUs = data.Spec.TaskTemplate.Resources.Reservations.NanoCPUs;
this.ReservationMemoryBytes = data.Spec.TaskTemplate.Resources.Reservations.MemoryBytes;
}
}
if (data.Spec.TaskTemplate.RestartPolicy) {
this.RestartCondition = data.Spec.TaskTemplate.RestartPolicy.Condition || 'any';
this.RestartDelay = data.Spec.TaskTemplate.RestartPolicy.Delay || 5000000000;
this.RestartMaxAttempts = data.Spec.TaskTemplate.RestartPolicy.MaxAttempts || 0;
this.RestartWindow = data.Spec.TaskTemplate.RestartPolicy.Window || 0;
} else {
this.RestartCondition = 'any';
this.RestartDelay = 5000000000;
this.RestartMaxAttempts = 0;
this.RestartWindow = 0;
}
if (data.Spec.TaskTemplate.LogDriver) {
this.LogDriverName = data.Spec.TaskTemplate.LogDriver.Name || '';
this.LogDriverOpts = data.Spec.TaskTemplate.LogDriver.Options || [];
} else {
this.LogDriverName = '';
this.LogDriverOpts = [];
}
this.Constraints = data.Spec.TaskTemplate.Placement ? data.Spec.TaskTemplate.Placement.Constraints || [] : [];
this.Preferences = data.Spec.TaskTemplate.Placement ? data.Spec.TaskTemplate.Placement.Preferences || [] : [];
this.Platforms = data.Spec.TaskTemplate.Placement ? data.Spec.TaskTemplate.Placement.Platforms || [] : [];
this.Labels = data.Spec.Labels;
if (this.Labels && this.Labels['com.docker.stack.namespace']) {
this.StackName = this.Labels['com.docker.stack.namespace'];
}
var containerSpec = data.Spec.TaskTemplate.ContainerSpec;
if (containerSpec) {
this.ContainerLabels = containerSpec.Labels;
this.Command = containerSpec.Command;
this.Arguments = containerSpec.Args;
this.Hostname = containerSpec.Hostname;
this.Env = containerSpec.Env;
this.Dir = containerSpec.Dir;
this.User = containerSpec.User;
this.Groups = containerSpec.Groups;
this.TTY = containerSpec.TTY;
this.OpenStdin = containerSpec.OpenStdin;
this.ReadOnly = containerSpec.ReadOnly;
this.Mounts = containerSpec.Mounts || [];
this.StopSignal = containerSpec.StopSignal;
this.StopGracePeriod = containerSpec.StopGracePeriod;
this.HealthCheck = containerSpec.HealthCheck || {};
this.Hosts = containerSpec.Hosts;
this.DNSConfig = containerSpec.DNSConfig;
this.Secrets = containerSpec.Secrets;
this.Configs = containerSpec.Configs;
}
if (data.Endpoint) {
this.Ports = data.Endpoint.Ports;
}
this.LogDriver = data.Spec.TaskTemplate.LogDriver;
this.Runtime = data.Spec.TaskTemplate.Runtime;
this.VirtualIPs = data.Endpoint ? data.Endpoint.VirtualIPs : [];
if (data.Spec.UpdateConfig) {
this.UpdateParallelism = typeof data.Spec.UpdateConfig.Parallelism !== 'undefined' ? data.Spec.UpdateConfig.Parallelism || 0 : 1;
this.UpdateDelay = data.Spec.UpdateConfig.Delay || 0;
this.UpdateFailureAction = data.Spec.UpdateConfig.FailureAction || 'pause';
this.UpdateOrder = data.Spec.UpdateConfig.Order || 'stop-first';
} else {
this.UpdateParallelism = 1;
this.UpdateDelay = 0;
this.UpdateFailureAction = 'pause';
this.UpdateOrder = 'stop-first';
}
this.RollbackConfig = data.Spec.RollbackConfig;
this.Checked = false;
this.Scale = false;
this.EditName = false;
if (data.Portainer) {
if (data.Portainer.ResourceControl) {
this.ResourceControl = new ResourceControlViewModel(data.Portainer.ResourceControl);
}
}
}

269
app/docker/models/service.ts Normal file
View file

@ -0,0 +1,269 @@
import {
EndpointPortConfig,
HealthConfig,
Mount,
Platform,
Service,
ServiceSpec,
TaskSpec,
} from 'docker-types/generated/1.41';
import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
import { PortainerMetadata } from '@/react/docker/types';
import { WithRequiredProperty } from '@/types';
import { TaskViewModel } from './task';
type ContainerSpec = WithRequiredProperty<
TaskSpec,
'ContainerSpec'
>['ContainerSpec'];
export class ServiceViewModel {
Model: Service;
Id: string;
Tasks: TaskViewModel[];
Name: string;
CreatedAt: string | undefined;
UpdatedAt: string | undefined;
Image: string | undefined;
Version: number | undefined;
Mode: string;
Replicas: number | undefined;
Running?: number;
LimitNanoCPUs: number | undefined;
LimitMemoryBytes: number | undefined;
ReservationNanoCPUs: number | undefined;
ReservationMemoryBytes: number | undefined;
RestartCondition: string;
RestartDelay: number;
RestartMaxAttempts: number;
RestartWindow: number;
LogDriverName: string;
LogDriverOpts: never[] | Record<string, string>;
Constraints: string[];
Preferences: {
Spread?: { SpreadDescriptor?: string | undefined } | undefined;
}[];
Platforms?: Array<Platform>;
Labels: Record<string, string> | undefined;
StackName?: string;
ContainerLabels: Record<string, string> | undefined;
Command: string[] | undefined;
Arguments: string[] | undefined;
Hostname: string | undefined;
Env: string[] | undefined;
Dir: string | undefined;
User: string | undefined;
Groups: string[] | undefined;
TTY: boolean | undefined;
OpenStdin: boolean | undefined;
ReadOnly: boolean | undefined;
Mounts?: Array<Mount>;
StopSignal: string | undefined;
StopGracePeriod: number | undefined;
HealthCheck?: HealthConfig;
Hosts: string[] | undefined;
DNSConfig?: ContainerSpec['DNSConfig'];
Secrets?: ContainerSpec['Secrets'];
Configs: ContainerSpec['Configs'];
Ports?: Array<EndpointPortConfig>;
LogDriver: TaskSpec['LogDriver'];
Runtime: string | undefined;
VirtualIPs:
| { NetworkID?: string | undefined; Addr?: string | undefined }[]
| undefined;
UpdateParallelism: number;
UpdateDelay: number;
UpdateFailureAction: string;
UpdateOrder: string;
RollbackConfig: ServiceSpec['RollbackConfig'];
Checked: boolean;
Scale: boolean;
EditName: boolean;
ResourceControl?: ResourceControlViewModel;
constructor(data: Service & { Portainer?: PortainerMetadata }) {
this.Model = data;
this.Id = data.ID || '';
this.Tasks = [];
this.Name = data.Spec?.Name || '';
this.CreatedAt = data.CreatedAt;
this.UpdatedAt = data.UpdatedAt;
this.Image = data.Spec?.TaskTemplate?.ContainerSpec?.Image;
this.Version = data.Version?.Index;
if (data.Spec?.Mode?.Replicated) {
this.Mode = 'replicated';
this.Replicas = data.Spec.Mode.Replicated.Replicas;
} else {
this.Mode = 'global';
}
if (data.Spec?.TaskTemplate?.Resources) {
if (data.Spec.TaskTemplate.Resources.Limits) {
this.LimitNanoCPUs = data.Spec.TaskTemplate.Resources.Limits.NanoCPUs;
this.LimitMemoryBytes =
data.Spec.TaskTemplate.Resources.Limits.MemoryBytes;
}
if (data.Spec.TaskTemplate.Resources.Reservations) {
this.ReservationNanoCPUs =
data.Spec.TaskTemplate.Resources.Reservations.NanoCPUs;
this.ReservationMemoryBytes =
data.Spec.TaskTemplate.Resources.Reservations.MemoryBytes;
}
}
if (data.Spec?.TaskTemplate?.RestartPolicy) {
this.RestartCondition =
data.Spec.TaskTemplate.RestartPolicy.Condition || 'any';
this.RestartDelay =
data.Spec.TaskTemplate.RestartPolicy.Delay || 5000000000;
this.RestartMaxAttempts =
data.Spec.TaskTemplate.RestartPolicy.MaxAttempts || 0;
this.RestartWindow = data.Spec.TaskTemplate.RestartPolicy.Window || 0;
} else {
this.RestartCondition = 'any';
this.RestartDelay = 5000000000;
this.RestartMaxAttempts = 0;
this.RestartWindow = 0;
}
if (data.Spec?.TaskTemplate?.LogDriver) {
this.LogDriverName = data.Spec.TaskTemplate.LogDriver.Name || '';
this.LogDriverOpts = data.Spec.TaskTemplate.LogDriver.Options || [];
} else {
this.LogDriverName = '';
this.LogDriverOpts = [];
}
this.Constraints = data.Spec?.TaskTemplate?.Placement
? data.Spec.TaskTemplate.Placement.Constraints || []
: [];
this.Preferences = data.Spec?.TaskTemplate?.Placement
? data.Spec.TaskTemplate.Placement.Preferences || []
: [];
this.Platforms = data.Spec?.TaskTemplate?.Placement?.Platforms || [];
this.Labels = data.Spec?.Labels;
if (this.Labels && this.Labels['com.docker.stack.namespace']) {
this.StackName = this.Labels['com.docker.stack.namespace'];
}
const containerSpec = data.Spec?.TaskTemplate?.ContainerSpec;
if (containerSpec) {
this.ContainerLabels = containerSpec.Labels;
this.Command = containerSpec.Command;
this.Arguments = containerSpec.Args;
this.Hostname = containerSpec.Hostname;
this.Env = containerSpec.Env;
this.Dir = containerSpec.Dir;
this.User = containerSpec.User;
this.Groups = containerSpec.Groups;
this.TTY = containerSpec.TTY;
this.OpenStdin = containerSpec.OpenStdin;
this.ReadOnly = containerSpec.ReadOnly;
this.Mounts = containerSpec.Mounts || [];
this.StopSignal = containerSpec.StopSignal;
this.StopGracePeriod = containerSpec.StopGracePeriod;
this.HealthCheck = containerSpec.HealthCheck || {};
this.Hosts = containerSpec.Hosts;
this.DNSConfig = containerSpec.DNSConfig;
this.Secrets = containerSpec.Secrets;
this.Configs = containerSpec.Configs;
}
if (data.Endpoint) {
this.Ports = data.Endpoint.Ports;
}
this.LogDriver = data.Spec?.TaskTemplate?.LogDriver;
this.Runtime = data.Spec?.TaskTemplate?.Runtime;
this.VirtualIPs = data.Endpoint ? data.Endpoint.VirtualIPs : [];
if (data.Spec?.UpdateConfig) {
this.UpdateParallelism =
typeof data.Spec.UpdateConfig.Parallelism !== 'undefined'
? data.Spec.UpdateConfig.Parallelism || 0
: 1;
this.UpdateDelay = data.Spec.UpdateConfig.Delay || 0;
this.UpdateFailureAction =
data.Spec.UpdateConfig.FailureAction || 'pause';
this.UpdateOrder = data.Spec.UpdateConfig.Order || 'stop-first';
} else {
this.UpdateParallelism = 1;
this.UpdateDelay = 0;
this.UpdateFailureAction = 'pause';
this.UpdateOrder = 'stop-first';
}
this.RollbackConfig = data.Spec?.RollbackConfig;
this.Checked = false;
this.Scale = false;
this.EditName = false;
if (data.Portainer) {
if (data.Portainer.ResourceControl) {
this.ResourceControl = new ResourceControlViewModel(
data.Portainer.ResourceControl
);
}
}
}
}

9
app/docker/react/components/index.ts
View file

@ -21,6 +21,7 @@ import { ConfigsDatatable } from '@/react/docker/configs/ListView/ConfigsDatatab
import { AgentHostBrowser } from '@/react/docker/host/BrowseView/AgentHostBrowser';
import { AgentVolumeBrowser } from '@/react/docker/volumes/BrowseView/AgentVolumeBrowser';
import { ProcessesDatatable } from '@/react/docker/containers/StatsView/ProcessesDatatable';
import { ScaleServiceButton } from '@/react/docker/services/ListView/ServicesDatatable/columns/schedulingMode/ScaleServiceButton';
import { containersModule } from './containers';
@ -123,10 +124,14 @@ const ngModule = angular
'relativePath',
])
)
.component('dockerEventsDatatable', r2a(EventsDatatable, ['dataset']))
.component(
'dockerContainerProcessesDatatable',
r2a(ProcessesDatatable, ['dataset', 'headers'])
);
)
.component(
'dockerServicesDatatableScaleServiceButton',
r2a(withUIRouter(withCurrentUser(ScaleServiceButton)), ['service'])
)
.component('dockerEventsDatatable', r2a(EventsDatatable, ['dataset']));
export const componentsModule = ngModule.name;

3
app/docker/views/services/edit/serviceController.js
View file

@ -26,6 +26,7 @@ import { confirmServiceForceUpdate } from '@/react/docker/services/common/update
import { confirm, confirmDelete } from '@@/modals/confirm';
import { ModalType } from '@@/modals';
import { buildConfirmButton } from '@@/modals/utils';
import { convertServiceToConfig } from '@/react/docker/services/common/convertServiceToConfig';
angular.module('portainer.docker').controller('ServiceController', [
'$q',
@ -438,7 +439,7 @@ angular.module('portainer.docker').controller('ServiceController', [
}
function buildChanges(service) {
var config = ServiceHelper.serviceToConfig(service.Model);
var config = convertServiceToConfig(service.Model);
config.Name = service.Name;
config.Labels = LabelHelper.fromKeyValueToLabelHash(service.ServiceLabels);
config.TaskTemplate.ContainerSpec.Env = envVarsUtils.convertToArrayOfStrings(service.EnvironmentVariables);