Add function to framework of frond-end

1. Add spinner animation when loading.
2. Add REST API of feeder control.
3. Re-layout the design of frame.
4. Fix bug of topic config does not update when save.

Issue-ID: DCAEGEN2-1188

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

18 files changed, 498 insertions, 128 deletions

diff --git a/components/datalake-handler/admin/src/package-lock.json b/components/datalake-handler/admin/src/package-lock.json
index c8dabdf8..72052d39 100644
--- a/components/datalake-handler/admin/src/package-lock.json
+++ b/components/datalake-handler/admin/src/package-lock.json
@@ -6398,6 +6398,14 @@
       "integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA==",
       "dev": true
     },
+    "ngx-spinner": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/ngx-spinner/-/ngx-spinner-7.1.4.tgz",
+      "integrity": "sha512-J8+ObulyapAjJfW2bEfFnlmSnp1NA80vtuplZjTa/wQa1Z6tBptmV2g0OLVCJhu/5wjmxV+gbMfN/t2FDup0Bw==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
diff --git a/components/datalake-handler/admin/src/package.json b/components/datalake-handler/admin/src/package.json
index f18022d5..01b5d534 100644
--- a/components/datalake-handler/admin/src/package.json
+++ b/components/datalake-handler/admin/src/package.json
@@ -26,6 +26,7 @@
     "bootstrap": "^4.3.1",
     "core-js": "^2.5.4",
     "jquery": "^3.4.1",
+    "ngx-spinner": "^7.1.4",
     "popper.js": "^1.15.0",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",
diff --git a/components/datalake-handler/admin/src/src/app/about/about.component.css b/components/datalake-handler/admin/src/src/app/about/about.component.css
index 0721a51b..c8173515 100644
--- a/components/datalake-handler/admin/src/src/app/about/about.component.css
+++ b/components/datalake-handler/admin/src/src/app/about/about.component.css
@@ -18,14 +18,11 @@
  * ============LICENSE_END=========================================================
  */
 
