From 96731d86d0e34ac680a83104feadc96a6f9cb20f Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Tue, 18 Mar 2025 14:19:56 -0600 Subject: [PATCH] embeddable dashboard --- web/src/api/createInstance.ts | 1 - .../embed/dashboards/[dashboardId]/page.tsx | 19 ++++++++++++------- web/src/app/embed/metrics/[metricId]/page.tsx | 2 +- .../ui/grid/BusterResizeColumns.tsx | 1 + .../DashboardController.tsx | 5 ++++- .../DashboardEditTitle.tsx | 18 +++++++----------- .../DashboardViewDashboardController.tsx | 11 ++++++++--- .../controllers/DashboardController/config.ts | 1 + 8 files changed, 34 insertions(+), 24 deletions(-) diff --git a/web/src/api/createInstance.ts b/web/src/api/createInstance.ts index aa967e077..7dac4c57a 100644 --- a/web/src/api/createInstance.ts +++ b/web/src/api/createInstance.ts @@ -1,4 +1,3 @@ -import { BusterRoutes } from '@/routes/busterRoutes/busterRoutes'; import axios, { AxiosError } from 'axios'; import { rustErrorHandler } from './buster_rest/errors'; import { AxiosRequestHeaders } from 'axios'; diff --git a/web/src/app/embed/dashboards/[dashboardId]/page.tsx b/web/src/app/embed/dashboards/[dashboardId]/page.tsx index 561dac4a4..2465651b0 100644 --- a/web/src/app/embed/dashboards/[dashboardId]/page.tsx +++ b/web/src/app/embed/dashboards/[dashboardId]/page.tsx @@ -1,11 +1,16 @@ -import { DashboardController } from '@/controllers/DashboardController'; +'use client'; -export default async function EmbedDashboardsPage(props: { - params: Promise<{ dashboardId: string }>; -}) { - const params = await props.params; +import { useGetDashboard } from '@/api/buster_rest/dashboards'; +import { CircleSpinnerLoaderContainer } from '@/components/ui/loaders'; +import { DashboardViewDashboardController } from '@/controllers/DashboardController/DashboardViewDashboardController'; - const { dashboardId } = params; +export default function EmbedDashboardsPage(props: { params: { dashboardId: string } }) { + const { dashboardId } = props.params; + const { isFetched: isFetchedDashboard } = useGetDashboard(dashboardId); - return ; + if (!isFetchedDashboard) { + return ; + } + + return ; } diff --git a/web/src/app/embed/metrics/[metricId]/page.tsx b/web/src/app/embed/metrics/[metricId]/page.tsx index 048e5e8f5..39b904c85 100644 --- a/web/src/app/embed/metrics/[metricId]/page.tsx +++ b/web/src/app/embed/metrics/[metricId]/page.tsx @@ -6,7 +6,7 @@ import { MetricViewChart } from '@/controllers/MetricController/MetricViewChart/ export default function EmbedMetricsPage({ params }: { params: { metricId: string } }) { const { metricId } = params; - const { data, isFetched, error } = useGetMetric(metricId); + const { isFetched } = useGetMetric(metricId); if (!isFetched) { return ; diff --git a/web/src/components/ui/grid/BusterResizeColumns.tsx b/web/src/components/ui/grid/BusterResizeColumns.tsx index 0f1b905ff..ab4798ac4 100644 --- a/web/src/components/ui/grid/BusterResizeColumns.tsx +++ b/web/src/components/ui/grid/BusterResizeColumns.tsx @@ -9,6 +9,7 @@ import { BusterDragColumnMarkers } from './_BusterDragColumnMarkers'; import { calculateColumnSpan, columnSpansToPercent } from './config'; import SplitPane, { Pane } from '../layouts/AppSplitter/SplitPane'; import { cn } from '@/lib/classMerge'; +import '../layouts/AppSplitter/splitterStyles.css'; type ContainerProps = { rowId: string; diff --git a/web/src/controllers/DashboardController/DashboardController.tsx b/web/src/controllers/DashboardController/DashboardController.tsx index 3ada2e9c9..5ffa990c0 100644 --- a/web/src/controllers/DashboardController/DashboardController.tsx +++ b/web/src/controllers/DashboardController/DashboardController.tsx @@ -8,7 +8,10 @@ import { AddTypeModal } from '@/components/features/modal/AddTypeModal'; import { useMemoizedFn } from '@/hooks'; import { useGetDashboard } from '@/api/buster_rest/dashboards'; -export const DashboardController: React.FC<{ dashboardId: string }> = ({ dashboardId }) => { +export const DashboardController: React.FC<{ dashboardId: string; readOnly?: boolean }> = ({ + dashboardId, + readOnly = false +}) => { const { data: dashboardResponse, isFetched: isFetchedDashboard } = useGetDashboard(dashboardId); const selectedFileView = useChatLayoutContextSelector((x) => x.selectedFileView) || 'dashboard'; const [openAddTypeModal, setOpenAddTypeModal] = useState(false); diff --git a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardEditTitle.tsx b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardEditTitle.tsx index 9cbeba456..dbd1708fb 100644 --- a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardEditTitle.tsx +++ b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardEditTitle.tsx @@ -10,20 +10,16 @@ export const DashboardEditTitles: React.FC<{ title: string; onUpdateDashboard: ReturnType['mutateAsync']; description: string; - allowEdit?: boolean; + readOnly?: boolean; dashboardId: string; -}> = React.memo(({ onUpdateDashboard, allowEdit, title, description, dashboardId }) => { +}> = React.memo(({ onUpdateDashboard, readOnly, title, description, dashboardId }) => { const onChangeTitle = useMemoizedFn((name: string) => { - onUpdateDashboard({ name, id: dashboardId }); - }); - - const onChangeDescription = useMemoizedFn((description: string) => { - onUpdateDashboard({ description, id: dashboardId }); + if (!readOnly) onUpdateDashboard({ name, id: dashboardId }); }); const onChangeDashboardDescription = useMemoizedFn( (value: React.ChangeEvent) => { - onChangeDescription(value.target.value); + if (!readOnly) onUpdateDashboard({ description: value.target.value, id: dashboardId }); } ); @@ -31,7 +27,7 @@ export const DashboardEditTitles: React.FC<{
- {(description || allowEdit) && ( + {(description || !readOnly) && ( = ({ dashboardId }) => { +export const DashboardViewDashboardController: React.FC = ({ + dashboardId, + readOnly = false +}) => { const isAnonymousUser = useUserConfigContextSelector((state) => state.isAnonymousUser); const { data: dashboardResponse } = useGetDashboard(dashboardId); const { mutateAsync: onUpdateDashboard } = useUpdateDashboard(); const { mutateAsync: onUpdateDashboardConfig } = useUpdateDashboardConfig(); const [openAddContentModal, setOpenAddContentModal] = useState(false); - const allowEdit = dashboardResponse?.permission !== ShareRole.VIEWER && !isAnonymousUser; + const allowEdit = + !readOnly && dashboardResponse?.permission !== ShareRole.VIEWER && !isAnonymousUser; const metrics = dashboardResponse?.metrics; const dashboard = dashboardResponse?.dashboard; @@ -33,7 +37,7 @@ export const DashboardViewDashboardController: React.FC = ({ @@ -43,6 +47,7 @@ export const DashboardViewDashboardController: React.FC = ({ dashboard={dashboard} onUpdateDashboardConfig={onUpdateDashboardConfig} onOpenAddContentModal={onOpenAddContentModal} + readOnly={readOnly} />
); diff --git a/web/src/controllers/DashboardController/config.ts b/web/src/controllers/DashboardController/config.ts index 4d7e8570a..43c321689 100644 --- a/web/src/controllers/DashboardController/config.ts +++ b/web/src/controllers/DashboardController/config.ts @@ -5,6 +5,7 @@ import React from 'react'; export interface DashboardViewProps { dashboardId: string; + readOnly?: boolean; } export const DashboardViewComponents: Record> = {