diff options
author | 2019-05-22 06:49:17 +0000 | |
---|---|---|
committer | 2019-05-22 06:49:17 +0000 | |
commit | d564502aa81ecc64432c6afbd5c18a18bfad9c6b (patch) | |
tree | e2086e0d1739eabb91298c11a448c1c2ba933b7e /components | |
parent | 123de46e9fdf6d54be08bd4339ce1f347180e329 (diff) | |
parent | e156c87d2d90eabd23300ff91f45c20b89771df8 (diff) |
Merge "Add function to framework of frond-end"
Diffstat (limited to 'components')
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: </label>1.0.0 - </div> - <div class="col-sm-8"> - <label class="about-bold">Code freeze: </label>Jun 1, 2019 - </div> - </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; + } + + .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"> </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"> </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"> </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"> </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; |