mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 00:32:12 +02:00
refactor: improve code readability by formatting and using optional chaining for req.body
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user