[dcaegen2/services.git] /

<!--
    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
-->
<div class="row">
  <div class="col-md-12 path">
    {{"HOME" | translate}} > {{"ConfigDashboard" | translate}} > {{"SIDEBAR.DASHBOARDLIST" | translate}}
  </div>
</div>

<div class="d-flex flex-wrap">

  <!-- Database list -->
  <div *ngFor="let db of this.dbs;let thisIndex=index" class="col-sm-3 db-block">
    <div class="db-panel" style="height: 100%;cursor: pointer" (click)="this.openDashboardModal(thisIndex)">
      <div class="d-flex flex-column align-content-center" style="margin-top: 1.5rem;">
        <div class="ml-auto dropdown db-dropdown mr-2" data-boundary="window">
          <!--<a class="badge badge-light db-dropdown" data-toggle="dropdown" style="cursor: pointer">-->
          <!--<i class="fas fa-ellipsis-h fa-2x db-config-icon"></i>-->
          <!--</a>-->
          <!--<div class="dropdown-menu action-btn">-->
          <!--<button class="dropdown-item" type="button" (click)="this.openDashboardModal(thisIndex)">-->
          <!--{{ 'EDIT' | translate }}-->
          <!--</button>-->
          <!--<button class="dropdown-item" type="button" (click)="this.deleteDashboard(thisIndex)">-->
          <!--{{ 'DELETE' | translate }}-->
          <!--</button>-->
          <!--</div>-->
        </div>

        <div>
          <div class="align-self-center" style="height: 130px;">
            <!-- Kibana -->
            <div class="p-0" *ngIf="db.name == 'Kibana'">
              <span data-toggle="tooltip" title="Kibana">
                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100" height="100"
                  viewBox="1722.5 -151.5 708.9 904.3" style="enable-background:new 1722.5 -151.5 708.9 904.3;"
                  xml:space="preserve">
                  <style type="text/css">
                    .st0 {
                      fill: #313032;
                    }

                    .st1 {
                      fill: #232324;
                    }

                    .st2 {
                      fill: #0D0D0F;
                    }

                  </style>
                  <path class="st0"
                    d="M1760.3,189.5c114.1,0,221.9,29.7,315.6,79.7l334.4-401.6h-662.5v796.9v-475H1760.3L1760.3,189.5z" />
                  <path class="st0" d="M2075.9,269.2l-328.1,395.3V727h660.9C2371.2,530.1,2246.2,362.9,2075.9,269.2z" />
                  <path class="st1" d="M2075.9,269.2l-328.1,395.3V727h117.2l318.7-384.4c0,0-21.9-17.2-51.6-39.1
        C2110.2,287.9,2075.9,269.2,2075.9,269.2z" />
                  <path class="st2"
                    d="M1760.3,189.5h-12.5v475l328.1-395.3C1982.1,219.2,1874.3,189.5,1760.3,189.5L1760.3,189.5z" />
                </svg>

              </span>
            </div>
            <!-- Couchbase -->
            <div class="p-0" *ngIf="db.name == 'Couchbase'">
              <span data-toggle="tooltip" title="Couchbase">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                  y="0px" width="100" height="100" viewBox="-408 285.3 25 25"
                  style="enable-background:new -408 285.3 25 25;" xml:space="preserve">
                  <path style="fill: #313032"
                    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
                                            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
                                          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
                                          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" />
                </svg>
              </span>
            </div>
            <!-- Druid -->
            <div class="p-0" *ngIf="db.name == 'Druid'">
              <span class="pr-1" data-toggle="tooltip" title="Druid">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                  y="0px" width="100" height="100" viewBox="-403 285.3 34 25"
                  style="enable-background:new -403 285.3 34 25;" xml:space="preserve">
                  <g>
                    <path style="fill: #313032"
                      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
                                       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
                                       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
                                       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" />
                    <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
                                       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
                                       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
                                       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
                                        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
                                       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
                                       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
                                       c0,0.5-0.4,0.7-0.9,0.8L-390.3,310.3L-390.3,310.3z" />
                  </g>
                </svg>
              </span>
            </div>

            <!-- Elasticsearch -->
            <div class="p-0" *ngIf="db.name == 'Elasticsearch'">
              <span class="pr-1" data-toggle="tooltip" title="Elasticsearch">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                  y="0px" width="100" height="100" viewBox="2066.4 284.8 25.1 25"
                  style="enable-background:new 2066.4 284.8 25.1 25;" xml:space="preserve">
                  <g>
                    <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
                                   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
                                   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
                                   c0-0.5-0.1-0.9-0.2-1.3C2090.2,301.8,2091.6,300,2091.6,297.9L2091.6,297.9z" />
                    <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
                                   L2076.3,295.5L2076.3,295.5z" />
                    <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
                                   L2070.5,301.4L2070.5,301.4z" />
                    <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
                                   C2070.2,291.1,2070.3,291.4,2070.4,291.7L2070.4,291.7z" />
                    <path style="fill: #313032"
                      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" />
                    <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
                                   L2082.9,306.3z" />
                    <path style="fill: #313032"
                      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" />
                  </g>
                </svg>
              </span>
            </div>

            <!-- MongoDB -->
            <div class="p-0" *ngIf="db.name == 'MongoDB'">
              <span class="pr-1" data-toggle="tooltip" title="MongoDB">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                  y="0px" width="100" height="100" viewBox="-397.2 285.8 11.2 25"
                  style="enable-background:new -397.2 285.8 11.2 25;" xml:space="preserve">
                  <g transform="matrix(1.2754196 0 0 1.2754196 -16.030009 -21.83192)">
                    <path style="fill: #313032"
                      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
                                     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
                                     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" />
                    <path style="fill: #313032"
                      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
                                     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
                                     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" />
                    <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
                                     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
                                     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
                                     C-294,259.3-294,259.1-294,258.9z" />
                  </g>
                </svg>
              </span>
            </div>
          </div>

          <div class="mt-auto">
            <i class="fa fa-check-circle" aria-hidden="true"
              [ngClass]="{'truecheck':db.enabled == true,'falsecheck':db.enabled == false}"></i>
            {{ db.name }}
          </div>
        </div>

      </div>
    </div>
  </div>
</div>