125 lines
3.2 KiB
Vue
125 lines
3.2 KiB
Vue
|
<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>
|