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

Add ColorSwatch enum and update Dashboard date range handling

Browse Source
This commit is contained in:
Simon Larsen
2024-11-29 18:13:58 +00:00
parent a0400be8cd
commit 45d447bf2c
13 changed files with 336 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Common/Types/BrandColors.ts
View File

@@ -73,3 +73,5 @@ export const ChartColors: Color[] = [
Cyan500,
Gray500,
];

28
Common/Types/ColorSwatch.ts Normal file
View File

@@ -0,0 +1,28 @@
enum ColorSwatch {
Zinc = "zinc",
Neutra = "neutra",
Stone = "stone",
Slate = "slate",
Purple = "purple",
Pink = "pink",
Red = "red",
Orange = "orange",
Yellow = "yellow",
Green = "green",
Teal = "teal",
Cyan = "cyan",
Gray = "gray",
Moroon = "moroon",
Blue = "blue",
Indigo = "indigo",
Amber = "amber",
Lime = "lime",
Emerald = "emerald",
Sky = "sky",
Violet = "violet",
Fuchsia = "fuchsia",
Rose = "rose",
}
export default ColorSwatch;

246
Common/UI/Components/Date/StartAndEndDate.tsx
View File

@@ -213,17 +213,59 @@ const StartAndEndDate: DateFilterFunction = (
</div>
</div>
{!props.hideTimeButtons && <div className="mt-1 flex space-x-2 -ml-3">
{props.type === StartAndEndDateType.DateTime && (
{!props.hideTimeButtons && (
<div className="mt-1 flex space-x-2 -ml-3">
{props.type === StartAndEndDateType.DateTime && (
<Button
buttonStyle={
is1Hour ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
}
buttonSize={ButtonSize.Small}
onClick={() => {
// set it to past 1 hour
const endDate: Date = OneUptimeDate.getCurrentDate();
const startDate: Date = OneUptimeDate.addRemoveHours(
endDate,
-1,
);
setStartDateTime(startDate);
setEndDateTime(endDate);
}}
title="1 hour"
/>
)}
{props.type === StartAndEndDateType.DateTime && (
<Button
buttonStyle={
is3Hours ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
}
buttonSize={ButtonSize.Small}
onClick={() => {
// set it to past 3 hour
const endDate: Date = OneUptimeDate.getCurrentDate();
const startDate: Date = OneUptimeDate.addRemoveHours(
endDate,
-3,
);
setStartDateTime(startDate);
setEndDateTime(endDate);
}}
title="3 hours"
/>
)}
<Button
buttonStyle={
is1Hour ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
is1Day ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
}
buttonSize={ButtonSize.Small}
onClick={() => {
// set it to past 1 hour
// set it to past 1 day
const endDate: Date = OneUptimeDate.getCurrentDate();
const startDate: Date = OneUptimeDate.addRemoveHours(
const startDate: Date = OneUptimeDate.addRemoveDays(
endDate,
-1,
);
@@ -231,20 +273,94 @@ const StartAndEndDate: DateFilterFunction = (
setStartDateTime(startDate);
setEndDateTime(endDate);
}}
title="1 hour"
title="1 day"
/>
)}
{props.type === StartAndEndDateType.DateTime && (
<Button
buttonStyle={
is3Hours ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
is1Week ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
}
buttonSize={ButtonSize.Small}
onClick={() => {
// set it to past 3 hour
// set it to past 1 week
const endDate: Date = OneUptimeDate.getCurrentDate();
const startDate: Date = OneUptimeDate.addRemoveHours(
const startDate: Date = OneUptimeDate.addRemoveDays(
endDate,
-7,
);
setStartDateTime(startDate);
setEndDateTime(endDate);
}}
title="1 week"
/>
<Button
buttonStyle={
is2Weeks ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
}
buttonSize={ButtonSize.Small}
onClick={() => {
// set it to past 1 week
const endDate: Date = OneUptimeDate.getCurrentDate();
const startDate: Date = OneUptimeDate.addRemoveDays(
endDate,
-14,
);
setStartDateTime(startDate);
setEndDateTime(endDate);
}}
title="2 weeks"
/>
<Button
buttonStyle={
is3Weeks ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
}
buttonSize={ButtonSize.Small}
onClick={() => {
// set it to past 1 week
const endDate: Date = OneUptimeDate.getCurrentDate();
const startDate: Date = OneUptimeDate.addRemoveDays(
endDate,
-21,
);
setStartDateTime(startDate);
setEndDateTime(endDate);
}}
title="3 weeks"
/>
<Button
buttonStyle={
is1Month ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
}
buttonSize={ButtonSize.Small}
onClick={() => {
// set it to past 1 month
const endDate: Date = OneUptimeDate.getCurrentDate();
const startDate: Date = OneUptimeDate.addRemoveMonths(
endDate,
-1,
);
setStartDateTime(startDate);
setEndDateTime(endDate);
}}
title="1 month"
/>
<Button
buttonStyle={
is3Months ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
}
buttonSize={ButtonSize.Small}
onClick={() => {
// set it to past 1 month
const endDate: Date = OneUptimeDate.getCurrentDate();
const startDate: Date = OneUptimeDate.addRemoveMonths(
endDate,
-3,
);
@@ -252,112 +368,10 @@ const StartAndEndDate: DateFilterFunction = (
setStartDateTime(startDate);
setEndDateTime(endDate);
}}
title="3 hours"
title="3 months"
/>
)}
<Button
buttonStyle={
is1Day ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
}
buttonSize={ButtonSize.Small}
onClick={() => {
// set it to past 1 day
const endDate: Date = OneUptimeDate.getCurrentDate();
const startDate: Date = OneUptimeDate.addRemoveDays(endDate, -1);
setStartDateTime(startDate);
setEndDateTime(endDate);
}}
title="1 day"
/>
<Button
buttonStyle={
is1Week ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
}
buttonSize={ButtonSize.Small}
onClick={() => {
// set it to past 1 week
const endDate: Date = OneUptimeDate.getCurrentDate();
const startDate: Date = OneUptimeDate.addRemoveDays(endDate, -7);
setStartDateTime(startDate);
setEndDateTime(endDate);
}}
title="1 week"
/>
<Button
buttonStyle={
is2Weeks ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
}
buttonSize={ButtonSize.Small}
onClick={() => {
// set it to past 1 week
const endDate: Date = OneUptimeDate.getCurrentDate();
const startDate: Date = OneUptimeDate.addRemoveDays(endDate, -14);
setStartDateTime(startDate);
setEndDateTime(endDate);
}}
title="2 weeks"
/>
<Button
buttonStyle={
is3Weeks ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
}
buttonSize={ButtonSize.Small}
onClick={() => {
// set it to past 1 week
const endDate: Date = OneUptimeDate.getCurrentDate();
const startDate: Date = OneUptimeDate.addRemoveDays(endDate, -21);
setStartDateTime(startDate);
setEndDateTime(endDate);
}}
title="3 weeks"
/>
<Button
buttonStyle={
is1Month ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
}
buttonSize={ButtonSize.Small}
onClick={() => {
// set it to past 1 month
const endDate: Date = OneUptimeDate.getCurrentDate();
const startDate: Date = OneUptimeDate.addRemoveMonths(
endDate,
-1,
);
setStartDateTime(startDate);
setEndDateTime(endDate);
}}
title="1 month"
/>
<Button
buttonStyle={
is3Months ? ButtonStyleType.PRIMARY : ButtonStyleType.NORMAL
}
buttonSize={ButtonSize.Small}
onClick={() => {
// set it to past 1 month
const endDate: Date = OneUptimeDate.getCurrentDate();
const startDate: Date = OneUptimeDate.addRemoveMonths(
endDate,
-3,
);
setStartDateTime(startDate);
setEndDateTime(endDate);
}}
title="3 months"
/>
</div>}
</div>
)}
</div>
);
}

8
Common/UI/Components/HeaderAlert/HeaderAlert.tsx
View File

@@ -3,6 +3,7 @@ import IconProp from "Common/Types/Icon/IconProp";
import React, { ReactElement } from "react";
import Tooltip from "../Tooltip/Tooltip";
import { GetReactElementFunction } from "../../Types/FunctionTypes";
import ColorSwatch from "../../../Types/ColorSwatch";
export enum HeaderAlertType {
SUCCESS = "Success",
@@ -18,6 +19,7 @@ export interface ComponentProps {
className?: string | undefined;
alertType: HeaderAlertType;
tooltip?: string | undefined;
colorSwatch?: ColorSwatch | undefined;
}
const HeaderAlert: (props: ComponentProps) => ReactElement = (
@@ -57,6 +59,12 @@ const HeaderAlert: (props: ComponentProps) => ReactElement = (
break;
}
// color swatch overrides the color.
if (props.colorSwatch) {
textColor = `text-${props.colorSwatch}-500 hover:text-${props.colorSwatch}-600`;
bgColor = `bg-${props.colorSwatch}`;
}
const getElement: GetReactElementFunction = (): ReactElement => {
return (
<div

2
Dashboard/src/Components/Dashboard/Canvas/ArgumentsForm.tsx
View File

@@ -25,6 +25,7 @@ import MetricNameAndUnit from "../../Metrics/Types/MetricNameAndUnit";
import { GetReactElementFunction } from "Common/UI/Types/FunctionTypes";
export interface ComponentProps {
//eslint-disable react/no-unused-prop-types
metrics: {
metricNameAndUnits: Array<MetricNameAndUnit>;
telemetryAttributes: string[];
@@ -74,6 +75,7 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
value: FormValues<JSONObject>,
componentProps: CustomElementProps,
) => ReactElement) => {
//eslint-disable react/display-name
return (
value: FormValues<JSONObject>,
componentProps: CustomElementProps,

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

@@ -49,7 +49,7 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
grid[row] = new Array(canvasWidth).fill(null);
}
let maxHeightInDashboardUnits = 0; // max height of the grid
let maxHeightInDashboardUnits: number = 0; // max height of the grid
// Place components in the grid
allComponents.forEach((component: DashboardBaseComponent) => {
@@ -102,8 +102,7 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
}
if (!component) {
if(!props.isEditMode && i >= maxHeightInDashboardUnits) {
if (!props.isEditMode && i >= maxHeightInDashboardUnits) {
// if we are not in edit mode, we should not render blank units
continue;
}

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

@@ -42,9 +42,10 @@ const DashboardViewer: FunctionComponent<ComponentProps> = (
DashboardMode.View,
);
const [startAndEndDate, setStartAndEndDate] = useState<DashboardStartAndEndDate>({
range: DashboardStartAndEndDateRange.ONE_HOUR
});
const [startAndEndDate, setStartAndEndDate] =
useState<DashboardStartAndEndDate>({
range: DashboardStartAndEndDateRange.PAST_ONE_HOUR,
});
const [isSaving, setIsSaving] = useState<boolean>(false);
@@ -212,7 +213,9 @@ const DashboardViewer: FunctionComponent<ComponentProps> = (
setDashboardMode(DashboardMode.View);
}}
startAndEndDate={startAndEndDate}
onStartAndEndDateChange={(newStartAndEndDate: DashboardStartAndEndDate) => {
onStartAndEndDateChange={(
newStartAndEndDate: DashboardStartAndEndDate,
) => {
setStartAndEndDate(newStartAndEndDate);
}}
onCancelEditClick={() => {

50
Dashboard/src/Components/Dashboard/Toolbar/DashboardStartAndEndDate.tsx
View File

@@ -1,50 +0,0 @@
import React, { FunctionComponent, ReactElement } from "react";
import DashboardStartAndEndDate from "../Types/DashboardStartAndEndDate";
import StartAndEndDate, { StartAndEndDateType } from "Common/UI/Components/Date/StartAndEndDate";
import InBetween from "Common/Types/BaseDatabase/InBetween";
import DashboardStartAndEndDateRange from "../Types/DashboardStartAndEndDateRange";
import FieldLabelElement from "Common/UI/Components/Forms/Fields/FieldLabel";
import Dropdown, { DropdownOption, DropdownValue } from "Common/UI/Components/Dropdown/Dropdown";
import DropdownUtil from "Common/UI/Utils/Dropdown";
export interface ComponentProps {
value?: DashboardStartAndEndDate | undefined;
onChange: (startAndEndDate: DashboardStartAndEndDate) => void;
}
const DashboardStartAndEndDateElement: FunctionComponent<ComponentProps> = (
props: ComponentProps,
): ReactElement => {
const dropdownOptions: DropdownOption[] = DropdownUtil.getDropdownOptionsFromEnum(DashboardStartAndEndDateRange);
const defaultDropdownOption: DropdownOption = dropdownOptions.find((option: DropdownOption) => option.value === DashboardStartAndEndDateRange.ONE_HOUR) || dropdownOptions[0]!;
const selectedDropdownnOption: DropdownOption = dropdownOptions.find((option: DropdownOption) => option.value === props.value?.range) || defaultDropdownOption;
return (
<div>
<FieldLabelElement title="Start and End Time" required={true} />
<Dropdown value={selectedDropdownnOption} onChange={(range: DropdownValue | Array<DropdownValue> | null) => {
props.onChange({
range: range as DashboardStartAndEndDateRange,
});
}}
options={dropdownOptions} />
{/* Start and End Date */}
{props.value?.range === DashboardStartAndEndDateRange.CUSTOM && <StartAndEndDate
type={StartAndEndDateType.DateTime}
initialValue={props.value?.startAndEndDate || undefined}
onValueChanged={(startAndEndDate: InBetween<Date> | null) => {
if (startAndEndDate) {
props.onChange({
range: DashboardStartAndEndDateRange.CUSTOM,
startAndEndDate,
});
}
}}
/>}
</div>
);
};
export default DashboardStartAndEndDateElement;

64
Dashboard/src/Components/Dashboard/Toolbar/DashboardStartAndEndDateEdit.tsx Normal file
View File

@@ -0,0 +1,64 @@
import React, { FunctionComponent, ReactElement } from "react";
import DashboardStartAndEndDate from "../Types/DashboardStartAndEndDate";
import StartAndEndDate, {
StartAndEndDateType,
} from "Common/UI/Components/Date/StartAndEndDate";
import InBetween from "Common/Types/BaseDatabase/InBetween";
import DashboardStartAndEndDateRange from "../Types/DashboardStartAndEndDateRange";
import Dropdown, {
DropdownOption,
DropdownValue,
} from "Common/UI/Components/Dropdown/Dropdown";
import DropdownUtil from "Common/UI/Utils/Dropdown";
export interface ComponentProps {
value?: DashboardStartAndEndDate | undefined;
onChange: (startAndEndDate: DashboardStartAndEndDate) => void;
}
const DashboardStartAndEndDateEditElement: FunctionComponent<ComponentProps> = (
props: ComponentProps,
): ReactElement => {
const dropdownOptions: DropdownOption[] =
DropdownUtil.getDropdownOptionsFromEnum(DashboardStartAndEndDateRange);
const defaultDropdownOption: DropdownOption =
dropdownOptions.find((option: DropdownOption) => {
return option.value === DashboardStartAndEndDateRange.PAST_ONE_HOUR;
}) || dropdownOptions[0]!;
const selectedDropdownnOption: DropdownOption =
dropdownOptions.find((option: DropdownOption) => {
return option.value === props.value?.range;
}) || defaultDropdownOption;
return (
<div>
<Dropdown
value={selectedDropdownnOption}
onChange={(range: DropdownValue | Array<DropdownValue> | null) => {
props.onChange({
range: range as DashboardStartAndEndDateRange,
});
}}
options={dropdownOptions}
/>
{/* Start and End Date */}
{props.value?.range === DashboardStartAndEndDateRange.CUSTOM && (
<StartAndEndDate
type={StartAndEndDateType.DateTime}
initialValue={props.value?.startAndEndDate || undefined}
hideTimeButtons={true}
onValueChanged={(startAndEndDate: InBetween<Date> | null) => {
if (startAndEndDate) {
props.onChange({
range: DashboardStartAndEndDateRange.CUSTOM,
startAndEndDate,
});
}
}}
/>
)}
</div>
);
};
export default DashboardStartAndEndDateEditElement;

52
Dashboard/src/Components/Dashboard/Toolbar/DashboardStartAndEndDateView.tsx Normal file
View File

@@ -0,0 +1,52 @@
import React, { FunctionComponent, ReactElement } from "react";
import DashboardStartAndEndDate from "../Types/DashboardStartAndEndDate";
import DashboardStartAndEndDateRange from "../Types/DashboardStartAndEndDateRange";
import OneUptimeDate from "Common/Types/Date";
import IconProp from "Common/Types/Icon/IconProp";
import { GetReactElementFunction } from "Common/UI/Types/FunctionTypes";
import HeaderAlert, { HeaderAlertType } from "Common/UI/Components/HeaderAlert/HeaderAlert";
import ColorSwatch from "Common/Types/ColorSwatch";
export interface ComponentProps {
dashboardStartAndEndDate: DashboardStartAndEndDate;
onClick: () => void;
}
const DashboardStartAndEndDateView: FunctionComponent<ComponentProps> = (
props: ComponentProps,
): ReactElement => {
const isCustomRange: boolean =
props.dashboardStartAndEndDate.range ===
DashboardStartAndEndDateRange.CUSTOM;
const getContent: GetReactElementFunction = (): ReactElement => {
const title: string = isCustomRange ? `${OneUptimeDate.getDateAsLocalFormattedString(
props.dashboardStartAndEndDate.startAndEndDate?.startValue ||
OneUptimeDate.getCurrentDate(),
)} - ${OneUptimeDate.getDateAsLocalFormattedString(
props.dashboardStartAndEndDate.startAndEndDate?.endValue ||
OneUptimeDate.getCurrentDate(),
)}` : props.dashboardStartAndEndDate.range
return (
<HeaderAlert
icon={IconProp.Clock}
onClick={props.onClick}
title={title}
alertType={HeaderAlertType.INFO}
colorSwatch={ColorSwatch.Blue}
tooltip="Click to change the date and time range of data on this dashboard."
/>
);
};
return (
<div>
{getContent()}
</div>
);
};
export default DashboardStartAndEndDateView;

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

@@ -7,8 +7,8 @@ import MoreMenuItem from "Common/UI/Components/MoreMenu/MoreMenuItem";
import DashboardComponentType from "Common/Types/Dashboard/DashboardComponentType";
import Modal from "Common/UI/Components/Modal/Modal";
import DashboardStartAndEndDate from "../Types/DashboardStartAndEndDate";
import DashboardStartAndEndDateElement from "./DashboardStartAndEndDate";
import DashboardStartAndEndDateElement from "./DashboardStartAndEndDateEdit";
import DashboardStartAndEndDateView from "./DashboardStartAndEndDateView";
export interface ComponentProps {
onEditClick: () => void;
@@ -30,8 +30,10 @@ const DashboardToolbar: FunctionComponent<ComponentProps> = (
): ReactElement => {
const isEditMode: boolean = props.dashboardMode === DashboardMode.Edit;
const [tempStartAndEndDate, setTempStartAndEndDate] = useState<DashboardStartAndEndDate | null>(null);
const [showTimeSelectModal, setShowTimeSelectModal] = useState<boolean>(false);
const [tempStartAndEndDate, setTempStartAndEndDate] =
useState<DashboardStartAndEndDate | null>(null);
const [showTimeSelectModal, setShowTimeSelectModal] =
useState<boolean>(false);
return (
<div
@@ -44,6 +46,16 @@ const DashboardToolbar: FunctionComponent<ComponentProps> = (
</div>
{!props.isSaving && (
<div className="flex">
<div className="mt-2">
<DashboardStartAndEndDateView
dashboardStartAndEndDate={props.startAndEndDate}
onClick={() => {
setTempStartAndEndDate(props.startAndEndDate);
setShowTimeSelectModal(true);
}}
/>
</div>
{isEditMode ? (
<MoreMenu menuIcon={IconProp.Add} text="Add Component">
@@ -128,12 +140,12 @@ const DashboardToolbar: FunctionComponent<ComponentProps> = (
</div>
{showTimeSelectModal && (
<Modal title="Select Start and End Time"
<Modal
title="Select Start and End Time"
onClose={() => {
setTempStartAndEndDate(null);
setShowTimeSelectModal(false);
}}
onSubmit={() => {
if (tempStartAndEndDate) {
props.onStartAndEndDateChange(tempStartAndEndDate);
@@ -142,10 +154,13 @@ const DashboardToolbar: FunctionComponent<ComponentProps> = (
setTempStartAndEndDate(null);
}}
>
<div className="-mt-5">
<DashboardStartAndEndDateElement value={tempStartAndEndDate || undefined} onChange={(startAndEndDate: DashboardStartAndEndDate) => {
setTempStartAndEndDate(startAndEndDate);
}} />
<div className="mt-5">
<DashboardStartAndEndDateElement
value={tempStartAndEndDate || undefined}
onChange={(startAndEndDate: DashboardStartAndEndDate) => {
setTempStartAndEndDate(startAndEndDate);
}}
/>
</div>
</Modal>
)}

8
Dashboard/src/Components/Dashboard/Types/DashboardStartAndEndDate.ts
View File

@@ -1,7 +1,7 @@
import InBetween from "Common/Types/BaseDatabase/InBetween";
import DashboardStartAndEndDateRange from "./DashboardStartAndEndDateRange";
export default interface DashboardStartAndEndDate {
startAndEndDate?: InBetween<Date> | undefined;
range: DashboardStartAndEndDateRange;
}
export default interface DashboardStartAndEndDate {
startAndEndDate?: InBetween<Date> | undefined;
range: DashboardStartAndEndDateRange;
}

24
Dashboard/src/Components/Dashboard/Types/DashboardStartAndEndDateRange.ts
View File

@@ -1,15 +1,15 @@
enum DashboardStartAndEndDateRange {
THIRTY_MINS = "30 Mins",
ONE_HOUR = "1 Hour",
TWO_HOURS = "2 Hours",
THREE_HOURS = "3 Hours",
ONE_DAY = "1 Day",
TWO_DAYS = "2 Days",
ONE_WEEK = "1 Week",
TWO_WEEKS = "2 Weeks",
ONE_MONTH = "1 Month",
THREE_MONTHS = "3 Months",
CUSTOM = "Custom"
PAST_THIRTY_MINS = "Past 30 Mins",
PAST_ONE_HOUR = "Past 1 Hour",
PAST_TWO_HOURS = "Past 2 Hours",
PAST_THREE_HOURS = "Past 3 Hours",
PAST_ONE_DAY = "Past 1 Day",
PAST_TWO_DAYS = "Past 2 Days",
PAST_ONE_WEEK = "Past 1 Week",
PAST_TWO_WEEKS = "Past 2 Weeks",
PAST_ONE_MONTH = "Past 1 Month",
PAST_THREE_MONTHS = "Past 3 Months",
CUSTOM = "Custom",
}
export default DashboardStartAndEndDateRange;
export default DashboardStartAndEndDateRange;