-.about-block {
-  height: 80vh;
-}
-
 .about-panel {
   background: #FFFFFF;
   box-shadow: 3px 3px 11px 0 #D2D3D5;
   border-radius: 20px;
+  padding: 30px 30px;
 }
 
 .about-title {
@@ -41,7 +38,7 @@
 
 .about-info {
   font-family: "Open Sans", sans-serif;
-  font-weight: 600;
+  font-weight: 400;
   font-size: 14px;
   color: #A8A9AC;
 }
diff --git a/components/datalake-handler/admin/src/src/app/about/about.component.html b/components/datalake-handler/admin/src/src/app/about/about.component.html
index ca3512f4..accab817 100644
--- a/components/datalake-handler/admin/src/src/app/about/about.component.html
+++ b/components/datalake-handler/admin/src/src/app/about/about.component.html
@@ -17,51 +17,173 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END=========================================================
 -->
+<div class="row">
+  <div class="col-md-12 path">
+    Home > About
+  </div>
+</div>
 
-<div class="about-block d-flex justify-content-center align-items-center">
-  <div class="d-flex justify-content-center align-items-center col-md-6 h-50 about-panel">
+<div class="container p-5">
 
-    <div class="d-flex justify-content-center align-items-left flex-column m-2">
-      <div class="dl-h2 about-title">
+  <div class="d-flex align-items-center flex-column">
+    <div class="about-panel">
+      <div class="dl-h3 about-title align-self-center ">
         ONAP DataLake Admin Platform
       </div>
-
-      <div class="about-info">
-        <div class="row">
-          <div class="col-sm-4">
-            <label class="about-bold">Version:&nbsp;&nbsp; </label>1.0.0
-          </div>
-          <div class="col-sm-8">
-            <label class="about-bold">Code freeze:&nbsp;&nbsp; </label>Jun 1, 2019
-          </div>
-        </div>
+      <div class="align-self-center">
+        <label class="about-bold">Version:&nbsp;&nbsp; </label>{{ this.feeder.version }}
+      </div>
+      <div class="align-self-center">
+        <label class="about-bold">Resources</label>
       </div>
+      <div class="d-flex justify-content-center">
+        <div class="pl-1 pr-1 align-self-center">
+          <!-- CMCC logo svg  -->
+          <svg width="200px" version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="638.8 -38.4 2300 673.5"
+            style="enable-background:new 638.8 -38.4 2300 673.5;" xml:space="preserve">
+            <style type="text/css">
+              .st0 {
+                fill: #FFFFFF;
+              }
+
+              .st1 {
+                fill: #2767B0;
+              }
+
+            </style>
+            <rect x="638.8" y="-38.4" class="st0" width="2300" height="673.5" />
+            <path class="st1" d="M750.2,247.9l30.9,25.3l128-108.8c12.4-8.9,27.4-13.6,42.7-13.6c16.7,0,31.5,5.6,43.9,14.9l162,132.3v30.3
+	l-143.4-116.8c-10.5-7.4-23.5-12.4-37.7-12.4c-14-0.1-27.6,4.7-38.3,13.6l-1.9,1.2l-0.6,0.6c-14.2,11.8-79.7,66.8-113.1,94.6h0.6
+	c6.8,11.1,24.1,12.4,39.6,3.7c0.6-0.6,1.2-0.6,1.2-0.6c35.9-30.3,68.6-58.7,72.3-61.8c10.1-8.9,23-13.7,36.5-13.6
+	c12.4,0,24.1,4.3,33.4,11.7l151.5,123.7l-3.7,0.6l3.7,3.7c0,0-136.6,116.2-170.6,145.3c-17.3,17.9-41.4,28.4-68,28.4
+	c-24,0.1-47.1-8.7-64.9-24.7L684.2,387v-43.3l169.4,138.5c11.7,8.4,25.8,12.9,40.2,13c16.7,0,31.5-5.6,43.3-15.4
+	c6.8-5.6,109.4-92.7,155.2-131.7l-30.3-24.7L932.8,432.2c-12.4,8.9-27.4,13.7-42.7,13.6c-15.9,0-31.3-5.2-43.9-14.8l-162-131.7V269
+	l143.4,116.2c10.5,8,23.5,12.4,37.7,12.4c14.8,0,27.8-5,38.9-13l1.2-1.2l0.6-0.6c14.2-11.8,79.8-66.8,113.1-95.2h-0.6l-0.6-0.6
+	l-8-6.8c-8-3.1-20.4-2.5-30.9,3.7c-0.6,0.6-1.2,0.6-1.2,0.6c-24,20.7-48.1,41.3-72.3,61.8c-9.9,8.7-22.3,14.2-36.5,14.2
+	c-12.4,0-24.1-4.9-33.4-12.4l-102.8-84.8l-0.6,0.6l-30.3-24.7l-8-8.7l-9.9-8l1.2-0.6l-1.2-1.2L854.6,74.8
+	c17.3-17.3,41.4-28.4,68-28.4c25.4,0,47.6,9.3,64.9,24.7l170,139.1v42.7L988.1,115c-11.7-8.4-25.8-12.9-40.2-13
+	c-15.7-0.1-31,5.1-43.3,14.8C897.9,122.4,795.9,208.9,750.2,247.9z M1357.8,207.7v14.2h70.5v-84.7h-70.5V207.7z M1336.2,125.5v-9.3
+	h92.1V80.3c0,0-11.1-19.2-1.9-17.3c16.1,3.1,19.2,2.5,26,4.9c6.8,0.6-2.5,12.4-2.5,12.4v35.9h92.7v125.5h-92.7l1.2,80.4h-23.5
+	l0.6-80.4h-92.1V125.5H1336.2z M1582.2,125.5v-47h214.6v230h-214.5L1582.2,125.5L1582.2,125.5z M1776.5,125.5V98.9H1604v187.9h172.5
+	V125.5z M1620.7,124.8h136.6V144h-59.4v30.3h52.6v19.8h-52.6v48.2h64.3v19.2h-145.3v-19.2h60.6v-48.2h-48.8v-19.8h48.8V144h-56.9
+	L1620.7,124.8L1620.7,124.8z M1883.3,125.5v-19.2c-6.2,1.9-17.3,3.1-31.5,4.9L1839.5,92c37.7-3.7,63-11.1,84.7-22.3l16.7,19.2
+	c-14.2,6.8-27.2,8.7-35.8,11.8V139h35.2v20.4H1905v15.5l3.7-3.1c4.3,4.9,20.4,20.4,31.5,35.9h-0.6l-11.7,16.7
+	c-3.7-5.6-6.8-11.8-9.9-16.7c-4.3-7.4-8.6-13.6-13-16.1v124.3h-21.6V203.4h-0.6c-0.6,1.2-1.2,3.1-1.9,4.3
+	c-6.2,12.4-15.4,26.6-28.4,41.4c-1.9,1.9-3.1,9.9-4.9,11.8l-16.1-21c10.5-10.5,19.2-21.6,26.6-32.2c9.1-12.9,17.2-26.6,24.1-40.8
+	c0.6-2.5,0-4.3,0.6-7.4h-44v-20.4h44.5V125.5L1883.3,125.5z M1948.2,125.5c14.3-16.7,26.3-35.2,35.9-55c0,0-1.2-13,9.9-8
+	c10.5,5.6,19.2,10.5,19.2,10.5c0.6,3.1-6.2,2.5-8.7,6.2c-2.5,4.3-7.4,11.8-8,12.4h72.3l4.9,6.8c-1.2,5.6-1.2,7.4-1.9,10.5
+	c-1.7,5.9-4.2,11.5-7.4,16.7c-19.8,34.6-60,57.5-115.6,74.8l-4.3-10.5l-10.5-9.3c26.6-3.7,45.1-11.1,60.6-19.8
+	c-1.2-9.3-9.3-15.4-22.3-21l14.9-12.4c9.3,5.6,18.5,13.6,24.7,24.1c10.8-7.4,20.5-16.1,29.1-26c3.7-4.3,6.8-8.7,9.3-13.6h-63
+	c-5,4.9-8.7,9.3-12.4,13.6c-5.6,7.4-10.5,14.2-17.3,22.9l-19.8-11.8C1941.5,132.9,1945.2,129.2,1948.2,125.5L1948.2,125.5z
+	 M2227.1,125.5V123h40.8l-0.6-64.3l27.2,3.7c9.3,1.2,3.7,6.2-1.9,8.7V123h58.7v2.5c-1.9,31.5-3.7,59.3-4.9,82.2
+	c-1.4,26.2-3,52.4-4.9,78.5c-1.2,11.7-12.4,21.6-25.4,21.6c-2.5,0-8.6,0-20.4-1.2c0.6-11.1-7.4-19.2-9.9-25.4c3.1,0,13,1.2,18.6,2.5
+	c11.7,0.6,13-5.6,14.8-14.8c2.5-9.9,3.7-24.7,5-49.5v-11.7c1.2-21,1.9-43.9,3.1-63.7h-37.7c0,24.1-1.2,45.1-4.9,63.7
+	c-3.7,19.8-8.7,36.5-16.1,49.5c-14.2,24.7-29.1,43.3-56.3,58.7l-26.6-17.9c17.3-4.9,35.8-16.1,44.5-26c0,0,22.3-22.9,30.3-56.2
+	c0.6-3.1,1.2-5.6,1.9-8c3.1-14.8,5.6-27.8,5.6-38.9v-24.7h-40.8L2227.1,125.5L2227.1,125.5L2227.1,125.5z M2433.5,125.5
+	c-11.1-17.3-20.4-28.4-35.2-40.8l19.8-13c12.4,14.8,24.1,26.6,35.2,43.3l-16.1,10.5l-2.5,1.9
+	C2434.2,126.7,2434.2,126.1,2433.5,125.5z M2543,125.5c-13.2-6.9-26.8-12.9-40.8-17.9l13.6-10.5c8.1,1.9,13.6,1.2,26,7.4
+	c5.6-0.6,13-8,21.6-16.1l-0.6-1.9h-89V68h116.8l6.2,14.8c-16.1,12.4-30.9,22.3-36.5,30.9l10.5,6.2l-9.9,5.6l-4.3,2.5h56.9v79.8
+	l-0.6,46.4c0,8-6.2,12.4-11.8,16.1s-11.7,7.4-22.2,6.8c2.5-2.5-1.9-9.3-8.7-19.8h11.8c8.6,0,6.8,0,8-1.2c1.2-0.6,1.9-2.5,1.9-5.6
+	V227h-40.8v42l-20.4,3.7V227h-45.1v45.6h-20.4V127.9h81.6C2546.1,127.3,2544.2,126.7,2543,125.5z M2684,125.5
+	c9.3-18.5,17.3-39.6,25.3-64.9l27.8,15.4c-1.9,6.2-4.3,1.2-11.1,10.5c0,0-11.8,26-13,36.5v84.7c0,49.5-0.6,101.4-0.6,101.4h-21
+	V158.8h-0.6c-9.3,11.7-14.9,24.7-26.6,45.1l-14.9-25.4C2663,163.8,2674,146.5,2684,125.5L2684,125.5z M2723.5,125.5v-19.2h80.3
+	c-1.2-10.5-6.2-24.1-15.4-40.8l19.8-5.6c8,13,13.6,28.4,16.1,46.4h69.2v21h-170L2723.5,125.5L2723.5,125.5z M2120.1,90.2h95.8v19.2
+	h-95.8V90.2L2120.1,90.2z M1449.9,207.7v14.2h69.9v-84.7h-69.9V207.7z M2591.9,207.7v-18.5H2551v21h40.8V207.7L2591.9,207.7z
+	 M2530.6,207.7v-18.5h-45.1v21h45.1V207.7L2530.6,207.7z M1710.2,207.7l11.8-8c5.6,3.1,9.3,5.6,13,8c8.7,5.6,14.2,10.5,19.2,18.5
+	l-16.7,9.9c-11.1-14.8-14.8-21-27.2-27.8L1710.2,207.7L1710.2,207.7L1710.2,207.7z M1982.2,207.7c13.6-11.1,26.6-24.7,33.4-37.1
+	l23.5,3.7c2.5,5.6-3.1,6.2-8.7,7.4l-11.8,16.1h66.2c-0.6,3.3-1.2,6.6-1.9,9.9c-7.4,27.2-22.9,51.9-46.4,72.3
+	c-34.6,29.1-49.4,26.6-94.6,36.5c-9.3,0.6-3.1-14.8-14.2-22.9c42-2.5,59.3-6.2,79.7-19.2c-4.9-9.9-14.2-15.5-24.7-23.5l14.9-13.6
+	c8,3.7,19.2,14.8,25.3,27.2c21.6-19.8,26.6-30.3,35.2-49.5h-55c-16.1,14.8-29.1,26-51.9,38.3l-4.9-7.4l-13.6-8
+	C1944,234.9,1964.3,222.5,1982.2,207.7L1982.2,207.7z M2135.6,207.7c3.1-13,6.8-27.2,8.7-40.2h-32.8v-20.4h110.7v20.4h-56.4
+	c-2.5,12.4-5.6,27.2-8.7,40.2c-4.9,22.3-8.7,40.2-8.7,40.2l43.9-10.5c-1.2-1.9-3.7-16.7-8-29.7c-1.2-2.5-2.5-5.6-3.7-8l18.5-6.8
+	c1.2,4.3,3.7,9.3,6.2,14.8c7.4,17.3,16.7,39.6,21,54.4l-22.9,7.4c-3.1-6.8-3.1-9.9-6.2-14.2c-36.5,9.9-39.6,8.7-60.6,16.1l-9.9,10.5
+	l-15.9-30.3c2.5-2.5,9.3-2.5,12.4-6.2c5.6-6.8,6.8-10.5,9.3-24.1C2133.8,216.9,2134.4,212.6,2135.6,207.7L2135.6,207.7z
+	 M2414.5,207.7v-38.9h-29.7V149h50.7v109.4c10.5,11.1,22.2,18.5,35.2,22.9c13,3.7,46.4,5.6,82.2,5.6c8,0,24.1-1.9,31.5-2.5l51.9-1.9
+	c-8.6,7.4-8,16.1-9.9,24.1l-113.8,1.9c-17.9,0-41.4-4.3-53.2-8c-12.4-3.7-23.5-13.6-34-25.4c-4.9,3.7-22.3,25.4-26,32.8l-19.8-17.9
+	c8.7-6.2,11.1-14.2,34.6-33.4L2414.5,207.7L2414.5,207.7L2414.5,207.7z M2741.5,185.4h137.2v21h-137.2V185.4z M2741.5,148.3h137.2
+	v21h-137.2V148.3z M2485.5,168.7h45.1v-21h-45.1V168.7z M2551,168.7h40.8v-21H2551V168.7z M1394.9,372.7
+	c-34,9.9-59.3,41.4-59.3,80.4c0,45.7,37.1,84.7,82.8,84.7c25.4,0,55.6-11.8,73.6-43.3h-29.1c-11.1,13-27.2,21.7-44.5,21.7
+	c-31.5,0-59.3-28.4-59.3-63.1c0-34,26.6-61.8,60-61.8c26.6,0,40.8,17.3,45.7,22.9h28.4c-4.3-7.4-10.5-18.6-24.7-29.1
+	c-8.7-6.2-17.9-9.9-26-12.4c-7.9-2.1-16-3.1-24.1-3.1C1410.4,369.6,1403,370.9,1394.9,372.7L1394.9,372.7z M2409.5,372.7
+	c-7.9-2-16-3.1-24.1-3.1c-8,0-16.1,1.2-23.5,3.1c-36.5,10.5-60.6,44.5-60.6,81c0,44.5,35.8,84.1,84.1,84.1
+	c48.2,0,84.7-39.6,84.7-84.1C2470,416,2445.4,382.6,2409.5,372.7L2409.5,372.7z M2740.9,225.6h138.5v74.2h-138.5V225.6z
+	 M2859.5,244.2h-98.9l0.6,33.4h98.3L2859.5,244.2L2859.5,244.2z M1503.2,372.7v162h23.5v-77.9h92.1v77.9h24.1v-162h-24.1v64.9h-92.1
+	v-64.9L1503.2,372.7L1503.2,372.7z M1666.9,534.7h24.1v-162h-24.1V534.7z M1718.3,372.7v162h25.3V409.2h0.6l99.5,125.5h22.9v-162
+	h-25.4v123h-0.6l-99.5-123L1718.3,372.7L1718.3,372.7z M1944,372.7l-73,162h27.2l21-47.6h73l21.6,47.6h27.2l-73-162L1944,372.7
+	L1944,372.7z M2108.5,372.7v162h23.5V412.3h0.6l54.4,122.4h19.8l54.4-122.4h0.6v122.4h23.5v-162h-28.4l-58.2,124.9l-61.8-124.9
+	H2108.5L2108.5,372.7z M2485,372.7v162h73c44.5,0,53.8-30.9,53.8-47c0-25.4-17.3-35.9-24.1-39.6c5.6-4.9,14.2-13,14.2-30.9
+	c0-10.5-4.3-41.4-44.5-44.5L2485,372.7L2485,372.7L2485,372.7z M2630.1,534.7h23.5v-162h-23.5V534.7z M2677.1,372.7v162h94.6v-21.6
+	h-71.1V372.7H2677.1z M2778.5,372.7v162h106.3v-21.6h-82.2v-49.5h82.2V442h-82.2v-47.6h82.2v-21.7L2778.5,372.7L2778.5,372.7z
+	 M2509,461.8h47c8,0,19.2,0,26,9.9c3.7,4.3,6.2,9.9,6.2,16.1c0,8-5.6,25.4-29.7,25.4h-49.4L2509,461.8L2509,461.8z M2509,394.4h42
+	c5,0,27.2,0,27.2,22.9c0,9.3-3.7,22.9-26,22.9h-43.3L2509,394.4L2509,394.4z M2446.5,454.4c0,25.4-19.2,61.8-61.2,61.8
+	c-41.4,0-60.6-35.9-60.6-62.4c0-26,19.2-62.4,60.6-62.4C2426.1,391.3,2446.5,425.3,2446.5,454.4L2446.5,454.4z M1929.2,465.5
+	l26.6-62.4h0.6l26.6,62.4H1929.2z" />
+          </svg>
+
 
-      <div class="about-info">
-        <div class="row">
-          <div class="col-sm-12">
-            <label class="about-bold">Resources</label>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-sm-4">
-            China Mobile
-          </div>
-          <div class="col-sm-8">
-            Guobiao Mo, Tao Shen
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-sm-4">
-            QCT
-          </div>
-          <div class="col-sm-8">
-            Karl Chiang, Kate Hsuan, Ekko Chang, May Lin
-          </div>
         </div>
+        <div class="pl-1 pr-1 align-self-center">
+          <!-- QCT logo svg  -->
+          <svg width="200px" version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1293.2 64.9 2300 673.5"
+            style="enable-background:new -1293.2 64.9 2300 673.5;" xml:space="preserve">
+            <style type="text/css">
+              .st0 {
+                fill: #FFFFFF;
+              }
+
+              .st1 {
+                fill: #0070B2;
+              }
+
+              .st2 {
+                fill: #009DE1;
+              }
+
+              .st3 {
+                fill: #8FC31F;
+              }
+
+              .st4 {
+                fill: #F6AB00;
+              }
 
+            </style>
+            <rect x="-1293.2" y="64.9" class="st0" width="2300" height="673.5" />
+            <g>
+              <path class="st1" d="M-221.6,490.4L-221.6,490.4c0-92.8,73.6-169.6,174.4-169.6s172.8,75.2,172.8,168v1.6
+		c0,35.2-11.2,67.2-28.8,92.8l16,14.4c8,6.4,12.8,16,12.8,27.2c0,19.2-14.4,33.6-33.6,33.6c-9.6,0-17.6-4.8-24-9.6l-19.2-17.6
+		c-27.2,17.6-60.8,27.2-97.6,27.2C-149.6,658.4-221.6,583.2-221.6,490.4 M-53.6,527.2c0-19.2,14.4-33.6,33.6-33.6
+		c9.6,0,16,3.2,24,9.6l35.2,32c6.4-12.8,9.6-28.8,9.6-44.8v-1.6c0-56-41.6-102.4-99.2-102.4S-148,431.2-148,487.2v1.6
+		c0,56,41.6,102.4,99.2,102.4c16,0,30.4-3.2,43.2-9.6l-33.6-27.2C-47.2,548-53.6,538.4-53.6,527.2" />
+              <path class="st1" d="M168.8,490.4L168.8,490.4c0-94.4,70.4-169.6,169.6-169.6c49.6,0,81.6,12.8,108.8,33.6c8,4.8,14.4,16,14.4,28.8
+		c0,19.2-16,35.2-35.2,35.2c-9.6,0-16-3.2-20.8-6.4c-20.8-14.4-41.6-24-67.2-24C284,388,244,434.4,244,488.8v1.6
+		c0,56,38.4,102.4,94.4,102.4c30.4,0,49.6-9.6,70.4-25.6c4.8-4.8,12.8-8,20.8-8c17.6,0,33.6,14.4,33.6,33.6
+		c0,11.2-4.8,20.8-12.8,25.6c-28.8,25.6-64,41.6-116.8,41.6C239.2,658.4,168.8,583.2,168.8,490.4" />
+              <path class="st1" d="M610.4,388H540c-19.2,0-33.6-16-33.6-33.6c0-19.2,16-33.6,33.6-33.6h211.2c19.2,0,33.6,16,33.6,33.6
+		c0,19.2-16,33.6-33.6,33.6H684v233.6c0,20.8-16,36.8-36.8,36.8s-36.8-16-36.8-36.8L610.4,388L610.4,388z" />
+              <path class="st1" d="M711.2,261.6H700c-1.6,0-3.2-1.6-3.2-3.2s1.6-3.2,3.2-3.2h28.8c1.6,0,3.2,1.6,3.2,3.2s-1.6,3.2-3.2,3.2h-11.2
+		v35.2c0,1.6-1.6,3.2-3.2,3.2s-3.2-1.6-3.2-3.2L711.2,261.6L711.2,261.6z M740,260c0-1.6,1.6-3.2,3.2-3.2h1.6c1.6,0,1.6,0,3.2,1.6
+		l16,24l16-24c0-1.6,1.6-1.6,3.2-1.6h1.6c1.6,0,3.2,1.6,3.2,3.2v38.4c0,1.6-1.6,3.2-3.2,3.2s-3.2-1.6-3.2-3.2v-28.8l-12.8,19.2
+		c0,1.6-1.6,1.6-3.2,1.6s-1.6,0-3.2-1.6l-12.8-19.2v28.8c0,1.6-1.6,3.2-3.2,3.2s-3.2-1.6-3.2-3.2V260H740z" />
+              <polygon class="st1" points="-444,410.4 -533.6,410.4 -533.6,320.8 -444,320.8 	" />
+              <path class="st1" d="M-413.6,410.4h-32v62.4c0,0,6.4,0,8,0c35.2,0,62.4,27.2,62.4,60.8c0,35.2-28.8,62.4-62.4,62.4h-280h-92.8
+		h-116.8c-48,0-88-40-88-88s40-88,88-88l0,0h36.8l-3.2-35.2c0-4.8,0-9.6,0-12.8c0-54.4,35.2-99.2,83.2-115.2l0,0
+		c3.2-1.6,6.4-1.6,9.6-3.2l0,0c3.2,0,4.8-1.6,8-1.6c1.6,0,1.6,0,3.2,0c1.6,0,4.8,0,6.4-1.6c3.2,0,6.4,0,9.6,0h1.6
+		c4.8,0,9.6,0,12.8,0c0,0,0,0,1.6,0c14.4,1.6,27.2,6.4,40,12.8l0,0c24,12.8,44.8,32,56,59.2h56l0,0h72v-56h-84.8
+		c-32-44.8-81.6-75.2-137.6-80l0,0c-4.8,0-9.6,0-12.8,0l0,0l0,0l0,0c-4.8,0-9.6,0-16,0c-1.6,0-3.2,0-3.2,0c-4.8,0-8,1.6-12.8,1.6
+		c-1.6,0-3.2,0-6.4,1.6l0,0l0,0c-80,17.6-140.8,84.8-145.6,168c-68.8,14.4-121.6,75.2-121.6,148.8c0,83.2,67.2,150.4,150.4,150.4
+		h113.6h92.8H-436c68.8,0,124.8-56,124.8-124.8C-311.2,476-354.4,421.6-413.6,410.4" />
+              <polygon class="st2" points="-356,320.8 -444,320.8 -444,232.8 -356,232.8 	" />
+              <polygon class="st3" points="-356,410.4 -266.4,410.4 -266.4,320.8 -356,320.8 	" />
+              <polygon class="st4" points="-356,232.8 -266.4,232.8 -266.4,143.2 -356,143.2 	" />
+            </g>
+          </svg>
+
+        </div>
       </div>
-    </div>
 
+    </div>
   </div>
 </div>
diff --git a/components/datalake-handler/admin/src/src/app/about/about.component.ts b/components/datalake-handler/admin/src/src/app/about/about.component.ts
index 8e0e5b36..adf65a2a 100644
--- a/components/datalake-handler/admin/src/src/app/about/about.component.ts
+++ b/components/datalake-handler/admin/src/src/app/about/about.component.ts
@@ -25,7 +25,8 @@
  */
 
 import { Component, OnInit } from "@angular/core";
-import { AdminService } from "../core/services/admin.service";
+import { AdminService } from "src/app/core/services/admin.service";
+import { RestApiService } from "src/app/core/services/rest-api.service";
 
 @Component({
   selector: "app-about",
@@ -33,9 +34,19 @@ import { AdminService } from "../core/services/admin.service";
   styleUrls: ["./about.component.css"]
 })
 export class AboutComponent implements OnInit {
-  constructor(private adminService: AdminService) {
+  feeder: any = [];
+
+  constructor(
+    private adminService: AdminService,
+    private restApiService: RestApiService
+  ) {
     this.adminService.setTitle("SIDEBAR.ABOUT");
   }
 
-  ngOnInit() {}
+  ngOnInit() {
+    // Get datalake feeder version
+    this.restApiService.getFeederstatus().subscribe(data => {
+      this.feeder = data;
+    });
+  }
 }
diff --git a/components/datalake-handler/admin/src/src/app/app.component.html b/components/datalake-handler/admin/src/src/app/app.component.html
index 884d798a..d4f2c173 100644
--- a/components/datalake-handler/admin/src/src/app/app.component.html
+++ b/components/datalake-handler/admin/src/src/app/app.component.html
@@ -19,25 +19,36 @@ limitations under the License.
 -->
 
 <div id="container">
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col-md-2 menu-header pl-1 pr-1"></div>
-      <div class="col-md-10 header pt-2">
-        <app-header></app-header>
-      </div>
-    </div>
-  </div>
 
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col-md-2 menu pl-1 pr-1">
-        <app-sidebar></app-sidebar>
+  <div class="container-fluid p-0">
+    <div class="d-flex align-items-stretch">
+
+      <div class="d-flex flex-column menu">
+        <!-- Logo -->
+        <div class="mr-auto header">
+        </div>
+        <!-- Sidebar -->
+        <div class="mr-auto">
+          <app-sidebar></app-sidebar>
+        </div>
       </div>
 
-      <div class="col-md-10 content pl-4 pr-4">
-        <hr>
-        <router-outlet></router-outlet>
+
+      <div class="w-100 d-flex flex-column">
+        <!-- Header -->
+        <div class="pl-4 pr-4 flex-fill header">
+          <app-header></app-header>
+        </div>
+        <!-- Content -->
+        <div class="pl-4 pr-4 flex-fill content">
+          <hr>
+          <router-outlet></router-outlet>
+        </div>
       </div>
+
     </div>
   </div>
-</div>
+
+  <ngx-spinner bdOpacity=0.5 bdColor="rgba(51,51,51,0.85)" size="default" color="#5dbebb" type="ball-clip-rotate"
+    [fullScreen]="true">
+  </ngx-spinner>
diff --git a/components/datalake-handler/admin/src/src/app/app.module.ts b/components/datalake-handler/admin/src/src/app/app.module.ts
index 09885544..7249e1dd 100644
--- a/components/datalake-handler/admin/src/src/app/app.module.ts
+++ b/components/datalake-handler/admin/src/src/app/app.module.ts
@@ -70,7 +70,10 @@ import { TopicDetailModalComponent } from "./topics/topic-list/topic-detail-moda
 import { TopicConfigModalComponent } from "./topics/topic-list/topic-config-modal/topic-config-modal.component";
 import { ToastrNotificationComponent } from "./core/toastr-notification/toastr-notification.component";
 import { AlertComponent } from "./core/alert/alert.component";
-import { AboutComponent } from './about/about.component';
+import { AboutComponent } from "./about/about.component";
+
+// Loading spinner
+import { NgxSpinnerModule } from "ngx-spinner";
 
 @NgModule({
   declarations: [
@@ -106,7 +109,8 @@ import { AboutComponent } from './about/about.component';
       }
     }),
     FormsModule,
-    NgxDatatableModule
+    NgxDatatableModule,
+    NgxSpinnerModule
   ],
   providers: [AdminService, RestApiService, ToastrNotificationService],
   bootstrap: [AppComponent],
diff --git a/components/datalake-handler/admin/src/src/app/core/models/feeder.model.ts b/components/datalake-handler/admin/src/src/app/core/models/feeder.model.ts
new file mode 100644
index 00000000..8da1fa67
--- /dev/null
+++ b/components/datalake-handler/admin/src/src/app/core/models/feeder.model.ts
@@ -0,0 +1,30 @@
+/*
+ * ============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
+ *
+ */
+
+export class Feeder {
+  running: boolean;
+  version: string;
+}
diff --git a/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts b/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts
index 6281c956..8e126a0d 100644
--- a/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts
+++ b/components/datalake-handler/admin/src/src/app/core/services/admin.service.ts
@@ -34,10 +34,16 @@ export class AdminService {
 
   constructor() {}
 
+  /*
+   *  Set header title
+   */
   setTitle(title: string) {
     this.title.next(title);
   }
 
+  /*
+   *  Form validate
+   */
   onKeyPressNumber(data: any) {
     return (data.target.value = data.target.value.replace(/[^0-9.]/g, ""));
   }
diff --git a/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts b/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts
index 635e42cd..b9134109 100644
--- a/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts
+++ b/components/datalake-handler/admin/src/src/app/core/services/rest-api.service.ts
@@ -34,7 +34,7 @@ import { throwError } from "rxjs";
 import { Topic } from "src/app/core/models/topic.model";
 import { Db } from "src/app/core/models/db.model";
 
-const endpoint = "/datalake/v1/";
+const prefix = "/datalake/v1/";
 const httpOptions = {
   headers: new HttpHeaders({
     "Content-Type": "application/json"
@@ -62,8 +62,8 @@ export class RestApiService {
       errorMessage = error.error.message;
     } else {
       // Get server-side error
-      errorMessage = `Error Code: ${error.status}`;
-      console.log(`Error Code: ${error.status}\nMessage: ${error.message}`);
+      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
+      console.log(errorMessage);
     }
     return throwError(errorMessage);
   }
@@ -72,7 +72,7 @@ export class RestApiService {
     Topic default config
   */
   getTopicDefaultConfig(): Observable<any> {
-    return this.http.get(endpoint + "topics/_DL_DEFAULT_").pipe(
+    return this.http.get(prefix + "topics/_DL_DEFAULT_").pipe(
       retry(1),
       map(this.extractData),
       catchError(this.handleError)
@@ -81,7 +81,7 @@ export class RestApiService {
 
   updateTopicDefaultConfig(t: Topic): Observable<any> {
     return this.http
-      .put(endpoint + "topics/_DL_DEFAULT_", JSON.stringify(t), httpOptions)
+      .put(prefix + "topics/_DL_DEFAULT_", JSON.stringify(t), httpOptions)
       .pipe(
         retry(1),
         tap(_ => this.extractData),
@@ -93,7 +93,7 @@ export class RestApiService {
     Topics
   */
   getTopicsFromDmaap(): Observable<any> {
-    return this.http.get(endpoint + "topics/dmaap/").pipe(
+    return this.http.get(prefix + "topics/dmaap").pipe(
       retry(1),
       map(this.extractData),
       catchError(this.handleError)
@@ -101,7 +101,7 @@ export class RestApiService {
   }
 
   getTopicsFromFeeder(): Observable<any> {
-    return this.http.get(endpoint + "topics").pipe(
+    return this.http.get(prefix + "topics").pipe(
       retry(1),
       map(this.extractData),
       catchError(this.handleError)
@@ -109,7 +109,7 @@ export class RestApiService {
   }
 
   getTopicDetail(name: string): Observable<any> {
-    return this.http.get(endpoint + "topics/" + name).pipe(
+    return this.http.get(prefix + "topics/" + name).pipe(
       retry(1),
       map(this.extractData),
       catchError(this.handleError)
@@ -118,7 +118,7 @@ export class RestApiService {
 
   addTopic(t: Topic): Observable<any> {
     return this.http
-      .post<any>(endpoint + "topics", JSON.stringify(t), httpOptions)
+      .post<any>(prefix + "topics", JSON.stringify(t), httpOptions)
       .pipe(
         retry(1),
         tap(_ => console.log(`add topic name=${t.name}`)),
@@ -128,7 +128,7 @@ export class RestApiService {
 
   upadteTopic(t: Topic): Observable<any> {
     return this.http
-      .put(endpoint + "topics/" + t.name, JSON.stringify(t), httpOptions)
+      .put(prefix + "topics/" + t.name, JSON.stringify(t), httpOptions)
       .pipe(
         retry(1),
         tap(_ => this.extractData),
@@ -137,7 +137,7 @@ export class RestApiService {
   }
 
   deleteTopic(name: string): Observable<any> {
-    return this.http.delete(endpoint + "topics/" + name, httpOptions).pipe(
+    return this.http.delete(prefix + "topics/" + name, httpOptions).pipe(
       retry(1),
       tap(_ => console.log(`deleted topic name=${name}`)),
       catchError(this.handleError)
@@ -148,7 +148,7 @@ export class RestApiService {
     Database
   */
   getDbList(): Observable<any> {
-    return this.http.get(endpoint + "dbs").pipe(
+    return this.http.get(prefix + "dbs").pipe(
       retry(1),
       map(this.extractData),
       catchError(this.handleError)
@@ -156,7 +156,7 @@ export class RestApiService {
   }
 
   getDbDetail(name: string): Observable<any> {
-    return this.http.get(endpoint + "dbs/" + name).pipe(
+    return this.http.get(prefix + "dbs/" + name).pipe(
       retry(1),
       map(this.extractData),
       catchError(this.handleError)
@@ -165,7 +165,7 @@ export class RestApiService {
 
   addDb(d: Db): Observable<any> {
     return this.http
-      .post<any>(endpoint + "dbs", JSON.stringify(d), httpOptions)
+      .post<any>(prefix + "dbs", JSON.stringify(d), httpOptions)
       .pipe(
         retry(1),
         tap(_ => console.log(`add db name=${d.name}`)),
@@ -175,7 +175,7 @@ export class RestApiService {
 
   upadteDb(d: Db): Observable<any> {
     return this.http
-      .put(endpoint + "dbs/" + d.name, JSON.stringify(d), httpOptions)
+      .put(prefix + "dbs/" + d.name, JSON.stringify(d), httpOptions)
       .pipe(
         retry(1),
         tap(_ => this.extractData),
@@ -184,10 +184,37 @@ export class RestApiService {
   }
 
   deleteDb(name: string): Observable<any> {
-    return this.http.delete(endpoint + "dbs/" + name, httpOptions).pipe(
+    return this.http.delete(prefix + "dbs/" + name, httpOptions).pipe(
       retry(1),
       tap(_ => console.log(`deleted db name=${name}`)),
       catchError(this.handleError)
     );
   }
+
+  /*
+    Feeder
+  */
+  startFeeder() {
+    return this.http.post<any>(prefix + "feeder/start", "", httpOptions).pipe(
+      retry(1),
+      tap(_ => console.log(`start feeder`)),
+      catchError(this.handleError)
+    );
+  }
+
+  stopFeeder() {
+    return this.http.post<any>(prefix + "feeder/stop", "", httpOptions).pipe(
+      retry(1),
+      tap(_ => console.log(`stop feeder`)),
+      catchError(this.handleError)
+    );
+  }
+
+  getFeederstatus() {
+    return this.http.get(prefix + "feeder/status").pipe(
+      retry(1),
+      map(this.extractData),
+      catchError(this.handleError)
+    );
+  }
 }
diff --git a/components/datalake-handler/admin/src/src/app/database/database-list/database-list.component.ts b/components/datalake-handler/admin/src/src/app/database/database-list/database-list.component.ts
index 8df720ea..d0c3a1cb 100644
--- a/components/datalake-handler/admin/src/src/app/database/database-list/database-list.component.ts
+++ b/components/datalake-handler/admin/src/src/app/database/database-list/database-list.component.ts
@@ -42,21 +42,29 @@ import { AlertComponent } from "src/app/core/alert/alert.component";
 // Notify
 import { ToastrNotificationService } from "src/app/core/services/toastr-notification.service";
 
+// Loading spinner
+import { NgxSpinnerService } from "ngx-spinner";
+
 @Component({
   selector: "app-database-list",
   templateUrl: "./database-list.component.html",
   styleUrls: ["./database-list.component.css"]
 })
 export class DatabaseListComponent implements OnInit {
+  pageFinished: Boolean = false;
+
   dbList: any = [];
   dbs: Db[] = [];
 
+  loading: Boolean = true;
+
   tempDbDetail: Db;
 
   constructor(
     private restApiService: RestApiService,
     private notificationService: ToastrNotificationService,
-    private modalService: NgbModal
+    private modalService: NgbModal,
+    private spinner: NgxSpinnerService
   ) {
     this.initData().then(data => {
       this.initDbsList(this.dbList).then(data => {
@@ -65,13 +73,16 @@ export class DatabaseListComponent implements OnInit {
     });
   }
 
-  @ViewChild("addDbModal") private addDBModal: ElementRef;
-
-  ngOnInit() {}
+  ngOnInit() {
+    this.spinner.show();
+  }
 
   async initData() {
     this.dbList = [];
     this.dbList = await this.getDbList();
+    setTimeout(() => {
+      this.spinner.hide();
+    }, 500);
   }
 
   getDbList() {
diff --git a/components/datalake-handler/admin/src/src/app/feeder/feeder.component.ts b/components/datalake-handler/admin/src/src/app/feeder/feeder.component.ts
index 8544198e..b3c766d1 100644
--- a/components/datalake-handler/admin/src/src/app/feeder/feeder.component.ts
+++ b/components/datalake-handler/admin/src/src/app/feeder/feeder.component.ts
@@ -27,10 +27,14 @@
 import { Component, OnInit } from "@angular/core";
 import { AdminService } from "src/app/core/services/admin.service";
 import { RestApiService } from "src/app/core/services/rest-api.service";
+import { HeaderComponent } from "src/app/header/header.component";
 
 // notify
 import { ToastrNotificationService } from "src/app/core/services/toastr-notification.service";
 
+// Loading spinner
+import { NgxSpinnerService } from "ngx-spinner";
+
 @Component({
   selector: "app-feeder",
   templateUrl: "./feeder.component.html",
@@ -42,22 +46,31 @@ export class FeederComponent implements OnInit {
   constructor(
     private adminService: AdminService,
     private restApiService: RestApiService,
-    private notificationService: ToastrNotificationService
+    private notificationService: ToastrNotificationService,
+    private spinner: NgxSpinnerService
   ) {
     this.adminService.setTitle("SIDEBAR.FEDDFER");
     this.restApiService.getTopicsFromFeeder().subscribe(
       res => {
         // TODO: -1, because __consumer_offsets
         this.topicContent = (res.length - 1).toString();
+        setTimeout(() => {
+          this.spinner.hide();
+        }, 500);
       },
       err => {
         this.topicContent = "No Data";
         this.notificationService.error(err);
+        setTimeout(() => {
+          this.spinner.hide();
+        }, 500);
       }
     );
   }
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.spinner.show();
+  }
 
   chkTopicContent() {
     if (this.topicContent == "No Data") {
diff --git a/components/datalake-handler/admin/src/src/app/header/header.component.html b/components/datalake-handler/admin/src/src/app/header/header.component.html
index 82a825e8..304879ee 100644
--- a/components/datalake-handler/admin/src/src/app/header/header.component.html
+++ b/components/datalake-handler/admin/src/src/app/header/header.component.html
@@ -18,19 +18,26 @@ limitations under the License.
 ============LICENSE_END=========================================================
 -->
 
-
-<div class="d-flex">
-  <div class="mr-auto pl-2 dl-h2">
+<div class="d-flex align-items-center">
+  <div class="pt-2 align-self-center dl-h2">
     {{ title | translate }}
   </div>
-  <div class="ml-auto pr-3">
+
+  <!-- Only for feeder page -->
+  <div class="pt-3 pl-2 align-self-center" *ngIf="this.title == 'SIDEBAR.FEDDFER'">
+    <label class="dl-switch">
+      <input id="switch" type="checkbox" [(ngModel)]="this.feeder.running"
+        (ngModelChange)="this.changeFeederStatus()" />
+      <span class="dl-slider round"></span>
+    </label>
+  </div>
+
+  <div class="pt-2 align-self-center ml-auto">
     <app-toastr-notification></app-toastr-notification>
-    <div class="pt-2">
-      <select class="form-control lang-select" [(ngModel)]="selectedLang"
-        (ngModelChange)="changeLanguage(selectedLang)">
-        <option class="" *ngFor="let lang of langs" [value]=lang.value>{{ lang.name }}</option>
+    <div>
+      <select class="lang-select" [(ngModel)]="selectedLang" (ngModelChange)="changeLanguage(selectedLang)">
+        <option *ngFor="let lang of langs" [value]=lang.value>{{ lang.name }}</option>
       </select>
     </div>
-
   </div>
 </div>
diff --git a/components/datalake-handler/admin/src/src/app/header/header.component.ts b/components/datalake-handler/admin/src/src/app/header/header.component.ts
index 4cc00a46..629c19e5 100644
--- a/components/datalake-handler/admin/src/src/app/header/header.component.ts
+++ b/components/datalake-handler/admin/src/src/app/header/header.component.ts
@@ -24,9 +24,14 @@
  *
  */
 
-import { Component } from "@angular/core";
+import { Component, Output } from "@angular/core";
 import { AdminService } from "../core/services/admin.service";
 import { TranslateService } from "@ngx-translate/core";
+import { Feeder } from "src/app/core/models/feeder.model";
+import { RestApiService } from "src/app/core/services/rest-api.service";
+
+// notify
+import { ToastrNotificationService } from "src/app/core/services/toastr-notification.service";
 
 @Component({
   selector: "app-header",
@@ -35,6 +40,7 @@ import { TranslateService } from "@ngx-translate/core";
 })
 export class HeaderComponent {
   title = "PageTitle";
+  feeder: any = [];
 
   selectedLang: String;
   langs: Array<any> = [
@@ -45,6 +51,8 @@ export class HeaderComponent {
 
   constructor(
     private adminService: AdminService,
+    private restApiService: RestApiService,
+    private notificationService: ToastrNotificationService,
     private translateService: TranslateService
   ) {
     this.translateService.setDefaultLang("en-us");
@@ -55,9 +63,64 @@ export class HeaderComponent {
       this.title = title;
     });
     this.selectedLang = this.translateService.defaultLang;
+
+    if ((this.title = "SIDEBAR.FEDDFER")) {
+      this.restApiService.getFeederstatus().subscribe((data: {}) => {
+        this.feeder = new Feeder();
+        this.feeder = data;
+      });
+    }
   }
 
   changeLanguage(lang: string) {
     this.translateService.use(lang);
   }
+
+  changeFeederStatus() {
+    if (this.feeder.running) {
+      this.restApiService.startFeeder().subscribe(
+        res => {
+          this.notificationService.success("Success start feeder.");
+        },
+        err => {
+          this.feeder.running = false;
+          this.notificationService.error(err);
+        }
+      );
+    } else {
+      this.restApiService.stopFeeder().subscribe(
+        res => {
+          this.notificationService.success("Success stop feeder.");
+        },
+        err => {
+          this.feeder.running = true;
+          this.notificationService.error(err);
+        }
+      );
+    }
+  }
+
+  /*
+   *  Feeder
+   */
+  getFeederStatus() {
+    return this.restApiService.getFeederstatus().toPromise();
+  }
+
+  setFeederStatus(status: string) {
+    var data;
+
+    switch (status) {
+      case "start":
+        data = true;
+        console.log("start feeder");
+        break;
+      case "stop":
+        data = false;
+        console.log("stop feeder");
+        break;
+    }
+
+    return data;
+  }
 }
diff --git a/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.html b/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.html
index 044f62a7..238437a0 100644
--- a/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.html
+++ b/components/datalake-handler/admin/src/src/app/sidebar/sidebar.component.html
@@ -18,10 +18,10 @@ limitations under the License.
 ============LICENSE_END=========================================================
 -->
 
-<nav class="navbar navbar-expand-md">
+<nav class="navbar navbar-expand-lg p-0">
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
     aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="fas fa-align-justify"></span>
+    <span class="fas fa-bars" style="color:#FFFFFF"></span>
   </button>
   <div class="collapse navbar-collapse nav" id="navbarSupportedContent">
     <ul class="navbar-nav flex-column" routerLinkActive="active">
@@ -29,7 +29,7 @@ limitations under the License.
       <li class="nav-item">
         <a class="nav-link" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
           routerLink="/feeder">
-          <i class="fas fa-tachometer-alt"></i>
+          <i class="fas fa-tachometer-alt">&nbsp;</i>
           {{"SIDEBAR.FEDDFER" | translate}}
         </a>
       </li>
@@ -37,7 +37,7 @@ limitations under the License.
       <li class="nav-item">
         <a class="nav-link" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
           routerLink="/topics">
-          <i class="fas fa-cube"></i>
+          <i class="fas fa-cube">&nbsp;</i>
           {{"SIDEBAR.TOPICS" | translate}}
         </a>
       </li>
@@ -45,7 +45,7 @@ limitations under the License.
       <li class="nav-item">
         <a class="nav-link" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
           routerLink="/database">
-          <i class="fas fa-database" aria-hidden="true"></i>
+          <i class="fas fa-database" aria-hidden="true">&nbsp;</i>
           {{"SIDEBAR.DATABASE" | translate}}
         </a>
       </li>
@@ -53,7 +53,7 @@ limitations under the License.
       <li class="nav-item">
         <a class="nav-link" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"
           routerLink="/about">
-          <i class="fas fa-info-circle" aria-hidden="true"></i>
+          <i class="fas fa-info-circle" aria-hidden="true">&nbsp;</i>
           {{"SIDEBAR.ABOUT" | translate}}
         </a>
       </li>
diff --git a/components/datalake-handler/admin/src/src/app/topics/topic-list/topic-list.component.html b/components/datalake-handler/admin/src/src/app/topics/topic-list/topic-list.component.html
index 3e3fd721..8c84e447 100644
--- a/components/datalake-handler/admin/src/src/app/topics/topic-list/topic-list.component.html
+++ b/components/datalake-handler/admin/src/src/app/topics/topic-list/topic-list.component.html
@@ -1,3 +1,23 @@
+<!--
+============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="topic-list-panel">
   <div class="row">
     <div class="col-md-12">
@@ -31,7 +51,8 @@
       <ngx-datatable #mydatatable class="bootstrap" [rows]="topics" [columnMode]="'force'" [headerHeight]="40"
         [footerHeight]="40" [rowHeight]="50" [scrollbarV]="true" [scrollbarH]="true"
         [loadingIndicator]="loadingIndicator" [messages]="mesgNoData" [limit]="10">
-        <ngx-datatable-column [width]="30" name="{{ 'STATUS' | translate }}" prop="enabled"
+
+        <ngx-datatable-column [width]="60" name="{{ 'STATUS' | translate }}" prop="enabled"
           headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
           <div>
             <ng-template let-row="row" ngx-datatable-cell-template>
@@ -346,7 +367,7 @@
           </div>
         </ngx-datatable-column>
 
-        <ngx-datatable-column [width]="100" name="{{ 'SAVE_RAW_DATA' | translate }}" prop="saveRaw"
+        <ngx-datatable-column [width]="120" name="{{ 'SAVE_RAW_DATA' | translate }}" prop="saveRaw"
           headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
           <div>
             <ng-template let-row="row" ngx-datatable-cell-template>
@@ -360,7 +381,7 @@
           </div>
         </ngx-datatable-column>
 
-        <ngx-datatable-column [width]="85" name="{{ 'SETTING' | translate }}" prop="type"
+        <ngx-datatable-column [width]="100" name="{{ 'SETTING' | translate }}" prop="type"
           headerClass="d-flex justify-content-center" cellClass="d-flex justify-content-center">
           <ng-template let-row="row" ngx-datatable-cell-template>
             <span class="dl-icon-unconfig"
@@ -384,12 +405,12 @@
           <ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize"
             let-selectedCount="selectedCount" let-curPage="curPage" let-offset="offset" let-isVisible="isVisible">
             <div class="page-count">
-              total: {{ rowCount.toLocaleString() }} {{ totalMessage }}
+              total: {{ rowCount.toLocaleString() }}
             </div>
             <datatable-pager [pagerLeftArrowIcon]="'datatable-icon-left'" [pagerRightArrowIcon]="'datatable-icon-right'"
               [pagerPreviousIcon]="'datatable-icon-prev'" [pagerNextIcon]="'datatable-icon-skip'" [page]="curPage"
               [size]="pageSize" [count]="rowCount" [hidden]="!(rowCount / pageSize > 1)"
-              (change)="table.onFooterPage($event)">
+              (change)="topicTable.onFooterPage($event)">
             </datatable-pager>
           </ng-template>
         </ngx-datatable-footer>
diff --git a/components/datalake-handler/admin/src/src/app/topics/topic-list/topic-list.component.ts b/components/datalake-handler/admin/src/src/app/topics/topic-list/topic-list.component.ts
index dc375f50..6cb3852d 100644
--- a/components/datalake-handler/admin/src/src/app/topics/topic-list/topic-list.component.ts
+++ b/components/datalake-handler/admin/src/src/app/topics/topic-list/topic-list.component.ts
@@ -36,6 +36,9 @@ import { TopicConfigModalComponent } from "./topic-config-modal/topic-config-mod
 // notify
 import { ToastrNotificationService } from "src/app/core/services/toastr-notification.service";
 
+// Loading spinner
+import { NgxSpinnerService } from "ngx-spinner";
+
 @Component({
   selector: "app-topic-list",
   templateUrl: "./topic-list.component.html",
@@ -52,7 +55,6 @@ export class TopicListComponent {
 
   loadingIndicator: boolean = true;
   mesgNoData = {
-    // {emptyMessage: `<div></div> 'No Data' | translate, selectedMessage: false}`
     emptyMessage: `
       <div class="d-flex justify-content-center">
         <div class="p-2">
@@ -63,11 +65,13 @@ export class TopicListComponent {
   };
 
   @ViewChild("searchText") searchText: ElementRef;
+  @ViewChild("mydatatable") topicTable;
 
   constructor(
     private restApiService: RestApiService,
     private modalService: NgbModal,
-    private notificationService: ToastrNotificationService
+    private notificationService: ToastrNotificationService,
+    private spinner: NgxSpinnerService
   ) {
     setTimeout(() => {
       this.loadingIndicator = false;
@@ -79,12 +83,17 @@ export class TopicListComponent {
           // for cache of datatable
           this.temp = [...data];
           this.topics = data;
+          setTimeout(() => {
+            this.spinner.hide();
+          }, 500);
         }
       );
     });
   }
 
-  ngOnInit() {}
+  ngOnInit() {
+    this.spinner.show();
+  }
 
   async initData() {
     this.topicListDmaap = [];
@@ -197,6 +206,20 @@ export class TopicListComponent {
           .subscribe(
             res => {
               this.topicDefaultConfig = receivedEntry;
+              this.topics.forEach(t => {
+                if (!t.type) {
+                  // Unconfigure topics
+                  t.login = this.topicDefaultConfig.login;
+                  t.password = this.topicDefaultConfig.password;
+                  t.sinkdbs = this.topicDefaultConfig.sinkdbs;
+                  t.enabled = this.topicDefaultConfig.enabled;
+                  t.saveRaw = this.topicDefaultConfig.saveRaw;
+                  t.dataFormat = this.topicDefaultConfig.dataFormat;
+                  t.ttl = this.topicDefaultConfig.ttl;
+                  t.correlateClearedMessage = this.topicDefaultConfig.correlateClearedMessage;
+                  t.messageIdPath = this.topicDefaultConfig.messageIdPath;
+                }
+              });
               this.notificationService.success("Success updated.");
               modalRef.close();
             },
@@ -287,12 +310,6 @@ export class TopicListComponent {
               this.updateFilter(this.searchText.nativeElement.value);
             }
           );
-
-          // temp code
-          // this.topics[index] = this.tempTopicDetail;
-          // this.temp[index] = this.topics[index];
-          // this.notificationService.success("Success deleted.");
-          // modalRef.close();
         }
       });
     }
diff --git a/components/datalake-handler/admin/src/src/styles.css b/components/datalake-handler/admin/src/src/styles.css
index df7e52c4..04479213 100644
--- a/components/datalake-handler/admin/src/src/styles.css
+++ b/components/datalake-handler/admin/src/src/styles.css
@@ -58,7 +58,6 @@ body {
 */
 .menu-header {
   background-color: #313449;
-  /* max-width: 250px; */
 }
 
 .menu {
@@ -66,27 +65,35 @@ body {
   font-family: "Open Sans", sans-serif;
   font-weight: 400;
   font-size: 14px;
-  letter-spacing: 2px;
+  letter-spacing: 1px;
   color: #ffffff;
   text-align: left;
-  /* max-width: 250px; */
 }
 
 .menu .nav {
   justify-content: center;
+  min-width: 220px;
 }
 
-.menu .nav-item .active {
-  background-color: #ffffff;
-  color: #313449;
-  border-radius: 10px;
+.menu .nav-item {
+  padding-left: 12px;
+  padding-right: 10px;
 }
 
-.menu .nav-link {
+.menu .navbar-expand-lg .navbar-nav .nav-link {
   color: #ffffff;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.menu .navbar-expand-lg .navbar-nav .nav-item .active {
+  color: #313449;
+  background-color: #ffffff;
+  border-radius: 10px;
 }
 
-.menu .nav-item :hover {
+.menu .navbar-expand-lg .navbar-nav .nav-item :hover {
+  color: #FFFFFF;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 10px;
 }
@@ -96,10 +103,11 @@ body {
 */
 .header {
   background-color: #f2f8fb;
+  height: 62px;
 }
 
 .header .lang-select {
-  background-color: #f2f8fb;
+  background-color: transparent;
   border: none;
   font-family: "Open Sans", sans-serif;
   font-weight: 300;
@@ -117,7 +125,6 @@ hr {
   Content
 */
 .content {
-  height: 100%;
   overflow: auto;
   min-height: 100vh;
   background-color: #f2f8fb;
@@ -171,9 +178,6 @@ hr {
 .ngx-datatable.bootstrap .datatable-body .datatable-body-row .datatable-body-cell {
   align-items: center !important;
   display: flex !important;
-
-  /* display: inline-block;
-  text-align: left; */
 }
 
 .ngx-datatable.bootstrap .datatable-body .datatable-body-row.active {
@@ -370,6 +374,11 @@ hr {
   opacity: 1;
 }
 
+.input-group-text {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
 /* Input: checkbox */
 .dl-input-chk {
   font-family: "Open Sans", sans-serif;
@@ -549,10 +558,22 @@ input#switch:checked+.dl-slider:before {
   border-radius: 50%;
 }
 
+/*
+  Modal windows
+*/
 .dl-md-modal .modal-dialog {
   max-width: 565px;
 }
 
+.modal-content {
+  -webkit-border-radius: 20px !important;
+  -moz-border-radius: 20px !important;
+  border-radius: 20px !important;
+}
+
+/*
+  Modal notice
+*/
 .dl-notice {
   font-family: "Open Sans", sans-serif;
   font-weight: 600;