docs(router): metrics by kamilkisiela · Pull Request #7696 · graphql-hive/console

kamilkisiela · 2026-02-13T11:12:02Z

gemini-code-assist · 2026-02-13T11:12:15Z

Summary of Changes

Hello @kamilkisiela, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the documentation for OpenTelemetry metrics in the Hive Router by introducing dedicated UI components for presenting metric and label information clearly. It provides users with a comprehensive guide on how to configure, export, and interpret the various metrics available, improving observability and troubleshooting capabilities for router operations.

Highlights

New UI Components for Metrics Documentation: Introduced LabelCard, MetricCard, and MetricsSection React components to provide a structured and interactive way to display OpenTelemetry metrics and their associated labels within the documentation.
Comprehensive OpenTelemetry Metrics Documentation: Added a new documentation page (metrics.mdx) detailing the OpenTelemetry metrics exposed by the Hive Router, covering configuration for OTLP and Prometheus, instrumentation customization, and a detailed reference for various metric categories.
Detailed Metric and Label References: The new documentation includes extensive references for GraphQL, Supergraph, HTTP server, HTTP client, and Cache metrics, along with explanations of their labels, typical values, and monitoring recommendations for production environments.

Changelog

packages/web/docs/src/components/otel-metrics/label-card.tsx
- Added a new React component to display individual metric labels with their meaning, typical values, and notes.
packages/web/docs/src/components/otel-metrics/metric-card.tsx
- Added a new React component to display individual metrics, including their name, type, unit, description, and associated labels, with a copy-to-link feature.
packages/web/docs/src/components/otel-metrics/metrics-section.tsx
- Added a new React component to group and render multiple MetricCard and LabelCard components, providing an expandable section for labels.
packages/web/docs/src/content/router/observability/metrics.mdx
- Added a new documentation page detailing OpenTelemetry metrics for the Hive Router, covering configuration, instrumentation, and a comprehensive reference of GraphQL, Supergraph, HTTP server, HTTP client, and Cache metrics.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

github-actions · 2026-02-13T11:14:00Z

🚀 Snapshot Release (`alpha`)

The latest changes of this PR are available as alpha on npm (based on the declared changesets):

Package	Version	Info
`@graphql-hive/cli`	`0.58.1-alpha-20260216151046-a7dc6de7cd0da593a8b7038d6ad153b0e21220a6`	npm ↗︎ unpkg ↗︎
`hive`	`9.4.1-alpha-20260216151046-a7dc6de7cd0da593a8b7038d6ad153b0e21220a6`	npm ↗︎ unpkg ↗︎

github-actions · 2026-02-13T11:15:14Z

🐋 This PR was built and pushed to the following Docker images:

Targets: build

Platforms: linux/amd64

Image Tag: a7dc6de7cd0da593a8b7038d6ad153b0e21220a6

gemini-code-assist

Code Review

This pull request introduces comprehensive documentation for OpenTelemetry metrics, complete with new React components for a structured and interactive presentation. The implementation is solid, and the new documentation page is well-organized. I have a few suggestions to enhance semantic correctness, accessibility, and component reusability, primarily concerning the use of an <a> tag for a copy-link action and refactoring the MetricsSection component for better flexibility.

gemini-code-assist · 2026-02-13T11:16:17Z

packages/web/docs/src/components/otel-metrics/metric-card.tsx

+              <button
+                type="button"
+                onClick={() => {
+                  void copyMetricLink();
+                }}
+                className={`hive-focus inline-flex items-center justify-center rounded font-mono text-sm font-semibold leading-none transition-all duration-200 ${isCopied ? 'translate-y-0 text-gray-500 opacity-100 dark:text-slate-500' : 'translate-y-0 text-gray-500 opacity-0 hover:text-gray-700 focus:text-gray-700 group-focus-within:opacity-100 group-hover:opacity-100 dark:text-slate-500 dark:hover:text-slate-200 dark:focus:text-slate-200'}`}
+                aria-label={`Copy link to ${name}`}
+                title="Copy metric link"
+              >
+                {isCopied ? (
+                  <>
+                    <span>✓</span>
+                    <span className="ml-1 text-xs">copied</span>
+                  </>
+                ) : (
+                  '#'
+                )}
+              </button>


For semantic correctness and better accessibility, consider changing this <button> to an <a> tag. The button's content is # and its fallback behavior involves navigation, which are characteristics of a link. Using an <a> tag aligns the element's semantics with its behavior and appearance, adhering to web standards and improving user experience, especially for users of assistive technologies.

