Improving channels api with node data

frontend/src/app/components/clipboard/clipboard.component.html

@@ -1,5 +1,5 @@
 <span #buttonWrapper [attr.data-tlite]="copiedMessage" style="position: relative;">
-  <button #btn class="btn btn-sm btn-link pt-0" style="line-height: 0.9;" [attr.data-clipboard-text]="text"> 
+  <button #btn class="btn btn-sm btn-link pt-0" [style]="{'line-height': size === 'small' ? '0.2' : '0.8'}" [attr.data-clipboard-text]="text"> 
-    <img src="./resources/clippy.svg" width="13">
+    <img src="./resources/clippy.svg" [width]="size === 'small' ? 10 : 13">
   </button>
 </span>

frontend/src/app/components/clipboard/clipboard.component.ts

@@ -11,6 +11,7 @@ import * as tlite from 'tlite';
 export class ClipboardComponent implements AfterViewInit {
   @ViewChild('btn') btn: ElementRef;
   @ViewChild('buttonWrapper') buttonWrapper: ElementRef;
+  @Input() size: 'small' | 'normal' = 'normal';
   @Input() text: string;
   copiedMessage: string = $localize`:@@clipboard.copied-message:Copied!`;
 

frontend/src/app/lightning/channel/channel-box/channel-box.component.html

@@ -1,9 +1,15 @@
-<div class="mb-2">
+<div class="mb-2 box-top">
-  <h2 class="mb-0">{{ channel.alias || '?' }}</h2>
+  <div class="box-left">
-  <a [routerLink]="['/lightning/node' | relativeUrl, channel.public_key]" >
+    <h2 class="mb-0">{{ channel.alias || '?' }}</h2>
-    {{ channel.public_key | shortenString : 12 }}
+    <a [routerLink]="['/lightning/node' | relativeUrl, channel.public_key]" >
-  </a>
+      {{ channel.public_key | shortenString : 12 }}
-  <app-clipboard [text]="channel.node1_public_key"></app-clipboard>
+    </a>
+    <app-clipboard [text]="channel.node1_public_key"></app-clipboard>
+  </div>
+  <div class="box-right">
+    <div class="second-line">{{ channel.channels }} channels</div>
+    <div class="second-line"><app-amount [satoshis]="channel.capacity" digitsInfo="1.2-2"></app-amount></div>
+  </div>
 </div>
 <div class="box">
 

frontend/src/app/lightning/channel/channel-box/channel-box.component.scss

@@ -0,0 +1,13 @@
+.box-top {
+  display: flex;
+}
+
+.box-left {
+  width: 100%;
+}
+
+.box-right {
+  text-align: right;
+  width: 50%;
+  margin-top: auto;
+}

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

@@ -2,7 +2,7 @@
   <table class="table table-borderless">
     <thead>
       <th class="alias text-left" i18n="nodes.alias">Node Alias</th>
-      <th class="alias text-left d-none d-md-table-cell" i18n="channels.transaction">Node ID</th>
+      <th class="alias text-left d-none d-md-table-cell" i18n="channels.transaction">&nbsp;</th>
       <th class="alias text-left d-none d-md-table-cell" i18n="nodes.alias">Status</th>
       <th class="channels text-left d-none d-md-table-cell" i18n="channels.rate">Fee Rate</th>
       <th class="capacity text-right d-none d-md-table-cell" i18n="nodes.capacity">Capacity</th>
@@ -42,13 +42,17 @@
 
 <ng-template #tableTemplate let-channel let-node="node">
   <td class="alias text-left">
-    {{ node.alias || '?' }}
+    <div>{{ node.alias || '?' }}</div>
+    <div class="second-line">
+      <a [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">
+        <span>{{ node.public_key | shortenString : 10 }}</span>
+      </a>
+      <app-clipboard [text]="node.public_key" size="small"></app-clipboard>
+    </div>
   </td>
-  <td class="text-left d-none d-md-table-cell">
+  <td class="alias text-left">
-    <a [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">
+    <div class="second-line">{{ node.channels }} channels</div>
-      <span>{{ node.public_key | shortenString : 10 }}</span>
+    <div class="second-line"><app-amount [satoshis]="node.capacity" digitsInfo="1.2-2"></app-amount></div>
-    </a>
-    <app-clipboard [text]="node.public_key"></app-clipboard>
   </td>
   <td class="d-none d-md-table-cell">
     <span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0">Inactive</span>

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

@@ -0,0 +1,3 @@
+.second-line {
+  font-size: 12px;
+}

lightning-backend/src/api/explorer/channels.api.ts

@@ -49,7 +49,7 @@ class ChannelsApi {
 
   public async $getChannel(shortId: string): Promise<any> {
     try {
-      const query = `SELECT n1.alias AS alias_left, n2.alias AS alias_right, channels.* FROM channels LEFT JOIN nodes AS n1 ON n1.public_key = channels.node1_public_key LEFT JOIN nodes AS n2 ON n2.public_key = channels.node2_public_key WHERE channels.id = ?`;
+      const query = `SELECT n1.alias AS alias_left, n2.alias AS alias_right, channels.*, ns1.channels AS channels_left, ns1.capacity AS capacity_left, ns2.channels AS channels_right, ns2.capacity AS capacity_right FROM channels LEFT JOIN nodes AS n1 ON n1.public_key = channels.node1_public_key LEFT JOIN nodes AS n2 ON n2.public_key = channels.node2_public_key LEFT JOIN node_stats AS ns1 ON ns1.public_key = channels.node1_public_key LEFT JOIN node_stats AS ns2 ON ns2.public_key = channels.node2_public_key WHERE (ns1.id = (SELECT MAX(id) FROM node_stats WHERE public_key = channels.node1_public_key) AND ns2.id = (SELECT MAX(id) FROM node_stats WHERE public_key = channels.node2_public_key)) AND channels.id = ?`;
       const [rows]: any = await DB.query(query, [shortId]);
       if (rows[0]) {
         return this.convertChannel(rows[0]);
@@ -75,7 +75,7 @@ class ChannelsApi {
 
   public async $getChannelsForNode(public_key: string): Promise<any> {
     try {
-      const query = `SELECT n1.alias AS alias_left, n2.alias AS alias_right, channels.* FROM channels LEFT JOIN nodes AS n1 ON n1.public_key = channels.node1_public_key LEFT JOIN nodes AS n2 ON n2.public_key = channels.node2_public_key WHERE node1_public_key = ? OR node2_public_key = ? ORDER BY channels.capacity DESC`;
+      const query = `SELECT n1.alias AS alias_left, n2.alias AS alias_right, channels.*, ns1.channels AS channels_left, ns1.capacity AS capacity_left, ns2.channels AS channels_right, ns2.capacity AS capacity_right FROM channels LEFT JOIN nodes AS n1 ON n1.public_key = channels.node1_public_key LEFT JOIN nodes AS n2 ON n2.public_key = channels.node2_public_key LEFT JOIN node_stats AS ns1 ON ns1.public_key = channels.node1_public_key LEFT JOIN node_stats AS ns2 ON ns2.public_key = channels.node2_public_key WHERE (ns1.id = (SELECT MAX(id) FROM node_stats WHERE public_key = channels.node1_public_key) AND ns2.id = (SELECT MAX(id) FROM node_stats WHERE public_key = channels.node2_public_key)) AND (node1_public_key = ? OR node2_public_key = ?) ORDER BY channels.capacity DESC`;
       const [rows]: any = await DB.query(query, [public_key, public_key]);
       const channels = rows.map((row) => this.convertChannel(row));
       return channels;
@@ -98,6 +98,8 @@ class ChannelsApi {
       'node_left': {
         'alias': channel.alias_left,
         'public_key': channel.node1_public_key,
+        'channels': channel.channels_left,
+        'capacity': channel.capacity_left,
         'base_fee_mtokens': channel.node1_base_fee_mtokens,
         'cltv_delta': channel.node1_cltv_delta,
         'fee_rate': channel.node1_fee_rate,
@@ -109,6 +111,8 @@ class ChannelsApi {
       'node_right': {
         'alias': channel.alias_right,
         'public_key': channel.node2_public_key,
+        'channels': channel.channels_right,
+        'capacity': channel.capacity_right,
         'base_fee_mtokens': channel.node2_base_fee_mtokens,
         'cltv_delta': channel.node2_cltv_delta,
         'fee_rate': channel.node2_fee_rate,

lightning-backend/src/tasks/stats-updater.service.ts

@@ -33,7 +33,7 @@ class LightningStatsUpdater {
         return;
       }
 
-      const query = `SELECT nodes.public_key, c1.channels_count_left, c2.channels_count_right, c1.channels_capacity_left, c2.channels_capacity_right FROM nodes LEFT JOIN (SELECT node1_public_key, COUNT(id) AS channels_count_left, SUM(capacity) AS channels_capacity_left FROM channels GROUP BY node1_public_key) c1 ON c1.node1_public_key = nodes.public_key LEFT JOIN (SELECT node2_public_key, COUNT(id) AS channels_count_right, SUM(capacity) AS channels_capacity_right FROM channels GROUP BY node2_public_key) c2 ON c2.node2_public_key = nodes.public_key`;
+      const query = `SELECT nodes.public_key, c1.channels_count_left, c2.channels_count_right, c1.channels_capacity_left, c2.channels_capacity_right FROM nodes LEFT JOIN (SELECT node1_public_key, COUNT(id) AS channels_count_left, SUM(capacity) AS channels_capacity_left FROM channels WHERE channels.status < 2 GROUP BY node1_public_key) c1 ON c1.node1_public_key = nodes.public_key LEFT JOIN (SELECT node2_public_key, COUNT(id) AS channels_count_right, SUM(capacity) AS channels_capacity_right FROM channels WHERE channels.status < 2 GROUP BY node2_public_key) c2 ON c2.node2_public_key = nodes.public_key`;
       const [nodes]: any = await DB.query(query);
 
       // First run we won't have any nodes yet