fix(LogTable): implement virtual scrolling

- copied from server/apps/settings/src/components/Users/VirtualList.vue, omitting some redundant logic

Signed-off-by: Maksim Sukharev <[email protected]>

Author: Antreesy

src/components/table/LogTable.vue

@@ -8,8 +8,8 @@
 			:open.sync="isModalOpen"
 			:current-entry.sync="currentRow"
 			:log-entries="sortedRows" />
-		<table class="log-table__table">
-			<thead>
+		<table ref="tableRoot" class="log-table__table">
+			<thead role="rowgroup" class="log-table__header">
 				<tr>
 					<LogTableHeader :name="t('logreader', 'Level')"
 						:sorted.sync="sortedByLevel" />
@@ -23,9 +23,9 @@
 					<th><span class="hidden-visually">{{ t('logreader', 'Log entry actions') }}</span></th>
 				</tr>
 			</thead>
-			<tbody ref="tableBody">
-				<tr v-if="sortedByTime === 'ascending'">
-					<td colspan="5" class="log-table__load-more">
+			<tbody ref="tableBody" :style="tbodyStyle" class="log-table__body">
+				<tr v-if="sortedByTime === 'ascending'" class="log-table__load-more">
+					<td>
 						<IntersectionObserver v-if="logStore.hasRemainingEntries" @intersection="loadMore">
 							{{ t('logreader', 'Loading older log entries') }}
 						</IntersectionObserver>
@@ -35,14 +35,14 @@
 					</td>
 				</tr>
 
-				<LogTableRow v-for="row, rowNumber in sortedRows"
+				<LogTableRow v-for="(row, rowNumber) in renderedItems"
 					:key="rowNumber"
 					:row="row"
 					@show-details="showDetailsForRow" />
 			</tbody>
-			<tfoot>
-				<tr v-if="sortedByTime !== 'ascending'">
-					<td colspan="5" class="log-table__load-more">
+			<tfoot role="rowgroup" class="log-table__footer">
+				<tr v-if="sortedByTime !== 'ascending'" class="log-table__load-more">
+					<td>
 						<IntersectionObserver v-if="logStore.hasRemainingEntries" @intersection="loadMore">
 							{{ t('logreader', 'Loading older log entries') }}
 						</IntersectionObserver>
@@ -59,17 +59,26 @@
 <script setup lang="ts">
 import type { ILogEntry, ISortingOptions } from '../../interfaces'
 
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, onMounted, onBeforeUnmount, ref } from 'vue'
 import { translate as t } from '@nextcloud/l10n'
 import { useSettingsStore } from '../../store/settings'
 import { useLogStore } from '../../store/logging'
+import { debounce } from '../../utils/debounce'
+import { logger } from '../../utils/logger'
 
 import IntersectionObserver from '../IntersectionObserver.vue'
 import LogDetailsModal from '../LogDetailsModal.vue'
 import LogTableHeader from './LogTableHeader.vue'
 import LogTableRow from './LogTableRow.vue'
 import LogSearch from '../LogSearch.vue'
 
+// Items to render before and after the visible area
+const bufferItems = 3
+// Fixed height of LogTableRow
+const itemHeight = 42
+// Fixed height of LogTableHeader
+const theadHeight = 44
+
 const settingsStore = useSettingsStore()
 const logStore = useLogStore()
 
@@ -110,8 +119,9 @@ const showDetailsForRow = (row: ILogEntry) => {
 }
 
 /**
- * Reference to the table body, used for keeping scroll position on loading more entries
+ * Reference to the table elements, used for keeping scroll position on loading more entries
  */
