github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

Refactor DashboardComponentType enum to fix casing and add missing newline at end of file

Browse Source
This commit is contained in:
Simon Larsen
2024-10-24 17:23:34 +01:00
parent 8f2da2bdc5
commit b31ffab577
13 changed files with 107 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
Common/Types/Dashboard/Chart/ChartType.ts
View File

@@ -1,3 +1,6 @@
type ChartType = "line" | "bar"; // | "pie" | "doughnut" | "radar" | "polarArea" | "bubble" | "scatter";
enum DashboardChartType {
Line = "Line",
Bar = "Bar",
}
export default ChartType;
export default DashboardChartType;

11
Common/Types/Dashboard/DashboardComponentType.ts
View File

@@ -1,8 +1,7 @@
enum DashboardComponentType {
Chart = `Chart`,
Value = `Value`,
Text = `Text`,
enum DashboardComponentType {
Chart = `Chart`,
Value = `Value`,
Text = `Text`,
}
export default DashboardComponentType;
export default DashboardComponentType;

2
Common/Types/JSON.ts
View File

@@ -65,7 +65,7 @@ export enum ObjectType {
IsNull = "IsNull",
Includes = "Includes",
// Dashboard Components.
// Dashboard Components.
DashboardViewConfig = "DashboardViewConfig",
DashboardTextComponent = "DashboardTextComponent",
DashboardValueComponent = "DashboardValueComponent",

16
Common/UI/Components/Button/Button.tsx
View File

@@ -22,7 +22,7 @@ export enum ButtonStyleType {
ICON,
HOVER_DANGER_OUTLINE,
HOVER_SUCCESS_OUTLINE,
HOVER_PRIMARY_OUTLINE
HOVER_PRIMARY_OUTLINE,
}
export enum ButtonSize {
@@ -176,21 +176,25 @@ const Button: FunctionComponent<ComponentProps> = ({
} focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2`;
}
if (buttonStyle === ButtonStyleType.OUTLINE || buttonStyle === ButtonStyleType.HOVER_DANGER_OUTLINE || buttonStyle === ButtonStyleType.HOVER_SUCCESS_OUTLINE || buttonStyle === ButtonStyleType.HOVER_PRIMARY_OUTLINE) {
if (
buttonStyle === ButtonStyleType.OUTLINE ||
buttonStyle === ButtonStyleType.HOVER_DANGER_OUTLINE ||
buttonStyle === ButtonStyleType.HOVER_SUCCESS_OUTLINE ||
buttonStyle === ButtonStyleType.HOVER_PRIMARY_OUTLINE
) {
buttonStyleCssClass = `flex btn-outline-secondary background-very-light-Gray500-on-hover sm:text-sm ml-1`;
if(buttonStyle === ButtonStyleType.HOVER_DANGER_OUTLINE){
if (buttonStyle === ButtonStyleType.HOVER_DANGER_OUTLINE) {
buttonStyleCssClass += ` hover:text-red-500`;
}
if(buttonStyle === ButtonStyleType.HOVER_SUCCESS_OUTLINE){
if (buttonStyle === ButtonStyleType.HOVER_SUCCESS_OUTLINE) {
buttonStyleCssClass += ` hover:text-green-500`;
}
if(buttonStyle === ButtonStyleType.HOVER_PRIMARY_OUTLINE){
if (buttonStyle === ButtonStyleType.HOVER_PRIMARY_OUTLINE) {
buttonStyleCssClass += ` hover:text-indigo-500`;
}
}
if (buttonStyle === ButtonStyleType.SUCCESS) {

8
Common/Utils/Dashboard/Components/DashboardBaseComponent.ts Normal file
View File

@@ -0,0 +1,8 @@
import DashboardBaseComponent from "../../../Types/Dashboard/DashboardComponents/DashboardBaseComponent";
import NotImplementedException from "../../../Types/Exception/NotImplementedException";
export default class DashboardBaseComponentUtil {
public static getDefaultComponent(): DashboardBaseComponent {
throw new NotImplementedException();
}
}

20
Common/Utils/Dashboard/Components/DashboardChartComponent.ts
View File

@@ -1,15 +1,19 @@
import DashboardViewConfig from "../../../Types/Dashboard/DashboardViewConfig";
import DashboardChartComponent from "../../../Types/Dashboard/DashboardComponents/DashboardchartComponent";
import { ObjectType } from "../../../Types/JSON";
import ObjectID from "../../../Types/ObjectID";
import DashboardBaseComponentUtil from "./DashboardBaseComponent";
import DashboardChartType from "../../../Types/Dashboard/Chart/ChartType";
export default class DashboardChartComponentConfigUtil {
public static createDefaultDashboardViewConfig(): DashboardChar {
export default class DashboardChartComponentUtil extends DashboardBaseComponentUtil {
public static override getDefaultComponent(): DashboardChartComponent {
return {
_type: ObjectType.DashboardChartComponent,
components: [],
widthInDashboardUnits: 3,
heightInDashboardUnits: 1,
topInDashboardUnits: 0,
leftInDashboardUnits: 0,
componentId: ObjectID.generate(),
chartType: DashboardChartType.Line,
};
}
public static addDefaultChartComponent(): DashboardViewConfig {
}
}

25
Common/Utils/Dashboard/Components/DashboardTextComponent.ts
View File

@@ -1,17 +1,18 @@
import DashboardTextComponent from "../../../Types/Dashboard/DashboardComponents/DashboardTextComponent";
import { ObjectType } from "../../../Types/JSON";
import ObjectID from "../../../Types/ObjectID";
import DashboardBaseComponentUtil from "./DashboardBaseComponent";
export default class DashboardViewConfigUtil {
public static getDefaultDashboardTextComponent(): DashboardTextComponent {
return {
_type: ObjectType.DashboardTextComponent,
widthInDashboardUnits: 3,
heightInDashboardUnits: 1,
topInDashboardUnits: 0,
leftInDashboardUnits: 0,
text: "Hello, World!",
componentId: ObjectID.generate()
};
}
export default class DashboardTextComponentUtil extends DashboardBaseComponentUtil {
public static override getDefaultComponent(): DashboardTextComponent {
return {
_type: ObjectType.DashboardTextComponent,
widthInDashboardUnits: 3,
heightInDashboardUnits: 1,
topInDashboardUnits: 0,
leftInDashboardUnits: 0,
text: "Hello, World!",
componentId: ObjectID.generate(),
};
}
}

18
Common/Utils/Dashboard/Components/DashboardValueComponent.ts
View File

@@ -1,15 +1,17 @@
import DashboardValueComponent from "../../../Types/Dashboard/DashboardComponents/DashboardValueComponent";
import { ObjectType } from "../../../Types/JSON";
import DashboardViewConfig from "../../Types/Dashboard/DashboardViewConfig";
import ObjectID from "../../../Types/ObjectID";
import DashboardBaseComponentUtil from "./DashboardBaseComponent";
export default class DashboardViewConfigUtil {
public static createDefaultDashboardViewConfig(): DashboardViewConfig {
export default class DashboardValueComponentUtil extends DashboardBaseComponentUtil {
public static override getDefaultComponent(): DashboardValueComponent {
return {
_type: ObjectType.DashboardValueComponent,
components: [],
widthInDashboardUnits: 3,
heightInDashboardUnits: 1,
topInDashboardUnits: 0,
leftInDashboardUnits: 0,
componentId: ObjectID.generate(),
};
}
public static addDefaultChartComponent(): DashboardViewConfig {
}
}

4
Common/Utils/Dashboard/DashboardViewConfig.ts
View File

@@ -8,7 +8,5 @@ export default class DashboardViewConfigUtil {
};
}
public static addDefaultChartComponent(): DashboardViewConfig {
}
public static addDefaultChartComponent(): DashboardViewConfig {}
}

20
Dashboard/src/Components/Dashboard/Canvas/BlankCanvas.tsx
View File

@@ -13,15 +13,17 @@ const BlankCanvasElement: FunctionComponent<ComponentProps> = (
return (
<div className="">
{Array.from(Array(defaultHeight).keys()).map((_: number, index: number) => {
return (
<BlankRowElement
key={index}
rowNumber={index}
onDrop={props.onDrop}
/>
);
})}
{Array.from(Array(defaultHeight).keys()).map(
(_: number, index: number) => {
return (
<BlankRowElement
key={index}
rowNumber={index}
onDrop={props.onDrop}
/>
);
},
)}
</div>
);
};

22
Dashboard/src/Components/Dashboard/Canvas/BlankRow.tsx
View File

@@ -14,16 +14,18 @@ const BlankRowElement: FunctionComponent<ComponentProps> = (
return (
<div className="flex">
{Array.from(Array(defaultRowLength).keys()).map((_: number, index: number) => {
return (
<DashboardUnitElement
key={index}
onDrop={() => {
props.onDrop(props.rowNumber, index);
}}
/>
);
})}
{Array.from(Array(defaultRowLength).keys()).map(
(_: number, index: number) => {
return (
<DashboardUnitElement
key={index}
onDrop={() => {
props.onDrop(props.rowNumber, index);
}}
/>
);
},
)}
</div>
);
};

5
Dashboard/src/Components/Dashboard/DashboardView.tsx
View File

@@ -9,7 +9,6 @@ export interface ComponentProps {}
const DashboardViewer: FunctionComponent<ComponentProps> = (
_props: ComponentProps,
): ReactElement => {
const [dashboardMode, setDashboardMode] = useState<DashboardMode>(
DashboardMode.View,
);
@@ -27,9 +26,7 @@ const DashboardViewer: FunctionComponent<ComponentProps> = (
onEditClick={() => {
setDashboardMode(DashboardMode.Edit);
}}
onAddComponentClick={(componentType: DashboardComponentType) => {
}}
onAddComponentClick={(componentType: DashboardComponentType) => {}}
/>
<DashboardCanvas />
</div>

27
Dashboard/src/Components/Dashboard/Toolbar/DashboardToolbar.tsx
View File

@@ -39,15 +39,24 @@ const DashboardToolbar: FunctionComponent<ComponentProps> = (
<div className="flex">
{isEditMode ? (
<MoreMenu menuIcon={IconProp.Add} text="Add Component">
<MoreMenuItem text={"Add Chart"} onClick={() => {
props.onAddComponentClick(DashboardComponentType.Chart);
}} />
<MoreMenuItem text={"Add Value"} onClick={() => {
props.onAddComponentClick(DashboardComponentType.Value);
}} />
<MoreMenuItem text={"Add Text"} onClick={() => {
props.onAddComponentClick(DashboardComponentType.Text);
}} />
<MoreMenuItem
text={"Add Chart"}
onClick={() => {
props.onAddComponentClick(DashboardComponentType.Chart);
}}
/>
<MoreMenuItem
text={"Add Value"}
onClick={() => {
props.onAddComponentClick(DashboardComponentType.Value);
}}
/>
<MoreMenuItem
text={"Add Text"}
onClick={() => {
props.onAddComponentClick(DashboardComponentType.Text);
}}
/>
</MoreMenu>
) : (
<></>