(+semver: feature) Add processor watcher (#8)

Signed-off-by: Joshua Benjamin <[email protected]>

package.json

@@ -15,6 +15,7 @@
 		"apollo-boost": "^0.4.7",
 		"apollo-cache-inmemory": "^1.6.5",
 		"apollo-link-http": "^1.5.17",
+		"apollo-link-ws": "^1.0.20",
 		"awesome-typescript-loader": "^5.2.1",
 		"cytoscape": "^3.14.0",
 		"cytoscape-cose-bilkent": "^4.1.0",
@@ -32,6 +33,7 @@
 		"react-scripts": "^3.4.1",
 		"source-map-loader": "^0.2.4",
 		"styled-components": "^5.0.1",
+		"subscriptions-transport-ws": "^0.9.16",
 		"ts-loader": "^7.0.2",
 		"ts-node": "^8.10.1",
 		"typescript": "^3.8.3",

server/index.ts

@@ -10,5 +10,6 @@ if (graphQL == undefined || graphQL == '') {
 	throw 'KAFMESH_URL is not set';
 }
 
+console.log('kafmesh url: ' + graphQL);
 const server = new Server(app, graphQL);
 server.start(Number(port));

server/server.ts

@@ -1,35 +1,48 @@
 import { Express, Request, Response } from 'express';
 import express from 'express';
 import * as path from 'path';
-import proxy from 'express-http-proxy';
+import proxy from 'http-proxy';
 import http from 'http';
 import * as terminus from '@godaddy/terminus';
 
 export class Server {
 	private app: Express;
+	private proxy: proxy;
+	private graphQLServer: string;
 
 	constructor(app: Express, graphQLServer: string) {
 		this.app = app;
+		this.graphQLServer = graphQLServer;
+
+		this.proxy = proxy.createProxy({
+			ws: true,
+			toProxy: true,
+			changeOrigin: true,
+			autoRewrite: true,
+			headers: {
+				host: graphQLServer
+			}
+		});
+
+		this.proxy.on('error', function(err, req, res) {
+			res.end('Something went wrong. And we are reporting a custom error message.');
+		});
 
 		this.app.use(express.static(path.resolve('./') + '/app'));
 
-		this.app.use(
-			'/query',
-			proxy(graphQLServer, {
-				proxyReqPathResolver: function(req) {
-					return '/query';
-				}
-			})
-		);
-
-		this.app.use(
-			'/playground',
-			proxy(graphQLServer, {
-				proxyReqPathResolver: function(req) {
-					return '/';
-				}
-			})
-		);
+		this.app.use('/query', (req, resp) => {
+			this.proxy.web(req, resp, {
+				ignorePath: true,
+				target: 'http://' + graphQLServer + '/query'
+			});
+		});
+
+		this.app.use('/playground', (req, resp) => {
+			this.proxy.web(req, resp, {
+				ignorePath: true,
+				target: 'http://' + graphQLServer + '/'
+			});
+		});
 
 		this.app.all('*', (req: Request, res: Response): void => {
 			res.sendFile(path.resolve('./') + '/app/index.html');
@@ -52,6 +65,14 @@ export class Server {
 			healthChecks: { '/healthcheck': this.onHealthCheck },
 			onSignal: this.onSignal
 		});
+
+		var app = this;
+		server.on('upgrade', function(req, socket, head) {
+			app.proxy.ws(req, socket, head, {
+				target: 'ws://' + app.graphQLServer
+			});
+		});
+
 		console.log('started server');
 		server.listen(port, () => console.log(`Server listening on port ${port}!`));
 	}

src/App.tsx

@@ -6,6 +6,7 @@ import Header from './Header';
 import ServicesView from './Body/ServicesView/ServicesView';
 import ServiceView from './Body/ServiceView/ServiceView';
 import ComponentView from './Body/ComponentView/ComponentView';
+import ProcessorView, { Props } from './Body/ProcessorView/ProcessorView';
 import Footer from './Footer';
 
 const AppContainer = styled.div`
@@ -35,7 +36,9 @@ const App = () => (
 						<Services />
 					</Route>
 					<Route path="/services/:id" children={<Service />} />
+					<Route path="/processors/:id/:key" children={<ProcessorWithKey />} />
 					<Route path="/components/:id" children={<Component />} />
+					<Route path="/processors/:id" children={<Processor />} />
 				</Switch>
 				<Footer />
 			</AppItems>
@@ -59,4 +62,19 @@ function Component() {
 	return <ComponentView component={id} />;
 }
 
+function Processor() {
+	let { id } = useParams();
+	return <ProcessorView processor={id} />;
+}
+
+function ProcessorWithKey() {
+	const { id, key } = useParams();
+	const options: Props = {
+		processor: Number(id),
+		topicKey: String(key)
+	};
+
+	return <ProcessorView {...options} />;
+}
+
 export default App;

src/Body/ComponentView/ComponentView.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import styled from 'styled-components';
 import { useHistory } from 'react-router-dom';
-import * as Componentraph from '../../Graphs/Component/Component';
+import * as Graph from '../../Graphs/Component/Component';
 
 const BodyContainer = styled.div`
 	width: 100%;
@@ -16,13 +16,20 @@ export type Props = {
 // Flex # corresponds to vertical section divider location
 const Component: FunctionComponent<Props> = ({ component }) => {
 	const history = useHistory();
-	const props: Componentraph.Props = {
-		component: component
+	const props: Graph.Props = {
+		component: component,
+		onItemSelected(event: Graph.itemSelectedEvent): void {
+			switch (event.item.type) {
+				case 'processorItem':
+					history.push('/processors/' + event.item.id);
+					break;
+			}
+		}
 	};
 
 	return (
 		<BodyContainer>
-			<Componentraph.Component {...props} />
+			<Graph.Component {...props} />
 		</BodyContainer>
 	);
 };

src/Body/ProcessorView/OperationCard.tsx

@@ -0,0 +1,69 @@
+import React, { FunctionComponent } from 'react';
+import { operation, action } from './models';
+
+type Props = {
+	operation: operation;
+};
+
+const actionRender = (action: action) => {
+	switch (action.type) {
+		case 'Join':
+			return (
+				<div>
+					{action.type} {action.topic}: {action.value}
+				</div>
+			);
+		case 'Lookup':
+			return (
+				<div>
+					{action.type} {action.topic}({action.key}): {action.value}
+				</div>
+			);
+		case 'SetState':
+			return (
+				<div>
+					{action.type} {action.topic}: {action.value}
+				</div>
+			);
+		case 'GetState':
+			return (
+				<div>
+					{action.type} {action.topic}: {action.value}
+				</div>
+			);
+		case 'Output':
+			return (
+				<div>
+					{action.type} {action.topic}({action.key}): {action.value}
+				</div>
+			);
+	}
+};
+
+export const Component: FunctionComponent<Props> = ({ operation }) => {
+	return (
+		<div style={operationStyle}>
+			input: "{operation.input.topic}": {operation.input.value}
+			<ol>
+				{operation.actions.map((action, index) => {
+					return (
+						<li key={index} style={{ margin: '4px' }}>
+							{actionRender(action)}
+						</li>
+					);
+				})}
+			</ol>
+		</div>
+	);
+};
+
+export default Component;
+
+const operationStyle: React.CSSProperties = {
+	borderWidth: '2px',
+	borderStyle: 'solid',
+	borderColor: 'black',
+	padding: '10px',
+	margin: '5px',
+	backgroundColor: 'white'
+};

src/Body/ProcessorView/OperationsList.tsx

@@ -0,0 +1,36 @@
+import React, { FunctionComponent } from 'react';
+import OperationCard from './OperationCard';
+import { ApolloError } from 'apollo-client';
+import { operation } from './models';
+
+export type Props = {
+	loading: boolean;
+	error?: ApolloError;
+	operations: Array<operation>;
+};
+
+export const Component: FunctionComponent<Props> = ({ loading, operations, error }) => {
+	if (loading) {
+		return <div style={{ width: '100%', height: '100%' }}>Loading</div>;
+	}
+	if (error) {
+		return (
+			<div style={{ width: '100%', height: '100%' }}>
+				{error.name} : {error.message}
+			</div>
+		);
+	}
+	return (
+		<ol>
+			{operations.map((op, index) => {
+				return (
+					<li key={index}>
+						<OperationCard operation={op} />
+					</li>
+				);
+			})}
+		</ol>
+	);
+};
+
+export default Component;