github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/stories/Flamegraph.stories.tsx (about)

     1  import React, { useState } from 'react';
     2  import { FlamegraphRenderer, Box } from '@pyroscope/flamegraph';
     3  import PyroscopeServerCPU from '../cypress/fixtures/pyroscope.server.cpu.json';
     4  import SimpleGolangCPU from '../cypress/fixtures/simple-golang-app-cpu.json';
     5  import Button from '@ui/Button';
     6  import { ComponentStory } from '@storybook/react';
     7  import '@pyroscope/flamegraph/dist/index.css';
     8  
     9  export default {
    10    title: '@pyroscope/flamegraph',
    11  };
    12  
    13  const SimpleTree = {
    14    version: 1,
    15    flamebearer: {
    16      names: [
    17        'total',
    18        'runtime.mcall',
    19        'runtime.park_m',
    20        'runtime.schedule',
    21        'runtime.resetspinning',
    22        'runtime.wakep',
    23        'runtime.startm',
    24        'runtime.notewakeup',
    25        'runtime.semawakeup',
    26        'runtime.pthread_cond_signal',
    27        'runtime.findrunnable',
    28        'runtime.netpoll',
    29        'runtime.kevent',
    30        'runtime.main',
    31        'main.main',
    32        'github.com/pyroscope-io/client/pyroscope.TagWrapper',
    33        'runtime/pprof.Do',
    34        'github.com/pyroscope-io/client/pyroscope.TagWrapper.func1',
    35        'main.main.func1',
    36        'main.slowFunction',
    37        'main.slowFunction.func1',
    38        'main.work',
    39        'runtime.asyncPreempt',
    40        'main.fastFunction',
    41        'main.fastFunction.func1',
    42      ],
    43      levels: [
    44        [0, 609, 0, 0],
    45        [0, 606, 0, 13, 0, 3, 0, 1],
    46        [0, 606, 0, 14, 0, 3, 0, 2],
    47        [0, 606, 0, 15, 0, 3, 0, 3],
    48        [0, 606, 0, 16, 0, 1, 0, 10, 0, 2, 0, 4],
    49        [0, 606, 0, 17, 0, 1, 0, 11, 0, 2, 0, 5],
    50        [0, 606, 0, 18, 0, 1, 1, 12, 0, 2, 0, 6],
    51        [0, 100, 0, 23, 0, 506, 0, 19, 1, 2, 0, 7],
    52        [0, 100, 0, 15, 0, 506, 0, 16, 1, 2, 0, 8],
    53        [0, 100, 0, 16, 0, 506, 0, 20, 1, 2, 2, 9],
    54        [0, 100, 0, 17, 0, 506, 493, 21],
    55        [0, 100, 0, 24, 493, 13, 13, 22],
    56        [0, 100, 97, 21],
    57        [97, 3, 3, 22],
    58      ],
    59      numTicks: 609,
    60      maxSelf: 493,
    61    },
    62    metadata: {
    63      appName: 'simple.golang.app.cpu',
    64      name: 'simple.golang.app.cpu 2022-09-06T12:16:31Z',
    65      startTime: 1662466591,
    66      endTime: 1662470191,
    67      query: 'simple.golang.app.cpu{}',
    68      maxNodes: 1024,
    69      format: 'single' as const,
    70      sampleRate: 100,
    71      spyName: 'gospy' as const,
    72      units: 'samples' as const,
    73    },
    74    timeline: {
    75      startTime: 1662466590,
    76      samples: [
    77        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    78        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    79        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    80        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    81        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    82        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    83        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    84        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    85        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    86        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    87        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    88        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    89        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    90        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    91        0, 0, 0, 0, 0, 0, 0, 0, 0, 610, 0,
    92      ],
    93      durationDelta: 10,
    94    },
    95  };
    96  
    97  const Template: ComponentStory<typeof Button> = (args) => (
    98    <div
    99      style={{
   100        backgroundColor: `${args['Light Color Mode'] ? '#e4e4e4' : '#1b1b1b'}`,
   101      }}
   102    >
   103      <FlamegraphRenderer
   104        profile={SimpleTree}
   105        onlyDisplay="flamegraph"
   106        colorMode={args['Light Color Mode'] ? 'light' : 'dark'}
   107      />
   108    </div>
   109  );
   110  
   111  export const ColorMode = Template.bind({});
   112  
   113  ColorMode.args = {
   114    ['Light Color Mode']: false,
   115  };
   116  
   117  export const WithToolbar = () => {
   118    return (
   119      <Box>
   120        <FlamegraphRenderer profile={SimpleTree} />
   121      </Box>
   122    );
   123  };
   124  
   125  export const WithoutToolbar = () => {
   126    return (
   127      <Box>
   128        <FlamegraphRenderer profile={SimpleTree} showToolbar={false} />
   129      </Box>
   130    );
   131  };
   132  
   133  export const JustFlamegraph = () => {
   134    return (
   135      <FlamegraphRenderer
   136        profile={SimpleTree}
   137        onlyDisplay="flamegraph"
   138        showToolbar={false}
   139      />
   140    );
   141  };
   142  
   143  // In this case having the toolbar doesn't make much sense?
   144  export const TableViewWithoutToolbar = () => {
   145    return (
   146      <Box>
   147        <FlamegraphRenderer
   148          profile={SimpleTree}
   149          onlyDisplay="table"
   150          showToolbar={false}
   151        />
   152      </Box>
   153    );
   154  };
   155  
   156  // In this example we use the FlamegraphRenderer component
   157  // with whatever data we got from the /render endpoint
   158  export const WithRenderData = () => {
   159    const [profile, setProfile] = useState(PyroscopeServerCPU);
   160    return (
   161      <>
   162        <Button onClick={() => setProfile(SimpleGolangCPU)}>Simple Tree</Button>
   163        <Button onClick={() => setProfile(PyroscopeServerCPU)}>
   164          Complex Tree
   165        </Button>
   166        <Box>
   167          <FlamegraphRenderer profile={profile} showToolbar={false} />
   168        </Box>
   169      </>
   170    );
   171  };