Flush Cache / Txs implementation

src/app/pages/transactions/transactions.component.html

@@ -273,6 +273,20 @@
   </div>
 
   <div class="tab-pane fade" id="pills-flush-tx-pool" role="tabpanel" aria-labelledby="pills-flush-tx-pool-tab" tabindex="0">
+    <div *ngIf="flushSuccess" class="alert alert-success d-flex align-items-center justify-content-center text-center" role="alert">
+      <h4><i class="bi bi-send-check m-2"></i></h4>&nbsp;&nbsp;
+      <div>
+        Successfully flushed txs
+      </div>
+    </div>
+    
+    <div *ngIf="flushError !== ''" class="alert alert-danger d-flex align-items-center justify-content-center text-center" role="alert">
+      <h4><i class="bi bi-exclamation-triangle m-2"></i></h4>&nbsp;&nbsp;
+      <div>
+        {{flushError}}
+      </div>
+    </div>
+
     <div class="row g-5 p-2">
         <div class="col-md-7 col-lg-10">
           <h4 class="mb-3">Flush a list of transaction IDs</h4>
@@ -280,14 +294,14 @@
             <div class="row g-3">
         
               <div class="col-12">
-                  <label for="tx_ids" class="form-label">Tx Ids</label>
+                  <label for="flush-tx-ids" class="form-label">Tx Ids</label>
-                  <textarea type="text" class="form-control" id="tx_ids" placeholder="[
+                  <textarea type="text" class="form-control" id="flush-tx-ids" placeholder="[
   'tx_hash_1',
   'tx_hash_2',
   ... ,
   'tx_hash_n'
 ]" 
-                    rows="15" cols="15"></textarea>
+                    rows="15" cols="15" [(ngModel)]="flushTxIdsJsonString" [ngModelOptions]="{ standalone: true }"></textarea>
                   <small class="text-body-secondary">List of transaction IDs to flush in tx pool</small>
               </div>
       
@@ -297,26 +311,45 @@
           </form>
         </div>
     </div>
-    <button class="w-100 btn btn-primary btn-lg" type="button" [disabled]="!canRelay" (click)="onFlush()">Flush Tx Pool</button>
+
+    <button *ngIf="!flushing" class="w-100 btn btn-primary btn-lg" type="button" (click)="flush()">Flush Tx Pool</button>
   </div>
 
   <div class="tab-pane fade" id="pills-flush-cache" role="tabpanel" aria-labelledby="pills-flush-cache-tab" tabindex="0">
+    <div *ngIf="flushCacheSuccess" class="alert alert-success d-flex align-items-center justify-content-center text-center" role="alert">
+      <h4><i class="bi bi-send-check m-2"></i></h4>&nbsp;&nbsp;
+      <div>
+        Successfully flushed cache
+      </div>
+    </div>
+    
+    <div *ngIf="flushCacheError !== ''" class="alert alert-danger d-flex align-items-center justify-content-center text-center" role="alert">
+      <h4><i class="bi bi-exclamation-triangle m-2"></i></h4>&nbsp;&nbsp;
+      <div>
+        {{flushCacheError}}
+      </div>
+    </div>
+    
     <div class="row g-5 p-2">
         <div class="col-md-7 col-lg-10">
-          <h4 class="mb-3">Flush a list of bad transaction IDs from cache</h4>
+          <h4 class="mb-3">Flush bad transactions / blocks from the cache</h4>
           <form class="needs-validation" novalidate="">
-            <div class="row g-3">
+            <div class="row gy-3">
 
-              <div class="col-12">
+
-                  <label for="tx_ids" class="form-label">Tx Ids</label>
+            <div class="form-check form-switch col-md-6">
-                  <textarea type="text" class="form-control" id="tx_ids" placeholder="[
+              <label for="flush-cache-bad-txs" class="form-check-label">Bad txs</label>
-  'tx_hash_1',
+              <input class="form-control form-check-input" type="checkbox" role="switch" id="flush-cache-bad-txs" [checked]="flushCacheBadTxs" [(ngModel)]="flushCacheBadTxs" [ngModelOptions]="{standalone: true}">
-  'tx_hash_2',
+              <br>
-  ... ,
+              <small class="text-body-secondary">Flush bad transactions</small>
-  'tx_hash_n'
+            </div>
-]" 
+
-                    rows="15" cols="15"></textarea>
+        
-                  <small class="text-body-secondary">List of bad transaction IDs to flush from cache</small>
+            <div class="form-check form-switch col-md-6">
+              <label for="flush-cache-bad-blocks" class="form-check-label">Bad blocks</label>
+              <input class="form-control form-check-input" type="checkbox" role="switch" id="flush-cache-bad-blocks" [checked]="flushCacheBadBlocks" [(ngModel)]="flushCacheBadBlocks" [ngModelOptions]="{standalone: true}">
+              <br>
+              <small class="text-body-secondary">Flush bad blocks</small>
             </div>
 
             <hr class="my-4">
@@ -325,7 +358,7 @@
           </form>
         </div>
     </div>
-    <button class="w-100 btn btn-primary btn-lg" type="button" [disabled]="!canRelay" (click)="onFlushFromCache()">Flush Bad Txs</button>
+    <button *ngIf="!flushingCache" class="w-100 btn btn-primary btn-lg" type="button" [disabled]="!canRelay" (click)="flushCache()">Flush Cache</button>
   </div>
 
 

src/app/pages/transactions/transactions.component.ts

@@ -165,12 +165,80 @@ export class TransactionsComponent extends BasePageComponent implements AfterVie
     await this.daemonService.relayTx(...txIds);
   }
 
-  public async onFlush(): Promise<void> {
+  public flushing: boolean = false;
+  public flushSuccess: boolean = true;
+  public flushError: string = '';
+  public flushTxIdsJsonString: string = '';
 
+  public get validFlushTxIds(): boolean {
+    try {
+      const txIds: any[] = JSON.parse(this.flushTxIdsJsonString);
+
+      if (!Array.isArray(txIds) || txIds.length == 0) {
+        return false;
       }
 
-  public async onFlushFromCache(): Promise<void> {
+      let valid: boolean = true;
 
+      txIds.forEach((txId: string) => {
+        if (typeof txId != 'string' || txId == '') {
+          valid = false;
+        }
+      });
+
+      return valid;
+    }
+    catch {
+      return false;
+    }
+  }
+
+  private get flushTxIds(): string[] {
+    if (!this.validFlushTxIds) {
+      return [];
+    }
+
+    const txIds: string[] = JSON.parse(this.flushTxIdsJsonString);
+
+    return txIds;
+  }
+
+  public async flush(): Promise<void> {
+    this.flushing = true;
+
+    try {
+      await this.daemonService.flushTxPool(...this.flushTxIds);
+      this.flushError = '';
+      this.flushSuccess = true;
+    }
+    catch(error) {
+      this.flushSuccess = false;
+      this.flushError = `${error}`;
+    }
+
+    this.flushing = false;
+  }
+
+  public flushingCache: boolean = false;
+  public flushCacheBadTxs: boolean = false;
+  public flushCacheBadBlocks: boolean = false;
+  public flushCacheSuccess: boolean = false;
+  public flushCacheError: string = '';
+
+  public async flushCache(): Promise<void> {
+    this.flushingCache = true;
+
+    try {
+      await this.daemonService.flushCache(this.flushCacheBadTxs, this.flushCacheBadBlocks);
+      this.flushCacheError = '';
+      this.flushCacheSuccess = true;
+    }
+    catch(error) {
+      this.flushCacheSuccess = false;
+      this.flushCacheError = `${error}`;
+    }
+
+    this.flushingCache = false;
   }