admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 01:56:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf(editor): Prevent excessive fetch requests from workflows list (no-changelog) (#14093)

Browse Source
This commit is contained in:
Milorad FIlipović
2025-03-21 11:23:14 +01:00
committed by GitHub
parent ced8bcdd0c
commit 7e8179b848
1 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/frontend/editor-ui/src/views/WorkflowsView.vue
View File

@@ -62,6 +62,9 @@ import { useFoldersStore } from '@/stores/folders.store';
import { useFolders } from '@/composables/useFolders'; import { useFolders } from '@/composables/useFolders';
import { useUsageStore } from '@/stores/usage.store'; import { useUsageStore } from '@/stores/usage.store';
const SEARCH_DEBOUNCE_TIME = 300;
const FILTERS_DEBOUNCE_TIME = 100;
interface Filters extends BaseFilters { interface Filters extends BaseFilters {
status: string | boolean; status: string | boolean;
tags: string[]; tags: string[];
@@ -348,6 +351,13 @@ sourceControlStore.$onAction(({ name, after }) => {
after(async () => await initialize()); after(async () => await initialize());
}); });
const onWorkflowDeleted = async () => {
await Promise.all([
fetchWorkflows(),
foldersStore.fetchTotalWorkflowsAndFoldersCount(route.params.projectId as string | undefined),
]);
};
const onFolderDeleted = async (payload: { const onFolderDeleted = async (payload: {
folderId: string; folderId: string;
workflowCount: number; workflowCount: number;
@@ -356,6 +366,9 @@ const onFolderDeleted = async (payload: {
const folderInfo = foldersStore.getCachedFolder(payload.folderId); const folderInfo = foldersStore.getCachedFolder(payload.folderId);
foldersStore.deleteFoldersFromCache([payload.folderId, folderInfo?.parentFolder ?? '']); foldersStore.deleteFoldersFromCache([payload.folderId, folderInfo?.parentFolder ?? '']);
// If the deleted folder is the current folder, navigate to the parent folder // If the deleted folder is the current folder, navigate to the parent folder
await foldersStore.fetchTotalWorkflowsAndFoldersCount(
route.params.projectId as string | undefined,
);
if (currentFolderId.value === payload.folderId) { if (currentFolderId.value === payload.folderId) {
void router.push({ void router.push({
@@ -410,6 +423,7 @@ const initialize = async () => {
fetchWorkflows(), fetchWorkflows(),
workflowsStore.fetchActiveWorkflows(), workflowsStore.fetchActiveWorkflows(),
usageStore.getLicenseInfo(), usageStore.getLicenseInfo(),
foldersStore.fetchTotalWorkflowsAndFoldersCount(route.params.projectId as string | undefined),
]); ]);
breadcrumbsLoading.value = false; breadcrumbsLoading.value = false;
workflowsAndFolders.value = resourcesPage; workflowsAndFolders.value = resourcesPage;
@@ -428,6 +442,7 @@ const fetchWorkflows = async () => {
const delayedLoading = debounce(() => { const delayedLoading = debounce(() => {
loading.value = true; loading.value = true;
}, 300); }, 300);
const routeProjectId = route.params?.projectId as string | undefined; const routeProjectId = route.params?.projectId as string | undefined;
const homeProjectFilter = filters.value.homeProject || undefined; const homeProjectFilter = filters.value.homeProject || undefined;
const parentFolder = (route.params?.folderId as string) || undefined; const parentFolder = (route.params?.folderId as string) || undefined;
@@ -473,8 +488,6 @@ const fetchWorkflows = async () => {
breadcrumbsLoading.value = false; breadcrumbsLoading.value = false;
} }
await foldersStore.fetchTotalWorkflowsAndFoldersCount(routeProjectId);
workflowsAndFolders.value = fetchedResources; workflowsAndFolders.value = fetchedResources;
return fetchedResources; return fetchedResources;
} catch (error) { } catch (error) {
@@ -507,14 +520,14 @@ const onSortUpdated = async (sort: string) => {
const onFiltersUpdated = async () => { const onFiltersUpdated = async () => {
currentPage.value = 1; currentPage.value = 1;
saveFiltersOnQueryString(); saveFiltersOnQueryString();
await callDebounced(fetchWorkflows, { debounceTime: 100, trailing: true }); await callDebounced(fetchWorkflows, { debounceTime: FILTERS_DEBOUNCE_TIME, trailing: true });
}; };
const onSearchUpdated = async (search: string) => { const onSearchUpdated = async (search: string) => {
currentPage.value = 1; currentPage.value = 1;
saveFiltersOnQueryString(); saveFiltersOnQueryString();
if (search) { if (search) {
await callDebounced(fetchWorkflows, { debounceTime: 100, trailing: true }); await callDebounced(fetchWorkflows, { debounceTime: SEARCH_DEBOUNCE_TIME, trailing: true });
} else { } else {
// No need to debounce when clearing search // No need to debounce when clearing search
await fetchWorkflows(); await fetchWorkflows();
@@ -523,12 +536,12 @@ const onSearchUpdated = async (search: string) => {
const setCurrentPage = async (page: number) => { const setCurrentPage = async (page: number) => {
currentPage.value = page; currentPage.value = page;
await callDebounced(fetchWorkflows, { debounceTime: 100, trailing: true }); await callDebounced(fetchWorkflows, { debounceTime: FILTERS_DEBOUNCE_TIME, trailing: true });
}; };
const setPageSize = async (size: number) => { const setPageSize = async (size: number) => {
pageSize.value = size; pageSize.value = size;
await callDebounced(fetchWorkflows, { debounceTime: 100, trailing: true }); await callDebounced(fetchWorkflows, { debounceTime: FILTERS_DEBOUNCE_TIME, trailing: true });
}; };
const onClickTag = async (tagId: string) => { const onClickTag = async (tagId: string) => {
@@ -1300,7 +1313,7 @@ const onCreateWorkflowClick = () => {
:workflow-list-event-bus="workflowListEventBus" :workflow-list-event-bus="workflowListEventBus"
:read-only="readOnlyEnv" :read-only="readOnlyEnv"
@click:tag="onClickTag" @click:tag="onClickTag"
@workflow:deleted="fetchWorkflows" @workflow:deleted="onWorkflowDeleted"
@workflow:moved="fetchWorkflows" @workflow:moved="fetchWorkflows"
@workflow:duplicated="fetchWorkflows" @workflow:duplicated="fetchWorkflows"
@workflow:active-toggle="onWorkflowActiveToggle" @workflow:active-toggle="onWorkflowActiveToggle"