explorer: fix build and re-enable in CI

This adds a readiness probe, such that future breakage would be
detected in CI. It also fixes build caching.

Fixes certusone/wormhole#378

Change-Id: I4e929b491bba62b893eec9975f477256eecde6aa

Tiltfile

@@ -244,27 +244,26 @@ k8s_resource(
 )
 
 # explorer web app
-if not ci:  # add readiness probe before re-enabling
+docker_build(
-    docker_build(
+    ref = "explorer",
-        ref = "explorer",
+    context = "./explorer",
-        context = "./explorer",
+    dockerfile = "./explorer/Dockerfile",
-        dockerfile = "./explorer/Dockerfile",
+    ignore = ["./explorer/node_modules"],
-        ignore = ["./explorer/node_modules"],
+    live_update = [
-        live_update = [
+        sync("./explorer/src", "/home/node/app/src"),
-            sync("./explorer/src", "/home/node/app/src"),
+        sync("./explorer/public", "/home/node/app/public"),
-            sync("./explorer/public", "/home/node/app/public"),
+    ],
-        ],
+)
-    )
 
-    k8s_yaml_with_ns("devnet/explorer.yaml")
+k8s_yaml_with_ns("devnet/explorer.yaml")
 
-    k8s_resource(
+k8s_resource(
-        "explorer",
+    "explorer",
-        resource_deps = ["proto-gen-web"],
+    resource_deps = ["proto-gen-web"],
-        port_forwards = [
+    port_forwards = [
-            port_forward(8001, name = "Explorer Web UI [:8001]"),
+        port_forward(8001, name = "Explorer Web UI [:8001]"),
-        ],
+    ],
-    )
+)
 
 # terra devnet
 

devnet/explorer.yaml

@@ -36,9 +36,13 @@ spec:
           command:
             - /usr/local/bin/npm
             - run
-            - build-and-serve
+            - serve
           tty: true
           ports:
             - containerPort: 8001
               name: gatsbyserver
               protocol: TCP
+          readinessProbe:
+            httpGet:
+              port: gatsbyserver
+              path: /

explorer/Dockerfile

@@ -6,10 +6,16 @@ FROM node:16-alpine@sha256:004dbac84fed48e20f9888a23e32fa7cf83c2995e174a78d41d9a
 RUN mkdir -p /app
 WORKDIR /app
 
+ADD package.json .
+ADD package-lock.json .
+RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
+  npm ci
+
 ADD . .
 
 # create .env files from .env.sample, if they do not already exist.
 RUN [[ ! -f .env.development ]] && cp .env.sample .env.development
 RUN [[ ! -f .env.production ]] && cp .env.sample .env.production
 
-RUN npm ci
+RUN --mount=type=cache,uid=1000,gid=1000,target=/home/node/.npm \
+  npm run build

explorer/package.json

@@ -26,11 +26,11 @@
     "setupTestFrameworkScriptFile": "<rootDir>/setup-test-env.js"
   },
   "scripts": {
-    "build": "npm run clean && NODE_ENV=production NODE_OPTIONS='-r esm' gatsby build",
+    "build": "NODE_ENV=production NODE_OPTIONS='-r esm' gatsby build",
     "clean": "rm -rf public && rm -rf .cache",
     "dev": "npm run clean &&  NODE_OPTIONS='-r esm' node --max-http-header-size=16385 node_modules/.bin/gatsby develop --port=8001",
     "debug": "npm run clean && NODE_OPTIONS='-r esm' node --nolazy --inspect-brk node_modules/.bin/gatsby develop",
-    "serve": "NODE_OPTIONS='-r esm' node --max-http-header-size=16385 node_modules/.bin/gatsby serve --port=8001",
+    "serve": "NODE_OPTIONS='-r esm' node --max-http-header-size=16385 node_modules/.bin/gatsby serve --port=8001 --host=0.0.0.0",
     "build-and-serve": "npm run build && npm run serve",
     "lint": "npm run lint:js && npm run lint:ts",
     "lint:js": "./node_modules/.bin/eslint --color --ext .js,.jsx .",
@@ -45,9 +45,7 @@
     "storybook": "NODE_OPTIONS='-r esm' gatsby build && NODE_OPTIONS='-r esm' start-storybook",
     "storybook:build": "NODE_OPTIONS='-r esm' gatsby build && build-storybook -c .storybook -o .out",
     "translate:deepl": "node_modules/.bin/json-autotranslate -i src/locales -d -m none --directory-structure ngx-translate --service=deepl -c",
-    "translate:google": "node_modules/.bin/json-autotranslate -i src/locales -d -m none --directory-structure ngx-translate --service=google-translate -c",
+    "translate:google": "node_modules/.bin/json-autotranslate -i src/locales -d -m none --directory-structure ngx-translate --service=google-translate -c"
-    "generate-protos": "../generate-web-protos.sh",
-    "generate-wasm": "./generate-wasm.sh"
   },
   "dependencies": {
     "@ant-design/icons": "^4.6.2",

explorer/src/pages/network.tsx

@@ -9,10 +9,10 @@ import { SEO } from '~/components/SEO';
 import { GuardiansTable } from '~/components/GuardiansTable'
 
 import { Heartbeat } from '~/proto/gossip/v1/gossip'
-import { GrpcWebImpl, PublicrpcClientImpl } from '~/proto/publicrpc/v1/publicrpc'
+import { GrpcWebImpl, PublicRPCServiceClientImpl } from '~/proto/publicrpc/v1/publicrpc'
 
 const rpc = new GrpcWebImpl(String(process.env.GATSBY_APP_RPC_URL), {});
-const publicRpc = new PublicrpcClientImpl(rpc)
+const publicRpc = new PublicRPCServiceClientImpl(rpc)
 
 const Network = ({ intl }: WrappedComponentProps) => {
   const [heartbeats, setHeartbeats] = useState<{ [nodeName: string]: Heartbeat }>({})