Skip to content

Commit

Permalink
Configure date and request parameters for all charts using UI (#67)
Browse files Browse the repository at this point in the history 
* Add flyout for configuring request params

* Parameterize project ID for fetch queries

* Parameterize index for fetch queries

* Parameterize N for fetch queries

* Refresh data when project ID is updated

* Refresh data when index is updated

* Refresh data when N is updated

* Parameterize flyout title

* Add help for settings
  • Loading branch information
@jbcrail @rockdaboot
jbcrail authored and rockdaboot committed Jul 4, 2022
1 parent b9d4a1b commit 0e5caec
Show file tree
Hide file tree
Showing 5 changed files with 327 additions and 209 deletions.
157 changes: 131 additions & 26 deletions src/plugins/profiling/public/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,20 @@ import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { AppMountParameters } from 'kibana/public';

import dateMath from '@elastic/datemath';
import {
EuiPage,
EuiPageBody,
EuiPageContent,
EuiPageContentBody,
EuiPageHeader,
EuiSpacer,
EuiSuperDatePicker,
EuiTabbedContent,
} from '@elastic/eui';

import { SettingsFlyout } from './components/settings-flyout';

import { TopNContext } from './components/contexts/topn';
import { StackTraceNavigation } from './components/stacktrace-nav';
import { StackedBarChart } from './components/stacked-bar-chart';
Expand All @@ -31,23 +36,93 @@ import { PixiFlamechart } from './components/PixiFlamechart';

import { Services } from './services';

interface CommonlyUsedRange {
start: string;
end: string;
label: string;
}

const commonlyUsedRanges: CommonlyUsedRange[] = [
{
start: 'now-30m',
end: 'now',
label: 'Last 30 minutes',
},
{
start: 'now-1h',
end: 'now',
label: 'Last hour',
},
{
start: 'now-24h',
end: 'now',
label: 'Last 24 hours',
},
{
start: 'now-1w',
end: 'now',
label: 'Last 7 days',
},
{
start: 'now-30d',
end: 'now',
label: 'Last 30 days',
},
];

interface TimeRange {
start: string;
end: string;
isoStart: string;
isoEnd: string;
unixStart: number;
unixEnd: number;
}

function buildTimeRange(start: string, end: string): TimeRange {
const timeStart = dateMath.parse(start);
const timeEnd = dateMath.parse(end);
return {
start,
end,
isoStart: timeStart.toISOString(),
isoEnd: timeEnd.toISOString(),
unixStart: timeStart.utc().unix(),
unixEnd: timeEnd.utc().unix(),
};
}

type Props = Services;

function App({
fetchTopN,
fetchElasticFlamechart,
fetchElasticFlamechart2,
fetchPixiFlamechart,
}: Props) {
function App({ fetchTopN, fetchElasticFlamechart, fetchPixiFlamechart }: Props) {
const defaultTimeRange = buildTimeRange(commonlyUsedRanges[0].start, commonlyUsedRanges[0].end);
const [timeRange, setTimeRange] = useState(defaultTimeRange);

const [index, setIndex] = useState('profiling-events-all');
const [projectID, setProjectID] = useState(5);
const [n, setN] = useState(100);

const [topn, setTopN] = useState({
samples: [],
series: new Map(),
});

const [elasticFlamegraph, setElasticFlamegraph] = useState({ leaves: [] });
const [elasticFlamegraph2, setElasticFlamegraph2] = useState({ leaves: [] });
const [pixiFlamegraph, setPixiFlamegraph] = useState({});

const handleTimeChange = (selectedTime: { start: string; end: string; isInvalid: boolean }) => {
if (selectedTime.isInvalid) {
return;
}

const tr = buildTimeRange(selectedTime.start, selectedTime.end);
setTimeRange(tr);
};

const updateIndex = (idx: string) => setIndex(idx);
const updateProjectID = (n: number) => setProjectID(n);
const updateN = (n: number) => setN(n);

const tabs = [
{
id: 'stacktrace-elastic',
Expand All @@ -56,7 +131,14 @@ function App({
<>
<EuiSpacer />
<TopNContext.Provider value={topn}>
<StackTraceNavigation fetchTopN={fetchTopN} setTopN={setTopN} />
<StackTraceNavigation
index={index}
projectID={projectID}
n={n}
timeRange={timeRange}
fetchTopN={fetchTopN}
setTopN={setTopN}
/>
<StackedBarChart id="topn" name="topn" height={400} x="x" y="y" category="g" />
<ChartGrid maximum={10} />
</TopNContext.Provider>
Expand All @@ -70,20 +152,14 @@ function App({
<>
<EuiSpacer />
<FlameGraphContext.Provider value={elasticFlamegraph}>
<FlameGraphNavigation getter={fetchElasticFlamechart} setter={setElasticFlamegraph} />
<FlameGraph id="flamechart" height={600} />
</FlameGraphContext.Provider>
</>
),
},
{
id: 'flamegraph-elastic2',
name: 'FlameGraph (Elastic2)',
content: (
<>
<EuiSpacer />
<FlameGraphContext.Provider value={elasticFlamegraph2}>
<FlameGraphNavigation getter={fetchElasticFlamechart2} setter={setElasticFlamegraph2} />
<FlameGraphNavigation
index={index}
projectID={projectID}
n={n}
timeRange={timeRange}
getter={fetchElasticFlamechart}
setter={setElasticFlamegraph}
/>
<FlameGraph id="flamechart" height={600} />
</FlameGraphContext.Provider>
</>
Expand All @@ -96,8 +172,15 @@ function App({
<>
<EuiSpacer />
<FlameGraphContext.Provider value={pixiFlamegraph}>
<FlameGraphNavigation getter={fetchPixiFlamechart} setter={setPixiFlamegraph} />
<PixiFlamechart projectID={'5'} />
<FlameGraphNavigation
index={index}
projectID={projectID}
n={n}
timeRange={timeRange}
getter={fetchPixiFlamechart}
setter={setPixiFlamegraph}
/>
<PixiFlamechart projectID={projectID.toString()} />
</FlameGraphContext.Provider>
</>
),
Expand All @@ -106,9 +189,31 @@ function App({

return (
<EuiPage>
<EuiPageBody style={{ margin: '0 auto' }}>
<EuiPageBody paddingSize="none">
<EuiPageHeader
paddingSize="s"
pageTitle="Continuous Profiling"
rightSideItems={[
<EuiSuperDatePicker
start={timeRange.start}
end={timeRange.end}
isPaused={true}
onTimeChange={handleTimeChange}
commonlyUsedRanges={commonlyUsedRanges}
/>,
<SettingsFlyout
title={'Settings'}
defaultIndex={index}
updateIndex={updateIndex}
defaultProjectID={projectID}
updateProjectID={updateProjectID}
defaultN={n}
updateN={updateN}
/>,
]}
/>
<EuiPageContent>
<EuiPageContentBody style={{ margin: '0 auto' }}>
<EuiPageContentBody paddingSize="none">
<EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} autoFocus="selected" />
</EuiPageContentBody>
</EuiPageContent>
Expand Down
91 changes: 5 additions & 86 deletions src/plugins/profiling/public/components/flamegraph-nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,99 +6,18 @@
* Side Public License, v 1.
*/

import React, { useEffect, useState } from 'react';

import dateMath from '@elastic/datemath';
import { EuiSuperDatePicker } from '@elastic/eui';

interface CommonlyUsedRange {
start: string;
end: string;
label: string;
}

const commonlyUsedRanges: CommonlyUsedRange[] = [
{
start: 'now-30m',
end: 'now',
label: 'Last 30 minutes',
},
{
start: 'now-1h',
end: 'now',
label: 'Last hour',
},
{
start: 'now-24h',
end: 'now',
label: 'Last 24 hours',
},
{
start: 'now-1w',
end: 'now',
label: 'Last 7 days',
},
{
start: 'now-30d',
end: 'now',
label: 'Last 30 days',
},
];

interface TimeRange {
start: string;
end: string;
isoStart: string;
isoEnd: string;
unixStart: number;
unixEnd: number;
}

function buildTimeRange(start: string, end: string): TimeRange {
const timeStart = dateMath.parse(start);
const timeEnd = dateMath.parse(end);
return {
start,
end,
isoStart: timeStart.toISOString(),
isoEnd: timeEnd.toISOString(),
unixStart: timeStart.utc().unix(),
unixEnd: timeEnd.utc().unix(),
};
}

export const FlameGraphNavigation = ({ getter, setter }) => {
const defaultTimeRange = buildTimeRange(commonlyUsedRanges[0].start, commonlyUsedRanges[0].end);
const [timeRange, setTimeRange] = useState(defaultTimeRange);

const handleTimeChange = (selectedTime: { start: string; end: string; isInvalid: boolean }) => {
if (selectedTime.isInvalid) {
return;
}

const tr = buildTimeRange(selectedTime.start, selectedTime.end);
setTimeRange(tr);
};
import React, { useEffect } from 'react';

export const FlameGraphNavigation = ({ index, projectID, n, timeRange, getter, setter }) => {
useEffect(() => {
console.log(new Date().toISOString(), timeRange);
console.log(new Date().toISOString(), 'started payload retrieval');
getter(timeRange.unixStart, timeRange.unixEnd).then((response) => {
getter(index, projectID, timeRange.unixStart, timeRange.unixEnd, n).then((response) => {
console.log(new Date().toISOString(), 'finished payload retrieval');
setter(response);
console.log(new Date().toISOString(), 'updated local state');
});
}, [timeRange]);
}, [index, projectID, n, timeRange]);

return (
<div>
<EuiSuperDatePicker
start={timeRange.start}
end={timeRange.end}
isPaused={true}
onTimeChange={handleTimeChange}
commonlyUsedRanges={commonlyUsedRanges}
/>
</div>
);
return <></>;
};
Loading

0 comments on commit 0e5caec

Please sign in to comment.