Fix bug of HDFS and css style

Issue-ID: DCAEGEN2-1188

Change-Id: I282579f4e6fc65c59474f71ac26b44f2fb5e975c
Signed-off-by: Ekko Chang <ekko.chang@qct.io>

6 files changed, 348 insertions, 127 deletions

diff --git a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.html b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.html
index d35d2e15..3293aa84 100644
--- a/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.html
+++ b/components/datalake-handler/admin/src/src/app/dashboard-setting/dashboard-list/dashboard-list.component.html
@@ -22,24 +22,20 @@
 <div class="d-flex flex-wrap">
 
   <!-- Database list -->
-  <div *ngFor="let db of this.dbs;let thisIndex=index" class="col-sm-2 db-block">
-    <div class="db-panel"
-         style="height: 100%;cursor: pointer"
-         (click)="this.openDashboardModal(thisIndex)"
-          [ngClass]="{'deleteDisplay':db.enabled== false}"
-    >
+  <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>-->
+          <!--<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>-->
+          <!--<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>
 
@@ -47,92 +43,63 @@
           <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="kibana_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="45%" height="20%" viewBox="0 0 612 750" enable-background="new 0 0 612 792" xml:space="preserve">
-<image overflow="visible" width="85%" height="100%" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAACECAIAAADtMcm8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
-bWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
-bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
-eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0
-NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
-dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw
-dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv
-IiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS
-ZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD
-cmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNl
-SUQ9InhtcC5paWQ6RTRFRTFCRTE4MUJCMTFFOUI2RTlCMEM4NDRDMkQwRDEiIHhtcE1NOkRvY3Vt
-ZW50SUQ9InhtcC5kaWQ6RTRFRTFCRTI4MUJCMTFFOUI2RTlCMEM4NDRDMkQwRDEiPiA8eG1wTU06
-RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFNEVFMUJERjgxQkIxMUU5QjZF
-OUIwQzg0NEMyRDBEMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFNEVFMUJFMDgxQkIxMUU5
-QjZFOUIwQzg0NEMyRDBEMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1w
-bWV0YT4gPD94cGFja2V0IGVuZD0iciI/Plz7FhIAAAe9SURBVHja7JxfTFNXHMfL7f8W0KpjMhRQ
-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" transform="matrix(1 0 0 1 70 0)">
-</image>
-</svg>
+              <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;
+                    }
 
