From 51d50f0ef642e0f996a1c8b8d2ef4838bdfec892 Mon Sep 17 00:00:00 2001 From: Tal Gitelman Date: Sun, 10 Dec 2017 18:55:03 +0200 Subject: Final commit to master merge from Change-Id: Ib464f9a8828437c86fe6def8af238aaf83473507 Issue-ID: SDC-714 Signed-off-by: Tal Gitelman --- catalog-ui/configurations/dev.js | 2 +- catalog-ui/configurations/prod.js | 2 +- catalog-ui/package.json | 2 +- catalog-ui/src/app/app.ts | 42 ++-- .../requirement/requirements-list-directive.ts | 11 +- .../app/directives/ecomp-footer/ecomp-footer.html | 8 - .../app/directives/ecomp-footer/ecomp-footer.less | 47 ---- .../app/directives/ecomp-footer/ecomp-footer.ts | 53 ---- .../app/directives/ecomp-header/ecomp-header.ts | 21 +- .../graphs-v2/common/common-graph-utils.ts | 44 +++- .../style/component-instances-nodes-style.ts | 17 ++ .../composition-graph.directive.ts | 230 +++++++++++++++-- .../composition-graph/composition-graph.html | 12 +- .../utils/composition-graph-general-utils.ts | 14 +- .../utils/composition-graph-links-utils.ts | 47 ++-- .../utils/match-capability-requierment-utils.ts | 238 ++++++------------ .../deployment-graph/deployment-graph.directive.ts | 6 +- .../graphs-v2/palette/palette.directive.ts | 45 +--- .../app/directives/graphs-v2/palette/palette.html | 2 +- .../graphs-v2/relation-menu/relation-menu.html | 48 ++-- .../graphs-v2/relation-menu/relation-menu.ts | 16 +- .../src/app/directives/layout/top-nav/top-nav.html | 54 ---- .../src/app/directives/layout/top-nav/top-nav.less | 218 ---------------- .../src/app/directives/layout/top-nav/top-nav.ts | 161 ------------ .../src/app/directives/loader/loader-directive.ts | 21 +- .../data-type-fields-structure.html | 4 +- .../data-type-fields-structure.less | 4 + .../type-map/type-map-directive.html | 4 +- .../type-map/type-map-directive.less | 5 + .../select-data-type-fields-structure.less | 10 +- .../user-header-details-directive.ts | 26 +- catalog-ui/src/app/models.ts | 7 +- catalog-ui/src/app/models/capability.ts | 18 +- catalog-ui/src/app/models/components/component.ts | 70 +++++- .../componentsInstances/componentInstance.ts | 40 ++- .../componentsInstances/serviceProxyInstance.ts | 35 +++ .../src/app/models/graph/connectRelationModel.ts | 122 +++++++++ .../composition-ci-ucpe-link.ts | 2 +- .../app/models/graph/graph-links/links-factory.ts | 4 +- catalog-ui/src/app/models/graph/match-relation.ts | 68 ++--- .../composition-ci-node-base.ts | 7 +- .../composition-ci-node-configuration.ts | 39 +++ .../composition-ci-node-cp.ts | 3 +- .../composition-ci-node-service-proxy.ts | 42 ++++ .../composition-ci-node-service.ts | 2 +- .../composition-ci-node-ucpe-cp.ts | 2 + .../composition-ci-node-ucpe.ts | 2 + .../composition-ci-node-vf.ts | 3 +- .../composition-ci-node-vfc.ts | 3 +- .../composition-ci-node-vl.ts | 1 + .../nodes/modules-graph-nodes/module-node-base.ts | 3 +- .../src/app/models/graph/nodes/nodes-factory.ts | 10 +- .../src/app/models/graph/relationMenuObjects.ts | 131 ---------- catalog-ui/src/app/models/graph/relationship.ts | 48 +++- catalog-ui/src/app/models/heat-parameters.ts | 1 + .../models/properties-inputs/property-be-model.ts | 2 +- .../models/properties-inputs/property-fe-model.ts | 1 + catalog-ui/src/app/models/properties.ts | 15 +- catalog-ui/src/app/models/radio-button.ts | 11 + catalog-ui/src/app/models/requirement.ts | 16 +- catalog-ui/src/app/models/user.ts | 29 ++- catalog-ui/src/app/models/wizard-step.ts | 19 ++ catalog-ui/src/app/modules/directive-module.ts | 19 +- catalog-ui/src/app/modules/service-module.ts | 17 +- catalog-ui/src/app/ng2/app.module.ts | 33 ++- .../menu-list-ng2/menu-list-ng2.component.html | 7 + .../menu-list-ng2/menu-list-ng2.component.ts | 36 +++ .../menu-list-ng2/menu-list-ng2.module.ts | 23 ++ .../dynamic-element/dynamic-element.component.less | 3 - .../dynamic-element/dynamic-element.component.ts | 145 ----------- .../dynamic-element/dynamic-element.module.ts | 56 ----- .../checkbox/ui-element-checkbox.component.html | 1 - .../checkbox/ui-element-checkbox.component.less | 2 - .../checkbox/ui-element-checkbox.component.ts | 47 ---- .../dropdown/ui-element-dropdown.component.html | 3 - .../dropdown/ui-element-dropdown.component.less | 11 - .../dropdown/ui-element-dropdown.component.ts | 52 ---- .../input/ui-element-input.component.html | 15 -- .../input/ui-element-input.component.less | 17 -- .../input/ui-element-input.component.ts | 41 --- .../ui-element-integer-input.component.html | 15 -- .../ui-element-integer-input.component.less | 17 -- .../ui-element-integer-input.component.ts | 41 --- .../ui-element-popover-input.component.html | 26 -- .../ui-element-popover-input.component.less | 36 --- .../ui-element-popover-input.component.ts | 58 ----- .../elements-ui/ui-element-base.component.ts | 55 ---- .../filter-properties-assignment.component.html | 26 -- .../filter-properties-assignment.component.less | 45 ---- .../filter-properties-assignment.component.ts | 97 ------- .../hierarchy-display-options.ts | 32 --- .../hierarchy-navigation.component.html | 13 - .../hierarchy-navigation.component.less | 52 ---- .../hierarchy-navigation.component.ts | 48 ---- .../inputs-table/inputs-table.component.html | 49 ---- .../inputs-table/inputs-table.component.less | 164 ------------ .../inputs-table/inputs-table.component.ts | 64 ----- .../src/app/ng2/components/layout/layout.module.ts | 24 ++ .../layout/top-nav/top-nav.component.html | 53 ++++ .../layout/top-nav/top-nav.component.less | 225 +++++++++++++++++ .../components/layout/top-nav/top-nav.component.ts | 149 +++++++++++ .../ng2/components/loader/loader.component.html | 6 - .../ng2/components/loader/loader.component.less | 91 ------- .../app/ng2/components/loader/loader.component.ts | 86 ------- .../filter-properties-assignment.component.html | 27 ++ .../filter-properties-assignment.component.less | 45 ++++ .../filter-properties-assignment.component.ts | 97 +++++++ .../hierarchy-display-options.ts | 32 +++ .../hierarchy-navigation.component.html | 13 + .../hierarchy-navigation.component.less | 52 ++++ .../hierarchy-navigation.component.ts | 48 ++++ .../logic/inputs-table/inputs-table.component.html | 49 ++++ .../logic/inputs-table/inputs-table.component.less | 164 ++++++++++++ .../logic/inputs-table/inputs-table.component.ts | 62 +++++ .../dynamic-property.component.html | 67 +++++ .../dynamic-property.component.less | 84 +++++++ .../dynamic-property/dynamic-property.component.ts | 206 +++++++++++++++ .../pipes/filterChildProperties.pipe.ts | 38 +++ .../properties-table.component.html | 63 +++++ .../properties-table.component.less | 180 +++++++++++++ .../properties-table/properties-table.component.ts | 91 +++++++ .../properties-table/property-table.module.ts | 29 +++ ...select-reqiurement-or-capability.component.less | 77 ++++++ ...select-requirement-or-capability.component.html | 36 +++ .../select-requirement-or-capability.component.ts | 182 ++++++++++++++ .../select-requirement-or-capability.module.ts | 24 ++ .../error-message/error-message.component.html | 5 - .../modal/error-message/error-message.component.ts | 38 --- .../app/ng2/components/modal/modal.component.html | 20 -- .../app/ng2/components/modal/modal.component.less | 128 ---------- .../app/ng2/components/modal/modal.component.ts | 62 ----- .../src/app/ng2/components/modal/modal.module.ts | 22 -- .../popover/popover-content.component.html | 24 -- .../popover/popover-content.component.less | 77 ------ .../popover/popover-content.component.ts | 278 --------------------- .../ng2/components/popover/popover.component.ts | 179 ------------- .../app/ng2/components/popover/popover.module.ts | 47 ---- .../dynamic-property.component.html | 66 ----- .../dynamic-property.component.less | 74 ------ .../dynamic-property/dynamic-property.component.ts | 205 --------------- .../properties-table.component.html | 63 ----- .../properties-table.component.less | 166 ------------ .../properties-table/properties-table.component.ts | 92 ------- .../tooltip/tooltip-content.component.html | 12 - .../tooltip/tooltip-content.component.less | 11 - .../tooltip/tooltip-content.component.ts | 215 ---------------- .../ng2/components/tooltip/tooltip.component.ts | 109 -------- .../app/ng2/components/tooltip/tooltip.module.ts | 45 ---- .../dynamic-element/dynamic-element.component.less | 3 + .../dynamic-element/dynamic-element.component.ts | 140 +++++++++++ .../ui/dynamic-element/dynamic-element.module.ts | 43 ++++ .../checkbox/checkbox.component.html | 8 + .../checkbox/checkbox.component.less | 67 +++++ .../form-components/checkbox/checkbox.component.ts | 50 ++++ .../ui/form-components/checkbox/checkbox.module.ts | 48 ++++ .../dropdown/ui-element-dropdown.component.html | 3 + .../dropdown/ui-element-dropdown.component.less | 11 + .../dropdown/ui-element-dropdown.component.ts | 51 ++++ .../ui/form-components/form-elements.module.ts | 42 ++++ .../input/ui-element-input.component.html | 14 ++ .../input/ui-element-input.component.less | 17 ++ .../input/ui-element-input.component.ts | 41 +++ .../ui-element-integer-input.component.html | 14 ++ .../ui-element-integer-input.component.less | 17 ++ .../ui-element-integer-input.component.ts | 41 +++ .../ui-element-popover-input.component.html | 26 ++ .../ui-element-popover-input.component.less | 36 +++ .../ui-element-popover-input.component.ts | 57 +++++ .../radio-buttons/radio-button.component.less | 42 ++++ .../radio-buttons/radio-buttons.component.html | 8 + .../radio-buttons/radio-buttons.component.ts | 29 +++ .../form-components/ui-element-base.component.ts | 55 ++++ .../ng2/components/ui/loader/loader.component.html | 6 + .../ng2/components/ui/loader/loader.component.less | 91 +++++++ .../ng2/components/ui/loader/loader.component.ts | 86 +++++++ .../components/ui/menu/menu-item.component.html | 3 + .../components/ui/menu/menu-item.component.less | 13 + .../ng2/components/ui/menu/menu-item.component.ts | 44 ++++ .../components/ui/menu/menu-list.component.html | 9 + .../components/ui/menu/menu-list.component.less | 13 + .../ng2/components/ui/menu/menu-list.component.ts | 70 ++++++ .../app/ng2/components/ui/menu/menu-list.module.ts | 27 ++ .../error-message/error-message.component.html | 5 + .../modal/error-message/error-message.component.ts | 38 +++ .../ng2/components/ui/modal/modal.component.html | 21 ++ .../ng2/components/ui/modal/modal.component.less | 129 ++++++++++ .../app/ng2/components/ui/modal/modal.component.ts | 62 +++++ .../app/ng2/components/ui/modal/modal.module.ts | 22 ++ .../multi-steps-wizard-header-base.component.ts | 10 + .../multi-steps-wizard.component.html | 57 +++++ .../multi-steps-wizard.component.less | 90 +++++++ .../multi-steps-wizard.component.ts | 78 ++++++ .../multi-steps-wizard.module.ts | 22 ++ .../components/ui/navbar/navbar-routes.config.ts | 27 ++ .../ng2/components/ui/navbar/navbar.component.html | 23 ++ .../ng2/components/ui/navbar/navbar.component.less | 11 + .../ng2/components/ui/navbar/navbar.component.ts | 52 ++++ .../ng2/components/ui/navbar/navbar.metadata.ts | 31 +++ .../app/ng2/components/ui/navbar/navbar.module.ts | 36 +++ .../ui/popover/popover-content.component.html | 24 ++ .../ui/popover/popover-content.component.less | 77 ++++++ .../ui/popover/popover-content.component.ts | 278 +++++++++++++++++++++ .../ng2/components/ui/popover/popover.component.ts | 179 +++++++++++++ .../ng2/components/ui/popover/popover.module.ts | 45 ++++ .../ui/search-bar/search-bar.component.html | 5 + .../ui/search-bar/search-bar.component.less | 57 +++++ .../ui/search-bar/search-bar.component.ts | 32 +++ .../search-with-autocomplete.component.html | 6 + .../search-with-autocomplete.component.less | 34 +++ .../search-with-autocomplete.component.ts | 30 +++ .../ng2/components/ui/tabs/tab/tab.component.ts | 38 +++ .../app/ng2/components/ui/tabs/tabs.component.html | 9 + .../app/ng2/components/ui/tabs/tabs.component.less | 85 +++++++ .../app/ng2/components/ui/tabs/tabs.component.ts | 78 ++++++ .../src/app/ng2/components/ui/tabs/tabs.module.ts | 55 ++++ .../ui/tooltip/tooltip-content.component.html | 12 + .../ui/tooltip/tooltip-content.component.less | 11 + .../ui/tooltip/tooltip-content.component.ts | 215 ++++++++++++++++ .../ng2/components/ui/tooltip/tooltip.component.ts | 109 ++++++++ .../ng2/components/ui/tooltip/tooltip.module.ts | 44 ++++ .../app/ng2/components/ui/ui-elements.module.ts | 80 ++++++ .../app/ng2/config/sdc-config.config.factory.ts | 17 ++ catalog-ui/src/app/ng2/config/sdc-config.config.ts | 11 + .../config/translation.service.config.factory.ts | 13 + .../app/ng2/config/translation.service.config.ts | 8 + .../connection-properties-view.component.html | 4 + .../connection-properties-view.component.less | 4 + .../connection-properties-view.component.ts | 10 + .../connection-wizard-header.component.html | 36 +++ .../connection-wizard-header.component.less | 53 ++++ .../connection-wizard-header.component.ts | 37 +++ .../connection-wizard/connection-wizard.module.ts | 43 ++++ .../connection-wizard/connection-wizard.service.ts | 67 +++++ .../from-node-step/from-node-step.component.html | 8 + .../from-node-step/from-node-step.component.ts | 49 ++++ .../properties-step/properties-step.component.html | 13 + .../properties-step/properties-step.component.less | 15 ++ .../properties-step/properties-step.component.ts | 67 +++++ .../to-node-step/to-node-step.component.html | 9 + .../to-node-step/to-node-step.component.ts | 69 +++++ .../properties-assignment.module.ts | 69 ++--- .../properties-assignment.page.component.html | 9 +- .../properties-assignment.page.component.ts | 17 +- .../properties-assignment/properties.utils.ts | 181 -------------- .../services/hierarchy-nav.service.ts | 83 ++++++ .../services/properties.utils.ts | 188 ++++++++++++++ .../app/ng2/pipes/filterChildProperties.pipe.ts | 38 --- .../src/app/ng2/pipes/global-pipes.module.ts | 24 ++ .../src/app/ng2/services/authentication.service.ts | 13 +- .../component-instance.service.ts | 35 ++- .../src/app/ng2/services/component-mode.service.ts | 49 ---- .../component-services/component-mode.service.ts | 49 ++++ .../component-services/component.service.ts | 19 +- .../services/component-services/service.service.ts | 10 +- catalog-ui/src/app/ng2/services/config.service.ts | 12 +- catalog-ui/src/app/ng2/services/cookie.service.ts | 8 +- .../src/app/ng2/services/hierarchy-nav.service.ts | 83 ------ catalog-ui/src/app/ng2/services/http.service.ts | 14 +- catalog-ui/src/app/ng2/services/modal.service.ts | 41 ++- .../src/app/ng2/services/properties.service.ts | 8 +- catalog-ui/src/app/ng2/services/user.service.ts | 98 ++++++++ .../ng2/shared/checkbox/checkbox.component.html | 8 - .../ng2/shared/checkbox/checkbox.component.less | 67 ----- .../app/ng2/shared/checkbox/checkbox.component.ts | 50 ---- .../src/app/ng2/shared/checkbox/checkbox.module.ts | 48 ---- .../app/ng2/shared/navbar/navbar-routes.config.ts | 27 -- .../app/ng2/shared/navbar/navbar.component.html | 23 -- .../app/ng2/shared/navbar/navbar.component.less | 11 - .../src/app/ng2/shared/navbar/navbar.component.ts | 52 ---- .../src/app/ng2/shared/navbar/navbar.metadata.ts | 31 --- .../src/app/ng2/shared/navbar/navbar.module.ts | 36 --- .../shared/search-bar/search-bar.component.html | 5 - .../shared/search-bar/search-bar.component.less | 58 ----- .../ng2/shared/search-bar/search-bar.component.ts | 32 --- .../search-with-autocomplete.component.html | 6 - .../search-with-autocomplete.component.less | 35 --- .../search-with-autocomplete.component.ts | 30 --- catalog-ui/src/app/ng2/shared/shared.module.ts | 40 --- .../src/app/ng2/shared/tabs/tab/tab.component.ts | 38 --- .../src/app/ng2/shared/tabs/tabs.component.html | 9 - .../src/app/ng2/shared/tabs/tabs.component.less | 84 ------- .../src/app/ng2/shared/tabs/tabs.component.ts | 78 ------ catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts | 55 ---- .../app/ng2/shared/translator/translate.module.ts | 32 +++ .../app/ng2/shared/translator/translate.pipe.ts | 62 +++++ .../shared/translator/translate.service.config.ts | 30 +++ .../app/ng2/shared/translator/translate.service.ts | 235 +++++++++++++++++ .../src/app/ng2/utils/ng1-upgraded-provider.ts | 10 + catalog-ui/src/app/services.ts | 1 - .../app/services/components/component-service.ts | 28 ++- catalog-ui/src/app/services/entity-service.ts | 3 +- catalog-ui/src/app/services/loader-service.ts | 8 +- .../src/app/services/user-resource-service.ts | 123 --------- catalog-ui/src/app/utils/component-factory.ts | 19 +- .../src/app/utils/component-instance-factory.ts | 18 +- catalog-ui/src/app/utils/constants.ts | 5 + catalog-ui/src/app/utils/menu-handler.ts | 6 +- .../admin-dashboard/admin-dashboard-view.html | 1 - .../user-management/user-management-view-model.ts | 39 ++- .../user-management/user-management-view.html | 4 +- .../app/view-models/catalog/catalog-view-model.ts | 11 +- .../src/app/view-models/catalog/catalog-view.html | 30 +-- .../view-models/dashboard/dashboard-view-model.ts | 9 +- .../app/view-models/dashboard/dashboard-view.html | 28 +-- .../app/view-models/dcae-app/dcae-app-view.html | 2 +- .../env-parameters-form/env-parameters-form.html | 5 +- .../env-parameters-form/env-parameters-form.less | 4 +- .../env-parameters-form/env-parameters-form.ts | 19 +- .../property-form-view-model.ts | 3 +- .../onboarding-modal-view-model.ts | 1 + .../onboard-vendor/onboard-vendor-view.html | 3 +- .../tabs/composition/composition-view-model.ts | 16 +- .../tabs/composition/composition-view.html | 11 +- .../workspace/tabs/composition/composition.less | 111 +++----- .../tabs/artifacts/artifacts-view-model.ts | 10 +- .../composition/tabs/artifacts/artifacts-view.html | 7 +- .../composition/tabs/details/details-view.html | 11 +- .../tabs/composition/tabs/details/details.less | 2 +- .../workspace/tabs/general/general-view-model.ts | 26 ++ .../workspace/tabs/general/general-view.html | 32 ++- .../tabs/properties/properties-view-model.ts | 3 +- .../view-models/workspace/workspace-view-model.ts | 2 +- .../app/view-models/workspace/workspace-view.html | 10 +- .../src/app/view-models/workspace/workspace.less | 6 +- catalog-ui/src/assets/languages/en_US.json | 5 +- catalog-ui/src/assets/styles/app.less | 2 - .../images/resource-icons/dcae_machineLearning.png | Bin 0 -> 3710 bytes .../styles/images/resource-icons/networkrules.png | Bin 2920 -> 2907 bytes .../assets/styles/images/resource-icons/pmc.png | Bin 0 -> 1453 bytes .../styles/images/resource-icons/securityrules.png | Bin 2965 -> 2980 bytes .../images/service-proxy-icons/call_controll.png | Bin 0 -> 3929 bytes .../images/service-proxy-icons/collaboration.png | Bin 0 -> 4443 bytes .../styles/images/service-proxy-icons/compute.png | Bin 0 -> 3834 bytes .../images/service-proxy-icons/defaulticon.png | Bin 0 -> 2879 bytes .../images/service-proxy-icons/messaging.png | Bin 0 -> 3147 bytes .../styles/images/service-proxy-icons/mobility.png | Bin 0 -> 3771 bytes .../images/service-proxy-icons/network_l_1-3.png | Bin 0 -> 3761 bytes .../images/service-proxy-icons/network_l_4.png | Bin 0 -> 3662 bytes .../images/service-proxy-icons/notification.png | Bin 0 -> 3379 bytes .../styles/images/service-proxy-icons/platform.png | Bin 0 -> 4309 bytes .../styles/images/service-proxy-icons/storage.png | Bin 0 -> 3841 bytes .../images/service-proxy-icons/uncertified.png | Bin 0 -> 1503 bytes .../assets/styles/images/sprites/sprite-global.png | Bin 98178 -> 100635 bytes .../images/sprites/sprite-resource-icons.png | Bin 476775 -> 490295 bytes .../images/sprites/sprite-services-icons.png | Bin 127233 -> 154466 bytes catalog-ui/src/assets/styles/layout/main.less | 11 +- catalog-ui/src/assets/styles/mixins.less | 2 +- catalog-ui/src/assets/styles/modal.less | 6 +- .../assets/styles/sprite-proxy-services-icons.less | 40 +++ .../src/assets/styles/sprite-resource-icons.less | 15 +- catalog-ui/src/assets/styles/sprite.less | 11 + catalog-ui/src/assets/styles/tooltips.less | 13 + catalog-ui/src/main.ts | 5 +- catalog-ui/src/tsconfig.json | 3 +- 354 files changed, 8551 insertions(+), 6168 deletions(-) delete mode 100644 catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.html delete mode 100644 catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.less delete mode 100644 catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.ts delete mode 100644 catalog-ui/src/app/directives/layout/top-nav/top-nav.html delete mode 100644 catalog-ui/src/app/directives/layout/top-nav/top-nav.less delete mode 100644 catalog-ui/src/app/directives/layout/top-nav/top-nav.ts create mode 100644 catalog-ui/src/app/models/componentsInstances/serviceProxyInstance.ts create mode 100644 catalog-ui/src/app/models/graph/connectRelationModel.ts create mode 100644 catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-configuration.ts create mode 100644 catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service-proxy.ts delete mode 100644 catalog-ui/src/app/models/graph/relationMenuObjects.ts create mode 100644 catalog-ui/src/app/models/radio-button.ts create mode 100644 catalog-ui/src/app/models/wizard-step.ts create mode 100644 catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.html create mode 100644 catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts create mode 100644 catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.module.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.html delete mode 100644 catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less delete mode 100644 catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts delete mode 100644 catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html delete mode 100644 catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less delete mode 100644 catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html delete mode 100644 catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less delete mode 100644 catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts create mode 100644 catalog-ui/src/app/ng2/components/layout/layout.module.ts create mode 100644 catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html create mode 100644 catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less create mode 100644 catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/loader/loader.component.html delete mode 100644 catalog-ui/src/app/ng2/components/loader/loader.component.less delete mode 100644 catalog-ui/src/app/ng2/components/loader/loader.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-display-options.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/pipes/filterChildProperties.pipe.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts delete mode 100644 catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html delete mode 100644 catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/modal/modal.component.html delete mode 100644 catalog-ui/src/app/ng2/components/modal/modal.component.less delete mode 100644 catalog-ui/src/app/ng2/components/modal/modal.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/modal/modal.module.ts delete mode 100644 catalog-ui/src/app/ng2/components/popover/popover-content.component.html delete mode 100644 catalog-ui/src/app/ng2/components/popover/popover-content.component.less delete mode 100644 catalog-ui/src/app/ng2/components/popover/popover-content.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/popover/popover.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/popover/popover.module.ts delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html delete mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less delete mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-button.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/loader/loader.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/loader/loader.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-list.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/modal/modal.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/modal/modal.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/navbar/navbar-routes.config.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/navbar/navbar.metadata.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/navbar/navbar.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/popover/popover.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/popover/popover.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/tabs/tabs.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts create mode 100644 catalog-ui/src/app/ng2/config/sdc-config.config.factory.ts create mode 100644 catalog-ui/src/app/ng2/config/sdc-config.config.ts create mode 100644 catalog-ui/src/app/ng2/config/translation.service.config.factory.ts create mode 100644 catalog-ui/src/app/ng2/config/translation.service.config.ts create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.html create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.less create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.html create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.less create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.module.ts create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.service.ts create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.html create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.html create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.less create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.html create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.ts delete mode 100644 catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts create mode 100644 catalog-ui/src/app/ng2/pages/properties-assignment/services/hierarchy-nav.service.ts create mode 100644 catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts delete mode 100644 catalog-ui/src/app/ng2/pipes/filterChildProperties.pipe.ts create mode 100644 catalog-ui/src/app/ng2/pipes/global-pipes.module.ts delete mode 100644 catalog-ui/src/app/ng2/services/component-mode.service.ts create mode 100644 catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts delete mode 100644 catalog-ui/src/app/ng2/services/hierarchy-nav.service.ts create mode 100644 catalog-ui/src/app/ng2/services/user.service.ts delete mode 100644 catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html delete mode 100644 catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less delete mode 100644 catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts delete mode 100644 catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts delete mode 100644 catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts delete mode 100644 catalog-ui/src/app/ng2/shared/navbar/navbar.component.html delete mode 100644 catalog-ui/src/app/ng2/shared/navbar/navbar.component.less delete mode 100644 catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts delete mode 100644 catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts delete mode 100644 catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts delete mode 100644 catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html delete mode 100644 catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less delete mode 100644 catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts delete mode 100644 catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html delete mode 100644 catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less delete mode 100644 catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts delete mode 100644 catalog-ui/src/app/ng2/shared/shared.module.ts delete mode 100644 catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts delete mode 100644 catalog-ui/src/app/ng2/shared/tabs/tabs.component.html delete mode 100644 catalog-ui/src/app/ng2/shared/tabs/tabs.component.less delete mode 100644 catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts delete mode 100644 catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts create mode 100644 catalog-ui/src/app/ng2/shared/translator/translate.module.ts create mode 100644 catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts create mode 100644 catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts create mode 100644 catalog-ui/src/app/ng2/shared/translator/translate.service.ts delete mode 100644 catalog-ui/src/app/services/user-resource-service.ts create mode 100644 catalog-ui/src/assets/styles/images/resource-icons/dcae_machineLearning.png create mode 100644 catalog-ui/src/assets/styles/images/resource-icons/pmc.png create mode 100644 catalog-ui/src/assets/styles/images/service-proxy-icons/call_controll.png create mode 100644 catalog-ui/src/assets/styles/images/service-proxy-icons/collaboration.png create mode 100644 catalog-ui/src/assets/styles/images/service-proxy-icons/compute.png create mode 100644 catalog-ui/src/assets/styles/images/service-proxy-icons/defaulticon.png create mode 100644 catalog-ui/src/assets/styles/images/service-proxy-icons/messaging.png create mode 100644 catalog-ui/src/assets/styles/images/service-proxy-icons/mobility.png create mode 100644 catalog-ui/src/assets/styles/images/service-proxy-icons/network_l_1-3.png create mode 100644 catalog-ui/src/assets/styles/images/service-proxy-icons/network_l_4.png create mode 100644 catalog-ui/src/assets/styles/images/service-proxy-icons/notification.png create mode 100644 catalog-ui/src/assets/styles/images/service-proxy-icons/platform.png create mode 100644 catalog-ui/src/assets/styles/images/service-proxy-icons/storage.png create mode 100644 catalog-ui/src/assets/styles/images/service-proxy-icons/uncertified.png create mode 100644 catalog-ui/src/assets/styles/sprite-proxy-services-icons.less (limited to 'catalog-ui') diff --git a/catalog-ui/configurations/dev.js b/catalog-ui/configurations/dev.js index b68842c3fc..8367963adf 100644 --- a/catalog-ui/configurations/dev.js +++ b/catalog-ui/configurations/dev.js @@ -61,7 +61,7 @@ const SDC_CONFIG = { }, "resourceTypesFilter":{ "resource":["CP","VFC","VL"], - "service":["CP","VF","VL", "PNF","CVFC"] + "service":["CP","VF","VL", "PNF","CVFC","SERVICE", "Configuration"] }, "logConfig": { "minLogLevel": "debug", diff --git a/catalog-ui/configurations/prod.js b/catalog-ui/configurations/prod.js index 971263b710..0891f8d572 100644 --- a/catalog-ui/configurations/prod.js +++ b/catalog-ui/configurations/prod.js @@ -61,7 +61,7 @@ const SDC_CONFIG = { }, "resourceTypesFilter":{ "resource":["CP","VFC","VL"], - "service":["CP","VF","VL", "PNF","CVFC"] + "service":["CP","VF","VL", "PNF","CVFC","SERVICE","Configuration"] }, "logConfig": { "minLogLevel": "debug", diff --git a/catalog-ui/package.json b/catalog-ui/package.json index d384a9c119..9dd0620ea9 100644 --- a/catalog-ui/package.json +++ b/catalog-ui/package.json @@ -45,7 +45,7 @@ "raw-loader": "^0.5.1", "sass-loader": "^4.1.1", "script-loader": "^0.7.0", - "sdc-ui": "1.6.2", + "sdc-ui": "1.6.9", "source-map-loader": "^0.1.5", "style-loader": "^0.13.1", "url-loader": "^0.5.7", diff --git a/catalog-ui/src/app/app.ts b/catalog-ui/src/app/app.ts index 805e5f0b5d..609ed48f3e 100644 --- a/catalog-ui/src/app/app.ts +++ b/catalog-ui/src/app/app.ts @@ -31,18 +31,17 @@ import './modules/service-module'; import './modules/view-model-module.ts'; import { - IUserResourceClass, DataTypesService, LeftPaletteLoaderService, EcompHeaderService, CookieService, ConfigurationUiService, CacheService, - IUserResource, SdcVersionService, ICategoryResourceClass, EntityService } from "./services"; +import { UserService } from "./ng2/services/user.service"; import {forwardRef} from '@angular/core'; import {UpgradeAdapter} from '@angular/upgrade'; import {CHANGE_COMPONENT_CSAR_VERSION_FLAG, States} from "./utils"; @@ -53,11 +52,12 @@ import {downgradeComponent} from "@angular/upgrade/static"; import {AppModule} from './ng2/app.module'; import {PropertiesAssignmentComponent} from "./ng2/pages/properties-assignment/properties-assignment.page.component"; -import { SearchWithAutoCompleteComponent } from "./ng2/shared/search-with-autocomplete/search-with-autocomplete.component"; import {Component} from "./models/components/component"; import {ComponentServiceNg2} from "./ng2/services/component-services/component.service"; import {ComponentMetadata} from "./models/component-metadata"; import {Categories} from "./models/categories"; +import {IUserProperties} from "./models/user"; +import {SearchWithAutoCompleteComponent} from "./ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component"; let moduleName:string = 'sdcApp'; @@ -225,7 +225,13 @@ ng1appModule.config([ resolve: { injectComponent: ['$stateParams', 'ComponentFactory', 'ComponentServiceNg2', function ($stateParams, ComponentFactory:ComponentFactory, ComponentServiceNg2:ComponentServiceNg2) { if ($stateParams.id) { - return ComponentFactory.getComponentWithMetadataFromServer($stateParams.type.toUpperCase(), $stateParams.id); + return ComponentFactory.getComponentWithMetadataFromServer($stateParams.type.toUpperCase(), $stateParams.id).then( + (component:Component)=> { + if ($stateParams.componentCsar){ + component = ComponentFactory.updateComponentFromCsar($stateParams.componentCsar, component); + } + return component; + }); } else if ($stateParams.componentCsar && $stateParams.componentCsar.csarUUID) { return $stateParams.componentCsar; } else { @@ -546,8 +552,8 @@ ng1appModule.config([ templateUrl: './view-models/catalog/catalog-view.html', controller: viewModelsModuleName + '.CatalogViewModel', resolve: { - auth: ["$q", "Sdc.Services.UserResourceService", ($q:any, userResourceService:IUserResourceClass) => { - let userInfo:IUserResource = userResourceService.getLoggedinUser(); + auth: ["$q", "UserServiceNg2", ($q:any, userService:UserService) => { + let userInfo:IUserProperties = userService.getLoggedinUser(); if (userInfo) { return $q.when(userInfo); } else { @@ -592,6 +598,7 @@ ng1appModule.value('TagValidationPattern', /^[\s\w_.-]{1,50}$/); ng1appModule.value('VendorReleaseValidationPattern', /^[\x20-\x21\x23-\x29\x2B-\x2E\x30-\x39\x3B\x3D\x40-\x5B\x5D-\x7B\x7D-\xFF]{1,25}$/); ng1appModule.value('VendorNameValidationPattern', /^[\x20-\x21\x23-\x29\x2B-\x2E\x30-\x39\x3B\x3D\x40-\x5B\x5D-\x7B\x7D-\xFF]{1,60}$/); ng1appModule.value('VendorModelNumberValidationPattern', /^[\x20-\x21\x23-\x29\x2B-\x2E\x30-\x39\x3B\x3D\x40-\x5B\x5D-\x7B\x7D-\xFF]{1,65}$/); +ng1appModule.value('ServiceTypeAndRoleValidationPattern', /^[\x20-\x21\x23-\x29\x2B-\x2E\x30-\x39\x3B\x3D\x40-\x5B\x5D-\x7B\x7D-\xFF]{1,256}$/); ng1appModule.value('ContactIdValidationPattern', /^[\s\w-]{1,50}$/); ng1appModule.value('UserIdValidationPattern', /^[\s\w-]{1,50}$/); ng1appModule.value('ProjectCodeValidationPattern', /^[\s\w-]{5,50}$/); @@ -614,7 +621,7 @@ ng1appModule.run([ 'Sdc.Services.CacheService', 'Sdc.Services.CookieService', 'Sdc.Services.ConfigurationUiService', - 'Sdc.Services.UserResourceService', + 'UserServiceNg2', 'Sdc.Services.CategoryResourceService', 'Sdc.Services.SdcVersionService', '$state', @@ -631,7 +638,7 @@ ng1appModule.run([ cacheService:CacheService, cookieService:CookieService, ConfigurationUi:ConfigurationUiService, - UserResourceClass:IUserResourceClass, + userService:UserService, categoryResourceService:ICategoryResourceClass, sdcVersionService:SdcVersionService, $state:ng.ui.IStateService, @@ -644,6 +651,7 @@ ng1appModule.run([ DataTypesService:DataTypesService, AngularJSBridge, $templateCache:ng.ITemplateCacheService):void => { + $templateCache.put('notification-custom-template.html', require('./view-models/shared/notification-custom-template.html')); $templateCache.put('notification-custom-template.html', require('./view-models/shared/notification-custom-template.html')); //handle cache data - version let initAsdcVersion:Function = ():void => { @@ -756,27 +764,27 @@ ng1appModule.run([ toParams.previousState = fromParams.previousState; } - if (toState.name !== 'error-403' && !UserResourceClass.getLoggedinUser()) { + if (toState.name !== 'error-403' && !userService.getLoggedinUser()) { internalDeregisterStateChangeStartWatcher(); event.preventDefault(); - UserResourceClass.authorize().$promise.then((user:IUserResource) => { - if (!doesUserHasAccess(toState, user)) { + userService.authorize().subscribe((userInfo:IUserProperties) => { + if (!doesUserHasAccess(toState, userInfo)) { $state.go('error-403'); console.info('User has no permissions'); registerStateChangeStartWatcher(); return; } - UserResourceClass.setLoggedinUser(user); - cacheService.set('user', user); + userService.setLoggedinUser(userInfo); + cacheService.set('user', userInfo); initCategories(); - // initEcompMenu(user); + // initEcompMenu(userInfo); setTimeout(function () { removeLoader(); // initCategories(); - if (UserResourceClass.getLoggedinUser().role === 'ADMIN') { + if (userService.getLoggedinUser().role === 'ADMIN') { // toState.name = "adminDashboard"; $state.go("adminDashboard", toParams); registerStateChangeStartWatcher(); @@ -804,9 +812,9 @@ ng1appModule.run([ registerStateChangeStartWatcher(); }); } - else if (UserResourceClass.getLoggedinUser()) { + else if (userService.getLoggedinUser()) { internalDeregisterStateChangeStartWatcher(); - if (!doesUserHasAccess(toState, UserResourceClass.getLoggedinUser())) { + if (!doesUserHasAccess(toState, userService.getLoggedinUser())) { event.preventDefault(); $state.go('error-403'); console.info('User has no permissions'); diff --git a/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-directive.ts b/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-directive.ts index 1c5c333d27..14cafa98c4 100644 --- a/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-directive.ts +++ b/catalog-ui/src/app/directives/capabilities-and-requirements/requirement/requirements-list-directive.ts @@ -28,7 +28,7 @@ * Created by obarda on 1/8/2017. */ 'use strict'; -import {RequirementsGroup, Component} from "app/models"; +import {RequirementsGroup, Component, Relationship, RelationshipModel} from "app/models"; export interface IRequirementsListScope extends ng.IScope { @@ -62,12 +62,11 @@ export class RequirementsListDirective implements ng.IDirective { scope.getRelation = (requirement:any):any => { if (scope.isInstanceSelected() && scope.component.componentInstancesRelations) { - let relationItem = _.filter(scope.component.componentInstancesRelations, (relation:any) => { + let relationItem:Array = _.filter((scope.component).componentInstancesRelations, (relation:RelationshipModel) => { return relation.fromNode === scope.component.selectedInstance.uniqueId && - _.some(relation.relationships, { - 'requirement': requirement.name, - 'requirementOwnerId': requirement.ownerId - }); + _.filter(relation.relationships, (relationship:Relationship) => { + return relationship.relation.requirement == requirement.name && relationship.relation.requirementOwnerId == requirement.ownerId; + }).length; }); if (relationItem && relationItem.length) { diff --git a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.html b/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.html deleted file mode 100644 index a50731443d..0000000000 --- a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.html +++ /dev/null @@ -1,8 +0,0 @@ -
-
-
-

-

-
-
-
diff --git a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.less b/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.less deleted file mode 100644 index 4c54a11fec..0000000000 --- a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.less +++ /dev/null @@ -1,47 +0,0 @@ - -.footer-wrapper { - position: fixed; - bottom: 0px; - left: 0px; - width: 100%; - background-color: #222222; - color: #ffffff; - font-family: "Arial"; - font-size: 11px; - height: @footer_height; -} - -.footer-wrapper a { - color: #ffffff; - margin: 0; - padding: 0; - text-decoration: underline; -} - -.divider-footer-bottom { - margin: 0 auto; - width: 1020px; -} - -.footer-copyright-text { - display: inline-block; - width:612px; - margin-top: 18px; - margin-left: 50px; - text-align: left; - vertical-align: top; -} - -.footer-logo1 { - display: inline-block; - margin-top: 20px; - margin-left: 124px; -} - -.footer-logo2 { - margin-top: 22px; - margin-left: 9px; - display: inline-block; - font-size: 24px; - vertical-align: top; -} diff --git a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.ts b/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.ts deleted file mode 100644 index 7796f60d70..0000000000 --- a/catalog-ui/src/app/directives/ecomp-footer/ecomp-footer.ts +++ /dev/null @@ -1,53 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * 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========================================================= - */ - -'use strict'; -import {IAppConfigurtaion} from "app/models"; - -export interface IEcompFooterDirectiveScope extends ng.IScope { - -} - -export class EcompFooterDirective implements ng.IDirective { - - constructor(private sdcConfig:IAppConfigurtaion) { - - } - - public replace = true; - public restrict = 'E'; - - public scope = {}; - - template = ():string => { - return require('./ecomp-footer.html'); - }; - - link = (scope:IEcompFooterDirectiveScope, $elem:JQuery, attr:any) => { - - }; - - public static factory = (sdcConfig:IAppConfigurtaion)=> { - return new EcompFooterDirective(sdcConfig); - }; - -} - -EcompFooterDirective.factory.$inject = ['sdcConfig']; diff --git a/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts index 7d616afba6..f73c82a190 100644 --- a/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts +++ b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts @@ -20,7 +20,8 @@ 'use strict'; import {IAppConfigurtaion, User, IUser} from "app/models"; -import {IUserResourceClass, IUserResource} from "app/services"; +import {IUserProperties} from "../../models/user"; +import {UserService} from "../../ng2/services/user.service"; export class MenuItem { menuId:number; @@ -55,7 +56,7 @@ export class EcompHeaderDirective implements ng.IDirective { constructor(private $http:ng.IHttpService, private sdcConfig:IAppConfigurtaion, - private UserResourceClass:IUserResourceClass) { + private userService:UserService) { } @@ -90,14 +91,14 @@ export class EcompHeaderDirective implements ng.IDirective { let initUser = ():void => { let defaultUserId:string; - let user:IUserResource = this.UserResourceClass.getLoggedinUser(); - if (!user) { + let userInfo:IUserProperties = this.userService.getLoggedinUser(); + if (!userInfo) { defaultUserId = this.$http.defaults.headers.common[this.sdcConfig.cookie.userIdSuffix]; - user = this.UserResourceClass.get({id: defaultUserId}, ():void => { - $scope.user = new User(user); + this.userService.getUser(defaultUserId).subscribe((defaultUserInfo):void => { + $scope.user = new User(defaultUserInfo); }); } else { - $scope.user = new User(user); + $scope.user = new User(userInfo); } }; @@ -135,8 +136,8 @@ export class EcompHeaderDirective implements ng.IDirective { public static factory = ($http:ng.IHttpService, sdcConfig:IAppConfigurtaion, - UserResourceClass:IUserResourceClass)=> { - return new EcompHeaderDirective($http, sdcConfig, UserResourceClass); + userService:UserService)=> { + return new EcompHeaderDirective($http, sdcConfig, userService); }; } @@ -229,7 +230,7 @@ export class EcompHeaderController { }; } -EcompHeaderDirective.factory.$inject = ['$http', 'sdcConfig', 'Sdc.Services.UserResourceService']; +EcompHeaderDirective.factory.$inject = ['$http', 'sdcConfig', 'UserServiceNg2']; diff --git a/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts b/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts index f88db47524..2a7fd74e53 100644 --- a/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts +++ b/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts @@ -164,12 +164,54 @@ export class CommonGraphUtils { if (!this.isRelationCertified(cy.nodes(), link.source, link.target)) { link.classes = 'not-certified-link'; } - cy.add({ + let linkElement = cy.add({ group: 'edges', data: link, classes: link.classes }); + this.initLinkTooltip(linkElement, link); + }; + + /** + * This function will init qtip tooltip on the link + * @params linkElement - the link we want the tooltip to apply on, + * link - the link obj + */ + public initLinkTooltip(linkElement:Cy.CollectionElements, link:CompositionCiLinkBase) { + + let opts = { + content: function () { + return '
' + + 'R: ' + + ''+ link.relation.relationships[0].relation.requirement + '' + + '
' + + '
' + + '
' + + 'C: ' + + '' + link.relation.relationships[0].relation.capability + '' + + '
'; + }, + position: { + my: 'top center', + at: 'bottom center', + adjust: {x:0, y:0} + }, + style: { + classes: 'qtip-dark qtip-rounded qtip-custom link-qtip', + tip: { + width: 16, + height: 8 + } + }, + show: { + event: 'mouseover', + delay: 1000 + }, + hide: {event: 'mouseout mousedown'}, + includeLabels: true + }; + linkElement.qtip(opts); }; /** diff --git a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts b/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts index 7e21f8293b..36c75c55fc 100644 --- a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts +++ b/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts @@ -225,6 +225,23 @@ export class ComponentInstanceNodesStyle { css: { 'overlay-opacity': 0 } + }, { + selector: '.configuration-node', + css: { + 'background-color': 'rgb(255,255,255)', + 'shape': 'rectangle', + 'label': 'data(displayName)', + 'background-image': 'data(img)', + 'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH, + 'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH, + 'width': GraphUIObjects.SMALL_RESOURCE_WIDTH, + 'height': GraphUIObjects.SMALL_RESOURCE_WIDTH, + 'text-valign': 'bottom', + 'text-halign': 'center', + 'background-opacity': 0, + 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR, + 'overlay-opacity': 0 + } } ] } diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts index 8b3a59ec1f..cdb163bda1 100644 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts +++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts @@ -19,14 +19,20 @@ */ import { - MatchBase, + Match, LinkMenu, ComponentInstance, LeftPaletteComponent, + Capability, + Requirement, + Relationship, + PropertyModel, Component, - RelationMenuDirectiveObj, + ConnectRelationModel, CompositionCiNodeBase, CompositionCiNodeVl, + ModalModel, + ButtonModel, NodesFactory/*, AssetPopoverObj*/ } from "app/models"; @@ -42,6 +48,18 @@ import {ComponentInstanceNodesStyle} from "../common/style/component-instances-n import {CytoscapeEdgeEditation} from 'third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js'; import {ComponentServiceNg2} from "../../../ng2/services/component-services/component.service"; import {ComponentGenericResponse} from "../../../ng2/services/responses/component-generic-response"; +import {ModalService} from "../../../ng2/services/modal.service"; + +import {ConnectionWizardService} from "../../../ng2/pages/connection-wizard/connection-wizard.service"; +import {StepModel} from "../../../models/wizard-step"; +import {FromNodeStepComponent} from "app/ng2/pages/connection-wizard/from-node-step/from-node-step.component"; +import {PropertiesStepComponent} from "app/ng2/pages/connection-wizard/properties-step/properties-step.component"; +import {ToNodeStepComponent} from "app/ng2/pages/connection-wizard/to-node-step/to-node-step.component"; +import {ConnectionWizardHeaderComponent} from "app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component"; +import {ConnectionPropertiesViewComponent} from "../../../ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component"; +import {ComponentInstanceServiceNg2} from "../../../ng2/services/component-instance-services/component-instance.service"; +import {EVENTS} from "../../../utils/constants"; +import {PropertyBEModel} from "../../../models/properties-inputs/property-be-model"; interface ICompositionGraphScope extends ng.IScope { @@ -50,9 +68,10 @@ interface ICompositionGraphScope extends ng.IScope { isViewOnly: boolean; withSidebar: boolean; // Link menu - create link menu - relationMenuDirectiveObj:RelationMenuDirectiveObj; + relationMenuDirectiveObj:ConnectRelationModel; isLinkMenuOpen:boolean; - createLinkFromMenu:(chosenMatch:MatchBase, vl:Component)=>void; + createLinkFromMenu:(chosenMatch:Match, vl:Component)=>void; + saveChangedCapabilityProperties:()=>Promise; //modify link menu - for now only delete menu relationMenuTimeout:ng.IPromise; @@ -64,6 +83,7 @@ interface ICompositionGraphScope extends ng.IScope { verifyDrop(event:JQueryEventObject, ui:any):void; //Links menus + viewRelation(link:Cy.CollectionEdges):void; deleteRelation(link:Cy.CollectionEdges):void; hideRelationMenu(); @@ -73,6 +93,8 @@ interface ICompositionGraphScope extends ng.IScope { zoomAll(nodes?:Cy.CollectionNodes): void; getAutoCompleteValues(searchTerm: string):void; highlightSearchMatches(searchTerm: string): void; + + canvasMenuProps:any; /*//asset popover menu assetPopoverObj:AssetPopoverObj; @@ -102,7 +124,10 @@ export class CompositionGraph implements ng.IDirective { private commonGraphUtils:CommonGraphUtils, private matchCapabilitiesRequirementsUtils:MatchCapabilitiesRequirementsUtils, private CompositionGraphPaletteUtils:CompositionGraphPaletteUtils, - private ComponentServiceNg2: ComponentServiceNg2) { + private ComponentServiceNg2: ComponentServiceNg2, + private ModalServiceNg2: ModalService, + private ConnectionWizardServiceNg2: ConnectionWizardService, + private ComponentInstanceServiceNg2: ComponentInstanceServiceNg2) { } @@ -131,6 +156,8 @@ export class CompositionGraph implements ng.IDirective { _.forEach(GRAPH_EVENTS, (event) => { this.eventListenerService.unRegisterObserver(event); }); + this.eventListenerService.unRegisterObserver(EVENTS.SHOW_LOADER_EVENT + 'composition-graph'); + this.eventListenerService.unRegisterObserver(EVENTS.HIDE_LOADER_EVENT + 'composition-graph'); }); }; @@ -190,7 +217,7 @@ export class CompositionGraph implements ng.IDirective { if (this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(leftPaletteComponent.uniqueId)) { let cacheComponent = this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(leftPaletteComponent.uniqueId); - let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findByMatchingCapabilitiesToRequirements(cacheComponent, nodesData, nodesLinks); + let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodes(cacheComponent, nodesData, nodesLinks); this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy); this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy); @@ -207,7 +234,7 @@ export class CompositionGraph implements ng.IDirective { component.capabilities = response.capabilities; component.requirements = response.requirements; this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.setValue(leftPaletteComponent.uniqueId, component); - let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findByMatchingCapabilitiesToRequirements(component, nodesData, nodesLinks); + let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodes(component, nodesData, nodesLinks); this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy); this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy) }); @@ -321,18 +348,124 @@ export class CompositionGraph implements ng.IDirective { scope.zoomAll(matchingNodes); }; - scope.createLinkFromMenu = (chosenMatch:MatchBase):void => { + scope.saveChangedCapabilityProperties = ():Promise => { + return new Promise((resolve) => { + const capabilityPropertiesBE: PropertyBEModel[] = this.ConnectionWizardServiceNg2.changedCapabilityProperties.map((prop) => { + prop.value = prop.getJSONValue(); + const propBE = new PropertyBEModel(prop); + propBE.parentUniqueId = this.ConnectionWizardServiceNg2.selectedMatch.relationship.relation.capabilityOwnerId; + return propBE; + }); + if (capabilityPropertiesBE.length > 0) { + // if there are capability properties to update, then first update capability properties and then resolve promise + this.ComponentInstanceServiceNg2 + .updateInstanceCapabilityProperties( + scope.component, + this.ConnectionWizardServiceNg2.selectedMatch.toNode, + this.ConnectionWizardServiceNg2.selectedMatch.capability.type, + this.ConnectionWizardServiceNg2.selectedMatch.capability.name, + capabilityPropertiesBE + ) + .subscribe((response) => { + console.log("Update resource instance capability properties response: ", response); + response.forEach((resProperty) => { + this.ConnectionWizardServiceNg2.selectedMatch.capabilityProperties.find((property) => { + return property.uniqueId == resProperty.uniqueId; + }).value = resProperty.value; + }); + this.ConnectionWizardServiceNg2.changedCapabilityProperties = []; + resolve(capabilityPropertiesBE); + }); + } else { + // no capability properties to update, immediately resolve promise + resolve(capabilityPropertiesBE); + } + }); + }; + + scope.createLinkFromMenu = ():void => { scope.isLinkMenuOpen = false; - this.CompositionGraphLinkUtils.createLinkFromMenu(this._cy, chosenMatch, scope.component); + + scope.saveChangedCapabilityProperties().then(() => { + //create link: + this.CompositionGraphLinkUtils + .createLinkFromMenu(this._cy, this.ConnectionWizardServiceNg2.selectedMatch, scope.component); + }); }; scope.hideRelationMenu = () => { this.commonGraphUtils.safeApply(scope, () => { - scope.linkMenuObject = null; + delete scope.canvasMenuProps; this.$timeout.cancel(scope.relationMenuTimeout); }); }; + scope.viewRelation = (link:Cy.CollectionEdges) => { + scope.hideRelationMenu(); + + const linkData = link.data(); + const sourceNode:CompositionCiNodeBase = link.source().data(); + const targetNode:CompositionCiNodeBase = link.target().data(); + const relationship:Relationship = linkData.relation.relationships[0]; + + let capability:Capability; + _.some(_.values(targetNode.componentInstance.capabilities), (capGroup) => { + //item.uniqueId + item.ownerId + item.name === (selectedReqOrCapModel.uniqueId + selectedReqOrCapModel.ownerId + selectedReqOrCapModel.name) + capability = _.find(_.values(capGroup), (cap:Capability) => ( + cap.uniqueId === relationship.relation.capabilityUid && + cap.ownerId === relationship.relation.capabilityOwnerId && + cap.name === relationship.relation.capability + )); + return capability; + }); + let requirement:Requirement; + _.some(_.values(sourceNode.componentInstance.requirements), (reqGroup) => { + requirement = _.find(_.values(reqGroup), (req:Requirement) => ( + req.uniqueId === relationship.relation.requirementUid && + req.ownerId === relationship.relation.requirementOwnerId && + req.name === relationship.relation.requirement + )); + return requirement; + }); + + new Promise<{capability:Capability, requirement:Requirement}>((resolve, reject) => { + if (capability && requirement) { + resolve({capability, requirement}); + } + else { + scope.component.fetchRelation(relationship.relation.id).then((fetchedRelation) => { + resolve({ + capability: fetchedRelation.relationships[0].capability, + requirement: fetchedRelation.relationships[0].requirement + }); + }, reject); + } + }).then((objReqCap) => { + capability = objReqCap.capability; + requirement = objReqCap.requirement; + + this.ConnectionWizardServiceNg2.currentComponent = scope.component; + this.ConnectionWizardServiceNg2.connectRelationModel = new ConnectRelationModel(sourceNode, targetNode, []); + this.ConnectionWizardServiceNg2.selectedMatch = new Match(requirement, capability, true, linkData.source, linkData.target); + this.ConnectionWizardServiceNg2.selectedMatch.relationship = relationship; + + const title = `Connection Properties`; + const saveButton: ButtonModel = new ButtonModel('Save', 'blue', () => { + scope.saveChangedCapabilityProperties().then(() => { this.ModalServiceNg2.closeCurrentModal(); }) + }); + const cancelButton: ButtonModel = new ButtonModel('Cancel', 'white', () => { this.ModalServiceNg2.closeCurrentModal(); }); + const modal = new ModalModel('xl', title, '', [saveButton, cancelButton]); + const modalInstance = this.ModalServiceNg2.createCustomModal(modal); + this.ModalServiceNg2.addDynamicContentToModal(modalInstance, ConnectionPropertiesViewComponent); + modalInstance.instance.open(); + + this.ComponentInstanceServiceNg2.getInstanceCapabilityProperties(scope.component, linkData.target, capability.type, capability.name) + .subscribe((response: Array) => { + this.ConnectionWizardServiceNg2.selectedMatch.capabilityProperties = response; + this.ModalServiceNg2.addDynamicContentToModal(modalInstance, ConnectionPropertiesViewComponent); + }, (error) => {}); + }, (error) => {}); + }; scope.deleteRelation = (link:Cy.CollectionEdges) => { scope.hideRelationMenu(); @@ -367,9 +500,26 @@ export class CompositionGraph implements ng.IDirective { this._cy.on('addedgemouseup', (event, data) => { scope.relationMenuDirectiveObj = this.CompositionGraphLinkUtils.onLinkDrawn(this._cy, data.source, data.target); if (scope.relationMenuDirectiveObj != null) { - scope.$apply(() => { - scope.isLinkMenuOpen = true; - }); + this.ConnectionWizardServiceNg2.setRelationMenuDirectiveObj(scope.relationMenuDirectiveObj); + this.ConnectionWizardServiceNg2.currentComponent = scope.component; + //TODO: init with the selected values + this.ConnectionWizardServiceNg2.selectedMatch = null; + + let steps:Array = []; + let fromNodeName:string = scope.relationMenuDirectiveObj.fromNode.componentInstance.name; + let toNodeName:string = scope.relationMenuDirectiveObj.toNode.componentInstance.name; + steps.push(new StepModel(fromNodeName, FromNodeStepComponent)); + steps.push(new StepModel(toNodeName, ToNodeStepComponent)); + steps.push(new StepModel('Properties', PropertiesStepComponent)); + let wizardTitle = 'Connect: ' + fromNodeName + ' to ' + toNodeName; + let modalInstance = this.ModalServiceNg2.createMultiStepsWizard(wizardTitle, steps, scope.createLinkFromMenu, ConnectionWizardHeaderComponent); + modalInstance.instance.open(); + + // + // this.ModalServiceNg2.createMultiStepsWizard('Connect', )Connect + // scope.$apply(() => { + // scope.isLinkMenuOpen = true; + // }); } }); this._cy.on('tapstart', 'node', (event:Cy.EventObject) => { @@ -424,7 +574,7 @@ export class CompositionGraph implements ng.IDirective { let nodesLinks = this.GeneralGraphUtils.getAllCompositionCiLinks(this._cy); let linkableNodes = this.commonGraphUtils.getLinkableNodes(this._cy, payload.node); - let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findByMatchingCapabilitiesToRequirements(payload.node.data().componentInstance, linkableNodes, nodesLinks); + let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodes(payload.node.data().componentInstance, linkableNodes, nodesLinks); this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy); this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy, payload.node.data()); @@ -498,14 +648,39 @@ export class CompositionGraph implements ng.IDirective { };*/ private openModifyLinkMenu = (scope:ICompositionGraphScope, linkMenuObject:LinkMenu, timeOutInMilliseconds?:number) => { + scope.hideRelationMenu(); + this.$timeout(() => { + scope.canvasMenuProps = { + open: true, + styleClass: 'w-sdc-canvas-menu-list', + items: [], + position: { + x: `${linkMenuObject.position.x}px`, + y: `${linkMenuObject.position.y}px` + } + }; + + if (this._cy.$('edge:selected').length === 1) { + scope.canvasMenuProps.items.push({ + contents: 'View', + styleClass: 'w-sdc-canvas-menu-item-view', + action: () => { + scope.viewRelation(linkMenuObject.link); + } + }); + } + scope.canvasMenuProps.items.push({ + contents: 'Delete', + styleClass: 'w-sdc-canvas-menu-item-delete', + action: () => { + scope.deleteRelation(linkMenuObject.link); + } + }); - this.commonGraphUtils.safeApply(scope, () => { - scope.linkMenuObject = linkMenuObject; + scope.relationMenuTimeout = this.$timeout(() => { + scope.hideRelationMenu(); + }, timeOutInMilliseconds ? timeOutInMilliseconds : 6000); }); - - scope.relationMenuTimeout = this.$timeout(() => { - scope.hideRelationMenu(); - }, timeOutInMilliseconds ? timeOutInMilliseconds : 6000); }; private initGraphNodes(componentInstances:ComponentInstance[], isViewOnly:boolean) { @@ -571,7 +746,10 @@ export class CompositionGraph implements ng.IDirective { CommonGraphUtils, MatchCapabilitiesRequirementsUtils, CompositionGraphPaletteUtils, - ComponentServiceNg2) => { + ComponentServiceNg2, + ModalService, + ConnectionWizardService, + ComponentInstanceServiceNg2) => { return new CompositionGraph( $q, $log, @@ -587,7 +765,10 @@ export class CompositionGraph implements ng.IDirective { CommonGraphUtils, MatchCapabilitiesRequirementsUtils, CompositionGraphPaletteUtils, - ComponentServiceNg2); + ComponentServiceNg2, + ModalService, + ConnectionWizardService, + ComponentInstanceServiceNg2); } } @@ -606,5 +787,8 @@ CompositionGraph.factory.$inject = [ 'CommonGraphUtils', 'MatchCapabilitiesRequirementsUtils', 'CompositionGraphPaletteUtils', - 'ComponentServiceNg2' + 'ComponentServiceNg2', + 'ModalServiceNg2', + 'ConnectionWizardServiceNg2', + 'ComponentInstanceServiceNg2' ]; diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html index 248f19fb70..bbf2d6bbb2 100644 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html +++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html @@ -8,17 +8,7 @@ - -
- -
-
- Delete -
- -
+
= this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromUcpeInstance, toComponentInstance, this.getAllCompositionCiLinks(cy)); - let hostedOnMatch:MatchBase = _.find(matches, (match:MatchReqToCapability) => { + let matches:Array = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromUcpeInstance, toComponentInstance, this.getAllCompositionCiLinks(cy)); + let hostedOnMatch:Match = _.find(matches, (match:Match) => { return match.requirement.capability.toLowerCase() === 'tosca.capabilities.container'; }); - return hostedOnMatch; + return hostedOnMatch; }; @@ -128,7 +128,7 @@ export class CompositionGraphGeneralUtils { */ private isValidDropInsideUCPE(cy:Cy.Instance, nodeToInsert:ComponentInstance, ucpeNode:ComponentInstance):boolean { - let hostedOnMatch:MatchReqToCapability = this.canBeHostedOn(cy, ucpeNode, nodeToInsert); + let hostedOnMatch:Match = this.canBeHostedOn(cy, ucpeNode, nodeToInsert); let result:boolean = !angular.isUndefined(hostedOnMatch) || nodeToInsert.isVl(); //group validation return result; diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts index 05f99ae9ea..89c5e14602 100644 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts +++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts @@ -21,25 +21,17 @@ /** * Created by obarda on 6/28/2016. */ -import {GraphUIObjects, ComponentInstanceFactory, ResourceType} from "app/utils"; -import {LeftPaletteLoaderService, LoaderService} from "app/services"; +import {GraphUIObjects} from "app/utils"; +import {LoaderService} from "app/services"; import { NodeUcpe, CompositionCiNodeVf, - MatchReqToCapability, - MatchBase, - MatchReqToReq, - ComponentInstance, + Match, CompositionCiNodeBase, RelationshipModel, - RelationMenuDirectiveObj, - CapabilitiesGroup, + ConnectRelationModel, LinksFactory, - NodesFactory, - RequirementsGroup, Component, - Relationship, - Capability, LinkMenu, Point, CompositionCiLinkBase @@ -105,16 +97,16 @@ export class CompositionGraphLinkUtils { ); }; - private createSimpleLink = (match:MatchReqToCapability, cy:Cy.Instance, component:Component):void => { + private createSimpleLink = (match:Match, cy:Cy.Instance, component:Component):void => { let newRelation:RelationshipModel = match.matchToRelationModel(); let linkObg:CompositionCiLinkBase = this.linksFactory.createGraphLink(cy, newRelation, newRelation.relationships[0]); this.createLink(linkObg, cy, component); }; - public createLinkFromMenu = (cy:Cy.Instance, chosenMatch:MatchBase, component:Component):void => { + public createLinkFromMenu = (cy:Cy.Instance, chosenMatch:Match, component:Component):void => { if (chosenMatch) { - if (chosenMatch && chosenMatch instanceof MatchReqToCapability) { + if (chosenMatch && chosenMatch instanceof Match) { this.createSimpleLink(chosenMatch, cy, component); } } @@ -128,18 +120,18 @@ export class CompositionGraphLinkUtils { * @param matchesArray * @returns {Array} */ - public filterUcpeLinks(fromNode:CompositionCiNodeBase, toNode:CompositionCiNodeBase, matchesArray:Array):any { + public filterUcpeLinks(fromNode:CompositionCiNodeBase, toNode:CompositionCiNodeBase, matchesArray:Array):any { - let matchLink:Array; + let matchLink:Array; if (fromNode.isUcpePart) { - matchLink = _.filter(matchesArray, (match:MatchBase) => { + matchLink = _.filter(matchesArray, (match:Match) => { return match.isOwner(fromNode.id); }); } if (toNode.isUcpePart) { - matchLink = _.filter(matchesArray, (match:MatchBase) => { + matchLink = _.filter(matchesArray, (match:Match) => { return match.isOwner(toNode.id); }); } @@ -154,14 +146,14 @@ export class CompositionGraphLinkUtils { * @param toNode * @returns {any} */ - public onLinkDrawn(cy:Cy.Instance, fromNode:Cy.CollectionFirstNode, toNode:Cy.CollectionFirstNode):RelationMenuDirectiveObj { + public onLinkDrawn(cy:Cy.Instance, fromNode:Cy.CollectionFirstNode, toNode:Cy.CollectionFirstNode):ConnectRelationModel { if (!this.commonGraphUtils.nodeLocationsCompatible(cy, fromNode, toNode)) { return null; } let linkModel:Array = this.generalGraphUtils.getAllCompositionCiLinks(cy); - let possibleRelations:Array = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromNode.data().componentInstance, + let possibleRelations:Array = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromNode.data().componentInstance, toNode.data().componentInstance, linkModel); //filter relations found to limit to specific ucpe-cp @@ -169,8 +161,8 @@ export class CompositionGraphLinkUtils { //if found possibleRelations between the nodes we create relation menu directive and open the link menu if (possibleRelations.length) { - let menuPosition = this.generalGraphUtils.getLinkMenuPosition(cy, toNode.renderedPoint()); - return new RelationMenuDirectiveObj(fromNode.data(), toNode.data(), menuPosition, possibleRelations); + // let menuPosition = this.generalGraphUtils.getLinkMenuPosition(cy, toNode.renderedPoint()); + return new ConnectRelationModel(fromNode.data(), toNode.data(), possibleRelations); } return null; }; @@ -209,7 +201,7 @@ export class CompositionGraphLinkUtils { * @param vfNode */ public createVfToUcpeLink = (component:Component, cy:Cy.Instance, ucpeNode:NodeUcpe, vfNode:CompositionCiNodeVf):void => { - let hostedOnMatch:MatchReqToCapability = this.generalGraphUtils.canBeHostedOn(cy, ucpeNode.componentInstance, vfNode.componentInstance); + let hostedOnMatch:Match = this.generalGraphUtils.canBeHostedOn(cy, ucpeNode.componentInstance, vfNode.componentInstance); /* create relation */ let newRelation = new RelationshipModel(); newRelation.fromNode = ucpeNode.id; @@ -224,13 +216,12 @@ export class CompositionGraphLinkUtils { /** * Handles click event on links. * If one edge selected: do nothing. - /*Two edges selected - always select all - /* Three or more edges: first click - select all, secondary click - select single. + * Two or more edges: first click - select all, secondary click - select single. * @param cy * @param event */ public handleLinkClick(cy:Cy.Instance, event:Cy.EventObject) { - if (cy.$('edge:selected').length > 2 && event.cyTarget[0].selected()) { + if (cy.$('edge:selected').length > 1 && event.cyTarget[0].selected()) { cy.$(':selected').unselect(); } else { @@ -256,7 +247,7 @@ export class CompositionGraphLinkUtils { * @returns {Point} */ public calculateLinkMenuPosition(event, elementWidth, elementHeight):Point { - let point:Point = new Point(event.originalEvent.x, event.originalEvent.y); + let point:Point = new Point(event.originalEvent.clientX, event.originalEvent.clientY); if (event.originalEvent.view.screen.height - elementHeight < point.y) { point.y = event.originalEvent.view.screen.height - elementHeight; } diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts index 5f717512f5..6a02381902 100644 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts +++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts @@ -18,22 +18,17 @@ * ============LICENSE_END========================================================= */ -import {Requirement, CompositionCiLinkBase, ComponentInstance, CapabilitiesGroup, RequirementsGroup, MatchReqToCapability, MatchBase, - MatchReqToReq,CompositionCiNodeBase, Component, Capability} from "app/models"; +import { + Requirement, CompositionCiLinkBase, CapabilitiesGroup, RequirementsGroup, Match, + CompositionCiNodeBase, Component, Capability +} from "app/models"; +import {ComponentInstance} from "../../../../models/componentsInstances/componentInstance"; /** * Created by obarda on 1/1/2017. */ export class MatchCapabilitiesRequirementsUtils { - constructor() { - } - - public static linkable(requirement1:Requirement, requirement2:Requirement, vlCapability:Capability):boolean { - return MatchCapabilitiesRequirementsUtils.isMatch(requirement1, vlCapability) && MatchCapabilitiesRequirementsUtils.isMatch(requirement2, vlCapability); - }; - - /** * Shows + icon in corner of each node passed in * @param filteredNodesData @@ -77,9 +72,7 @@ export class MatchCapabilitiesRequirementsUtils { }) } - // -------------------------------------------ALL FUNCTIONS NEED REFACTORING---------------------------------------------------------------// - - private static requirementFulfilled(fromNodeId:string, requirement:any, links:Array):boolean { + private static isRequirementFulfilled(fromNodeId:string, requirement:any, links:Array):boolean { return _.some(links, { 'relation': { 'fromNode': fromNodeId, @@ -108,172 +101,97 @@ export class MatchCapabilitiesRequirementsUtils { return false; }; - private getFromToMatches(requirements1:RequirementsGroup, - requirements2:RequirementsGroup, - capabilities:CapabilitiesGroup, - links:Array, - fromId:string, - toId:string, - vlCapability?:Capability):Array { - let matches:Array = new Array(); - _.forEach(requirements1, (requirementValue:Array, key) => { - _.forEach(requirementValue, (requirement:Requirement) => { - if (requirement.name !== "dependency" && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(fromId, requirement, links)) { - _.forEach(capabilities, (capabilityValue:Array, key) => { - _.forEach(capabilityValue, (capability:Capability) => { - if (MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability)) { - let match:MatchReqToCapability = new MatchReqToCapability(requirement, capability, true, fromId, toId); - matches.push(match); - } - }); - }); - if (vlCapability) { - _.forEach(requirements2, (requirement2Value:Array, key) => { - _.forEach(requirement2Value, (requirement2:Requirement) => { - if (!MatchCapabilitiesRequirementsUtils.requirementFulfilled(toId, requirement2, links) && MatchCapabilitiesRequirementsUtils.linkable(requirement, requirement2, vlCapability)) { - let match:MatchReqToReq = new MatchReqToReq(requirement, requirement2, true, fromId, toId); - matches.push(match); - } - }); - }); - } - } - }); - }); - return matches; - } - - private getToFromMatches(requirements:RequirementsGroup, capabilities:CapabilitiesGroup, links:Array, fromId:string, toId:string):Array { - let matches:Array = []; - _.forEach(requirements, (requirementValue:Array, key) => { - _.forEach(requirementValue, (requirement:Requirement) => { - if (requirement.name !== "dependency" && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(toId, requirement, links)) { - _.forEach(capabilities, (capabilityValue:Array, key) => { - _.forEach(capabilityValue, (capability:Capability) => { - if (MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability)) { - let match:MatchReqToCapability = new MatchReqToCapability(requirement, capability, false, toId, fromId); - matches.push(match); - } - }); - }); - } - }); - }); - return matches; - } - public getMatchedRequirementsCapabilities(fromComponentInstance:ComponentInstance, toComponentInstance:ComponentInstance, - links:Array, - vl?:Component):Array {//TODO allow for VL array - let linkCapability; - if (vl) { - let linkCapabilities:Array = vl.capabilities.findValueByKey('linkable'); - if (linkCapabilities) { - linkCapability = linkCapabilities[0]; - } - } - let fromToMatches:Array = this.getFromToMatches(fromComponentInstance.requirements, - toComponentInstance.requirements, + links:Array):Array { + let fromToMatches:Array = this.getMatches(fromComponentInstance.requirements, toComponentInstance.capabilities, links, fromComponentInstance.uniqueId, - toComponentInstance.uniqueId, - linkCapability); - let toFromMatches:Array = this.getToFromMatches(toComponentInstance.requirements, + toComponentInstance.uniqueId, true); + let toFromMatches:Array = this.getMatches(toComponentInstance.requirements, fromComponentInstance.capabilities, links, fromComponentInstance.uniqueId, - toComponentInstance.uniqueId); + toComponentInstance.uniqueId, false); return fromToMatches.concat(toFromMatches); } + /***** REFACTORED FUNCTIONS START HERE *****/ + + public getMatches(requirements:RequirementsGroup, capabilities:CapabilitiesGroup, links:Array, + fromId:string, toId:string, isFromTo: boolean):Array { + let matches:Array = []; + let unfulfilledReqs = this.getUnfulfilledRequirements(fromId, requirements, links); + _.forEach(unfulfilledReqs, (req)=> { + _.forEach(_.flatten(_.values(capabilities)), (capability:Capability)=> { + if (MatchCapabilitiesRequirementsUtils.isMatch(req, capability)) { + if(isFromTo) { + matches.push(new Match(req, capability, isFromTo, fromId, toId)); + } else{ + matches.push(new Match(req, capability, isFromTo, toId, fromId)); + } + } + }); + }); + return matches; + } + + public getUnfulfilledRequirements = (fromNodeId:string, requirements:RequirementsGroup, links:Array):Array=> { + + let requirementArray:Array = []; + _.forEach(_.flatten(_.values(requirements)), (requirement:Requirement)=> { + if (requirement.name !== "dependency" && !MatchCapabilitiesRequirementsUtils.isRequirementFulfilled(fromNodeId, requirement, links)) { + requirementArray.push(requirement); + } + }); + return requirementArray; + }; + /** - * Step I: Check if capabilities of component match requirements of nodeDataArray - * 1. Get component capabilities and loop on each capability - * 2. Inside the loop, perform another loop on all nodeDataArray, and fetch the requirements for each one - * 3. Loop on the requirements, and verify match (see in code the rules) - * - * Step II: Check if requirements of component match capabilities of nodeDataArray - * 1. Get component requirements and loop on each requirement - * 2. - * - * @param component - this is the hovered resource of the left panel of composition screen - * @param nodeDataArray - Array of resource instances that are on the canvas - * @param links -getMatchedRequirementsCapabilities - * @param vl - - * @returns {any[]|T[]} + * Returns true if there is a match between the capabilities and requirements that are passed in + * @param requirements + * @param capabilities + * @returns {boolean} */ - public findByMatchingCapabilitiesToRequirements(component:Component, - nodeDataArray:Array, - links:Array, - vl?:Component):Array {//TODO allow for VL array - let res = []; - - // STEP I - { - let capabilities:any = component.capabilities; - _.forEach(capabilities, (capabilityValue:Array, capabilityKey)=> { - _.forEach(capabilityValue, (capability)=> { - _.forEach(nodeDataArray, (node:CompositionCiNodeBase)=> { - if (node && node.componentInstance) { - let requirements:any = node.componentInstance.requirements; - let fromNodeId:string = node.componentInstance.uniqueId; - _.forEach(requirements, (requirementValue:Array, requirementKey)=> { - _.forEach(requirementValue, (requirement)=> { - if (requirement.name !== "dependency" && MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability) - && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(fromNodeId, requirement, links)) { - res.push(node); - } - }); - }); - } - }); - }); + public containsMatch = (requirements:Array, capabilities:CapabilitiesGroup):boolean => { + return _.some(requirements, (req:Requirement)=> { + return _.some(_.flatten(_.values(capabilities)), (capability:Capability) => { + return MatchCapabilitiesRequirementsUtils.isMatch(req, capability); }); - } + }); + }; - // STEP II - { - let requirements:any = component.requirements; - let fromNodeId:string = component.uniqueId; - let linkCapability:Array = vl ? vl.capabilities.findValueByKey('linkable') : undefined; + /** + * Returns array of nodes that can connect to the component. + * In order to connect, one of the following conditions must be met: + * 1. component has an unfulfilled requirement that matches a node's capabilities + * 2. node has an unfulfilled requirement that matches the component's capabilities + * 3. vl is passed in which has the capability to fulfill requirement from component and requirement on node. + */ + public findMatchingNodes(component:Component, nodeDataArray:Array, + links:Array):Array //TODO allow for VL array and TEST + { + let componentRequirements:Array = this.getUnfulfilledRequirements(component.uniqueId, component.requirements, links); + return _.filter(nodeDataArray, (node:any)=> { + if (node && node.componentInstance) { + + //Check if component has an unfulfilled requirement that can be met by one of nodes's capabilities (#1) + if (componentRequirements.length && node.category !== 'groupCp' && this.containsMatch(componentRequirements, node.componentInstance.capabilities)) { + return true; - _.forEach(requirements, (requirementValue:Array, requirementKey)=> { - _.forEach(requirementValue, (requirement)=> { - if (requirement.name !== "dependency" && !MatchCapabilitiesRequirementsUtils.requirementFulfilled(fromNodeId, requirement, links)) { - _.forEach(nodeDataArray, (node:any)=> { - if (node && node.componentInstance && node.category !== 'groupCp') { - let capabilities:any = node.componentInstance.capabilities; - _.forEach(capabilities, (capabilityValue:Array, capabilityKey)=> { - _.forEach(capabilityValue, (capability)=> { - if (MatchCapabilitiesRequirementsUtils.isMatch(requirement, capability)) { - res.push(node); - } - }); - }); - if (linkCapability) { - let linkRequirements = node.componentInstance.requirements; - _.forEach(linkRequirements, (value:Array, key)=> { - _.forEach(value, (linkRequirement)=> { - if (!MatchCapabilitiesRequirementsUtils.requirementFulfilled(node.componentInstance.uniqueId, linkRequirement, links) - && MatchCapabilitiesRequirementsUtils.linkable(requirement, linkRequirement, linkCapability[0])) { - res.push(node); - } - }); - }); - } - } - }); + } else { //Check if node has unfulfilled requirement that can be filled by component (#2) + let nodeRequirements:Array = this.getUnfulfilledRequirements(node.componentInstance.uniqueId, node.componentInstance.requirements, links); + if (!nodeRequirements.length) return false; + if (this.containsMatch(nodeRequirements, component.capabilities)) { + return true; } - }); - }); - } - - return _.uniq(res); - }; + } + } + }); + } } MatchCapabilitiesRequirementsUtils.$inject = []; diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts index ace9d1ce4c..127f43b734 100644 --- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts +++ b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts @@ -27,6 +27,7 @@ import { ModulesNodesStyle } from "../common/style/module-node-style"; import { GRAPH_EVENTS } from "app/utils"; import { EventListenerService } from "app/services"; import '@bardit/cytoscape-expand-collapse'; +import {AngularJSBridge} from "../../../services/angular-js-bridge-service"; interface IDeploymentGraphScope extends ng.IScope { component: Component; @@ -105,6 +106,7 @@ export class DeploymentGraph implements ng.IDirective { private loadGraph = (scope: IDeploymentGraphScope, el: JQuery) => { let graphEl = el.find('.sdc-deployment-graph-wrapper'); + const imagePath = AngularJSBridge.getAngularConfig().imagesPath; this._cy = cytoscape({ container: graphEl, style: ComponentInstanceNodesStyle.getCompositionGraphStyle().concat(ModulesNodesStyle.getModuleGraphStyle()), @@ -124,8 +126,8 @@ export class DeploymentGraph implements ng.IDirective { fisheye: false, undoable: false, expandCollapseCueSize: 18, - expandCueImage: '/assets/styles/images/resource-icons/' + 'closeModule.png', - collapseCueImage: '/assets/styles/images/resource-icons/' + 'openModule.png', + expandCueImage: imagePath + '/assets/styles/images/resource-icons/' + 'closeModule.png', + collapseCueImage: imagePath + '/assets/styles/images/resource-icons/' + 'openModule.png', expandCollapseCueSensitivity: 2, cueOffset: -20 }); diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts index f46dc6c939..8abf968c82 100644 --- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts +++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts @@ -132,7 +132,7 @@ export class Palette implements ng.IDirective { private initLeftPanel(leftPanelComponents:Array, resourceFilterTypes:Array):LeftPanelModel { let leftPanelModel = new LeftPanelModel(); - + if (resourceFilterTypes && resourceFilterTypes.length) { leftPanelComponents = this.leftPanelResourceFilter(leftPanelComponents, resourceFilterTypes); } @@ -171,40 +171,6 @@ export class Palette implements ng.IDirective { this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, displayComponent); this.$log.debug('palette::onMouseOver:: fired'); - // - // if (this.CompositionGraphGeneralUtils.componentRequirementsAndCapabilitiesCaching.containsKey(displayComponent.uniqueId)) { - // this.$log.debug(`palette::onMouseOver:: component id ${displayComponent.uniqueId} found in cache`); - // let cacheComponent:Component = this.CompositionGraphGeneralUtils.componentRequirementsAndCapabilitiesCaching.getValue(displayComponent.uniqueId); - // - // //TODO: Danny: fire event to highlight matching nodes - // //showMatchingNodes(cacheComponent); - // return; - // } - // - // this.$log.debug(`palette::onMouseOver:: component id ${displayComponent.uniqueId} not found in cache, initiating server get`); - // // This will bring the component from the server including requirements and capabilities - // // Check that we do not fetch many times, because only in the success we add the component to componentRequirementsAndCapabilitiesCaching - // if (this.fetchingComponentFromServer) { - // return; - // } - // - // this.fetchingComponentFromServer = true; - // this.ComponentFactory.getComponentFromServer(displayComponent.componentSubType, displayComponent.uniqueId) - // .then((component:Component) => { - // this.$log.debug(`palette::onMouseOver:: component id ${displayComponent.uniqueId} fetch success`); - // // this.LeftPaletteLoaderService.updateSpecificComponentLeftPalette(component, scope.currentComponent.componentType); - // this.CompositionGraphGeneralUtils.componentRequirementsAndCapabilitiesCaching.setValue(component.uniqueId, component); - // this.fetchingComponentFromServer = false; - // - // //TODO: Danny: fire event to highlight matching nodes - // //showMatchingNodes(component); - // }) - // .catch(() => { - // this.$log.debug('palette::onMouseOver:: component id fetch error'); - // this.fetchingComponentFromServer = false; - // }); - - }; scope.onMouseOut = () => { @@ -226,8 +192,13 @@ export class Palette implements ng.IDirective { private updateLeftPanelDisplay(scope:IPaletteScope) { let entityType:string = scope.currentComponent.componentType.toLowerCase(); let resourceFilterTypes:Array = this.sdcConfig.resourceTypesFilter[entityType]; - scope.components = this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent); - scope.model = this.initLeftPanel(scope.components, resourceFilterTypes); + scope.components = this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent); + //remove the container component from the list + let componentTempToDisplay = angular.copy(scope.components); + componentTempToDisplay = _.remove(componentTempToDisplay, function (component) { + return component.component.invariantUUID !== scope.currentComponent.invariantUUID; + }); + scope.model = this.initLeftPanel(componentTempToDisplay, resourceFilterTypes); scope.displaySortedCategories = angular.copy(scope.model.sortedCategories); }; diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.html b/catalog-ui/src/app/directives/graphs-v2/palette/palette.html index 4b123e5777..7f9bfd1e0d 100644 --- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.html +++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.html @@ -32,7 +32,7 @@ data-ng-repeat="component in components | orderBy: 'displayName' track by $index" data-tests-id={{component.displayName}}>
-
diff --git a/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.html b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.html index a0a9e4af27..e1cdf499a0 100644 --- a/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.html +++ b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.html @@ -1,46 +1,46 @@ -
+

{{relationMenuDirectiveObj.leftSideLink.componentInstance.name | resourceName}}

{{relationMenuDirectiveObj.rightSideLink.componentInstance.name | resourceName}}

Select one of the options below to connect

-
Requirements
-
+
Requirements
+
{{matchArr[0].requirement.getFullTitle()}}
-
Capabilities
-
+
Capabilities
+
{{matchArr[0].capability.getFullTitle()}}
-
Requirements
-
+
Requirements
+
{{matchArr[0].secondRequirement ? matchArr[0].secondRequirement.getFullTitle() : matchArr[0].requirement.getFullTitle()}}
-
Capabilities
-
+
Capabilities
+
{{matchArr[0].capability.getFullTitle()}}
-
+
@@ -57,7 +57,7 @@
-
diff --git a/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.ts b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.ts index 6106d10c4e..f73e855c0e 100644 --- a/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.ts +++ b/catalog-ui/src/app/directives/graphs-v2/relation-menu/relation-menu.ts @@ -18,19 +18,19 @@ * ============LICENSE_END========================================================= */ 'use strict' -import {MatchBase, RelationMenuDirectiveObj} from "app/models"; +import {Match, ConnectRelationModel} from "app/models"; import {Component} from "../../../models/components/component"; export interface IRelationMenuScope extends ng.IScope { - relationMenuDirectiveObj:RelationMenuDirectiveObj; + relationMenuDirectiveObj:ConnectRelationModel; createRelation:Function; isLinkMenuOpen:boolean; hideRelationMatch:Function; cancel:Function; saveRelation(); - showMatch(arr1:Array, arr2:Array):boolean; - hasMatchesToShow(matchesObj:MatchBase, selectedMatch:Array); + showMatch(arr1:Array, arr2:Array):boolean; + hasMatchesToShow(matchesObj:Match, selectedMatch:Array); updateSelectionText():void; } @@ -58,7 +58,7 @@ export class RelationMenuDirective implements ng.IDirective { scope.saveRelation = ():void=> { let chosenMatches:Array = _.intersection(scope.relationMenuDirectiveObj.rightSideLink.selectedMatch, scope.relationMenuDirectiveObj.leftSideLink.selectedMatch); - let chosenMatch:MatchBase = chosenMatches[0]; + let chosenMatch:Match = chosenMatches[0]; scope.createRelation()(chosenMatch); }; @@ -69,14 +69,14 @@ export class RelationMenuDirective implements ng.IDirective { }; //to show options in link menu - scope.showMatch = (arr1:Array, arr2:Array):boolean => { + scope.showMatch = (arr1:Array, arr2:Array):boolean => { return !arr1 || !arr2 || _.intersection(arr1, arr2).length > 0; }; //to show requirements/capabilities title - scope.hasMatchesToShow = (matchesObj:MatchBase, selectedMatch:Array):boolean => { + scope.hasMatchesToShow = (matchesObj:Match, selectedMatch:Array):boolean => { let result:boolean = false; - _.forEach(matchesObj, (matchesArr:Array) => { + _.forEach(matchesObj, (matchesArr:Array) => { if (!result) { result = scope.showMatch(matchesArr, selectedMatch); } diff --git a/catalog-ui/src/app/directives/layout/top-nav/top-nav.html b/catalog-ui/src/app/directives/layout/top-nav/top-nav.html deleted file mode 100644 index 60d3d63855..0000000000 --- a/catalog-ui/src/app/directives/layout/top-nav/top-nav.html +++ /dev/null @@ -1,54 +0,0 @@ - diff --git a/catalog-ui/src/app/directives/layout/top-nav/top-nav.less b/catalog-ui/src/app/directives/layout/top-nav/top-nav.less deleted file mode 100644 index 13b4a525f4..0000000000 --- a/catalog-ui/src/app/directives/layout/top-nav/top-nav.less +++ /dev/null @@ -1,218 +0,0 @@ -.top-nav { - position: fixed; - top: @header_height; - background-color: @main_color_p; - .box-shadow(0px 1px 3px 0px rgba(0, 0, 0, 0.33)); - width: 100%; - height: @top_nav_height; - line-height: @top_nav_height; - z-index: 10; - display: flex; - flex-direction: row; - align-items: center; - - .asdc-app-title-wrapper { - flex-grow: 1; - line-height: 16px; - margin: 0 20px; - - a.asdc-app-title { - .m_18_r; - text-decoration: none; - } - - .asdc-version { - .m_12_r; - .opacity(0.8); - line-height: 14px; - flex-grow: 1; - } - - } - - ul.top-menu { - list-style-type: none; - margin: 0 0 0 20px; - padding: 0; - flex-grow: 999; - - & > li { - float: left; - cursor: pointer; - line-height: 50px; - height: 50px; - padding: 0 20px; - - &.selected { - border-bottom: solid 4px @main_color_a; - - a { - color: @func_color_s; - } - } - - /*&:hover { - border-bottom: solid 4px @main_color_a; - }*/ - - a { - font-family: @font-opensans-medium; - color: @main_color_m; - font-size: 16px; - display: block; - text-align: center; - text-decoration: none; - } - - &.triangle-dropdown { - padding: 0; - position: relative; - - div.triangle { - margin-top: 15px; - border-radius: 2px; - width: 17px; - height: 18px; - - //temp use - until new triangle gets in - line-height: 18px; - text-align: center; - font-size: 10px; - - &:hover { - background-color: rgba(156, 156, 156, 0.2); - - span { - .arrow-right-hover; - } - } - } - - + li a { - font-size: 16px; - } - - .ps-container { - .perfect-scrollbar; - position: absolute; - left: 0; - top: 40px; - z-index: 1; - - overflow: hidden; - max-height: 0; - -webkit-transition: max-height 200ms ease-in; - -moz-transition: max-height 200ms ease-in; - -o-transition: max-height 200ms ease-in; - transition: max-height 200ms ease-in; - - div ul { - - padding: 0; - background-color: white; - - li { - - height: 35px; - background-color: white; - font-size: 13px; - width: 150px; - line-height: 35px; - padding: 0 10px; - - &.disabled { - opacity: 1; - } - &.selected { - background-color: @tlv_color_v; - font-weight: bold; - } - &:hover { - color: @main_color_a; - } - span { - height: 35px; - width: 130px; - display: inline-block; - } - } - } - } - &.item-click:hover .ps-container, - &.item-click:active .ps-container { - max-height: 500px; - border: 1px solid @func_color_b; - border-radius: 2px; - box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1); - - div ul { - - } - } - } - } - - } - - .top-search { - position: relative; - flex-grow: 1; - padding: 0 20px; - - input.search-text { - .border-radius(2px); - width: 245px; - height: 32px; - line-height: 32px; - border: 1px solid @main_color_o; - outline: none; - text-indent: 10px; - - &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */ - &:-moz-placeholder { font-style: italic; } /* Firefox 18- */ - &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */ - &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */ - &:-ms-input-placeholder { font-style: italic; } /* Edge */ - /* font-style: italic; - }*/ - /* Firefox 18- */ - &::-moz-placeholder { - font-style: italic; - } - /* Firefox 19+ */ - &:-ms-input-placeholder { - font-style: italic; - } - /* IE 10+ */ - &:-ms-input-placeholder { - font-style: italic; - } - /* Edge */ - } - - .magnification { - position: absolute; - top: 19px; - right: 26px; - } - - } - - .notification-icon { - cursor: pointer; - flex-grow: 1; - margin: 0 10px 6px 0; - .sprite-new; - .vsp-list-icon; - - &:hover { - .vsp-list-icon-hover; - } - - &:active { - .vsp-list-icon-active; - } - - } - -} diff --git a/catalog-ui/src/app/directives/layout/top-nav/top-nav.ts b/catalog-ui/src/app/directives/layout/top-nav/top-nav.ts deleted file mode 100644 index 59e4d49647..0000000000 --- a/catalog-ui/src/app/directives/layout/top-nav/top-nav.ts +++ /dev/null @@ -1,161 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * 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========================================================= - */ - -'use strict'; -import {IAppConfigurtaion, IHostedApplication, IUserProperties} from "app/models"; -import {IUserResourceClass} from "app/services"; -import {MenuItemGroup, MenuItem} from "app/utils"; - -export interface ITopNavScope extends ng.IScope { - topLvlSelectedIndex:number; - hideSearch:boolean; - searchBind:any; - menuModel:Array; - - topLvlMenu:MenuItemGroup; - goToState(state:string, params:Array):ng.IPromise; - menuItemClick:Function; - user:IUserProperties; - version:string; -} - - -export class TopNavDirective implements ng.IDirective { - - constructor(private $filter:ng.IFilterService, - private $state:ng.ui.IStateService, - private $q:ng.IQService, - private userResourceService:IUserResourceClass, - private sdcConfig:IAppConfigurtaion) { - } - - public replace = true; - public restrict = 'E'; - public transclude = false; - - - scope = { - topLvlSelectedIndex: '@?', - hideSearch: '=', - searchBind: '=', - version: '@', - notificationIconCallback: '=', - menuModel: '=?', - }; - - template = ():string => { - return require('./top-nav.html'); - }; - - public link = (scope:ITopNavScope, $elem:ng.IAugmentedJQuery, $attrs:angular.IAttributes) => { - - let getTopLvlSelectedIndexByState = ():number => { - if (!scope.topLvlMenu.menuItems) { - return 0; - } - - let result = -1; - - //set result to current state - scope.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> { - if (item.state === this.$state.current.name) { - result = index; - } - }); - - //if it's a different state , checking previous state param - if (result === -1) { - scope.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> { - if (item.state === this.$state.params['previousState']) { - result = index; - } - }); - } - - if (result === -1) { - result = 0; - } - - return result; - }; - - scope.user = this.userResourceService.getLoggedinUser(); - - let tmpArray:Array = [ - new MenuItem(this.$filter('translate')("TOP_MENU_HOME_BUTTON"), null, "dashboard", "goToState", null, null), - new MenuItem(this.$filter('translate')("TOP_MENU_CATALOG_BUTTON"), null, "catalog", "goToState", null, null) - ]; - - // Only designer can perform onboarding - if (scope.user && scope.user.role === 'DESIGNER') { - tmpArray.push(new MenuItem(this.$filter('translate')("TOP_MENU_ON_BOARD_BUTTON"), null, "onboardVendor", "goToState", null, null)); - _.each(this.sdcConfig.hostedApplications, (hostedApp:IHostedApplication)=> { - if (hostedApp.exists) { - tmpArray.push(new MenuItem(hostedApp.navTitle, null, hostedApp.defaultState, "goToState", null, null)); - } - }); - } - - scope.topLvlMenu = new MenuItemGroup(0, tmpArray, true); - scope.topLvlMenu.selectedIndex = isNaN(scope.topLvlSelectedIndex) ? getTopLvlSelectedIndexByState() : scope.topLvlSelectedIndex; - - let generateMenu = () => { - if (scope.menuModel && scope.menuModel[0] !== scope.topLvlMenu) { - scope.menuModel.unshift(scope.topLvlMenu); - } - }; - scope.$watch('menuModel', generateMenu); - - generateMenu(); - - /////scope functions//// - - scope.goToState = (state:string, params:Array):ng.IPromise => { - let deferred = this.$q.defer(); - this.$state.go(state, params && params.length > 0 ? [0] : undefined); - deferred.resolve(true); - return deferred.promise; - }; - - scope.menuItemClick = (itemGroup:MenuItemGroup, item:MenuItem) => { - - itemGroup.itemClick = false; - - let onSuccess = ():void => { - itemGroup.selectedIndex = itemGroup.menuItems.indexOf(item); - }; - let onFailed = ():void => { - }; - - if (item.callback) { - (item.callback.apply(undefined, item.params)).then(onSuccess, onFailed); - } else { - scope[item.action](item.state, item.params).then(onSuccess, onFailed); - } - }; - }; - - public static factory = ($filter:ng.IFilterService, $state:ng.ui.IStateService, $q:ng.IQService, userResourceService:IUserResourceClass, sdcConfig:IAppConfigurtaion)=> { - return new TopNavDirective($filter, $state, $q, userResourceService, sdcConfig); - }; - -} - -TopNavDirective.factory.$inject = ['$filter', '$state', '$q', 'Sdc.Services.UserResourceService', 'sdcConfig']; diff --git a/catalog-ui/src/app/directives/loader/loader-directive.ts b/catalog-ui/src/app/directives/loader/loader-directive.ts index 36efc22079..7e056c774f 100644 --- a/catalog-ui/src/app/directives/loader/loader-directive.ts +++ b/catalog-ui/src/app/directives/loader/loader-directive.ts @@ -56,19 +56,14 @@ export class LoaderDirective implements ng.IDirective { let interval; - this.EventListenerService.registerObserverCallback(EVENTS.SHOW_LOADER_EVENT, (loaderType)=> { - if (scope.loaderType !== loaderType) { - return; - } - scope.display = true; - }); - this.EventListenerService.registerObserverCallback(EVENTS.HIDE_LOADER_EVENT, (loaderType)=> { - if (scope.loaderType !== loaderType) { - return; - } - scope.display = false; - }); - + if(scope.loaderType) { + this.EventListenerService.registerObserverCallback(EVENTS.SHOW_LOADER_EVENT + scope.loaderType, (loaderType)=> { + scope.display = true; + }); + this.EventListenerService.registerObserverCallback(EVENTS.HIDE_LOADER_EVENT + scope.loaderType, (loaderType)=> { + scope.display = false; + }); + } let calculateSizesForFixPosition = (positionStyle:string):void => { // This is problematic, I do not want to change the parent position. // set the loader on all the screen diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html index b62824d544..a2c29c5398 100644 --- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html +++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html @@ -8,7 +8,7 @@
@@ -48,7 +48,7 @@ data-tests-id="{{fieldsPrefixName+property.name}}" ng-if="!((property.simpleType||property.type) == 'boolean')" data-ng-maxlength="100" - data-ng-disabled="readOnly" + data-ng-readonly="readOnly" maxlength="{{(property.simpleType||property.type) == 'integer'? 10 : 100}}" data-ng-model="valueObjRef[property.name]" type="text" diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less index 5c65fdc9dc..abca49d7a3 100644 --- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less +++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less @@ -29,6 +29,10 @@ .i-sdc-form-input:disabled{ .disabled; } + .i-sdc-form-input:read-only{ + opacity: 0.4; + cursor: auto; + } .property{ display: flex; diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html index ec9aaf1f7f..dde4e8f32e 100644 --- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html +++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html @@ -12,7 +12,7 @@ data-ng-pattern="MapKeyValidationPattern" data-ng-model-options="{ debounce: 200 }" data-ng-change="changeKeyOfMap(mapKeys[$index], $index,'mapKey'+fieldsPrefixName+$index);$event.stopPropagation();" - data-ng-disabled="readOnly" + data-ng-readonly="readOnly" data-required autofocus/>
@@ -26,7 +26,7 @@ .data-type-fields-structure{ padding: 0; } + + .i-sdc-form-input:read-only{ + opacity: 0.4; + cursor: auto; + } } } diff --git a/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.less b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.less index 43d2d646a1..290a6468cb 100644 --- a/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.less +++ b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.less @@ -45,9 +45,13 @@ margin-left: 22px; } - .i-sdc-form-input:disabled{ - .disabled; - &[type="text"]{ + .i-sdc-form-input{ + &:disabled{ + .disabled; + } + } + .property-name{ + .i-sdc-form-input:read-only{ opacity: 1 !important; background-color: @tlv_color_t; color:black; diff --git a/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts index eadca96bfa..1367906e21 100644 --- a/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts +++ b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts @@ -19,21 +19,17 @@ */ 'use strict'; -import {User, IUser, IAppConfigurtaion} from "app/models"; -import {IUserResourceClass, IUserResource} from "app/services"; +import {User, IUser, IAppConfigurtaion, IUserProperties} from "app/models"; +import { UserService } from "../../ng2/services/user.service"; export interface IUserHeaderDetailsScope extends ng.IScope { - name:string; - role:string; iconUrl:string; - UserResourceClass:IUserResourceClass; user:IUser; - sdcConfig:IAppConfigurtaion; initUser:Function; } export class UserHeaderDetailsDirective implements ng.IDirective { - constructor(private $http:ng.IHttpService, private sdcConfig:IAppConfigurtaion, private UserResourceClass:IUserResourceClass) { + constructor(private $http:ng.IHttpService, private sdcConfig:IAppConfigurtaion, private userService:UserService) { } scope = { @@ -50,23 +46,23 @@ export class UserHeaderDetailsDirective implements ng.IDirective { scope.initUser = ():void => { let defaultUserId:string; - let user:IUserResource = this.UserResourceClass.getLoggedinUser(); - if (!user) { + let userInfo:IUserProperties = this.userService.getLoggedinUser(); + if (!userInfo) { defaultUserId = this.$http.defaults.headers.common[this.sdcConfig.cookie.userIdSuffix]; - user = this.UserResourceClass.get({id: defaultUserId}, ():void => { - scope.user = new User(user); + this.userService.getUser(defaultUserId).subscribe((defaultUserInfo):void => { + scope.user = new User(defaultUserInfo); }); } else { - scope.user = new User(user); + scope.user = new User(userInfo); } }; scope.initUser(); }; - public static factory = ($http:ng.IHttpService, sdcConfig:IAppConfigurtaion, UserResourceClass:IUserResourceClass)=> { - return new UserHeaderDetailsDirective($http, sdcConfig, UserResourceClass); + public static factory = ($http:ng.IHttpService, sdcConfig:IAppConfigurtaion, userService:UserService)=> { + return new UserHeaderDetailsDirective($http, sdcConfig, userService); }; } -UserHeaderDetailsDirective.factory.$inject = ['$http', 'sdcConfig', 'Sdc.Services.UserResourceService']; +UserHeaderDetailsDirective.factory.$inject = ['$http', 'sdcConfig', 'UserServiceNg2']; diff --git a/catalog-ui/src/app/models.ts b/catalog-ui/src/app/models.ts index ec70ebe8b1..014525367d 100644 --- a/catalog-ui/src/app/models.ts +++ b/catalog-ui/src/app/models.ts @@ -40,6 +40,7 @@ export * from './models/components/service'; export * from './models/componentsInstances/componentInstance'; export * from './models/componentsInstances/resourceInstance'; export * from './models/componentsInstances/serviceInstance'; +export * from './models/componentsInstances/serviceProxyInstance'; export * from './models/csar-component'; //export * from './models/data-type-properties'; export * from './models/properties-inputs/property-be-model'; @@ -74,7 +75,9 @@ export * from './models/graph/nodes/base-common-node'; export * from './models/graph/nodes/common-ci-node-base'; export * from './models/graph/nodes/composition-graph-nodes/composition-ci-node-base'; export * from './models/graph/nodes/composition-graph-nodes/composition-ci-node-cp'; +export * from './models/graph/nodes/composition-graph-nodes/composition-ci-node-configuration'; export * from './models/graph/nodes/composition-graph-nodes/composition-ci-node-service'; +export * from './models/graph/nodes/composition-graph-nodes/composition-ci-node-service-proxy'; export * from './models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp'; export * from './models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe'; export * from './models/graph/nodes/composition-graph-nodes/composition-ci-node-vf'; @@ -83,7 +86,7 @@ export * from './models/graph/nodes/composition-graph-nodes/composition-ci-node- export * from './models/graph/nodes/modules-graph-nodes/module-node-base'; export * from './models/graph/nodes/nodes-factory'; export * from './models/graph/point'; -export * from './models/graph/relationMenuObjects'; +export * from './models/graph/connectRelationModel'; export * from './models/graph/relationship'; export * from './models/heat-parameters'; export * from './models/input-property-base'; @@ -103,6 +106,8 @@ export * from './models/validate'; export * from './models/component-metadata'; export * from './models/modal'; export * from './models/button'; +export * from './models/wizard-step'; +export * from './models/radio-button'; export * from './models/filter-properties-assignment-data' export * from './models/properties-inputs/input-be-model' diff --git a/catalog-ui/src/app/models/capability.ts b/catalog-ui/src/app/models/capability.ts index 79cf425d92..2f2e3a8de6 100644 --- a/catalog-ui/src/app/models/capability.ts +++ b/catalog-ui/src/app/models/capability.ts @@ -23,7 +23,9 @@ */ 'use strict'; import {PropertyModel} from "./properties"; +import {Requirement} from "./requirement"; +export interface RequirementCapabilityModel{}; //this is an object contains keys, when each key has matching array. // for example: key = tosca.capabilities.network.Linkable and the match array is array of capabilities objects export class CapabilitiesGroup { @@ -44,7 +46,7 @@ export class CapabilitiesGroup { } } -export class Capability { +export class Capability implements RequirementCapabilityModel{ //server data name:string; @@ -53,11 +55,12 @@ export class Capability { type:string; uniqueId:string; capabilitySources:Array; + leftOccurrences:string; minOccurrences:string; maxOccurrences:string; - properties:Array; description:string; validSourceTypes:Array; + properties:Array; //custom selected:boolean; filterTerm:string; @@ -72,6 +75,7 @@ export class Capability { this.type = capability.type; this.uniqueId = capability.uniqueId; this.capabilitySources = capability.capabilitySources; + this.leftOccurrences = capability.leftOccurrences; this.minOccurrences = capability.minOccurrences; this.maxOccurrences = capability.maxOccurrences; this.properties = capability.properties; @@ -83,9 +87,13 @@ export class Capability { } } + public getTitle():string { + return this.ownerName + ': ' + this.name; + } + public getFullTitle():string { let maxOccurrences:string = this.maxOccurrences === 'UNBOUNDED' ? '∞' : this.maxOccurrences; - return this.ownerName + ': ' + this.name + ': [' + this.minOccurrences + ', ' + maxOccurrences + ']'; + return this.getTitle() + ': [' + this.minOccurrences + ', ' + maxOccurrences + ']'; } public toJSON = ():any => { @@ -110,6 +118,10 @@ export class Capability { }); } } + + public isFulfilled() { + return parseInt(this.leftOccurrences) === 0; + } } diff --git a/catalog-ui/src/app/models/components/component.ts b/catalog-ui/src/app/models/components/component.ts index 53e8f05cbe..daa4a19e19 100644 --- a/catalog-ui/src/app/models/components/component.ts +++ b/catalog-ui/src/app/models/components/component.ts @@ -29,6 +29,8 @@ import {CommonUtils} from "../../utils/common-utils"; import {QueueUtils} from "../../utils/functions"; import {ArtifactGroupType} from "../../utils/constants"; import {ComponentMetadata} from "../component-metadata"; +import {Capability} from "../capability"; +import {Requirement} from "../requirement"; // import {} export interface IComponent { @@ -82,6 +84,7 @@ export interface IComponent { createRelation(link:RelationshipModel):ng.IPromise; deleteRelation(link:RelationshipModel):ng.IPromise; + fetchRelation(linkId:string):ng.IPromise; //Modules @@ -356,7 +359,6 @@ export abstract class Component implements IComponent { // find exist instance property in parent component for update the new value ( find bu uniqueId ) let existProperty:PropertyModel = _.find(this.properties, {uniqueId: newProperty.uniqueId}); let propertyIndex = this.properties.indexOf(existProperty); - newProperty.readonly = this.uniqueId != newProperty.parentUniqueId; this.properties[propertyIndex] = newProperty; deferred.resolve(newProperty); }; @@ -607,6 +609,58 @@ export abstract class Component implements IComponent { }; + public syncComponentByRelation(relation:RelationshipModel) { + relation.relationships.forEach((rel) => { + if (rel.capability) { + const toComponentInstance:ComponentInstance = this.componentInstances.find((inst) => inst.uniqueId === relation.toNode); + const toComponentInstanceCapability:Capability = toComponentInstance.findCapability( + rel.capability.type, rel.capability.uniqueId, rel.capability.ownerId, rel.capability.name); + const isCapabilityFulfilled:boolean = rel.capability.isFulfilled(); + if (isCapabilityFulfilled && toComponentInstanceCapability) { + // if capability is fulfilled and in component, then remove it + console.log('Capability is fulfilled', rel.capability.getFullTitle(), rel.capability.leftOccurrences); + toComponentInstance.capabilities[rel.capability.type].splice( + toComponentInstance.capabilities[rel.capability.type].findIndex((cap) => cap === toComponentInstanceCapability), 1 + ) + } else if (!isCapabilityFulfilled && !toComponentInstanceCapability) { + // if capability is unfulfilled and not in component, then add it + console.log('Capability is unfulfilled', rel.capability.getFullTitle(), rel.capability.leftOccurrences); + toComponentInstance.capabilities[rel.capability.type].push(rel.capability); + } + } + if (rel.requirement) { + const fromComponentInstance:ComponentInstance = this.componentInstances.find((inst) => inst.uniqueId === relation.fromNode); + const fromComponentInstanceRequirement:Requirement = fromComponentInstance.findRequirement( + rel.requirement.capability, rel.requirement.uniqueId, rel.requirement.ownerId, rel.requirement.name); + const isRequirementFulfilled:boolean = rel.requirement.isFulfilled(); + if (isRequirementFulfilled && fromComponentInstanceRequirement) { + // if requirement is fulfilled and in component, then remove it + console.log('Requirement is fulfilled', rel.requirement.getFullTitle(), rel.requirement.leftOccurrences); + fromComponentInstance.requirements[rel.requirement.capability].splice( + fromComponentInstance.requirements[rel.requirement.capability].findIndex((req) => req === fromComponentInstanceRequirement), 1 + ) + } else if (!isRequirementFulfilled && !fromComponentInstanceRequirement) { + // if requirement is unfulfilled and not in component, then add it + console.log('Requirement is unfulfilled', rel.requirement.getFullTitle(), rel.requirement.leftOccurrences); + fromComponentInstance.requirements[rel.requirement.capability].push(rel.requirement); + } + } + }); + } + + public fetchRelation = (linkId:string):ng.IPromise => { + let deferred = this.$q.defer(); + let onSuccess = (relation:RelationshipModel):void => { + this.syncComponentByRelation(relation); + deferred.resolve(relation); + }; + let onFailed = (error:any):void => { + deferred.reject(error); + }; + this.componentService.fetchRelation(this.uniqueId, linkId).then(onSuccess, onFailed); + return deferred.promise; + }; + public createRelation = (relation:RelationshipModel):ng.IPromise => { let deferred = this.$q.defer(); let onSuccess = (relation:RelationshipModel):void => { @@ -615,6 +669,7 @@ export abstract class Component implements IComponent { this.componentInstancesRelations = []; } this.componentInstancesRelations.push(new RelationshipModel(relation)); + this.syncComponentByRelation(relation); deferred.resolve(relation); }; let onFailed = (error:any):void => { @@ -627,11 +682,11 @@ export abstract class Component implements IComponent { public deleteRelation = (relation:RelationshipModel):ng.IPromise => { let deferred = this.$q.defer(); - let onSuccess = (responseRelation:RelationshipModel):void => { + let onSuccess = (relation:RelationshipModel):void => { console.log("Link Deleted In Server"); let relationToDelete = _.find(this.componentInstancesRelations, (item) => { return item.fromNode === relation.fromNode && item.toNode === relation.toNode && _.some(item.relationships, (relationship)=> { - return angular.equals(relation.relationships[0], relationship); + return angular.equals(relation.relationships[0].relation, relationship.relation); }); }); let index = this.componentInstancesRelations.indexOf(relationToDelete); @@ -640,11 +695,14 @@ export abstract class Component implements IComponent { this.componentInstancesRelations.splice(index, 1); } else { this.componentInstancesRelations[index].relationships = - _.reject(this.componentInstancesRelations[index].relationships, relation.relationships[0]); + _.reject(this.componentInstancesRelations[index].relationships, (relationship) => { + return angular.equals(relation.relationships[0].relation, relationship.relation); + }); } } else { console.error("Error while deleting relation - the return delete relation from server was not found in UI") } + this.syncComponentByRelation(relation); deferred.resolve(relation); }; let onFailed = (error:any):void => { @@ -658,8 +716,8 @@ export abstract class Component implements IComponent { public updateRequirementsCapabilities = ():ng.IPromise => { let deferred = this.$q.defer(); let onSuccess = (response:any):void => { - this.capabilities = response.capabilities; - this.requirements = response.requirements; + this.capabilities = new CapabilitiesGroup(response.capabilities); + this.requirements = new RequirementsGroup(response.requirements); deferred.resolve(response); }; let onFailed = (error:any):void => { diff --git a/catalog-ui/src/app/models/componentsInstances/componentInstance.ts b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts index 06939a7a9e..59521ccfc8 100644 --- a/catalog-ui/src/app/models/componentsInstances/componentInstance.ts +++ b/catalog-ui/src/app/models/componentsInstances/componentInstance.ts @@ -23,7 +23,9 @@ */ 'use strict'; import {ArtifactGroupModel, CapabilitiesGroup,RequirementsGroup, PropertyModel, InputModel, Module} from "../../models"; -import {ResourceType} from "../../utils/constants"; +import {ResourceType,ComponentType} from "../../utils/constants"; +import {Capability} from "../capability"; +import {Requirement} from "../requirement"; export class ComponentInstance { @@ -46,6 +48,10 @@ export class ComponentInstance { public capabilities:CapabilitiesGroup; public requirements:RequirementsGroup; public customizationUUID:string; + public sourceModelInvariant:string; + public sourceModelName:string; + public sourceModelUid:string; + public sourceModelUuid:string; //custom properties public certified:boolean; public iconSprite:string; @@ -79,6 +85,10 @@ export class ComponentInstance { this.updatePosition(componentInstance.posX, componentInstance.posY); this.groupInstances = componentInstance.groupInstances; this.invariantName = componentInstance.invariantName; + this.sourceModelInvariant = componentInstance.sourceModelInvariant; + this.sourceModelName = componentInstance.sourceModelName; + this.sourceModelUid = componentInstance.sourceModelUid; + this.sourceModelUuid = componentInstance.sourceModelUuid; } } @@ -97,6 +107,10 @@ export class ComponentInstance { return this.originType === ResourceType.VF || this.originType === ResourceType.PNF || this.originType === ResourceType.CVFC ; } + public isServiceProxy = () :boolean => { + return this.originType === ComponentType.SERVICE_PROXY; + } + public setInstanceRC = ():void=> { _.forEach(this.requirements, (requirementValue:Array, requirementKey)=> { _.forEach(requirementValue, (requirement)=> { @@ -121,6 +135,30 @@ export class ComponentInstance { this.posY = posY; } + public findRequirement(reqType:string, uniqueId:string, ownerId:string, name:string):Requirement|undefined { + let requirement:Requirement = undefined; + const searchGroup = (reqType) ? [this.requirements[reqType]] : this.requirements; + _.some(_.keys(searchGroup), (searchType) => { + requirement = _.find(searchGroup[searchType], (req:Requirement) => ( + req.uniqueId === uniqueId && req.ownerId === ownerId && req.name === name + )); + return requirement; + }); + return requirement; + } + + public findCapability(capType:string, uniqueId:string, ownerId:string, name:string):Capability|undefined { + let capability:Capability = undefined; + const searchGroup = (capType) ? [this.capabilities[capType]] : this.capabilities; + _.some(_.keys(searchGroup), (searchType) => { + capability = _.find(searchGroup[searchType], (cap:Capability) => ( + cap.uniqueId === uniqueId && cap.ownerId === ownerId && cap.name === name + )); + return capability; + }); + return capability; + } + public toJSON = ():any => { let temp = angular.copy(this); temp.certified = undefined; diff --git a/catalog-ui/src/app/models/componentsInstances/serviceProxyInstance.ts b/catalog-ui/src/app/models/componentsInstances/serviceProxyInstance.ts new file mode 100644 index 0000000000..a035a17db8 --- /dev/null +++ b/catalog-ui/src/app/models/componentsInstances/serviceProxyInstance.ts @@ -0,0 +1,35 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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========================================================= + */ + +/** + * Created by obarda on 2/4/2016. + */ +'use strict'; +import {ComponentInstance} from "./componentInstance"; + +export class ServiceProxyInstance extends ComponentInstance { + + constructor(componentInstance?:ServiceProxyInstance) { + super(componentInstance); + this.iconSprite = "sprite-proxy-services-icons"; + //this.originType = "ServiceProxy"; + } +} + diff --git a/catalog-ui/src/app/models/graph/connectRelationModel.ts b/catalog-ui/src/app/models/graph/connectRelationModel.ts new file mode 100644 index 0000000000..af9732fa59 --- /dev/null +++ b/catalog-ui/src/app/models/graph/connectRelationModel.ts @@ -0,0 +1,122 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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========================================================= + */ +'use strict'; +import {Match} from "./match-relation"; +import {CompositionCiNodeBase} from "./nodes/composition-graph-nodes/composition-ci-node-base"; +import {ComponentInstance} from "../componentsInstances/componentInstance"; + +export class ConnectRelationModel { + + fromNode:CompositionCiNodeBase; + toNode:CompositionCiNodeBase; + menuPosition:Cy.Position; + rightSideLink:GraphLinkMenuSide; + leftSideLink:GraphLinkMenuSide; + selectionText:string; + possibleRelations:Array; + + constructor(fromNode:CompositionCiNodeBase, toNode:CompositionCiNodeBase, possibleRelations:Array) { + this.fromNode = fromNode; + this.toNode = toNode; + + this.leftSideLink = new GraphLinkMenuSide(this.fromNode.componentInstance); + this.rightSideLink = new GraphLinkMenuSide(this.toNode.componentInstance); + this.selectionText = ''; + this.possibleRelations = possibleRelations; + + possibleRelations.forEach((match:any) => { + + let reqObjKey:string = match.requirement.ownerName + match.requirement.uniqueId; + let capObjKey:string = match.secondRequirement ? match.secondRequirement.ownerName + match.secondRequirement.uniqueId + : match.capability.ownerName + match.capability.uniqueId; + + if (match.fromNode === this.leftSideLink.componentInstance.uniqueId) { + //init the left side requirements Array + if (!this.leftSideLink.requirements[reqObjKey]) { + this.leftSideLink.requirements[reqObjKey] = []; + } + //push the match to fromNode object (from node is always the requirement) + this.leftSideLink.requirements[reqObjKey].push(match); + + //init the right side capabilities Array + if (!this.rightSideLink.capabilities[capObjKey]) { + this.rightSideLink.capabilities[capObjKey] = []; + } + //add to array + this.rightSideLink.capabilities[capObjKey].push(match); + + + } else { + if (!this.rightSideLink.requirements[reqObjKey]) { + this.rightSideLink.requirements[reqObjKey] = []; + } + this.rightSideLink.requirements[reqObjKey].push(match); + + if (!this.leftSideLink.capabilities[capObjKey]) { + this.leftSideLink.capabilities[capObjKey] = []; + } + this.leftSideLink.capabilities[capObjKey].push(match); + } + }); + + } +} + +export class GraphLinkMenuSide { + public componentInstance:ComponentInstance; + public selectedMatch:Array; //match array returned by function in utils + public requirements:any; //array of matches returned by function in utils + public capabilities:any; //array of matches returned by function in utils + + constructor(componentInstance:ComponentInstance) { + this.componentInstance = componentInstance; + this.capabilities = {}; + this.requirements = {}; + } + + public selectMatchArr(matchArr:Array):void { + if (this.selectedMatch === matchArr) { + this.selectedMatch = undefined; + } else { + this.selectedMatch = matchArr; + } + } + + + //TODO move to match object + public getPreviewText(showReq:boolean):string { + if (!this.selectedMatch) { + return ''; + } + + let match:any = this.selectedMatch[0]; + if (showReq) { + return match.requirement.ownerName + ': ' + match.requirement.name + + ': [' + match.requirement.minOccurrences + ', ' + match.requirement.maxOccurrences + ']'; + } else if (match.secondRequirement) { + return match.secondRequirement.ownerName + ': ' + match.secondRequirement.name + + ': [' + match.secondRequirement.minOccurrences + ', ' + match.secondRequirement.maxOccurrences + ']'; + } + else { + return match.capability.ownerName + ': ' + match.capability.name + + ': [' + match.capability.minOccurrences + ', ' + match.capability.maxOccurrences + ']'; + } + } +} diff --git a/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-link.ts b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-link.ts index 6b2e12a215..42cce998f1 100644 --- a/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-link.ts +++ b/catalog-ui/src/app/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-link.ts @@ -29,7 +29,7 @@ export class CompositionCiUcpeLink extends CompositionCiLinkBase { super(relation, singleRelation); this.isFromUcpe = from; this.target = relation.toNode; - this.source = singleRelation.requirementOwnerId; + this.source = singleRelation.relation.requirementOwnerId; this.relation.relationships = [singleRelation]; this.color = GraphColors.BASE_LINK; } diff --git a/catalog-ui/src/app/models/graph/graph-links/links-factory.ts b/catalog-ui/src/app/models/graph/graph-links/links-factory.ts index 0be5d6faf6..88c5323330 100644 --- a/catalog-ui/src/app/models/graph/graph-links/links-factory.ts +++ b/catalog-ui/src/app/models/graph/graph-links/links-factory.ts @@ -46,7 +46,7 @@ export class LinksFactory { // newRelation = new CompositionCiUcpeLink(relation, fromNode.isUcpePart, singleRelation); // } // } else - if (singleRelation.relationship.type && _.includes(singleRelation.relationship.type.toLowerCase(), 'link')) { + if (singleRelation.relation.relationship.type && _.includes(singleRelation.relation.relationship.type.toLowerCase(), 'link')) { newRelation = new CompositionCiVLink(relation, singleRelation); } else { newRelation = new CompositionCiSimpleLink(relation, singleRelation); @@ -68,7 +68,7 @@ export class LinksFactory { let newRelation:ModuleCiLinkBase; - if (_.includes(singleRelation.relationship.type.toLowerCase(), 'link')) { + if (_.includes(singleRelation.relation.relationship.type.toLowerCase(), 'link')) { newRelation = new ModuleCiVlLink(relation, singleRelation); } else { newRelation = new ModuleCiLinkBase(relation, singleRelation); diff --git a/catalog-ui/src/app/models/graph/match-relation.ts b/catalog-ui/src/app/models/graph/match-relation.ts index 4fb073d579..8d139d6405 100644 --- a/catalog-ui/src/app/models/graph/match-relation.ts +++ b/catalog-ui/src/app/models/graph/match-relation.ts @@ -20,80 +20,49 @@ 'use strict'; import {Requirement} from "../requirement"; import {Capability} from "../capability"; -import {Relationship, RelationshipModel, RelationType} from "./relationship"; +import {Relationship, RelationshipModel} from "./relationship"; +import {PropertyModel} from "../properties"; -export class MatchBase { +export class Match { requirement:Requirement; + capability:Capability; isFromTo:boolean; fromNode:string; toNode:string; + capabilityProperties:Array; // use this to store the capability properties, since there are times the capability itself is not available (when fulfilled). + private _relationship:Relationship; - constructor(requirement:Requirement, isFromTo:boolean, fromNode:string, toNode:string) { + constructor(requirement:Requirement, capability:Capability, isFromTo:boolean, fromNode:string, toNode:string) { this.requirement = requirement; + this.capability = capability; this.isFromTo = isFromTo; this.fromNode = fromNode; this.toNode = toNode; } - public getDisplayText = (menuSide:string):string => { - return ''; - }; - - public isOwner = (id:string):boolean => { - return false; - } - -} - -export class MatchReqToReq extends MatchBase { - - secondRequirement:Requirement; - - constructor(requirement:Requirement, secondRequirement:Requirement, isFromTo:boolean, fromNode:string, toNode:string) { - super(requirement, isFromTo, fromNode, toNode); - this.secondRequirement = secondRequirement; - } - - public getDisplayText = (menuSide:string):string => { - if ('left' == menuSide) { - return this.requirement.getFullTitle(); + // NOTE: Hold the relationship instance for cases capability / requirement are not available (when fulfilled). + // In case relationship instance is not manually saved to here, then build the relationship from the given capability and requirement. + public get relationship():Relationship { + if (!this._relationship) { + this._relationship = this.matchToRelation(); } - return this.secondRequirement.getFullTitle(); - }; - - public isOwner = (id:string):boolean => { - return this.secondRequirement.ownerId === id || this.requirement.ownerId === id; + return this._relationship; } -} - -export class MatchReqToCapability extends MatchBase { - - capability:Capability; - - constructor(requirement:Requirement, capability:Capability, isFromTo:boolean, fromNode:string, toNode:string) { - super(requirement, isFromTo, fromNode, toNode); - this.capability = capability; + public set relationship(relationship) { + this._relationship = relationship; } public matchToRelation = ():Relationship => { - let relationship:Relationship = new Relationship(); - relationship.capability = this.capability.name; - relationship.capabilityOwnerId = this.capability.ownerId; - relationship.capabilityUid = this.capability.uniqueId; - relationship.relationship = new RelationType(this.capability.type); - relationship.requirement = this.requirement.name; - relationship.requirementOwnerId = this.requirement.ownerId; - relationship.requirementUid = this.requirement.uniqueId; + const relationship:Relationship = new Relationship(); + relationship.setRelationProperties(this.capability, this.requirement); return relationship; }; - public getDisplayText = (menuSide:string):string => { if (this.isFromTo && 'left' == menuSide || !this.isFromTo && 'right' == menuSide) { return this.requirement.getFullTitle(); } return this.capability.getFullTitle(); - }; public isOwner = (id:string):boolean => { @@ -108,4 +77,3 @@ export class MatchReqToCapability extends MatchBase { }; } - diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts index 681cebc8d2..3b634b1f6e 100644 --- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts +++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts @@ -48,7 +48,6 @@ export abstract class CompositionCiNodeBase extends CommonCINodeBase implements this.isGroup = false; this.isUcpePart = false; this.isInsideGroup = false; - } public initUncertifiedImage(node:Cy.Collection, nodeMinSize:number):string { @@ -61,8 +60,10 @@ export abstract class CompositionCiNodeBase extends CommonCINodeBase implements uncertifiedCanvasWidth = nodeWidth + uncertifiedIconWidth/2; //expand canvas so that only half of the icon overlaps with the node } - this.imageCreator.getImageBase64(this.imagesPath + ImagesUrl.RESOURCE_ICONS + this.componentInstance.icon + '.png', - this.imagesPath + ImagesUrl.RESOURCE_ICONS + 'uncertified.png', nodeWidth, uncertifiedCanvasWidth, uncertifiedIconWidth) + + + this.imageCreator.getImageBase64(this.imagesPath + this.componentInstance.icon + '.png', + this.imagesPath + 'uncertified.png', nodeWidth, uncertifiedCanvasWidth, uncertifiedIconWidth) .then(imageBase64 => { this.img = imageBase64; node.style({ diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-configuration.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-configuration.ts new file mode 100644 index 0000000000..1182f5e664 --- /dev/null +++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-configuration.ts @@ -0,0 +1,39 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { ImagesUrl, GraphUIObjects} from "../../../../utils/constants"; +import {ComponentInstance, CompositionCiNodeBase} from "../../../../models"; +import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service"; +export class CompositionCiNodeConfiguration extends CompositionCiNodeBase { + + constructor(instance:ComponentInstance, + imageCreator:ImageCreatorService) { + super(instance, imageCreator); + this.initConfiguration(); + } + + private initConfiguration():void { + this.imagesPath = this.imagesPath + ImagesUrl.RESOURCE_ICONS; + this.img = this.imagesPath + this.componentInstance.icon + '.png'; + this.imgWidth = GraphUIObjects.SMALL_RESOURCE_WIDTH; + this.type = "basic-small-node"; + this.classes = 'configuration-node'; + } +} diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts index cded0ea104..3bd57695ec 100644 --- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts +++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts @@ -34,7 +34,8 @@ export class CompositionCiNodeCp extends CompositionCiNodeBase { private initCp():void { let sdcConfig = AngularJSBridge.getAngularConfig(); - this.img = sdcConfig.imagesPath + ImagesUrl.RESOURCE_ICONS + this.componentInstance.icon + '.png'; + this.imagesPath = this.imagesPath + ImagesUrl.RESOURCE_ICONS; + this.img = this.imagesPath + this.componentInstance.icon + '.png'; this.imgWidth = GraphUIObjects.SMALL_RESOURCE_WIDTH; this.type = "basic-small-node"; //if the cp from type cpEndPointInstances create with another template diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service-proxy.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service-proxy.ts new file mode 100644 index 0000000000..b993490043 --- /dev/null +++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service-proxy.ts @@ -0,0 +1,42 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { ImagesUrl, GraphUIObjects} from "../../../../utils/constants"; +import {ComponentInstance, CompositionCiNodeBase} from "../../../../models"; +import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service"; +export class CompositionCiNodeServiceProxy extends CompositionCiNodeBase { + + constructor(instance:ComponentInstance, + imageCreator:ImageCreatorService) { + super(instance, imageCreator); + this.initService(); + } + + private initService():void { + this.imagesPath = this.imagesPath + ImagesUrl.SERVICE_PROXY_ICONS; + this.img = this.imagesPath + this.componentInstance.icon + '.png'; + this.imgWidth = GraphUIObjects.DEFAULT_RESOURCE_WIDTH; + this.classes = 'service-node' + if (!this.certified) { + this.classes = this.classes + ' not-certified'; + } + + } +} diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts index 81ee61a14f..b4e6ac354a 100644 --- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts +++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts @@ -30,7 +30,7 @@ export class CompositionCiNodeService extends CompositionCiNodeBase { } private initService():void { - + this.imagesPath = this.imagesPath + ImagesUrl.SERVICE_ICONS; this.img = this.imagesPath + ImagesUrl.SERVICE_ICONS + this.componentInstance.icon + '.png'; this.imgWidth = GraphUIObjects.DEFAULT_RESOURCE_WIDTH; this.classes = 'service-node' diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.ts index 5013e52457..a79b183db4 100644 --- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.ts +++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.ts @@ -20,6 +20,7 @@ import {CompositionCiNodeCp, ComponentInstance} from "./../../../../models"; import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service"; +import { ImagesUrl} from "../../../../utils/constants"; export class CompositionCiNodeUcpeCp extends CompositionCiNodeCp { @@ -31,5 +32,6 @@ export class CompositionCiNodeUcpeCp extends CompositionCiNodeCp { this.parent = instance.uniqueId; this.type = 'ucpe-cp-node'; //the type is for the handle (plus icon) extension this.isDraggable = false; + this.imagesPath = this.imagesPath + ImagesUrl.RESOURCE_ICONS; } } diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts index b8f844cba8..3dd6a4e238 100644 --- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts +++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts @@ -21,6 +21,7 @@ import {ComponentInstance} from "../../../componentsInstances/componentInstance"; import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service"; import {CompositionCiNodeBase} from "./composition-ci-node-base"; +import { ImagesUrl} from "../../../../utils/constants"; export class NodeUcpe extends CompositionCiNodeBase { constructor(instance:ComponentInstance, @@ -36,6 +37,7 @@ export class NodeUcpe extends CompositionCiNodeBase { this.classes = 'ucpe-node'; this.type = 'ucpe-node'; this.allowConnection = false; + this.imagesPath = this.imagesPath + ImagesUrl.RESOURCE_ICONS; if (!this.certified) { this.classes = this.classes + ' not-certified-ucpe'; diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts index 005804c11f..b5ad57a5c3 100644 --- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts +++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts @@ -31,7 +31,8 @@ export class CompositionCiNodeVf extends CompositionCiNodeBase { } private initVf():void { - this.img = this.imagesPath + ImagesUrl.RESOURCE_ICONS + this.componentInstance.icon + '.png'; + this.imagesPath = this.imagesPath + ImagesUrl.RESOURCE_ICONS; + this.img = this.imagesPath + this.componentInstance.icon + '.png'; this.imgWidth = GraphUIObjects.DEFAULT_RESOURCE_WIDTH; this.classes = 'vf-node'; if (!this.certified) { diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts index c8ae004003..5f07986d5c 100644 --- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts +++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts @@ -29,6 +29,7 @@ export class CompositionCiNodeVfc extends CompositionCiNodeBase { } private initVfc():void { - this.img = this.imagesPath + ImagesUrl.RESOURCE_ICONS + this.componentInstance.icon + '.png'; + this.imagesPath = this.imagesPath + ImagesUrl.RESOURCE_ICONS; + this.img = this.imagesPath + this.componentInstance.icon + '.png'; } } diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts index bf52ec0408..29cd9256d9 100644 --- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts +++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts @@ -48,6 +48,7 @@ export class CompositionCiNodeVl extends CompositionCiNodeBase { } this.img = this.imagesPath + ImagesUrl.RESOURCE_ICONS + 'vl.png'; this.imgWidth = GraphUIObjects.SMALL_RESOURCE_WIDTH; + this.imagesPath = this.imagesPath + ImagesUrl.RESOURCE_ICONS; this.classes = 'vl-node'; if (!this.certified) { diff --git a/catalog-ui/src/app/models/graph/nodes/modules-graph-nodes/module-node-base.ts b/catalog-ui/src/app/models/graph/nodes/modules-graph-nodes/module-node-base.ts index ccc8ed4afa..4e9fb0b0ab 100644 --- a/catalog-ui/src/app/models/graph/nodes/modules-graph-nodes/module-node-base.ts +++ b/catalog-ui/src/app/models/graph/nodes/modules-graph-nodes/module-node-base.ts @@ -24,6 +24,7 @@ import {ImagesUrl} from "../../../../utils/constants"; import {Module} from "../../../modules/base-module"; import {CommonNodeBase} from "../base-common-node"; +import {AngularJSBridge} from "../../../../services/angular-js-bridge-service"; export interface IModuleNodeBase { } @@ -44,7 +45,7 @@ export class ModuleNodeBase extends CommonNodeBase implements IModuleNodeBase { this.name = this.module.name; this.displayName = this.module.name; this.isGroup = true; - this.img = ImagesUrl.MODULE_ICON; + this.img = AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.MODULE_ICON; this.classes = "module-node"; } diff --git a/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts b/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts index c7f8eaa126..245f2e10d9 100644 --- a/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts +++ b/catalog-ui/src/app/models/graph/nodes/nodes-factory.ts @@ -19,8 +19,8 @@ */ 'use strict'; -import {CompositionCiNodeUcpeCp, Module, ModuleNodeBase, CompositionCiNodeVf, CompositionCiNodeVl, CompositionCiNodeCp, - NodeUcpe, CompositionCiNodeService, CompositionCiNodeBase, ComponentInstance} from "./../../../models"; +import {CompositionCiNodeUcpeCp, Module, ModuleNodeBase, CompositionCiNodeVf, CompositionCiNodeVl, CompositionCiNodeCp, CompositionCiNodeConfiguration, + NodeUcpe, CompositionCiNodeService,CompositionCiNodeServiceProxy, CompositionCiNodeBase, ComponentInstance} from "./../../../models"; import {ComponentType, ResourceType} from "../../../utils/constants"; import {ImageCreatorService} from "../../../directives/graphs-v2/image-creator/image-creator.service"; @@ -37,12 +37,18 @@ export class NodesFactory { if (instance.originType === ComponentType.SERVICE) { return new CompositionCiNodeService(instance, this.imageCreator); } + if (instance.originType === ComponentType.SERVICE_PROXY) { + return new CompositionCiNodeServiceProxy(instance, this.imageCreator); + } if (instance.originType === ResourceType.CP) { return new CompositionCiNodeCp(instance, this.imageCreator); } if (instance.originType === ResourceType.VL) { return new CompositionCiNodeVl(instance, this.imageCreator); } + if (instance.originType === ResourceType.CONFIGURATION) { + return new CompositionCiNodeConfiguration(instance, this.imageCreator); + } return new CompositionCiNodeVf(instance, this.imageCreator); }; diff --git a/catalog-ui/src/app/models/graph/relationMenuObjects.ts b/catalog-ui/src/app/models/graph/relationMenuObjects.ts deleted file mode 100644 index 37b7cee349..0000000000 --- a/catalog-ui/src/app/models/graph/relationMenuObjects.ts +++ /dev/null @@ -1,131 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * 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========================================================= - */ -'use strict'; -import {MatchReqToReq, MatchBase} from "./match-relation"; -import {CompositionCiNodeBase} from "./nodes/composition-graph-nodes/composition-ci-node-base"; -import {Component} from "../components/component"; -import {ComponentInstance} from "../componentsInstances/componentInstance"; - -export class RelationMenuDirectiveObj { - - fromNode:CompositionCiNodeBase; - toNode:CompositionCiNodeBase; - menuPosition:Cy.Position; - rightSideLink:GraphLinkMenuSide; - leftSideLink:GraphLinkMenuSide; - selectionText:string; - vlType:string; - - constructor(fromNode:CompositionCiNodeBase, toNode:CompositionCiNodeBase, menuPosition:Cy.Position, possibleRelations:Array) { - this.fromNode = fromNode; - this.toNode = toNode; - // this.modelLinks = modelLinks; - this.menuPosition = menuPosition; - this.leftSideLink = new GraphLinkMenuSide(this.fromNode.componentInstance); - this.rightSideLink = new GraphLinkMenuSide(this.toNode.componentInstance); - this.selectionText = ''; - this.vlType = null; - - possibleRelations.forEach((match:any) => { - - let reqObjKey:string = match.requirement.ownerName + match.requirement.uniqueId; - let capObjKey:string = match.secondRequirement ? match.secondRequirement.ownerName + match.secondRequirement.uniqueId - : match.capability.ownerName + match.capability.uniqueId; - - if (match.fromNode === this.leftSideLink.componentInstance.uniqueId) { - //init the left side requirements Array - if (!this.leftSideLink.requirements[reqObjKey]) { - this.leftSideLink.requirements[reqObjKey] = []; - } - //push the match to fromNode object (from node is always the requirement) - this.leftSideLink.requirements[reqObjKey].push(match); - - if (match instanceof MatchReqToReq) { - //init the right side requirements Array - if (!this.rightSideLink.requirements[capObjKey]) { - this.rightSideLink.requirements[capObjKey] = []; - } - this.rightSideLink.requirements[capObjKey].push(match); - } else { - //init the right side capabilities Array - if (!this.rightSideLink.capabilities[capObjKey]) { - this.rightSideLink.capabilities[capObjKey] = []; - } - //add to array - this.rightSideLink.capabilities[capObjKey].push(match); - } - - } else { - if (!this.rightSideLink.requirements[reqObjKey]) { - this.rightSideLink.requirements[reqObjKey] = []; - } - this.rightSideLink.requirements[reqObjKey].push(match); - - if (!this.leftSideLink.capabilities[capObjKey]) { - this.leftSideLink.capabilities[capObjKey] = []; - } - this.leftSideLink.capabilities[capObjKey].push(match); - } - }); - - } -} - -export class GraphLinkMenuSide { - public componentInstance:ComponentInstance; - public selectedMatch:Array; //match array returned by function in utils - public requirements:any; //array of matches returned by function in utils - public capabilities:any; //array of matches returned by function in utils - - constructor(componentInstance:ComponentInstance) { - this.componentInstance = componentInstance; - this.capabilities = {}; - this.requirements = {}; - } - - public selectMatchArr(matchArr:Array):void { - if (this.selectedMatch === matchArr) { - this.selectedMatch = undefined; - } else { - this.selectedMatch = matchArr; - } - } - - - //TODO move to match object - public getPreviewText(showReq:boolean):string { - if (!this.selectedMatch) { - return ''; - } - - let match:any = this.selectedMatch[0]; - if (showReq) { - return match.requirement.ownerName + ': ' + match.requirement.name + - ': [' + match.requirement.minOccurrences + ', ' + match.requirement.maxOccurrences + ']'; - } else if (match.secondRequirement) { - return match.secondRequirement.ownerName + ': ' + match.secondRequirement.name + - ': [' + match.secondRequirement.minOccurrences + ', ' + match.secondRequirement.maxOccurrences + ']'; - } - else { - return match.capability.ownerName + ': ' + match.capability.name + - ': [' + match.capability.minOccurrences + ', ' + match.capability.maxOccurrences + ']'; - } - } -} diff --git a/catalog-ui/src/app/models/graph/relationship.ts b/catalog-ui/src/app/models/graph/relationship.ts index 67a5488b59..57ff45ef00 100644 --- a/catalog-ui/src/app/models/graph/relationship.ts +++ b/catalog-ui/src/app/models/graph/relationship.ts @@ -58,7 +58,8 @@ export class RelationType { } } -export class Relationship { +export class RelationshipType { + id:string; capability:string; capabilityOwnerId:string; capabilityUid:string; @@ -67,8 +68,9 @@ export class Relationship { requirementOwnerId:string; requirementUid:string; - constructor(relationship?:Relationship) { + constructor(relationship?:RelationshipType) { if (relationship) { + this.id = relationship.id; this.capability = relationship.capability; this.capabilityOwnerId = relationship.capabilityOwnerId; this.capabilityUid = relationship.capabilityUid; @@ -79,17 +81,41 @@ export class Relationship { } else { this.relationship = new RelationType(); } - } - public setRelationProperties = (capability:Capability, requirement:Requirement)=> { - this.capability = capability.name; - this.capabilityOwnerId = capability.ownerId; - this.capabilityUid = capability.uniqueId; - this.relationship = new RelationType(capability.type); - this.requirement = requirement.name; - this.requirementOwnerId = requirement.ownerId; - this.requirementUid = requirement.uniqueId; + public setRelationProperties = (capability?:Capability, requirement?:Requirement)=> { + if (capability) { + this.capability = capability.name; + this.capabilityOwnerId = capability.ownerId; + this.capabilityUid = capability.uniqueId; + this.relationship = new RelationType(capability.type); + } + if (requirement) { + this.requirement = requirement.name; + this.requirementOwnerId = requirement.ownerId; + this.requirementUid = requirement.uniqueId; + } }; +} + +export class Relationship { + relation: RelationshipType; + capability?: Capability; + requirement?: Requirement; + + constructor(fullRelationship?:Relationship) { + if (fullRelationship) { + this.relation = new RelationshipType(fullRelationship.relation); + this.capability = fullRelationship.capability && new Capability(fullRelationship.capability); + this.requirement = fullRelationship.requirement && new Requirement(fullRelationship.requirement); + } else { + this.relation = new RelationshipType(); + } + } + public setRelationProperties(capability?:Capability, requirement?:Requirement) { + this.relation.setRelationProperties(capability, requirement); + this.capability = capability; + this.requirement = requirement; + }; } diff --git a/catalog-ui/src/app/models/heat-parameters.ts b/catalog-ui/src/app/models/heat-parameters.ts index a199c9d847..153108a5f4 100644 --- a/catalog-ui/src/app/models/heat-parameters.ts +++ b/catalog-ui/src/app/models/heat-parameters.ts @@ -31,6 +31,7 @@ export class HeatParameterModel { currentValue:string; defaultValue:string; + filterTerm:string; constructor(parameter?:HeatParameterModel) { } diff --git a/catalog-ui/src/app/models/properties-inputs/property-be-model.ts b/catalog-ui/src/app/models/properties-inputs/property-be-model.ts index c46c8ad28d..14b6385f2f 100644 --- a/catalog-ui/src/app/models/properties-inputs/property-be-model.ts +++ b/catalog-ui/src/app/models/properties-inputs/property-be-model.ts @@ -55,7 +55,7 @@ export class PropertyBEModel { this.schema = property.schema; this.type = property.type; this.uniqueId = property.uniqueId; - this.value = property.value ? property.value : property.defaultValue; + this.value = property.value; this.definition = property.definition; this.getInputValues = property.getInputValues; } diff --git a/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts b/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts index b35bb27b65..6faa6ada84 100644 --- a/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts +++ b/catalog-ui/src/app/models/properties-inputs/property-fe-model.ts @@ -38,6 +38,7 @@ export class PropertyFEModel extends PropertyBEModel { constructor(property: PropertyBEModel){ super(property); + this.value = property.value ? property.value : property.defaultValue;//In FE if a property doesn't have value - display the default value this.isSimpleType = PROPERTY_DATA.SIMPLE_TYPES.indexOf(this.type) > -1; this.setNonDeclared(); this.derivedDataType = this.getDerivedPropertyType(); diff --git a/catalog-ui/src/app/models/properties.ts b/catalog-ui/src/app/models/properties.ts index f46bf8beb0..7a1f1a39ef 100644 --- a/catalog-ui/src/app/models/properties.ts +++ b/catalog-ui/src/app/models/properties.ts @@ -21,6 +21,7 @@ 'use strict'; import {SchemaPropertyGroupModel, SchemaProperty} from "./aschema-property"; import {InputPropertyBase} from "./input-property-base"; +import {PropertyBEModel} from "./properties-inputs/property-be-model"; export class PropertiesGroup { constructor(propertiesObj?:PropertiesGroup) { @@ -54,8 +55,7 @@ export interface IPropertyModel extends InputPropertyBase { simpleType:string; } -export class PropertyModel implements IPropertyModel { - +export class PropertyModel extends PropertyBEModel implements IPropertyModel { //server data uniqueId:string; name:string; @@ -90,19 +90,10 @@ export class PropertyModel implements IPropertyModel { constructor(property?:PropertyModel) { + super(property); if (property) { - this.uniqueId = property.uniqueId; - this.name = property.name; this.constraints = property.constraints; - this.defaultValue = property.defaultValue; - this.description = property.description; - this.password = property.password; - this.required = property.required; - this.type = property.type; this.source = property.source; - this.parentUniqueId = property.parentUniqueId; - this.schema = property.schema; - this.value = property.value ? property.value : property.defaultValue; this.valueUniqueUid = property.valueUniqueUid; this.path = property.path; this.rules = property.rules; diff --git a/catalog-ui/src/app/models/radio-button.ts b/catalog-ui/src/app/models/radio-button.ts new file mode 100644 index 0000000000..e907b26bce --- /dev/null +++ b/catalog-ui/src/app/models/radio-button.ts @@ -0,0 +1,11 @@ +/** + * Created by rc2122 on 9/5/2017. + */ +export class RadioButtonModel{ + key: string; + value: any; + constructor(key: string, value: any){ + this.key = key; + this.value = value; + } +} diff --git a/catalog-ui/src/app/models/requirement.ts b/catalog-ui/src/app/models/requirement.ts index 53e870679d..d880456b06 100644 --- a/catalog-ui/src/app/models/requirement.ts +++ b/catalog-ui/src/app/models/requirement.ts @@ -22,6 +22,7 @@ * Created by obarda on 4/20/2016. */ 'use strict'; +import {RequirementCapabilityModel} from "./capability"; //this is an object contains keys, when each key has matching array. // for example: key = tosca.capabilities.network. and the match array is array of requirements objects export class RequirementsGroup { @@ -36,7 +37,7 @@ export class RequirementsGroup { } } -export class Requirement { +export class Requirement implements RequirementCapabilityModel{ //server data capability:string; @@ -46,6 +47,7 @@ export class Requirement { node:string; uniqueId:string; relationship:string; + leftOccurrences:string; minOccurrences:string; maxOccurrences:string; //custom @@ -61,6 +63,7 @@ export class Requirement { this.node = requirement.node; this.uniqueId = requirement.uniqueId; this.relationship = requirement.relationship; + this.leftOccurrences = requirement.leftOccurrences; this.minOccurrences = requirement.minOccurrences; this.maxOccurrences = requirement.maxOccurrences; this.initFilterTerm(); @@ -68,9 +71,12 @@ export class Requirement { } } + public getTitle():string { + return this.ownerName + ': ' + this.name; + } + public getFullTitle():string { - return this.ownerName + ': ' + this.name + - ': [' + this.minOccurrences + ', ' + this.maxOccurrences + ']'; + return this.getTitle() + ': [' + this.minOccurrences + ', ' + this.maxOccurrences + ']'; } public toJSON = ():any => { @@ -86,6 +92,10 @@ export class Requirement { (this.relationship ? (this.relationship.substring("tosca.relationships.".length) + " ") : "") + this.minOccurrences + "," + this.maxOccurrences; } + + public isFulfilled() { + return parseInt(this.leftOccurrences) === 0; + } } diff --git a/catalog-ui/src/app/models/user.ts b/catalog-ui/src/app/models/user.ts index 54ddf1e5f6..0fb5364290 100644 --- a/catalog-ui/src/app/models/user.ts +++ b/catalog-ui/src/app/models/user.ts @@ -19,7 +19,6 @@ */ 'use strict'; -import {IUserResource} from "../services/user-resource-service"; export enum UserRole { ADMIN, @@ -46,7 +45,7 @@ export interface IUserProperties extends IUserManager { } export interface IUser { - resource:IUserResource; + userInfo:IUserProperties; getRole():UserRole; getRoleToView():string; getName():string; @@ -56,32 +55,32 @@ export interface IUser { export class User implements IUser { - constructor(public resource:IUserResource) { + constructor(public userInfo:IUserProperties) { } public getLastName = () => { - return this.resource.lastName; - } + return this.userInfo.lastName; + }; public getFirstName = () => { - return this.resource.firstName; - } + return this.userInfo.firstName; + }; public getName = () => { - return this.resource.firstName + ' ' + this.resource.lastName; - } + return this.userInfo.firstName + ' ' + this.userInfo.lastName; + }; public getLastLogin = () => { - if (!this.resource.lastLoginTime || this.resource.lastLoginTime === "0") { + if (!this.userInfo.lastLoginTime || this.userInfo.lastLoginTime === "0") { return ""; } else { - return this.resource.lastLoginTime; + return this.userInfo.lastLoginTime; } - } + }; public getRole = ():UserRole => { let role:UserRole; - switch (UserRole[this.resource.role.toUpperCase()]) { + switch (UserRole[this.userInfo.role.toUpperCase()]) { case UserRole.ADMIN: role = UserRole.ADMIN; break; @@ -99,10 +98,10 @@ export class User implements IUser { break; } return role; - } + }; public getRoleToView = ():string => { - let role:string = this.resource.role.toLowerCase().replace('governor', 'governance_Rep'); + let role:string = this.userInfo.role.toLowerCase().replace('governor', 'governance_Rep'); return role.charAt(0).toUpperCase() + role.slice(1).replace('_', ' '); } } diff --git a/catalog-ui/src/app/models/wizard-step.ts b/catalog-ui/src/app/models/wizard-step.ts new file mode 100644 index 0000000000..b8484b2dd6 --- /dev/null +++ b/catalog-ui/src/app/models/wizard-step.ts @@ -0,0 +1,19 @@ +/** + * Created by rc2122 on 8/16/2017. + */ + +import {Type} from "@angular/core"; + +export interface IStepComponent { + preventNext():boolean; + preventBack():boolean; +} + +export class StepModel{ + title: string; + component: Type; + constructor(title: string, component: Type){ + this.title = title; + this.component = component; + } +} diff --git a/catalog-ui/src/app/modules/directive-module.ts b/catalog-ui/src/app/modules/directive-module.ts index 8142cc49bd..4039a7683a 100644 --- a/catalog-ui/src/app/modules/directive-module.ts +++ b/catalog-ui/src/app/modules/directive-module.ts @@ -40,7 +40,6 @@ import {ExpandCollapseMenuBoxDirective} from "../directives/utils/expand-collaps import {PunchOutDirective} from "../directives/punch-out/punch-out"; import {CustomValidationDirective} from "../directives/custom-validation/custom-validation"; import {EcompHeaderDirective} from "../directives/ecomp-header/ecomp-header"; -import {EcompFooterDirective} from "../directives/ecomp-footer/ecomp-footer"; import {EditNamePopoverDirective} from "../directives/edit-name-popover/edit-name-popover-directive"; import {DataTypeFieldsStructureDirective} from "../directives/property-types/data-type-fields-structure/data-type-fields-structure"; import {TypeMapDirective} from "../directives/property-types/type-map/type-map-directive"; @@ -54,7 +53,6 @@ import {SdcTabsDirective} from "../directives/sdc-tabs/sdc-tabs-directive"; import {SdcSingleTabDirective, InnerSdcSingleTabDirective} from "../directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive"; import {ExpandCollapseListHeaderDirective} from "../directives/utils/expand-collapse-list-header/expand-collapse-list-header"; import {JsonExportExcelDirective} from "../directives/export-json-to-excel/export-json-to-excel"; -import {TopNavDirective} from "../directives/layout/top-nav/top-nav"; import {TopProgressDirective} from "../directives/layout/top-progress/top-progress"; import {CheckboxElementDirective} from "../directives/elements/checkbox/checkbox"; import {RadiobuttonElementDirective} from "../directives/elements/radiobutton/radiobutton"; @@ -105,7 +103,6 @@ directiveModule.directive('expandCollapseMenuBox', ExpandCollapseMenuBoxDirectiv directiveModule.directive('punchOut', PunchOutDirective.factory); directiveModule.directive('customValidation', CustomValidationDirective.factory); directiveModule.directive('ecompHeader', EcompHeaderDirective.factory); -directiveModule.directive('ecompFooter', EcompFooterDirective.factory); directiveModule.directive('editNamePopover', EditNamePopoverDirective.factory); directiveModule.directive('fieldsStructure', DataTypeFieldsStructureDirective.factory); directiveModule.directive('typeMap', TypeMapDirective.factory); @@ -122,7 +119,6 @@ directiveModule.directive('jsonExportExcel', JsonExportExcelDirective.factory); directiveModule.directive('expandCollapseListHeader', ExpandCollapseListHeaderDirective.factory); // // // Layouts -directiveModule.directive('topNav', TopNavDirective.factory); directiveModule.directive('topProgress', TopProgressDirective.factory); // // // Elements @@ -170,3 +166,18 @@ directiveModule.service('DeploymentGraphGeneralUtils', DeploymentGraphGeneralUti //Compoisiton right tab directives directiveModule.directive('capabilitiesList', CapabilitiesListDirective.factory); directiveModule.directive('requirementsList', RequirementsListDirective.factory); + + +// *** NG2 Components (downgraded) *** // +import {MenuListNg2Component} from "../ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component"; +import {TopNavComponent} from "../ng2/components/layout/top-nav/top-nav.component"; + +directiveModule.directive('menuListNg2', downgradeComponent({ + component: MenuListNg2Component, + inputs: ['props'] +}) as angular.IDirectiveFactory); +directiveModule.directive('topNav', downgradeComponent({ + component: TopNavComponent, + inputs: ['version', 'menuModel', 'topLvlSelectedIndex', 'hideSearch', 'searchTerm', 'notificationIconCallback'], + outputs: ['searchTermChange'] +}) as ng.IDirectiveFactory); diff --git a/catalog-ui/src/app/modules/service-module.ts b/catalog-ui/src/app/modules/service-module.ts index 99624ada45..b677a6d842 100644 --- a/catalog-ui/src/app/modules/service-module.ts +++ b/catalog-ui/src/app/modules/service-module.ts @@ -43,8 +43,14 @@ import {FileUtils} from "../utils/file-utils"; import {ValidationUtils} from "../utils/validation-utils"; import {AngularJSBridge} from "../services/angular-js-bridge-service"; import {LoaderService} from "../services/loader-service"; -import {UserResourceService} from "../services/user-resource-service"; import {CategoryResourceService} from "../services/category-resource-service"; +import {downgradeInjectable} from "@angular/upgrade/static"; +import {ModalService} from "../ng2/services/modal.service"; +import {ComponentServiceNg2} from "../ng2/services/component-services/component.service"; +import {ServiceServiceNg2} from "../ng2/services/component-services/service.service"; +import {ConnectionWizardService} from "../ng2/pages/connection-wizard/connection-wizard.service"; +import {ComponentInstanceServiceNg2} from "../ng2/services/component-instance-services/component-instance.service"; +import {UserService as UserServiceNg2} from "../ng2/services/user.service"; let moduleName:string = 'Sdc.Services'; let serviceModule:ng.IModule = angular.module(moduleName, []); @@ -80,5 +86,12 @@ serviceModule.service('ValidationUtils', ValidationUtils); serviceModule.service('AngularJSBridge',AngularJSBridge); serviceModule.service('LoaderService', LoaderService); -serviceModule.factory('Sdc.Services.UserResourceService', UserResourceService.getResource); serviceModule.factory('Sdc.Services.CategoryResourceService', CategoryResourceService.getResource); + +// Angular2 upgraded services - This is in order to use the service in angular1 till we finish remove all angular1 code +serviceModule.factory('ComponentServiceNg2', downgradeInjectable(ComponentServiceNg2)); +serviceModule.factory('ServiceServiceNg2', downgradeInjectable(ServiceServiceNg2)); +serviceModule.factory('ModalServiceNg2', downgradeInjectable(ModalService)); +serviceModule.factory('ConnectionWizardServiceNg2', downgradeInjectable(ConnectionWizardService)); +serviceModule.factory('ComponentInstanceServiceNg2', downgradeInjectable(ComponentInstanceServiceNg2)); +serviceModule.factory('UserServiceNg2', downgradeInjectable(UserServiceNg2)); \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts index 88c2d876c4..291768a500 100644 --- a/catalog-ui/src/app/ng2/app.module.ts +++ b/catalog-ui/src/app/ng2/app.module.ts @@ -27,7 +27,7 @@ import {UpgradeAdapter} from '@angular/upgrade'; import {UpgradeModule} from '@angular/upgrade/static'; import {PropertiesAssignmentModule} from './pages/properties-assignment/properties-assignment.module'; import { - DataTypesServiceProvider, SharingServiceProvider, CookieServiceProvider, + DataTypesServiceProvider, SharingServiceProvider, CookieServiceProvider, StateServiceFactory, StateParamsServiceFactory, CacheServiceProvider, EventListenerServiceProvider } from "./utils/ng1-upgraded-provider"; import {ConfigService} from "./services/config.service"; @@ -38,9 +38,14 @@ import {Cookie2Service} from "./services/cookie.service"; import {ComponentServiceNg2} from "./services/component-services/component.service"; import {ServiceServiceNg2} from "./services/component-services/service.service"; import {ComponentInstanceServiceNg2} from "./services/component-instance-services/component-instance.service"; -import { XHRBackend, RequestOptions } from '@angular/http'; -import { SearchBarComponent } from './shared/search-bar/search-bar.component'; -import { SearchWithAutoCompleteComponent } from './shared/search-with-autocomplete/search-with-autocomplete.component'; +import {ModalService} from "./services/modal.service"; +import {UiElementsModule} from "./components/ui/ui-elements.module"; +import {ConnectionWizardModule} from "./pages/connection-wizard/connection-wizard.module"; +import {LayoutModule} from "./components/layout/layout.module"; +import {UserService} from "./services/user.service"; +import {SdcConfig} from "./config/sdc-config.config"; +import { TranslateModule } from "./shared/translator/translate.module"; +import { TranslationServiceConfig } from "./config/translation.service.config"; export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule)); @@ -51,23 +56,28 @@ export function configServiceFactory(config:ConfigService) { @NgModule({ declarations: [ - AppComponent, - SearchBarComponent, - SearchWithAutoCompleteComponent + AppComponent ], imports: [ BrowserModule, UpgradeModule, FormsModule, HttpModule, + LayoutModule, + TranslateModule, + UiElementsModule, + + //We need to import them here since we use them in angular1 + ConnectionWizardModule, PropertiesAssignmentModule ], exports: [], - entryComponents: [SearchWithAutoCompleteComponent], + entryComponents: [], providers: [ DataTypesServiceProvider, SharingServiceProvider, CookieServiceProvider, + StateServiceFactory, StateParamsServiceFactory, CacheServiceProvider, EventListenerServiceProvider, @@ -75,9 +85,13 @@ export function configServiceFactory(config:ConfigService) { Cookie2Service, ConfigService, ComponentServiceNg2, + ModalService, ServiceServiceNg2, HttpService, + UserService, + SdcConfig, ComponentInstanceServiceNg2, + TranslationServiceConfig, { provide: APP_INITIALIZER, useFactory: configServiceFactory, @@ -90,9 +104,8 @@ export function configServiceFactory(config:ConfigService) { export class AppModule { - // ngDoBootstrap() {} - constructor(public upgrade:UpgradeModule) { + constructor(public upgrade:UpgradeModule) { } } diff --git a/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.html b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.html new file mode 100644 index 0000000000..37686342e8 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.html @@ -0,0 +1,7 @@ + + + {{ item?.contents }} + + diff --git a/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts new file mode 100644 index 0000000000..85d1899d96 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts @@ -0,0 +1,36 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Input } from '@angular/core'; + +declare var window:any; +@Component({ + selector: 'canvas-menu', + templateUrl: './menu-list-ng2.component.html' +}) +export class MenuListNg2Component { + @Input() props:any = { + items: [] + }; + + constructor() { + window.menu2 = this; + } +} diff --git a/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.module.ts b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.module.ts new file mode 100644 index 0000000000..957ba35c5a --- /dev/null +++ b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from '@angular/common'; +import { MenuListModule } from "../../ui/menu/menu-list.module"; +import { MenuListNg2Component } from "./menu-list-ng2.component"; + +export { + MenuListNg2Component +}; + +@NgModule({ + declarations: [ + MenuListNg2Component + ], + imports: [CommonModule, MenuListModule], + exports: [ + MenuListNg2Component + ], + entryComponents: [ //need to add anything that will be dynamically created + MenuListNg2Component +] +}) +export class MenuListNg2Module { +} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less deleted file mode 100644 index e219d49aa4..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less +++ /dev/null @@ -1,3 +0,0 @@ -dynamic-element { - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts deleted file mode 100644 index 246258e44f..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts +++ /dev/null @@ -1,145 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, Compiler, EventEmitter, ViewContainerRef, ViewChild, Input, Output, ElementRef, ComponentRef, ComponentFactory, ComponentFactoryResolver } from '@angular/core' -import { UiElementCheckBoxComponent } from './elements-ui/checkbox/ui-element-checkbox.component'; -import { UiElementDropDownComponent, DropdownValue } from './elements-ui/dropdown/ui-element-dropdown.component'; -import { UiElementInputComponent } from './elements-ui/input/ui-element-input.component'; -import {UiElementPopoverInputComponent} from "./elements-ui/popover-input/ui-element-popover-input.component"; -import {ValidationConfiguration} from "app/models"; -import {UiElementIntegerInputComponent} from "./elements-ui/integer-input/ui-element-integer-input.component"; - -@Component({ - selector: 'dynamic-element', - template: `
`, - styleUrls: ['./dynamic-element.component.less'], - entryComponents: [ - UiElementInputComponent, - UiElementDropDownComponent, - UiElementCheckBoxComponent, - UiElementPopoverInputComponent, - UiElementIntegerInputComponent - ] -}) -export class DynamicElementComponent { - - @ViewChild('target', { read: ViewContainerRef }) target: any; - @Input() type: any; - @Input() name: string; - @Input() readonly:boolean; - @Input() path:string;//optional param. used only for for subnetpoolid type - value:any; - - // Two way binding for value (need to write the "Change" word like this) - @Output('valueChange') emitter: EventEmitter = new EventEmitter(); - @Input('value') set setValueValue(value) { - this.value = value; - } - - cmpRef: ComponentRef; - private isViewInitialized: boolean = false; - validation = ValidationConfiguration.validation; - - constructor( - private componentFactoryResolver: ComponentFactoryResolver, - private compiler: Compiler, - private el: ElementRef) { - } - - updateComponent() { - if (!this.isViewInitialized) { - return; - } - if (this.cmpRef) { - this.cmpRef.destroy(); - } - - // Factory to create component based on type or peroperty name. - switch(this.type) { - case 'list': - case 'integer': - this.createComponent(UiElementIntegerInputComponent); - this.cmpRef.instance.pattern = this.validation.validationPatterns.integer; - break; - case 'string': - if (this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1) { - if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name - let pathArray = this.path.split("#"); - this.name = pathArray[pathArray.length - 2]; - } - this.createComponent(UiElementPopoverInputComponent); - } - else { - this.createComponent(UiElementInputComponent); - } - break; - case 'boolean': - //this.createComponent(UiElementCheckBoxComponent); - - this.createComponent(UiElementDropDownComponent); - - // Build drop down values - let tmp = []; - tmp.push(new DropdownValue('true','TRUE')); - tmp.push(new DropdownValue('false','FALSE')); - this.cmpRef.instance.values = tmp; - break; - default: - this.createComponent(UiElementInputComponent); - console.log("ERROR: No ui component to handle type: " + this.type); - } - - // Additional attributes in base element class - if (this.cmpRef) { - this.cmpRef.instance.name = this.name; - this.cmpRef.instance.type = this.type; - this.cmpRef.instance.value = this.value; - this.cmpRef.instance.readonly = this.readonly; - } - - // Subscribe to change event of of ui-element-basic and fire event to change the value - this.cmpRef.instance.baseEmitter.subscribe((value):void => { - this.emitter.emit(value) - }); - - } - - createComponent(ComponentToCreate:any):void { - let factory = this.componentFactoryResolver.resolveComponentFactory(ComponentToCreate); - this.cmpRef = this.target.createComponent(factory); - } - - ngOnChanges() { - this.updateComponent(); - } - - ngAfterContentInit() { - //console.log("DynamicElementComponent: ngAfterContentInit: type: " + this.type + " value: " + this.value); - this.isViewInitialized = true; - this.updateComponent(); - } - - ngOnDestroy() { - if (this.cmpRef) { - this.cmpRef.destroy(); - } - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts deleted file mode 100644 index b57020a1d0..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts +++ /dev/null @@ -1,56 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { NgModule } from "@angular/core"; -import { UiElementCheckBoxComponent } from './elements-ui/checkbox/ui-element-checkbox.component'; -import { UiElementDropDownComponent } from './elements-ui/dropdown/ui-element-dropdown.component'; -import { UiElementInputComponent } from './elements-ui/input/ui-element-input.component'; -import { DynamicElementComponent } from "app/ng2/components/dynamic-element/dynamic-element.component"; -import { BrowserModule } from '@angular/platform-browser' -import { FormsModule, ReactiveFormsModule } from '@angular/forms' -import { UiElementPopoverInputComponent } from "./elements-ui/popover-input/ui-element-popover-input.component"; -import {PopoverModule} from "../popover/popover.module"; -import {TooltipModule} from "../tooltip/tooltip.module"; -import {UiElementIntegerInputComponent} from "./elements-ui/integer-input/ui-element-integer-input.component"; - -@NgModule({ - declarations: [ - DynamicElementComponent, - UiElementInputComponent, - UiElementCheckBoxComponent, - UiElementDropDownComponent, - UiElementPopoverInputComponent, - UiElementIntegerInputComponent - ], - imports: [ - BrowserModule, - FormsModule, - PopoverModule, - ReactiveFormsModule, - TooltipModule - ], - exports: [ - DynamicElementComponent - ], - providers: [] -}) -export class DynamicElementModule { - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html deleted file mode 100644 index a3e28c5f0b..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less deleted file mode 100644 index bed097fe5e..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less +++ /dev/null @@ -1,2 +0,0 @@ -/deep/ ui-element-checkbox { -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts deleted file mode 100644 index f73afd42c7..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts +++ /dev/null @@ -1,47 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, ViewChild, ElementRef, ContentChildren, Input } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser' -import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; - -@Component({ - selector: 'ui-element-checkbox', - templateUrl: './ui-element-checkbox.component.html', - styleUrls: ['./ui-element-checkbox.component.less'], -}) -export class UiElementCheckBoxComponent extends UiElementBase implements UiElementBaseInterface { - - constructor() { - super(); - } - - ngAfterContentInit() { - // Convert the value to boolean (instanceOf does not work, the type is undefined). - if (this.value==='true' || this.value==='false') { - this.value = this.value==='true'?true:false; - } - } - - onSave() { - this.baseEmitter.emit(this.value); - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html deleted file mode 100644 index bfb927af71..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less deleted file mode 100644 index ea3e35140e..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less +++ /dev/null @@ -1,11 +0,0 @@ -@import '../../../../../../assets/styles/variables'; - -/deep/ ui-element-dropdown { - - select { - text-indent: 6px; - border: solid 1px @main_color_o; - width: 100%; - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts deleted file mode 100644 index 970c61531f..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts +++ /dev/null @@ -1,52 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, EventEmitter, Output, Input } from '@angular/core' -import { BrowserModule } from '@angular/platform-browser' -import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; - -export class DropdownValue { - value:string; - label:string; - - constructor(value:string,label:string) { - this.value = value; - this.label = label; - } -} - -@Component({ - selector: 'ui-element-dropdown', - templateUrl: './ui-element-dropdown.component.html', - styleUrls: ['./ui-element-dropdown.component.less'], -}) -export class UiElementDropDownComponent extends UiElementBase implements UiElementBaseInterface { - @Input() - values: DropdownValue[]; - - constructor() { - super(); - } - - onSave() { - this.baseEmitter.emit(JSON.parse(this.value)); - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html deleted file mode 100644 index 814ebfd28b..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html +++ /dev/null @@ -1,15 +0,0 @@ - diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less deleted file mode 100644 index d320c7ff8b..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less +++ /dev/null @@ -1,17 +0,0 @@ -@import '../../../../../../assets/styles/variables'; - -/deep/ ui-element-input { - - input { - text-indent: 6px; - border: solid 1px @main_color_o; - } - - .error { - border: solid 1px @func_color_q; - color: @func_color_q; - outline: none; - box-sizing: border-box; - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts deleted file mode 100644 index fb3b3db859..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts +++ /dev/null @@ -1,41 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, ViewChild, ElementRef, ContentChildren, Input} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser' -import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; - -@Component({ - selector: 'ui-element-input', - templateUrl: './ui-element-input.component.html', - styleUrls: ['./ui-element-input.component.less'], -}) -export class UiElementInputComponent extends UiElementBase implements UiElementBaseInterface { - constructor() { - super(); - this.pattern = this.validation.validationPatterns.comment; - } - - onSave() { - if (!this.control.invalid){ - this.baseEmitter.emit(this.value); - } - } -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html deleted file mode 100644 index e5518d453f..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html +++ /dev/null @@ -1,15 +0,0 @@ - diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less deleted file mode 100644 index 8073c3858e..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less +++ /dev/null @@ -1,17 +0,0 @@ -@import '../../../../../../assets/styles/variables'; - -/deep/ ui-element-integer-input { - - input { - text-indent: 6px; - border: solid 1px @main_color_o; - } - - .error { - border: solid 1px @func_color_q; - color: @func_color_q; - outline: none; - box-sizing: border-box; - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts deleted file mode 100644 index 3339b605ca..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts +++ /dev/null @@ -1,41 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, ViewChild, ElementRef, ContentChildren, Input} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser' -import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; - -@Component({ - selector: 'ui-element-integer-input', - templateUrl: './ui-element-integer-input.component.html', - styleUrls: ['./ui-element-integer-input.component.less'], -}) -export class UiElementIntegerInputComponent extends UiElementBase implements UiElementBaseInterface { - constructor() { - super(); - this.pattern = this.validation.validationPatterns.comment; - } - - onSave() { - if (!this.control.invalid){ - this.baseEmitter.emit(this.value ? JSON.parse(this.value) : this.value); - } - } -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html deleted file mode 100644 index 3bd51b4e36..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html +++ /dev/null @@ -1,26 +0,0 @@ -
- - -
- - -
- -
- diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less deleted file mode 100644 index 5be443f7b6..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less +++ /dev/null @@ -1,36 +0,0 @@ -@import '../../../../../../assets/styles/variables'; - -.popover-input-wrapper { - display: flex; -} - -/deep/ ui-element-popover-input { - - .popover { - max-width: 350px; - width: 350px; - } - - .edit-subnet-wrapper { - padding: 12px; - - .subnet-value { - width: 100%; - resize: none; - } - } - - input { - padding-right: 6px; - padding-left: 6px; - border: solid 1px @main_color_o; - } - - .error { - border: solid 1px @func_color_q; - color: @func_color_q; - outline: none; - box-sizing: border-box; - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts deleted file mode 100644 index 67eb8822b4..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts +++ /dev/null @@ -1,58 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, ViewChild, ElementRef, Input} from '@angular/core'; -import {UiElementBase, UiElementBaseInterface} from "../ui-element-base.component"; -import {ButtonsModelMap, ButtonModel} from "app/models"; -import { PopoverContentComponent } from "app/ng2/components/popover/popover-content.component" -import { PopoverComponent } from "app/ng2/components/popover/popover.component" - -@Component({ - selector: 'ui-element-popover-input', - templateUrl: './ui-element-popover-input.component.html', - styleUrls: ['./ui-element-popover-input.component.less'] -}) -export class UiElementPopoverInputComponent extends UiElementBase implements UiElementBaseInterface { - @ViewChild('textArea') textArea: ElementRef; - @ViewChild('popoverForm') popoverContentComponent: PopoverContentComponent; - - saveButton: ButtonModel; - buttonsArray: ButtonsModelMap; - - onSave = ():void => { - if (!this.control.invalid){ - this.baseEmitter.emit(this.value); - this.popoverContentComponent.hide(); - } - } - - constructor() { - super(); - // Create Save button and insert to buttons map - this.saveButton = new ButtonModel('save', 'blue', this.onSave); - this.buttonsArray = { 'test': this.saveButton }; - - // Define the regex pattern for this controller - this.pattern = this.validation.validationPatterns.comment; - - // Disable / Enable button according to validation - //this.control.valueChanges.subscribe(data => this.saveButton.disabled = this.control.invalid); - } -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts deleted file mode 100644 index 4bc35e814a..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts +++ /dev/null @@ -1,55 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, EventEmitter, Input, Output } from '@angular/core' -import { ValidationConfiguration } from "app/models"; -import { FormControl, Validators } from '@angular/forms'; - -export interface UiElementBaseInterface { - onSave(); -} - -@Component({ - template: ``, - styles: [] -}) -export class UiElementBase { - - protected validation = ValidationConfiguration.validation; - protected control: FormControl; - - // Two way binding for value (need to write the "Change" word like this) - @Output('valueChange') baseEmitter: EventEmitter = new EventEmitter(); - @Input('value') set setValueValue(value) { - this.value = value; - } - - protected name: string; - protected type: string; - protected value: any; - protected pattern: any; - protected readonly:boolean; - - constructor() { - //this.control = new FormControl('', [Validators.required]); - this.control = new FormControl('', []); - } - -} diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.html b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.html deleted file mode 100644 index 4d2b91f3b4..0000000000 --- a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.html +++ /dev/null @@ -1,26 +0,0 @@ - - -
-
- -
- -
-
- -
-
-
- - -
-
- -
-
-
diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less deleted file mode 100644 index 07f38d3011..0000000000 --- a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less +++ /dev/null @@ -1,45 +0,0 @@ -@import '../../../../assets/styles/variables'; -form{ - margin: 0 20px; - .field{ - padding:20px 0; - &:not(:last-child){ - border-bottom: solid 1px @main_color_o; - } - input{ - &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */ - &:-moz-placeholder { font-style: italic; } /* Firefox 18- */ - &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */ - &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */ - &:-ms-input-placeholder { font-style: italic; } /* Edge */ - } - } - /deep/ [ng-reflect-checked="true"]{ - /deep/ .checkbox-label-content{ - color: @main_color_a; - } - } -} - -.open-filter-button{ - cursor: pointer; - width: 32px; - height: 34px; - margin-left:5px; - - &.open{ - z-index: 1061; - background-color: @main_color_p; - border: solid 1px @main_color_c; - border-bottom: none; - } - .filter-icon{ - top: 8px; - right: 2px; - position: relative; - } -} - -/deep/ .popover{ - border: solid 1px @main_color_c !important; -} diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts deleted file mode 100644 index c43c30db21..0000000000 --- a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts +++ /dev/null @@ -1,97 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * 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========================================================= - */ - -/** - * Created by rc2122 on 5/16/2017. - */ -import {Component, Input, Output, EventEmitter, ViewChild} from '@angular/core'; -import {ButtonModel, ButtonsModelMap, FilterPropertiesAssignmentData} from "app/models"; -import {PopoverComponent} from "../popover/popover.component"; -import * as sdcConfig from "../../../../../configurations/dev" - -@Component({ - selector: 'filter-properties-assignment', - templateUrl: './filter-properties-assignment.component.html', - styleUrls: ['./filter-properties-assignment.component.less'] -}) - -export class FilterPropertiesAssignmentComponent { - @Input() componentType: string; - @Output() searchProperties: EventEmitter = new EventEmitter(); - footerButtons:ButtonsModelMap = {}; - typesOptions:Array;//All optional types - selectedTypes:Object = {}; - allSelected:boolean = false;//if all option selected - filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData(); - @ViewChild('filterPopover') filterPopover: PopoverComponent; - - ngOnInit() { - this.footerButtons['Apply'] = new ButtonModel('Apply', 'blue', this.search, this.someTypesSelectedAndThereIsPropertyName); - this.footerButtons['Close'] = new ButtonModel('Close', 'grey', this.close); - this.componentType = this.componentType.toLocaleLowerCase(); - this.typesOptions = sdcConfig.resourceTypesFilter[this.componentType]; - } - - selectAll = () => { - _.forEach(this.typesOptions, (type) => { - this.selectedTypes[type] = this.allSelected; - }); - } - - onTypeSelected = (type:string) => { - if(!this.selectedTypes[type]){ - this.allSelected = false;//unselected 'All' - } - }; - - search = () => { - console.log('search props'); - this.filterData.selectedTypes = []; - _.forEach(sdcConfig.resourceTypesFilter[this.componentType], (type) => { - if(this.selectedTypes[type]){ - this.filterData.selectedTypes.push(type); - } - }); - this.searchProperties.emit(this.filterData); - this.filterPopover.hide(); - } - - close = () => { - this.filterPopover.hide(); - } - - someTypesSelectedAndThereIsPropertyName = ():boolean => { - if( _.find(Object.keys(this.selectedTypes),(key) => { - return this.selectedTypes[key]; - }) && this.filterData.propertyName ){ - return null - } - return true; - } - - clearAll = ():void => { - this.filterData.propertyName = ""; - _.forEach(this.selectedTypes,(value, key) => { - this.selectedTypes[key] = false; - }); - this.allSelected = false; - } - -} diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts deleted file mode 100644 index c8d4566653..0000000000 --- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts +++ /dev/null @@ -1,32 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * 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========================================================= - */ - -export class HierarchyDisplayOptions { - idProperty: string; - valueProperty: string; - childrenProperty: string; - searchText:string; - constructor(idProperty:string, valueProperty:string, childrenProperty?:string, searchText?:string) { - this.idProperty = idProperty; - this.valueProperty = valueProperty; - this.childrenProperty = childrenProperty; - this.searchText = searchText; - } -} diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html deleted file mode 100644 index 40a1c37cee..0000000000 --- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html +++ /dev/null @@ -1,13 +0,0 @@ -
-
-
- {{item[displayOptions.valueProperty]}} -
-
- -
-
-
diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less deleted file mode 100644 index 4befa2c797..0000000000 --- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less +++ /dev/null @@ -1,52 +0,0 @@ -.navigation-wrapper { - text-align: left; -} - -.node-item { - border: 1px dotted; - border-right: none; - border-bottom: none; - width: 100%; -} - -.node-item:last-child { - border-left: none; -} - -.node-data-wrapper { - cursor: default; - height: 39px; - line-height: 39px; - position: relative; - top: -20px; - background-color: white; - margin-left: 0.7em; -} - -.children-node { - padding-left: 40px; -} - -.node-data { - margin-left: 10px; - margin-right: 10px; -} - -.node-data-wrapper.selected { - background-color: #e6f6fb; - - .node-data { - color: #009fdb; - } -} - -.node-data-wrapper:hover { - background-color: #eaeaea; -} - -.mark{ - background-color: yellow; -} - - - diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts deleted file mode 100644 index dc0a02c277..0000000000 --- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, Input, Output, EventEmitter} from '@angular/core'; -import {HierarchyDisplayOptions} from './hierarchy-display-options'; - - -@Component({ - selector: 'hierarchy-navigation', - templateUrl: './hierarchy-navigation.component.html', - styleUrls: ['./hierarchy-navigation.component.less'] -}) - -export class HierarchyNavigationComponent { - @Input() displayData: Array; - @Input() selectedItem: any; - @Input() displayOptions: HierarchyDisplayOptions; - - @Output() updateSelected:EventEmitter = new EventEmitter(); - - onClick = ($event, item) => { - $event.stopPropagation(); - this.selectedItem = item; - this.updateSelected.emit(item); - }; - - onSelectedUpdate = ($event) => { - this.selectedItem = $event; - this.updateSelected.emit($event); - } -} diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html deleted file mode 100644 index 2b58d0f086..0000000000 --- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html +++ /dev/null @@ -1,49 +0,0 @@ -
- -
-
Property Name
-
From Instance
-
Type
-
Value
-
-
-
No data to display
-
-
-
-
{{input.name}}
- -
-
-
- {{instanceNamesMap[input.instanceUniqueId]}} -
-
-
-
- {{input.type | contentAfterLastDot}} -
-
-
- - -
- -
-
- -
-
-
-
- - diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less deleted file mode 100644 index 89c7287449..0000000000 --- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less +++ /dev/null @@ -1,164 +0,0 @@ - -@import './../../../../assets/styles/variables.less'; - -:host /deep/ input { width:100%;} - -.properties-table { - display:flex; - flex-direction:column; - flex: 1; - height:100%; - text-align:left; - - .inner-cell-div{ - width: 100%; - text-overflow: ellipsis; - overflow: hidden; - height: 20px; - } - - - .table-header { - font-weight:bold; - border-top: #d2d2d2 solid 1px; - background-color: #eaeaea; - color:#191919; - - .table-cell { - font-size: 13px; - } - .valueCol { - justify-content: flex-start; - padding: 10px; - } - } - .table-header, .table-row { - display: flex; - flex-direction:row; - flex: 0 0 auto; - } - - .table-body { - display:flex; - flex-direction: column; - overflow-y:auto; - flex: 1; - - .no-data { - border: #d2d2d2 solid 1px; - border-top:none; - text-align: center; - height: 100%; - padding: 20px; - } - /deep/.selected{ - background-color: #e6f6fb; - color: #009fdb; - } - } - - .table-row { - &:hover { - background-color:#f8f8f8; cursor:pointer; - } - - &:last-child { - flex: 1 0 auto; - } - .selected-row { - background-color:#e6f6fb; - } - } - - .table-cell { - font-size:13px; - flex:1; - border: #d2d2d2 solid 1px; - border-right:none; - border-top:none; - padding: 10px; - text-overflow: ellipsis; - white-space: nowrap; - - - &:last-child { - border-right:#d2d2d2 solid 1px; - } - &.col1 { - flex: 1 0 200px; - max-width:300px; - display: flex; - justify-content: space-between; - - .property-name { - flex: 1; - } - - .property-description-icon { - float: right; - margin-top: 4px; - margin-left: 5px; - flex: 0 0 auto; - } - } - &.col2 { - flex: 0 0 150px; - max-width:150px; - } - - &.col3 { - flex:0 0 120px; - max-width:120px; - } - - &.valueCol { - flex: 1 0 auto; - min-width: 350px; - display: flex; - justify-content: flex-end; - padding: 0px; - align-items: center; - - .value-input { - flex: 1; - max-height: 24px; - border: none; - background-color: inherit; - - &:focus, &:active { - border:none; - outline:none; - } - } - - .delete-btn { - flex: 0 0 auto; - } - - .delete-button-container { - max-height: 24px; - } - - &.inner-table-container { - padding: 0px; - - .delete-button-container { - padding: 3px 5px 0 0 ; - } - } - } - - &.input-value-col { - padding: 8px; - } - - - } - - .filtered { - /deep/ .checkbox-label-content{ - background-color: yellow; - } - } - -} diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts deleted file mode 100644 index 736655f3f7..0000000000 --- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts +++ /dev/null @@ -1,64 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * 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========================================================= - */ - -/** - * Created by rc2122 on 5/4/2017. - */ -import {Component, Input, Output, EventEmitter, ViewChild} from "@angular/core"; -import {InputFEModel} from "app/models"; -import { ModalService } from 'app/ng2/services/modal.service'; - - - -@Component({ - selector: 'inputs-table', - templateUrl: './inputs-table.component.html', - styleUrls: ['../inputs-table/inputs-table.component.less'] -}) -export class InputsTableComponent { - - @Input() inputs: Array; - @Input() instanceNamesMap: Map; - @Input() readonly:boolean; - @Input() isLoading:boolean; - @Output() inputValueChanged: EventEmitter = new EventEmitter(); - @Output() deleteInput: EventEmitter = new EventEmitter(); - - selectedInputToDelete:InputFEModel; - - constructor(private modalService: ModalService){ - } - - onInputValueChanged = (input) => { - this.inputValueChanged.emit(input); - }; - - onDeleteInput = () => { - this.deleteInput.emit(this.selectedInputToDelete); - this.modalService.closeCurrentModal(); - }; - - openDeleteModal = (input:InputFEModel) => { - this.selectedInputToDelete = input; - this.modalService.createActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close").instance.open(); - } -} - - diff --git a/catalog-ui/src/app/ng2/components/layout/layout.module.ts b/catalog-ui/src/app/ng2/components/layout/layout.module.ts new file mode 100644 index 0000000000..827209326c --- /dev/null +++ b/catalog-ui/src/app/ng2/components/layout/layout.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { FormsModule } from "@angular/forms"; +import { TranslateModule } from "../../shared/translator/translate.module"; +import { TopNavComponent } from "./top-nav/top-nav.component"; + +@NgModule({ + declarations: [ + TopNavComponent + ], + imports: [ + CommonModule, + FormsModule, + TranslateModule + ], + exports: [], + entryComponents: [ //need to add anything that will be dynamically created + TopNavComponent + ], + providers: [] +}) +export class LayoutModule { + +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html new file mode 100644 index 0000000000..55c4bf0460 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html @@ -0,0 +1,53 @@ + diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less new file mode 100644 index 0000000000..dc666cbf00 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less @@ -0,0 +1,225 @@ +@import "../../../../../assets/styles/variables"; +@import "../../../../../assets/styles/variables-old"; +@import "../../../../../assets/styles/mixins_old"; +@import "../../../../../assets/styles/sprite"; + +.top-nav { + position: fixed; + top: @header_height; + background-color: @main_color_p; + .box-shadow(0px 1px 3px 0px rgba(0, 0, 0, 0.33)); + width: 100%; + height: @top_nav_height; + line-height: @top_nav_height; + z-index: 10; + display: flex; + flex-direction: row; + align-items: center; + + .asdc-app-title-wrapper { + flex-grow: 1; + line-height: 16px; + margin: 0 20px; + + a.asdc-app-title { + //.m_18_r; + text-decoration: none; + } + + .asdc-version { + //.m_12_r; + .opacity(0.8); + line-height: 14px; + flex-grow: 1; + } + + } + + ul.top-menu { + list-style-type: none; + margin: 0 0 0 20px; + padding: 0; + flex-grow: 999; + + & > li { + float: left; + cursor: pointer; + line-height: 50px; + height: 50px; + padding: 0 20px; + + &.selected { + border-bottom: solid 4px @main_color_a; + + a { + color: @func_color_s; + } + } + + /*&:hover { + border-bottom: solid 4px @main_color_a; + }*/ + + a { + font-family: @font-opensans-medium; + color: @main_color_m; + font-size: 16px; + display: block; + text-align: center; + text-decoration: none; + } + + &.triangle-dropdown { + padding: 0; + position: relative; + + div.triangle { + margin-top: 15px; + border-radius: 2px; + width: 17px; + height: 18px; + + //temp use - until new triangle gets in + line-height: 18px; + text-align: center; + font-size: 10px; + + &:hover { + background-color: rgba(156, 156, 156, 0.2); + + span { + .arrow-right-hover; + } + } + } + + + li a { + font-size: 16px; + } + + ul.sub-menu { + .perfect-scrollbar; + position: absolute; + left: 0; + top: 40px; + z-index: 1; + + overflow-x: hidden; + overflow-y: auto; + max-height: 0; + -webkit-transition: max-height 200ms ease-in; + -moz-transition: max-height 200ms ease-in; + -o-transition: max-height 200ms ease-in; + transition: max-height 200ms ease-in; + + padding: 0; + background-color: white; + visibility: hidden; + + li { + + height: 35px; + background-color: white; + font-size: 13px; + width: 150px; + line-height: 35px; + padding: 0 10px; + + &.disabled { + opacity: 1; + } + &.selected { + background-color: @tlv_color_v; + font-weight: bold; + } + &:hover { + color: @main_color_a; + } + span { + height: 35px; + width: 130px; + display: inline; + white-space: nowrap; + overflow: hidden; + } + } + } + &.item-click:hover ul.sub-menu, + &.item-click:active ul.sub-menu { + visibility: visible; + max-height: 500px; + border: 1px solid @func_color_b; + border-radius: 2px; + box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1); + + div ul { + + } + } + } + } + + } + + .top-search { + position: relative; + flex-grow: 1; + padding: 0 20px; + + input.search-text { + .border-radius(2px); + width: 245px; + height: 32px; + line-height: 32px; + border: 1px solid @main_color_o; + outline: none; + text-indent: 10px; + + &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */ + &:-moz-placeholder { font-style: italic; } /* Firefox 18- */ + &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */ + &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */ + &:-ms-input-placeholder { font-style: italic; } /* Edge */ + /* font-style: italic; + }*/ + /* Firefox 18- */ + &::-moz-placeholder { + font-style: italic; + } + /* Firefox 19+ */ + &:-ms-input-placeholder { + font-style: italic; + } + /* IE 10+ */ + &:-ms-input-placeholder { + font-style: italic; + } + /* Edge */ + } + + .magnification { + position: absolute; + top: 19px; + right: 26px; + } + + } + + .notification-icon { + cursor: pointer; + flex-grow: 1; + margin: 0 10px 6px 0; + .sprite-new; + .vsp-list-icon; + + &:hover { + .vsp-list-icon-hover; + } + + &:active { + .vsp-list-icon-active; + } + + } + +} diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts new file mode 100644 index 0000000000..f48aa4801f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts @@ -0,0 +1,149 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, Inject, Input, Output, EventEmitter} from "@angular/core"; +import {IHostedApplication, IUserProperties} from "app/models"; +import {MenuItemGroup, MenuItem} from "app/utils"; +import {UserService} from "../../../services/user.service"; +import {SdcConfigToken, ISdcConfig} from "../../../config/sdc-config.config"; +import {TranslateService} from "../../../shared/translator/translate.service"; + + +declare const window:any; +@Component({ + selector: 'top-nav', + templateUrl: './top-nav.component.html', + styleUrls:['./top-nav.component.less'] +}) +export class TopNavComponent { + @Input() public version:string; + @Input() public menuModel:Array; + @Input() public topLvlSelectedIndex:number; + @Input() public hideSearch:boolean; + @Input() public searchTerm:string; + @Input() public notificationIconCallback:Function; + @Output() public searchTermChange:EventEmitter = new EventEmitter(); + emitSearchTerm(event:string) { + this.searchTermChange.emit(event); + } + + public topLvlMenu:MenuItemGroup; + public user:IUserProperties; + + constructor(private translateService:TranslateService, + @Inject('$state') private $state:ng.ui.IStateService, + private userService:UserService, + @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) { + window.nav = this; + } + + private _getTopLvlSelectedIndexByState = ():number => { + if (!this.topLvlMenu.menuItems) { + return 0; + } + + let result = -1; + + //set result to current state + this.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> { + if (item.state === this.$state.current.name) { + result = index; + } + }); + + //if it's a different state , checking previous state param + if (result === -1) { + this.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> { + if (item.state === this.$state.params['previousState']) { + result = index; + } + }); + } + + if (result === -1) { + result = 0; + } + + return result; + }; + + ngOnChanges(changes) { + if (changes['menuModel']) { + console.log('menuModel was changed!'); + this.generateMenu(); + } + } + + ngOnInit() { + console.log('Nav is init!', this.menuModel); + this.user = this.userService.getLoggedinUser(); + + this.translateService.languageChangedObservable.subscribe((lang) => { + let tmpArray: Array = [ + new MenuItem(this.translateService.translate("TOP_MENU_HOME_BUTTON"), null, "dashboard", "goToState", null, null), + new MenuItem(this.translateService.translate("TOP_MENU_CATALOG_BUTTON"), null, "catalog", "goToState", null, null) + ]; + + // Only designer can perform onboarding + if (this.user && this.user.role === 'DESIGNER') { + tmpArray.push(new MenuItem(this.translateService.translate("TOP_MENU_ON_BOARD_BUTTON"), null, "onboardVendor", "goToState", null, null)); + _.each(this.sdcConfig.hostedApplications, (hostedApp: IHostedApplication) => { + if (hostedApp.exists) { + tmpArray.push(new MenuItem(hostedApp.navTitle, null, hostedApp.defaultState, "goToState", null, null)); + } + }); + } + + this.topLvlMenu = new MenuItemGroup(0, tmpArray, true); + this.topLvlMenu.selectedIndex = isNaN(this.topLvlSelectedIndex) ? this._getTopLvlSelectedIndexByState() : this.topLvlSelectedIndex; + + this.generateMenu(); + }); + } + + generateMenu() { + if (this.menuModel && this.topLvlMenu && this.menuModel[0] !== this.topLvlMenu) { + this.menuModel.unshift(this.topLvlMenu); + } + } + + goToState(state:string, params:Array):Promise { + return new Promise((resolve, reject) => { + this.$state.go(state, params && params.length > 0 ? [0] : undefined); + resolve(true); + }); + } + + menuItemClick(itemGroup:MenuItemGroup, item:MenuItem) { + itemGroup.itemClick = false; + + let onSuccess = ():void => { + itemGroup.selectedIndex = itemGroup.menuItems.indexOf(item); + }; + let onFailed = ():void => { + }; + + if (item.callback) { + (item.callback.apply(undefined, item.params)).then(onSuccess, onFailed); + } else { + this[item.action](item.state, item.params).then(onSuccess, onFailed); + } + } +} diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.html b/catalog-ui/src/app/ng2/components/loader/loader.component.html deleted file mode 100644 index a62aa114d9..0000000000 --- a/catalog-ui/src/app/ng2/components/loader/loader.component.html +++ /dev/null @@ -1,6 +0,0 @@ -
-
-
-
- diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.less b/catalog-ui/src/app/ng2/components/loader/loader.component.less deleted file mode 100644 index ddb9915176..0000000000 --- a/catalog-ui/src/app/ng2/components/loader/loader.component.less +++ /dev/null @@ -1,91 +0,0 @@ -@import '../../../../assets/styles/variables'; -.tlv-loader-back { - background-color: @main_color_p; - position: fixed; - top: 50px; - left: 0; - right: 0; - bottom: 0; - z-index: 9999; - opacity: 0.5; -} - -.tlv-loader-relative { position: absolute; top: 0;} - -.tlv-loader { - z-index: 10002; -} - -.loader-relative { - display: block; - position:absolute; - width: 100%; - height:100%; -} - -.loader-fixed { - display: block; - position:fixed; - top:0; - left:0; - width: 100%; - height:100%; -} - -@keyframes fadein { - from { opacity: 0; } - to { opacity: 0.8; } -} - -/* Firefox < 16 */ -@-moz-keyframes fadein { - from { opacity: 0; } - to { opacity: 0.8; } -} - -/* Safari, Chrome and Opera > 12.1 */ -@-webkit-keyframes fadein { - from { opacity: 0; } - to { opacity: 0.8; } -} - -/* Internet Explorer */ -@-ms-keyframes fadein { - from { opacity: 0; } - to { opacity: 0.8; } -} - -/* Opera < 12.1 */ -@-o-keyframes fadein { - from { opacity: 0; } - to { opacity: 0.8; } -} - -@keyframes fadeout { - from { opacity: 0.8; } - to { opacity: 0; } -} - -/* Firefox < 16 */ -@-moz-keyframes fadeout { - from { opacity: 0.8; } - to { opacity: 0; } -} - -/* Safari, Chrome and Opera > 12.1 */ -@-webkit-keyframes fadeout { - from { opacity: 0.8; } - to { opacity: 0; } -} - -/* Internet Explorer */ -@-ms-keyframes fadeout { - from { opacity: 0.8; } - to { opacity: 0; } -} - -/* Opera < 12.1 */ -@-o-keyframes fadeout { - from { opacity: 0.8; } - to { opacity: 0; } -} diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/loader/loader.component.ts deleted file mode 100644 index f66aa551e2..0000000000 --- a/catalog-ui/src/app/ng2/components/loader/loader.component.ts +++ /dev/null @@ -1,86 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * 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========================================================= - */ - -/** - * Created by rc2122 on 6/6/2017. - */ -import { Component, Input, ViewContainerRef, SimpleChanges} from "@angular/core"; -@Component({ - selector: 'loader', - templateUrl: './loader.component.html', - styleUrls: ['./loader.component.less'] -}) -export class LoaderComponent { - - @Input() display: boolean; - @Input() size: string;// small || medium || large - @Input() relative: boolean; // If is relative is set to true, loader will appear over parent element. Otherwise, will be fixed over the entire page. - @Input() loaderDelay: number; //optional - number of ms to delay loader display. - - private isVisible: boolean = false; - private offset : { - top: string; - left: string; - width: string; - height: string; - }; - - constructor(private viewContainerRef: ViewContainerRef) { - } - - ngOnInit() { - if (!this.size) { - this.size = 'large'; - } - if (this.display === true) { - this.changeLoaderDisplay(true); - } - } - - ngOnChanges(changes: SimpleChanges) { - if(changes.display){ - this.changeLoaderDisplay(this.display); - } - } - - private changeLoaderDisplay = (display: boolean): void => { - if (display) { - window.setTimeout((): void => { - this.display && this.showLoader(); //only show loader if this.display has not changed in the meanwhile. - }, this.loaderDelay || 0); - } else { - this.isVisible = false; - } - } - - private showLoader = () => { - if (this.relative === true) { - let parentElement = this.viewContainerRef.element.nativeElement.parentElement; - this.offset = { - left: (parentElement.offsetLeft) ? parentElement.offsetLeft + "px" : undefined, - top: (parentElement.offsetTop) ? parentElement.offsetTop + "px" : undefined, - width: (parentElement.offsetWidth) ? parentElement.offsetWidth + "px" : undefined, - height: (parentElement.offsetHeight) ? parentElement.offsetHeight + "px" : undefined - }; - } - this.isVisible = true; - } - -} diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html new file mode 100644 index 0000000000..ddda82ab58 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html @@ -0,0 +1,27 @@ + + +
+
+ +
+ +
+
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.less b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.less new file mode 100644 index 0000000000..25c1467b3b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.less @@ -0,0 +1,45 @@ +@import '../../../../../assets/styles/variables'; +form{ + margin: 0 20px; + .field{ + padding:20px 0; + &:not(:last-child){ + border-bottom: solid 1px @main_color_o; + } + input{ + &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */ + &:-moz-placeholder { font-style: italic; } /* Firefox 18- */ + &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */ + &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */ + &:-ms-input-placeholder { font-style: italic; } /* Edge */ + } + } + /deep/ [ng-reflect-checked="true"]{ + /deep/ .checkbox-label-content{ + color: @main_color_a; + } + } +} + +.open-filter-button{ + cursor: pointer; + width: 32px; + height: 34px; + margin-left:5px; + + &.open{ + z-index: 1061; + background-color: @main_color_p; + border: solid 1px @main_color_c; + border-bottom: none; + } + .filter-icon{ + top: 8px; + right: 2px; + position: relative; + } +} + +/deep/ .popover{ + border: solid 1px @main_color_c !important; +} diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.ts b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.ts new file mode 100644 index 0000000000..5a9bfbcecb --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.ts @@ -0,0 +1,97 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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========================================================= + */ + +/** + * Created by rc2122 on 5/16/2017. + */ +import {Component, Input, Output, EventEmitter, ViewChild} from '@angular/core'; +import {ButtonModel, ButtonsModelMap, FilterPropertiesAssignmentData} from "app/models"; +import * as sdcConfig from "../../../../../../configurations/dev" +import {PopoverComponent} from "../../ui/popover/popover.component"; + +@Component({ + selector: 'filter-properties-assignment', + templateUrl: './filter-properties-assignment.component.html', + styleUrls: ['./filter-properties-assignment.component.less'] +}) + +export class FilterPropertiesAssignmentComponent { + @Input() componentType: string; + @Output() searchProperties: EventEmitter = new EventEmitter(); + footerButtons:ButtonsModelMap = {}; + typesOptions:Array;//All optional types + selectedTypes:Object = {}; + allSelected:boolean = false;//if all option selected + filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData(); + @ViewChild('filterPopover') filterPopover: PopoverComponent; + + ngOnInit() { + this.footerButtons['Apply'] = new ButtonModel('Apply', 'blue', this.search, this.someTypesSelectedAndThereIsPropertyName); + this.footerButtons['Close'] = new ButtonModel('Close', 'grey', this.close); + this.componentType = this.componentType.toLocaleLowerCase(); + this.typesOptions = sdcConfig.resourceTypesFilter[this.componentType]; + } + + selectAll = () => { + _.forEach(this.typesOptions, (type) => { + this.selectedTypes[type] = this.allSelected; + }); + } + + onTypeSelected = (type:string) => { + if(!this.selectedTypes[type]){ + this.allSelected = false;//unselected 'All' + } + }; + + search = () => { + console.log('search props'); + this.filterData.selectedTypes = []; + _.forEach(sdcConfig.resourceTypesFilter[this.componentType], (type) => { + if(this.selectedTypes[type]){ + this.filterData.selectedTypes.push(type); + } + }); + this.searchProperties.emit(this.filterData); + this.filterPopover.hide(); + } + + close = () => { + this.filterPopover.hide(); + } + + someTypesSelectedAndThereIsPropertyName = ():boolean => { + if( _.find(Object.keys(this.selectedTypes),(key) => { + return this.selectedTypes[key]; + }) && this.filterData.propertyName ){ + return null + } + return true; + } + + clearAll = ():void => { + this.filterData.propertyName = ""; + _.forEach(this.selectedTypes,(value, key) => { + this.selectedTypes[key] = false; + }); + this.allSelected = false; + } + +} diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-display-options.ts b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-display-options.ts new file mode 100644 index 0000000000..c8d4566653 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-display-options.ts @@ -0,0 +1,32 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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========================================================= + */ + +export class HierarchyDisplayOptions { + idProperty: string; + valueProperty: string; + childrenProperty: string; + searchText:string; + constructor(idProperty:string, valueProperty:string, childrenProperty?:string, searchText?:string) { + this.idProperty = idProperty; + this.valueProperty = valueProperty; + this.childrenProperty = childrenProperty; + this.searchText = searchText; + } +} diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.html b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.html new file mode 100644 index 0000000000..c3f9e5ac74 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.html @@ -0,0 +1,13 @@ +
+
+
+ {{item[displayOptions.valueProperty]}} +
+
+ +
+
+
diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less new file mode 100644 index 0000000000..4befa2c797 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less @@ -0,0 +1,52 @@ +.navigation-wrapper { + text-align: left; +} + +.node-item { + border: 1px dotted; + border-right: none; + border-bottom: none; + width: 100%; +} + +.node-item:last-child { + border-left: none; +} + +.node-data-wrapper { + cursor: default; + height: 39px; + line-height: 39px; + position: relative; + top: -20px; + background-color: white; + margin-left: 0.7em; +} + +.children-node { + padding-left: 40px; +} + +.node-data { + margin-left: 10px; + margin-right: 10px; +} + +.node-data-wrapper.selected { + background-color: #e6f6fb; + + .node-data { + color: #009fdb; + } +} + +.node-data-wrapper:hover { + background-color: #eaeaea; +} + +.mark{ + background-color: yellow; +} + + + diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts new file mode 100644 index 0000000000..dc0a02c277 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts @@ -0,0 +1,48 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, Input, Output, EventEmitter} from '@angular/core'; +import {HierarchyDisplayOptions} from './hierarchy-display-options'; + + +@Component({ + selector: 'hierarchy-navigation', + templateUrl: './hierarchy-navigation.component.html', + styleUrls: ['./hierarchy-navigation.component.less'] +}) + +export class HierarchyNavigationComponent { + @Input() displayData: Array; + @Input() selectedItem: any; + @Input() displayOptions: HierarchyDisplayOptions; + + @Output() updateSelected:EventEmitter = new EventEmitter(); + + onClick = ($event, item) => { + $event.stopPropagation(); + this.selectedItem = item; + this.updateSelected.emit(item); + }; + + onSelectedUpdate = ($event) => { + this.selectedItem = $event; + this.updateSelected.emit($event); + } +} diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html new file mode 100644 index 0000000000..57e0474c66 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html @@ -0,0 +1,49 @@ +
+ +
+
Property Name
+
From Instance
+
Type
+
Value
+
+
+
No data to display
+
+
+
+
{{input.name}}
+ +
+
+
+ {{instanceNamesMap[input.instanceUniqueId]}} +
+
+
+
+ {{input.type | contentAfterLastDot}} +
+
+
+ + +
+ +
+
+ +
+
+
+
+ + diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less new file mode 100644 index 0000000000..0545874f53 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less @@ -0,0 +1,164 @@ + +@import './../../../../../assets/styles/variables.less'; + +:host /deep/ input { width:100%;} + +.properties-table { + display:flex; + flex-direction:column; + flex: 1; + height:100%; + text-align:left; + + .inner-cell-div{ + width: 100%; + text-overflow: ellipsis; + overflow: hidden; + height: 20px; + } + + + .table-header { + font-weight:bold; + border-top: #d2d2d2 solid 1px; + background-color: #eaeaea; + color:#191919; + + .table-cell { + font-size: 13px; + } + .valueCol { + justify-content: flex-start; + padding: 10px; + } + } + .table-header, .table-row { + display: flex; + flex-direction:row; + flex: 0 0 auto; + } + + .table-body { + display:flex; + flex-direction: column; + overflow-y:auto; + flex: 1; + + .no-data { + border: #d2d2d2 solid 1px; + border-top:none; + text-align: center; + height: 100%; + padding: 20px; + } + /deep/.selected{ + background-color: #e6f6fb; + color: #009fdb; + } + } + + .table-row { + &:hover { + background-color:#f8f8f8; cursor:pointer; + } + + &:last-child { + flex: 1 0 auto; + } + .selected-row { + background-color:#e6f6fb; + } + } + + .table-cell { + font-size:13px; + flex:1; + border: #d2d2d2 solid 1px; + border-right:none; + border-top:none; + padding: 10px; + text-overflow: ellipsis; + white-space: nowrap; + + + &:last-child { + border-right:#d2d2d2 solid 1px; + } + &.col1 { + flex: 1 0 200px; + max-width:300px; + display: flex; + justify-content: space-between; + + .property-name { + flex: 1; + } + + .property-description-icon { + float: right; + margin-top: 4px; + margin-left: 5px; + flex: 0 0 auto; + } + } + &.col2 { + flex: 0 0 150px; + max-width:150px; + } + + &.col3 { + flex:0 0 120px; + max-width:120px; + } + + &.valueCol { + flex: 1 0 auto; + min-width: 350px; + display: flex; + justify-content: flex-end; + padding: 0px; + align-items: center; + + .value-input { + flex: 1; + max-height: 24px; + border: none; + background-color: inherit; + + &:focus, &:active { + border:none; + outline:none; + } + } + + .delete-btn { + flex: 0 0 auto; + } + + .delete-button-container { + max-height: 24px; + } + + &.inner-table-container { + padding: 0px; + + .delete-button-container { + padding: 3px 5px 0 0 ; + } + } + } + + &.input-value-col { + padding: 8px; + } + + + } + + .filtered { + /deep/ .checkbox-label-content{ + background-color: yellow; + } + } + +} diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts new file mode 100644 index 0000000000..0add1cd707 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts @@ -0,0 +1,62 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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========================================================= + */ + +/** + * Created by rc2122 on 5/4/2017. + */ +import {Component, Input, Output, EventEmitter} from "@angular/core"; +import {InputFEModel} from "app/models"; +import {ModalService} from "../../../services/modal.service"; + +@Component({ + selector: 'inputs-table', + templateUrl: './inputs-table.component.html', + styleUrls: ['../inputs-table/inputs-table.component.less'], +}) +export class InputsTableComponent { + + @Input() inputs: Array; + @Input() instanceNamesMap: Map; + @Input() readonly:boolean; + @Input() isLoading:boolean; + @Output() inputValueChanged: EventEmitter = new EventEmitter(); + @Output() deleteInput: EventEmitter = new EventEmitter(); + + selectedInputToDelete:InputFEModel; + + constructor(private modalService: ModalService){ + } + + onInputValueChanged = (input) => { + this.inputValueChanged.emit(input); + }; + + onDeleteInput = () => { + this.deleteInput.emit(this.selectedInputToDelete); + this.modalService.closeCurrentModal(); + }; + + openDeleteModal = (input:InputFEModel) => { + this.selectedInputToDelete = input; + this.modalService.createActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close").instance.open(); + } +} + + diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html new file mode 100644 index 0000000000..14b6c7d4c0 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html @@ -0,0 +1,67 @@ +
+ + +
+ +
{{property.name}}
+
+
{{property.name}}
+
+ +
+ + + +
+ +
+ + +
{{property.type | contentAfterLastDot }}
+
{{property.schema.property.type | contentAfterLastDot }}
+ + +
+ + + + Add value to list + + + + +
+ +
+ + + + +
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less new file mode 100644 index 0000000000..0adce2c99d --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less @@ -0,0 +1,84 @@ +@import '../../../../../../assets/styles/variables.less'; +.flat-children-container { + .dynamic-property-row { + /*create nested left border classes for up to 10 levels of nesting*/ + .nested-border-loop(@i) when (@i > 0) { + @size: (@i - 1) *2; + &.nested-level-@{i} .table-cell:first-child { + border-left: ~"solid @{size}px #009fdb"; + } + .nested-border-loop(@i - 1) + } + .nested-border-loop(10); + } + dynamic-property { + &:first-child .dynamic-property-row.with-top-border { + border-top:solid 1px #d2d2d2; + } + &:not(:last-child) .dynamic-property-row { + border-bottom:solid 1px #d2d2d2; + } + } +} +.dynamic-property-row { + display:flex; + flex-direction:row; + align-items: stretch; + + &.readonly{ + background-color: @tlv_color_t; + cursor: auto; + } + //for the case that the parent is disabled but the child is enabled + &:not(.readonly){ + background-color: @main_color_p; + } + + .table-cell { + flex: 1; + padding:9px; + justify-content: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &:first-child { + flex: 0 0 50%; + border-right:#d2d2d2 solid 1px; + &:only-of-type { + flex: 1 1 100%; + border-right:none; + } + } + &.empty { + height:40px; + } + } + .property-icon { + flex: 0 0 auto; + margin-right:10px; + align-self:center; + cursor:pointer; + } + +} + +.filtered { + /deep/ .checkbox-label-content{ + background-color: yellow; + } +} +.inner-cell-div{ + max-width: 100%; + text-overflow: ellipsis; + overflow: hidden; + display: inline; + padding-left: 8px; +} +.error { + border: solid 1px @func_color_q; + color: @func_color_q; + outline: none; + box-sizing: border-box; +} + diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts new file mode 100644 index 0000000000..04cb26d030 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts @@ -0,0 +1,206 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, Input, Output, EventEmitter} from "@angular/core"; +import { PropertyFEModel, DerivedFEProperty, DerivedPropertyType } from "app/models"; +import { PROPERTY_TYPES } from 'app/utils'; +import { DataTypeService } from "../../../../services/data-type.service"; +import { trigger, state, style, transition, animate } from '@angular/core'; +import {PropertiesUtils} from "../../../../pages/properties-assignment/services/properties.utils"; + + +@Component({ + selector: 'dynamic-property', + templateUrl: './dynamic-property.component.html', + styleUrls: ['./dynamic-property.component.less'], + animations: [trigger('fadeIn', [transition(':enter', [style({ opacity: '0' }), animate('.7s ease-out', style({ opacity: '1' }))])])] +}) +export class DynamicPropertyComponent { + + derivedPropertyTypes = DerivedPropertyType; //http://stackoverflow.com/questions/35835984/how-to-use-a-typescript-enum-value-in-an-angular2-ngswitch-statement + propType: DerivedPropertyType; + propPath: string; + isPropertyFEModel: boolean; + nestedLevel: number; + + @Input() canBeDeclared: boolean; + @Input() property: PropertyFEModel | DerivedFEProperty; + @Input() expandedChildId: string; + @Input() selectedPropertyId: string; + @Input() propertyNameSearchText: string; + @Input() readonly: boolean; + @Input() hasChildren: boolean; + @Input() hasDeclareOption:boolean; + + @Output() valueChanged: EventEmitter = new EventEmitter(); + @Output() expandChild: EventEmitter = new EventEmitter(); + @Output() checkProperty: EventEmitter = new EventEmitter(); + @Output() deleteItem: EventEmitter = new EventEmitter(); + @Output() clickOnPropertyRow: EventEmitter = new EventEmitter(); + @Output() mapKeyChanged: EventEmitter = new EventEmitter(); + @Output() addChildPropsToParent: EventEmitter> = new EventEmitter>(); + + + constructor(private propertiesUtils: PropertiesUtils, private dataTypeService: DataTypeService) { + } + + ngOnInit() { + this.isPropertyFEModel = this.property instanceof PropertyFEModel; + this.propType = this.property.derivedDataType; + this.propPath = (this.property instanceof PropertyFEModel) ? this.property.name : this.property.propertiesName; + this.nestedLevel = (this.property.propertiesName.match(/#/g) || []).length; + } + + + onClickPropertyRow = (property, event) => { + // Because DynamicPropertyComponent is recrusive second time the event is fire event.stopPropagation = undefined + event && event.stopPropagation && event.stopPropagation(); + this.clickOnPropertyRow.emit(property); + } + + + expandChildById = (id: string) => { + this.expandedChildId = id; + this.expandChild.emit(id); + } + + checkedChange = (propName: string) => { + this.checkProperty.emit(propName); + } + + getHasChildren = (property:DerivedFEProperty): boolean => {// enter to this function only from base property (PropertyFEModel) and check for child property if it has children + return _.filter((this.property).flattenedChildren,(prop:DerivedFEProperty)=>{ + return _.startsWith(prop.propertiesName + '#', property.propertiesName); + }).length > 1; + } + + createNewChildProperty = (): void => { + + let newProps: Array = this.propertiesUtils.createListOrMapChildren(this.property, "", undefined); + if (this.property instanceof PropertyFEModel) { + this.addChildProps(newProps, this.property.name); + } else { + this.addChildPropsToParent.emit(newProps); + } + } + + addChildProps = (newProps: Array, childPropName: string) => { + + if (this.property instanceof PropertyFEModel) { + let insertIndex: number = this.property.getIndexOfChild(childPropName) + this.property.getCountOfChildren(childPropName); //insert after parent prop and existing children + this.property.flattenedChildren.splice(insertIndex, 0, ...newProps); //using ES6 spread operator + this.expandChildById(newProps[0].propertiesName); + + + if(!newProps[0].schema.property.isSimpleType){ + if ( newProps[0].mapKey ) {//prevent update the new item value on parent property valueObj and saving on BE if it is map item, it will be updated and saved only after user enter key (when it is list item- the map key is the es type) + this.updateMapKeyValueOnMainParent(newProps); + if (this.property.getParentNamesArray(newProps[0].propertiesName, []).indexOf('') === -1) { + this.valueChanged.emit(this.property.name); + } + } + } + } + } + + updateMapKeyValueOnMainParent(childrenProps: Array){ + if (this.property instanceof PropertyFEModel) { + //Update only if all this property parents has key name + if (this.property.getParentNamesArray(childrenProps[0].propertiesName, []).indexOf('') === -1){ + angular.forEach(childrenProps, (prop:DerivedFEProperty):void => { //Update parent PropertyFEModel with value for each child, including nested props + (this.property).childPropUpdated(prop); + },this); + //grab the cumulative value for the new item from parent PropertyFEModel and assign that value to DerivedFEProp[0] (which is the list or map parent with UUID of the set we just added) + let parentNames = (this.property).getParentNamesArray(childrenProps[0].propertiesName, []); + childrenProps[0].valueObj = _.get(this.property.valueObj, parentNames.join('.')); + } + } + } + + childValueChanged = (property: DerivedFEProperty) => { //value of child property changed + + if (this.property instanceof PropertyFEModel) { // will always be the case + if (this.property.getParentNamesArray(property.propertiesName, []).indexOf('') === -1) {//If one of the parents is empty key -don't save + this.property.childPropUpdated(property); + this.dataTypeService.checkForCustomBehavior(this.property); + this.valueChanged.emit(this.property.name); + } + } + } + + deleteListOrMapItem = (item: DerivedFEProperty) => { + if (this.property instanceof PropertyFEModel) { + this.removeValueFromParent(item); + this.property.flattenedChildren.splice(this.property.getIndexOfChild(item.propertiesName), this.property.getCountOfChildren(item.propertiesName)); + this.expandChildById(item.propertiesName); + } + } + + removeValueFromParent = (item: DerivedFEProperty, target?: any) => { + if (this.property instanceof PropertyFEModel) { + let itemParent = (item.parentName == this.property.name) ? this.property : this.property.flattenedChildren.find(prop => prop.propertiesName == item.parentName); + + if (item.derivedDataType == DerivedPropertyType.MAP) { + let oldKey = item.mapKey; + if (target && typeof target.value == 'string') { //allow saving empty string + let replaceKey:string = target.value; + if (!replaceKey) {//prevent delete map key + return; + } + if(Object.keys(itemParent.valueObj).indexOf(replaceKey) > -1){//the key is exists + target.setCustomValidity('This key is already exists.'); + return; + }else { + target.setCustomValidity(''); + _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]); + item.mapKey = replaceKey; + //If the map key was empty its valueObj was not updated on its prent property valueObj, and now we should update it. + if(!oldKey && !item.schema.property.isSimpleType){ + //Search this map item children and update these value on parent property valueOBj + let mapKeyFlattenChildren:Array = _.filter(this.property.flattenedChildren, (prop:DerivedFEProperty) => { + return _.startsWith(prop.propertiesName, item.propertiesName); + }); + this.updateMapKeyValueOnMainParent(mapKeyFlattenChildren); + } + } + } + delete itemParent.valueObj[oldKey]; + } else { + let itemIndex: number = this.property.flattenedChildren.filter(prop => prop.parentName == item.parentName).map(prop => prop.propertiesName).indexOf(item.propertiesName); + itemParent.valueObj.splice(itemIndex, 1); + } + if (item.mapKey) {//prevent going to BE if user tries to delete map item without key (it was not saved in BE) + if (itemParent instanceof PropertyFEModel) { //direct child + this.valueChanged.emit(this.property.name); + } else { //nested child - need to update parent prop by getting flattened name (recurse through parents and replace map/list keys, etc) + this.childValueChanged(itemParent); + } + } + } + } + + preventInsertItem = (property:DerivedFEProperty):boolean => { + if(property.type == PROPERTY_TYPES.MAP && Object.keys(property.valueObj).indexOf('') > -1 ){ + return true; + } + return false; + } + +} diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/pipes/filterChildProperties.pipe.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/pipes/filterChildProperties.pipe.ts new file mode 100644 index 0000000000..4520469594 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/pipes/filterChildProperties.pipe.ts @@ -0,0 +1,38 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Pipe, PipeTransform } from '@angular/core'; +import { DerivedFEProperty } from 'app/models'; + +@Pipe({ + name: 'filterChildProperties', +}) +export class FilterChildPropertiesPipe implements PipeTransform { + public transform(childProperties: Array, parentId: string) { + if (!parentId || !childProperties) return childProperties; + + let validParents: Array = [parentId]; + while (parentId.lastIndexOf('#') > 0) { + parentId = parentId.substring(0, parentId.lastIndexOf('#')); + validParents.push(parentId); + } + return childProperties.filter(derivedProp => validParents.indexOf(derivedProp.parentName) > -1); + } +} diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html new file mode 100644 index 0000000000..933b80f577 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html @@ -0,0 +1,63 @@ +
+ +
+
Property Name
+
Type
+
ES
+
Value
+
+
+
No data to display
+ + +
{{feInstanceNamesMap[instanceId]}}
+ +
+ +
+
+ +
+ {{property.name}} +
+
+ +
+
+
+ {{property.type | contentAfterLastDot}} +
+
+
+
+ {{property.schema.property.type | contentAfterLastDot}} +
+
+
+ + + + +
+
+ + +
+
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less new file mode 100644 index 0000000000..20da0b6ec2 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less @@ -0,0 +1,180 @@ +@import './../../../../../assets/styles/variables.less'; +@import '../../../../../assets/styles/sprite'; +@smaller-screen: ~"only screen and (max-width: 1580px)"; + +:host /deep/ input { width:100%;} + +.properties-table { + display:flex; + flex-direction:column; + flex: 1; + height:100%; + text-align:left; + + + .inner-cell-div{ + max-width: 100%; + text-overflow: ellipsis; + overflow: hidden; + height: 20px; + } + + .table-header { + display: flex; + flex-direction:row; + flex: 0 0 auto; + font-weight:bold; + border-top: #d2d2d2 solid 1px; + background-color: #f2f2f2; + + .table-cell { + color:#191919; + font-size:13px; + } + } + + .table-rows-header { + border: #d2d2d2 solid 1px; + border-top:none; + } + + .table-body { + display:flex; + flex-direction: column; + overflow-y:auto; + flex: 1; + background-color: @main_color_p; + + .no-data { + border: #d2d2d2 solid 1px; + border-top:none; + text-align: center; + height: 100%; + padding: 20px; + } + /deep/.selected{ + background-color: #e6f6fb; + color: #009fdb; + } + &.view-mode{ + /deep/ .dynamic-property-row:not(.selected){ + background-color:#f8f8f8; + } + } + .table-row { + display: flex; + flex-direction:row; + flex: 0 0 auto; + &.readonly{ + background-color: #f8f8f8; + cursor: auto; + } + + &:hover:not(.selected){ + background-color:#f8f8f8; cursor:pointer; + /deep/ .dynamic-property-row:not(.selected){ + background-color:#f8f8f8; cursor:pointer; + } + } + + .selected-row { + background-color:#e6f6fb; + } + + .table-cell.valueCol { + padding:0px; + + } + } + } + .table-cell { + font-size:13px; + flex:1; + border: #d2d2d2 solid 1px; + border-right:none; + border-top:none; + padding:10px; + text-overflow: ellipsis; + white-space: nowrap; + overflow:hidden; + display: flex; + min-height:40px; + + &:last-child { + border-right:#d2d2d2 solid 1px; + } + &.col1 { + flex: 1 0 210px; + max-width:300px; + display: flex; + justify-content: space-between; + @media @smaller-screen { flex: 0 0 25%;} + + .property-name { + flex: 1; + display: flex; + overflow: hidden; + //max-width: 90%; fix bug 327139 + } + + .property-description-icon { + float: right; + margin-top: 4px; + margin-left: 5px; + flex: 0 0 auto; + } + } + &.col2 { + flex: 0 0 150px; + max-width:150px; + @media @smaller-screen { flex: 0 0 20%;} + } + + &.col3 { + flex:0 0 120px; + max-width:120px; + @media @smaller-screen { flex: 0 0 15%;} + } + + &.valueCol { + flex: 2 0 300px; + display: flex; + @media @smaller-screen { flex: 1 0 40%;} + } + + + /deep/ .checkbox-container { + margin-right: 10px; + } + + /deep/ &.round-checkbox { + .checkbox-container input[type=checkbox].checkbox-hidden { + &:checked ~ .checkbox-icon::before { + .sprite-new; + .round-checked-icon; + } + &[disabled] ~ .checkbox-icon::before { + .sprite-new; + .round-checked-icon.disabled; + background-color:inherit; + border:none; + //animation: addDisabledCheck 4s linear; + } + } + } + } + + .filtered { + /deep/ .checkbox-label-content{ + background-color: yellow; + } + } + + dynamic-property { + width:100%; + &:last-child /deep/ .dynamic-property-row { + border-bottom:none; + } + } + +} diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts new file mode 100644 index 0000000000..32bbb1b3a0 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts @@ -0,0 +1,91 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Input, Output, EventEmitter} from "@angular/core"; +import {PropertyFEModel, DerivedFEProperty, InstanceFePropertiesMap} from "app/models"; +import {PropertiesService} from "../../../services/properties.service"; + +@Component({ + selector: 'properties-table', + templateUrl: './properties-table.component.html', + styleUrls: ['./properties-table.component.less'] +}) +export class PropertiesTableComponent { + + @Input() fePropertiesMap: InstanceFePropertiesMap; + @Input() feInstanceNamesMap: Map; + @Input() selectedPropertyId: string; + @Input() propertyNameSearchText:string; + @Input() searchTerm:string; + @Input() readonly:boolean; + @Input() isLoading:boolean; + @Input() hasDeclareOption:boolean; + @Input() hidePropertyType:boolean; + + @Output() valueChanged: EventEmitter = new EventEmitter(); + @Output() selectPropertyRow: EventEmitter = new EventEmitter(); + @Output() updateCheckedPropertyCount: EventEmitter = new EventEmitter();//only for hasDeclareOption + + constructor (private propertiesService:PropertiesService ){ + } + + ngOnInit() { + } + + propValueChanged = (property) => { + this.valueChanged.emit(property); + }; + + // Click on main row (row of propertyFEModel) + onClickPropertyRow = (property:PropertyFEModel, instanceName:string, event?) => { + //event && event.stopPropagation(); + this.selectedPropertyId = property.name; + let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName); + this.selectPropertyRow.emit(propertyRowSelectedEvent); + }; + + // Click on inner row (row of DerivedFEProperty) + onClickPropertyInnerRow = (property:DerivedFEProperty, instanceName:string) => { + let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName); + this.selectPropertyRow.emit(propertyRowSelectedEvent); + } + + propertyChecked = (prop: PropertyFEModel, childPropName?: string) => { + let isChecked: boolean = (!childPropName)? prop.isSelected : prop.flattenedChildren.find(prop => prop.propertiesName == childPropName).isSelected; + + if (!isChecked) { + this.propertiesService.undoDisableRelatedProperties(prop, childPropName); + } else { + this.propertiesService.disableRelatedProperties(prop, childPropName); + } + this.updateCheckedPropertyCount.emit(isChecked); + } + +} + +export class PropertyRowSelectedEvent { + propertyModel:PropertyFEModel | DerivedFEProperty; + instanceName:string; + constructor ( propertyModel:PropertyFEModel | DerivedFEProperty, instanceName:string ){ + this.propertyModel = propertyModel; + this.instanceName = instanceName; + } +} + diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts new file mode 100644 index 0000000000..91f33485a9 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts @@ -0,0 +1,29 @@ +import {NgModule} from "@angular/core"; +import {PropertiesTableComponent} from "./properties-table.component"; +import {DynamicPropertyComponent} from "./dynamic-property/dynamic-property.component"; +import {FormsModule} from "@angular/forms"; +import {UiElementsModule} from "../../ui/ui-elements.module"; +import {CommonModule} from "@angular/common"; +import {HttpModule} from "@angular/http"; +import {FilterChildPropertiesPipe} from "./pipes/filterChildProperties.pipe"; +import {GlobalPipesModule} from "../../../pipes/global-pipes.module"; +import {PropertiesService} from "../../../services/properties.service"; + +@NgModule({ + imports: [ + FormsModule, + HttpModule, + CommonModule, + GlobalPipesModule, + UiElementsModule + ], + declarations: [ + FilterChildPropertiesPipe, + DynamicPropertyComponent, + PropertiesTableComponent + ], + exports: [PropertiesTableComponent], + providers: [FilterChildPropertiesPipe, PropertiesService] +}) +export class PropertyTableModule { +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less new file mode 100644 index 0000000000..edcb87db3d --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less @@ -0,0 +1,77 @@ +@import './../../../../../assets/styles/variables.less'; +@import './../../../../../assets/styles/mixins.less'; +.main-container{ + color: @main_color_m; +} +.select-req-or-cap-span { + float: left; + margin-right: 15px; + font-size: 13px; +} +.select-type-label{ + .m_12_m; + margin-bottom: 2px; +} +.select-type{ + display: flex; + margin-bottom: 10px; + ui-element-dropdown{ + width: 40%; + font-size: 13px; + /deep/ select{ + height: 31px; + } + } +} +.table-and-list-container{ + display: flex; + padding-top: 10px; + .inner-container{ + height: 300px; + overflow-y: auto; + border: @main_color_o solid 1px; + } + .inner-container:not(:last-of-type){ + border-right: none; + } + .requirements-or-capabilities-container { + width: 40%; + &.empty-list{ + background-color: @tlv_color_t; + text-align: center; + &:before{ + content: 'Select "type" above'; + line-height: 298px; + } + } + .req-or-cap-item{ + border-bottom: @main_color_o solid 1px; + padding: 10px; + font-size: 13px; + &:hover:not(.selected){ + background-color:@tlv_color_t; cursor:pointer; + } + } + } + .properties-table-container{ + width: 60%; + display: flex; + &.cap-selected{ + background-color: @tlv_color_t; + border: @main_color_a solid 1px; + -webkit-box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1); + -moz-box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1); + box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1); + } + properties-table{ + margin: 15px; + width: 100%; + } + } +} + +.selected{ + color: @main_color_a; + background-color: @tlv_color_v; + border-left: @main_color_a solid 4px; +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html new file mode 100644 index 0000000000..bcd33efc30 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html @@ -0,0 +1,36 @@ +
+ Select: + + + +
+ +
+ +
+
+
+ {{item.getFullTitle()}} +
+
+
+ + +
+ +
+
+ diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts new file mode 100644 index 0000000000..ab67dc1850 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts @@ -0,0 +1,182 @@ +/** + * Created by rc2122 on 9/4/2017. + */ +import {Component, EventEmitter, Input, OnInit, Output, SimpleChanges} from '@angular/core'; +import {RadioButtonModel, Match, PropertyModel, InstanceFePropertiesMap, Component as ComponentModel} from "app/models"; +import {Dictionary} from "lodash"; +import {DropdownValue} from "../../ui/form-components/dropdown/ui-element-dropdown.component"; +import {ComponentInstanceServiceNg2} from "../../../services/component-instance-services/component-instance.service"; +import {PropertiesUtils} from "app/ng2/pages/properties-assignment/services/properties.utils"; +import {Requirement} from "../../../../models/requirement"; +import {Capability, RequirementCapabilityModel} from "../../../../models/capability"; + +const REQUIREMENT = 'Requirement'; +const CAPABILITY = 'Capability'; + +@Component({ + selector: 'select-requirement-or-capability', + templateUrl: './select-requirement-or-capability.component.html', + styleUrls: ['./select-reqiurement-or-capability.component.less'] +}) + +export class SelectRequirementOrCapabilityComponent implements OnInit { + + + @Input() optionalRequirementsMap:Dictionary; //optional requirement map - key is type, value is array of requirements + @Input() optionalCapabilitiesMap:Dictionary; //optional capabilities map - key is type, value is array of capabilities + + @Input() selectedReqOrCapOption:string; // the selection value chosen by the user (options: requirement / capability ) + + @Input() currentComponent:ComponentModel; + @Input() componentInstanceId:string; + + @Input() selectedReqOrCapModel:RequirementCapabilityModel; + + @Output() updateSelectedReqOrCap:EventEmitter = new EventEmitter(); + @Output() updateCapabilityProperties:EventEmitter> = new EventEmitter>(); + + types:Array = []; + selectedType:string; + + selectOptions:Array; + + requirementsTypes:Array = []; + capabilitiesTypes:Array = []; + + disabledSelectReqOrCapOption: boolean; // If we need to disable the option to choose requirement or capability + displayCapReqListFilterByType:RequirementCapabilityModel[]; + + capabilityProperties:InstanceFePropertiesMap; + + constructor(private componentInstanceServiceNg2:ComponentInstanceServiceNg2, + private propertiesUtils:PropertiesUtils) { + this.selectOptions = [new RadioButtonModel(REQUIREMENT, REQUIREMENT), new RadioButtonModel(CAPABILITY, CAPABILITY)]; + } + + private initDefaultReqOrCapSelection = (): void => { + if(this.selectedReqOrCapOption){//for second step + this.disabledSelectReqOrCapOption = true; + } + if (this.selectedReqOrCapModel) {//init when there is selected req or cap + if (this.selectedReqOrCapModel instanceof Capability) { + this.selectedReqOrCapOption = this.selectOptions[1].value; + this.selectedType = this.selectedReqOrCapModel.type; + } else { + this.selectedReqOrCapOption = this.selectOptions[0].value; + this.selectedType = (this.selectedReqOrCapModel).capability; + } + } + if(Object.keys(this.optionalCapabilitiesMap).length === 0) { // If instance don't have capabilities + this.disabledSelectReqOrCapOption = true; + this.selectedReqOrCapOption = this.selectOptions[0].value; + } else if(Object.keys(this.optionalRequirementsMap).length === 0) { // If instance don't have requirements + this.disabledSelectReqOrCapOption = true; + this.selectedReqOrCapOption = this.selectOptions[1].value; + } + this.selectedReqOrCapOption = this.selectedReqOrCapOption || this.selectOptions[1].value; + this.types = this.selectedReqOrCapOption == this.selectOptions[0].value ? this.requirementsTypes : this.capabilitiesTypes; + setTimeout(() => { + if (this.selectedType) { + this.initCapReqListFilterByType(); + } else { + this.setDefaultValueType(); + } + }); + } + + initCapabilityPropertiesTable = ():void => { + if(this.selectedReqOrCapModel instanceof Capability ) { + let selectedCapability = this.selectedReqOrCapModel; + if(selectedCapability.properties){ + this.capabilityProperties = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({ CAPABILITY : selectedCapability.properties}, false); + } + } + } + + ngOnChanges(changes:SimpleChanges) { + if (changes.selectedReqOrCapModel) { + if (this.selectedReqOrCapModel && this.selectedReqOrCapOption === CAPABILITY) { + this.setCapabilityProperties(); + } + } + } + + ngOnInit() { + this.initTypesList(); + this.initDefaultReqOrCapSelection(); + this.initCapabilityPropertiesTable(); + } + + private initTypesList = ():void => { + this.requirementsTypes = _.keys(this.optionalRequirementsMap); + this.requirementsTypes.unshift('All'); + this.capabilitiesTypes = _.keys(this.optionalCapabilitiesMap); + this.capabilitiesTypes.unshift('All'); + } + + private fillInDisplayCapReqListFilterByType = (allOptionalTypesMap:Dictionary):void => { + if(this.selectedType === 'All'){ + this.displayCapReqListFilterByType = []; + _.map(allOptionalTypesMap,(reqOrCapArray:RequirementCapabilityModel[])=>{ + this.displayCapReqListFilterByType = this.displayCapReqListFilterByType.concat(reqOrCapArray); + }) + }else{ + this.displayCapReqListFilterByType = allOptionalTypesMap[this.selectedType]; + } + + // automatically select a *single* requirement or capability: + if (this.displayCapReqListFilterByType.length === 1) { + const selectedReqCap:RequirementCapabilityModel = this.displayCapReqListFilterByType[0]; + this.selectReqOrCapFromList((this.selectedType === CAPABILITY) ? selectedReqCap : selectedReqCap); + } + } + + private initCapReqListFilterByType = ():void => { + if (this.selectedReqOrCapOption === CAPABILITY) { + this.fillInDisplayCapReqListFilterByType(this.optionalCapabilitiesMap); + } else { + this.fillInDisplayCapReqListFilterByType(this.optionalRequirementsMap); + } + } + + private onTypeSelected = ():void => { + this.initCapReqListFilterByType(); + if (this.displayCapReqListFilterByType.indexOf(this.selectedReqOrCapModel) === -1) { + this.selectReqOrCapFromList(null); + } + } + + private setDefaultValueType = ():void =>{ + // automatically select a *single* type from the list: + this.selectedType = (this.types.length === 2) ? this.types[1] : this.types[0]; + this.initCapReqListFilterByType(); + } + + private onSelectRequirementOrCapability = ():void => { + this.types = this.selectedReqOrCapOption === REQUIREMENT ? this.requirementsTypes : this.capabilitiesTypes; + this.selectReqOrCapFromList(null); + this.setDefaultValueType(); + } + + private selectReqOrCapFromList = (selected:Requirement|Capability):void => { + if (this.selectedReqOrCapModel !== selected) { + this.selectedReqOrCapModel = selected; + this.updateSelectedReqOrCap.emit(selected); + } + } + + + private setCapabilityProperties = ():void => { + let selectedCapability = this.selectedReqOrCapModel; + if (selectedCapability.properties === undefined) { + this.componentInstanceServiceNg2.getInstanceCapabilityProperties(this.currentComponent, this.componentInstanceId, selectedCapability.type, selectedCapability.name) + .subscribe((response:Array) => { + this.capabilityProperties = (response && response.length) ? this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({CAPABILITY : response}, false) : null; + this.updateCapabilityProperties.emit(response); + }, error => {}); + }else{ + this.capabilityProperties = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({CAPABILITY : selectedCapability.properties}, false); + this.updateCapabilityProperties.emit(selectedCapability.properties); + } + } +} diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts new file mode 100644 index 0000000000..cb12dea02a --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts @@ -0,0 +1,24 @@ +import {NgModule} from "@angular/core"; +import {SelectRequirementOrCapabilityComponent} from "./select-requirement-or-capability.component"; +import {FormsModule} from "@angular/forms"; +import {FormElementsModule} from "../../ui/form-components/form-elements.module"; +import {CommonModule} from "@angular/common"; +import {GlobalPipesModule} from "app/ng2/pipes/global-pipes.module"; +import {PropertyTableModule} from "../properties-table/property-table.module"; + +@NgModule({ + declarations: [ + SelectRequirementOrCapabilityComponent + ], + imports: [ + CommonModule, + FormsModule, + FormElementsModule, + GlobalPipesModule, + PropertyTableModule], + + exports: [SelectRequirementOrCapabilityComponent], + providers: [] +}) +export class SelectRequirementOrCapabilityModule { +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html b/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html deleted file mode 100644 index 433bd4fd6f..0000000000 --- a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html +++ /dev/null @@ -1,5 +0,0 @@ -
-
Error code: {{input.messageId}}
-
Status code: {{input.status}}
-
{{input.message}}
-
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts b/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts deleted file mode 100644 index c0d6673412..0000000000 --- a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts +++ /dev/null @@ -1,38 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * 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========================================================= - */ - -/** - * Created by ngordon on 7/30/2017. - */ -import { Component, Input } from '@angular/core'; -import { ServerErrorResponse } from 'app/models'; - -@Component({ - selector: 'error-message', - templateUrl: './error-message.component.html' -}) - -export class ErrorMessageComponent { - @Input() input: ServerErrorResponse; - - constructor() { - } - -} diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.html b/catalog-ui/src/app/ng2/components/modal/modal.component.html deleted file mode 100644 index d843867cdb..0000000000 --- a/catalog-ui/src/app/ng2/components/modal/modal.component.html +++ /dev/null @@ -1,20 +0,0 @@ -
-
-
- {{ input.title }} - -
-
-
{{input.content}}
-
-
- -
- -
-
-
-
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.less b/catalog-ui/src/app/ng2/components/modal/modal.component.less deleted file mode 100644 index c87162afb0..0000000000 --- a/catalog-ui/src/app/ng2/components/modal/modal.component.less +++ /dev/null @@ -1,128 +0,0 @@ -@import '../../../../assets/styles/variables'; -@import '../../../../assets/styles/mixins'; -@import '../../../../assets/styles/sprite-old'; -/deep/ modal { - display: none; - - .custom-modal { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1000; - overflow: auto; - margin: auto; - display: flex; - align-items: center; - - .ng2-modal-content { - background: #fff; - width: 100%; - box-shadow: 0 5px 15px rgba(0,0,0,.5); - border-radius: 4px; - .ng2-modal-body{ - padding: 20px; - } - - .ng2-modal-header{ - .m_18_m; - font-weight: bold; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - height: 50px; - line-height: 50px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - text-align: left; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - margin: 0px 20px; - - &.modal-type-standard { - border-bottom: solid 3px @main_color_a; - } - - &.modal-type-error { - border-bottom: solid 3px @func_color_q; - } - - &.modal-type-alert{ - border-bottom: solid 3px @main_color_h; - } - - .title{ - .s_18_m; - -webkit-box-flex: 999; - -ms-flex-positive: 999; - flex-grow: 999; - } - .close-button{ - .sprite; - .sprite.x-btn-black; - cursor: pointer; - } - } - - .ng2-modal-footer{ - background-color: @tlv_color_t; - padding: 17px 30px; - clear: both; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - border-radius: 4px; - button{ - margin: 0 12px 0 6px; - } - } - } - } - - .modal-background { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: #000; - opacity: 0.5; - z-index: 900; - } -} - -.xl { - width: 1200px; -} - -.l { - width: 875px; -} - -.md { - width: 650px; -} - -.sm { - width: 552px; -} - -.xsm { - width: 432px; -} - -body.modal-open { - overflow: hidden; -} diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/modal/modal.component.ts deleted file mode 100644 index 89db8d1140..0000000000 --- a/catalog-ui/src/app/ng2/components/modal/modal.component.ts +++ /dev/null @@ -1,62 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * 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========================================================= - */ - -/** - * Created by rc2122 on 6/1/2017. - */ -import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core'; -import {ViewContainerRef, ViewChild} from '@angular/core'; -import * as $ from 'jquery'; -import { ButtonsModelMap, ModalModel } from 'app/models'; - -@Component({ - selector: 'modal', - templateUrl: './modal.component.html', - styleUrls:['modal.component.less'] -}) - -export class ModalComponent implements OnInit, OnDestroy { - @Input() input: ModalModel; - @Input() dynamicContent: any; - @ViewChild('dynamicContentContainer', { read: ViewContainerRef }) dynamicContentContainer: ViewContainerRef; //Allows for custom component as body instead of simple message. See ModalService.createActionModal for implementation details, and HttpService's catchError() for example. - private modalElement: JQuery; - - constructor( el: ElementRef ) { - this.modalElement = $(el.nativeElement); - } - - ngOnInit(): void { - this.modalElement.appendTo('body'); - } - - ngOnDestroy(): void { - this.modalElement.remove(); - } - - open(): void { - this.modalElement.show(); - $('body').addClass('modal-open'); - } - - close(): void { - this.modalElement.hide(); - $('body').removeClass('modal-open'); - } -} diff --git a/catalog-ui/src/app/ng2/components/modal/modal.module.ts b/catalog-ui/src/app/ng2/components/modal/modal.module.ts deleted file mode 100644 index 892f6993dd..0000000000 --- a/catalog-ui/src/app/ng2/components/modal/modal.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { NgModule } from "@angular/core"; -import { CommonModule } from '@angular/common'; -import { ModalService } from 'app/ng2/services/modal.service'; -import { ModalComponent } from "app/ng2/components/modal/modal.component"; -import { ErrorMessageComponent } from "./error-message/error-message.component"; - -@NgModule({ - declarations: [ - ModalComponent, - ErrorMessageComponent - ], - imports: [CommonModule], - exports: [], - entryComponents: [ //need to add anything that will be dynamically created - ModalComponent, - ErrorMessageComponent - ], - providers: [ModalService] -}) -export class ModalModule { - -} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/popover/popover-content.component.html b/catalog-ui/src/app/ng2/components/popover/popover-content.component.html deleted file mode 100644 index 6d76f0ad06..0000000000 --- a/catalog-ui/src/app/ng2/components/popover/popover-content.component.html +++ /dev/null @@ -1,24 +0,0 @@ -
-
-
-
- {{ title }} - -
- -
- -
-
- - diff --git a/catalog-ui/src/app/ng2/components/popover/popover-content.component.less b/catalog-ui/src/app/ng2/components/popover/popover-content.component.less deleted file mode 100644 index 04cdd3914b..0000000000 --- a/catalog-ui/src/app/ng2/components/popover/popover-content.component.less +++ /dev/null @@ -1,77 +0,0 @@ -@import '../../../../assets/styles/variables'; -@import '../../../../assets/styles/mixins'; -@import '../../../../assets/styles/sprite-old'; -.popover .virtual-area { - height: 11px; - width: 100%; - position: absolute; -} -.popover.top .virtual-area { - bottom: -11px; -} -.popover.bottom .virtual-area { - top: -11px; -} -.popover.left .virtual-area { - right: -11px; -} -.popover.right .virtual-area { - left: -11px; -} -.popover.hide-arrow{ - margin: 0; -} - -.popover-header{ - .m_14_m; - font-weight: bold; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - height: 40px; - line-height: 48px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - text-align: left; - border-bottom: solid 1px @main_color_o; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - margin: 0px 20px; - max-width:350px; - - .title{ - flex: 1; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .close-button{ - .sprite; - .sprite.x-btn-black; - cursor: pointer; - } -} - -.popover-footer{ - background-color: @tlv_color_t; - height: 40px; - clear: both; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - button{ - margin: 8px 12px 8px 6px; - } -} diff --git a/catalog-ui/src/app/ng2/components/popover/popover-content.component.ts b/catalog-ui/src/app/ng2/components/popover/popover-content.component.ts deleted file mode 100644 index 6eb36287d0..0000000000 --- a/catalog-ui/src/app/ng2/components/popover/popover-content.component.ts +++ /dev/null @@ -1,278 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, Input, Output, AfterViewInit, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, EventEmitter, Renderer } from "@angular/core"; -import {ButtonsModelMap} from "app/models"; -import {PopoverComponent} from "./popover.component"; - -@Component({ - selector: "popover-content", - templateUrl:'./popover-content.component.html', - styleUrls:['popover-content.component.less'] -}) -export class PopoverContentComponent implements AfterViewInit, OnDestroy { - - @Input() public title: string; - @Input() public buttons:ButtonsModelMap; - - @Input() - content: string; - - @Input() - placement: "top"|"bottom"|"left"|"right"|"auto"|"auto top"|"auto bottom"|"auto left"|"auto right" = "bottom"; - - @Input() - animation: boolean = true; - - @Input() - closeOnClickOutside: boolean = false; - - @Input() - closeOnMouseOutside: boolean = false; - - @Input() - hideArrow: boolean = false; - - @ViewChild("popoverDiv") - popoverDiv: ElementRef; - - buttonsNames:Array; - - popover: PopoverComponent; - onCloseFromOutside = new EventEmitter(); - top: number = -10000; - left: number = -10000; - isIn: boolean = false; - displayType: string = "none"; - effectivePlacement: string; - - onDocumentMouseDown = (event: any) => { - const element = this.element.nativeElement; - if (!element || !this.popover) return; - if (element.contains(event.target) || this.popover.getElement().contains(event.target)) return; - this.hide(); - this.onCloseFromOutside.emit(undefined); - }; - - - constructor(protected element: ElementRef, - protected cdr: ChangeDetectorRef, - protected renderer: Renderer) { - } - - listenClickFunc: any; - listenMouseFunc: any; - - ngAfterViewInit(): void { - this.buttonsNames = Object.keys(this.buttons); - if (this.closeOnClickOutside) - this.listenClickFunc = this.renderer.listenGlobal("document", "mousedown", (event: any) => this.onDocumentMouseDown(event)); - if (this.closeOnMouseOutside) - this.listenMouseFunc = this.renderer.listenGlobal("document", "mouseover", (event: any) => this.onDocumentMouseDown(event)); - - this.show(); - this.cdr.detectChanges(); - } - - ngOnDestroy() { - if (this.closeOnClickOutside) - this.listenClickFunc(); - if (this.closeOnMouseOutside) - this.listenMouseFunc(); - } - - // ------------------------------------------------------------------------- - // Public Methods - // ------------------------------------------------------------------------- - - show(): void { - if (!this.popover || !this.popover.getElement()) - return; - - const p = this.positionElements(this.popover.getElement(), this.popoverDiv.nativeElement, this.placement); - this.displayType = "block"; - this.top = p.top; - this.left = p.left; - this.isIn = true; - } - - hide(): void { - this.top = -10000; - this.left = -10000; - this.isIn = true; - this.popover.hide(); - } - - hideFromPopover() { - this.top = -10000; - this.left = -10000; - this.isIn = true; - } - - // ------------------------------------------------------------------------- - // Protected Methods - // ------------------------------------------------------------------------- - - protected positionElements(hostEl: HTMLElement, targetEl: HTMLElement, positionStr: string, appendToBody: boolean = false): { top: number, left: number } { - let positionStrParts = positionStr.split("-"); - let pos0 = positionStrParts[0]; - let pos1 = positionStrParts[1] || "center"; - let hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl); - let targetElWidth = targetEl.offsetWidth; - let targetElHeight = targetEl.offsetHeight; - - this.effectivePlacement = pos0 = this.getEffectivePlacement(pos0, hostEl, targetEl); - - let shiftWidth: any = { - center: function (): number { - return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2; - }, - left: function (): number { - return hostElPos.left; - }, - right: function (): number { - return hostElPos.left + hostElPos.width - targetElWidth; - } - }; - - let shiftHeight: any = { - center: function (): number { - return hostElPos.top + hostElPos.height / 2 - targetElHeight / 2; - }, - top: function (): number { - return hostElPos.top; - }, - bottom: function (): number { - return hostElPos.top + hostElPos.height - targetElHeight; - } - }; - - let targetElPos: { top: number, left: number }; - switch (pos0) { - case "right": - targetElPos = { - top: shiftHeight[pos1](), - left: hostElPos.left + hostElPos.width - }; - break; - - case "left": - targetElPos = { - top: shiftHeight[pos1](), - left: hostElPos.left - targetElWidth - }; - break; - - case "bottom": - targetElPos = { - top: hostElPos.top + hostElPos.height, - left: shiftWidth[pos1]() - }; - break; - - default: - targetElPos = { - top: hostElPos.top - targetElHeight, - left: shiftWidth[pos1]() - }; - break; - } - - return targetElPos; - } - - protected position(nativeEl: HTMLElement): { width: number, height: number, top: number, left: number } { - let offsetParentBCR = { top: 0, left: 0 }; - const elBCR = this.offset(nativeEl); - const offsetParentEl = this.parentOffsetEl(nativeEl); - if (offsetParentEl !== window.document) { - offsetParentBCR = this.offset(offsetParentEl); - offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop; - offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft; - } - - const boundingClientRect = nativeEl.getBoundingClientRect(); - return { - width: boundingClientRect.width || nativeEl.offsetWidth, - height: boundingClientRect.height || nativeEl.offsetHeight, - top: elBCR.top - offsetParentBCR.top, - left: elBCR.left - offsetParentBCR.left - }; - } - - protected offset(nativeEl: any): { width: number, height: number, top: number, left: number } { - const boundingClientRect = nativeEl.getBoundingClientRect(); - return { - width: boundingClientRect.width || nativeEl.offsetWidth, - height: boundingClientRect.height || nativeEl.offsetHeight, - top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop), - left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft) - }; - } - - protected getStyle(nativeEl: HTMLElement, cssProp: string): string { - if ((nativeEl as any).currentStyle) // IE - return (nativeEl as any).currentStyle[cssProp]; - - if (window.getComputedStyle) - return (window.getComputedStyle as any)(nativeEl)[cssProp]; - - // finally try and get inline style - return (nativeEl.style as any)[cssProp]; - } - - protected isStaticPositioned(nativeEl: HTMLElement): boolean { - return (this.getStyle(nativeEl, "position") || "static" ) === "static"; - } - - protected parentOffsetEl(nativeEl: HTMLElement): any { - let offsetParent: any = nativeEl.offsetParent || window.document; - while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) { - offsetParent = offsetParent.offsetParent; - } - return offsetParent || window.document; - } - - protected getEffectivePlacement(placement: string, hostElement: HTMLElement, targetElement: HTMLElement): string { - const placementParts = placement.split(" "); - if (placementParts[0] !== "auto") { - return placement; - } - - const hostElBoundingRect = hostElement.getBoundingClientRect(); - - const desiredPlacement = placementParts[1] || "bottom"; - - if (desiredPlacement === "top" && hostElBoundingRect.top - targetElement.offsetHeight < 0) { - return "bottom"; - } - if (desiredPlacement === "bottom" && hostElBoundingRect.bottom + targetElement.offsetHeight > window.innerHeight) { - return "top"; - } - if (desiredPlacement === "left" && hostElBoundingRect.left - targetElement.offsetWidth < 0) { - return "right"; - } - if (desiredPlacement === "right" && hostElBoundingRect.right + targetElement.offsetWidth > window.innerWidth) { - return "left"; - } - - return desiredPlacement; - } -} diff --git a/catalog-ui/src/app/ng2/components/popover/popover.component.ts b/catalog-ui/src/app/ng2/components/popover/popover.component.ts deleted file mode 100644 index e976bc7bf2..0000000000 --- a/catalog-ui/src/app/ng2/components/popover/popover.component.ts +++ /dev/null @@ -1,179 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Directive, HostListener, ComponentRef, ViewContainerRef, ComponentFactoryResolver, ComponentFactory, Input, OnChanges, SimpleChange, Output, EventEmitter } from "@angular/core"; -import {PopoverContentComponent} from "./popover-content.component"; - -@Directive({ - selector: "[popover]", - exportAs: "popover" -}) -export class PopoverComponent implements OnChanges { - - protected PopoverComponent = PopoverContentComponent; - protected popover: ComponentRef; - protected visible: boolean; - - - constructor(protected viewContainerRef: ViewContainerRef, - protected resolver: ComponentFactoryResolver) { - } - - @Input("popover") - content: string|PopoverContentComponent; - - @Input() - popoverDisabled: boolean; - - @Input() - popoverAnimation: boolean; - - @Input() - popoverPlacement: "top"|"bottom"|"left"|"right"|"auto"|"auto top"|"auto bottom"|"auto left"|"auto right"; - - @Input() - popoverTitle: string; - - @Input() - popoverOnHover: boolean = false; - - @Input() - popoverCloseOnClickOutside: boolean; - - @Input() - popoverCloseOnMouseOutside: boolean; - - @Input() - popoverDismissTimeout: number = 0; - - @Output() - onShown = new EventEmitter(); - - @Output() - onHidden = new EventEmitter(); - - @HostListener("click") - showOrHideOnClick(): void { - if (this.popoverOnHover) return; - if (this.popoverDisabled) return; - this.toggle(); - } - - @HostListener("focusin") - @HostListener("mouseenter") - showOnHover(): void { - if (!this.popoverOnHover) return; - if (this.popoverDisabled) return; - this.show(); - } - - @HostListener("focusout") - @HostListener("mouseleave") - hideOnHover(): void { - if (this.popoverCloseOnMouseOutside) return; - if (!this.popoverOnHover) return; - if (this.popoverDisabled) return; - this.hide(); - } - - ngOnChanges(changes: {[propertyName: string]: SimpleChange}) { - if (changes["popoverDisabled"]) { - if (changes["popoverDisabled"].currentValue) { - this.hide(); - } - } - } - - toggle() { - if (!this.visible) { - this.show(); - } else { - this.hide(); - } - } - - show() { - if (this.visible) return; - - this.visible = true; - if (typeof this.content === "string") { - const factory = this.resolver.resolveComponentFactory(this.PopoverComponent); - if (!this.visible) - return; - - this.popover = this.viewContainerRef.createComponent(factory); - const popover = this.popover.instance as PopoverContentComponent; - popover.popover = this; - popover.content = this.content as string; - if (this.popoverPlacement !== undefined) - popover.placement = this.popoverPlacement; - if (this.popoverAnimation !== undefined) - popover.animation = this.popoverAnimation; - if (this.popoverTitle !== undefined) - popover.title = this.popoverTitle; - if (this.popoverCloseOnClickOutside !== undefined) - popover.closeOnClickOutside = this.popoverCloseOnClickOutside; - if (this.popoverCloseOnMouseOutside !== undefined) - popover.closeOnMouseOutside = this.popoverCloseOnMouseOutside; - - popover.onCloseFromOutside.subscribe(() => this.hide()); - if (this.popoverDismissTimeout > 0) - setTimeout(() => this.hide(), this.popoverDismissTimeout); - } else { - const popover = this.content as PopoverContentComponent; - popover.popover = this; - if (this.popoverPlacement !== undefined) - popover.placement = this.popoverPlacement; - if (this.popoverAnimation !== undefined) - popover.animation = this.popoverAnimation; - if (this.popoverTitle !== undefined) - popover.title = this.popoverTitle; - if (this.popoverCloseOnClickOutside !== undefined) - popover.closeOnClickOutside = this.popoverCloseOnClickOutside; - if (this.popoverCloseOnMouseOutside !== undefined) - popover.closeOnMouseOutside = this.popoverCloseOnMouseOutside; - - popover.onCloseFromOutside.subscribe(() => this.hide()); - if (this.popoverDismissTimeout > 0) - setTimeout(() => this.hide(), this.popoverDismissTimeout); - popover.show(); - } - - this.onShown.emit(this); - } - - hide() { - if (!this.visible) return; - - this.visible = false; - if (this.popover) - this.popover.destroy(); - - if (this.content instanceof PopoverContentComponent) - (this.content as PopoverContentComponent).hideFromPopover(); - - this.onHidden.emit(this); - } - - getElement() { - return this.viewContainerRef.element.nativeElement; - } - -} diff --git a/catalog-ui/src/app/ng2/components/popover/popover.module.ts b/catalog-ui/src/app/ng2/components/popover/popover.module.ts deleted file mode 100644 index a9605c17b6..0000000000 --- a/catalog-ui/src/app/ng2/components/popover/popover.module.ts +++ /dev/null @@ -1,47 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * 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========================================================= - */ - -/** - * Created by rc2122 on 5/17/2017. - */ -import {NgModule} from "@angular/core"; -import { CommonModule } from '@angular/common'; -import {PopoverComponent} from "./popover.component"; -import {PopoverContentComponent} from "./popover-content.component"; - -@NgModule({ - declarations: [ - PopoverComponent, - PopoverContentComponent - ], - imports: [ - // PopoverComponent, - // PopoverContentComponent - CommonModule - ], - exports: [ - PopoverComponent, - PopoverContentComponent - ], - providers: [] -}) -export class PopoverModule { - -} diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html deleted file mode 100644 index 3ffc9c16be..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html +++ /dev/null @@ -1,66 +0,0 @@ -
- - -
- -
{{property.name}}
-
-
{{property.name}}
-
- -
- - - -
- -
- - -
{{property.type | contentAfterLastDot }}
-
{{property.schema.property.type | contentAfterLastDot }}
- - -
- - - - Add value to list - - - - -
- -
- - - - -
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less deleted file mode 100644 index 48d3d035d0..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less +++ /dev/null @@ -1,74 +0,0 @@ -@import '../../../../../assets/styles/variables.less'; -.flat-children-container { - .dynamic-property-row { - /*create nested left border classes for up to 10 levels of nesting*/ - .nested-border-loop(@i) when (@i > 0) { - @size: (@i - 1) *2; - &.nested-level-@{i} .table-cell:first-child { - border-left: ~"solid @{size}px #009fdb"; - } - .nested-border-loop(@i - 1) - } - .nested-border-loop(10); - } - dynamic-property { - &:first-child .dynamic-property-row.with-top-border { - border-top:solid 1px #d2d2d2; - } - &:not(:last-child) .dynamic-property-row { - border-bottom:solid 1px #d2d2d2; - } - } -} -.dynamic-property-row { - display:flex; - flex-direction:row; - align-items: stretch; - - .table-cell { - flex: 1; - padding:9px; - justify-content: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - &:first-child { - flex: 0 0 50%; - border-right:#d2d2d2 solid 1px; - &:only-of-type { - flex: 1 1 100%; - border-right:none; - } - } - &.empty { - height:40px; - } - } - .property-icon { - flex: 0 0 auto; - margin-right:10px; - align-self:center; - cursor:pointer; - } - -} - -.filtered { - /deep/ .checkbox-label-content{ - background-color: yellow; - } -} -.inner-cell-div{ - max-width: 100%; - text-overflow: ellipsis; - overflow: hidden; - display: inline; - padding-left: 8px; -} -.error { - border: solid 1px @func_color_q; - color: @func_color_q; - outline: none; - box-sizing: border-box; -} diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts deleted file mode 100644 index 9cf043098b..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts +++ /dev/null @@ -1,205 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, Input, Output, EventEmitter} from "@angular/core"; -import { PropertyBEModel, PropertyFEModel, DerivedFEProperty, DerivedPropertyType, SchemaPropertyGroupModel, DataTypeModel } from "app/models"; -import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils'; -import { PropertiesUtils } from "app/ng2/pages/properties-assignment/properties.utils"; -import { DataTypeService } from "../../../services/data-type.service"; -import { trigger, state, style, transition, animate } from '@angular/core'; - - -@Component({ - selector: 'dynamic-property', - templateUrl: './dynamic-property.component.html', - styleUrls: ['./dynamic-property.component.less'], - animations: [trigger('fadeIn', [transition(':enter', [style({ opacity: '0' }), animate('.7s ease-out', style({ opacity: '1' }))])])] -}) -export class DynamicPropertyComponent { - - derivedPropertyTypes = DerivedPropertyType; //http://stackoverflow.com/questions/35835984/how-to-use-a-typescript-enum-value-in-an-angular2-ngswitch-statement - propType: DerivedPropertyType; - propPath: string; - isPropertyFEModel: boolean; - nestedLevel: number; - - @Input() canBeDeclared: boolean; - @Input() property: PropertyFEModel | DerivedFEProperty; - @Input() expandedChildId: string; - @Input() selectedPropertyId: string; - @Input() propertyNameSearchText: string; - @Input() readonly: boolean; - @Input() hasChildren: boolean; - - @Output() valueChanged: EventEmitter = new EventEmitter(); - @Output() expandChild: EventEmitter = new EventEmitter(); - @Output() checkProperty: EventEmitter = new EventEmitter(); - @Output() deleteItem: EventEmitter = new EventEmitter(); - @Output() clickOnPropertyRow: EventEmitter = new EventEmitter(); - @Output() mapKeyChanged: EventEmitter = new EventEmitter(); - @Output() addChildPropsToParent: EventEmitter> = new EventEmitter>(); - - - constructor(private propertiesUtils: PropertiesUtils, private dataTypeService: DataTypeService) { - } - - ngOnInit() { - this.isPropertyFEModel = this.property instanceof PropertyFEModel; - this.propType = this.property.derivedDataType; - this.propPath = (this.property instanceof PropertyFEModel) ? this.property.name : this.property.propertiesName; - this.nestedLevel = (this.property.propertiesName.match(/#/g) || []).length; - } - - - onClickPropertyRow = (property, event) => { - // Because DynamicPropertyComponent is recrusive second time the event is fire event.stopPropagation = undefined - event && event.stopPropagation && event.stopPropagation(); - this.clickOnPropertyRow.emit(property); - } - - - expandChildById = (id: string) => { - this.expandedChildId = id; - this.expandChild.emit(id); - } - - checkedChange = (propName: string) => { - this.checkProperty.emit(propName); - } - - getHasChildren = (property:DerivedFEProperty): boolean => {// enter to this function only from base property (PropertyFEModel) and check for child property if it has children - return _.filter((this.property).flattenedChildren,(prop:DerivedFEProperty)=>{ - return _.startsWith(prop.propertiesName + '#', property.propertiesName); - }).length > 1; - } - - createNewChildProperty = (): void => { - - let newProps: Array = this.propertiesUtils.createListOrMapChildren(this.property, "", undefined); - if (this.property instanceof PropertyFEModel) { - this.addChildProps(newProps, this.property.name); - } else { - this.addChildPropsToParent.emit(newProps); - } - } - - addChildProps = (newProps: Array, childPropName: string) => { - - if (this.property instanceof PropertyFEModel) { - let insertIndex: number = this.property.getIndexOfChild(childPropName) + this.property.getCountOfChildren(childPropName); //insert after parent prop and existing children - this.property.flattenedChildren.splice(insertIndex, 0, ...newProps); //using ES6 spread operator - this.expandChildById(newProps[0].propertiesName); - - - if(!newProps[0].schema.property.isSimpleType){ - if ( newProps[0].mapKey ) {//prevent update the new item value on parent property valueObj and saving on BE if it is map item, it will be updated and saved only after user enter key (when it is list item- the map key is the es type) - this.updateMapKeyValueOnMainParent(newProps); - if (this.property.getParentNamesArray(newProps[0].propertiesName, []).indexOf('') === -1) { - this.valueChanged.emit(this.property.name); - } - } - } - } - } - - updateMapKeyValueOnMainParent(childrenProps: Array){ - if (this.property instanceof PropertyFEModel) { - //Update only if all this property parents has key name - if (this.property.getParentNamesArray(childrenProps[0].propertiesName, []).indexOf('') === -1){ - angular.forEach(childrenProps, (prop:DerivedFEProperty):void => { //Update parent PropertyFEModel with value for each child, including nested props - (this.property).childPropUpdated(prop); - },this); - //grab the cumulative value for the new item from parent PropertyFEModel and assign that value to DerivedFEProp[0] (which is the list or map parent with UUID of the set we just added) - let parentNames = (this.property).getParentNamesArray(childrenProps[0].propertiesName, []); - childrenProps[0].valueObj = _.get(this.property.valueObj, parentNames.join('.')); - } - } - } - - childValueChanged = (property: DerivedFEProperty) => { //value of child property changed - - if (this.property instanceof PropertyFEModel) { // will always be the case - if (this.property.getParentNamesArray(property.propertiesName, []).indexOf('') === -1) {//If one of the parents is empty key -don't save - this.property.childPropUpdated(property); - this.dataTypeService.checkForCustomBehavior(this.property); - this.valueChanged.emit(this.property.name); - } - } - } - - deleteListOrMapItem = (item: DerivedFEProperty) => { - if (this.property instanceof PropertyFEModel) { - this.removeValueFromParent(item); - this.property.flattenedChildren.splice(this.property.getIndexOfChild(item.propertiesName), this.property.getCountOfChildren(item.propertiesName)); - this.expandChildById(item.propertiesName); - } - } - - removeValueFromParent = (item: DerivedFEProperty, target?: any) => { - if (this.property instanceof PropertyFEModel) { - let itemParent = (item.parentName == this.property.name) ? this.property : this.property.flattenedChildren.find(prop => prop.propertiesName == item.parentName); - - if (item.derivedDataType == DerivedPropertyType.MAP) { - let oldKey = item.mapKey; - if (target && typeof target.value == 'string') { //allow saving empty string - let replaceKey:string = target.value; - if (!replaceKey) {//prevent delete map key - return; - } - if(Object.keys(itemParent.valueObj).indexOf(replaceKey) > -1){//the key is exists - target.setCustomValidity('This key is already exists.'); - return; - }else { - target.setCustomValidity(''); - _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]); - item.mapKey = replaceKey; - //If the map key was empty its valueObj was not updated on its prent property valueObj, and now we should update it. - if(!oldKey && !item.schema.property.isSimpleType){ - //Search this map item children and update these value on parent property valueOBj - let mapKeyFlattenChildren:Array = _.filter(this.property.flattenedChildren, (prop:DerivedFEProperty) => { - return _.startsWith(prop.propertiesName, item.propertiesName); - }); - this.updateMapKeyValueOnMainParent(mapKeyFlattenChildren); - } - } - } - delete itemParent.valueObj[oldKey]; - } else { - let itemIndex: number = this.property.flattenedChildren.filter(prop => prop.parentName == item.parentName).map(prop => prop.propertiesName).indexOf(item.propertiesName); - itemParent.valueObj.splice(itemIndex, 1); - } - if (item.mapKey) {//prevent going to BE if user tries to delete map item without key (it was not saved in BE) - if (itemParent instanceof PropertyFEModel) { //direct child - this.valueChanged.emit(this.property.name); - } else { //nested child - need to update parent prop by getting flattened name (recurse through parents and replace map/list keys, etc) - this.childValueChanged(itemParent); - } - } - } - } - - preventInsertItem = (property:DerivedFEProperty):boolean => { - if(property.type == PROPERTY_TYPES.MAP && Object.keys(property.valueObj).indexOf('') > -1 ){ - return true; - } - return false; - } - -} diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html deleted file mode 100644 index a9dc499e7d..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html +++ /dev/null @@ -1,63 +0,0 @@ -
- -
-
Property Name
-
Type
-
ES
-
Value
-
-
-
No data to display
- - -
{{feInstanceNamesMap[instanceId]}}
- -
- -
-
- -
- {{property.name}} -
-
- -
-
-
- {{property.type | contentAfterLastDot}} -
-
-
-
- {{property.schema.property.type | contentAfterLastDot}} -
-
-
- - - - -
-
- - - -
-
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less deleted file mode 100644 index 9ede84faff..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less +++ /dev/null @@ -1,166 +0,0 @@ -@import './../../../../assets/styles/variables.less'; -@import '../../../../assets/styles/sprite'; -@smaller-screen: ~"only screen and (max-width: 1580px)"; - -:host /deep/ input { width:100%;} - -.properties-table { - display:flex; - flex-direction:column; - flex: 1; - height:100%; - text-align:left; - - - .inner-cell-div{ - max-width: 100%; - text-overflow: ellipsis; - overflow: hidden; - height: 20px; - } - - .table-header { - display: flex; - flex-direction:row; - flex: 0 0 auto; - font-weight:bold; - border-top: #d2d2d2 solid 1px; - background-color: #f2f2f2; - - .table-cell { - color:#191919; - font-size:13px; - } - } - - .table-rows-header { - border: #d2d2d2 solid 1px; - border-top:none; - } - - .table-body { - display:flex; - flex-direction: column; - overflow-y:auto; - flex: 1; - - .no-data { - border: #d2d2d2 solid 1px; - border-top:none; - text-align: center; - height: 100%; - padding: 20px; - } - /deep/.selected{ - background-color: #e6f6fb; - color: #009fdb; - } - .table-row { - display: flex; - flex-direction:row; - flex: 0 0 auto; - - &:hover:not(.selected){ - background-color:#f8f8f8; cursor:pointer; - } - - .selected-row { - background-color:#e6f6fb; - } - - .table-cell.valueCol { - padding:0px; - - } - } - } - .table-cell { - font-size:13px; - flex:1; - border: #d2d2d2 solid 1px; - border-right:none; - border-top:none; - padding:10px; - text-overflow: ellipsis; - white-space: nowrap; - overflow:hidden; - display: flex; - min-height:40px; - - &:last-child { - border-right:#d2d2d2 solid 1px; - } - &.col1 { - flex: 1 0 210px; - max-width:300px; - display: flex; - justify-content: space-between; - @media @smaller-screen { flex: 0 0 25%;} - - .property-name { - flex: 1; - display: flex; - max-width: 90%; - } - - .property-description-icon { - float: right; - margin-top: 4px; - margin-left: 5px; - flex: 0 0 auto; - } - } - &.col2 { - flex: 0 0 150px; - max-width:150px; - @media @smaller-screen { flex: 0 0 20%;} - } - - &.col3 { - flex:0 0 120px; - max-width:120px; - @media @smaller-screen { flex: 0 0 15%;} - } - - &.valueCol { - flex: 2 0 300px; - display: flex; - @media @smaller-screen { flex: 1 0 40%;} - } - - - /deep/ .checkbox-container { - margin-right: 10px; - } - - /deep/ &.round-checkbox { - .checkbox-container input[type=checkbox].checkbox-hidden { - &:checked ~ .checkbox-icon::before { - .sprite-new; - .round-checked-icon; - } - &[disabled] ~ .checkbox-icon::before { - .sprite-new; - .round-checked-icon.disabled; - background-color:inherit; - border:none; - //animation: addDisabledCheck 4s linear; - } - } - } - } - - .filtered { - /deep/ .checkbox-label-content{ - background-color: yellow; - } - } - - dynamic-property { - width:100%; - &:last-child /deep/ .dynamic-property-row { - border-bottom:none; - } - } - -} diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts deleted file mode 100644 index afb7189348..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts +++ /dev/null @@ -1,92 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, Input, Output, EventEmitter, SimpleChanges, ViewChild, ElementRef } from "@angular/core"; -import {PropertyFEModel, DerivedFEProperty, DerivedPropertyType, InstanceFePropertiesMap} from "app/models"; -import {PropertiesService} from "../../services/properties.service"; -import { DynamicElementComponent } from 'app/ng2/components/dynamic-element/dynamic-element.component'; -import { KeysPipe } from 'app/ng2/pipes/keys.pipe'; - -@Component({ - selector: 'properties-table', - templateUrl: './properties-table.component.html', - styleUrls: ['./properties-table.component.less'] -}) -export class PropertiesTableComponent { - - @Input() fePropertiesMap: InstanceFePropertiesMap; - @Input() feInstanceNamesMap: Map; - @Input() selectedPropertyId: string; - @Input() displayDeleteButton: boolean; - @Input() propertyNameSearchText:string; - @Input() searchTerm:string; - @Input() readonly:boolean; - @Input() isLoading:boolean; - - @Output() valueChanged: EventEmitter = new EventEmitter(); - @Output() selectPropertyRow: EventEmitter = new EventEmitter(); - @Output() updateCheckedPropertyCount: EventEmitter = new EventEmitter(); - //@Output() selectInstanceRow: EventEmitter = new EventEmitter(); - - - constructor ( private propertiesService:PropertiesService ){ - } - - - propValueChanged = (property) => { - !property.isDeclared && this.valueChanged.emit(property); - }; - - // Click on main row (row of propertyFEModel) - onClickPropertyRow = (property:PropertyFEModel, instanceName:string, event?) => { - //event && event.stopPropagation(); - this.selectedPropertyId = property.name; - let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName); - this.selectPropertyRow.emit(propertyRowSelectedEvent); - }; - - // Click on inner row (row of DerivedFEProperty) - onClickPropertyInnerRow = (property:DerivedFEProperty, instanceName:string) => { - let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName); - this.selectPropertyRow.emit(propertyRowSelectedEvent); - } - - propertyChecked = (prop: PropertyFEModel, childPropName?: string) => { - let isChecked: boolean = (!childPropName)? prop.isSelected : prop.flattenedChildren.find(prop => prop.propertiesName == childPropName).isSelected; - - if (!isChecked) { - this.propertiesService.undoDisableRelatedProperties(prop, childPropName); - } else { - this.propertiesService.disableRelatedProperties(prop, childPropName); - } - this.updateCheckedPropertyCount.emit(isChecked); - } - -} - -export class PropertyRowSelectedEvent { - propertyModel:PropertyFEModel | DerivedFEProperty; - instanceName:string; - constructor ( propertyModel:PropertyFEModel | DerivedFEProperty, instanceName:string ){ - this.propertyModel = propertyModel; - this.instanceName = instanceName; - } -} - diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html deleted file mode 100644 index 1fbf45e39f..0000000000 --- a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html +++ /dev/null @@ -1,12 +0,0 @@ - diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less deleted file mode 100644 index 1ff496f840..0000000000 --- a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less +++ /dev/null @@ -1,11 +0,0 @@ -.tooltip-inner { - word-wrap: break-word; - max-width: 300px; -} - -.tooltip.bottom .tooltip-arrow { - border-bottom-color: #000 !important; -} - - - diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts deleted file mode 100644 index 4dcb64c499..0000000000 --- a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts +++ /dev/null @@ -1,215 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, AfterViewInit, Input, ElementRef, ChangeDetectorRef} from "@angular/core"; - -@Component -({ - selector: "tooltip-content", - templateUrl: "./tooltip-content.component.html", - styleUrls: ["./tooltip-content.component.less"] -}) - -export class TooltipContentComponent implements AfterViewInit { - - // ------------------------------------------------------------------------- - // Inputs / Outputs - // ------------------------------------------------------------------------- - - @Input() hostElement: HTMLElement; - @Input() content: string; - @Input() placement: "top"|"bottom"|"left"|"right" = "bottom"; - @Input() animation: boolean = true; - - // ------------------------------------------------------------------------- - // Properties - // ------------------------------------------------------------------------- - - top: number = -100000; - left: number = -100000; - isIn: boolean = false; - isFade: boolean = false; - - // ------------------------------------------------------------------------- - // Constructor - // ------------------------------------------------------------------------- - - constructor(private element: ElementRef, - private cdr: ChangeDetectorRef) { - } - - // ------------------------------------------------------------------------- - // Lifecycle callbacks - // ------------------------------------------------------------------------- - - ngAfterViewInit(): void { - this.show(); - this.cdr.detectChanges(); - } - - // ------------------------------------------------------------------------- - // Public Methods - // ------------------------------------------------------------------------- - - show(): void { - if(!this.hostElement) { - return; - } - - const position = this.positionElement(this.hostElement, this.element.nativeElement.children[0], this.placement); - this.top = position.top; - this.left = position.left; - this.isIn = true; - if (this.animation) { - this.isFade = true; - } - } - - hide(): void { - this.top = -100000; - this.left = -100000; - this.isIn = true; - if(this.animation) { - this.isFade = false; - } - } - - // ------------------------------------------------------------------------- - // Private Methods - // ------------------------------------------------------------------------- - - private positionElement(hostElem: HTMLElement, targetElem: HTMLElement, positionStr: string, appendToBody: boolean = false): {top: number, left: number} { - let positionStrParts = positionStr.split("-"); - let pos0 = positionStrParts[0]; - let pos1 = positionStrParts[1] || "center"; - let hostElemPosition = appendToBody ? this.offset(hostElem) : this.position(hostElem); - let targetElemWidth = targetElem.offsetWidth; - let targetElemHeight = targetElem.offsetHeight; - let shiftWidth: any = { - center(): number { - return hostElemPosition.left + hostElemPosition.width / 2 - targetElemWidth / 2; - }, - left(): number { - return hostElemPosition.left; - }, - right(): number { - return hostElemPosition.left + hostElemPosition.width; - } - }; - - let shiftHeight: any = { - center: function (): number { - return hostElemPosition.top + hostElemPosition.height / 2 - targetElemHeight / 2; - }, - top: function (): number { - return hostElemPosition.top; - }, - bottom: function (): number { - return hostElemPosition.top + hostElemPosition.height; - } - } - - let targetElemPosition: {top: number, left: number}; - - switch (pos0) { - case "right": - targetElemPosition = { - top: shiftHeight[pos1](), - left: shiftWidth[pos0]() - }; - break; - - case "left": - targetElemPosition = { - top: shiftHeight[pos1](), - left: hostElemPosition.left - targetElemWidth - }; - break; - - case "bottom": - targetElemPosition = { - top: shiftHeight[pos0](), - left: shiftWidth[pos1]() - }; - break; - - default: - targetElemPosition = { - top: hostElemPosition.top - targetElemHeight, - left: shiftWidth[pos1]() - }; - break; - } - - return targetElemPosition; - } - - - private position(nativeElem: HTMLElement): {width: number, height: number, top: number, left: number} { - let offsetParentCBR = {top: 0, left: 0}; - const elemBCR = this.offset(nativeElem); - const offsetParentElem = this.parentOffsetElem(nativeElem); - if(offsetParentElem !== window.document) { - offsetParentCBR = this.offset(offsetParentElem); - offsetParentCBR.top += offsetParentElem.clientTop - offsetParentElem.scrollTop; - offsetParentCBR.left += offsetParentElem.clientLeft - offsetParentElem.scrollTop; - } - - const boundingClientRect = nativeElem.getBoundingClientRect(); - - return { - width: boundingClientRect.width || nativeElem.offsetWidth, - height: boundingClientRect.height || nativeElem.offsetHeight, - top: elemBCR.top - offsetParentCBR.top, - left: elemBCR.left - offsetParentCBR.left - }; - } - - private offset(nativeElem:any): {width: number, height: number, top: number, left: number} { - const boundingClientRect = nativeElem.getBoundingClientRect(); - return { - width: boundingClientRect.width || nativeElem.offsetWidth, - height: boundingClientRect.height || nativeElem.offsetHeight, - top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop), - left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft) - }; - } - - private getStyle(nativeElem: HTMLElement, cssProperty: string): string { - if(window.getComputedStyle) { - return (window.getComputedStyle(nativeElem) as any)[cssProperty]; - } - - return (nativeElem.style as any)[cssProperty]; - } - - private isStaticPositioned(nativeElem: HTMLElement): boolean { - return (this.getStyle(nativeElem, "position") || "static") === "static"; - } - - private parentOffsetElem(nativeElem: HTMLElement): any { - let offsetParent: any = nativeElem.offsetParent || window.document; - while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) { - offsetParent = offsetParent.offsetParent; - } - - return offsetParent || window.document; - } -} diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts deleted file mode 100644 index 79d35c6e0e..0000000000 --- a/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts +++ /dev/null @@ -1,109 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { - Directive, ComponentRef, ViewContainerRef, ComponentFactoryResolver, Input, HostListener -} from "@angular/core"; -import {TooltipContentComponent} from "./tooltip-content.component"; - -@Directive ({ - selector: "[tooltip]" -}) -export class TooltipComponent { - - // ------------------------------------------------------------------------- - // Properties - // ------------------------------------------------------------------------- - - private tooltip: ComponentRef; - private visible: boolean; - private delayInProgress: boolean = false; - - // ------------------------------------------------------------------------- - // Constructor - // ------------------------------------------------------------------------- - - constructor(private viewContainerRef: ViewContainerRef, - private resolver: ComponentFactoryResolver) { - } - - // ------------------------------------------------------------------------- - // Inputs / Outputs - // ------------------------------------------------------------------------- - - @Input("tooltip") content: string|TooltipContentComponent; - @Input() tooltipDisabled: boolean; - @Input() tooltipAnimation: boolean = true; - @Input() tooltipPlacement: "top"|"bottom"|"left"|"right" = "bottom"; - @Input() tooltipDelay: number = 1500; - - // ------------------------------------------------------------------------- - // Public Methods - // ------------------------------------------------------------------------- - - @HostListener("mouseenter") - show(): void { - if(this.tooltipDisabled || this.visible || this.content === "") { - return; - } - if (this.tooltipDelay && !this.delayInProgress) { - this.delayInProgress = true; - setTimeout(() => { this.delayInProgress && this.show() }, this.tooltipDelay); - return; - } - - this.visible = true; - if (typeof this.content === "string") { - const factory = this.resolver.resolveComponentFactory(TooltipContentComponent); - if (!this.visible) { - return; - } - - this.tooltip = this.viewContainerRef.createComponent(factory); - this.tooltip.instance.hostElement = this.viewContainerRef.element.nativeElement; - this.tooltip.instance.content = this.content as string; - this.tooltip.instance.placement = this.tooltipPlacement; - this.tooltip.instance.animation = this.tooltipAnimation; - } else { - const tooltip = this.content as TooltipContentComponent; - tooltip.hostElement = this.viewContainerRef.element.nativeElement; - tooltip.placement = this.tooltipPlacement; - tooltip.animation = this.tooltipAnimation; - tooltip.show(); - } - } - - @HostListener("mouseleave") - hide(): void { - this.delayInProgress = false; - if (!this.visible) { - return; - } - - this.visible = false; - if (this.tooltip) { - this.tooltip.destroy(); - } - if (this.content instanceof TooltipContentComponent) { - (this.content as TooltipContentComponent).hide(); - } - } -} - diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts deleted file mode 100644 index 84a3987081..0000000000 --- a/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts +++ /dev/null @@ -1,45 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {NgModule} from "@angular/core"; -import {TooltipContentComponent} from "./tooltip-content.component"; -import {TooltipComponent} from "./tooltip.component"; -import {CommonModule} from "@angular/common"; - -@NgModule({ - declarations: [ - TooltipComponent, - TooltipContentComponent, - ], - imports: [ - CommonModule - ], - exports: [ - TooltipComponent, - TooltipContentComponent, - ], - entryComponents: [ - TooltipContentComponent - ], - providers: [] -}) -export class TooltipModule { - -} diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less new file mode 100644 index 0000000000..e219d49aa4 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less @@ -0,0 +1,3 @@ +dynamic-element { + +} diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts new file mode 100644 index 0000000000..53d1590b1c --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts @@ -0,0 +1,140 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Compiler, EventEmitter, ViewContainerRef, ViewChild, Input, Output, ElementRef, ComponentRef, ComponentFactoryResolver } from '@angular/core' +import {ValidationConfiguration} from "app/models"; +import {UiElementInputComponent} from "../form-components/input/ui-element-input.component"; +import {UiElementPopoverInputComponent} from "../form-components/popover-input/ui-element-popover-input.component"; +import {UiElementIntegerInputComponent} from "../form-components/integer-input/ui-element-integer-input.component"; +import {UiElementDropDownComponent, DropdownValue} from "../form-components/dropdown/ui-element-dropdown.component"; +import {PROPERTY_DATA} from "../../../../utils/constants"; + +@Component({ + selector: 'dynamic-element', + template: `
`, + styleUrls: ['./dynamic-element.component.less'], + entryComponents: [ + UiElementInputComponent, + UiElementDropDownComponent, + UiElementPopoverInputComponent, + UiElementIntegerInputComponent + ] +}) +export class DynamicElementComponent { + + @ViewChild('target', { read: ViewContainerRef }) target: any; + @Input() type: any; + @Input() name: string; + @Input() readonly:boolean; + @Input() path:string;//optional param. used only for for subnetpoolid type + value:any; + + // Two way binding for value (need to write the "Change" word like this) + @Output('valueChange') emitter: EventEmitter = new EventEmitter(); + @Input('value') set setValueValue(value) { + this.value = value; + } + + cmpRef: ComponentRef; + private isViewInitialized: boolean = false; + validation = ValidationConfiguration.validation; + + constructor( + private componentFactoryResolver: ComponentFactoryResolver, + private compiler: Compiler, + private el: ElementRef) { + } + + updateComponent() { + if (!this.isViewInitialized) { + return; + } + if (this.cmpRef) { + this.cmpRef.destroy(); + } + + // Factory to create component based on type or peroperty name. + switch(true) { + case this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1: + if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name + let pathArray = this.path.split("#"); + this.name = pathArray[pathArray.length - 2]; + } + this.createComponent(UiElementPopoverInputComponent); + break; + case this.type == 'integer': + this.createComponent(UiElementIntegerInputComponent); + this.cmpRef.instance.pattern = this.validation.validationPatterns.integer; + break; + case PROPERTY_DATA.SCALAR_TYPES.indexOf(this.type) > -1: + case this.type == 'string': + this.createComponent(UiElementInputComponent); + break; + case this.type == 'boolean': + + this.createComponent(UiElementDropDownComponent); + + // Build drop down values + let tmp = []; + tmp.push(new DropdownValue(true,'TRUE')); + tmp.push(new DropdownValue(false,'FALSE')); + this.cmpRef.instance.values = tmp; + break; + default: + this.createComponent(UiElementInputComponent); + console.log("ERROR: No ui component to handle type: " + this.type); + } + + // Additional attributes in base element class + if (this.cmpRef) { + this.cmpRef.instance.name = this.name; + this.cmpRef.instance.type = this.type; + this.cmpRef.instance.value = this.value; + this.cmpRef.instance.readonly = this.readonly; + } + + // Subscribe to change event of of ui-element-basic and fire event to change the value + this.cmpRef.instance.baseEmitter.subscribe((value):void => { + this.emitter.emit(value) + }); + + } + + createComponent(ComponentToCreate:any):void { + let factory = this.componentFactoryResolver.resolveComponentFactory(ComponentToCreate); + this.cmpRef = this.target.createComponent(factory); + } + + ngOnChanges() { + this.updateComponent(); + } + + ngAfterContentInit() { + this.isViewInitialized = true; + this.updateComponent(); + } + + ngOnDestroy() { + if (this.cmpRef) { + this.cmpRef.destroy(); + } + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts new file mode 100644 index 0000000000..50b22505a9 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts @@ -0,0 +1,43 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { NgModule } from "@angular/core"; +import {PopoverModule} from "../popover/popover.module"; +import {TooltipModule} from "../tooltip/tooltip.module"; +import {DynamicElementComponent} from "./dynamic-element.component"; +import {FormElementsModule} from "../form-components/form-elements.module"; + +@NgModule({ + declarations: [ + DynamicElementComponent, + ], + imports: [ + PopoverModule, + TooltipModule, + FormElementsModule + ], + exports: [ + DynamicElementComponent + ], + providers: [] +}) +export class DynamicElementModule { + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.html new file mode 100644 index 0000000000..872bf90329 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.html @@ -0,0 +1,8 @@ +
+
+ +
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less new file mode 100644 index 0000000000..9df2680b6f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less @@ -0,0 +1,67 @@ + @import '../../../../../../assets/styles/tlv-sprite'; +@import '../../../../../../assets/styles/sprite'; + + +.checkbox-container { + display:inline-block; + position:relative; + text-align: left; + height: 20px; + + + .checkbox-icon { + display: inline-block; + } + + .checkbox-label { + font-weight: inherit; + font-size: inherit; + } + + .checkbox-label-content { + margin-left:2px; + } + + .checkbox-icon::before { + .tlv-sprite; + background-position: -10px -60px; + width: 14px; + height: 14px; + content: ''; + display: inline-block; + margin-right: 0px; + margin-top: -2px; + vertical-align: middle; + } + + input[type=checkbox].checkbox-hidden { + width:0; + height:0; + display:none; + &:checked ~ .checkbox-icon::before{ + .sprite-new; + .filled-checkbox-icon + } + &[disabled] ~ .checkbox-icon::before { + /* TODO: add disabled styles here */ + background-image: none; + background-color: #EFEFEF; + border-radius: 2px; + border: solid #CCC 1px; + } + } + + .checkbox-animation { + background-color: #009fdb; + position: absolute; + left: 2px; + top: 4px; + width:10px; + height:10px; + border-radius: 50%; + z-index: 1; + pointer-events: none; + opacity:0; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts new file mode 100644 index 0000000000..c8da016174 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts @@ -0,0 +1,50 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; +//import { trigger, state, style, transition, animate, keyframes } from '@angular/core'; + +@Component({ + selector: 'checkbox', + templateUrl: './checkbox.component.html', + styleUrls: ['./checkbox.component.less'], + encapsulation: ViewEncapsulation.None + // animations: [ + // trigger('checkEffect', [ + // state('true', style({ position: 'absolute', left: '2px', top: '5px', width: '10px', height: '10px', display: 'none', opacity: '.5' })), + // state('false', style({ left: '-18px', top: '-15px', height: '50px', width: '50px', opacity: '0' })), + // transition('1 => 0', animate('150ms ease-out')), + // transition('0 => 1', animate('150ms ease-in')) + // ]) + // ] +}) +export class CheckboxComponent { + + @Input() checkboxStyle: string; + @Input() label: string; + @Input() checked: boolean; + @Input() disabled: boolean; + @Output() checkedChange: EventEmitter = new EventEmitter(); + + toggleState(newValue:boolean) { + this.checkedChange.emit(newValue); + } +} + diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.module.ts b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.module.ts new file mode 100644 index 0000000000..4ac7f2d7cd --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.module.ts @@ -0,0 +1,48 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; +import { CheckboxComponent } from './checkbox.component'; + + +@NgModule({ + imports: [CommonModule, BrowserModule, FormsModule], + declarations: [CheckboxComponent], + bootstrap: [], + exports: [CheckboxComponent] +}) +export class CheckboxModule { } + +/** README: **/ + +/** USAGE Example: + *In page.module.ts: import CheckboxModule + *In HTML: + * + */ + +/**STYLING: (ViewEncapsulation is set to None to allow styles to be overridden or customized) + * + * To create or override styles: + * Use /deep/ or >>> prefix to override styles via other components stylesheets + */ diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html new file mode 100644 index 0000000000..c6b8384183 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html @@ -0,0 +1,3 @@ + diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less new file mode 100644 index 0000000000..ea3e35140e --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less @@ -0,0 +1,11 @@ +@import '../../../../../../assets/styles/variables'; + +/deep/ ui-element-dropdown { + + select { + text-indent: 6px; + border: solid 1px @main_color_o; + width: 100%; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts new file mode 100644 index 0000000000..5abf32c61b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts @@ -0,0 +1,51 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, EventEmitter, Output, Input} from '@angular/core' +import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; + +export class DropdownValue { + value:any; + label:string; + + constructor(value:any,label:string) { + this.value = value; + this.label = label; + } +} + +@Component({ + selector: 'ui-element-dropdown', + templateUrl: './ui-element-dropdown.component.html', + styleUrls: ['./ui-element-dropdown.component.less'], +}) +export class UiElementDropDownComponent extends UiElementBase implements UiElementBaseInterface { + @Input() + values: DropdownValue[]|string[]; + + constructor() { + super(); + } + + onSave() { + this.baseEmitter.emit(this.value); + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts new file mode 100644 index 0000000000..e5bdf1f557 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts @@ -0,0 +1,42 @@ +/** + * Created by rc2122 on 9/5/2017. + */ +import {NgModule} from "@angular/core"; +import {BrowserModule} from "@angular/platform-browser"; +import {FormsModule, ReactiveFormsModule} from "@angular/forms"; +import {UiElementPopoverInputComponent} from "./popover-input/ui-element-popover-input.component"; +import {UiElementIntegerInputComponent} from "./integer-input/ui-element-integer-input.component"; +import {UiElementInputComponent} from "./input/ui-element-input.component"; +import {UiElementDropDownComponent} from "./dropdown/ui-element-dropdown.component"; +import {UiElementBase} from "./ui-element-base.component"; +import {CheckboxModule} from "./checkbox/checkbox.module"; +import {RadioButtonComponent} from "./radio-buttons/radio-buttons.component"; +import {PopoverModule} from "../popover/popover.module"; +import {TooltipModule} from "../tooltip/tooltip.module"; + + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + PopoverModule, + ReactiveFormsModule, + TooltipModule, + CheckboxModule], + + declarations: [UiElementDropDownComponent, + UiElementInputComponent, + UiElementIntegerInputComponent, + UiElementPopoverInputComponent, + UiElementBase, + RadioButtonComponent], + + exports: [UiElementDropDownComponent, + UiElementInputComponent, + UiElementIntegerInputComponent, + UiElementPopoverInputComponent, + RadioButtonComponent, + TooltipModule, + CheckboxModule] +}) +export class FormElementsModule { } \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html new file mode 100644 index 0000000000..b7d7c859c7 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html @@ -0,0 +1,14 @@ + diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less new file mode 100644 index 0000000000..d320c7ff8b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less @@ -0,0 +1,17 @@ +@import '../../../../../../assets/styles/variables'; + +/deep/ ui-element-input { + + input { + text-indent: 6px; + border: solid 1px @main_color_o; + } + + .error { + border: solid 1px @func_color_q; + color: @func_color_q; + outline: none; + box-sizing: border-box; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts new file mode 100644 index 0000000000..fb3b3db859 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts @@ -0,0 +1,41 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, ViewChild, ElementRef, ContentChildren, Input} from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser' +import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; + +@Component({ + selector: 'ui-element-input', + templateUrl: './ui-element-input.component.html', + styleUrls: ['./ui-element-input.component.less'], +}) +export class UiElementInputComponent extends UiElementBase implements UiElementBaseInterface { + constructor() { + super(); + this.pattern = this.validation.validationPatterns.comment; + } + + onSave() { + if (!this.control.invalid){ + this.baseEmitter.emit(this.value); + } + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html new file mode 100644 index 0000000000..9fbc9e1094 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html @@ -0,0 +1,14 @@ + diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less new file mode 100644 index 0000000000..8073c3858e --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less @@ -0,0 +1,17 @@ +@import '../../../../../../assets/styles/variables'; + +/deep/ ui-element-integer-input { + + input { + text-indent: 6px; + border: solid 1px @main_color_o; + } + + .error { + border: solid 1px @func_color_q; + color: @func_color_q; + outline: none; + box-sizing: border-box; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts new file mode 100644 index 0000000000..1667f4393d --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts @@ -0,0 +1,41 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, ViewChild, ElementRef, ContentChildren, Input} from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser' +import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; + +@Component({ + selector: 'ui-element-integer-input', + templateUrl: './ui-element-integer-input.component.html', + styleUrls: ['./ui-element-integer-input.component.less'], +}) +export class UiElementIntegerInputComponent extends UiElementBase implements UiElementBaseInterface { + constructor() { + super(); + //this.pattern = this.validation.validationPatterns.comment; + } + + onSave() { + if (!this.control.invalid){ + this.baseEmitter.emit(this.value ? JSON.parse(this.value) : this.value); + } + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html new file mode 100644 index 0000000000..3bd51b4e36 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html @@ -0,0 +1,26 @@ +
+ + +
+ + +
+ +
+ diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less new file mode 100644 index 0000000000..5be443f7b6 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less @@ -0,0 +1,36 @@ +@import '../../../../../../assets/styles/variables'; + +.popover-input-wrapper { + display: flex; +} + +/deep/ ui-element-popover-input { + + .popover { + max-width: 350px; + width: 350px; + } + + .edit-subnet-wrapper { + padding: 12px; + + .subnet-value { + width: 100%; + resize: none; + } + } + + input { + padding-right: 6px; + padding-left: 6px; + border: solid 1px @main_color_o; + } + + .error { + border: solid 1px @func_color_q; + color: @func_color_q; + outline: none; + box-sizing: border-box; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts new file mode 100644 index 0000000000..61688df3f0 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts @@ -0,0 +1,57 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, ViewChild, ElementRef, Input} from '@angular/core'; +import {ButtonsModelMap, ButtonModel} from "app/models"; +import {PopoverContentComponent} from "../../popover/popover-content.component"; +import {UiElementBase, UiElementBaseInterface} from "../ui-element-base.component"; + +@Component({ + selector: 'ui-element-popover-input', + templateUrl: './ui-element-popover-input.component.html', + styleUrls: ['./ui-element-popover-input.component.less'] +}) +export class UiElementPopoverInputComponent extends UiElementBase implements UiElementBaseInterface { + @ViewChild('textArea') textArea: ElementRef; + @ViewChild('popoverForm') popoverContentComponent: PopoverContentComponent; + + saveButton: ButtonModel; + buttonsArray: ButtonsModelMap; + + onSave = ():void => { + if (!this.control.invalid){ + this.baseEmitter.emit(this.value); + this.popoverContentComponent.hide(); + } + } + + constructor() { + super(); + // Create Save button and insert to buttons map + this.saveButton = new ButtonModel('save', 'blue', this.onSave); + this.buttonsArray = { 'test': this.saveButton }; + + // Define the regex pattern for this controller + this.pattern = this.validation.validationPatterns.comment; + + // Disable / Enable button according to validation + //this.control.valueChanges.subscribe(data => this.saveButton.disabled = this.control.invalid); + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-button.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-button.component.less new file mode 100644 index 0000000000..b929486b10 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-button.component.less @@ -0,0 +1,42 @@ +@import './../../../../../../assets/styles/variables.less'; +.radio-buttons-container{ + display: flex; + &.vertical{ + flex-direction: column; + } + &.horizontal{ + flex-direction: row; + } +} +.radio-button { + margin: 0 10px 10px 0; + display: flex; +} + +input[type=radio] { + width:0; + height:0; + display:none; + &[disabled] ~ .radio-button { + + } +} + +.shown-radio-button{ + border: @main_color_n solid 1px; + height: 14px; + width: 14px; + border-radius: 50%; + padding: 1px; + margin: auto 5px; + .selected{ + background-color: @main_color_a; + height: 100%; + width: 100%; + border-radius: 50%; + } +} +span{ + margin: auto 0; + color: @func_color_s; +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.html new file mode 100644 index 0000000000..6c927301db --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.html @@ -0,0 +1,8 @@ +
+
+ +
+ {{option.key}} +
+
+ diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts new file mode 100644 index 0000000000..0f80e2ad44 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts @@ -0,0 +1,29 @@ +/** + * Created by rc2122 on 9/4/2017. + */ +import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; +import { RadioButtonModel } from 'app/models' +import {UiElementBaseInterface, UiElementBase} from "../ui-element-base.component"; + +@Component({ + selector: 'radio-buttons', + templateUrl: './radio-buttons.component.html', + styleUrls: ['./radio-button.component.less'] +}) +export class RadioButtonComponent extends UiElementBase implements UiElementBaseInterface { + + onSave() { + this.baseEmitter.emit(this.value); + } + + @Input() options:Array; + @Input() readonly:boolean; + @Input() direction:string = 'vertical'; //get 'horizontal' | 'vertical' + value:any; + + select(value:any) { + this.value = value; + this.baseEmitter.emit(this.value); + } +} + diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts new file mode 100644 index 0000000000..ae2013ff70 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts @@ -0,0 +1,55 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, EventEmitter, Input, Output } from '@angular/core' +import { ValidationConfiguration } from "app/models"; +import { FormControl, Validators } from '@angular/forms'; + +export interface UiElementBaseInterface { + onSave(); +} + +@Component({ + template: ``, + styles: [] +}) +export class UiElementBase { + + protected validation = ValidationConfiguration.validation; + protected control: FormControl; + + // Two way binding for value (need to write the "Change" word like this) + @Output('valueChange') baseEmitter: EventEmitter = new EventEmitter(); + @Input('value') set setValueValue(value) { + this.value = value; + } + + @Input() name: string; + @Input() type: string; + @Input() value: any; + @Input() pattern: any; + @Input() readonly:boolean; + + constructor() { + //this.control = new FormControl('', [Validators.required]); + this.control = new FormControl('', []); + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html new file mode 100644 index 0000000000..a62aa114d9 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html @@ -0,0 +1,6 @@ +
+
+
+
+ diff --git a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.less b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.less new file mode 100644 index 0000000000..006c3bfa43 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.less @@ -0,0 +1,91 @@ +@import '../../../../../assets/styles/variables'; +.tlv-loader-back { + background-color: @main_color_p; + position: fixed; + top: 50px; + left: 0; + right: 0; + bottom: 0; + z-index: 9999; + opacity: 0.5; +} + +.tlv-loader-relative { position: absolute; top: 0;} + +.tlv-loader { + z-index: 10002; +} + +.loader-relative { + display: block; + position:absolute; + width: 100%; + height:100%; +} + +.loader-fixed { + display: block; + position:fixed; + top:0; + left:0; + width: 100%; + height:100%; +} + +@keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Firefox < 16 */ +@-moz-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Safari, Chrome and Opera > 12.1 */ +@-webkit-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Internet Explorer */ +@-ms-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Opera < 12.1 */ +@-o-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +@keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Firefox < 16 */ +@-moz-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Safari, Chrome and Opera > 12.1 */ +@-webkit-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Internet Explorer */ +@-ms-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Opera < 12.1 */ +@-o-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} diff --git a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts new file mode 100644 index 0000000000..f66aa551e2 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts @@ -0,0 +1,86 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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========================================================= + */ + +/** + * Created by rc2122 on 6/6/2017. + */ +import { Component, Input, ViewContainerRef, SimpleChanges} from "@angular/core"; +@Component({ + selector: 'loader', + templateUrl: './loader.component.html', + styleUrls: ['./loader.component.less'] +}) +export class LoaderComponent { + + @Input() display: boolean; + @Input() size: string;// small || medium || large + @Input() relative: boolean; // If is relative is set to true, loader will appear over parent element. Otherwise, will be fixed over the entire page. + @Input() loaderDelay: number; //optional - number of ms to delay loader display. + + private isVisible: boolean = false; + private offset : { + top: string; + left: string; + width: string; + height: string; + }; + + constructor(private viewContainerRef: ViewContainerRef) { + } + + ngOnInit() { + if (!this.size) { + this.size = 'large'; + } + if (this.display === true) { + this.changeLoaderDisplay(true); + } + } + + ngOnChanges(changes: SimpleChanges) { + if(changes.display){ + this.changeLoaderDisplay(this.display); + } + } + + private changeLoaderDisplay = (display: boolean): void => { + if (display) { + window.setTimeout((): void => { + this.display && this.showLoader(); //only show loader if this.display has not changed in the meanwhile. + }, this.loaderDelay || 0); + } else { + this.isVisible = false; + } + } + + private showLoader = () => { + if (this.relative === true) { + let parentElement = this.viewContainerRef.element.nativeElement.parentElement; + this.offset = { + left: (parentElement.offsetLeft) ? parentElement.offsetLeft + "px" : undefined, + top: (parentElement.offsetTop) ? parentElement.offsetTop + "px" : undefined, + width: (parentElement.offsetWidth) ? parentElement.offsetWidth + "px" : undefined, + height: (parentElement.offsetHeight) ? parentElement.offsetHeight + "px" : undefined + }; + } + this.isVisible = true; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.html b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.html new file mode 100644 index 0000000000..54640c9414 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.less b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.less new file mode 100644 index 0000000000..ceb4409144 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.less @@ -0,0 +1,13 @@ +@import "../../../../../assets/styles/variables"; + +.w-sdc-menu-item { + font-size: 14px; + line-height: 14px; + color: @main_color_m; + padding: 3px 6px; + + &:hover { + cursor: pointer; + background-color: @main_color_c; + } +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts new file mode 100644 index 0000000000..8b2006634e --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts @@ -0,0 +1,44 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'menu-item', + templateUrl: './menu-item.component.html', + styleUrls:['./menu-item.component.less'] +}) +export class MenuItemComponent { + @Input() action:Function; + @Input() styleClass:any; + + public parentMenu:any; + + constructor() { + } + + performAction() { + this.action(); + + if (this.parentMenu && typeof(this.parentMenu.close) === 'function') { + this.parentMenu.close(); + } + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.html b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.html new file mode 100644 index 0000000000..98c4d26fdd --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.html @@ -0,0 +1,9 @@ +
+ + + +
diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.less b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.less new file mode 100644 index 0000000000..1b45ea775c --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.less @@ -0,0 +1,13 @@ +.w-sdc-menu-list { + position: fixed; + z-index: 100; + + border-style: solid; + border-width: 1px; + border-color: #d8d8d8; + box-sizing: border-box; + background-color: #ffffff; + box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1); + width: 91px; + padding: 6px 0; +} diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts new file mode 100644 index 0000000000..290c8d06af --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts @@ -0,0 +1,70 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Input, ContentChildren, SimpleChanges, QueryList } from '@angular/core'; +import { MenuItemComponent } from "./menu-item.component"; +import { Point } from "app/models"; + +@Component({ + selector: 'menu-list', + templateUrl: './menu-list.component.html', + styleUrls:['./menu-list.component.less'] +}) +export class MenuListComponent { + @Input('open') inputOpen:boolean = false; + @Input('position') inputPosition:Point = new Point(); + @Input() styleClass:any; + + @ContentChildren(MenuItemComponent) menuItems:QueryList; + + private position:Point; + private isOpen:boolean = false; + + constructor() { + } + + ngOnChanges(changes:SimpleChanges) { + if (changes.inputOpen) { + (changes.inputOpen.currentValue) ? this.open() : this.close(); + } + if (changes.inputPosition) { + this.changePosition(changes.inputPosition.currentValue); + } + } + + ngAfterContentInit() { + this.menuItems.forEach((c) => c.parentMenu = this); + this.menuItems.changes.subscribe((list) => { + list.forEach((c) => c.parentMenu = this); + }); + } + + open(): void { + this.isOpen = true; + } + + close(): void { + this.isOpen = false; + } + + changePosition(position:Point) { + this.position = position; + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.module.ts b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.module.ts new file mode 100644 index 0000000000..fdbbf59f48 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.module.ts @@ -0,0 +1,27 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from '@angular/common'; +import { MenuListComponent } from "./menu-list.component"; +import { MenuItemComponent } from "./menu-item.component"; + +export { + MenuListComponent, + MenuItemComponent +}; + +@NgModule({ + declarations: [ + MenuListComponent, + MenuItemComponent + ], + imports: [CommonModule], + exports: [ + MenuListComponent, + MenuItemComponent + ], + entryComponents: [ //need to add anything that will be dynamically created + MenuListComponent, + MenuItemComponent + ] +}) +export class MenuListModule { +} diff --git a/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.html b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.html new file mode 100644 index 0000000000..433bd4fd6f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.html @@ -0,0 +1,5 @@ +
+
Error code: {{input.messageId}}
+
Status code: {{input.status}}
+
{{input.message}}
+
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.ts new file mode 100644 index 0000000000..c0d6673412 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.ts @@ -0,0 +1,38 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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========================================================= + */ + +/** + * Created by ngordon on 7/30/2017. + */ +import { Component, Input } from '@angular/core'; +import { ServerErrorResponse } from 'app/models'; + +@Component({ + selector: 'error-message', + templateUrl: './error-message.component.html' +}) + +export class ErrorMessageComponent { + @Input() input: ServerErrorResponse; + + constructor() { + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html new file mode 100644 index 0000000000..9a0fdf6bf4 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html @@ -0,0 +1,21 @@ +
+
+
+ {{ input.title }} + +
+
+
{{input.content}}
+
+
+ +
+ +
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less new file mode 100644 index 0000000000..fac1ae74a8 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less @@ -0,0 +1,129 @@ +@import '../../../../../assets/styles/variables'; +@import '../../../../../assets/styles/mixins'; +@import '../../../../../assets/styles/sprite-old'; +/deep/ modal { + display: none; +} + +.custom-modal { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 15007; + overflow: auto; + margin: auto; + display: flex; + align-items: center; + + .ng2-modal-content { + background: #fff; + width: 100%; + box-shadow: 0 5px 15px rgba(0,0,0,.5); + border-radius: 4px; + .ng2-modal-body{ + padding: 20px; + } + + .ng2-modal-header{ + .m_18_r; + font-weight: bold; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + height: 50px; + line-height: 50px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + text-align: left; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0px 20px; + + &.modal-type-standard { + border-bottom: solid 3px @main_color_a; + } + + &.modal-type-error { + border-bottom: solid 3px @func_color_q; + } + + &.modal-type-alert{ + border-bottom: solid 3px @main_color_h; + } + + .title{ + .s_18_r; + -webkit-box-flex: 999; + -ms-flex-positive: 999; + flex-grow: 999; + } + .close-button{ + .sprite; + .sprite.x-btn-black; + cursor: pointer; + } + } + + .ng2-modal-footer{ + background-color: @tlv_color_t; + padding: 17px 30px; + clear: both; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + border-radius: 4px; + button{ + margin: 0 12px 0 6px; + } + } + } +} + +.modal-background { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: #000; + opacity: 0.5; + z-index: 900; +} + + +.xl { + width: 1200px; +} + +.l { + width: 875px; +} + +.md { + width: 650px; +} + +.sm { + width: 552px; +} + +.xsm { + width: 432px; +} + +body.modal-open { + overflow: hidden; +} diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts new file mode 100644 index 0000000000..89db8d1140 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts @@ -0,0 +1,62 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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========================================================= + */ + +/** + * Created by rc2122 on 6/1/2017. + */ +import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core'; +import {ViewContainerRef, ViewChild} from '@angular/core'; +import * as $ from 'jquery'; +import { ButtonsModelMap, ModalModel } from 'app/models'; + +@Component({ + selector: 'modal', + templateUrl: './modal.component.html', + styleUrls:['modal.component.less'] +}) + +export class ModalComponent implements OnInit, OnDestroy { + @Input() input: ModalModel; + @Input() dynamicContent: any; + @ViewChild('dynamicContentContainer', { read: ViewContainerRef }) dynamicContentContainer: ViewContainerRef; //Allows for custom component as body instead of simple message. See ModalService.createActionModal for implementation details, and HttpService's catchError() for example. + private modalElement: JQuery; + + constructor( el: ElementRef ) { + this.modalElement = $(el.nativeElement); + } + + ngOnInit(): void { + this.modalElement.appendTo('body'); + } + + ngOnDestroy(): void { + this.modalElement.remove(); + } + + open(): void { + this.modalElement.show(); + $('body').addClass('modal-open'); + } + + close(): void { + this.modalElement.hide(); + $('body').removeClass('modal-open'); + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts b/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts new file mode 100644 index 0000000000..c38e60194b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from '@angular/common'; +import { ModalService } from 'app/ng2/services/modal.service'; +import { ErrorMessageComponent } from "./error-message/error-message.component"; +import {ModalComponent} from "./modal.component"; + +@NgModule({ + declarations: [ + ModalComponent, + ErrorMessageComponent + ], + imports: [CommonModule], + exports: [ModalComponent, ErrorMessageComponent], + entryComponents: [ //need to add anything that will be dynamically created + ModalComponent, + ErrorMessageComponent + ], + providers: [ModalService] +}) +export class ModalModule { + +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts new file mode 100644 index 0000000000..0c1669ec4b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts @@ -0,0 +1,10 @@ +/** + * Created by rc2122 on 9/27/2017. + */ +import {Component, Input} from "@angular/core"; +@Component({ +}) +export class WizardHeaderBaseComponent { + + @Input() currentStepIndex:number; +} diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html new file mode 100644 index 0000000000..9884b233ac --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html @@ -0,0 +1,57 @@ +
+
+
+ {{ input.title }} + +
+
+
+
+
+
+
{{step.title}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ + + +
+ +
+
+
+
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less new file mode 100644 index 0000000000..3a2168aeb0 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less @@ -0,0 +1,90 @@ +@import './../../../../../assets/styles/variables.less'; + +@circle_size: 13px; + +.custom-modal{ + font-family: @font-opensans-regular; +} + +/deep/ multi-steps-wizard { + display: none; +} + +.ng2-modal-header{ + border: none !important; +} + +.ng2-modal-body{ + padding-top: 0 !important; +} + +header{ + margin-bottom: 10px; + .dynamic-header-container{ + position: relative; + top: -9px; + } + .steps-header{ + display: flex; + .step-title{ + flex: 1; + .title-text{ + width: 100%; + text-align: center; + line-height: 40px; + background-color: @tlv_color_u; + font-size: 13px; + } + .line{ + width: calc(~'100% - @{circle_size}'); + position: relative; + left: calc(~'(100% - @{circle_size})/2 * (-1)'); + float: left; + height: 2px; + .inner-line{ + background-color: @main_color_a; + height: 100%; + } + } + .circle{ + margin:0 auto; + border: @main_color_o solid 1px; + height: @circle_size; + width: @circle_size; + border-radius: 50%; + position: relative; + top: -@circle_size/2; + background-color: @main_color_p; + z-index: 1; + } + .full-circle{ + border-color: @main_color_a; + background-color: @main_color_a; + } + &.active{ + color: @main_color_a; + font-family: @font-opensans-medium; + .circle{ + border-color: @main_color_a; + } + } + } + } +} + +.navigation-buttons{ + padding-left: 6px; + border-left: 1px solid @main_color_a; + .navigation-button{ + padding: 0 8px; + .navigation-icon{ + margin: 3px 0; + &.blue-arrow-back{ + float: left; + } + &.white-arrow-next{ + float: right; + } + } + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts new file mode 100644 index 0000000000..9219a30738 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts @@ -0,0 +1,78 @@ +/** + * Created by rc2122 on 8/15/2017. + */ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +import { + Component, ElementRef, forwardRef, Inject, Input, trigger, state, style, + transition, animate, ViewChild, ViewContainerRef, ComponentRef +} from "@angular/core"; +import {StepModel} from "app/models"; +import {ModalService} from "../../../services/modal.service"; +import {ModalComponent} from "../modal/modal.component"; +import {WizardHeaderBaseComponent} from "./multi-steps-wizard-header-base.component"; + + +@Component({ + selector: 'multi-steps-wizard', + templateUrl: './multi-steps-wizard.component.html', + styleUrls: ['./../modal/modal.component.less','./multi-steps-wizard.component.less'], + animations: [ + trigger('displayLineAnimation', [ + state('true', style({ + width: '100%', + })), + state('false', style({ + width:'0px', + })), + transition('* => *', animate('500ms')), + ]), + ], +}) +export class MultiStepsWizardComponent extends ModalComponent { + + @Input() steps:Array; + @Input() callback: Function; + @Input() data:any; + @Input() dynamicHeader: ComponentRef; + + @ViewChild('dynamicHeaderContainer', { read: ViewContainerRef }) dynamicHeaderContainer: ViewContainerRef; + constructor(@Inject(forwardRef(() => ModalService)) public modalService: ModalService, el: ElementRef ) { + super(el); + } + + private currentStepIndex:number = 0; + + nextStep = ():void => { + if(this.currentStepIndex + 1 < this.steps.length){ + this.currentStepIndex++; + this.modalService.addDynamicContentToModal(this.modalService.currentModal, this.steps[this.currentStepIndex].component); + this.dynamicHeader.instance.currentStepIndex = this.currentStepIndex; + } + } + + prevStep = ():void => { + if(this.currentStepIndex > 0){ + this.currentStepIndex--; + this.modalService.addDynamicContentToModal(this.modalService.currentModal, this.steps[this.currentStepIndex].component); + this.dynamicHeader.instance.currentStepIndex = this.currentStepIndex; + } + } +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts new file mode 100644 index 0000000000..3db217d282 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts @@ -0,0 +1,22 @@ +/** + * Created by rc2122 on 8/15/2017. + */ +import { NgModule } from "@angular/core"; +import {MultiStepsWizardComponent} from "./multi-steps-wizard.component"; +import {CommonModule} from "@angular/common"; +import {ConnectionWizardModule} from "../../../pages/connection-wizard/connection-wizard.module"; + +@NgModule({ + declarations: [ + MultiStepsWizardComponent + ], + imports: [CommonModule + ], + exports: [], + entryComponents: [ + MultiStepsWizardComponent + ], + providers: [] +}) +export class MultiStepsWizardModule { +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar-routes.config.ts b/catalog-ui/src/app/ng2/components/ui/navbar/navbar-routes.config.ts new file mode 100644 index 0000000000..ac58cbd063 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar-routes.config.ts @@ -0,0 +1,27 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { MenuType, RouteInfo } from './navbar.metadata'; + +export const ROUTES: RouteInfo[] = [ + { path: 'page1', title: 'Logo', menuType: MenuType.BRAND }, + { path: 'page1', title: 'Page 1', menuType: MenuType.LEFT }, + { path: 'page2', title: 'Page 2', menuType: MenuType.LEFT } +]; diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.html b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.html new file mode 100644 index 0000000000..d783be4c27 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.html @@ -0,0 +1,23 @@ + diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.less b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.less new file mode 100644 index 0000000000..3e5165b798 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.less @@ -0,0 +1,11 @@ +.active { + color: #ffffff; +} +.navbar-toggler { + border: solid 1px #cccccc; + color: #ff0000; +} +.navbar { + background-color: #0000ff; + border-radius: 0; +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.ts b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.ts new file mode 100644 index 0000000000..68a26c4780 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.ts @@ -0,0 +1,52 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, OnInit, ViewEncapsulation} from '@angular/core'; +import { ROUTES } from './navbar-routes.config'; +import { MenuType, RouteInfo } from './navbar.metadata'; + +@Component({ + selector: 'app-navbar', + templateUrl: './navbar.component.html', + styleUrls: [ './navbar.component.less' ], + encapsulation: ViewEncapsulation.None +}) +export class NavbarComponent implements OnInit { + public menuItems: Array; + public brandMenu: RouteInfo; + isCollapsed = true; + + constructor() {} + + ngOnInit() { + this.menuItems = ROUTES.filter(menuItem => menuItem.menuType !== MenuType.BRAND); + this.brandMenu = ROUTES.filter(menuItem => menuItem.menuType === MenuType.BRAND)[0]; + } + + public get menuIcon(): string { + return this.isCollapsed ? '☰' : '✖'; + } + + public getMenuItemClasses(menuItem: any) { + return { + 'pull-xs-right': this.isCollapsed && menuItem.menuType === MenuType.RIGHT + }; + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.metadata.ts b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.metadata.ts new file mode 100644 index 0000000000..71cc3cb59f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.metadata.ts @@ -0,0 +1,31 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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========================================================= + */ + +export enum MenuType { + BRAND, + LEFT, + RIGHT +} + +export interface RouteInfo { + path: string; + title: string; + menuType: MenuType; +} diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.module.ts b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.module.ts new file mode 100644 index 0000000000..4a754dfe99 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.module.ts @@ -0,0 +1,36 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; +import { NavbarComponent } from "./navbar.component"; + +@NgModule({ + imports: [ + RouterModule, + CommonModule + ], + declarations: [ NavbarComponent ], + exports: [ + NavbarComponent + ] +}) +export class NavbarModule {} diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html new file mode 100644 index 0000000000..6d76f0ad06 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html @@ -0,0 +1,24 @@ +
+
+
+
+ {{ title }} + +
+ +
+ +
+
+ + diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.less b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.less new file mode 100644 index 0000000000..fbdec0b16b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.less @@ -0,0 +1,77 @@ +@import '../../../../../assets/styles/variables'; +@import '../../../../../assets/styles/mixins'; +@import '../../../../../assets/styles/sprite-old'; +.popover .virtual-area { + height: 11px; + width: 100%; + position: absolute; +} +.popover.top .virtual-area { + bottom: -11px; +} +.popover.bottom .virtual-area { + top: -11px; +} +.popover.left .virtual-area { + right: -11px; +} +.popover.right .virtual-area { + left: -11px; +} +.popover.hide-arrow{ + margin: 0; +} + +.popover-header{ + .m_14_m; + font-weight: bold; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + height: 40px; + line-height: 48px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + text-align: left; + border-bottom: solid 1px @main_color_o; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0px 20px; + max-width:350px; + + .title{ + flex: 1; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .close-button{ + .sprite; + .sprite.x-btn-black; + cursor: pointer; + } +} + +.popover-footer{ + background-color: @tlv_color_t; + height: 40px; + clear: both; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + button{ + margin: 8px 12px 8px 6px; + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts new file mode 100644 index 0000000000..6eb36287d0 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts @@ -0,0 +1,278 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, Input, Output, AfterViewInit, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, EventEmitter, Renderer } from "@angular/core"; +import {ButtonsModelMap} from "app/models"; +import {PopoverComponent} from "./popover.component"; + +@Component({ + selector: "popover-content", + templateUrl:'./popover-content.component.html', + styleUrls:['popover-content.component.less'] +}) +export class PopoverContentComponent implements AfterViewInit, OnDestroy { + + @Input() public title: string; + @Input() public buttons:ButtonsModelMap; + + @Input() + content: string; + + @Input() + placement: "top"|"bottom"|"left"|"right"|"auto"|"auto top"|"auto bottom"|"auto left"|"auto right" = "bottom"; + + @Input() + animation: boolean = true; + + @Input() + closeOnClickOutside: boolean = false; + + @Input() + closeOnMouseOutside: boolean = false; + + @Input() + hideArrow: boolean = false; + + @ViewChild("popoverDiv") + popoverDiv: ElementRef; + + buttonsNames:Array; + + popover: PopoverComponent; + onCloseFromOutside = new EventEmitter(); + top: number = -10000; + left: number = -10000; + isIn: boolean = false; + displayType: string = "none"; + effectivePlacement: string; + + onDocumentMouseDown = (event: any) => { + const element = this.element.nativeElement; + if (!element || !this.popover) return; + if (element.contains(event.target) || this.popover.getElement().contains(event.target)) return; + this.hide(); + this.onCloseFromOutside.emit(undefined); + }; + + + constructor(protected element: ElementRef, + protected cdr: ChangeDetectorRef, + protected renderer: Renderer) { + } + + listenClickFunc: any; + listenMouseFunc: any; + + ngAfterViewInit(): void { + this.buttonsNames = Object.keys(this.buttons); + if (this.closeOnClickOutside) + this.listenClickFunc = this.renderer.listenGlobal("document", "mousedown", (event: any) => this.onDocumentMouseDown(event)); + if (this.closeOnMouseOutside) + this.listenMouseFunc = this.renderer.listenGlobal("document", "mouseover", (event: any) => this.onDocumentMouseDown(event)); + + this.show(); + this.cdr.detectChanges(); + } + + ngOnDestroy() { + if (this.closeOnClickOutside) + this.listenClickFunc(); + if (this.closeOnMouseOutside) + this.listenMouseFunc(); + } + + // ------------------------------------------------------------------------- + // Public Methods + // ------------------------------------------------------------------------- + + show(): void { + if (!this.popover || !this.popover.getElement()) + return; + + const p = this.positionElements(this.popover.getElement(), this.popoverDiv.nativeElement, this.placement); + this.displayType = "block"; + this.top = p.top; + this.left = p.left; + this.isIn = true; + } + + hide(): void { + this.top = -10000; + this.left = -10000; + this.isIn = true; + this.popover.hide(); + } + + hideFromPopover() { + this.top = -10000; + this.left = -10000; + this.isIn = true; + } + + // ------------------------------------------------------------------------- + // Protected Methods + // ------------------------------------------------------------------------- + + protected positionElements(hostEl: HTMLElement, targetEl: HTMLElement, positionStr: string, appendToBody: boolean = false): { top: number, left: number } { + let positionStrParts = positionStr.split("-"); + let pos0 = positionStrParts[0]; + let pos1 = positionStrParts[1] || "center"; + let hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl); + let targetElWidth = targetEl.offsetWidth; + let targetElHeight = targetEl.offsetHeight; + + this.effectivePlacement = pos0 = this.getEffectivePlacement(pos0, hostEl, targetEl); + + let shiftWidth: any = { + center: function (): number { + return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2; + }, + left: function (): number { + return hostElPos.left; + }, + right: function (): number { + return hostElPos.left + hostElPos.width - targetElWidth; + } + }; + + let shiftHeight: any = { + center: function (): number { + return hostElPos.top + hostElPos.height / 2 - targetElHeight / 2; + }, + top: function (): number { + return hostElPos.top; + }, + bottom: function (): number { + return hostElPos.top + hostElPos.height - targetElHeight; + } + }; + + let targetElPos: { top: number, left: number }; + switch (pos0) { + case "right": + targetElPos = { + top: shiftHeight[pos1](), + left: hostElPos.left + hostElPos.width + }; + break; + + case "left": + targetElPos = { + top: shiftHeight[pos1](), + left: hostElPos.left - targetElWidth + }; + break; + + case "bottom": + targetElPos = { + top: hostElPos.top + hostElPos.height, + left: shiftWidth[pos1]() + }; + break; + + default: + targetElPos = { + top: hostElPos.top - targetElHeight, + left: shiftWidth[pos1]() + }; + break; + } + + return targetElPos; + } + + protected position(nativeEl: HTMLElement): { width: number, height: number, top: number, left: number } { + let offsetParentBCR = { top: 0, left: 0 }; + const elBCR = this.offset(nativeEl); + const offsetParentEl = this.parentOffsetEl(nativeEl); + if (offsetParentEl !== window.document) { + offsetParentBCR = this.offset(offsetParentEl); + offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop; + offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft; + } + + const boundingClientRect = nativeEl.getBoundingClientRect(); + return { + width: boundingClientRect.width || nativeEl.offsetWidth, + height: boundingClientRect.height || nativeEl.offsetHeight, + top: elBCR.top - offsetParentBCR.top, + left: elBCR.left - offsetParentBCR.left + }; + } + + protected offset(nativeEl: any): { width: number, height: number, top: number, left: number } { + const boundingClientRect = nativeEl.getBoundingClientRect(); + return { + width: boundingClientRect.width || nativeEl.offsetWidth, + height: boundingClientRect.height || nativeEl.offsetHeight, + top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop), + left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft) + }; + } + + protected getStyle(nativeEl: HTMLElement, cssProp: string): string { + if ((nativeEl as any).currentStyle) // IE + return (nativeEl as any).currentStyle[cssProp]; + + if (window.getComputedStyle) + return (window.getComputedStyle as any)(nativeEl)[cssProp]; + + // finally try and get inline style + return (nativeEl.style as any)[cssProp]; + } + + protected isStaticPositioned(nativeEl: HTMLElement): boolean { + return (this.getStyle(nativeEl, "position") || "static" ) === "static"; + } + + protected parentOffsetEl(nativeEl: HTMLElement): any { + let offsetParent: any = nativeEl.offsetParent || window.document; + while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) { + offsetParent = offsetParent.offsetParent; + } + return offsetParent || window.document; + } + + protected getEffectivePlacement(placement: string, hostElement: HTMLElement, targetElement: HTMLElement): string { + const placementParts = placement.split(" "); + if (placementParts[0] !== "auto") { + return placement; + } + + const hostElBoundingRect = hostElement.getBoundingClientRect(); + + const desiredPlacement = placementParts[1] || "bottom"; + + if (desiredPlacement === "top" && hostElBoundingRect.top - targetElement.offsetHeight < 0) { + return "bottom"; + } + if (desiredPlacement === "bottom" && hostElBoundingRect.bottom + targetElement.offsetHeight > window.innerHeight) { + return "top"; + } + if (desiredPlacement === "left" && hostElBoundingRect.left - targetElement.offsetWidth < 0) { + return "right"; + } + if (desiredPlacement === "right" && hostElBoundingRect.right + targetElement.offsetWidth > window.innerWidth) { + return "left"; + } + + return desiredPlacement; + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover.component.ts b/catalog-ui/src/app/ng2/components/ui/popover/popover.component.ts new file mode 100644 index 0000000000..e976bc7bf2 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/popover/popover.component.ts @@ -0,0 +1,179 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Directive, HostListener, ComponentRef, ViewContainerRef, ComponentFactoryResolver, ComponentFactory, Input, OnChanges, SimpleChange, Output, EventEmitter } from "@angular/core"; +import {PopoverContentComponent} from "./popover-content.component"; + +@Directive({ + selector: "[popover]", + exportAs: "popover" +}) +export class PopoverComponent implements OnChanges { + + protected PopoverComponent = PopoverContentComponent; + protected popover: ComponentRef; + protected visible: boolean; + + + constructor(protected viewContainerRef: ViewContainerRef, + protected resolver: ComponentFactoryResolver) { + } + + @Input("popover") + content: string|PopoverContentComponent; + + @Input() + popoverDisabled: boolean; + + @Input() + popoverAnimation: boolean; + + @Input() + popoverPlacement: "top"|"bottom"|"left"|"right"|"auto"|"auto top"|"auto bottom"|"auto left"|"auto right"; + + @Input() + popoverTitle: string; + + @Input() + popoverOnHover: boolean = false; + + @Input() + popoverCloseOnClickOutside: boolean; + + @Input() + popoverCloseOnMouseOutside: boolean; + + @Input() + popoverDismissTimeout: number = 0; + + @Output() + onShown = new EventEmitter(); + + @Output() + onHidden = new EventEmitter(); + + @HostListener("click") + showOrHideOnClick(): void { + if (this.popoverOnHover) return; + if (this.popoverDisabled) return; + this.toggle(); + } + + @HostListener("focusin") + @HostListener("mouseenter") + showOnHover(): void { + if (!this.popoverOnHover) return; + if (this.popoverDisabled) return; + this.show(); + } + + @HostListener("focusout") + @HostListener("mouseleave") + hideOnHover(): void { + if (this.popoverCloseOnMouseOutside) return; + if (!this.popoverOnHover) return; + if (this.popoverDisabled) return; + this.hide(); + } + + ngOnChanges(changes: {[propertyName: string]: SimpleChange}) { + if (changes["popoverDisabled"]) { + if (changes["popoverDisabled"].currentValue) { + this.hide(); + } + } + } + + toggle() { + if (!this.visible) { + this.show(); + } else { + this.hide(); + } + } + + show() { + if (this.visible) return; + + this.visible = true; + if (typeof this.content === "string") { + const factory = this.resolver.resolveComponentFactory(this.PopoverComponent); + if (!this.visible) + return; + + this.popover = this.viewContainerRef.createComponent(factory); + const popover = this.popover.instance as PopoverContentComponent; + popover.popover = this; + popover.content = this.content as string; + if (this.popoverPlacement !== undefined) + popover.placement = this.popoverPlacement; + if (this.popoverAnimation !== undefined) + popover.animation = this.popoverAnimation; + if (this.popoverTitle !== undefined) + popover.title = this.popoverTitle; + if (this.popoverCloseOnClickOutside !== undefined) + popover.closeOnClickOutside = this.popoverCloseOnClickOutside; + if (this.popoverCloseOnMouseOutside !== undefined) + popover.closeOnMouseOutside = this.popoverCloseOnMouseOutside; + + popover.onCloseFromOutside.subscribe(() => this.hide()); + if (this.popoverDismissTimeout > 0) + setTimeout(() => this.hide(), this.popoverDismissTimeout); + } else { + const popover = this.content as PopoverContentComponent; + popover.popover = this; + if (this.popoverPlacement !== undefined) + popover.placement = this.popoverPlacement; + if (this.popoverAnimation !== undefined) + popover.animation = this.popoverAnimation; + if (this.popoverTitle !== undefined) + popover.title = this.popoverTitle; + if (this.popoverCloseOnClickOutside !== undefined) + popover.closeOnClickOutside = this.popoverCloseOnClickOutside; + if (this.popoverCloseOnMouseOutside !== undefined) + popover.closeOnMouseOutside = this.popoverCloseOnMouseOutside; + + popover.onCloseFromOutside.subscribe(() => this.hide()); + if (this.popoverDismissTimeout > 0) + setTimeout(() => this.hide(), this.popoverDismissTimeout); + popover.show(); + } + + this.onShown.emit(this); + } + + hide() { + if (!this.visible) return; + + this.visible = false; + if (this.popover) + this.popover.destroy(); + + if (this.content instanceof PopoverContentComponent) + (this.content as PopoverContentComponent).hideFromPopover(); + + this.onHidden.emit(this); + } + + getElement() { + return this.viewContainerRef.element.nativeElement; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover.module.ts b/catalog-ui/src/app/ng2/components/ui/popover/popover.module.ts new file mode 100644 index 0000000000..d8cacc1696 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/popover/popover.module.ts @@ -0,0 +1,45 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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========================================================= + */ + +/** + * Created by rc2122 on 5/17/2017. + */ +import {NgModule} from "@angular/core"; +import { CommonModule } from '@angular/common'; +import {PopoverComponent} from "./popover.component"; +import {PopoverContentComponent} from "./popover-content.component"; + +@NgModule({ + declarations: [ + PopoverComponent, + PopoverContentComponent + ], + imports: [ + CommonModule + ], + exports: [ + PopoverComponent, + PopoverContentComponent + ], + providers: [] +}) +export class PopoverModule { + +} diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html new file mode 100644 index 0000000000..36629594b0 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html @@ -0,0 +1,5 @@ +
+ + x + +
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less new file mode 100644 index 0000000000..751fceec35 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less @@ -0,0 +1,57 @@ +.search-bar-container { + display:flex; + border-radius: 4px; + box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29); + + .search-bar-input { + border: 1px solid #cdcdcd; + border-radius: 4px; + border-right:none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + outline:none; + padding:2px 50px 2px 10px; + color: #5a5a5a; + font-size: 1em; + font-style: italic; + } + + .clear-search-x { + position:absolute; + right:40px; + top:5px; + padding: 0 5px; + + &:hover { + border-radius:2px; + background-color: #ebebeb; + cursor:pointer; + } + } + + .search-bar-button { + background: url('../../../../../assets/styles/images/sprites/sprite-global.png') no-repeat -206px -1275px; + background-color: rgba(234, 234, 234, 0.88); + width: 30px; + height: 30px; + padding: 0; + cursor:pointer; + border:solid 1px #cdcdcd; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + + &:hover { + background-position:-126px -1275px; + } + + &:active { + background-color: rgba(31, 171, 223, 0.88); + background-position:-45px -1275px; + border-left:none; + } + &:focus { + outline:none; + } + + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.ts b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.ts new file mode 100644 index 0000000000..08bdf2030f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.ts @@ -0,0 +1,32 @@ +import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector: 'search-bar', + templateUrl: './search-bar.component.html', + styleUrls: ['./search-bar.component.less'], + encapsulation: ViewEncapsulation.None +}) +export class SearchBarComponent { + + @Input() placeholder: string; + @Input() class: string; + @Input() searchQuery: string; + @Output() searchChanged: EventEmitter = new EventEmitter(); + @Output() searchButtonClicked: EventEmitter = new EventEmitter(); + + searchButtonClick = (): void => { + if (this.searchQuery) { //do not allow empty search + this.searchButtonClicked.emit(this.searchQuery); + } + } + + searchQueryChange = ($event): void => { + this.searchChanged.emit($event); + } + + private clearSearchQuery = (): void => { + this.searchQuery = ""; + this.searchButtonClicked.emit(this.searchQuery); + } +} + diff --git a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html new file mode 100644 index 0000000000..c9769ba5ae --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html @@ -0,0 +1,6 @@ +
+ +
+
{{item}}
+
+
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less new file mode 100644 index 0000000000..f1830846d3 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less @@ -0,0 +1,34 @@ +.search-with-autocomplete-container{ + &.autocomplete-visible { + + .search-bar-input { + border-bottom-left-radius: 0; + } + .search-bar-button { + border-bottom-right-radius: 0; + } + .autocomplete-results { + border: solid 1px #d2d2d2; + border-top:none; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + background-color: #fff; + padding: 10px 20px; + width:100%; + position:absolute; + max-height: 200px; + overflow-y: scroll; + } + + .autocomplete-result-item { + color:#5a5a5a; + padding: 5px 0; + cursor:pointer; + + &:hover { + color: #999; + } + } + } +} + diff --git a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.ts b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.ts new file mode 100644 index 0000000000..ced056d1fc --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.ts @@ -0,0 +1,30 @@ +import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; +import { SearchBarComponent } from '../search-bar/search-bar.component'; + +@Component({ + selector: 'search-with-autocomplete', + templateUrl: './search-with-autocomplete.component.html', + styleUrls: ['./search-with-autocomplete.component.less'], + encapsulation: ViewEncapsulation.None +}) +export class SearchWithAutoCompleteComponent { + + @Input() searchPlaceholder: string; + @Input() searchBarClass: string; + @Input() searchQuery: string; + @Input() autoCompleteValues: Array; + @Output() searchChanged: EventEmitter = new EventEmitter(); + @Output() searchButtonClicked: EventEmitter = new EventEmitter(); + + searchChange = (searchTerm: string) => { + this.searchQuery = searchTerm; + this.searchChanged.emit(searchTerm); + } + + updateSearch = (searchTerm: string) => { + this.searchQuery = searchTerm; + this.searchButtonClicked.emit(searchTerm); + this.autoCompleteValues = []; + } +} + diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts new file mode 100644 index 0000000000..bad7b80a51 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts @@ -0,0 +1,38 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Input } from '@angular/core'; +import { ViewEncapsulation } from '@angular/core'; + +@Component({ + selector: 'tab', + template: ` +
+ +
+ `, + encapsulation: ViewEncapsulation.None +}) +export class Tab { + @Input('tabTitle') title: string; + @Input() active:boolean = false; + @Input() indication?: number; + +} diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html new file mode 100644 index 0000000000..57cf5d46c9 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html @@ -0,0 +1,9 @@ +
+
+ {{tab.title}} +
{{tab.indication}}
+
+
+
+ +
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less new file mode 100644 index 0000000000..f7b18b1cc8 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less @@ -0,0 +1,85 @@ +@import '../../../../../assets/styles/variables'; + +tab { + height: 100%; +} + +.tabs { + display:flex; + flex: 0 0 auto; + flex-direction:row; +} + +.tab { + flex: 1 0 auto; + cursor: pointer; + padding: .5em; +} + +.tab-content-container { + flex: 1; + width:100%; + overflow-y:hidden; + overflow-x:hidden; +} + +.tab-content { + height:100%; +} + +/*Tab styles*/ +.tabs{ + &.round-tabs .tab{ + background-color: #f8f8f8; + color: #959595; + border: solid 1px #d2d2d2; + border-bottom:none; + border-left:none; + position:relative; + + &:first-child { + border-left:solid 1px #d2d2d2; + } + + &.active { + background-color:#009fdb; + color:#e9e9e9; + border-color:#009fdb; + } + + .tab-indication { + position: absolute; + top: -10px; + background-color: #009fdb; + right: 10px; + padding: 2px 0; + border-radius: 15px; + border: solid 1px #d2d2d2; + color:white; + width: 25px; + height: 25px; + text-align: center; + + } + } + + &.simple-tabs .tab { + font-size: 12px; + color: @main_color_n; + + &:after { + display:block; + content: ''; + border-bottom: 2px solid @main_color_a; + transform: scaleX(0); + transition: transform 200ms ease-in-out; + } + + &.active { + color: @main_color_a; + &:after { + transform: scaleX(1.2); + } + } + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts new file mode 100644 index 0000000000..21d2bbad43 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts @@ -0,0 +1,78 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, ContentChildren, QueryList, AfterContentInit, Input, Output, EventEmitter } from '@angular/core'; +import { Tab } from './tab/tab.component'; +import { ViewEncapsulation } from '@angular/core'; +import { trigger, state, style, transition, animate, keyframes } from '@angular/core'; + +@Component({ + selector: 'tabs', + templateUrl: './tabs.component.html', + styleUrls: ['./tabs.component.less'], + encapsulation: ViewEncapsulation.None, + animations: [ + trigger('indicatorAnimation', [ + transition(':enter', [style({ transform: 'translateY(-50%)', opacity: 0 }), animate('250ms', style({ transform: 'translateY(0)', opacity: 1 })) ]), + transition(':leave', [style({ opacity: 1 }), animate('500ms', style({ opacity: 0 })) ]) + ]) + ] +}) +export class Tabs implements AfterContentInit { + + @Input() tabStyle: string; + @Input() hideIndicationOnTabChange?: boolean = false; + @ContentChildren(Tab) tabs: QueryList; + @Output() tabChanged: EventEmitter = new EventEmitter(); + + + ngAfterContentInit() { + //after contentChildren are set, determine active tab. If no active tab set, activate the first one + let activeTabs = this.tabs.filter((tab) => tab.active); + + if (activeTabs.length === 0) { + this.selectTab(this.tabs.first); + } + } + + selectTab(tab: Tab) { + //activate the tab the user clicked. + this.tabs.toArray().forEach(tab => { + tab.active = false; + if (this.hideIndicationOnTabChange && tab.indication) { + tab.indication = null; + } + }); + tab.active = true; + this.tabChanged.emit(tab); + } + + triggerTabChange(tabTitle) { + this.tabs.toArray().forEach(tab => { + tab.active = (tab.title == tabTitle) ? true : false; + }); + } + + setTabIndication(tabTitle:string, indication?:number) { + let selectedTab: Tab = this.tabs.toArray().find(tab => tab.title == tabTitle); + selectedTab.indication = indication || null; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.module.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.module.ts new file mode 100644 index 0000000000..1300c41a90 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.module.ts @@ -0,0 +1,55 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' + +import { Tabs } from './tabs.component'; +import { Tab } from './tab/tab.component'; + + +@NgModule({ + imports: [BrowserModule], + declarations: [Tabs, Tab], + bootstrap: [], + exports: [Tabs, Tab] +}) +export class TabModule { } + +/** README: **/ + +/** USAGE Example: + *In page.module.ts: import TabModule + *In HTML: + * + * Content of tab 1 + * Content of tab 2 + * ... + * + */ + +/**STYLING: (ViewEncapsulation is set to None to allow styles to be overridden or customized) + * Existing options: + * tabStyle="round-tabs" will provide generic rounded tab look + * + * To create or override styles: + * Parent div has class ".tabs". Each tab has class ".tab". Active tab has class ".active". + * Use /deep/ or >>> prefix to override styles via other components stylesheets + */ diff --git a/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.html b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.html new file mode 100644 index 0000000000..1fbf45e39f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.html @@ -0,0 +1,12 @@ + diff --git a/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.less b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.less new file mode 100644 index 0000000000..1ff496f840 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.less @@ -0,0 +1,11 @@ +.tooltip-inner { + word-wrap: break-word; + max-width: 300px; +} + +.tooltip.bottom .tooltip-arrow { + border-bottom-color: #000 !important; +} + + + diff --git a/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.ts b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.ts new file mode 100644 index 0000000000..4dcb64c499 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.ts @@ -0,0 +1,215 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, AfterViewInit, Input, ElementRef, ChangeDetectorRef} from "@angular/core"; + +@Component +({ + selector: "tooltip-content", + templateUrl: "./tooltip-content.component.html", + styleUrls: ["./tooltip-content.component.less"] +}) + +export class TooltipContentComponent implements AfterViewInit { + + // ------------------------------------------------------------------------- + // Inputs / Outputs + // ------------------------------------------------------------------------- + + @Input() hostElement: HTMLElement; + @Input() content: string; + @Input() placement: "top"|"bottom"|"left"|"right" = "bottom"; + @Input() animation: boolean = true; + + // ------------------------------------------------------------------------- + // Properties + // ------------------------------------------------------------------------- + + top: number = -100000; + left: number = -100000; + isIn: boolean = false; + isFade: boolean = false; + + // ------------------------------------------------------------------------- + // Constructor + // ------------------------------------------------------------------------- + + constructor(private element: ElementRef, + private cdr: ChangeDetectorRef) { + } + + // ------------------------------------------------------------------------- + // Lifecycle callbacks + // ------------------------------------------------------------------------- + + ngAfterViewInit(): void { + this.show(); + this.cdr.detectChanges(); + } + + // ------------------------------------------------------------------------- + // Public Methods + // ------------------------------------------------------------------------- + + show(): void { + if(!this.hostElement) { + return; + } + + const position = this.positionElement(this.hostElement, this.element.nativeElement.children[0], this.placement); + this.top = position.top; + this.left = position.left; + this.isIn = true; + if (this.animation) { + this.isFade = true; + } + } + + hide(): void { + this.top = -100000; + this.left = -100000; + this.isIn = true; + if(this.animation) { + this.isFade = false; + } + } + + // ------------------------------------------------------------------------- + // Private Methods + // ------------------------------------------------------------------------- + + private positionElement(hostElem: HTMLElement, targetElem: HTMLElement, positionStr: string, appendToBody: boolean = false): {top: number, left: number} { + let positionStrParts = positionStr.split("-"); + let pos0 = positionStrParts[0]; + let pos1 = positionStrParts[1] || "center"; + let hostElemPosition = appendToBody ? this.offset(hostElem) : this.position(hostElem); + let targetElemWidth = targetElem.offsetWidth; + let targetElemHeight = targetElem.offsetHeight; + let shiftWidth: any = { + center(): number { + return hostElemPosition.left + hostElemPosition.width / 2 - targetElemWidth / 2; + }, + left(): number { + return hostElemPosition.left; + }, + right(): number { + return hostElemPosition.left + hostElemPosition.width; + } + }; + + let shiftHeight: any = { + center: function (): number { + return hostElemPosition.top + hostElemPosition.height / 2 - targetElemHeight / 2; + }, + top: function (): number { + return hostElemPosition.top; + }, + bottom: function (): number { + return hostElemPosition.top + hostElemPosition.height; + } + } + + let targetElemPosition: {top: number, left: number}; + + switch (pos0) { + case "right": + targetElemPosition = { + top: shiftHeight[pos1](), + left: shiftWidth[pos0]() + }; + break; + + case "left": + targetElemPosition = { + top: shiftHeight[pos1](), + left: hostElemPosition.left - targetElemWidth + }; + break; + + case "bottom": + targetElemPosition = { + top: shiftHeight[pos0](), + left: shiftWidth[pos1]() + }; + break; + + default: + targetElemPosition = { + top: hostElemPosition.top - targetElemHeight, + left: shiftWidth[pos1]() + }; + break; + } + + return targetElemPosition; + } + + + private position(nativeElem: HTMLElement): {width: number, height: number, top: number, left: number} { + let offsetParentCBR = {top: 0, left: 0}; + const elemBCR = this.offset(nativeElem); + const offsetParentElem = this.parentOffsetElem(nativeElem); + if(offsetParentElem !== window.document) { + offsetParentCBR = this.offset(offsetParentElem); + offsetParentCBR.top += offsetParentElem.clientTop - offsetParentElem.scrollTop; + offsetParentCBR.left += offsetParentElem.clientLeft - offsetParentElem.scrollTop; + } + + const boundingClientRect = nativeElem.getBoundingClientRect(); + + return { + width: boundingClientRect.width || nativeElem.offsetWidth, + height: boundingClientRect.height || nativeElem.offsetHeight, + top: elemBCR.top - offsetParentCBR.top, + left: elemBCR.left - offsetParentCBR.left + }; + } + + private offset(nativeElem:any): {width: number, height: number, top: number, left: number} { + const boundingClientRect = nativeElem.getBoundingClientRect(); + return { + width: boundingClientRect.width || nativeElem.offsetWidth, + height: boundingClientRect.height || nativeElem.offsetHeight, + top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop), + left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft) + }; + } + + private getStyle(nativeElem: HTMLElement, cssProperty: string): string { + if(window.getComputedStyle) { + return (window.getComputedStyle(nativeElem) as any)[cssProperty]; + } + + return (nativeElem.style as any)[cssProperty]; + } + + private isStaticPositioned(nativeElem: HTMLElement): boolean { + return (this.getStyle(nativeElem, "position") || "static") === "static"; + } + + private parentOffsetElem(nativeElem: HTMLElement): any { + let offsetParent: any = nativeElem.offsetParent || window.document; + while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) { + offsetParent = offsetParent.offsetParent; + } + + return offsetParent || window.document; + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.component.ts b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.component.ts new file mode 100644 index 0000000000..79d35c6e0e --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.component.ts @@ -0,0 +1,109 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { + Directive, ComponentRef, ViewContainerRef, ComponentFactoryResolver, Input, HostListener +} from "@angular/core"; +import {TooltipContentComponent} from "./tooltip-content.component"; + +@Directive ({ + selector: "[tooltip]" +}) +export class TooltipComponent { + + // ------------------------------------------------------------------------- + // Properties + // ------------------------------------------------------------------------- + + private tooltip: ComponentRef; + private visible: boolean; + private delayInProgress: boolean = false; + + // ------------------------------------------------------------------------- + // Constructor + // ------------------------------------------------------------------------- + + constructor(private viewContainerRef: ViewContainerRef, + private resolver: ComponentFactoryResolver) { + } + + // ------------------------------------------------------------------------- + // Inputs / Outputs + // ------------------------------------------------------------------------- + + @Input("tooltip") content: string|TooltipContentComponent; + @Input() tooltipDisabled: boolean; + @Input() tooltipAnimation: boolean = true; + @Input() tooltipPlacement: "top"|"bottom"|"left"|"right" = "bottom"; + @Input() tooltipDelay: number = 1500; + + // ------------------------------------------------------------------------- + // Public Methods + // ------------------------------------------------------------------------- + + @HostListener("mouseenter") + show(): void { + if(this.tooltipDisabled || this.visible || this.content === "") { + return; + } + if (this.tooltipDelay && !this.delayInProgress) { + this.delayInProgress = true; + setTimeout(() => { this.delayInProgress && this.show() }, this.tooltipDelay); + return; + } + + this.visible = true; + if (typeof this.content === "string") { + const factory = this.resolver.resolveComponentFactory(TooltipContentComponent); + if (!this.visible) { + return; + } + + this.tooltip = this.viewContainerRef.createComponent(factory); + this.tooltip.instance.hostElement = this.viewContainerRef.element.nativeElement; + this.tooltip.instance.content = this.content as string; + this.tooltip.instance.placement = this.tooltipPlacement; + this.tooltip.instance.animation = this.tooltipAnimation; + } else { + const tooltip = this.content as TooltipContentComponent; + tooltip.hostElement = this.viewContainerRef.element.nativeElement; + tooltip.placement = this.tooltipPlacement; + tooltip.animation = this.tooltipAnimation; + tooltip.show(); + } + } + + @HostListener("mouseleave") + hide(): void { + this.delayInProgress = false; + if (!this.visible) { + return; + } + + this.visible = false; + if (this.tooltip) { + this.tooltip.destroy(); + } + if (this.content instanceof TooltipContentComponent) { + (this.content as TooltipContentComponent).hide(); + } + } +} + diff --git a/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.module.ts b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.module.ts new file mode 100644 index 0000000000..24478cd716 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.module.ts @@ -0,0 +1,44 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {NgModule} from "@angular/core"; +import {TooltipContentComponent} from "./tooltip-content.component"; +import {TooltipComponent} from "./tooltip.component"; +import {CommonModule} from "@angular/common"; + +@NgModule({ + declarations: [ + TooltipComponent, + TooltipContentComponent, + ], + imports: [ + ], + exports: [ + TooltipComponent, + TooltipContentComponent, + ], + entryComponents: [ + TooltipContentComponent + ], + providers: [] +}) +export class TooltipModule { + +} diff --git a/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts new file mode 100644 index 0000000000..526096524c --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts @@ -0,0 +1,80 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { NgModule } from '@angular/core'; +import { NavbarModule } from "./navbar/navbar.module"; +import {DynamicElementModule} from "./dynamic-element/dynamic-element.module"; +import {FormElementsModule} from "./form-components/form-elements.module"; +import {LoaderComponent} from "./loader/loader.component"; +import {ModalModule} from "./modal/modal.module"; +import {PopoverModule} from "./popover/popover.module"; +import {SearchBarComponent} from "./search-bar/search-bar.component"; +import {SearchWithAutoCompleteComponent} from "./search-with-autocomplete/search-with-autocomplete.component"; +import {TabModule} from "./tabs/tabs.module"; +import {TooltipModule} from "./tooltip/tooltip.module"; +import {CommonModule} from "@angular/common"; +import {FormsModule} from "@angular/forms"; +import {BrowserModule} from "@angular/platform-browser"; +import {MultiStepsWizardModule} from "./multi-steps-wizard/multi-steps-wizard.module"; +import {MenuListModule} from "./menu/menu-list.module"; +import {MenuListNg2Module} from "../downgrade-wrappers/menu-list-ng2/menu-list-ng2.module"; + +@NgModule({ + declarations: [ + LoaderComponent, + SearchBarComponent, + SearchWithAutoCompleteComponent + ], + + imports: [ + BrowserModule, + FormsModule, + CommonModule, + DynamicElementModule, + NavbarModule, + FormElementsModule, + ModalModule, + PopoverModule, + TabModule, + TooltipModule, + MultiStepsWizardModule, + MenuListModule, + MenuListNg2Module + ], + exports: [ + LoaderComponent, + MultiStepsWizardModule, + SearchBarComponent, + SearchWithAutoCompleteComponent, + DynamicElementModule, + NavbarModule, + FormElementsModule, + ModalModule, + PopoverModule, + TabModule, + TooltipModule, + MenuListModule, + MenuListNg2Module + ], + + entryComponents: [SearchWithAutoCompleteComponent] +}) + +export class UiElementsModule {} diff --git a/catalog-ui/src/app/ng2/config/sdc-config.config.factory.ts b/catalog-ui/src/app/ng2/config/sdc-config.config.factory.ts new file mode 100644 index 0000000000..b0fa17d3b6 --- /dev/null +++ b/catalog-ui/src/app/ng2/config/sdc-config.config.factory.ts @@ -0,0 +1,17 @@ +declare const __ENV__:string; + +export interface ISdcConfig { + [index:string]: any +} + +export function getSdcConfig() : ISdcConfig { + let sdcConfig:ISdcConfig = {}; + + if (__ENV__==='prod') { + sdcConfig = require('./../../../../configurations/prod.js'); + } else { + sdcConfig = require('./../../../../configurations/dev.js'); + } + + return sdcConfig; +} diff --git a/catalog-ui/src/app/ng2/config/sdc-config.config.ts b/catalog-ui/src/app/ng2/config/sdc-config.config.ts new file mode 100644 index 0000000000..197cc8b14b --- /dev/null +++ b/catalog-ui/src/app/ng2/config/sdc-config.config.ts @@ -0,0 +1,11 @@ +import {Provider, OpaqueToken} from "@angular/core"; +import {getSdcConfig, ISdcConfig} from "./sdc-config.config.factory"; + +export { ISdcConfig }; + +export const SdcConfigToken = new OpaqueToken('SdcConfigToken'); + +export const SdcConfig:Provider = { + provide: SdcConfigToken, + useFactory: getSdcConfig +}; diff --git a/catalog-ui/src/app/ng2/config/translation.service.config.factory.ts b/catalog-ui/src/app/ng2/config/translation.service.config.factory.ts new file mode 100644 index 0000000000..c435e45def --- /dev/null +++ b/catalog-ui/src/app/ng2/config/translation.service.config.factory.ts @@ -0,0 +1,13 @@ +import { ITranslateServiceConfig } from "../shared/translator/translate.service.config"; + +declare const __ENV__:string; + +export function getTranslationServiceConfig() : ITranslateServiceConfig { + const pathPrefix = (__ENV__ === 'prod') ? 'sdc1/' : ''; + return { + filePrefix: pathPrefix + 'assets/languages/', + fileSuffix: '.json', + allowedLanguages: ['en_US'], + defaultLanguage: 'en_US' + }; +} diff --git a/catalog-ui/src/app/ng2/config/translation.service.config.ts b/catalog-ui/src/app/ng2/config/translation.service.config.ts new file mode 100644 index 0000000000..9c2df7a098 --- /dev/null +++ b/catalog-ui/src/app/ng2/config/translation.service.config.ts @@ -0,0 +1,8 @@ +import { Provider } from "@angular/core"; +import { TranslateServiceConfigToken } from "../shared/translator/translate.service.config"; +import { getTranslationServiceConfig } from "./translation.service.config.factory"; + +export const TranslationServiceConfig:Provider = { + provide: TranslateServiceConfigToken, + useFactory: getTranslationServiceConfig +}; diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.html new file mode 100644 index 0000000000..02e7694eb0 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.less b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.less new file mode 100644 index 0000000000..07f9aa2135 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.less @@ -0,0 +1,4 @@ +connection-wizard-header { + display: block; + margin-bottom: 15px; +} diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.ts new file mode 100644 index 0000000000..5abb879013 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.ts @@ -0,0 +1,10 @@ +import {Component} from "@angular/core"; + + +@Component({ + selector: 'connection-properties-view', + templateUrl: './connection-properties-view.component.html', + styleUrls:['./connection-properties-view.component.less'] +}) +export class ConnectionPropertiesViewComponent { +} diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.html new file mode 100644 index 0000000000..369ab50cad --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.html @@ -0,0 +1,36 @@ +
+
+
+
+
+ {{connectWizardService.connectRelationModel.fromNode.componentInstance.name}} +
+
+ {{getSelectedReqOrCapName(true)}} +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+ {{connectWizardService.connectRelationModel.toNode.componentInstance.name}} +
+
+ {{getSelectedReqOrCapName(false)}} +
+
+
+
+
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.less b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.less new file mode 100644 index 0000000000..72fa6e813f --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.less @@ -0,0 +1,53 @@ +@import '../../../../../assets/styles/sprite-proxy-services-icons'; +@import '../../../../../assets/styles/variables'; +.header-main-container{ + background-color: #f8f8f8; + width: 100%; + height: 100px; + display: flex; + .inner-container{ + margin: 0 auto; + display: flex; + } +} +.selected { + color: @main_color_a; +} +.node{ + display: flex; + &.from-node{ + text-align: right; + } + &.to-node{ + text-align: left; + } + &.selected{ + .icon{ + border: solid 3px @main_color_a; + padding: 4px; + border-radius: 50%; + background-color: @main_color_p; + } + } + .icon{ + margin: auto 0; + display: flex; + } + .text{ + font-family: @font-opensans-medium; + margin: auto 10px; + min-width: 450px; + .node-name{ + font-size: 11px; + } + .selected-req-or-cap{ + font-size: 14px; + } + } +} +.connection{ + width: 67px; + height: 0px; + border-bottom: dashed 2px #979797; + margin: auto 0; +} diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.ts new file mode 100644 index 0000000000..f5bc3b7ca4 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.ts @@ -0,0 +1,37 @@ +/** + * Created by rc2122 on 9/27/2017. + */ +import {Component, Inject, forwardRef} from "@angular/core"; +import {ConnectionWizardService} from "../connection-wizard.service"; +import {WizardHeaderBaseComponent} from "app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component"; + +@Component({ + selector: 'connection-wizard-header', + templateUrl: './connection-wizard-header.component.html', + styleUrls:['./connection-wizard-header.component.less'] +}) + +export class ConnectionWizardHeaderComponent extends WizardHeaderBaseComponent{ + + constructor(@Inject(forwardRef(() => ConnectionWizardService)) public connectWizardService: ConnectionWizardService) { + super(); + } + + private _getReqOrCapName(isFromNode:boolean) { + const attributeReqOrCap:string = isFromNode ? 'requirement' : 'capability'; + if (this.connectWizardService.selectedMatch[attributeReqOrCap]) { + return this.connectWizardService.selectedMatch[attributeReqOrCap].getTitle(); + } else if (this.connectWizardService.selectedMatch.relationship) { + return this.connectWizardService.selectedMatch.relationship.relation[attributeReqOrCap]; + } + return ''; + } + + private getSelectedReqOrCapName = (isFromNode:boolean):string => { + if(!this.connectWizardService.selectedMatch){ + return ''; + } + return this._getReqOrCapName(this.connectWizardService.selectedMatch.isFromTo ? isFromNode : !isFromNode); + } +} + diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.module.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.module.ts new file mode 100644 index 0000000000..6b4b4128c1 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.module.ts @@ -0,0 +1,43 @@ +import {ToNodeStepComponent} from "./to-node-step/to-node-step.component"; +import {NgModule} from "@angular/core"; +import {FromNodeStepComponent} from "./from-node-step/from-node-step.component"; +import {PropertiesStepComponent} from "./properties-step/properties-step.component"; +import {ConnectionWizardService} from "./connection-wizard.service"; +import {SelectRequirementOrCapabilityModule} from "../../components/logic/select-requirement-or-capability/select-requirement-or-capability.module"; +import {PropertyTableModule} from "../../components/logic/properties-table/property-table.module"; +import {FormElementsModule} from "../../components/ui/form-components/form-elements.module"; +import {ConnectionWizardHeaderComponent} from "./connection-wizard-header/connection-wizard-header.component"; +import {ConnectionPropertiesViewComponent} from "./connection-properties-view/connection-properties-view.component"; +import {BrowserModule} from "@angular/platform-browser"; + +@NgModule({ + declarations: [ + FromNodeStepComponent, + ToNodeStepComponent, + PropertiesStepComponent, + ConnectionWizardHeaderComponent, + ConnectionPropertiesViewComponent + ], + imports: [ + FormElementsModule, + PropertyTableModule, + SelectRequirementOrCapabilityModule, + BrowserModule + ], + exports: [ + FromNodeStepComponent, + ToNodeStepComponent, + PropertiesStepComponent, + ConnectionWizardHeaderComponent, + ConnectionPropertiesViewComponent + ], + entryComponents: [FromNodeStepComponent, + ToNodeStepComponent, + PropertiesStepComponent, + ConnectionWizardHeaderComponent, + ConnectionPropertiesViewComponent + ], + providers: [ConnectionWizardService] +}) +export class ConnectionWizardModule { +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.service.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.service.ts new file mode 100644 index 0000000000..a097fb04ea --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.service.ts @@ -0,0 +1,67 @@ +import {ConnectRelationModel} from "../../../models/graph/connectRelationModel"; +import {Injectable} from "@angular/core"; +import { Requirement, Capability} from "app/models"; +import {Dictionary} from "lodash"; +import {Match, Component, PropertyFEModel} from "app/models"; + +@Injectable() +export class ConnectionWizardService { + + connectRelationModel:ConnectRelationModel; + currentComponent:Component; + selectedMatch:Match; + changedCapabilityProperties:PropertyFEModel[]; + + constructor() { + this.changedCapabilityProperties = []; + } + + public setRelationMenuDirectiveObj = (connectRelationModel:ConnectRelationModel) => { + this.connectRelationModel = connectRelationModel; + // this.selectedCapability = rel + } + + + // getComponentInstanceIdOfSelectedCapability = (): string => { + // if(this.selectedMatch.capability){ + // if(this.selectedMatch.isFromTo) { + // return this.selectedMatch.toNode; + // } else { + // return this.selectedMatch.fromNode; + // } + // } + // return ''; + // + // } + + getOptionalRequirementsByInstanceUniqueId = (isFromTo: boolean, matchWith?:Capability): Dictionary => { + let requirements: Array = []; + _.forEach(this.connectRelationModel.possibleRelations, (match: Match) => { + if(!matchWith || match.capability.uniqueId == matchWith.uniqueId){ + if(match.isFromTo == isFromTo){ + requirements.push(match.requirement); + } + } + }); + requirements = _.uniqBy(requirements, (req:Requirement)=>{ + return req.ownerId + req.uniqueId + req.name; + }); + return _.groupBy(requirements, 'capability'); + } + + getOptionalCapabilitiesByInstanceUniqueId = (isFromTo: boolean, matchWith?:Requirement): Dictionary => { + let capabilities: Array = []; + _.forEach(this.connectRelationModel.possibleRelations, (match: Match) => { + if(!matchWith || match.requirement.uniqueId == matchWith.uniqueId){ + if(match.isFromTo == isFromTo){ + capabilities.push(match.capability); + } + } + }); + capabilities = _.uniqBy(capabilities, (cap:Capability)=>{ + return cap.ownerId + cap.uniqueId + cap.name; + }); + return _.groupBy(capabilities, 'type'); + } +} + diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.html new file mode 100644 index 0000000000..0c9d9e6e26 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.html @@ -0,0 +1,8 @@ + + \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.ts new file mode 100644 index 0000000000..edbbf8a0a3 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.ts @@ -0,0 +1,49 @@ +import {Component, OnInit, Inject, forwardRef} from "@angular/core"; +import {IStepComponent} from "../../../../models/wizard-step"; +import {Dictionary} from "lodash"; +import { Match} from "app/models"; +import {ConnectionWizardService} from "../connection-wizard.service"; +import {Requirement} from "../../../../models/requirement"; +import {Capability} from "../../../../models/capability"; +import {PropertyModel} from "../../../../models/properties"; + +@Component({ + selector: 'from-node-step', + templateUrl: './from-node-step.component.html' +}) + +export class FromNodeStepComponent implements IStepComponent, OnInit{ + + constructor(@Inject(forwardRef(() => ConnectionWizardService)) public connectWizardService: ConnectionWizardService) {} + + optionalRequirementsMap: Dictionary; + optionalCapabilitiesMap: Dictionary; + + ngOnInit(){ + this.optionalRequirementsMap = this.connectWizardService.getOptionalRequirementsByInstanceUniqueId(true); + this.optionalCapabilitiesMap = this.connectWizardService.getOptionalCapabilitiesByInstanceUniqueId(false); + } + + preventNext = ():boolean => { + return !this.connectWizardService.selectedMatch || (!this.connectWizardService.selectedMatch.capability && !this.connectWizardService.selectedMatch.requirement); + } + + preventBack = ():boolean => { + return true; + } + + onCapabilityPropertiesUpdate(capabilityProperties:Array) { + this.connectWizardService.selectedMatch.capabilityProperties = capabilityProperties; + } + + private updateSelectedReqOrCap = (selected:Requirement|Capability):void => { + if(!selected){ + this.connectWizardService.selectedMatch = null; + } else if(selected instanceof Requirement){ + this.connectWizardService.selectedMatch = new Match(selected, null, true, this.connectWizardService.connectRelationModel.fromNode.componentInstance.uniqueId, null); + } else{ + this.connectWizardService.selectedMatch = new Match(null,selected , false, null, this.connectWizardService.connectRelationModel.fromNode.componentInstance.uniqueId); + } + } + +} diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.html new file mode 100644 index 0000000000..9e34893272 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.html @@ -0,0 +1,13 @@ +
+ + {{(connectWizardService.selectedMatch.capability && connectWizardService.selectedMatch.capability.getTitle()) || connectWizardService.selectedMatch.relationship.relation.capability}} + +
+
+ + +
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.less b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.less new file mode 100644 index 0000000000..8e9e07c0d5 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.less @@ -0,0 +1,15 @@ +@import '../../../../../assets/styles/variables'; +.title{ + margin-bottom: 20px; + .capability-name-label{ + font-size: 13px; + } + .capability-name{ + font-family: @font-opensans-medium; + color: @main_color_a; + } +} +.properties-table-container{ + height: 362px; + overflow-y: auto; +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.ts new file mode 100644 index 0000000000..3e48785a3c --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.ts @@ -0,0 +1,67 @@ +/** + * Created by ob0695 on 9/4/2017. + */ +/** + * Created by rc2122 on 9/4/2017. + */ +import {Component, Inject, forwardRef} from '@angular/core'; +import {IStepComponent} from "app/models" +import {ConnectionWizardService} from "../connection-wizard.service"; +import {PropertyFEModel} from "../../../../models/properties-inputs/property-fe-model"; +import {InstanceFePropertiesMap} from "../../../../models/properties-inputs/property-fe-map"; +import {PropertiesUtils} from "../../properties-assignment/services/properties.utils"; +import {ComponentInstanceServiceNg2} from "../../../services/component-instance-services/component-instance.service"; + +@Component({ + selector: 'properties-step', + templateUrl: './properties-step.component.html', + styleUrls: ['./properties-step.component.less'] +}) + +export class PropertiesStepComponent implements IStepComponent{ + + capabilityPropertiesMap: InstanceFePropertiesMap; + savingProperty:boolean = false; + + constructor(@Inject(forwardRef(() => ConnectionWizardService)) public connectWizardService: ConnectionWizardService, private componentInstanceServiceNg2:ComponentInstanceServiceNg2, private propertiesUtils:PropertiesUtils) { + + this.capabilityPropertiesMap = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({'capability' : connectWizardService.selectedMatch.capabilityProperties}, false); + } + + ngOnInit() { + this.connectWizardService.changedCapabilityProperties = []; + } + + onPropertySelectedUpdate = ($event) => { + console.log("==>" + 'PROPERTY VALUE SELECTED'); + // this.selectedFlatProperty = $event; + // let parentProperty:PropertyFEModel = this.propertiesService.getParentPropertyFEModelFromPath(this.instanceFePropertiesMap[this.selectedFlatProperty.instanceName], this.selectedFlatProperty.path); + // parentProperty.expandedChildPropertyId = this.selectedFlatProperty.path; + }; + + propertyValueChanged = (property: PropertyFEModel) => { + if (!property.isDeclared) { + const propChangedIdx = this.connectWizardService.changedCapabilityProperties.indexOf(property); + if (this.componentInstanceServiceNg2.hasPropertyChanged(property)) { + console.log("==>" + this.constructor.name + ": propertyValueChanged " + property); + if (propChangedIdx === -1) { + this.connectWizardService.changedCapabilityProperties.push(property); + } + } + else { + if (propChangedIdx !== -1) { + console.log("==>" + this.constructor.name + ": propertyValueChanged (reset to original) " + property); + this.connectWizardService.changedCapabilityProperties.splice(propChangedIdx, 1); + } + } + } + }; + + preventNext = ():boolean => { + return false; + } + + preventBack = ():boolean => { + return this.savingProperty; + } +} diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.html new file mode 100644 index 0000000000..67bb12e6fc --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.html @@ -0,0 +1,9 @@ + + \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.ts new file mode 100644 index 0000000000..9c7bf4dfe6 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.ts @@ -0,0 +1,69 @@ +import {Component, forwardRef, Inject} from '@angular/core'; +import {IStepComponent} from "app/models" +import {Dictionary} from "lodash"; +import {ConnectionWizardService} from "../connection-wizard.service"; +import {Match} from "../../../../models/graph/match-relation"; +import {Requirement} from "../../../../models/requirement"; +import {Capability} from "../../../../models/capability"; +import {PropertyModel} from "../../../../models/properties"; + +@Component({ + selector: 'to-node-step', + templateUrl: './to-node-step.component.html' +}) + +export class ToNodeStepComponent implements IStepComponent{ + + displayRequirementsOrCapabilities:string; //get 'Requirement' or 'Capability' + optionalRequirementsMap: Dictionary = {}; + optionalCapabilitiesMap: Dictionary ={}; + + constructor(@Inject(forwardRef(() => ConnectionWizardService)) public connectWizardService: ConnectionWizardService) { + } + + ngOnInit(){ + if(this.connectWizardService.selectedMatch.isFromTo){ + this.displayRequirementsOrCapabilities = 'Capability'; + this.optionalRequirementsMap = {}; + this.optionalCapabilitiesMap = this.connectWizardService.getOptionalCapabilitiesByInstanceUniqueId(true, this.connectWizardService.selectedMatch.requirement); + }else{ + this.displayRequirementsOrCapabilities = 'Requirement'; + this.optionalRequirementsMap = this.connectWizardService.getOptionalRequirementsByInstanceUniqueId(false, this.connectWizardService.selectedMatch.capability); + this.optionalCapabilitiesMap = {} + } + + + } + + preventNext = ():boolean => { + return !this.connectWizardService.selectedMatch.capability || !this.connectWizardService.selectedMatch.requirement; + } + + preventBack = ():boolean => { + return false; + } + + onCapabilityPropertiesUpdate(capabilityProperties:Array) { + this.connectWizardService.selectedMatch.capabilityProperties = capabilityProperties; + } + + private updateSelectedReqOrCap = (selected:Requirement|Capability):void => { + if (!selected) { + if (this.connectWizardService.selectedMatch.isFromTo) { + this.connectWizardService.selectedMatch.capability = undefined; + this.connectWizardService.selectedMatch.toNode = undefined; + } else { + this.connectWizardService.selectedMatch.requirement = undefined; + this.connectWizardService.selectedMatch.fromNode = undefined; + } + } else if (selected instanceof Requirement) { + this.connectWizardService.selectedMatch.requirement = selected; + this.connectWizardService.selectedMatch.fromNode = this.connectWizardService.connectRelationModel.toNode.componentInstance.uniqueId; + } else { + this.connectWizardService.selectedMatch.capability = selected; + this.connectWizardService.selectedMatch.toNode = this.connectWizardService.connectRelationModel.toNode.componentInstance.uniqueId; + } + this.connectWizardService.selectedMatch.relationship = undefined; + } + +} diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts index 1c6f51314d..203c75dd11 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts @@ -17,70 +17,43 @@ * limitations under the License. * ============LICENSE_END========================================================= */ - import { NgModule } from "@angular/core"; -import { PropertiesAssignmentComponent } from "./properties-assignment.page.component"; -import { HierarchyNavigationComponent } from "./../../components/hierarchy-navigtion/hierarchy-navigation.component"; -import { BrowserModule } from "@angular/platform-browser"; -import { FormsModule } from "@angular/forms"; -import { HttpModule } from "@angular/http"; -import { TabModule } from '../../shared/tabs/tabs.module'; -import { CheckboxModule} from '../../shared/checkbox/checkbox.module'; -import { PropertiesTableComponent } from '../../components/properties-table/properties-table.component'; -import { InputsTableComponent } from '../../components/inputs-table/inputs-table.component'; -import { ContentAfterLastDotPipe } from "../../pipes/contentAfterLastDot.pipe"; -import { SearchFilterPipe } from "../../pipes/searchFilter.pipe"; -import { FilterChildPropertiesPipe } from "../../pipes/filterChildProperties.pipe"; -import { DataTypeService } from './../../services/data-type.service'; -import { PropertiesService } from './../../services/properties.service'; -import { HierarchyNavService } from './../../services/hierarchy-nav.service'; -import { PropertiesUtils } from './properties.utils'; -import { DynamicElementModule } from 'app/ng2/components/dynamic-element/dynamic-element.module'; -import { DynamicPropertyComponent } from './../../components/properties-table/dynamic-property/dynamic-property.component'; -import { PopoverModule } from "../../components/popover/popover.module"; -import { ModalModule } from "../../components/modal/modal.module"; -import { FilterPropertiesAssignmentComponent } from "./../../components/filter-properties-assignment/filter-properties-assignment.component"; -import { GroupByPipe } from 'app/ng2/pipes/groupBy.pipe'; -import { KeysPipe } from 'app/ng2/pipes/keys.pipe'; -import {TooltipModule} from "../../components/tooltip/tooltip.module"; -import { ComponentModeService } from "app/ng2/services/component-mode.service" -import {LoaderComponent} from "app/ng2/components/loader/loader.component" +import {HierarchyNavigationComponent} from "../../components/logic/hierarchy-navigtion/hierarchy-navigation.component"; +import {HttpModule} from "@angular/http"; +import {FormsModule} from "@angular/forms"; +import {PropertyTableModule} from "../../components/logic/properties-table/property-table.module"; +import {UiElementsModule} from "../../components/ui/ui-elements.module"; +import {GlobalPipesModule} from "../../pipes/global-pipes.module"; +import {BrowserModule} from "@angular/platform-browser"; +import {FilterPropertiesAssignmentComponent} from "../../components/logic/filter-properties-assignment/filter-properties-assignment.component"; +import {InputsTableComponent} from "../../components/logic/inputs-table/inputs-table.component"; +import {PropertiesService} from "../../services/properties.service"; +import {DataTypeService} from "../../services/data-type.service"; +import {PropertiesAssignmentComponent} from "./properties-assignment.page.component"; +import {HierarchyNavService} from "./services/hierarchy-nav.service"; +import {PropertiesUtils} from "./services/properties.utils"; +import {ComponentModeService} from "../../services/component-services/component-mode.service"; @NgModule({ declarations: [ PropertiesAssignmentComponent, - PropertiesTableComponent, InputsTableComponent, - ContentAfterLastDotPipe, - GroupByPipe, - KeysPipe, - SearchFilterPipe, - FilterChildPropertiesPipe, HierarchyNavigationComponent, - DynamicPropertyComponent, - // PopoverContentComponent, - // PopoverComponent, - FilterPropertiesAssignmentComponent, - LoaderComponent + FilterPropertiesAssignmentComponent ], imports: [ BrowserModule, FormsModule, HttpModule, - TabModule, - CheckboxModule, - DynamicElementModule, - PopoverModule, - TooltipModule, - ModalModule - ], + GlobalPipesModule, + PropertyTableModule, + UiElementsModule], + entryComponents: [PropertiesAssignmentComponent], exports: [ PropertiesAssignmentComponent - // PopoverContentComponent, - // PopoverComponent ], - providers: [PropertiesService, HierarchyNavService, PropertiesUtils, DataTypeService, ContentAfterLastDotPipe, GroupByPipe, KeysPipe, ComponentModeService] + providers: [PropertiesService, HierarchyNavService, PropertiesUtils, DataTypeService, ComponentModeService] }) export class PropertiesAssignmentModule { diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html index be7e03dccd..beea3fe73f 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html @@ -11,6 +11,7 @@ [propertyNameSearchText]="searchPropertyName" [readonly]="isReadonly" [isLoading]="loadingProperties" + [hasDeclareOption]="true" (valueChanged)="propertyValueChanged($event)" (propertySelected)="propertySelected($event)" (selectPropertyRow)="selectPropertyRow($event)" @@ -31,12 +32,12 @@
- Clear All - - + Clear All + +
- +
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts index 82754f13f0..9603648bd8 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts @@ -20,21 +20,22 @@ import {Component, ViewChild, ElementRef, Renderer, Inject} from "@angular/core"; import { PropertiesService } from "../../services/properties.service"; -import { HierarchyNavService } from "../../services/hierarchy-nav.service"; -import { PropertiesUtils } from './properties.utils'; import { PropertyFEModel, InstanceFePropertiesMap, InstanceBePropertiesMap, InstancePropertiesAPIMap, Component as ComponentData, FilterPropertiesAssignmentData } from "app/models"; -import { PROPERTY_TYPES, ResourceType } from "app/utils"; +import { ResourceType } from "app/utils"; import property = require("lodash/property"); import {ComponentServiceNg2} from "../../services/component-services/component.service"; import {ComponentInstanceServiceNg2} from "../../services/component-instance-services/component-instance.service" -import { InputBEModel, InputFEModel, ComponentInstance, PropertyBEModel, DerivedPropertyType, DerivedFEProperty, ResourceInstance, SimpleFlatProperty } from "app/models"; -import {HierarchyDisplayOptions} from "../../components/hierarchy-navigtion/hierarchy-display-options" -import {PropertyRowSelectedEvent} from "./../../components/properties-table/properties-table.component"; +import { InputBEModel, InputFEModel, ComponentInstance, PropertyBEModel, DerivedFEProperty, ResourceInstance, SimpleFlatProperty } from "app/models"; import { KeysPipe } from 'app/ng2/pipes/keys.pipe'; -import {FilterPropertiesAssignmentComponent} from "../../components/filter-properties-assignment/filter-properties-assignment.component"; -import { ComponentModeService } from "app/ng2/services/component-mode.service" import {WorkspaceMode, EVENTS} from "../../../utils/constants"; import {EventListenerService} from "app/services/event-listener-service" +import {HierarchyDisplayOptions} from "../../components/logic/hierarchy-navigtion/hierarchy-display-options"; +import {FilterPropertiesAssignmentComponent} from "../../components/logic/filter-properties-assignment/filter-properties-assignment.component"; +import {PropertyRowSelectedEvent} from "../../components/logic/properties-table/properties-table.component"; +import {HierarchyNavService} from "./services/hierarchy-nav.service"; +import {PropertiesUtils} from "./services/properties.utils"; +import {ComponentModeService} from "../../services/component-services/component-mode.service"; + @Component({ templateUrl: './properties-assignment.page.component.html', styleUrls: ['./properties-assignment.page.component.less'] diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts deleted file mode 100644 index d8d991d218..0000000000 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts +++ /dev/null @@ -1,181 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Injectable } from '@angular/core'; -import { DataTypeModel, PropertyFEModel, PropertyBEModel, InstanceBePropertiesMap, InstanceFePropertiesMap, SchemaProperty, DerivedFEProperty, DerivedFEPropertyMap, DerivedPropertyType, InputFEModel} from "app/models"; -import { DataTypeService } from "app/ng2/services/data-type.service"; -import { PropertiesService } from "app/ng2/services/properties.service"; -import { PROPERTY_TYPES } from "app/utils"; -import { UUID } from "angular2-uuid"; - -@Injectable() -export class PropertiesUtils { - - constructor(private dataTypeService:DataTypeService, private propertiesService: PropertiesService) {} - - /** - * Entry point when getting properties from server - * For each instance, loop through each property, and: - * 1. Create flattened children - * 2. Check against inputs to see if any props are declared and disable them - * 3. Initialize valueObj (which also creates any new list/map flattened children as needed) - * Returns InstanceFePropertiesMap - */ - public convertPropertiesMapToFEAndCreateChildren = (instancePropertiesMap:InstanceBePropertiesMap, isVF:boolean, inputs?:Array): InstanceFePropertiesMap => { - let instanceFePropertiesMap:InstanceFePropertiesMap = new InstanceFePropertiesMap(); - angular.forEach(instancePropertiesMap, (properties:Array, instanceId:string) => { - let propertyFeArray: Array = []; - _.forEach(properties, (property: PropertyBEModel) => { - - if (this.dataTypeService.getDataTypeByTypeName(property.type)) { // if type not exist in data types remove property from list - - let newFEProp: PropertyFEModel = new PropertyFEModel(property); //Convert property to FE - - if (newFEProp.derivedDataType == DerivedPropertyType.COMPLEX) { //Create children if prop is not simple, list, or map. - newFEProp.flattenedChildren = this.createFlattenedChildren(newFEProp.type, newFEProp.name); - } - if (newFEProp.getInputValues && newFEProp.getInputValues.length) { //if this prop (or any children) are declared, set isDeclared and disable checkbox on parents/children - newFEProp.getInputValues.forEach(propInputDetail => { - let inputPath = propInputDetail.inputPath; - if (!inputPath) { //TODO: this is a workaround until Marina adds inputPath - let input = inputs.find(input => input.uniqueId == propInputDetail.inputId); - if (!input) { console.log("CANNOT FIND INPUT FOR " + propInputDetail.inputId); return; } - else inputPath = input.inputPath; - } - if (inputPath == newFEProp.name) inputPath = undefined; // if not complex we need to remove the inputPath from FEModel so we not look for a child - newFEProp.setAsDeclared(inputPath); //if a path is sent, its a child prop. this param is optional - this.propertiesService.disableRelatedProperties(newFEProp, inputPath); - }); - } - this.initValueObjectRef(newFEProp); //initialize valueObj. - propertyFeArray.push(newFEProp); - newFEProp.updateExpandedChildPropertyId(newFEProp.name); //display only the first level of children - this.dataTypeService.checkForCustomBehavior(newFEProp); - } - }); - instanceFePropertiesMap[instanceId] = propertyFeArray; - - }); - return instanceFePropertiesMap; - } - - public createListOrMapChildren = (property:PropertyFEModel | DerivedFEProperty, key: string, valueObj: any): Array => { - let newProps: Array = []; - let parentProp = new DerivedFEProperty(property, property.propertiesName, true, key, valueObj); - newProps.push(parentProp); - - if (!property.schema.property.isSimpleType) { - let additionalChildren:Array = this.createFlattenedChildren(property.schema.property.type, parentProp.propertiesName); - this.assignFlattenedChildrenValues(parentProp.valueObj, additionalChildren, parentProp.propertiesName); - additionalChildren.forEach(prop => prop.canBeDeclared = false); - newProps.push(...additionalChildren); - } - return newProps; - } - - /** - * Creates derivedFEProperties of a specified type and returns them. - */ - private createFlattenedChildren = (type: string, parentName: string):Array => { - let tempProps: Array = []; - let dataTypeObj: DataTypeModel = this.dataTypeService.getDataTypeByTypeName(type); - this.dataTypeService.getDerivedDataTypeProperties(dataTypeObj, tempProps, parentName); - return tempProps; - } - - /* Sets the valueObj of parent property and its children. - * Note: This logic is different than assignflattenedchildrenvalues - here we merge values, there we pick either the parents value, props value, or default value - without merging. - */ - public initValueObjectRef = (property: PropertyFEModel): void => { - if (property.derivedDataType == DerivedPropertyType.SIMPLE || property.isDeclared) { //if property is declared, it gets a simple input instead. List and map values and pseudo-children will be handled in property component - property.valueObj = property.value || property.defaultValue; - - if (property.isDeclared && typeof property.valueObj == 'object') property.valueObj = JSON.stringify(property.valueObj); - } else { - if (property.derivedDataType == DerivedPropertyType.LIST) { - property.valueObj = _.merge([], JSON.parse(property.defaultValue || '[]'), JSON.parse(property.value || '[]')); //value object should be merged value and default value. Value takes higher precendence. Set valueObj to empty obj if undefined. - } else { - property.valueObj = _.merge({}, JSON.parse(property.defaultValue || '{}'), JSON.parse(property.value || '{}')); //value object should be merged value and default value. Value takes higher precendence. Set valueObj to empty obj if undefined. - } - if ((property.derivedDataType == DerivedPropertyType.LIST || property.derivedDataType == DerivedPropertyType.MAP) && Object.keys(property.valueObj).length) { - Object.keys(property.valueObj).forEach((key) => { - property.flattenedChildren.push(...this.createListOrMapChildren(property, key, property.valueObj[key])) - }); - } else { - this.assignFlattenedChildrenValues(property.valueObj, property.flattenedChildren, property.name); - } - } - } - - /* - * Loops through flattened properties array and to assign values - * Then, convert any neccessary strings to objects, and vis-versa - * For list or map property, creates new children props if valueObj has values - */ - public assignFlattenedChildrenValues = (parentValueJSON: any, derivedPropArray: Array, parentName: string) => { - if (!derivedPropArray || !parentName) return; - let propsToPushMap: Map> = new Map>(); - derivedPropArray.forEach((prop, index) => { - - let propNameInObj = prop.propertiesName.substring(prop.propertiesName.indexOf(parentName) + parentName.length + 1).split('#').join('.'); //extract everything after parent name - prop.valueObj = _.get(parentValueJSON, propNameInObj, prop.value || prop.defaultValue); //assign value -first value of parent if exists. If not, prop.value if not, prop.defaultvalue - - if ( prop.isDeclared && typeof prop.valueObj == 'object') { //Stringify objects of items that are declared - prop.valueObj = JSON.stringify(prop.valueObj); - } else if(typeof prop.valueObj == PROPERTY_TYPES.STRING - && (prop.type == PROPERTY_TYPES.INTEGER || prop.type == PROPERTY_TYPES.FLOAT || prop.type == PROPERTY_TYPES.BOOLEAN)){ //parse ints and non-string simple types - prop.valueObj = JSON.parse(prop.valueObj); - } else { //parse strings that should be objects - if (prop.derivedDataType == DerivedPropertyType.COMPLEX && typeof prop.valueObj != 'object') { - prop.valueObj = JSON.parse(prop.valueObj || '{}'); - } else if (prop.derivedDataType == DerivedPropertyType.LIST && typeof prop.valueObj != 'object') { - prop.valueObj = JSON.parse(prop.valueObj || '[]'); - } else if (prop.derivedDataType == DerivedPropertyType.MAP && typeof prop.valueObj != 'object' && (!prop.isChildOfListOrMap || !prop.schema.property.isSimpleType)) { //dont parse values for children of map of simple - prop.valueObj = JSON.parse(prop.valueObj || '{}'); - } - if ((prop.derivedDataType == DerivedPropertyType.LIST || prop.derivedDataType == DerivedPropertyType.MAP) && typeof prop.valueObj == 'object' && Object.keys(prop.valueObj).length) { - let newProps: Array = []; - Object.keys(prop.valueObj).forEach((key) => { - newProps.push(...this.createListOrMapChildren(prop, key, prop.valueObj[key]));//create new children, assign their values, and then add to array - }); - propsToPushMap[index + 1] = newProps; - } - } - }); - - //add props after we're done looping (otherwise our loop gets messed up). Push in reverse order, so we dont mess up indexes. - Object.keys(propsToPushMap).reverse().forEach((indexToInsert) => { - derivedPropArray.splice(+indexToInsert, 0, ...propsToPushMap[indexToInsert]); //slacker parsing - }); - } - - public resetPropertyValue = (property: PropertyFEModel, newValue: string, nestedPath?: string): void => { - property.value = newValue; - if (nestedPath) { - let newProp = property.flattenedChildren.find(prop => prop.propertiesName == nestedPath); - newProp && this.assignFlattenedChildrenValues(JSON.parse(newValue), [newProp], property.name); - } else { - this.initValueObjectRef(property); - } - } - - - -} diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/services/hierarchy-nav.service.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/services/hierarchy-nav.service.ts new file mode 100644 index 0000000000..016b04788e --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/services/hierarchy-nav.service.ts @@ -0,0 +1,83 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Injectable } from '@angular/core'; +import { SimpleFlatProperty, PropertyFEModel, DerivedFEProperty } from 'app/models'; + + +@Injectable() +export class HierarchyNavService { + /** + * Build hirarchy structure for the tree when user selects on table row. + * First create Array and insert also the parent (PropertyFEModel) to this array. + * The Array is flat and contains SimpleFlatProperty that has parentName and uniqueId. + * Now we build hirarchy from this Array (that includes childrens) and return it for the tree + * + * @argument property: PropertyFEModel - property contains flattenedChildren array of DerivedFEProperty + * @returns Array - containing childrens Array, augmantin childrens to SimpleFlatProperty. + */ + public getSimplePropertiesTree(property: PropertyFEModel, instanceName: string): Array { + // Build Array of SimpleFlatProperty before unflatten function + let flattenProperties: Array = []; + flattenProperties.push(this.createSimpleFlatProperty(property, instanceName)); // Push the root property + _.each(property.flattenedChildren, (child: DerivedFEProperty): void => { + if (child.isChildOfListOrMap && child.schema.property.isSimpleType) return; //do not display non-complex children of list or map + flattenProperties.push(this.createSimpleFlatProperty(child, instanceName)); + }); + + let tree = this.unflatten(flattenProperties, '', []); + return tree[0].childrens; // Return the childrens without the root. + } + + public createSimpleFlatProperty = (property: PropertyFEModel | DerivedFEProperty, instanceName:string): SimpleFlatProperty => { + if (property instanceof PropertyFEModel) { + return new SimpleFlatProperty(property.uniqueId, property.name, property.name, '', instanceName); + } else { + let propName: string = (property.isChildOfListOrMap) ? property.mapKey : property.name; + return new SimpleFlatProperty(property.uniqueId, property.propertiesName, propName, property.parentName, instanceName); + } + + } + + /** + * Unflatten Array and build hirarchy. + * The result will be Array that augmantin with childrens for each SimpleFlatProperty. + */ + private unflatten(array: Array, parent: any, tree?: any): any { + tree = typeof tree !== 'undefined' ? tree : []; + parent = typeof parent !== 'undefined' && parent !== '' ? parent : { path: '' }; + + var childrens = _.filter(array, (child: SimpleFlatProperty): boolean => { + return child.parentName == parent.path; + }); + + if (!_.isEmpty(childrens)) { + if (parent.path == '') { + tree = childrens; + } else { + parent['childrens'] = childrens; + } + _.each(childrens, (child): void => { + this.unflatten(array, child); + }); + } + return tree; + } +} diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts new file mode 100644 index 0000000000..8f46c6f603 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts @@ -0,0 +1,188 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Injectable } from '@angular/core'; +import { DataTypeModel, PropertyFEModel, PropertyBEModel, InstanceBePropertiesMap, InstanceFePropertiesMap, DerivedFEProperty, DerivedPropertyType, InputFEModel} from "app/models"; +import { DataTypeService } from "app/ng2/services/data-type.service"; +import { PropertiesService } from "app/ng2/services/properties.service"; +import { PROPERTY_TYPES, PROPERTY_DATA } from "app/utils"; + +@Injectable() +export class PropertiesUtils { + + constructor(private dataTypeService:DataTypeService, private propertiesService: PropertiesService) {} + + /** + * Entry point when getting properties from server + * For each instance, loop through each property, and: + * 1. Create flattened children + * 2. Check against inputs to see if any props are declared and disable them + * 3. Initialize valueObj (which also creates any new list/map flattened children as needed) + * Returns InstanceFePropertiesMap + */ + public convertPropertiesMapToFEAndCreateChildren = (instancePropertiesMap:InstanceBePropertiesMap, isVF:boolean, inputs?:Array): InstanceFePropertiesMap => { + let instanceFePropertiesMap:InstanceFePropertiesMap = new InstanceFePropertiesMap(); + angular.forEach(instancePropertiesMap, (properties:Array, instanceId:string) => { + let propertyFeArray: Array = []; + _.forEach(properties, (property: PropertyBEModel) => { + + if (this.dataTypeService.getDataTypeByTypeName(property.type)) { // if type not exist in data types remove property from list + + let newFEProp: PropertyFEModel = new PropertyFEModel(property); //Convert property to FE + + if (newFEProp.derivedDataType == DerivedPropertyType.COMPLEX) { //Create children if prop is not simple, list, or map. + newFEProp.flattenedChildren = this.createFlattenedChildren(newFEProp.type, newFEProp.name); + } + if (newFEProp.getInputValues && newFEProp.getInputValues.length) { //if this prop (or any children) are declared, set isDeclared and disable checkbox on parents/children + newFEProp.getInputValues.forEach(propInputDetail => { + let inputPath = propInputDetail.inputPath; + if (!inputPath) { //TODO: this is a workaround until Marina adds inputPath + let input = inputs.find(input => input.uniqueId == propInputDetail.inputId); + if (!input) { console.log("CANNOT FIND INPUT FOR " + propInputDetail.inputId); return; } + else inputPath = input.inputPath; + } + if (inputPath == newFEProp.name) inputPath = undefined; // if not complex we need to remove the inputPath from FEModel so we not look for a child + newFEProp.setAsDeclared(inputPath); //if a path is sent, its a child prop. this param is optional + this.propertiesService.disableRelatedProperties(newFEProp, inputPath); + }); + } + this.initValueObjectRef(newFEProp); //initialize valueObj. + propertyFeArray.push(newFEProp); + newFEProp.updateExpandedChildPropertyId(newFEProp.name); //display only the first level of children + this.dataTypeService.checkForCustomBehavior(newFEProp); + } + }); + instanceFePropertiesMap[instanceId] = propertyFeArray; + + }); + return instanceFePropertiesMap; + } + + public createListOrMapChildren = (property:PropertyFEModel | DerivedFEProperty, key: string, valueObj: any): Array => { + let newProps: Array = []; + let parentProp = new DerivedFEProperty(property, property.propertiesName, true, key, valueObj); + newProps.push(parentProp); + + if (!property.schema.property.isSimpleType) { + let additionalChildren:Array = this.createFlattenedChildren(property.schema.property.type, parentProp.propertiesName); + this.assignFlattenedChildrenValues(parentProp.valueObj, additionalChildren, parentProp.propertiesName); + additionalChildren.forEach(prop => prop.canBeDeclared = false); + newProps.push(...additionalChildren); + } + return newProps; + } + + /** + * Creates derivedFEProperties of a specified type and returns them. + */ + private createFlattenedChildren = (type: string, parentName: string):Array => { + let tempProps: Array = []; + let dataTypeObj: DataTypeModel = this.dataTypeService.getDataTypeByTypeName(type); + this.dataTypeService.getDerivedDataTypeProperties(dataTypeObj, tempProps, parentName); + return tempProps; + } + + /* Sets the valueObj of parent property and its children. + * Note: This logic is different than assignflattenedchildrenvalues - here we merge values, there we pick either the parents value, props value, or default value - without merging. + */ + public initValueObjectRef = (property: PropertyFEModel): void => { + if (property.derivedDataType == DerivedPropertyType.SIMPLE || property.isDeclared) { //if property is declared, it gets a simple input instead. List and map values and pseudo-children will be handled in property component + property.valueObj = property.value || property.defaultValue; + if (property.isDeclared) { + if(typeof property.valueObj == 'object'){ + property.valueObj = JSON.stringify(property.valueObj); + } + }else if(property.valueObj && + property.type !== PROPERTY_TYPES.STRING && + property.type !== PROPERTY_TYPES.JSON && + PROPERTY_DATA.SCALAR_TYPES.indexOf(property.type) == -1){ + property.valueObj = JSON.parse(property.valueObj);//The valueObj contains the real value ans not the value as string + } + } else { + if (property.derivedDataType == DerivedPropertyType.LIST) { + property.valueObj = _.merge([], JSON.parse(property.defaultValue || '[]'), JSON.parse(property.value || '[]')); //value object should be merged value and default value. Value takes higher precendence. Set valueObj to empty obj if undefined. + } else { + property.valueObj = _.merge({}, JSON.parse(property.defaultValue || '{}'), JSON.parse(property.value || '{}')); //value object should be merged value and default value. Value takes higher precendence. Set valueObj to empty obj if undefined. + } + if ((property.derivedDataType == DerivedPropertyType.LIST || property.derivedDataType == DerivedPropertyType.MAP) && Object.keys(property.valueObj).length) { + Object.keys(property.valueObj).forEach((key) => { + property.flattenedChildren.push(...this.createListOrMapChildren(property, key, property.valueObj[key])) + }); + } else { + this.assignFlattenedChildrenValues(property.valueObj, property.flattenedChildren, property.name); + } + } + } + + /* + * Loops through flattened properties array and to assign values + * Then, convert any neccessary strings to objects, and vis-versa + * For list or map property, creates new children props if valueObj has values + */ + public assignFlattenedChildrenValues = (parentValueJSON: any, derivedPropArray: Array, parentName: string) => { + if (!derivedPropArray || !parentName) return; + let propsToPushMap: Map> = new Map>(); + derivedPropArray.forEach((prop, index) => { + + let propNameInObj = prop.propertiesName.substring(prop.propertiesName.indexOf(parentName) + parentName.length + 1).split('#').join('.'); //extract everything after parent name + prop.valueObj = _.get(parentValueJSON, propNameInObj, prop.value || prop.defaultValue); //assign value -first value of parent if exists. If not, prop.value if not, prop.defaultvalue + + if ( prop.isDeclared && typeof prop.valueObj == 'object') { //Stringify objects of items that are declared + prop.valueObj = JSON.stringify(prop.valueObj); + } else if(typeof prop.valueObj == PROPERTY_TYPES.STRING + && (prop.type == PROPERTY_TYPES.INTEGER || prop.type == PROPERTY_TYPES.FLOAT || prop.type == PROPERTY_TYPES.BOOLEAN)){ //parse ints and non-string simple types + prop.valueObj = JSON.parse(prop.valueObj); + } else { //parse strings that should be objects + if (prop.derivedDataType == DerivedPropertyType.COMPLEX && typeof prop.valueObj != 'object') { + prop.valueObj = JSON.parse(prop.valueObj || '{}'); + } else if (prop.derivedDataType == DerivedPropertyType.LIST && typeof prop.valueObj != 'object') { + prop.valueObj = JSON.parse(prop.valueObj || '[]'); + } else if (prop.derivedDataType == DerivedPropertyType.MAP && typeof prop.valueObj != 'object' && (!prop.isChildOfListOrMap || !prop.schema.property.isSimpleType)) { //dont parse values for children of map of simple + prop.valueObj = JSON.parse(prop.valueObj || '{}'); + } + if ((prop.derivedDataType == DerivedPropertyType.LIST || prop.derivedDataType == DerivedPropertyType.MAP) && typeof prop.valueObj == 'object' && Object.keys(prop.valueObj).length) { + let newProps: Array = []; + Object.keys(prop.valueObj).forEach((key) => { + newProps.push(...this.createListOrMapChildren(prop, key, prop.valueObj[key]));//create new children, assign their values, and then add to array + }); + propsToPushMap[index + 1] = newProps; + } + } + }); + + //add props after we're done looping (otherwise our loop gets messed up). Push in reverse order, so we dont mess up indexes. + Object.keys(propsToPushMap).reverse().forEach((indexToInsert) => { + derivedPropArray.splice(+indexToInsert, 0, ...propsToPushMap[indexToInsert]); //slacker parsing + }); + } + + public resetPropertyValue = (property: PropertyFEModel, newValue: string, nestedPath?: string): void => { + property.value = newValue; + if (nestedPath) { + let newProp = property.flattenedChildren.find(prop => prop.propertiesName == nestedPath); + newProp && this.assignFlattenedChildrenValues(JSON.parse(newValue), [newProp], property.name); + } else { + this.initValueObjectRef(property); + } + } + + + +} diff --git a/catalog-ui/src/app/ng2/pipes/filterChildProperties.pipe.ts b/catalog-ui/src/app/ng2/pipes/filterChildProperties.pipe.ts deleted file mode 100644 index 4520469594..0000000000 --- a/catalog-ui/src/app/ng2/pipes/filterChildProperties.pipe.ts +++ /dev/null @@ -1,38 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Pipe, PipeTransform } from '@angular/core'; -import { DerivedFEProperty } from 'app/models'; - -@Pipe({ - name: 'filterChildProperties', -}) -export class FilterChildPropertiesPipe implements PipeTransform { - public transform(childProperties: Array, parentId: string) { - if (!parentId || !childProperties) return childProperties; - - let validParents: Array = [parentId]; - while (parentId.lastIndexOf('#') > 0) { - parentId = parentId.substring(0, parentId.lastIndexOf('#')); - validParents.push(parentId); - } - return childProperties.filter(derivedProp => validParents.indexOf(derivedProp.parentName) > -1); - } -} diff --git a/catalog-ui/src/app/ng2/pipes/global-pipes.module.ts b/catalog-ui/src/app/ng2/pipes/global-pipes.module.ts new file mode 100644 index 0000000000..1d81a1a4bf --- /dev/null +++ b/catalog-ui/src/app/ng2/pipes/global-pipes.module.ts @@ -0,0 +1,24 @@ +import {ContentAfterLastDotPipe} from "./contentAfterLastDot.pipe"; +import {SearchFilterPipe} from "./searchFilter.pipe"; +import {KeysPipe} from "./keys.pipe"; +import {GroupByPipe} from "./groupBy.pipe"; +import {NgModule} from "@angular/core"; + +@NgModule({ + declarations: [ + ContentAfterLastDotPipe, + GroupByPipe, + KeysPipe, + SearchFilterPipe + + ], + + exports: [ + ContentAfterLastDotPipe, + GroupByPipe, + KeysPipe, + SearchFilterPipe + ] +}) + +export class GlobalPipesModule {} diff --git a/catalog-ui/src/app/ng2/services/authentication.service.ts b/catalog-ui/src/app/ng2/services/authentication.service.ts index 876385c832..1c6502dd0d 100644 --- a/catalog-ui/src/app/ng2/services/authentication.service.ts +++ b/catalog-ui/src/app/ng2/services/authentication.service.ts @@ -18,26 +18,23 @@ * ============LICENSE_END========================================================= */ -import { Injectable } from '@angular/core'; -import { sdc2Config } from './../../../main'; +import {Injectable, Inject} from '@angular/core'; import {IAppConfigurtaion, ICookie} from "../../models/app-config"; import {Response, Headers, RequestOptions, Http} from '@angular/http'; import {Cookie2Service} from "./cookie.service"; import { Observable } from 'rxjs/Observable'; +import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config"; @Injectable() export class AuthenticationService { - private cookieService:Cookie2Service; - private http:Http; - - constructor(cookieService:Cookie2Service, http: Http) { + constructor(private cookieService:Cookie2Service, private http: Http, @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) { this.cookieService = cookieService; this.http = http; } private getAuthHeaders():any { - let cookie:ICookie = sdc2Config.cookie; + let cookie:ICookie = this.sdcConfig.cookie; let authHeaders:any = {}; authHeaders[cookie.userFirstName] = this.cookieService.getFirstName(); authHeaders[cookie.userLastName] = this.cookieService.getLastName(); @@ -51,7 +48,7 @@ export class AuthenticationService { headers: new Headers(this.getAuthHeaders()) }); - let authUrl = sdc2Config.api.root + sdc2Config.api.GET_user_authorize; + let authUrl = this.sdcConfig.api.root + this.sdcConfig.api.GET_user_authorize; return this.http .get(authUrl, options) .map((res: Response) => res.json()); diff --git a/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts b/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts index 27de59de82..b852539edd 100644 --- a/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts +++ b/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts @@ -18,22 +18,23 @@ * ============LICENSE_END========================================================= */ -import {Injectable} from '@angular/core'; +import {Injectable, Inject} from '@angular/core'; import {Response, RequestOptions, Headers} from '@angular/http'; import { Observable } from 'rxjs/Observable'; -import {sdc2Config} from "../../../../main"; -import {PropertyBEModel} from "app/models"; +import {PropertyFEModel, PropertyBEModel} from "app/models"; import {CommonUtils} from "app/utils"; import {Component, ComponentInstance, InputModel} from "app/models"; import { HttpService } from '../http.service'; +import {SdcConfigToken, ISdcConfig} from "../../config/sdc-config.config"; +import {isEqual} from "lodash"; @Injectable() export class ComponentInstanceServiceNg2 { protected baseUrl; - constructor(private http: HttpService) { - this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root; + constructor(private http: HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) { + this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root; } getComponentInstanceProperties(component: Component, componentInstanceId: string): Observable> { @@ -59,6 +60,24 @@ export class ComponentInstanceServiceNg2 { }) } + getInstanceCapabilityProperties(component: Component, componentInstanceId: string, capabilityType: string, capabilityName: string): Observable> { + + return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstanceId + '/capability/' + capabilityType + + '/capabilityName/' + capabilityName + '/properties') + .map((res: Response) => { + return CommonUtils.initBeProperties(res.json()); + }) + } + + updateInstanceCapabilityProperties(component: Component, componentInstanceId: string, capabilityType: string, capabilityName: string, properties: PropertyBEModel[]): Observable { + + return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstanceId + '/capability/' + capabilityType + + '/capabilityName/' + capabilityName +'/properties', properties) + .map((res: Response) => { + return res.json().map((resProperty) => new PropertyBEModel(resProperty)); + }) + } + updateInstanceInput(component: Component, componentInstanceId: string, input: PropertyBEModel): Observable { return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstance/' + componentInstanceId + '/input', input) @@ -67,5 +86,9 @@ export class ComponentInstanceServiceNg2 { }) } - + hasPropertyChanged(property: PropertyFEModel) { + let oldValue: any = property.value; + const newValue = property.getJSONValue(); + return ((oldValue || newValue) && !isEqual(oldValue, newValue)); + } } diff --git a/catalog-ui/src/app/ng2/services/component-mode.service.ts b/catalog-ui/src/app/ng2/services/component-mode.service.ts deleted file mode 100644 index 2e60f6ac57..0000000000 --- a/catalog-ui/src/app/ng2/services/component-mode.service.ts +++ /dev/null @@ -1,49 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * 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========================================================= - */ - -/** - * Created by rc2122 on 5/23/2017. - */ -import { Injectable } from '@angular/core'; -import {WorkspaceMode, ComponentState, Role} from "../../utils/constants"; -import { Component as ComponentData } from "app/models"; -import { CacheService } from "app/services/cache-service" - -@Injectable() - -export class ComponentModeService { - - constructor(private cacheService:CacheService) { - } - - public getComponentMode = (component:ComponentData):WorkspaceMode => {//return if is edit or view for resource or service - let mode = WorkspaceMode.VIEW; - - let user = this.cacheService.get("user"); - if (component.lifecycleState === ComponentState.NOT_CERTIFIED_CHECKOUT && - component.lastUpdaterUserId === user.userId) { - if ((component.isService() || component.isResource()) && user.role == Role.DESIGNER) { - mode = WorkspaceMode.EDIT; - } - } - return mode; - } -} - diff --git a/catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts b/catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts new file mode 100644 index 0000000000..b0cc1b8f1a --- /dev/null +++ b/catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts @@ -0,0 +1,49 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * 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========================================================= + */ + +/** + * Created by rc2122 on 5/23/2017. + */ +import { Injectable } from '@angular/core'; +import {WorkspaceMode, ComponentState, Role} from "../../../utils/constants"; +import { Component as ComponentData } from "app/models"; +import { CacheService } from "app/services/cache-service" + +@Injectable() + +export class ComponentModeService { + + constructor(private cacheService:CacheService) { + } + + public getComponentMode = (component:ComponentData):WorkspaceMode => {//return if is edit or view for resource or service + let mode = WorkspaceMode.VIEW; + + let user = this.cacheService.get("user"); + if (component.lifecycleState === ComponentState.NOT_CERTIFIED_CHECKOUT && + component.lastUpdaterUserId === user.userId) { + if ((component.isService() || component.isResource()) && user.role == Role.DESIGNER) { + mode = WorkspaceMode.EDIT; + } + } + return mode; + } +} + diff --git a/catalog-ui/src/app/ng2/services/component-services/component.service.ts b/catalog-ui/src/app/ng2/services/component-services/component.service.ts index c648711d5d..ba1cb15561 100644 --- a/catalog-ui/src/app/ng2/services/component-services/component.service.ts +++ b/catalog-ui/src/app/ng2/services/component-services/component.service.ts @@ -18,7 +18,7 @@ * ============LICENSE_END========================================================= */ -import {Injectable} from '@angular/core'; +import {Injectable, Inject} from '@angular/core'; import {Observable} from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/toPromise'; @@ -27,11 +27,11 @@ import { Component, PropertyBEModel, InstancePropertiesAPIMap, FilterPropertiesA import {downgradeInjectable} from '@angular/upgrade/static'; import {COMPONENT_FIELDS} from "app/utils"; import {ComponentGenericResponse} from "../responses/component-generic-response"; -import {sdc2Config} from "../../../../main"; import {InstanceBePropertiesMap} from "../../../models/properties-inputs/property-fe-map"; import {API_QUERY_PARAMS} from "app/utils"; import { ComponentType, ServerTypeUrl } from "../../../utils/constants"; import { HttpService } from '../http.service'; +import {SdcConfigToken, ISdcConfig} from "../../config/sdc-config.config"; declare var angular:angular.IAngularStatic; @@ -40,8 +40,8 @@ export class ComponentServiceNg2 { protected baseUrl; - constructor(private http:HttpService) { - this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root; + constructor(private http:HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) { + this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root; } private getComponentDataByFieldsName(componentType:string, componentId: string, fields:Array):Observable { @@ -151,17 +151,6 @@ export class ComponentServiceNg2 { .map((res: Response) => { return res.json(); }); - - // return {'ExtVL 0':[{definition: false,name:"network_assignments",password:false,required:true,type:"org.openecomp.datatypes.network.NetworkAssignments",uniqueId:"623cca1c-d605-4c9c-9f2b-935ec85ebcf8.network_assignments"}, - // {definition: false,name: "exVL_naming",password: false,required: true,type: "org.openecomp.datatypes.Naming",uniqueId: "623cca1c-d605-4c9c-9f2b-935ec85ebcf8.exVL_naming"}, - // {definition: false,name: "network_flows",password: false,required: false,type: "org.openecomp.datatypes.network.NetworkFlows",uniqueId: "623cca1c-d605-4c9c-9f2b-935ec85ebcf8.network_flows"}, - // {definition: false,name: "provider_network",password: false,required: true,type: "org.openecomp.datatypes.network.ProviderNetwork",uniqueId: "623cca1c-d605-4c9c-9f2b-935ec85ebcf8.provider_network"}, - // {definition: false,name: "network_homing",password: false,required: true,type: "org.openecomp.datatypes.EcompHoming",uniqueId: "623cca1c-d605-4c9c-9f2b-935ec85ebcf8.network_homing"}], - // 'NetworkCP 0':[{definition: false,description: "identifies MAC address assignments to the CP",name: "mac_requirements",password: false,required: false,type: "org.openecomp.datatypes.network.MacRequirements",uniqueId: "26ec2bfd-b904-46c7-87ed-b32775120f2c.mac_requirements"}], - // 'NetworkCP 1':[{definition: false,description: "identifies MAC address assignments to the CP",name: "mac_requirements",password: false,required: false,type: "org.openecomp.datatypes.network.MacRequirements",uniqueId: "26ec2bfd-b904-46c7-87ed-b32775120f2c.mac_requirements"}]}; - - } } -angular.module('Sdc.Services').factory('ComponentServiceNg2', downgradeInjectable(ComponentServiceNg2)); // This is in order to use the service in angular1 till we finish remove all angular1 code diff --git a/catalog-ui/src/app/ng2/services/component-services/service.service.ts b/catalog-ui/src/app/ng2/services/component-services/service.service.ts index ec912bbcf5..f38dbef595 100644 --- a/catalog-ui/src/app/ng2/services/component-services/service.service.ts +++ b/catalog-ui/src/app/ng2/services/component-services/service.service.ts @@ -18,15 +18,15 @@ * ============LICENSE_END========================================================= */ -import { Injectable } from '@angular/core'; +import { Injectable, Inject } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/toPromise'; import { Response } from '@angular/http'; import {Service} from "app/models"; import { downgradeInjectable } from '@angular/upgrade/static'; -import {sdc2Config} from "../../../../main"; import { HttpService } from '../http.service'; +import {SdcConfigToken, ISdcConfig} from "../../config/sdc-config.config"; @Injectable() @@ -34,8 +34,8 @@ export class ServiceServiceNg2 { protected baseUrl = ""; - constructor(private http: HttpService) { - this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root; + constructor(private http: HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) { + this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root; } validateConformanceLevel(service: Service): Observable { @@ -47,5 +47,3 @@ export class ServiceServiceNg2 { } } - -angular.module('Sdc.Services').factory('ServiceServiceNg2', downgradeInjectable(ServiceServiceNg2)); // This is in order to use the service in angular1 till we finish remove all angular1 code diff --git a/catalog-ui/src/app/ng2/services/config.service.ts b/catalog-ui/src/app/ng2/services/config.service.ts index cac850e91c..9bb7b7a075 100644 --- a/catalog-ui/src/app/ng2/services/config.service.ts +++ b/catalog-ui/src/app/ng2/services/config.service.ts @@ -22,13 +22,11 @@ * Created by ob0695 on 4/9/2017. */ -import { Injectable } from '@angular/core'; +import { Injectable, Inject } from '@angular/core'; import { Http, Response } from '@angular/http'; import 'rxjs/add/operator/toPromise'; import {IAppConfigurtaion, ValidationConfiguration, Validations} from "app/models"; -import {sdc2Config} from './../../../main'; - -declare var __ENV__: string; +import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config"; @Injectable() export class ConfigService { @@ -36,12 +34,12 @@ export class ConfigService { private baseUrl; public configuration: IAppConfigurtaion; - constructor(private http: Http) { - this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root; + constructor(private http: Http, @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) { + this.baseUrl = this.sdcConfig.api.root + this.sdcConfig.api.component_api_root; } loadValidationConfiguration(): Promise { - let url: string = sdc2Config.validationConfigPath; + let url: string = this.sdcConfig.validationConfigPath; let promise: Promise = this.http.get(url).map((res: Response) => res.json()).toPromise(); promise.then((validationData: Validations) => { ValidationConfiguration.validation = validationData; diff --git a/catalog-ui/src/app/ng2/services/cookie.service.ts b/catalog-ui/src/app/ng2/services/cookie.service.ts index e5f04f7afd..2a783fdd48 100644 --- a/catalog-ui/src/app/ng2/services/cookie.service.ts +++ b/catalog-ui/src/app/ng2/services/cookie.service.ts @@ -18,9 +18,9 @@ * ============LICENSE_END========================================================= */ -import { Injectable } from '@angular/core'; +import {Injectable, Inject} from '@angular/core'; import {IAppConfigurtaion, ICookie} from "../../models/app-config"; -import {sdc2Config} from './../../../main'; +import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config"; @Injectable() export class Cookie2Service { @@ -28,8 +28,8 @@ export class Cookie2Service { private cookie:ICookie; private cookiePrefix:string; - constructor() { - this.cookie = sdc2Config.cookie; + constructor(@Inject(SdcConfigToken) sdcConfig:ISdcConfig) { + this.cookie = sdcConfig.cookie; this.cookiePrefix = ''; let junctionName:string = this.getCookieByName(this.cookie.junctionName); diff --git a/catalog-ui/src/app/ng2/services/hierarchy-nav.service.ts b/catalog-ui/src/app/ng2/services/hierarchy-nav.service.ts deleted file mode 100644 index 016b04788e..0000000000 --- a/catalog-ui/src/app/ng2/services/hierarchy-nav.service.ts +++ /dev/null @@ -1,83 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Injectable } from '@angular/core'; -import { SimpleFlatProperty, PropertyFEModel, DerivedFEProperty } from 'app/models'; - - -@Injectable() -export class HierarchyNavService { - /** - * Build hirarchy structure for the tree when user selects on table row. - * First create Array and insert also the parent (PropertyFEModel) to this array. - * The Array is flat and contains SimpleFlatProperty that has parentName and uniqueId. - * Now we build hirarchy from this Array (that includes childrens) and return it for the tree - * - * @argument property: PropertyFEModel - property contains flattenedChildren array of DerivedFEProperty - * @returns Array - containing childrens Array, augmantin childrens to SimpleFlatProperty. - */ - public getSimplePropertiesTree(property: PropertyFEModel, instanceName: string): Array { - // Build Array of SimpleFlatProperty before unflatten function - let flattenProperties: Array = []; - flattenProperties.push(this.createSimpleFlatProperty(property, instanceName)); // Push the root property - _.each(property.flattenedChildren, (child: DerivedFEProperty): void => { - if (child.isChildOfListOrMap && child.schema.property.isSimpleType) return; //do not display non-complex children of list or map - flattenProperties.push(this.createSimpleFlatProperty(child, instanceName)); - }); - - let tree = this.unflatten(flattenProperties, '', []); - return tree[0].childrens; // Return the childrens without the root. - } - - public createSimpleFlatProperty = (property: PropertyFEModel | DerivedFEProperty, instanceName:string): SimpleFlatProperty => { - if (property instanceof PropertyFEModel) { - return new SimpleFlatProperty(property.uniqueId, property.name, property.name, '', instanceName); - } else { - let propName: string = (property.isChildOfListOrMap) ? property.mapKey : property.name; - return new SimpleFlatProperty(property.uniqueId, property.propertiesName, propName, property.parentName, instanceName); - } - - } - - /** - * Unflatten Array and build hirarchy. - * The result will be Array that augmantin with childrens for each SimpleFlatProperty. - */ - private unflatten(array: Array, parent: any, tree?: any): any { - tree = typeof tree !== 'undefined' ? tree : []; - parent = typeof parent !== 'undefined' && parent !== '' ? parent : { path: '' }; - - var childrens = _.filter(array, (child: SimpleFlatProperty): boolean => { - return child.parentName == parent.path; - }); - - if (!_.isEmpty(childrens)) { - if (parent.path == '') { - tree = childrens; - } else { - parent['childrens'] = childrens; - } - _.each(childrens, (child): void => { - this.unflatten(array, child); - }); - } - return tree; - } -} diff --git a/catalog-ui/src/app/ng2/services/http.service.ts b/catalog-ui/src/app/ng2/services/http.service.ts index 21fe09023a..2785688ace 100644 --- a/catalog-ui/src/app/ng2/services/http.service.ts +++ b/catalog-ui/src/app/ng2/services/http.service.ts @@ -18,7 +18,7 @@ * ============LICENSE_END========================================================= */ -import {Injectable} from '@angular/core'; +import {Injectable, Inject} from '@angular/core'; import {Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers} from '@angular/http'; import {Observable} from 'rxjs/Observable'; import {UUID} from 'angular2-uuid'; @@ -27,15 +27,15 @@ import 'rxjs/add/operator/catch'; import 'rxjs/add/observable/throw'; import {Dictionary} from "../../utils/dictionary/dictionary"; import {SharingService, CookieService} from "app/services"; -import {sdc2Config} from './../../../main'; import { ModalService } from "app/ng2/services/modal.service"; import { ServerErrorResponse } from "app/models"; -import { ErrorMessageComponent } from 'app/ng2/components/modal/error-message/error-message.component'; +import {ErrorMessageComponent} from "../components/ui/modal/error-message/error-message.component"; +import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config"; @Injectable() export class HttpService extends Http { - constructor(backend: XHRBackend, options: RequestOptions, private sharingService: SharingService, private cookieService: CookieService, private modalService: ModalService) { + constructor(backend: XHRBackend, options: RequestOptions, private sharingService: SharingService, private cookieService: CookieService, private modalService: ModalService, @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) { super(backend, options); this._defaultOptions.withCredentials = true; this._defaultOptions.headers.append(cookieService.getUserIdSuffix(), cookieService.getUserId()); @@ -73,7 +73,7 @@ export class HttpService extends Http { private getUuidValue = (url: string) :string => { let map:Dictionary = this.sharingService.getUuidMap(); - if (map && url.indexOf(sdc2Config.api.root) > 0) { + if (map && url.indexOf(this.sdcConfig.api.root) > 0) { map.forEach((key:string) => { if (url.indexOf(key) !== -1) { return this.sharingService.getUuidValue(key); @@ -93,4 +93,8 @@ export class HttpService extends Http { return Observable.throw(response); }; + public static replaceUrlParams(url:string, urlParams:{[index:string]:any}):string { + return url.replace(/:(\w+)/g, (m, p1):string => urlParams[p1] || ''); + } + } diff --git a/catalog-ui/src/app/ng2/services/modal.service.ts b/catalog-ui/src/app/ng2/services/modal.service.ts index 65ff870769..22b56c7004 100644 --- a/catalog-ui/src/app/ng2/services/modal.service.ts +++ b/catalog-ui/src/app/ng2/services/modal.service.ts @@ -1,6 +1,11 @@ -import { Injectable, Type, ViewContainerRef, ApplicationRef, ComponentFactory, ComponentFactoryResolver, ComponentRef } from '@angular/core'; -import { ModalModel, ButtonModel } from 'app/models'; -import { ModalComponent } from 'app/ng2/components/modal/modal.component'; +import { + Injectable, Type, ViewContainerRef, ApplicationRef, ComponentFactory, ComponentFactoryResolver, ComponentRef, + +} from '@angular/core'; +import { ModalModel, ButtonModel, StepModel } from 'app/models'; +import {MultiStepsWizardComponent} from "../components/ui/multi-steps-wizard/multi-steps-wizard.component"; +import {ModalComponent} from "../components/ui/modal/modal.component"; +import {WizardHeaderBaseComponent} from "app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component"; @Injectable() @@ -54,6 +59,23 @@ export class ModalService { return customModal; } + public createMultiStepsWizard = (title: string, steps:Array, callback: Function, dynamicHeaderType?: Type): ComponentRef => { + let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline blue', this.closeCurrentModal); + let modalModel: ModalModel = new ModalModel('xl', title, '', [cancelButton]); + let wizardInstance: ComponentRef = this.createDynamicComponent(MultiStepsWizardComponent); + wizardInstance.instance.input = modalModel; + wizardInstance.instance.steps = steps; + wizardInstance.instance.callback = callback; + if(dynamicHeaderType){ + let dynamicHeader = this.createDynamicComponent(dynamicHeaderType, wizardInstance.instance.dynamicHeaderContainer); + wizardInstance.instance.dynamicHeader = dynamicHeader; + wizardInstance.instance.dynamicHeader.instance.currentStepIndex = 0; + } + this.addDynamicContentToModal(wizardInstance, steps[0].component); + this.currentModal = wizardInstance; + return wizardInstance; + } + public closeCurrentModal = () => { if (!this.currentModal) return; @@ -62,7 +84,7 @@ export class ModalService { } - public addDynamicContentToModal = (modalInstance: ComponentRef, dynamicComponentType: Type, dynamicComponentInput: any) => { + public addDynamicContentToModal = (modalInstance: ComponentRef, dynamicComponentType: Type, dynamicComponentInput?: any) => { let dynamicContent = this.createDynamicComponent(dynamicComponentType, modalInstance.instance.dynamicContentContainer); dynamicContent.instance.input = dynamicComponentInput; @@ -72,14 +94,13 @@ export class ModalService { //Creates a component dynamically (aka during runtime). If a view container is not specified, it will append the new component to the app root. //To subscribe to an event from invoking component: componentRef.instance.clicked.subscribe((m) => console.log(m.name)); - private createDynamicComponent(componentType: Type, viewContainerRef?:ViewContainerRef): ComponentRef { + private createDynamicComponent(componentType: Type, viewContainerRef?:ViewContainerRef): ComponentRef { viewContainerRef = viewContainerRef || this.getRootViewContainerRef(); viewContainerRef.clear(); - let factory: ComponentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType); //Ref: https://angular.io/guide/dynamic-component-loader - let componentRef = viewContainerRef.createComponent(factory); - + let factory: ComponentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType); //Ref: https://angular.io/guide/dynamic-component-loader + let componentRef: ComponentRef = viewContainerRef.createComponent(factory); return componentRef; } @@ -87,4 +108,6 @@ export class ModalService { private getRootViewContainerRef(): ViewContainerRef { return this.applicationRef.components[0].instance.viewContainerRef; } -} \ No newline at end of file +} + + diff --git a/catalog-ui/src/app/ng2/services/properties.service.ts b/catalog-ui/src/app/ng2/services/properties.service.ts index 6f15de858a..86cd2f5c72 100644 --- a/catalog-ui/src/app/ng2/services/properties.service.ts +++ b/catalog-ui/src/app/ng2/services/properties.service.ts @@ -19,16 +19,12 @@ */ import { Injectable } from '@angular/core'; -import { DataTypeModel, PropertyFEModel, PropertyBEModel, SchemaProperty, PropertyDeclareAPIModel, DerivedFEProperty, DerivedFEPropertyMap, DerivedPropertyType, InputFEModel} from "app/models"; -import { DataTypeService } from "./data-type.service"; -import { PROPERTY_TYPES } from "app/utils"; -import { ContentAfterLastDotPipe } from "../pipes/contentAfterLastDot.pipe"; -import { UUID } from "angular2-uuid"; +import { PropertyFEModel, PropertyBEModel, PropertyDeclareAPIModel, DerivedFEProperty} from "app/models"; @Injectable() export class PropertiesService { - constructor(private dataTypeService: DataTypeService, private contentAfterLastDotPipe: ContentAfterLastDotPipe) { + constructor() { } public getParentPropertyFEModelFromPath = (properties: Array, path: string) => { diff --git a/catalog-ui/src/app/ng2/services/user.service.ts b/catalog-ui/src/app/ng2/services/user.service.ts new file mode 100644 index 0000000000..87e90432dc --- /dev/null +++ b/catalog-ui/src/app/ng2/services/user.service.ts @@ -0,0 +1,98 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Injectable, Inject } from "@angular/core"; +import { Headers } from "@angular/http"; +import { Observable } from "rxjs/Observable"; +import { HttpService } from "./http.service"; +import { Cookie2Service } from "./cookie.service"; +import { IUserProperties } from "../../models/user"; + +import {ICookie} from "../../models/app-config"; +import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config"; + +@Injectable() +export class UserService { + private url:string; + private authorizeUrl:string; + + private _loggedinUser:IUserProperties; + + constructor(private httpService:HttpService, + private cookieService:Cookie2Service, + @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) { + this.url = this.sdcConfig.api.root + this.sdcConfig.api.GET_user; + this.authorizeUrl = this.sdcConfig.api.root + this.sdcConfig.api.GET_user_authorize; + } + + public authorize() :Observable { + let cookie:ICookie = this.sdcConfig.cookie; + let authorizeHeaders:Headers = new Headers(); + authorizeHeaders.set(cookie.userFirstName, this.cookieService.getFirstName()); + authorizeHeaders.set(cookie.userLastName, this.cookieService.getLastName()); + authorizeHeaders.set(cookie.userEmail, this.cookieService.getEmail()); + authorizeHeaders.set(cookie.userIdSuffix, this.cookieService.getUserId()); + + return this.httpService.get( + this.authorizeUrl, + { headers: authorizeHeaders } + ).map(resp => resp.json()); + } + + public getAllUsers() :Observable { + return this.httpService.get( + this.sdcConfig.api.root + this.sdcConfig.api.GET_all_users + ).map(resp => resp.json()); + } + + public getUser(userId:string) :Observable { + return this.httpService.get( + HttpService.replaceUrlParams(this.url, { id: userId }) + ).map(resp => resp.json()); + } + + public createUser(userData:{[index:string]: any}) :Observable { + return this.httpService.post( + this.sdcConfig.api.root + this.sdcConfig.api.POST_create_user, + userData + ).map(resp => resp.json()); + } + + public deleteUser(userId:string) :Observable { + return this.httpService.delete( + HttpService.replaceUrlParams(this.sdcConfig.api.root + this.sdcConfig.api.DELETE_delete_user, { id: userId }) + ).map(resp => resp.json()); + } + + public editUserRole(userId:string, role:string) :Observable { + return this.httpService.post( + HttpService.replaceUrlParams(this.sdcConfig.api.root + this.sdcConfig.api.POST_edit_user_role, { id: userId }), + { role: role } + ).map(resp => resp.json()); + } + + public getLoggedinUser():IUserProperties { + return this._loggedinUser; + } + + public setLoggedinUser(loggedinUser:IUserProperties) { + this._loggedinUser = loggedinUser; + }; +} diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html deleted file mode 100644 index 872bf90329..0000000000 --- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html +++ /dev/null @@ -1,8 +0,0 @@ -
-
- -
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less deleted file mode 100644 index 3a28c5fb42..0000000000 --- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less +++ /dev/null @@ -1,67 +0,0 @@ - @import '../../../../assets/styles/tlv-sprite'; -@import '../../../../assets/styles/sprite'; - - -.checkbox-container { - display:inline-block; - position:relative; - text-align: left; - height: 20px; - - - .checkbox-icon { - display: inline-block; - } - - .checkbox-label { - font-weight: inherit; - font-size: inherit; - } - - .checkbox-label-content { - margin-left:2px; - } - - .checkbox-icon::before { - .tlv-sprite; - background-position: -10px -60px; - width: 14px; - height: 14px; - content: ''; - display: inline-block; - margin-right: 0px; - margin-top: -2px; - vertical-align: middle; - } - - input[type=checkbox].checkbox-hidden { - width:0; - height:0; - display:none; - &:checked ~ .checkbox-icon::before{ - .sprite-new; - .filled-checkbox-icon - } - &[disabled] ~ .checkbox-icon::before { - /* TODO: add disabled styles here */ - background-image: none; - background-color: #EFEFEF; - border-radius: 2px; - border: solid #CCC 1px; - } - } - - .checkbox-animation { - background-color: #009fdb; - position: absolute; - left: 2px; - top: 4px; - width:10px; - height:10px; - border-radius: 50%; - z-index: 1; - pointer-events: none; - opacity:0; - } - -} diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts deleted file mode 100644 index c8da016174..0000000000 --- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts +++ /dev/null @@ -1,50 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; -//import { trigger, state, style, transition, animate, keyframes } from '@angular/core'; - -@Component({ - selector: 'checkbox', - templateUrl: './checkbox.component.html', - styleUrls: ['./checkbox.component.less'], - encapsulation: ViewEncapsulation.None - // animations: [ - // trigger('checkEffect', [ - // state('true', style({ position: 'absolute', left: '2px', top: '5px', width: '10px', height: '10px', display: 'none', opacity: '.5' })), - // state('false', style({ left: '-18px', top: '-15px', height: '50px', width: '50px', opacity: '0' })), - // transition('1 => 0', animate('150ms ease-out')), - // transition('0 => 1', animate('150ms ease-in')) - // ]) - // ] -}) -export class CheckboxComponent { - - @Input() checkboxStyle: string; - @Input() label: string; - @Input() checked: boolean; - @Input() disabled: boolean; - @Output() checkedChange: EventEmitter = new EventEmitter(); - - toggleState(newValue:boolean) { - this.checkedChange.emit(newValue); - } -} - diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts deleted file mode 100644 index 4ac7f2d7cd..0000000000 --- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts +++ /dev/null @@ -1,48 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; -import { CheckboxComponent } from './checkbox.component'; - - -@NgModule({ - imports: [CommonModule, BrowserModule, FormsModule], - declarations: [CheckboxComponent], - bootstrap: [], - exports: [CheckboxComponent] -}) -export class CheckboxModule { } - -/** README: **/ - -/** USAGE Example: - *In page.module.ts: import CheckboxModule - *In HTML: - * - */ - -/**STYLING: (ViewEncapsulation is set to None to allow styles to be overridden or customized) - * - * To create or override styles: - * Use /deep/ or >>> prefix to override styles via other components stylesheets - */ diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts deleted file mode 100644 index ac58cbd063..0000000000 --- a/catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts +++ /dev/null @@ -1,27 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { MenuType, RouteInfo } from './navbar.metadata'; - -export const ROUTES: RouteInfo[] = [ - { path: 'page1', title: 'Logo', menuType: MenuType.BRAND }, - { path: 'page1', title: 'Page 1', menuType: MenuType.LEFT }, - { path: 'page2', title: 'Page 2', menuType: MenuType.LEFT } -]; diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.html b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.html deleted file mode 100644 index d783be4c27..0000000000 --- a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.html +++ /dev/null @@ -1,23 +0,0 @@ - diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.less b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.less deleted file mode 100644 index 3e5165b798..0000000000 --- a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.less +++ /dev/null @@ -1,11 +0,0 @@ -.active { - color: #ffffff; -} -.navbar-toggler { - border: solid 1px #cccccc; - color: #ff0000; -} -.navbar { - background-color: #0000ff; - border-radius: 0; -} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts deleted file mode 100644 index 68a26c4780..0000000000 --- a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts +++ /dev/null @@ -1,52 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, OnInit, ViewEncapsulation} from '@angular/core'; -import { ROUTES } from './navbar-routes.config'; -import { MenuType, RouteInfo } from './navbar.metadata'; - -@Component({ - selector: 'app-navbar', - templateUrl: './navbar.component.html', - styleUrls: [ './navbar.component.less' ], - encapsulation: ViewEncapsulation.None -}) -export class NavbarComponent implements OnInit { - public menuItems: Array; - public brandMenu: RouteInfo; - isCollapsed = true; - - constructor() {} - - ngOnInit() { - this.menuItems = ROUTES.filter(menuItem => menuItem.menuType !== MenuType.BRAND); - this.brandMenu = ROUTES.filter(menuItem => menuItem.menuType === MenuType.BRAND)[0]; - } - - public get menuIcon(): string { - return this.isCollapsed ? '☰' : '✖'; - } - - public getMenuItemClasses(menuItem: any) { - return { - 'pull-xs-right': this.isCollapsed && menuItem.menuType === MenuType.RIGHT - }; - } -} diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts deleted file mode 100644 index 71cc3cb59f..0000000000 --- a/catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts +++ /dev/null @@ -1,31 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * 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========================================================= - */ - -export enum MenuType { - BRAND, - LEFT, - RIGHT -} - -export interface RouteInfo { - path: string; - title: string; - menuType: MenuType; -} diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts deleted file mode 100644 index 4a754dfe99..0000000000 --- a/catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts +++ /dev/null @@ -1,36 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { RouterModule } from '@angular/router'; -import { NavbarComponent } from "./navbar.component"; - -@NgModule({ - imports: [ - RouterModule, - CommonModule - ], - declarations: [ NavbarComponent ], - exports: [ - NavbarComponent - ] -}) -export class NavbarModule {} diff --git a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html deleted file mode 100644 index 36629594b0..0000000000 --- a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html +++ /dev/null @@ -1,5 +0,0 @@ -
- - x - -
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less deleted file mode 100644 index cfeb8d3b01..0000000000 --- a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less +++ /dev/null @@ -1,58 +0,0 @@ -.search-bar-container { - display:flex; - border-radius: 4px; - box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29); - - .search-bar-input { - border: 1px solid #cdcdcd; - border-radius: 4px; - border-right:none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - outline:none; - padding:2px 50px 2px 10px; - color: #5a5a5a; - font-size: 1em; - font-style: italic; - } - - .clear-search-x { - position:absolute; - right:40px; - top:5px; - padding: 0 5px; - - &:hover { - border-radius:2px; - background-color: #ebebeb; - cursor:pointer; - } - } - - .search-bar-button { - //background: url('../../../../assets/styles/svg/source/search-magnify.svg') no-repeat 50%; - background: url('../../../../assets/styles/images/sprites/sprite-global.png') no-repeat -206px -1275px; - background-color: rgba(234, 234, 234, 0.88); - width: 30px; - height: 30px; - padding: 0; - cursor:pointer; - border:solid 1px #cdcdcd; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - - &:hover { - background-position:-126px -1275px; - } - - &:active { - background-color: rgba(31, 171, 223, 0.88); - background-position:-45px -1275px; - border-left:none; - } - &:focus { - outline:none; - } - - } -} diff --git a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts deleted file mode 100644 index 08bdf2030f..0000000000 --- a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; - -@Component({ - selector: 'search-bar', - templateUrl: './search-bar.component.html', - styleUrls: ['./search-bar.component.less'], - encapsulation: ViewEncapsulation.None -}) -export class SearchBarComponent { - - @Input() placeholder: string; - @Input() class: string; - @Input() searchQuery: string; - @Output() searchChanged: EventEmitter = new EventEmitter(); - @Output() searchButtonClicked: EventEmitter = new EventEmitter(); - - searchButtonClick = (): void => { - if (this.searchQuery) { //do not allow empty search - this.searchButtonClicked.emit(this.searchQuery); - } - } - - searchQueryChange = ($event): void => { - this.searchChanged.emit($event); - } - - private clearSearchQuery = (): void => { - this.searchQuery = ""; - this.searchButtonClicked.emit(this.searchQuery); - } -} - diff --git a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html deleted file mode 100644 index c9769ba5ae..0000000000 --- a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html +++ /dev/null @@ -1,6 +0,0 @@ -
- -
-
{{item}}
-
-
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less deleted file mode 100644 index 92b054cd85..0000000000 --- a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less +++ /dev/null @@ -1,35 +0,0 @@ - -.search-with-autocomplete-container{ - &.autocomplete-visible { - - .search-bar-input { - border-bottom-left-radius: 0; - } - .search-bar-button { - border-bottom-right-radius: 0; - } - .autocomplete-results { - border: solid 1px #d2d2d2; - border-top:none; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - background-color: #fff; - padding: 10px 20px; - width:100%; - position:absolute; - max-height: 200px; - overflow-y: scroll; - } - - .autocomplete-result-item { - color:#5a5a5a; - padding: 5px 0; - cursor:pointer; - - &:hover { - color: #999; - } - } - } -} - diff --git a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts deleted file mode 100644 index ced056d1fc..0000000000 --- a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; -import { SearchBarComponent } from '../search-bar/search-bar.component'; - -@Component({ - selector: 'search-with-autocomplete', - templateUrl: './search-with-autocomplete.component.html', - styleUrls: ['./search-with-autocomplete.component.less'], - encapsulation: ViewEncapsulation.None -}) -export class SearchWithAutoCompleteComponent { - - @Input() searchPlaceholder: string; - @Input() searchBarClass: string; - @Input() searchQuery: string; - @Input() autoCompleteValues: Array; - @Output() searchChanged: EventEmitter = new EventEmitter(); - @Output() searchButtonClicked: EventEmitter = new EventEmitter(); - - searchChange = (searchTerm: string) => { - this.searchQuery = searchTerm; - this.searchChanged.emit(searchTerm); - } - - updateSearch = (searchTerm: string) => { - this.searchQuery = searchTerm; - this.searchButtonClicked.emit(searchTerm); - this.autoCompleteValues = []; - } -} - diff --git a/catalog-ui/src/app/ng2/shared/shared.module.ts b/catalog-ui/src/app/ng2/shared/shared.module.ts deleted file mode 100644 index 2bc7d52ab8..0000000000 --- a/catalog-ui/src/app/ng2/shared/shared.module.ts +++ /dev/null @@ -1,40 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { NgModule } from '@angular/core'; - -import { CommonModule } from '@angular/common'; -import { RouterModule } from '@angular/router'; -import { NavbarModule } from "./navbar/navbar.module"; - -@NgModule({ - declarations: [ - - ], - imports: [ - CommonModule, - RouterModule, - NavbarModule - ], - exports: [ - ] -}) - -export class SharedModule {} diff --git a/catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts b/catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts deleted file mode 100644 index bad7b80a51..0000000000 --- a/catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts +++ /dev/null @@ -1,38 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, Input } from '@angular/core'; -import { ViewEncapsulation } from '@angular/core'; - -@Component({ - selector: 'tab', - template: ` -
- -
- `, - encapsulation: ViewEncapsulation.None -}) -export class Tab { - @Input('tabTitle') title: string; - @Input() active:boolean = false; - @Input() indication?: number; - -} diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.html b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.html deleted file mode 100644 index 3e263a3862..0000000000 --- a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.html +++ /dev/null @@ -1,9 +0,0 @@ -
-
- {{tab.title}} -
{{tab.indication}}
-
-
-
- -
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less deleted file mode 100644 index 6f9e57aaf2..0000000000 --- a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less +++ /dev/null @@ -1,84 +0,0 @@ -@import '../../../../assets/styles/variables'; - -tab { - height: 100%; -} - -.tabs { - display:flex; - flex: 0 0 auto; - flex-direction:row; -} - -.tab { - flex: 1 0 auto; - cursor: pointer; - padding: .5em; -} - -.tab-content-container { - flex: 1; - width:100%; - overflow-y:hidden; -} - -.tab-content { - height:100%; -} - -/*Tab styles*/ -.tabs{ - &.round-tabs .tab{ - background-color: #f8f8f8; - color: #959595; - border: solid 1px #d2d2d2; - border-bottom:none; - border-left:none; - position:relative; - - &:first-child { - border-left:solid 1px #d2d2d2; - } - - &.active { - background-color:#009fdb; - color:#e9e9e9; - border-color:#009fdb; - } - - .tab-indication { - position: absolute; - top: -10px; - background-color: #009fdb; - right: 10px; - padding: 2px 0; - border-radius: 15px; - border: solid 1px #d2d2d2; - color:white; - width: 25px; - height: 25px; - text-align: center; - - } - } - - &.simple-tabs .tab { - font-size: 12px; - color: @main_color_n; - - &:after { - display:block; - content: ''; - border-bottom: 2px solid @main_color_a; - transform: scaleX(0); - transition: transform 200ms ease-in-out; - } - - &.active { - color: @main_color_a; - &:after { - transform: scaleX(1.2); - } - } - } -} diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts deleted file mode 100644 index 21d2bbad43..0000000000 --- a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts +++ /dev/null @@ -1,78 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, ContentChildren, QueryList, AfterContentInit, Input, Output, EventEmitter } from '@angular/core'; -import { Tab } from './tab/tab.component'; -import { ViewEncapsulation } from '@angular/core'; -import { trigger, state, style, transition, animate, keyframes } from '@angular/core'; - -@Component({ - selector: 'tabs', - templateUrl: './tabs.component.html', - styleUrls: ['./tabs.component.less'], - encapsulation: ViewEncapsulation.None, - animations: [ - trigger('indicatorAnimation', [ - transition(':enter', [style({ transform: 'translateY(-50%)', opacity: 0 }), animate('250ms', style({ transform: 'translateY(0)', opacity: 1 })) ]), - transition(':leave', [style({ opacity: 1 }), animate('500ms', style({ opacity: 0 })) ]) - ]) - ] -}) -export class Tabs implements AfterContentInit { - - @Input() tabStyle: string; - @Input() hideIndicationOnTabChange?: boolean = false; - @ContentChildren(Tab) tabs: QueryList; - @Output() tabChanged: EventEmitter = new EventEmitter(); - - - ngAfterContentInit() { - //after contentChildren are set, determine active tab. If no active tab set, activate the first one - let activeTabs = this.tabs.filter((tab) => tab.active); - - if (activeTabs.length === 0) { - this.selectTab(this.tabs.first); - } - } - - selectTab(tab: Tab) { - //activate the tab the user clicked. - this.tabs.toArray().forEach(tab => { - tab.active = false; - if (this.hideIndicationOnTabChange && tab.indication) { - tab.indication = null; - } - }); - tab.active = true; - this.tabChanged.emit(tab); - } - - triggerTabChange(tabTitle) { - this.tabs.toArray().forEach(tab => { - tab.active = (tab.title == tabTitle) ? true : false; - }); - } - - setTabIndication(tabTitle:string, indication?:number) { - let selectedTab: Tab = this.tabs.toArray().find(tab => tab.title == tabTitle); - selectedTab.indication = indication || null; - } - -} diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts b/catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts deleted file mode 100644 index 6bf19d4099..0000000000 --- a/catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts +++ /dev/null @@ -1,55 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, NgModule } from '@angular/core' -import { BrowserModule } from '@angular/platform-browser' - -import { Tabs } from './tabs.component'; -import { Tab } from './tab/tab.component'; - - -@NgModule({ - imports: [BrowserModule], - declarations: [Tabs, Tab], - bootstrap: [], - exports: [Tabs, Tab] -}) -export class TabModule { } - -/** README: **/ - -/** USAGE Example: - *In page.module.ts: import TabModule - *In HTML: - * - * Content of tab 1 - * Content of tab 2 - * ... - * - */ - -/**STYLING: (ViewEncapsulation is set to None to allow styles to be overridden or customized) - * Existing options: - * tabStyle="round-tabs" will provide generic rounded tab look - * - * To create or override styles: - * Parent div has class ".tabs". Each tab has class ".tab". Active tab has class ".active". - * Use /deep/ or >>> prefix to override styles via other components stylesheets - */ diff --git a/catalog-ui/src/app/ng2/shared/translator/translate.module.ts b/catalog-ui/src/app/ng2/shared/translator/translate.module.ts new file mode 100644 index 0000000000..feaec03bbd --- /dev/null +++ b/catalog-ui/src/app/ng2/shared/translator/translate.module.ts @@ -0,0 +1,32 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { NgModule } from '@angular/core' + +import { TranslateService } from "./translate.service"; +import { TranslatePipe } from "./translate.pipe"; + + +@NgModule({ + providers: [TranslateService], + declarations: [TranslatePipe], + exports: [TranslatePipe] +}) +export class TranslateModule { } diff --git a/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts b/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts new file mode 100644 index 0000000000..42e019829f --- /dev/null +++ b/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts @@ -0,0 +1,62 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Pipe, PipeTransform } from '@angular/core'; +import { TranslateService, ITranslateArgs } from "./translate.service"; + + +@Pipe({ + name: 'translate', + pure: false +}) +export class TranslatePipe implements PipeTransform { + private translated:string; + private lastParams: { + phrase: string; + args: {[index: string]: any}; + language: string; + } = { + phrase: undefined, + args: undefined, + language: undefined + }; + + constructor(private translateService:TranslateService) { + } + + private shouldUpdate(curParams:{[index:string]: any}) : boolean { + return ( + curParams.language !== this.lastParams.language || + curParams.args !== this.lastParams.args || + curParams.phrase !== this.lastParams.phrase + ); + } + + public transform(phrase:string, args:ITranslateArgs, language:string=this.translateService.activeLanguage) : string { + const curParams = { phrase, args, language }; + if (this.shouldUpdate(curParams)) { + this.lastParams = curParams; + this.translated = this.translateService.translate(phrase, args, language); + console.log('*updated:', this.translated); + } + + return this.translated; + } +} diff --git a/catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts b/catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts new file mode 100644 index 0000000000..a1d7833062 --- /dev/null +++ b/catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts @@ -0,0 +1,30 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { OpaqueToken } from "@angular/core"; + +export const TranslateServiceConfigToken = new OpaqueToken('TranslateServiceConfigToken'); + +export interface ITranslateServiceConfig { + filePrefix:string; + fileSuffix:string; + allowedLanguages:string[]; + defaultLanguage:string; +} diff --git a/catalog-ui/src/app/ng2/shared/translator/translate.service.ts b/catalog-ui/src/app/ng2/shared/translator/translate.service.ts new file mode 100644 index 0000000000..ff7c643b46 --- /dev/null +++ b/catalog-ui/src/app/ng2/shared/translator/translate.service.ts @@ -0,0 +1,235 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Injectable, Inject } from "@angular/core"; +import { Response, Http } from "@angular/http"; +import { Observable, Observer, ConnectableObservable, Subscription } from "rxjs"; +import { ITranslateServiceConfig, TranslateServiceConfigToken } from "./translate.service.config"; + +export { ITranslateServiceConfig, TranslateServiceConfigToken }; + +export interface ITranslateLanguageJson { + [index:string]: string; +} + +export interface ITranslateArgs { + [index:string]: any; +} + +export class PhraseTranslator { + private _observable:ConnectableObservable; + private _observer:Observer; + private _languageChangeSubscription:Subscription; + + private _phraseKey:string; + private _args:ITranslateArgs; + private _language:string; + + private _markForCheck:boolean = false; + private _lastParams: { + phraseKey: string; + args: {[index: string]: any}; + language: string; + } = { + phraseKey: undefined, + args: undefined, + language: undefined + }; + + constructor(private translateService:TranslateService) { + this._observable = Observable.create(observer => { + this._observer = observer; + this._languageChangeSubscription = this.translateService.languageChangedObservable.subscribe(language => { + // using the active language, then force update + if (!this._language) { + this.update(true); + } + }); + }).publishReplay(1).refCount(); + } + + public get observable() { + return this._observable; + } + + public destroy() { + this._observer.complete(); + this._languageChangeSubscription.unsubscribe(); + + delete this._observable; + delete this._observer; + delete this._languageChangeSubscription; + } + + public shouldUpdate() : boolean { + if (!this._markForCheck) { + return false; + } + this._markForCheck = false; + return ( + this._language !== this._lastParams.language || + this._args !== this._lastParams.args || + this._phraseKey !== this._lastParams.phraseKey + ); + } + + public update(forceUpdate:boolean=false) : void { + // only update translation when having subscriptions connected. + if (this._observer && !this._observer.closed) { + if (forceUpdate || this.shouldUpdate()) { + this._lastParams = { + phraseKey: this._phraseKey, + args: this._args, + language: this._language + }; + this._markForCheck = false; + + const translated = this.translateService.translate(this._phraseKey, this._args, this._language); + this._observer.next(translated); + } + } + } + + private _changeParam(paramKey:string, value:any, update:boolean) : void { + this[`_${paramKey}`] = value; + this._markForCheck = true; + if (update) { + this.update(); + } + } + + public changePhraseKey(phraseKey:string, update:boolean=true) : void { + this._changeParam('phraseKey', phraseKey, update); + } + + public changeArgs(args:ITranslateArgs, update:boolean=true) :void { + this._changeParam('args', args, update); + } + + public changeLangauge(language:string, update:boolean=true) :void { + this._changeParam('language', language, update); + } + + public changeParams(phraseKey:string, args:ITranslateArgs={}, language?:string, forceUpdate:boolean=false) { + this._phraseKey = phraseKey; + this._args = args; + this._language = language; + this._markForCheck = true; + this.update(forceUpdate); + } +} + + +@Injectable() +export class TranslateService { + private _activeLanguage:string; + private _languageChangedObservable:ConnectableObservable; + private _languageChangedObserver:Observer; + private _cacheLanguagesJsons:{[index:string]:ITranslateLanguageJson} = {}; + private _cacheLanguagesLoaders:{[index:string]:Observable} = {}; + + constructor(@Inject(TranslateServiceConfigToken) private config:ITranslateServiceConfig, private http:Http) { + this.initLanguageObservable(); + this.loadAndActivateLanguage(this.config.defaultLanguage); + } + + public get languageChangedObservable() : Observable { + return this._languageChangedObservable; + } + + public get activeLanguage() { + return this._activeLanguage; + } + + private initLanguageObservable() { + this._languageChangedObservable = ConnectableObservable.create(observer => { + this._languageChangedObserver = observer; + }).publishReplay(1); // replay last emitted change on subscribe + this._languageChangedObservable.connect(); + } + + private loadLanguageJsonFile(language:string, emitOnLoad:boolean=true) : Observable { + if (this.config.allowedLanguages.indexOf(language) === -1) { + return Observable.throw(`Language "${language}" is not available.`); + } + + if (this._cacheLanguagesJsons[language]) { + return Observable.of(this._cacheLanguagesJsons[language]); + } + + if (!(language in this._cacheLanguagesLoaders)) { + const filePath = `${this.config.filePrefix}${language}${this.config.fileSuffix}`; + this._cacheLanguagesLoaders[language] = this.http.get(filePath) + .map(resp => resp.json()) + .catch(() => Observable.throw(`Failed to load language file for "${language}"`)) + .publish(); + (>this._cacheLanguagesLoaders[language]).connect(); + this._cacheLanguagesLoaders[language].subscribe(languageJson => { + this._cacheLanguagesJsons[language] = languageJson; + delete this._cacheLanguagesLoaders[language]; + if (emitOnLoad) { + this._languageChangedObserver.next(language); + } + return languageJson; + }); + } + return this._cacheLanguagesLoaders[language]; + } + + public activateLanguage(language:string) : boolean { + if (this._cacheLanguagesJsons[language]) { + if (language !== this._activeLanguage) { + this._activeLanguage = language; + this._languageChangedObserver.next(this._activeLanguage); + } + return true; + } + return false; + } + + public loadAndActivateLanguage(language:string) : Observable { + const loadLanguageObservable = this.loadLanguageJsonFile(language, false); + loadLanguageObservable.subscribe(() => { + this.activateLanguage(language); + }, () => {}); + return loadLanguageObservable; + } + + public translate(phraseKey:string, args:ITranslateArgs={}, language:string=this._activeLanguage) : string { + const phrase:string = (this._cacheLanguagesJsons[language] || {})[phraseKey] || ''; + let translated:string; + if (typeof(phrase) === 'string') { + translated = phrase + .replace( + /(^|[^\\]|\\\\)\{\{(\w+)\}\}/g, + (m, p1, p2) => `${p1}${args[p2]||''}` + ) + .replace('\\{{', '{{') + .replace('\\\\', '\\'); + } + return translated; + } + + public createPhraseTranslator(phraseKey?:string, args?:ITranslateArgs, language?:string) : PhraseTranslator { + const phraseTranslator = new PhraseTranslator(this); + phraseTranslator.changeParams(phraseKey, args, language); + return phraseTranslator; + } +} diff --git a/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts b/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts index ce13a8c235..c21817c001 100644 --- a/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts +++ b/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts @@ -42,6 +42,10 @@ export function cookieServiceFactory(cacheObj: ICacheObject) { return cacheObj.get('Sdc.Services.CookieService'); } +export function stateServiceFactory(cacheObj: ICacheObject) { + return cacheObj.get('$state'); +} + export function stateParamsServiceFactory(cacheObj: ICacheObject) { return cacheObj.get('$stateParams'); } @@ -74,6 +78,12 @@ export const CookieServiceProvider = { deps: ['$injector'] }; +export const StateServiceFactory = { + provide: '$state', + useFactory: stateServiceFactory, + deps: ['$injector'] +}; + export const StateParamsServiceFactory = { provide: '$stateParams', useFactory: stateParamsServiceFactory, diff --git a/catalog-ui/src/app/services.ts b/catalog-ui/src/app/services.ts index 5dd08c2d20..79b5132634 100644 --- a/catalog-ui/src/app/services.ts +++ b/catalog-ui/src/app/services.ts @@ -46,6 +46,5 @@ export * from './services/progress-service'; export * from './services/sdc-version-service'; export * from './services/sharing-service'; export * from './services/url-tobase64-service'; -export * from './services/user-resource-service'; export * from './services/angular-js-bridge-service'; diff --git a/catalog-ui/src/app/services/components/component-service.ts b/catalog-ui/src/app/services/components/component-service.ts index bedfed5ee5..90ae850899 100644 --- a/catalog-ui/src/app/services/components/component-service.ts +++ b/catalog-ui/src/app/services/components/component-service.ts @@ -52,6 +52,7 @@ export interface IComponentService { deleteComponentInstance(componentId:string, componentInstanceId:string):ng.IPromise; createRelation(componentId:string, link:RelationshipModel):ng.IPromise; deleteRelation(componentId:string, link:RelationshipModel):ng.IPromise; + fetchRelation(componentId:string, linkId:string):ng.IPromise; getRequirementsCapabilities(componentId:string):ng.IPromise; updateInstanceProperty(componentId:string, property:PropertyModel):ng.IPromise; updateInstanceAttribute(componentId:string, attribute:AttributeModel):ng.IPromise; @@ -513,7 +514,12 @@ export class ComponentService implements IComponentService { public createRelation = (componentId:string, link:RelationshipModel):ng.IPromise => { let deferred = this.$q.defer(); - this.restangular.one(componentId).one("resourceInstance").one("associate").customPOST(JSON.stringify(link)).then((response:any) => { + const linkPayload:RelationshipModel = new RelationshipModel(link); + linkPayload.relationships.forEach((rel) => { + delete rel.capability; + delete rel.requirement; + }); + this.restangular.one(componentId).one("resourceInstance").one("associate").customPOST(JSON.stringify(linkPayload)).then((response:any) => { let relation:RelationshipModel = new RelationshipModel(response.plain()); console.log("Link created successfully ", relation); deferred.resolve(relation); @@ -526,7 +532,12 @@ export class ComponentService implements IComponentService { public deleteRelation = (componentId:string, link:RelationshipModel):ng.IPromise => { let deferred = this.$q.defer(); - this.restangular.one(componentId).one("resourceInstance").one("dissociate").customPUT(JSON.stringify(link)).then((response:any) => { + const linkPayload:RelationshipModel = new RelationshipModel(link); + linkPayload.relationships.forEach((rel) => { + delete rel.capability; + delete rel.requirement; + }); + this.restangular.one(componentId).one("resourceInstance").one("dissociate").customPUT(JSON.stringify(linkPayload)).then((response:any) => { let relation:RelationshipModel = new RelationshipModel(response); console.log("Link deleted successfully ", relation); deferred.resolve(relation); @@ -537,6 +548,19 @@ export class ComponentService implements IComponentService { return deferred.promise; }; + public fetchRelation = (componentId:string, linkId:string):ng.IPromise => { + let deferred = this.$q.defer(); + this.restangular.one(componentId).one("relationId").one(linkId).get().then((response:any) => { + let relation:RelationshipModel = new RelationshipModel(response); + console.log("Link fetched successfully ", relation); + deferred.resolve(relation); + }, (err)=> { + console.log("Failed to fetch Link Id: " + linkId); + deferred.reject(err); + }); + return deferred.promise; + }; + public getRequirementsCapabilities = (componentId:string):ng.IPromise => { let deferred = this.$q.defer(); this.restangular.one(componentId).one("requirmentsCapabilities").get().then((response:any) => { diff --git a/catalog-ui/src/app/services/entity-service.ts b/catalog-ui/src/app/services/entity-service.ts index 75ea036b3e..27b0513b39 100644 --- a/catalog-ui/src/app/services/entity-service.ts +++ b/catalog-ui/src/app/services/entity-service.ts @@ -23,6 +23,7 @@ import { Service, IApi, IAppConfigurtaion, Resource, Component} from "../models" import {SharingService} from "./sharing-service"; import {ComponentFactory} from "../utils/component-factory"; import {CacheService} from "./cache-service"; +import {ResourceType} from "app/utils"; interface IEntityService { getAllComponents():ng.IPromise>; @@ -48,7 +49,7 @@ export class EntityService implements IEntityService { getCatalog = ():ng.IPromise> => { let defer = this.$q.defer>(); - this.$http.get(this.api.root + this.api.GET_catalog) + this.$http.get(this.api.root + this.api.GET_catalog, {params: {excludeTypes: [ResourceType.VFCMT, ResourceType.CONFIGURATION]}}) .then((response:any) => { let followedResponse: IComponentsArray = response.data; let componentsList:Array = new Array(); diff --git a/catalog-ui/src/app/services/loader-service.ts b/catalog-ui/src/app/services/loader-service.ts index 2f8746cbd8..6085eb16bf 100644 --- a/catalog-ui/src/app/services/loader-service.ts +++ b/catalog-ui/src/app/services/loader-service.ts @@ -32,12 +32,12 @@ export class LoaderService { } - public showLoader(...args) { - this.eventListenerService.notifyObservers(EVENTS.SHOW_LOADER_EVENT, ...args); + public showLoader(loaderType:string, ...args) { + this.eventListenerService.notifyObservers(EVENTS.SHOW_LOADER_EVENT + loaderType, ...args); } - public hideLoader(...args) { - this.eventListenerService.notifyObservers(EVENTS.HIDE_LOADER_EVENT, ...args); + public hideLoader(loaderType:string, ...args) { + this.eventListenerService.notifyObservers(EVENTS.HIDE_LOADER_EVENT + loaderType, ...args); } } diff --git a/catalog-ui/src/app/services/user-resource-service.ts b/catalog-ui/src/app/services/user-resource-service.ts deleted file mode 100644 index bdd9fc3303..0000000000 --- a/catalog-ui/src/app/services/user-resource-service.ts +++ /dev/null @@ -1,123 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * 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========================================================= - */ - -'use strict'; -import {IUserProperties} from "../models/user"; -import {ICookie, IAppConfigurtaion} from "../models/app-config"; -import {CookieService} from "./cookie-service"; - -// Define an interface of the object you want to use, providing it's properties -export interface IUserResource extends IUserProperties,ng.resource.IResource { - -} - -// Define your resource, adding the signature of the custom actions -export interface IUserResourceClass extends ng.resource.IResourceClass { - authorize():IUserResource; - getLoggedinUser():IUserResource; - setLoggedinUser(user:IUserResource):void; - getAllUsers(success?:Function, error?:Function):Array; - createUser(IResourceResource, success?:Function, error?:Function):void; - editUserRole(IResourceResource, success?:Function, error?:Function):void; - deleteUser(IResourceResource, success?:Function, error?:Function):void; -} - -export class UserResourceService { - - public static getResource = ($resource:ng.resource.IResourceService, - sdcConfig:IAppConfigurtaion, - cookieService:CookieService):IUserResourceClass => { - - let url:string = sdcConfig.api.root + sdcConfig.api.GET_user; - let authorizeUrl:string = sdcConfig.api.root + sdcConfig.api.GET_user_authorize; - let authorizeActionHeaders:any = {}; - let cookie:ICookie = sdcConfig.cookie; - authorizeActionHeaders[cookie.userFirstName] = cookieService.getFirstName(); - authorizeActionHeaders[cookie.userLastName] = cookieService.getLastName(); - authorizeActionHeaders[cookie.userEmail] = cookieService.getEmail(); - authorizeActionHeaders[cookie.userIdSuffix] = cookieService.getUserId(); - - // Define your custom actions here as IActionDescriptor - let authorizeAction:ng.resource.IActionDescriptor = { - method: 'GET', - isArray: false, - url: authorizeUrl, - headers: authorizeActionHeaders - }; - - let getAllUsers:ng.resource.IActionDescriptor = { - method: 'GET', - isArray: true, - url: sdcConfig.api.root + sdcConfig.api.GET_all_users - }; - - let editUserRole:ng.resource.IActionDescriptor = { - method: 'POST', - isArray: false, - url: sdcConfig.api.root + sdcConfig.api.POST_edit_user_role, - transformRequest: (data, headers)=> { - data.payloadData = undefined; - data.payloadName = undefined; - return JSON.stringify(data); - } - }; - - let deleteUser:ng.resource.IActionDescriptor = { - method: 'DELETE', - isArray: false, - url: sdcConfig.api.root + sdcConfig.api.DELETE_delete_user - }; - - let createUser:ng.resource.IActionDescriptor = { - method: 'POST', - isArray: false, - url: sdcConfig.api.root + sdcConfig.api.POST_create_user, - transformRequest: (data, headers)=> { - data.payloadData = undefined; - data.payloadName = undefined; - return JSON.stringify(data); - } - }; - let userResource:IUserResourceClass = $resource( - url, - {id: '@id'}, - { - authorize: authorizeAction, - getAllUsers: getAllUsers, - createUser: createUser, - editUserRole: editUserRole, - deleteUser: deleteUser - } - ); - - let _loggedinUser:IUserResource; - - userResource.getLoggedinUser = () => { - return _loggedinUser; - }; - - userResource.setLoggedinUser = (loggedinUser:IUserResource) => { - _loggedinUser = loggedinUser; - }; - - return userResource; - } -} -UserResourceService.getResource.$inject = ['$resource', 'sdcConfig', 'Sdc.Services.CookieService']; diff --git a/catalog-ui/src/app/utils/component-factory.ts b/catalog-ui/src/app/utils/component-factory.ts index b35918c0f6..f869ef68d3 100644 --- a/catalog-ui/src/app/utils/component-factory.ts +++ b/catalog-ui/src/app/utils/component-factory.ts @@ -70,6 +70,22 @@ export class ComponentFactory { return newResource; }; + public updateComponentFromCsar = (csarComponent:Resource, oldComponent:Resource):Component => { + _.pull(oldComponent.tags, oldComponent.name); + oldComponent.name = csarComponent.name; + oldComponent.selectedCategory = csarComponent.selectedCategory; + oldComponent.categories = csarComponent.categories; + oldComponent.vendorName = csarComponent.vendorName; + oldComponent.vendorRelease = csarComponent.vendorRelease; + oldComponent.csarUUID = csarComponent.csarUUID; + oldComponent.csarPackageType = csarComponent.csarPackageType; + oldComponent.csarVersion = csarComponent.csarVersion; + oldComponent.packageId = csarComponent.packageId; + oldComponent.description = csarComponent.description; + oldComponent.filterTerm = oldComponent.name + ' ' + oldComponent.description + ' ' + oldComponent.vendorName + ' ' + oldComponent.csarVersion + return oldComponent; + }; + public createFromCsarComponent = (csar:ICsarComponent):Component => { let newResource:Resource = this.createEmptyComponent(ComponentType.RESOURCE); newResource.name = csar.vspName; @@ -124,7 +140,7 @@ export class ComponentFactory { let newComponent:Component; switch (componentType) { - + case ComponentType.SERVICE_PROXY: case ComponentType.SERVICE: newComponent = new Service(this.ServiceService, this.$q); break; @@ -136,6 +152,7 @@ export class ComponentFactory { case ResourceType.CP: case ResourceType.PNF: case ResourceType.CVFC: + case ResourceType.CONFIGURATION: newComponent = new Resource(this.ResourceService, this.$q); break; } diff --git a/catalog-ui/src/app/utils/component-instance-factory.ts b/catalog-ui/src/app/utils/component-instance-factory.ts index 9e25e6b02f..25916cc055 100644 --- a/catalog-ui/src/app/utils/component-instance-factory.ts +++ b/catalog-ui/src/app/utils/component-instance-factory.ts @@ -21,7 +21,8 @@ * Created by obarda on 3/7/2016. */ 'use strict'; -import {ComponentInstance, ServiceInstance, ResourceInstance, Component} from "../models"; +import {ComponentInstance, ServiceInstance, ResourceInstance, Component, ServiceProxyInstance} from "../models"; +import {ComponentType} from "app/utils"; import {LeftPaletteComponent} from "../models/components/displayComponent"; export class ComponentInstanceFactory { @@ -29,10 +30,12 @@ export class ComponentInstanceFactory { static createComponentInstance(componentInstance:ComponentInstance):ComponentInstance { let newComponentInstance:ComponentInstance; switch (componentInstance.originType) { - case 'SERVICE': + case ComponentType.SERVICE: newComponentInstance = new ServiceInstance(componentInstance); break; - + case ComponentType.SERVICE_PROXY: + newComponentInstance = new ServiceProxyInstance(componentInstance); + break; default : newComponentInstance = new ResourceInstance(componentInstance); break; @@ -43,10 +46,12 @@ export class ComponentInstanceFactory { public createEmptyComponentInstance = (componentInstanceType?:string):ComponentInstance => { let newComponentInstance:ComponentInstance; switch (componentInstanceType) { - case 'SERVICE': + case ComponentType.SERVICE: newComponentInstance = new ServiceInstance(); break; - + case ComponentType.SERVICE_PROXY: + newComponentInstance = new ServiceProxyInstance(); + break; default : newComponentInstance = new ResourceInstance(); break; @@ -62,6 +67,9 @@ export class ComponentInstanceFactory { newComponentInstance.name = component.name; newComponentInstance.componentVersion = component.version; newComponentInstance.originType = component.getComponentSubType(); + if(component.getComponentSubType() === ComponentType.SERVICE){ + newComponentInstance.originType = ComponentType.SERVICE_PROXY + } //new component instance -> req. & cap. are added on successful instance creation newComponentInstance.requirements = component.requirements; newComponentInstance.capabilities = component.capabilities; diff --git a/catalog-ui/src/app/utils/constants.ts b/catalog-ui/src/app/utils/constants.ts index 6ec6a7762b..3ea652a7dd 100644 --- a/catalog-ui/src/app/utils/constants.ts +++ b/catalog-ui/src/app/utils/constants.ts @@ -29,6 +29,7 @@ export let CHANGE_COMPONENT_CSAR_VERSION_FLAG = 'changeComponentCsarVersion'; export class ComponentType { static SERVICE = 'SERVICE'; static RESOURCE = 'RESOURCE'; + static SERVICE_PROXY = 'ServiceProxy' } export class ServerTypeUrl { @@ -44,6 +45,7 @@ export class ResourceType { static VFCMT = 'VFCMT'; static PNF = 'PNF'; static CVFC = 'CVFC'; + static CONFIGURATION = 'Configuration'; } export class ComponentState { @@ -114,6 +116,7 @@ export class SOURCES { export class PROPERTY_DATA { public static TYPES = [PROPERTY_TYPES.STRING, PROPERTY_TYPES.INTEGER, PROPERTY_TYPES.FLOAT, PROPERTY_TYPES.BOOLEAN, PROPERTY_TYPES.JSON, PROPERTY_TYPES.SCALAR, PROPERTY_TYPES.SCALAR_FREQUENCY, PROPERTY_TYPES.SCALAR_SIZE, PROPERTY_TYPES.SCALAR_TIME, PROPERTY_TYPES.LIST, PROPERTY_TYPES.MAP]; public static SIMPLE_TYPES = [PROPERTY_TYPES.STRING, PROPERTY_TYPES.INTEGER, PROPERTY_TYPES.FLOAT, PROPERTY_TYPES.BOOLEAN, PROPERTY_TYPES.JSON, PROPERTY_TYPES.SCALAR, PROPERTY_TYPES.SCALAR_FREQUENCY, PROPERTY_TYPES.SCALAR_SIZE, PROPERTY_TYPES.SCALAR_TIME]; + public static SCALAR_TYPES = [PROPERTY_TYPES.SCALAR, PROPERTY_TYPES.SCALAR_FREQUENCY, PROPERTY_TYPES.SCALAR_SIZE, PROPERTY_TYPES.SCALAR_TIME]; public static ROOT_DATA_TYPE = "tosca.datatypes.Root"; public static OPENECOMP_ROOT = "org.openecomp.datatypes.Root"; public static SUPPLEMENTAL_DATA = "supplemental_data"; @@ -150,6 +153,7 @@ export class WorkspaceMode { export class ImagesUrl { public static RESOURCE_ICONS = '/assets/styles/images/resource-icons/'; public static SERVICE_ICONS = '/assets/styles/images/service-icons/'; + public static SERVICE_PROXY_ICONS = '/assets/styles/images/service-proxy-icons/'; public static SELECTED_UCPE_INSTANCE = '/assets/styles/images/resource-icons/selectedUcpeInstance.png'; public static SELECTED_CP_INSTANCE = '/assets/styles/images/resource-icons/selectedCPInstance.png'; public static SELECTED_VL_INSTANCE = '/assets/styles/images/resource-icons/selectedVLInstance.png'; @@ -249,6 +253,7 @@ export class EVENTS { static ON_WORKSPACE_SAVE_BUTTON_SUCCESS = "onWorkspaceSaveButtonSuccess"; static ON_WORKSPACE_SAVE_BUTTON_ERROR = "onWorkspaceSaveButtonError"; static ON_CHECKOUT = "onCheckout"; + static ON_REVERT = "onRevert"; //Loader events static SHOW_LOADER_EVENT = "showLoaderEvent"; diff --git a/catalog-ui/src/app/utils/menu-handler.ts b/catalog-ui/src/app/utils/menu-handler.ts index 351311a48f..1a3215bf80 100644 --- a/catalog-ui/src/app/utils/menu-handler.ts +++ b/catalog-ui/src/app/utils/menu-handler.ts @@ -116,7 +116,11 @@ export class MenuHandler { }); } - result.selectedIndex = components.indexOf(selectedItem); + if(!selectedItem){ + result.selectedIndex = components.length; + }else{ + result.selectedIndex = components.indexOf(selectedItem); + } components[result.selectedIndex] = selected; let clickItemCallback = (component:Component):ng.IPromise => { this.$state.go('workspace.general', { diff --git a/catalog-ui/src/app/view-models/admin-dashboard/admin-dashboard-view.html b/catalog-ui/src/app/view-models/admin-dashboard/admin-dashboard-view.html index 150f7c2554..924d46e932 100644 --- a/catalog-ui/src/app/view-models/admin-dashboard/admin-dashboard-view.html +++ b/catalog-ui/src/app/view-models/admin-dashboard/admin-dashboard-view.html @@ -22,5 +22,4 @@
-
diff --git a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view-model.ts b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view-model.ts index e1f3a50b44..db94a475d1 100644 --- a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view-model.ts +++ b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view-model.ts @@ -20,8 +20,8 @@ 'use strict'; import {ModalsHandler} from "app/utils"; -import {IUserResource, IUserResourceClass} from "app/services"; import {User, IUserProperties, IUser, IAppConfigurtaion} from "app/models"; +import {UserService} from "../../../ng2/services/user.service"; interface IUserManagementViewModelScope extends ng.IScope { sdcConfig:IAppConfigurtaion; @@ -33,7 +33,7 @@ interface IUserManagementViewModelScope extends ng.IScope { tableHeadersList:any; roles:Array; newUser:IUser; - currentUser:IUserResource; + currentUser:IUserProperties; userIdValidationPattern:RegExp; editForm:ng.IFormController; getAllUsers():void; @@ -53,7 +53,7 @@ export class UserManagementViewModel { static '$inject' = [ '$scope', 'sdcConfig', - 'Sdc.Services.UserResourceService', + 'UserServiceNg2', 'UserIdValidationPattern', '$filter', 'ModalsHandler' @@ -61,7 +61,7 @@ export class UserManagementViewModel { constructor(private $scope:IUserManagementViewModelScope, private sdcConfig:IAppConfigurtaion, - private userResourceService:IUserResourceClass, + private userService:UserService, private UserIdValidationPattern:RegExp, private $filter:ng.IFilterService, private ModalsHandler:ModalsHandler) { @@ -85,7 +85,7 @@ export class UserManagementViewModel { }); this.$scope.isLoading = false; }; - this.userResourceService.getAllUsers(onSuccess, onError); + this.userService.getAllUsers().subscribe(onSuccess, onError); }; private updateUserFilterTerm = (user:IUserProperties):void => { @@ -111,11 +111,11 @@ export class UserManagementViewModel { this.$scope.reverse = false; this.$scope.roles = this.sdcConfig.roles; this.$scope.isNewUser = false; - this.$scope.currentUser = this.userResourceService.getLoggedinUser(); + this.$scope.currentUser = this.userService.getLoggedinUser(); this.getAllUsers(); - let resource:IUserResource = {}; - this.$scope.newUser = new User(resource); + let userInfo:IUserProperties = {}; + this.$scope.newUser = new User(userInfo); this.$scope.sort = (sortBy:string):void => {//default sort by descending last update. default for alphabetical = ascending this.$scope.isNewUser = false; @@ -131,13 +131,12 @@ export class UserManagementViewModel { }; let onSuccess = (response:IUserProperties) => { - this.$scope.newUser.resource['index'] = this.$scope.usersList.length; - this.$scope.newUser.resource.lastLoginTime = "0"; - this.$scope.newUser.resource.status = response.status; - this.updateUserFilterTerm(this.$scope.newUser.resource); - this.$scope.usersList.unshift(this.$scope.newUser.resource); + this.$scope.newUser.userInfo.lastLoginTime = "0"; + this.$scope.newUser.userInfo.status = response.status; + this.updateUserFilterTerm(this.$scope.newUser.userInfo); + this.$scope.usersList.push(this.$scope.newUser.userInfo); this.$scope.isNewUser = true; - this.$scope.sortBy = 'index'; + this.$scope.sortBy = null; this.$scope.reverse = true; this.$scope.isLoading = false; this.$scope.newUser = new User(null); @@ -147,10 +146,10 @@ export class UserManagementViewModel { _self.$scope.isNewUser = false; }, 7000); }; - this.userResourceService.createUser({ - userId: this.$scope.newUser.resource.userId, - role: this.$scope.newUser.resource.role - }, onSuccess, onError); + this.userService.createUser({ + userId: this.$scope.newUser.userInfo.userId, + role: this.$scope.newUser.userInfo.role + }).subscribe(onSuccess, onError); }; @@ -174,7 +173,7 @@ export class UserManagementViewModel { this.updateUserFilterTerm(user); }; - this.userResourceService.editUserRole({id: user.userId, role: user.role}, onSuccess, onError); + this.userService.editUserRole(user.userId, user.role).subscribe(onSuccess, onError); }; this.$scope.saveUserChanges = (user:IUserProperties):void => { @@ -198,7 +197,7 @@ export class UserManagementViewModel { _.remove(this.$scope.usersList, {userId: userId}); this.$scope.isLoading = false; }; - this.userResourceService.deleteUser({id: userId}, onSuccess, onError); + this.userService.deleteUser(userId).subscribe(onSuccess, onError); }; let title:string = this.$filter('translate')("USER_MANAGEMENT_VIEW_DELETE_MODAL_TITLE"); diff --git a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view.html b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view.html index d2983873cc..2f94fb4aee 100644 --- a/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view.html +++ b/catalog-ui/src/app/view-models/admin-dashboard/user-management/user-management-view.html @@ -14,7 +14,7 @@
diff --git a/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts b/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts index ec9e888eed..10aa47e0ed 100644 --- a/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts +++ b/catalog-ui/src/app/view-models/catalog/catalog-view-model.ts @@ -20,8 +20,9 @@ 'use strict'; import {Component, IMainCategory, IGroup, IConfigStatuses, IAppMenu, IAppConfigurtaion, IUserProperties, ISubCategory} from "app/models"; -import {EntityService, IUserResourceClass, CacheService} from "app/services"; +import {EntityService, CacheService} from "app/services"; import {ComponentFactory, ResourceType, MenuHandler, ChangeLifecycleStateHandler} from "app/utils"; +import {UserService} from "../../ng2/services/user.service"; interface Checkboxes { @@ -87,7 +88,7 @@ export class CatalogViewModel { 'sdcMenu', '$state', '$q', - 'Sdc.Services.UserResourceService', + 'UserServiceNg2', 'Sdc.Services.CacheService', 'ComponentFactory', 'ChangeLifecycleStateHandler', @@ -101,7 +102,7 @@ export class CatalogViewModel { private sdcMenu:IAppMenu, private $state:ng.ui.IStateService, private $q:ng.IQService, - private userResourceService:IUserResourceClass, + private userService:UserService, private cacheService:CacheService, private ComponentFactory:ComponentFactory, private ChangeLifecycleStateHandler:ChangeLifecycleStateHandler, @@ -138,7 +139,7 @@ export class CatalogViewModel { this.$scope.sdcMenu = this.sdcMenu; this.$scope.confStatus = this.sdcMenu.statuses; this.$scope.expandedSection = ["type", "category", "status"]; - this.$scope.user = this.userResourceService.getLoggedinUser(); + this.$scope.user = this.userService.getLoggedinUser(); this.$scope.catalogMenuItem = this.sdcMenu.catalogMenuItem; this.$scope.version = this.cacheService.get('version'); this.$scope.sortBy = 'lastUpdateDate'; @@ -158,8 +159,6 @@ export class CatalogViewModel { this.$scope.checkboxesFilter.selectedStatuses = []; // this.$scope.isAllItemDisplay = this.$scope.numberOfItemToDisplay >= this.$scope.catalogFilterdItems.length; - - this.$scope.vfcmtType = ResourceType.VFCMT; }; private initScopeMethods = ():void => { diff --git a/catalog-ui/src/app/view-models/catalog/catalog-view.html b/catalog-ui/src/app/view-models/catalog/catalog-view.html index 03ca4cb81f..76f23573a1 100644 --- a/catalog-ui/src/app/view-models/catalog/catalog-view.html +++ b/catalog-ui/src/app/view-models/catalog/catalog-view.html @@ -135,7 +135,7 @@
- {{getNumOfElements((catalogFilterdItems| filter:{resourceType:('!'+vfcmtType)} | entityFilter:checkboxesFilter | filter:search).length)}} + {{getNumOfElements((catalogFilterdItems| entityFilter:checkboxesFilter | filter:search).length)}}
   @@ -155,31 +155,32 @@
-
-
-
{{component.getComponentSubType()}}
-
S
-
+
+
{{component.getComponentSubType()}}
+
S
+
-
+
-
{{component.name | resourceName}}
-
-
V {{component.version}}
+
{{component.name | resourceName}}
+
+ V {{component.version}}
-
{{component.getStatus(sdcMenu)}}
+
+
{{component.getStatus(sdcMenu)}}
+
@@ -192,8 +193,7 @@
- + -
diff --git a/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts b/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts index 5480e4f6cf..80a9bcac3e 100644 --- a/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts +++ b/catalog-ui/src/app/view-models/dashboard/dashboard-view-model.ts @@ -20,9 +20,10 @@ 'use strict'; import {IConfigRoles, IAppConfigurtaion, IAppMenu, IUserProperties, Component} from "app/models"; -import {EntityService, IUserResourceClass, SharingService, CacheService} from "app/services"; +import {EntityService, SharingService, CacheService} from "app/services"; import {ComponentType, ResourceType, MenuHandler, ModalsHandler, ChangeLifecycleStateHandler, SEVERITY, ComponentFactory} from "app/utils"; import {IClientMessageModalModel} from "../modals/message-modal/message-client-modal/client-message-modal-view-model"; +import {UserService} from "../../ng2/services/user.service"; export interface IDashboardViewModelScope extends ng.IScope { @@ -171,7 +172,7 @@ export class DashboardViewModel { 'sdcMenu', '$state', '$stateParams', - 'Sdc.Services.UserResourceService', + 'UserServiceNg2', 'Sdc.Services.SharingService', 'Sdc.Services.CacheService', '$q', @@ -191,7 +192,7 @@ export class DashboardViewModel { private sdcMenu:IAppMenu, private $state:any, private $stateParams:any, - private userResourceService:IUserResourceClass, + private userService:UserService, private sharingService:SharingService, private cacheService:CacheService, private $q:ng.IQService, @@ -239,7 +240,7 @@ export class DashboardViewModel { this.$scope.isLoading = false; this.$scope.sdcConfig = this.sdcConfig; this.$scope.sdcMenu = this.sdcMenu; - this.$scope.user = this.userResourceService.getLoggedinUser(); + this.$scope.user = this.userService.getLoggedinUser(); this.$scope.roles = this.sdcMenu.roles; this.$scope.showTutorial = false; this.$scope.isFirstTime = false; diff --git a/catalog-ui/src/app/view-models/dashboard/dashboard-view.html b/catalog-ui/src/app/view-models/dashboard/dashboard-view.html index baf4aa6e51..0ef5f4a1f9 100644 --- a/catalog-ui/src/app/view-models/dashboard/dashboard-view.html +++ b/catalog-ui/src/app/view-models/dashboard/dashboard-view.html @@ -47,29 +47,30 @@
-
- -
-
-
{{component.getComponentSubType()}}
-
S
-
+
+ +
+
{{component.getComponentSubType()}}
+
S
+
+
-
{{component.name | resourceName}}
-
-
V {{component.version}}
-
+
{{component.name | resourceName}}
+
V {{component.version}}
+
-
{{component.getStatus(sdcMenu)}}
+
+
{{component.getStatus(sdcMenu)}}
+
@@ -103,10 +104,9 @@
- +
- diff --git a/catalog-ui/src/app/view-models/dcae-app/dcae-app-view.html b/catalog-ui/src/app/view-models/dcae-app/dcae-app-view.html index af0d06787a..bb74374c01 100644 --- a/catalog-ui/src/app/view-models/dcae-app/dcae-app-view.html +++ b/catalog-ui/src/app/view-models/dcae-app/dcae-app-view.html @@ -12,6 +12,6 @@
- +
diff --git a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.html b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.html index ae13844532..5fd57f6b24 100644 --- a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.html +++ b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.html @@ -46,7 +46,8 @@
*
- diff --git a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.less b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.less index a25a2c5f62..e797093271 100644 --- a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.less +++ b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.less @@ -1,4 +1,3 @@ - .sdc-env-form-container{ .w-sdc-modal-body{ padding: 20px 10px 2px 10px; @@ -110,6 +109,9 @@ width: 100%; display: inline-flex; padding-right: 33px; + &.default-value{ + border-color: @func_color_h; + } } .action-button{ border-left: solid 1px @main_color_o; diff --git a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.ts b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.ts index f5962a2f79..a30fd15c63 100644 --- a/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.ts +++ b/catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.ts @@ -37,6 +37,7 @@ export interface IEnvParametersFormViewModelScope extends ng.IScope { getValidationPattern(type:string):RegExp; isInstance():boolean; validateJson(json:string):boolean; + onValueChanged(parameter: HeatParameterModel):void; close():void; save():void; openDescPopover(selectedParam:HeatParameterModel):void; @@ -86,7 +87,10 @@ export class EnvParametersFormViewModel { this.$scope.envParametersModal = this.$uibModalInstance; this.$scope.artifactResource = this.artifact; this.$scope.heatParameters = angular.copy(this.artifact.heatParameters); - + //if param does not have a value - display the default + this.$scope.heatParameters.forEach((heatParam) => { + heatParam.currentValue = heatParam.currentValue || heatParam.defaultValue; + }); this.$scope.tableHeadersList = [ {title: "Parameter", property: "name"}, {title: "Default Value", property: "defaultValue", info: "DEFAULT_VALUE_INFO"}, @@ -114,13 +118,13 @@ export class EnvParametersFormViewModel { this.$scope.save = ():void => { this.$scope.buttons[0].disabled = true;//prevent double click (DE246266) this.$scope.isLoading = true; - this.artifact.heatParameters = this.$scope.heatParameters; + this.artifact.heatParameters = angular.copy(this.$scope.heatParameters); this.artifact.heatParameters.forEach((parameter:any):void => { if ("" === parameter.currentValue) { //[Bug 154465] - Update and erase current value field in Env parameters form return empty String ("") instead of null. parameter.currentValue = null; - }else if (!parameter.currentValue && parameter.defaultValue) { - parameter.currentValue = parameter.defaultValue; + } else if (parameter.defaultValue && parameter.defaultValue == parameter.currentValue) { + parameter.currentValue = undefined; } }); @@ -143,6 +147,13 @@ export class EnvParametersFormViewModel { this.component.addOrUpdateArtifact(this.$scope.artifactResource).then(success, error); }; + this.$scope.onValueChanged = (parameter: HeatParameterModel):void => { + parameter.filterTerm = parameter.name + ' ' + parameter.currentValue + ' ' + parameter.defaultValue + ' ' +parameter.description + if('json'==parameter.type){ + this.$scope.forms.editForm[parameter.name].$setValidity('pattern', this.$scope.validateJson(parameter.currentValue)); + } + } + this.$scope.close = ():void => { //this.artifact.heatParameters.forEach((parameter:any):void => { // if (!parameter.currentValue && parameter.defaultValue) { diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts index ee2e94f934..0ad55715db 100644 --- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts +++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view-model.ts @@ -112,6 +112,7 @@ export class PropertyFormViewModel { private initResource = ():void => { this.$scope.editPropertyModel.property = new PropertyModel(this.property); this.$scope.editPropertyModel.property.type = this.property.type ? this.property.type : null; + this.$scope.editPropertyModel.property.value = this.$scope.editPropertyModel.property.value || this.$scope.editPropertyModel.property.defaultValue; this.setMaxLength(); this.initAddOnLabels(); }; @@ -241,7 +242,7 @@ export class PropertyFormViewModel { let onPropertySuccess = (propertyFromBE:PropertyModel):void => { console.info('onPropertyResourceSuccess : ', propertyFromBE); this.$scope.isLoading = false; - + this.filteredProperties[this.$scope.currentPropertyIndex] = propertyFromBE; if (!doNotCloseModal) { this.$uibModalInstance.close(propertyFromBE); } else { diff --git a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts index cf8c91c5e3..1cc3690e9f 100644 --- a/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts +++ b/catalog-ui/src/app/view-models/modals/onboarding-modal/onboarding-modal-view-model.ts @@ -125,6 +125,7 @@ export class OnboardingModalViewModel { this.cacheService.set(CHANGE_COMPONENT_CSAR_VERSION_FLAG, (this.$scope.selectedComponent).csarVersion); this.$state.go('workspace.general', { id: this.$scope.componentFromServer.uniqueId, + componentCsar: this.$scope.selectedComponent, type: this.$scope.componentFromServer.componentType.toLowerCase(), disableButtons: true }); diff --git a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html index eec7c4758d..604a1c3647 100644 --- a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html +++ b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html @@ -5,8 +5,7 @@
- + -
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts index 4b9dd6fc00..5236259f30 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts @@ -25,7 +25,7 @@ import {IWorkspaceViewModelScope} from "../../workspace-view-model"; import {ComponentServiceNg2} from "app/ng2/services/component-services/component.service"; import {ComponentGenericResponse} from "app/ng2/services/responses/component-generic-response"; import {Resource} from "app/models/components/resource"; -import {ResourceType} from "../../../../utils/constants"; +import {ResourceType,ComponentType} from "../../../../utils/constants"; export interface ICompositionViewModelScope extends IWorkspaceViewModelScope { @@ -48,6 +48,7 @@ export interface ICompositionViewModelScope extends IWorkspaceViewModelScope { setSelectedInstance(componentInstance:ComponentInstance):void; printScreen():void; isPNF():boolean; + isConfiguration():boolean; cacheComponentsInstancesFullData:Component; } @@ -167,9 +168,12 @@ export class CompositionViewModel { this.$scope.updateSelectedComponent = ():void => { if (this.$scope.currentComponent.selectedInstance) { - + let parentComponentUid = this.$scope.currentComponent.selectedInstance.componentUid + if(this.$scope.currentComponent.selectedInstance.originType === ComponentType.SERVICE_PROXY){ + parentComponentUid = this.$scope.currentComponent.selectedInstance.sourceModelUid; + } let componentParent = _.find(this.cacheComponentsInstancesFullData, (component) => { - return component.uniqueId === this.$scope.currentComponent.selectedInstance.componentUid; + return component.uniqueId === parentComponentUid; }); if (componentParent) { this.$scope.selectedComponent = componentParent; @@ -185,7 +189,7 @@ export class CompositionViewModel { console.log("Error updating selected component"); this.$scope.isLoadingRightPanel = false; }; - this.ComponentFactory.getComponentFromServer(this.$scope.currentComponent.selectedInstance.originType, this.$scope.currentComponent.selectedInstance.componentUid).then(onSuccess, onError); + this.ComponentFactory.getComponentFromServer(this.$scope.currentComponent.selectedInstance.originType, parentComponentUid).then(onSuccess, onError); } catch (e) { console.log("Error updating selected component", e); this.$scope.isLoadingRightPanel = false; @@ -247,6 +251,10 @@ export class CompositionViewModel { return this.$scope.selectedComponent.isResource() && (this.$scope.selectedComponent).resourceType === ResourceType.PNF; }; + this.$scope.isConfiguration = (): boolean => { + return this.$scope.selectedComponent.isResource() && (this.$scope.selectedComponent).resourceType === ResourceType.CONFIGURATION; + }; + this.eventListenerService.registerObserverCallback(EVENTS.ON_CHECKOUT, this.$scope.reload); } diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html index e05574e8c8..bfb2865348 100644 --- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html +++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view.html @@ -58,29 +58,30 @@ data-ui-sref="workspace.composition.deployment" tooltips tooltip-class="tooltip-custom tab-tooltip" tooltip-content="Deployment Artifacts" data-tests-id="deployment-artifact-tab" - data-ng-if="!isPNF()"> + data-ng-if="!isPNF() && !isConfiguration() && !(isComponentInstanceSelected() && currentComponent.selectedInstance.isServiceProxy())">
- -