From 5e7f427fb15e9006693e9ec41f39efdea6723f61 Mon Sep 17 00:00:00 2001 From: Ekko Chang Date: Fri, 26 Jul 2019 03:26:08 +0000 Subject: Add the card shared module Issue-ID: DCAEGEN2-1671 Signed-off-by: Ekko Chang Change-Id: I52777a2c11d3ea351df7e3fc8b236d8f94bc44e1 --- .gitignore | 2 + components/datalake-handler/admin/src/.gitignore | 3 + .../datalake-handler/admin/src/package-lock.json | 8 ++ components/datalake-handler/admin/src/package.json | 1 + .../datalake-handler/admin/src/proxy.conf.json | 8 -- .../admin/src/src/app/app.module.ts | 6 +- .../src/app/shared/modules/card/card.component.css | 38 ++++++ .../app/shared/modules/card/card.component.html | 66 ++++++++- .../src/app/shared/modules/card/card.component.ts | 45 +++++-- .../src/src/app/views/test/test.component.html | 18 ++- .../admin/src/src/app/views/test/test.component.ts | 21 +++ .../admin/src/src/assets/icons/add.svg | 15 +++ .../admin/src/src/assets/icons/couchbase_able.svg | 12 ++ .../src/src/assets/icons/couchbase_disable.svg | 12 ++ .../admin/src/src/assets/icons/druid_able.svg | 22 +++ .../admin/src/src/assets/icons/druid_disable.svg | 22 +++ .../src/src/assets/icons/elasticsearch_able.svg | 25 ++++ .../src/src/assets/icons/elasticsearch_disable.svg | 25 ++++ .../admin/src/src/assets/icons/hadoop_able.svg | 148 +++++++++++++++++++++ .../admin/src/src/assets/icons/hadoop_disable.svg | 148 +++++++++++++++++++++ .../admin/src/src/assets/icons/kafka_able.svg | 21 +++ .../admin/src/src/assets/icons/kafka_disable.svg | 21 +++ .../admin/src/src/assets/icons/kibana_able.svg | 15 +++ .../admin/src/src/assets/icons/kibana_disable.svg | 15 +++ .../admin/src/src/assets/icons/mongoDB_able.svg | 22 +++ .../admin/src/src/assets/icons/mongoDB_disable.svg | 22 +++ .../datalake-handler/admin/src/src/styles.css | 54 ++++++-- 27 files changed, 779 insertions(+), 36 deletions(-) delete mode 100644 components/datalake-handler/admin/src/proxy.conf.json create mode 100644 components/datalake-handler/admin/src/src/assets/icons/add.svg create mode 100755 components/datalake-handler/admin/src/src/assets/icons/couchbase_able.svg create mode 100755 components/datalake-handler/admin/src/src/assets/icons/couchbase_disable.svg create mode 100755 components/datalake-handler/admin/src/src/assets/icons/druid_able.svg create mode 100755 components/datalake-handler/admin/src/src/assets/icons/druid_disable.svg create mode 100755 components/datalake-handler/admin/src/src/assets/icons/elasticsearch_able.svg create mode 100755 components/datalake-handler/admin/src/src/assets/icons/elasticsearch_disable.svg create mode 100755 components/datalake-handler/admin/src/src/assets/icons/hadoop_able.svg create mode 100755 components/datalake-handler/admin/src/src/assets/icons/hadoop_disable.svg create mode 100755 components/datalake-handler/admin/src/src/assets/icons/kafka_able.svg create mode 100755 components/datalake-handler/admin/src/src/assets/icons/kafka_disable.svg create mode 100755 components/datalake-handler/admin/src/src/assets/icons/kibana_able.svg create mode 100755 components/datalake-handler/admin/src/src/assets/icons/kibana_disable.svg create mode 100755 components/datalake-handler/admin/src/src/assets/icons/mongoDB_able.svg create mode 100755 components/datalake-handler/admin/src/src/assets/icons/mongoDB_disable.svg diff --git a/.gitignore b/.gitignore index 4ec8d6b6..ea342fa3 100644 --- a/.gitignore +++ b/.gitignore @@ -122,3 +122,5 @@ buildNumber.properties # End of https://www.gitignore.io/api/java,maven,intellij +.project +.settings/ diff --git a/components/datalake-handler/admin/src/.gitignore b/components/datalake-handler/admin/src/.gitignore index 5dbed0df..ea958f76 100644 --- a/components/datalake-handler/admin/src/.gitignore +++ b/components/datalake-handler/admin/src/.gitignore @@ -47,3 +47,6 @@ Thumbs.db # CSS vendor src/assets/vendor + +# Proxy config +proxy.conf.json diff --git a/components/datalake-handler/admin/src/package-lock.json b/components/datalake-handler/admin/src/package-lock.json index 72052d39..31103a8e 100644 --- a/components/datalake-handler/admin/src/package-lock.json +++ b/components/datalake-handler/admin/src/package-lock.json @@ -1091,6 +1091,14 @@ "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=", "dev": true }, + "angular-svg-icon": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/angular-svg-icon/-/angular-svg-icon-7.2.1.tgz", + "integrity": "sha512-N31QL1IejPqpeMQnuCx92yFLpTZLLsi3ffQ/8HpuP3chevVBbydd5kSmPBYR++awhVUxBB7IOt0VjCJL5TV7xQ==", + "requires": { + "tslib": "^1.9.0" + } + }, "ansi-colors": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz", diff --git a/components/datalake-handler/admin/src/package.json b/components/datalake-handler/admin/src/package.json index 01b5d534..5b2769d3 100644 --- a/components/datalake-handler/admin/src/package.json +++ b/components/datalake-handler/admin/src/package.json @@ -23,6 +23,7 @@ "@ngx-translate/core": "^11.0.1", "@ngx-translate/http-loader": "^4.0.0", "@swimlane/ngx-datatable": "^14.0.0", + "angular-svg-icon": "^7.2.1", "bootstrap": "^4.3.1", "core-js": "^2.5.4", "jquery": "^3.4.1", diff --git a/components/datalake-handler/admin/src/proxy.conf.json b/components/datalake-handler/admin/src/proxy.conf.json deleted file mode 100644 index 1dde4e8c..00000000 --- a/components/datalake-handler/admin/src/proxy.conf.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "/datalake/v1": { - "target": "http://10.73.242.196:1680", - "secure": false, - "logLevel": "debug", - "changeOrigin": true - } -} \ No newline at end of file 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 6bf83055..8cdef597 100644 --- a/components/datalake-handler/admin/src/src/app/app.module.ts +++ b/components/datalake-handler/admin/src/src/app/app.module.ts @@ -92,6 +92,9 @@ import { ButtonComponent } from "./shared/components/Button/button.component"; import { ModalDirective } from "./shared/modules/modal/modal.directive"; import { ModalDemoComponent } from "./views/test/modal-demo/modal-demo.component"; +// Angular SVG Icon +import { AngularSvgIconModule } from "angular-svg-icon"; + @NgModule({ declarations: [ AppComponent, @@ -144,7 +147,8 @@ import { ModalDemoComponent } from "./views/test/modal-demo/modal-demo.component }), FormsModule, NgxDatatableModule, - NgxSpinnerModule + NgxSpinnerModule, + AngularSvgIconModule ], providers: [AdminService, RestApiService, ToastrNotificationService], bootstrap: [AppComponent], diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.css b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.css index e69de29b..4b76e13c 100644 --- a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.css +++ b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.css @@ -0,0 +1,38 @@ +/* +* ============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========================================================= +*/ + +.card-panel { + background: #FFFFFF; + box-shadow: 3px 3px 11px 0 #D2D3D5; + border-radius: 20px; + min-height: 220px; +} + +.card-panel .title { + color: #5DBEBB; + letter-spacing: 1.79px; +} + +.card-panel .infoname { + color: #313032; + font-family: "Open Sans", sans-serif; + font-weight: 600; + font-size: 16px; +} diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html index 0f9abc54..7081054f 100644 --- a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html +++ b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.html @@ -1,3 +1,63 @@ -

