gerrit.onap Code Review - dcaegen2/services.git/blob

   1 <!--
   2 ============LICENSE_START=======================================================
   3 ONAP : DataLake
   4 ================================================================================
   5 Copyright 2019 QCT
   6 =================================================================================
   7 Licensed under the Apache License, Version 2.0 (the "License");
   8 you may not use this file except in compliance with the License.
   9 You may obtain a copy of the License at
  10
  11      http://www.apache.org/licenses/LICENSE-2.0
  12
  13 Unless required by applicable law or agreed to in writing, software
  14 distributed under the License is distributed on an "AS IS" BASIS,
  15 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16 See the License for the specific language governing permissions and
  17 limitations under the License.
  18 ============LICENSE_END=========================================================
  19 -->
  20
  21 <div class="p-0">
  22   <div class="modal-title p-0 pb-4 w-25 border-right">
  23
  24   </div>
  25
  26   <div class="modal-body p-0">
  27     <div class="d-flex">
  28
  29       <!-- Menu -->
  30       <div class="flex-fill w-25 border-right">
  31         <div class="nav flex-column nav-pills" id="menu-tab1" role="tablist" aria-orientation="vertical">
  32
  33           <a class="nav-link active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab"
  34             aria-controls="v-pills-all" aria-selected="true">All</a>
  35
  36           <a class="nav-link" id="v-pills-olap-tab" data-toggle="pill" href="#v-pills-olap" role="tab"
  37             aria-controls="v-pills-olap" aria-selected="false">OLAP</a>
  38
  39           <a class="nav-link" id="v-pills-doc-tab" data-toggle="pill" href="#v-pills-doc" role="tab"
  40             aria-controls="v-pills-doc" aria-selected="false">Document</a>
  41
  42           <a class="nav-link" id="v-pills-search-tab" data-toggle="pill" href="#v-pills-search" role="tab"
  43             aria-controls="v-pills-search" aria-selected="false">Search Engine</a>
  44         </div>
  45       </div>
  46
  47       <!-- Content -->
  48       <div class="flex-fill w-75">
  49
  50         <div class="tab-content mb-auto" id="v-pills-tabContent" style="height: 320px;">
  51           <!-- All -->
  52           <div class="tab-pane fade show active" id="v-pills-all" role="tabpanel" aria-labelledby="v-pills-all-tab">
  53             <div class="nav flex-column nav-pills" id="menu-tab2" role="tablist" aria-orientation="vertical">
  54               <a class="nav-link" (click)="this.clickItem('Couchbase')" data-toggle="pill" role="tab"
  55                 aria-selected="true">Couchbase</a>
  56               <a class="nav-link" (click)="this.clickItem('Druid')" data-toggle="pill" role="tab"
  57                 aria-selected="true">Druid</a>
  58               <a class="nav-link" (click)="this.clickItem('Elasticsearch')" data-toggle="pill" role="tab"
  59                 aria-selected="true">Elasticsearch</a>
  60               <a class="nav-link" (click)="this.clickItem('MongoDB')" data-toggle="pill" role="tab"
  61                 aria-selected="true">MongoDB</a>
  62             </div>
  63           </div>
  64
  65           <!-- OLAP -->
  66           <div class="tab-pane fade" id="v-pills-olap" role="tabpanel" aria-labelledby="v-pills-olap-tab">
  67             <div class="nav flex-column nav-pills" id="menu-tab2" role="tablist" aria-orientation="vertical">
  68               <a class="nav-link" (click)="this.clickItem('Druid')" data-toggle="pill" role="tab"
  69                 aria-selected="true">Druid</a>
  70             </div>
  71           </div>
  72
  73           <!-- Document -->
  74           <div class="tab-pane fade" id="v-pills-doc" role="tabpanel" aria-labelledby="v-pills-doc-tab">
  75             <div class="nav flex-column nav-pills" id="menu-tab2" role="tablist" aria-orientation="vertical">
  76               <a class="nav-link" (click)="this.clickItem('Couchbase')" data-toggle="pill" role="tab"
  77                 aria-selected="true">Couchbase</a>
  78               <a class="nav-link" (click)="this.clickItem('MongoDB')" data-toggle="pill" role="tab"
  79                 aria-selected="true">MongoDB</a>
  80             </div>
  81           </div>
  82
  83           <!-- Search engine -->
  84           <div class="tab-pane fade" id="v-pills-search" role="tabpanel" aria-labelledby="v-pills-search-tab">
  85             <div class="nav flex-column nav-pills" id="menu-tab2" role="tablist" aria-orientation="vertical">
  86               <a class="nav-link" (click)="this.clickItem('Elasticsearch')" data-toggle="pill" role="tab"
  87                 aria-selected="true">Elasticsearch</a>
  88             </div>
  89           </div>
  90         </div>
  91
  92         <div class="d-flex mt-auto justify-content-end p-3">
  93           <div class="p-1 col-sm-3">
  94             <span>
  95               <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
  96                 Next
  97               </button>
  98             </span>
  99           </div>
 100           <div class="p-1 col-sm-3">
 101             <span>
 102               <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
 103                 Cancel
 104               </button>
 105             </span>
 106           </div>
 107         </div>
 108
 109       </div>
 110     </div>
 111
 112     <!-- <div class="container-fluid p-0">
 113       <div class="row m-0 p-0">
 114         <div class="col-md-4 border-right"></div>
 115         <div class="col-md-8"></div>
 116       </div>
 117       <div class="row m-0 p-0 border border-danger" style="height: 350px;">
 118         <div class="col-md-4 border-right">
 119           <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
 120             <a class="nav-link active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab"
 121               aria-controls="v-pills-all" aria-selected="true">All</a>
 122           </div>
 123         </div>
 124         <div class="col-md-8">
 125           <div class="tab-content" id="v-pills-tabContent">
 126             <div class="tab-pane fade show active" id="v-pills-all" role="tabpanel" aria-labelledby="v-pills-all-tab">
 127               1111111111111111
 128             </div>
 129           </div>
 130         </div>
 131       </div>
 132
 133       <div class="row m-0 p-0 border border-info">
 134         <div class="col-md-6 p-0">
 135
 136         </div>
 137         <div class="col-md-3 p-1">
 138           <span>
 139             <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
 140               Next
 141             </button>
 142           </span>
 143         </div>
 144         <div class="col-md-3 p-1">
 145           <span>
 146             <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
 147               Cancel
 148             </button>
 149           </span>
 150         </div>
 151       </div>
 152
 153        <div class="d-flex justify-content-center">
 154
 155         <div class="p-0 border-right">
 156           <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
 157             <a class="nav-link active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab"
 158               aria-controls="v-pills-all" aria-selected="true">All</a>
 159           </div>
 160         </div>
 161
 162         <div class="p-0">
 163           <div class="tab-content" id="v-pills-tabContent">
 164             <div class="tab-pane fade show active" id="v-pills-all" role="tabpanel" aria-labelledby="v-pills-all-tab">
 165               1111111111111111
 166             </div>
 167           </div>
 168         </div>
 169       </div>
 170
 171       <div class="d-flex">
 172         <div class="mb-auto">
 173           <div class="row">
 174             <div class="col-md-6 p-0">
 175
 176             </div>
 177             <div class="col-md-3 p-1">
 178               <span>
 179                 <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
 180                   Next
 181                 </button>
 182               </span>
 183             </div>
 184             <div class="col-md-3 p-1">
 185               <span>
 186                 <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
 187                   Cancel
 188                 </button>
 189               </span>
 190             </div>
 191           </div>
 192         </div>
 193       </div> -->
 194
 195
 196     <!-- <div class="row">
 197         <div class="col-sm-4">
 198           <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
 199             <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
 200               aria-controls="v-pills-home" aria-selected="true">Home</a>
 201             <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab"
 202               aria-controls="v-pills-profile" aria-selected="false">Profile</a>
 203             <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab"
 204               aria-controls="v-pills-messages" aria-selected="false">Messages</a>
 205             <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab"
 206               aria-controls="v-pills-settings" aria-selected="false">Settings</a>
 207           </div>
 208
 209         </div>
 210         <div class="col-sm-8">
 211           <div class="tab-content" id="v-pills-tabContent">
 212             <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
 213               1111111111111111
 214             </div>
 215             <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
 216               2222222222222222222
 217             </div>
 218             <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
 219               33333333333333333
 220             </div>
 221             <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
 222               4444444444444
 223             </div>
 224           </div>
 225         </div>
 226       </div> -->
 227
 228
 229   </div>
 230 </div>
 231
 232
 233 <!-- <div class="modal-footer">
 234     <div class="container">
 235       <div class="row">
 236         <div class="col-md-6 p-0">
 237
 238         </div>
 239         <div class="col-md-3 p-1">
 240           <span>
 241             <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
 242               Next
 243             </button>
 244           </span>
 245         </div>
 246         <div class="col-md-3 p-1">
 247           <span>
 248             <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
 249               Cancel
 250             </button>
 251           </span>
 252         </div>
 253       </div>
 254     </div>
 255   </div> -->