feat(graph): add Federation Graph page and enhance coverage

Adds a new Federation Graph page to display subgraphs and their schemas. Implements loading state and error handling. Enhances coverage reporting by including 'lcov' format for better insights into test coverage metrics.
2025-11-22 19:49:53 +01:00
parent 535a516732
commit 5dc29141d5
10 changed files with 382 additions and 12 deletions
@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <v-row>
+      <v-col cols="12">
+        <div class="d-flex align-center mb-4">
+          <v-btn
+            icon="mdi-arrow-left"
+            variant="text"
+            @click="$router.back()"
+          />
+          <h1 class="text-h4 ml-2">
+            Federation Graph: {{ route.params.ref }}
+          </h1>
+        </div>
+      </v-col>
+    </v-row>
+
+    <v-row v-if="loading">
+      <v-col cols="12" class="text-center py-12">
+        <v-progress-circular indeterminate color="primary" size="64" />
+        <p class="mt-4">
+          Loading federation graph...
+        </p>
+      </v-col>
+    </v-row>
+
+    <v-row v-else-if="supergraphData">
+      <v-col cols="12">
+        <v-card>
+          <v-card-title>Subgraphs in Federation</v-card-title>
+          <v-card-text>
+            <v-list>
+              <v-list-item
+                v-for="subgraph in subgraphs"
+                :key="subgraph.service"
+                :title="subgraph.service"
+                :subtitle="`URL: ${subgraph.url}`"
+              >
+                <template #prepend>
+                  <v-icon icon="mdi-cube-outline" />
+                </template>
+              </v-list-item>
+            </v-list>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12">
+        <v-card>
+          <v-card-title class="d-flex justify-space-between align-center">
+            <span>Federation Schema (SDL)</span>
+            <v-btn
+              icon="mdi-content-copy"
+              variant="text"
+              size="small"
+              @click="copySupergraph"
+            />
+          </v-card-title>
+          <v-card-text>
+            <pre class="sdl-viewer"><code>{{ supergraphData.sdl }}</code></pre>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-row v-else>
+      <v-col cols="12" class="text-center py-12">
+        <v-icon icon="mdi-alert-circle" size="64" class="mb-4 text-warning" />
+        <p class="text-h6">
+          No federation graph available
+        </p>
+      </v-col>
+    </v-row>
+
+    <v-snackbar v-model="snackbar" :timeout="3000">
+      {{ snackbarText }}
+    </v-snackbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSupergraphQuery } from '~/graphql/generated'
+
+const route = useRoute()
+const loading = ref(true)
+const snackbar = ref(false)
+const snackbarText = ref('')
+
+const { result, loading: queryLoading } = useSupergraphQuery(() => ({
+  ref: route.params.ref as string,
+  isAfter: null,
+}))
+
+const supergraphData = computed(() => result.value?.supergraph)
+const subgraphs = computed(() => supergraphData.value?.subgraphs || [])
+
+watch(queryLoading, (newLoading) => {
+  loading.value = newLoading
+})
+
+const copySupergraph = async () => {
+  try {
+    await navigator.clipboard.writeText(supergraphData.value?.sdl || '')
+    snackbarText.value = 'Supergraph SDL copied to clipboard'
+    snackbar.value = true
+  } catch (_err) {
+    snackbarText.value = 'Failed to copy'
+    snackbar.value = true
+  }
+}
+</script>
+
+<style scoped>
+.sdl-viewer {
+  background: #f5f5f5;
+  padding: 16px;
+  border-radius: 4px;
+  overflow: auto;
+  font-family: Monaco, Menlo, 'Ubuntu Mono', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  max-height: 60vh;
+}
+</style>