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

feat(gpu): rework docker GPU for UI performance [EE-4918] (#8518)

pull/8596/head
Ali 2023-03-03 14:47:10 +13:00 committed by GitHub
parent 769c8372fb
commit fd916bc8a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
52 changed files with 692 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
api/cmd/portainer/main.go
View File

@ -689,20 +689,16 @@ func buildServer(flags *portainer.CLIFlags) portainer.Server {
log.Fatal().Err(err).Msg("failed initializing upgrade service")
}
// FIXME: In 2.16 we changed the way ingress controller permissions are
// stored. Instead of being stored as annotation on an ingress rule, we keep
// them in our database. However, in order to run the migration we need an
// admin kube client to run lookup the old ingress rules and compare them
// with the current existing ingress classes.
//
// Unfortunately, our migrations run as part of the database initialization
// and our kubeclients require an initialized database. So it is not
// possible to do this migration as part of our normal flow. We DO have a
// migration which toggles a boolean in kubernetes configuration that
// indicated that this "post init" migration should be run. If/when this is
// resolved we can remove this function.
err = kubernetesClientFactory.PostInitMigrateIngresses()
if err != nil {
// Our normal migrations run as part of the database initialization
// but some more complex migrations require access to a kubernetes or docker
// client. Therefore we run a separate migration process just before
// starting the server.
postInitMigrator := datastore.NewPostInitMigrator(
kubernetesClientFactory,
dockerClientFactory,
dataStore,
)
if err := postInitMigrator.PostInitMigrate(); err != nil {
log.Fatal().Err(err).Msg("failure during post init migrations")
}

116
api/datastore/migrate_post_init.go Normal file
View File

@ -0,0 +1,116 @@
package datastore
import (
"context"
"github.com/docker/docker/api/types"
portainer "github.com/portainer/portainer/api"
"github.com/portainer/portainer/api/dataservices"
"github.com/portainer/portainer/api/docker"
"github.com/portainer/portainer/api/kubernetes/cli"
"github.com/rs/zerolog/log"
)
type PostInitMigrator struct {
kubeFactory *cli.ClientFactory
dockerFactory *docker.ClientFactory
dataStore dataservices.DataStore
}
func NewPostInitMigrator(
kubeFactory *cli.ClientFactory,
dockerFactory *docker.ClientFactory,
dataStore dataservices.DataStore,
) *PostInitMigrator {
return &PostInitMigrator{
kubeFactory: kubeFactory,
dockerFactory: dockerFactory,
dataStore: dataStore,
}
}
func (migrator *PostInitMigrator) PostInitMigrate() error {
if err := migrator.PostInitMigrateIngresses(); err != nil {
return err
}
migrator.PostInitMigrateGPUs()
return nil
}
func (migrator *PostInitMigrator) PostInitMigrateIngresses() error {
endpoints, err := migrator.dataStore.Endpoint().Endpoints()
if err != nil {
return err
}
for i := range endpoints {
// Early exit if we do not need to migrate!
if endpoints[i].PostInitMigrations.MigrateIngresses == false {
return nil
}
err := migrator.kubeFactory.MigrateEndpointIngresses(&endpoints[i])
if err != nil {
log.Debug().Err(err).Msg("failure migrating endpoint ingresses")
}
}
return nil
}
// PostInitMigrateGPUs will check all docker endpoints for containers with GPUs and set EnableGPUManagement to true if any are found
// If there's an error getting the containers, we'll log it and move on
func (migrator *PostInitMigrator) PostInitMigrateGPUs() {
environments, err := migrator.dataStore.Endpoint().Endpoints()
if err != nil {
log.Err(err).Msg("failure getting endpoints")
return
}
for i := range environments {
if environments[i].Type == portainer.DockerEnvironment {
// // Early exit if we do not need to migrate!
if environments[i].PostInitMigrations.MigrateGPUs == false {
return
}
// set the MigrateGPUs flag to false so we don't run this again
environments[i].PostInitMigrations.MigrateGPUs = false
migrator.dataStore.Endpoint().UpdateEndpoint(environments[i].ID, &environments[i])
// create a docker client
dockerClient, err := migrator.dockerFactory.CreateClient(&environments[i], "", nil)
if err != nil {
log.Err(err).Msg("failure creating docker client for environment: " + environments[i].Name)
return
}
defer dockerClient.Close()
// get all containers
containers, err := dockerClient.ContainerList(context.Background(), types.ContainerListOptions{All: true})
if err != nil {
log.Err(err).Msg("failed to list containers")
return
}
// check for a gpu on each container. If even one GPU is found, set EnableGPUManagement to true for the whole endpoint
containersLoop:
for _, container := range containers {
// https://www.sobyte.net/post/2022-10/go-docker/ has nice documentation on the docker client with GPUs
containerDetails, err := dockerClient.ContainerInspect(context.Background(), container.ID)
if err != nil {
log.Err(err).Msg("failed to inspect container")
return
}
deviceRequests := containerDetails.HostConfig.Resources.DeviceRequests
for _, deviceRequest := range deviceRequests {
if deviceRequest.Driver == "nvidia" {
environments[i].EnableGPUManagement = true
migrator.dataStore.Endpoint().UpdateEndpoint(environments[i].ID, &environments[i])
break containersLoop
}
}
}
}
}
}

34
api/datastore/migrator/migrate_dbversion90.go
View File

@ -3,11 +3,16 @@ package migrator
import (
"github.com/rs/zerolog/log"
portainer "github.com/portainer/portainer/api"
portainerDsErrors "github.com/portainer/portainer/api/dataservices/errors"
)
func (m *Migrator) migrateDBVersionToDB90() error {
if err := m.updateUserThemForDB90(); err != nil {
if err := m.updateUserThemeForDB90(); err != nil {
return err
}
if err := m.updateEnableGpuManagementFeatures(); err != nil {
return err
}
@ -39,7 +44,7 @@ func (m *Migrator) updateEdgeStackStatusForDB90() error {
return nil
}
func (m *Migrator) updateUserThemForDB90() error {
func (m *Migrator) updateUserThemeForDB90() error {
log.Info().Msg("updating existing user theme settings")
users, err := m.userService.Users()
@ -60,3 +65,28 @@ func (m *Migrator) updateUserThemForDB90() error {
return nil
}
func (m *Migrator) updateEnableGpuManagementFeatures() error {
// get all environments
environments, err := m.endpointService.Endpoints()
if err != nil {
return err
}
for _, environment := range environments {
if environment.Type == portainer.DockerEnvironment {
// set the PostInitMigrations.MigrateGPUs to true on this environment to run the migration only on the 2.18 upgrade
environment.PostInitMigrations.MigrateGPUs = true
// if there's one or more gpu, set the EnableGpuManagement setting to true
gpuList := environment.Gpus
if len(gpuList) > 0 {
environment.EnableGPUManagement = true
}
// update the environment
if err := m.endpointService.UpdateEndpoint(environment.ID, &environment); err != nil {
return err
}
}
}
return nil
}

2
api/datastore/test_data/output_24_to_latest.json
View File

@ -46,6 +46,7 @@
},
"EdgeCheckinInterval": 0,
"EdgeKey": "",
"EnableGPUManagement": false,
"Gpus": [],
"GroupId": 1,
"Id": 1,
@ -71,6 +72,7 @@
"LastCheckInDate": 0,
"Name": "local",
"PostInitMigrations": {
"MigrateGPUs": true,
"MigrateIngresses": true
},
"PublicURL": "",

12
api/http/handler/endpoints/endpoint_settings_update.go
View File

@ -28,6 +28,10 @@ type endpointSettingsUpdatePayload struct {
AllowSysctlSettingForRegularUsers *bool `json:"allowSysctlSettingForRegularUsers" example:"true"`
// Whether host management features are enabled
EnableHostManagementFeatures *bool `json:"enableHostManagementFeatures" example:"true"`
EnableGPUManagement *bool `json:"enableGPUManagement" example:"false"`
Gpus []portainer.Pair `json:"gpus"`
}
func (payload *endpointSettingsUpdatePayload) Validate(r *http.Request) error {
@ -107,6 +111,14 @@ func (handler *Handler) endpointSettingsUpdate(w http.ResponseWriter, r *http.Re
securitySettings.EnableHostManagementFeatures = *payload.EnableHostManagementFeatures
}
if payload.EnableGPUManagement != nil {
endpoint.EnableGPUManagement = *payload.EnableGPUManagement
}
if payload.Gpus != nil {
endpoint.Gpus = payload.Gpus
}
endpoint.SecuritySettings = securitySettings
err = handler.DataStore.Endpoint().UpdateEndpoint(portainer.EndpointID(endpointID), endpoint)

23
api/kubernetes/cli/client.go
View File

@ -12,7 +12,6 @@ import (
"github.com/pkg/errors"
portainer "github.com/portainer/portainer/api"
"github.com/portainer/portainer/api/dataservices"
"github.com/rs/zerolog/log"
"k8s.io/client-go/kubernetes"
"k8s.io/client-go/rest"
"k8s.io/client-go/tools/clientcmd"
@ -221,27 +220,7 @@ func buildLocalClient() (*kubernetes.Clientset, error) {
return kubernetes.NewForConfig(config)
}
func (factory *ClientFactory) PostInitMigrateIngresses() error {
endpoints, err := factory.dataStore.Endpoint().Endpoints()
if err != nil {
return err
}
for i := range endpoints {
// Early exit if we do not need to migrate!
if endpoints[i].PostInitMigrations.MigrateIngresses == false {
return nil
}
err := factory.migrateEndpointIngresses(&endpoints[i])
if err != nil {
log.Debug().Err(err).Msg("failure migrating endpoint ingresses")
}
}
return nil
}
func (factory *ClientFactory) migrateEndpointIngresses(e *portainer.Endpoint) error {
func (factory *ClientFactory) MigrateEndpointIngresses(e *portainer.Endpoint) error {
// classes is a list of controllers which have been manually added to the
// cluster setup view. These need to all be allowed globally, but then
// blocked in specific namespaces which they were not previously allowed in.

3
api/portainer.go
View File

@ -402,6 +402,8 @@ type (
Version string `example:"1.0.0"`
}
EnableGPUManagement bool `json:"EnableGPUManagement"`
// Deprecated fields
// Deprecated in DBVersion == 4
TLS bool `json:"TLS,omitempty"`
@ -502,6 +504,7 @@ type (
// EndpointPostInitMigrations
EndpointPostInitMigrations struct {
MigrateIngresses bool `json:"MigrateIngresses"`
MigrateGPUs bool `json:"MigrateGPUs"`
}
// Extension represents a deprecated Portainer extension

5
app/assets/css/vendor-override.css
View File

@ -358,11 +358,6 @@ input:-webkit-autofill {
}
/* Overide Vendor CSS */
.btn-link:hover {
color: var(--text-link-hover-color) !important;
}
.multiSelect.inlineBlock button {
margin: 0;
}

2
app/docker/components/imageRegistry/por-image-registry.html
View File

@ -36,7 +36,7 @@
title="Search image on Docker Hub"
target="_blank"
>
<pr-icon icon="'svg-docker'" size="'lg'"></pr-icon> Search
<pr-icon icon="'svg-docker'" size="'md'"></pr-icon> Search
</a>
</span>
</div>

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

@ -37,5 +37,12 @@ export const componentsModule = angular
)
.component(
'gpu',
r2a(Gpu, ['values', 'onChange', 'gpus', 'usedGpus', 'usedAllGpus'])
r2a(Gpu, [
'values',
'onChange',
'gpus',
'usedGpus',
'usedAllGpus',
'enableGpuManagement',
])
).name;

19
app/docker/views/containers/create/createContainerController.js
View File

@ -21,6 +21,7 @@ angular.module('portainer.docker').controller('CreateContainerController', [
'$timeout',
'$transition$',
'$filter',
'$analytics',
'Container',
'ContainerHelper',
'Image',
@ -35,6 +36,7 @@ angular.module('portainer.docker').controller('CreateContainerController', [
'FormValidator',
'RegistryService',
'SystemService',
'SettingsService',
'PluginService',
'HttpRequestHelper',
'endpoint',
@ -46,6 +48,7 @@ angular.module('portainer.docker').controller('CreateContainerController', [
$timeout,
$transition$,
$filter,
$analytics,
Container,
ContainerHelper,
Image,
@ -60,6 +63,7 @@ angular.module('portainer.docker').controller('CreateContainerController', [
FormValidator,
RegistryService,
SystemService,
SettingsService,
PluginService,
HttpRequestHelper,
endpoint
@ -1042,6 +1046,18 @@ angular.module('portainer.docker').controller('CreateContainerController', [
});
}
async function sendAnalytics() {
const publicSettings = await SettingsService.publicSettings();
const analyticsAllowed = publicSettings.EnableTelemetry;
const image = `${$scope.formValues.RegistryModel.Registry.URL}/${$scope.formValues.RegistryModel.Image}`;
if (analyticsAllowed && $scope.formValues.GPU.enabled) {
$analytics.eventTrack('gpuContainerCreated', {
category: 'docker',
metadata: { gpu: $scope.formValues.GPU, containerImage: image },
});
}
}
function applyResourceControl(newContainer) {
const userId = Authentication.getUserDetails().ID;
const resourceControl = newContainer.Portainer.ResourceControl;
@ -1101,7 +1117,8 @@ angular.module('portainer.docker').controller('CreateContainerController', [
return validateForm(accessControlData, $scope.isAdmin);
}
function onSuccess() {
async function onSuccess() {
await sendAnalytics();
Notifications.success('Success', 'Container successfully created');
$state.go('docker.containers', {}, { reload: true });
}

31
app/docker/views/containers/create/createcontainer.html
View File

@ -17,8 +17,8 @@
<form class="form-horizontal" autocomplete="off">
<!-- name-input -->
<div class="form-group">
<label for="container_name" class="col-sm-2 control-label text-left">Name</label>
<div class="col-sm-10">
<label for="container_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" ng-model="config.name" id="container_name" placeholder="e.g. myContainer" />
</div>
</div>
@ -37,8 +37,6 @@
model="formValues.RegistryModel"
ng-if="formValues.RegistryModel.Registry"
auto-complete="true"
label-class="col-sm-1"
input-class="col-sm-11"
endpoint="endpoint"
is-admin="isAdmin"
check-rate-limits="formValues.alwaysPull"
@ -169,7 +167,7 @@
<div class="col-sm-12">
<button
type="button"
class="btn btn-primary btn-sm"
class="btn btn-primary btn-sm !ml-0"
ng-disabled="state.actionInProgress || !formValues.RegistryModel.Image || (!formValues.RegistryModel.Registry && fromContainer)
|| (fromContainer.IsPortainer && fromContainer.Name === '/' + config.name)"
ng-click="create()"
@ -701,17 +699,20 @@
</div>
<!-- !shm-size-input -->
<!-- #region GPU -->
<div class="col-sm-12 form-section-title"> GPU </div>
<div ng-if="applicationState.endpoint.mode.provider === 'DOCKER_STANDALONE'">
<div class="col-sm-12 form-section-title"> GPU </div>
<gpu
ng-if="applicationState.endpoint.apiVersion >= 1.4"
values="formValues.GPU"
on-change="(onGpuChange)"
gpus="endpoint.Gpus"
used-gpus="gpuUseList"
used-all-gpus="gpuUseAll"
>
</gpu>
<gpu
ng-if="applicationState.endpoint.apiVersion >= 1.4"
values="formValues.GPU"
on-change="(onGpuChange)"
gpus="endpoint.Gpus"
used-gpus="gpuUseList"
used-all-gpus="gpuUseAll"
enable-gpu-management="endpoint.EnableGPUManagement"
>
</gpu>
</div>
<!-- #endregion GPU -->
<div ng-class="{ 'edit-resources': state.mode == 'duplicate' }">

7
app/docker/views/dashboard/dashboard.html
View File

@ -106,7 +106,12 @@
</a>
<div>
<dashboard-item icon="'cpu'" type="'GPU'" value="endpoint.Gpus.length"></dashboard-item>
<dashboard-item
ng-if="endpoint.EnableGPUManagement && applicationState.endpoint.mode.provider === 'DOCKER_STANDALONE'"
icon="'cpu'"
type="'GPU'"
value="endpoint.Gpus.length"
></dashboard-item>
</div>
</div>
</div>

71
app/docker/views/docker-features-configuration/docker-features-configuration.controller.js
View File

@ -2,10 +2,13 @@ import { FeatureId } from '@/react/portainer/feature-flags/enums';
export default class DockerFeaturesConfigurationController {
/* @ngInject */
constructor($async, $scope, EndpointService, Notifications, StateManager) {
constructor($async, $scope, $state, $analytics, EndpointService, SettingsService, Notifications, StateManager) {
this.$async = $async;
this.$scope = $scope;
this.$state = $state;
this.$analytics = $analytics;
this.EndpointService = EndpointService;
this.SettingsService = SettingsService;
this.Notifications = Notifications;
this.StateManager = StateManager;
@ -35,6 +38,8 @@ export default class DockerFeaturesConfigurationController {
this.save = this.save.bind(this);
this.onChangeField = this.onChangeField.bind(this);
this.onToggleAutoUpdate = this.onToggleAutoUpdate.bind(this);
this.onToggleGPUManagement = this.onToggleGPUManagement.bind(this);
this.onGpusChange = this.onGpusChange.bind(this);
this.onChangeEnableHostManagementFeatures = this.onChangeField('enableHostManagementFeatures');
this.onChangeAllowVolumeBrowserForRegularUsers = this.onChangeField('allowVolumeBrowserForRegularUsers');
this.onChangeDisableBindMountsForRegularUsers = this.onChangeField('disableBindMountsForRegularUsers');
@ -52,6 +57,12 @@ export default class DockerFeaturesConfigurationController {
});
}
onToggleGPUManagement(checked) {
this.$scope.$evalAsync(() => {
this.state.enableGPUManagement = checked;
});
}
onChange(values) {
return this.$scope.$evalAsync(() => {
this.formValues = {
@ -69,6 +80,12 @@ export default class DockerFeaturesConfigurationController {
};
}
onGpusChange(value) {
return this.$async(async () => {
this.endpoint.Gpus = value;
});
}
isContainerEditDisabled() {
const {
disableBindMountsForRegularUsers,
@ -92,7 +109,11 @@ export default class DockerFeaturesConfigurationController {
return this.$async(async () => {
try {
this.state.actionInProgress = true;
const securitySettings = {
const validGpus = this.endpoint.Gpus.filter((gpu) => gpu.name && gpu.value);
const gpus = this.state.enableGPUManagement ? validGpus : [];
const settings = {
enableHostManagementFeatures: this.formValues.enableHostManagementFeatures,
allowBindMountsForRegularUsers: !this.formValues.disableBindMountsForRegularUsers,
allowPrivilegedModeForRegularUsers: !this.formValues.disablePrivilegedModeForRegularUsers,
@ -102,33 +123,53 @@ export default class DockerFeaturesConfigurationController {
allowStackManagementForRegularUsers: !this.formValues.disableStackManagementForRegularUsers,
allowContainerCapabilitiesForRegularUsers: !this.formValues.disableContainerCapabilitiesForRegularUsers,
allowSysctlSettingForRegularUsers: !this.formValues.disableSysctlSettingForRegularUsers,
enableGPUManagement: this.state.enableGPUManagement,
gpus,
};
await this.EndpointService.updateSecuritySettings(this.endpoint.Id, securitySettings);
const publicSettings = await this.SettingsService.publicSettings();
const analyticsAllowed = publicSettings.EnableTelemetry;
if (analyticsAllowed) {
// send analytics if GPU management is changed (with the new state)
if (this.initialEnableGPUManagement !== this.state.enableGPUManagement) {
this.$analytics.eventTrack('enable-gpu-management-updated', { category: 'portainer', metadata: { enableGPUManagementState: this.state.enableGPUManagement } });
}
// send analytics if the number of GPUs is changed (with a list of the names)
if (gpus.length > this.initialGPUs.length) {
const numberOfGPUSAdded = this.endpoint.Gpus.length - this.initialGPUs.length;
this.$analytics.eventTrack('gpus-added', { category: 'portainer', metadata: { gpus: gpus.map((gpu) => gpu.name), numberOfGPUSAdded } });
}
if (gpus.length < this.initialGPUs.length) {
const numberOfGPUSRemoved = this.initialGPUs.length - this.endpoint.Gpus.length;
this.$analytics.eventTrack('gpus-removed', { category: 'portainer', metadata: { gpus: gpus.map((gpu) => gpu.name), numberOfGPUSRemoved } });
}
this.initialGPUs = gpus;
this.initialEnableGPUManagement = this.state.enableGPUManagement;
}
this.endpoint.SecuritySettings = securitySettings;
await this.EndpointService.updateSecuritySettings(this.endpoint.Id, settings);
this.endpoint.SecuritySettings = settings;
this.Notifications.success('Success', 'Saved settings successfully');
} catch (e) {
this.Notifications.error('Failure', e, 'Failed saving settings');
}
this.state.actionInProgress = false;
this.$state.reload();
});
}
checkAgent() {
const applicationState = this.StateManager.getState();
return applicationState.endpoint.mode.agentProxy;
}
$onInit() {
const securitySettings = this.endpoint.SecuritySettings;
const isAgent = this.checkAgent();
this.isAgent = isAgent;
const applicationState = this.StateManager.getState();
this.isAgent = applicationState.endpoint.mode.agentProxy;
this.isDockerStandaloneEnv = applicationState.endpoint.mode.provider === 'DOCKER_STANDALONE';
this.formValues = {
enableHostManagementFeatures: isAgent && securitySettings.enableHostManagementFeatures,
allowVolumeBrowserForRegularUsers: isAgent && securitySettings.allowVolumeBrowserForRegularUsers,
enableHostManagementFeatures: this.isAgent && securitySettings.enableHostManagementFeatures,
allowVolumeBrowserForRegularUsers: this.isAgent && securitySettings.allowVolumeBrowserForRegularUsers,
disableBindMountsForRegularUsers: !securitySettings.allowBindMountsForRegularUsers,
disablePrivilegedModeForRegularUsers: !securitySettings.allowPrivilegedModeForRegularUsers,
disableHostNamespaceForRegularUsers: !securitySettings.allowHostNamespaceForRegularUsers,
@ -137,5 +178,9 @@ export default class DockerFeaturesConfigurationController {
disableContainerCapabilitiesForRegularUsers: !securitySettings.allowContainerCapabilitiesForRegularUsers,
disableSysctlSettingForRegularUsers: !securitySettings.allowSysctlSettingForRegularUsers,
};
this.state.enableGPUManagement = this.isDockerStandaloneEnv && (this.endpoint.EnableGPUManagement || this.endpoint.Gpus.length > 0);
this.initialGPUs = this.endpoint.Gpus;
this.initialEnableGPUManagement = this.endpoint.EnableGPUManagement;
}
}

43
app/docker/views/docker-features-configuration/docker-features-configuration.html
View File

@ -150,9 +150,42 @@
<!-- other -->
<div class="col-sm-12 form-section-title"> Other </div>
<div class="form-group">
<div class="col-sm-12 pb-3">
<insights-box
header="'GPU settings update'"
set-html-content="true"
insight-close-id="'gpu-settings-update-closed'"
content="'
<p>
From 2.18 on, the set-up of available GPUs for a Docker Standalone environment has been shifted from Add environment and Environment details to Host -> Setup, so as to align with other settings.
</p>
<p>
A toggle has been introduced for enabling/disabling management of GPU settings in the Portainer UI - to alleviate the performance impact of showing those settings.
</p>
<p>
The UI has been updated to clarify that GPU settings support is only for Docker Standalone (and not Docker Swarm, which was never supported in the UI).
</p>'"
></insights-box>
</div>
<div class="col-sm-12">
<por-switch-field
label="'Show a notification to indicate out-of-date images for Docker environments'"
label="'Show GPU in the UI'"
tooltip="'This allows managing of GPUs for container/stack hardware acceleration via the Portainer UI.'"
checked="$ctrl.state.enableGPUManagement"
name="'enableGPUManagement'"
on-change="($ctrl.onToggleGPUManagement)"
label-class="'col-sm-7 col-lg-4'"
disabled="!$ctrl.isDockerStandaloneEnv"
></por-switch-field>
</div>
<div class="col-sm-12">
<div class="pl-4">
<gpus-list ng-if="$ctrl.state.enableGPUManagement && $ctrl.endpoint" value="$ctrl.endpoint.Gpus" on-change="($ctrl.onGpusChange)"></gpus-list>
</div>
</div>
<div class="col-sm-12">
<por-switch-field
label="'Show an image(s) up to date indicator for Stacks, Services and Containers'"
checked="false"
name="'outOfDateImageToggle'"
label-class="'col-sm-7 col-lg-4'"
@ -166,7 +199,13 @@
<div class="col-sm-12 form-section-title"> Actions </div>
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-primary btn-sm" ng-click="$ctrl.save()" ng-disabled="$ctrl.state.actionInProgress" button-spinner="$ctrl.state.actionInProgress">
<button
type="button"
class="btn btn-primary btn-sm !ml-0"
ng-click="$ctrl.save()"
ng-disabled="$ctrl.state.actionInProgress"
button-spinner="$ctrl.state.actionInProgress"
>
<span ng-hide="$ctrl.state.actionInProgress">Save configuration</span>
<span ng-show="$ctrl.state.actionInProgress">Saving...</span>
</button>

2
app/portainer/react/components/envronments.ts
View File

@ -4,7 +4,7 @@ import { r2a } from '@/react-tools/react2angular';
import { withControlledInput } from '@/react-tools/withControlledInput';
import { EdgeKeyDisplay } from '@/react/portainer/environments/ItemView/EdgeKeyDisplay';
import { KVMControl } from '@/react/portainer/environments/KvmView/KVMControl';
import { GpusList } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
import { GpusList } from '@/react/docker/host/SetupView/GpusList';
export const environmentsModule = angular
.module('portainer.app.react.components.environments', [])

7
app/portainer/react/components/index.ts
View File

@ -25,6 +25,7 @@ import { Slider } from '@@/form-components/Slider';
import { TagButton } from '@@/TagButton';
import { BETeaserButton } from '@@/BETeaserButton';
import { CodeEditor } from '@@/CodeEditor';
import { InsightsBox } from '@@/InsightsBox';
import { fileUploadField } from './file-upload-field';
import { switchField } from './switch-field';
@ -32,6 +33,7 @@ import { customTemplatesModule } from './custom-templates';
import { gitFormModule } from './git-form';
import { settingsModule } from './settings';
import { accessControlModule } from './access-control';
import { environmentsModule } from './envronments';
import { envListModule } from './enviroments-list-view-components';
export const componentsModule = angular
@ -40,6 +42,7 @@ export const componentsModule = angular
gitFormModule,
settingsModule,
accessControlModule,
environmentsModule,
envListModule,
])
.component(
@ -74,6 +77,10 @@ export const componentsModule = angular
.component('badge', r2a(Badge, ['type', 'className']))
.component('fileUploadField', fileUploadField)
.component('porSwitchField', switchField)
.component(
'insightsBox',
r2a(InsightsBox, ['header', 'content', 'setHtmlContent', 'insightCloseId'])
)
.component(
'passwordCheckHint',
r2a(withReactQuery(PasswordCheckHint), [

1
app/portainer/services/authentication.js
View File

@ -36,7 +36,6 @@ angular.module('portainer.app').factory('Authentication', [
await setUser(jwt);
return true;
} catch (error) {
console.log('Unable to initialize authentication service', error);
return tryAutoLoginExtension();
}
}

22
app/portainer/views/endpoints/edit/endpoint.html
View File

@ -210,14 +210,30 @@
</div>
<!-- !open-amt info -->
<!-- gpus info -->
<div class="col-sm-12 form-section-title">Hardware acceleration</div>
<gpus-list ng-if="endpoint && endpoint.Gpus" value="endpoint.Gpus" on-change="(onGpusChange)"></gpus-list>
<div class="mb-4">
<insights-box
ng-if="isDockerStandaloneEnv"
header="'GPU settings update'"
set-html-content="true"
insight-close-id="'gpu-settings-update-closed'"
content="'
<p>
From 2.18 on, the set-up of available GPUs for a Docker Standalone environment has been shifted from Add environment and Environment details to Host -> Setup, so as to align with other settings.
</p>
<p>
A toggle has been introduced for enabling/disabling management of GPU settings in the Portainer UI - to alleviate the performance impact of showing those settings.
</p>
<p>
The UI has been updated to clarify that GPU settings support is only for Docker Standalone (and not Docker Swarm, which was never supported in the UI).
</p>'"
></insights-box>
</div>
<!-- gpus info -->
<div class="form-group">
<div class="col-sm-12">
<button
type="button"
class="btn btn-primary btn-sm"
class="btn btn-primary btn-sm !ml-0"
ng-disabled="state.actionInProgress || !endpoint.Name || !endpoint.URL || (endpoint.TLS && ((endpoint.TLSVerify && !formValues.TLSCACert) || (endpoint.TLSClientCert && (!formValues.TLSCert || !formValues.TLSKey))))"
ng-click="updateEndpoint()"
button-spinner="state.actionInProgress"

25
app/portainer/views/endpoints/edit/endpointController.js
View File

@ -9,11 +9,10 @@ import { confirmDestructive } from '@@/modals/confirm';
import { isEdgeEnvironment } from '@/react/portainer/environments/utils';
import { commandsTabs } from '@/react/edge/components/EdgeScriptForm/scripts';
import { GpusListAngular } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
import { confirmDisassociate } from '@/react/portainer/environments/ItemView/ConfirmDisassociateModel';
import { buildConfirmButton } from '@@/modals/utils';
angular.module('portainer.app').component('gpusList', GpusListAngular).controller('EndpointController', EndpointController);
angular.module('portainer.app').controller('EndpointController', EndpointController);
/* @ngInject */
function EndpointController(
@ -25,6 +24,7 @@ function EndpointController(
clipboard,
EndpointService,
GroupService,
StateManager,
Notifications,
Authentication,
@ -143,8 +143,6 @@ function EndpointController(
});
}
$scope.onGpusChange = onGpusChange;
Array.prototype.indexOf = function (val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) return i;
@ -158,21 +156,6 @@ function EndpointController(
}
};
function onGpusChange(value) {
return $async(async () => {
$scope.endpoint.Gpus = value;
});
}
function verifyGpus() {
var i = ($scope.endpoint.Gpus || []).length;
while (i--) {
if ($scope.endpoint.Gpus[i].name === '' || $scope.endpoint.Gpus[i].name === null) {
$scope.endpoint.Gpus.splice(i, 1);
}
}
}
$scope.updateEndpoint = async function () {
var endpoint = $scope.endpoint;
var securityData = $scope.formValues.SecurityFormData;
@ -193,7 +176,6 @@ function EndpointController(
}
}
verifyGpus();
var payload = {
Name: endpoint.Name,
PublicURL: endpoint.PublicURL,
@ -290,6 +272,9 @@ function EndpointController(
try {
const [endpoint, groups, settings] = await Promise.all([EndpointService.endpoint($transition$.params().id), GroupService.groups(), SettingsService.settings()]);
const applicationState = StateManager.getState();
$scope.isDockerStandaloneEnv = applicationState.endpoint.mode.provider === 'DOCKER_STANDALONE';
if (endpoint.URL.indexOf('unix://') === 0 || endpoint.URL.indexOf('npipe://') === 0) {
$scope.endpointType = 'local';
} else {

1
app/react-tools/test-mocks.ts
View File

@ -83,6 +83,7 @@ export function createMockEnvironment(): Environment {
},
Nomad: { Snapshots: [] },
EdgeKey: '',
EnableGPUManagement: false,
Id: 3,
UserTrusted: false,
Edge: {

0
app/react/components/.keep
View File

18
app/react/components/InsightsBox/InsightsBox.stories.tsx Normal file
View File

@ -0,0 +1,18 @@
import { Meta, Story } from '@storybook/react';
import { InsightsBox, Props } from './InsightsBox';
export default {
component: InsightsBox,
header: 'Components/InsightsBox',
} as Meta;
function Template({ header, content }: Props) {
return <InsightsBox header={header} content={content} />;
}
export const Primary: Story<Props> = Template.bind({});
Primary.args = {
header: 'Insights box header',
content: 'This is the content of the insights box',
};

16
app/react/components/InsightsBox/InsightsBox.test.tsx Normal file
View File

@ -0,0 +1,16 @@
import { render } from '@testing-library/react';
import { InsightsBox } from './InsightsBox';
test('should display a InsightsBox with a header and content', async () => {
const header = 'test header';
const content = 'test content';
const { findByText } = render(
<InsightsBox header={header} content={content} />
);
const headerFound = await findByText(header);
expect(headerFound).toBeTruthy();
const contentFound = await findByText(content);
expect(contentFound).toBeTruthy();
});

63
app/react/components/InsightsBox/InsightsBox.tsx Normal file
View File

@ -0,0 +1,63 @@
import clsx from 'clsx';
import { Lightbulb, X } from 'lucide-react';
import { ReactNode, useMemo } from 'react';
import sanitize from 'sanitize-html';
import { useStore } from 'zustand';
import { Button } from '@@/buttons';
import { insightStore } from './insights-store';
export type Props = {
header: string;
content: ReactNode;
setHtmlContent?: boolean;
insightCloseId?: string; // set if you want to be able to close the box and not show it again
};
export function InsightsBox({
header,
content,
setHtmlContent,
insightCloseId,
}: Props) {
// allow to close the box and not show it again in local storage with zustand
const { addInsightIDClosed, isClosed } = useStore(insightStore);
const isInsightClosed = isClosed(insightCloseId);
// allow angular views to set html messages for the insights box
const htmlContent = useMemo(() => {
if (setHtmlContent && typeof content === 'string') {
// eslint-disable-next-line react/no-danger
return <div dangerouslySetInnerHTML={{ __html: sanitize(content) }} />;
}
return null;
}, [setHtmlContent, content]);
if (isInsightClosed) {
return null;
}
return (
<div className="relative flex w-full gap-1 rounded-lg bg-gray-modern-3 p-4 text-sm th-highcontrast:bg-legacy-grey-3 th-dark:bg-legacy-grey-3">
<div className="shrink-0">
<Lightbulb className="h-4 text-warning-7 th-highcontrast:text-warning-6 th-dark:text-warning-6" />
</div>
<div>
<p className={clsx('mb-2 font-bold', insightCloseId && 'pr-4')}>
{header}
</p>
<div>{htmlContent || content}</div>
</div>
{insightCloseId && (
<Button
icon={X}
className="absolute top-2 right-2 flex !text-gray-7 hover:!text-gray-8 th-highcontrast:!text-gray-6 th-highcontrast:hover:!text-gray-5 th-dark:!text-gray-6 th-dark:hover:!text-gray-5"
color="link"
size="medium"
onClick={() => addInsightIDClosed(insightCloseId)}
/>
)}
</div>
);
}

1
app/react/components/InsightsBox/index.ts Normal file
View File

@ -0,0 +1 @@
export { InsightsBox } from './InsightsBox';

35
app/react/components/InsightsBox/insights-store.ts Normal file
View File

@ -0,0 +1,35 @@
import { createStore } from 'zustand';
import { persist } from 'zustand/middleware';
import { keyBuilder } from '@/react/hooks/useLocalStorage';
interface InsightsStore {
insightIDsClosed: string[];
addInsightIDClosed: (insightIDClosed: string) => void;
isClosed: (insightID?: string) => boolean;
}
export const insightStore = createStore<InsightsStore>()(
persist(
(set, get) => ({
insightIDsClosed: [],
addInsightIDClosed: (insightIDClosed: string) => {
set((state) => {
const currentIDsClosed = state.insightIDsClosed || [];
return { insightIDsClosed: [...currentIDsClosed, insightIDClosed] };
});
},
isClosed: (insightID?: string) => {
if (!insightID) {
return false;
}
const currentIDsClosed = get().insightIDsClosed || [];
return currentIDsClosed.includes(insightID);
},
}),
{
name: keyBuilder('insightIDsClosed'),
getStorage: () => localStorage,
}
)
);

9
app/react/components/form-components/InputList/InputList.module.css
View File

@ -1,7 +1,3 @@
.items {
margin-top: 10px;
}
.items > * + * {
margin-top: 2px;
}
@ -24,11 +20,6 @@
margin-bottom: 20px;
}
.item-actions {
display: flex;
margin-left: 2px;
}
.default-item {
width: 100% !important;
}

148
app/react/components/form-components/InputList/InputList.tsx
View File

@ -1,9 +1,9 @@
import { ComponentType } from 'react';
import clsx from 'clsx';
import { FormikErrors } from 'formik';
import { ArrowDown, ArrowUp, Trash2 } from 'lucide-react';
import { ArrowDown, ArrowUp, Plus, Trash2 } from 'lucide-react';
import { AddButton, Button } from '@@/buttons';
import { Button } from '@@/buttons';
import { Tooltip } from '@@/Tip/Tooltip';
import { TextTip } from '@@/Tip/TextTip';
@ -79,18 +79,10 @@ export function InputList<T = DefaultType>({
return (
<div className={clsx('form-group', styles.root)}>
<div className={clsx('col-sm-12', styles.header)}>
<div className={clsx('control-label text-left', styles.label)}>
<span className="control-label space-right pt-2 text-left !font-bold">
{label}
{tooltip && <Tooltip message={tooltip} />}
</div>
{!(isAddButtonHidden || readOnly) && (
<AddButton
label={addLabel}
className="space-left"
onClick={handleAdd}
disabled={disabled}
/>
)}
</span>
</div>
{textTip && (
@ -99,68 +91,86 @@ export function InputList<T = DefaultType>({
</div>
)}
<div className={clsx('col-sm-12', styles.items, 'space-y-4')}>
{value.map((item, index) => {
const key = itemKeyGetter(item, index);
const error = typeof errors === 'object' ? errors[index] : undefined;
{value.length > 0 && (
<div className="col-sm-12 mt-5 flex flex-col gap-y-5">
{value.map((item, index) => {
const key = itemKeyGetter(item, index);
const error =
typeof errors === 'object' ? errors[index] : undefined;
return (
<div
key={key}
className={clsx(
styles.itemLine,
{ [styles.hasError]: !!error },
'vertical-center'
)}
>
{Item ? (
<Item
item={item}
onChange={(value: T) => handleChangeItem(key, value)}
error={error}
disabled={disabled}
readOnly={readOnly}
/>
) : (
renderItem(
item,
(value: T) => handleChangeItem(key, value),
error
)
)}
<div className={clsx(styles.itemActions, 'items-start')}>
{!readOnly && movable && (
<>
<Button
size="medium"
disabled={disabled || index === 0}
onClick={() => handleMoveUp(index)}
className="vertical-center btn-only-icon"
icon={ArrowUp}
/>
<Button
size="medium"
type="button"
disabled={disabled || index === value.length - 1}
onClick={() => handleMoveDown(index)}
className="vertical-center btn-only-icon"
icon={ArrowDown}
/>
</>
return (
<div
key={key}
className={clsx(
styles.itemLine,
{ [styles.hasError]: !!error },
'vertical-center'
)}
{!readOnly && (
<Button
color="dangerlight"
size="medium"
onClick={() => handleRemoveItem(key, item)}
className="vertical-center btn-only-icon"
icon={Trash2}
>
{Item ? (
<Item
item={item}
onChange={(value: T) => handleChangeItem(key, value)}
error={error}
disabled={disabled}
readOnly={readOnly}
/>
) : (
renderItem(
item,
(value: T) => handleChangeItem(key, value),
error
)
)}
<div className="items-start">
{!readOnly && movable && (
<>
<Button
size="medium"
disabled={disabled || index === 0}
onClick={() => handleMoveUp(index)}
className="vertical-center btn-only-icon"
icon={ArrowUp}
/>
<Button
size="medium"
type="button"
disabled={disabled || index === value.length - 1}
onClick={() => handleMoveDown(index)}
className="vertical-center btn-only-icon"
icon={ArrowDown}
/>
</>
)}
{!readOnly && (
<Button
color="dangerlight"
size="medium"
onClick={() => handleRemoveItem(key, item)}
className="vertical-center btn-only-icon"
icon={Trash2}
/>
)}
</div>
</div>
</div>
);
})}
);
})}
</div>
)}
<div className="col-sm-12 mt-5">
{!(isAddButtonHidden || readOnly) && (
<Button
onClick={handleAdd}
disabled={disabled}
type="button"
color="default"
className="!ml-0"
size="small"
icon={Plus}
>
{addLabel}
</Button>
)}
</div>
</div>
);

39
app/react/docker/containers/CreateView/Gpu.tsx
View File

@ -10,6 +10,7 @@ import { OptionProps } from 'react-select/dist/declarations/src/components/Optio
import { Select } from '@@/form-components/ReactSelect';
import { Switch } from '@@/form-components/SwitchField/Switch';
import { Tooltip } from '@@/Tip/Tooltip';
import { TextTip } from '@@/Tip/TextTip';
interface Values {
enabled: boolean;
@ -35,6 +36,7 @@ export interface Props {
gpus: GPU[];
usedGpus: string[];
usedAllGpus: boolean;
enableGpuManagement?: boolean;
}
const NvidiaCapabilitiesOptions = [
@ -103,6 +105,7 @@ export function Gpu({
gpus = [],
usedGpus = [],
usedAllGpus,
enableGpuManagement,
}: Props) {
const options = useMemo(() => {
const options = (gpus || []).map((gpu) => ({
@ -181,30 +184,38 @@ export function Gpu({
return (
<div>
{!enableGpuManagement && (
<TextTip color="blue">
GPU in the UI is not currently enabled for this environment.
</TextTip>
)}
<div className="form-group">
<div className="col-sm-3 col-lg-2 control-label text-left">
Enable GPU
<Switch
id="enabled"
name="enabled"
checked={values.enabled}
checked={values.enabled && !!enableGpuManagement}
onChange={toggleEnableGpu}
className="ml-2"
disabled={enableGpuManagement === false}
/>
</div>
<div className="col-sm-9 col-lg-10 text-left">
<Select<GpuOption, true>
isMulti
closeMenuOnSelect
value={gpuValue}
isClearable={false}
backspaceRemovesValue={false}
isDisabled={!values.enabled}
onChange={onChangeSelectedGpus}
options={options}
components={{ MultiValueRemove }}
/>
</div>
{enableGpuManagement && values.enabled && (
<div className="col-sm-9 col-lg-10 text-left">
<Select<GpuOption, true>
isMulti
closeMenuOnSelect
value={gpuValue}
isClearable={false}
backspaceRemovesValue={false}
isDisabled={!values.enabled}
onChange={onChangeSelectedGpus}
options={options}
components={{ MultiValueRemove }}
/>
</div>
)}
</div>
{values.enabled && (

2
app/react/docker/containers/ListView/ContainersDatatable/columns/index.tsx
View File

@ -15,7 +15,7 @@ import { gpus } from './gpus';
export function useColumns(
isHostColumnVisible: boolean,
isGPUsColumnVisible: boolean
isGPUsColumnVisible?: boolean
) {
return useMemo(
() =>

16
app/react/docker/containers/utils.ts
View File

@ -1,8 +1,9 @@
import _ from 'lodash';
import { useInfo } from '@/docker/services/system.service';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
import { EnvironmentId } from '@/react/portainer/environments/types';
import { useInfo } from '@/docker/services/system.service';
import { useEnvironment } from '@/react/portainer/environments/queries';
import { DockerContainer, ContainerStatus } from './types';
import { DockerContainerResponse } from './types/response';
@ -95,10 +96,13 @@ function createStatus(statusText = ''): ContainerStatus {
}
export function useShowGPUsColumn(environmentID: EnvironmentId) {
const envInfoQuery = useInfo(
const isDockerStandaloneQuery = useInfo(
environmentID,
(info) => !!info.Swarm?.NodeID && !!info.Swarm?.ControlAvailable
(info) => !(!!info.Swarm?.NodeID && !!info.Swarm?.ControlAvailable) // is not a swarm environment, therefore docker standalone
);
return envInfoQuery.data !== true && !envInfoQuery.isLoading;
const enableGPUManagementQuery = useEnvironment(
environmentID,
(env) => env?.EnableGPUManagement
);
return isDockerStandaloneQuery.data && enableGPUManagementQuery.data;
}

5
app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList.tsx → app/react/docker/host/SetupView/GpusList.tsx
View File

@ -48,11 +48,12 @@ function Item({ item, onChange }: ItemProps<Gpu>) {
export function GpusList({ value, onChange }: Props) {
return (
<InputList<Gpu>
label="GPU"
label="GPUs"
tooltip="You may optionally set up the GPUs that will be selectable against containers, although 'All GPUs' will always be available."
value={value}
onChange={onChange}
itemBuilder={() => ({ value: '', name: '' })}
addLabel="add"
addLabel="Add GPU"
item={Item}
/>
);

10
app/react/portainer/environments/environment.service/create.ts
View File

@ -1,4 +1,3 @@
import { Gpu } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { type EnvironmentGroupId } from '@/react/portainer/environments/environment-groups/types';
import { type TagId } from '@/portainer/tags/types';
@ -18,7 +17,6 @@ interface CreateLocalDockerEnvironment {
socketPath?: string;
publicUrl?: string;
meta?: EnvironmentMetadata;
gpus?: Gpu[];
}
export async function createLocalDockerEnvironment({
@ -26,7 +24,6 @@ export async function createLocalDockerEnvironment({
socketPath = '',
publicUrl = '',
meta = { tagIds: [] },
gpus = [],
}: CreateLocalDockerEnvironment) {
const url = prefixPath(socketPath);
@ -37,7 +34,6 @@ export async function createLocalDockerEnvironment({
url,
publicUrl,
meta,
gpus,
}
);
@ -113,7 +109,6 @@ export interface EnvironmentOptions {
azure?: AzureSettings;
tls?: TLSSettings;
isEdgeDevice?: boolean;
gpus?: Gpu[];
pollFrequency?: number;
edge?: EdgeSettings;
tunnelServerAddr?: string;
@ -145,7 +140,6 @@ export interface CreateAgentEnvironmentValues {
name: string;
environmentUrl: string;
meta: EnvironmentMetadata;
gpus: Gpu[];
}
export function createAgentEnvironment({
@ -173,7 +167,6 @@ interface CreateEdgeAgentEnvironment {
tunnelServerAddr?: string;
meta?: EnvironmentMetadata;
pollFrequency: number;
gpus?: Gpu[];
isEdgeDevice?: boolean;
edge: EdgeSettings;
}
@ -182,7 +175,6 @@ export function createEdgeAgentEnvironment({
name,
portainerUrl,
meta = { tagIds: [] },
gpus = [],
isEdgeDevice,
pollFrequency,
edge,
@ -196,7 +188,6 @@ export function createEdgeAgentEnvironment({
skipVerify: true,
skipClientVerify: true,
},
gpus,
isEdgeDevice,
pollFrequency,
edge,
@ -226,7 +217,6 @@ async function createEnvironment(
TagIds: arrayToJson(tagIds),
CheckinInterval: options.pollFrequency,
IsEdgeDevice: options.isEdgeDevice,
Gpus: arrayToJson(options.gpus),
};
const { tls, azure } = options;

11
app/react/portainer/environments/queries/useEnvironment.ts
View File

@ -1,11 +1,18 @@
import { useQuery } from 'react-query';
import { getEndpoint } from '@/react/portainer/environments/environment.service';
import { EnvironmentId } from '@/react/portainer/environments/types';
import {
Environment,
EnvironmentId,
} from '@/react/portainer/environments/types';
import { withError } from '@/react-tools/react-query';
export function useEnvironment(id?: EnvironmentId) {
export function useEnvironment<T = Environment | null>(
id?: EnvironmentId,
select?: (environment: Environment | null) => T
) {
return useQuery(['environments', id], () => (id ? getEndpoint(id) : null), {
select,
...withError('Failed loading environment'),
staleTime: 50,
enabled: !!id,

1
app/react/portainer/environments/types.ts
View File

@ -131,6 +131,7 @@ export type Environment = {
TagIds: TagId[];
GroupId: EnvironmentGroupId;
DeploymentOptions: DeploymentOptions | null;
EnableGPUManagement: boolean;
EdgeID?: string;
EdgeKey: string;
EdgeCheckinInterval?: number;

35
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/APIForm.tsx
View File

@ -3,7 +3,6 @@ import { useReducer } from 'react';
import { Plug2 } from 'lucide-react';
import { useCreateRemoteEnvironmentMutation } from '@/react/portainer/environments/queries/useCreateEnvironmentMutation';
import { Hardware } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/Hardware';
import { notifySuccess } from '@/portainer/services/notifications';
import {
Environment,
@ -13,6 +12,7 @@ import {
import { LoadingButton } from '@@/buttons/LoadingButton';
import { FormControl } from '@@/form-components/FormControl';
import { Input } from '@@/form-components/Input';
import { InsightsBox } from '@@/InsightsBox';
import { NameField } from '../../shared/NameField';
import { MoreSettingsSection } from '../../shared/MoreSettingsSection';
@ -23,9 +23,10 @@ import { TLSFieldset } from './TLSFieldset';
interface Props {
onCreate(environment: Environment): void;
isDockerStandalone?: boolean;
}
export function APIForm({ onCreate }: Props) {
export function APIForm({ onCreate, isDockerStandalone }: Props) {
const [formKey, clearForm] = useReducer((state) => state + 1, 0);
const initialValues: FormValues = {
url: '',
@ -35,7 +36,6 @@ export function APIForm({ onCreate }: Props) {
groupId: 1,
tagIds: [],
},
gpus: [],
};
const mutation = useCreateRemoteEnvironmentMutation(
@ -73,7 +73,33 @@ export function APIForm({ onCreate }: Props) {
<TLSFieldset />
<MoreSettingsSection>
<Hardware />
{isDockerStandalone && (
<InsightsBox
content={
<>
<p>
From 2.18 on, the set-up of available GPUs for a Docker
Standalone environment has been shifted from Add
environment and Environment details to Host -&gt; Setup,
so as to align with other settings.
</p>
<p>
A toggle has been introduced for enabling/disabling
management of GPU settings in the Portainer UI - to
alleviate the performance impact of showing those
settings.
</p>
<p>
The UI has been updated to clarify that GPU settings
support is only for Docker Standalone (and not Docker
Swarm, which was never supported in the UI).
</p>
</>
}
header="GPU settings update"
insightCloseId="gpu-settings-update-closed"
/>
)}
</MoreSettingsSection>
<div className="form-group">
@ -104,7 +130,6 @@ export function APIForm({ onCreate }: Props) {
options: {
tls,
meta: values.meta,
gpus: values.gpus,
},
},
{

3
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/APIForm.validation.tsx
View File

@ -1,7 +1,5 @@
import { boolean, object, SchemaOf, string } from 'yup';
import { gpusListValidation } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
import { metadataValidation } from '../../shared/MetadataFieldset/validation';
import { useNameValidation } from '../../shared/NameField';
@ -16,6 +14,5 @@ export function useValidation(): SchemaOf<FormValues> {
skipVerify: boolean(),
meta: metadataValidation(),
...certsValidation(),
gpus: gpusListValidation(),
});
}

5
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/APITab.tsx
View File

@ -4,12 +4,13 @@ import { APIForm } from './APIForm';
interface Props {
onCreate(environment: Environment): void;
isDockerStandalone?: boolean;
}
export function APITab({ onCreate }: Props) {
export function APITab({ onCreate, isDockerStandalone }: Props) {
return (
<div className="mt-5">
<APIForm onCreate={onCreate} />
<APIForm onCreate={onCreate} isDockerStandalone={isDockerStandalone} />
</div>
);
}

2
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/APITab/types.ts
View File

@ -1,4 +1,3 @@
import { Gpu } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
import { EnvironmentMetadata } from '@/react/portainer/environments/environment.service/create';
export interface FormValues {
@ -10,5 +9,4 @@ export interface FormValues {
certFile?: File;
keyFile?: File;
meta: EnvironmentMetadata;
gpus?: Gpu[];
}

35
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/SocketTab/SocketForm.tsx
View File

@ -3,7 +3,6 @@ import { useReducer } from 'react';
import { Plug2 } from 'lucide-react';
import { useCreateLocalDockerEnvironmentMutation } from '@/react/portainer/environments/queries/useCreateEnvironmentMutation';
import { Hardware } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/Hardware';
import { notifySuccess } from '@/portainer/services/notifications';
import { Environment } from '@/react/portainer/environments/types';
@ -11,6 +10,7 @@ import { LoadingButton } from '@@/buttons/LoadingButton';
import { FormControl } from '@@/form-components/FormControl';
import { Input } from '@@/form-components/Input';
import { SwitchField } from '@@/form-components/SwitchField';
import { InsightsBox } from '@@/InsightsBox';
import { NameField } from '../../shared/NameField';
import { MoreSettingsSection } from '../../shared/MoreSettingsSection';
@ -20,16 +20,16 @@ import { FormValues } from './types';
interface Props {
onCreate(environment: Environment): void;
isDockerStandalone?: boolean;
}
export function SocketForm({ onCreate }: Props) {
export function SocketForm({ onCreate, isDockerStandalone }: Props) {
const [formKey, clearForm] = useReducer((state) => state + 1, 0);
const initialValues: FormValues = {
name: '',
socketPath: '',
overridePath: false,
meta: { groupId: 1, tagIds: [] },
gpus: [],
};
const mutation = useCreateLocalDockerEnvironmentMutation();
@ -50,7 +50,33 @@ export function SocketForm({ onCreate }: Props) {
<OverrideSocketFieldset />
<MoreSettingsSection>
<Hardware />
{isDockerStandalone && (
<InsightsBox
content={
<>
<p>
From 2.18 on, the set-up of available GPUs for a Docker
Standalone environment has been shifted from Add
environment and Environment details to Host -&gt; Setup,
so as to align with other settings.
</p>
<p>
A toggle has been introduced for enabling/disabling
management of GPU settings in the Portainer UI - to
alleviate the performance impact of showing those
settings.
</p>
<p>
The UI has been updated to clarify that GPU settings
support is only for Docker Standalone (and not Docker
Swarm, which was never supported in the UI).
</p>
</>
}
header="GPU settings update"
insightCloseId="gpu-settings-update-closed"
/>
)}
</MoreSettingsSection>
<div className="form-group">
@ -76,7 +102,6 @@ export function SocketForm({ onCreate }: Props) {
{
name: values.name,
socketPath: values.overridePath ? values.socketPath : '',
gpus: values.gpus,
meta: values.meta,
},
{

3
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/SocketTab/SocketForm.validation.tsx
View File

@ -1,7 +1,5 @@
import { boolean, object, SchemaOf, string } from 'yup';
import { gpusListValidation } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
import { metadataValidation } from '../../shared/MetadataFieldset/validation';
import { useNameValidation } from '../../shared/NameField';
@ -21,6 +19,5 @@ export function useValidation(): SchemaOf<FormValues> {
)
: schema
),
gpus: gpusListValidation(),
});
}

8
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/SocketTab/SocketTab.tsx
View File

@ -6,15 +6,19 @@ import { SocketForm } from './SocketForm';
interface Props {
onCreate(environment: Environment): void;
isDockerStandalone?: boolean;
}
export function SocketTab({ onCreate }: Props) {
export function SocketTab({ onCreate, isDockerStandalone }: Props) {
return (
<>
<DeploymentScripts />
<div className="mt-5">
<SocketForm onCreate={onCreate} />
<SocketForm
onCreate={onCreate}
isDockerStandalone={isDockerStandalone}
/>
</div>
</>
);

2
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/SocketTab/types.ts
View File

@ -1,4 +1,3 @@
import { Gpu } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
import { EnvironmentMetadata } from '@/react/portainer/environments/environment.service/create';
export interface FormValues {
@ -6,5 +5,4 @@ export interface FormValues {
socketPath: string;
overridePath: boolean;
meta: EnvironmentMetadata;
gpus: Gpu[];
}

2
app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardDocker/WizardDocker.tsx
View File

@ -109,12 +109,14 @@ export function WizardDocker({ onCreate, isDockerStandalone }: Props) {
return (
<APITab
onCreate={(environment) => onCreate(environment, 'dockerApi')}
isDockerStandalone={isDockerStandalone}
/>
);
case 'socket':
return (
<SocketTab
onCreate={(environment) => onCreate(environment, 'localEndpoint')}
isDockerStandalone={isDockerStandalone}
/>
);
case 'edgeAgentStandard':

7
app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/AgentForm.tsx
View File

@ -11,14 +11,12 @@ import { LoadingButton } from '@@/buttons/LoadingButton';
import { NameField } from '../NameField';
import { MoreSettingsSection } from '../MoreSettingsSection';
import { Hardware } from '../Hardware/Hardware';
import { EnvironmentUrlField } from './EnvironmentUrlField';
import { useValidation } from './AgentForm.validation';
interface Props {
onCreate(environment: Environment): void;
showGpus?: boolean;
}
const initialValues: CreateAgentEnvironmentValues = {
@ -28,10 +26,9 @@ const initialValues: CreateAgentEnvironmentValues = {
groupId: 1,
tagIds: [],
},
gpus: [],
};
export function AgentForm({ onCreate, showGpus = false }: Props) {
export function AgentForm({ onCreate }: Props) {
const [formKey, clearForm] = useReducer((state) => state + 1, 0);
const mutation = useCreateAgentEnvironmentMutation();
@ -50,7 +47,7 @@ export function AgentForm({ onCreate, showGpus = false }: Props) {
<NameField />
<EnvironmentUrlField />
<MoreSettingsSection>{showGpus && <Hardware />}</MoreSettingsSection>
<MoreSettingsSection />
<div className="form-group">
<div className="col-sm-12">

2
app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/AgentForm/AgentForm.validation.tsx
View File

@ -1,6 +1,5 @@
import { object, SchemaOf, string } from 'yup';
import { gpusListValidation } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
import { CreateAgentEnvironmentValues } from '@/react/portainer/environments/environment.service/create';
import { metadataValidation } from '../MetadataFieldset/validation';
@ -11,7 +10,6 @@ export function useValidation(): SchemaOf<CreateAgentEnvironmentValues> {
name: useNameValidation(),
environmentUrl: environmentValidation(),
meta: metadataValidation(),
gpus: gpusListValidation(),
});
}

11
app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentForm/EdgeAgentForm.tsx
View File

@ -17,7 +17,6 @@ import { FormSection } from '@@/form-components/FormSection';
import { LoadingButton } from '@@/buttons/LoadingButton';
import { MoreSettingsSection } from '../../MoreSettingsSection';
import { Hardware } from '../../Hardware/Hardware';
import { EdgeAgentFieldset } from './EdgeAgentFieldset';
import { useValidationSchema } from './EdgeAgentForm.validation';
@ -26,16 +25,10 @@ import { FormValues } from './types';
interface Props {
onCreate(environment: Environment): void;
readonly: boolean;
showGpus?: boolean;
asyncMode: boolean;
}
export function EdgeAgentForm({
onCreate,
readonly,
asyncMode,
showGpus = false,
}: Props) {
export function EdgeAgentForm({ onCreate, readonly, asyncMode }: Props) {
const settingsQuery = useSettings();
const createMutation = useCreateEdgeAgentEnvironmentMutation();
@ -76,7 +69,6 @@ export function EdgeAgentForm({
/>
)}
</FormSection>
{showGpus && <Hardware />}
</MoreSettingsSection>
{!readonly && (
@ -133,6 +125,5 @@ export function buildInitialValues(settings: Settings): FormValues {
PingInterval: EDGE_ASYNC_INTERVAL_USE_DEFAULT,
SnapshotInterval: EDGE_ASYNC_INTERVAL_USE_DEFAULT,
},
gpus: [],
};
}

2
app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentForm/EdgeAgentForm.validation.ts
View File

@ -4,7 +4,6 @@ import {
edgeAsyncIntervalsValidation,
EdgeAsyncIntervalsValues,
} from '@/react/edge/components/EdgeAsyncIntervalsForm';
import { gpusListValidation } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
import { validation as urlValidation } from '@/react/portainer/common/PortainerTunnelAddrField';
import { validation as addressValidation } from '@/react/portainer/common/PortainerUrlField';
import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
@ -23,7 +22,6 @@ export function useValidationSchema(asyncMode: boolean): SchemaOf<FormValues> {
tunnelServerAddr: asyncMode ? string() : addressValidation(),
pollFrequency: number().required(),
meta: metadataValidation(),
gpus: gpusListValidation(),
edge: isBE
? edgeAsyncIntervalsValidation()
: (null as unknown as SchemaOf<EdgeAsyncIntervalsValues>),

2
app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentForm/types.ts
View File

@ -1,5 +1,4 @@
import { EdgeAsyncIntervalsValues } from '@/react/edge/components/EdgeAsyncIntervalsForm';
import { Gpu } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
import { EnvironmentMetadata } from '@/react/portainer/environments/environment.service/create';
export interface FormValues {
@ -9,7 +8,6 @@ export interface FormValues {
tunnelServerAddr?: string;
pollFrequency: number;
meta: EnvironmentMetadata;
gpus: Gpu[];
edge: EdgeAsyncIntervalsValues;
}

3
app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/EdgeAgentTab/EdgeAgentTab.tsx
View File

@ -15,7 +15,6 @@ interface Props {
onCreate: (environment: Environment) => void;
commands: CommandTab[] | Partial<Record<OS, CommandTab[]>>;
isNomadTokenVisible?: boolean;
showGpus?: boolean;
asyncMode?: boolean;
}
@ -23,7 +22,6 @@ export function EdgeAgentTab({
onCreate,
commands,
isNomadTokenVisible,
showGpus = false,
asyncMode = false,
}: Props) {
const [edgeInfo, setEdgeInfo] = useState<EdgeInfo>();
@ -35,7 +33,6 @@ export function EdgeAgentTab({
onCreate={handleCreate}
readonly={!!edgeInfo}
key={formKey}
showGpus={showGpus}
asyncMode={asyncMode}
/>

22
app/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/Hardware.tsx
View File

@ -1,22 +0,0 @@
import { useField } from 'formik';
import {
Gpu,
GpusList,
} from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
import { FormSection } from '@@/form-components/FormSection';
export function Hardware() {
const [field, , helpers] = useField('gpus');
function onChange(value: Gpu[]) {
helpers.setValue(value);
}
return (
<FormSection title="Hardware acceleration">
<GpusList value={field.value} onChange={onChange} />
</FormSection>
);
}