uchaindb/UClient

<database-nav *ngIf="db" [current]="db.name"></database-nav>
<div *ngIf="db" class="panel panel-default">
    <div class="panel-heading">
        <button *ngIf="!loadError && !loading && efEnabled" type="button" class="close" (click)="toggleMonitor()"
                title="{{ 'db.detail.DatabaseToggleButtonTitle' | translate }}">
            <span class="glyphicon"
                  [class.glyphicon-star-empty]="!monitor"
                  [class.glyphicon-star]="monitor"></span>
        </button>
        <h3 class="panel-title">
            {{ 'db.detail.BasicInfoTitle' | translate }}
            <ng-container *ngIf="!loadError && !loading">
                <button *ngIf="efEnabled" type="button" (click)="toggleEditMode()"
                        class="btn btn-xs"
                        [class.btn-danger]="db.editmode"
                        [class.btn-primary]="!db.editmode">
                    <ng-container *ngIf="!db.editmode">
                        <span class="glyphicon glyphicon-edit"></span>
                        {{ 'db.detail.SwitchToEditModeButtonText' | translate }}
                    </ng-container>
                    <ng-container *ngIf="db.editmode">
                        <span class="glyphicon glyphicon-ban-circle"></span>
                        {{ 'db.detail.SwitchToBrowseModeButtonText' | translate }}
                    </ng-container>
                </button>
                <button type="button" (click)="refresh()"
                        class="btn btn-xs btn-success">
                    <span class="glyphicon glyphicon-refresh"></span>
                    {{ 'db.detail.RefreshButtonText' | translate }}
                </button>
            </ng-container>
        </h3>
    </div>
    <div class="panel-body">
        <ng-container *ngIf="db">
            <div class="media-left">
                <img class="media-object chaindb-image" [src]="db.image">
            </div>
            <div class="media-body">
                <h4 class="list-group-item-heading">
                    {{db.name}}
                    <a *ngIf="db?.editmode" [routerLink]="['/database', db.id, 'create']" class="btn btn-success btn-sm">{{ 'db.detail.CreateTxButton' | translate }}</a>
                </h4>
                <p class="text-muted">{{db.description}}</p>
                <p>{{ 'db.detail.Address' | translate }}<span class="text-success">{{db.address}}</span></p>
                <ng-container *ngIf="lastBlock">
                    <p>{{ 'db.detail.Height' | translate }}<a [routerLink]="['/database', db.id, 'chain', lastBlock.Height]">{{lastBlock.Height}}</a></p>
                    <p>
                        {{ 'db.detail.LastBlock' | translate }}<a [routerLink]="['/database', db.id, 'chain', lastBlock.Hash]">{{lastBlock.Hash | hashbeauty}}</a>
                        ({{lastBlock.Time | date: "yyyy-MM-dd HH:mm:ss"}})
                    </p>
                </ng-container>
                <ng-container *ngIf="loading">
                    <p>
                        <span class="loading-spinner"></span>
                    </p>
                </ng-container>
                <ng-container *ngIf="loadError">
                    <div class="alert alert-danger">
                        {{ 'db.detail.LoadErrorText' | translate }}
                        <button type="button" (click)="refresh()"
                                class="btn btn-xs btn-success">
                            <span class="glyphicon glyphicon-refresh"></span>
                            {{ 'db.detail.LoadErrorRefreshButtonText' | translate }}
                        </button>
                    </div>
                </ng-container>
            </div>
        </ng-container>
    </div>
</div>

<div class="panel panel-success">
    <div class="panel-heading">
        <button *ngIf="db?.editmode" type="button" class="close" title="add new table"
                [routerLink]="['/database', db.id, 'create']"
                [queryParams]="{type: 'schema', action: 'create'}">
            <span class="glyphicon glyphicon-plus"></span>
        </button>
        <h3 class="panel-title">
            {{ 'db.detail.TablesTitle' | translate }}
            <span class="btn-group btn-group-xs" role="group">
                <button *ngIf="db?.editmode" type="button" class="btn btn-warning" title="lock database"
                        [routerLink]="['/database', db.id, 'create']"
                        [queryParams]="{type: 'lock', target: 'database'}">
                    <span class="glyphicon glyphicon-lock"></span> {{ 'db.detail.LockDatabase' | translate }}
                </button>
            </span>
        </h3>
    </div>
    <ul *ngIf="db && tables" class="list-group">
        <a *ngFor="let table of tables" [routerLink]="['/database', db.id, 'table', table.Name]" class="list-group-item">{{table.Name}}</a>
    </ul>
</div>

<div *ngIf="efEnabled" class="panel panel-primary">
    <div class="panel-heading">
        <span *ngIf="refreshTime" class="pull-right">
            <small>{{ 'db.detail.LastRefreshTimeLeadText' | translate }} {{ refreshTime | date: "yyyy-MM-dd HH:mm:ss" }}</small>
        </span>
        <h3 class="panel-title">{{ 'db.detail.AlarmListTitle' | translate }}</h3>
    </div>
    <database-alarm-list [configs]="alarmConfigs" [showDb]="false" (onDelete)="remove($event)"></database-alarm-list>
</div>