- card works! -

+ +
+
+
{{ this.title }}
+ +
+ + + +
+ + +
+
+
+ +
+ +
+ + + + + + + + + + + +
+ +
+ {{ this.content }} +
+
+ +
+ {{ this.subcontent }} +
+
diff --git a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts index 4e934bc8..c5f90d22 100644 --- a/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts +++ b/components/datalake-handler/admin/src/src/app/shared/modules/card/card.component.ts @@ -1,15 +1,44 @@ -import { Component, OnInit } from '@angular/core'; +/* + * ============LICENSE_START======================================================= + * ONAP : DataLake + * ================================================================================ + * Copyright 2019 QCT + *================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * + * @author Ekko Chang + * + */ +import { Component, OnInit, Input } from "@angular/core"; @Component({ - selector: 'app-card', - templateUrl: './card.component.html', - styleUrls: ['./card.component.css'] + selector: "app-card", + templateUrl: "./card.component.html", + styleUrls: ["./card.component.css"] }) export class CardComponent implements OnInit { + @Input() title: string; + @Input() iconPath: string; + @Input() content: string; + @Input() subcontent: string; + @Input() modifiable: boolean; + @Input() iconSize: string[] = ["sm", "md", "lg"]; - constructor() { } - - ngOnInit() { - } + constructor() {} + ngOnInit() {} } diff --git a/components/datalake-handler/admin/src/src/app/views/test/test.component.html b/components/datalake-handler/admin/src/src/app/views/test/test.component.html index 7b58bd76..6f077f60 100644 --- a/components/datalake-handler/admin/src/src/app/views/test/test.component.html +++ b/components/datalake-handler/admin/src/src/app/views/test/test.component.html @@ -2,8 +2,16 @@

