github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.7] [Profiling] Restore show information window (#151538) (#151815)

Browse source 
# Backport

This will backport the following commits from `main` to `8.7`:
- [[Profiling] Restore show information window
(#151538)](https://github.com/elastic/kibana/pull/151538)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Joseph
Crail","email":"joseph.crail@elastic.co"},"sourceCommit":{"committedDate":"2023-02-22T00:46:00Z","message":"[Profiling]
Restore show information window (#151538)\n\n## Summary\r\n\r\nThis PR
returns the show information window to the flamegraph view.\r\n\r\nWe
also added a minor UI improvement to keep the flamegraph
view\r\nvisually synced up with the differential flamegraph
view.\r\n\r\nFixes
https://github.com/elastic/prodfiler/issues/3009\r\n\r\n###
Screenshots\r\n\r\nThe \"Show information window\" toggle is visible and
disabled.\r\n\r\n![image](https://user-images.githubusercontent.com/6038/219519101-5e8a9797-faa4-4ffe-ab72-1281df7759dc.png)\r\n\r\nThe
\"Show information window\" toggle is visible and
enabled.\r\n\r\n![image](https://user-images.githubusercontent.com/6038/219519115-8b9b5539-82f5-4eb9-b667-4b283e6f39d8.png)","sha":"0764bd1b7d36f97577d3c55eab5623b28f3e304d","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v8.7.0","v8.8.0"],"number":151538,"url":"https://github.com/elastic/kibana/pull/151538","mergeCommit":{"message":"[Profiling]
Restore show information window (#151538)\n\n## Summary\r\n\r\nThis PR
returns the show information window to the flamegraph view.\r\n\r\nWe
also added a minor UI improvement to keep the flamegraph
view\r\nvisually synced up with the differential flamegraph
view.\r\n\r\nFixes
https://github.com/elastic/prodfiler/issues/3009\r\n\r\n###
Screenshots\r\n\r\nThe \"Show information window\" toggle is visible and
disabled.\r\n\r\n![image](https://user-images.githubusercontent.com/6038/219519101-5e8a9797-faa4-4ffe-ab72-1281df7759dc.png)\r\n\r\nThe
\"Show information window\" toggle is visible and
enabled.\r\n\r\n![image](https://user-images.githubusercontent.com/6038/219519115-8b9b5539-82f5-4eb9-b667-4b283e6f39d8.png)","sha":"0764bd1b7d36f97577d3c55eab5623b28f3e304d"}},"sourceBranch":"main","suggestedTargetBranches":["8.7"],"targetPullRequestStates":[{"branch":"8.7","label":"v8.7.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/151538","number":151538,"mergeCommit":{"message":"[Profiling]
Restore show information window (#151538)\n\n## Summary\r\n\r\nThis PR
returns the show information window to the flamegraph view.\r\n\r\nWe
also added a minor UI improvement to keep the flamegraph
view\r\nvisually synced up with the differential flamegraph
view.\r\n\r\nFixes
https://github.com/elastic/prodfiler/issues/3009\r\n\r\n###
Screenshots\r\n\r\nThe \"Show information window\" toggle is visible and
disabled.\r\n\r\n![image](https://user-images.githubusercontent.com/6038/219519101-5e8a9797-faa4-4ffe-ab72-1281df7759dc.png)\r\n\r\nThe
\"Show information window\" toggle is visible and
enabled.\r\n\r\n![image](https://user-images.githubusercontent.com/6038/219519115-8b9b5539-82f5-4eb9-b667-4b283e6f39d8.png)","sha":"0764bd1b7d36f97577d3c55eab5623b28f3e304d"}}]}]
BACKPORT-->

Co-authored-by: Joseph Crail <joseph.crail@elastic.co>
This commit is contained in:
Kibana Machine 2023-02-21 20:52:50 -05:00 • committed by GitHub
parent 0400813ada
commit d22868f73d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 168 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

297
x-pack/plugins/profiling/public/components/flame_graphs_view/index.tsx
View file

@ -27,10 +27,45 @@ import { AsyncComponent } from '../async_component';
import { useProfilingDependencies } from '../contexts/profiling_dependencies/use_profiling_dependencies';
import { FlameGraph } from '../flamegraph';
import { PrimaryAndComparisonSearchBar } from '../primary_and_comparison_search_bar';
import { PrimaryProfilingSearchBar } from '../profiling_app_page_template/primary_profiling_search_bar';
import { ProfilingAppPageTemplate } from '../profiling_app_page_template';
import { RedirectTo } from '../redirect_to';
import { FlameGraphNormalizationOptions, NormalizationMenu } from './normalization_menu';
export function FlameGraphInformationWindowSwitch({
showInformationWindow,
onChange,
}: {
showInformationWindow: boolean;
onChange: () => void;
}) {
return (
<EuiSwitch
checked={showInformationWindow}
onChange={onChange}
label={i18n.translate('xpack.profiling.flameGraph.showInformationWindow', {
defaultMessage: 'Show information window',
})}
/>
);
}
export function FlameGraphSearchPanel({
children,
searchBar,
}: {
children: React.ReactNode;
searchBar: JSX.Element;
}) {
return (
<EuiPanel hasShadow={false} color="subdued">
{searchBar}
<EuiHorizontalRule />
<EuiFlexGroup direction="row">{children}</EuiFlexGroup>
</EuiPanel>
);
}
export function FlameGraphsView({ children }: { children: React.ReactElement }) {
const {
path,
@ -132,136 +167,140 @@ export function FlameGraphsView({ children }: { children: React.ReactElement })
return <RedirectTo pathname="/flamegraphs/flamegraph" />;
}
return (
<ProfilingAppPageTemplate tabs={tabs} hideSearchBar={isDifferentialView}>
<EuiFlexGroup direction="column">
{isDifferentialView ? (
<EuiFlexItem grow={false}>
<EuiPanel hasShadow={false} color="subdued">
<PrimaryAndComparisonSearchBar />
<EuiHorizontalRule />
<EuiFlexGroup direction="row">
<EuiFlexItem grow={false}>
<EuiFlexGroup direction="row" gutterSize="m" alignItems="center">
<EuiFlexItem grow={false}>
<EuiTitle size="xxs">
<h3>
{i18n.translate(
'xpack.profiling.flameGraphsView.differentialFlameGraphComparisonModeTitle',
{ defaultMessage: 'Format' }
)}
</h3>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonGroup
legend={i18n.translate(
'xpack.profiling.flameGraphsView.differentialFlameGraphComparisonModeLegend',
{
defaultMessage:
'This switch allows you to switch between an absolute and relative comparison between both graphs',
}
)}
type="single"
buttonSize="s"
idSelected={comparisonMode}
onChange={(nextComparisonMode) => {
if (!('comparisonRangeFrom' in query)) {
return;
}
const searchBar = isDifferentialView ? (
<PrimaryAndComparisonSearchBar />
) : (
<PrimaryProfilingSearchBar />
);
profilingRouter.push(routePath, {
path,
query: {
...query,
...(nextComparisonMode === FlameGraphComparisonMode.Absolute
? {
comparisonMode: FlameGraphComparisonMode.Absolute,
normalizationMode: FlameGraphNormalizationMode.Time,
}
: { comparisonMode: FlameGraphComparisonMode.Relative }),
},
});
}}
options={[
{
id: FlameGraphComparisonMode.Absolute,
label: i18n.translate(
'xpack.profiling.flameGraphsView.differentialFlameGraphComparisonModeAbsoluteButtonLabel',
{
defaultMessage: 'Abs',
}
),
},
{
id: FlameGraphComparisonMode.Relative,
label: i18n.translate(
'xpack.profiling.flameGraphsView.differentialFlameGraphComparisonModeRelativeButtonLabel',
{
defaultMessage: 'Rel',
}
),
},
]}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
{comparisonMode === FlameGraphComparisonMode.Absolute ? (
<EuiFlexItem grow={false}>
<EuiFlexGroup direction="row" gutterSize="m" alignItems="center">
<EuiFlexItem grow={false}>
<NormalizationMenu
onChange={(options) => {
profilingRouter.push(routePath, {
path: routePath,
// @ts-expect-error Code gets too complicated to satisfy TS constraints
query: {
...query,
...pick(options, 'baseline', 'comparison'),
normalizationMode: options.mode,
},
});
}}
totalSeconds={
(new Date(timeRange.end).getTime() -
new Date(timeRange.start).getTime()) /
1000
}
comparisonTotalSeconds={
(new Date(comparisonTimeRange.end!).getTime() -
new Date(comparisonTimeRange.start!).getTime()) /
1000
}
options={
(normalizationMode === FlameGraphNormalizationMode.Time
? { mode: FlameGraphNormalizationMode.Time }
: {
mode: FlameGraphNormalizationMode.Scale,
baseline,
comparison,
}) as FlameGraphNormalizationOptions
}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
) : undefined}
<EuiFlexItem grow style={{ alignItems: 'flex-end' }}>
<EuiSwitch
checked={showInformationWindow}
onChange={() => {
setShowInformationWindow((prev) => !prev);
}}
label={i18n.translate('xpack.profiling.flameGraph.showInformationWindow', {
defaultMessage: 'Show information window',
})}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</EuiFlexItem>
) : null}
const differentialComparisonMode = (
<EuiFlexItem grow={false}>
<EuiFlexGroup direction="row" gutterSize="m" alignItems="center">
<EuiFlexItem grow={false}>
<EuiTitle size="xxs">
<h3>
{i18n.translate(
'xpack.profiling.flameGraphsView.differentialFlameGraphComparisonModeTitle',
{ defaultMessage: 'Format' }
)}
</h3>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonGroup
legend={i18n.translate(
'xpack.profiling.flameGraphsView.differentialFlameGraphComparisonModeLegend',
{
defaultMessage:
'This switch allows you to switch between an absolute and relative comparison between both graphs',
}
)}
type="single"
buttonSize="s"
idSelected={comparisonMode}
onChange={(nextComparisonMode) => {
if (!('comparisonRangeFrom' in query)) {
return;
}
profilingRouter.push(routePath, {
path,
query: {
...query,
...(nextComparisonMode === FlameGraphComparisonMode.Absolute
? {
comparisonMode: FlameGraphComparisonMode.Absolute,
normalizationMode: FlameGraphNormalizationMode.Time,
}
: { comparisonMode: FlameGraphComparisonMode.Relative }),
},
});
}}
options={[
{
id: FlameGraphComparisonMode.Absolute,
label: i18n.translate(
'xpack.profiling.flameGraphsView.differentialFlameGraphComparisonModeAbsoluteButtonLabel',
{
defaultMessage: 'Abs',
}
),
},
{
id: FlameGraphComparisonMode.Relative,
label: i18n.translate(
'xpack.profiling.flameGraphsView.differentialFlameGraphComparisonModeRelativeButtonLabel',
{
defaultMessage: 'Rel',
}
),
},
]}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
);
const differentialComparisonNormalization = (
<EuiFlexItem grow={false}>
<EuiFlexGroup direction="row" gutterSize="m" alignItems="center">
<EuiFlexItem grow={false}>
<NormalizationMenu
onChange={(options) => {
profilingRouter.push(routePath, {
path: routePath,
query: {
...query,
...pick(options, 'baseline', 'comparison'),
normalizationMode: options.mode,
},
});
}}
totalSeconds={
(new Date(timeRange.end).getTime() - new Date(timeRange.start).getTime()) / 1000
}
comparisonTotalSeconds={
(new Date(comparisonTimeRange.end!).getTime() -
new Date(comparisonTimeRange.start!).getTime()) /
1000
}
options={
(normalizationMode === FlameGraphNormalizationMode.Time
? { mode: FlameGraphNormalizationMode.Time }
: {
mode: FlameGraphNormalizationMode.Scale,
baseline,
comparison,
}) as FlameGraphNormalizationOptions
}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
);
const informationWindowSwitch = (
<EuiFlexItem grow style={{ alignItems: 'flex-end' }}>
<FlameGraphInformationWindowSwitch
showInformationWindow={showInformationWindow}
onChange={() => setShowInformationWindow((prev) => !prev)}
/>
</EuiFlexItem>
);
return (
<ProfilingAppPageTemplate tabs={tabs} hideSearchBar={true}>
<EuiFlexGroup direction="column">
<EuiFlexItem grow={false}>
<FlameGraphSearchPanel searchBar={searchBar}>
{isDifferentialView && differentialComparisonMode}
{isDifferentialView &&
comparisonMode === FlameGraphComparisonMode.Absolute &&
differentialComparisonNormalization}
{informationWindowSwitch}
</FlameGraphSearchPanel>
</EuiFlexItem>
<EuiFlexItem>
<AsyncComponent {...state} style={{ height: '100%' }} size="xl">
<FlameGraph