feat(app): coordinate insights metadata (#6771)

Author: jdolle

.changeset/brave-lobsters-raise.md

@@ -0,0 +1,5 @@
+---
+'hive': minor
+---
+
+Add meta and subgraph data to coordinate insights page; Fix SubgraphChip service link

packages/services/api/src/modules/operations/resolvers/SchemaCoordinateStats.ts

@@ -2,7 +2,10 @@ import { hash } from '../../../shared/helpers';
 import { OperationsManager } from '../providers/operations-manager';
 import type { SchemaCoordinateStatsResolvers } from './../../../__generated__/types';
 
-export const SchemaCoordinateStats: SchemaCoordinateStatsResolvers = {
+export const SchemaCoordinateStats: Pick<
+  SchemaCoordinateStatsResolvers,
+  'clients' | 'operations' | 'requestsOverTime' | 'totalRequests' | '__isTypeOf'
+> = {
   totalRequests: ({ organization, project, target, period, schemaCoordinate }, _, { injector }) => {
     return injector.get(OperationsManager).countRequestsWithSchemaCoordinate({
       organizationId: organization,

packages/services/api/src/modules/schema/module.graphql.ts

@@ -857,6 +857,11 @@ export default gql`
     subscription: GraphQLObjectType
   }
 
+  extend type SchemaCoordinateStats {
+    # If associated with a federated project, this contains the metadata for this coordinate.
+    supergraphMetadata: SupergraphMetadata
+  }
+
   type UnusedSchemaExplorer {
     types: [GraphQLNamedType!]!
   }

packages/services/api/src/modules/schema/providers/schema-manager.ts

@@ -1,4 +1,5 @@
 import type { SchemaVersionMapper as SchemaVersion } from '../module.graphql.mappers';
+import DataLoader from 'dataloader';
 import { parse, print } from 'graphql';
 import { Inject, Injectable, Scope } from 'graphql-modules';
 import lodash from 'lodash';
@@ -70,6 +71,7 @@ const externalSchemaCompositionTestDocument = parse(externalSchemaCompositionTes
 })
 export class SchemaManager {
   private logger: Logger;
+  private latestSchemaVersionLoader: DataLoader<TargetSelector, SchemaVersion>;
 
   constructor(
     logger: Logger,
@@ -89,6 +91,25 @@ export class SchemaManager {
     @Inject(SCHEMA_MODULE_CONFIG) private schemaModuleConfig: SchemaModuleConfig,
   ) {
     this.logger = logger.child({ source: 'SchemaManager' });
+    this.latestSchemaVersionLoader = new DataLoader(
+      selectors => {
+        return Promise.all(
+          selectors.map(async selector => {
+            return {
+              ...(await this.storage.getLatestValidVersion(selector)),
+              projectId: selector.projectId,
+              targetId: selector.targetId,
+              organizationId: selector.organizationId,
+            };
+          }),
+        );
+      },
+      {
+        cacheKeyFn(selector) {
+          return selector.targetId;
+        },
+      },
+    );
   }
 
   async hasSchema(target: Target) {
@@ -280,12 +301,7 @@ export class SchemaManager {
 
   async getLatestValidVersion(selector: TargetSelector) {
     this.logger.debug('Fetching latest valid version (selector=%o)', selector);
-    return {
-      ...(await this.storage.getLatestValidVersion(selector)),
-      projectId: selector.projectId,
-      targetId: selector.targetId,
-      organizationId: selector.organizationId,
-    };
+    return this.latestSchemaVersionLoader.load(selector);
   }
 
   async getMaybeLatestVersion(target: Target) {

packages/services/api/src/modules/schema/resolvers/SchemaCoordinateStats.ts

@@ -0,0 +1,35 @@
+import { extractSuperGraphInformation } from '../lib/federation-super-graph';
+import { SchemaManager } from '../providers/schema-manager';
+import { SchemaVersionHelper } from '../providers/schema-version-helper';
+import type { SchemaCoordinateStatsResolvers } from './../../../__generated__/types';
+
+export const SchemaCoordinateStats: Pick<
+  SchemaCoordinateStatsResolvers,
+  'supergraphMetadata' | '__isTypeOf'
+> = {
+  supergraphMetadata: async (
+    { organization, project, target, schemaCoordinate },
+    _,
+    { injector },
+  ) => {
+    // @note: SchemaManager.getLatestValidVersion uses DataLoader to avoid multiple fetches per operation
+    const latestVersion = await injector.get(SchemaManager).getLatestValidVersion({
+      targetId: target,
+      projectId: project,
+      organizationId: organization,
+    });
+    // @note: `SchemaVersionHelper.getSupergraphAst` is cached
+    const supergraphAst = await injector.get(SchemaVersionHelper).getSupergraphAst(latestVersion);
+    const supergraph = supergraphAst ? extractSuperGraphInformation(supergraphAst) : null;
+    supergraph?.schemaCoordinateServicesMappings;
+
+    return {
+      __typename: 'SupergraphMetadata',
+      metadata: latestVersion.schemaMetadata?.[schemaCoordinate]?.map(m => ({
+        ...m,
+        __typename: 'SchemaMetadata',
+      })),
+      ownedByServiceNames: supergraph?.schemaCoordinateServicesMappings.get(schemaCoordinate),
+    };
+  },
+};

packages/web/app/src/components/target/explorer/super-graph-metadata.tsx

@@ -52,8 +52,9 @@ function SubgraphChip(props: {
         projectSlug: props.projectSlug,
         targetSlug: props.targetSlug,
       }}
-      // TODO(router)
-      hash={`service-${props.text}`}
+      search={{
+        service: props.text,
+      }}
       style={{ backgroundColor: stringToHslColor(props.text) }}
       className="my-[2px] ml-[6px] inline-block h-[22px] max-w-[100px] cursor-pointer items-center justify-between truncate rounded-[16px] py-0 pl-[8px] pr-[6px] text-[10px] font-normal normal-case leading-loose text-[#4f4f4f] drop-shadow-md"
     >
@@ -98,14 +99,16 @@ const SupergraphMetadataList_SupergraphMetadataFragment = graphql(`
 `);
 
 const tooltipColor = 'rgb(36, 39, 46)';
-const previewThreshold = 3;
+const DEFAULT_PREVIEW_THRESHOLD = 3;
 
 export function SupergraphMetadataList(props: {
   organizationSlug: string;
   projectSlug: string;
   targetSlug: string;
   supergraphMetadata: FragmentType<typeof SupergraphMetadataList_SupergraphMetadataFragment>;
+  previewThreshold?: number;
 }) {
+  const previewThreshold = props.previewThreshold ?? DEFAULT_PREVIEW_THRESHOLD;
   const supergraphMetadata = useFragment(
     SupergraphMetadataList_SupergraphMetadataFragment,
     props.supergraphMetadata,

packages/web/app/src/pages/target-insights-coordinate.tsx

@@ -12,6 +12,7 @@ import {
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { useQuery } from 'urql';
 import { Page, TargetLayout } from '@/components/layouts/target';
+import { SupergraphMetadataList } from '@/components/target/explorer/super-graph-metadata';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -35,6 +36,9 @@ const SchemaCoordinateView_SchemaCoordinateStatsQuery = graphql(`
     $resolution: Int!
   ) {
     schemaCoordinateStats(selector: $selector) {
+      supergraphMetadata {
+        ...SupergraphMetadataList_SupergraphMetadataFragment
+      }
       requestsOverTime(resolution: $resolution) {
         date
         value
@@ -113,6 +117,8 @@ function SchemaCoordinateView(props: {
   const totalOperations = query.data?.schemaCoordinateStats?.operations.nodes.length ?? 0;
   const totalClients = query.data?.schemaCoordinateStats?.clients.nodes.length ?? 0;
 
+  const supergraphMetadata = query.data?.schemaCoordinateStats?.supergraphMetadata;
+
   if (query.error) {
     return <QueryError organizationSlug={props.organizationSlug} error={query.error} />;
   }
@@ -121,7 +127,18 @@ function SchemaCoordinateView(props: {
     <>
       <div className="flex flex-row items-center justify-between py-6">
         <div>
-          <Title>{props.coordinate}</Title>
+          <div className="flex flex-row items-center justify-between">
+            <Title className="pr-8">{props.coordinate}</Title>
+            {supergraphMetadata ? (
+              <SupergraphMetadataList
+                organizationSlug={props.organizationSlug}
+                projectSlug={props.projectSlug}
+                targetSlug={props.targetSlug}
+                supergraphMetadata={supergraphMetadata}
+                previewThreshold={5}
+              />
+            ) : null}
+          </div>
           <Subtitle>Schema coordinate insights</Subtitle>
         </div>
         <div className="flex justify-end gap-x-2">