Merge pull request #2168 from mempool/nymkappa/feature/node-channels-list-count

[Node page] Update channels count when switching between open/closed

backend/src/api/explorer/nodes.api.ts

@@ -9,7 +9,10 @@ class NodesApi {
         geo_names_country.names as country, geo_names_subdivision.names as subdivision,
           (SELECT Count(*)
           FROM channels
-          WHERE channels.status < 2 AND ( channels.node1_public_key = ? OR channels.node2_public_key = ? )) AS channel_count,
+          WHERE channels.status = 2 AND ( channels.node1_public_key = ? OR channels.node2_public_key = ? )) AS channel_closed_count,
+          (SELECT Count(*)
+          FROM channels
+          WHERE channels.status < 2 AND ( channels.node1_public_key = ? OR channels.node2_public_key = ? )) AS channel_active_count,
           (SELECT Sum(capacity)
           FROM channels
           WHERE channels.status < 2 AND ( channels.node1_public_key = ? OR channels.node2_public_key = ? )) AS capacity,
@@ -23,7 +26,7 @@ class NodesApi {
         LEFT JOIN geo_names geo_names_country on geo_names_country.id = country_id
         WHERE public_key = ?
       `;
-      const [rows]: any = await DB.query(query, [public_key, public_key, public_key, public_key, public_key, public_key, public_key]);
+      const [rows]: any = await DB.query(query, [public_key, public_key, public_key, public_key, public_key, public_key, public_key, public_key, public_key]);
       if (rows.length > 0) {
         rows[0].as_organization = JSON.parse(rows[0].as_organization);
         rows[0].subdivision = JSON.parse(rows[0].subdivision);

frontend/src/app/lightning/channels-list/channels-list.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { BehaviorSubject, combineLatest, merge, Observable, of } from 'rxjs';
 import { map, startWith, switchMap } from 'rxjs/operators';
@@ -12,6 +12,7 @@ import { LightningApiService } from '../lightning-api.service';
 })
 export class ChannelsListComponent implements OnInit, OnChanges {
   @Input() publicKey: string;
+  @Output() channelsStatusChangedEvent = new EventEmitter<string>();
   channels$: Observable<any>;
 
   // @ts-ignore
@@ -41,13 +42,17 @@ export class ChannelsListComponent implements OnInit, OnChanges {
 
   ngOnChanges(): void {
     this.channelStatusForm.get('status').setValue(this.defaultStatus, { emitEvent: false })
+    this.channelsStatusChangedEvent.emit(this.defaultStatus);
 
     this.channels$ = combineLatest([
       this.channelsPage$,
       this.channelStatusForm.get('status').valueChanges.pipe(startWith(this.defaultStatus))
     ])
     .pipe(
-      switchMap(([page, status]) =>this.lightningApiService.getChannelsByNodeId$(this.publicKey, (page -1) * this.itemsPerPage, status)),
+      switchMap(([page, status]) => {
+        this.channelsStatusChangedEvent.emit(status);
+        return this.lightningApiService.getChannelsByNodeId$(this.publicKey, (page -1) * this.itemsPerPage, status);
+      }),
       map((response) => {
         return {
           channels: response.body,

frontend/src/app/lightning/node/node.component.html

@@ -24,7 +24,7 @@
               <tr>
                 <td i18n="address.total-sent">Total channels</td>
                 <td>
-                  {{ node.channel_count }}
+                  {{ node.channel_active_count }}
                 </td>
               </tr>
               <tr>
@@ -108,7 +108,7 @@
     <br>
 
     <div class="d-flex justify-content-between">
-      <h2>Channels ({{ node.channel_count }})</h2>
+      <h2>Channels ({{ channelsListStatus === 'open' ? node.channel_active_count : node.channel_closed_count }})</h2>
       <div class="d-flex align-items-center justify-content-end">
         <span style="margin-bottom: 0.5rem">List</span>&nbsp;
         <label class="switch">
@@ -120,7 +120,8 @@
     </div>
 
     <app-nodes-channels-map *ngIf="channelsListMode === 'map'" [style]="'nodepage'" [publicKey]="node.public_key"></app-nodes-channels-map>
-    <app-channels-list *ngIf="channelsListMode === 'list'" [publicKey]="node.public_key"></app-channels-list>
+    <app-channels-list *ngIf="channelsListMode === 'list'" [publicKey]="node.public_key"
+      (channelsStatusChangedEvent)="onChannelsListStatusChanged($event)"></app-channels-list>
 
 </div>
 

frontend/src/app/lightning/node/node.component.ts

@@ -18,6 +18,7 @@ export class NodeComponent implements OnInit {
   selectedSocketIndex = 0;
   qrCodeVisible = false;
   channelsListMode = 'list';
+  channelsListStatus: string;
 
   constructor(
     private lightningApiService: LightningApiService,
@@ -69,4 +70,8 @@ export class NodeComponent implements OnInit {
       this.channelsListMode = 'list';
     }
   }
+
+  onChannelsListStatusChanged(e) {
+    this.channelsListStatus = e;
+  }
 }