Merge pull request #40 from parca-dev/web_grpc_module

ui: Integrate app/web with API

Makefile

@@ -44,19 +44,20 @@ proto/generate:
 	buf generate --path=./proto/query
 	buf generate --path=./proto/profilestore
 	buf generate --path=./proto/debuginfo
+	buf generate --path=./proto/google/api
 	buf generate --path=./proto/google/pprof
 
 .PHONY: proto/vendor
 proto/vendor:
 	mkdir -p proto/google/api
 	mkdir -p proto/protoc-gen-openapiv2/options
-	mkdir -p proto/pprof
+	mkdir -p proto/google/pprof
 	curl https://raw.githubusercontent.com/googleapis/googleapis/master/google/api/annotations.proto                               > proto/google/api/annotations.proto
 	curl https://raw.githubusercontent.com/protocolbuffers/protobuf/master/src/google/protobuf/timestamp.proto                     > proto/google/api/timestamp.proto
 	curl https://raw.githubusercontent.com/googleapis/googleapis/master/google/api/http.proto                                      > proto/google/api/http.proto
 	curl https://raw.githubusercontent.com/grpc-ecosystem/grpc-gateway/master/protoc-gen-openapiv2/options/annotations.proto       > proto/protoc-gen-openapiv2/options/annotations.proto
 	curl https://raw.githubusercontent.com/grpc-ecosystem/grpc-gateway/master/protoc-gen-openapiv2/options/openapiv2.proto         > proto/protoc-gen-openapiv2/options/openapiv2.proto
-	curl https://raw.githubusercontent.com/google/pprof/master/proto/profile.proto                                                 > proto/pprof/profile.proto
+	curl https://raw.githubusercontent.com/google/pprof/master/proto/profile.proto                                                 > proto/google/pprof/profile.proto
 
 .PHONY: container
 container:

buf.gen.yaml

@@ -9,12 +9,12 @@ plugins:
       - paths=source_relative
       - require_unimplemented_servers=false
   - name: js
-    out: proto/gen/js
+    out: ui/packages/shared/client/src
     opt:
       - import_style=commonjs,binary
   - name: ts
     path: ./node_modules/.bin/protoc-gen-ts
-    out: proto/gen/js
+    out: ui/packages/shared/client/src
     opt:
       - service=grpc-web
   - name: grpc-gateway

pkg/server/server.go

@@ -83,7 +83,7 @@ func ListenAndServe(ctx context.Context, logger log.Logger, port string, registe
 	}
 	reflection.Register(srv)
 
-	uiFS, err := fs.Sub(ui.FS, "dist")
+	uiFS, err := fs.Sub(ui.FS, "packages/app/web/dist")
 	if err != nil {
 		return fmt.Errorf("failed to initialize UI filesystem: %w", err)
 	}

proto/gen/swagger/google/api/annotations.swagger.json

@@ -0,0 +1,46 @@
+{
+  "swagger": "2.0",
+  "info": {
+    "title": "google/api/annotations.proto",
+    "version": "version not set"
+  },
+  "consumes": [
+    "application/json"
+  ],
+  "produces": [
+    "application/json"
+  ],
+  "paths": {},
+  "definitions": {
+    "protobufAny": {
+      "type": "object",
+      "properties": {
+        "typeUrl": {
+          "type": "string"
+        },
+        "value": {
+          "type": "string",
+          "format": "byte"
+        }
+      }
+    },
+    "rpcStatus": {
+      "type": "object",
+      "properties": {
+        "code": {
+          "type": "integer",
+          "format": "int32"
+        },
+        "message": {
+          "type": "string"
+        },
+        "details": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/protobufAny"
+          }
+        }
+      }
+    }
+  }
+}

proto/gen/swagger/google/api/http.swagger.json

@@ -0,0 +1,46 @@
+{
+  "swagger": "2.0",
+  "info": {
+    "title": "google/api/http.proto",
+    "version": "version not set"
+  },
+  "consumes": [
+    "application/json"
+  ],
+  "produces": [
+    "application/json"
+  ],
+  "paths": {},
+  "definitions": {
+    "protobufAny": {
+      "type": "object",
+      "properties": {
+        "typeUrl": {
+          "type": "string"
+        },
+        "value": {
+          "type": "string",
+          "format": "byte"
+        }
+      }
+    },
+    "rpcStatus": {
+      "type": "object",
+      "properties": {
+        "code": {
+          "type": "integer",
+          "format": "int32"
+        },
+        "message": {
+          "type": "string"
+        },
+        "details": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/protobufAny"
+          }
+        }
+      }
+    }
+  }
+}

proto/gen/swagger/google/api/timestamp.swagger.json

@@ -0,0 +1,46 @@
+{
+  "swagger": "2.0",
+  "info": {
+    "title": "google/api/timestamp.proto",
+    "version": "version not set"
+  },
+  "consumes": [
+    "application/json"
+  ],
+  "produces": [
+    "application/json"
+  ],
+  "paths": {},
+  "definitions": {
+    "protobufAny": {
+      "type": "object",
+      "properties": {
+        "typeUrl": {
+          "type": "string"
+        },
+        "value": {
+          "type": "string",
+          "format": "byte"
+        }
+      }
+    },
+    "rpcStatus": {
+      "type": "object",
+      "properties": {
+        "code": {
+          "type": "integer",
+          "format": "int32"
+        },
+        "message": {
+          "type": "string"
+        },
+        "details": {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/protobufAny"
+          }
+        }
+      }
+    }
+  }
+}

ui/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "lint": "eslint --ext .ts,.tsx,.js packages/app/* packages/shared/* pages/*",
+    "lint": "eslint --ext .ts,.tsx,.js packages/app/* packages/shared/*",
     "test": "jest --coverage --config jest.config.js",
     "generate": "plop --plopfile .plop/plopfile.ts",
     "storybook": "start-storybook -p 6006"
