From 5e9034dd76011d4ae66aed1eca0063e5307f8e11 Mon Sep 17 00:00:00 2001 From: Nawaz Dhandala Date: Fri, 3 Apr 2026 11:43:37 +0100 Subject: [PATCH] refactor: simplify arrow function syntax and improve readability in dashboard components --- .../Exceptions/ExceptionsDashboard.tsx | 186 +++++++++--------- .../Components/Metrics/MetricsDashboard.tsx | 20 +- .../Components/Profiles/ProfilesDashboard.tsx | 24 +-- .../src/Components/Traces/TracesDashboard.tsx | 25 +-- 4 files changed, 119 insertions(+), 136 deletions(-) diff --git a/App/FeatureSet/Dashboard/src/Components/Exceptions/ExceptionsDashboard.tsx b/App/FeatureSet/Dashboard/src/Components/Exceptions/ExceptionsDashboard.tsx index 3529c7d35f..a61070e813 100644 --- a/App/FeatureSet/Dashboard/src/Components/Exceptions/ExceptionsDashboard.tsx +++ b/App/FeatureSet/Dashboard/src/Components/Exceptions/ExceptionsDashboard.tsx @@ -205,8 +205,9 @@ const ExceptionsDashboard: FunctionComponent = (): ReactElement => { } serviceExceptionCounts.sort( - (a: ServiceExceptionSummary, b: ServiceExceptionSummary) => - b.unresolvedCount - a.unresolvedCount, + (a: ServiceExceptionSummary, b: ServiceExceptionSummary) => { + return b.unresolvedCount - a.unresolvedCount; + }, ); setServiceSummaries(serviceExceptionCounts); @@ -506,9 +507,9 @@ const ExceptionsDashboard: FunctionComponent = (): ReactElement => { const barWidth: number = ((exception.occuranceCount || 0) / maxOccurrences) * 100; - const isNewToday: boolean = !!( + const isNewToday: boolean = Boolean( exception.firstSeenAt && - new Date(exception.firstSeenAt) > oneDayAgo + new Date(exception.firstSeenAt) > oneDayAgo, ); return ( @@ -524,10 +525,7 @@ const ExceptionsDashboard: FunctionComponent = (): ReactElement => { ] as Route, ) .toString() - .replace( - /\/?$/, - `/${exception.fingerprint}`, - ), + .replace(/\/?$/, `/${exception.fingerprint}`), ) : RouteUtil.populateRouteParams( RouteMap[ @@ -582,9 +580,7 @@ const ExceptionsDashboard: FunctionComponent = (): ReactElement => {

- {( - exception.occuranceCount || 0 - ).toLocaleString()} + {(exception.occuranceCount || 0).toLocaleString()}

hits

@@ -619,48 +615,46 @@ const ExceptionsDashboard: FunctionComponent = (): ReactElement => {
- {serviceSummaries.map( - (summary: ServiceExceptionSummary) => { - const barWidth: number = - (summary.unresolvedCount / maxServiceBugs) * 100; + {serviceSummaries.map((summary: ServiceExceptionSummary) => { + const barWidth: number = + (summary.unresolvedCount / maxServiceBugs) * 100; - return ( -
-
- -
-
- - {summary.unresolvedCount} - - - bugs - -
+ return ( +
+
+ +
+
+ + {summary.unresolvedCount} + + + bugs +
-
-
-
-
- - {summary.totalOccurrences.toLocaleString()} hits - -
- ); - }, - )} +
+
+
+
+ + {summary.totalOccurrences.toLocaleString()} hits + +
+
+ ); + })}
@@ -679,58 +673,54 @@ const ExceptionsDashboard: FunctionComponent = (): ReactElement => {
{recentExceptions .slice(0, 5) - .map( - (exception: TelemetryException, index: number) => { - return ( - { + return ( + -

- {exception.message || - exception.exceptionType || - "Unknown"} -

-
- {exception.service && ( - - {exception.service.name?.toString()} - - )} - {exception.lastSeenAt && ( - - {OneUptimeDate.fromNow( - new Date(exception.lastSeenAt), - )} - - )} -
- - ); - }, - )} + .toString() + .replace( + /\/?$/, + `/${exception.fingerprint}`, + ), + ) + : RouteUtil.populateRouteParams( + RouteMap[ + PageMap.EXCEPTIONS_UNRESOLVED + ] as Route, + ) + } + > +

+ {exception.message || + exception.exceptionType || + "Unknown"} +

+
+ {exception.service && ( + + {exception.service.name?.toString()} + + )} + {exception.lastSeenAt && ( + + {OneUptimeDate.fromNow( + new Date(exception.lastSeenAt), + )} + + )} +
+ + ); + })}
diff --git a/App/FeatureSet/Dashboard/src/Components/Metrics/MetricsDashboard.tsx b/App/FeatureSet/Dashboard/src/Components/Metrics/MetricsDashboard.tsx index 4278f700aa..47d1f6476b 100644 --- a/App/FeatureSet/Dashboard/src/Components/Metrics/MetricsDashboard.tsx +++ b/App/FeatureSet/Dashboard/src/Components/Metrics/MetricsDashboard.tsx @@ -50,9 +50,7 @@ const MetricsDashboard: FunctionComponent = (): ReactElement => { const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(""); - const categorizeMetric: (name: string) => string = ( - name: string, - ): string => { + const categorizeMetric: (name: string) => string = (name: string): string => { const lower: string = name.toLowerCase(); if ( lower.includes("cpu") || @@ -370,9 +368,7 @@ const MetricsDashboard: FunctionComponent = (): ReactElement => {
-

- Avg per Service -

+

Avg per Service

{
-

- No Metrics -

+

No Metrics

0 ? "bg-amber-50" : "bg-gray-50"}`} > @@ -454,9 +448,7 @@ const MetricsDashboard: FunctionComponent = (): ReactElement => { {cat.count} {cat.name} - + {pct}%
@@ -467,9 +459,7 @@ const MetricsDashboard: FunctionComponent = (): ReactElement => {
{metricCategories.map((cat: MetricCategory) => { const pct: number = - totalMetricCount > 0 - ? (cat.count / totalMetricCount) * 100 - : 0; + totalMetricCount > 0 ? (cat.count / totalMetricCount) * 100 : 0; const barColorMap: Record = { System: "bg-blue-400", Request: "bg-purple-400", diff --git a/App/FeatureSet/Dashboard/src/Components/Profiles/ProfilesDashboard.tsx b/App/FeatureSet/Dashboard/src/Components/Profiles/ProfilesDashboard.tsx index 1b4e12919c..6b2021ce36 100644 --- a/App/FeatureSet/Dashboard/src/Components/Profiles/ProfilesDashboard.tsx +++ b/App/FeatureSet/Dashboard/src/Components/Profiles/ProfilesDashboard.tsx @@ -165,10 +165,7 @@ const ProfilesDashboard: FunctionComponent = (): ReactElement => { } // Track global type stats - typeCountMap.set( - profileType, - (typeCountMap.get(profileType) || 0) + 1, - ); + typeCountMap.set(profileType, (typeCountMap.get(profileType) || 0) + 1); } setTotalSampleCount(totalSamples); @@ -185,20 +182,23 @@ const ProfilesDashboard: FunctionComponent = (): ReactElement => { badgeColor: ProfileUtil.getProfileTypeBadgeColor(type), }; }) - .sort( - (a: ProfileTypeStats, b: ProfileTypeStats) => b.count - a.count, - ); + .sort((a: ProfileTypeStats, b: ProfileTypeStats) => { + return b.count - a.count; + }); setProfileTypeStats(typeStats); // Only show services that have profiles const summariesWithData: Array = Array.from( summaryMap.values(), - ).filter((s: ServiceProfileSummary) => s.profileCount > 0); + ).filter((s: ServiceProfileSummary) => { + return s.profileCount > 0; + }); summariesWithData.sort( - (a: ServiceProfileSummary, b: ServiceProfileSummary) => - b.profileCount - a.profileCount, + (a: ServiceProfileSummary, b: ServiceProfileSummary) => { + return b.profileCount - a.profileCount; + }, ); setServiceSummaries(summariesWithData); @@ -289,7 +289,9 @@ const ProfilesDashboard: FunctionComponent = (): ReactElement => { } const maxProfiles: number = Math.max( - ...serviceSummaries.map((s: ServiceProfileSummary) => s.profileCount), + ...serviceSummaries.map((s: ServiceProfileSummary) => { + return s.profileCount; + }), ); return ( diff --git a/App/FeatureSet/Dashboard/src/Components/Traces/TracesDashboard.tsx b/App/FeatureSet/Dashboard/src/Components/Traces/TracesDashboard.tsx index c1fbd1d7a5..9764479b94 100644 --- a/App/FeatureSet/Dashboard/src/Components/Traces/TracesDashboard.tsx +++ b/App/FeatureSet/Dashboard/src/Components/Traces/TracesDashboard.tsx @@ -64,9 +64,9 @@ const getPercentile: (arr: Array, p: number) => number = ( if (arr.length === 0) { return 0; } - const sorted: Array = [...arr].sort( - (a: number, b: number) => a - b, - ); + const sorted: Array = [...arr].sort((a: number, b: number) => { + return a - b; + }); const idx: number = Math.ceil((p / 100) * sorted.length) - 1; return sorted[Math.max(0, idx)] || 0; }; @@ -197,8 +197,7 @@ const TracesDashboard: FunctionComponent = (): ReactElement => { } if (span.statusCode === SpanStatus.Error) { - const errorSet: Set = - serviceErrorTraceIds.get(serviceId)!; + const errorSet: Set = serviceErrorTraceIds.get(serviceId)!; if (!errorSet.has(traceId)) { errorSet.add(traceId); summary.errorTraces += 1; @@ -254,7 +253,9 @@ const TracesDashboard: FunctionComponent = (): ReactElement => { const summariesWithData: Array = Array.from( summaryMap.values(), ) - .filter((s: ServiceTraceSummary) => s.totalTraces > 0) + .filter((s: ServiceTraceSummary) => { + return s.totalTraces > 0; + }) .map((s: ServiceTraceSummary) => { return { ...s, @@ -290,9 +291,9 @@ const TracesDashboard: FunctionComponent = (): ReactElement => { setRecentErrorTraces(errorTraces.slice(0, 8)); const slowTraces: Array = [...allTraces] - .sort( - (a: RecentTrace, b: RecentTrace) => b.durationNano - a.durationNano, - ) + .sort((a: RecentTrace, b: RecentTrace) => { + return b.durationNano - a.durationNano; + }) .slice(0, 8); setRecentSlowTraces(slowTraces); } catch (err) { @@ -309,9 +310,9 @@ const TracesDashboard: FunctionComponent = (): ReactElement => { const getServiceName: (serviceId: string) => string = ( serviceId: string, ): string => { - const service: Service | undefined = services.find( - (s: Service) => s.id?.toString() === serviceId, - ); + const service: Service | undefined = services.find((s: Service) => { + return s.id?.toString() === serviceId; + }); return service?.name?.toString() || "Unknown"; };