This commit updates the UI to get systems info from the valence /v1/systems endpoint, and includes a few minor updates to the redfish controller including the addition of returning a system's health. Change-Id: I141220768033df4f8a7d3440b8c743e8a8c002f6 Partial-bug: #1642026
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
- Install Node and NPM using the OS-specific installer on https://nodejs.org/en/download/
- Update npm to the latest verions
sudo npm install npm -g - Follow the instructions in the docs directory for setting up the apache ui-proxy.
##Install
cdto theuidirectory and run:npm install- This will install all packages listed in
package.jsonfile. - If you are adding a new package dependency, make sure to save it to the
package.jsonfile. You can install the package and updatepackage.jsonin 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.
- This will install all packages listed in
##Run
-
Build
npm run build -
Start webpack-dev-server in watch mode on the
srcdir:npm run devserver- The
devservercommand is defined inpackage.json. It launches thewebpack-dev-serverprogram inhotmode and watches thesrcdirectory. If you make any changes to any file in thesrcdir,webpack-dev-servercompiles everything to a temp location and reloads the display page (index.html).
- The
-
Open browser and goto http://localhost:8080/ to view the UI
##Develop
- The
src\index.htmlis the root HTML page for the Web UI. It has adivelement calledappwhich is where the dynamic UI contents get inserted. The filesrc/js/main.jsdoes this insertion using:The root of the app content is provided by the React componentReactDOM.render(<Layout/>, document.getElementById('app'));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. - The file
webpack.config.jscontains loaders that transpile React components to plain JavaScript that any browser can understand. The commandwebpack(package.jsoncontainsdev-buildandbuildcommands which can be used instead vianpm run <command>) kicks off this transpilation process. - Modify appropriate files and use the devserver detailed above to test your changes.