1
0
Fork 0
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:
Chaim Lev-Ari 2023-06-22 21:11:10 +07:00 committed by GitHub
parent 2018529add
commit e91b4f5c83
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 543 additions and 627 deletions

View file

@ -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();
}
}