diff --git a/App/FeatureSet/Dashboard/src/Components/NavBar/NavBar.tsx b/App/FeatureSet/Dashboard/src/Components/NavBar/NavBar.tsx index 710e12b922..a71f9ca8b2 100644 --- a/App/FeatureSet/Dashboard/src/Components/NavBar/NavBar.tsx +++ b/App/FeatureSet/Dashboard/src/Components/NavBar/NavBar.tsx @@ -125,8 +125,8 @@ const DashboardNavbar: FunctionComponent = ( category: "Observability", }, { - title: "Profiles", - description: "CPU and memory profiling.", + title: "Performance Profiles", + description: "Find slow functions and memory hotspots.", route: RouteUtil.populateRouteParams(RouteMap[PageMap.PROFILES] as Route), activeRoute: RouteMap[PageMap.PROFILES], icon: IconProp.Fire, diff --git a/App/FeatureSet/Dashboard/src/Components/Profiles/DiffFlamegraph.tsx b/App/FeatureSet/Dashboard/src/Components/Profiles/DiffFlamegraph.tsx index b3082ba0db..63e3a6b5e4 100644 --- a/App/FeatureSet/Dashboard/src/Components/Profiles/DiffFlamegraph.tsx +++ b/App/FeatureSet/Dashboard/src/Components/Profiles/DiffFlamegraph.tsx @@ -184,7 +184,7 @@ const DiffFlamegraph: FunctionComponent = ( ) { return (
- No profile data found in the selected time ranges. + No performance data found in the selected time ranges. Try adjusting the time periods.
); } @@ -323,14 +323,14 @@ const DiffFlamegraph: FunctionComponent = ( )}
- Legend: + What the colors mean: - Regression (slower) + Got slower - Improvement (faster) + Got faster @@ -364,9 +364,9 @@ const DiffFlamegraph: FunctionComponent = (
{tooltip.fileName}
)}
- Baseline: {tooltip.baselineValue.toLocaleString()} + Before: {tooltip.baselineValue.toLocaleString()}
-
Comparison: {tooltip.comparisonValue.toLocaleString()}
+
After: {tooltip.comparisonValue.toLocaleString()}
0 @@ -376,7 +376,7 @@ const DiffFlamegraph: FunctionComponent = ( : "" } > - Delta: {tooltip.delta > 0 ? "+" : ""} + Change: {tooltip.delta > 0 ? "+" : ""} {tooltip.delta.toLocaleString()} ( {tooltip.deltaPercent >= 0 ? "+" : ""} {tooltip.deltaPercent.toFixed(1)}%) diff --git a/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileFlamegraph.tsx b/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileFlamegraph.tsx index 111e9c0f0e..bb8e688000 100644 --- a/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileFlamegraph.tsx +++ b/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileFlamegraph.tsx @@ -211,7 +211,7 @@ const ProfileFlamegraph: FunctionComponent = ( if (samples.length === 0) { return (
- No profile samples found for this profile. + No performance data found for this profile. This can happen if the profile was recently captured and data is still being processed.
); } @@ -325,19 +325,25 @@ const ProfileFlamegraph: FunctionComponent = ( )}
- Frame Types: - {["kernel", "native", "jvm", "cpython", "go", "v8js", "unknown"].map( - (type: string) => { - return ( - - - {type} - - ); - }, - )} + Code Type: + {[ + { key: "kernel", label: "System / Kernel" }, + { key: "native", label: "Native Code" }, + { key: "jvm", label: "Java / JVM" }, + { key: "cpython", label: "Python" }, + { key: "go", label: "Go" }, + { key: "v8js", label: "JavaScript" }, + { key: "unknown", label: "Other" }, + ].map((item: { key: string; label: string }) => { + return ( + + + {item.label} + + ); + })}
= ( {tooltip.fileName && (
{tooltip.fileName}
)} -
Self: {tooltip.selfValue.toLocaleString()}
-
Total: {tooltip.totalValue.toLocaleString()}
+
Own Time: {tooltip.selfValue.toLocaleString()}
+
Total Time: {tooltip.totalValue.toLocaleString()}
)}
diff --git a/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileFunctionList.tsx b/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileFunctionList.tsx index 2036acec3a..7027bee27c 100644 --- a/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileFunctionList.tsx +++ b/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileFunctionList.tsx @@ -204,7 +204,7 @@ const ProfileFunctionList: FunctionComponent = ( if (samples.length === 0) { return (
- No profile samples found for this profile. + No performance data found for this profile.
); } @@ -228,7 +228,7 @@ const ProfileFunctionList: FunctionComponent = ( handleSort("fileName"); }} > - File{getSortIndicator("fileName")} + Source File{getSortIndicator("fileName")} = ( handleSort("selfValue"); }} > - Self Value{getSortIndicator("selfValue")} + Own Time{getSortIndicator("selfValue")} = ( handleSort("totalValue"); }} > - Total Value{getSortIndicator("totalValue")} + Total Time{getSortIndicator("totalValue")} = ( handleSort("sampleCount"); }} > - Samples{getSortIndicator("sampleCount")} + Occurrences{getSortIndicator("sampleCount")} diff --git a/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileTable.tsx b/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileTable.tsx index d19cca85bb..770bc2abb3 100644 --- a/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileTable.tsx +++ b/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileTable.tsx @@ -28,6 +28,7 @@ import ListResult from "Common/Types/BaseDatabase/ListResult"; import Service from "Common/Models/DatabaseModels/Service"; import { LIMIT_PER_PROJECT } from "Common/Types/Database/LimitMax"; import ServiceElement from "../Service/ServiceElement"; +import ProfileUtil from "../../Utils/ProfileUtil"; export interface ComponentProps { modelId?: ObjectID | undefined; @@ -196,23 +197,25 @@ const ProfileTable: FunctionComponent = ( isDeleteable={false} isEditable={false} isCreateable={false} - singularName="Profile" - pluralName="Profiles" - name="Profiles" + singularName="Performance Profile" + pluralName="Performance Profiles" + name="Performance Profiles" isViewable={true} cardProps={ props.isMinimalTable ? undefined : { - title: "Profiles", + title: "Performance Profiles", description: - "Continuous profiling data from your services. Profiles help you understand CPU, memory, and allocation hotspots in your applications.", + "See where your application spends the most time and memory. Use profiles to find slow functions and optimize performance.", } } query={query} showViewIdButton={true} noItemsMessage={ - props.noItemsMessage ? props.noItemsMessage : "No profiles found." + props.noItemsMessage + ? props.noItemsMessage + : "No performance profiles found. Once your services start sending profiling data, they will appear here." } showRefreshButton={true} sortBy="startTime" @@ -245,7 +248,7 @@ const ProfileTable: FunctionComponent = ( profileType: true, }, type: FieldType.Text, - title: "Profile Type", + title: "Type", }, { field: { @@ -259,7 +262,7 @@ const ProfileTable: FunctionComponent = ( startTime: true, }, type: FieldType.DateTime, - title: "Start Time", + title: "Captured At", }, { field: { @@ -273,20 +276,6 @@ const ProfileTable: FunctionComponent = ( ]} onAdvancedFiltersToggle={handleAdvancedFiltersToggle} columns={[ - { - field: { - profileId: true, - }, - title: "Profile ID", - type: FieldType.Text, - }, - { - field: { - profileType: true, - }, - title: "Profile Type", - type: FieldType.Text, - }, { field: { serviceId: true, @@ -312,18 +301,40 @@ const ProfileTable: FunctionComponent = ( ); }, }, + { + field: { + profileType: true, + }, + title: "Type", + type: FieldType.Element, + getElement: (profile: Profile): ReactElement => { + const profileType: string = profile.profileType || "unknown"; + const displayName: string = + ProfileUtil.getProfileTypeDisplayName(profileType); + const badgeColor: string = + ProfileUtil.getProfileTypeBadgeColor(profileType); + + return ( + + {displayName} + + ); + }, + }, { field: { sampleCount: true, }, - title: "Samples", + title: "Data Points", type: FieldType.Number, }, { field: { startTime: true, }, - title: "Start Time", + title: "Captured At", type: FieldType.DateTime, }, ]} diff --git a/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileTimeline.tsx b/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileTimeline.tsx index ec0d529d0a..2db16f875b 100644 --- a/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileTimeline.tsx +++ b/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileTimeline.tsx @@ -168,7 +168,7 @@ const ProfileTimeline: FunctionComponent = (
- Profile Density ({profiles.length} profiles) + Activity ({profiles.length} profiles captured) {OneUptimeDate.getDateAsLocalFormattedString(props.startTime, true)} —{" "} diff --git a/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileTypeSelector.tsx b/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileTypeSelector.tsx index 4da220bc71..a0349da705 100644 --- a/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileTypeSelector.tsx +++ b/App/FeatureSet/Dashboard/src/Components/Profiles/ProfileTypeSelector.tsx @@ -12,12 +12,12 @@ interface ProfileTypeOption { const profileTypeOptions: Array = [ { label: "All Types", value: undefined }, - { label: "CPU", value: "cpu" }, - { label: "Wall", value: "wall" }, - { label: "Alloc Objects", value: "alloc_objects" }, - { label: "Alloc Space", value: "alloc_space" }, - { label: "Goroutine", value: "goroutine" }, - { label: "Contention", value: "contention" }, + { label: "CPU Usage", value: "cpu" }, + { label: "Wall Clock Time", value: "wall" }, + { label: "Memory Allocations (Count)", value: "alloc_objects" }, + { label: "Memory Allocations (Size)", value: "alloc_space" }, + { label: "Goroutines", value: "goroutine" }, + { label: "Lock Contention", value: "contention" }, ]; const ProfileTypeSelector: FunctionComponent = ( @@ -25,7 +25,7 @@ const ProfileTypeSelector: FunctionComponent = ( ): ReactElement => { return (
- +