Merge pull request acidonper#12 from acidonper/feature/grpc

acidonper · web-flow · commit 510e3d8e9139 · 2022-02-07T10:30:42.000+01:00
Feature/grpc
diff --git a/README.md b/README.md
@@ -1,9 +1,14 @@
-# Getting Started with Create React App
+# Jump App Frontend based on React
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+This repository includes a microservice based on React and TypeScript that is a component develop for Jump App application. The idea of this microservice is implement a Frontend which will be able to send HTTP and gRPC request to a respective backend.
+
+The idea of this connection to the backend is to send a JSON or Protobuf object in order to be able to make a set of "jumps" (connection between services) that have been implemented as microservices in different languages (Golang, Python, Java or Quarkus).
 
+Please review the following section for more information about this microservice.
 ## Available Scripts
 
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
 In the project directory, you can run:
 
 ### `npm start`
@@ -39,6 +44,20 @@ Instead, it will copy all the configuration files and the transitive dependencie
 
 You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
 
+## gRPC Support
+
+In order to be able to test some features integrated in Istio (based on Envoy), gRPC support has been implemented. With this new feature, it is possible to sent gRPC request in the same way as HTTP requests.
+
+It is important to bear in mind that a gRPC proxy (E.g. Envoy) is required to handle the gRPC requests and redirect them to the a specific backend. For this reason, the following command will be useful in local testing to make available this envoy service locally:
+
+```$bash
+envoy -c local/envoy.yaml
+```
+
+NOTE: It is required to install envoy previously. Visit [link](https://www.envoyproxy.io/docs/envoy/latest/start/install) for more information.
+
+Please visit [gRPC Web](https://github.com/grpc/grpc-web) for more information about this integration.
+
 ## Learn More
 
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
diff --git a/local/envoy.yaml b/local/envoy.yaml
@@ -0,0 +1,56 @@
+admin:
+  access_log_path: /tmp/admin_access.log
+  address:
+    socket_address: { address: 0.0.0.0, port_value: 10001 }
+
+static_resources:
+  listeners:
+  - name: listener_0
+    enable_reuse_port: false
+    address:
+      socket_address: { address: 0.0.0.0, port_value: 10000 }
+    filter_chains:
+    - filters:
+      - name: envoy.filters.network.http_connection_manager
+        typed_config:
+          "@type": type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager
+          codec_type: auto
+          stat_prefix: ingress_http
+          route_config:
+            name: local_route
+            virtual_hosts:
+            - name: local_service
+              domains: ["*"]
+              routes:
+              - match: { prefix: "/" }
+                route:
+                  cluster: back_golang_service
+                  timeout: 0s
+                  max_stream_duration:
+                    grpc_timeout_header_max: 0s
+              cors:
+                allow_origin_string_match:
+                - prefix: "*"
+                allow_methods: GET, PUT, DELETE, POST, OPTIONS
+                allow_headers: keep-alive,user-agent,cache-control,content-type,content-transfer-encoding,custom-header-1,x-accept-content-transfer-encoding,x-accept-response-streaming,x-user-agent,x-grpc-web,grpc-timeout
+                max_age: "1728000"
+                expose_headers: custom-header-1,grpc-status,grpc-message
+          http_filters:
+          - name: envoy.filters.http.grpc_web
+          - name: envoy.filters.http.cors
+          - name: envoy.filters.http.router
+  clusters:
+  - name: back_golang_service
+    connect_timeout: 0.25s
+    type: logical_dns
+    http2_protocol_options: {}
+    lb_policy: round_robin
+    load_assignment:
+      cluster_name: cluster_0
+      endpoints:
+        - lb_endpoints:
+            - endpoint:
+                address:
+                  socket_address:
+                    address: golang.acidonpe.com
+                    port_value: 50051
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,8 @@
     "@types/react-dom": "^16.9.9",
     "axios": "^0.21.0",
     "classnames": "^2.2.6",
+    "google-protobuf": "^3.19.1",
+    "grpc-web": "^1.3.0",
     "install": "^0.13.0",
     "npm": "^6.14.10",
     "react": "^17.0.1",
diff --git a/src/infrastructure/postJump.tsx b/src/infrastructure/postJump.tsx
@@ -23,6 +23,6 @@ export const sentJump = async (
     return response.data;
   } catch (error) {
     console.log(error);
-    return error;
+    return {code: 500, message: "/jump - Farewell from Backend -" + url};
   }
 };
diff --git a/src/infrastructure/postJumpGrpc.tsx b/src/infrastructure/postJumpGrpc.tsx
@@ -0,0 +1,38 @@
+import * as grpcWeb from 'grpc-web';
+import {JumpServiceClient} from '../utils/grpc/JumpServiceClientPb';
+import {JumpReq, Response} from '../utils/grpc/jump_pb';
+import { ResponseBack } from '../domain/ResponseBack';
+
+export const sentJumpGrpc = async (
+    url: string,
+    dataJump: string[]
+  ): Promise <ResponseBack> => {
+    return new Promise<ResponseBack>(function(resolve) {
+      const jumpService = new JumpServiceClient(url, null, null);
+      var finalResponse: Response.AsObject = {code: 500, message: "/jump - Farewell from Backend - " + url};
+
+      const request = new JumpReq();
+      request.setMessage('Hello from React!');
+      request.setCount(0)
+      request.setJumpsList(dataJump)
+
+      const call = jumpService.jump(request, {'Content-Type': 'application/grpc'},
+      (err: grpcWeb.RpcError, response: Response) => {
+          try {
+            console.log(response.getMessage());
+            finalResponse.code = response.getCode();
+            finalResponse.message = response.getMessage();
+            resolve(finalResponse);
+          } catch {
+            console.log("empty Response - ", err)
+            resolve(finalResponse);
+          }
+      });
+      call.on('status', (status: grpcWeb.Status) => {
+          if (status.metadata) {
+              console.log('Received metadata');
+              console.log(status);
+            }
+      });
+    });
+}
diff --git a/src/ui/home/Home.module.css b/src/ui/home/Home.module.css
@@ -70,7 +70,17 @@
 .jumps-box h1 {
   color: var(--on-secondary-color);
   padding-bottom: var(--m);
-  font-size: var(--body-size-xl);
+  font-size: var(--body-size-xxl);
+  align-self: center;
+}
+
+.jumps-box-grpc-section {
+  padding-bottom: var(--l);
+  display: flex;
+  align-items: center;
+  min-width: 25vh;
+  flex-direction: column;
+  font-size: var(--body-size-m);
 }
 
 .jumps-box-item {
diff --git a/src/ui/home/Home.tsx b/src/ui/home/Home.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { bind } from '../../utils/bind';
 import styles from './Home.module.css';
 import { sentJump } from '../../infrastructure/postJump';
+import { sentJumpGrpc } from '../../infrastructure/postJumpGrpc';
 import { ResponseBack } from '../../domain/ResponseBack';
 import { AppService } from '../../domain/AppService';
 import { JumpLog } from '../../domain/JumpLog';
@@ -52,6 +53,7 @@ export const Home: React.FunctionComponent<Props> = () => {
   };
 
   const [data, setData] = useState(jumps);
+  const [grpc, setGrpc] = useState(false);
   const [calls, setCalls] = useState(1);
   const [callsInterval, setCallsInterval] = useState(1);
   const [callLogs, setCallLogs] = useState({ ...jumpLogTest });
@@ -67,11 +69,13 @@ export const Home: React.FunctionComponent<Props> = () => {
   const sendJumps = async () => {
     setCallLogs({ ...jumpLogTest });
 
+    const jumpsRequest = data.map((i) => i.jump)
+
     const finalJump: Jump = {
       message: 'hello',
       jump_path: '/jump',
       last_path: '/jump',
-      jumps: data.map((i) => i.jump)
+      jumps: jumpsRequest,
     };
 
     const timeout = async (ms: number) => {
@@ -83,7 +87,14 @@ export const Home: React.FunctionComponent<Props> = () => {
     for (let index = 0; index < calls; index++) {
       await timeout(callsInterval);
       setCallLogs({ ...jumpLogTest });
-      const jump: ResponseBack = await sentJump(appBack, finalJump);
+
+      var jump: ResponseBack = {} as any;
+      
+      if (!grpc) {
+        jump = await sentJump(appBack, finalJump);
+      } else {
+        jump = await sentJumpGrpc(appBack, jumpsRequest)
+      }
       const timeLog = new Date();
       const time = timeLog.getTime();
       const date = new Date(time);
@@ -185,7 +196,20 @@ export const Home: React.FunctionComponent<Props> = () => {
           </div>
         </div>
         <div role='jumpbox' className={cx('jumps-box')}>
-          <h1>Jumps</h1>
+          <h1>Jumps</h1> 
+          <div className={cx('jumps-box-grpc-section')}>          
+            <p>
+              <input 
+                  type="checkbox" 
+                  id="grpc" 
+                  name="grpc"
+                  defaultChecked={grpc} 
+                  onChange={(event) => 
+                    setGrpc(event.target.checked)
+                  }/>  
+            gRPC Enabled
+            </p>
+          </div>
           <DragDropContext onDragEnd={handleOnDragEnd}>
             <Droppable droppableId='jumps'>
               {(provided) => (
diff --git a/src/utils/grpc/JumpServiceClientPb.ts b/src/utils/grpc/JumpServiceClientPb.ts
@@ -0,0 +1,79 @@
+/**
+ * @fileoverview gRPC-Web generated client stub for jump
+ * @enhanceable
+ * @public
+ */
+
+// GENERATED CODE -- DO NOT EDIT!
+
+
+/* eslint-disable */
+// @ts-nocheck
+import * as grpcWeb from 'grpc-web';
+
+import * as jump_jump_pb from './jump_pb';
+
+export class JumpServiceClient {
+  client_: grpcWeb.AbstractClientBase;
+  hostname_: string;
+  credentials_: null | { [index: string]: string; };
+  options_: null | { [index: string]: any; };
+
+  constructor (hostname: string,
+               credentials?: null | { [index: string]: string; },
+               options?: null | { [index: string]: any; }) {
+    if (!options) options = {};
+    if (!credentials) credentials = {};
+    options['format'] = 'binary';
+
+    this.client_ = new grpcWeb.GrpcWebClientBase(options);
+    this.hostname_ = hostname;
+    this.credentials_ = credentials;
+    this.options_ = options;
+  }
+
+  methodInfoJump = new grpcWeb.MethodDescriptor(
+    '/jump.JumpService/Jump',
+    grpcWeb.MethodType.UNARY,
+    jump_jump_pb.JumpReq,
+    jump_jump_pb.Response,
+    (request: jump_jump_pb.JumpReq) => {
+      return request.serializeBinary();
+    },
+    jump_jump_pb.Response.deserializeBinary
+  );
+
+  jump(
+    request: jump_jump_pb.JumpReq,
+    metadata: grpcWeb.Metadata | null): Promise<jump_jump_pb.Response>;
+
+  jump(
+    request: jump_jump_pb.JumpReq,
+    metadata: grpcWeb.Metadata | null,
+    callback: (err: grpcWeb.RpcError,
+               response: jump_jump_pb.Response) => void): grpcWeb.ClientReadableStream<jump_jump_pb.Response>;
+
+  jump(
+    request: jump_jump_pb.JumpReq,
+    metadata: grpcWeb.Metadata | null,
+    callback?: (err: grpcWeb.RpcError,
+               response: jump_jump_pb.Response) => void) {
+    if (callback !== undefined) {
+      return this.client_.rpcCall(
+        this.hostname_ +
+          '/jump.JumpService/Jump',
+        request,
+        metadata || {},
+        this.methodInfoJump,
+        callback);
+    }
+    return this.client_.unaryCall(
+    this.hostname_ +
+      '/jump.JumpService/Jump',
+    request,
+    metadata || {},
+    this.methodInfoJump);
+  }
+
+}
+
diff --git a/src/utils/grpc/jump_pb.d.ts b/src/utils/grpc/jump_pb.d.ts
@@ -0,0 +1,54 @@
+import * as jspb from 'google-protobuf'
+
+
+
+export class JumpReq extends jspb.Message {
+  getCount(): number;
+  setCount(value: number): JumpReq;
+
+  getMessage(): string;
+  setMessage(value: string): JumpReq;
+
+  getJumpsList(): Array<string>;
+  setJumpsList(value: Array<string>): JumpReq;
+  clearJumpsList(): JumpReq;
+  addJumps(value: string, index?: number): JumpReq;
+
+  serializeBinary(): Uint8Array;
+  toObject(includeInstance?: boolean): JumpReq.AsObject;
+  static toObject(includeInstance: boolean, msg: JumpReq): JumpReq.AsObject;
+  static serializeBinaryToWriter(message: JumpReq, writer: jspb.BinaryWriter): void;
+  static deserializeBinary(bytes: Uint8Array): JumpReq;
+  static deserializeBinaryFromReader(message: JumpReq, reader: jspb.BinaryReader): JumpReq;
+}
+
+export namespace JumpReq {
+  export type AsObject = {
+    count: number,
+    message: string,
+    jumpsList: Array<string>,
+  }
+}
+
+export class Response extends jspb.Message {
+  getCode(): number;
+  setCode(value: number): Response;
+
+  getMessage(): string;
+  setMessage(value: string): Response;
+
+  serializeBinary(): Uint8Array;
+  toObject(includeInstance?: boolean): Response.AsObject;
+  static toObject(includeInstance: boolean, msg: Response): Response.AsObject;
+  static serializeBinaryToWriter(message: Response, writer: jspb.BinaryWriter): void;
+  static deserializeBinary(bytes: Uint8Array): Response;
+  static deserializeBinaryFromReader(message: Response, reader: jspb.BinaryReader): Response;
+}
+
+export namespace Response {
+  export type AsObject = {
+    code: number,
+    message: string,
+  }
+}
+
diff --git a/src/utils/grpc/jump_pb.js b/src/utils/grpc/jump_pb.js

Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,6 @@ export const sentJump = async (`
`23`	`23`	`return response.data;`
`24`	`24`	`} catch (error) {`
`25`	`25`	`console.log(error);`
`26`		`- return error;`
	`26`	`+ return {code: 500, message: "/jump - Farewell from Backend -" + url};`
`27`	`27`	`}`
`28`	`28`	`};`