Jack Westbrook
5bedcc7bd7
* build(frontend): enable custom condition for resolving source files during dev and build * feat(packages): apply conditional name to export properties * chore(packages): add standard exports to flamegraph and prometheus * chore(packages): resolve main, module, types to built files * build(packages): clean up prepare-npm-package for custom condition changes * refactor(packages): reduce repetition in conditional exports * build(storybook): add @grafana-app/source to conditionNames * test(frontend): add grafana-app/source customCondition for jest tests * refactor(frontend): remove nested package import paths * chore(jest): use customExportConditions for source files and browser * chore(i18n): use src for ./eslint-plugin export * chore(packages): set packages tsconfigs to moduleResolution bundler * chore(packages): fix rollup builds * build(packages): build cjs as multiple files * chore(sql): reference MonitoringLogger for moduleresolution bundler to pass typecheck * chore(ui): add type refs for moduleresolution bundler to pass typecheck * feat(schema): add exports for cleaner import paths * refactor(frontend): clean up schema paths to point to exports instead of nested file paths * build(storybook): hack the builder-manager for custom conditions to resolve * build(decoupled-plugins): fix broken builds due to missing conditionNames * chore(e2e): pass condition to playwright to resolve local packages * build(frontend): fix failing build * chore(select): fix typings * style(frontend): clean up eslint suppressions * chore(packages): fix type errors due to incorrect tsconfig settings * build(generate-apis): use swc with ts-node and moduleResolution bundler * chore(cypress): add conditionNames to resolve monorepo packages * build(npm): update prepare to work with latest exports changes * build(packages): fix prepare-npm-package script * fix(e2e-selectors): update debugoverlay for data-testid change * build(packages): stop editing package.json at pack n publish time * rerun ci * chore(api-clients): use moduleResolution: bundler for customConditions support * chore(api-clients): fix generation * build(packages): remove aliasing exports, remove exports with only customConditions * Revert "refactor(frontend): clean up schema paths to point to exports instead of nested file paths" This reverts commit 7949b6ea0e60e51989d2a8149b7a24647cd68916. * revert(schema): remove exports from package so builds work * build(api-clients): fix up api-clients exports and rollup config * build(api-clients): Update generated package exports for api clients * build(schema): add overrides to cjsOutput and esmOutput so built directory structure is correct * fix(packages): use rootDirs to prevent types/src directories in built d.ts file paths * build(packages): prevent empty exports added to package.json during pack * docs(packages): update readme with custom conditions information --------- Co-authored-by: Tom Ratcliffe <tom.ratcliffe@grafana.com>
Grafana Flamegraph component
@grafana/flamegraph is currently in BETA.
This is a Flamegraph component that is used in Grafana and Pyroscope web app to display profiles.
Usage
Currently this library exposes single component Flamegraph that renders whole visualization used for profiling which contains a header, a table representation of the data and a flamegraph.
import { FlameGraph } from '@grafana/flamegraph';
<FlameGraph
getTheme={() => createTheme({ colors: { mode: 'dark' } })}
data={dataFrame}
extraHeaderElements={
<Button onClick={() => {}} variant="secondary">
Download
/>
}
stickyHeader
vertical
/>
Props
| Name | Type | Description |
|---|---|---|
| data | DataFrame | DataFrame with the profile data. Optional, if missing or empty the flamegraph is not rendered |
| stickyHeader | boolean | Whether the header should be sticky and be always visible on the top when scrolling. |
| getTheme | () => GrafanaTheme2 | Provides a theme for the visualization on which colors and some sizes are based. |
| onTableSymbolClick | (symbol: string) => void | Interaction hook that can be used to report on the interaction. Fires when user click on a name in the table. |
| onViewSelected | (view: string) => void | Interaction hook that can be used to report on the interaction. Fires when user changes the view to show (table/graph/both) |
| onTextAlignSelected | (align: string) => void | Interaction hook that can be used to report on the interaction. Fires when user changes the text align. |
| onTableSort | (sort: string) => void | Interaction hook that can be used to report on the interaction. Fires when user changes the teble sorting. |
| extraHeaderElements | React.ReactNode | Elements that will be shown in the header on the right side of the header buttons. Useful for additional functionality. |
| vertical | boolean | If true the flamegraph will be rendered on top of the table. |
| keepFocusOnDataChange | boolean | If true any focused block will stay focused when the profile data changes. Same for the sandwich view. |
DataFrame schema
The dataFrame needs to have the following fields:
| Name | Type | Description |
|---|---|---|
| name | string | The name of the node. |
| labels | string[] | The labels of the node. |
| level | number | The nesting level of the node. |
| value | number | The total value of the node. |
| self | number | The self value of the node. |
| valueRight | number | The total value of the node in the right profile. Optional, if present will show a diff version of the flamegraph. |
| selfRight | number | The self value of the node in the right profile. Optional, if present will show a diff version of the flamegraph. |