Merge pull request #3130 from mempool/nymkappa/bugfix/lightning-channel-404
Improve error handling on channel component
This commit is contained in:
		
						commit
						321499da88
					
				@ -1,25 +1,32 @@
 | 
			
		||||
<div class="container-xl" *ngIf="(channel$ | async) as channel; else skeletonLoader">
 | 
			
		||||
  <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
 | 
			
		||||
  <div class="title-container">
 | 
			
		||||
    <h1 class="mb-0">{{ channel.short_id }}</h1>
 | 
			
		||||
    <span class="tx-link">
 | 
			
		||||
      <a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.id }}</a>
 | 
			
		||||
      <app-clipboard [text]="channel.id"></app-clipboard>
 | 
			
		||||
    </span>
 | 
			
		||||
  </div>
 | 
			
		||||
  <div class="badges mb-2">
 | 
			
		||||
    <span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0" i18n="status.inactive">Inactive</span>
 | 
			
		||||
    <span class="badge rounded-pill badge-success" *ngIf="channel.status === 1" i18n="status.active">Active</span>
 | 
			
		||||
    <span class="badge rounded-pill badge-danger" *ngIf="channel.status === 2" i18n="status.closed">Closed</span>
 | 
			
		||||
    <app-closing-type *ngIf="channel.closing_reason" [type]="channel.closing_reason"></app-closing-type>
 | 
			
		||||
  </div>
 | 
			
		||||
 | 
			
		||||
  <ng-container *ngIf="!error">
 | 
			
		||||
    <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
 | 
			
		||||
    <div class="title-container">
 | 
			
		||||
      <h1 class="mb-0">{{ channel.short_id }}</h1>
 | 
			
		||||
      <span class="tx-link">
 | 
			
		||||
        <a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.id }}</a>
 | 
			
		||||
        <app-clipboard [text]="channel.id"></app-clipboard>
 | 
			
		||||
      </span>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="badges mb-2">
 | 
			
		||||
      <span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0" i18n="status.inactive">Inactive</span>
 | 
			
		||||
      <span class="badge rounded-pill badge-success" *ngIf="channel.status === 1" i18n="status.active">Active</span>
 | 
			
		||||
      <span class="badge rounded-pill badge-danger" *ngIf="channel.status === 2" i18n="status.closed">Closed</span>
 | 
			
		||||
      <app-closing-type *ngIf="channel.closing_reason" [type]="channel.closing_reason"></app-closing-type>
 | 
			
		||||
    </div>
 | 
			
		||||
  </ng-container>
 | 
			
		||||
 | 
			
		||||
  <div class="clearfix"></div>
 | 
			
		||||
 | 
			
		||||
  <div *ngIf="error" class="d-flex flex-column justify-content-around align-items-center mt-5 w-100" style="min-height: 100px">
 | 
			
		||||
    <span class="text-center" i18n="lightning.channel-not-found">No channel found for short id "{{ channel.short_id }}"</span>
 | 
			
		||||
  </div>
 | 
			
		||||
 | 
			
		||||
  <app-nodes-channels-map *ngIf="!error && (channelGeo$ | async) as channelGeo" [style]="'channelpage'"
 | 
			
		||||
    [channel]="channelGeo"></app-nodes-channels-map>
 | 
			
		||||
 | 
			
		||||
  <div class="box">
 | 
			
		||||
  <div class="box" *ngIf="!error">
 | 
			
		||||
 | 
			
		||||
      <div class="row">
 | 
			
		||||
        <div class="col-md">
 | 
			
		||||
@ -65,7 +72,7 @@
 | 
			
		||||
 | 
			
		||||
  <br>
 | 
			
		||||
 | 
			
		||||
  <div class="row row-cols-1 row-cols-md-2">
 | 
			
		||||
  <div class="row row-cols-1 row-cols-md-2" *ngIf="!error">
 | 
			
		||||
    <div class="col">
 | 
			
		||||
      <app-channel-box [channel]="channel.node_left"></app-channel-box>
 | 
			
		||||
      <app-channel-close-box *ngIf="showCloseBoxes(channel)" [channel]="channel" [local]="channel.node_left" [remote]="channel.node_right"></app-channel-close-box>
 | 
			
		||||
@ -104,14 +111,6 @@
 | 
			
		||||
 | 
			
		||||
<br>
 | 
			
		||||
 | 
			
		||||
<ng-template [ngIf]="error">
 | 
			
		||||
  <div class="text-center">
 | 
			
		||||
    <span i18n="error.general-loading-data">Error loading data.</span>
 | 
			
		||||
    <br><br>
 | 
			
		||||
    <i>{{ error.status }}: {{ error.error }}</i>
 | 
			
		||||
  </div>
 | 
			
		||||
</ng-template>
 | 
			
		||||
 | 
			
		||||
<ng-template #skeletonLoader>
 | 
			
		||||
  <div class="container-xl">
 | 
			
		||||
    <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
 | 
			
		||||
 | 
			
		||||
@ -38,7 +38,9 @@ export class ChannelComponent implements OnInit {
 | 
			
		||||
              }),
 | 
			
		||||
              catchError((err) => {
 | 
			
		||||
                this.error = err;
 | 
			
		||||
                return of(null);
 | 
			
		||||
                return [{
 | 
			
		||||
                  short_id: params.get('short_id')
 | 
			
		||||
                }];
 | 
			
		||||
              })
 | 
			
		||||
            );
 | 
			
		||||
        }),
 | 
			
		||||
 | 
			
		||||
@ -1,20 +1,23 @@
 | 
			
		||||
<div class="container-xl" *ngIf="(node$ | async) as node; else skeletonLoader">
 | 
			
		||||
  <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
 | 
			
		||||
  <div class="title-container mb-2" *ngIf="!error">
 | 
			
		||||
    <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
 | 
			
		||||
    <span class="tx-link">
 | 
			
		||||
      <span class="node-id">
 | 
			
		||||
        <app-truncate [text]="node.public_key" [lastChars]="8" [link]="['/lightning/node' | relativeUrl, node.public_key]">
 | 
			
		||||
          <app-clipboard [text]="node.public_key"></app-clipboard>
 | 
			
		||||
        </app-truncate>
 | 
			
		||||
 | 
			
		||||
  <ng-container *ngIf="!error">
 | 
			
		||||
    <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
 | 
			
		||||
    <div class="title-container mb-2">
 | 
			
		||||
      <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
 | 
			
		||||
      <span class="tx-link">
 | 
			
		||||
        <span class="node-id">
 | 
			
		||||
          <app-truncate [text]="node.public_key" [lastChars]="8" [link]="['/lightning/node' | relativeUrl, node.public_key]">
 | 
			
		||||
            <app-clipboard [text]="node.public_key"></app-clipboard>
 | 
			
		||||
          </app-truncate>
 | 
			
		||||
        </span>
 | 
			
		||||
      </span>
 | 
			
		||||
    </span>
 | 
			
		||||
  </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </ng-container>
 | 
			
		||||
 | 
			
		||||
  <div class="clearfix"></div>
 | 
			
		||||
 | 
			
		||||
  <div *ngIf="error" class="d-flex flex-column justify-content-around align-items-center mt-5 w-100" style="min-height: 100px">
 | 
			
		||||
    <span i18n="lightning.node-not-found">No node found for public key "{{ node.public_key | shortenString : 12}}"</span>
 | 
			
		||||
    <span class="text-center" i18n="lightning.node-not-found">No node found for public key "{{ node.public_key | shortenString : 12}}"</span>
 | 
			
		||||
  </div>
 | 
			
		||||
 | 
			
		||||
  <div class="box" *ngIf="!error">
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user