-opendaylight-ui
-===============
-
-OpenDaylight SDN Controller - UI (AngularJS 100% Client Side)
-
-Setting it up
-------------
- # curl https://raw.github.com/creationix/nvm/master/install.sh | sh
-
- ...
-
- Cloning into '/root/.nvm'...
- remote: Counting objects: 602, done.
- remote: Compressing objects: 100% (396/396), done.
- remote: Total 602 (delta 296), reused 484 (delta 195)
- Receiving objects: 100% (602/602), 91.40 KiB, done.
- Resolving deltas: 100% (296/296), done.
-
- => Appending source string to /root/.profile
- => Close and reopen your terminal to start using NVM
-
- # nvm ls-remote
- v0.1.14 ... ... ...
- ...
- ... ... v0.10.17 ...
- ... ... ... ...
-
- # nvm install 0.10.17
- ######################################################################## 100.0%
- Now using node v0.10.17
-
- # nvm ls
- v0.10.7
- current: v0.10.17
-
- # npm install -g grunt-cli
- # npm install -g bower
-
- # git clone http://github.com/ekarlso/opendaylight-ui
- # cd opendaylight-ui
- # npm install
-
-#### Install and copy bower deps
-
- # grunt bower
-
-Starting a webserver using the grunt command
---------------------------------------------
-The below steps will also open a webbrowser towards the server on localhost.
-
-None of the below tasks will perform minification except Production
-
-#### Development Environment
-Does not reload in the browser when you do changes but updates files on
-changes.
-
- # grunt dev
-
-#### Live Development Environment
-This updates all the files and reloads the page in the browser for each each
-time a file is changes (Recommended)
-
- # grunt live
-
-#### Production Environment
-
- # grunt prod
-
-
-OpenDaylight NB API Documentation
-=================================
-
-https://wiki.opendaylight.org/view/OpenDaylight_Controller:REST_Reference_and_Authentication
\ No newline at end of file
+# OpenDaylight DLUX \r
+\r
+OpenDaylight DLUX is a Javascript-based stateless user interface that communicates with the service backend to provide a consistent and user-friendly interface to interact with OpenDaylight projects and base controller.\r
+\r
+\r
+## Quick Start\r
+\r
+1. Install Node.js. Use link http://nodejs.org/download/\r
+2. Go to directory dlux-web from command line\r
+\r
+ $ cd dlux-web\r
+\r
+3. Execute following steps from shell prompt\r
+\r
+ $ sudo npm -g install grunt-cli karma bower\r
+ $ npm install\r
+ $ bower install\r
+\r
+\r
+4. To run the dlux on local node server, use command\r
+\r
+ $ grunt live\r
+\r
+It will start server at http://localhost:9000/. It expects your controller to be running at localhost:8181.\r
+\r
+You can change the base url of controller in file dlux-web/config/development.json\r
+\r
+\r
+5. To generate OSGi bundle for controller, run\r
+\r
+ $ mvn clean install\r
+\r
+It will generate dlux-web-0.1.0-SNAPSHOT.jar under dlux-web/target/.\r
+This assumes that dlux is deployed on same node where md-sal is present. If md-sal is present at different OSGi container,\r
+then you should update the base url in file dlux-web/config/production.json\r
+\r
+6. Copy this jar bundle to plugins directory inside your controller distribution. Then, you can access Dlux UI at http://<<Controller IP>>:8181/dlux/index.html.\r
+\r
+\r
+## Overall Directory Structure\r
+\r
+At a high level, the structure looks roughly like this:\r
+\r
+```\r
+dlux-web/\r
+ |- grunt-tasks/\r
+ |- karma/\r
+ |- src/\r
+ | |- app/\r
+ | | |- <app logic>\r
+ | |- assets/\r
+ | | |- <static files>\r
+ | |- common/\r
+ | | |- <reusable code>\r
+ | |- less/\r
+ | | |- main.less\r
+ |- vendor/\r
+ | |- angular-bootstrap/\r
+ | |- bootstrap/\r
+ | |- placeholders/\r
+ |- .bowerrc\r
+ |- bower.json\r
+ |- build.config.js\r
+ |- Gruntfile.js\r
+ |- module.prefix\r
+ |- module.suffix\r
+ |- package.json\r
+```\r
+\r
+What follows is a brief description of each entry, but most directories contain\r
+their own `README.md` file with additional documentation, so browse around to\r
+learn more.\r
+\r
+- `karma/` - test configuration.\r
+- `src/` - our application sources. [Read more »](src/README.md)\r
+- `vendor/` - third-party libraries. [Bower](http://bower.io) will install\r
+ packages here. Anything added to this directory will need to be manually added\r
+ to `build.config.js` and `karma/karma-unit.js` to be picked up by the build\r
+ system.\r
+- `.bowerrc` - the Bower configuration file. This tells Bower to install\r
+ components into the `vendor/` directory.\r
+- `bower.json` - this is our project configuration for Bower and it contains the\r
+ list of Bower dependencies we need.\r
+- `build.config.js` - our customizable build settings; see "The Build System"\r
+ below.\r
+- `Gruntfile.js` - our build script; see "The Build System" below.\r
+- `module.prefix` and `module.suffix` - our compiled application script is\r
+ wrapped in these, which by default are used to place the application inside a\r
+ self-executing anonymous function to ensure no clashes with other libraries.\r
+- `package.json` - metadata about the app, used by NPM and our build script. Our\r
+ NPM dependencies are listed here.\r
+\r
+\r
+### The Build System\r
+\r
+The best way to learn about the build system is by familiarizing yourself with\r
+Grunt and then reading through the heavily documented build script,\r
+`Gruntfile.js`. But you don't need to do that to be very productive with\r
+`ngBoilerplate`. What follows in this section is a quick introduction to the\r
+tasks provided and should be plenty to get you started.\r
+\r
+The driver of the process is the `delta` multi-task, which watches for file\r
+changes using `grunt-contrib-watch` and executes one of nine tasks when a file\r
+changes:\r
+\r
+* `delta:gruntfile` - When `Gruntfile.js` changes, this task runs the linter\r
+ (`jshint`) on that one file and reloads the configuration.\r
+* `delta:assets` - When any file within `src/assets/` changes, all asset files\r
+ are copied to `build/assets/`.\r
+* `delta:html` - When `src/index.html` changes, it is compiled as a Grunt\r
+ template, so script names, etc., are dynamically replaced with the correct\r
+ values configured dynamically by Grunt.\r
+* `delta:less` - When any `*.less` file within `src/` changes, the\r
+ `src/less/main.less` file is linted and copied into\r
+ `build/assets/ng-boilerplate.css`.\r
+* `delta:jssrc` - When any JavaScript file within `src/` that does not end in\r
+ `.spec.js` changes, all JavaScript sources are linted, all unit tests are run,\r
+ and the all source files are re-copied to `build/src`.\r
+* `delta:coffeesrc` - When any `*.coffee` file in `src/` that doesn't match\r
+ `*.spec.coffee` changes, the Coffee scripts are compiled independently into\r
+ `build/src` in a structure mirroring where they were in `src/` so it's easy to\r
+ locate problems. For example, the file\r
+ `src/common/titleService/titleService.coffee` is compiled to\r
+ `build/src/common/titleService/titleService.js`.\r
+* `delta:tpls` - When any `*.tpl.html` file within `src/` changes, all templates\r
+ are put into strings in a JavaScript file (technically two, one for\r
+ `src/common/` and another for `src/app/`) that will add the template to\r
+ AngularJS's\r
+ [`$templateCache`](http://docs.angularjs.org/api/ng.$templateCache) so\r
+ template files are part of the initial JavaScript payload and do not require\r
+ any future XHR. The template cache files are `build/template-app.js` and\r
+ `build/template-common.js`.\r
+* `delta:jsunit` - When any `*.spec.js` file in `src/` changes, the test files\r
+ are linted and the unit tests are executed.\r
+* `delta:coffeeunit` - When any `*.spec.coffee` file in `src/` changes, the test\r
+ files are linted, compiled their tests executed.\r
+\r
+As covered in the previous section, `grunt watch` will execute a full build\r
+up-front and then run any of the aforementioned `delta:*` tasks as needed to\r
+ensure the fastest possible build. So whenever you're working on your project,\r
+start with:\r
+\r
+```sh\r
+$ grunt watch\r
+```\r
+\r
+And everything will be done automatically!\r
+\r
+### Build vs. Compile\r
+\r
+To make the build even faster, tasks are placed into two categories: build and\r
+compile. The build tasks (like those we've been discussing) are the minimal\r
+tasks required to run your app during development. Build use developement.json for configuration.\r
+\r
+Compile tasks, however, get your app ready for production. The compile tasks\r
+include concatenation, minification, compression, etc. These tasks take a little\r
+bit longer to run and are not at all necessary for development so are not called\r
+automatically during build or watch. Compile use production.json as configuration file.\r
+\r
+To initiate a full compile, you simply run the default task:\r
+\r
+```sh\r
+$ grunt\r
+```\r
+\r
+This will perform a build and then a compile. The compiled site - ready for\r
+uploading to the server! - is located in `src/main/resources/pages`, taking a cue from\r
+traditional software development. To test that your full site works as\r
+expected, open the `src/main/resources/pages/index.html` file in your browser. Voila!\r
+\r
+### Maven Build\r
+\r
+Maven is added to generate an OSGi compatible bundle that can be shipped with Opendaylight Controller.\r
+Maven internally runs grunt production ready build and generate a jar out of it.\r
+Once you successfully run 'mvn clean install', the OSGi bundle jar gets generated under target/.\r
+### Live Reload!\r
+\r
+DLUX also includes [Live Reload](http://livereload.com/), so you no\r
+longer have to refresh your page after making changes! You need a Live Reload\r
+browser plugin for this:\r
+\r
+- Chrome - [Chrome Webstore](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei)\r
+- Firefox - [Download from Live Reload](http://download.livereload.com/2.0.8/LiveReload-2.0.8.xpi)\r
+- Safari - [Download from Live Reload](http://download.livereload.com/2.0.9/LiveReload-2.0.9.safariextz)\r
+- Internet Explorer - Surely you jest.\r
+\r
+Note that if you're using the Chrome version with `file://` URLs (as is the\r
+default with `ngBoilerplate`) you need to tell Live Reload to allow it. Go to\r
+`Menu -> Tools -> Extensions` and check the "Allow access to file URLs" box next\r
+to the Live Reload plugin.\r
+\r
+When you load your page, click the Live Reload icon in your toolbar and\r
+everything should work magically. w00t!\r
+\r
+If you'd prefer to not install a browser extension, then you must add the\r
+following to the end of the `body` tag in `index.html`:\r
+\r
+```html\r
+<script src="http://localhost:35729/livereload.js"></script>\r
+```\r
+\r
+Boom!\r
+\r
+### Testing\r
+\r
+Tests can be run via grunt-watch command. It opens separate Chrome instance for running tests. This instance need to be open\r
+at all times (or at least during the time you want tests to be executed). Note on test execution speed - Chrome is at lower CPU \r
+priority when minimalized, or tab where are test executed is not active. This grealy decreases test execution speed, so in that \r
+case, just bring up the Chrome and/or activate tab with tests. Test are executed every time on Grunt jshint command.\r
+\r
+If you want to create/alter new task or command in Gruntfile and want to plug in test execution, you can add karma:unit to new \r
+Grunt task or karma:unit:run to Grunt command.\r
+\r
+If you are writing tests, they should be in same folder as tested file in form <TESTED_FILE>.spec.js\r
Code Review / dlux.git / blobdiff