From 4ee5822ed92f8f31efcee5f645ed4fb7527cd0df Mon Sep 17 00:00:00 2001
From: IsolatedSushi <simen.vanherpt@gmail.com>
Date: Thu, 17 Sep 2020 21:53:07 +0200
Subject: [PATCH] Added dapr support
---
frontend/README.md | 6 +-
frontend/package-lock.json | 167 +++++++++++----------
frontend/package.json | 3 +
frontend/src/App.vue | 13 +-
frontend/src/components/gRPCDaprClient.vue | 38 +++++
frontend/src/components/gRPCclient.vue | 65 +++++---
6 files changed, 183 insertions(+), 109 deletions(-)
create mode 100644 frontend/src/components/gRPCDaprClient.vue
diff --git a/frontend/README.md b/frontend/README.md
index aafb65e..ff5685b 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -2,5 +2,7 @@ FOR THE ENVOY PROXY (needed to translate from http1 to http2 otherwise grpcweb d
docker run -d -v <<insert path to directory here>>envoy.yaml:/etc/envoy/envoy.yaml:ro -p 8080:8080 -p 9901:9901 envoyproxy/envoy:v1.15.0
-To run it its probably easiest to use: vue ui
-then import the frontend directory and run the program.
\ No newline at end of file
+We have to run it with dapr so use:
+dapr run --port 5050 --app-id vuefrontend npm run serve
+
+For some reason with vue it cant get the dapr.HTTP environment variable (even though it can with python) so add the port
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b8c0818..af5fad3 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1877,6 +1877,17 @@
"integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
"dev": true
},
+ "ansi-styles": {
+ "version": "4.2.1",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+ "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "@types/color-name": "^1.1.1",
+ "color-convert": "^2.0.1"
+ }
+ },
"cacache": {
"version": "13.0.1",
"resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1903,6 +1914,34 @@
"unique-filename": "^1.1.1"
}
},
+ "chalk": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+ "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "ansi-styles": "^4.1.0",
+ "supports-color": "^7.1.0"
+ }
+ },
+ "color-convert": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "color-name": "~1.1.4"
+ }
+ },
+ "color-name": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+ "dev": true,
+ "optional": true
+ },
"find-cache-dir": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
@@ -1924,6 +1963,13 @@
"path-exists": "^4.0.0"
}
},
+ "has-flag": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+ "dev": true,
+ "optional": true
+ },
"locate-path": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1988,6 +2034,16 @@
"minipass": "^3.1.1"
}
},
+ "supports-color": {
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+ "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "has-flag": "^4.0.0"
+ }
+ },
"terser-webpack-plugin": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -2004,6 +2060,21 @@
"terser": "^4.6.12",
"webpack-sources": "^1.4.3"
}
+ },
+ "vue-loader-v16": {
+ "version": "npm:vue-loader@16.0.0-beta.7",
+ "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz",
+ "integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==",
+ "dev": true,
+ "optional": true,
+ "requires": {
+ "@types/mini-css-extract-plugin": "^0.9.1",
+ "chalk": "^3.0.0",
+ "hash-sum": "^2.0.0",
+ "loader-utils": "^1.2.3",
+ "merge-source-map": "^1.1.0",
+ "source-map": "^0.6.1"
+ }
}
}
},
@@ -2658,6 +2729,14 @@
"integrity": "sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==",
"dev": true
},
+ "axios": {
+ "version": "0.20.0",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz",
+ "integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==",
+ "requires": {
+ "follow-redirects": "^1.10.0"
+ }
+ },
"babel-eslint": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -5940,8 +6019,7 @@
"follow-redirects": {
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
- "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==",
- "dev": true
+ "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
},
"for-in": {
"version": "1.0.2",
@@ -11880,6 +11958,11 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
"integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
},
+ "vue-axios": {
+ "version": "2.1.5",
+ "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-2.1.5.tgz",
+ "integrity": "sha512-th5xVbInVoyIoe+qY+9GCflEVezxAvztD4xpFF39SRQYqpoKD2qkmX8yv08jJG9a2SgNOCjirjJGSwg/wTrbmA=="
+ },
"vue-cli-plugin-vuetify": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.7.tgz",
@@ -11952,86 +12035,6 @@
}
}
},
- "vue-loader-v16": {
- "version": "npm:vue-loader@16.0.0-beta.7",
- "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz",
- "integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==",
- "dev": true,
- "optional": true,
- "requires": {
- "@types/mini-css-extract-plugin": "^0.9.1",
- "chalk": "^3.0.0",
- "hash-sum": "^2.0.0",
- "loader-utils": "^1.2.3",
- "merge-source-map": "^1.1.0",
- "source-map": "^0.6.1"
- },
- "dependencies": {
- "ansi-styles": {
- "version": "4.2.1",
- "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
- "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
- "dev": true,
- "optional": true,
- "requires": {
- "@types/color-name": "^1.1.1",
- "color-convert": "^2.0.1"
- }
- },
- "chalk": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
- "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
- "dev": true,
- "optional": true,
- "requires": {
- "ansi-styles": "^4.1.0",
- "supports-color": "^7.1.0"
- }
- },
- "color-convert": {
- "version": "2.0.1",
- "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
- "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
- "dev": true,
- "optional": true,
- "requires": {
- "color-name": "~1.1.4"
- }
- },
- "color-name": {
- "version": "1.1.4",
- "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
- "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
- "dev": true,
- "optional": true
- },
- "has-flag": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
- "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
- "dev": true,
- "optional": true
- },
- "source-map": {
- "version": "0.6.1",
- "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
- "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
- "dev": true,
- "optional": true
- },
- "supports-color": {
- "version": "7.2.0",
- "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
- "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
- "dev": true,
- "optional": true,
- "requires": {
- "has-flag": "^4.0.0"
- }
- }
- }
- },
"vue-style-loader": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 499ed84..a60bc34 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,12 +9,15 @@
},
"dependencies": {
"@grpc/grpc-js": "^1.1.5",
+ "axios": "^0.20.0",
"core-js": "^3.6.5",
"d3": "^5.16.0",
"google-protobuf": "^3.6.1",
"grpc": "^1.24.3",
"grpc-web": "^1.0.0",
"vue": "^2.6.11",
+ "vue-axios": "^2.1.5",
+ "vue-resource": "^1.3.1",
"vuetify": "^2.2.11"
},
"devDependencies": {
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 8a7ddf2..8689cf4 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -3,7 +3,9 @@
<Navbar/>
<v-main class="grey lighten-2" align="center">
- <gRPCclient v-on:newPoint="addPoint($event)" />
+ <!-- set to true for normal grpcClient -->
+ <gRPCclient v-if="false" v-on:newPoint="addPoint($event)" />
+ <gRPCDaprClient v-if="true" v-on:newPoint="addPoint($event)" />
<ScatterPlot ref = "scatter"/>
</v-main>
@@ -12,16 +14,25 @@
<script>
import Navbar from './components/Navbar';
+import gRPCDaprClient from './components/gRPCDaprClient'
import gRPCclient from './components/gRPCclient'
import ScatterPlot from './components/ScatterPlot'
+import axios from 'axios'
+
export default {
name: 'App',
components: {
Navbar,
+ gRPCDaprClient,
gRPCclient,
ScatterPlot },
created(){
+ const daprPort = process.env.DAPR_HTTP_PORT || 5050;
+ const dapr_url = "http://localhost:" + daprPort + "/v1.0/invoke/projector";
+ console.log("Connecting to dapr url: " + dapr_url + "/method/url");
+ console.log(axios.get(dapr_url+ "/method/url"));
+
},
data(){
return {
diff --git a/frontend/src/components/gRPCDaprClient.vue b/frontend/src/components/gRPCDaprClient.vue
new file mode 100644
index 0000000..45af7d0
--- /dev/null
+++ b/frontend/src/components/gRPCDaprClient.vue
@@ -0,0 +1,38 @@
+/*eslint-disable*/
+<template>
+ <div>
+ <h1 class="my-10">Check the developer console for the messages</h1>
+
+ <v-layout row>
+ <v-spacer></v-spacer>
+
+ <v-btn v-on:click="testPrint">Request new point</v-btn>
+ <v-file-input show-size counter dense label="File input"></v-file-input>
+ <v-spacer></v-spacer>
+ </v-layout>
+ </div>
+</template>
+
+<script>
+//const { voidNoParam } = require("../generated/point_pb.js");
+//const { PointClient } = require("../generated/point_grpc_web_pb.js");
+
+export default {
+ name: "gRPCDaprClient",
+ data(){
+ return{
+
+ }
+ },
+ created: function () {
+
+ },
+ methods: {
+
+ testPrint: function(){
+ console.log("print");
+ }
+ }
+};
+
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/gRPCclient.vue b/frontend/src/components/gRPCclient.vue
index 35e1599..4ed0a96 100644
--- a/frontend/src/components/gRPCclient.vue
+++ b/frontend/src/components/gRPCclient.vue
@@ -1,26 +1,30 @@
/*eslint-disable*/
<template>
<div>
+ <v-alert
+ :value="errorAlert"
+ type="error"
+ transition="scale-transition"
+ dismissible
+ close-icon="mdi-delete"
+ >Cannot connect to server</v-alert>
- <v-alert :value="errorAlert" type="error" transition="scale-transition" dismissible
- close-icon="mdi-delete">
- Cannot connect to server
- </v-alert>
+ <v-alert
+ :value="succesAlert"
+ type="success"
+ transition="scale-transition"
+ dismissible
+ close-icon="mdi-delete"
+ >Connected to the server!</v-alert>
- <v-alert :value="succesAlert" type="success" transition="scale-transition" dismissible
- close-icon="mdi-delete">
- Connected to the server!
- </v-alert>
-
- <h1 class = "my-10">Check the developer console for the messages</h1>
+ <h1 class="my-10">Check the developer console for the messages</h1>
<v-layout row>
- <v-spacer></v-spacer>
-
- <v-btn v-on:click="requestPoint" >Request new point</v-btn>
- <v-file-input show-size counter dense label="File input"></v-file-input>
- <v-spacer></v-spacer>
+ <v-spacer></v-spacer>
+ <v-btn v-on:click="requestPoint">Request new point</v-btn>
+ <v-file-input show-size counter dense label="File input"></v-file-input>
+ <v-spacer></v-spacer>
</v-layout>
</div>
</template>
@@ -40,24 +44,38 @@ export default {
}
},
created: function () {
+
+ //Create the client
this.client = new PointClient(
"http://" + window.location.hostname + ":8080",
null,
null
);
+
+ //requests
this.request = new voidNoParam();
- this.requestPoint();
- // server streaming call
- var streamRequest = new voidNoParam();
+ this.requestPoint();
+ this.createStreamRequest();
+
+ },
+ methods: {
+ requestPoint: function(){
+ this.client.readPoint(this.request, {}, this.unaryResponseHandler);
+ },
- var count = 10;
- console.log("Will send " + count);
+ createStreamRequest: function(){
+ var streamRequest = new voidNoParam();
+ //Create the stream
var stream = this.client.readPointsStream(streamRequest, {});
+
+ //When data is received
stream.on("data", (response) => {
console.log(this.pointToString(response));
this.receivedPoint(response);
});
+
+ //Whenever we have an error
stream.on("error", (err) => {
this.errorAlert = true
this.succesAlert=false
@@ -66,11 +84,8 @@ export default {
`, message = "${err.message}"`
);
});
- },
- methods: {
- requestPoint: function(){
- this.client.readPoint(this.request, {}, this.unaryResponseHandler);
},
+
unaryResponseHandler: function (err, response) {
if (err) {
this.errorAlert = true
@@ -84,11 +99,13 @@ export default {
this.receivedPoint(response);
}
},
+
receivedPoint: function(point){
this.succesAlert = true
this.errorAlert = false
this.$emit('newPoint', point);
},
+
pointToString: function (point) {
return (
"ID: " + point.getId() + "x: " + point.getX() + "y: " + point.getY()
--
GitLab