[CORD-1044] Migrating vTR Dashboard to the new GUI using gui-extensions
Change-Id: I33847766b790ffba2b9a9e9cfab9a7060734ce91
diff --git a/xos/gui/conf/app/README.md b/xos/gui/conf/app/README.md
new file mode 100755
index 0000000..bdc361a
--- /dev/null
+++ b/xos/gui/conf/app/README.md
@@ -0,0 +1,47 @@
+# XOS-GUI Config
+
+### Note that the configurations defined in this folder are for development only, they are most likely to be overrided by a volume mount defined in `service-profile`
+
+## App Config
+
+This configuration will specifiy the rest API base url and the Websocket address.
+Here is it's structure:
+
+```
+angular.module('app')
+ .constant('AppConfig', {
+ apiEndpoint: '/spa/api',
+ websocketClient: '/'
+ });
+
+```
+
+## Style Config
+
+This configuration will contain branding information, such as title, logo and navigation items.
+Here is it's structure:
+
+```
+angular.module('app')
+ .constant('StyleConfig', {
+ projectName: 'CORD',
+ favicon: 'cord-favicon.png',
+ background: 'cord-bg.jpg',
+ payoff: 'Your VNF orchestrator',
+ logo: 'cord-logo.png',
+ routes: [
+ {
+ label: 'Slices',
+ state: 'xos.core.slices'
+ },
+ {
+ label: 'Instances',
+ state: 'xos.core.instances'
+ },
+ {
+ label: 'Nodes',
+ state: 'xos.core.nodes'
+ }
+ ]
+});
+```
\ No newline at end of file
diff --git a/xos/gui/conf/app/app.config.dev.js b/xos/gui/conf/app/app.config.dev.js
new file mode 100755
index 0000000..5c620d7
--- /dev/null
+++ b/xos/gui/conf/app/app.config.dev.js
@@ -0,0 +1,5 @@
+angular.module('app')
+ .constant('AppConfig', {
+ apiEndpoint: 'http://xos.dev:3000/api',
+ websocketClient: 'http://xos.dev:3000'
+ });
diff --git a/xos/gui/conf/app/app.config.local.ts b/xos/gui/conf/app/app.config.local.ts
new file mode 100755
index 0000000..a00155b
--- /dev/null
+++ b/xos/gui/conf/app/app.config.local.ts
@@ -0,0 +1,5 @@
+import {IAppConfig} from './interfaces';
+export const AppConfig: IAppConfig = {
+ apiEndpoint: 'http://localhost:4000/api',
+ websocketClient: 'http://localhost:4000/'
+};
diff --git a/xos/gui/conf/app/app.config.production.js b/xos/gui/conf/app/app.config.production.js
new file mode 100755
index 0000000..8f5bd5a
--- /dev/null
+++ b/xos/gui/conf/app/app.config.production.js
@@ -0,0 +1,5 @@
+angular.module('app')
+ .constant('AppConfig', {
+ apiEndpoint: '/spa/api',
+ websocketClient: '/'
+ });
diff --git a/xos/gui/conf/app/app.config.test.js b/xos/gui/conf/app/app.config.test.js
new file mode 100755
index 0000000..86cfcb1
--- /dev/null
+++ b/xos/gui/conf/app/app.config.test.js
@@ -0,0 +1,5 @@
+angular.module('app')
+ .constant('AppConfig', {
+ apiEndpoint: 'http://xos-test:3000/api',
+ websocketClient: 'http://xos-test:3000'
+ });
diff --git a/xos/gui/conf/app/style.config.cord.js b/xos/gui/conf/app/style.config.cord.js
new file mode 100755
index 0000000..6f7ebab
--- /dev/null
+++ b/xos/gui/conf/app/style.config.cord.js
@@ -0,0 +1,22 @@
+angular.module('app')
+ .constant('StyleConfig', {
+ projectName: 'CORD',
+ favicon: 'cord-favicon.png',
+ background: 'cord-bg.jpg',
+ payoff: 'Your VNF orchestrator',
+ logo: 'cord-logo.png',
+ routes: [
+ {
+ label: 'Slices',
+ state: 'xos.core.slices'
+ },
+ {
+ label: 'Instances',
+ state: 'xos.core.instances'
+ },
+ {
+ label: 'Nodes',
+ state: 'xos.core.nodes'
+ }
+ ]
+});
diff --git a/xos/gui/conf/app/style.config.opencloud.js b/xos/gui/conf/app/style.config.opencloud.js
new file mode 100755
index 0000000..9693c5d
--- /dev/null
+++ b/xos/gui/conf/app/style.config.opencloud.js
@@ -0,0 +1,14 @@
+angular.module('app')
+ .constant('StyleConfig', {
+ projectName: 'OpenCloud',
+ favicon: 'opencloud-favicon.png',
+ background: 'opencloud-bg.jpg',
+ payoff: 'Your OS resource manager',
+ logo: 'opencloud-logo.png',
+ routes: [
+ {
+ label: 'Slices',
+ state: 'xos.core.slices'
+ }
+ ]
+});
diff --git a/xos/gui/conf/browsersync-dist.conf.js b/xos/gui/conf/browsersync-dist.conf.js
new file mode 100755
index 0000000..fa45845
--- /dev/null
+++ b/xos/gui/conf/browsersync-dist.conf.js
@@ -0,0 +1,12 @@
+const conf = require('./gulp.conf');
+
+module.exports = function () {
+ return {
+ server: {
+ baseDir: [
+ conf.paths.dist
+ ]
+ },
+ open: false
+ };
+};
diff --git a/xos/gui/conf/browsersync.conf.js b/xos/gui/conf/browsersync.conf.js
new file mode 100755
index 0000000..430c94f
--- /dev/null
+++ b/xos/gui/conf/browsersync.conf.js
@@ -0,0 +1,25 @@
+const conf = require('./gulp.conf');
+const proxy = require('./proxy');
+
+module.exports = function () {
+ return {
+ server: {
+ baseDir: [
+ conf.paths.tmp,
+ conf.paths.src
+ ],
+ middleware: function (req, res, next) {
+ if (req.url.indexOf('xosapi') !== -1) {
+ proxy.api.web(req, res);
+ }
+ else if (req.url.indexOf('spa') !== -1 || req.url.indexOf('socket') !== -1) {
+ proxy.static.web(req, res);
+ }
+ else {
+ next();
+ }
+ }
+ },
+ open: false
+ };
+};
diff --git a/xos/gui/conf/gulp.conf.js b/xos/gui/conf/gulp.conf.js
new file mode 100755
index 0000000..f8b97d0
--- /dev/null
+++ b/xos/gui/conf/gulp.conf.js
@@ -0,0 +1,48 @@
+'use strict';
+
+/**
+ * This file contains the variables used in other gulp files
+ * which defines tasks
+ * By design, we only put there very generic config values
+ * which are used in several places to keep good readability
+ * of the tasks
+ */
+
+const path = require('path');
+const gutil = require('gulp-util');
+
+exports.ngModule = 'app';
+
+/**
+ * The main paths of your project handle these with care
+ */
+exports.paths = {
+ src: 'src',
+ dist: 'dist/extensions/vtr', // NOTE that 'sample' have to match the extension name provided in platform install
+ appConfig: 'conf/app',
+ tmp: '.tmp',
+ e2e: 'e2e',
+ tasks: 'gulp_tasks'
+};
+
+exports.path = {};
+for (const pathName in exports.paths) {
+ if (exports.paths.hasOwnProperty(pathName)) {
+ exports.path[pathName] = function pathJoin() {
+ const pathValue = exports.paths[pathName];
+ const funcArgs = Array.prototype.slice.call(arguments);
+ const joinArgs = [pathValue].concat(funcArgs);
+ return path.join.apply(this, joinArgs);
+ };
+ }
+}
+
+/**
+ * Common implementation for an error handler of a Gulp plugin
+ */
+exports.errorHandler = function (title) {
+ return function (err) {
+ gutil.log(gutil.colors.red(`[${title}]`), err.toString());
+ this.emit('end');
+ };
+};
diff --git a/xos/gui/conf/karma-auto.conf.js b/xos/gui/conf/karma-auto.conf.js
new file mode 100755
index 0000000..a5ea084
--- /dev/null
+++ b/xos/gui/conf/karma-auto.conf.js
@@ -0,0 +1,61 @@
+const conf = require('./gulp.conf');
+const pkg = require('../package.json');
+
+module.exports = function (config) {
+ const configuration = {
+ basePath: '../',
+ singleRun: false,
+ autoWatch: true,
+ logLevel: 'INFO',
+ junitReporter: {
+ outputDir: 'test-reports'
+ },
+ browsers: [
+ 'PhantomJS',
+ // 'Chrome'
+ ],
+ frameworks: [
+ 'jasmine',
+ 'es6-shim'
+ ],
+ files: [
+ 'node_modules/es6-shim/es6-shim.js',
+ conf.path.src('index.spec.js'),
+ conf.path.src('**/*.html')
+ ],
+ preprocessors: {
+ [conf.path.src('index.spec.js')]: [
+ 'webpack'
+ ],
+ [conf.path.src('**/*.html')]: [
+ 'ng-html2js'
+ ]
+ },
+ ngHtml2JsPreprocessor: {
+ stripPrefix: `${conf.paths.src}/`
+ },
+ reporters: ['mocha', 'coverage'],
+ coverageReporter: {
+ type: 'html',
+ dir: 'coverage/'
+ },
+ webpack: require('./webpack-test.conf'),
+ webpackMiddleware: {
+ noInfo: true
+ },
+ plugins: [
+ require('karma-jasmine'),
+ require('karma-junit-reporter'),
+ require('karma-coverage'),
+ require('karma-phantomjs-launcher'),
+ require('karma-chrome-launcher'),
+ require('karma-phantomjs-shim'),
+ require('karma-ng-html2js-preprocessor'),
+ require('karma-webpack'),
+ require('karma-es6-shim'),
+ require('karma-mocha-reporter')
+ ]
+ };
+
+ config.set(configuration);
+};
diff --git a/xos/gui/conf/karma.conf.js b/xos/gui/conf/karma.conf.js
new file mode 100755
index 0000000..2db6132
--- /dev/null
+++ b/xos/gui/conf/karma.conf.js
@@ -0,0 +1,57 @@
+const conf = require('./gulp.conf');
+
+module.exports = function (config) {
+ const configuration = {
+ basePath: '../',
+ singleRun: true,
+ autoWatch: false,
+ logLevel: 'INFO',
+ junitReporter: {
+ outputDir: 'test-reports'
+ },
+ browsers: [
+ 'PhantomJS'
+ ],
+ frameworks: [
+ 'jasmine',
+ 'es6-shim'
+ ],
+ files: [
+ 'node_modules/es6-shim/es6-shim.js',
+ conf.path.src('index.spec.js'),
+ conf.path.src('**/*.html')
+ ],
+ preprocessors: {
+ [conf.path.src('index.spec.js')]: [
+ 'webpack'
+ ],
+ [conf.path.src('**/*.html')]: [
+ 'ng-html2js'
+ ]
+ },
+ ngHtml2JsPreprocessor: {
+ stripPrefix: `${conf.paths.src}/`
+ },
+ reporters: ['progress', 'coverage'],
+ coverageReporter: {
+ type: 'html',
+ dir: 'coverage/'
+ },
+ webpack: require('./webpack-test.conf'),
+ webpackMiddleware: {
+ noInfo: true
+ },
+ plugins: [
+ require('karma-jasmine'),
+ require('karma-junit-reporter'),
+ require('karma-coverage'),
+ require('karma-phantomjs-launcher'),
+ require('karma-phantomjs-shim'),
+ require('karma-ng-html2js-preprocessor'),
+ require('karma-webpack'),
+ require('karma-es6-shim')
+ ]
+ };
+
+ config.set(configuration);
+};
diff --git a/xos/gui/conf/proxy.js b/xos/gui/conf/proxy.js
new file mode 100644
index 0000000..c410f04
--- /dev/null
+++ b/xos/gui/conf/proxy.js
@@ -0,0 +1,28 @@
+const httpProxy = require('http-proxy');
+
+const apiProxy = httpProxy.createProxyServer({
+ target: 'http://192.168.46.100:9101'
+});
+
+const staticFilesProxy = httpProxy.createProxyServer({
+ target: 'http://192.168.46.100/spa'
+});
+
+apiProxy.on('error', (error, req, res) => {
+ res.writeHead(500, {
+ 'Content-Type': 'text/plain'
+ });
+ console.error('[Proxy]', error);
+});
+
+staticFilesProxy.on('error', (error, req, res) => {
+ res.writeHead(500, {
+ 'Content-Type': 'text/plain'
+ });
+ console.error('[Proxy]', error);
+});
+
+module.exports = {
+ api: apiProxy,
+ static: staticFilesProxy
+};
diff --git a/xos/gui/conf/webpack-dist.conf.js b/xos/gui/conf/webpack-dist.conf.js
new file mode 100755
index 0000000..91dd0a7
--- /dev/null
+++ b/xos/gui/conf/webpack-dist.conf.js
@@ -0,0 +1,103 @@
+const webpack = require('webpack');
+const conf = require('./gulp.conf');
+const path = require('path');
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const pkg = require('../package.json');
+const autoprefixer = require('autoprefixer');
+const BaseHrefWebpackPlugin = require('base-href-webpack-plugin').BaseHrefWebpackPlugin;
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const env = process.env.NODE_ENV || 'production';
+const brand = process.env.BRAND || 'cord';
+
+module.exports = {
+ module: {
+ loaders: [
+ {
+ test: /.json$/,
+ loaders: [
+ 'json'
+ ]
+ },
+ {
+ test: /\.(css|scss)$/,
+ loaders: ExtractTextPlugin.extract({
+ fallbackLoader: 'style',
+ loader: 'css?minimize!sass!postcss'
+ })
+ },
+ {
+ test: /\.ts$/,
+ exclude: /node_modules/,
+ loaders: [
+ 'ng-annotate',
+ 'ts'
+ ]
+ },
+ {
+ test: /.html$/,
+ loaders: [
+ 'html?' + JSON.stringify({
+ attrs: ["img:src", "img:ng-src"]
+ })
+ ]
+ },
+ {
+ test: /\.(png|woff|woff2|eot|ttf|svg|jpg|gif|jpeg)$/,
+ loader: 'url-loader?limit=100000'
+ }
+ ]
+ },
+ plugins: [
+ new CopyWebpackPlugin([
+ { from: `./conf/app/app.config.${env}.js`, to: `app.config.js` },
+ { from: `./conf/app/style.config.${brand}.js`, to: `style.config.js` },
+ ]),
+ new webpack.optimize.OccurrenceOrderPlugin(),
+ new webpack.NoErrorsPlugin(),
+ new HtmlWebpackPlugin({
+ inject: true,
+ template: conf.path.src('index.html')
+ }),
+ new webpack.optimize.UglifyJsPlugin({
+ compress: {unused: true, dead_code: true, warnings: false}, // eslint-disable-line camelcase
+ mangle: false // NOTE mangling was breaking the build
+ }),
+ new ExtractTextPlugin('index-[contenthash].css'),
+ new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}),
+ new webpack.ProvidePlugin({
+ $: "jquery",
+ jQuery: "jquery"
+ }),
+ new BaseHrefWebpackPlugin({
+ baseHref: '/spa/'
+ }),
+ ],
+ postcss: () => [autoprefixer],
+ output: {
+ path: path.join(process.cwd(), conf.paths.dist),
+ publicPath: "/spa/", // enable apache proxying on the head node
+ filename: '[name].js'
+ },
+ resolve: {
+ extensions: [
+ '',
+ '.webpack.js',
+ '.web.js',
+ '.js',
+ '.ts'
+ ]
+ },
+ entry: {
+ app: `./${conf.path.src('index')}`,
+ vendor: Object.keys(pkg.dependencies)
+ },
+ ts: {
+ configFileName: 'tsconfig.json'
+ },
+ tslint: {
+ configuration: require('../tslint.json')
+ }
+};
+
diff --git a/xos/gui/conf/webpack-test.conf.js b/xos/gui/conf/webpack-test.conf.js
new file mode 100755
index 0000000..a87e383
--- /dev/null
+++ b/xos/gui/conf/webpack-test.conf.js
@@ -0,0 +1,66 @@
+module.exports = {
+ module: {
+ preLoaders: [
+ {
+ test: /\.ts$/,
+ exclude: /node_modules/,
+ loader: 'tslint'
+ }
+ ],
+ loaders: [
+ {
+ test: /.json$/,
+ loaders: [
+ 'json'
+ ]
+ },
+ {
+ test: /\.ts$/,
+ exclude: /node_modules/,
+ loaders: [
+ 'ng-annotate',
+ 'ts'
+ ]
+ },
+ {
+ test: /.html$/,
+ loaders: [
+ 'html?' + JSON.stringify({
+ attrs: ["img:src", "img:ng-src"]
+ })
+ ]
+ },
+ {
+ test: /\.(css|scss)$/,
+ loaders: [
+ 'style',
+ 'css',
+ 'sass',
+ 'postcss'
+ ]
+ },
+ {
+ test: /\.(png|woff|woff2|eot|ttf|svg|jpg|gif|jpeg)$/,
+ loader: 'url-loader?limit=100000'
+ }
+ ]
+ },
+ plugins: [],
+ debug: true,
+ devtool: 'source-map',
+ resolve: {
+ extensions: [
+ '',
+ '.webpack.js',
+ '.web.js',
+ '.js',
+ '.ts'
+ ]
+ },
+ ts: {
+ configFileName: 'tsconfig.json'
+ },
+ tslint: {
+ configuration: require('../tslint.json')
+ }
+};
diff --git a/xos/gui/conf/webpack.conf.js b/xos/gui/conf/webpack.conf.js
new file mode 100755
index 0000000..544b2c5
--- /dev/null
+++ b/xos/gui/conf/webpack.conf.js
@@ -0,0 +1,99 @@
+const webpack = require('webpack');
+const conf = require('./gulp.conf');
+const path = require('path');
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const autoprefixer = require('autoprefixer');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const env = process.env.NODE_ENV || 'production';
+const brand = process.env.BRAND || 'cord';
+
+module.exports = {
+ module: {
+ preLoaders: [
+ {
+ test: /\.ts$/,
+ exclude: /node_modules/,
+ loader: 'tslint'
+ }
+ ],
+
+ loaders: [
+ {
+ test: /.json$/,
+ loaders: [
+ 'json'
+ ]
+ },
+ {
+ test: /\.(css|scss)$/,
+ loaders: [
+ 'style',
+ 'css',
+ 'sass',
+ 'postcss'
+ ]
+ },
+ {
+ test: /\.ts$/,
+ exclude: /node_modules/,
+ loaders: [
+ 'ng-annotate',
+ 'ts'
+ ]
+ },
+ {
+ test: /.html$/,
+ loaders: [
+ 'html?' + JSON.stringify({
+ attrs: ["img:src", "img:ng-src"]
+ })
+ ]
+ },
+ {
+ test: /\.(png|woff|woff2|eot|ttf|svg|jpg|gif|jpeg)$/,
+ loader: 'url-loader?limit=100000'
+ }
+ ]
+ },
+ plugins: [
+ new CopyWebpackPlugin([
+ { from: `./conf/app/app.config.${env}.js`, to: `app.config.js` },
+ { from: `./conf/app/style.config.${brand}.js`, to: `style.config.js` },
+ ]),
+ new webpack.optimize.OccurrenceOrderPlugin(),
+ new webpack.NoErrorsPlugin(),
+ new HtmlWebpackPlugin({
+ template: conf.path.src('index.html')
+ })
+ ],
+ postcss: () => [autoprefixer],
+ debug: true,
+ devtool: 'source-map',
+ output: {
+ path: path.join(process.cwd(), conf.paths.tmp),
+ filename: 'index.js'
+ },
+ resolve: {
+ extensions: [
+ '',
+ '.webpack.js',
+ '.web.js',
+ '.js',
+ '.ts'
+ ]
+ },
+ entry: `./${conf.path.src('index')}`,
+ ts: {
+ configFileName: 'tsconfig.json'
+ },
+ tslint: {
+ configuration: require('../tslint.json')
+ },
+ stats: {
+ colors: true,
+ modules: true,
+ reasons: true,
+ errorDetails: true
+ }
+};