feat(core): Show data table per table storage usage (no-changelog) (#19480)

packages/frontend/editor-ui/src/features/dataStore/components/DataStoreCard.vue

@@ -4,6 +4,7 @@ import { DATA_STORE_DETAILS } from '@/features/dataStore/constants';
 import { useI18n } from '@n8n/i18n';
 import { computed } from 'vue';
 import DataStoreActions from '@/features/dataStore/components/DataStoreActions.vue';
+import { useDataStoreStore } from '@/features/dataStore/dataStore.store';
 
 type Props = {
 	dataStore: DataStoreResource;
@@ -12,6 +13,7 @@ type Props = {
 };
 
 const i18n = useI18n();
+const dataStoreStore = useDataStoreStore();
 
 const props = withDefaults(defineProps<Props>(), {
 	actions: () => [],
@@ -28,6 +30,11 @@ const dataStoreRoute = computed(() => {
 		},
 	};
 });
+
+const getDataStoreSize = computed(() => {
+	const size = dataStoreStore.dataStoreSizes[props.dataStore.id] ?? 0;
+	return size;
+});
 </script>
 <template>
 	<div data-test-id="data-store-card">
@@ -54,6 +61,18 @@ const dataStoreRoute = computed(() => {
 				</template>
 				<template #footer>
 					<div :class="$style['card-footer']">
+						<N8nText
+							size="small"
+							color="text-light"
+							:class="[$style['info-cell'], $style['info-cell--size']]"
+							data-test-id="data-store-card-size"
+						>
+							{{
+								i18n.baseText('dataStore.card.size', {
+									interpolate: { size: getDataStoreSize },
+								})
+							}}
+						</N8nText>
 						<N8nText
 							size="small"
 							color="text-light"
@@ -143,7 +162,8 @@ const dataStoreRoute = computed(() => {
 		flex-wrap: wrap;
 	}
 	.info-cell--created,
-	.info-cell--column-count {
+	.info-cell--column-count,
+	.info-cell--size {
 		display: none;
 	}
 }

packages/frontend/editor-ui/src/features/dataStore/dataStore.store.ts

@@ -35,11 +35,24 @@ export const useDataStoreStore = defineStore(DATA_STORE_STORE, () => {
 	const totalCount = ref(0);
 	const dataStoreSize = ref(0);
 	const dataStoreSizeLimitState = ref<DataTableSizeStatus>('ok');
+	const dataStoreTableSizes = ref<Record<string, number>>({});
+
+	const formatSize = (sizeBytes: number) => {
+		return Number((sizeBytes / 1024 / 1024).toFixed(2));
+	};
 
 	const maxSizeMB = computed(() =>
 		Math.floor(settingsStore.settings?.dataTables?.maxSize / 1024 / 1024),
 	);
 
+	const dataStoreSizes = computed(() => {
+		const formattedSizes: Record<string, number> = {};
+		for (const [dataStoreId, sizeBytes] of Object.entries(dataStoreTableSizes.value)) {
+			formattedSizes[dataStoreId] = formatSize(sizeBytes);
+		}
+		return formattedSizes;
+	});
+
 	const fetchDataStores = async (projectId: string, page: number, pageSize: number) => {
 		const response = await fetchDataStoresApi(rootStore.restApiContext, projectId, {
 			skip: (page - 1) * pageSize,
@@ -219,8 +232,9 @@ export const useDataStoreStore = defineStore(DATA_STORE_STORE, () => {
 
 	const fetchDataStoreSize = async () => {
 		const result = await fetchDataStoreGlobalLimitInBytes(rootStore.restApiContext);
-		dataStoreSize.value = Number((result.sizeBytes / 1024 / 1024).toFixed(2));
+		dataStoreSize.value = formatSize(result.sizeBytes);
 		dataStoreSizeLimitState.value = result.sizeState;
+		dataStoreTableSizes.value = result.dataTables;
 		return result;
 	};
 
@@ -231,6 +245,7 @@ export const useDataStoreStore = defineStore(DATA_STORE_STORE, () => {
 		fetchDataStoreSize,
 		dataStoreSize: computed(() => dataStoreSize.value),
 		dataStoreSizeLimitState: computed(() => dataStoreSizeLimitState.value),
+		dataStoreSizes,
 		maxSizeMB,
 		createDataStore,
 		deleteDataStore,