Adds Metadata Artifacts to UI

envoy-entrypoint.sh

@@ -0,0 +1,8 @@
+#!/bin/sh
+set -e
+
+# DEBUG
+cat /etc/envoy.yaml
+
+echo "Starting Envoy..."
+/usr/local/bin/envoy -c /etc/envoy.yaml

envoy.Dockerfile

@@ -0,0 +1,11 @@
+FROM envoyproxy/envoy:latest
+
+COPY envoy.yaml /etc/envoy.yaml
+COPY envoy-entrypoint.sh /
+
+RUN chmod 500 /envoy-entrypoint.sh
+
+RUN apt-get update && \
+    apt-get install gettext -y
+
+ENTRYPOINT ["/envoy-entrypoint.sh"]

envoy.yaml

@@ -0,0 +1,44 @@
+admin:
+  access_log_path: /tmp/admin_access.log
+  address:
+    socket_address: { address: 0.0.0.0, port_value: 9901 }
+
+static_resources:
+  listeners:
+  - name: listener_0
+    address:
+      socket_address: { address: 0.0.0.0, port_value: 9090 }
+    filter_chains:
+    - filters:
+      - name: envoy.http_connection_manager
+        config:
+          codec_type: auto
+          stat_prefix: ingress_http
+          route_config:
+            name: local_route
+            virtual_hosts:
+            - name: local_service
+              domains: ["*"]
+              routes:
+              - match: { prefix: "/" }
+                route:
+                  cluster: metadata-cluster
+                  max_grpc_timeout: 0s
+              cors:
+                allow_origin:
+                - "*"
+                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.grpc_web
+          - name: envoy.cors
+          - name: envoy.router
+  clusters:
+  - name: metadata-cluster
+    connect_timeout: 30.0s
+    type: logical_dns
+    http2_protocol_options: {}
+    lb_policy: round_robin
+    hosts: [{ socket_address: { address: "metadata-service", port_value: 8080 }}]

frontend/package.json

@@ -3,13 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@grpc/proto-loader": "^0.3.0",
     "@material-ui/core": "3.7.1",
     "@material-ui/icons": "^3.0.1",
     "@types/js-yaml": "^3.11.2",
     "brace": "^0.11.1",
     "d3": "^5.7.0",
     "d3-dsv": "^1.0.10",
     "dagre": "^0.8.2",
+    "google-protobuf": "^3.6.1",
+    "grpc": "^1.15.0",
+    "grpc-web": "^1.0.0",
     "http-proxy-middleware": "^0.19.0",
     "immer": "^1.7.4",
     "js-yaml": "^3.12.0",
@@ -25,6 +29,7 @@
     "react-scripts-ts": "2.17.0",
     "react-virtualized": "^9.20.1",
     "react-vis": "^1.11.2",
+    "ts-protoc-gen": "^0.10.0",
     "typestyle": "^2.0.1"
   },
   "scripts": {
@@ -42,7 +47,7 @@
     "java": "java -version",
     "mock:api": "ts-node-dev -O '{\"module\": \"commonjs\"}' mock-backend/mock-api-server.ts 3001",
     "mock:server": "ML_PIPELINE_SERVICE_HOST=localhost ML_PIPELINE_SERVICE_PORT=3001 node server/dist/server.js dist",
-    "postinstall": "cd ./server && npm i && cd ../mock-backend && npm i",
+    "postinstall": "cd ./server && npm i && cd ../mock-backend && npm i && cd ../src/generated/src/apis/metadata && npm i",
     "start": "react-scripts-ts start",
     "test": "react-scripts-ts test --env=jsdom",
     "test:coverage": "npm test -- --env=jsdom --coverage",

frontend/server/server.ts

@@ -56,7 +56,11 @@ const {
   /** path to viewer:tensorboard pod template spec */
   VIEWER_TENSORBOARD_POD_TEMPLATE_SPEC_PATH,
   /** Whether custom visualizations are allowed to be generated by the frontend */
-  ALLOW_CUSTOM_VISUALIZATIONS = false
+  ALLOW_CUSTOM_VISUALIZATIONS = false,
+  /** Envoy service will listen to this host */
+  METADATA_ENVOY_SERVICE_SERVICE_HOST = 'localhost',
+  /** Envoy service will listen to this port */
+  METADATA_ENVOY_SERVICE_SERVICE_PORT = '9090',
 } = process.env;
 
 /** construct minio endpoint from host and namespace (optional) */
@@ -112,6 +116,8 @@ const commitHash =
 const port = process.argv[3] || 3000;
 const apiServerAddress = `http://${ML_PIPELINE_SERVICE_HOST}:${ML_PIPELINE_SERVICE_PORT}`;
 
+const envoyServiceAddress = `http://${METADATA_ENVOY_SERVICE_SERVICE_HOST}:${METADATA_ENVOY_SERVICE_SERVICE_PORT}`
+
 const v1beta1Prefix = 'apis/v1beta1';
 
 const healthzStats = {
@@ -358,6 +364,15 @@ app.get(BASEPATH + '/system/project-id', projectIdHandler);
 app.get('/visualizations/allowed', allowCustomVisualizationsHandler);
 app.get(BASEPATH + '/visualizations/allowed', allowCustomVisualizationsHandler);
 
+// Proxy metadata requests to the Envoy instance which will handle routing to the metadata gRPC server
+app.all('/ml_metadata.*', proxy({
+  changeOrigin: true,
+  onProxyReq: proxyReq => {
+    console.log('Metadata proxied request: ', (proxyReq as any).path);
+  },
+  target: envoyServiceAddress,
+}));
+
 // Order matters here, since both handlers can match any proxied request with a referer,
 // and we prioritize the basepath-friendly handler
 proxyMiddleware(app, BASEPATH + '/' + v1beta1Prefix);

frontend/src/Css.tsx

@@ -238,6 +238,12 @@ export const commonCss = stylesheet({
     paddingBottom: 16,
     paddingTop: 20,
   },
+  header2: {
+    fontSize: fontsize.medium,
+    fontWeight: 'bold',
+    paddingBottom: 16,
+    paddingTop: 20,
+  },
   infoIcon: {
     color: color.lowContrast,
     height: 16,