Rack Scale Design (RSD) Web UI
==============================
The `ui` folder contains HTML, JavaScript and CSS code for a Web UI that can be used to explore Rack Scale Design (RSD) artifacts and compose/disassemble nodes.
##Pre-reqs
1. Install Node and NPM using the OS-specific installer on
2. Update npm to the latest verions
```
sudo npm install npm -g
```
3. Follow the instructions in the docs directory for setting up the apache ui-proxy.
##Install
1. `cd` to the `ui` directory and run:
```
npm install
```
* This will install all packages listed in `package.json` file.
* If you are adding a new package dependency, make sure to save it to the `package.json` file. You can install the package and update `package.json` in a single command: `npm install --save new-package@6.2.5`
* This installs the webpack dev server which can be used for serving the Web UI during development.
##Run
1. Build
```
npm run build
```
2. Start webpack-dev-server in watch mode on the `src` dir:
```
npm run devserver
```
* The `devserver` command is defined in `package.json`. It launches the `webpack-dev-server` program in `hot` mode and watches the `src` directory. If you make any changes to any file in the `src` dir, `webpack-dev-server` compiles everything to a temp location and reloads the display page (`index.html`).
3. Open browser and goto to view the UI
##Develop
1. The `src\index.html` is the root HTML page for the Web UI. It has a `div` element called `app` which is where the dynamic UI contents get inserted. The file `src/js/main.js` does this insertion using:
```
ReactDOM.render(, document.getElementById('app'));
```
The root of the app content is provided by the React component `src/js/components/Layout.js`. It wraps others components Pods.js, Racks.js, etc which encapsulate the state and rendering details of Pods, Rack, etc respectively.
2. The file `webpack.config.js` contains loaders that transpile React components to plain JavaScript that any browser can understand. The command `webpack` (`package.json` contains `dev-build` and `build` commands which can be used instead via `npm run `) kicks off this transpilation process.
3. Modify appropriate files and use the devserver detailed above to test your changes.