Skip to content

Commit

Permalink
Adds Metadata Artifacts to UI (#2057)
Browse files Browse the repository at this point in the history
* Working, though the request seems malformed

* Working with grpc-web. trying to push to cluster

* WIP

* With great hax come great success

* Begin moving some metadata UI pages to KFP

* Artifact list and details pages work! A lot of clean up is needed. Look for console.log and TODO

* Clean up

* Fixes filtering of artifact list

* More cleanup

* Revert ui deployment

* Updates tests

* Update envoy deployment
  • Loading branch information
rileyjbauer authored and k8s-ci-robot committed Sep 6, 2019
1 parent fe0bc67 commit 8d196d4
Show file tree
Hide file tree
Showing 48 changed files with 28,840 additions and 1,189 deletions.
8 changes: 8 additions & 0 deletions envoy-entrypoint.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
#!/bin/sh
set -e

# DEBUG
cat /etc/envoy.yaml

echo "Starting Envoy..."
/usr/local/bin/envoy -c /etc/envoy.yaml
11 changes: 11 additions & 0 deletions envoy.Dockerfile
Original file line number Diff line number Diff line change
@@ -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"]
44 changes: 44 additions & 0 deletions envoy.yaml
Original file line number Diff line number Diff line change
@@ -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 }}]
56 changes: 26 additions & 30 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 6 additions & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": {
Expand All @@ -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",
Expand Down
17 changes: 16 additions & 1 deletion frontend/server/server.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) */
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -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);
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/Css.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading

0 comments on commit 8d196d4

Please sign in to comment.