mirror of
https://github.com/portainer/portainer.git
synced 2025-08-10 16:25:22 +02:00
feat(gpu) EE-3191 Add GPU support for containers (#7146)
This commit is contained in:
congs
GitHub
parent
f0456cbf5f
commit
4997e9c7be
43 changed files with 758 additions and 10 deletions
210
app/docker/react/views/gpu.tsx
Normal file
210
app/docker/react/views/gpu.tsx
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
import { useMemo } from 'react';
|
||||
import { components } from 'react-select';
|
||||
import { OnChangeValue } from 'react-select/dist/declarations/src/types';
|
||||
import { OptionProps } from 'react-select/dist/declarations/src/components/Option';
|
||||
|
||||
import { Select } from '@@/form-components/ReactSelect';
|
||||
import { Switch } from '@@/form-components/SwitchField/Switch';
|
||||
import { Tooltip } from '@@/Tip/Tooltip';
|
||||
|
||||
interface Values {
|
||||
enabled: boolean;
|
||||
selectedGPUs: string[];
|
||||
capabilities: string[];
|
||||
}
|
||||
|
||||
interface GpuOption {
|
||||
value: string;
|
||||
label: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export interface GPU {
|
||||
value: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface Props {
|
||||
values: Values;
|
||||
onChange(values: Values): void;
|
||||
gpus: GPU[];
|
||||
usedGpus: string[];
|
||||
usedAllGpus: boolean;
|
||||
}
|
||||
|
||||
const NvidiaCapabilitiesOptions = [
|
||||
// Taken from https://github.com/containerd/containerd/blob/master/contrib/nvidia/nvidia.go#L40
|
||||
{
|
||||
value: 'compute',
|
||||
label: 'compute',
|
||||
description: 'required for CUDA and OpenCL applications',
|
||||
},
|
||||
{
|
||||
value: 'compat32',
|
||||
label: 'compat32',
|
||||
description: 'required for running 32-bit applications',
|
||||
},
|
||||
{
|
||||
value: 'graphics',
|
||||
label: 'graphics',
|
||||
description: 'required for running OpenGL and Vulkan applications',
|
||||
},
|
||||
{
|
||||
value: 'utility',
|
||||
label: 'utility',
|
||||
description: 'required for using nvidia-smi and NVML',
|
||||
},
|
||||
{
|
||||
value: 'video',
|
||||
label: 'video',
|
||||
description: 'required for using the Video Codec SDK',
|
||||
},
|
||||
{
|
||||
value: 'display',
|
||||
label: 'display',
|
||||
description: 'required for leveraging X11 display',
|
||||
},
|
||||
];
|
||||
|
||||
function Option(props: OptionProps<GpuOption, true>) {
|
||||
const {
|
||||
data: { value, description },
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
|
||||
<components.Option {...props}>
|
||||
{`${value} - ${description}`}
|
||||
</components.Option>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Gpu({
|
||||
values,
|
||||
onChange,
|
||||
gpus,
|
||||
usedGpus = [],
|
||||
usedAllGpus,
|
||||
}: Props) {
|
||||
const options = useMemo(() => {
|
||||
const options = gpus.map((gpu) => ({
|
||||
value: gpu.value,
|
||||
label:
|
||||
usedGpus.includes(gpu.value) || usedAllGpus
|
||||
? `${gpu.name} (in use)`
|
||||
: gpu.name,
|
||||
}));
|
||||
|
||||
return options;
|
||||
}, [gpus, usedGpus, usedAllGpus]);
|
||||
|
||||
function onChangeValues(key: string, newValue: boolean | string[]) {
|
||||
const newValues = {
|
||||
...values,
|
||||
[key]: newValue,
|
||||
};
|
||||
onChange(newValues);
|
||||
}
|
||||
|
||||
function toggleEnableGpu() {
|
||||
onChangeValues('enabled', !values.enabled);
|
||||
}
|
||||
|
||||
function onChangeSelectedGpus(newValue: OnChangeValue<GpuOption, true>) {
|
||||
onChangeValues(
|
||||
'selectedGPUs',
|
||||
newValue.map((option) => option.value)
|
||||
);
|
||||
}
|
||||
|
||||
function onChangeSelectedCaps(newValue: OnChangeValue<GpuOption, true>) {
|
||||
onChangeValues(
|
||||
'capabilities',
|
||||
newValue.map((option) => option.value)
|
||||
);
|
||||
}
|
||||
|
||||
const gpuCmd = useMemo(() => {
|
||||
const devices = values.selectedGPUs.join(',');
|
||||
const caps = values.capabilities.join(',');
|
||||
return `--gpus 'device=${devices},"capabilities=${caps}"`;
|
||||
}, [values.selectedGPUs, values.capabilities]);
|
||||
|
||||
const gpuValue = useMemo(
|
||||
() =>
|
||||
options.filter((option) => values.selectedGPUs.includes(option.value)),
|
||||
[values.selectedGPUs, options]
|
||||
);
|
||||
|
||||
const capValue = useMemo(
|
||||
() =>
|
||||
NvidiaCapabilitiesOptions.filter((option) =>
|
||||
values.capabilities.includes(option.value)
|
||||
),
|
||||
[values.capabilities]
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<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}
|
||||
onChange={toggleEnableGpu}
|
||||
className="ml-2"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-sm-9 col-lg-10 text-left">
|
||||
<Select<GpuOption, true>
|
||||
isMulti
|
||||
closeMenuOnSelect
|
||||
value={gpuValue}
|
||||
isDisabled={!values.enabled}
|
||||
onChange={onChangeSelectedGpus}
|
||||
options={options}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{values.enabled && (
|
||||
<>
|
||||
<div className="form-group">
|
||||
<div className="col-sm-3 col-lg-2 control-label text-left">
|
||||
Capabilities
|
||||
<Tooltip
|
||||
message={
|
||||
"This is the generated equivalent of the '--gpus' docker CLI parameter based on your settings."
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-sm-9 col-lg-10 text-left">
|
||||
<Select<GpuOption, true>
|
||||
isMulti
|
||||
closeMenuOnSelect
|
||||
value={capValue}
|
||||
options={NvidiaCapabilitiesOptions}
|
||||
components={{ Option }}
|
||||
onChange={onChangeSelectedCaps}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<div className="col-sm-3 col-lg-2 control-label text-left">
|
||||
Control
|
||||
<Tooltip message="This is the generated equivalent of the '--gpus' docker CLI parameter based on your settings." />
|
||||
</div>
|
||||
<div className="col-sm-9 col-lg-10">
|
||||
<code>{gpuCmd}</code>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,8 +1,13 @@
|
|||
import angular from 'angular';
|
||||
import { Gpu } from 'Docker/react/views/gpu';
|
||||
|
||||
import { ItemView } from '@/react/docker/networks/ItemView';
|
||||
import { r2a } from '@/react-tools/react2angular';
|
||||
|
||||
export const viewsModule = angular
|
||||
.module('portainer.docker.react.views', [])
|
||||
.component(
|
||||
'gpu',
|
||||
r2a(Gpu, ['values', 'onChange', 'gpus', 'usedGpus', 'usedAllGpus'])
|
||||
)
|
||||
.component('networkDetailsView', r2a(ItemView, [])).name;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
angular.module('portainer.docker').controller('ContainersController', ContainersController);
|
||||
import _ from 'lodash';
|
||||
|
||||
/* @ngInject */
|
||||
function ContainersController($scope, ContainerService, Notifications, endpoint) {
|
||||
|
|
@ -8,9 +9,42 @@ function ContainersController($scope, ContainerService, Notifications, endpoint)
|
|||
$scope.getContainers = getContainers;
|
||||
|
||||
function getContainers() {
|
||||
$scope.containers = null;
|
||||
$scope.containers_t = null;
|
||||
ContainerService.containers(1)
|
||||
.then(function success(data) {
|
||||
$scope.containers = data;
|
||||
$scope.containers_t = data;
|
||||
if ($scope.containers_t.length === 0) {
|
||||
$scope.containers = $scope.containers_t;
|
||||
return;
|
||||
}
|
||||
for (let item of $scope.containers_t) {
|
||||
ContainerService.container(item.Id).then(function success(data) {
|
||||
var Id = data.Id;
|
||||
for (var i = 0; i < $scope.containers_t.length; i++) {
|
||||
if (Id == $scope.containers_t[i].Id) {
|
||||
const gpuOptions = _.find(data.HostConfig.DeviceRequests, function (o) {
|
||||
return o.Driver === 'nvidia' || o.Capabilities[0][0] === 'gpu';
|
||||
});
|
||||
if (!gpuOptions) {
|
||||
$scope.containers_t[i]['Gpus'] = 'none';
|
||||
} else {
|
||||
let gpuStr = 'all';
|
||||
if (gpuOptions.Count !== -1) {
|
||||
gpuStr = `id:${_.join(gpuOptions.DeviceIDs, ',')}`;
|
||||
}
|
||||
$scope.containers_t[i]['Gpus'] = `${gpuStr}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let item of $scope.containers_t) {
|
||||
if (!Object.keys(item).includes('Gpus')) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
$scope.containers = $scope.containers_t;
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(function error(err) {
|
||||
Notifications.error('Failure', err, 'Unable to retrieve containers');
|
||||
|
|
|
|||
|
|
@ -69,6 +69,12 @@ angular.module('portainer.docker').controller('CreateContainerController', [
|
|||
$scope.containerWebhookFeature = FeatureId.CONTAINER_WEBHOOK;
|
||||
$scope.formValues = {
|
||||
alwaysPull: true,
|
||||
GPU: {
|
||||
enabled: false,
|
||||
useSpecific: false,
|
||||
selectedGPUs: [],
|
||||
capabilities: ['compute', 'utility'],
|
||||
},
|
||||
Console: 'none',
|
||||
Volumes: [],
|
||||
NetworkContainer: null,
|
||||
|
|
@ -149,6 +155,7 @@ angular.module('portainer.docker').controller('CreateContainerController', [
|
|||
Runtime: null,
|
||||
ExtraHosts: [],
|
||||
Devices: [],
|
||||
DeviceRequests: [],
|
||||
CapAdd: [],
|
||||
CapDrop: [],
|
||||
Sysctls: {},
|
||||
|
|
@ -199,6 +206,12 @@ angular.module('portainer.docker').controller('CreateContainerController', [
|
|||
$scope.config.HostConfig.Devices.splice(index, 1);
|
||||
};
|
||||
|
||||
$scope.onGpuChange = function (values) {
|
||||
return $async(async () => {
|
||||
$scope.formValues.GPU = values;
|
||||
});
|
||||
};
|
||||
|
||||
$scope.addSysctl = function () {
|
||||
$scope.formValues.Sysctls.push({ name: '', value: '' });
|
||||
};
|
||||
|
|
@ -417,6 +430,36 @@ angular.module('portainer.docker').controller('CreateContainerController', [
|
|||
config.HostConfig.CapDrop = notAllowed.map(getCapName);
|
||||
}
|
||||
|
||||
function prepareGPUOptions(config) {
|
||||
const driver = 'nvidia';
|
||||
const gpuOptions = $scope.formValues.GPU;
|
||||
|
||||
const existingDeviceRequest = _.find($scope.config.HostConfig.DeviceRequests, function (o) {
|
||||
return o.Driver === driver || o.Capabilities[0][0] === 'gpu';
|
||||
});
|
||||
if (existingDeviceRequest) {
|
||||
_.pullAllBy(config.HostConfig.DeviceRequests, [existingDeviceRequest], 'Driver');
|
||||
}
|
||||
|
||||
if (!gpuOptions.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const deviceRequest = existingDeviceRequest || {
|
||||
Driver: driver,
|
||||
Count: -1,
|
||||
DeviceIDs: [], // must be empty if Count != 0 https://github.com/moby/moby/blob/master/daemon/nvidia_linux.go#L50
|
||||
Capabilities: [], // array of ORed arrays of ANDed capabilites = [ [c1 AND c2] OR [c1 AND c3] ] : https://github.com/moby/moby/blob/master/api/types/container/host_config.go#L272
|
||||
// Options: { property1: "string", property2: "string" }, // seems to never be evaluated/used in docker API ?
|
||||
};
|
||||
|
||||
deviceRequest.DeviceIDs = gpuOptions.selectedGPUs;
|
||||
deviceRequest.Count = 0;
|
||||
deviceRequest.Capabilities = [gpuOptions.capabilities];
|
||||
|
||||
config.HostConfig.DeviceRequests.push(deviceRequest);
|
||||
}
|
||||
|
||||
function prepareConfiguration() {
|
||||
var config = angular.copy($scope.config);
|
||||
prepareCmd(config);
|
||||
|
|
@ -433,6 +476,7 @@ angular.module('portainer.docker').controller('CreateContainerController', [
|
|||
prepareLogDriver(config);
|
||||
prepareCapabilities(config);
|
||||
prepareSysctls(config);
|
||||
prepareGPUOptions(config);
|
||||
return config;
|
||||
}
|
||||
|
||||
|
|
@ -571,6 +615,24 @@ angular.module('portainer.docker').controller('CreateContainerController', [
|
|||
$scope.config.HostConfig.Devices = path;
|
||||
}
|
||||
|
||||
function loadFromContainerDeviceRequests() {
|
||||
const deviceRequest = _.find($scope.config.HostConfig.DeviceRequests, function (o) {
|
||||
return o.Driver === 'nvidia' || o.Capabilities[0][0] === 'gpu';
|
||||
});
|
||||
if (deviceRequest) {
|
||||
$scope.formValues.GPU.enabled = true;
|
||||
$scope.formValues.GPU.useSpecific = deviceRequest.Count !== -1;
|
||||
$scope.formValues.GPU.selectedGPUs = deviceRequest.DeviceIDs || [];
|
||||
if ($scope.formValues.GPU.useSpecific) {
|
||||
$scope.formValues.GPU.selectedGPUs = deviceRequest.DeviceIDs;
|
||||
}
|
||||
// we only support a single set of capabilities for now
|
||||
// UI needs to be reworked in order to support OR combinations of AND capabilities
|
||||
$scope.formValues.GPU.capabilities = deviceRequest.Capabilities[0];
|
||||
$scope.formValues.GPU = { ...$scope.formValues.GPU };
|
||||
}
|
||||
}
|
||||
|
||||
function loadFromContainerSysctls() {
|
||||
for (var s in $scope.config.HostConfig.Sysctls) {
|
||||
if ({}.hasOwnProperty.call($scope.config.HostConfig.Sysctls, s)) {
|
||||
|
|
@ -651,6 +713,7 @@ angular.module('portainer.docker').controller('CreateContainerController', [
|
|||
loadFromContainerLabels(d);
|
||||
loadFromContainerConsole(d);
|
||||
loadFromContainerDevices(d);
|
||||
loadFromContainerDeviceRequests(d);
|
||||
loadFromContainerImageConfig(d);
|
||||
loadFromContainerResources(d);
|
||||
loadFromContainerCapabilities(d);
|
||||
|
|
@ -715,6 +778,8 @@ angular.module('portainer.docker').controller('CreateContainerController', [
|
|||
function (d) {
|
||||
var containers = d;
|
||||
$scope.runningContainers = containers;
|
||||
$scope.gpuUseAll = $scope.endpoint.Snapshots[0].GpuUseAll;
|
||||
$scope.gpuUseList = $scope.endpoint.Snapshots[0].GpuUseList;
|
||||
if ($transition$.params().from) {
|
||||
loadFromContainerSpec();
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -693,6 +693,20 @@
|
|||
<!-- !sysctls-input-list -->
|
||||
</div>
|
||||
<!-- !sysctls -->
|
||||
<!-- #region GPU -->
|
||||
<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>
|
||||
|
||||
<!-- #endregion GPU -->
|
||||
<div ng-class="{ 'edit-resources': state.mode == 'duplicate' }">
|
||||
<div class="col-sm-12 form-section-title"> Resources </div>
|
||||
<!-- memory-reservation-input -->
|
||||
|
|
|
|||
|
|
@ -322,6 +322,10 @@
|
|||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-if="container.HostConfig.DeviceRequests.length">
|
||||
<td>GPUS</td>
|
||||
<td>{{ computeDockerGPUCommand() }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</rd-widget-body>
|
||||
|
|
|
|||
|
|
@ -77,6 +77,23 @@ angular.module('portainer.docker').controller('ContainerController', [
|
|||
$state.reload();
|
||||
};
|
||||
|
||||
$scope.computeDockerGPUCommand = () => {
|
||||
const gpuOptions = _.find($scope.container.HostConfig.DeviceRequests, function (o) {
|
||||
return o.Driver === 'nvidia' || o.Capabilities[0][0] === 'gpu';
|
||||
});
|
||||
if (!gpuOptions) {
|
||||
return 'No GPU config found';
|
||||
}
|
||||
let gpuStr = 'all';
|
||||
if (gpuOptions.Count !== -1) {
|
||||
gpuStr = `"device=${_.join(gpuOptions.DeviceIDs, ',')}"`;
|
||||
}
|
||||
// we only support a single set of capabilities for now
|
||||
// creation UI needs to be reworked in order to support OR combinations of AND capabilities
|
||||
const capStr = `"capabilities=${_.join(gpuOptions.Capabilities[0], ',')}"`;
|
||||
return `${gpuStr},${capStr}`;
|
||||
};
|
||||
|
||||
var update = function () {
|
||||
var nodeName = $transition$.params().nodeName;
|
||||
HttpRequestHelper.setPortainerAgentTargetHeader(nodeName);
|
||||
|
|
|
|||
|
|
@ -53,6 +53,10 @@
|
|||
<td>URL</td>
|
||||
<td>{{ endpoint.URL | stripprotocol }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ endpoint.Gpus.length <= 1 ? 'GPU' : 'GPUs' }}</td>
|
||||
<td>{{ gpuInfoStr }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tags</td>
|
||||
<td>{{ endpointTags }}</td>
|
||||
|
|
@ -97,5 +101,9 @@
|
|||
<a ui-sref="docker.networks">
|
||||
<dashboard-item icon="'fa-sitemap'" type="'Network'" value="networkCount"></dashboard-item>
|
||||
</a>
|
||||
|
||||
<div>
|
||||
<dashboard-item icon="'fa-digital-tachograph'" type="'GPU'" value="endpoint.Gpus.length"></dashboard-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -44,6 +44,36 @@ angular.module('portainer.docker').controller('DashboardController', [
|
|||
$scope.offlineMode = false;
|
||||
$scope.showStacks = false;
|
||||
|
||||
$scope.buildGpusStr = function (gpuUseSet) {
|
||||
var gpusAvailable = new Object();
|
||||
for (let i = 0; i < $scope.endpoint.Gpus.length; i++) {
|
||||
if (!gpuUseSet.has($scope.endpoint.Gpus[i].name)) {
|
||||
var exist = false;
|
||||
for (let gpuAvailable in gpusAvailable) {
|
||||
if ($scope.endpoint.Gpus[i].value == gpuAvailable) {
|
||||
gpusAvailable[gpuAvailable] += 1;
|
||||
exist = true;
|
||||
}
|
||||
}
|
||||
if (exist === false) {
|
||||
gpusAvailable[$scope.endpoint.Gpus[i].value] = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
var retStr = Object.keys(gpusAvailable).length
|
||||
? _.join(
|
||||
_.map(Object.keys(gpusAvailable), (gpuAvailable) => {
|
||||
var _str = gpusAvailable[gpuAvailable];
|
||||
_str += ' x ';
|
||||
_str += gpuAvailable;
|
||||
return _str;
|
||||
}),
|
||||
' + '
|
||||
)
|
||||
: 'none';
|
||||
return retStr;
|
||||
};
|
||||
|
||||
async function initView() {
|
||||
const endpointMode = $scope.applicationState.endpoint.mode;
|
||||
$scope.endpoint = endpoint;
|
||||
|
|
@ -72,6 +102,14 @@ angular.module('portainer.docker').controller('DashboardController', [
|
|||
$scope.serviceCount = data.services.length;
|
||||
$scope.stackCount = data.stacks.length;
|
||||
$scope.info = data.info;
|
||||
|
||||
$scope.gpuInfoStr = $scope.buildGpusStr(new Set());
|
||||
$scope.gpuUseAll = _.get($scope, 'endpoint.Snapshots[0].GpuUseAll', false);
|
||||
$scope.gpuUseList = _.get($scope, 'endpoint.Snapshots[0].GpuUseList', []);
|
||||
$scope.gpuFreeStr = 'all';
|
||||
if ($scope.gpuUseAll == true) $scope.gpuFreeStr = 'none';
|
||||
else $scope.gpuFreeStr = $scope.buildGpusStr(new Set($scope.gpuUseList));
|
||||
|
||||
$scope.endpointTags = endpoint.TagIds.length
|
||||
? _.join(
|
||||
_.filter(
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { Gpu } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
import { type EnvironmentGroupId } from '@/portainer/environment-groups/types';
|
||||
import { type TagId } from '@/portainer/tags/types';
|
||||
|
|
@ -16,6 +17,7 @@ interface CreateLocalDockerEnvironment {
|
|||
socketPath?: string;
|
||||
publicUrl?: string;
|
||||
meta?: EnvironmentMetadata;
|
||||
gpus?: Gpu[];
|
||||
}
|
||||
|
||||
export async function createLocalDockerEnvironment({
|
||||
|
|
@ -23,6 +25,7 @@ export async function createLocalDockerEnvironment({
|
|||
socketPath = '',
|
||||
publicUrl = '',
|
||||
meta = { tagIds: [] },
|
||||
gpus = [],
|
||||
}: CreateLocalDockerEnvironment) {
|
||||
const url = prefixPath(socketPath);
|
||||
|
||||
|
|
@ -33,6 +36,7 @@ export async function createLocalDockerEnvironment({
|
|||
url,
|
||||
publicUrl,
|
||||
meta,
|
||||
gpus,
|
||||
}
|
||||
);
|
||||
|
||||
|
|
@ -105,6 +109,7 @@ export interface EnvironmentOptions {
|
|||
azure?: AzureSettings;
|
||||
tls?: TLSSettings;
|
||||
isEdgeDevice?: boolean;
|
||||
gpus?: Gpu[];
|
||||
}
|
||||
|
||||
interface CreateRemoteEnvironment {
|
||||
|
|
@ -133,6 +138,7 @@ export interface CreateAgentEnvironmentValues {
|
|||
name: string;
|
||||
environmentUrl: string;
|
||||
meta: EnvironmentMetadata;
|
||||
gpus: Gpu[];
|
||||
}
|
||||
|
||||
export function createAgentEnvironment({
|
||||
|
|
@ -159,12 +165,14 @@ interface CreateEdgeAgentEnvironment {
|
|||
portainerUrl: string;
|
||||
meta?: EnvironmentMetadata;
|
||||
pollFrequency: number;
|
||||
gpus?: Gpu[];
|
||||
}
|
||||
|
||||
export function createEdgeAgentEnvironment({
|
||||
name,
|
||||
portainerUrl,
|
||||
meta = { tagIds: [] },
|
||||
gpus = [],
|
||||
}: CreateEdgeAgentEnvironment) {
|
||||
return createEnvironment(
|
||||
name,
|
||||
|
|
@ -176,6 +184,7 @@ export function createEdgeAgentEnvironment({
|
|||
skipVerify: true,
|
||||
skipClientVerify: true,
|
||||
},
|
||||
gpus,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
@ -201,6 +210,7 @@ async function createEnvironment(
|
|||
TagIds: arrayToJson(tagIds),
|
||||
CheckinInterval: options.checkinInterval,
|
||||
IsEdgeDevice: options.isEdgeDevice,
|
||||
Gpus: arrayToJson(options.gpus),
|
||||
};
|
||||
|
||||
const { tls, azure } = options;
|
||||
|
|
|
|||
|
|
@ -40,6 +40,8 @@ export interface DockerSnapshot {
|
|||
ServiceCount: number;
|
||||
Swarm: boolean;
|
||||
DockerVersion: string;
|
||||
GpuUseAll: boolean;
|
||||
GpuUseList: string[];
|
||||
}
|
||||
|
||||
export interface KubernetesSnapshot {
|
||||
|
|
@ -103,6 +105,7 @@ export type Environment = {
|
|||
AMTDeviceGUID?: string;
|
||||
Edge: EnvironmentEdge;
|
||||
SecuritySettings: EnvironmentSecuritySettings;
|
||||
Gpus: { name: string; value: string }[];
|
||||
};
|
||||
/**
|
||||
* TS reference of endpoint_create.go#EndpointCreationType iota
|
||||
|
|
|
|||
|
|
@ -100,6 +100,8 @@ export function EnvironmentItem({ environment, onClick, groupName }: Props) {
|
|||
{environment.Snapshots[0].TotalCPU}
|
||||
<i className="fa fa-memory space-left space-right" />
|
||||
{humanize(environment.Snapshots[0].TotalMemory)}
|
||||
<i className="fa fa-digital-tachograph space-left space-right" />
|
||||
{environment.Gpus.length}
|
||||
</span>
|
||||
)}
|
||||
<span className="space-left space-right">-</span>
|
||||
|
|
|
|||
|
|
@ -222,6 +222,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- !open-amt info -->
|
||||
<!-- gpus info -->
|
||||
<div class="col-sm-12 form-section-title">Hardware acceleration</div>
|
||||
<gpus-list value="endpoint.Gpus || []" on-change="(onGpusChange)"></gpus-list>
|
||||
<!-- gpus info -->
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -9,8 +9,9 @@ import { confirmAsync } from '@/portainer/services/modal.service/confirm';
|
|||
import { isEdgeEnvironment } from '@/portainer/environments/utils';
|
||||
|
||||
import { commandsTabs } from '@/react/edge/components/EdgeScriptForm/scripts';
|
||||
import { GpusListAngular } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
|
||||
|
||||
angular.module('portainer.app').controller('EndpointController', EndpointController);
|
||||
angular.module('portainer.app').component('gpusList', GpusListAngular).controller('EndpointController', EndpointController);
|
||||
|
||||
/* @ngInject */
|
||||
function EndpointController(
|
||||
|
|
@ -34,6 +35,12 @@ function EndpointController(
|
|||
const isBE = process.env.PORTAINER_EDITION === 'BE';
|
||||
|
||||
$scope.state = {
|
||||
selectAll: false,
|
||||
// displayTextFilter: false,
|
||||
get selectedItemCount() {
|
||||
return $scope.state.selectedItems.length || 0;
|
||||
},
|
||||
selectedItems: [],
|
||||
uploadInProgress: false,
|
||||
actionInProgress: false,
|
||||
azureEndpoint: false,
|
||||
|
|
@ -51,6 +58,46 @@ function EndpointController(
|
|||
},
|
||||
};
|
||||
|
||||
$scope.selectAll = function () {
|
||||
$scope.state.firstClickedItem = null;
|
||||
for (var i = 0; i < $scope.state.filteredDataSet.length; i++) {
|
||||
var item = $scope.state.filteredDataSet[i];
|
||||
if (item.Checked !== $scope.state.selectAll) {
|
||||
// if ($scope.allowSelection(item) && item.Checked !== $scope.state.selectAll) {
|
||||
item.Checked = $scope.state.selectAll;
|
||||
$scope.selectItem(item);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function isBetween(value, a, b) {
|
||||
return (value >= a && value <= b) || (value >= b && value <= a);
|
||||
}
|
||||
|
||||
$scope.selectItem = function (item, event) {
|
||||
// Handle range select using shift
|
||||
if (event && event.originalEvent.shiftKey && $scope.state.firstClickedItem) {
|
||||
const firstItemIndex = $scope.state.filteredDataSet.indexOf($scope.state.firstClickedItem);
|
||||
const lastItemIndex = $scope.state.filteredDataSet.indexOf(item);
|
||||
const itemsInRange = _.filter($scope.state.filteredDataSet, (item, index) => {
|
||||
return isBetween(index, firstItemIndex, lastItemIndex);
|
||||
});
|
||||
const value = $scope.state.firstClickedItem.Checked;
|
||||
|
||||
_.forEach(itemsInRange, (i) => {
|
||||
i.Checked = value;
|
||||
});
|
||||
$scope.state.firstClickedItem = item;
|
||||
} else if (event) {
|
||||
item.Checked = !item.Checked;
|
||||
$scope.state.firstClickedItem = item;
|
||||
}
|
||||
$scope.state.selectedItems = _.uniq(_.concat($scope.state.selectedItems, $scope.state.filteredDataSet)).filter((i) => i.Checked);
|
||||
if (event && $scope.state.selectAll && $scope.state.selectedItems.length !== $scope.state.filteredDataSet.length) {
|
||||
$scope.state.selectAll = false;
|
||||
}
|
||||
};
|
||||
|
||||
$scope.formValues = {
|
||||
SecurityFormData: new EndpointSecurityFormData(),
|
||||
};
|
||||
|
|
@ -106,6 +153,36 @@ function EndpointController(
|
|||
});
|
||||
}
|
||||
|
||||
$scope.onGpusChange = onGpusChange;
|
||||
|
||||
Array.prototype.indexOf = function (val) {
|
||||
for (var i = 0; i < this.length; i++) {
|
||||
if (this[i] == val) return i;
|
||||
}
|
||||
return -1;
|
||||
};
|
||||
Array.prototype.remove = function (val) {
|
||||
var index = this.indexOf(val);
|
||||
if (index > -1) {
|
||||
this.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
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;
|
||||
|
|
@ -135,9 +212,11 @@ function EndpointController(
|
|||
}
|
||||
}
|
||||
|
||||
verifyGpus();
|
||||
var payload = {
|
||||
Name: endpoint.Name,
|
||||
PublicURL: endpoint.PublicURL,
|
||||
Gpus: endpoint.Gpus,
|
||||
GroupID: endpoint.GroupId,
|
||||
TagIds: endpoint.TagIds,
|
||||
TLS: TLS,
|
||||
|
|
|
|||
|
|
@ -91,5 +91,6 @@ export function createMockEnvironment(): Environment {
|
|||
allowVolumeBrowserForRegularUsers: false,
|
||||
enableHostManagementFeatures: false,
|
||||
},
|
||||
Gpus: [],
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,12 +15,19 @@ export function useInputGroupContext() {
|
|||
|
||||
interface Props {
|
||||
size?: Size;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function InputGroup({ children, size }: PropsWithChildren<Props>) {
|
||||
export function InputGroup({
|
||||
children,
|
||||
size,
|
||||
className,
|
||||
}: PropsWithChildren<Props>) {
|
||||
return (
|
||||
<Context.Provider value>
|
||||
<div className={clsx('input-group', sizeClass(size))}>{children}</div>
|
||||
<div className={clsx('input-group', sizeClass(size), className)}>
|
||||
{children}
|
||||
</div>
|
||||
</Context.Provider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ interface InputGroupSubComponents {
|
|||
Addon: typeof InputGroupAddon;
|
||||
ButtonWrapper: typeof InputGroupButtonWrapper;
|
||||
Input: typeof Input;
|
||||
className: string | undefined;
|
||||
}
|
||||
|
||||
const InputGroup: typeof MainComponent & InputGroupSubComponents =
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@
|
|||
background-color: var(--bg-multiselect-color);
|
||||
border: 1px solid var(--border-multiselect);
|
||||
padding: 5px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.root :global .selector__option {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
import { Column } from 'react-table';
|
||||
|
||||
import type { DockerContainer } from '@/react/docker/containers/types';
|
||||
|
||||
export const gpus: Column<DockerContainer> = {
|
||||
Header: 'GPUs',
|
||||
accessor: 'Gpus',
|
||||
id: 'gpus',
|
||||
disableFilters: true,
|
||||
canHide: true,
|
||||
Filter: () => null,
|
||||
};
|
||||
|
|
@ -10,6 +10,7 @@ import { ports } from './ports';
|
|||
import { quickActions } from './quick-actions';
|
||||
import { stack } from './stack';
|
||||
import { state } from './state';
|
||||
import { gpus } from './gpus';
|
||||
|
||||
export function useColumns() {
|
||||
return useMemo(
|
||||
|
|
@ -22,6 +23,7 @@ export function useColumns() {
|
|||
created,
|
||||
ip,
|
||||
host,
|
||||
gpus,
|
||||
ports,
|
||||
ownership,
|
||||
],
|
||||
|
|
|
|||
|
|
@ -50,4 +50,5 @@ export type DockerContainer = {
|
|||
Ports: Port[];
|
||||
StackName?: string;
|
||||
Image: string;
|
||||
Gpus: string;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { Field, Form, Formik } from 'formik';
|
|||
import { useReducer } from 'react';
|
||||
|
||||
import { useCreateRemoteEnvironmentMutation } from '@/portainer/environments/queries/useCreateEnvironmentMutation';
|
||||
import { Hardware } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/Hardware';
|
||||
import { notifySuccess } from '@/portainer/services/notifications';
|
||||
import {
|
||||
Environment,
|
||||
|
|
@ -33,6 +34,7 @@ export function APIForm({ onCreate }: Props) {
|
|||
groupId: 1,
|
||||
tagIds: [],
|
||||
},
|
||||
gpus: [],
|
||||
};
|
||||
|
||||
const mutation = useCreateRemoteEnvironmentMutation(
|
||||
|
|
@ -67,7 +69,9 @@ export function APIForm({ onCreate }: Props) {
|
|||
|
||||
<TLSFieldset />
|
||||
|
||||
<MoreSettingsSection />
|
||||
<MoreSettingsSection>
|
||||
<Hardware />
|
||||
</MoreSettingsSection>
|
||||
|
||||
<div className="form-group">
|
||||
<div className="col-sm-12">
|
||||
|
|
@ -96,6 +100,7 @@ export function APIForm({ onCreate }: Props) {
|
|||
options: {
|
||||
tls,
|
||||
meta: values.meta,
|
||||
gpus: values.gpus,
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
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 { nameValidation } from '../../shared/NameField';
|
||||
|
||||
|
|
@ -14,5 +16,6 @@ export function validation(): SchemaOf<FormValues> {
|
|||
skipVerify: boolean(),
|
||||
meta: metadataValidation(),
|
||||
...certsValidation(),
|
||||
gpus: gpusListValidation(),
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { Gpu } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
|
||||
import { EnvironmentMetadata } from '@/portainer/environments/environment.service/create';
|
||||
|
||||
export interface FormValues {
|
||||
|
|
@ -9,4 +10,5 @@ export interface FormValues {
|
|||
certFile?: File;
|
||||
keyFile?: File;
|
||||
meta: EnvironmentMetadata;
|
||||
gpus?: Gpu[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { Field, Form, Formik, useFormikContext } from 'formik';
|
|||
import { useReducer } from 'react';
|
||||
|
||||
import { useCreateLocalDockerEnvironmentMutation } from '@/portainer/environments/queries/useCreateEnvironmentMutation';
|
||||
import { Hardware } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/Hardware';
|
||||
import { notifySuccess } from '@/portainer/services/notifications';
|
||||
import { Environment } from '@/portainer/environments/types';
|
||||
|
||||
|
|
@ -27,6 +28,7 @@ export function SocketForm({ onCreate }: Props) {
|
|||
socketPath: '',
|
||||
overridePath: false,
|
||||
meta: { groupId: 1, tagIds: [] },
|
||||
gpus: [],
|
||||
};
|
||||
|
||||
const mutation = useCreateLocalDockerEnvironmentMutation();
|
||||
|
|
@ -45,7 +47,10 @@ export function SocketForm({ onCreate }: Props) {
|
|||
|
||||
<OverrideSocketFieldset />
|
||||
|
||||
<MoreSettingsSection />
|
||||
<MoreSettingsSection>
|
||||
<Hardware />
|
||||
</MoreSettingsSection>
|
||||
|
||||
<div className="form-group">
|
||||
<div className="col-sm-12">
|
||||
<LoadingButton
|
||||
|
|
@ -68,6 +73,7 @@ export function SocketForm({ onCreate }: Props) {
|
|||
{
|
||||
name: values.name,
|
||||
socketPath: values.overridePath ? values.socketPath : '',
|
||||
gpus: values.gpus,
|
||||
},
|
||||
{
|
||||
onSuccess(environment) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
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 { nameValidation } from '../../shared/NameField';
|
||||
|
||||
|
|
@ -19,5 +21,6 @@ export function validation(): SchemaOf<FormValues> {
|
|||
)
|
||||
: schema
|
||||
),
|
||||
gpus: gpusListValidation(),
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { Gpu } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
|
||||
import { EnvironmentMetadata } from '@/portainer/environments/environment.service/create';
|
||||
|
||||
export interface FormValues {
|
||||
|
|
@ -5,4 +6,5 @@ export interface FormValues {
|
|||
socketPath: string;
|
||||
overridePath: boolean;
|
||||
meta: EnvironmentMetadata;
|
||||
gpus: Gpu[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,12 +10,14 @@ import { LoadingButton } from '@@/buttons/LoadingButton';
|
|||
|
||||
import { NameField } from '../NameField';
|
||||
import { MoreSettingsSection } from '../MoreSettingsSection';
|
||||
import { Hardware } from '../Hardware/Hardware';
|
||||
|
||||
import { EnvironmentUrlField } from './EnvironmentUrlField';
|
||||
import { validation } from './AgentForm.validation';
|
||||
|
||||
interface Props {
|
||||
onCreate(environment: Environment): void;
|
||||
showGpus?: boolean;
|
||||
}
|
||||
|
||||
const initialValues: CreateAgentEnvironmentValues = {
|
||||
|
|
@ -25,9 +27,10 @@ const initialValues: CreateAgentEnvironmentValues = {
|
|||
groupId: 1,
|
||||
tagIds: [],
|
||||
},
|
||||
gpus: [],
|
||||
};
|
||||
|
||||
export function AgentForm({ onCreate }: Props) {
|
||||
export function AgentForm({ onCreate, showGpus = false }: Props) {
|
||||
const [formKey, clearForm] = useReducer((state) => state + 1, 0);
|
||||
|
||||
const mutation = useCreateAgentEnvironmentMutation();
|
||||
|
|
@ -45,7 +48,7 @@ export function AgentForm({ onCreate }: Props) {
|
|||
<NameField />
|
||||
<EnvironmentUrlField />
|
||||
|
||||
<MoreSettingsSection />
|
||||
<MoreSettingsSection>{showGpus && <Hardware />}</MoreSettingsSection>
|
||||
|
||||
<div className="form-group">
|
||||
<div className="col-sm-12">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { object, SchemaOf, string } from 'yup';
|
||||
|
||||
import { gpusListValidation } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
|
||||
import { CreateAgentEnvironmentValues } from '@/portainer/environments/environment.service/create';
|
||||
|
||||
import { metadataValidation } from '../MetadataFieldset/validation';
|
||||
|
|
@ -10,5 +11,6 @@ export function validation(): SchemaOf<CreateAgentEnvironmentValues> {
|
|||
name: nameValidation(),
|
||||
environmentUrl: string().required('This field is required.'),
|
||||
meta: metadataValidation(),
|
||||
gpus: gpusListValidation(),
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ 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 { validationSchema } from './EdgeAgentForm.validation';
|
||||
|
|
@ -17,11 +18,12 @@ import { FormValues } from './types';
|
|||
interface Props {
|
||||
onCreate(environment: Environment): void;
|
||||
readonly: boolean;
|
||||
showGpus?: boolean;
|
||||
}
|
||||
|
||||
const initialValues = buildInitialValues();
|
||||
|
||||
export function EdgeAgentForm({ onCreate, readonly }: Props) {
|
||||
export function EdgeAgentForm({ onCreate, readonly, showGpus = false }: Props) {
|
||||
const createMutation = useCreateEdgeAgentEnvironmentMutation();
|
||||
|
||||
return (
|
||||
|
|
@ -43,6 +45,7 @@ export function EdgeAgentForm({ onCreate, readonly }: Props) {
|
|||
value={values.pollFrequency}
|
||||
/>
|
||||
</FormSection>
|
||||
{showGpus && <Hardware />}
|
||||
</MoreSettingsSection>
|
||||
|
||||
{!readonly && (
|
||||
|
|
@ -82,6 +85,7 @@ export function buildInitialValues(): FormValues {
|
|||
groupId: 1,
|
||||
tagIds: [],
|
||||
},
|
||||
gpus: [],
|
||||
};
|
||||
|
||||
function defaultPortainerUrl() {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { number, object, SchemaOf } from 'yup';
|
||||
|
||||
import { gpusListValidation } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
|
||||
|
||||
import { metadataValidation } from '../../MetadataFieldset/validation';
|
||||
import { nameValidation } from '../../NameField';
|
||||
|
||||
|
|
@ -12,5 +14,6 @@ export function validationSchema(): SchemaOf<FormValues> {
|
|||
portainerUrl: urlValidation(),
|
||||
pollFrequency: number().required(),
|
||||
meta: metadataValidation(),
|
||||
gpus: gpusListValidation(),
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { Gpu } from '@/react/portainer/environments/wizard/EnvironmentsCreationView/shared/Hardware/GpusList';
|
||||
import { EnvironmentMetadata } from '@/portainer/environments/environment.service/create';
|
||||
|
||||
export interface FormValues {
|
||||
|
|
@ -6,4 +7,5 @@ export interface FormValues {
|
|||
portainerUrl: string;
|
||||
pollFrequency: number;
|
||||
meta: EnvironmentMetadata;
|
||||
gpus: Gpu[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,12 +14,14 @@ interface Props {
|
|||
onCreate: (environment: Environment) => void;
|
||||
commands: CommandTab[] | Partial<Record<OS, CommandTab[]>>;
|
||||
isNomadTokenVisible?: boolean;
|
||||
showGpus?: boolean;
|
||||
}
|
||||
|
||||
export function EdgeAgentTab({
|
||||
onCreate,
|
||||
commands,
|
||||
isNomadTokenVisible,
|
||||
showGpus = false,
|
||||
}: Props) {
|
||||
const [edgeInfo, setEdgeInfo] = useState<EdgeInfo>();
|
||||
|
||||
|
|
@ -31,6 +33,7 @@ export function EdgeAgentTab({
|
|||
onCreate={handleCreate}
|
||||
readonly={!!edgeInfo}
|
||||
key={formKey}
|
||||
showGpus={showGpus}
|
||||
/>
|
||||
|
||||
{edgeInfo && (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
import { array, object, string } from 'yup';
|
||||
|
||||
import { r2a } from '@/react-tools/react2angular';
|
||||
|
||||
import { InputList } from '@@/form-components/InputList';
|
||||
import { ItemProps } from '@@/form-components/InputList/InputList';
|
||||
import { InputGroup } from '@@/form-components/InputGroup';
|
||||
|
||||
export interface Gpu {
|
||||
value: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
value: Gpu[];
|
||||
onChange(value: Gpu[]): void;
|
||||
}
|
||||
|
||||
function Item({ item, onChange }: ItemProps<Gpu>) {
|
||||
return (
|
||||
<div className="flex gap-2 flex-grow">
|
||||
<InputGroup size="small" className="flex-grow">
|
||||
<InputGroup.Addon>GPU Name</InputGroup.Addon>
|
||||
<InputGroup.Input
|
||||
placeholder="my-gpu"
|
||||
value={item.name}
|
||||
onChange={(e) => {
|
||||
onChange({ ...item, name: e.target.value });
|
||||
}}
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<InputGroup size="small" className="flex-grow">
|
||||
<InputGroup.Addon>Index or UUID</InputGroup.Addon>
|
||||
<InputGroup.Input
|
||||
placeholder="0 or GPU-6e2c7185-c3d3-ae22-da43-bc5267b89061"
|
||||
value={item.value}
|
||||
onChange={(e) => {
|
||||
onChange({ ...item, value: e.target.value });
|
||||
}}
|
||||
/>
|
||||
</InputGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function GpusList({ value, onChange }: Props) {
|
||||
return (
|
||||
<InputList<Gpu>
|
||||
label="GPU"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
itemBuilder={() => ({ value: '', name: '' })}
|
||||
addLabel="add"
|
||||
item={Item}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function gpusListValidation() {
|
||||
const gpuShape = object().shape({
|
||||
name: string().required(),
|
||||
value: string().required(),
|
||||
});
|
||||
return array().of(gpuShape).default([]);
|
||||
}
|
||||
|
||||
export const GpusListAngular = r2a(GpusList, ['value', 'onChange']);
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue