Fixed scrolling in loggers view (#2555) (#2556)

Fixed scrolling in loggers view (#2555)

spring-boot-admin-server-ui/src/main/frontend/views/instances/loggers/loggers-list.spec.ts

@@ -0,0 +1,46 @@
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { nextTick } from 'vue';
+
+import LoggersList from './loggers-list.vue';
+
+describe('Loggers List', () => {
+  it('should extend list on scroll', async () => {
+    const loggers = createLoggers(500);
+    const loggersList = shallowMount(LoggersList, {
+      props: {
+        levels: ['OFF', 'ERROR', 'WARN', 'INFO', 'DEBUG', 'TRACE'],
+        loggers: loggers,
+        loggersStatus: {},
+      },
+    });
+
+    expect(loggersList.vm.visibleLimit).toBe(25);
+    expect(loggersList.text()).toContain('my-logger-24');
+    expect(loggersList.text()).not.toContain('my-logger-25');
+
+    loggersList.vm.$refs.infiniteLoading.$emit('infinite', {
+      loaded: () => {},
+      complete: () => {},
+    });
+
+    expect(loggersList.vm.visibleLimit).toBe(50);
+    await nextTick();
+
+    expect(loggersList.text()).toContain('my-logger-49');
+    expect(loggersList.text()).not.toContain('my-logger-50');
+  });
+
+  function createLoggers(number: number): Array<any> {
+    return Array(number)
+      .fill(0)
+      .map((_, i) => createLogger(i));
+  }
+
+  function createLogger(i: number): any {
+    return {
+      name: `my-logger-${i}`,
+      level: [{ effectiveLevel: 'INFO', instanceId: '123' }],
+    };
+  }
+});

spring-boot-admin-server-ui/src/main/frontend/views/instances/loggers/loggers-list.vue

@@ -66,7 +66,11 @@
         />
       </tr>
     </tbody>
-    <InfiniteLoading @infinite="increaseScroll">
+    <InfiniteLoading
+      ref="infiniteLoading"
+      :identifier="loggers"
+      @infinite="increaseScroll"
+    >
       <template #complete>
         <span />
       </template>
@@ -75,14 +79,17 @@
 </template>
 
 <script>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import InfiniteLoading from 'v3-infinite-loading';
 
 import 'v3-infinite-loading/lib/style.css';
 
+import SbaTag from '@/components/sba-tag.vue';
+
 import SbaLoggerControl from '@/views/instances/loggers/logger-control';
 
 export default {
-  components: { InfiniteLoading, SbaLoggerControl },
+  components: { FontAwesomeIcon, SbaTag, InfiniteLoading, SbaLoggerControl },
   props: {
     levels: {
       type: Array,
@@ -104,7 +111,7 @@ export default {
   methods: {
     increaseScroll($state) {
       if (this.visibleLimit < this.loggers.length) {
-        this.visibleLimit += 50;
+        this.visibleLimit += 25;
         $state.loaded();
       } else {
         $state.complete();