@@ -13,6 +13,10 @@
     "packages/shared/*"
   ],
   "dependencies": {
+    "@improbable-eng/grpc-web": "^0.14.0",
+    "@improbable-eng/grpc-web-node-http-transport": "^0.14.0",
+    "@types/google-protobuf": "^3.15.5",
+    "google-protobuf": "^3.17.3",
     "next": "^11.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

ui/packages/app/web/.env.local-dev

@@ -1 +1,2 @@
 PATH_PREFIX=/template
+HOST=http://localhost:9090

ui/packages/app/web/package.json

@@ -3,6 +3,7 @@
     "version": "0.0.0",
     "description": "Parca Web Interface",
     "scripts": {
+      "lint": "eslint --ext .ts,.tsx,.js src/*",
       "dev": "../../../node_modules/.bin/next dev",
       "build": "yarn clean && ../../../node_modules/.bin/next build && ../../../node_modules/.bin/next export -o dist",
       "clean": "rimraf .next && rimraf out",
@@ -17,7 +18,8 @@
     "author": "",
     "license": "ISC",
     "dependencies": {
-      "@parca/functions": "0.0.0"
+      "@parca/functions": "0.0.0",
+      "@parca/client": "0.0.0"
     },
     "devDependencies": {
       "@storybook/react": "^6.1.2"

ui/packages/app/web/src/pages/index.tsx

@@ -2,10 +2,35 @@ import * as React from 'react'
 import { NextPage } from 'next'
 import { Button } from 'components/Button'
 import { capitalize } from '@parca/functions'
+import { grpc } from '@improbable-eng/grpc-web'
+import { NodeHttpTransport } from '@improbable-eng/grpc-web-node-http-transport'
+import { Query } from '@parca/client/src/query/query_pb_service'
+import { QueryRequest } from '@parca/client/src/query/query_pb'
+
+const host = 'http://localhost:9090'
+
+function query (): void {
+  const instantQuery = new QueryRequest()
+
+  grpc.unary(Query.Query, {
+    request: instantQuery,
+    host: host, // process.env.HOST,
+    transport: NodeHttpTransport(),
+    onEnd: res => {
+      const { status, statusMessage, headers, message, trailers } = res
+      console.log('query.onEnd.status', status, statusMessage)
+      console.log('query.onEnd.headers', headers)
+      if (status === grpc.Code.OK && message != null) {
+        console.log('query.onEnd.message', message.toObject())
+      }
+      console.log('query.onEnd.trailers', trailers)
+    }
+  })
+}
 
 const Index: NextPage = () => {
   const handleClick = (): void => {
-    alert('World')
+    query()
   }
 
   return (

ui/packages/app/web/tsconfig.json

@@ -6,4 +6,3 @@
   },
   "exclude": ["node_modules"]
 }
-

ui/packages/shared/client/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@parca/client",
+  "version": "0.0.0",
+  "description": "Parca API Client",
+  "main": "src/index.ts",
+  "scripts": {
+    "test": "jest --coverage --config ../../../jest.config.js ./src/*"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

ui/packages/shared/client/src/google/api/annotations_pb.d.ts

@@ -0,0 +1,9 @@
+// package: google.api
+// file: google/api/annotations.proto
+
+import * as jspb from "google-protobuf";
+import * as google_api_http_pb from "../../google/api/http_pb";
+import * as google_protobuf_descriptor_pb from "google-protobuf/google/protobuf/descriptor_pb";
+
+  export const http: jspb.ExtensionFieldInfo<google_api_http_pb.HttpRule>;
+

ui/packages/shared/client/src/google/api/annotations_pb.js

@@ -0,0 +1,48 @@
+// source: google/api/annotations.proto
+/**
+ * @fileoverview
+ * @enhanceable
+ * @suppress {missingRequire} reports error on implicit type usages.
+ * @suppress {messageConventions} JS Compiler reports an error if a variable or
+ *     field starts with 'MSG_' and isn't a translatable message.
+ * @public
+ */
+// GENERATED CODE -- DO NOT EDIT!
+/* eslint-disable */
+// @ts-nocheck
+
+var jspb = require('google-protobuf');
+var goog = jspb;
+var global = Function('return this')();
+
+var google_api_http_pb = require('../../google/api/http_pb.js');
+goog.object.extend(proto, google_api_http_pb);
+var google_protobuf_descriptor_pb = require('google-protobuf/google/protobuf/descriptor_pb.js');
+goog.object.extend(proto, google_protobuf_descriptor_pb);
+goog.exportSymbol('proto.google.api.http', null, global);
+
+/**
+ * A tuple of {field number, class constructor} for the extension
+ * field named `http`.
+ * @type {!jspb.ExtensionFieldInfo<!proto.google.api.HttpRule>}
+ */
+proto.google.api.http = new jspb.ExtensionFieldInfo(
+    72295728,
+    {http: 0},
+    google_api_http_pb.HttpRule,
+     /** @type {?function((boolean|undefined),!jspb.Message=): !Object} */ (
+         google_api_http_pb.HttpRule.toObject),
+    0);
+
+google_protobuf_descriptor_pb.MethodOptions.extensionsBinary[72295728] = new jspb.ExtensionFieldBinaryInfo(
+    proto.google.api.http,
+    jspb.BinaryReader.prototype.readMessage,
+    jspb.BinaryWriter.prototype.writeMessage,
+    google_api_http_pb.HttpRule.serializeBinaryToWriter,
+    google_api_http_pb.HttpRule.deserializeBinaryFromReader,
+    false);
+// This registers the extension field with the extended class, so that
+// toObject() will function correctly.
+google_protobuf_descriptor_pb.MethodOptions.extensions[72295728] = proto.google.api.http;
+
+goog.object.extend(exports, proto.google.api);

ui/packages/shared/client/src/google/api/annotations_pb_service.d.ts

@@ -0,0 +1,3 @@
+// package: google.api
+// file: google/api/annotations.proto
+

ui/packages/shared/client/src/google/api/annotations_pb_service.js

@@ -0,0 +1,3 @@
+// package: google.api
+// file: google/api/annotations.proto
+