Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-02 20:35:25 +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

22
app/edge/components/group-form/group-type-options.tsx Normal file
View file

@ -0,0 +1,22 @@
import { List, Tag } from 'lucide-react';
import { BoxSelectorOption } from '@@/BoxSelector';
export const groupTypeOptions: ReadonlyArray<BoxSelectorOption<boolean>> = [
{
id: 'static-group',
value: false,
label: 'Static',
description: 'Manually select Edge environments',
icon: List,
iconType: 'badge',
},
{
id: 'dynamic-group',
value: true,
label: 'Dynamic',
description: 'Automatically associate environments via tags',
icon: Tag,
iconType: 'badge',
},
] as const;

56
app/edge/components/group-form/groupForm.html
View file

@ -24,32 +24,8 @@
</div>
<div class="col-sm-12 form-section-title"> Group type </div>
<div class="form-group">
<div class="col-sm-12">
<div class="boxselector_wrapper">
<div class="boxselector">
<input type="radio" id="static-group" ng-model="$ctrl.model.Dynamic" ng-value="false" ng-checked="!$ctrl.model.Dynamic" />
<label for="static-group">
<div class="boxselector_header vertical-center">
<pr-icon icon="'list'"></pr-icon>
Static
</div>
<p>Manually select Edge environments</p>
</label>
</div>
<div class="boxselector">
<input type="radio" id="dynamic-group" ng-model="$ctrl.model.Dynamic" ng-value="true" ng-checked="$ctrl.model.Dynamic" />
<label for="dynamic-group">
<div class="boxselector_header vertical-center">
<pr-icon icon="'tag'"></pr-icon>
Dynamic
</div>
<p>Automatically associate environments via tags</p>
</label>
</div>
</div>
</div>
</div>
<box-selector slim="true" value="$ctrl.model.Dynamic" on-change="($ctrl.onChangeDynamic)" options="$ctrl.groupTypeOptions"></box-selector>
<!-- StaticGroup -->
<div ng-if="!$ctrl.model.Dynamic">
@ -78,32 +54,8 @@
<!-- DynamicGroup -->
<div ng-if="$ctrl.model.Dynamic">
<div class="col-sm-12 form-section-title"> Tags </div>
<div class="form-group">
<div class="col-sm-12">
<div class="boxselector_wrapper">
<div class="boxselector">
<input type="radio" id="or-selector" ng-model="$ctrl.model.PartialMatch" ng-value="true" ng-checked="$ctrl.model.PartialMatch" />
<label for="or-selector">
<div class="boxselector_header vertical-center">
<pr-icon icon="'tag'"></pr-icon>
Partial match
</div>
<p>Associate any environment matching at least one of the selected tags</p>
</label>
</div>
<div class="boxselector">
<input type="radio" id="and-selector" ng-model="$ctrl.model.PartialMatch" ng-value="false" ng-checked="!$ctrl.model.PartialMatch" />
<label for="and-selector">
<div class="boxselector_header vertical-center">
<pr-icon icon="'tag'"></pr-icon>
Full match
</div>
<p>Associate any environment matching all of the selected tags</p>
</label>
</div>
</div>
</div>
</div>
<box-selector slim="true" value="$ctrl.model.PartialMatch" on-change="($ctrl.onChangePartialMatch)" options="$ctrl.tagOptions"></box-selector>
<tag-selector ng-if="$ctrl.model.TagIds" value="$ctrl.model.TagIds" on-change="($ctrl.onChangeTags)"> </tag-selector>

27
app/edge/components/group-form/groupFormController.js
View file

@ -4,6 +4,8 @@ import { EdgeTypes } from '@/react/portainer/environments/types';
import { getEnvironments } from '@/react/portainer/environments/environment.service';
import { getTags } from '@/portainer/tags/tags.service';
import { notifyError } from '@/portainer/services/notifications';
import { groupTypeOptions } from './group-type-options';
import { tagOptions } from './tag-options';
export class EdgeGroupFormController {
/* @ngInject */
@ -11,6 +13,9 @@ export class EdgeGroupFormController {
this.$async = $async;
this.$scope = $scope;
this.groupTypeOptions = groupTypeOptions;
this.tagOptions = tagOptions;
this.endpoints = {
state: {
limit: '10',
@ -28,6 +33,9 @@ export class EdgeGroupFormController {
this.getDynamicEndpointsAsync = this.getDynamicEndpointsAsync.bind(this);
this.getDynamicEndpoints = this.getDynamicEndpoints.bind(this);
this.onChangeTags = this.onChangeTags.bind(this);
this.onChangeDynamic = this.onChangeDynamic.bind(this);
this.onChangeModel = this.onChangeModel.bind(this);
this.onChangePartialMatch = this.onChangePartialMatch.bind(this);
$scope.$watch(
() => this.model,
@ -40,12 +48,27 @@ export class EdgeGroupFormController {
);
}
onChangeTags(value) {
onChangeModel(model) {
return this.$scope.$evalAsync(() => {
this.model.TagIds = value;
this.model = {
...this.model,
...model,
};
});
}
onChangePartialMatch(value) {
return this.onChangeModel({ PartialMatch: value });
}
onChangeDynamic(value) {
this.onChangeModel({ Dynamic: value });
}
onChangeTags(value) {
this.onChangeModel({ TagIds: value });
}
associateEndpoint(endpoint) {
if (!_.includes(this.model.Endpoints, endpoint.Id)) {
this.model.Endpoints = [...this.model.Endpoints, endpoint.Id];

23
app/edge/components/group-form/tag-options.tsx Normal file
View file

@ -0,0 +1,23 @@
import { Tag } from 'lucide-react';
import { BoxSelectorOption } from '@@/BoxSelector';
export const tagOptions: ReadonlyArray<BoxSelectorOption<boolean>> = [
{
id: 'or-selector',
value: true,
label: 'Partial Match',
description:
'Associate any environment matching at least one of the selected tags',
icon: Tag,
iconType: 'badge',
},
{
id: 'and-selector',
value: false,
label: 'Full Match',
description: 'Associate any environment matching all of the selected tags',
icon: Tag,
iconType: 'badge',
},
];