Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

start fixing dashboards

This commit is contained in:
Nate Kelley 2025-03-18 13:36:58 -06:00
parent 1ac8839aff
commit b47f586afa
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
12 changed files with 72 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/app/embed/dashboards/[dashboardId]/layout.tsx Normal file
View File

@ -0,0 +1,15 @@
import { AppAssetCheckLayout } from '@/layouts/AppAssetCheckLayout';
export default async function EmbedMetricsLayout({
children,
params: { dashboardId }
}: {
children: React.ReactNode;
params: { dashboardId: string };
}) {
return (
<AppAssetCheckLayout type="dashboard" assetId={dashboardId}>
{children}
</AppAssetCheckLayout>
);
}

14
web/src/app/embed/dashboards/[dashboardId]/page.tsx
View File

@ -1,7 +1,11 @@
export default function EmbedDashboardsPage({
params: { dashboardId }
}: {
params: { dashboardId: string };
import { DashboardController } from '@/controllers/DashboardController';
export default async function EmbedDashboardsPage(props: {
params: Promise<{ dashboardId: string }>;
}) {
return <div>EmbedDashboardsPage {dashboardId}</div>;
const params = await props.params;
const { dashboardId } = params;
return <DashboardController dashboardId={dashboardId} />;
}

6
web/src/app/embed/metrics/[metricId]/layout.tsx
View File

@ -2,11 +2,13 @@ import { AppAssetCheckLayout } from '@/layouts/AppAssetCheckLayout';
export default async function EmbedMetricsLayout({
children,
params: { metricId }
params
}: {
children: React.ReactNode;
params: { metricId: string };
params: Promise<{ metricId: string }>;
}) {
const { metricId } = await params;
return (
<AppAssetCheckLayout type="metric" assetId={metricId}>
{children}

1
web/src/components/ui/charts/interfaces/chartComponentInterfaces.ts
View File

@ -40,7 +40,6 @@ export interface BusterChartRenderComponentProps
| 'metricValueLabel'
| 'id'
| 'bordered'
| 'editable'
| 'groupByMethod'
| 'error'
| 'pieChartAxis'

15
web/src/components/ui/grid/BusterResizeColumns.tsx
View File

@ -15,7 +15,7 @@ type ContainerProps = {
items: ResizeableGridDragItem[];
index: number;
columnSizes: number[] | undefined;
allowEdit?: boolean;
readOnly?: boolean;
onRowLayoutChange: (layout: number[], rowId: string) => void;
fluid?: boolean;
};
@ -25,15 +25,15 @@ export const BusterResizeColumns: React.FC<ContainerProps> = ({
onRowLayoutChange = () => {},
index: rowIndex,
columnSizes,
allowEdit = true,
readOnly = true,
items = [],
fluid = true
}) => {
const { setNodeRef, isOver, active, over } = useSortable({
id: rowId,
disabled: !allowEdit
disabled: readOnly
});
const mouse = useMouse({ moveThrottleMs: 50, disabled: !allowEdit || !over });
const mouse = useMouse({ moveThrottleMs: 50, disabled: readOnly || !over });
const [isDragginResizeColumn, setIsDraggingResizeColumn] = useState<number | null>(null);
const columnMarkerColumnIndex = useMemo(
() => (typeof isDragginResizeColumn === 'number' ? isDragginResizeColumn + 1 : null),
@ -97,6 +97,7 @@ export const BusterResizeColumns: React.FC<ContainerProps> = ({
}, [activeDragId, items, active?.id]);
const memoizedStyle = useMemo(() => {
console.log(isOver);
return {
backgroundColor: isOver ? 'rgba(0, 0, 0, 0.25)' : undefined
};
@ -128,7 +129,7 @@ export const BusterResizeColumns: React.FC<ContainerProps> = ({
const sashRender = useMemoizedFn((index: number, active: boolean) => {
return (
<ColumnSash
allowEdit={allowEdit && canResize}
allowEdit={!readOnly && canResize}
isDraggingId={isDragginResizeColumn}
active={active}
index={index}
@ -154,7 +155,7 @@ export const BusterResizeColumns: React.FC<ContainerProps> = ({
autoSizeId="resize-column"
split="vertical"
sizes={sizes}
allowResize={allowEdit && canResize}
allowResize={!readOnly && canResize}
onDragStart={onDragStart}
onDragEnd={onDragEnd}
sashRender={sashRender}
@ -176,7 +177,7 @@ export const BusterResizeColumns: React.FC<ContainerProps> = ({
!!over && insertPosition(item.id, index, mouse.clientX) === Position.Before
}
/>
<BusterSortableItemDragContainer itemId={item.id} allowEdit={allowEdit}>
<BusterSortableItemDragContainer itemId={item.id} allowEdit={!readOnly}>
{item.children}
</BusterSortableItemDragContainer>
<DropzonePlaceholder

22
web/src/components/ui/grid/BusterResizeRows.tsx
View File

@ -13,9 +13,9 @@ import { cn } from '@/lib/classMerge';
export const BusterResizeRows: React.FC<{
rows: BusterResizeableGridRow[];
className: string;
allowEdit?: boolean;
readOnly?: boolean;
onRowLayoutChange: (rows: BusterResizeableGridRow[]) => void;
}> = ({ allowEdit = true, rows, className, onRowLayoutChange }) => {
}> = ({ readOnly = false, rows, className, onRowLayoutChange }) => {
const ref = useRef<HTMLDivElement>(null);
const [isDraggingResizeId, setIsDraggingResizeId] = useState<number | null>(null);
const [sizes, setSizes] = useState<number[]>(rows.map((r) => r.rowHeight ?? MIN_ROW_HEIGHT));
@ -69,7 +69,7 @@ export const BusterResizeRows: React.FC<{
active={false}
setIsDraggingResizeId={setIsDraggingResizeId}
onResize={handleResize}
allowEdit={allowEdit}
readOnly={readOnly}
/>
{rows.map((row, index) => (
@ -83,7 +83,7 @@ export const BusterResizeRows: React.FC<{
rowId={row.id}
items={row.items}
index={index}
allowEdit={allowEdit}
readOnly={readOnly}
columnSizes={row.columnSizes}
onRowLayoutChange={onRowLayoutChangePreflight}
/>
@ -95,13 +95,13 @@ export const BusterResizeRows: React.FC<{
active={isDraggingResizeId === index}
setIsDraggingResizeId={setIsDraggingResizeId}
onResize={handleResize}
allowEdit={allowEdit}
readOnly={readOnly}
hideDropzone={index === rows.length - 1}
/>
</div>
))}
{allowEdit && <BusterNewItemDropzone />}
{!readOnly && <BusterNewItemDropzone />}
</div>
);
};
@ -112,15 +112,15 @@ const ResizeRowHandle: React.FC<{
sizes: number[];
setIsDraggingResizeId: (index: number | null) => void;
onResize: (index: number, size: number) => void;
allowEdit: boolean;
readOnly: boolean;
active: boolean;
top?: boolean; //if true we will not use dragging, just dropzone
hideDropzone?: boolean;
}> = React.memo(
({ hideDropzone, top, id, active, allowEdit, setIsDraggingResizeId, index, sizes, onResize }) => {
({ hideDropzone, top, id, active, readOnly, setIsDraggingResizeId, index, sizes, onResize }) => {
const { setNodeRef, isOver, over } = useDroppable({
id: `${NEW_ROW_ID}_${id}}`,
disabled: !allowEdit,
disabled: readOnly,
data: { id }
});
const showDropzone = !!over?.id && !hideDropzone;
@ -158,14 +158,14 @@ const ResizeRowHandle: React.FC<{
};
}, [top]);
const showActive = (active || isDropzoneActive) && allowEdit;
const showActive = (active || isDropzoneActive) && !readOnly;
return (
<div className="relative">
<div
id={id}
className={cn(
allowEdit && 'hover:bg-border cursor-row-resize',
!readOnly && 'hover:bg-border cursor-row-resize',
showActive && 'bg-primary! z-10 opacity-100',
'h-[4px] w-full rounded-sm transition-colors duration-200 ease-in-out select-none',
!top && 'dragger absolute'

10
web/src/components/ui/grid/BusterResizeableGrid.tsx
View File

@ -44,9 +44,9 @@ export const BusterResizeableGrid: React.FC<{
onStartDrag?: (d: { id: string }) => void;
onEndDrag?: (d: { id: string }) => void;
overlayComponent?: React.ReactNode;
allowEdit?: boolean;
readOnly?: boolean;
}> = ({
allowEdit = true,
readOnly = true,
className = '',
overlayComponent,
rows: serverRows,
@ -57,6 +57,8 @@ export const BusterResizeableGrid: React.FC<{
const [rows, setRows] = useState<BusterResizeableGridRow[]>(serverRows);
const styleRef = useRef<HTMLStyleElement>(undefined);
console.log(serverRows);
const onRowLayoutChangePreflight = useMemoizedFn((newLayout: BusterResizeableGridRow[]) => {
const filteredRows = newRowPreflight(newLayout);
@ -335,12 +337,12 @@ export const BusterResizeableGrid: React.FC<{
<BusterResizeRows
rows={rows}
className={className}
allowEdit={allowEdit}
readOnly={readOnly}
onRowLayoutChange={onRowLayoutChangePreflight}
/>
</div>
{allowEdit && (
{!readOnly && (
<BusterSortableOverlay
activeId={activeId}
overlayComponent={overlayComponent}

4
web/src/components/ui/grid/_BusterSortableOverlay.tsx
View File

@ -65,8 +65,7 @@ export const BusterSortableOverlay: React.FC<{
return (
<DragOverlay
dropAnimation={dropAnimationConfig}
modifiers={[useSnapToCenter ? snapCenterToCursor : adjustTranslate]}
style={{}}>
modifiers={[useSnapToCenter ? snapCenterToCursor : adjustTranslate]}>
{activeId && (
<BusterSortableItemContent
itemId={activeId}
@ -75,7 +74,6 @@ export const BusterSortableOverlay: React.FC<{
style={
{
maxWidth: widthOfItem,
// maxWidth: '320px',
height: '100%',
width: '100%',
'--scale': scale

2
web/src/context/Supabase/getSupabaseServerContext.ts
View File

@ -14,7 +14,7 @@ export const getSupabaseServerContext = async () => {
if (!userData.data?.user) {
const { session: anonSession } = await signInWithAnonymousUser();
return {
user: anonSession?.user,
user: anonSession?.user || null,
accessToken: anonSession?.access_token,
refreshToken: anonSession?.refresh_token,
expiresAt: anonSession?.expires_at

12
web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx
View File

@ -20,7 +20,7 @@ const DEFAULT_EMPTY_METRICS: Record<string, BusterMetric> = {};
const DEFAULT_EMPTY_CONFIG: DashboardConfig = {};
export const DashboardContentController: React.FC<{
allowEdit?: boolean;
readOnly?: boolean;
metrics: BusterDashboardResponse['metrics'] | undefined;
dashboard: BusterDashboardResponse['dashboard'] | undefined;
onUpdateDashboardConfig: ReturnType<typeof useUpdateDashboardConfig>['mutateAsync'];
@ -29,7 +29,7 @@ export const DashboardContentController: React.FC<{
({
onOpenAddContentModal,
dashboard,
allowEdit,
readOnly = false,
metrics = DEFAULT_EMPTY_METRICS,
onUpdateDashboardConfig
}) => {
@ -79,7 +79,7 @@ export const DashboardContentController: React.FC<{
key={item.id}
metricId={item.id}
dashboardId={dashboard!.id}
allowEdit={allowEdit}
readOnly={readOnly}
numberOfMetrics={numberOfMetrics}
/>
)
@ -87,7 +87,7 @@ export const DashboardContentController: React.FC<{
})
};
});
}, [rows]);
}, [rows, readOnly, dashboard?.id]);
const onDragEnd = useMemoizedFn(() => {
setDraggingId(null);
@ -109,7 +109,7 @@ export const DashboardContentController: React.FC<{
<DashboardContentControllerProvider dashboard={dashboard}>
<BusterResizeableGrid
rows={dashboardRows}
allowEdit={allowEdit}
readOnly={readOnly}
onRowLayoutChange={onRowLayoutChange}
onStartDrag={onStartDrag}
onEndDrag={onDragEnd}
@ -117,7 +117,7 @@ export const DashboardContentController: React.FC<{
draggingId && (
<DashboardMetricItem
metricId={draggingId}
allowEdit={false}
readOnly={false}
dashboardId={dashboard.id}
isDragOverlay
numberOfMetrics={numberOfMetrics}

14
web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx
View File

@ -13,9 +13,9 @@ const DashboardMetricItemBase: React.FC<{
numberOfMetrics: number;
className?: string;
isDragOverlay?: boolean;
allowEdit?: boolean;
readOnly?: boolean;
}> = ({
allowEdit,
readOnly,
dashboardId,
className = '',
metricId,
@ -74,10 +74,8 @@ const DashboardMetricItemBase: React.FC<{
return (
<Card
ref={conatinerRef}
className={`metric-item flex h-full w-full flex-col overflow-auto ${className}`}
// classNames={cardClassNamesMemoized}
>
<CardHeader size="small" className="hover:bg-item-hover">
className={`metric-item flex h-full w-full flex-col overflow-auto ${className}`}>
<CardHeader size="small" className="hover:bg-item-hover border-b">
<MetricTitle
title={metric.title}
timeFrame={metric.time_frame}
@ -85,7 +83,7 @@ const DashboardMetricItemBase: React.FC<{
isDragOverlay={isDragOverlay}
metricId={metricId}
dashboardId={dashboardId}
allowEdit={allowEdit}
readOnly={readOnly}
description={metric.description}
/>
</CardHeader>
@ -105,7 +103,7 @@ const DashboardMetricItemBase: React.FC<{
animate={!isDragOverlay && animate}
animateLegend={false}
columnMetadata={metricData?.data_metadata?.column_metadata}
editable={allowEdit} //this is really only to resize the columns of a table
readOnly={true}
{...chartOptions}
/>
)}

8
web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/MetricTitle.tsx
View File

@ -17,11 +17,11 @@ export const MetricTitle: React.FC<{
isDragOverlay: boolean;
metricId: string;
dashboardId: string;
allowEdit?: boolean;
readOnly?: boolean;
}> = React.memo(
({
metricId,
allowEdit = true,
readOnly = true,
dashboardId,
title,
description,
@ -43,6 +43,8 @@ export const MetricTitle: React.FC<{
};
}, [title, useEllipsis]);
console.log(readOnly, isDragOverlay);
return (
<Link href={metricLink}>
<div
@ -58,7 +60,7 @@ export const MetricTitle: React.FC<{
{`${title}`}
</Title>
{isDragOverlay || !allowEdit ? (
{isDragOverlay || readOnly ? (
<></>
) : (
<ThreeDotMenu