refactor: Clean up code formatting and improve readability across multiple components

This commit is contained in:
Nawaz Dhandala
2026-02-13 13:48:46 +00:00
parent f324a4e864
commit f3cd7be143
22 changed files with 157 additions and 154 deletions

View File

@@ -3172,8 +3172,7 @@ const dataTypeDetails: Dictionary<DataTypePageData> = {
name: "queryName",
type: "string",
required: true,
description:
"The domain name to query (e.g., 'example.com').",
description: "The domain name to query (e.g., 'example.com').",
},
{
name: "recordType",

View File

@@ -5,9 +5,7 @@ import {
CriteriaFilter,
FilterType,
} from "../../../../Types/Monitor/CriteriaFilter";
import DnsMonitorResponse, {
DnsRecordResponse,
} from "../../../../Types/Monitor/DnsMonitor/DnsMonitorResponse";
import DnsMonitorResponse from "../../../../Types/Monitor/DnsMonitor/DnsMonitorResponse";
import ProbeMonitorResponse from "../../../../Types/Probe/ProbeMonitorResponse";
import EvaluateOverTime from "./EvaluateOverTime";
import CaptureSpan from "../../Telemetry/CaptureSpan";
@@ -154,13 +152,12 @@ export default class DnsMonitorCriteria {
CompareCriteria.convertToNumber(threshold);
if (numericThreshold !== null && !isNaN(Number(recordValue))) {
const result: string | null = CompareCriteria.compareCriteriaNumbers(
{
const result: string | null =
CompareCriteria.compareCriteriaNumbers({
value: Number(recordValue),
threshold: numericThreshold,
criteriaFilter: input.criteriaFilter,
},
);
});
if (result) {
return `DNS record (${record.type}): ${result}`;

View File

@@ -23,7 +23,9 @@ const DnsMonitorView: FunctionComponent<ComponentProps> = (
responseTimeInMs = Math.round(responseTimeInMs);
}
const getDnssecStatusText = (): string => {
type GetDnssecStatusText = () => string;
const getDnssecStatusText: GetDnssecStatusText = (): string => {
if (dnsResponse?.isDnssecValid === undefined) {
return "Unknown";
}

View File

@@ -1,3 +1,3 @@
/// <reference types="nativewind/types" />
// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.
// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.

View File

@@ -49,10 +49,7 @@ export default function AlertCard({
accessibilityLabel={`Alert ${alert.alertNumberWithPrefix || alert.alertNumber}, ${alert.title}. State: ${alert.currentAlertState?.name ?? "unknown"}. Severity: ${alert.alertSeverity?.name ?? "unknown"}.`}
>
<View className="flex-row">
<View
className="w-1"
style={{ backgroundColor: stateColor }}
/>
<View className="w-1" style={{ backgroundColor: stateColor }} />
<View className="flex-1 p-4">
{projectName ? (
<View className="mb-1.5">

View File

@@ -74,10 +74,7 @@ export default function EpisodeCard(
activeOpacity={0.7}
>
<View className="flex-row">
<View
className="w-1"
style={{ backgroundColor: stateColor }}
/>
<View className="w-1" style={{ backgroundColor: stateColor }} />
<View className="flex-1 p-4">
{projectName ? (
<View className="mb-1.5">

View File

@@ -52,10 +52,7 @@ export default function IncidentCard({
accessibilityLabel={`Incident ${incident.incidentNumberWithPrefix || incident.incidentNumber}, ${incident.title}. State: ${incident.currentIncidentState?.name ?? "unknown"}. Severity: ${incident.incidentSeverity?.name ?? "unknown"}.`}
>
<View className="flex-row">
<View
className="w-1"
style={{ backgroundColor: stateColor }}
/>
<View className="w-1" style={{ backgroundColor: stateColor }} />
<View className="flex-1 p-4">
{projectName ? (
<View className="mb-1.5">
@@ -68,7 +65,8 @@ export default function IncidentCard({
style={{ backgroundColor: theme.colors.backgroundTertiary }}
>
<Text className="text-[12px] font-semibold text-text-tertiary">
{incident.incidentNumberWithPrefix || `#${incident.incidentNumber}`}
{incident.incidentNumberWithPrefix ||
`#${incident.incidentNumber}`}
</Text>
</View>
<Text className="text-[12px] text-text-tertiary">{timeString}</Text>

View File

@@ -1,5 +1,10 @@
import React, { useEffect, useRef } from "react";
import { View, Animated, DimensionValue, AccessibilityInfo } from "react-native";
import {
View,
Animated,
DimensionValue,
AccessibilityInfo,
} from "react-native";
import { useTheme } from "../theme";
interface SkeletonCardProps {

View File

@@ -21,14 +21,15 @@ interface UseAllProjectAlertEpisodesResult {
export function useAllProjectAlertEpisodes(): UseAllProjectAlertEpisodesResult {
const { projectList } = useProject();
const query: UseQueryResult<ListResponse<AlertEpisodeItem>, Error> =
useQuery({
const query: UseQueryResult<ListResponse<AlertEpisodeItem>, Error> = useQuery(
{
queryKey: ["alert-episodes", "all-projects"],
queryFn: () => {
return fetchAllAlertEpisodes({ skip: 0, limit: FETCH_LIMIT });
},
enabled: projectList.length > 0,
});
},
);
const projectMap: Map<string, string> = useMemo(() => {
const map: Map<string, string> = new Map();

View File

@@ -25,18 +25,20 @@ export function useAllProjectCounts(): UseAllProjectCountsResult {
const { projectList } = useProject();
const enabled: boolean = projectList.length > 0;
const incidentQuery: UseQueryResult<ListResponse<IncidentItem>, Error> =
useQuery({
queryKey: ["incidents", "unresolved-count", "all-projects"],
queryFn: () => {
return fetchAllIncidents({
skip: 0,
limit: 1,
unresolvedOnly: true,
});
},
enabled,
});
const incidentQuery: UseQueryResult<
ListResponse<IncidentItem>,
Error
> = useQuery({
queryKey: ["incidents", "unresolved-count", "all-projects"],
queryFn: () => {
return fetchAllIncidents({
skip: 0,
limit: 1,
unresolvedOnly: true,
});
},
enabled,
});
const alertQuery: UseQueryResult<ListResponse<AlertItem>, Error> = useQuery({
queryKey: ["alerts", "unresolved-count", "all-projects"],

View File

@@ -21,14 +21,16 @@ interface UseAllProjectIncidentEpisodesResult {
export function useAllProjectIncidentEpisodes(): UseAllProjectIncidentEpisodesResult {
const { projectList } = useProject();
const query: UseQueryResult<ListResponse<IncidentEpisodeItem>, Error> =
useQuery({
queryKey: ["incident-episodes", "all-projects"],
queryFn: () => {
return fetchAllIncidentEpisodes({ skip: 0, limit: FETCH_LIMIT });
},
enabled: projectList.length > 0,
});
const query: UseQueryResult<
ListResponse<IncidentEpisodeItem>,
Error
> = useQuery({
queryKey: ["incident-episodes", "all-projects"],
queryFn: () => {
return fetchAllIncidentEpisodes({ skip: 0, limit: FETCH_LIMIT });
},
enabled: projectList.length > 0,
});
const projectMap: Map<string, string> = useMemo(() => {
const map: Map<string, string> = new Map();

View File

@@ -22,7 +22,14 @@ export default function AlertsStackNavigator(): React.JSX.Element {
},
headerTintColor: theme.colors.textPrimary,
headerShadowVisible: false,
...(Platform.OS === "ios" ? { headerLargeTitle: true, headerLargeStyle: { backgroundColor: theme.colors.backgroundPrimary } } : {}),
...(Platform.OS === "ios"
? {
headerLargeTitle: true,
headerLargeStyle: {
backgroundColor: theme.colors.backgroundPrimary,
},
}
: {}),
}}
>
<Stack.Screen

View File

@@ -22,7 +22,14 @@ export default function IncidentsStackNavigator(): React.JSX.Element {
},
headerTintColor: theme.colors.textPrimary,
headerShadowVisible: false,
...(Platform.OS === "ios" ? { headerLargeTitle: true, headerLargeStyle: { backgroundColor: theme.colors.backgroundPrimary } } : {}),
...(Platform.OS === "ios"
? {
headerLargeTitle: true,
headerLargeStyle: {
backgroundColor: theme.colors.backgroundPrimary,
},
}
: {}),
}}
>
<Stack.Screen

View File

@@ -20,7 +20,14 @@ export default function SettingsStackNavigator(): React.JSX.Element {
},
headerTintColor: theme.colors.textPrimary,
headerShadowVisible: false,
...(Platform.OS === "ios" ? { headerLargeTitle: true, headerLargeStyle: { backgroundColor: theme.colors.backgroundPrimary } } : {}),
...(Platform.OS === "ios"
? {
headerLargeTitle: true,
headerLargeStyle: {
backgroundColor: theme.colors.backgroundPrimary,
},
}
: {}),
}}
>
<Stack.Screen

View File

@@ -70,10 +70,7 @@ export default function AlertDetailScreen({ route }: Props): React.JSX.Element {
projectId,
alertId,
);
const { data: feed, refetch: refetchFeed } = useAlertFeed(
projectId,
alertId,
);
const { data: feed, refetch: refetchFeed } = useAlertFeed(projectId, alertId);
const { data: notes, refetch: refetchNotes } = useAlertNotes(
projectId,
alertId,
@@ -276,9 +273,7 @@ export default function AlertDetailScreen({ route }: Props): React.JSX.Element {
}}
>
<View className="flex-row mb-3">
<Text className="text-sm w-[90px] text-text-tertiary">
Created
</Text>
<Text className="text-sm w-[90px] text-text-tertiary">Created</Text>
<Text className="text-sm text-text-primary">
{formatDateTime(alert.createdAt)}
</Text>
@@ -457,9 +452,7 @@ export default function AlertDetailScreen({ route }: Props): React.JSX.Element {
: null}
{notes && notes.length === 0 ? (
<Text className="text-body-sm text-text-tertiary">
No notes yet.
</Text>
<Text className="text-body-sm text-text-tertiary">No notes yet.</Text>
) : null}
</View>

View File

@@ -32,10 +32,7 @@ import FeedTimeline from "../components/FeedTimeline";
import SkeletonCard from "../components/SkeletonCard";
import { useHaptics } from "../hooks/useHaptics";
type Props = NativeStackScreenProps<
AlertsStackParamList,
"AlertEpisodeDetail"
>;
type Props = NativeStackScreenProps<AlertsStackParamList, "AlertEpisodeDetail">;
function SectionHeader({
title,
@@ -283,18 +280,14 @@ export default function AlertEpisodeDetailScreen({
}}
>
<View className="flex-row mb-3">
<Text className="text-sm w-[90px] text-text-tertiary">
Created
</Text>
<Text className="text-sm w-[90px] text-text-tertiary">Created</Text>
<Text className="text-sm text-text-primary">
{formatDateTime(episode.createdAt)}
</Text>
</View>
<View className="flex-row">
<Text className="text-sm w-[90px] text-text-tertiary">
Alerts
</Text>
<Text className="text-sm w-[90px] text-text-tertiary">Alerts</Text>
<Text className="text-sm text-text-primary">
{episode.alertCount ?? 0}
</Text>
@@ -458,9 +451,7 @@ export default function AlertEpisodeDetailScreen({
: null}
{notes && notes.length === 0 ? (
<Text className="text-body-sm text-text-tertiary">
No notes yet.
</Text>
<Text className="text-body-sm text-text-tertiary">No notes yet.</Text>
) : null}
</View>

View File

@@ -64,7 +64,9 @@ function SectionHeader({
<Ionicons
name={isActive ? "flame" : "checkmark-done"}
size={14}
color={isActive ? theme.colors.severityCritical : theme.colors.textTertiary}
color={
isActive ? theme.colors.severityCritical : theme.colors.textTertiary
}
style={{ marginRight: 6 }}
/>
<Text
@@ -169,8 +171,7 @@ export default function AlertsScreen(): React.JSX.Element {
const active: ProjectAlertEpisodeItem[] = [];
const resolved: ProjectAlertEpisodeItem[] = [];
for (const wrapped of allEpisodes) {
const stateId: string | undefined =
wrapped.item.currentAlertState?._id;
const stateId: string | undefined = wrapped.item.currentAlertState?._id;
if (stateId && resolvedStateIds.has(stateId)) {
resolved.push(wrapped);
} else {
@@ -216,14 +217,18 @@ export default function AlertsScreen(): React.JSX.Element {
return prev + PAGE_SIZE;
});
}
} else {
if (visibleEpisodeCount < totalEpisodeCount) {
setVisibleEpisodeCount((prev: number) => {
return prev + PAGE_SIZE;
});
}
} else if (visibleEpisodeCount < totalEpisodeCount) {
setVisibleEpisodeCount((prev: number) => {
return prev + PAGE_SIZE;
});
}
}, [segment, visibleCount, totalAlertCount, visibleEpisodeCount, totalEpisodeCount]);
}, [
segment,
visibleCount,
totalAlertCount,
visibleEpisodeCount,
totalEpisodeCount,
]);
const handlePress: (wrapped: ProjectAlertItem) => void = useCallback(
(wrapped: ProjectAlertItem) => {

View File

@@ -130,7 +130,11 @@ export default function IncidentDetailScreen({
try {
await changeIncidentState(projectId, incidentId, stateId);
await successFeedback();
await Promise.all([refetchIncident(), refetchTimeline(), refetchFeed()]);
await Promise.all([
refetchIncident(),
refetchTimeline(),
refetchFeed(),
]);
await queryClient.invalidateQueries({ queryKey: ["incidents"] });
} catch {
queryClient.setQueryData(queryKey, previousData);
@@ -299,9 +303,7 @@ export default function IncidentDetailScreen({
) : null}
<View className="flex-row mb-3">
<Text className="text-sm w-[90px] text-text-tertiary">
Created
</Text>
<Text className="text-sm w-[90px] text-text-tertiary">Created</Text>
<Text className="text-sm text-text-primary">
{formatDateTime(incident.createdAt)}
</Text>
@@ -484,9 +486,7 @@ export default function IncidentDetailScreen({
: null}
{notes && notes.length === 0 ? (
<Text className="text-body-sm text-text-tertiary">
No notes yet.
</Text>
<Text className="text-body-sm text-text-tertiary">No notes yet.</Text>
) : null}
</View>

View File

@@ -299,9 +299,7 @@ export default function IncidentEpisodeDetailScreen({
) : null}
<View className="flex-row mb-3">
<Text className="text-sm w-[90px] text-text-tertiary">
Created
</Text>
<Text className="text-sm w-[90px] text-text-tertiary">Created</Text>
<Text className="text-sm text-text-primary">
{formatDateTime(episode.createdAt)}
</Text>
@@ -474,9 +472,7 @@ export default function IncidentEpisodeDetailScreen({
: null}
{notes && notes.length === 0 ? (
<Text className="text-body-sm text-text-tertiary">
No notes yet.
</Text>
<Text className="text-body-sm text-text-tertiary">No notes yet.</Text>
) : null}
</View>

View File

@@ -67,7 +67,9 @@ function SectionHeader({
<Ionicons
name={isActive ? "flame" : "checkmark-done"}
size={14}
color={isActive ? theme.colors.severityCritical : theme.colors.textTertiary}
color={
isActive ? theme.colors.severityCritical : theme.colors.textTertiary
}
style={{ marginRight: 6 }}
/>
<Text
@@ -220,14 +222,18 @@ export default function IncidentsScreen(): React.JSX.Element {
return prev + PAGE_SIZE;
});
}
} else {
if (visibleEpisodeCount < totalEpisodeCount) {
setVisibleEpisodeCount((prev: number) => {
return prev + PAGE_SIZE;
});
}
} else if (visibleEpisodeCount < totalEpisodeCount) {
setVisibleEpisodeCount((prev: number) => {
return prev + PAGE_SIZE;
});
}
}, [segment, visibleCount, totalIncidentCount, visibleEpisodeCount, totalEpisodeCount]);
}, [
segment,
visibleCount,
totalIncidentCount,
visibleEpisodeCount,
totalEpisodeCount,
]);
const handlePress: (wrapped: ProjectIncidentItem) => void = useCallback(
(wrapped: ProjectIncidentItem) => {
@@ -285,8 +291,7 @@ export default function IncidentsScreen(): React.JSX.Element {
? isLoading && allIncidents.length === 0
: episodesLoading && allEpisodes.length === 0;
const showError: boolean =
segment === "incidents" ? isError : episodesError;
const showError: boolean = segment === "incidents" ? isError : episodesError;
if (showLoading) {
return (

View File

@@ -1,11 +1,5 @@
import React, { useState, useEffect } from "react";
import {
View,
Text,
TouchableOpacity,
ScrollView,
Switch,
} from "react-native";
import { View, Text, TouchableOpacity, ScrollView, Switch } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useTheme, ThemeMode } from "../theme";
import { useAuth } from "../hooks/useAuth";

View File

@@ -45,9 +45,10 @@ export default class DnsMonitorUtil {
}
if (config.hostname) {
const server: string = config.port && config.port !== 53
? `${config.hostname}:${config.port}`
: config.hostname;
const server: string =
config.port && config.port !== 53
? `${config.hostname}:${config.port}`
: config.hostname;
resolver.setServers([server]);
}
@@ -162,8 +163,10 @@ export default class DnsMonitorUtil {
switch (recordType) {
case DnsRecordType.A: {
const results: Array<dns.RecordWithTtl> =
await resolver.resolve4(queryName, { ttl: true });
const results: Array<dns.RecordWithTtl> = await resolver.resolve4(
queryName,
{ ttl: true },
);
for (const result of results) {
records.push({
type: DnsRecordType.A,
@@ -174,8 +177,10 @@ export default class DnsMonitorUtil {
break;
}
case DnsRecordType.AAAA: {
const results: Array<dns.RecordWithTtl> =
await resolver.resolve6(queryName, { ttl: true });
const results: Array<dns.RecordWithTtl> = await resolver.resolve6(
queryName,
{ ttl: true },
);
for (const result of results) {
records.push({
type: DnsRecordType.AAAA,
@@ -196,7 +201,8 @@ export default class DnsMonitorUtil {
break;
}
case DnsRecordType.MX: {
const results: Array<dns.MxRecord> = await resolver.resolveMx(queryName);
const results: Array<dns.MxRecord> =
await resolver.resolveMx(queryName);
for (const result of results) {
records.push({
type: DnsRecordType.MX,
@@ -262,7 +268,8 @@ export default class DnsMonitorUtil {
for (const result of results) {
records.push({
type: DnsRecordType.CAA,
value: `${result.critical} ${result.issue || result.issuewild || result.iodef || ""}`.trim(),
value:
`${result.critical} ${result.issue || result.issuewild || result.iodef || ""}`.trim(),
});
}
break;
@@ -277,39 +284,30 @@ export default class DnsMonitorUtil {
recordType: DnsRecordType,
dnsServer?: string | undefined,
): Promise<boolean | undefined> {
return new Promise(
(resolve: (value: boolean | undefined) => void) => {
const args: Array<string> = [
"+dnssec",
"+cd",
queryName,
recordType,
];
return new Promise((resolve: (value: boolean | undefined) => void) => {
const args: Array<string> = ["+dnssec", "+cd", queryName, recordType];
if (dnsServer) {
args.push(`@${dnsServer}`);
}
if (dnsServer) {
args.push(`@${dnsServer}`);
}
execFile(
"dig",
args,
{ timeout: 10000 },
(
error: Error | null,
stdout: string,
) => {
if (error) {
// dig not available, return undefined
resolve(undefined);
return;
}
execFile(
"dig",
args,
{ timeout: 10000 },
(error: Error | null, stdout: string) => {
if (error) {
// dig not available, return undefined
resolve(undefined);
return;
}
// Check for the AD (Authenticated Data) flag in the response
const hasAdFlag: boolean = /flags:.*\bad\b/i.test(stdout);
resolve(hasAdFlag);
},
);
},
);
// Check for the AD (Authenticated Data) flag in the response
const adFlagPattern: RegExp = /flags:.*\bad\b/i;
const hasAdFlag: boolean = adFlagPattern.test(stdout);
resolve(hasAdFlag);
},
);
});
}
}