mirrors/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime synced 2024-11-21 22:59:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor DashboardCanvas to render DashboardBaseComponentElement for each component

Browse Source
This commit is contained in:
Simon Larsen 2024-10-25 07:57:00 +01:00
parent 82699e5276
commit 95573032e7
No known key found for this signature in database
GPG Key ID: 96C5DCA24769DBCA
3 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
Dashboard/src/Components/Dashboard/Canvas/Index.tsx
View File

@ -4,6 +4,7 @@ import DashboardViewConfig from "Common/Types/Dashboard/DashboardViewConfig";
import DefaultDashboardSize from "Common/Types/Dashboard/DashboardSize";
import DashboardBaseComponent from "Common/Types/Dashboard/DashboardComponents/DashboardBaseComponent";
import BlankDashboardUnitElement from "./DashboardUnit";
import DashboardBaseComponentElement from "../Components/DashboardBaseComponent";
export interface ComponentProps {
dashboardViewConfig: DashboardViewConfig;
@ -61,10 +62,12 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
for (let i = 0; i < canvasHeight; i++) {
for (let j = 0; j < canvasWidth; j++) {
const component: DashboardBaseComponent | null | undefined = grid[i]![j];
if (component && !renderedComponentsIds.includes(component.componentId.toString())) {
renderedComponents.push(renderComponent(component));
renderedComponentsIds.push(component.id);
renderedComponentsIds.push(component.componentId.toString());
}
if (!component) {
@ -73,18 +76,28 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
onDrop={() => { }}
isEditMode={props.isEditMode}
key={`blank-${i}-${j}`} />)
;
}
}
}
// remove nulls from the renderedComponents array
const finalRenderedComponents: Array<ReactElement> = renderedComponents.filter(
(component: ReactElement | null): component is ReactElement => component !== null,
);
const width: number = DefaultDashboardSize.widthInDashboardUnits;
return <div className={`grid grid-cols-${width}`}>
{finalRenderedComponents}
</div>
}
const renderComponent = (component: DashboardBaseComponent): ReactElement => {
return <DashboardBasec
return <DashboardBaseComponentElement isEditMode={props.isEditMode} component={component} key={component.componentId.toString()} />
};
if (!props.dashboardViewConfig || props.dashboardViewConfig.components.length === 0) {

3
Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx
View File

@ -11,6 +11,7 @@ import DashboardTextComponent from './DashboardTextComponent';
export interface ComponentProps {
component: DashboardBaseComponent
isEditMode: boolean
key: string
}
const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
@ -26,7 +27,7 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
return (
<div className={
className
}>
} key={props.key}>
{props.component._type === ObjectType.DashboardTextComponent && <DashboardTextComponent isEditMode={props.isEditMode} component={props.component as DashboardTextComponentType} />}
{props.component._type === ObjectType.DashboardChartComponent && <DashboardChartComponent isEditMode={props.isEditMode} component={props.component as DashboardChartComponentType} />}
{props.component._type === ObjectType.DashboardValueComponent && <DashboardValueComponent isEditMode={props.isEditMode} component={props.component as DashboardValueComponentType} />}

4
Dashboard/src/Components/Dashboard/Components/DashboardValueComponent.tsx
View File

@ -1,8 +1,8 @@
import React, { FunctionComponent, ReactElement } from "react";
import DashboardTextComponent from "Common/Types/Dashboard/DashboardComponents/DashboardTextComponent";
import DashboardValueComponent from "Common/Types/Dashboard/DashboardComponents/DashboardValueComponent";
export interface ComponentProps {
component: DashboardTextComponent;
component: DashboardValueComponent;
isEditMode: boolean
}