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>
diff --git a/components/datalake-handler/admin/src/package-lock.json b/components/datalake-handler/admin/src/package-lock.json
index c8dabdf..72052d3 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 f18022d..01b5d53 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 0721a51..c817351 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 ca3512f..accab81 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 @@
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="align-self-center">
+ <label class="about-bold">Version: </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;
+ }
- <div class="about-info">
- <div class="row">
- <div class="col-sm-4">
- <label class="about-bold">Version: </label>1.0.0
- </div>
- <div class="col-sm-8">
- <label class="about-bold">Code freeze: </label>Jun 1, 2019
- </div>
+ .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>
+ <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 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>
</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 8e0e5b3..adf65a2 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 @@
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 884d798..d4f2c17 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 @@
-->
<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 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="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 class="container-fluid">
- <div class="row">
- <div class="col-md-2 menu pl-1 pr-1">
- <app-sidebar></app-sidebar>
- </div>
-
- <div class="col-md-10 content pl-4 pr-4">
- <hr>
- <router-outlet></router-outlet>
- </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 0988554..7249e1d 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 { 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 @@
}
}),
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 0000000..8da1fa6
--- /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 6281c95..8e126a0 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 @@
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 635e42c..b913410 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 { 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 @@
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 @@
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 @@
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 @@
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 @@
}
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 @@
}
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 @@
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 @@
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 @@
}
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 @@
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 @@
}
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 @@
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 @@
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 @@
}
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 8df720e..d0c3a1c 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 @@
// 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 @@
});
}
- @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 8544198..b3c766d 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 @@
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 82a825e..304879e 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 @@
============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 4cc00a4..629c19e 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 @@
})
export class HeaderComponent {
title = "PageTitle";
+ feeder: any = [];
selectedLang: String;
langs: Array<any> = [
@@ -45,6 +51,8 @@
constructor(
private adminService: AdminService,
+ private restApiService: RestApiService,
+ private notificationService: ToastrNotificationService,
private translateService: TranslateService
) {
this.translateService.setDefaultLang("en-us");
@@ -55,9 +63,64 @@
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 044f62a..238437a 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 @@
============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 @@
<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"> </i>
{{"SIDEBAR.FEDDFER" | translate}}
</a>
</li>
@@ -37,7 +37,7 @@
<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"> </i>
{{"SIDEBAR.TOPICS" | translate}}
</a>
</li>
@@ -45,7 +45,7 @@
<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"> </i>
{{"SIDEBAR.DATABASE" | translate}}
</a>
</li>
@@ -53,7 +53,7 @@
<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"> </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 3e3fd72..8c84e44 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 dc375f5..6cb3852 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 @@
// 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 @@
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 @@
};
@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 @@
// 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 @@
.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 @@
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 df7e52c..0447921 100644
--- a/components/datalake-handler/admin/src/src/styles.css
+++ b/components/datalake-handler/admin/src/src/styles.css
@@ -58,7 +58,6 @@
*/
.menu-header {
background-color: #313449;
- /* max-width: 250px; */
}
.menu {
@@ -66,27 +65,35 @@
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;
+.menu .nav-item {
+ padding-left: 12px;
+ padding-right: 10px;
+}
+
+.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-link {
- color: #ffffff;
-}
-
-.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 @@
*/
.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 @@
Content
*/
.content {
- height: 100%;
overflow: auto;
min-height: 100vh;
background-color: #f2f8fb;
@@ -171,9 +178,6 @@
.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 @@
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 @@
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;