Blended Management UI

This project contains the Scala.js project implementing a management console that can be used as a client to a blended container hosting the blended management REST Api.

The management console is a React application implemented in Scala.js using react4s and the Material UI react components.

Subprojects

The overall project contains several subprojects:

• common contains reusable objects which may be of use in any Scala.js/react4s application such as a simple logger and internationalization support.

• components contains reusable higher level React components, such as a ReactTable.

• materialGen contains a simple generator which reads the index.js files of Material-UI React and generates simple Scala.js wrappers to use those components in Scala.js / react4s.

• material uses the generated components and is the place to enrich the Material-API manually to make it more Scala-ish. For now the manual code is around customizing the styles used in Material-Ui-React-Components.

• router is essentially taken from https://github.com/werk/router4s with some more options for variable paths and some test cases. Once the management console reaches it’s final stages the changes will be contributed back to the original project.

• mgmtApp contains the actual management console.

• sampleApp contains a sample application that can be used as a playground to test out React Components without breaking the management console. Over time this subproject will become obsolete.

• mgmtAppSeleniumest contains the setup for testing the management console with Selenium. For now it just has a very simple test and the setup. The test performs tests on the management console built wih app/fastOptJS/webpack and requires the SeleniumDriver for Chrome to be set up correctly. Test can be executed from the command line with ./millw blended.mgmt.ui.mgmtAppSelenium.test

Building

Management console

The fastest way to build the management console ist to run ./millw blended.mgmt.ui.mgmtApp.packageHtml. This will build everything into the directory ./out/blended/mgmt/ui/mgmtApp/packageHtml/dest/dis.

The console can be displayed in a browser by opening index.html from that directory within a browser.

Alternatively, a webpack dev server can be started with ./millw blended.mgmt.ui.mgmtApp.devServer. This will run a node server on port 9000 hosting the management console.

The management console requires a running management container hosting the REST- and WebSocket API to connect to.

Server bundle

All web ui projects implicitly define a bundle that can be hosted by a blended container with Akka HTTP support. For example, the web bundle for the mgmtApp can be publish to the local ivy directory with ./millw blended.mgmt.ui.mgmtApp.webBundle.publishLocal. This will run webpack on the web application, generate an index.html, generate an activator compatible with blended’s Akka HTTP suport and finally publish everything as an OSGi bundle.

Tests

Run ./millw __.test to execute all Unit- and Selenium-Tests.

Publishing locally

Run ./millw __.publishLocal to publish all relevant artifacts in the local Ivy repository. This is required to use the server bundle in a management container packaging.