50 lines
1.3 KiB
Vue
50 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<LayoutsBreadcrumb />
|
|
|
|
<section class="flex flex-col h-screen">
|
|
<div class="mb-4 flex-shrink-0">
|
|
<h3>Metabase</h3>
|
|
<p>
|
|
Metabase is a powerful data visualization and analytics tool that allows you to
|
|
create and share dashboards, reports, and visualizations with your team.
|
|
</p>
|
|
</div>
|
|
|
|
<div v-if="pending" class="flex justify-center items-center flex-1">
|
|
<div class="text-lg">Loading Metabase dashboard...</div>
|
|
</div>
|
|
<div v-else-if="error" class="flex justify-center items-center flex-1">
|
|
<div class="text-red-500">Error loading dashboard: {{ error.message }}</div>
|
|
</div>
|
|
<iframe
|
|
v-else
|
|
:src="iframeUrl"
|
|
frameborder="0"
|
|
width="100%"
|
|
class="flex-1"
|
|
allowtransparency
|
|
/>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// Fetch the JWT token from our server API
|
|
const { data: tokenData, pending, error } = await useFetch("/api/metabase/token");
|
|
|
|
const iframeUrl = computed(() => {
|
|
if (tokenData.value?.token && tokenData.value?.siteUrl) {
|
|
return (
|
|
tokenData.value.siteUrl +
|
|
"/embed/dashboard/" +
|
|
tokenData.value.token +
|
|
"#bordered=true&titled=true"
|
|
);
|
|
}
|
|
return "";
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|