Add Metabase integration with token generation API and update navigation
This commit is contained in:
Haqeem Solehan
parent
9bca609235
commit
545f5c6c93
@ -6,13 +6,15 @@ const breadcrumb = computed(() => {
|
||||
let breadcrumb = null;
|
||||
const matched = route.matched;
|
||||
|
||||
console.log("matched:", matched);
|
||||
|
||||
if (matched[matched.length - 1].meta?.breadcrumb) {
|
||||
breadcrumb = matched[matched.length - 1].meta.breadcrumb;
|
||||
} else {
|
||||
// if no breadcrumb in page meta, get breadcrumb from route matched
|
||||
breadcrumb = matched.map((item) => {
|
||||
return {
|
||||
name: item.meta.title,
|
||||
name: item.name,
|
||||
path: item.path,
|
||||
};
|
||||
});
|
||||
@ -33,10 +35,12 @@ const breadcrumb = computed(() => {
|
||||
return breadcrumb;
|
||||
});
|
||||
|
||||
console.log("breadcrumb", breadcrumb);
|
||||
|
||||
// Get title from page meta
|
||||
const title = computed(() => {
|
||||
const matched = route.matched;
|
||||
const title = matched[matched.length - 1].meta.title;
|
||||
const title = matched[matched.length - 1].name;
|
||||
return title;
|
||||
});
|
||||
|
||||
@ -58,11 +62,7 @@ async function navigateMenu(path) {
|
||||
<Icon name="mdi:home" size="16" />
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li
|
||||
v-for="(item, index) in breadcrumb"
|
||||
:key="index"
|
||||
class="flex items-center"
|
||||
>
|
||||
<li v-for="(item, index) in breadcrumb" :key="index" class="flex items-center">
|
||||
<Icon
|
||||
name="mdi:chevron-right"
|
||||
size="16"
|
||||
@ -71,9 +71,9 @@ async function navigateMenu(path) {
|
||||
/>
|
||||
<a
|
||||
@click="navigateMenu(item.path)"
|
||||
class="cursor-pointer capitalize"
|
||||
:class="{
|
||||
'text-gray-500 hover:text-gray-700':
|
||||
index !== breadcrumb.length - 1,
|
||||
'text-gray-500 hover:text-gray-700': index !== breadcrumb.length - 1,
|
||||
'text-primary font-medium': index === breadcrumb.length - 1,
|
||||
}"
|
||||
:aria-current="index === breadcrumb.length - 1 ? 'page' : undefined"
|
||||
|
||||
@ -15,6 +15,12 @@ export default [
|
||||
"path": "/notes",
|
||||
"icon": "",
|
||||
"child": []
|
||||
},
|
||||
{
|
||||
"title": "Metabase",
|
||||
"path": "/metabase",
|
||||
"icon": "",
|
||||
"child": []
|
||||
}
|
||||
],
|
||||
"meta": {}
|
||||
|
||||
@ -5,6 +5,10 @@ export default defineNuxtConfig({
|
||||
secretAccess: process.env.NUXT_ACCESS_TOKEN_SECRET,
|
||||
secretRefresh: process.env.NUXT_REFRESH_TOKEN_SECRET,
|
||||
},
|
||||
metabase: {
|
||||
secretKey: process.env.NUXT_METABASE_SECRET_KEY || "c98a5b005450e699b6d420f46e0062912ac75268716f1298c11d8bb11c291eb0",
|
||||
siteUrl: process.env.NUXT_METABASE_SITE_URL || "http://mb.sena.my",
|
||||
},
|
||||
},
|
||||
modules: [
|
||||
"@nuxtjs/tailwindcss",
|
||||
|
||||
49
pages/metabase/index.vue
Normal file
49
pages/metabase/index.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<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>
|
||||
@ -65,37 +65,37 @@ model userrole {
|
||||
}
|
||||
|
||||
model site_settings {
|
||||
settingID Int @id @default(autoincrement())
|
||||
siteName String? @db.VarChar(255)
|
||||
siteNameFontSize Int? @default(18)
|
||||
siteDescription String? @db.Text
|
||||
siteLogo String? @db.VarChar(500)
|
||||
siteLoadingLogo String? @db.VarChar(500)
|
||||
siteFavicon String? @db.VarChar(500)
|
||||
siteLoginLogo String? @db.VarChar(500)
|
||||
showSiteNameInHeader Boolean? @default(true)
|
||||
primaryColor String? @db.VarChar(50)
|
||||
secondaryColor String? @db.VarChar(50)
|
||||
successColor String? @db.VarChar(50)
|
||||
infoColor String? @db.VarChar(50)
|
||||
warningColor String? @db.VarChar(50)
|
||||
dangerColor String? @db.VarChar(50)
|
||||
customCSS String? @db.Text
|
||||
themeMode String? @db.VarChar(50)
|
||||
customThemeFile String? @db.VarChar(500)
|
||||
currentFont String? @db.VarChar(255)
|
||||
fontSource String? @db.VarChar(500)
|
||||
seoTitle String? @db.VarChar(255)
|
||||
seoDescription String? @db.Text
|
||||
seoKeywords String? @db.Text
|
||||
seoAuthor String? @db.VarChar(255)
|
||||
seoOgImage String? @db.VarChar(500)
|
||||
seoTwitterCard String? @db.VarChar(50) @default("summary_large_image")
|
||||
seoCanonicalUrl String? @db.VarChar(500)
|
||||
seoRobots String? @db.VarChar(100) @default("index, follow")
|
||||
seoGoogleAnalytics String? @db.VarChar(255)
|
||||
seoGoogleTagManager String? @db.VarChar(255)
|
||||
seoFacebookPixel String? @db.VarChar(255)
|
||||
settingCreatedDate DateTime? @db.DateTime(0)
|
||||
settingModifiedDate DateTime? @db.DateTime(0)
|
||||
settingID Int @id @default(autoincrement())
|
||||
siteName String? @db.VarChar(255)
|
||||
siteNameFontSize Int? @default(18)
|
||||
siteDescription String? @db.Text
|
||||
siteLogo String? @db.VarChar(500)
|
||||
siteLoadingLogo String? @db.VarChar(500)
|
||||
siteFavicon String? @db.VarChar(500)
|
||||
showSiteNameInHeader Boolean? @default(true)
|
||||
primaryColor String? @db.VarChar(50)
|
||||
secondaryColor String? @db.VarChar(50)
|
||||
successColor String? @db.VarChar(50)
|
||||
infoColor String? @db.VarChar(50)
|
||||
warningColor String? @db.VarChar(50)
|
||||
dangerColor String? @db.VarChar(50)
|
||||
customCSS String? @db.Text
|
||||
themeMode String? @db.VarChar(50)
|
||||
customThemeFile String? @db.VarChar(500)
|
||||
currentFont String? @db.VarChar(255)
|
||||
fontSource String? @db.VarChar(500)
|
||||
seoTitle String? @db.VarChar(255)
|
||||
seoDescription String? @db.Text
|
||||
seoKeywords String? @db.Text
|
||||
seoAuthor String? @db.VarChar(255)
|
||||
seoOgImage String? @db.VarChar(500)
|
||||
seoTwitterCard String? @default("summary_large_image") @db.VarChar(50)
|
||||
seoCanonicalUrl String? @db.VarChar(500)
|
||||
seoRobots String? @default("index, follow") @db.VarChar(100)
|
||||
seoGoogleAnalytics String? @db.VarChar(255)
|
||||
seoGoogleTagManager String? @db.VarChar(255)
|
||||
seoFacebookPixel String? @db.VarChar(255)
|
||||
settingCreatedDate DateTime? @db.DateTime(0)
|
||||
settingModifiedDate DateTime? @db.DateTime(0)
|
||||
siteLoginLogo String? @db.VarChar(500)
|
||||
}
|
||||
|
||||
28
server/api/metabase/token.get.js
Normal file
28
server/api/metabase/token.get.js
Normal file
@ -0,0 +1,28 @@
|
||||
import jwt from "jsonwebtoken";
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const config = useRuntimeConfig();
|
||||
|
||||
const METABASE_SECRET_KEY = config.metabase.secretKey;
|
||||
|
||||
const payload = {
|
||||
resource: { dashboard: 2 },
|
||||
params: {},
|
||||
exp: Math.round(Date.now() / 1000) + 10 * 60, // 10 minute expiration
|
||||
};
|
||||
|
||||
try {
|
||||
const token = jwt.sign(payload, METABASE_SECRET_KEY);
|
||||
|
||||
return {
|
||||
success: true,
|
||||
token: token,
|
||||
siteUrl: config.metabase.siteUrl
|
||||
};
|
||||
} catch (error) {
|
||||
throw createError({
|
||||
statusCode: 500,
|
||||
statusMessage: 'Failed to generate Metabase token'
|
||||
});
|
||||
}
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user