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

add alert types to model alert

Browse Source
This commit is contained in:
Simon Larsen 2024-10-04 09:08:00 -07:00
parent f08dbf6e8f
commit d17b687e03
No known key found for this signature in database
GPG Key ID: 96C5DCA24769DBCA
3 changed files with 35 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,19 +2,46 @@ import Icon from "../Icon/Icon";
import IconProp from "Common/Types/Icon/IconProp";
import React, { ReactElement } from "react";
export enum HeaderAlertType {
SUCCESS = "Success",
ERROR = "Error",
WARNING = "Warning",
INFO = "Info",
}
export interface ComponentProps {
icon: IconProp;
onClick?: (() => void) | undefined;
title: string;
className?: string | undefined;
alertType: HeaderAlertType;
}
const HeaderAlert: (props: ComponentProps) => ReactElement = (
props: ComponentProps,
): ReactElement => {
let bgColor: string = "bg-indigo-500" // default color info.
switch (props.alertType) {
case HeaderAlertType.SUCCESS:
bgColor = "bg-green-500 hover:bg-green-600";
break;
case HeaderAlertType.ERROR:
bgColor = "bg-red-500 hover:bg-red-600";
break;
case HeaderAlertType.WARNING:
bgColor = "bg-yellow-500 hover:bg-yellow-600";
break;
case HeaderAlertType.INFO:
bgColor = "bg-indigo-500 hover:bg-indigo-600";
break;
}
return (
<div
className={`rounded-md ${props.className} p-3 pr-4`}
className={`rounded-md m-3 p-3 ${bgColor} ${props.className} cursor-pointer ml-0 p-3 pr-4`}
onClick={() => {
props.onClick && props.onClick();
}}

4
Common/UI/Components/HeaderAlert/HeaderModelAlert.tsx
View File

@ -1,7 +1,7 @@
import API from "../../Utils/API/API";
import Query from "../../../Types/BaseDatabase/Query";
import ModelAPI, { RequestOptions } from "../../Utils/ModelAPI/ModelAPI";
import HeaderAlert from "./HeaderAlert";
import HeaderAlert, { HeaderAlertType } from "./HeaderAlert";
import BaseModel from "Common/Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
import IconProp from "Common/Types/Icon/IconProp";
@ -18,6 +18,7 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
onClick?: (() => void) | undefined;
refreshToggle?: string | undefined;
className?: string | undefined;
alertType: HeaderAlertType;
}
const HeaderModelAlert: <TBaseModel extends BaseModel>(
@ -84,6 +85,7 @@ const HeaderModelAlert: <TBaseModel extends BaseModel>(
icon={props.icon}
onClick={props.onClick}
className={props.className}
alertType={props.alertType}
/>
);
};

8
Dashboard/src/Components/Header/Header.tsx
View File

@ -14,7 +14,7 @@ import { VoidFunction } from "Common/Types/FunctionTypes";
import IconProp from "Common/Types/Icon/IconProp";
import Button, { ButtonStyleType } from "Common/UI/Components/Button/Button";
import Header from "Common/UI/Components/Header/Header";
import HeaderAlert from "Common/UI/Components/HeaderAlert/HeaderAlert";
import HeaderAlert, { HeaderAlertType } from "Common/UI/Components/HeaderAlert/HeaderAlert";
import HeaderModelAlert from "Common/UI/Components/HeaderAlert/HeaderModelAlert";
import { SizeProp } from "Common/UI/Components/Icon/Icon";
import { BILLING_ENABLED, getAllEnvVars } from "Common/UI/Config";
@ -143,12 +143,12 @@ const DashboardHeader: FunctionComponent<ComponentProps> = (
<div className="flex ml-3">
<HeaderModelAlert<TeamMember>
icon={IconProp.Folder}
className="rounded-md m-3 bg-indigo-500 p-3 hover:bg-indigo-600 cursor-pointer ml-0"
modelType={TeamMember}
query={{
userId: User.getUserId(),
hasAcceptedInvitation: false,
}}
alertType={HeaderAlertType.INFO}
singularName="Project Invitation"
pluralName="Project Invitations"
requestOptions={{
@ -162,7 +162,7 @@ const DashboardHeader: FunctionComponent<ComponentProps> = (
<HeaderModelAlert<Incident>
icon={IconProp.Alert}
modelType={Incident}
className="rounded-md m-3 bg-red-500 p-3 hover:bg-red-600 cursor-pointer ml-0"
alertType={HeaderAlertType.ERROR}
query={{
currentIncidentState: {
order: 1,
@ -182,7 +182,7 @@ const DashboardHeader: FunctionComponent<ComponentProps> = (
{showTrialButton && (
<HeaderAlert
icon={IconProp.Clock}
className="rounded-md m-3 bg-indigo-500 p-3 ml-0"
alertType={HeaderAlertType.INFO}
title={`Trial ends in ${OneUptimeDate.getNumberOfDaysBetweenDatesInclusive(
OneUptimeDate.getCurrentDate(),
props.selectedProject!.trialEndsAt!,