summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--.gitignore4
-rw-r--r--gulpfile.js15
-rw-r--r--karma.conf.js1
-rw-r--r--package.json16
-rw-r--r--resources/images/icons/collapsible-sliding-panel-expander-icon.svg11
-rw-r--r--resources/images/icons/collapsible-sliding-panel-expander-modified.svg9
-rw-r--r--resources/images/icons/collapsible-sliding-panel-expander-not-modified.svg9
-rw-r--r--resources/images/icons/filter/calendar-icon-hover.svg15
-rw-r--r--resources/images/icons/filter/calendar-icon.svg15
-rw-r--r--resources/images/icons/filter/collapse-filter.svg11
-rw-r--r--resources/images/icons/filter/expand-filter.svg11
-rw-r--r--resources/images/icons/filter/filter-small.svg11
-rw-r--r--resources/images/icons/filter/selected-checkbox.svg11
-rw-r--r--resources/overlays/overlaysDetails.json (renamed from resources/views/customViews.json)0
-rw-r--r--resources/scss/_common.scss1
-rw-r--r--resources/scss/_components.scss13
-rw-r--r--resources/scss/_modules.scss5
-rw-r--r--resources/scss/audit-table/_layout.scss44
-rw-r--r--resources/scss/bootstrap-cust/_buttons.scss2
-rw-r--r--resources/scss/bootstrap-cust/_forms.scss10
-rw-r--r--resources/scss/bootstrap-cust/_modals.scss4
-rw-r--r--resources/scss/bootstrap-cust/_navs.scss6
-rw-r--r--resources/scss/bootstrap-cust/_scaffolding.scss154
-rw-r--r--resources/scss/bootstrap-cust/_tables.scss15
-rw-r--r--resources/scss/bootstrap-cust/_variables.scss70
-rw-r--r--resources/scss/bootstrap.scss12
-rw-r--r--resources/scss/bootstrap/_normalize.scss2
-rw-r--r--resources/scss/bootstrap/_scaffolding.scss2
-rw-r--r--resources/scss/bootstrap/_variables.scss206
-rw-r--r--resources/scss/common/_base.scss9
-rw-r--r--resources/scss/common/_layout.scss12
-rw-r--r--resources/scss/common/_typography.scss22
-rw-r--r--resources/scss/common/_utils.scss1
-rw-r--r--resources/scss/common/_variables.scss162
-rw-r--r--resources/scss/components/_buttons.scss23
-rw-r--r--resources/scss/components/_containerPanel.scss8
-rw-r--r--resources/scss/components/_dateRangeSelector.scss70
-rw-r--r--resources/scss/components/_dropdownMultiSelect.scss9
-rw-r--r--resources/scss/components/_filterBar.scss207
-rw-r--r--resources/scss/components/_inlineMessage.scss1
-rw-r--r--resources/scss/components/_inputOptions.scss9
-rw-r--r--resources/scss/components/_notifications.scss5
-rw-r--r--resources/scss/components/_progressBar.scss48
-rw-r--r--resources/scss/components/_punchOut.scss36
-rw-r--r--resources/scss/components/_slidePanel.scss5
-rw-r--r--resources/scss/components/_titledComponent.scss19
-rw-r--r--resources/scss/components/_toggleButtonGroup.scss1
-rw-r--r--resources/scss/components/_toggleInput.scss11
-rw-r--r--resources/scss/components/_validationForm.scss5
-rw-r--r--resources/scss/customViews.scss (renamed from resources/scss/audit/_layout.scss)6
-rw-r--r--resources/scss/d3/_aggregationMap.scss7
-rw-r--r--resources/scss/d3/_forceDirectedGraph.scss65
-rw-r--r--resources/scss/header/_layout.scss76
-rw-r--r--resources/scss/inventory/_inventory.scss1
-rw-r--r--resources/scss/setAttribute/_editAttributeform.scss122
-rw-r--r--resources/scss/style.scss1
-rw-r--r--resources/scss/tier-support/_search.scss64
-rw-r--r--resources/scss/tier-support/_selectedNodeDetails.scss13
-rw-r--r--resources/scss/tier-support/_splitPane.scss30
-rw-r--r--resources/scss/visualizations/_layout.scss25
-rw-r--r--resources/scss/vnfSearch/_vnfSearch.scss (renamed from resources/scss/components/_dateRange.scss)18
-rw-r--r--resources/views/extensibleViews.json2
-rw-r--r--src/app/AppStore.js2
-rw-r--r--src/app/MainScreenHeader.jsx10
-rw-r--r--src/app/MainScreenWrapper.jsx8
-rw-r--r--src/app/extensibility/ExtensibilityReducer.js1
-rw-r--r--src/app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarConstants.js2
-rw-r--r--src/app/vnfSearch/VnfSearch.jsx80
-rw-r--r--src/app/vnfSearch/VnfSearchActions.js1
-rw-r--r--src/app/vnfSearch/VnfSearchConstants.js1
-rw-r--r--src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx1
-rw-r--r--src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx1
-rw-r--r--src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx1
-rw-r--r--src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx1
-rw-r--r--src/app/vnfSearch/VnfSearchReducer.js11
-rw-r--r--src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx1
-rw-r--r--src/generic-components/dateRange/DateRange.jsx91
-rw-r--r--src/generic-components/dateRange/DateRangeActions.js85
-rw-r--r--src/generic-components/dateRange/DateRangeConstants.js37
-rw-r--r--src/generic-components/dateRange/DateRangeReducer.js46
-rw-r--r--src/generic-components/dateRangeSelector/DateRangeSelector.jsx159
-rw-r--r--src/generic-components/dateRangeSelector/DateRangeSelectorActions.js115
-rw-r--r--src/generic-components/dateRangeSelector/DateRangeSelectorConstants.js50
-rw-r--r--src/generic-components/dateRangeSelector/DateRangeSelectorReducer.js60
-rw-r--r--src/generic-components/dynamicViewLoader/VisualizationProvider.js30
-rw-r--r--src/generic-components/filterBar/FilterBarConstants.js55
-rw-r--r--src/generic-components/filterBar/FilterBarUtils.js350
-rw-r--r--src/generic-components/input/validation/ValidationButtons.jsx66
-rw-r--r--src/generic-components/input/validation/ValidationForm.jsx170
-rw-r--r--src/generic-components/input/validation/ValidationInput.jsx351
-rw-r--r--src/generic-components/input/validation/ValidationTab.jsx141
-rw-r--r--src/generic-components/input/validation/ValidationTabs.jsx102
-rw-r--r--src/generic-components/progressBar/ProgressBar.jsx45
-rw-r--r--src/utils/GlobalConstants.js9
-rw-r--r--test/components/dateRange.test.js2
-rw-r--r--test/components/dateRangeSelector.test.js2
-rw-r--r--test/components/inlineMessage.test.js2
-rw-r--r--test/tierSupport/autoCompleteSearchBar/autoCompleteSearchBar.test.js4
-rw-r--r--test/tierSupport/autoCompleteSearchBar/autoCompleteSearchBarActions.test.js4
-rw-r--r--test/tierSupport/autoCompleteSearchBar/autoCompleteSearchBarReducer.test.js6
-rw-r--r--test/vnfSearch/vnfSearchVisualizations/vnfSearchVisualizations.test.js10
-rw-r--r--test/vnfSearch/vnfSearchVisualizations/vnfSearchVisualizationsReducer.test.js4
-rw-r--r--tests.webpack.js28
-rw-r--r--webpack.config.js10
-rw-r--r--webpack.devConfig.js9
105 files changed, 1248 insertions, 2694 deletions
diff --git a/.gitignore b/.gitignore
index 8fae42f..3e1100f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -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: {