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

   1 <!--
   2     Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
   3
   4     Licensed under the Apache License, Version 2.0 (the "License");
   5     you may not use this file except in compliance with the License.
   6     You may obtain a copy of the License at
   7
   8             http://www.apache.org/licenses/LICENSE-2.0
   9
  10     Unless required by applicable law or agreed to in writing, software
  11     distributed under the License is distributed on an "AS IS" BASIS,
  12     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13     See the License for the specific language governing permissions and
  14     limitations under the License.
  15 -->
  16 <div class="row">
  17   <div class="col-md-12 path">
  18     {{"HOME" | translate}} > {{"ConfigDashboard" | translate}} > {{"SIDEBAR.DASHBOARDLIST" | translate}}
  19   </div>
  20 </div>
  21
  22 <div class="d-flex flex-wrap">
  23
  24   <!-- Database list -->
  25   <div *ngFor="let db of this.dbs;let thisIndex=index" class="col-sm-2 db-block">
  26     <div class="db-panel" style="height: 100%">
  27       <div class="d-flex flex-column align-content-center">
  28         <div class="ml-auto dropdown db-dropdown mr-2" data-boundary="window">
  29           <a class="badge badge-light db-dropdown" data-toggle="dropdown" style="cursor: pointer">
  30             <i class="fas fa-ellipsis-h fa-2x db-config-icon"></i>
  31           </a>
  32           <div class="dropdown-menu action-btn">
  33             <button class="dropdown-item" type="button" (click)="this.openDashboardModal(thisIndex)">
  34               {{ 'EDIT' | translate }}
  35             </button>
  36             <button class="dropdown-item" type="button" (click)="this.deleteDashboard(thisIndex)">
  37               {{ 'DELETE' | translate }}
  38             </button>
  39           </div>
  40         </div>
  41
  42         <div>
  43           <div class="align-self-center" style="height: 130px;">
  44             <!-- Kibana -->
  45             <div class="p-0" *ngIf="db.name == 'Kibana'">
  46                 <span data-toggle="tooltip" title="Kibana">
  47                   <svg version="1.1" id="kibana_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  48          width="45%" height="20%" viewBox="0 0 612 750" enable-background="new 0 0 612 792" xml:space="preserve">
  49 <image overflow="visible" width="85%" height="100%" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAACECAIAAADtMcm8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
  50 bWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
  51 bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
  52 eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0
  53 NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
  54 dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw
  55 dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv
  56 IiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS
  57 ZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD
  58 cmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNl
  59 SUQ9InhtcC5paWQ6RTRFRTFCRTE4MUJCMTFFOUI2RTlCMEM4NDRDMkQwRDEiIHhtcE1NOkRvY3Vt
  60 ZW50SUQ9InhtcC5kaWQ6RTRFRTFCRTI4MUJCMTFFOUI2RTlCMEM4NDRDMkQwRDEiPiA8eG1wTU06
  61 RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFNEVFMUJERjgxQkIxMUU5QjZF
  62 OUIwQzg0NEMyRDBEMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFNEVFMUJFMDgxQkIxMUU5
  63 QjZFOUIwQzg0NEMyRDBEMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1w
  64 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" transform="matrix(1 0 0 1 70 0)">
 100 </image>
 101 </svg>
 102
 103                 </span>
 104             </div>
 105             <!-- Couchbase -->
 106             <div class="p-0" *ngIf="db.name == 'Couchbase'">
 107                 <span data-toggle="tooltip" title="Couchbase">
 108                   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 109                     x="0px" y="0px" width="100" height="100" viewBox="-408 285.3 25 25"
 110                     style="enable-background:new -408 285.3 25 25;" xml:space="preserve">
 111                     <path style="fill: #313032"
 112                       d="M-395.5,285.3c-6.9,0-12.5,5.6-12.5,12.5s5.6,12.5,12.5,12.5s12.5-5.6,12.5-12.5S-388.6,285.3-395.5,285.3z
 113                                             M-387.1,300c0,0.8-0.4,1.4-1.3,1.6c-1.5,0.3-4.6,0.4-7.2,0.4s-5.7-0.2-7.2-0.4c-0.8-0.2-1.3-0.8-1.3-1.6v-4.9
 114                                           c0-0.8,0.6-1.5,1.3-1.6c0.4-0.1,1.5-0.2,2.2-0.2c0.3,0,0.5,0.2,0.5,0.6v3.4l4.4-0.1l4.4,0.1v-3.4c0-0.4,0.2-0.6,0.5-0.6
 115                                           c0.8,0,1.8,0.1,2.2,0.2c0.7,0.1,1.3,0.8,1.3,1.6C-387.1,296.7-387.1,298.3-387.1,300L-387.1,300z" />
 116                   </svg>
 117                 </span>
 118             </div>
 119             <!-- Druid -->
 120             <div class="p-0" *ngIf="db.name == 'Druid'">
 121                 <span class="pr-1" data-toggle="tooltip" title="Druid">
 122                   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 123                     x="0px" y="0px" width="100" height="100" viewBox="-403 285.3 34 25"
 124                     style="enable-background:new -403 285.3 34 25;" xml:space="preserve">
 125                     <g>
 126                       <path style="fill: #313032"
 127                         d="M-385.5,285.3c2.2,0,4.3,0,6.5,0c4.2,0,8,2.7,9.4,6.6c0.6,1.7,0.8,3.4,0.6,5.2c-0.3,2.6-1,5-2.5,7.2
 128                                        c-2.3,3.4-5.5,5.2-9.5,5.8c-1.4,0.2-2.7,0.2-4.1,0.2c-0.6,0-0.9-0.3-0.9-0.7c0-0.5,0.3-0.9,0.8-0.9c0.6,0,1.2,0,1.9,0
 129                                        c3.7-0.1,7-1.4,9.6-4.2c1.8-1.9,2.7-4.3,3-6.9c0.2-1.8,0.2-3.6-0.5-5.3c-1.1-2.6-3.1-4.2-5.8-5c-1.1-0.3-2.1-0.3-3.2-0.4
 130                                        c-4,0-8.1,0-12.1,0c-0.2,0-0.3,0-0.5,0c-0.4,0-0.7-0.4-0.7-0.8s0.3-0.7,0.6-0.8c0.2,0,0.4,0,0.6,0L-385.5,285.3L-385.5,285.3z" />
 131                       <path style="fill: #313032" d="M-389.7,304.6h-7.2c-0.2,0-0.3,0-0.5,0c-0.4-0.1-0.7-0.3-0.7-0.7c0-0.4,0.2-0.7,0.6-0.9
 132                                        c0.2-0.1,0.5-0.1,0.8-0.1c4.7,0,9.5,0,14.2,0c1.7,0,3.1-0.6,4.2-1.8c1-1,1.5-2.3,1.6-3.7c0.1-1.1,0-2.1-0.7-3.1
 133                                        c-0.8-1-1.8-1.5-3.1-1.5c-4.5,0-9,0-13.5,0c-0.5,0-1,0-1.4-0.1c-0.4,0-0.6-0.3-0.7-0.7c0-0.5,0.2-0.8,0.6-0.9c0.1,0,0.3,0,0.4,0
 134                                        h14.4c2.4,0,4.5,1.5,5.3,3.8c0.5,1.6,0.4,3.3-0.3,4.8c-1.2,3-3.9,4.9-7.2,4.9C-385,304.6-387.3,304.6-389.7,304.6L-389.7,304.6z
 135                                         M-400.4,292.6c-0.6,0-1.1,0-1.7,0c-0.5,0-0.8-0.3-0.9-0.7s0.2-0.8,0.7-0.9c0.3,0,0.5-0.1,0.8-0.1c0.8,0,1.5,0,2.3,0
 136                                        c0.2,0,0.5,0,0.7,0.1c0.4,0.1,0.6,0.5,0.6,0.9s-0.3,0.7-0.7,0.7C-399.2,292.7-399.8,292.6-400.4,292.6L-400.4,292.6z M-390.3,310.3
 137                                        c-0.5,0-1,0-1.6,0c-0.5,0-0.8-0.3-0.9-0.7c0-0.5,0.3-0.9,0.7-0.9c1.1-0.1,2.2-0.1,3.4,0c0.4,0,0.8,0.4,0.7,0.8l0,0
 138                                        c0,0.5-0.4,0.7-0.9,0.8L-390.3,310.3L-390.3,310.3z" />
 139                     </g>
 140                   </svg>
 141                 </span>
 142             </div>
 143
 144             <!-- Elasticsearch -->
 145             <div class="p-0" *ngIf="db.name == 'Elasticsearch'">
 146                 <span class="pr-1" data-toggle="tooltip" title="Elasticsearch">
 147                   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 148                     x="0px" y="0px" width="100" height="100" viewBox="2066.4 284.8 25.1 25"
 149                     style="enable-background:new 2066.4 284.8 25.1 25;" xml:space="preserve">
 150                     <g>
 151                       <path style="fill: #FFFFFF" d="M2091.6,297.9c0-2.1-1.3-3.9-3.3-4.7c0.1-0.4,0.1-0.9,0.1-1.4c0-3.9-3.2-7.1-7.1-7.1c-2.3,0-4.4,1.1-5.7,3
 152                                    c-0.7-0.5-1.5-0.8-2.3-0.8c-2.1,0-3.8,1.7-3.8,3.8c0,0.5,0.1,0.9,0.2,1.3c-2,0.7-3.3,2.6-3.3,4.7c0,2.1,1.3,4,3.3,4.7
 153                                    c-0.1,0.4-0.1,0.9-0.1,1.4c0,3.9,3.2,7.1,7.1,7.1c2.3,0,4.4-1.1,5.7-3c0.7,0.5,1.5,0.8,2.3,0.8c2.1,0,3.8-1.7,3.8-3.8
 154                                    c0-0.5-0.1-0.9-0.2-1.3C2090.2,301.8,2091.6,300,2091.6,297.9L2091.6,297.9z" />
 155                       <path style="fill: #313032" d="M2076.3,295.5l5.6,2.6l5.7-5c0.1-0.4,0.1-0.8,0.1-1.3c0-3.5-2.8-6.3-6.3-6.3c-2.1,0-4,1-5.2,2.7l-0.9,4.9
 156                                    L2076.3,295.5L2076.3,295.5z" />
 157                       <path style="fill: #313032" d="M2070.5,301.4c-0.1,0.4-0.1,0.8-0.1,1.3c0,3.5,2.8,6.3,6.3,6.3c2.1,0,4.1-1,5.2-2.8l0.9-4.9l-1.3-2.4l-5.6-2.6
 158                                    L2070.5,301.4L2070.5,301.4z" />
 159                       <path style="fill: #313032" d="M2070.4,291.7l3.8,0.9l0.9-4.4c-0.5-0.4-1.2-0.6-1.8-0.6c-1.7,0-3,1.4-3,3
 160                                    C2070.2,291.1,2070.3,291.4,2070.4,291.7L2070.4,291.7z" />
 161                       <path style="fill: #313032"
 162                         d="M2070.1,292.7c-1.7,0.6-2.9,2.2-2.9,4c0,1.8,1.1,3.3,2.7,4l5.4-4.9l-1-2.1L2070.1,292.7L2070.1,292.7z" />
 163                       <path style="fill: #313032" d="M2082.9,306.3c0.5,0.4,1.2,0.6,1.8,0.6c1.7,0,3-1.4,3-3c0-0.4-0.1-0.7-0.2-1l-3.8-0.9L2082.9,306.3
 164                                    L2082.9,306.3z" />
 165                       <path style="fill: #313032"
 166                         d="M2083.7,300.9l4.2,1c1.7-0.6,2.9-2.2,2.9-4c0-1.8-1.1-3.3-2.7-4l-5.5,4.8L2083.7,300.9L2083.7,300.9z" />
 167                     </g>
 168                   </svg>
 169                 </span>
 170             </div>
 171
 172             <!-- MongoDB -->
 173             <div class="p-0" *ngIf="db.name == 'MongoDB'">
 174                 <span class="pr-1" data-toggle="tooltip" title="MongoDB">
 175                   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 176                     x="0px" y="0px" width="100" height="100" viewBox="-397.2 285.8 11.2 25"
 177                     style="enable-background:new -397.2 285.8 11.2 25;" xml:space="preserve">
 178                     <g transform="matrix(1.2754196 0 0 1.2754196 -16.030009 -21.83192)">
 179                       <path style="fill: #313032"
 180                         d="M-294.5,241.2c0.2,0.3,0.4,0.7,0.5,1c0.1,0.2,0.2,0.4,0.4,0.5c0.4,0.4,0.9,0.9,1.2,1.4
 181                                      c0.9,1.2,1.5,2.5,1.9,3.9c0.3,0.9,0.4,1.7,0.4,2.6c0,2.7-0.9,4.9-2.7,6.8c-0.3,0.3-0.6,0.6-1,0.8c-0.2,0-0.3-0.2-0.4-0.3
 182                                      c-0.2-0.2-0.2-0.5-0.3-0.8c-0.1-0.3-0.1-0.6-0.1-1c0,0,0-0.1,0-0.2C-294.4,256.1-294.6,241.3-294.5,241.2z" />
 183                       <path style="fill: #313032"
 184                         d="M-294.5,241.2C-294.5,241.2-294.5,241.2-294.5,241.2c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1,0.2-0.3,0.3-0.5,0.5
 185                                      c-0.9,0.8-1.7,1.8-2.3,2.9c-0.8,1.5-1.2,3.1-1.3,4.8c0,0.6,0.2,2.8,0.4,3.4c0.5,1.6,1.4,3,2.7,4.2c0.3,0.3,0.6,0.5,0.9,0.8
 186                                      c0.1,0,0.1-0.1,0.1-0.2c0-0.2,0.1-0.3,0.1-0.4c0.1-0.5,0.2-1.1,0.2-1.6C-294.4,256.2-294.4,241.3-294.5,241.2L-294.5,241.2z" />
 187                       <path style="fill: #313032" d="M-294,258.9c0-0.2,0.2-0.4,0.3-0.7c-0.1,0-0.2-0.2-0.3-0.3c-0.1-0.1-0.1-0.2-0.2-0.4c-0.2-0.4-0.2-0.9-0.2-1.4
 188                                      c0,0,0-0.1,0-0.2s0-0.1,0-0.2c0,0-0.1,0.4-0.1,0.5c0,0.5-0.1,1-0.2,1.4c0,0.2,0,0.4-0.2,0.5c0,0,0,0,0,0.1c0.2,0.5,0.2,1.1,0.3,1.7
 189                                      v0.2c0,0.3,0,0.2,0.2,0.3c0.1,0,0.2,0,0.3,0.1c0.1,0,0.1,0,0.1-0.1c0-0.1,0-0.2,0-0.4c0-0.3,0-0.7,0-1
 190                                      C-294,259.3-294,259.1-294,258.9z" />
 191                     </g>
 192                   </svg>
 193                 </span>
 194             </div>
 195           </div>
 196
 197           <div class="mt-auto">
 198             <i class="fa fa-check-circle" aria-hidden="true"
 199                [ngClass]="{'truecheck':db.enabled == true,'falsecheck':db.enabled == false}"></i>
 200             {{ db.host }}
 201           </div>
 202         </div>
 203
 204       </div>
 205     </div>
 206   </div>
 207
 208   <!-- Add -->
 209   <div class="col-sm-2 db-block">
 210     <div class="db-panel">
 211       <div class="d-flex flex-column align-content-center">
 212         <div class="ml-auto dropdown db-dropdown mr-2" style="visibility: hidden;" data-boundary="window">
 213           <a class="badge badge-light db-dropdown" data-toggle="dropdown">
 214             <i class="fas fa-ellipsis-h fa-2x db-config-icon"></i>
 215           </a>
 216           <div class="dropdown-menu">
 217             <button class="dropdown-item" type="button">
 218               <i class="fas fa-times db-config-icon"></i> Delete
 219             </button>
 220           </div>
 221         </div>
 222
 223         <div>
 224           <button type="button" class="btn" (click)="this.openCreateModal()">
 225             <div class="align-self-center" style="height: 130px;">
 226               <div style="width:100px; height:100px;">
 227                 <i class="fas fa-plus fa-3x pt-4 dl-icon-enable"></i>
 228               </div>
 229             </div>
 230
 231             <div class="mt-auto" style="visibility: hidden;">
 232               add
 233             </div>
 234           </button>
 235         </div>
 236
 237       </div>
 238     </div>
 239   </div>
 240
 241 </div>
 242