-                </span>
+                    .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
+              <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>
+                </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
+              <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
+                    <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
@@ -140,67 +107,67 @@ M33x3Llz5s+fLxFeCIL4T4ABAKZ9PUaesuDFAAAAAElFTkSuQmCC" transform="matrix(1 0 0 1
                                        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>
+                  </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
+              <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
+                    <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
+                    <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
+                    <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
+                    <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>
+                    <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
+              <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
+                    <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
+                    <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>
+                  </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>
+              [ngClass]="{'truecheck':db.enabled == true,'falsecheck':db.enabled == false}"></i>
             {{ db.name }}
           </div>
         </div>
@@ -209,4 +176,3 @@ M33x3Llz5s+fLxFeCIL4T4ABAKZ9PUaesuDFAAAAAElFTkSuQmCC" transform="matrix(1 0 0 1
     </div>
   </div>
 </div>
-
diff --git a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.css b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.css
new file mode 100644
index 00000000..d6d32ca4
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.css
@@ -0,0 +1,19 @@
+/*
+* ============LICENSE_START=======================================================
+* ONAP : DataLake
+* ================================================================================
+* Copyright 2019 QCT
+*=================================================================================
+* 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.
+* ============LICENSE_END=========================================================
+*/
diff --git a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.html b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.html
new file mode 100644
index 00000000..830ed8f2
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.html
@@ -0,0 +1,122 @@
+<!--
+============LICENSE_START=======================================================
+ONAP : DataLake
+================================================================================
+Copyright 2019 QCT
+=================================================================================
+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.
+============LICENSE_END=========================================================
+-->
+
+<div class="p-1">
+  <div class="modal-header pb-0 border-0">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12">
+          <label class="dl-h3">Hadoop | HDFS</label>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-md-12">
+          <hr>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-body border-0 ml-4 mr-4">
+    <div class="container">
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-3"><label class="dl-emphasis1" for="inputHost">{{ "HOST" | translate}}</label></div>
+          <div class="col-md-4">
+            <input [(ngModel)]="this.tempDb.host" class="form-control dl-input-text" id="inputHost" type="text"
+              placeholder="">
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-3"><label class="dl-emphasis1" for="inputPort">{{ "PORT" | translate}}</label></div>
+          <div class="col-md-2">
+            <input [(ngModel)]="this.tempDb.port" class="form-control dl-input-text" id="inputPort" type="text"
+              placeholder="" (input)="this.adminService.onKeyPressNumber($event)">
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-3"><label class="dl-emphasis1"
+              for="inputUserName">{{ "AUTHENTICATION" | translate}}</label></div>
+          <div class="col-sm-4">
+            <input [(ngModel)]="this.tempDb.login" class="form-control dl-input-text" id="inputUserName" type="text"
+              placeholder="Username">
+          </div>
+          <div class="col-sm-4">
+            <input [(ngModel)]="this.tempDb.pass" class="form-control dl-input-text" id="inputPass" type="password"
+              placeholder="Password">
+          </div>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <div class="row">
+          <div class="col-md-3"><label class="dl-emphasis1" for="inputSsl">{{ "ENABLE_SSL" | translate}}</label></div>
+          <div class="col-md-3">
+            <div class="input-group">
+              <div class="input-group-prepend">
+                <label class="input-group-text dl-input-chk-label">
+                  <input id="chkSsl" [(ngModel)]="this.tempDb.encrypt" type="checkbox" />
+                  <span class="dl-input-checkmark"></span>
+                </label>
+              </div>
+              <label class="form-control dl-input-chk" for="chkSsl">
+                Enable
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+
+  <div class="modal-footer border-0 pt-0 pb-2">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-6 p-0">
+
+        </div>
+        <div class="col-md-3 p-1">
+          <span>
+            <button type="button" class="btn dl-btn-dark btn-block" (click)="this.passBack()">
+              Save
+            </button>
+          </span>
+        </div>
+        <div class="col-md-3 p-1">
+          <span>
+            <button type="button" class="btn dl-btn-light btn-block" (click)="activeModal.close('Close click')">
+              Cancel
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.spec.ts b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.spec.ts
new file mode 100644
index 00000000..dafbdadc
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.spec.ts
@@ -0,0 +1,44 @@
+/*
+ * ============LICENSE_START=======================================================
+ * ONAP : DataLake
+ * ================================================================================
+ * Copyright 2019 QCT
+ *=================================================================================
+ * 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.
+ * ============LICENSE_END=========================================================
+ */
+
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { HdfsComponent } from "./H./hdfs.component
+
+describe("HdfsComponent", () => {
+  let component: HdfsComponent;
+  let fixture: ComponentFixture<HdfsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [HdfsComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HdfsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.ts b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.ts
new file mode 100644
index 00000000..0ada4117
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/database/database-list/dbs-modal/hdfs/hdfs.component.ts
@@ -0,0 +1,67 @@
+/*
+ * ============LICENSE_START=======================================================
+ * ONAP : DataLake
+ * ================================================================================
+ * Copyright 2019 QCT
+ *=================================================================================
+ * 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.
+ * ============LICENSE_END=========================================================
+ */
+
+/**
+ *
+ * @author Ekko Chang
+ *
+ */
+
+import { Component, Input, Output, EventEmitter } from "@angular/core";
+import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
+import { Db } from "src/app/core/models/db.model";
+import { AdminService } from "src/app/core/services/admin.service";
+
+@Component({
+  selector: "app-hdfs",
+  templateUrl: "./hdfs.component.html",
+  styleUrls: ["./hdfs.component.css"]
+})
+export class HdfsComponent {
+  @Output() passEntry: EventEmitter<any> = new EventEmitter();
+  @Input() db: Db;
+  tempDb: Db;
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    public adminService: AdminService
+  ) {}
+
+  ngOnInit() {
+    // cache for display
+    this.tempDb = new Db();
+    const feed = {
+      name: "HDFS",
+      enabled: true, // TODO: enable
+      host: this.db.host,
+      port: this.db.port,
+      database: this.db.database,
+      encrypt: this.db.encrypt,
+      login: this.db.login,
+      pass: this.db.pass
+    };
+    this.tempDb = feed;
+  }
+
+  passBack() {
+    this.db = this.tempDb;
+    this.passEntry.emit(this.db);
+  }
+}
diff --git a/components/datalake-handler/admin/src/src/styles.css b/components/datalake-handler/admin/src/src/styles.css
index ef3295b3..94a04d93 100644
--- a/components/datalake-handler/admin/src/src/styles.css
+++ b/components/datalake-handler/admin/src/src/styles.css
@@ -65,7 +65,7 @@ body {
   font-family: "Open Sans", sans-serif;
   font-weight: 400;
   font-size: 14px;
-  letter-spacing: 1px;
+  letter-spacing: 0.6px;
   color: #ffffff;
   text-align: left;
 }
@@ -589,12 +589,15 @@ input#switch:checked+.dl-slider:before {
   border-radius: 6px;
   padding: 4px 4px 4px 10px;
 }
-.p-1.alert-delete-model{
+
+.p-1.alert-delete-model {
   padding: 0.25rem 0.5rem;
 }
-.p-1 .alert-delete-title{
-  padding: 1.25rem 1.5rem!important;
+
+.p-1 .alert-delete-title {
+  padding: 1.25rem 1.5rem !important;
 }
-.p-1 .alert-delete-content{
-  padding: 1.25rem 4.5rem!important;
+
+.p-1 .alert-delete-content {
+  padding: 1.25rem 4.5rem !important;
 }