feat(serve-runtime): new landing page (ardatan#7170)

Author: ardatan

.github/workflows/loadtest.yml

@@ -22,5 +22,7 @@ jobs:
         with:
           nodeVersion: ${{matrix.node-version}}
           packageManagerVersion: modern
+      - name: Prepare for build
+        run: yarn prebuild
       - name: loadtest
         run: yarn loadtest:e2e

.github/workflows/tests.yml

@@ -31,6 +31,9 @@ jobs:
         name: setup env
         with:
           packageManagerVersion: modern
+
+      - name: Prepare for build
+        run: yarn prebuild
       - name: typecheck
         run: yarn typecheck
 
@@ -67,6 +70,9 @@ jobs:
       - name: Generate config schema
         run: yarn generate-config-schema
 
+      - name: Prepare for build
+        run: yarn prebuild
+
       - name: Run Tests
         uses: nick-fields/retry@v3
         with:
@@ -113,6 +119,9 @@ jobs:
       - name: Remove node-libcurl
         run: rm -rf node_modules/node-libcurl
 
+      - name: Prepare for build
+        run: yarn prebuild
+
       - name: Run Tests
         uses: nick-fields/retry@v3
         with:
@@ -340,6 +349,8 @@ jobs:
         with:
           nodeVersion: ${{matrix.node-version}}
           packageManagerVersion: modern
+      - name: Prepare for build
+        run: yarn prebuild
       - name: test
         timeout-minutes: 5
         run: yarn test:e2e --detectOpenHandles

package.json

@@ -51,7 +51,7 @@
     "postchangeset": "yarn install ---no-frozen-lockfile",
     "postgenerate-config-schema": "node scripts/create-config-schema-ts.js && npx prettier --write ./packages/legacy/types/src",
     "postinstall": "husky install",
-    "prebuild": "yarn clean && yarn generate-config-schema",
+    "prebuild": "yarn clean && yarn generate-config-schema && yarn workspace @graphql-mesh/serve-runtime generate-landing-page-html",
     "prettier": "prettier --write --list-different .",
     "prettier:check": "prettier --check .",
     "release": "yarn build && changeset publish",

packages/fusion/runtime/src/unifiedGraphManager.ts

@@ -74,6 +74,7 @@ export class UnifiedGraphManager<TContext> {
   private inContextSDK;
   private initialUnifiedGraph$: MaybePromise<void>;
   private disposableStack = new AsyncDisposableStack();
+  private _transportEntryMap: Record<string, TransportEntry>;
   constructor(private opts: UnifiedGraphManagerOptions<TContext>) {
     this.handleUnifiedGraph = opts.handleUnifiedGraph || handleFederationSupergraph;
     this.onSubgraphExecuteHooks = opts?.onSubgraphExecuteHooks || [];
@@ -169,10 +170,15 @@ export class UnifiedGraphManager<TContext> {
           );
         }
         this.continuePolling();
+        this._transportEntryMap = transportEntryMap;
       },
     );
   }
 
+  public getTransportEntryMap() {
+    return mapMaybePromise(this.ensureUnifiedGraph(), () => this._transportEntryMap);
+  }
+
   public getUnifiedGraph() {
     return mapMaybePromise(this.ensureUnifiedGraph(), () => this.unifiedGraph);
   }

packages/serve-runtime/.gitignore

@@ -0,0 +1 @@
+landing-page-html.ts

packages/serve-runtime/package.json

@@ -31,6 +31,9 @@
     "./package.json": "./package.json"
   },
   "typings": "dist/typings/index.d.ts",
+  "scripts": {
+    "generate-landing-page-html": "node scripts/generate-landing-page-html.js"
+  },
   "peerDependencies": {
     "graphql": "*"
   },
@@ -53,6 +56,9 @@
     "disposablestack": "^1.1.6",
     "graphql-yoga": "^5.6.0"
   },
