14 |
22 | );
23 | }
24 | });
25 |
--------------------------------------------------------------------------------
/web-client/src/main/resources/js/app.js:
--------------------------------------------------------------------------------
1 | var Router = ReactRouter,
2 | RouteHandler = Router.RouteHandler,
3 | keycloak;
4 |
5 | Booker = {};
6 | Booker.State = {};
7 | Booker.Actions = {};
8 |
9 | Booker.App = React.createClass({
10 |
11 | render: function() {
12 | return (
13 | Your Account
15 |
16 |
21 | -
17 |
- Name: {this.state.user.name} 18 |
- Username: {this.state.user.preferred_username} 19 |
14 |
20 | );
21 | }
22 | });
23 |
24 | Booker.CheckAuth = React.createClass({
25 | render: function() {
26 | if ( ! keycloak.authenticated ) {
27 | keycloak.login();
28 | }
29 | return (
30 |
16 |
18 |
39 | 
44 |
45 |
49 | );
50 | }
51 | });
52 |
53 | Booker.About = React.createClass({
54 | render: function() {
55 | return (
56 | Welcome to Booker
40 |41 | Booker is an electronic bookstore powered by WildFly Swarm. 42 |
43 |
44 |
45 | 46 | For more information see the About page 47 |
48 |
57 |
134 |
135 | );
136 | }
137 | });
138 |
139 | Booker.Footer = React.createClass({
140 | render: function() {
141 | return (
142 | About Booker!
58 | 59 |60 | Booker! is an electronic bookstore that demonstrates 61 | how many WildFly Swarm-based microservices can play together. 62 |
63 | 64 |65 | The services are wired together using WildFly node discovery and 66 | invoked using NetflixOSS Ribbon. 67 |
68 | 69 |70 | You can view the topology to understand 71 | which services are up (and where) at any point in time. 72 |
73 | 74 |
75 | 
76 |
79 |
90 |
91 |
80 |
89 | Keycloak
81 |82 | Keycloak is an independent authentication and authorization server that 83 | runs apart from any app or microservice. It provides integrations to social-login 84 | and other enterprise backing-stores, such as LDAP and Kerberos. Some of the Booker! 85 | services require authenticated users to operate, some just behave differently if the 86 | user is authenticated or anonymous. 87 |
88 |
92 |
131 |
132 |
133 |
93 |
94 |
112 |
113 | Web Client
95 |96 | The web client is implemented as a single-page app, with most 97 | of the logic occurring within the browser. The client is packaged as 98 | a .war file, and then wrapped with WildFly Swarm. The only 99 | server-side component is the Server-Sent Events async servlet which 100 | provides the topology of the microservices to the single-page app running in the browser. 101 |
102 | 103 |Library
104 |105 | The library service is used to track which titles have been purchased 106 | by a user. This service uses JPA and an SQL datasource to track combinations 107 | of user-id and book-id. Since simple identifiers are not very useful, 108 | it subsequently invokes the store service to fill in details about your 109 | library, including the title and author of any book in your library. 110 |
111 |
114 |
129 |
130 | Store
115 |116 | The store service provides the ability to search and query the 117 | inventory of books, which is kept in-memory (using data from Project Gutenberg). 118 |
119 | 120 |Pricing
121 |122 | The pricing service is used by the store to provide the price of each 123 | book. It uses very simple logic but mostly demonstrates how authentication 124 | information can be propagated from the browser, across another service, and 125 | on to an even further-away service. If authentication information is provided, 126 | the pricing service prices a book at $9, otherwise, it prices it at $10. 127 |
128 |
143 |
147 | )
148 | }
149 | })
150 |
151 |
152 | Booker.NotFound = React.createClass({
153 | render: function() {
154 | console.log( "render NotFound" );
155 | return (
156 |
144 | Powered by 
WildFly Swarm | View topology
145 |
146 | WildFly Swarm | View topology
145 | Not Found
157 | );
158 | }
159 | });
160 |
--------------------------------------------------------------------------------
/web-client/src/main/resources/js/header.js:
--------------------------------------------------------------------------------
1 | Booker.Actions.UserLoggedIn = Reflux.createAction();
2 |
3 | Booker.State.UserInfo = Reflux.createStore({
4 | init: function() {
5 | this.listenTo( Booker.Actions.UserLoggedIn, this.output );
6 | },
7 |
8 | output: function(info) {
9 | this.trigger(info);
10 | }
11 |
12 | });
13 |
14 | Booker.Header = React.createClass({
15 | render: function() {
16 | return (
17 |
18 |
28 | );
29 | }
30 | });
31 |
32 | Booker.MenuHeader = React.createClass({
33 | render: function() {
34 | return (
35 |
19 | Booker!
20 |
21 |
22 |
24 |
25 |
27 | -
36 |
- About 37 |
- Account 38 |
- Your Library 39 |
- The Store 40 |
-
75 |
- Logout 77 |
41 |
52 | )
53 | }
54 | });
55 |
56 | Booker.Library.Item = React.createClass({
57 | render: function() {
58 | return (
59 | Your Library
42 |-
43 | {
44 | this.state.items.map( function(e) {
45 | return (
46 |
10 |
12 | )
13 | }
14 | })
--------------------------------------------------------------------------------
/web-client/src/main/resources/js/routes.js:
--------------------------------------------------------------------------------
1 | var Router = ReactRouter;
2 | var RouteHandler = Router.RouteHandler;
3 | var DefaultRoute = Router.DefaultRoute;
4 | var Link = Router.Link;
5 | var Route = Router.Route;
6 | var NotFoundRoute = Router.Route;
7 |
8 | (function() {
9 | var routes = (
10 | {this.props.pagination.page}
11 |
62 |
68 | );
69 | }
70 | });
71 |
72 | Booker.SearchResults = React.createClass({
73 | mixins: [Reflux.connect(Booker.State.StoreSearchResults,"results")],
74 |
75 | getInitialState: function() {
76 | return {
77 | results: { page: 0, numberOfPages: 0, results: [] },
78 | };
79 | },
80 |
81 | render: function() {
82 | return (
83 | Search
63 | 66 |
84 |
94 |
98 | );
99 | }
100 | });
101 |
102 | Booker.StoreItem = React.createClass({
103 | mixins: [Router.State],
104 |
105 | componentWillMount: function() {
106 | var self = this;
107 |
108 | topo.getJSON( "store", "/book", { id: this.getParams().id } )
109 | .then( function(data) {
110 | self.setState( data )
111 | });
112 | },
113 |
114 | render: function() {
115 | if ( ! this.state ) {
116 | return ( );
117 | }
118 | return (
119 | -
85 | {
86 | this.state.results.results.map( function(e) {
87 | return (
88 |
- {e.title} 89 | ); 90 | }) 91 | } 92 |
95 | Search results from: {this.state.results.requestUri}
96 |
97 |
120 |
124 |
125 | );
126 | }
127 | });
128 |
129 | Booker.StoreItem.Purchase = React.createClass({
130 | mixins: [Reflux.connect(Booker.State.Library,"items")],
131 |
132 | componentWillMount: function() {
133 | Booker.Actions.Library.load();
134 | },
135 |
136 | getInitialState: function() {
137 | return {
138 | items: []
139 | };
140 | },
141 |
142 | purchase: function(event) {
143 | event.preventDefault();
144 | topo.postJSON( "library", "/items", { bookId: this.props.bookId } )
145 | .then( function(data) {
146 | Booker.Actions.Library.load();
147 | }, function(err) {
148 | console.log( "failed to purchase", err );
149 | });
150 | },
151 |
152 | hasPurchased: function() {
153 | var self = this;
154 | return this.state.items.some( function(e) {
155 | return ( e.bookId == self.props.bookId );
156 | });
157 | },
158 |
159 | render: function() {
160 | if ( keycloak && !keycloak.token ) {
161 | return (
162 | {this.state.title}
121 | {this.state.author}
122 | Price ${this.state.price}
123 | Login to Purchase
163 | );
164 | } else if ( this.hasPurchased() ) {
165 | return (
166 | Purchased
167 | );
168 | } else {
169 | return (
170 | Purchase Now
171 | );
172 | }
173 | }
174 |
175 | });
176 |
--------------------------------------------------------------------------------
/web-client/src/main/resources/js/topology.js:
--------------------------------------------------------------------------------
1 | Booker.Actions.Topology = Reflux.createAction();
2 |
3 | Booker.State.Topology = Reflux.createStore({
4 | init: function() {
5 | this.topology = {};
6 | this.listenTo( Booker.Actions.Topology, this.output );
7 | topo.onTopologyChange(Booker.Actions.Topology);
8 | },
9 |
10 | output: function(topology) {
11 | console.log( "update topology", topology );
12 | this.topology = topology;
13 | this.trigger(this.topology);
14 | },
15 |
16 | services: function() {
17 | return Object.getOwnPropertyNames( this.topology ).sort( function(l,r) {
18 | return l.localeCompare(r);
19 | });
20 | },
21 |
22 | servers: function(serviceName) {
23 | return this.topology[serviceName] || [];
24 | }
25 |
26 | });
27 |
28 | Booker.Topology = React.createClass({
29 | mixins: [Reflux.connect(Booker.State.Topology,"topology")],
30 |
31 | render: function() {
32 | var services = Booker.State.Topology.services();
33 | return (
34 |
35 |
51 | )
52 | })
53 | }
54 |
55 | );
56 | }
57 | });
58 |
59 | Booker.TopologyService = React.createClass({
60 | render: function() {
61 | return (
62 | Topology
36 |
37 |
47 | {
48 | services.map( function(e) {
49 | return (
50 | The topology is the layout of the services, 38 | and how they connect together. WildFly node discovery 39 | is used to link up the NetflixOSS Ribbon components. 40 |
41 |42 | This topology is then made available to the web-app, 43 | and kept up-to-date using Server-Sent Events (SSE) 44 | to the browser. 45 |
46 |
63 |
74 |
75 | )
76 | }
77 | });
78 |
--------------------------------------------------------------------------------
/web-client/src/main/resources/keycloak.jsp:
--------------------------------------------------------------------------------
1 | <%@ page contentType="application/json"
2 | import="org.wildfly.swarm.booker.common.*" %>
3 | <%
4 | String keycloakUrl = Discoverer.externalKeycloakUrl(request.getServerPort());
5 | %>
6 | {
7 | "realm": "booker",
8 | "realm-public-key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAm/yXPhm3xlNsYOLQGM4YxqjAe5mjBxKcxJCYyQGzz36DQFO59IclAxaFEsgN3OorVL2W9wLLGUveoV47s8rOdq4+obHiO2C/bgDSVcvg+X8RRAngZDR04iPPdD+cjMdxAYb/WsGjlOKju+U8Pk2o/TnRHNmZgbwE9JDnhGrmFycCgu7oQGk6KDVpsp3zVIsr2qrah0ujBwUbPti8NN4OZBupMzgR3oOjzJ9dhkh9qaQN6SErnRj3lENAh7rbizKEWnIxImgi6m6ogLNWMxNKJlrRbER2LCSegDXhhO3zuBhHb0xZ1P+dO+4LL478SCQStutrGSoO0Yc0GiEVFBIncQIDAQAB",
9 | "auth-server-url": "<%= keycloakUrl %>/auth",
10 | "ssl-required": "external",
11 | "resource": "web-client",
12 | "credentials": {
13 | "secret": "deec63e4-d242-4180-b402-80fba0a9187e"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
{this.props.name}
64 |-
65 | {
66 | this.props.servers.map(function(e){
67 | return (
68 |
- {e.endpoint} ({e.tags.join(', ')}) 69 | ) 70 | }) 71 | } 72 |