Performance: use virtual scroll container and log level parsing for logs view (#11233)

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

src-ui/src/app/components/admin/logs/logs.component.html

@@ -29,14 +29,19 @@
 
 <div [ngbNavOutlet]="nav" class="mt-2"></div>
 
-<div class="bg-dark p-3 text-light font-monospace log-container" #logContainer>
+<cdk-virtual-scroll-viewport
+  itemSize="20"
+  class="bg-dark p-3 text-light font-monospace log-container"
+  #logContainer>
   @if (loading && logFiles.length) {
     <div>
       <div class="spinner-border spinner-border-sm me-2" role="status"></div>
       <ng-container i18n>Loading...</ng-container>
     </div>
   }
-  @for (log of logs; track $index) {
-    <p class="m-0 p-0 log-entry-{{getLogLevel(log)}}">{{log}}</p>
-  }
-</div>
+  <p *cdkVirtualFor="let log of logs"
+     class="m-0 p-0"
+     [ngClass]="'log-entry-' + log.level">
+    {{log.message}}
+  </p>
+</cdk-virtual-scroll-viewport>