<a href={`#${metricId}`} onClick={e => { e.preventDefault(); void copyMetricLink(); }} className={`hive-focus inline-flex items-center justify-center rounded font-mono text-sm font-semibold leading-none transition-all duration-200 ${isCopied ? 'translate-y-0 text-gray-500 opacity-100 dark:text-slate-500' : 'translate-y-0 text-gray-500 opacity-0 hover:text-gray-700 focus:text-gray-700 group-focus-within:opacity-100 group-hover:opacity-100 dark:text-slate-500 dark:hover:text-slate-200 dark:focus:text-slate-200'}`} aria-label={`Copy link to ${name}`} title="Copy metric link" > {isCopied ? ( <> <span>✓</span> <span className="ml-1 text-xs">copied</span> </> ) : ( '#' )} </a>

References

For navigation, use an <a> tag (e.g., via a router's Link component) instead of a <button> element to ensure semantic correctness and accessibility.

gemini-code-assist · 2026-02-13T11:16:17Z

packages/web/docs/src/components/otel-metrics/metrics-section.tsx

+  title?: string;
+  description?: string;


The props title and description are defined in MetricsSectionProps but are not used within the MetricsSection component. They should be removed to keep the component's API clean and avoid confusion for future developers.

gemini-code-assist · 2026-02-13T11:16:17Z

packages/web/docs/src/components/otel-metrics/metrics-section.tsx

+        <div className="space-y-4">
+          <h4 className="mt-8 text-xl font-semibold tracking-tight text-slate-900 dark:text-slate-100">
+            Metrics
+          </h4>
+          <div className="grid gap-4">
+            {metrics.map(metric => (
+              <MetricCard key={metric.name} {...metric} />
+            ))}
+          </div>
+        </div>


The component includes a hardcoded <h4>Metrics</h4> heading. This can lead to incorrect heading hierarchies when used within metrics.mdx (e.g., an h4 as a direct child of another h4) and reduces the component's flexibility. It's better to remove this heading and let the consumer of the component (the MDX file) control the document structure and headings.

<div className="grid gap-4"> {metrics.map(metric => ( <MetricCard key={metric.name} {...metric} /> ))} </div>

github-actions · 2026-02-13T11:17:51Z

💻 Website Preview

The latest changes are available as preview in: https://pr-7696.hive-landing-page.pages.dev

kamilkisiela added 4 commits February 13, 2026 12:09

metrics: wip

21c821c

asd

02b1b0b

sad

40e8fe3

asd

fbadb6d

gemini-code-assist bot reviewed Feb 13, 2026

View reviewed changes

github-actions bot deployed to preview February 13, 2026 11:17 View deployment

asd

f66246f

github-actions bot deployed to preview February 13, 2026 11:53 View deployment

asd

1c6f7d9

github-actions bot deployed to preview February 13, 2026 12:56 View deployment

asd

45d3c3a

github-actions bot deployed to preview February 13, 2026 13:22 View deployment

kamilkisiela added 2 commits February 13, 2026 15:36

asd

45c4300

asd

5f1fe95

github-actions bot deployed to preview February 13, 2026 14:58 View deployment

Update metrics.mdx

22520f2

github-actions bot deployed to preview February 13, 2026 20:46 View deployment

Update metrics.mdx

d53624f

github-actions bot deployed to preview February 16, 2026 11:49 View deployment

Update metrics.mdx

26bfd56

github-actions bot deployed to preview February 16, 2026 13:07 View deployment

kamilkisiela added 2 commits February 16, 2026 16:05

cardinality considirations

d31bf78

Update metrics.mdx

a7dc6de

github-actions bot deployed to preview February 16, 2026 15:15 View deployment

kamilkisiela added the waiting-on:router-release Do not merge: waiting for Router release that includes this feature. label Feb 17, 2026

kamilkisiela marked this pull request as ready for review February 17, 2026 10:53

kamilkisiela mentioned this pull request Feb 17, 2026

Metrics with OpenTelemetry graphql-hive/router#770

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(router): metrics#7696

docs(router): metrics#7696
kamilkisiela wants to merge 14 commits intomainfrom
kamil-router-metrics

kamilkisiela commented Feb 13, 2026 •

edited

Loading

Uh oh!

gemini-code-assist bot commented Feb 13, 2026

Uh oh!

github-actions bot commented Feb 13, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Feb 13, 2026 •

edited

Loading

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Feb 13, 2026

Uh oh!

gemini-code-assist bot Feb 13, 2026

Uh oh!

gemini-code-assist bot Feb 13, 2026

Uh oh!

github-actions bot commented Feb 13, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

1 participant

Conversation

kamilkisiela commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist bot commented Feb 13, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

github-actions bot commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Snapshot Release (alpha)

Uh oh!

github-actions bot commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💻 Website Preview

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

1 participant

kamilkisiela commented Feb 13, 2026 •

edited

Loading

github-actions bot commented Feb 13, 2026 •

edited

Loading

🚀 Snapshot Release (`alpha`)

github-actions bot commented Feb 13, 2026 •

edited

Loading

github-actions bot commented Feb 13, 2026 •

edited

Loading