mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-11-20 10:21:52 +01:00
Code Issues Projects Releases Wiki Activity

Improve error handling on channel component

Browse Source
This commit is contained in:
nymkappa 2023-02-25 13:38:09 +09:00
parent 58eb6ccc8e
commit 8df2476266
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
3 changed files with 39 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/app/lightning/channel/channel.component.html
View File

@ -1,25 +1,32 @@
<div class="container-xl" *ngIf="(channel$ | async) as channel; else skeletonLoader"> <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"> <ng-container *ngIf="!error">
<h1 class="mb-0">{{ channel.short_id }}</h1> <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
<span class="tx-link"> <div class="title-container">
<a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.id }}</a> <h1 class="mb-0">{{ channel.short_id }}</h1>
<app-clipboard [text]="channel.id"></app-clipboard> <span class="tx-link">
</span> <a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.id }}</a>
</div> <app-clipboard [text]="channel.id"></app-clipboard>
<div class="badges mb-2"> </span>
<span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0" i18n="status.inactive">Inactive</span> </div>
<span class="badge rounded-pill badge-success" *ngIf="channel.status === 1" i18n="status.active">Active</span> <div class="badges mb-2">
<span class="badge rounded-pill badge-danger" *ngIf="channel.status === 2" i18n="status.closed">Closed</span> <span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0" i18n="status.inactive">Inactive</span>
<app-closing-type *ngIf="channel.closing_reason" [type]="channel.closing_reason"></app-closing-type> <span class="badge rounded-pill badge-success" *ngIf="channel.status === 1" i18n="status.active">Active</span>
</div> <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 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.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'" <app-nodes-channels-map *ngIf="!error && (channelGeo$ | async) as channelGeo" [style]="'channelpage'"
[channel]="channelGeo"></app-nodes-channels-map> [channel]="channelGeo"></app-nodes-channels-map>
<div class="box"> <div class="box" *ngIf="!error">
<div class="row"> <div class="row">
<div class="col-md"> <div class="col-md">
@ -65,7 +72,7 @@
<br> <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"> <div class="col">
<app-channel-box [channel]="channel.node_left"></app-channel-box> <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> <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> <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> <ng-template #skeletonLoader>
<div class="container-xl"> <div class="container-xl">
<h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5> <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>

4
frontend/src/app/lightning/channel/channel.component.ts
View File

@ -38,7 +38,9 @@ export class ChannelComponent implements OnInit {
}), }),
catchError((err) => { catchError((err) => {
this.error = err; this.error = err;
return of(null); return [{
short_id: params.get('short_id')
}];
}) })
); );
}), }),

23
frontend/src/app/lightning/node/node.component.html
View File

@ -1,15 +1,18 @@
<div class="container-xl" *ngIf="(node$ | async) as node; else skeletonLoader"> <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"> <ng-container *ngIf="!error">
<h1 class="mb-0 text-truncate">{{ node.alias }}</h1> <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
<span class="tx-link"> <div class="title-container mb-2">
<span class="node-id"> <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
<app-truncate [text]="node.public_key" [lastChars]="8" [link]="['/lightning/node' | relativeUrl, node.public_key]"> <span class="tx-link">
<app-clipboard [text]="node.public_key"></app-clipboard> <span class="node-id">
</app-truncate> <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>
</span> </div>
</div> </ng-container>
<div class="clearfix"></div> <div class="clearfix"></div>