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

refactor(ui/box-selector): replace all selectors [EE-3856] (#7902)

Browse source
This commit is contained in:
Chaim Lev-Ari 2023-02-07 09:03:57 +05:30 • committed by GitHub
parent c9253319d9
commit 2dddc1c6b9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
80 changed files with 1267 additions and 1011 deletions
Download patch file Download diff file Expand all files Collapse all files

31
app/docker/components/network-macvlan-form/networkMacvlanForm.html
View file

@ -1,39 +1,14 @@
<div>
<div class="col-sm-12 form-section-title"> Macvlan configuration </div>
<!-- selector -->
<div class="form-group">
<span class="col-sm-12 text-muted small vertical-center">
<pr-icon icon="'alert-circle'" mode="'primary'"></pr-icon>
To create a MACVLAN network you need to create a configuration, then create the network from this configuration.
</span>
</div>
<div class="col-sm-12">
<div class="form-group">
<div class="boxselector_wrapper">
<div>
<input type="radio" id="network_config" ng-model="$ctrl.data.Scope" value="local" />
<label for="network_config">
<div class="boxselector_header">
<pr-icon icon="'sliders'"></pr-icon>
Configuration
</div>
<p>I want to configure a network before deploying it</p>
</label>
</div>
<div>
<input type="radio" id="network_deploy" ng-model="$ctrl.data.Scope" value="swarm" ng-disabled="$ctrl.availableNetworks.length === 0" />
<label for="network_deploy" ng-class="$ctrl.availableNetworks.length === 0 ? 'boxselector_disabled' : ''">
<div class="boxselector_header">
<pr-icon icon="'share-2'"></pr-icon>
Creation
</div>
<p>I want to create a network from a configuration</p>
</label>
</div>
</div>
</div>
</div>
<!-- !selector -->
<box-selector slim="true" options="$ctrl.options" value="$ctrl.data.Scope" on-change="($ctrl.onChangeScope)"></box-selector>
<ng-form name="macvlanConfigurationForm">
<!-- configuration-inputs -->

17
app/docker/components/network-macvlan-form/networkMacvlanFormController.js
View file

@ -1,13 +1,17 @@
import { getOptions } from './options';
angular.module('portainer.docker').controller('NetworkMacvlanFormController', [
'$q',
'NodeService',
'NetworkService',
'Notifications',
'StateManager',
'$scope',
'Authentication',
function ($q, NodeService, NetworkService, Notifications, StateManager, Authentication) {
function ($q, NodeService, NetworkService, Notifications, $scope, Authentication) {
var ctrl = this;
this.options = [];
ctrl.requiredNodeSelection = function () {
if (ctrl.data.Scope !== 'local' || ctrl.data.DatatableState === undefined) {
return false;
@ -22,6 +26,13 @@ angular.module('portainer.docker').controller('NetworkMacvlanFormController', [
return !ctrl.data.SelectedNetworkConfig;
};
this.onChangeScope = onChangeScope.bind(this);
function onChangeScope(value) {
return $scope.$evalAsync(() => {
this.data.Scope = value;
});
}
this.$onInit = $onInit;
function $onInit() {
var isAdmin = Authentication.isAdmin();
@ -40,6 +51,8 @@ angular.module('portainer.docker').controller('NetworkMacvlanFormController', [
ctrl.availableNetworks = data.networks.filter(function (item) {
return item.ConfigOnly === true;
});
ctrl.options = getOptions(ctrl.availableNetworks.length > 0);
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve informations for macvlan');

27
app/docker/components/network-macvlan-form/options.tsx Normal file
View file

@ -0,0 +1,27 @@
import { Share2, Sliders } from 'lucide-react';
import { BoxSelectorOption } from '@@/BoxSelector';
export function getOptions(
hasNetworks: boolean
): ReadonlyArray<BoxSelectorOption<string>> {
return [
{
id: 'network_config',
icon: Sliders,
iconType: 'badge',
label: 'Configuration',
description: 'I want to configure a network before deploying it',
value: 'local',
},
{
id: 'network_deploy',
icon: Share2,
iconType: 'badge',
label: 'Creation',
description: 'I want to create a network from a configuration',
value: 'swarm',
disabled: () => !hasNetworks,
},
] as const;
}