Skip to content

Commit

Permalink
Refactor field types and import statements in multiple components
Browse files Browse the repository at this point in the history
  • Loading branch information
@simlarsen
simlarsen committed Apr 21, 2024
1 parent cd5eb62 commit ab6a01e
Show file tree
Hide file tree
Showing 9 changed files with 40 additions and 63 deletions.
26 changes: 7 additions & 19 deletions Dashboard/src/Pages/Monitor/View/Index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 { Green, Gray500 } from 'Common/Types/BrandColors';
import { Green, Gray500, Black } from 'Common/Types/BrandColors';
import UptimeUtil from 'CommonUI/src/Components/MonitorGraphs/UptimeUtil';
import MonitorStatus from 'Model/Models/MonitorStatus';
import { UptimePrecision } from 'Model/Models/StatusPageResource';
Expand Down Expand Up @@ -296,7 +296,7 @@ const MonitorView: FunctionComponent<PageComponentProps> = (
<DisabledWarning monitorId={modelId} />

{/* Monitor View */}
<CardModelDetail
<CardModelDetail<Monitor>
name="Monitor Details"
formSteps={[
{
Expand Down Expand Up @@ -384,7 +384,7 @@ const MonitorView: FunctionComponent<PageComponentProps> = (
},
title: 'Current Status',
fieldType: FieldType.Element,
getElement: (item: JSONObject): ReactElement => {
getElement: (item: Monitor): ReactElement => {
if (!item['currentMonitorStatus']) {
throw new BadDataException(
'Monitor Status not found'
Expand All @@ -404,19 +404,11 @@ const MonitorView: FunctionComponent<PageComponentProps> = (
return (
<Statusbubble
color={
(
item[
'currentMonitorStatus'
] as JSONObject
)['color'] as Color
item.currentMonitorStatus.color || Black
}
shouldAnimate={true}
text={
(
item[
'currentMonitorStatus'
] as JSONObject
)['name'] as string
item.currentMonitorStatus.name || "Unknown"
}
/>
);
Expand All @@ -438,15 +430,11 @@ const MonitorView: FunctionComponent<PageComponentProps> = (
},
title: 'Labels',
fieldType: FieldType.Element,
getElement: (item: JSONObject): ReactElement => {
getElement: (item: Monitor): ReactElement => {
return (
<LabelsElement
labels={
BaseModel.fromJSON(
(item['labels'] as JSONArray) ||
[],
Label
) as Array<Label>
item['labels'] || []
}
/>
);
Expand Down
17 changes: 7 additions & 10 deletions Dashboard/src/Pages/Monitor/View/StatusTimeline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { ButtonStyleType } from 'CommonUI/src/Components/Button/Button';
import Modal, { ModalWidth } from 'CommonUI/src/Components/Modal/Modal';
import ConfirmModal from 'CommonUI/src/Components/Modal/ConfirmModal';
import OneUptimeDate from 'Common/Types/Date';
import { Black } from 'Common/Types/BrandColors';

const StatusTimeline: FunctionComponent<PageComponentProps> = (
props: PageComponentProps
Expand Down Expand Up @@ -56,7 +57,7 @@ const StatusTimeline: FunctionComponent<PageComponentProps> = (
buttonStyleType: ButtonStyleType.NORMAL,
icon: IconProp.TransparentCube,
onClick: async (
item: JSONObject,
item: MonitorStatusTimeline,
onCompleteAction: VoidFunction
) => {
setRootCause(
Expand All @@ -74,7 +75,7 @@ const StatusTimeline: FunctionComponent<PageComponentProps> = (
buttonStyleType: ButtonStyleType.NORMAL,
icon: IconProp.List,
onClick: async (
item: JSONObject,
item: MonitorStatusTimeline,
onCompleteAction: VoidFunction
) => {
setLogs(
Expand Down Expand Up @@ -175,7 +176,7 @@ const StatusTimeline: FunctionComponent<PageComponentProps> = (
},
title: 'Monitor Status',
type: FieldType.Text,
getElement: (item: JSONObject): ReactElement => {
getElement: (item: MonitorStatusTimeline): ReactElement => {
if (!item['monitorStatus']) {
throw new BadDataException(
'Monitor Status not found'
Expand All @@ -185,15 +186,11 @@ const StatusTimeline: FunctionComponent<PageComponentProps> = (
return (
<Statusbubble
color={
(item['monitorStatus'] as JSONObject)[
'color'
] as Color
item.monitorStatus.color || Black
}
shouldAnimate={false}
text={
(item['monitorStatus'] as JSONObject)[
'name'
] as string
item.monitorStatus.name || 'Unknown'
}
/>
);
Expand All @@ -220,7 +217,7 @@ const StatusTimeline: FunctionComponent<PageComponentProps> = (
},
title: 'Duration',
type: FieldType.Text,
getElement: (item: JSONObject): ReactElement => {
getElement: (item: MonitorStatusTimeline): ReactElement => {
return (
<p>
{OneUptimeDate.differenceBetweenTwoDatesAsFromattedString(
Expand Down
4 changes: 2 additions & 2 deletions Dashboard/src/Pages/Settings/MonitorStatus.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ const Monitors: FunctionComponent<PageComponentProps> = (
title: 'Name',
type: FieldType.Text,

getElement: (item: JSONObject): ReactElement => {
getElement: (item: MonitorStatus): ReactElement => {
return (
<StatusBubble
color={item['color'] as Color}
Expand All @@ -136,7 +136,7 @@ const Monitors: FunctionComponent<PageComponentProps> = (
title: 'Description',
type: FieldType.Text,

getElement: (item: JSONObject): ReactElement => {
getElement: (item: MonitorStatus): ReactElement => {
return (
<div>
<p>{`${item['description']}`}</p>
Expand Down
16 changes: 7 additions & 9 deletions Dashboard/src/Pages/Settings/Probes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const ProbePage: FunctionComponent<PageComponentProps> = (
): ReactElement => {
const [showKeyModal, setShowKeyModal] = useState<boolean>(false);

const [currentProbe, setCurrentProbe] = useState<JSONObject | null>(null);
const [currentProbe, setCurrentProbe] = useState<Probe | null>(null);

return (
<Fragment>
Expand Down Expand Up @@ -78,7 +78,7 @@ const ProbePage: FunctionComponent<PageComponentProps> = (
title: 'Name',
type: FieldType.Text,

getElement: (item: JSONObject): ReactElement => {
getElement: (item: Probe): ReactElement => {
return <ProbeElement probe={item} />;
},
},
Expand All @@ -96,7 +96,7 @@ const ProbePage: FunctionComponent<PageComponentProps> = (
title: 'Probe Status',
type: FieldType.Text,

getElement: (item: JSONObject): ReactElement => {
getElement: (item: Probe): ReactElement => {
return <ProbeStatusElement probe={item} />;
},
},
Expand Down Expand Up @@ -181,7 +181,7 @@ const ProbePage: FunctionComponent<PageComponentProps> = (
title: 'Show ID and Key',
buttonStyleType: ButtonStyleType.NORMAL,
onClick: async (
item: JSONObject,
item: Probe,
onCompleteAction: VoidFunction,
onError: ErrorFunction
) => {
Expand Down Expand Up @@ -228,7 +228,7 @@ const ProbePage: FunctionComponent<PageComponentProps> = (
title: 'Name',
type: FieldType.Text,

getElement: (item: JSONObject): ReactElement => {
getElement: (item: Probe): ReactElement => {
return <ProbeElement probe={item} />;
},
},
Expand All @@ -253,14 +253,12 @@ const ProbePage: FunctionComponent<PageComponentProps> = (
title: 'Status',
type: FieldType.Text,

getElement: (item: JSONObject): ReactElement => {
getElement: (item: Probe): ReactElement => {
if (
item &&
item['lastAlive'] &&
OneUptimeDate.getNumberOfMinutesBetweenDates(
OneUptimeDate.fromString(
item['lastAlive'] as string
),
item['lastAlive'],
OneUptimeDate.getCurrentDate()
) < 5
) {
Expand Down
10 changes: 3 additions & 7 deletions Dashboard/src/Pages/Settings/SSO.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ const SSOPage: FunctionComponent<PageComponentProps> = (
title: 'View SSO URL',
buttonStyleType: ButtonStyleType.NORMAL,
onClick: async (
item: JSONObject,
item: ProjectSSO,
onCompleteAction: VoidFunction
) => {
setShowSingleSignOnUrlId(
Expand Down Expand Up @@ -269,15 +269,11 @@ const SSOPage: FunctionComponent<PageComponentProps> = (
},
title: 'Add User to Team',
type: FieldType.Text,
getElement: (item: JSONObject): ReactElement => {
getElement: (item: ProjectSSO): ReactElement => {
return (
<TeamsElement
teams={
BaseModel.fromJSON(
(item['teams'] as JSONArray) ||
[],
Team
) as Array<Team>
item['teams'] || []
}
/>
);
Expand Down
6 changes: 3 additions & 3 deletions Dashboard/src/Pages/Settings/SmsLog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ const SMSLogs: FunctionComponent<PageComponentProps> = (
},
title: 'Status',
type: FieldType.Text,
getElement: (item: JSONObject): ReactElement => {
getElement: (item: SmsLog): ReactElement => {
if (item['status']) {
return (
<Pill
Expand Down Expand Up @@ -164,7 +164,7 @@ const SMSLogs: FunctionComponent<PageComponentProps> = (
buttonStyleType: ButtonStyleType.NORMAL,
icon: IconProp.List,
onClick: async (
item: JSONObject,
item: SmsLog,
onCompleteAction: VoidFunction
) => {
setSmsText(item['smsText'] as string);
Expand All @@ -180,7 +180,7 @@ const SMSLogs: FunctionComponent<PageComponentProps> = (
buttonStyleType: ButtonStyleType.NORMAL,
icon: IconProp.Error,
onClick: async (
item: JSONObject,
item: SmsLog,
onCompleteAction: VoidFunction
) => {
setSmsText(item['statusMessage'] as string);
Expand Down
7 changes: 2 additions & 5 deletions Dashboard/src/Pages/StatusPages/StatusPages.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,14 +144,11 @@ const StatusPages: FunctionComponent<PageComponentProps> = (
title: 'Labels',
type: FieldType.EntityArray,

getElement: (item: JSONObject): ReactElement => {
getElement: (item: StatusPage): ReactElement => {
return (
<LabelsElement
labels={
BaseModel.fromJSON(
(item['labels'] as JSONArray) || [],
Label
) as Array<Label>
item['labels'] || []
}
/>
);
Expand Down
9 changes: 5 additions & 4 deletions Dashboard/src/Pages/StatusPages/View/Domains.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,15 +68,16 @@ const StatusPageDelete: FunctionComponent<PageComponentProps> = (
title: 'Add CNAME',
buttonStyleType: ButtonStyleType.SUCCESS_OUTLINE,
icon: IconProp.Check,
isVisible: (item: JSONObject): boolean => {
isVisible: (item: StatusPageDomain): boolean => {

if (item['isCnameVerified']) {
return false;
}

return true;
},
onClick: async (
item: JSONObject,
item: StatusPageDomain,
onCompleteAction: VoidFunction,
onError: ErrorFunction
) => {
Expand All @@ -94,7 +95,7 @@ const StatusPageDelete: FunctionComponent<PageComponentProps> = (
title: 'Provision SSL',
buttonStyleType: ButtonStyleType.SUCCESS_OUTLINE,
icon: IconProp.Check,
isVisible: (item: JSONObject): boolean => {
isVisible: (item: StatusPageDomain): boolean => {
if (
item['isCnameVerified'] &&
!item['isSslProvisioned']
Expand All @@ -105,7 +106,7 @@ const StatusPageDelete: FunctionComponent<PageComponentProps> = (
return false;
},
onClick: async (
_item: JSONObject,
_item: StatusPageDomain,
onCompleteAction: VoidFunction,
onError: ErrorFunction
) => {
Expand Down
8 changes: 4 additions & 4 deletions Dashboard/src/Pages/UserSettings/OnCallLogs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const Settings: FunctionComponent<PageComponentProps> = (
title: 'View Status Message',
buttonStyleType: ButtonStyleType.NORMAL,
onClick: async (
item: JSONObject,
item: UserOnCallLog,
onCompleteAction: VoidFunction,
onError: ErrorFunction
) => {
Expand Down Expand Up @@ -147,7 +147,7 @@ const Settings: FunctionComponent<PageComponentProps> = (
title: 'On-Call Policy',
type: FieldType.Element,

getElement: (item: JSONObject): ReactElement => {
getElement: (item: UserOnCallLog): ReactElement => {
if (item['onCallDutyPolicy']) {
return (
<OnCallDutyPolicyView
Expand All @@ -171,7 +171,7 @@ const Settings: FunctionComponent<PageComponentProps> = (
title: 'Escalation Rule',
type: FieldType.Element,

getElement: (item: JSONObject): ReactElement => {
getElement: (item: UserOnCallLog): ReactElement => {
if (item['onCallDutyPolicyEscalationRule']) {
return (
<EscalationRuleView
Expand Down Expand Up @@ -200,7 +200,7 @@ const Settings: FunctionComponent<PageComponentProps> = (
title: 'Status',
type: FieldType.Element,

getElement: (item: JSONObject): ReactElement => {
getElement: (item: UserOnCallLog): ReactElement => {
if (
item['status'] ===
UserNotificationExecutionStatus.Completed
Expand Down

0 comments on commit ab6a01e

Please sign in to comment.