Test module is used for some public business modules sample

Module 1 -----> card

- - + + +
+ + +
+ + +

Module 2 -----> modal

@@ -38,4 +46,10 @@
+ +
+

components----icons

+ + +
diff --git a/components/datalake-handler/admin/src/src/app/views/test/test.component.ts b/components/datalake-handler/admin/src/src/app/views/test/test.component.ts index a04220ff..97866123 100644 --- a/components/datalake-handler/admin/src/src/app/views/test/test.component.ts +++ b/components/datalake-handler/admin/src/src/app/views/test/test.component.ts @@ -22,6 +22,15 @@ export class TestComponent implements OnInit { topic: Topic; // Modal example end + // Card example + cardTitle: string; + cardIconPath: string; + cardContent: string; + cardSubcontent: string; + cardModifiable: boolean; + cardAddicon: string; + // Card example end + constructor( private notificationService: ToastrNotificationService, // Modal example @@ -85,6 +94,18 @@ export class TestComponent implements OnInit { this.topic.messageIdPath = ""; this.topic.type = false; // Modal example end + + // Card example + this.cardTitle = "Topics"; + // Display content as string + this.cardContent = "1234"; + // or display content as svg-icons(path) + this.cardIconPath = "assets/icons/couchbase_able.svg"; + this.cardSubcontent = "QCT-Kafka"; + this.cardModifiable = true; + + this.cardAddicon = "assets/icons/add.svg"; + // Card example end } buttonAction(string: string = "") { diff --git a/components/datalake-handler/admin/src/src/assets/icons/add.svg b/components/datalake-handler/admin/src/src/assets/icons/add.svg new file mode 100644 index 00000000..d38e3dc1 --- /dev/null +++ b/components/datalake-handler/admin/src/src/assets/icons/add.svg @@ -0,0 +1,15 @@ + + + + + + + + + + diff --git a/components/datalake-handler/admin/src/src/assets/icons/couchbase_able.svg b/components/datalake-handler/admin/src/src/assets/icons/couchbase_able.svg new file mode 100755 index 00000000..92a0a4e6 --- /dev/null +++ b/components/datalake-handler/admin/src/src/assets/icons/couchbase_able.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/components/datalake-handler/admin/src/src/assets/icons/couchbase_disable.svg b/components/datalake-handler/admin/src/src/assets/icons/couchbase_disable.svg new file mode 100755 index 00000000..3219ca98 --- /dev/null +++ b/components/datalake-handler/admin/src/src/assets/icons/couchbase_disable.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/components/datalake-handler/admin/src/src/assets/icons/druid_able.svg b/components/datalake-handler/admin/src/src/assets/icons/druid_able.svg new file mode 100755 index 00000000..bac3794c --- /dev/null +++ b/components/datalake-handler/admin/src/src/assets/icons/druid_able.svg @@ -0,0 +1,22 @@ + + + + + + + + + diff --git a/components/datalake-handler/admin/src/src/assets/icons/druid_disable.svg b/components/datalake-handler/admin/src/src/assets/icons/druid_disable.svg new file mode 100755 index 00000000..667d52cb --- /dev/null +++ b/components/datalake-handler/admin/src/src/assets/icons/druid_disable.svg @@ -0,0 +1,22 @@ + + + + + + + + + diff --git a/components/datalake-handler/admin/src/src/assets/icons/elasticsearch_able.svg b/components/datalake-handler/admin/src/src/assets/icons/elasticsearch_able.svg new file mode 100755 index 00000000..36dececc --- /dev/null +++ b/components/datalake-handler/admin/src/src/assets/icons/elasticsearch_able.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + diff --git a/components/datalake-handler/admin/src/src/assets/icons/elasticsearch_disable.svg b/components/datalake-handler/admin/src/src/assets/icons/elasticsearch_disable.svg new file mode 100755 index 00000000..f5ef2b98 --- /dev/null +++ b/components/datalake-handler/admin/src/src/assets/icons/elasticsearch_disable.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + diff --git a/components/datalake-handler/admin/src/src/assets/icons/hadoop_able.svg b/components/datalake-handler/admin/src/src/assets/icons/hadoop_able.svg new file mode 100755 index 00000000..e48a60f1 --- /dev/null +++ b/components/datalake-handler/admin/src/src/assets/icons/hadoop_able.svg @@ -0,0 +1,148 @@ + + + + + + + + + + + + + + + + + diff --git a/components/datalake-handler/admin/src/src/assets/icons/hadoop_disable.svg b/components/datalake-handler/admin/src/src/assets/icons/hadoop_disable.svg new file mode 100755 index 00000000..8bfd2664 --- /dev/null +++ b/components/datalake-handler/admin/src/src/assets/icons/hadoop_disable.svg @@ -0,0 +1,148 @@ + + + + + + + + + + + + + + + + + diff --git a/components/datalake-handler/admin/src/src/assets/icons/kafka_able.svg b/components/datalake-handler/admin/src/src/assets/icons/kafka_able.svg new file mode 100755 index 00000000..3bb663c2 --- /dev/null +++ b/components/datalake-handler/admin/src/src/assets/icons/kafka_able.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/components/datalake-handler/admin/src/src/assets/icons/kafka_disable.svg b/components/datalake-handler/admin/src/src/assets/icons/kafka_disable.svg new file mode 100755 index 00000000..27d290fa --- /dev/null +++ b/components/datalake-handler/admin/src/src/assets/icons/kafka_disable.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/components/datalake-handler/admin/src/src/assets/icons/kibana_able.svg b/components/datalake-handler/admin/src/src/assets/icons/kibana_able.svg new file mode 100755 index 00000000..5a483202 --- /dev/null +++ b/components/datalake-handler/admin/src/src/assets/icons/kibana_able.svg @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/components/datalake-handler/admin/src/src/assets/icons/kibana_disable.svg b/components/datalake-handler/admin/src/src/assets/icons/kibana_disable.svg new file mode 100755 index 00000000..1bd8e585 --- /dev/null +++ b/components/datalake-handler/admin/src/src/assets/icons/kibana_disable.svg @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/components/datalake-handler/admin/src/src/assets/icons/mongoDB_able.svg b/components/datalake-handler/admin/src/src/assets/icons/mongoDB_able.svg new file mode 100755 index 00000000..1feb0c6f --- /dev/null +++ b/components/datalake-handler/admin/src/src/assets/icons/mongoDB_able.svg @@ -0,0 +1,22 @@ + + + + + + + + + + diff --git a/components/datalake-handler/admin/src/src/assets/icons/mongoDB_disable.svg b/components/datalake-handler/admin/src/src/assets/icons/mongoDB_disable.svg new file mode 100755 index 00000000..9d1d506d --- /dev/null +++ b/components/datalake-handler/admin/src/src/assets/icons/mongoDB_disable.svg @@ -0,0 +1,22 @@ + + + + + + + + + + diff --git a/components/datalake-handler/admin/src/src/styles.css b/components/datalake-handler/admin/src/src/styles.css index 9feefc91..096bd228 100644 --- a/components/datalake-handler/admin/src/src/styles.css +++ b/components/datalake-handler/admin/src/src/styles.css @@ -297,6 +297,22 @@ hr { color: #5a595a; } +/* + Action dropdown +*/ +.action-icon-dropdown { + background-color: #ffffff; +} + +.action-icon-dropdown:hover { + background-color: #ffffff; +} + +.dropdown-menu.action-icon-btn { + min-width: 2rem !important; + left: -70px !important; +} + /* Form elements */ @@ -540,15 +556,18 @@ hr { transition: 0.4s; } -input#switch:checked+.dl-slider,input#switchs:checked+.dl-slider { +input#switch:checked+.dl-slider, +input#switchs:checked+.dl-slider { background-color: #5dbebb; } -input#switch:focus+.dl-slider,input#switchs:checked+.dl-slider { +input#switch:focus+.dl-slider, +input#switchs:checked+.dl-slider { box-shadow: 0 0 1px #5dbebb; } -input#switch:checked+.dl-slider:before,input#switchs:checked+.dl-slider:before { +input#switch:checked+.dl-slider:before, +input#switchs:checked+.dl-slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); @@ -601,33 +620,40 @@ input#switch:checked+.dl-slider:before,input#switchs:checked+.dl-slider:before { .p-1 .alert-delete-content { padding: 1.25rem 4.5rem !important; } + ngb-modal-window.templatess .modal-dialog-centered { max-width: 900px !important; overflow: auto !important; } -.close-btn-icon{ + +.close-btn-icon { color: #b5b6b8; -webkit-transform: rotate(45deg); transform: rotate(45deg); float: right; cursor: pointer; } -.truecheck{ - color:#5DBEBB -} -.falsecheck{ - color:#BDBEC0 + +.truecheck { + color: #5DBEBB } -input::-webkit-input-placeholder{ -color:#313032!important; + +.falsecheck { + color: #BDBEC0 } -:-moz-placeholder{ + +input::-webkit-input-placeholder { color: #313032 !important; } -::-moz-placeholder{ + +:-moz-placeholder { color: #313032 !important; } -:-ms-input-placeholder{ + +::-moz-placeholder { color: #313032 !important; } +:-ms-input-placeholder { + color: #313032 !important; +} -- cgit 1.2.3-korg