+const tableRoot = ref<HTMLElement>()
 const tableBody = ref<HTMLElement>()
 
 /**
@@ -146,6 +156,52 @@ const sortedRows = computed(() => {
 	sorted.sort((a, b) => order(byLevel, sortedByLevel.value, a, b) || order(byApp, sortedByApp.value, a, b) || order(byTime, sortedByTime.value, a, b))
 	return sorted
 })
+
+/**
+ * Virtual scrolling logic
+ */
+const resizeObserver = ref<ResizeObserver | null>(null)
+
+const firstVisibleRowIndex = ref(0)
+const startIndex = computed(() => Math.max(0, firstVisibleRowIndex.value - bufferItems))
+
+const tableHeight = ref(0)
+const itemsInViewport = computed(() => Math.ceil((tableHeight.value - theadHeight) / itemHeight) + bufferItems * 2)
+
+const renderedItems = computed(() => sortedRows.value.slice(startIndex.value, startIndex.value + itemsInViewport.value))
+
+const tbodyStyle = computed(() => {
+	const isOverScrolled = startIndex.value + itemsInViewport.value > sortedRows.value.length
+	const lastIndex = sortedRows.value.length - startIndex.value - itemsInViewport.value
+	const hiddenAfterItems = Math.min(sortedRows.value.length - startIndex.value, lastIndex)
+
+	return {
+		paddingTop: `${startIndex.value * itemHeight}px`,
+		paddingBottom: isOverScrolled ? 0 : `${hiddenAfterItems * itemHeight}px`,
+	}
+})
+
+onMounted(() => {
+	resizeObserver.value = new ResizeObserver(debounce(() => {
+		tableHeight.value = tableRoot.value?.clientHeight ?? 0
+		logger.debug('VirtualList resizeObserver updated')
+		onScroll()
+	}, 100))
+
+	resizeObserver.value.observe(tableRoot.value!)
+	tableRoot.value!.addEventListener('scroll', onScroll)
+})
+
+onBeforeUnmount(() => {
+	if (resizeObserver.value) {
+		resizeObserver.value.disconnect()
+	}
+})
+
+function onScroll() {
+	// Max 0 to prevent negative index
+	firstVisibleRowIndex.value = Math.max(0, Math.round(tableRoot.value!.scrollTop / itemHeight))
+}
 </script>
 
 <style lang="scss" scoped>
@@ -158,37 +214,65 @@ const sortedRows = computed(() => {
 		width: calc(100% - 12px);
 		margin-inline: 6px;
 		table-layout: fixed;
+
+		// Necessary for virtual scroll optimized rendering
+		display: block;
+		overflow: auto;
+		height: 100%;
+		will-change: scroll-position;
 	}
 
 	&__load-more {
-		text-align: center;
-		padding-block: 4px;
-	}
+		display: flex;
 
-	th, td {
-		// level column
-		&:nth-child(1) {
-			width: 108px;
+		:deep(td) {
+			flex-basis: 100%;
+			text-align: center;
+			padding-block: 4px;
 		}
-		// app column
-		&:nth-child(2) {
-			width: 168px;
-		}
-		// message column
-		&:nth-child(3) {
-			width: 418px;
-		}
-		// time column
-		&:nth-child(4) {
-			width: 168px;
+	}
+
+	&__header,
+	&__body,
+	&__footer {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+
+		:deep(tr) {
+			display: flex;
 		}
-		// actions column
-		&:last-child {
-			width: 62px; // 44px button + 18px padding
+
+		:deep(th),
+		:deep(td) {
+			// level column
+			&:nth-child(1) {
+				width: 108px;
+			}
+			// app column
+			&:nth-child(2) {
+				width: 168px;
+			}
+			// message column
+			&:nth-child(3) {
+				width: 418px;
+				flex-grow: 1;
+			}
+			// time column
+			&:nth-child(4) {
+				width: 168px;
+			}
+			// actions column
+			&:last-child {
+				width: 62px; // 44px button + 18px padding
+			}
 		}
 	}
 
-	thead {
+	&__header {
+		position: sticky;
+		top: 0;
+		z-index: 1;
 		min-height: 44px;
 
 		:deep(th) {
@@ -200,7 +284,7 @@ const sortedRows = computed(() => {
 		}
 	}
 
-	tbody {
+	&__body {
 		// Some spacing for first row
 		&:before {
 			content: '\200c';

src/components/table/LogTableRow.vue

@@ -15,7 +15,8 @@
 				<div class="row-message__text">
 					<LogException v-if="row.exception" :exception="row.exception" />
 					<!-- Show log message if either there is no exception or a custom message was added -->
-					<div v-if="!row.exception || row.message !== row.exception.Message" class="row-message__text_message" :title="row.message">
+					<div v-if="!row.exception || (isExpanded && row.message !== row.exception.Message)"
+						 class="row-message__text_message" :title="row.message">
 						{{ row.message }}
 					</div>
 				</div>
@@ -117,6 +118,11 @@ const timestamp = computed(() => Date.parse(props.row.time))
  */
 const isExpanded = ref(false)
 
+// FIXME: as components reused, another row will be expanded during scroll, so should close on prop change
+watch(() => props.row, () => {
+	isExpanded.value = false
+})
+
 /**
  * Human readable and localized level name
  */
@@ -175,10 +181,10 @@ watch(isExpanded, () => resizeTabeRow)
 
 <style lang="scss" scoped>
 td {
-	display: table-cell;
+	display: block;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	vertical-align: top;
+	min-height: 42px;
 	padding-block-start: 4px;
 	padding-inline: 18px 0;
 }
@@ -215,7 +221,7 @@ td {
 }
 
 tr {
-	display: table-row;
+	display: flex;
 	&.expanded {
 		white-space: normal;