[Angular] Migrate to signal (jvm-threads component)

jhipster · Jan 9, 2025 · fd60162 · fd60162
1 parent 8dc3020
commit fd60162
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 45 deletions.
diff --git a/...lates/src/main/webapp/app/admin/metrics/blocks/jvm-threads/jvm-threads.component.html.ejs b/...lates/src/main/webapp/app/admin/metrics/blocks/jvm-threads/jvm-threads.component.html.ejs
@@ -18,55 +18,55 @@
 -%>
 <h4>__jhiTranslateTag__('metrics.jvm.threads.title')</h4>
 
-<span><span>__jhiTranslateTag__('metrics.jvm.threads.runnable')</span> {{ threadStats.threadDumpRunnable }}</span>
+<span><span>__jhiTranslateTag__('metrics.jvm.threads.runnable')</span> {{ threadStats().threadDumpRunnable }}</span>
 
 <ngb-progressbar
-  [value]="threadStats.threadDumpRunnable"
-  [max]="threadStats.threadDumpAll"
+  [value]="threadStats().threadDumpRunnable"
+  [max]="threadStats().threadDumpAll"
   [striped]="true"
   [animated]="false"
   type="success"
 >
-  <span>{{ (threadStats.threadDumpRunnable * 100) / threadStats.threadDumpAll | number: '1.0-0' }}%</span>
+  <span>{{ (threadStats().threadDumpRunnable * 100) / threadStats().threadDumpAll | number: '1.0-0' }}%</span>
 </ngb-progressbar>
 
-<span><span>__jhiTranslateTag__('metrics.jvm.threads.timedwaiting')</span> ({{ threadStats.threadDumpTimedWaiting }})</span>
+<span><span>__jhiTranslateTag__('metrics.jvm.threads.timedwaiting')</span> ({{ threadStats().threadDumpTimedWaiting }})</span>
 
 <ngb-progressbar
-  [value]="threadStats.threadDumpTimedWaiting"
-  [max]="threadStats.threadDumpAll"
+  [value]="threadStats().threadDumpTimedWaiting"
+  [max]="threadStats().threadDumpAll"
   [striped]="true"
   [animated]="false"
   type="warning"
 >
-  <span>{{ (threadStats.threadDumpTimedWaiting * 100) / threadStats.threadDumpAll | number: '1.0-0' }}%</span>
+  <span>{{ (threadStats().threadDumpTimedWaiting * 100) / threadStats().threadDumpAll | number: '1.0-0' }}%</span>
 </ngb-progressbar>
 
-<span><span>__jhiTranslateTag__('metrics.jvm.threads.waiting')</span> ({{ threadStats.threadDumpWaiting }})</span>
+<span><span>__jhiTranslateTag__('metrics.jvm.threads.waiting')</span> ({{ threadStats().threadDumpWaiting }})</span>
 
 <ngb-progressbar
-  [value]="threadStats.threadDumpWaiting"
-  [max]="threadStats.threadDumpAll"
+  [value]="threadStats().threadDumpWaiting"
+  [max]="threadStats().threadDumpAll"
   [striped]="true"
   [animated]="false"
   type="warning"
 >
-  <span>{{ (threadStats.threadDumpWaiting * 100) / threadStats.threadDumpAll | number: '1.0-0' }}%</span>
+  <span>{{ (threadStats().threadDumpWaiting * 100) / threadStats().threadDumpAll | number: '1.0-0' }}%</span>
 </ngb-progressbar>
 
-<span><span>__jhiTranslateTag__('metrics.jvm.threads.blocked')</span> ({{ threadStats.threadDumpBlocked }})</span>
+<span><span>__jhiTranslateTag__('metrics.jvm.threads.blocked')</span> ({{ threadStats().threadDumpBlocked }})</span>
 
 <ngb-progressbar
-  [value]="threadStats.threadDumpBlocked"
-  [max]="threadStats.threadDumpAll"
+  [value]="threadStats().threadDumpBlocked"
+  [max]="threadStats().threadDumpAll"
   [striped]="true"
   [animated]="false"
   type="success"
 >
-  <span>{{ (threadStats.threadDumpBlocked * 100) / threadStats.threadDumpAll | number: '1.0-0' }}%</span>
+  <span>{{ (threadStats().threadDumpBlocked * 100) / threadStats().threadDumpAll | number: '1.0-0' }}%</span>
 </ngb-progressbar>
 
-<div>Total: {{ threadStats.threadDumpAll }}</div>
+<div>Total: {{ threadStats().threadDumpAll }}</div>
 
 <button class="hand btn btn-primary btn-sm" (click)="open()" data-toggle="modal" data-target="#threadDump">
   <span>Expand</span>

diff --git a/...mplates/src/main/webapp/app/admin/metrics/blocks/jvm-threads/jvm-threads.component.ts.ejs b/...mplates/src/main/webapp/app/admin/metrics/blocks/jvm-threads/jvm-threads.component.ts.ejs
@@ -16,7 +16,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-import { Component, inject, Input } from '@angular/core';
+import { Component, inject, computed, input } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 import SharedModule from 'app/shared/shared.module';
@@ -29,47 +29,38 @@ import { MetricsModalThreadsComponent } from '../metrics-modal-threads/metrics-m
   imports: [SharedModule],
 })
 export class JvmThreadsComponent {
-  threadStats = {
-    threadDumpAll: 0,
-    threadDumpRunnable: 0,
-    threadDumpTimedWaiting: 0,
-    threadDumpWaiting: 0,
-    threadDumpBlocked: 0,
-  };
+  threads = input<Thread[] | undefined>();
 
-  @Input()
-  set threads(threads: Thread[] | undefined) {
-    this._threads = threads;
+  threadStats = computed(() => {
+    const stats = {
+      threadDumpAll: 0,
+      threadDumpRunnable: 0,
+      threadDumpTimedWaiting: 0,
+      threadDumpWaiting: 0,
+      threadDumpBlocked: 0,
+    };
 
-    threads?.forEach(thread => {
+    this.threads()?.forEach(thread => {
       if (thread.threadState === ThreadState.Runnable) {
-        this.threadStats.threadDumpRunnable += 1;
+        stats.threadDumpRunnable += 1;
       } else if (thread.threadState === ThreadState.Waiting) {
-        this.threadStats.threadDumpWaiting += 1;
+        stats.threadDumpWaiting += 1;
       } else if (thread.threadState === ThreadState.TimedWaiting) {
-        this.threadStats.threadDumpTimedWaiting += 1;
+        stats.threadDumpTimedWaiting += 1;
       } else if (thread.threadState === ThreadState.Blocked) {
-        this.threadStats.threadDumpBlocked += 1;
+        stats.threadDumpBlocked += 1;
       }
     });
 
-    this.threadStats.threadDumpAll =
-      this.threadStats.threadDumpRunnable +
-      this.threadStats.threadDumpWaiting +
-      this.threadStats.threadDumpTimedWaiting +
-      this.threadStats.threadDumpBlocked;
-  }
-
-  get threads(): Thread[] | undefined {
-    return this._threads;
-  }
+    stats.threadDumpAll = stats.threadDumpRunnable + stats.threadDumpWaiting + stats.threadDumpTimedWaiting + stats.threadDumpBlocked;
 
-  private _threads: Thread[] | undefined;
+    return stats;
+  });
 
   private readonly modalService = inject(NgbModal);
 
   open(): void {
     const modalRef = this.modalService.open(MetricsModalThreadsComponent);
-    modalRef.componentInstance.threads = this.threads;
+    modalRef.componentInstance.threads = this.threads();
   }
 }