Merge pull request #8 from tinybirdco/multi-tenant-00

add multi-tenancy by org name

Author: alrocar

dashboard/ai-analytics/src/app/components/TabbedPane.tsx

@@ -6,15 +6,18 @@ import { useSearchParams } from 'next/navigation';
 import BarList from './BarList';
 import { useState, useEffect } from 'react';
 import { tabs } from '../constants';
+import { useTinybirdToken } from '@/providers/TinybirdProvider';
 
 interface TabbedPaneProps {
   filters: Record<string, string>;
   onFilterUpdate: (dimension: string, name: string, values: string[]) => void;
 }
 
 export default function TabbedPane({ filters, onFilterUpdate }: TabbedPaneProps) {
+  const { orgName } = useTinybirdToken();
   const searchParams = useSearchParams();
-  const initialDimension = searchParams.get('dimension') || tabs[0].key;
+  const filteredTabs = tabs.filter(tab => !orgName || tab.key !== 'organization');
+  const initialDimension = searchParams.get('dimension') || filteredTabs[0].key;
   const [selectedTab, setSelectedTab] = useState<string>(initialDimension);
   const [barListData, setBarListData] = useState<Array<{ name: string; value: number }>>([]);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -50,7 +53,7 @@ export default function TabbedPane({ filters, onFilterUpdate }: TabbedPaneProps)
     window.history.replaceState({}, '', `?${params.toString()}`);
 
     // Notify parent to update filters
-    onFilterUpdate(selectedTab, tabs.find(t => t.key === selectedTab)?.name || selectedTab, newSelection);
+    onFilterUpdate(selectedTab, filteredTabs.find(t => t.key === selectedTab)?.name || selectedTab, newSelection);
   };
 
   // const handleRemoveFilter = (dimension: string, value: string) => {
