Added UI for demo

SigNoz · Mar 9, 2022 · 1338a75 · 1338a75
1 parent f95d576
commit 1338a75
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 3 deletions.
diff --git a/...ervice/src/main/java/com/signoz/orderservice/orderservice/controller/OrderController.java b/...ervice/src/main/java/com/signoz/orderservice/orderservice/controller/OrderController.java
@@ -11,6 +11,7 @@
 
 @RestController
 @RequestMapping("/orders")
+@CrossOrigin(origins = "*")
 public class OrderController {
 
     @Autowired

diff --git a/order-service/src/main/java/com/signoz/orderservice/orderservice/entity/Order.java b/order-service/src/main/java/com/signoz/orderservice/orderservice/entity/Order.java
@@ -15,7 +15,7 @@
 @AllArgsConstructor
 @NoArgsConstructor
 @Entity
-@Table(name = "orders")
+@Table(name = "orders_tbl")
 @EntityListeners(AuditingEntityListener.class)
 public class Order {
 

diff --git a/order-service/src/main/java/com/signoz/orderservice/orderservice/entity/User.java b/order-service/src/main/java/com/signoz/orderservice/orderservice/entity/User.java
@@ -15,7 +15,7 @@
 @AllArgsConstructor
 @NoArgsConstructor
 @Entity
-@Table(name = "users")
+@Table(name = "users_tbl")
 @EntityListeners(AuditingEntityListener.class)
 public class User {
 

diff --git a/payment-service/src/main/java/com/signoz/paymentservice/controller/PaymentController.java b/payment-service/src/main/java/com/signoz/paymentservice/controller/PaymentController.java
@@ -21,9 +21,11 @@
 import java.util.HashMap;
 import java.util.Map;
 import java.util.Optional;
+import org.springframework.web.bind.annotation.*;
 
 @RestController
 @RequestMapping("/payment")
+@CrossOrigin(origins = "*")
 public class PaymentController {
     private final Logger LOGGER = LoggerFactory.getLogger(PaymentController.class);
     private static final Tracer tracer =

diff --git a/ui/index.html b/ui/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OTEL Demo</title>
+</head>
+<body>
+
+  <div id="app"></div>
+   <!-- Load React. -->
+  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
+
+  <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
+  <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
+  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
+  <!-- <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> -->
+  <!-- Load our React component. -->
+  <script type="text/babel" src="src/main.js"></script>
+
+</body>
+</html>
diff --git a/ui/src/main.js b/ui/src/main.js
@@ -0,0 +1,130 @@
+// Application urls
+const DEFAULT_SIGNOZ_URL = 'http://localhost:3301/application'
+const USER_SERVICE_URL = 'http://localhost:8081/users'
+const PAYMENT_SERVICE_URL = 'http://localhost:8082/payment'
+const ORDER_SERVICE_URL = 'http://localhost:8083/orders'
+// Components
+const Title = (props) => <p>{props.label}</p>
+const Response = (props) => <pre>{JSON.stringify(props.result, null, 4)}</pre>
+const ProductDD = (props) => {
+  return (
+    <select onChange={props.handleProductChange}>
+      <option selected>Choose product</option>
+      <option value={'999'}>MacBook Air</option>
+      <option value={'1100'}>MacBook Pro</option>
+      <option value={'599'}>Mac Mini</option>
+    </select>
+  )
+}
+const App = () => {
+  let [user, setUser] = React.useState()
+  let [payment, setPayment] = React.useState()
+  let [order, setOrder] = React.useState()
+  let [product, setProduct] = React.useState()
+  let [signozUrl, setSignozUrl] = React.useState(DEFAULT_SIGNOZ_URL)
+  let createUser = async () => {
+    try {
+      const requestOptions = {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          userName: 'Rahul',
+          account: 'BCED1233F',
+        }),
+      }
+      let response = await fetch(`${USER_SERVICE_URL}/create`, requestOptions)
+      let result = await response.json()
+      setUser(result)
+      console.log(result)
+    } catch (error) {
+      setUser(error.message)
+      console.log('err', error.message)
+    }
+  }
+
+  let handleProduct = (e) => {
+    let { options, value } = e.target
+    setProduct({
+      PRODUCT_NAME: options[options.selectedIndex].text,
+      PRICE: String(value),
+    })
+  }
+  let transferFund = async () => {
+    console.log('transferFund', user)
+    const requestOptions = {
+      method: 'GET',
+    }
+    let response = await fetch(
+      `${PAYMENT_SERVICE_URL}/transfer/id/${user.id}/amount/10000`,
+      requestOptions
+    )
+    let result = await response.json()
+    setPayment(result)
+    console.log(result)
+  }
+
+  let placeOrder = async () => {
+    console.log('placeOrder', product)
+    const requestOptions = {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        productName: product.PRODUCT_NAME,
+        price: product.PRICE,
+      }),
+    }
+    let response = await fetch(`${ORDER_SERVICE_URL}/create/id/${user.id}`, requestOptions)
+    let result = await response.json()
+    setOrder(result)
+    console.log(result)
+  }
+  let handleReset = () => {
+    setUser()
+    setPayment()
+    setOrder()
+    setProduct()
+  }
+  let setUrl = (e) => setSignozUrl(e.target.value)
+  let openSignoz = () => window.open(signozUrl)
+  return (
+    <div>
+      <button onClick={handleReset}>Reset Actions</button>
+      <button onClick={openSignoz} style={{ marginLeft: 10, marginRight: 8 }}>
+        Open Signoz
+      </button>
+      <input
+        placeholder="Type default signoz url"
+        type="text"
+        onChange={setUrl}
+        value={signozUrl}
+        style={{ width: 200 }}
+      ></input>
+      <p style={{ color: 'red' }}>Make sure signoz is running on {signozUrl}</p>
+      <Title label="1.User Creation"></Title>
+      <button onClick={createUser}>Create User</button>
+      <Response result={user} />
+      {user && (
+        <div>
+          <Title label="2.Transfer amount"></Title>
+          <button onClick={transferFund}>Transfer Fund</button>
+          <Response result={payment} />
+        </div>
+      )}
+      {payment && (
+        <div>
+          <Title label="3.Place order"></Title>
+          <ProductDD handleProductChange={handleProduct} />
+          {product && <button onClick={placeOrder}>Place Order</button>}
+          {order && (
+            <div>
+              <Response result={order} />
+              <h3>Order Placed!</h3>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('app'))
diff --git a/user-service/src/main/java/com/signoz/userservice/controller/UserController.java b/user-service/src/main/java/com/signoz/userservice/controller/UserController.java
@@ -12,6 +12,7 @@
 
 
 @RestController
+@CrossOrigin(origins = "*")
 public class UserController {
 
     @Autowired

diff --git a/user-service/src/main/java/com/signoz/userservice/entity/Users.java b/user-service/src/main/java/com/signoz/userservice/entity/Users.java
@@ -15,7 +15,7 @@
 @AllArgsConstructor
 @NoArgsConstructor
 @Entity
-@Table(name = "USERS")
+@Table(name = "users_tbl")
 @EntityListeners(AuditingEntityListener.class)
 public class Users {