diff options
105 files changed, 1248 insertions, 2694 deletions
@@ -2,11 +2,11 @@ .idea dist +node +target node_modules .npmrc test/coverage npm-debug.log .vscode scripts/elasticsearch/auditBulkLoad.json -node -target diff --git a/gulpfile.js b/gulpfile.js index ab115b1..0c6dadb 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -20,7 +20,6 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - 'use strict'; var localPath = require('path'); @@ -40,24 +39,30 @@ let dist = 'dist/'; let path = { output: dist, aaiOutput: dist + '/aai/', + saOutput: dist + '/editAttributes/', assets: './resources/**/*.{css,png,svg,eot,ttf,woff,woff2,otf}', json: './src/**/*.json', aaiIndex: './src/index.html', + saIndex: './src/editAttributes/index.html', scss: './resources/scss/**/*.scss', aaiCss: dist + '/css', + saCss: dist + '/editAttributes/css', war: [dist + '**/*.html', dist + '**/*.js', dist + '**/*.{css,png,svg,eot,ttf,woff,woff2,otf}', dist + '**/*.json', 'webapp/**'], wardest: dist }; taskMaker.defineTask('clean', {taskName: 'clean', src: path.output}); taskMaker.defineTask('copy', {taskName: 'copy-aai-index.html', src: path.aaiIndex, dest: path.output, rename: 'index.html'}); +taskMaker.defineTask('copy', {taskName: 'copy-sa-index.html', src: path.saIndex, dest: path.saOutput, rename: 'index.html'}); +/** Uncomment the loine below to generate a .war file with a local build */ +// taskMaker.defineTask('compress', {taskName: 'compress-war', src: path.war, filename: appName + '.war', dest: path.wardest}) gulp.task('copy-dev-stuff', callback => { - return runSequence(['copy-aai-index.html'], callback); + return runSequence(['copy-aai-index.html', 'copy-sa-index.html'], callback); }); gulp.task('copy-stuff', callback => { - return runSequence(['copy-aai-index.html'], callback); + return runSequence(['copy-aai-index.html', 'copy-sa-index.html'], callback); }); gulp.task('dev', callback => { @@ -67,8 +72,11 @@ gulp.task('dev', callback => { // Production build gulp.task('build', callback => { return runSequence('clean', ['copy-stuff'], 'prod', callback); + /** Uncomment the loine below to generate a .war file with a local build */ + //return runSequence('clean', ['copy-stuff'], 'prod', 'compress-war', callback); }); + gulp.task('default', ['dev']); gulp.task('prod', () => { @@ -137,6 +145,7 @@ gulp.task('prod', () => { }); + gulp.task('webpack-dev-server', () => { let myConfig = Object.create(devWebpackConfig); diff --git a/karma.conf.js b/karma.conf.js index d173c71..b23b582 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -20,7 +20,6 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - var path = require('path'); var webpack = require('webpack'); var isparta = require('isparta'); diff --git a/package.json b/package.json index 70d37f4..94e4b03 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,9 @@ "directories": { "test": "test" }, + "publishConfig": { + "registry": "http://10.247.57.144:8081/repository/npm-aee/" + }, "scripts": { "start": "gulp", "build": "gulp build", @@ -14,11 +17,14 @@ "author": "", "license": "SEE LICENSE IN LICENSE", "dependencies": { + "collapsible-sliding-panel": "1.0.0", "core-js": "^2.4.0", + "crypto-js": "^3.1.9-1", "d3": "^4.9.1", "es6-promise": "^3.2.1", + "filter-bar-utils": "1.0.0", "jquery": "^2.2.2", - "lodash": "^4.13.1", + "lodash": "^4.17.4", "lodash.debounce": "^4.0.8", "md5": "^2.1.0", "moment": "^2.13.0", @@ -27,7 +33,7 @@ "react": "^15.4.0", "react-autosuggest": "^6.0.4", "react-bootstrap": "^0.30.0-rc.1", - "react-datepicker": "^0.27.0", + "react-datepicker": "^0.53.0", "react-dom": "^15.1.0", "react-fontawesome": "^0.3.3", "react-grid-layout": "^0.14.4", @@ -41,7 +47,8 @@ "redux-thunk": "^2.1.0", "topojson": "^2.2.0", "uuid-js": "^0.7.5", - "validator": "^4.3.0" + "validator": "^4.3.0", + "vertical-filter-bar": "0.0.4" }, "devDependencies": { "babel-core": "^6.9.1", @@ -52,6 +59,7 @@ "babel-preset-stage-0": "^6.5.0", "chai": "^3.5.0", "copy-webpack-plugin": "^4.0.1", + "crypto-js": "^3.1.9-1", "css-loader": "^0.23.1", "enzyme": "^2.5.1", "eslint": "^3.1.1", @@ -73,6 +81,7 @@ "isparta-loader": "^2.0.0", "istanbul": "^1.0.0-alpha.2", "istanbul-instrumenter-loader": "^0.2.0", + "jasmine-core": "^2.8.0", "json-loader": "^0.5.4", "jsx-loader": "^0.13.2", "karma": "^0.13.22", @@ -103,6 +112,7 @@ "redux-mock-store": "^1.1.2", "sass-loader": "^3.1.2", "sinon": "^2.0.0-pre", + "sinon-chai": "^2.14.0", "source-map-loader": "^0.1.5", "style-loader": "^0.13.1", "url-loader": "^0.5.7", diff --git a/resources/images/icons/collapsible-sliding-panel-expander-icon.svg b/resources/images/icons/collapsible-sliding-panel-expander-icon.svg new file mode 100644 index 0000000..429b8bc --- /dev/null +++ b/resources/images/icons/collapsible-sliding-panel-expander-icon.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="4" height="9" viewBox="0 0 4 9"> + <defs> + <style> + .cls-1 { + fill: #fff; + fill-rule: evenodd; + } + </style> + </defs> + <path class="cls-1" d="M0,0H1V9H0V0ZM3,0H4V9H3V0Z"/> +</svg> diff --git a/resources/images/icons/collapsible-sliding-panel-expander-modified.svg b/resources/images/icons/collapsible-sliding-panel-expander-modified.svg new file mode 100644 index 0000000..0038af9 --- /dev/null +++ b/resources/images/icons/collapsible-sliding-panel-expander-modified.svg @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#FFFFFF;} +</style> +<polygon class="st0" points="10,0 0,0 4,4 4,7 6,9 6,4 "/> +</svg> diff --git a/resources/images/icons/collapsible-sliding-panel-expander-not-modified.svg b/resources/images/icons/collapsible-sliding-panel-expander-not-modified.svg new file mode 100644 index 0000000..6a543ec --- /dev/null +++ b/resources/images/icons/collapsible-sliding-panel-expander-not-modified.svg @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 10 10" style="enable-background:new 0 0 10 10;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#63A7B5;} +</style> +<polygon class="st0" points="10,0 0,0 4,4 4,7 6,9 6,4 "/> +</svg> diff --git a/resources/images/icons/filter/calendar-icon-hover.svg b/resources/images/icons/filter/calendar-icon-hover.svg new file mode 100644 index 0000000..9a2294d --- /dev/null +++ b/resources/images/icons/filter/calendar-icon-hover.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 13 14" style="enable-background:new 0 0 13 14;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#01AFD1;} +</style> +<rect x="3" y="4" class="st0" width="1" height="9"/> +<rect x="6" y="4" class="st0" width="1" height="9"/> +<rect x="9" y="4" class="st0" width="1" height="9"/> +<rect x="1" y="10" class="st0" width="11" height="1"/> +<rect x="1" y="7" class="st0" width="11" height="1"/> +<path class="st0" d="M12,2h-1V1c0-0.6-0.4-1-1-1H9C8.4,0,8,0.4,8,1v1H5V1c0-0.6-0.4-1-1-1H3C2.4,0,2,0.4,2,1v1H1C0.4,2,0,2.4,0,3v10 + c0,0.6,0.4,1,1,1h11c0.6,0,1-0.4,1-1V3C13,2.4,12.6,2,12,2z M9,1h1v3H9V1z M3,1h1v3H3V1z M12,13H1V5h11V13z"/> +</svg> diff --git a/resources/images/icons/filter/calendar-icon.svg b/resources/images/icons/filter/calendar-icon.svg new file mode 100644 index 0000000..8637f8c --- /dev/null +++ b/resources/images/icons/filter/calendar-icon.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 13 14" style="enable-background:new 0 0 13 14;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:#7C8388;} +</style> +<rect x="3" y="4" class="st0" width="1" height="9"/> +<rect x="6" y="4" class="st0" width="1" height="9"/> +<rect x="9" y="4" class="st0" width="1" height="9"/> +<rect x="1" y="10" class="st0" width="11" height="1"/> +<rect x="1" y="7" class="st0" width="11" height="1"/> +<path class="st0" d="M12,2h-1V1c0-0.6-0.4-1-1-1H9C8.4,0,8,0.4,8,1v1H5V1c0-0.6-0.4-1-1-1H3C2.4,0,2,0.4,2,1v1H1C0.4,2,0,2.4,0,3v10 + c0,0.6,0.4,1,1,1h11c0.6,0,1-0.4,1-1V3C13,2.4,12.6,2,12,2z M9,1h1v3H9V1z M3,1h1v3H3V1z M12,13H1V5h11V13z"/> +</svg> diff --git a/resources/images/icons/filter/collapse-filter.svg b/resources/images/icons/filter/collapse-filter.svg new file mode 100644 index 0000000..efcc3d5 --- /dev/null +++ b/resources/images/icons/filter/collapse-filter.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" viewBox="0 0 16 9"> + <defs> + <style> + .cls-1 { + fill: #404f5a; + fill-rule: evenodd; + } + </style> + </defs> + <path class="cls-1" d="M1.292,0.21l6.7,6.576,6.7-6.562A0.777,0.777,0,0,1,15.244,0,0.735,0.735,0,0,1,16,.7s0,0.008,0,.012a0.679,0.679,0,0,1-.164.44L8.58,8.732a0.787,0.787,0,0,1-1.185,0L0.163,1.149A0.679,0.679,0,0,1,.254.179,0.792,0.792,0,0,1,1.292.21Z"/> +</svg> diff --git a/resources/images/icons/filter/expand-filter.svg b/resources/images/icons/filter/expand-filter.svg new file mode 100644 index 0000000..81eca76 --- /dev/null +++ b/resources/images/icons/filter/expand-filter.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" viewBox="0 0 16 9"> + <defs> + <style> + .cls-1 { + fill: #404f5a; + fill-rule: evenodd; + } + </style> + </defs> + <path class="cls-1" d="M1.292,8.79l6.7-6.576,6.7,6.562A0.777,0.777,0,0,0,15.244,9,0.735,0.735,0,0,0,16,8.3s0-.008,0-0.012a0.679,0.679,0,0,0-.164-0.44L8.58,0.268a0.787,0.787,0,0,0-1.185,0L0.163,7.851a0.679,0.679,0,0,0,.091.971A0.792,0.792,0,0,0,1.292,8.79Z"/> +</svg> diff --git a/resources/images/icons/filter/filter-small.svg b/resources/images/icons/filter/filter-small.svg new file mode 100644 index 0000000..5e3fdbd --- /dev/null +++ b/resources/images/icons/filter/filter-small.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="12" height="11" viewBox="0 0 12 11"> + <defs> + <style> + .cls-1 { + fill: #01afd1; + fill-rule: evenodd; + } + </style> + </defs> + <path d="M11.992,1.092 L7.049,5.993 L7.049,9.630 L4.923,10.994 L4.923,5.993 L0.006,1.079 L0.006,0.006 L11.992,0.006 L11.992,1.092 Z" class="cls-1"/> +</svg> diff --git a/resources/images/icons/filter/selected-checkbox.svg b/resources/images/icons/filter/selected-checkbox.svg new file mode 100644 index 0000000..8857a2e --- /dev/null +++ b/resources/images/icons/filter/selected-checkbox.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="10" height="9" viewBox="0 0 10 9"> + <defs> + <style> + .cls-1 { + fill: #fff; + fill-rule: evenodd; + } + </style> + </defs> + <path class="cls-1" d="M3.7,9A0.7,0.7,0,0,1,3.18,8.756L0.213,5.416a0.911,0.911,0,0,1,0-1.181,0.685,0.685,0,0,1,1.049,0l2.4,2.7L8.691,0.3A0.687,0.687,0,0,1,9.737.2,0.909,0.909,0,0,1,9.82,1.379L4.269,8.707A0.714,0.714,0,0,1,3.734,9H3.7Z"/> +</svg> diff --git a/resources/views/customViews.json b/resources/overlays/overlaysDetails.json index 0d4f101..0d4f101 100644 --- a/resources/views/customViews.json +++ b/resources/overlays/overlaysDetails.json diff --git a/resources/scss/_common.scss b/resources/scss/_common.scss index 2444892..fa58b3e 100644 --- a/resources/scss/_common.scss +++ b/resources/scss/_common.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - @import "common/variables"; @import "common/typography"; @import "common/base"; diff --git a/resources/scss/_components.scss b/resources/scss/_components.scss index e76e3f2..882e1cc 100644 --- a/resources/scss/_components.scss +++ b/resources/scss/_components.scss @@ -21,22 +21,16 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - -@import "components/punchOut"; -@import "components/buttons"; @import "components/validationForm"; @import "components/slidePanel"; @import "components/toggleInput"; @import "components/notifications"; -@import "components/inputOptions"; -@import "components/progressBar"; @import "components/dropdownMultiSelect"; @import "components/inlineMessage"; -@import "components/dateRange"; -@import "components/dateRangeSelector"; @import "components/toggleButtonGroup"; @import "components/titledComponent"; @import "components/containerPanel"; +@import "components/filterBar"; %noselect { -webkit-touch-callout: none; @@ -69,12 +63,13 @@ flex: 1 1; margin: 0; } - .search-icon { + +.search-icon { position: relative; left: -20px; align-self: center; width: 0; - color: $dark-gray; + color: $background-color2; } } diff --git a/resources/scss/_modules.scss b/resources/scss/_modules.scss index d902d53..d2df043 100644 --- a/resources/scss/_modules.scss +++ b/resources/scss/_modules.scss @@ -21,12 +21,13 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - @import "header/layout"; -@import "audit-table/layout"; @import "visualizations/layout"; @import "tier-support/search"; @import "tier-support/selectedNodeDetails"; @import "tier-support/splitPane"; @import "d3/_forceDirectedGraph.scss"; @import "d3/_aggregationMap.scss"; +@import "setAttribute/editAttributeform.scss"; +@import "inventory/inventory.scss"; +@import "vnfSearch/vnfSearch.scss"; diff --git a/resources/scss/audit-table/_layout.scss b/resources/scss/audit-table/_layout.scss deleted file mode 100644 index ce92c17..0000000 --- a/resources/scss/audit-table/_layout.scss +++ /dev/null @@ -1,44 +0,0 @@ -/** - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ - - -.audit-table { - margin: 10px 20px 0px 20px; -} - -.audit-table td { - font-size: 12px; -} - -.notification { - font-size: 15px; -} - -.audit-pagination { - text-align: center; -} - -.table-column-json-blob{ - white-space: pre; - width: 20%; -} diff --git a/resources/scss/bootstrap-cust/_buttons.scss b/resources/scss/bootstrap-cust/_buttons.scss index 52bcb2e..92382aa 100644 --- a/resources/scss/bootstrap-cust/_buttons.scss +++ b/resources/scss/bootstrap-cust/_buttons.scss @@ -3,5 +3,5 @@ } .btn-info { - @include button-variant($text-black, $tlv-gray, $light-gray); + @include button-variant($text-color1, $background-color12, $text-color7); } diff --git a/resources/scss/bootstrap-cust/_forms.scss b/resources/scss/bootstrap-cust/_forms.scss index cb19964..4353521 100644 --- a/resources/scss/bootstrap-cust/_forms.scss +++ b/resources/scss/bootstrap-cust/_forms.scss @@ -5,7 +5,7 @@ &.required { label:before { content: "*"; - color: $red; + color: $text-color10; } } } @@ -17,7 +17,7 @@ @include box-shadow(none); } &:hover { - border-color: $gray; + border-color: $neutral-gray; } } @@ -47,7 +47,7 @@ input[type="radio"], input[type="checkbox"] { left: -1px; bottom: -1px; background-color: $white; - border: 1px solid $blue; + border: 1px solid $border-color3; } } @@ -69,7 +69,7 @@ input[type="radio"], input[type="checkbox"] { input[type=radio]:checked:before { content: "\2022"; - color: $blue; + color: $background-color5; font-size: 32px; text-align: center; line-height: 16px; @@ -78,7 +78,7 @@ input[type=radio]:checked:before { input[type=checkbox]:checked:before { content: "\2713"; font-size: 12px; - color: $blue; + color: $background-color5; text-align: center; line-height: 16px; } diff --git a/resources/scss/bootstrap-cust/_modals.scss b/resources/scss/bootstrap-cust/_modals.scss index 6bc6e46..e074d61 100644 --- a/resources/scss/bootstrap-cust/_modals.scss +++ b/resources/scss/bootstrap-cust/_modals.scss @@ -1,6 +1,6 @@ .modal-content { .modal-header { - border-top: 3px solid $blue; + border-top: 3px solid $border-color3; .modal-title { @extend .heading-2; } @@ -13,6 +13,6 @@ .modal-footer { padding: 15px; border-top: 0; - background-color: $tlv-gray; + background-color: $background-color12; } } diff --git a/resources/scss/bootstrap-cust/_navs.scss b/resources/scss/bootstrap-cust/_navs.scss index 7b9cff9..a00f3d1 100644 --- a/resources/scss/bootstrap-cust/_navs.scss +++ b/resources/scss/bootstrap-cust/_navs.scss @@ -7,14 +7,14 @@ } .nav-tabs { - @include box-shadow(0px 2px 1px -1px $gray); + @include box-shadow(0px 2px 1px -1px $neutral-gray); padding: 0 28px; > li { @extend .body-1; > a { - color: $dark-gray; + color: $background-color2; text-transform: uppercase; } @@ -23,7 +23,7 @@ &:hover, &:focus { @extend .body-1-medium; - border-bottom: 3px solid $blue; + border-bottom: 3px solid $border-color3; } } } diff --git a/resources/scss/bootstrap-cust/_scaffolding.scss b/resources/scss/bootstrap-cust/_scaffolding.scss new file mode 100644 index 0000000..559216b --- /dev/null +++ b/resources/scss/bootstrap-cust/_scaffolding.scss @@ -0,0 +1,154 @@ +// +// Scaffolding +// -------------------------------------------------- + +// Reset the box-sizing +// +// Heads up! This reset may cause conflicts with some third-party widgets. +// For recommendations on resolving such conflicts, see +// http://getbootstrap.com/getting-started/#third-box-sizing +* { + @include box-sizing(border-box); +} + +*:before, +*:after { + @include box-sizing(border-box); +} + +// Body reset + +html { + font-size: 10px; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +body { + font-family: $base-font-regular; + font-size: $font-size-base; + line-height: $line-height-base; + color: $text-color; + background-color: $body-bg; +} + +// Reset fonts for relevant elements +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +// Links + +a { + color: $link-color; + text-decoration: none; + + &:hover, + &:focus { + color: $link-hover-color; + text-decoration: $link-hover-decoration; + } + + &:focus { + @include tab-focus; + } +} + +// Figures +// +// We reset this here because previously Normalize had no `figure` margins. This +// ensures we don't break anyone's use of the element. + +figure { + margin: 0; +} + +// Images + +img { + vertical-align: middle; +} + +// Responsive images (ensure images don't scale beyond their parents) +.img-responsive { + @include img-responsive; +} + +// Rounded corners +.img-rounded { + border-radius: $border-radius-large; +} + +// Image thumbnails +// +// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`. +.img-thumbnail { + padding: $thumbnail-padding; + line-height: $line-height-base; + background-color: $thumbnail-bg; + border: 1px solid $thumbnail-border; + border-radius: $thumbnail-border-radius; + @include transition(all .2s ease-in-out); + + // Keep them at most 100% wide + @include img-responsive(inline-block); +} + +// Perfect circle +.img-circle { + border-radius: 50%; // set radius in percents +} + +// Horizontal rules + +hr { + margin-top: $line-height-computed; + margin-bottom: $line-height-computed; + border: 0; + border-top: 1px solid $hr-border; +} + +// Only display content to screen readers +// +// See: http://a11yproject.com/posts/how-to-hide-content/ + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +// Use in conjunction with .sr-only to only display content when it's focused. +// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 +// Credit: HTML5 Boilerplate + +.sr-only-focusable { + &:active, + &:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; + } +} + +// iOS "clickable elements" fix for role="button" +// +// Fixes "clickability" issue (and more generally, the firing of events such as focus as well) +// for traditionally non-focusable elements with role="button" +// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile + +[role="button"] { + cursor: pointer; +} diff --git a/resources/scss/bootstrap-cust/_tables.scss b/resources/scss/bootstrap-cust/_tables.scss index dc2e0c2..cf0288c 100644 --- a/resources/scss/bootstrap-cust/_tables.scss +++ b/resources/scss/bootstrap-cust/_tables.scss @@ -18,23 +18,32 @@ > tbody + tbody { border-top: none; } + .table { + -webkit-border-horizontal-spacing: 0px !important; + -webkit-border-vertical-spacing:0px !important; + } } .table-striped { > tbody > tr:nth-of-type( odd ) { - background-color: $background-gray; + background-color: $background-color1; } } .table-striped { > tbody > tr:nth-of-type( even ) { - background-color: $gray; + background-color: $neutral-gray; } } .table-hover { > tbody > tr:hover { - background-color: $tlv-hover; + background-color: $background-color12; cursor: pointer; } } + +table { + -webkit-border-horizontal-spacing: 0px !important; + -webkit-border-vertical-spacing:0px !important; +} diff --git a/resources/scss/bootstrap-cust/_variables.scss b/resources/scss/bootstrap-cust/_variables.scss index 1623e72..3a5de51 100644 --- a/resources/scss/bootstrap-cust/_variables.scss +++ b/resources/scss/bootstrap-cust/_variables.scss @@ -3,32 +3,34 @@ // //## Gray and brand colors for use across Bootstrap. -$gray-darker: $dark-gray; -$gray-dark: $dark-gray; -$gray: $gray; -$gray-light: $light-gray; -$gray-lighter: $light-gray; +$gray-darker: $background-color2; +$gray-dark: $background-color2; +$gray: $background-color13; +$gray-light: $text-color7; +$gray-lighter: $text-color7; -$brand-primary: $blue; -$brand-success: $green; -$brand-info: $light-gray; -$brand-warning: $yellow; -$brand-danger: $red; +$brand-primary: $background-color5; +$brand-success: $background-color11; +$brand-info: $text-color7; +$brand-warning: $text-color9; +$brand-danger: $text-color10; //== Scaffolding // //## Settings for some of the most global styles. -$body-bg: $white; -$text-color: $text-black; -$link-color: $link-blue; -$link-hover-color: $blue; +$body-bg: $primary-background-color; +$text-color: $text-color1; +$link-color: $border-color11; +$link-hover-color: $border-color3; //== Typography // //## Font, line-height, and color for body text, headings, and more. - +// This variable never used. Maybe delete!!!! +$font-family-sans-serif: omnes-regular, "Omnes-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif; +//$font-family-base: $font-family-sans-serif !default; $font-size-base: $body-font-2; $font-size-large: $body-font-1; $font-size-small: $body-font-3; @@ -53,10 +55,10 @@ $border-radius-small: 0; // $btn-font-weight: normal !default; $btn-default-color: $text-color; -$btn-default-bg: $white; -$btn-default-border: $light-gray; +$btn-default-bg: $primary-background-color; +$btn-default-border: $border-color5; -$btn-success-color: $white; +$btn-success-color: $primary-background-color; // Allows for customizing button radius independently from global border radius $btn-border-radius-base: 2px; @@ -65,19 +67,19 @@ $btn-border-radius-small: 2px; //== Dropdowns // -$dropdown-bg: $white; -$dropdown-border: $link-blue; -$dropdown-link-color: $text-black; +$dropdown-bg: $primary-background-color; +$dropdown-border: $background-color3; +$dropdown-link-color: $text-color1; $dropdown-divider-bg: $gray; //** Hover color for dropdown links. -$dropdown-link-hover-color: $black; +$dropdown-link-hover-color: $text-color3; //** Hover background for dropdown links. -$dropdown-link-hover-bg: $tlv-hover; +$dropdown-link-hover-bg: $background-color12; //** Active dropdown menu item text color. -$dropdown-link-active-color: $black; +$dropdown-link-active-color: $text-color3; //** Active dropdown menu item background color. -$dropdown-link-active-bg: $tlv-hover; +$dropdown-link-active-bg: $background-color12; //== Forms // @@ -85,16 +87,16 @@ $dropdown-link-active-bg: $tlv-hover; $form-group-margin-bottom: 24px; -$input-bg: $white; -$input-bg-disabled: $tlv-light-gray; -$input-color: $dark-gray; -$input-border: $light-gray; -$input-border-focus: $dark-blue; +$input-bg: $primary-background-color; +$input-bg-disabled: $background-color4; +$input-color:$text-color6; +$input-border: $text-color7; +$input-border-focus: $border-color4; //== Modals // //## -$modal-content-bg: $white; +$modal-content-bg: $primary-background-color; $modal-inner-padding: 0 15px; $modal-title-padding: 30px 25px 10px 25px; @@ -102,7 +104,7 @@ $modal-title-padding: 30px 25px 10px 25px; //== Close // //## -$close-color: $tlv-light-gray; +$close-color: $background-color4; //== Navs // @@ -116,11 +118,11 @@ $navbar-inverse-bg: $gray; $nav-tabs-border-color: transparent; $nav-tabs-link-hover-border-color: transparent; $nav-tabs-active-link-hover-bg: transparent; -$nav-tabs-active-link-hover-color: $text-black; +$nav-tabs-active-link-hover-color: $text-color1; $nav-tabs-active-link-hover-border-color: transparent; //== Popovers // //## -$popover-bg: $background-gray; +$popover-bg: $background-color1; diff --git a/resources/scss/bootstrap.scss b/resources/scss/bootstrap.scss index 19678b8..7751d1e 100644 --- a/resources/scss/bootstrap.scss +++ b/resources/scss/bootstrap.scss @@ -21,22 +21,26 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - -// DOX CORE +// ONAP CORE @import "common/variables"; + +// Import Typography Section @import "common/typography"; + + + // Core variables and mixins @import "bootstrap-cust/variables"; @import "bootstrap/variables"; @import "bootstrap/mixins"; // Reset and dependencies -@import "bootstrap/normalize"; +//@import "bootstrap/normalize"; //@import "bootstrap/print"; //@import "bootstrap/glyphicons"; // Core CSS -@import "bootstrap/scaffolding"; +@import "bootstrap-cust/scaffolding"; @import "bootstrap/type"; @import "bootstrap/code"; @import "bootstrap/grid"; diff --git a/resources/scss/bootstrap/_normalize.scss b/resources/scss/bootstrap/_normalize.scss index 9dddf73..3794158 100644 --- a/resources/scss/bootstrap/_normalize.scss +++ b/resources/scss/bootstrap/_normalize.scss @@ -7,7 +7,7 @@ // html { - font-family: sans-serif; // 1 + font-family: $base-font-regular; // 1 -ms-text-size-adjust: 100%; // 2 -webkit-text-size-adjust: 100%; // 2 } diff --git a/resources/scss/bootstrap/_scaffolding.scss b/resources/scss/bootstrap/_scaffolding.scss index 910afd5..559216b 100644 --- a/resources/scss/bootstrap/_scaffolding.scss +++ b/resources/scss/bootstrap/_scaffolding.scss @@ -24,7 +24,7 @@ html { } body { - font-family: $font-family-base; + font-family: $base-font-regular; font-size: $font-size-base; line-height: $line-height-base; color: $text-color; diff --git a/resources/scss/bootstrap/_variables.scss b/resources/scss/bootstrap/_variables.scss index 50b8781..8be9076 100644 --- a/resources/scss/bootstrap/_variables.scss +++ b/resources/scss/bootstrap/_variables.scss @@ -7,7 +7,7 @@ $bootstrap-sass-asset-helper: false !default; // //## Gray and brand colors for use across Bootstrap. -$gray-base: #000 !default; +$gray-base: $darkest !default; $gray-darker: lighten($gray-base, 13.5%) !default; // #222 $gray-dark: lighten($gray-base, 20%) !default; @@ -19,19 +19,19 @@ $gray-light: lighten($gray-base, 46.7%) !default; $gray-lighter: lighten($gray-base, 93.5%) !default; // #eee -$brand-primary: darken(#428bca, 6.5%) !default; +$brand-primary: darken($dark-blue, 6.5%) !default; // #337ab7 -$brand-success: #5cb85c !default; -$brand-info: #5bc0de !default; -$brand-warning: #f0ad4e !default; -$brand-danger: #d9534f !default; +$brand-success: $lime-green !default; +$brand-info: $light-green !default; +$brand-warning: $amber !default; +$brand-danger: $red !default; //== Scaffolding // //## Settings for some of the most global styles. //** Background color for `<body>`. -$body-bg: #fff !default; +$body-bg: $white !default; //** Global text color on `<body>`. $text-color: $gray-dark !default; @@ -46,13 +46,13 @@ $link-hover-decoration: underline !default; // //## Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; -$font-family-serif: Georgia, "Times New Roman", Times, serif !default; +$font-family-sans-serif: $base-font-regular !default; +$font-family-serif: $base-font-regular !default; //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`. -$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; +$font-family-monospace: $base-font-regular !default; $font-family-base: $font-family-sans-serif !default; -$font-size-base: 14px !default; +$font-size-base: $body-font-2 !default; $font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px $font-size-small: ceil(($font-size-base * 0.85)) !default; @@ -123,7 +123,7 @@ $border-radius-large: 6px !default; $border-radius-small: 3px !default; //** Global color for active items (e.g., navs or dropdowns). -$component-active-color: #fff !default; +$component-active-color: $white !default; //** Global background color for active items (e.g., navs or dropdowns). $component-active-bg: $brand-primary !default; @@ -144,13 +144,13 @@ $table-condensed-cell-padding: 5px !default; //** Default background color used for all tables. $table-bg: transparent !default; //** Background color used for `.table-striped`. -$table-bg-accent: #f9f9f9 !default; +$table-bg-accent: $light-gray !default; //** Background color used for `.table-hover`. -$table-bg-hover: #f5f5f5 !default; +$table-bg-hover: $neutral-gray !default; $table-bg-active: $table-bg-hover !default; //** Border color for table and cell borders. -$table-border-color: #ddd !default; +$table-border-color: $dark-gray !default; //== Buttons // @@ -158,27 +158,27 @@ $table-border-color: #ddd !default; $btn-font-weight: normal !default; -$btn-default-color: #333 !default; -$btn-default-bg: #fff !default; -$btn-default-border: #ccc !default; +$btn-default-color: $darkest !default; +$btn-default-bg: $white !default; +$btn-default-border: $neutral-gray !default; -$btn-primary-color: #fff !default; +$btn-primary-color: $white !default; $btn-primary-bg: $brand-primary !default; $btn-primary-border: darken($btn-primary-bg, 5%) !default; -$btn-success-color: #fff !default; +$btn-success-color: $white !default; $btn-success-bg: $brand-success !default; $btn-success-border: darken($btn-success-bg, 5%) !default; -$btn-info-color: #fff !default; +$btn-info-color: $white !default; $btn-info-bg: $brand-info !default; $btn-info-border: darken($btn-info-bg, 5%) !default; -$btn-warning-color: #fff !default; +$btn-warning-color: $white !default; $btn-warning-bg: $brand-warning !default; $btn-warning-border: darken($btn-warning-bg, 5%) !default; -$btn-danger-color: #fff !default; +$btn-danger-color: $white !default; $btn-danger-bg: $brand-danger !default; $btn-danger-border: darken($btn-danger-bg, 5%) !default; @@ -194,14 +194,14 @@ $btn-border-radius-small: $border-radius-small !default; //## //** `<input>` background color -$input-bg: #fff !default; +$input-bg: $white !default; //** `<input disabled>` background color $input-bg-disabled: $gray-lighter !default; //** Text color for `<input>`s $input-color: $gray !default; //** `<input>` border color -$input-border: #ccc !default; +$input-border: $neutral-gray !default; // TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4 //** Default `.form-control` border radius @@ -213,10 +213,10 @@ $input-border-radius-large: $border-radius-large !default; $input-border-radius-small: $border-radius-small !default; //** Border color for inputs on focus -$input-border-focus: #66afe9 !default; +$input-border-focus: $t-blue-link !default; //** Placeholder text color -$input-color-placeholder: #999 !default; +$input-color-placeholder: $neutral-gray !default; //** Default `.form-control` height $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default; @@ -229,7 +229,7 @@ $input-height-small: (floor($font-size-small * $line-height-small) + ($padding-s $form-group-margin-bottom: 15px !default; $legend-color: $gray-dark !default; -$legend-border-color: #e5e5e5 !default; +$legend-border-color: $light-gray !default; //** Background color for textual input addons $input-group-addon-bg: $gray-lighter !default; @@ -244,20 +244,20 @@ $cursor-disabled: not-allowed !default; //## Dropdown menu container and contents. //** Background for the dropdown menu. -$dropdown-bg: #fff !default; +$dropdown-bg: $white !default; //** Dropdown menu `border-color`. $dropdown-border: rgba(0, 0, 0, .15) !default; //** Dropdown menu `border-color` **for IE8**. -$dropdown-fallback-border: #ccc !default; +$dropdown-fallback-border: $neutral-gray !default; //** Divider color for between dropdown items. -$dropdown-divider-bg: #e5e5e5 !default; +$dropdown-divider-bg: $light-gray !default; //** Dropdown link text color. $dropdown-link-color: $gray-dark !default; //** Hover color for dropdown links. $dropdown-link-hover-color: darken($gray-dark, 5%) !default; //** Hover background for dropdown links. -$dropdown-link-hover-bg: #f5f5f5 !default; +$dropdown-link-hover-bg: $very-light-gray !default; //** Active dropdown menu item text color. $dropdown-link-active-color: $component-active-color !default; @@ -271,7 +271,7 @@ $dropdown-link-disabled-color: $gray-light !default; $dropdown-header-color: $gray-light !default; //** Deprecated `$dropdown-caret-color` as of v3.1.0 -$dropdown-caret-color: #000 !default; +$dropdown-caret-color: $darkest !default; //-- Z-index master list // @@ -371,17 +371,17 @@ $navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default; $navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default; $navbar-collapse-max-height: 340px !default; -$navbar-default-color: #777 !default; +$navbar-default-color: $dark-gray !default; $navbar-default-bg: #f8f8f8 !default; $navbar-default-border: darken($navbar-default-bg, 6.5%) !default; // Navbar links -$navbar-default-link-color: #777 !default; -$navbar-default-link-hover-color: #333 !default; +$navbar-default-link-color: $dark-gray !default; +$navbar-default-link-hover-color: $darkest !default; $navbar-default-link-hover-bg: transparent !default; -$navbar-default-link-active-color: #555 !default; +$navbar-default-link-active-color: $dark-gray !default; $navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default; -$navbar-default-link-disabled-color: #ccc !default; +$navbar-default-link-disabled-color: $neutral-gray !default; $navbar-default-link-disabled-bg: transparent !default; // Navbar brand label @@ -390,14 +390,14 @@ $navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !def $navbar-default-brand-hover-bg: transparent !default; // Navbar toggle -$navbar-default-toggle-hover-bg: #ddd !default; -$navbar-default-toggle-icon-bar-bg: #888 !default; -$navbar-default-toggle-border-color: #ddd !default; +$navbar-default-toggle-hover-bg: $very-light-gray !default; +$navbar-default-toggle-icon-bar-bg: $neutral-gray !default; +$navbar-default-toggle-border-color: $very-light-gray !default; //=== Inverted navbar // Reset inverted navbar basics $navbar-inverse-color: lighten($gray-light, 15%) !default; -$navbar-inverse-bg: #222 !default; +$navbar-inverse-bg: $darkest !default; $navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default; // Inverted navbar links @@ -406,7 +406,7 @@ $navbar-inverse-link-hover-color: #fff !default; $navbar-inverse-link-hover-bg: transparent !default; $navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default; $navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default; -$navbar-inverse-link-disabled-color: #444 !default; +$navbar-inverse-link-disabled-color: $neutral-gray !default; $navbar-inverse-link-disabled-bg: transparent !default; // Inverted navbar brand label @@ -415,9 +415,9 @@ $navbar-inverse-brand-hover-color: #fff !default; $navbar-inverse-brand-hover-bg: transparent !default; // Inverted navbar toggle -$navbar-inverse-toggle-hover-bg: #333 !default; -$navbar-inverse-toggle-icon-bar-bg: #fff !default; -$navbar-inverse-toggle-border-color: #333 !default; +$navbar-inverse-toggle-hover-bg: $darkest !default; +$navbar-inverse-toggle-icon-bar-bg: $white !default; +$navbar-inverse-toggle-border-color: $darkest !default; //== Navs // @@ -431,7 +431,7 @@ $nav-disabled-link-color: $gray-light !default; $nav-disabled-link-hover-color: $gray-light !default; //== Tabs -$nav-tabs-border-color: #ddd !default; +$nav-tabs-border-color: $neutral-gray !default; $nav-tabs-link-hover-border-color: $gray-lighter !default; @@ -439,7 +439,7 @@ $nav-tabs-active-link-hover-bg: $body-bg !default; $nav-tabs-active-link-hover-color: $gray !default; $nav-tabs-active-link-hover-border-color: #ddd !default; -$nav-tabs-justified-link-border-color: #ddd !default; +$nav-tabs-justified-link-border-color: $neutral-gray !default; $nav-tabs-justified-active-link-border-color: $body-bg !default; //== Pills @@ -452,20 +452,20 @@ $nav-pills-active-link-hover-color: $component-active-color !default; //## $pagination-color: $link-color !default; -$pagination-bg: #fff !default; -$pagination-border: #ddd !default; +$pagination-bg: $white !default; +$pagination-border: $neutral-gray !default; $pagination-hover-color: $link-hover-color !default; $pagination-hover-bg: $gray-lighter !default; -$pagination-hover-border: #ddd !default; +$pagination-hover-border: $neutral-gray !default; -$pagination-active-color: #fff !default; +$pagination-active-color: $white !default; $pagination-active-bg: $brand-primary !default; $pagination-active-border: $brand-primary !default; $pagination-disabled-color: $gray-light !default; -$pagination-disabled-bg: #fff !default; -$pagination-disabled-border: #ddd !default; +$pagination-disabled-bg: $white !default; +$pagination-disabled-border: $neutral-gray !default; //== Pager // @@ -497,20 +497,20 @@ $jumbotron-heading-font-size: ceil(($font-size-base * 4.5)) !default; // //## Define colors for form feedback states and, by default, alerts. -$state-success-text: #3c763d !default; -$state-success-bg: #dff0d8 !default; +$state-success-text: $fern-green !default; +$state-success-bg: $hint-of-green !default; $state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default; -$state-info-text: #31708f !default; -$state-info-bg: #d9edf7 !default; +$state-info-text: $astral-blue !default; +$state-info-bg: $lavender-violet !default; $state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default; -$state-warning-text: #8a6d3b !default; -$state-warning-bg: #fcf8e3 !default; +$state-warning-text: $mckenzie-orange !default; +$state-warning-bg: $derby-yellow !default; $state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default; -$state-danger-text: #a94442 !default; -$state-danger-bg: #f2dede !default; +$state-danger-text: $roof-terracotta-red !default; +$state-danger-bg: $pale-rode-red !default; $state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default; //== Tooltips @@ -520,9 +520,9 @@ $state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default; //** Tooltip max width $tooltip-max-width: 200px !default; //** Tooltip text color -$tooltip-color: #fff !default; +$tooltip-color: $white !default; //** Tooltip background color -$tooltip-bg: #000 !default; +$tooltip-bg: $darkest !default; $tooltip-opacity: .9 !default; //** Tooltip arrow width @@ -535,13 +535,13 @@ $tooltip-arrow-color: $tooltip-bg !default; //## //** Popover body background color -$popover-bg: #fff !default; +$popover-bg: $white !default; //** Popover maximum width $popover-max-width: 276px !default; //** Popover border color $popover-border-color: rgba(0, 0, 0, .2) !default; //** Popover fallback border color -$popover-fallback-border-color: #ccc !default; +$popover-fallback-border-color: $neutral-gray !default; //** Popover title background color $popover-title-bg: darken($popover-bg, 3%) !default; @@ -576,9 +576,9 @@ $label-warning-bg: $brand-warning !default; $label-danger-bg: $brand-danger !default; //** Default label text color -$label-color: #fff !default; +$label-color: $white !default; //** Default text color of a linked label -$label-link-hover-color: #fff !default; +$label-link-hover-color: $white !default; //== Modals // @@ -593,18 +593,18 @@ $modal-title-padding: 15px !default; $modal-title-line-height: $line-height-base !default; //** Background color of modal content area -$modal-content-bg: #fff !default; +$modal-content-bg: $white !default; //** Modal content border color $modal-content-border-color: rgba(0, 0, 0, .2) !default; //** Modal content border color **for IE8** -$modal-content-fallback-border-color: #999 !default; +$modal-content-fallback-border-color: $dark-gray !default; //** Modal backdrop background color -$modal-backdrop-bg: #000 !default; +$modal-backdrop-bg: $darkest !default; //** Modal backdrop opacity $modal-backdrop-opacity: .5 !default; //** Modal header border color -$modal-header-border-color: #e5e5e5 !default; +$modal-header-border-color: $light-gray !default; //** Modal footer border color $modal-footer-border-color: $modal-header-border-color !default; @@ -641,9 +641,9 @@ $alert-danger-border: $state-danger-border !default; //## //** Background color of the whole progress component -$progress-bg: #f5f5f5 !default; +$progress-bg: $very-light-gray !default; //** Progress bar text color -$progress-bar-color: #fff !default; +$progress-bar-color: $white !default; //** Variable for setting rounded corners on progress bar. $progress-border-radius: $border-radius-base !default; @@ -663,14 +663,14 @@ $progress-bar-info-bg: $brand-info !default; //## //** Background color on `.list-group-item` -$list-group-bg: #fff !default; +$list-group-bg: $white !default; //** `.list-group-item` border color -$list-group-border: #ddd !default; +$list-group-border: $light-gray !default; //** List group border radius $list-group-border-radius: $border-radius-base !default; //** Background color of single list items on hover -$list-group-hover-bg: #f5f5f5 !default; +$list-group-hover-bg: $very-light-gray !default; //** Text color of active list items $list-group-active-color: $component-active-color !default; //** Background color of active list items @@ -687,29 +687,29 @@ $list-group-disabled-bg: $gray-lighter !default; //** Text color for content within disabled list items $list-group-disabled-text-color: $list-group-disabled-color !default; -$list-group-link-color: #555 !default; +$list-group-link-color: $dark-gray !default; $list-group-link-hover-color: $list-group-link-color !default; -$list-group-link-heading-color: #333 !default; +$list-group-link-heading-color: $darkest !default; //== Panels // //## -$panel-bg: #fff !default; +$panel-bg: $white !default; $panel-body-padding: 15px !default; $panel-heading-padding: 10px 15px !default; $panel-footer-padding: $panel-heading-padding !default; $panel-border-radius: $border-radius-base !default; //** Border color for elements within panels -$panel-inner-border: #ddd !default; -$panel-footer-bg: #f5f5f5 !default; +$panel-inner-border: $light-gray !default; +$panel-footer-bg: $very-light-gray !default; $panel-default-text: $gray-dark !default; -$panel-default-border: #ddd !default; -$panel-default-heading-bg: #f5f5f5 !default; +$panel-default-border: $light-gray !default; +$panel-default-heading-bg: $very-light-gray !default; -$panel-primary-text: #fff !default; +$panel-primary-text: $white !default; $panel-primary-border: $brand-primary !default; $panel-primary-heading-bg: $brand-primary !default; @@ -738,7 +738,7 @@ $thumbnail-padding: 4px !default; //** Thumbnail background color $thumbnail-bg: $body-bg !default; //** Thumbnail border color -$thumbnail-border: #ddd !default; +$thumbnail-border: $light-gray !default; //** Thumbnail border radius $thumbnail-border-radius: $border-radius-base !default; @@ -751,22 +751,22 @@ $thumbnail-caption-padding: 9px !default; // //## -$well-bg: #f5f5f5 !default; +$well-bg: $very-light-gray !default; $well-border: darken($well-bg, 7%) !default; //== Badges // //## -$badge-color: #fff !default; +$badge-color: $white !default; //** Linked badge text color on hover -$badge-link-hover-color: #fff !default; +$badge-link-hover-color: $white !default; $badge-bg: $gray-light !default; //** Badge text color in active nav link $badge-active-color: $link-color !default; //** Badge background color in active nav link -$badge-active-bg: #fff !default; +$badge-active-bg: $white !default; $badge-font-weight: bold !default; $badge-line-height: 1 !default; @@ -779,9 +779,9 @@ $badge-border-radius: 10px !default; $breadcrumb-padding-vertical: 8px !default; $breadcrumb-padding-horizontal: 15px !default; //** Breadcrumb background color -$breadcrumb-bg: #f5f5f5 !default; +$breadcrumb-bg: $very-light-gray !default; //** Breadcrumb text color -$breadcrumb-color: #ccc !default; +$breadcrumb-color: $neutral-gray !default; //** Text color of current page in the breadcrumb $breadcrumb-active-color: $gray-light !default; //** Textual separator for between breadcrumb elements @@ -793,37 +793,37 @@ $breadcrumb-separator: "/" !default; $carousel-text-shadow: 0 1px 2px rgba(0, 0, 0, .6) !default; -$carousel-control-color: #fff !default; +$carousel-control-color: $white !default; $carousel-control-width: 15% !default; $carousel-control-opacity: .5 !default; $carousel-control-font-size: 20px !default; -$carousel-indicator-active-bg: #fff !default; -$carousel-indicator-border-color: #fff !default; +$carousel-indicator-active-bg: $white !default; +$carousel-indicator-border-color: $white !default; -$carousel-caption-color: #fff !default; +$carousel-caption-color: $white !default; //== Close // //## $close-font-weight: bold !default; -$close-color: #000 !default; +$close-color: $darkest !default; $close-text-shadow: 0 1px 0 #fff !default; //== Code // //## -$code-color: #c7254e !default; -$code-bg: #f9f2f4 !default; +$code-color: $red !default; +$code-bg: $light-gray !default; -$kbd-color: #fff !default; -$kbd-bg: #333 !default; +$kbd-color: $white !default; +$kbd-bg: $darkest !default; -$pre-bg: #f5f5f5 !default; +$pre-bg: $very-light-gray !default; $pre-color: $gray-dark !default; -$pre-border-color: #ccc !default; +$pre-border-color: $dark-gray !default; $pre-scrollable-max-height: 340px !default; //== Type diff --git a/resources/scss/common/_base.scss b/resources/scss/common/_base.scss index ab3756d..f7e3274 100644 --- a/resources/scss/common/_base.scss +++ b/resources/scss/common/_base.scss @@ -20,8 +20,7 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - - + html { font-size: 100%; height: 100%; @@ -31,10 +30,8 @@ body { /* scrollbar styling for Internet Explorer */ scrollbar-face-color: $scroll-bar-color; scrollbar-track-color: $scroll-bar-color; - height: 100%; - min-width: 1280px; - overflow-y: auto; - //@extend %noselect; + height: 100vh; + min-width: $minimum-application-width; } /* scrollbar styling for Google Chrome | Safari | Opera */ diff --git a/resources/scss/common/_layout.scss b/resources/scss/common/_layout.scss index 5f8d459..1c3bf66 100644 --- a/resources/scss/common/_layout.scss +++ b/resources/scss/common/_layout.scss @@ -20,8 +20,16 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - - + .hidden { display: none; } + +.main-app-container { + display: flex; + flex-direction: column; + height: 100vh; +} + +.view-container { +} diff --git a/resources/scss/common/_typography.scss b/resources/scss/common/_typography.scss index 3552f92..020fd7d 100644 --- a/resources/scss/common/_typography.scss +++ b/resources/scss/common/_typography.scss @@ -21,22 +21,20 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ +$base-font-regular: "Arial"; +$base-font-light: "Arial"; +$base-font-medium: "Arial"; +$base-font-bold: "Arial"; -/* Fonts */ - -$base-font-regular: Arial; -$base-font-light: Arial; -$base-font-medium: Arial; -$base-font-bold: Arial; - -$heading-font-1: 36px; -$heading-font-2: 24px; +$heading-font-1: 24px; +$heading-font-2: 20px; $heading-font-3: 18px; $heading-font-4: 16px; -$body-font-1: 14px; -$body-font-2: 13px; -$body-font-3: 12px; +$body-font-1: 16px; +$body-font-2: 14px; +$body-font-3: 13px; +$body-font-4: 12px; $focus-font-1: 55px; $focus-font-2: 50px; diff --git a/resources/scss/common/_utils.scss b/resources/scss/common/_utils.scss index 5f93c36..f50cea8 100644 --- a/resources/scss/common/_utils.scss +++ b/resources/scss/common/_utils.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - /* Prefix */ $box-sizing-prefix: webkit moz spec; diff --git a/resources/scss/common/_variables.scss b/resources/scss/common/_variables.scss index 43f75bd..e3ba93a 100644 --- a/resources/scss/common/_variables.scss +++ b/resources/scss/common/_variables.scss @@ -21,45 +21,149 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ +$minimum-application-width: 1000px; +$primary-header-height: 47px; +$secondary-header-height: 42px; +$total-header-height: $primary-header-height + $secondary-header-height; -// primary colors -$blue: #009fdb; -$dark-blue: #0568ae; -$light-blue: #71c5e8; -$green: #4ca90c; -$dark-green: #007a3e; -$light-green: #b5bd00; -$orange: #ea7400; -$yellow: #ffb81c; -$dark-purple: #702f8a; -$purple: #9063cd; -$light-purple: #caa2dd; -$black: #000000; -$dark-gray: #5a5a5a; -$gray: #959595; -$light-gray: #d2d2d2; -$white: #ffffff; - -// Secondary Colors -$red: #cf2a2a; -$background-gray: #f2f2f2; -$text-black: #191919; -$link-blue: #056bae; -$functional-green: #007a3e; -$functional-yellow: #ffb81c; -$tlv-gray: #f8f8f8; -$tlv-light-gray: #eaeaea; -$di-light-grey: #91a2ae; -$tlv-hover: #e6f6fb; +// primary colors: DO NOT USE these out side of this file +$turquoise-blue: #01afd1; +$dark-turquoise: #12798e; +$dark-blue: #004b68; +$darkest: #323b3f; +$white: #fff; +$very-light-gray: #eff2f3; +$pacific-blue: #009fdb; +$acadia-brown: #5a5a5a; +// Secondary Colors: DO NOT USE these out side of this file +$light-gray: #cfd6d9; +$light-gray-2: #d2d2d2; +$neutral-gray: #b7bfc3; +$dark-gray: #7c8388; +$t-blue: #0396b4; +$light-green: #d1de42; +$amber: #fab32b; +$red: #d03d3c; +$lime-green: #aadc1f; +$redish-orange: #fe7550; +$light-bluish-gray: #dbeaed; +$bluish-gray: #72848c; +$dark-bluish-gray: #404f5a; +$very-light-bluish-gray: #f3f6f6; +$nero-gray: #191919; +$derby-yellow: #faebcc; +$mckenzie-orange: #8a6d3b; +$fern-green: #3c763d; +$hint-of-green: #dff0d8; +$astral-blue: #31708f; +$lavender-violet: #d9edf7; +$roof-terracotta-red: #a94442; +$pale-rode-red: #f2dede; + + +// Variables: +// still investigate $background-gray: $very-light-gray; +$background-color1: $very-light-gray; +$background-header-color1: $pacific-blue; +$background-header-color2: $very-light-gray; +$search-background-color3: $very-light-gray; + +$text-color1: $acadia-brown; +$text-color2: $acadia-brown; +$text-color3: $acadia-brown; +$text-color4: $pacific-blue; +$text-color11: $white; +$border-color1: $acadia-brown; $scroll-bar-color: $dark-gray; +$border-color2: $dark-gray; +$shadow-color1: $dark-gray; +$background-color2: $dark-gray; +$graph-border-color1: $dark-gray; +$graph-background-color1: $dark-gray; +$search-background-color2: $dark-gray; + +//$t-blue-link: $t-blue; +$background-color3: $t-blue; +$border-color11: $t-blue; + +$background-color4: $very-light-bluish-gray; + +//$turquoise-blue +$background-color5: $pacific-blue; +$border-color3: $pacific-blue; +$graph-border-color2: $pacific-blue; +$graph-background-color2: $pacific-blue; +$search-background-color1: $pacific-blue; +$search-text-color1: $pacific-blue; +$selected-node-details-color1: $pacific-blue; + +// $dark-turquoise: #12798e; +$text-color5: $dark-turquoise; +$background-color6: $dark-turquoise; + +// $dark-blue +$text-color6: $dark-blue; +$background-color7: $dark-blue; +$border-color4: $dark-blue; + + +// $white: #fff; +$primary-background-color: $white; +$graph-background-color3: $white; +$graph-border-color3: $white; + + +//light-gray +$text-color7: $light-gray-2; +$background-color8: $light-gray-2; +$border-color5: $light-gray-2; +$graph-background-color4: $light-gray-2; + +//light-green +$text-color8: $light-green; + +// $neutral-gray + +$border-color6: $neutral-gray; +$search-border-color1: $neutral-gray; +$graph-border-color4: $neutral-gray; + +// $amber: #fab32b; +$border-color7: $amber; +$background-color9: $amber; +$text-color9: $amber; + + +// $red: +$background-color10: $red; +$text-color10: $red; +$border-color10: $red; + + +// $lime-green: #aadc1f; +$graph-background-color5: $lime-green; +$background-color11: $lime-green; + +// $redish-orange +$border-color12: $redish-orange; + + +//$light-bluish-gray: #dbeaed; +$background-color12: $light-bluish-gray; + +// $bluish-gray; +$background-color13: $bluish-gray; //responsive @media params $tablet-max-width: 1024px; $laptop-min-width: 1224px; $desktop-min-width: 1824px; +// light-gray-2 +$search-button-background-color: $light-gray-2; + /* Textures */ $images-folder-name: "../images"; $plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg"; diff --git a/resources/scss/components/_buttons.scss b/resources/scss/components/_buttons.scss index 6aab3e0..dbb684d 100644 --- a/resources/scss/components/_buttons.scss +++ b/resources/scss/components/_buttons.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - $plus-circle-icon-size: 18px; .plus-icon-button { background: url($plus-circle-icon) no-repeat; @@ -38,8 +37,8 @@ $plus-circle-icon-size: 18px; .primary-btn{ border: 1px solid; - border-color: $blue; - color: $blue; + border-color: $border-color3; + color: $text-color4; font-weight: bolder; @extend .body-1; text-align: center; @@ -47,23 +46,23 @@ $plus-circle-icon-size: 18px; border-radius: 5px; cursor: pointer; align-self: center; - background-color: $white; + background-color: $primary-background-color; .primary-btn-text { width: 100%; } &:hover { - color: $blue; - border-color: $blue; - background-color: $tlv-hover; + color: $background-color5; + border-color: $border-color3; + background-color: $background-color12; &:active { - color: $blue; - border-color: $blue; + color: $background-color5; + border-color: $border-color3; } } &:focus:not(:hover) { - color: $blue; - border-color: $blue; - background-color: $white; + color: $background-color5; + border-color: $border-color3; + background-color: $primary-background-color; } } diff --git a/resources/scss/components/_containerPanel.scss b/resources/scss/components/_containerPanel.scss index 46bc472..48fc4b9 100644 --- a/resources/scss/components/_containerPanel.scss +++ b/resources/scss/components/_containerPanel.scss @@ -28,10 +28,10 @@ } .titled-container-boarders { - border: solid 1px $black; - -webkit-box-shadow: 3px 3px 10px DarkGrey; - -moz-box-shadow: 3px 3px 10px DarkGrey; - box-shadow: 3px 3px 10px DarkGrey; + border: solid 1px $border-color1; + -webkit-box-shadow: 3px 3px 10px $shadow-color1; + -moz-box-shadow: 3px 3px 10px $shadow-color1; + box-shadow: 3px 3px 10px $shadow-color1; } .titled-container-header { diff --git a/resources/scss/components/_dateRangeSelector.scss b/resources/scss/components/_dateRangeSelector.scss deleted file mode 100644 index f580cd5..0000000 --- a/resources/scss/components/_dateRangeSelector.scss +++ /dev/null @@ -1,70 +0,0 @@ -/** - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ - - -.dateRangeSelector { - display: inline-block; - position: absolute; - margin-top: -1px; -} - -.dateRangeSelectorSearchButton span { - margin: 0px 10px; - font-weight: bold; - color: $black; -} - -#dateRangeSelectorPopover .popover-content { - padding: 5px; -} - -#dateRangeSelectorPopover li { - list-style: none; - margin: 5px 0px; - padding: 0px; - font-size: small; - font-weight: bold; - min-width: 200px; - box-sizing: content-box; -} - -#dateRangeSelectorPopover li a { - text-decoration: none; - background-color: $white; - display: block; - color: $dark-gray; - border-radius: 8px; - padding: 8px 5px 5px 8px; - border: solid 1px $tlv-gray; -} - -#dateRangeSelectorPopover li.active a, -#dateRangeSelectorPopover li a:hover { - background-color: $blue; - color: $white; -} - -.dateRangeSearchButton { - padding: 5px 5px 2px 5px; - margin: 5px 0px 0px 0px; -} diff --git a/resources/scss/components/_dropdownMultiSelect.scss b/resources/scss/components/_dropdownMultiSelect.scss index caa0db6..7c9e840 100644 --- a/resources/scss/components/_dropdownMultiSelect.scss +++ b/resources/scss/components/_dropdownMultiSelect.scss @@ -20,20 +20,19 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - - + .dropdown-multi-select { .Select { display: block; width: 100%; &.Select--multi { .Select-value { - color: $text-black; + color: $text-color1; background-color: transparent; - border-color: $light-gray; + border-color: $border-color5; } .Select-value-icon { - border-right-color: $light-gray; + border-right-color: $border-color5; } .Select-arrow-zone { vertical-align: top; diff --git a/resources/scss/components/_filterBar.scss b/resources/scss/components/_filterBar.scss new file mode 100644 index 0000000..0e98f32 --- /dev/null +++ b/resources/scss/components/_filterBar.scss @@ -0,0 +1,207 @@ +/** + * ============LICENSE_START======================================================= + * org.onap.aai + * ================================================================================ + * Copyright © 2017 AT&T Intellectual Property. All rights reserved. + * Copyright © 2017 Amdocs + * ================================================================================ + * 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========================================================= + * + * ECOMP is a trademark and service mark of AT&T Intellectual Property. + */ +/***** Vertical Filter Bar custom styles ******/ +$title-color: $text-color6; +$background-color: $background-color8; +$border-color: $border-color6; +$main-color: $text-color4; +$font-family-regular: $base-font-regular; +$font-family-semibold: $base-font-bold; +$res-folder: $icons-folder-path + '/filter'; + +.vfb-filters { + font-family: $font-family-semibold; + background-color: $background-color; + box-shadow: 2px 0px 1.98px 0.02px rgba(0, 0, 0, 0.09); +} + +.vfb-header { + background-color: $main-color; + font-size: $heading-font-2; + color: $primary-background-color; + + .clear-all{ + font-size: $body-font-2; + } +} + +.filter { + border-bottom: 1px solid $border-color; + &.expand{ + .direction{ + background: url($res-folder + '/expand-filter.svg') no-repeat; + } + } + &.collapse{ + .direction{ + background: url($res-folder +'/collapse-filter.svg') no-repeat; + } + } +} + +.filter-header { + .title { + font-family: $font-family-regular; + font-size: $heading-font-3; + color: $title-color; + + .iconClickArea{ + .icon{ + background: url($res-folder + '/filter-small.svg') no-repeat; + } + } + } +} + +.filter-group::-webkit-scrollbar-thumb { + background-color: $border-color; +} + +.filter-control { + .label{ + font-family: $font-family-semibold; + font-size: $body-font-3; + color: $text-color3; + } +} + +.dropdown-filter-control { + .dropdown-select { + font-family: $font-family-semibold; + font-size: $body-font-2; + } +} + +.filter-input{ + border: 1px solid $border-color; + font-family: $font-family-regular; + &:focus { + border: 1px solid $main-color; + } + + &::-webkit-input-placeholder { + font-size: $body-font-3; + font-family: $font-family-regular; + color: $neutral-gray; + } +} + +.date-picker-filter-control{ + @extend .filter-control; + .react-datepicker__input-container{ + width:100%; + } + input{ + @extend .filter-input; + } +} + +.date-dropdown { + .Select-clear-zone { + visibility: visible; + } +} + +/*utils*/ + +/*DATE PICKER*/ + +.react-datepicker { + font-family: $font-family-regular; +} + +.react-datepicker .react-datepicker__day--selected { + background-color: $main-color; +} +.react-datepicker .react-datepicker__day--selected:hover { + background-color: $main-color; +} + +.react-datepicker__day--today { + color: $text-color5; +} + +.date-picker-filter-control input[value=""] { + background: #fff url($res-folder + '/calendar-icon.svg') no-repeat 97% center; + background-size: 13px 14px; +} + +.date-picker-filter-control input:not([value=""]) { + background: #fff url($res-folder + '/calendar-icon-hover.svg') no-repeat 97% center; + background-size: 13px 14px; +} + + + +/***** Collapsible Panel Custom Styles *******/ +.collapsible-sliding-panel { + min-width: 323px; + background-color: $background-color; + border-right: solid 1px #000; + margin-left: -25px; + transition: min-width 0.22s linear; + overflow-y: auto; + overflow-x: hidden; +} + +.collapsible-sliding-panel-main-content { + width: 100%; +} + +.collapsible-sliding-panel.collapsible-sliding-panel-is-closed { + min-width: 0px; + transition: min-width 0.28s linear; + border: none; + div { + display: none; + } +} + +.collapsible-sliding-panel-expander { + min-width: 25px; + height: 30px; + z-index: 2; + position: relative; + top: 0px; + left: 323px; + transition:left 0.22s linear; + + background: $background-color6 url($icons-folder-path + '/collapsible-sliding-panel-expander-icon.svg') no-repeat center; + background-size: 5px; + border-top-right-radius: 25px; + border-bottom-right-radius: 25px; + cursor: pointer; +} + +.collapsible-sliding-panel-expander.collapsible-sliding-panel-is-closed { + min-width: 27px; + left: 0px; + transition: left 0.28s linear; + background: url($icons-folder-path + '/collapsible-sliding-panel-expander-icon.svg') no-repeat 7px center, + url($icons-folder-path + '/collapsible-sliding-panel-expander-modified.svg') no-repeat 16px center $background-color6; + background-size: 5px; +} + +.main-panel-class { + padding: 10px; +} diff --git a/resources/scss/components/_inlineMessage.scss b/resources/scss/components/_inlineMessage.scss index afc1e51..283c0d7 100644 --- a/resources/scss/components/_inlineMessage.scss +++ b/resources/scss/components/_inlineMessage.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .inline-message-alert { padding: 5px; margin: 5px 0px 5px 0px; diff --git a/resources/scss/components/_inputOptions.scss b/resources/scss/components/_inputOptions.scss index ee0f86e..1851d14 100644 --- a/resources/scss/components/_inputOptions.scss +++ b/resources/scss/components/_inputOptions.scss @@ -21,14 +21,13 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .input-options { display: flex; - border: 1px solid $light-gray; + border: 1px solid $border-color5; border-radius: 2px; height: 30px; &:hover { - border-color: $gray; + border-color: $border-color6; } .input-options-select { float: left; @@ -53,11 +52,11 @@ height: 24px; margin-top: 2px; margin-bottom: 2px; - border:1px solid $light-gray; + border:1px solid $border-color5; } } .input-options.has-error { - border-color: #A94442; + border-color: $red; } diff --git a/resources/scss/components/_notifications.scss b/resources/scss/components/_notifications.scss index 871d682..8a6363a 100644 --- a/resources/scss/components/_notifications.scss +++ b/resources/scss/components/_notifications.scss @@ -20,8 +20,7 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - - + .notification-modal { .modal-content { @@ -45,7 +44,7 @@ &.warning { .modal-content .modal-header { - border-top: 3px solid $yellow; + border-top: 3px solid $border-color7; } } diff --git a/resources/scss/components/_progressBar.scss b/resources/scss/components/_progressBar.scss deleted file mode 100644 index 0755e68..0000000 --- a/resources/scss/components/_progressBar.scss +++ /dev/null @@ -1,48 +0,0 @@ -/** - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ - - -.progress-bar-view { - display: -webkit-box; - padding: 5px; - .progress-bar-outside { - display: flex; - width: 90%; - justify-content: space-between; - background-color: lightgray; - border-radius: 15px; - height: 10px; - .progress-bar-inside { - display: block; - border: 1px solid gainsboro; - background-color: #4faa39; - border-radius: inherit; - } - } - .progress-bar-view-label { - margin-right: -30px; - margin-top: -2px; - margin-left: 10px; - color: black; - } - } diff --git a/resources/scss/components/_punchOut.scss b/resources/scss/components/_punchOut.scss deleted file mode 100644 index f99d8af..0000000 --- a/resources/scss/components/_punchOut.scss +++ /dev/null @@ -1,36 +0,0 @@ -/** - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ - - -&.dox-ui-punch-out { - background-color: $background-gray; -} - -&.dox-ui-punch-out.dox-ui-punch-out-full-page { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - overflow-y: auto; -} diff --git a/resources/scss/components/_slidePanel.scss b/resources/scss/components/_slidePanel.scss index e36b163..9eaddcd 100644 --- a/resources/scss/components/_slidePanel.scss +++ b/resources/scss/components/_slidePanel.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .slide-panel { transition: left .5s,right .5s; @@ -38,10 +37,10 @@ @extend .body-2; text-align: center; width: 100%; - color: $text-black; + color: $text-color1; } .collapse-double-icon { - color: $text-black; + color: $text-color1; cursor: pointer; } } diff --git a/resources/scss/components/_titledComponent.scss b/resources/scss/components/_titledComponent.scss index ca1bebf..20c7a2c 100644 --- a/resources/scss/components/_titledComponent.scss +++ b/resources/scss/components/_titledComponent.scss @@ -21,35 +21,34 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .dep-titled-container { - border: solid 1px $black; - -webkit-box-shadow: 3px 3px 10px $dark-gray; - -moz-box-shadow: 3px 3px 10px $dark-gray; - box-shadow: 3px 3px 10px $dark-gray; + border: solid 1px $border-color1; + -webkit-box-shadow: 3px 3px 10px $shadow-color1; + -moz-box-shadow: 3px 3px 10px $shadow-color1; + box-shadow: 3px 3px 10px $shadow-color1; border-radius: 0px 0px 5px 5px; margin: 20px 5px; .header { - border-bottom: solid 1px $black; + border-bottom: solid 1px $border-color1; padding: 5px; - background-color: $light-gray; + background-color: $background-color8; font-weight: bold; font-size: $heading-font-3; .toggle-visibility-button, .toggle-visibility-button:focus { float: right; - background-color: $light-gray; + background-color: $background-color8; border: none; margin-top: -2px; } .toggle-visibility-button:hover { - background-color: $light-gray; + background-color: $background-color8; border: none; .fa { - color: $black; + color: $text-color3; } } diff --git a/resources/scss/components/_toggleButtonGroup.scss b/resources/scss/components/_toggleButtonGroup.scss index 008b656..01fdc70 100644 --- a/resources/scss/components/_toggleButtonGroup.scss +++ b/resources/scss/components/_toggleButtonGroup.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .displayOptionButtons { float: right; } diff --git a/resources/scss/components/_toggleInput.scss b/resources/scss/components/_toggleInput.scss index 3401631..59c2058 100644 --- a/resources/scss/components/_toggleInput.scss +++ b/resources/scss/components/_toggleInput.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .toggle-input-wrapper { $toggle-width: 40px; $toggle-height: 20px; @@ -48,7 +47,7 @@ padding: 1px; width: $toggle-width; height: $toggle-height; - background-color: $dark-gray; + background-color: $background-color2; border-radius: $toggle-height; transition: background 0.4s; } @@ -63,7 +62,7 @@ left: 1px; bottom: 1px; right: 1px; - background-color: $white; + background-color: $primary-background-color; border-radius: $toggle-height; transition: background 0.4s; } @@ -72,15 +71,15 @@ left: 4px; bottom: 4px; width: $toggle-height - 8; - background-color: $dark-gray; + background-color: $background-color2; border-radius: $toggle-height - 8; transition: margin 0.4s, background 0.4s; } input.toggle-round-flat:checked + label { - background-color: $link-blue; + background-color: $background-color3; } input.toggle-round-flat:checked + label:after { margin-left: $toggle-height; - background-color: $link-blue; + background-color: $background-color3; } } diff --git a/resources/scss/components/_validationForm.scss b/resources/scss/components/_validationForm.scss index 020c5eb..686b9f1 100644 --- a/resources/scss/components/_validationForm.scss +++ b/resources/scss/components/_validationForm.scss @@ -20,8 +20,7 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - - + form { .validation-form-content { .validation-input-wrapper { @@ -68,6 +67,6 @@ form { .modal-body { .validation-buttons { padding: 20px 15px; - background-color: $tlv-gray; + background-color: $background-color12; } } diff --git a/resources/scss/audit/_layout.scss b/resources/scss/customViews.scss index 8d32c10..cebdb4b 100644 --- a/resources/scss/audit/_layout.scss +++ b/resources/scss/customViews.scss @@ -20,8 +20,4 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - - -#audit-report-ui { - min-width: 1280px; -} +$extendedApps: "../../node_modules"; diff --git a/resources/scss/d3/_aggregationMap.scss b/resources/scss/d3/_aggregationMap.scss index a22e5a4..85ec34a 100644 --- a/resources/scss/d3/_aggregationMap.scss +++ b/resources/scss/d3/_aggregationMap.scss @@ -21,19 +21,18 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .land-features { - fill: $light-gray; + fill: $background-color8; } .boundary-mesh { fill: none; - stroke: $black; + stroke: $text-color3; stroke-width: 0.75; stroke-linejoin: round; stroke-linecap: round; } .plot-point { - fill: $blue; + fill: $background-color5; } diff --git a/resources/scss/d3/_forceDirectedGraph.scss b/resources/scss/d3/_forceDirectedGraph.scss index 1bb1c69..e08d576 100644 --- a/resources/scss/d3/_forceDirectedGraph.scss +++ b/resources/scss/d3/_forceDirectedGraph.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .ts-force-selected-graph { padding: 0px; -webkit-user-select: none; /* Chrome all / Safari all */ @@ -31,119 +30,119 @@ } .aai-entity-node{ - font-family: Arial; - font-size: 12px; - line-height: 14px; + font-family: $base-font-regular; + font-size: $body-font-4; + line-height: $body-font-2; text-anchor: middle; } .aai-entity-node > .id-type-label { - fill:#404f5a; + fill: $text-color1; font-weight: bold; } .aai-entity-node > .id-value-label { - fill:#8b9399; + fill: $background-color2; } .aai-entity-link { - stroke: #d9dada; + stroke: $graph-border-color4; stroke-width: 2px; } .general-node > .inner { - fill: #626668; + fill: $background-color2; } .general-node > .outer { - fill: #ffffff; - stroke: #009fdb; + fill: $graph-background-color3; + stroke: $graph-border-color2; stroke-width: 2px; } .search-node > .inner { - fill: #009fdb; + fill: $graph-background-color1; } .search-node > .outer { - fill: #ffffff; - stroke: #009fdb; + fill: $graph-background-color3; + stroke: $graph-border-color2; stroke-width: 2px; } .selected-node > .inner { - fill: #626668; + fill: $graph-background-color1; } .selected-node > .outer { - fill: #d9dada; - stroke: #009fdb; + fill: $graph-background-color4; + stroke: $graph-border-color2; stroke-width: 3px; filter: url(#selected-node-drop-shadow); } .selected-search-node > .inner { - fill: #009fdb; + fill: $border-color3; } .selected-search-node > .outer { - fill: #d9dada; - stroke: #009fdb; + fill: $graph-background-color4; + stroke: $graph-border-color2; stroke-width: 3px; filter: url(#selected-node-drop-shadow); } @-moz-document url-prefix() { .selected-search-node > .outer { - fill: #d9dada; - stroke: #009fdb; + fill: $graph-background-color4; + stroke: $graph-border-color2; stroke-width: 3px; filter: drop-shadow(-1px 1px 3px rgba(0,0,0,0.5)); } .selected-node > .outer { - fill: #d9dada; - stroke: #009fdb; + fill: $graph-background-color4; + stroke: $graph-border-color2; stroke-width: 3px; filter: drop-shadow(-1px 1px 3px rgba(0,0,0,0.5)); } } .background-unselected { - fill: #626668; + fill: $background-color2; } .background-selected { - fill: #009fdb; + fill: $graph-border-color2; } .ellipses-ellipse { - fill: #FFFFFF; + fill: $graph-background-color3; } .triangle-warning { - fill: #FFFFFF; + fill: $graph-background-color3; fill-rule: evenodd; } .icon_tick_circle{ - fill: #9DC742; + fill: $graph-background-color5; } .icon_tick_path { fill-rule: evenodd; - fill: #FFFFFF; - stroke: #FFFFFF; + fill: $graph-background-color3; + stroke: $graph-border-color3; strokeWidth: 0.8; } .icon_warning_circle{ - fill: #FF0000; + fill: $red; } .icon_warning_path { fill-rule: evenodd; - fill: #FFFFFF; - stroke: #FFFFFF; + fill: $graph-background-color3; + stroke: $graph-border-color3; strokeWidth: 0.5; } diff --git a/resources/scss/header/_layout.scss b/resources/scss/header/_layout.scss index e641f4b..fc52d04 100644 --- a/resources/scss/header/_layout.scss +++ b/resources/scss/header/_layout.scss @@ -20,15 +20,13 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - - + .header { - padding: 0px; - background-color: $blue; + background-color: $background-header-color1; //display: flex; align-items: center; margin: 0px; - padding: 5px 5px 1px 5px; + padding: 5px 0px 0px 0px; .dropdown-toggle { border: none; @@ -39,57 +37,75 @@ .application-title { font-size: $heading-font-1; - color: $white; + color: $text-color11; width: 127px; - height: 45px; margin-right: 20px; - margin-top: 5px; - margin-bottom: 5px; - padding: 2px 20px 0 20px; - border-right: solid 1px $light-gray; + padding: 2px 20px 0 10px; + border-right: solid 1px $border-color5; + } + + .data-integrity-search-bar-wrapper { + display: flex; + align-items: center; + .inline-message-alert { + padding: 0; + margin: 0 0 0 10px; + height: 32px; + } } } .secondary-header { - background-color: $tlv-light-gray; + background-color: $background-header-color2; margin: 0px; padding: 10px 20px 5px 20px; - border-top: solid 2px $light-gray; - border-bottom: solid 2px $light-gray; + border-top: solid 2px $border-color5; + border-bottom: solid 2px $border-color5; + width: 100%; .secondary-title { - color: $black; - font-size: $heading-font-2; + color: $text-color2; + font-size: $heading-font-3; + font-weight: bold; padding: 5px 20px 0px 0px; - border-right: solid 1px $light-gray; + border-right: solid 1px $border-color5; margin: 0px 25px 0px 0px; } } .toggle-view-button { - color: $white; + color: $text-color11; background-color: transparent; font-size: 20px; - padding: 10px 15px; + padding: 2px 5px; + margin-left: 10px; border: none; vertical-align: text-bottom; } -.toggle-view-button:hover, .toggle-view-button:focus { - color: #3C4143; +.toggle-view-button:hover { + color: $text-color3; + outline: none; +} + +.toggle-view-button:focus { + color: $primary-background-color; + outline: none; } .toggle-view-button-active { - color: $blue; - background-color: $white; + color: $text-color11; + background-color: transparent; font-size: 20px; - padding: 10px 15px; + padding: 2px 5px; + margin-left: 10px; + outline: none; border: none; vertical-align: text-bottom; } .modal { - top: 56px; + top: 43px; } .modal-backdrop.in{ @@ -107,7 +123,7 @@ .modal-content { height: 100%; box-shadow: none; - background-color: rgba(0, 0, 0, 0.7); + background-color: $background-color2; .modal-body { margin: 0px; @@ -127,7 +143,7 @@ .main-menu-button { background-color: transparent; border: none; - color: #F8F8F8; + color: $primary-background-color; font-size: 16px; line-height: 13px; width: 100%; @@ -148,7 +164,7 @@ } .main-menu-button:hover, .main-menu-button:focus { - color: $blue; + color: $text-color4; modal-backdrop.in .view-inspect-button-icon { background-image: url($icons-folder-path + '/binocularicon_hover.png'); @@ -164,9 +180,9 @@ } .main-menu-button-active { - background-color: $blue; + background-color: $turquoise-blue; border: none; - color: #3C4143; + color: $text-color3; font-size: 16px; line-height: 13px; width: 100%; diff --git a/resources/scss/inventory/_inventory.scss b/resources/scss/inventory/_inventory.scss index ddac3a1..67adff5 100644 --- a/resources/scss/inventory/_inventory.scss +++ b/resources/scss/inventory/_inventory.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .inventory-pane { padding: 5px; } diff --git a/resources/scss/setAttribute/_editAttributeform.scss b/resources/scss/setAttribute/_editAttributeform.scss new file mode 100644 index 0000000..d069a8c --- /dev/null +++ b/resources/scss/setAttribute/_editAttributeform.scss @@ -0,0 +1,122 @@ +/** + * ============LICENSE_START======================================================= + * org.onap.aai + * ================================================================================ + * Copyright © 2017 AT&T Intellectual Property. All rights reserved. + * Copyright © 2017 Amdocs + * ================================================================================ + * 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========================================================= + * + * ECOMP is a trademark and service mark of AT&T Intellectual Property. + */ + +html { + font-family: $base-font-regular; +} + +form { + margin: 50px 20px 20px 20px; + font-size: $body-font-1; +} + +div.attribute-field, div.centre { + display: flex; + flex-flow: row; + justify-content: center; + margin: 10px 5px; +} + +form > div > h2, +div.centre > span.error-message{ + min-width: 550px; + margin: 15px 0px 5px 0px; +} + +div.attribute-field > label { + font-weight: bold; + margin-right: 10px; + min-width: 170px; + text-align: right; + padding: 6px 9px; +} + +div.attribute-field > div { + flex: 1; + max-width: 500px; + display: flex; + flex-flow: column; + position: relative; +} + +div.attribute-field > div > * { + flex: 1; + padding: 5px 8px; + border: solid 1px $border-color5; +} + +div.attribute-field > div > select { + min-height: 30px; +} + +div > span.error-message { + font-weight: bold; + color: $background-color10; + border: none; +} + +div > span.error-message:before { + display: inline-block; + text-rendering: auto; + content: '\F06A'; + margin-right: 5px; + font: normal normal normal 14px/1 FontAwesome; +} + +form > div > button { + margin: 10px; + border-radius: 5px; + padding: 10px 5px 5px 5px; + font-weight: bold; + font-size: $heading-font-3; +} + +form > div > button[type=submit] { + color: $primary-background-color; + background-image: linear-gradient($background-color12, $background-color5); + border: solid 1px $border-color3; +} + +form > div > button[type=submit]:before { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + text-rendering: auto; + content: '\F1D8'; + margin-right: 5px; +} + +form>div button[type=submit][disabled] { + opacity: .6; + cursor: not-allowed; +} + +form > div > button[type=button] { + color: $text-color3; + background-image: linear-gradient($primary-background-color, $background-color8); + border: solid 1px $border-color5; +} + +form>div button[type=button][disabled] { + opacity: .6; + cursor: not-allowed; +} diff --git a/resources/scss/style.scss b/resources/scss/style.scss index d8fa260..aa0c54d 100644 --- a/resources/scss/style.scss +++ b/resources/scss/style.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - @import "common"; @import "components"; @import "modules"; diff --git a/resources/scss/tier-support/_search.scss b/resources/scss/tier-support/_search.scss index 6c349af..b65cb57 100644 --- a/resources/scss/tier-support/_search.scss +++ b/resources/scss/tier-support/_search.scss @@ -21,7 +21,6 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .auto-complete-search { display: inline-block; vertical-align: text-bottom; @@ -31,9 +30,9 @@ float: left; } -.auto-complete-search-button-group{ - position: absolute; - width: 90px; +.auto-complete-search-button-group { + position: absolute !important; + padding-top: 3px; } .auto-complete-search input.form-control { @@ -41,36 +40,35 @@ } .auto-complete-search-button, .auto-complete-search-button:focus { - background-color: $light-gray; - padding-bottom: 8px; + background-color: $search-button-background-color; width: 45px; height: 30px; - border: solid 1px $gray; + border: solid 1px $search-border-color1; } .auto-complete-search button:hover { - background-color: $blue; + background-color: $search-background-color1; } .auto-complete-search .fa-lg { font-size: 1em; line-height: 1em; - background-color: $light-gray; + background-color: $search-button-background-color; } .auto-complete-search button:hover .fa-search { - color: $white; - background-color: $blue; + color: $primary-background-color; + background-color: $search-background-color1; } .auto-complete-search .btn-group .auto-complete-clear-button { border: none; - margin-left: -35px; - margin-top: 2px; - padding: 5px 12px 8px 12px; + margin-left: -35px !important; + height: 30px; + background-color: transparent; i { - color: #009fdb; + color: $search-text-color1; opacity: 0.3; filter: alpha(opacity=30); background-color: transparent; @@ -81,26 +79,28 @@ background-color: transparent; i.fa-times { - color: #009fdb; + color: $search-text-color1; opacity: 1; background-color: transparent; } } .auto-complete-search button:hover .fa-times { - color: $white; - background-color: $blue; + color: $primary-background-color; + background-color: $search-background-color1; } .react-autosuggest__container { display: inline-block; position: relative; + padding-top: 3px; } -.react-autosuggest__input{ +.react-autosuggest__input { width: 655px; height: 30px; display: inline-block; + padding-top: 10px; } .react-autosuggest__input:focus { @@ -117,20 +117,19 @@ overflow-y: scroll; height: 200px; border:1px ; - } -.react-autosuggest__suggestions-containerCopy{ +.react-autosuggest__suggestions-containerCopy { display: none; display: block; position: absolute; top: 30px; width: 655px; - border: 1px solid #aaa; - background-color: #fff; + border: 1px solid $search-border-color1; + background-color: $primary-background-color; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; - z-index: 2; + z-index: 90; overflow-y: hidden; } @@ -139,11 +138,11 @@ position: absolute; top: 30px; width: 655px; - border: 1px solid #aaa; - background-color: #fff; + border: 1px solid $search-border-color1; + background-color: $primary-background-color; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; - z-index: 2; + z-index: 99; overflow-x: hidden; } @@ -161,14 +160,14 @@ } .react-autosuggest__suggestion--focused { - background-color: #ddd; + background-color: $search-background-color3; } .react-autosuggest__section-title { padding: 10px 0 0 10px; font-size: 12px; - color: #777; - border-top: 1px dashed #ccc; + color: $search-background-color2; + border-top: 1px dashed $search-border-color1; } .react-autosuggest__section-container:first-child .react-autosuggest__section-title { @@ -185,10 +184,11 @@ flex: 20; } -.suggestionColumnTwo{ +.suggestionColumnTwo { flex: 80; } -.highlight{ + +.highlight { font-weight: bolder; background-color:inherit; padding: 0px; diff --git a/resources/scss/tier-support/_selectedNodeDetails.scss b/resources/scss/tier-support/_selectedNodeDetails.scss index 0532319..ec4798c 100644 --- a/resources/scss/tier-support/_selectedNodeDetails.scss +++ b/resources/scss/tier-support/_selectedNodeDetails.scss @@ -21,14 +21,13 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .ts-selected-node-details { padding: 20px; - color: $dark-gray; + color: $border-color2; font-family: $body-font-1; h1 { - color: $blue; + color: $selected-node-details-color1; font-size: $heading-font-2; margin-bottom: 5px; } @@ -40,7 +39,7 @@ margin-top: 15px; th { - color: $gray; + color: $border-color2; } td { @@ -49,14 +48,14 @@ .left-column-cell { padding: 7px 5px 5px 0px; - border-bottom: solid 1px $light-gray; - border-right: solid 1px $light-gray; + border-bottom: solid 1px $border-color5; + border-right: solid 1px $border-color5; width: 50%; } .right-column-cell { padding: 7px 5px 5px 15px; - border-bottom: solid 1px $light-gray; + border-bottom: solid 1px $border-color5; } } diff --git a/resources/scss/tier-support/_splitPane.scss b/resources/scss/tier-support/_splitPane.scss index db0770e..dc07be0 100644 --- a/resources/scss/tier-support/_splitPane.scss +++ b/resources/scss/tier-support/_splitPane.scss @@ -21,15 +21,13 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - .SplitPane { - min-width: 1280px; - //108 is the height of the header in tsui - height: calc(100% - 108px) !important; + min-width: $minimum-application-width; + height: calc(100% - #{$total-header-height}) !important; } .Resizer { - background: #000; + background: $border-color1; opacity: .2; z-index: 1; -moz-box-sizing: border-box; @@ -48,28 +46,28 @@ .Resizer.horizontal { height: 11px; margin: -5px 0; - border-top: 5px solid rgba(255, 255, 255, 0); - border-bottom: 5px solid rgba(255, 255, 255, 0); + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; cursor: row-resize; width: 100%; } .Resizer.horizontal:hover { - border-top: 5px solid rgba(0, 0, 0, 0.5); - border-bottom: 5px solid rgba(0, 0, 0, 0.5); + border-top: 5px solid $border-color2; + border-bottom: 5px solid $border-color2; } .Resizer.vertical { width: 11px; margin: 0 -5px; - border-left: 5px solid rgba(255, 255, 255, 0); - border-right: 5px solid rgba(255, 255, 255, 0); + border-left: 5px solid transparent; + border-right: 5px solid transparent; cursor: col-resize; } .Resizer.vertical:hover { - border-left: 5px solid rgba(0, 0, 0, 0.5); - border-right: 5px solid rgba(0, 0, 0, 0.5); + border-left: 5px solid $border-color2; + border-right: $border-color2; } Resizer.disabled { cursor: not-allowed; @@ -79,7 +77,7 @@ Resizer.disabled:hover { } .Pane2 { - background-color: $tlv-light-gray; - border-left: solid 2px $light-gray; - overflow: hidden; + background-color: $background-color4; + border-left: solid 2px $border-color5; + overflow: auto; } diff --git a/resources/scss/visualizations/_layout.scss b/resources/scss/visualizations/_layout.scss index 74d15f1..fa756f5 100644 --- a/resources/scss/visualizations/_layout.scss +++ b/resources/scss/visualizations/_layout.scss @@ -21,9 +21,8 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - #audit-visualizations { - padding: 10px; + padding: 0px 10px 10px 25px; } #visualization-violation-severities { @@ -31,24 +30,24 @@ } #visualization-severity-minor { - border: solid 2px $yellow; + border: solid 2px $border-color7; font-size: 14px; margin: 0px 10px; - padding: 6px 10px 0px 10px; + padding: 3px 10px; } #visualization-severity-major { - border: solid 2px $orange; + border: solid 2px $border-color12; font-size: 14px; margin: 0px 10px; - padding: 6px 10px 0px 10px; + padding: 3px 10px; } #visualization-severity-critical { - border: solid 2px $red; + border: solid 2px $border-color10; font-size: 14px; - margin: 10px 14px; - padding: 9px 10px 0px 10px; + margin: 0px 10px; + padding: 3px 10px; } .visualization-title { @@ -56,6 +55,14 @@ margin-bottom: 15px; } +.visualization-violation-count { + margin-bottom: 15px; +} + +.visualization-charts { + margin-top: 0px; +} + .visualization-chart-side-by-side { width: 50%; float: left; diff --git a/resources/scss/components/_dateRange.scss b/resources/scss/vnfSearch/_vnfSearch.scss index 0f63fcb..7dbe809 100644 --- a/resources/scss/components/_dateRange.scss +++ b/resources/scss/vnfSearch/_vnfSearch.scss @@ -20,21 +20,3 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - - -.date-range { - display: block; -} - -.date-range label { - margin: 5px 0px; - min-width: 70px; -} - -.date-input { - -} - -.date-input input { - padding: 3px 2px 2px 4px; -} diff --git a/resources/views/extensibleViews.json b/resources/views/extensibleViews.json new file mode 100644 index 0000000..0d4f101 --- /dev/null +++ b/resources/views/extensibleViews.json @@ -0,0 +1,2 @@ +[ +] diff --git a/src/app/AppStore.js b/src/app/AppStore.js index a0022e1..24bda2a 100644 --- a/src/app/AppStore.js +++ b/src/app/AppStore.js @@ -26,7 +26,6 @@ import GlobalAutoCompleteSearchBarReducer from 'app/globalAutoCompleteSearchBar/ import TierSupportReducer from 'app/tierSupport/TierSupportReducer.js'; import MainScreenWrapperReducer from './MainScreenWrapperReducer.js'; import InventoryReducer from './inventory/InventoryReducer.js'; -import DynamicViewLoaderReducer from 'generic-components/dynamicViewLoader/DynamicViewLoaderReducer.js'; import VnfSearchReducer from './vnfSearch/VnfSearchReducer.js'; import GlobalInlineMessageBarReducer from 'app/globalInlineMessageBar/GlobalInlineMessageBarReducer.js'; import ExtensibilityReducer from 'app/extensibility/ExtensibilityReducer.js'; @@ -46,7 +45,6 @@ export const storeCreator = (initialState) => createStore( globalAutoCompleteSearchBarReducer: GlobalAutoCompleteSearchBarReducer, tierSupport: TierSupportReducer, inventoryReducer: InventoryReducer, - dynamicViewReducer: DynamicViewLoaderReducer, vnfSearch: VnfSearchReducer, globalInlineMessageBar: GlobalInlineMessageBarReducer, extensibility: ExtensibilityReducer diff --git a/src/app/MainScreenHeader.jsx b/src/app/MainScreenHeader.jsx index 5fda9f4..e3ed257 100644 --- a/src/app/MainScreenHeader.jsx +++ b/src/app/MainScreenHeader.jsx @@ -23,6 +23,7 @@ import React, {Component} from 'react'; import {connect} from 'react-redux'; import FontAwesome from 'react-fontawesome'; +import {clearFilters} from 'filter-bar-utils'; import Button from 'react-bootstrap/lib/Button.js'; import Modal from 'react-bootstrap/lib/Modal.js'; import GlobalAutoCompleteSearchBar from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBar.jsx'; @@ -32,6 +33,10 @@ import {getClearGlobalMessageEvent} from 'app/globalInlineMessageBar/GlobalInlin import {externalUrlRequest, externalMessageRequest} from 'app/contextHandler/ContextHandlerActions.js'; import { + filterBarActionTypes +} from 'utils/GlobalConstants.js'; + +import { Route, NavLink } from 'react-router-dom'; @@ -51,7 +56,8 @@ import { import {clearSuggestionsTextField} from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarActions.js'; import {changeUrlAddress} from 'utils/Routes.js'; import extensibleViews from 'resources/views/extensibleViews.json'; -import {clearFilters} from 'generic-components/filterBar/FilterBarUtils.js'; + + const mapStateToProps = ({mainWrapper}) => { let { showMenu = false, @@ -81,7 +87,7 @@ const mapActionsToProps = (dispatch) => { dispatch(getClearGlobalMessageEvent()); dispatch(clearSuggestionsTextField()); dispatch(clearExtensibleViewData()); - dispatch(clearFilters()); + dispatch(clearFilters(filterBarActionTypes.CLEAR_FILTERS)); dispatch(setSecondaryTitle(undefined)); }, onExternalUrlRequest: (urlParamString) => { diff --git a/src/app/MainScreenWrapper.jsx b/src/app/MainScreenWrapper.jsx index e6d088f..1b1088b 100644 --- a/src/app/MainScreenWrapper.jsx +++ b/src/app/MainScreenWrapper.jsx @@ -90,7 +90,7 @@ class MainScreenWrapper extends Component { } = this.props; let customViewList = []; - extensibleViews.forEach(function(view,key){ + extensibleViews.forEach(function(view,key) { var renderComponent = (props) => { let viewParams = {}; if(props.match.params.extensibleViewParams !== undefined) { @@ -102,11 +102,11 @@ class MainScreenWrapper extends Component { return ( <Component {...props} - networkingCallback={(apiUrl, body, paramName,curViewData) => { + networkingCallback={(apiUrl, body, paramName, curViewData) => { onExtensibleViewNetworkCallback(apiUrl, body, paramName, curViewData); }} - messagingCallback ={(message, messageSevirity) => { - onExtensibleViewMessageCallback(message, messageSevirity); + messagingCallback ={(message, messageSeverity) => { + onExtensibleViewMessageCallback(message, messageSeverity); }} changeRouteCallback = {(routeParam, historyObj) => { changeUrlAddress(routeParam, historyObj); diff --git a/src/app/extensibility/ExtensibilityReducer.js b/src/app/extensibility/ExtensibilityReducer.js index 7389b40..48b5775 100644 --- a/src/app/extensibility/ExtensibilityReducer.js +++ b/src/app/extensibility/ExtensibilityReducer.js @@ -22,7 +22,6 @@ */ import {combineReducers} from 'redux'; - export default combineReducers({ extensible: (state = {}) => { return state; diff --git a/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarConstants.js b/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarConstants.js index 2f9befe..dda91c7 100644 --- a/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarConstants.js +++ b/src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarConstants.js @@ -44,7 +44,7 @@ export const SEARCH_DEBOUNCE_TIME = 300; export const ICON_CLASS_SEARCH = 'fa fa-search fa-lg'; export const ICON_CLASS_CLEAR = 'fa fa-times fa-lg'; -export const SEARCH_SELECTED_NODE_PATH = '/visualization/prepareVisualization'; +export const SEARCH_SELECTED_NODE_PATH = '/rest/visualization/prepareVisualization'; diff --git a/src/app/vnfSearch/VnfSearch.jsx b/src/app/vnfSearch/VnfSearch.jsx index f4e6980..8b574a0 100644 --- a/src/app/vnfSearch/VnfSearch.jsx +++ b/src/app/vnfSearch/VnfSearch.jsx @@ -22,10 +22,12 @@ */ import React, {Component} from 'react'; import {connect} from 'react-redux'; + import { isEqual, isEmpty } from 'lodash'; + import {VerticalFilterBar} from 'vertical-filter-bar'; import {CollapsibleSlidingPanel} from 'collapsible-sliding-panel'; @@ -36,12 +38,14 @@ import { VNFS_ROUTE, VNF_SEARCH_FILTER_NAME } from 'app/vnfSearch/VnfSearchConstants.js'; + import { processVnfVisualizationsOnFilterChange, processVnfFilterPanelCollapse, setNotificationText, clearVnfSearchData } from 'app/vnfSearch/VnfSearchActions.js'; + import VnfSearchOrchStatusVisualizations from 'app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx'; import VnfSearchProvStatusVisualizations from 'app/vnfSearch/VnfSearchProvStatusVisualization.jsx'; import VnfSearchNfTypeVisualizations from 'app/vnfSearch/VnfSearchNfTypeVisualization.jsx'; @@ -49,27 +53,37 @@ import VnfSearchNfRoleVisualizations from 'app/vnfSearch/VnfSearchNfRoleVisualiz import VnfSearchTotalCountVisualization from 'app/vnfSearch/VnfSearchTotalCountVisualization.jsx'; import i18n from 'utils/i18n/i18n'; import {changeUrlAddress, buildRouteObjWithFilters} from 'utils/Routes.js'; + import { - getUnifiedFilters, + FilterBarConstants, processFilterSelection, - setNonConvertedFilterValues, - convertNonConvertedValues, + getUnifiedFilters, buildFilterValueMap, + setNonConvertedFilterValues, setFilterSelectionsToDefaults, - FILTER_BAR_TITLE -} from 'generic-components/filterBar/FilterBarUtils.js'; + convertNonConvertedValues +} from 'filter-bar-utils'; + +import { + globalInlineMessageBarActionTypes +} from 'app/globalInlineMessageBar/GlobalInlineMessageBarConstants.js'; + +import { + UNIFIED_FILTERS_URL, + filterBarActionTypes +} from 'utils/GlobalConstants.js'; const mapStateToProps = ({vnfSearch}) => { let { - feedbackMsgText = '', - feedbackMsgSeverity = '', - vnfFilters = {}, - selectedFilterValues = {}, - vnfFilterValues = {}, - vnfVisualizationPanelClass = 'collapsible-panel-main-panel', - unifiedFilterValues = {}, - nonConvertedFilters = {} - } = vnfSearch; + feedbackMsgText = '', + feedbackMsgSeverity = '', + vnfFilters = {}, + selectedFilterValues = {}, + vnfFilterValues = {}, + vnfVisualizationPanelClass = 'collapsible-panel-main-panel', + unifiedFilterValues = {}, + nonConvertedFilters = {} + } = vnfSearch; return { feedbackMsgText, @@ -90,7 +104,8 @@ let mapActionToProps = (dispatch) => { }, onInitializeVnfSearchFilters: () => { // first time to the page, need to get the list of available filters - dispatch(getUnifiedFilters(VNF_SEARCH_FILTER_NAME, vnfActionTypes.VNF_SEARCH_FILTERS_RECEIVED)); + dispatch(getUnifiedFilters(UNIFIED_FILTERS_URL, VNF_SEARCH_FILTER_NAME, + vnfActionTypes.VNF_SEARCH_FILTERS_RECEIVED, globalInlineMessageBarActionTypes.SET_GLOBAL_MESSAGE)); }, onFilterPanelCollapse: (isOpen) => { // expand/collapse the filter panel @@ -103,7 +118,7 @@ let mapActionToProps = (dispatch) => { // only process the selection if allFilters has values (possible that // filter bar is sending back the default filter selections before // we have received the list of available filters i.e. allFilters) - dispatch(processFilterSelection(selectedFilters, allFilters)); + dispatch(processFilterSelection(filterBarActionTypes.NEW_SELECTIONS, selectedFilters, allFilters)); } }, onFilterValueChange: (convertedFilterValues) => { @@ -116,13 +131,14 @@ let mapActionToProps = (dispatch) => { // and update the VNF visualizations let filterValueMap = buildFilterValueMap(filterValueString); - dispatch(setNonConvertedFilterValues(filterValueMap)); + dispatch(setNonConvertedFilterValues(filterBarActionTypes.SET_NON_CONVERTED_VALUES, filterValueMap)); dispatch(processVnfVisualizationsOnFilterChange(filterValueMap)); // incase url param was changed manually, need to update vnfFilterValues }, onResetFilterBarToDefaults: (filters, filterValues) => { - dispatch(setFilterSelectionsToDefaults(filters, filterValues)); + dispatch(setFilterSelectionsToDefaults(filterBarActionTypes.SET_UNIFIED_VALUES, + filterBarActionTypes.SET_NON_CONVERTED_VALUES, filters, filterValues)); }, onPrepareToUnmount: () => { // clean things up: @@ -134,7 +150,8 @@ let mapActionToProps = (dispatch) => { onConvertFilterValues: (nonConvertedValues, allFilters, currentlySetFilterValues) => { // we have saved non-converted filter values received from URL params, // time to convert them so can update filter bar selections programatically - dispatch(convertNonConvertedValues(nonConvertedValues, allFilters, currentlySetFilterValues)); + dispatch(convertNonConvertedValues(filterBarActionTypes.SET_CONVERTED_VALUES, nonConvertedValues, + allFilters, currentlySetFilterValues)); }, onMessageStateChange: (msgText, msgSeverity) => { dispatch(setNotificationText(msgText, msgSeverity)); @@ -171,19 +188,14 @@ class vnfSearch extends Component { } componentWillReceiveProps(nextProps) { - if (nextProps.feedbackMsgText && - nextProps.feedbackMsgText !== - this.props.feedbackMsgText) { - this.props.onMessageStateChange(nextProps.feedbackMsgText, - nextProps.feedbackMsgSeverity); + if (nextProps.feedbackMsgText && nextProps.feedbackMsgText !== this.props.feedbackMsgText) { + this.props.onMessageStateChange(nextProps.feedbackMsgText, nextProps.feedbackMsgSeverity); } - if (nextProps.vnfFilterValues && - !isEqual(nextProps.vnfFilterValues, this.props.vnfFilterValues) && + if (nextProps.vnfFilterValues && !isEqual(nextProps.vnfFilterValues, this.props.vnfFilterValues) && this.props.vnfFilters) { this.props.onFilterValueChange(nextProps.vnfFilterValues); - changeUrlAddress(buildRouteObjWithFilters(VNFS_ROUTE, nextProps.vnfFilterValues), - this.props.history); + changeUrlAddress(buildRouteObjWithFilters(VNFS_ROUTE, nextProps.vnfFilterValues), this.props.history); } if (nextProps.match && @@ -196,8 +208,8 @@ class vnfSearch extends Component { } else if (Object.keys(nextProps.nonConvertedFilters).length > 0 && !isEqual(this.props.nonConvertedFilters, nextProps.nonConvertedFilters)) { if (Object.keys(this.props.vnfFilters).length > 0) { - this.props.onConvertFilterValues( - nextProps.nonConvertedFilters, this.props.vnfFilters, this.props.vnfFilterValues); + this.props.onConvertFilterValues(nextProps.nonConvertedFilters, this.props.vnfFilters, + this.props.vnfFilterValues); } } else if ((!nextProps.match || !nextProps.match.params || !nextProps.match.params.filters) && this.props.match.params.filters && this.props.vnfFilters && this.props.vnfFilterValues) { @@ -210,8 +222,10 @@ class vnfSearch extends Component { Object.keys(this.props.nonConvertedFilters).length > 0) { // just received list of available filters and there is are nonConvertedFilters (previously // set from url params), need to convert those values and update the filter bar selections - this.props.onConvertFilterValues( - this.props.nonConvertedFilters, nextProps.vnfFilters, this.props.vnfFilterValues); + + this.props.onConvertFilterValues(this.props.nonConvertedFilters, nextProps.vnfFilters, + this.props.vnfFilterValues); + } else if (nextProps.vnfFilters && !isEqual(nextProps.vnfFilters, this.props.vnfFilters) && isEmpty(this.props.vnfFilterValues)) { // filter bar previously returned the default filter selections (but we didn't have the list @@ -232,7 +246,7 @@ class vnfSearch extends Component { <VerticalFilterBar filtersConfig={this.props.vnfFilters} filterValues={this.props.unifiedFilterValues} - filterTitle={FILTER_BAR_TITLE} + filterTitle={FilterBarConstants.FILTER_BAR_TITLE} onFilterChange={(selectedFilters) => this.props.onFilterSelection(selectedFilters, this.props.vnfFilters)} /> ); } diff --git a/src/app/vnfSearch/VnfSearchActions.js b/src/app/vnfSearch/VnfSearchActions.js index ce3f3e0..0167962 100644 --- a/src/app/vnfSearch/VnfSearchActions.js +++ b/src/app/vnfSearch/VnfSearchActions.js @@ -20,7 +20,6 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - import { vnfActionTypes, VNF_FILTER_AGGREGATION_URL, diff --git a/src/app/vnfSearch/VnfSearchConstants.js b/src/app/vnfSearch/VnfSearchConstants.js index 266b388..97d7159 100644 --- a/src/app/vnfSearch/VnfSearchConstants.js +++ b/src/app/vnfSearch/VnfSearchConstants.js @@ -20,7 +20,6 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - import keyMirror from 'utils/KeyMirror.js'; import {BASE_URL} from 'app/networking/NetworkConstants.js'; diff --git a/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx b/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx index ab9bce7..ca6f269 100644 --- a/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx @@ -20,7 +20,6 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - import React, {Component} from 'react'; import {connect} from 'react-redux'; import { diff --git a/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx b/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx index 538bf25..30c6cdc 100644 --- a/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx @@ -20,7 +20,6 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - import React, {Component} from 'react'; import {connect} from 'react-redux'; import { diff --git a/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx b/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx index cee82d5..1855db7 100644 --- a/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx @@ -20,7 +20,6 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - import React, {Component} from 'react'; import {connect} from 'react-redux'; import { diff --git a/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx b/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx index f62579c..cdf6872 100644 --- a/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx @@ -20,7 +20,6 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - import React, {Component} from 'react'; import {connect} from 'react-redux'; import { diff --git a/src/app/vnfSearch/VnfSearchReducer.js b/src/app/vnfSearch/VnfSearchReducer.js index 5c96a2b..1394f97 100644 --- a/src/app/vnfSearch/VnfSearchReducer.js +++ b/src/app/vnfSearch/VnfSearchReducer.js @@ -20,9 +20,8 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - -import {vnfActionTypes} from 'app/vnfSearch/VnfSearchConstants.js'; import { + vnfActionTypes, CHART_ORCH_STATUS, CHART_PROV_STATUS, CHART_NF_ROLE, @@ -30,13 +29,13 @@ import { TOTAL_VNF_COUNT } from 'app/vnfSearch/VnfSearchConstants.js'; import {ERROR_RETRIEVING_DATA} from 'app/networking/NetworkConstants.js'; -import {MESSAGE_LEVEL_DANGER} from 'utils/GlobalConstants.js'; +import { + filterBarActionTypes, + MESSAGE_LEVEL_DANGER +} from 'utils/GlobalConstants.js'; import { globalAutoCompleteSearchBarActionTypes } from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarConstants.js'; -import { - filterBarActionTypes -} from 'generic-components/filterBar/FilterBarConstants.js'; export default (state = {}, action) => { let data = action.data; diff --git a/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx b/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx index 269b95d..a2abd7c 100644 --- a/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx @@ -20,7 +20,6 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - import React, {Component} from 'react'; import {connect} from 'react-redux'; diff --git a/src/generic-components/dateRange/DateRange.jsx b/src/generic-components/dateRange/DateRange.jsx deleted file mode 100644 index d0f481f..0000000 --- a/src/generic-components/dateRange/DateRange.jsx +++ /dev/null @@ -1,91 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ -import React, {Component} from 'react'; -import {connect} from 'react-redux'; -import DatePicker from 'react-datepicker'; -import Moment from 'moment-timezone'; -import i18n from 'utils/i18n/i18n'; -import { - LABEL_START_DATE, - LABEL_END_DATE, - DATE_PICKER_PLACEHOLDER -} from 'generic-components/dateRange/DateRangeConstants'; -import DateRangeActions from 'generic-components/dateRange/DateRangeActions'; - -let mapStateToProps = ({dataIntegrity: {dateRangeData}}) => { - let {dateRangeStart, dateRangeEnd, dateRangeError} = dateRangeData; - - return { - dateRangeStart, - dateRangeEnd, - dateRangeError - }; -}; - -let mapActionToProps = (dispatch) => { - return { - startDateChange: (startDate, endDate) => { - dispatch(DateRangeActions.onStartDateChange(startDate, endDate)); - }, - endDateChange: (endDate, startDate) => { - dispatch(DateRangeActions.onEndDateChange(startDate, endDate)); - } - }; -}; - -export class DateRange extends Component { - static propTypes = { - dateRangeStart: React.PropTypes.instanceOf(Moment), - dateRangeEnd: React.PropTypes.instanceOf(Moment), - dateRangeError: React.PropTypes.string - }; - - render() { - let {startDateChange, endDateChange, - dateRangeStart, dateRangeEnd} = this.props; - - return ( - <div className='date-range'> - <span className='date-input'> - <label>{i18n(LABEL_START_DATE) }: </label> - <DatePicker - className='start-date-picker' - selected={dateRangeStart} - onChange={(dateValue) => startDateChange(dateValue, dateRangeEnd) } - placeholderText={i18n(DATE_PICKER_PLACEHOLDER) } - showYearDropdown/> - </span> - <span className='date-input'> - <label>{i18n(LABEL_END_DATE) }: </label> - <DatePicker - className='end-date-picker' - selected={dateRangeEnd} - onChange={(dateValue) => endDateChange(dateValue, dateRangeStart) } - placeholderText={i18n(DATE_PICKER_PLACEHOLDER) } - showYearDropdown/> - </span> - </div> - ); - } -} -export default connect(mapStateToProps, mapActionToProps)(DateRange); diff --git a/src/generic-components/dateRange/DateRangeActions.js b/src/generic-components/dateRange/DateRangeActions.js deleted file mode 100644 index cc2e3fb..0000000 --- a/src/generic-components/dateRange/DateRangeActions.js +++ /dev/null @@ -1,85 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ -import i18n from 'utils/i18n/i18n'; -import moment from 'moment'; - -import { - dateRangeActionTypes, - DATE_PICKER_PLACEHOLDER, - START_DATE, - END_DATE, - IS_AFTER_END_DATE, - IS_BEFORE_START_DATE -} from 'generic-components/dateRange/DateRangeConstants'; - -function buildInvalidDateRangeAction(startDate, endDate, errorMessage) { - return { - type: dateRangeActionTypes.INVALID_DATE_RANGE, - data: { - dateRange: { - startDate: startDate, - endDate: endDate - }, - errorMsg: errorMessage - } - }; -} - -function buildDateRangeAction(startDate, endDate) { - return { - type: dateRangeActionTypes.DATE_RANGE_CHANGE, - data: { - dateRange: { - startDate: startDate, - endDate: endDate - } - } - }; -} - -export default { - onStartDateChange(startDate, endDate) { - if (endDate && endDate.isBefore(startDate)) { - var errorMessage = i18n(START_DATE) + - ': ' + - moment(new Date(startDate)).format(DATE_PICKER_PLACEHOLDER) + - ' ' + - i18n(IS_AFTER_END_DATE); - return buildInvalidDateRangeAction(startDate, endDate, errorMessage); - } else { - return buildDateRangeAction(startDate, endDate); - } - }, - onEndDateChange(startDate, endDate) { - if (startDate && startDate.isAfter(endDate)) { - var errorMessage = i18n(END_DATE) + - ': ' + - moment(new Date(endDate)).format(DATE_PICKER_PLACEHOLDER) + - ' ' + - i18n(IS_BEFORE_START_DATE); - return buildInvalidDateRangeAction(startDate, endDate, errorMessage); - } else { - return buildDateRangeAction(startDate, endDate); - } - } -}; diff --git a/src/generic-components/dateRange/DateRangeConstants.js b/src/generic-components/dateRange/DateRangeConstants.js deleted file mode 100644 index b59d926..0000000 --- a/src/generic-components/dateRange/DateRangeConstants.js +++ /dev/null @@ -1,37 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ -import keyMirror from 'utils/KeyMirror.js'; - -export const dateRangeActionTypes = keyMirror({ - DATE_RANGE_CHANGE: null, - INVALID_DATE_RANGE: null -}); - -export const LABEL_START_DATE = 'Start Date'; -export const LABEL_END_DATE = 'End Date'; -export const DATE_PICKER_PLACEHOLDER = 'MM/DD/YYYY'; -export const START_DATE = 'Start date'; -export const END_DATE = 'End date'; - -export const IS_AFTER_END_DATE = 'is after end date'; -export const IS_BEFORE_START_DATE = 'is before start date'; diff --git a/src/generic-components/dateRange/DateRangeReducer.js b/src/generic-components/dateRange/DateRangeReducer.js deleted file mode 100644 index 7fc573c..0000000 --- a/src/generic-components/dateRange/DateRangeReducer.js +++ /dev/null @@ -1,46 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ -import {dateRangeActionTypes} from 'generic-components/dateRange/DateRangeConstants'; - -export default (state = {}, action) => { - - switch (action.type) { - case dateRangeActionTypes.DATE_RANGE_CHANGE: - return { - ...state, - dateRangeStart: action.data.dateRange.startDate, - dateRangeEnd: action.data.dateRange.endDate, - dateRangeError: '' - }; - - case dateRangeActionTypes.INVALID_DATE_RANGE: - return { - ...state, - dateRangeStart: action.data.dateRange.startDate, - dateRangeEnd: action.data.dateRange.endDate, - dateRangeError: action.data.errorMsg - }; - - } - return state; -}; diff --git a/src/generic-components/dateRangeSelector/DateRangeSelector.jsx b/src/generic-components/dateRangeSelector/DateRangeSelector.jsx deleted file mode 100644 index 9253271..0000000 --- a/src/generic-components/dateRangeSelector/DateRangeSelector.jsx +++ /dev/null @@ -1,159 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ -import React, {Component} from 'react'; -import {connect} from 'react-redux'; -import moment from 'moment-timezone'; - -import Button from 'react-bootstrap/lib/Button.js'; -import MenuItem from 'react-bootstrap/lib/MenuItem.js'; -import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js'; -import Popover from 'react-bootstrap/lib/Popover.js'; - -import DateRange from 'generic-components/dateRange/DateRange.jsx'; -import {DATE_PICKER_PLACEHOLDER} from 'generic-components/dateRange/DateRangeConstants.js'; -import DateRangeActions from 'generic-components/dateRange/DateRangeActions.js'; -import { - TODAY, - YESTERDAY, - LAST_WEEK, - LAST_MONTH, - CUSTOM, - LABEL_TODAY, - LABEL_YESTERDAY, - LABEL_LAST_WEEK, - LABEL_LAST_MONTH, - LABEL_CUSTOM_SEARCH, - SEARCH_BUTTON_TEXT, - ICON_CLASS_CALENDAR, - ICON_CLASS_DOWN_CARET -} from 'generic-components/dateRangeSelector/DateRangeSelectorConstants.js'; -import DateRangeSelectorActions from 'generic-components/dateRangeSelector/DateRangeSelectorActions.js'; -import InlineMessage from 'generic-components/InlineMessage/InlineMessage.jsx'; - -import i18n from 'utils/i18n/i18n'; - -let currentDayWithTimeZone = moment(new Date()).tz(moment.tz.guess()); -let mapStateToProps = ({dataIntegrity: {dateRangeSelectorData}}) => { - - let { - startDate = currentDayWithTimeZone, - endDate = currentDayWithTimeZone, - period = TODAY, - periodErrText, - periodErrSev - } = dateRangeSelectorData; - - return { - startDate, - endDate, - period, - periodErrText, - periodErrSev - }; -}; - -let mapActionToProps = (dispatch) => { - return { - onNewDateSelection: (startMoment, endMoment, period) => { - let periodChangeAction = DateRangeSelectorActions.onPeriodChange( - startMoment, endMoment, period); - // notify all listeners that the period has changed - dispatch(periodChangeAction); - // update the DateRange component with the newly selected dates - dispatch(DateRangeActions.onStartDateChange( - periodChangeAction.data.dateRange.startDate, - periodChangeAction.data.dateRange.endDate)); - } - }; -}; - -export class DateRangeSelector extends Component { - static propTypes = { - startDate: React.PropTypes.instanceOf(moment), - endDate: React.PropTypes.instanceOf(moment), - period: React.PropTypes.string, - periodErrText: React.PropTypes.string, - periodErrSev: React.PropTypes.string - }; - - newDateSelection(period) { - this.props.onNewDateSelection(this.props.startDate, this.props.endDate, - period); - this.refs.dateRangePopover.hide(); - } - - componentDidMount() { - let {startDate, endDate, period, onNewDateSelection} = this.props; - // whenever the DateRangeSelector is first mounted, want it - // initialized to today's date - startDate = currentDayWithTimeZone; - endDate = currentDayWithTimeZone; - onNewDateSelection(startDate, endDate, period); - } - - render() { - let {period, periodErrSev, periodErrText} = this.props; - let displayDateRange = (this.props.startDate).format( - DATE_PICKER_PLACEHOLDER) + ' - ' + - (this.props.endDate).format(DATE_PICKER_PLACEHOLDER); - return ( - <div className='dateRangeSelector'> - <OverlayTrigger trigger='click' ref='dateRangePopover' - placement='bottom' overlay={ - <Popover id='dateRangeSelectorPopover'> - <MenuItem active={period === TODAY ? true : false} onSelect={() => - this.newDateSelection(TODAY)}>{i18n(LABEL_TODAY)}</MenuItem> - <MenuItem active={period === YESTERDAY ? true : false} onSelect={() => - this.newDateSelection(YESTERDAY)}>{i18n(LABEL_YESTERDAY)}</MenuItem> - <MenuItem active={period === LAST_WEEK ? true : false} onSelect={() => - this.newDateSelection(LAST_WEEK)}>{i18n(LABEL_LAST_WEEK)}</MenuItem> - <MenuItem active={period === LAST_MONTH ? true : false} onSelect={() => - this.newDateSelection(LAST_MONTH)}>{i18n(LABEL_LAST_MONTH)}</MenuItem> - <OverlayTrigger trigger='click' placement='right' overlay={ - <Popover id='customSearchPopover'> - <InlineMessage level={periodErrSev} messageTxt={periodErrText} /> - <DateRange /> - <Button className='dateRangeSearchButton' bsSize='xsmall' - bsStyle='primary' - disabled={periodErrText !== '' ? true : false} - onClick={() => this.newDateSelection(CUSTOM)}> - {i18n(SEARCH_BUTTON_TEXT)} - </Button> - </Popover> - }> - <MenuItem active={period === CUSTOM ? true : false} > - {i18n(LABEL_CUSTOM_SEARCH)} - </MenuItem> - </OverlayTrigger> - </Popover>}> - <Button className='dateRangeSelectorSearchButton' bsStyle='default'> - <i className={ICON_CLASS_CALENDAR} aria-hidden='true'></i> - <span>{displayDateRange} </span> - <i className={ICON_CLASS_DOWN_CARET} aria-hidden='true'></i> - </Button> - </OverlayTrigger> - </div> - ); - } -} -export default connect(mapStateToProps, mapActionToProps)(DateRangeSelector); diff --git a/src/generic-components/dateRangeSelector/DateRangeSelectorActions.js b/src/generic-components/dateRangeSelector/DateRangeSelectorActions.js deleted file mode 100644 index 9579bb6..0000000 --- a/src/generic-components/dateRangeSelector/DateRangeSelectorActions.js +++ /dev/null @@ -1,115 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ -import { - dateRangeSelectorActionTypes, - ERROR_UNKNOWN_PERIOD, - TODAY, - YESTERDAY, - LAST_WEEK, - LAST_MONTH, - CUSTOM -} from 'generic-components/dateRangeSelector/DateRangeSelectorConstants.js'; - -function buildPeriodChangeAction(startMoment, endMoment, period) { - return { - type: dateRangeSelectorActionTypes.EVENT_PERIOD_CHANGE, - data: { - dateRange: { - startDate: startMoment, - endDate: endMoment - }, - period: period - } - }; -} - -function buildUnknownPeriodAction(startMoment, endMoment, period, errorMsg) { - return { - type: dateRangeSelectorActionTypes.EVENT_PERIOD_ERROR, - data: { - dateRange: { - startDate: startMoment, - endDate: endMoment - }, - period: period, - errorMsg: errorMsg - } - }; -} - -export default { - onPeriodChange(startMoment, endMoment, period) { - var moment = require('moment'); - let startPeriod = moment(new Date()); - let endPeriod = moment(new Date()); - let unknownPeriod = false; - - switch (period) { - case TODAY: - // already have today's date set - break; - case YESTERDAY: - startPeriod = moment(startPeriod).subtract(1, 'days'); - break; - case LAST_WEEK: - startPeriod = moment(startPeriod).subtract(7, 'days'); - break; - case LAST_MONTH: - startPeriod = moment(startPeriod).subtract(1, 'months'); - break; - case CUSTOM: - startPeriod = startMoment; - endPeriod = endMoment; - break; - default: - unknownPeriod = true; - break; - } - - if (unknownPeriod) { - let errorMsg = ERROR_UNKNOWN_PERIOD + ': ' + period; - return buildUnknownPeriodAction(startMoment, endMoment, period, errorMsg); - } else { - /* - Temp fix until we support time ... - - set start date time to 00:00:00 - - set end date time to 23:59:59 - this is to ensure we cover an entire day - (ex: start day May 26, end day May 26 ... expect to cover - 0:00:00 to 23:59:59 for that day) - */ - startPeriod.toDate(); - startPeriod.hour(0); - startPeriod.minute(0); - startPeriod.second(0); - - endPeriod.toDate(); - endPeriod.hour(23); - endPeriod.minute(59); - endPeriod.second(59); - - return buildPeriodChangeAction(startPeriod, endPeriod, period); - } - - } -}; diff --git a/src/generic-components/dateRangeSelector/DateRangeSelectorConstants.js b/src/generic-components/dateRangeSelector/DateRangeSelectorConstants.js deleted file mode 100644 index d231393..0000000 --- a/src/generic-components/dateRangeSelector/DateRangeSelectorConstants.js +++ /dev/null @@ -1,50 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ -import keyMirror from 'utils/KeyMirror.js'; - -export const dateRangeSelectorActionTypes = keyMirror({ - EVENT_PERIOD_CHANGE: null, - EVENT_PERIOD_ERROR: null, -}); - -// labels -export const LABEL_TODAY = 'Today'; -export const LABEL_YESTERDAY = 'Since Yesterday'; -export const LABEL_LAST_WEEK = 'Since Last Week'; -export const LABEL_LAST_MONTH = 'Since Last Month'; -export const LABEL_CUSTOM_SEARCH = 'Custom'; -export const SEARCH_BUTTON_TEXT = 'Search'; - -// Periods -export const TODAY = 'today'; -export const YESTERDAY = 'yesterday'; -export const LAST_WEEK = 'lastWeek'; -export const LAST_MONTH = 'lastMonth'; -export const CUSTOM = 'custom'; - -// classes -export const ICON_CLASS_CALENDAR = 'fa fa-calendar fa-lg'; -export const ICON_CLASS_DOWN_CARET = 'fa fa-caret-down fa-lg'; - -// errors -export const ERROR_UNKNOWN_PERIOD = 'The specified period is unknown'; diff --git a/src/generic-components/dateRangeSelector/DateRangeSelectorReducer.js b/src/generic-components/dateRangeSelector/DateRangeSelectorReducer.js deleted file mode 100644 index b8b46b1..0000000 --- a/src/generic-components/dateRangeSelector/DateRangeSelectorReducer.js +++ /dev/null @@ -1,60 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ -import {dateRangeActionTypes} from 'generic-components/dateRange/DateRangeConstants.js'; -import {dateRangeSelectorActionTypes} from 'generic-components/dateRangeSelector/DateRangeSelectorConstants.js'; -import {MESSAGE_LEVEL_DANGER} from 'utils/GlobalConstants.js'; - -export default (state = {}, action) => { - - switch (action.type) { - - case dateRangeActionTypes.DATE_RANGE_CHANGE: - return { - ...state, - startDate: action.data.dateRange.startDate, - endDate: action.data.dateRange.endDate, - periodErrText: '', - periodErrSev: '' - }; - - case dateRangeActionTypes.INVALID_DATE_RANGE: - return { - ...state, - startDate: action.data.dateRange.startDate, - endDate: action.data.dateRange.endDate, - periodErrText: action.data.errorMsg, - periodErrSev: MESSAGE_LEVEL_DANGER - }; - - case dateRangeSelectorActionTypes.EVENT_PERIOD_CHANGE: - return { - ...state, - startDate: action.data.dateRange.startDate, - endDate: action.data.dateRange.endDate, - period: action.data.period, - periodErrText: '', - periodErrSev: '' - }; - } - return state; -}; diff --git a/src/generic-components/dynamicViewLoader/VisualizationProvider.js b/src/generic-components/dynamicViewLoader/VisualizationProvider.js deleted file mode 100644 index 35f4b75..0000000 --- a/src/generic-components/dynamicViewLoader/VisualizationProvider.js +++ /dev/null @@ -1,30 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ -/** - * NOTE: the following components have 'props' attributes associated with them, - * these are currently not used but have been left here incase the - * application moves towards a true dashboard layout and thus will allow - * users to customize attribute values per component - */ - -export const visualizationProviderProperties = {}; diff --git a/src/generic-components/filterBar/FilterBarConstants.js b/src/generic-components/filterBar/FilterBarConstants.js deleted file mode 100644 index 51fd1a8..0000000 --- a/src/generic-components/filterBar/FilterBarConstants.js +++ /dev/null @@ -1,55 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ -import keyMirror from 'utils/KeyMirror.js'; -import {BASE_URL} from 'app/networking/NetworkConstants.js'; - -export const filterBarActionTypes = keyMirror({ - SET_FILTERS: null, - SET_FILTER_VALUES: null, - CLEAR_FILTERS: null, - FILTER_VALUE_CHANGE: null, - NEW_SELECTIONS: null, - SET_NON_CONVERTED_VALUES: null, - SET_CONVERTED_VALUES: null, - SET_UNIFIED_VALUES: null -}); - -export const UNIFIED_FILTERS_URL = BASE_URL + '/rest/search/unifiedFilterRequest'; - -export const DISCOVER_FILTERS_ERROR_MSG = 'There was an error retrieving the' + - ' list of available filters'; - -export const FILTER_BAR_TITLE = 'FILTER BY'; -export const DATE_TIME_ZONE = 'Z'; - -export const FILTER_TYPE_ENUM = { - LIST: 'dropDown', - DATE: 'date' -}; - -export const FILTER_ATTRIBUTE_DEFAULT_VALUE = 'defaultValue'; -export const FILTER_ATTRIBUTE_CONTROLS = 'controls'; -export const FILTER_ATTRIBUTE_CODE = 'code'; -export const FILTER_ATTRIBUTE_VALUES = 'values'; -export const FILTER_ATTRIBUTE_TO = 'to'; -export const FILTER_ATTRIBUTE_FROM = 'from'; diff --git a/src/generic-components/filterBar/FilterBarUtils.js b/src/generic-components/filterBar/FilterBarUtils.js deleted file mode 100644 index 101a66b..0000000 --- a/src/generic-components/filterBar/FilterBarUtils.js +++ /dev/null @@ -1,350 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ -import isEmpty from 'lodash/isEmpty'; -import moment from 'moment-timezone'; -import { - POST, - POST_HEADER -} from 'app/networking/NetworkConstants.js'; -import { - UNIFIED_FILTERS_URL, - DISCOVER_FILTERS_ERROR_MSG, - DATE_TIME_ZONE, - FILTER_ATTRIBUTE_TO, - FILTER_ATTRIBUTE_FROM, - FILTER_ATTRIBUTE_CODE, - FILTER_ATTRIBUTE_VALUES, - FILTER_ATTRIBUTE_CONTROLS, - FILTER_ATTRIBUTE_DEFAULT_VALUE, - FILTER_TYPE_ENUM, - filterBarActionTypes -} from 'generic-components/filterBar/FilterBarConstants.js'; -import { - MESSAGE_LEVEL_WARNING -} from 'utils/GlobalConstants.js'; -import { - getSetGlobalMessageEvent -} from 'app/globalInlineMessageBar/GlobalInlineMessageBarActions.js'; - -export function buildFilterValueMap(filterValueString) { - let filterValueObj = {}; - let filters = filterValueString.split(','); - - for (let filterIndex in filters) { - let filterStringParts = filters[filterIndex].split('='); - - filterValueObj[filterStringParts[0]] = filterStringParts[1]; - } - - return filterValueObj; -} - -export function buildFilterValueMapFromObj(filterValues) { - let filterValueObj = {}; - - for (let filterIndex in filterValues) { - filterValueObj[filterValues[filterIndex].filterId] = filterValues[filterIndex].filterValue; - } - - return filterValueObj; -} - -export function getFilterListQueryString(filterValueList) { - let filterQueryList = []; - - for (let filter in filterValueList) { - if (filterValueList[filter]) { - filterQueryList.push( - { - 'filterId': filter, - 'filterValue': filterValueList[filter] - } - ); - } - } - - return filterQueryList; -} - -function getFilterSearchURL() { - return UNIFIED_FILTERS_URL.replace('@@IP-ADDRESS@@', document.location.hostname); -} - -function getFiltersQueryObject(viewName) { - return { - 'viewName': viewName - }; -} - -function getFiltersEvent(actionType, filterList) { - return { - type: actionType, - data: filterList - }; -} - -export function getUnifiedFilters(viewName, actionType) { - return dispatch => { - return fetch(getFilterSearchURL(), { - credentials: 'same-origin', - method: POST, - headers: POST_HEADER, - body: JSON.stringify(getFiltersQueryObject(viewName)) - }).then( - (response) => response.json() - ).then( - (responseJson) => { - dispatch( - getFiltersEvent(actionType, responseJson.filters) - ); - } - ).catch( - () => { - dispatch(getSetGlobalMessageEvent(DISCOVER_FILTERS_ERROR_MSG, MESSAGE_LEVEL_WARNING)); - } - ); - }; -} - -function extractConvertedDateValues(dateValues) { - let convertedValues = {}; - if (dateValues.from) { - let startMoment = moment(dateValues.from); - convertedValues.startDate = startMoment.toDate(); - convertedValues.time_zone = startMoment.format(DATE_TIME_ZONE); - } - - if (dateValues.to) { - let endMoment = moment(dateValues.to); - convertedValues.endDate = endMoment.toDate(); - convertedValues.time_zone = endMoment.format(DATE_TIME_ZONE); - } - - convertedValues.code = dateValues.code; - - return convertedValues; -} - -function convertFilterValues(filterValues) { - let convertedFilterValues = {}; - - for (let filterId in filterValues) { - if (filterValues.hasOwnProperty(filterId) && - !isEmpty(filterValues[filterId]) && !isEmpty(filterValues[filterId].controls)) { - let controls = filterValues[filterId].controls; - let firstControlKey = Object.keys(controls)[0]; - if (controls[firstControlKey][FILTER_ATTRIBUTE_VALUES][FILTER_ATTRIBUTE_FROM] || - controls[firstControlKey][FILTER_ATTRIBUTE_VALUES][FILTER_ATTRIBUTE_TO]) { - // TODO should check against filter type (ex: dropdown or date) - // rather than assuming value attributes (ex: 'to' or 'from') - convertedFilterValues[filterId] = - extractConvertedDateValues(controls[firstControlKey][FILTER_ATTRIBUTE_VALUES]); - } else { - let codeValue = controls[firstControlKey][FILTER_ATTRIBUTE_VALUES][FILTER_ATTRIBUTE_CODE]; - convertedFilterValues[filterId] = codeValue; - } - } - } - - return convertedFilterValues; -} - -function combineMissingFilters(filterValues, allFilters) { - let allFilterIds = Object.keys(allFilters); - - for (let id in allFilterIds) { - if (!filterValues.hasOwnProperty(allFilterIds[id])) { - filterValues[allFilterIds[id]] = ''; - } - } - - return filterValues; -} - -function getFilterSelectionEvent(selectedValuesMap, convertedValues) { - return { - type: filterBarActionTypes.NEW_SELECTIONS, - data: { - selectedValuesMap: convertedValues, - unifiedValues: selectedValuesMap - } - }; -} - -export function processFilterSelection(filterValues, allFilters) { - let convertedFilterValues = convertFilterValues(filterValues); - let combinedFilterValues = combineMissingFilters(convertedFilterValues, allFilters); - - // dispatch NEW_SELECTION event type with converted values as the data - return getFilterSelectionEvent(filterValues, combinedFilterValues); -} - -export function setNonConvertedFilterValues(nonConvertedValues) { - return { - type: filterBarActionTypes.SET_NON_CONVERTED_VALUES, - data: nonConvertedValues - }; -} - -function convertedFilterValuesEvent(nonConvertedValues, convertedValues) { - return { - type: filterBarActionTypes.SET_CONVERTED_VALUES, - data: { - nonConvertedValues: nonConvertedValues, - convertedValues: convertedValues - } - }; -} - -function mapValuesToOption(filterOptions, nonConvertedValue) { - let mappedValues = {}; - - // loop over options to find match for value - for (let i in filterOptions) { - if (filterOptions[i].code === nonConvertedValue) { - // found the matching - mappedValues = filterOptions[i]; - break; - } - } - - return mappedValues; -} - -function mapValuesToDateOption(nonConvertedValue) { - let mappedValues = {}; - - if (nonConvertedValue.startDate) { - mappedValues.from = new Date(nonConvertedValue.startDate); - } else { - mappedValues.from = null; - } - - if (nonConvertedValue.endDate) { - mappedValues.to = new Date(nonConvertedValue.endDate); - } else { - mappedValues.to = null; - } - - mappedValues.code = nonConvertedValue.code; - - return mappedValues; -} - -function mapValuesToFilter(nonConvertedValues, allFilters, currentlySetFilterValues) { - let convertedValues = {}; - - for (let nonConvertedId in nonConvertedValues) { - if (nonConvertedValues[nonConvertedId] !== '') { - let matchingFilterObj = allFilters[nonConvertedId]; - let filterControlId = Object.keys(matchingFilterObj.controls)[0]; - let mappedValue = {}; - - if (matchingFilterObj[FILTER_ATTRIBUTE_CONTROLS][filterControlId].type === FILTER_TYPE_ENUM.DATE) { - mappedValue = mapValuesToDateOption(nonConvertedValues[nonConvertedId]); - } else { - mappedValue = mapValuesToOption(matchingFilterObj[FILTER_ATTRIBUTE_CONTROLS][filterControlId].options, - nonConvertedValues[nonConvertedId]); - } - - let values = {}; - values[FILTER_ATTRIBUTE_VALUES] = mappedValue; - let filterControlers = {}; - filterControlers[filterControlId] = values; - let filter = {}; - filter[FILTER_ATTRIBUTE_CONTROLS] = filterControlers; - convertedValues[nonConvertedId] = filter; - } else if (!isEmpty(currentlySetFilterValues[nonConvertedId])) { - // currently a value is set for this filter, need to ensure we map this filter - // to an empty value so that it is cleared/reset - let matchingFilterObj = allFilters[nonConvertedId]; - let filterControlId = Object.keys(matchingFilterObj.controls)[0]; - let mappedValue = {}; - let values = {}; - values[FILTER_ATTRIBUTE_VALUES] = mappedValue; - let filterControlers = {}; - filterControlers[filterControlId] = values; - let filter = {}; - filter[FILTER_ATTRIBUTE_CONTROLS] = filterControlers; - convertedValues[nonConvertedId] = filter; - } - } - - return convertedValues; -} - -export function convertNonConvertedValues(nonConvertedValues, allFilters, currentlySetFilterValues) { - let convertedValues = mapValuesToFilter(nonConvertedValues, allFilters, currentlySetFilterValues); - return convertedFilterValuesEvent(nonConvertedValues, convertedValues); -} - -export function clearFilters() { - return { - type: filterBarActionTypes.CLEAR_FILTERS - }; -} - -function getSetUnifiedFilterValuesEvent(unifiedValues) { - return { - type: filterBarActionTypes.SET_UNIFIED_VALUES, - data: unifiedValues - }; -} - -function getFilterDefault(filters, filterId) { - let filterControlId = Object.keys(filters[filterId][FILTER_ATTRIBUTE_CONTROLS])[0]; - let defaultValue = filters[filterId][FILTER_ATTRIBUTE_CONTROLS][filterControlId][FILTER_ATTRIBUTE_DEFAULT_VALUE]; - if (!defaultValue) { - defaultValue = {}; - } - return defaultValue; -} - -export function setFilterSelectionsToDefaults(filters, filterValues) { - let defaultFilterMap = {}; - - for (let filterId in filters) { - let filterDefaultValue = getFilterDefault(filters, filterId); - if (!isEmpty(filterDefaultValue) || (filterValues && filterValues[filterId])) { - let filterControlId = Object.keys(filters[filterId][FILTER_ATTRIBUTE_CONTROLS])[0]; - let controller = {}; - controller.values = filterDefaultValue; - let controllers = {}; - controllers[filterControlId] = controller; - let controls = {}; - controls.controls = controllers; - defaultFilterMap[filterId] = controls; - } - } - - if (isEmpty(defaultFilterMap)) { - // there are no default values, so need to ensure all filters get cleared, - // but just incase this 'clearing' - let combinedValues = combineMissingFilters(defaultFilterMap, filters); - return setNonConvertedFilterValues(combinedValues); - } else { - // jsut set the Unified Filter Value which will be sent down to the filter (filter - // will set itself to the default value and then send notification back up of the selection - return getSetUnifiedFilterValuesEvent(defaultFilterMap); - } -} diff --git a/src/generic-components/input/validation/ValidationButtons.jsx b/src/generic-components/input/validation/ValidationButtons.jsx deleted file mode 100644 index 1568a57..0000000 --- a/src/generic-components/input/validation/ValidationButtons.jsx +++ /dev/null @@ -1,66 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ -/** - * Holds the buttons for save/reset for forms. - * Used by the ValidationForm that changes the state of the buttons according - * to its own state. - * - * properties: - * labledButtons - whether or not to use labeled buttons or icons only - */ -import React from 'react'; -import i18n from 'utils/i18n/i18n.js'; -import Button from 'react-bootstrap/lib/Button.js'; -import FontAwesome from 'react-fontawesome'; - -class ValidationButtons extends React.Component { - - static propTypes = { - labledButtons: React.PropTypes.bool.isRequired, - isReadOnlyMode: React.PropTypes.bool - }; - - state = { - isValid: this.props.formValid - }; - - render() { - var submitBtn = this.props.labledButtons ? i18n('Save') : - <FontAwesome className='check' name='check'/>; - var closeBtn = this.props.labledButtons ? i18n('Cancel') : - <FontAwesome className='close' name='close'/>; - return ( - <div className='validation-buttons'> - {!this.props.isReadOnlyMode ? - <div> - <Button bsStyle='primary' ref='submitbutton' type='submit' - disabled={!this.state.isValid}>{submitBtn}</Button> - <Button type='reset'>{closeBtn}</Button> - </div> - : <Button type='reset'>{i18n('Close')}</Button> - } - </div> - ); - } -} -export default ValidationButtons; diff --git a/src/generic-components/input/validation/ValidationForm.jsx b/src/generic-components/input/validation/ValidationForm.jsx deleted file mode 100644 index af4001e..0000000 --- a/src/generic-components/input/validation/ValidationForm.jsx +++ /dev/null @@ -1,170 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ -/** - * ValidationForm should be used in order to have a form that handles it's - * internal validation state. All ValidationInputs inside the form are checked - * for validity and the styling and submit buttons are updated accordingly. - * - * The properties that ahould be given to the form: - * labledButtons - whether or not use icons only as the form default buttons or - * use buttons with labels onSubmit - function for click on the submit button - * onReset - function for click on the reset button - */ -import React from 'react'; -import ValidationButtons from './ValidationButtons.jsx'; - -class ValidationForm extends React.Component { - - static childContextTypes = { - validationParent: React.PropTypes.any, - isReadOnlyMode: React.PropTypes.bool - }; - - static defaultProps = { - hasButtons: true, - onSubmit: null, - onReset: null, - labledButtons: true, - onValidChange: null, - isValid: true - }; - - static propTypes = { - isValid: React.PropTypes.bool, - hasButtons: React.PropTypes.bool, - onSubmit: React.PropTypes.func, - onReset: React.PropTypes.func, - labledButtons: React.PropTypes.bool, - onValidChange: React.PropTypes.func - }; - - state = { - isValid: this.props.isValid - }; - - constructor(props) { - super(props); - this.validationComponents = []; - } - - render() { - var buttons = (this.props.hasButtons) ? - <ValidationButtons labledButtons={this.props.labledButtons} - ref='buttons' - isReadOnlyMode={this.props.isReadOnlyMode}/> - : null; - return ( - <form {...this.props} onSubmit={event => this.handleFormSubmit(event)}> - <div className='validation-form-content'>{this.props.children}</div> - {buttons} - </form> - ); - } - - handleFormSubmit(event) { - event.preventDefault(); - let isFormValid = true; - this.validationComponents.forEach(validationComponent => { - const isInputValid = validationComponent.validate().isValid; - isFormValid = isInputValid && isFormValid; - }); - if (isFormValid && this.props.onSubmit) { - this.props.onSubmit(event); - } else if (!isFormValid) { - this.setState({isValid: false}); - } - }; - - componentDidUpdate(prevProps, prevState) { - // only handling this programatically if the validation of the form is done - // outside of the view (example with a form that is dependent on the state - // of other forms) - if (prevProps.isValid !== this.props.isValid) { - if (this.props.hasButtons) { - this.refs.buttons.setState({isValid: this.state.isValid}); - } - } else if (this.state.isValid !== prevState.isValid) { - if (this.props.hasButtons) { - this.refs.buttons.setState({isValid: this.state.isValid}); - } - // callback in case form is part of bigger picture in view - if (this.props.onValidChange) { - this.props.onValidChange(this.state.isValid); - } - } - } - - componentDidMount() { - if (this.props.hasButtons) { - this.refs.buttons.setState({isValid: this.state.isValid}); - } - } - - - getChildContext() { - return { - validationParent: this, - isReadOnlyMode: this.props.isReadOnlyMode - }; - } - - - /*** - * Used by ValidationInput in order to let the (parent) form know - * the valid state. If there is a change in the state of the form, - * the buttons will be updated. - * - * @param validationComponent - * @param isValid - */ - childValidStateChanged(validationComponent, isValid) { - if (isValid !== this.state.isValid) { - let oldState = this.state.isValid; - let newState = isValid && - this.validationComponents.filter( - otherValidationComponent => validationComponent !== - otherValidationComponent).every(otherValidationComponent => { - return otherValidationComponent.isValid(); - }); - - if (oldState !== newState) { - this.setState({isValid: newState}); - } - } - } - - register(validationComponent) { - this.validationComponents.push(validationComponent); - } - - unregister(validationComponent) { - this.childValidStateChanged(validationComponent, true); - this.validationComponents = - this.validationComponents.filter( - otherValidationComponent => validationComponent !== - otherValidationComponent); - } -} - - -export default ValidationForm; diff --git a/src/generic-components/input/validation/ValidationInput.jsx b/src/generic-components/input/validation/ValidationInput.jsx deleted file mode 100644 index 7c3c2a8..0000000 --- a/src/generic-components/input/validation/ValidationInput.jsx +++ /dev/null @@ -1,351 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ -/** - * Used for inputs on a validation form. - * All properties will be passed on to the input element. - * - * The following properties can be set for OOB validations and callbacks: - - required: Boolean: Should be set to true if the input must have a value - - numeric: Boolean : Should be set to true id the input should be an integer - - onChange : Function : Will be called to validate the value if the default validations are not sufficient, should return a boolean value - indicating whether the value is valid - - didUpdateCallback :Function: Will be called after the state has been updated and the component has rerendered. This can be used if - there are dependencies between inputs in a form. - * - * The following properties of the state can be set to determine - * the state of the input from outside components: - - isValid : Boolean - whether the value is valid - - value : value for the input field, - - disabled : Boolean, - - required : Boolean - whether the input value must be filled out. - */ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Validator from 'validator'; -import Input from 'react-bootstrap/lib/Input.js'; -import Overlay from 'react-bootstrap/lib/Overlay.js'; -import Tooltip from 'react-bootstrap/lib/Tooltip.js'; -import isEqual from 'lodash/lang/isEqual.js'; -import i18n from 'utils/i18n/i18n.js'; - -import InputOptions from '../inputOptions/InputOptions.jsx'; - -const globalValidationFunctions = { - required: value => value !== '', - maxLength: (value, length) => Validator.isLength(value, {max: length}), - minLength: (value, length) => Validator.isLength(value, {min: length}), - pattern: (value, pattern) => Validator.matches(value, pattern), - numeric: value => Validator.isNumeric(value), - maxValue: (value, maxValue) => value < maxValue, - alphanumeric: value => Validator.isAlphanumeric(value), - alphanumericWithSpaces: value => Validator.isAlphanumeric( - value.replace(/ /g, '')), - validateName: value => Validator.isAlphanumeric( - value.replace(/\s|\.|\_|\-/g, ''), 'en-US'), - validateVendorName: value => Validator.isAlphanumeric( - value.replace(/[\x7F-\xFF]|\s/g, ''), 'en-US'), - freeEnglishText: value => Validator.isAlphanumeric( - value.replace(/\s|\.|\_|\-|\,|\(|\)|\?/g, ''), 'en-US'), - email: value => Validator.isEmail(value), - ip: value => Validator.isIP(value), - url: value => Validator.isURL(value) -}; - -const globalValidationMessagingFunctions = { - required: () => i18n('Field is required'), - maxLength: (value, maxLength) => i18n( - 'Field value has exceeded it\'s limit, {maxLength}. current length: {length}', - { - length: value.length, - maxLength - }), - minLength: (value, minLength) => i18n( - 'Field value should contain at least {minLength} characters.', {minLength}), - pattern: (value, pattern) => i18n( - 'Field value should match the pattern: {pattern}.', {pattern}), - numeric: () => i18n('Field value should contain numbers only.'), - maxValue: (value, maxValue) => i18n( - 'Field value should be less then: {maxValue}.', {maxValue}), - alphanumeric: () => i18n( - 'Field value should contain letters or digits only.'), - alphanumericWithSpaces: () => i18n( - 'Field value should contain letters, digits or spaces only.'), - validateName: ()=> i18n( - 'Field value should contain English letters, digits , spaces, underscores, dashes and dots only.'), - validateVendorName: ()=> i18n( - 'Field value should contain English letters digits and spaces only.'), - freeEnglishText: ()=> i18n( - 'Field value should contain English letters, digits , spaces, underscores, dashes and dots only.'), - email: () => i18n('Field value should be a valid email address.'), - ip: () => i18n('Field value should be a valid ip address.'), - url: () => i18n('Field value should be a valid url address.'), - general: () => i18n('Field value is invalid.') -}; - -class ValidationInput extends React.Component { - - static contextTypes = { - validationParent: React.PropTypes.any, - isReadOnlyMode: React.PropTypes.bool - }; - - static defaultProps = { - onChange: null, - disabled: null, - didUpdateCallback: null, - validations: {}, - value: '' - }; - - static propTypes = { - onChange: React.PropTypes.func, - disabled: React.PropTypes.bool, - didUpdateCallback: React.PropTypes.func, - validations: React.PropTypes.object - }; - - - state = { - isValid: true, - style: null, - value: this.props.value, - error: {}, - previousErrorMessage: '', - wasInvalid: false - }; - - componentWillReceiveProps({value: nextValue, validations: nextValidaions}) { - if (this.state.wasInvalid) { - const {validations, value} = this.props; - if (value !== nextValue || !isEqual(validations, nextValidaions)) { - this.validate(nextValue, nextValidaions); - } - } else if (this.props.value !== nextValue) { - this.setState({value: nextValue}); - } - } - - render() { - let {isMultiSelect, onOtherChange, type} = this.props; - - let groupClasses = this.props.groupClassName || ''; - if (this.props.validations.required) { - groupClasses += ' required'; - } - let isReadOnlyMode = this.context.isReadOnlyMode; - - return ( - <div className='validation-input-wrapper'> - { - !isMultiSelect && !onOtherChange && type !== 'select' - && <Input - {...this.props} - groupClassName={groupClasses} - ref={'_myInput'} - value={this.state.value} - disabled={isReadOnlyMode || Boolean(this.props.disabled)} - bsStyle={this.state.style} - onChange={() => this.changedInput()} - onBlur={() => this.blurInput()}> - {this.props.children} - </Input> - } - { - (isMultiSelect || onOtherChange || type === 'select') - && <InputOptions onInputChange={() => this.changedInput()} - onBlur={() => this.blurInput()} - hasError={!this.state.isValid} - ref={'_myInput'} {...this.props} /> - } - {this.renderOverlay()} - </div> - ); - } - - renderOverlay() { - let position = 'right'; - if (this.props.type === 'text' - || this.props.type === 'email' - || this.props.type === 'number' - || this.props.type === 'password' - - ) { - position = 'bottom'; - } - - let validationMessage = this.state.error.message || - this.state.previousErrorMessage; - return ( - <Overlay - show={!this.state.isValid} - placement={position} - target={() => {let target = ReactDOM.findDOMNode(this.refs._myInput); return target.offsetParent ? target : undefined;}} - container={this}> - <Tooltip - id={`error-${validationMessage.replace(' ','-')}`} - className='validation-error-message'> - {validationMessage} - </Tooltip> - </Overlay> - ); - } - - componentDidMount() { - if (this.context.validationParent) { - this.context.validationParent.register(this); - } - } - - componentDidUpdate(prevProps, prevState) { - if (this.context.validationParent) { - if (prevState.isValid !== this.state.isValid) { - this.context.validationParent.childValidStateChanged(this, - this.state.isValid); - } - } - if (this.props.didUpdateCallback) { - this.props.didUpdateCallback(); - } - - } - - componentWillUnmount() { - if (this.context.validationParent) { - this.context.validationParent.unregister(this); - } - } - - /*** - * Adding same method as the actual input component - * @returns {*} - */ - getValue() { - if (this.props.type === 'checkbox') { - return this.refs._myInput.getChecked(); - } - return this.refs._myInput.getValue(); - } - - resetValue() { - this.setState({value: this.props.value}); - } - - - /*** - * internal method that validated the value. includes callback to the - * onChange method - * @param value - * @param validations - map containing validation id and the limitation - * describing the validation. - * @returns {object} - */ - validateValue = (value, validations) => { - let {customValidationFunction} = validations; - let error = {}; - let isValid = true; - for (let validation in validations) { - if ('customValidationFunction' !== validation) { - if (validations[validation]) { - if (!globalValidationFunctions[validation](value, - validations[validation])) { - error.id = validation; - error.message = - globalValidationMessagingFunctions[validation](value, - validations[validation]); - isValid = false; - break; - } - } - } else { - let customValidationResult = customValidationFunction(value); - - if (customValidationResult !== true) { - error.id = 'custom'; - isValid = false; - if (typeof customValidationResult === 'string') {//custom validation error message supplied. - error.message = customValidationResult; - } else { - error.message = globalValidationMessagingFunctions.general(); - } - break; - } - - - } - } - - return { - isValid, - error - }; - }; - - /*** - * Internal method that handles the change event of the input. validates and - * updates the state. - */ - changedInput() { - - let {isValid, error} = this.state.wasInvalid ? this.validate() : this.state; - let onChange = this.props.onChange; - if (onChange) { - onChange(this.getValue(), isValid, error); - } - }; - - blurInput() { - if (!this.state.wasInvalid) { - this.setState({wasInvalid: true}); - } - - let {isValid, error} = !this.state.wasInvalid - ? this.validate() - : this.state; - let onBlur = this.props.onBlur; - if (onBlur) { - onBlur(this.getValue(), isValid, error); - } - }; - - validate(value = this.getValue(), validations = this.props.validations) { - let validationStatus = this.validateValue(value, validations); - let {isValid, error} = validationStatus; - let _style = isValid ? null : 'error'; - this.setState({ - isValid, - error, - value, - previousErrorMessage: this.state.error.message || '', - style: _style, - wasInvalid: !isValid || this.state.wasInvalid - }); - - return validationStatus; - } - - isValid() { - return this.state.isValid; - } - -} -export default ValidationInput; diff --git a/src/generic-components/input/validation/ValidationTab.jsx b/src/generic-components/input/validation/ValidationTab.jsx deleted file mode 100644 index 385d585..0000000 --- a/src/generic-components/input/validation/ValidationTab.jsx +++ /dev/null @@ -1,141 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ -import React from 'react'; -import Tab from 'react-bootstrap/lib/Tab.js'; - -export default -class ValidationTab extends React.Component { - - static propTypes = { - children: React.PropTypes.node, - eventKey: React.PropTypes.any.isRequired, - onValidationStateChange: React.PropTypes.func //This property is assigned - // dynamically via - // React.cloneElement. lookup - // ValidationTabs.jsx. - // therefore it cannot be - // stated as required! - }; - - constructor(props) { - super(props); - this.validationComponents = []; - } - - static childContextTypes = { - validationParent: React.PropTypes.any - }; - - static contextTypes = { - validationParent: React.PropTypes.any - }; - - getChildContext() { - return {validationParent: this}; - } - - state = { - isValid: true, - notifyParent: false - }; - - componentDidMount() { - let validationParent = this.context.validationParent; - if (validationParent) { - validationParent.register(this); - } - } - - componentWillUnmount() { - let validationParent = this.context.validationParent; - if (validationParent) { - validationParent.unregister(this); - } - } - - register(validationComponent) { - this.validationComponents.push(validationComponent); - } - - unregister(validationComponent) { - this.childValidStateChanged(validationComponent, true); - this.validationComponents = - this.validationComponents.filter( - otherValidationComponent => validationComponent !== - otherValidationComponent); - } - - notifyValidStateChangedToParent(isValid) { - - let validationParent = this.context.validationParent; - if (validationParent) { - validationParent.childValidStateChanged(this, isValid); - } - } - - childValidStateChanged(validationComponent, isValid) { - - const currentValidState = this.state.isValid; - if (isValid !== currentValidState) { - let filteredValidationComponents = this.validationComponents.filter( - otherValidationComponent => validationComponent !== - otherValidationComponent); - let newValidState = isValid && - filteredValidationComponents.every(otherValidationComponent => { - return otherValidationComponent.isValid(); - }); - this.setState({isValid: newValidState, notifyParent: true}); - } - } - - validate() { - let isValid = true; - this.validationComponents.forEach(validationComponent => { - const isValidationComponentValid = validationComponent.validate().isValid; - isValid = isValidationComponentValid && isValid; - }); - this.setState({isValid, notifyParent: false}); - return {isValid}; - } - - componentDidUpdate(prevProps, prevState) { - if (prevState.isValid !== this.state.isValid) { - if (this.state.notifyParent) { - this.notifyValidStateChangedToParent(this.state.isValid); - } - this.props.onValidationStateChange(this.props.eventKey, - this.state.isValid); - } - } - - isValid() { - return this.state.isValid; - } - - render() { - let {children, ...tabProps} = this.props; - return ( - <Tab {...tabProps}>{children}</Tab> - ); - } -} diff --git a/src/generic-components/input/validation/ValidationTabs.jsx b/src/generic-components/input/validation/ValidationTabs.jsx deleted file mode 100644 index 64dd365..0000000 --- a/src/generic-components/input/validation/ValidationTabs.jsx +++ /dev/null @@ -1,102 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ -import React from 'react'; -import ReactDOM from 'react-dom'; -import Tabs from 'react-bootstrap/lib/Tabs.js'; -import Overlay from 'react-bootstrap/lib/Overlay.js'; -import Tooltip from 'react-bootstrap/lib/Tooltip.js'; - -import i18n from 'utils/i18n/i18n.js'; - -export default -class ValidationTab extends React.Component { - - static propTypes = { - children: React.PropTypes.node - }; - - state = { - invalidTabs: [] - }; - - cloneTab(element) { - const {invalidTabs} = this.state; - return React.cloneElement( - element, - { - key: element.props.eventKey, - tabClassName: invalidTabs.indexOf(element.props.eventKey) > -1 - ? 'invalid-tab' - : 'valid-tab', - onValidationStateChange: ( - eventKey, isValid) => this.validTabStateChanged(eventKey, isValid) - } - ); - } - - validTabStateChanged(eventKey, isValid) { - let {invalidTabs} = this.state; - let invalidTabIndex = invalidTabs.indexOf(eventKey); - if (isValid && invalidTabIndex > -1) { - this.setState({ - invalidTabs: invalidTabs.filter( - otherEventKey => eventKey !== otherEventKey) - }); - } else if (!isValid && invalidTabIndex === -1) { - this.setState({invalidTabs: [...invalidTabs, eventKey]}); - } - } - - showTabsError() { - const {invalidTabs} = this.state; - return invalidTabs.length > - 0 && - (invalidTabs.length > 1 || invalidTabs[0] !== this.props.activeKey); - } - - render() { - return ( - <div> - <Tabs {...this.props} ref='tabsList'> - {this.props.children.map(element => this.cloneTab(element))} - </Tabs> - <Overlay - animation={false} - show={this.showTabsError()} - placement='bottom' - target={() => { - let target = ReactDOM.findDOMNode(this.refs.tabsList).querySelector('ul > li.invalid-tab:not(.active):nth-of-type(n)'); - return target && target.offsetParent ? target : undefined; - } - } - container={this}> - <Tooltip - id='error-some-tabs-contain-errors' - className='validation-error-message'> - {i18n('One or more tabs are invalid')} - </Tooltip> - </Overlay> - </div> - ); - } -} diff --git a/src/generic-components/progressBar/ProgressBar.jsx b/src/generic-components/progressBar/ProgressBar.jsx deleted file mode 100644 index adf5b5f..0000000 --- a/src/generic-components/progressBar/ProgressBar.jsx +++ /dev/null @@ -1,45 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ -import React from 'react'; - -class ProgressBar extends React.Component { - static propTypes = { - label: React.PropTypes.string, - now: React.PropTypes.string.isRequired - } - - render() { - let {label, now} = this.props; - - return ( - <div className='progress-bar-view'> - <div className='progress-bar-outside'> - <div style={{width: now + '%'}} className='progress-bar-inside'></div> - </div> - <div className='progress-bar-view-label'>{label}</div> - </div> - ); - } -} - -export default ProgressBar; diff --git a/src/utils/GlobalConstants.js b/src/utils/GlobalConstants.js index 6e77600..c75efae 100644 --- a/src/utils/GlobalConstants.js +++ b/src/utils/GlobalConstants.js @@ -20,6 +20,11 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ +import {FilterBarConstants} from 'filter-bar-utils'; + +import {BASE_URL} from 'app/networking/NetworkConstants.js'; +import keyMirror from 'utils/KeyMirror.js'; + // Message Levels export const MESSAGE_LEVEL_SUCCESS = 'success'; export const MESSAGE_LEVEL_WARNING = 'warning'; @@ -34,3 +39,7 @@ export const STATUS_CODE_204_NO_CONTENT = 204; export const STATUS_CODE_3XX_REDIRECTION = 300; export const STATUS_CODE_4XX_CLIENT_ERROR = 400; export const STATUS_CODE_5XX_SERVER_ERROR = 500; + +export const filterBarActionTypes = keyMirror(FilterBarConstants.FILTER_BAR_ACTION_TYPES); + +export const UNIFIED_FILTERS_URL = BASE_URL + '/rest/search/unifiedFilterRequest';
\ No newline at end of file diff --git a/test/components/dateRange.test.js b/test/components/dateRange.test.js index d142624..1b0acb1 100644 --- a/test/components/dateRange.test.js +++ b/test/components/dateRange.test.js @@ -21,7 +21,7 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ import React from 'react'; -import TestUtils from 'react-dom/lib/ReactTestUtils'; +import TestUtils from 'react-dom/test-utils'; import {Provider} from 'react-redux'; import {expect} from 'chai'; import i18n from 'utils/i18n/i18n'; diff --git a/test/components/dateRangeSelector.test.js b/test/components/dateRangeSelector.test.js index fd578b1..a8dfe0c 100644 --- a/test/components/dateRangeSelector.test.js +++ b/test/components/dateRangeSelector.test.js @@ -21,7 +21,7 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ import React from "react"; -import TestUtils from "react-dom/lib/ReactTestUtils"; +import TestUtils from "react-dom/test-utils"; import {Provider} from "react-redux"; import {expect} from "chai"; import {moment} from "moment"; diff --git a/test/components/inlineMessage.test.js b/test/components/inlineMessage.test.js index 1e31295..094e6a4 100644 --- a/test/components/inlineMessage.test.js +++ b/test/components/inlineMessage.test.js @@ -22,7 +22,7 @@ */ import { expect } from 'chai'; import React from 'react'; -import TestUtils from 'react-dom/lib/ReactTestUtils'; +import TestUtils from 'react-dom/test-utils'; import InlineMessage from 'generic-components/InlineMessage/InlineMessage.jsx'; import InlineMessageConstants from 'generic-components/InlineMessage/InlineMessageConstants.js'; diff --git a/test/tierSupport/autoCompleteSearchBar/autoCompleteSearchBar.test.js b/test/tierSupport/autoCompleteSearchBar/autoCompleteSearchBar.test.js index d95977d..ff184f5 100644 --- a/test/tierSupport/autoCompleteSearchBar/autoCompleteSearchBar.test.js +++ b/test/tierSupport/autoCompleteSearchBar/autoCompleteSearchBar.test.js @@ -27,7 +27,7 @@ import sinon from 'sinon'; import configureStore from 'redux-mock-store'; import thunk from 'redux-thunk'; import {storeCreator} from 'app/AppStore.js'; -import TestUtils from 'react-dom/lib/ReactTestUtils'; +import TestUtils from 'react-dom/test-utils'; import { autoCompleteSearchBarActionTypes, ERROR_INVALID_SEARCH_TERMS, @@ -47,7 +47,7 @@ import { onSuggestionsClearRequested, querySelectedNodeElement, getInvalidSearchInputEvent -} from 'app/tierSupport/autoCompleteSearchBar/AutoCompleteSearchBarActions.js'; +} from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarActions.js'; import * as networkCall from 'app/networking/NetworkCalls.js'; import autoCompleteSearchBarTestConstants from './autoCompleteSearchBarTestConstants'; diff --git a/test/tierSupport/autoCompleteSearchBar/autoCompleteSearchBarActions.test.js b/test/tierSupport/autoCompleteSearchBar/autoCompleteSearchBarActions.test.js index 0b03dbf..8b3b901 100644 --- a/test/tierSupport/autoCompleteSearchBar/autoCompleteSearchBarActions.test.js +++ b/test/tierSupport/autoCompleteSearchBar/autoCompleteSearchBarActions.test.js @@ -32,7 +32,7 @@ import { TS_BACKEND_SEARCH_SELECTED_NODE_URL, ERROR_INVALID_SEARCH_TERMS, TIER_SUPPORT_NETWORK_ERROR -} from "app/tierSupport/autoCompleteSearchBar/AutoCompleteSearchBarConstants.js"; +} from 'generic-components/autoCompleteSearchBar/AutoCompleteSearchBarConstants.js'; import { searchResultsFound, clearSuggestionsTextField, @@ -42,7 +42,7 @@ import { fetchRequestedValues, fetchSelectedNodeElement, queryRequestedValues -} from "app/tierSupport/autoCompleteSearchBar/AutoCompleteSearchBarActions.js"; +} from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarActions.js'; import {tierSupportActionTypes, TSUI_SEARCH_URL} from "app/tierSupport/TierSupportConstants.js"; import {TABLE_DATA} from "app/tierSupport/selectedNodeDetails/SelectedNodeDetailsConstants.js"; import {getDynamicTSUISearchURL} from "app/tierSupport/TierSupportActions.js"; diff --git a/test/tierSupport/autoCompleteSearchBar/autoCompleteSearchBarReducer.test.js b/test/tierSupport/autoCompleteSearchBar/autoCompleteSearchBarReducer.test.js index 89b17e9..3dfb29a 100644 --- a/test/tierSupport/autoCompleteSearchBar/autoCompleteSearchBarReducer.test.js +++ b/test/tierSupport/autoCompleteSearchBar/autoCompleteSearchBarReducer.test.js @@ -23,14 +23,14 @@ import {expect} from 'chai';
import React from 'react';
import {Provider} from 'react-redux';
-import TestUtils from 'react-dom/lib/ReactTestUtils';
+import TestUtils from 'react-dom/test-utils';
import {tierSupportActionTypes} from 'app/tierSupport/TierSupportConstants.js';
-import reducer from 'app/tierSupport/autoCompleteSearchBar/AutoCompleteSearchBarReducer.js';
+import reducer from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarReducer.js';
import {MESSAGE_LEVEL_WARNING, MESSAGE_LEVEL_DANGER} from 'utils/GlobalConstants.js';
import {
autoCompleteSearchBarActionTypes,
NO_MATCHES_FOUND,
- ERROR_INVALID_SEARCH_TERMS} from 'app/tierSupport/autoCompleteSearchBar/AutoCompleteSearchBarConstants.js';
+ ERROR_INVALID_SEARCH_TERMS} from 'generic-components/autoCompleteSearchBar/AutoCompleteSearchBarConstants.js';
import {
ERROR_RETRIEVING_DATA} from 'app/networking/NetworkConstants.js';
diff --git a/test/vnfSearch/vnfSearchVisualizations/vnfSearchVisualizations.test.js b/test/vnfSearch/vnfSearchVisualizations/vnfSearchVisualizations.test.js index c3aeb91..746a3d4 100644 --- a/test/vnfSearch/vnfSearchVisualizations/vnfSearchVisualizations.test.js +++ b/test/vnfSearch/vnfSearchVisualizations/vnfSearchVisualizations.test.js @@ -21,17 +21,17 @@ * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ import React from 'react'; -import TestUtils from 'react-dom/lib/ReactTestUtils'; +import TestUtils from 'react-dom/test-utils'; import {storeCreator} from 'app/AppStore.js'; import {Provider} from 'react-redux'; import { expect } from 'chai'; -import VnfSearchOrchStatusVisualizations from 'app/vnfSearch/vnfSearchVisualizations/VnfSearchOrchestratedStatusVisualization.jsx'; -import VnfSearchProvStatusVisualizations from 'app/vnfSearch/vnfSearchVisualizations/VnfSearchProvStatusVisualization.jsx'; -import VnfSearchTotalCountVisualization from 'app/vnfSearch/vnfSearchVisualizations/VnfSearchTotalCountVisualization.jsx'; +import VnfSearchOrchStatusVisualizations from 'app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx'; +import VnfSearchProvStatusVisualizations from 'app/vnfSearch/VnfSearchProvStatusVisualization.jsx'; +import VnfSearchTotalCountVisualization from 'app/vnfSearch/VnfSearchTotalCountVisualization.jsx'; import { CHART_PROV_STATUS, CHART_ORCH_STATUS, - TOTAL_VNF_COUNT} from 'app/vnfSearch/vnfSearchVisualizations/VnfSearchVisualizationsConstants.js'; + TOTAL_VNF_COUNT} from 'app/vnfSearch/VnfSearchConstants.js'; describe('VNF Visualizations Structure Tests', function () { diff --git a/test/vnfSearch/vnfSearchVisualizations/vnfSearchVisualizationsReducer.test.js b/test/vnfSearch/vnfSearchVisualizations/vnfSearchVisualizationsReducer.test.js index 325daf9..f772762 100644 --- a/test/vnfSearch/vnfSearchVisualizations/vnfSearchVisualizationsReducer.test.js +++ b/test/vnfSearch/vnfSearchVisualizations/vnfSearchVisualizationsReducer.test.js @@ -22,10 +22,10 @@ */ import React from 'react'; import { expect } from 'chai'; -import reducer from 'app/vnfSearch/vnfSearchVisualizations/VnfSearchVisualizationsReducer.js'; +import reducer from 'app/vnfSearch/VnfSearchReducer.js'; import { CHART_ORCH_STATUS, - CHART_PROV_STATUS, vnfSearchVisualizationsActionTypes} from 'app/vnfSearch/vnfSearchVisualizations/VnfSearchVisualizationsConstants.js'; + CHART_PROV_STATUS, vnfSearchVisualizationsActionTypes} from 'app/vnfSearch/VnfSearchConstants.js'; diff --git a/tests.webpack.js b/tests.webpack.js deleted file mode 100644 index 24075ec..0000000 --- a/tests.webpack.js +++ /dev/null @@ -1,28 +0,0 @@ -/* - * ============LICENSE_START======================================================= - * org.onap.aai - * ================================================================================ - * Copyright © 2017 AT&T Intellectual Property. All rights reserved. - * Copyright © 2017 Amdocs - * ================================================================================ - * 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========================================================= - * - * ECOMP is a trademark and service mark of AT&T Intellectual Property. - */ - -var testContext = require.context('./test', true, /.test\.js$/); -testContext.keys().forEach(testContext); - -var codeContext = require.context('./src', true, /\.js$/); -codeContext.keys().forEach(codeContext); diff --git a/webpack.config.js b/webpack.config.js index 7e8d36d..da2cbe5 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -20,7 +20,6 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - 'use strict'; var path = require('path'); @@ -32,7 +31,11 @@ module.exports = { entry: { bundle: [ 'app/main.app.jsx', - 'webpack/hot/only-dev-server' + 'webpack/hot/only-dev-server' + ], + 'editAttributes/editAttributesBundle': [ + 'editAttributes/main.app.jsx', + 'webpack/hot/only-dev-server' ] }, output: { @@ -46,7 +49,8 @@ module.exports = { app: 'src/app', 'generic-components': 'src/generic-components', utils: 'src/utils', - images: 'resources/images' + images: 'resources/images', + editAttributes: 'src/editAttributes' } }, devServer: { diff --git a/webpack.devConfig.js b/webpack.devConfig.js index ed0ab79..e21529f 100644 --- a/webpack.devConfig.js +++ b/webpack.devConfig.js @@ -20,7 +20,6 @@ * * ECOMP is a trademark and service mark of AT&T Intellectual Property. */ - 'use strict'; var path = require('path'); @@ -34,6 +33,11 @@ module.exports = { 'app/main.app.jsx', `webpack-dev-server/client?https://localhost:${devPort}`, 'webpack/hot/only-dev-server' + ], + 'editAttributes/editAttributesBundle': [ + 'editAttributes/main.app.jsx', + `webpack-dev-server/client?https://localhost:${devPort}`, + 'webpack/hot/only-dev-server' ] }, output: { @@ -47,7 +51,8 @@ module.exports = { app: 'src/app', 'generic-components': 'src/generic-components', utils: 'src/utils', - images: 'resources/images' + images: 'resources/images', + editAttributes: 'src/editAttributes' } }, devServer: { |