@@ -59,7 +62,7 @@ export default function TabbedPane({ filters, onFilterUpdate }: TabbedPaneProps)
   // };
 
   const handleTabChange = (index: number) => {
-    const tab = tabs[index];
+    const tab = filteredTabs[index];
     const dimension = tab.key;
 
     // Update URL without scroll
@@ -85,11 +88,11 @@ export default function TabbedPane({ filters, onFilterUpdate }: TabbedPaneProps)
   return (
     <div className="h-full">
       <TabGroup 
-        defaultIndex={tabs.findIndex(t => t.key === selectedTab)}
+        defaultIndex={filteredTabs.findIndex(t => t.key === selectedTab)}
         onIndexChange={handleTabChange}
       >
         <TabList className="flex space-x-2">
-          {tabs.map((tab) => (
+          {filteredTabs.map((tab) => (
             <Tab
               key={tab.key}
               // @ts-expect-error fix later

dashboard/ai-analytics/src/app/components/TimeseriesChart.tsx

@@ -10,6 +10,7 @@ import {
   TabPanels,
 } from '@tremor/react';
 import { useSearchParams, useRouter } from 'next/navigation';
+import { useTinybirdToken } from '@/providers/TinybirdProvider';
 
 function classNames(...classes: (string | undefined | null | false)[]) {
   return classes.filter(Boolean).join(' ');
@@ -42,6 +43,7 @@ interface TimeseriesChartProps {
 export default function TimeseriesChart({ data, filters, onFiltersChange }: TimeseriesChartProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const { orgName } = useTinybirdToken();
 
   // Add null check for data
   if (!data?.data) {
@@ -107,8 +109,8 @@ export default function TimeseriesChart({ data, filters, onFiltersChange }: Time
       })),
     },
     {
-      name: 'Organization',
-      key: 'organization',
+      name: 'Environment',
+      key: 'environment',
       data: transformedData,
       categories: models,
       colors: defaultColors,
@@ -119,10 +121,13 @@ export default function TimeseriesChart({ data, filters, onFiltersChange }: Time
           .reduce((sum, item) => sum + item.total_cost, 0),
         color: `bg-${defaultColors[models.indexOf(model) % defaultColors.length]}-500`,
       })),
-    },
-    {
-      name: 'Environment',
-      key: 'environment',
+    }
+  ];
+
+  if (!orgName) {
+    tabs.push({
+      name: 'Organization',
+      key: 'organization',
       data: transformedData,
       categories: models,
       colors: defaultColors,
@@ -133,8 +138,8 @@ export default function TimeseriesChart({ data, filters, onFiltersChange }: Time
           .reduce((sum, item) => sum + item.total_cost, 0),
         color: `bg-${defaultColors[models.indexOf(model) % defaultColors.length]}-500`,
       })),
-    }
-  ];
+    })
+  }
 
   const handleTabChange = (index: number) => {
     const tab = tabs[index];

dashboard/ai-analytics/src/app/components/TopBar.tsx

@@ -3,6 +3,7 @@
 import { useSearchParams, useRouter } from 'next/navigation';
 import { SignInButton, SignUpButton, UserButton, SignedIn, SignedOut } from "@clerk/nextjs";
 import FilterChips from './FilterChips';
+import { useTinybirdToken } from '@/providers/TinybirdProvider';
 
 interface Selection {
   dimension: string;
@@ -18,6 +19,7 @@ interface TopBarProps {
 export default function TopBar({ selections, onRemoveFilter }: TopBarProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const { orgName } = useTinybirdToken();
 
   const handleRemoveFilter = (dimension: string, value: string) => {
     // Get current params
@@ -44,6 +46,9 @@ export default function TopBar({ selections, onRemoveFilter }: TopBarProps) {
   return (
     <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800">
       <div className="flex items-center space-x-4">
+        <span className="text-sm font-medium text-gray-500 dark:text-gray-400">
+          {orgName || 'Admin User'}
+        </span>
         {selections.map((selection) => (
           selection.values.map((value) => (
             <FilterChips

dashboard/ai-analytics/src/app/layout.tsx

@@ -9,22 +9,21 @@ import { useTinybirdToken } from '@/providers/TinybirdProvider'
 const inter = Inter({ subsets: ["latin"] })
 
 function RootLayoutContent({ children }: { children: React.ReactNode }) {
-  const { setToken } = useTinybirdToken()
+  const { setToken, setOrgName } = useTinybirdToken()
   const [isReady, setIsReady] = useState(false)
 
   useEffect(() => {
-    console.log('Fetching token...');
     fetch(window.location.pathname)
       .then(response => {
         const token = response.headers.get('x-tinybird-token')
-        console.log('Got token:', token);
+        const orgName = response.headers.get('x-org-name')
         if (token) {
-          console.log('Setting token...');
           setToken(token)
+          setOrgName(orgName || '')
           setIsReady(true)
         }
       })
-  }, [setToken])
+  }, [setToken, setOrgName])
 
   if (!isReady) return <div>Loading...</div>
 

dashboard/ai-analytics/src/middleware.ts

@@ -21,7 +21,7 @@ export default clerkMiddleware(async (auth) => {
     // const sessionToken = await authentication.getToken({
     //   template: "tinybird-logs-explorer"  // This is key for getting org data
     // })
-    const orgName = orgPermissions?.[0]?.split(':').pop()
+    const orgName = orgPermissions?.[0]?.split(':').pop() || ''
 
     // Create Tinybird JWT
     const secret = new TextEncoder().encode(process.env.TINYBIRD_JWT_SECRET)
@@ -59,7 +59,7 @@ export default clerkMiddleware(async (auth) => {
     // Clone the response and add token
     const response = NextResponse.next()
     response.headers.set('x-tinybird-token', token)
-    
+    response.headers.set('x-org-name', orgName)
     return response
   } catch (error) {
     console.error('Middleware error:', error)

dashboard/ai-analytics/src/providers/TinybirdProvider.tsx

@@ -5,7 +5,9 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 interface TinybirdContextType {
   token: string | null;
+  orgName: string | null;
   setToken: (token: string) => void;
+  setOrgName: (orgName: string) => void;
 }
 
 const TinybirdContext = createContext<TinybirdContextType | null>(null);
@@ -14,9 +16,10 @@ const queryClient = new QueryClient();
 
 export function TinybirdProvider({ children }: { children: ReactNode }) {
   const [token, setToken] = useState<string | null>(null);
+  const [orgName, setOrgName] = useState<string | null>(null);
 
   return (
-    <TinybirdContext.Provider value={{ token, setToken }}>
+    <TinybirdContext.Provider value={{ token, orgName, setToken, setOrgName }}>
       <QueryClientProvider client={queryClient}>
         {children}
       </QueryClientProvider>
@@ -26,6 +29,8 @@ export function TinybirdProvider({ children }: { children: ReactNode }) {
 
 export function useTinybirdToken() {
   const context = useContext(TinybirdContext);
-  if (!context) throw new Error('useTinybirdToken must be used within TinybirdProvider');
+  if (!context) {
+    throw new Error('useTinybirdToken must be used within TinybirdProvider');
+  }
   return context;
 }