1 <div class="modal-header border-0">
4 <div class="modal-body">
5 <div class="container-fluid">
8 <div class="col-md-3 border-right">
13 <ul class="nav nav-tabs flex-column">
15 <a class="nav-link active" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="all"
16 aria-selected="true">All</a>
19 <a class="nav-link" id="tsdb-tab" data-toggle="tab" href="#tsdb" role="tab" aria-controls="tsdb"
20 aria-selected="false">TSDB</a>
23 <a class="nav-link" id="olap-tab" data-toggle="tab" href="#olap" role="tab" aria-controls="olap"
24 aria-selected="false">OLAP</a>
31 <div class="col-md-9">
32 <div class="tab-content" id="dbTabContent">
33 <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
35 <div class="list-group">
36 <a class="list-group-item list-group-item-action" [ngClass]="{'active': seletedDb == 'Couchbase'}"
37 (click)="clickDb('Couchbase')">Couchbase</a>
38 <a class="list-group-item list-group-item-action" [ngClass]="{'active': seletedDb == 'Druid'}"
39 (click)="clickDb('Druid')">Druid</a>
40 <a class="list-group-item list-group-item-action" [ngClass]="{'active': seletedDb == 'Elasticsearch'}"
41 (click)="clickDb('Elasticsearch')">Elasticsearch</a>
42 <a class="list-group-item list-group-item-action" [ngClass]="{'active': seletedDb == 'MongoDB'}"
43 (click)="clickDb('MongoDB')">MongoDB</a>
48 <div class="tab-pane fade" id="tsdb" role="tabpanel" aria-labelledby="tsdb-tab">tsdb dbs</div>
49 <div class="tab-pane fade" id="olap" role="tabpanel" aria-labelledby="olap-tab">olap dbs</div>
56 <div class="modal-footer border-0">
57 <button type="submit" class="btn btn-primary" (click)="openDbDetailModal()">OK</button>
58 <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Cancel</button>