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

Update BrandColors imports to use Green instead of Green500

Browse Source
This commit is contained in:
Simon Larsen
2024-04-19 11:53:28 +01:00
parent add313980c
commit fb070b9448
35 changed files with 171 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
AdminDashboard/src/Pages/Settings/Email/Index.tsx
View File

@@ -15,7 +15,7 @@ import ErrorMessage from 'CommonUI/src/Components/ErrorMessage/ErrorMessage';
import { JSONObject } from 'Common/Types/JSON';
import DropdownUtil from 'CommonUI/src/Utils/Dropdown';
import Pill from 'CommonUI/src/Components/Pill/Pill';
import { Green500, Red500 } from 'Common/Types/BrandColors';
import { Green, Red } from 'Common/Types/BrandColors';
import { PromiseVoidFunction } from 'Common/Types/FunctionTypes';
const Settings: FunctionComponent = (): ReactElement => {
@@ -385,28 +385,28 @@ const Settings: FunctionComponent = (): ReactElement => {
return (
<Pill
text="Enabled"
color={Green500}
color={Green}
/>
);
} else if (!item['sendgridApiKey']) {
return (
<Pill
text="Not Enabled. Please add the API key."
color={Red500}
color={Red}
/>
);
} else if (!item['sendgridFromEmail']) {
return (
<Pill
text="Not Enabled. Please add the From Email."
color={Red500}
color={Red}
/>
);
} else if (!item['sendgridFromName']) {
return (
<Pill
text="Not Enabled. Please add the From Name."
color={Red500}
color={Red}
/>
);
}

6
AdminDashboard/src/Pages/Settings/Probes/Index.tsx
View File

@@ -9,7 +9,7 @@ import Probe from 'Model/Models/Probe';
import FieldType from 'CommonUI/src/Components/Types/FieldType';
import { JSONObject } from 'Common/Types/JSON';
import OneUptimeDate from 'Common/Types/Date';
import { Green500, Red500 } from 'Common/Types/BrandColors';
import { Green, Red } from 'Common/Types/BrandColors';
import Statusbubble from 'CommonUI/src/Components/StatusBubble/StatusBubble';
import ProbeElement from 'CommonUI/src/Components/Probe/Probe';
import IsNull from 'Common/Types/BaseDatabase/IsNull';
@@ -197,7 +197,7 @@ const Settings: FunctionComponent = (): ReactElement => {
return (
<Statusbubble
text={'Connected'}
color={Green500}
color={Green}
shouldAnimate={true}
/>
);
@@ -206,7 +206,7 @@ const Settings: FunctionComponent = (): ReactElement => {
return (
<Statusbubble
text={'Disconnected'}
color={Red500}
color={Red}
shouldAnimate={false}
/>
);

4
App/FeatureSet/Workers/DataMigrations/AddDowntimeMonitorStatusToStatusPage.ts
View File

@@ -4,7 +4,7 @@ import StatusPage from 'Model/Models/StatusPage';
import StatusPageService from 'CommonServer/Services/StatusPageService';
import MonitorStatus from 'Model/Models/MonitorStatus';
import MonitorStatusService from 'CommonServer/Services/MonitorStatusService';
import { Green500 } from 'Common/Types/BrandColors';
import { Green } from 'Common/Types/BrandColors';
import Color from 'Common/Types/Color';
export default class AddDowntimeMonitorStatusToStatusPage extends DataMigrationBase {
@@ -61,7 +61,7 @@ export default class AddDowntimeMonitorStatusToStatusPage extends DataMigrationB
id: statusPage.id!,
data: {
downtimeMonitorStatuses: getNonOperationStatuses as any,
defaultBarColor: new Color(Green500.toString()) as any,
defaultBarColor: new Color(Green.toString()) as any,
},
props: {
isRoot: true,

17
Common/Types/BrandColors.ts
View File

@@ -3,6 +3,20 @@ import Color from './Color';
// Standard Colors
export const Black: Color = Color.fromString('#000000');
export const White: Color = Color.fromString('#ffffff');
export const slate: Color = Color.fromString('#564ab1');
export const Purple: Color = Color.fromString('#6f42c1');
export const Pink: Color = Color.fromString('#e83e8c');
export const Red: Color = Color.fromString('#fd625e');
export const Orange: Color = Color.fromString('#f1734f');
export const Yellow: Color = Color.fromString('#ffbf53');
export const Green: Color = Color.fromString('#2ab57d');
export const Teal: Color = Color.fromString('#050505');
export const Cyan: Color = Color.fromString('#4ba6ef');
export const VeryLightGray: Color = Color.fromString('#c2c2c2');
export const Grey: Color = Color.fromString('#575757');
export const LightGray: Color = Color.fromString('#908B8B');
export const Moroon: Color = Color.fromString('#b70400');
export const Blue: Color = Color.fromString('#3686be');
// these are *-500 colors from tailwindcss
export const Zinc500: Color = Color.fromString('#71717a');
@@ -29,9 +43,6 @@ export const Violet500: Color = Color.fromString('#8b5cf6');
export const Fuchsia500: Color = Color.fromString('#d946ef');
export const Rose500: Color = Color.fromString('#f43f5e');
export const LightGray: Color = Color.fromString('#908B8B');
export const VeryLightGray: Color = Color.fromString('#c2c2c2');
export const BrightColors: Color[] = [
Black,

26
CommonServer/Services/ProjectService.ts
View File

@@ -19,9 +19,9 @@ import ObjectID from 'Common/Types/ObjectID';
import OneUptimeDate from 'Common/Types/Date';
import MonitorStatus from 'Model/Models/MonitorStatus';
import {
Yellow500,
Green500,
Red500,
Yellow,
Green,
Red,
Moroon500,
Black,
} from 'Common/Types/BrandColors';
@@ -427,7 +427,7 @@ export class Service extends DatabaseService<Model> {
ongoingScheduledMaintenanceState.name = 'Ongoing';
ongoingScheduledMaintenanceState.description =
'When an event is ongoing, it belongs to this state.';
ongoingScheduledMaintenanceState.color = Yellow500;
ongoingScheduledMaintenanceState.color = Yellow;
ongoingScheduledMaintenanceState.isOngoingState = true;
ongoingScheduledMaintenanceState.projectId = createdItem.id!;
ongoingScheduledMaintenanceState.order = 2;
@@ -463,7 +463,7 @@ export class Service extends DatabaseService<Model> {
completedScheduledMaintenanceState.name = 'Completed';
completedScheduledMaintenanceState.description =
'When an event is completed, it belongs to this state.';
completedScheduledMaintenanceState.color = Green500;
completedScheduledMaintenanceState.color = Green;
completedScheduledMaintenanceState.isResolvedState = true;
completedScheduledMaintenanceState.projectId = createdItem.id!;
completedScheduledMaintenanceState.order = 4;
@@ -566,7 +566,7 @@ export class Service extends DatabaseService<Model> {
createdIncidentState.name = 'Identified';
createdIncidentState.description =
'When an incident is created, it belongs to this state';
createdIncidentState.color = Red500;
createdIncidentState.color = Red;
createdIncidentState.isCreatedState = true;
createdIncidentState.projectId = createdItem.id!;
createdIncidentState.order = 1;
@@ -582,7 +582,7 @@ export class Service extends DatabaseService<Model> {
acknowledgedIncidentState.name = 'Acknowledged';
acknowledgedIncidentState.description =
'When an incident is acknowledged, it belongs to this state.';
acknowledgedIncidentState.color = Yellow500;
acknowledgedIncidentState.color = Yellow;
acknowledgedIncidentState.isAcknowledgedState = true;
acknowledgedIncidentState.projectId = createdItem.id!;
acknowledgedIncidentState.order = 2;
@@ -598,7 +598,7 @@ export class Service extends DatabaseService<Model> {
resolvedIncidentState.name = 'Resolved';
resolvedIncidentState.description =
'When an incident is resolved, it belongs to this state.';
resolvedIncidentState.color = Green500;
resolvedIncidentState.color = Green;
resolvedIncidentState.isResolvedState = true;
resolvedIncidentState.projectId = createdItem.id!;
resolvedIncidentState.order = 3;
@@ -635,7 +635,7 @@ export class Service extends DatabaseService<Model> {
majorIncident.name = 'Major Incident';
majorIncident.description =
'Issues causing significant impact. Immediate response is usually required. We might have some workarounds that mitigate the impact on customers. Examples include an important sub-system failing.';
majorIncident.color = Red500;
majorIncident.color = Red;
majorIncident.projectId = createdItem.id!;
majorIncident.order = 2;
@@ -650,7 +650,7 @@ export class Service extends DatabaseService<Model> {
minorIncident.name = 'Minor Incident';
minorIncident.description =
'Issues with low impact, which can usually be handled within working hours. Most customers are unlikely to notice any problems. Examples include a slight drop in application performance.';
minorIncident.color = Yellow500;
minorIncident.color = Yellow;
minorIncident.projectId = createdItem.id!;
minorIncident.order = 3;
@@ -671,7 +671,7 @@ export class Service extends DatabaseService<Model> {
operationalStatus.projectId = createdItem.id!;
operationalStatus.priority = 1;
operationalStatus.isOperationalState = true;
operationalStatus.color = Green500;
operationalStatus.color = Green;
operationalStatus = await MonitorStatusService.create({
data: operationalStatus,
@@ -686,7 +686,7 @@ export class Service extends DatabaseService<Model> {
'Monitor is operating at reduced performance.';
degradedStatus.priority = 2;
degradedStatus.projectId = createdItem.id!;
degradedStatus.color = Yellow500;
degradedStatus.color = Yellow;
degradedStatus = await MonitorStatusService.create({
data: degradedStatus,
@@ -701,7 +701,7 @@ export class Service extends DatabaseService<Model> {
downStatus.isOfflineState = true;
downStatus.projectId = createdItem.id!;
downStatus.priority = 3;
downStatus.color = Red500;
downStatus.color = Red;
downStatus = await MonitorStatusService.create({
data: downStatus,

4
CommonServer/Services/StatusPageService.ts
View File

@@ -30,7 +30,7 @@ import ProjectService from './ProjectService';
import CreateBy from '../Types/Database/CreateBy';
import MonitorStatus from 'Model/Models/MonitorStatus';
import MonitorStatusService from './MonitorStatusService';
import { Green500 } from 'Common/Types/BrandColors';
import { Green } from 'Common/Types/BrandColors';
export class Service extends DatabaseService<StatusPage> {
public constructor(postgresDatabase?: PostgresDatabase) {
@@ -73,7 +73,7 @@ export class Service extends DatabaseService<StatusPage> {
}
if (!createBy.data.defaultBarColor) {
createBy.data.defaultBarColor = Green500;
createBy.data.defaultBarColor = Green;
}
return {

4
CommonServer/Tests/TestingUtils/Services/ScheduledMaintenanceStateServiceHelper.ts
View File

@@ -1,7 +1,7 @@
import ObjectID from 'Common/Types/ObjectID';
import ScheduledMaintenanceState from 'Model/Models/ScheduledMaintenanceState';
import CreateBy from '../../../Types/Database/CreateBy';
import { Black, Yellow500 } from 'Common/Types/BrandColors';
import { Black, Yellow } from 'Common/Types/BrandColors';
export default class ScheduledMaintenanceStateTestService {
public static generateScheduledState(
@@ -36,7 +36,7 @@ export default class ScheduledMaintenanceStateTestService {
ongoingState.name = 'Ongoing';
ongoingState.description =
'When an event is ongoing, it belongs to this state.';
ongoingState.color = Yellow500;
ongoingState.color = Yellow;
ongoingState.isOngoingState = true;
ongoingState.projectId = projectId;
ongoingState.order = 2;

6
CommonUI/src/Components/Checkbox/CheckboxViewer.tsx
View File

@@ -1,5 +1,5 @@
import React, { FunctionComponent, ReactElement } from 'react';
import { Green500, Red500 } from 'Common/Types/BrandColors';
import { Green, Red } from 'Common/Types/BrandColors';
import IconProp from 'Common/Types/Icon/IconProp';
import Icon from '../Icon/Icon';
@@ -19,13 +19,13 @@ const CheckboxViewer: FunctionComponent<ComponentProps> = (
<Icon
className="h-5 w-5"
icon={IconProp.CheckCircle}
color={Green500}
color={Green}
/>
) : (
<Icon
className="h-5 w-5"
icon={IconProp.CircleClose}
color={Red500}
color={Red}
/>
)}
</div>

25
CommonUI/src/Components/ColorCircle/ColorCircle.tsx Normal file
View File

@@ -0,0 +1,25 @@
import Color from 'Common/Types/Color';
import React, { FunctionComponent, ReactElement } from 'react';
import Tooltip from '../Tooltip/Tooltip';
export interface ComponentProps {
color: Color;
tooltip: string;
}
const ColorCircle: FunctionComponent<ComponentProps> = (
props: ComponentProps
): ReactElement => {
return (
<Tooltip text={props.tooltip}>
<div
className="rounded-max h-3 w-3"
style={{
backgroundColor: props.color.toString(),
}}
></div>
</Tooltip>
);
};
export default ColorCircle;

6
CommonUI/src/Components/Graphs/DayUptimeGraph.tsx
View File

@@ -1,4 +1,4 @@
import { Green500 } from 'Common/Types/BrandColors';
import { Green } from 'Common/Types/BrandColors';
import Color from 'Common/Types/Color';
import OneUptimeDate from 'Common/Types/Date';
import Dictionary from 'Common/Types/Dictionary';
@@ -54,7 +54,7 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
const getUptimeBar: GetUptimeBarFunction = (
dayNumber: number
): ReactElement => {
let color: Color = props.defaultBarColor || Green500;
let color: Color = props.defaultBarColor || Green;
const todaysDay: Date = OneUptimeDate.getSomeDaysAfterDate(
props.startDate,
@@ -227,7 +227,7 @@ const DayUptimeGraph: FunctionComponent<ComponentProps> = (
if (!hasEvents) {
toolTipText += ` - No data for this day.`;
color = props.defaultBarColor || Green500;
color = props.defaultBarColor || Green;
}
let className: string = 'h-20 w-20';

4
CommonUI/src/Components/ModelTable/BaseModelTable.tsx
View File

@@ -53,7 +53,7 @@ import SubscriptionPlan, {
PlanSelect,
} from 'Common/Types/Billing/SubscriptionPlan';
import Pill from '../Pill/Pill';
import { Yellow500 } from 'Common/Types/BrandColors';
import { Yellow } from 'Common/Types/BrandColors';
import { ModalWidth } from '../Modal/Modal';
import ProjectUtil from '../../Utils/Project';
import API from '../../Utils/API/API';
@@ -1337,7 +1337,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
marginLeft: '5px',
}}
>
<Pill text={`${planName} Plan`} color={Yellow500} />
<Pill text={`${planName} Plan`} color={Yellow} />
</span>
)}
</span>

4
CommonUI/src/Components/MonitorGraphs/UptimeUtil.ts
View File

@@ -2,7 +2,7 @@ import ObjectID from 'Common/Types/ObjectID';
import { MonitorEvent } from './Uptime';
import MonitorStatusTimeline from 'Model/Models/MonitorStatusTimeline';
import OneUptimeDate from 'Common/Types/Date';
import { Green500 } from 'Common/Types/BrandColors';
import { Green } from 'Common/Types/BrandColors';
import { Event } from '../Graphs/DayUptimeGraph';
import MonitorStatus from 'Model/Models/MonitorStatus';
import { UptimePrecision } from 'Model/Models/StatusPageResource';
@@ -51,7 +51,7 @@ export default class UptimeUtil {
endDate: endDate,
label: monitorEvents[i]?.monitorStatus?.name || 'Operational',
priority: monitorEvents[i]?.monitorStatus?.priority || 0,
color: monitorEvents[i]?.monitorStatus?.color || Green500,
color: monitorEvents[i]?.monitorStatus?.color || Green,
monitorId: monitorEvents[i]!.monitorId!,
eventStatusId: monitorEvents[i]!.monitorStatus!.id!,
});

4
CommonUI/src/Components/Workflow/Component.tsx
View File

@@ -10,7 +10,7 @@ import {
} from 'Common/Types/Workflow/Component';
import Tooltip from '../Tooltip/Tooltip';
import Pill from '../Pill/Pill';
import { Green500 } from 'Common/Types/BrandColors';
import { Green } from 'Common/Types/BrandColors';
export interface ComponentProps {
data: NodeDataProp;
@@ -141,7 +141,7 @@ const Node: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
{props.data.metadata.componentType === ComponentType.Trigger &&
props.data.nodeType !== NodeType.PlaceholderNode &&
!props.data.isPreview && (
<Pill text="Trigger" color={Green500} />
<Pill text="Trigger" color={Green} />
)}
</div>
{!props.data.isPreview &&

16
CommonUI/src/Components/Workflow/WorkflowStatus.tsx
View File

@@ -1,4 +1,4 @@
import { Green500, Red500, Yellow500 } from 'Common/Types/BrandColors';
import { Green, Red, Yellow } from 'Common/Types/BrandColors';
import React, { FunctionComponent, ReactElement } from 'react';
import WorkflowStatus from 'Common/Types/Workflow/WorkflowStatus';
import Pill from '../Pill/Pill';
@@ -11,27 +11,27 @@ const WorkflowStatusElement: FunctionComponent<ComponentProps> = (
props: ComponentProps
): ReactElement => {
if (props.status === WorkflowStatus.Success) {
return <Pill color={Green500} text="Success" />;
return <Pill color={Green} text="Success" />;
}
if (props.status === WorkflowStatus.Running) {
return <Pill color={Yellow500} text="Running" />;
return <Pill color={Yellow} text="Running" />;
}
if (props.status === WorkflowStatus.Scheduled) {
return <Pill color={Yellow500} text="Scheduled" />;
return <Pill color={Yellow} text="Scheduled" />;
}
if (props.status === WorkflowStatus.Error) {
return <Pill color={Red500} text="Error" />;
return <Pill color={Red} text="Error" />;
}
if (props.status === WorkflowStatus.Timeout) {
return <Pill color={Red500} text="Timeout" />;
return <Pill color={Red} text="Timeout" />;
}
if (props.status === WorkflowStatus.WorkflowCountExceeded) {
return <Pill color={Red500} text="Execution Exceeded Current Plan" />;
return <Pill color={Red} text="Execution Exceeded Current Plan" />;
}
return <Pill color={Yellow500} text="Unknown" />;
return <Pill color={Yellow} text="Unknown" />;
};
export default WorkflowStatusElement;

12
Dashboard/src/Components/OnCallPolicy/ExecutionLogs/ExecutionLogsTable.tsx
View File

@@ -5,7 +5,7 @@ import DashboardNavigation from '../../../Utils/Navigation';
import FieldType from 'CommonUI/src/Components/Types/FieldType';
import { JSONObject } from 'Common/Types/JSON';
import Pill from 'CommonUI/src/Components/Pill/Pill';
import { Green500, Red500, Yellow500 } from 'Common/Types/BrandColors';
import { Green, Red, Yellow } from 'Common/Types/BrandColors';
import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button';
import ConfirmModal from 'CommonUI/src/Components/Modal/ConfirmModal';
import IncidentView from '../../../Components/Incident/Incident';
@@ -149,14 +149,14 @@ const ExecutionLogsTable: FunctionComponent<ComponentProps> = (
if (item['status'] === OnCallDutyPolicyStatus.Completed) {
return (
<Pill
color={Green500}
color={Green}
text={OnCallDutyPolicyStatus.Completed}
/>
);
} else if (item['status'] === OnCallDutyPolicyStatus.Started) {
return (
<Pill
color={Yellow500}
color={Yellow}
text={OnCallDutyPolicyStatus.Started}
/>
);
@@ -165,7 +165,7 @@ const ExecutionLogsTable: FunctionComponent<ComponentProps> = (
) {
return (
<Pill
color={Yellow500}
color={Yellow}
text={OnCallDutyPolicyStatus.Scheduled}
/>
);
@@ -174,14 +174,14 @@ const ExecutionLogsTable: FunctionComponent<ComponentProps> = (
) {
return (
<Pill
color={Yellow500}
color={Yellow}
text={OnCallDutyPolicyStatus.Executing}
/>
);
}
return (
<Pill color={Red500} text={OnCallDutyPolicyStatus.Error} />
<Pill color={Red} text={OnCallDutyPolicyStatus.Error} />
);
},
},

16
Dashboard/src/Components/OnCallPolicy/ExecutionLogs/ExecutionLogsTimelineTable.tsx
View File

@@ -4,7 +4,7 @@ import DashboardNavigation from '../../../Utils/Navigation';
import FieldType from 'CommonUI/src/Components/Types/FieldType';
import { JSONObject } from 'Common/Types/JSON';
import Pill from 'CommonUI/src/Components/Pill/Pill';
import { Green500, Red500, Yellow500 } from 'Common/Types/BrandColors';
import { Green, Red, Yellow } from 'Common/Types/BrandColors';
import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button';
import ConfirmModal from 'CommonUI/src/Components/Modal/ConfirmModal';
import OnCallDutyPolicyExecutionLogTimeline from 'Model/Models/OnCallDutyPolicyExecutionLogTimeline';
@@ -207,7 +207,7 @@ const ExecutionLogTimelineTable: FunctionComponent<ComponentProps> = (
) {
return (
<Pill
color={Green500}
color={Green}
text={
OnCallDutyExecutionLogTimelineStatus.NotificationSent
}
@@ -219,7 +219,7 @@ const ExecutionLogTimelineTable: FunctionComponent<ComponentProps> = (
) {
return (
<Pill
color={Green500}
color={Green}
text={
OnCallDutyExecutionLogTimelineStatus.SuccessfullyAcknowledged
}
@@ -231,7 +231,7 @@ const ExecutionLogTimelineTable: FunctionComponent<ComponentProps> = (
) {
return (
<Pill
color={Red500}
color={Red}
text={
OnCallDutyExecutionLogTimelineStatus.Error
}
@@ -243,7 +243,7 @@ const ExecutionLogTimelineTable: FunctionComponent<ComponentProps> = (
) {
return (
<Pill
color={Yellow500}
color={Yellow}
text={
OnCallDutyExecutionLogTimelineStatus.Skipped
}
@@ -255,7 +255,7 @@ const ExecutionLogTimelineTable: FunctionComponent<ComponentProps> = (
) {
return (
<Pill
color={Yellow500}
color={Yellow}
text={
OnCallDutyExecutionLogTimelineStatus.Executing
}
@@ -267,7 +267,7 @@ const ExecutionLogTimelineTable: FunctionComponent<ComponentProps> = (
) {
return (
<Pill
color={Yellow500}
color={Yellow}
text={
OnCallDutyExecutionLogTimelineStatus.Started
}
@@ -277,7 +277,7 @@ const ExecutionLogTimelineTable: FunctionComponent<ComponentProps> = (
return (
<Pill
color={Red500}
color={Red}
text={
OnCallDutyExecutionLogTimelineStatus.Error
}

6
Dashboard/src/Components/Probe/ProbeStatus.tsx
View File

@@ -3,7 +3,7 @@ import Probe from 'Model/Models/Probe';
import { JSONObject } from 'Common/Types/JSON';
import OneUptimeDate from 'Common/Types/Date';
import Statusbubble from 'CommonUI/src/Components/StatusBubble/StatusBubble';
import { Green500, Red500 } from 'Common/Types/BrandColors';
import { Green, Red } from 'Common/Types/BrandColors';
export interface ComponentProps {
probe: Probe | JSONObject;
@@ -23,7 +23,7 @@ const ProbeStatusElement: FunctionComponent<ComponentProps> = (
return (
<Statusbubble
text={'Connected'}
color={Green500}
color={Green}
shouldAnimate={true}
/>
);
@@ -32,7 +32,7 @@ const ProbeStatusElement: FunctionComponent<ComponentProps> = (
return (
<Statusbubble
text={'Disconnected'}
color={Red500}
color={Red}
shouldAnimate={false}
/>
);

6
Dashboard/src/Pages/Monitor/View/Index.tsx
View File

@@ -30,7 +30,7 @@ import API from 'CommonUI/src/Utils/API/API';
import DisabledWarning from '../../../Components/Monitor/DisabledWarning';
import MonitorType from 'Common/Types/Monitor/MonitorType';
import IncomingMonitorLink from '../../../Components/Monitor/IncomingRequestMonitor/IncomingMonitorLink';
import { Green500, Gray500 } from 'Common/Types/BrandColors';
import { Green, Gray500 } from 'Common/Types/BrandColors';
import UptimeUtil from 'CommonUI/src/Components/MonitorGraphs/UptimeUtil';
import MonitorStatus from 'Model/Models/MonitorStatus';
import { UptimePrecision } from 'Model/Models/StatusPageResource';
@@ -108,7 +108,7 @@ const MonitorView: FunctionComponent<PageComponentProps> = (
style={{
color:
currentMonitorStatus?.color?.toString() ||
Green500.toString(),
Green.toString(),
}}
>
{uptimePercent}% uptime
@@ -495,7 +495,7 @@ const MonitorView: FunctionComponent<PageComponentProps> = (
startDate={OneUptimeDate.getSomeDaysAgo(90)}
endDate={OneUptimeDate.getCurrentDate()}
isLoading={isLoading}
defaultBarColor={Green500}
defaultBarColor={Green}
downtimeMonitorStatuses={downTimeMonitorStatues}
/>
</Card>

8
Dashboard/src/Pages/MonitorGroup/View/Index.tsx
View File

@@ -29,7 +29,7 @@ import UptimeUtil from 'CommonUI/src/Components/MonitorGraphs/UptimeUtil';
import MonitorStatus from 'Model/Models/MonitorStatus';
import ProjectUtil from 'CommonUI/src/Utils/Project';
import { UptimePrecision } from 'Model/Models/StatusPageResource';
import { Green500 } from 'Common/Types/BrandColors';
import { Green } from 'Common/Types/BrandColors';
import Statusbubble from 'CommonUI/src/Components/StatusBubble/StatusBubble';
import SortOrder from 'Common/Types/BaseDatabase/SortOrder';
import PageLoader from 'CommonUI/src/Components/Loader/PageLoader';
@@ -71,7 +71,7 @@ const MonitorGroupView: FunctionComponent<PageComponentProps> = (
style={{
color:
currentGroupStatus?.color?.toString() ||
Green500.toString(),
Green.toString(),
}}
>
{uptimePercent}% uptime
@@ -87,7 +87,7 @@ const MonitorGroupView: FunctionComponent<PageComponentProps> = (
return (
<Statusbubble
text={currentGroupStatus?.name || 'Operational'}
color={currentGroupStatus?.color || Green500}
color={currentGroupStatus?.color || Green}
shouldAnimate={true}
/>
);
@@ -306,7 +306,7 @@ const MonitorGroupView: FunctionComponent<PageComponentProps> = (
startDate={OneUptimeDate.getSomeDaysAgo(90)}
endDate={OneUptimeDate.getCurrentDate()}
isLoading={isLoading}
defaultBarColor={Green500}
defaultBarColor={Green}
downtimeMonitorStatuses={downTimeMonitorStatues}
/>
</Card>

6
Dashboard/src/Pages/Settings/CallLog.tsx
View File

@@ -14,7 +14,7 @@ import { JSONObject } from 'Common/Types/JSON';
import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button';
import Pill from 'CommonUI/src/Components/Pill/Pill';
import CallStatus from 'Common/Types/Call/CallStatus';
import { Green500, Red500 } from 'Common/Types/BrandColors';
import { Green, Red } from 'Common/Types/BrandColors';
import { BILLING_ENABLED } from 'CommonUI/src/Config';
import Column from 'CommonUI/src/Components/ModelTable/Column';
import Columns from 'CommonUI/src/Components/ModelTable/Columns';
@@ -118,8 +118,8 @@ const CallLogs: FunctionComponent<PageComponentProps> = (
isMinimal={false}
color={
item['status'] === CallStatus.Success
? Green500
: Red500
? Green
: Red
}
text={item['status'] as string}
/>

6
Dashboard/src/Pages/Settings/EmailLog.tsx
View File

@@ -14,7 +14,7 @@ import { JSONObject } from 'Common/Types/JSON';
import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button';
import Pill from 'CommonUI/src/Components/Pill/Pill';
import EmailStatus from 'Common/Types/Mail/MailStatus';
import { Green500, Red500 } from 'Common/Types/BrandColors';
import { Green, Red } from 'Common/Types/BrandColors';
import Columns from 'CommonUI/src/Components/ModelTable/Columns';
import ConfirmModal from 'CommonUI/src/Components/Modal/ConfirmModal';
import CustomSMTPElement from '../../Components/CustomSMTP/CustomSMTPView';
@@ -124,8 +124,8 @@ const EmailLogs: FunctionComponent<PageComponentProps> = (
isMinimal={false}
color={
item['status'] === EmailStatus.Success
? Green500
: Red500
? Green
: Red
}
text={item['status'] as string}
/>

6
Dashboard/src/Pages/Settings/Invoices.tsx
View File

@@ -15,7 +15,7 @@ import BillingInvoice, { InvoiceStatus } from 'Model/Models/BillingInvoice';
import FieldType from 'CommonUI/src/Components/Types/FieldType';
import URL from 'Common/Types/API/URL';
import Pill from 'CommonUI/src/Components/Pill/Pill';
import { Green500, Yellow500 } from 'Common/Types/BrandColors';
import { Green, Yellow } from 'Common/Types/BrandColors';
import { APP_API_URL } from 'CommonUI/src/Config';
import BaseAPI from 'CommonUI/src/Utils/API/API';
import ModelAPI from 'CommonUI/src/Utils/ModelAPI/ModelAPI';
@@ -173,7 +173,7 @@ const Settings: FunctionComponent<ComponentProps> = (
text={Text.uppercaseFirstLetter(
item['status'] as string
)}
color={Green500}
color={Green}
/>
);
}
@@ -182,7 +182,7 @@ const Settings: FunctionComponent<ComponentProps> = (
text={Text.uppercaseFirstLetter(
item['status'] as string
)}
color={Yellow500}
color={Yellow}
/>
);
},

6
Dashboard/src/Pages/Settings/Probes.tsx
View File

@@ -17,7 +17,7 @@ import ConfirmModal from 'CommonUI/src/Components/Modal/ConfirmModal';
import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button';
import ProbeElement from 'CommonUI/src/Components/Probe/Probe';
import Statusbubble from 'CommonUI/src/Components/StatusBubble/StatusBubble';
import { Green500, Red500 } from 'Common/Types/BrandColors';
import { Green, Red } from 'Common/Types/BrandColors';
import OneUptimeDate from 'Common/Types/Date';
import URL from 'Common/Types/API/URL';
import { APP_API_URL } from 'CommonUI/src/Config';
@@ -267,7 +267,7 @@ const ProbePage: FunctionComponent<PageComponentProps> = (
return (
<Statusbubble
text={'Connected'}
color={Green500}
color={Green}
shouldAnimate={true}
/>
);
@@ -276,7 +276,7 @@ const ProbePage: FunctionComponent<PageComponentProps> = (
return (
<Statusbubble
text={'Disconnected'}
color={Red500}
color={Red}
shouldAnimate={false}
/>
);

6
Dashboard/src/Pages/Settings/SmsLog.tsx
View File

@@ -14,7 +14,7 @@ import { JSONObject } from 'Common/Types/JSON';
import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button';
import Pill from 'CommonUI/src/Components/Pill/Pill';
import SmsStatus from 'Common/Types/SmsStatus';
import { Green500, Red500 } from 'Common/Types/BrandColors';
import { Green, Red } from 'Common/Types/BrandColors';
import { BILLING_ENABLED } from 'CommonUI/src/Config';
import Column from 'CommonUI/src/Components/ModelTable/Column';
import Columns from 'CommonUI/src/Components/ModelTable/Columns';
@@ -116,8 +116,8 @@ const SMSLogs: FunctionComponent<PageComponentProps> = (
isMinimal={false}
color={
item['status'] === SmsStatus.Success
? Green500
: Red500
? Green
: Red
}
text={item['status'] as string}
/>

6
Dashboard/src/Pages/Settings/TeamView.tsx
View File

@@ -28,7 +28,7 @@ import LabelsElement from '../../Components/Label/Labels';
import BadDataException from 'Common/Types/Exception/BadDataException';
import FormValues from 'CommonUI/src/Components/Forms/Types/FormValues';
import Pill from 'CommonUI/src/Components/Pill/Pill';
import { Green500, Yellow500 } from 'Common/Types/BrandColors';
import { Green, Yellow } from 'Common/Types/BrandColors';
import DashboardNavigation from '../../Utils/Navigation';
import BaseModel from 'Common/Models/BaseModel';
import { FormProps } from 'CommonUI/src/Components/Forms/BasicForm';
@@ -210,12 +210,12 @@ const TeamView: FunctionComponent<PageComponentProps> = (
type: FieldType.Boolean,
getElement: (item: JSONObject): ReactElement => {
if (item['hasAcceptedInvitation']) {
return <Pill text="Member" color={Green500} />;
return <Pill text="Member" color={Green} />;
}
return (
<Pill
text="Invitation Sent"
color={Yellow500}
color={Yellow}
/>
);
},

6
Dashboard/src/Pages/StatusPages/View/EmailSubscribers.tsx
View File

@@ -16,7 +16,7 @@ import ModelTable from 'CommonUI/src/Components/ModelTable/ModelTable';
import NotNull from 'Common/Types/BaseDatabase/NotNull';
import { JSONObject } from 'Common/Types/JSON';
import Pill from 'CommonUI/src/Components/Pill/Pill';
import { Green500, Red500 } from 'Common/Types/BrandColors';
import { Green, Red } from 'Common/Types/BrandColors';
import Navigation from 'CommonUI/src/Utils/Navigation';
import StatusPage from 'Model/Models/StatusPage';
import ModelAPI from 'CommonUI/src/Utils/ModelAPI/ModelAPI';
@@ -263,14 +263,14 @@ const StatusPageDelete: FunctionComponent<PageComponentProps> = (
if (item['isUnsubscribed']) {
return (
<Pill
color={Red500}
color={Red}
text={'Unsubscribed'}
/>
);
}
return (
<Pill
color={Green500}
color={Green}
text={'Subscribed'}
/>
);

6
Dashboard/src/Pages/StatusPages/View/PrivateUser.tsx
View File

@@ -8,7 +8,7 @@ import FormFieldSchemaType from 'CommonUI/src/Components/Forms/Types/FormFieldSc
import FieldType from 'CommonUI/src/Components/Types/FieldType';
import { JSONObject } from 'Common/Types/JSON';
import Pill from 'CommonUI/src/Components/Pill/Pill';
import { Green500, Yellow500 } from 'Common/Types/BrandColors';
import { Green, Yellow } from 'Common/Types/BrandColors';
import Navigation from 'CommonUI/src/Utils/Navigation';
const StatusPageDelete: FunctionComponent<PageComponentProps> = (
@@ -84,11 +84,11 @@ const StatusPageDelete: FunctionComponent<PageComponentProps> = (
getElement: (item: JSONObject): ReactElement => {
if (item['password']) {
return (
<Pill color={Green500} text={'Signed up'} />
<Pill color={Green} text={'Signed up'} />
);
}
return (
<Pill color={Yellow500} text={'Invite Sent'} />
<Pill color={Yellow} text={'Invite Sent'} />
);
},
},

6
Dashboard/src/Pages/StatusPages/View/SMSSubscribers.tsx
View File

@@ -17,7 +17,7 @@ import ModelTable from 'CommonUI/src/Components/ModelTable/ModelTable';
import NotNull from 'Common/Types/BaseDatabase/NotNull';
import { JSONObject } from 'Common/Types/JSON';
import Pill from 'CommonUI/src/Components/Pill/Pill';
import { Green500, Red500 } from 'Common/Types/BrandColors';
import { Green, Red } from 'Common/Types/BrandColors';
import Navigation from 'CommonUI/src/Utils/Navigation';
import StatusPage from 'Model/Models/StatusPage';
import ModelAPI from 'CommonUI/src/Utils/ModelAPI/ModelAPI';
@@ -265,14 +265,14 @@ const StatusPageDelete: FunctionComponent<PageComponentProps> = (
if (item['isUnsubscribed']) {
return (
<Pill
color={Red500}
color={Red}
text={'Unsubscribed'}
/>
);
}
return (
<Pill
color={Green500}
color={Green}
text={'Subscribed'}
/>
);

8
Dashboard/src/Pages/Telemetry/Services/View/Traces/Index.tsx
View File

@@ -12,7 +12,7 @@ import { DropdownOption } from 'CommonUI/src/Components/Dropdown/Dropdown';
import { JSONObject } from 'Common/Types/JSON';
import ColorSquareCube from 'CommonUI/src/Components/ColorSquareCube/ColorSquareCube';
import AnalyticsBaseModel from 'Common/AnalyticsModels/BaseModel';
import { Green500, Red500 } from 'Common/Types/BrandColors';
import { Green, Red } from 'Common/Types/BrandColors';
const TracesList: FunctionComponent<PageComponentProps> = (
_props: PageComponentProps
@@ -123,7 +123,7 @@ const TracesList: FunctionComponent<PageComponentProps> = (
SpanStatus.Unset ||
!spanObj.statusCode) ? (
<ColorSquareCube
color={Green500}
color={Green}
tooltip="Span Status: Unset"
/>
) : (
@@ -133,7 +133,7 @@ const TracesList: FunctionComponent<PageComponentProps> = (
spanObj.statusCode ===
SpanStatus.Ok ? (
<ColorSquareCube
color={Green500}
color={Green}
tooltip="Span Status: Ok"
/>
) : (
@@ -143,7 +143,7 @@ const TracesList: FunctionComponent<PageComponentProps> = (
spanObj.statusCode ===
SpanStatus.Error ? (
<ColorSquareCube
color={Red500}
color={Red}
tooltip="Span Status: Error"
/>
) : (

12
Dashboard/src/Pages/UserSettings/OnCallLogs.tsx
View File

@@ -18,7 +18,7 @@ import OnCallDutyPolicyEscalationRule from 'Model/Models/OnCallDutyPolicyEscalat
import EscalationRuleView from '../../Components/OnCallPolicy/EscalationRule/EscalationRule';
import Pill from 'CommonUI/src/Components/Pill/Pill';
import UserNotificationExecutionStatus from 'Common/Types/UserNotification/UserNotificationExecutionStatus';
import { Green500, Red500, Yellow500 } from 'Common/Types/BrandColors';
import { Green, Red, Yellow } from 'Common/Types/BrandColors';
import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button';
import ConfirmModal from 'CommonUI/src/Components/Modal/ConfirmModal';
import DropdownUtil from 'CommonUI/src/Utils/Dropdown';
@@ -207,7 +207,7 @@ const Settings: FunctionComponent<PageComponentProps> = (
) {
return (
<Pill
color={Green500}
color={Green}
text={
UserNotificationExecutionStatus.Completed
}
@@ -219,7 +219,7 @@ const Settings: FunctionComponent<PageComponentProps> = (
) {
return (
<Pill
color={Yellow500}
color={Yellow}
text={
UserNotificationExecutionStatus.Started
}
@@ -231,7 +231,7 @@ const Settings: FunctionComponent<PageComponentProps> = (
) {
return (
<Pill
color={Yellow500}
color={Yellow}
text={
UserNotificationExecutionStatus.Scheduled
}
@@ -243,7 +243,7 @@ const Settings: FunctionComponent<PageComponentProps> = (
) {
return (
<Pill
color={Yellow500}
color={Yellow}
text={
UserNotificationExecutionStatus.Executing
}
@@ -253,7 +253,7 @@ const Settings: FunctionComponent<PageComponentProps> = (
return (
<Pill
color={Red500}
color={Red}
text={UserNotificationExecutionStatus.Error}
/>
);

12
Dashboard/src/Pages/UserSettings/OnCallLogsTimeline.tsx
View File

@@ -13,7 +13,7 @@ import FieldType from 'CommonUI/src/Components/Types/FieldType';
import { JSONObject } from 'Common/Types/JSON';
import Pill from 'CommonUI/src/Components/Pill/Pill';
import UserNotificationStatus from 'Common/Types/UserNotification/UserNotificationStatus';
import { Green500, Red500, Yellow500 } from 'Common/Types/BrandColors';
import { Green, Red, Yellow } from 'Common/Types/BrandColors';
import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button';
import ConfirmModal from 'CommonUI/src/Components/Modal/ConfirmModal';
import ObjectID from 'Common/Types/ObjectID';
@@ -146,7 +146,7 @@ const Settings: FunctionComponent<PageComponentProps> = (
) {
return (
<Pill
color={Green500}
color={Green}
text={UserNotificationStatus.Sent}
/>
);
@@ -156,7 +156,7 @@ const Settings: FunctionComponent<PageComponentProps> = (
) {
return (
<Pill
color={Green500}
color={Green}
text={
UserNotificationStatus.Acknowledged
}
@@ -167,7 +167,7 @@ const Settings: FunctionComponent<PageComponentProps> = (
) {
return (
<Pill
color={Yellow500}
color={Yellow}
text={UserNotificationStatus.Error}
/>
);
@@ -177,7 +177,7 @@ const Settings: FunctionComponent<PageComponentProps> = (
) {
return (
<Pill
color={Yellow500}
color={Yellow}
text={UserNotificationStatus.Skipped}
/>
);
@@ -185,7 +185,7 @@ const Settings: FunctionComponent<PageComponentProps> = (
return (
<Pill
color={Red500}
color={Red}
text={UserNotificationStatus.Error}
/>
);

6
StatusPage/src/Components/Monitor/MonitorOverview.tsx
View File

@@ -1,4 +1,4 @@
import { Green500 } from 'Common/Types/BrandColors';
import { Green } from 'Common/Types/BrandColors';
import MonitorUptimeGraph from 'CommonUI/src/Components/MonitorGraphs/Uptime';
import React, { FunctionComponent, ReactElement } from 'react';
import MonitorStatus from 'Model/Models/MonitorStatus';
@@ -67,7 +67,7 @@ const MonitorOverview: FunctionComponent<ComponentProps> = (
style={{
color:
props.currentStatus?.color?.toString() ||
Green500.toString(),
Green.toString(),
}}
>
{uptimePercent}% uptime
@@ -82,7 +82,7 @@ const MonitorOverview: FunctionComponent<ComponentProps> = (
style={{
color:
props.currentStatus?.color?.toString() ||
Green500.toString(),
Green.toString(),
}}
>
{props.currentStatus?.name || 'Operational'}

8
StatusPage/src/Pages/Incidents/Detail.tsx
View File

@@ -33,7 +33,7 @@ import EventItem, {
import Navigation from 'CommonUI/src/Utils/Navigation';
import Monitor from 'Model/Models/Monitor';
import Color from 'Common/Types/Color';
import { Green500, Gray500, Red500 } from 'Common/Types/BrandColors';
import { Green, Gray500, Red } from 'Common/Types/BrandColors';
import IconProp from 'Common/Types/Icon/IconProp';
import EmptyState from 'CommonUI/src/Components/EmptyState/EmptyState';
import API from '../../Utils/API';
@@ -73,7 +73,7 @@ export const getIncidentEventItem: GetIncidentEventItemFunction = (
const timeline: Array<TimelineItem> = [];
let currentStateStatus: string = '';
let currentStatusColor: Color = Green500;
let currentStatusColor: Color = Green;
if (isSummary) {
// If this is summary then reverse the order so we show the latest first
@@ -140,7 +140,7 @@ export const getIncidentEventItem: GetIncidentEventItemFunction = (
currentStateStatus =
incidentStateTimeline.incidentState?.name || '';
currentStatusColor =
incidentStateTimeline.incidentState?.color || Green500;
incidentStateTimeline.incidentState?.color || Green;
}
// If this incident is a sumamry then don't include all the notes .
@@ -219,7 +219,7 @@ export const getIncidentEventItem: GetIncidentEventItemFunction = (
? 'Created at ' +
OneUptimeDate.getDateAsLocalFormattedString(incident.createdAt!)
: '',
eventTypeColor: Red500,
eventTypeColor: Red,
labels:
incident.labels?.map((label: Label) => {
return {

14
StatusPage/src/Pages/Overview/Overview.tsx
View File

@@ -30,7 +30,7 @@ import StatusPageAnnouncement from 'Model/Models/StatusPageAnnouncement';
import ScheduledMaintenance from 'Model/Models/ScheduledMaintenance';
import ScheduledMaintenancePublicNote from 'Model/Models/ScheduledMaintenancePublicNote';
import MonitorOverview from '../../Components/Monitor/MonitorOverview';
import { Green500 } from 'Common/Types/BrandColors';
import { Green } from 'Common/Types/BrandColors';
import OneUptimeDate from 'Common/Types/Date';
import Dictionary from 'Common/Types/Dictionary';
import IncidentGroup from '../../Types/IncidentGroup';
@@ -414,7 +414,7 @@ const Overview: FunctionComponent<PageComponentProps> = (
if (!currentStatus) {
currentStatus = new MonitorStatus();
currentStatus.name = 'Operational';
currentStatus.color = Green500;
currentStatus.color = Green;
}
elements.push(
@@ -457,7 +457,7 @@ const Overview: FunctionComponent<PageComponentProps> = (
showCurrentStatus={resource.showCurrentStatus}
uptimeGraphHeight={10}
defaultBarColor={
statusPage?.defaultBarColor || Green500
statusPage?.defaultBarColor || Green
}
/>
);
@@ -480,7 +480,7 @@ const Overview: FunctionComponent<PageComponentProps> = (
if (!currentStatus) {
currentStatus = new MonitorStatus();
currentStatus.name = 'Operational';
currentStatus.color = Green500;
currentStatus.color = Green;
}
elements.push(
@@ -539,7 +539,7 @@ const Overview: FunctionComponent<PageComponentProps> = (
showCurrentStatus={resource.showCurrentStatus}
uptimeGraphHeight={10}
defaultBarColor={
statusPage?.defaultBarColor || Green500
statusPage?.defaultBarColor || Green
}
/>
);
@@ -666,7 +666,7 @@ const Overview: FunctionComponent<PageComponentProps> = (
): ReactElement => {
let currentStatus: MonitorStatus = new MonitorStatus();
currentStatus.name = 'Operational';
currentStatus.color = Green500;
currentStatus.color = Green;
let hasResource: boolean = false;
for (const resource of statusPageResources) {
@@ -708,7 +708,7 @@ const Overview: FunctionComponent<PageComponentProps> = (
style={{
color:
currentStatus?.color?.toString() ||
Green500.toString(),
Green.toString(),
}}
>
{currentStatus?.name || 'Operational'}

8
StatusPage/src/Pages/ScheduledEvent/Detail.tsx
View File

@@ -30,7 +30,7 @@ import EventItem, {
} from 'CommonUI/src/Components/EventItem/EventItem';
import Navigation from 'CommonUI/src/Utils/Navigation';
import Color from 'Common/Types/Color';
import { Green500, Gray500, Yellow500 } from 'Common/Types/BrandColors';
import { Green, Gray500, Yellow } from 'Common/Types/BrandColors';
import EmptyState from 'CommonUI/src/Components/EmptyState/EmptyState';
import IconProp from 'Common/Types/Icon/IconProp';
import API from '../../Utils/API';
@@ -72,7 +72,7 @@ export const getScheduledEventEventItem: GetScheduledEventEventItemFunction = (
/// get timeline.
let currentStateStatus: string = '';
let currentStatusColor: Color = Green500;
let currentStatusColor: Color = Green;
const timeline: Array<TimelineItem> = [];
@@ -156,7 +156,7 @@ export const getScheduledEventEventItem: GetScheduledEventEventItemFunction = (
.scheduledMaintenanceState?.name || '';
currentStatusColor =
scheduledMaintenanceEventstateTimeline
.scheduledMaintenanceState?.color || Green500;
.scheduledMaintenanceState?.color || Green;
}
if (isSummary) {
@@ -245,7 +245,7 @@ export const getScheduledEventEventItem: GetScheduledEventEventItemFunction = (
isDetailItem: !isSummary,
currentStatus: currentStateStatus,
currentStatusColor: currentStatusColor,
eventTypeColor: Yellow500,
eventTypeColor: Yellow,
eventSecondDescription: scheduledMaintenance.startsAt
? 'Scheduled at ' +
OneUptimeDate.getDateAsLocalFormattedString(