refactor: improve code readability by formatting and using optional chaining for req.body

This commit is contained in:
Nawaz Dhandala
2026-04-02 18:11:42 +01:00
parent 7521fe218d
commit e98b424168
8 changed files with 135 additions and 158 deletions

View File

@@ -33,9 +33,9 @@ const ExceptionsDashboard: FunctionComponent = (): ReactElement => {
const [unresolvedCount, setUnresolvedCount] = useState<number>(0);
const [resolvedCount, setResolvedCount] = useState<number>(0);
const [archivedCount, setArchivedCount] = useState<number>(0);
const [topExceptions, setTopExceptions] = useState<
Array<TelemetryException>
>([]);
const [topExceptions, setTopExceptions] = useState<Array<TelemetryException>>(
[],
);
const [serviceSummaries, setServiceSummaries] = useState<
Array<ServiceExceptionSummary>
>([]);
@@ -274,9 +274,7 @@ const ExceptionsDashboard: FunctionComponent = (): ReactElement => {
</svg>
</div>
</div>
<p className="text-xs text-gray-400 mt-2">
Needs attention
</p>
<p className="text-xs text-gray-400 mt-2">Needs attention</p>
</div>
</AppLink>
@@ -310,9 +308,7 @@ const ExceptionsDashboard: FunctionComponent = (): ReactElement => {
</svg>
</div>
</div>
<p className="text-xs text-gray-400 mt-2">
Fixed and verified
</p>
<p className="text-xs text-gray-400 mt-2">Fixed and verified</p>
</div>
</AppLink>
@@ -397,10 +393,7 @@ const ExceptionsDashboard: FunctionComponent = (): ReactElement => {
] as Route,
)
.toString()
.replace(
/\/$/,
`/${exception.fingerprint}`,
),
.replace(/\/$/, `/${exception.fingerprint}`),
)
: RouteUtil.populateRouteParams(
RouteMap[
@@ -436,13 +429,9 @@ const ExceptionsDashboard: FunctionComponent = (): ReactElement => {
</div>
<div className="text-right flex-shrink-0">
<p className="text-sm font-semibold text-gray-900">
{(
exception.occuranceCount || 0
).toLocaleString()}
</p>
<p className="text-xs text-gray-400">
occurrences
{(exception.occuranceCount || 0).toLocaleString()}
</p>
<p className="text-xs text-gray-400">occurrences</p>
</div>
</div>
<div className="mt-1">
@@ -475,40 +464,34 @@ const ExceptionsDashboard: FunctionComponent = (): ReactElement => {
</div>
<div className="rounded-lg border border-gray-200 bg-white overflow-hidden">
<div className="divide-y divide-gray-100">
{serviceSummaries.map(
(summary: ServiceExceptionSummary) => {
return (
<div
key={summary.service.id?.toString()}
className="px-4 py-4"
>
<div className="flex items-center justify-between mb-2">
<TelemetryServiceElement
telemetryService={summary.service}
/>
<div className="flex items-center space-x-4">
<div className="text-right">
<p className="text-sm font-semibold text-red-600">
{summary.unresolvedCount}
</p>
<p className="text-xs text-gray-400">
unresolved
</p>
</div>
<div className="text-right">
<p className="text-sm font-semibold text-gray-700">
{summary.totalOccurrences.toLocaleString()}
</p>
<p className="text-xs text-gray-400">
total hits
</p>
</div>
{serviceSummaries.map((summary: ServiceExceptionSummary) => {
return (
<div
key={summary.service.id?.toString()}
className="px-4 py-4"
>
<div className="flex items-center justify-between mb-2">
<TelemetryServiceElement
telemetryService={summary.service}
/>
<div className="flex items-center space-x-4">
<div className="text-right">
<p className="text-sm font-semibold text-red-600">
{summary.unresolvedCount}
</p>
<p className="text-xs text-gray-400">unresolved</p>
</div>
<div className="text-right">
<p className="text-sm font-semibold text-gray-700">
{summary.totalOccurrences.toLocaleString()}
</p>
<p className="text-xs text-gray-400">total hits</p>
</div>
</div>
</div>
);
},
)}
</div>
);
})}
</div>
</div>
</div>

View File

@@ -122,7 +122,7 @@ const ProfilesDashboard: FunctionComponent = (): ReactElement => {
for (const profile of profiles) {
const serviceId: string = profile.serviceId?.toString() || "";
let summary: ServiceProfileSummary | undefined =
const summary: ServiceProfileSummary | undefined =
summaryMap.get(serviceId);
if (!summary) {
@@ -192,7 +192,7 @@ const ProfilesDashboard: FunctionComponent = (): ReactElement => {
"functions"
] || []) as unknown as Array<FunctionHotspot>;
setHotspots(functions);
} catch (_hotspotsErr) {
} catch {
// Hotspots are optional - don't fail the whole page
setHotspots([]);
}
@@ -334,9 +334,7 @@ const ProfilesDashboard: FunctionComponent = (): ReactElement => {
to={RouteUtil.populateRouteParams(
RouteMap[PageMap.SERVICE_VIEW_PROFILES] as Route,
{
modelId: new ObjectID(
summary.service._id as string,
),
modelId: new ObjectID(summary.service._id as string),
},
)}
>
@@ -368,9 +366,7 @@ const ProfilesDashboard: FunctionComponent = (): ReactElement => {
<th className="px-5 py-3 font-medium">#</th>
<th className="px-5 py-3 font-medium">Function</th>
<th className="px-5 py-3 font-medium">Source File</th>
<th className="px-5 py-3 text-right font-medium">
Own Time
</th>
<th className="px-5 py-3 text-right font-medium">Own Time</th>
<th className="px-5 py-3 text-right font-medium">
Total Time
</th>

View File

@@ -52,16 +52,14 @@ const TracesDashboard: FunctionComponent = (): ReactElement => {
const [recentErrorTraces, setRecentErrorTraces] = useState<
Array<RecentTrace>
>([]);
const [recentSlowTraces, setRecentSlowTraces] = useState<
Array<RecentTrace>
>([]);
const [recentSlowTraces, setRecentSlowTraces] = useState<Array<RecentTrace>>(
[],
);
const [services, setServices] = useState<Array<Service>>([]);
const [isLoading, setIsLoading] = useState<boolean>(true);
const [error, setError] = useState<string>("");
const formatDuration: (nanos: number) => string = (
nanos: number,
): string => {
const formatDuration: (nanos: number) => string = (nanos: number): string => {
if (nanos >= 1_000_000_000) {
return `${(nanos / 1_000_000_000).toFixed(2)}s`;
}
@@ -370,9 +368,7 @@ const TracesDashboard: FunctionComponent = (): ReactElement => {
to={RouteUtil.populateRouteParams(
RouteMap[PageMap.SERVICE_VIEW_TRACES] as Route,
{
modelId: new ObjectID(
summary.service._id as string,
),
modelId: new ObjectID(summary.service._id as string),
},
)}
>
@@ -406,50 +402,48 @@ const TracesDashboard: FunctionComponent = (): ReactElement => {
) : (
<div className="rounded-lg border border-gray-200 bg-white overflow-hidden">
<div className="divide-y divide-gray-100">
{recentErrorTraces.map(
(trace: RecentTrace, index: number) => {
return (
<AppLink
key={`${trace.traceId}-${index}`}
className="block px-4 py-3 hover:bg-gray-50 transition-colors"
to={RouteUtil.populateRouteParams(
RouteMap[PageMap.TRACE_VIEW]!,
{
modelId: trace.traceId,
},
)}
>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3 min-w-0">
<SpanStatusElement
spanStatusCode={trace.statusCode}
title=""
/>
<div className="min-w-0">
<p className="text-sm font-medium text-gray-900 truncate">
{trace.name}
</p>
<p className="text-xs text-gray-500">
{getServiceName(trace.serviceId)}
</p>
</div>
</div>
<div className="text-right flex-shrink-0 ml-3">
<p className="text-xs font-mono text-gray-600">
{formatDuration(trace.durationNano)}
{recentErrorTraces.map((trace: RecentTrace, index: number) => {
return (
<AppLink
key={`${trace.traceId}-${index}`}
className="block px-4 py-3 hover:bg-gray-50 transition-colors"
to={RouteUtil.populateRouteParams(
RouteMap[PageMap.TRACE_VIEW]!,
{
modelId: trace.traceId,
},
)}
>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3 min-w-0">
<SpanStatusElement
spanStatusCode={trace.statusCode}
title=""
/>
<div className="min-w-0">
<p className="text-sm font-medium text-gray-900 truncate">
{trace.name}
</p>
<p className="text-xs text-gray-400">
{OneUptimeDate.getDateAsLocalFormattedString(
trace.startTime,
true,
)}
<p className="text-xs text-gray-500">
{getServiceName(trace.serviceId)}
</p>
</div>
</div>
</AppLink>
);
},
)}
<div className="text-right flex-shrink-0 ml-3">
<p className="text-xs font-mono text-gray-600">
{formatDuration(trace.durationNano)}
</p>
<p className="text-xs text-gray-400">
{OneUptimeDate.getDateAsLocalFormattedString(
trace.startTime,
true,
)}
</p>
</div>
</div>
</AppLink>
);
})}
</div>
</div>
)}
@@ -474,57 +468,55 @@ const TracesDashboard: FunctionComponent = (): ReactElement => {
) : (
<div className="rounded-lg border border-gray-200 bg-white overflow-hidden">
<div className="divide-y divide-gray-100">
{recentSlowTraces.map(
(trace: RecentTrace, index: number) => {
const maxDuration: number =
recentSlowTraces[0]?.durationNano || 1;
const barWidth: number =
(trace.durationNano / maxDuration) * 100;
{recentSlowTraces.map((trace: RecentTrace, index: number) => {
const maxDuration: number =
recentSlowTraces[0]?.durationNano || 1;
const barWidth: number =
(trace.durationNano / maxDuration) * 100;
return (
<AppLink
key={`${trace.traceId}-slow-${index}`}
className="block px-4 py-3 hover:bg-gray-50 transition-colors"
to={RouteUtil.populateRouteParams(
RouteMap[PageMap.TRACE_VIEW]!,
{
modelId: trace.traceId,
},
)}
>
<div className="flex items-center justify-between mb-1">
<div className="flex items-center space-x-3 min-w-0">
<SpanStatusElement
spanStatusCode={trace.statusCode}
title=""
/>
<div className="min-w-0">
<p className="text-sm font-medium text-gray-900 truncate">
{trace.name}
</p>
<p className="text-xs text-gray-500">
{getServiceName(trace.serviceId)}
</p>
</div>
</div>
<div className="text-right flex-shrink-0 ml-3">
<p className="text-sm font-mono font-semibold text-gray-900">
{formatDuration(trace.durationNano)}
return (
<AppLink
key={`${trace.traceId}-slow-${index}`}
className="block px-4 py-3 hover:bg-gray-50 transition-colors"
to={RouteUtil.populateRouteParams(
RouteMap[PageMap.TRACE_VIEW]!,
{
modelId: trace.traceId,
},
)}
>
<div className="flex items-center justify-between mb-1">
<div className="flex items-center space-x-3 min-w-0">
<SpanStatusElement
spanStatusCode={trace.statusCode}
title=""
/>
<div className="min-w-0">
<p className="text-sm font-medium text-gray-900 truncate">
{trace.name}
</p>
<p className="text-xs text-gray-500">
{getServiceName(trace.serviceId)}
</p>
</div>
</div>
<div className="ml-8">
<div className="w-full h-1 bg-gray-100 rounded-full overflow-hidden">
<div
className="h-full rounded-full bg-amber-400"
style={{ width: `${barWidth}%` }}
/>
</div>
<div className="text-right flex-shrink-0 ml-3">
<p className="text-sm font-mono font-semibold text-gray-900">
{formatDuration(trace.durationNano)}
</p>
</div>
</AppLink>
);
},
)}
</div>
<div className="ml-8">
<div className="w-full h-1 bg-gray-100 rounded-full overflow-hidden">
<div
className="h-full rounded-full bg-amber-400"
style={{ width: `${barWidth}%` }}
/>
</div>
</div>
</AppLink>
);
})}
</div>
</div>
)}

View File

@@ -13,7 +13,13 @@ import path from "path";
// Load proto file for OTel
const PROTO_DIR: string = path.resolve(__dirname, "..", "ProtoFiles", "OTel", "v1");
const PROTO_DIR: string = path.resolve(
__dirname,
"..",
"ProtoFiles",
"OTel",
"v1",
);
// Create a root namespace
const LogsProto: protobuf.Root = protobuf.loadSync(

View File

@@ -65,7 +65,7 @@ export default class OtelLogsIngestService extends OtelIngestBaseService {
);
}
req.body = req.body.toJSON ? req.body.toJSON() : req.body;
req.body = req.body?.toJSON ? req.body.toJSON() : req.body;
Response.sendEmptySuccessResponse(req, res);

View File

@@ -73,7 +73,7 @@ export default class OtelMetricsIngestService extends OtelIngestBaseService {
);
}
req.body = req.body.toJSON ? req.body.toJSON() : req.body;
req.body = req.body?.toJSON ? req.body.toJSON() : req.body;
Response.sendEmptySuccessResponse(req, res);

View File

@@ -94,7 +94,7 @@ export default class OtelProfilesIngestService extends OtelIngestBaseService {
);
}
req.body = req.body.toJSON ? req.body.toJSON() : req.body;
req.body = req.body?.toJSON ? req.body.toJSON() : req.body;
Response.sendEmptySuccessResponse(req, res);

View File

@@ -120,7 +120,7 @@ export default class OtelTracesIngestService extends OtelIngestBaseService {
);
}
req.body = req.body.toJSON ? req.body.toJSON() : req.body;
req.body = req.body?.toJSON ? req.body.toJSON() : req.body;
Response.sendEmptySuccessResponse(req, res);