+  "devDependencies": {
+    "html-minifier-terser": "7.2.0"
+  },
   "publishConfig": {
     "access": "public",
     "directory": "dist"

packages/serve-runtime/scripts/generate-landing-page-html.js

@@ -0,0 +1,34 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { minify as minifyT } from 'html-minifier-terser';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+async function minify(str) {
+  return (
+    await minifyT(str, {
+      minifyJS: true,
+      useShortDoctype: false,
+      removeAttributeQuotes: true,
+      collapseWhitespace: true,
+      minifyCSS: true,
+    })
+  ).toString('utf-8');
+}
+
+async function minifyLandingPageHTML() {
+  const minified = await minify(
+    fs.readFileSync(path.join(__dirname, '..', 'src', 'landing-page.html'), 'utf-8'),
+  );
+
+  await fs.promises.writeFile(
+    path.join(__dirname, '../src/landing-page-html.ts'),
+    `export default ${JSON.stringify(minified)}`,
+  );
+}
+
+minifyLandingPageHTML().catch(err => {
+  console.error(err);
+  process.exit(1);
+});

packages/serve-runtime/src/createServeRuntime.ts

@@ -7,6 +7,7 @@ import {
   FetchAPI,
   GraphiQLOptions,
   isAsyncIterable,
+  LandingPageRenderer,
   useReadinessCheck,
   YogaServerInstance,
   type Plugin,
@@ -18,6 +19,7 @@ import {
   handleFederationSupergraph,
   isDisposable,
   OnSubgraphExecuteHook,
+  TransportEntry,
   UnifiedGraphManager,
   UnifiedGraphManagerOptions,
 } from '@graphql-mesh/fusion-runtime';
@@ -35,6 +37,7 @@ import { useExecutor } from '@graphql-tools/executor-yoga';
 import { MaybePromise } from '@graphql-tools/utils';
 import { getProxyExecutor } from './getProxyExecutor.js';
 import { handleUnifiedGraphConfig } from './handleUnifiedGraphConfig.js';
+import landingPageHtml from './landing-page-html.js';
 import {
   MeshServeConfig,
   MeshServeConfigContext,
@@ -81,6 +84,7 @@ export function createServeRuntime<TContext extends Record<string, any> = Record
   let contextBuilder: <T>(context: T) => MaybePromise<T>;
   let readinessChecker: () => MaybePromise<boolean>;
   let registryPlugin: MeshPlugin<unknown> = {};
+  let subgraphInformationHTMLRenderer: () => MaybePromise<string> = () => '';
 
   const disposableStack = new AsyncDisposableStack();
 
@@ -104,6 +108,10 @@ export function createServeRuntime<TContext extends Record<string, any> = Record
       return mapMaybePromise(res$, res => !isAsyncIterable(res) && !!res.data?.__typename);
     };
     schemaInvalidator = () => executorPlugin.invalidateUnifiedGraph();
+    subgraphInformationHTMLRenderer = () => {
+      const endpoint = config.proxy.endpoint || '#';
+      return `<section class="supergraph-information"><h3>Proxy (<a href="${endpoint}">${endpoint}</a>): ${unifiedGraph ? 'Loaded ✅' : 'Not yet ❌'}</h3></section>`;
+    };
   } else {
     let unifiedGraphFetcher: UnifiedGraphManagerOptions<unknown>['getUnifiedGraph'];
 
@@ -174,6 +182,51 @@ export function createServeRuntime<TContext extends Record<string, any> = Record
     schemaInvalidator = () => unifiedGraphManager.invalidateUnifiedGraph();
     contextBuilder = base => unifiedGraphManager.getContext(base);
     disposableStack.use(unifiedGraphManager);
+    subgraphInformationHTMLRenderer = async () => {
+      const htmlParts: string[] = [];
+      let supergraphLoadedPlace: string;
+      if ('hive' in config && config.hive.endpoint) {
+        supergraphLoadedPlace = 'Hive CDN <br>' + config.hive.endpoint;
+      } else if ('supergraph' in config) {
+        if (typeof config.supergraph === 'function') {
+          const fnName = config.supergraph.name || '';
+          supergraphLoadedPlace = `a custom loader ${fnName}`;
+        }
+      }
+      let loaded = false;
+      let loadError: Error;
+      let transportEntryMap: Record<string, TransportEntry>;
+      try {
+        transportEntryMap = await unifiedGraphManager.getTransportEntryMap();
+        loaded = true;
+      } catch (e) {
+        loaded = false;
+        loadError = e;
+      }
+      if (loaded) {
+        htmlParts.push(`<h3>Supergraph Status: Loaded ✅</h3>`);
+        htmlParts.push(`<p><strong>Source: </strong> <i>${supergraphLoadedPlace}</i></p>`);
+        htmlParts.push(`<table>`);
+        htmlParts.push(`<tr><th>Subgraph</th><th>Transport</th><th>Location</th></tr>`);
+        for (const subgraphName in transportEntryMap) {
+          const transportEntry = transportEntryMap[subgraphName];
+          htmlParts.push(`<tr>`);
+          htmlParts.push(`<td>${subgraphName}</td>`);
+          htmlParts.push(`<td>${transportEntry.kind}</td>`);
+          htmlParts.push(
+            `<td><a href="${transportEntry.location}">${transportEntry.location}</a></td>`,
+          );
+          htmlParts.push(`</tr>`);
+        }
+        htmlParts.push(`</table>`);
+      } else {
+        htmlParts.push(`<h3>Status: Failed ❌</h3>`);
+        htmlParts.push(`<p><strong>Source: </strong> <i>${supergraphLoadedPlace}</i></p>`);
+        htmlParts.push(`<h3>Error:</h3>`);
+        htmlParts.push(`<pre>${loadError.stack}</pre>`);
+      }
+      return `<section class="supergraph-information">${htmlParts.join('')}</section>`;
+    };
   }
 
   const readinessCheckPlugin = useReadinessCheck({
@@ -244,6 +297,30 @@ export function createServeRuntime<TContext extends Record<string, any> = Record
     };
   }
 
+  let landingPageRenderer: LandingPageRenderer | boolean;
+
+  if (config.landingPage == null || config.landingPage === true) {
+    landingPageRenderer = async function meshLandingPageRenderer(opts) {
+      return new opts.fetchAPI.Response(
+        landingPageHtml
+          .replace(/__GRAPHIQL_LINK__/g, opts.graphqlEndpoint)
+          .replace(/__REQUEST_PATH__/g, opts.url.pathname)
+          .replace(/__SUBGRAPH_HTML__/g, await subgraphInformationHTMLRenderer()),
+        {
+          status: 200,
+          statusText: 'OK',
+          headers: {
+            'Content-Type': 'text/html',
+          },
+        },
+      );
+    };
+  } else if (typeof config.landingPage === 'function') {
+    landingPageRenderer = config.landingPage;
+  } else if (config.landingPage === false) {
+    landingPageRenderer = false;
+  }
+
   const yoga = createYoga<unknown, MeshServeContext>({
     // @ts-expect-error PromiseLike is not compatible with Promise
     schema: schemaFetcher,
@@ -289,7 +366,7 @@ export function createServeRuntime<TContext extends Record<string, any> = Record
     graphqlEndpoint: config.graphqlEndpoint,
     maskedErrors: config.maskedErrors,
     healthCheckEndpoint: config.healthCheckEndpoint || '/healthcheck',
-    landingPage: config.landingPage,
+    landingPage: landingPageRenderer,
   });
 
   fetchAPI ||= yoga.fetchAPI;