mirror of
https://github.com/portainer/portainer.git
synced 2025-07-23 07:19:41 +02:00
refactor(groups): migrate groups selectors to react [EE-3842] (#8936)
This commit is contained in:
parent
2018529add
commit
e91b4f5c83
38 changed files with 543 additions and 627 deletions
|
@ -1,9 +1,5 @@
|
|||
import _ from 'lodash-es';
|
||||
import { confirmDestructive } from '@@/modals/confirm';
|
||||
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 { buildConfirmButton } from '@@/modals/utils';
|
||||
import { tagOptions } from '@/react/edge/edge-groups/CreateView/tag-options';
|
||||
import { groupTypeOptions } from '@/react/edge/edge-groups/CreateView/group-type-options';
|
||||
|
@ -17,22 +13,13 @@ export class EdgeGroupFormController {
|
|||
this.groupTypeOptions = groupTypeOptions;
|
||||
this.tagOptions = tagOptions;
|
||||
|
||||
this.endpoints = {
|
||||
state: {
|
||||
limit: '10',
|
||||
filter: '',
|
||||
pageNumber: 1,
|
||||
totalCount: 0,
|
||||
},
|
||||
value: null,
|
||||
this.dynamicQuery = {
|
||||
types: EdgeTypes,
|
||||
tagIds: [],
|
||||
tagsPartialMatch: false,
|
||||
};
|
||||
|
||||
this.tags = [];
|
||||
|
||||
this.associateEndpoint = this.associateEndpoint.bind(this);
|
||||
this.dissociateEndpoint = this.dissociateEndpoint.bind(this);
|
||||
this.getDynamicEndpointsAsync = this.getDynamicEndpointsAsync.bind(this);
|
||||
this.getDynamicEndpoints = this.getDynamicEndpoints.bind(this);
|
||||
this.onChangeEnvironments = this.onChangeEnvironments.bind(this);
|
||||
this.onChangeTags = this.onChangeTags.bind(this);
|
||||
this.onChangeDynamic = this.onChangeDynamic.bind(this);
|
||||
this.onChangeModel = this.onChangeModel.bind(this);
|
||||
|
@ -43,7 +30,11 @@ export class EdgeGroupFormController {
|
|||
() => this.model,
|
||||
() => {
|
||||
if (this.model.Dynamic) {
|
||||
this.getDynamicEndpoints();
|
||||
this.dynamicQuery = {
|
||||
types: EdgeTypes,
|
||||
tagIds: this.model.TagIds,
|
||||
tagsPartialMatch: this.model.PartialMatch,
|
||||
};
|
||||
}
|
||||
},
|
||||
true
|
||||
|
@ -71,59 +62,25 @@ export class EdgeGroupFormController {
|
|||
this.onChangeModel({ TagIds: value });
|
||||
}
|
||||
|
||||
associateEndpoint(endpoint) {
|
||||
if (!_.includes(this.model.Endpoints, endpoint.Id)) {
|
||||
this.model.Endpoints = [...this.model.Endpoints, endpoint.Id];
|
||||
}
|
||||
}
|
||||
|
||||
dissociateEndpoint(endpoint) {
|
||||
onChangeEnvironments(value, meta) {
|
||||
return this.$async(async () => {
|
||||
const confirmed = await confirmDestructive({
|
||||
title: 'Confirm action',
|
||||
message: 'Removing the environment from this group will remove its corresponding edge stacks',
|
||||
confirmButton: buildConfirmButton('Confirm'),
|
||||
});
|
||||
if (meta.type === 'remove' && this.pageType === 'edit') {
|
||||
const confirmed = await confirmDestructive({
|
||||
title: 'Confirm action',
|
||||
message: 'Removing the environment from this group will remove its corresponding edge stacks',
|
||||
confirmButton: buildConfirmButton('Confirm'),
|
||||
});
|
||||
|
||||
if (!confirmed) {
|
||||
return;
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.model.Endpoints = _.filter(this.model.Endpoints, (id) => id !== endpoint.Id);
|
||||
});
|
||||
}
|
||||
|
||||
getDynamicEndpoints() {
|
||||
return this.$async(this.getDynamicEndpointsAsync);
|
||||
}
|
||||
|
||||
async getDynamicEndpointsAsync() {
|
||||
const { pageNumber, limit, search } = this.endpoints.state;
|
||||
const start = (pageNumber - 1) * limit + 1;
|
||||
const query = { search, types: EdgeTypes, tagIds: this.model.TagIds, tagsPartialMatch: this.model.PartialMatch };
|
||||
|
||||
const response = await getEnvironments({ start, limit, query });
|
||||
|
||||
const totalCount = parseInt(response.totalCount, 10);
|
||||
this.endpoints.value = response.value;
|
||||
this.endpoints.state.totalCount = totalCount;
|
||||
}
|
||||
|
||||
getTags() {
|
||||
return this.$async(async () => {
|
||||
try {
|
||||
this.tags = await getTags();
|
||||
} catch (err) {
|
||||
notifyError('Failure', err, 'Unable to retrieve tags');
|
||||
}
|
||||
this.onChangeModel({ Endpoints: value });
|
||||
});
|
||||
}
|
||||
|
||||
handleSubmit() {
|
||||
this.formAction(this.model);
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
this.getTags();
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue