Merge pull request #73 from EOSEssentials/dev

src/app/account1/account/actions/actions.component.html

@@ -25,7 +25,9 @@
         <ng-container matColumnDef="transaction">
           <th mat-header-cell *matHeaderCellDef>{{ 'Transaction' | translate }}</th>
           <td mat-cell *matCellDef="let action">
-            <a [routerLink]="['/transactions',action.transaction]">{{action.transaction|slice:0:16}}...</a>
+            <a [routerLink]="['/transactions',action.transaction]">
+              <id-64 [id]="action.transaction"></id-64>
+            </a>
           </td>
         </ng-container>
         <ng-container matColumnDef="name">

src/app/app.module.ts

@@ -22,6 +22,7 @@ import { StatService } from './services/stat.service';
 import { VoteService } from './services/vote.service';
 import { BpService } from './services/bp.service';
 import { ScatterService } from './services/scatter.service';
+import { AppService } from './services/app.service';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http);
@@ -59,6 +60,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     StatService,
     VoteService,
     BpService,
+    AppService,
     { provide: JsonPipe, useClass: SafeJsonPipe }
   ],
   bootstrap: [AppComponent]

src/app/block1/block/transactions/transactions.component.html

@@ -6,7 +6,9 @@
       <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef>#</th>
         <td mat-cell *matCellDef="let transaction">
-          <a [routerLink]="['../../transactions',transaction.id]">{{transaction.id | slice:0:32}}...</a>
+          <a [routerLink]="['/transactions',transaction.id]">
+            <id-64 [id]="transaction.id"></id-64>
+          </a>
         </td>
       </ng-container>
       <ng-container matColumnDef="blockId">

src/app/contract1/contracts/contracts.component.html

@@ -19,7 +19,9 @@ <h1 class="mat-headline">
       <ng-container matColumnDef="transactionId">
         <th mat-header-cell *matHeaderCellDef>{{ 'TransactionId' | translate }}</th>
         <td mat-cell *matCellDef="let action" class="truncate">
-          <a [routerLink]="['/transactions',action.transaction]">{{action.transaction|slice:0:28}}...</a>
+          <a [routerLink]="['/transactions',action.transaction]">
+            <id-64 [id]="action.transaction" [override]="{sm:160,md:240}"></id-64>
+          </a>
         </td>
       </ng-container>
       <ng-container matColumnDef="createdAt">

src/app/dashboard1/dashboard/blocks/blocks.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { AppService } from '../../../services/app.service';
 import { BlockService } from '../../../services/block.service';
 import { Block } from '../../../models/Block';
 import { Observable, timer, of } from 'rxjs';
-import { switchMap, share, map } from 'rxjs/operators';
+import { switchMap, share, map, tap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-dashboard-blocks',
@@ -17,6 +18,7 @@ export class BlocksComponent implements OnInit {
 
   constructor(
     private breakpointObserver: BreakpointObserver,
+    private appService: AppService,
     private blockService: BlockService
   ) { }
 
@@ -26,7 +28,12 @@ export class BlocksComponent implements OnInit {
     );
     this.blocks$ = timer(0, 5000).pipe(
       switchMap(() => this.blockService.getBlocks(undefined, 20)),
-      share()
+      share(),
+      tap(blocks => {
+        if (blocks.length) {
+          this.appService.setLatestBlockNumber(blocks[0].blockNumber);
+        }
+      })
     );
   }
 

src/app/dashboard1/dashboard/chain-status/chain-status.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { EosService } from '../../../services/eos.service';
+import { AppService } from '../../../services/app.service';
 
 @Component({
   selector: 'app-dashboard-chain-status',
@@ -11,11 +11,11 @@ export class ChainStatusComponent implements OnInit {
   status$;
 
   constructor(
-    private eosService: EosService
+    private appService: AppService
   ) { }
 
   ngOnInit() {
-    this.status$ = this.eosService.getInfo();
+    this.status$ = this.appService.chainStatus$;
   }
 
 }

src/app/dashboard1/dashboard/dashboard.component.html

@@ -7,6 +7,9 @@ <h1 class="mat-headline">
   <div style="padding:10px;">
     <app-dashboard-chain-status></app-dashboard-chain-status>
   </div>
+  <div style="padding:10px;" *ngIf="isMaintenance$ | async">
+    <app-dashboard-maintenance></app-dashboard-maintenance>
+  </div>
   <!-- <app-dashboard-stats></app-dashboard-stats> -->
   <div fxLayout.gt-md="row" fxLayout="column">
     <div fxFlex style="padding:10px;">

src/app/dashboard1/dashboard/dashboard.component.ts

@@ -1,14 +1,21 @@
 import { Component, OnInit } from '@angular/core';
+import { AppService } from '../../services/app.service';
+import { Observable } from 'rxjs';
 
 @Component({
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent implements OnInit {
 
-  constructor() { }
+  isMaintenance$: Observable<boolean>;
+
+  constructor(
+    private appService: AppService
+  ) { }
 
   ngOnInit() {
+    this.isMaintenance$ = this.appService.isMaintenance$;
   }
 
 }

src/app/dashboard1/dashboard/maintenance/maintenance.component.html

@@ -0,0 +1,5 @@
+<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px" class="mat-elevation-z1" style="padding:24px;">
+  <mat-icon color="warn">warning</mat-icon>
+  <p class="mat-body-1 mat-error">EOS Tracker Database is down for maintenance. We expect to be back in a couple hours. But you can still check Block, Transaction
+    and Account information via search. Thanks for your patience.</p>
+</div>

src/app/dashboard1/dashboard/maintenance/maintenance.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard-maintenance',
+  templateUrl: './maintenance.component.html',
+  styleUrls: ['./maintenance.component.scss']
+})
+export class MaintenanceComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/dashboard1/dashboard/transactions/transactions.component.html

@@ -13,7 +13,9 @@
         <ng-container matColumnDef="id">
           <th mat-header-cell *matHeaderCellDef>#</th>
           <td mat-cell *matCellDef="let transaction">
-            <a [routerLink]="['./transactions',transaction.id]">{{transaction.id | slice:0:26}}...</a>
+            <a [routerLink]="['./transactions',transaction.id]">
+              <id-64 [id]="transaction.id" [override]="{lg:240}"></id-64>
+            </a>
           </td>
         </ng-container>
         <ng-container matColumnDef="createdAt">

src/app/dashboard1/dashboard1.module.ts

@@ -10,6 +10,7 @@ import { StatsComponent } from './dashboard/stats/stats.component';
 import { BlocksComponent } from './dashboard/blocks/blocks.component';
 import { TransactionsComponent } from './dashboard/transactions/transactions.component';
 import { ChainStatusComponent } from './dashboard/chain-status/chain-status.component';
+import { MaintenanceComponent } from './dashboard/maintenance/maintenance.component';
 
 @NgModule({
   imports: [
@@ -24,7 +25,8 @@ import { ChainStatusComponent } from './dashboard/chain-status/chain-status.comp
     StatsComponent,
     BlocksComponent,
     TransactionsComponent,
-    ChainStatusComponent
+    ChainStatusComponent,
+    MaintenanceComponent
   ]
 })
 export class Dashboard1Module { }

src/app/services/app.service.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { EosService } from './eos.service';
+import { Observable, Subject } from 'rxjs';
+import { map, share, withLatestFrom } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppService {
+
+  private latestBlockNumberSource = new Subject<number>();
+
+  latestBlockNumber$ = this.latestBlockNumberSource.asObservable();
+  chainStatus$: Observable<any>;
+  isMaintenance$: Observable<boolean>;
+
+  constructor(
+    private eosService: EosService
+  ) {
+    this.chainStatus$ = this.eosService.getInfo().pipe(
+      share()
+    );
+    this.isMaintenance$ = this.chainStatus$.pipe(
+      withLatestFrom(this.latestBlockNumber$),
+      map(([chainStatus, blockNumber]) => {
+        return (chainStatus.head_block_num - blockNumber) > 600;
+      }),
+      share()
+    );
+  }
+
+  setLatestBlockNumber(blockNumber: number) {
+    if (blockNumber) {
+      this.latestBlockNumberSource.next(blockNumber);
+    }
+  }
+
+}

src/app/shared/id64/id64.component.html

@@ -0,0 +1,7 @@
+<div class="truncate" 
+  [ngStyle.xs]="{'max-width.px':breakpoint.xs}" 
+  [ngStyle.sm]="{'max-width.px':breakpoint.sm}" 
+  [ngStyle.md]="{'max-width.px':breakpoint.md}"
+  [ngStyle.lg]="{'max-width.px':breakpoint.lg}">
+  {{id}}
+</div>

src/app/shared/id64/id64.component.scss

@@ -0,0 +1,5 @@
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

src/app/shared/id64/id64.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnChanges, Input } from '@angular/core';
+
+@Component({
+  selector: 'id-64',
+  templateUrl: './id64.component.html',
+  styleUrls: ['./id64.component.scss']
+})
+export class Id64Component implements OnChanges {
+
+  @Input() id: string;
+  @Input() override;
+  breakpoint;
+
+  constructor() { }
+
+  ngOnChanges() {
+    this.breakpoint = { ...DEFAULTS, ...this.override };
+  }
+
+}
+
+const DEFAULTS = { xs: 160, sm: 240, md: 320, lg: 400 };

src/app/shared/shared.module.ts

@@ -31,6 +31,7 @@ import { SearchComponent } from './masterpage/search/search.component';
 import { SidenavComponent } from './masterpage/sidenav/sidenav.component';
 import { SpinnerComponent } from './spinner/spinner.component';
 import { ErrorComponent } from './error/error.component';
+import { Id64Component } from './id64/id64.component';
 
 import { ToKbPipes } from './pipes/tokb.pipes';
 
@@ -71,7 +72,8 @@ const sharedComponents = [
   SearchComponent,
   SidenavComponent,
   SpinnerComponent,
-  ErrorComponent
+  ErrorComponent,
+  Id64Component
 ];
 
 const sharedPipes = [

src/app/transaction1/transactions/transactions.component.html

@@ -13,7 +13,9 @@ <h1 class="mat-headline">
       <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef>#</th>
         <td mat-cell *matCellDef="let transaction">
-          <a [routerLink]="['./',transaction.id]">{{transaction.id|slice:0:32}}...</a>
+          <a [routerLink]="['./',transaction.id]">
+            <id-64 [id]="transaction.id">{{transaction.id}}</id-64>
+          </a>
         </td>
       </ng-container>
       <ng-container matColumnDef="blockId">

src/themes.scss

@@ -60,3 +60,8 @@ a {
     color: mat-color($app-light-accent);
     text-decoration: none;
 }
+
+p {
+    margin: 0;
+    padding: 0;
+}