Properly paginate on flow logs (#18652)

* Properly paginate on flow logs

* No time for pie

* Add changset

* Skip redundant fetching of created revision

* Update app/src/composables/use-revisions.ts

Co-authored-by: Azri Kahar <42867097+azrikahar@users.noreply.github.com>

* Consistent spacing between revisions/flows

---------

Co-authored-by: ian <licitdev@gmail.com>
Co-authored-by: Azri Kahar <42867097+azrikahar@users.noreply.github.com>

.changeset/cool-jobs-smoke.md

@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Added pagination to flow logs to prevent memory allocation issues on large revision sets

app/src/composables/use-revisions.ts

@@ -34,7 +34,7 @@ export function useRevisions(collection: Ref<string>, primaryKey: Ref<number | s
 		if (typeof unref(primaryKey) === 'undefined') return;
 
 		loading.value = true;
-		const pageSize = info.queryLimit?.max && info.queryLimit.max !== -1 ? Math.min(100, info.queryLimit.max) : 100;
+		const pageSize = info.queryLimit?.max && info.queryLimit.max !== -1 ? Math.min(10, info.queryLimit.max) : 10;
 
 		try {
 			const filter: Filter = {
@@ -88,44 +88,46 @@ export function useRevisions(collection: Ref<string>, primaryKey: Ref<number | s
 				},
 			});
 
-			const createdResponse = await api.get(`/revisions`, {
-				params: {
-					filter: {
-						collection: {
-							_eq: unref(collection),
-						},
-						item: {
-							_eq: unref(primaryKey),
-						},
-						activity: {
-							action: {
-								_eq: 'create',
+			if (!created.value) {
+				const createdResponse = await api.get(`/revisions`, {
+					params: {
+						filter: {
+							collection: {
+								_eq: unref(collection),
+							},
+							item: {
+								_eq: unref(primaryKey),
+							},
+							activity: {
+								action: {
+									_eq: Action.CREATE,
+								},
 							},
 						},
+						sort: '-id',
+						limit: 1,
+						fields: [
+							'id',
+							'data',
+							'delta',
+							'collection',
+							'item',
+							'activity.action',
+							'activity.timestamp',
+							'activity.user.id',
+							'activity.user.email',
+							'activity.user.first_name',
+							'activity.user.last_name',
+							'activity.ip',
+							'activity.user_agent',
+							'activity.origin',
+						],
+						meta: ['filter_count'],
 					},
-					sort: '-id',
-					limit: 1,
-					fields: [
-						'id',
-						'data',
-						'delta',
-						'collection',
-						'item',
-						'activity.action',
-						'activity.timestamp',
-						'activity.user.id',
-						'activity.user.email',
-						'activity.user.first_name',
-						'activity.user.last_name',
-						'activity.ip',
-						'activity.user_agent',
-						'activity.origin',
-					],
-					meta: ['filter_count'],
-				},
-			});
+				});
 
-			created.value = createdResponse.data.data?.[0];
+				created.value = createdResponse.data.data?.[0];
+			}
 
 			const revisionsGroupedByDate = groupBy(
 				response.data.data.filter((revision: any) => !!revision.activity),

app/src/modules/settings/routes/flows/components/logs-sidebar-detail.vue

@@ -1,6 +1,6 @@
 <template>
 	<sidebar-detail :title="t('logs')" icon="fact_check" :badge="revisionsCount">
-		<v-progress-linear v-if="loading" indeterminate />
+		<v-progress-linear v-if="!revisionsByDate && loading" indeterminate />
 
 		<div v-else-if="revisionsCount === 0" class="empty">{{ t('no_logs') }}</div>
 
@@ -21,6 +21,8 @@
 				</div>
 			</div>
 		</v-detail>
+
+		<v-pagination v-if="pagesCount > 1" v-model="page" :length="pagesCount" :total-visible="3" />
 	</sidebar-detail>
 
 	<v-drawer
@@ -85,7 +87,7 @@ import { useRevisions } from '@/composables/use-revisions';
 import { useExtensions } from '@/extensions';
 import type { FlowRaw } from '@directus/types';
 import { Action } from '@directus/constants';
-import { computed, ref, toRefs, unref } from 'vue';
+import { computed, ref, toRefs, unref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { getTriggers } from '../triggers';
 
@@ -106,7 +108,9 @@ const usedTrigger = computed(() => {
 	return triggers.find((trigger) => trigger.id === unref(flow).trigger);
 });
 
-const { revisionsByDate, revisionsCount, loading } = useRevisions(
+const page = ref<number>(1);
+
+const { revisionsByDate, revisionsCount, loading, pagesCount, refresh } = useRevisions(
 	ref('directus_flows'),
 	computed(() => unref(flow).id),
 	{
@@ -114,6 +118,13 @@ const { revisionsByDate, revisionsCount, loading } = useRevisions(
 	}
 );
 
+watch(
+	() => page.value,
+	(newPage) => {
+		refresh(newPage);
+	}
+);
+
 const previewing = ref();
 
 const triggerData = computed(() => {
@@ -296,4 +307,9 @@ const steps = computed(() => {
 	color: var(--foreground-subdued);
 	font-style: italic;
 }
+
+.v-pagination {
+	justify-content: center;
+	margin-top: 24px;
+}
 </style>

app/src/views/private/components/revisions-drawer-detail.vue

@@ -4,7 +4,7 @@
 		icon="change_history"
 		:badge="!loading && revisionsCount > 0 ? abbreviateNumber(revisionsCount) : null"
 	>
-		<v-progress-linear v-if="loading" indeterminate />
+		<v-progress-linear v-if="!revisions && loading" indeterminate />
 
 		<div v-else-if="revisionsCount === 0" class="empty">
 			<div class="content">{{ t('no_revisions') }}</div>
@@ -22,7 +22,7 @@
 					{{ t('revision_delta_created_externally') }}
 				</div>
 			</template>
-			<v-pagination v-if="pagesCount > 1" v-model="page" :length="pagesCount" :total-visible="2" />
+			<v-pagination v-if="pagesCount > 1" v-model="page" :length="pagesCount" :total-visible="3" />
 		</template>
 
 		<revisions-drawer
@@ -130,5 +130,6 @@ defineExpose({
 
 .v-pagination {
 	justify-content: center;
+	margin-top: 24px;
 }
 </style>