-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Uptime] Added trends chart and deep link to exp view on waterfall st…
…ep metric markers (#114068) * added trend chart and link to exp view * Added step level filtering/breakdowns * fix type * make step and monitor name single select * fix test * added step filters * pr feedback * hide step filter for non step metrics * pr feedback * remove step def when it's not applicable * ^^also for step name breakdown * Update x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/breakdown/breakdowns.tsx Co-authored-by: Dominique Clarke <[email protected]> * use side effct * update monitor filter * update all_value usage * refactor * fix type * use last value operation * use last 48 intervals Co-authored-by: Dominique Clarke <[email protected]>
- v8.17.0
- v8.16.2
- v8.16.1
- v8.16.0
- v8.15.5
- v8.15.4
- v8.15.3
- v8.15.2
- v8.15.1
- v8.15.0
- v8.14.3
- v8.14.2
- v8.14.1
- v8.14.0
- v8.13.4
- v8.13.3
- v8.13.2
- v8.13.1
- v8.13.0
- v8.12.2
- v8.12.1
- v8.12.0
- v8.11.4
- v8.11.3
- v8.11.2
- v8.11.1
- v8.11.0
- v8.10.4
- v8.10.3
- v8.10.2
- v8.10.1
- v8.10.0
- v8.9.2
- v8.9.1
- v8.9.0
- v8.8.2
- v8.8.1
- v8.8.0
- v8.7.1
- v8.7.0
- v8.6.2
- v8.6.1
- v8.6.0
- v8.5.3
- v8.5.2
- v8.5.1
- v8.5.0
- v8.4.3
- v8.4.2
- v8.4.1
- v8.4.0
- v8.3.3
- v8.3.2
- v8.3.1
- v8.3.0
- v8.2.3
- v8.2.2
- v8.2.1
- v8.2.0
- v8.1.3
- v8.1.2
- v8.1.1
- v8.1.0
- v8.0.1
- v8.0.0
- v8.0.0-rc2
- v8.0.0-rc1
- v8.0.0-beta1
- test-depl-20231025084603
- test-depl-20231013154558
- deploy-fix-test-ci
- deploy-fix@1728886420
- deploy-fix@1722233551
- deploy-fix@1721023892
- deploy-fix@1720419201
- deploy-fix@1718000036
- deploy-fix@1717401777
- deploy-fix@1708322739
- deploy-fix@1707717945
- deploy-fix@1701687168
- deploy-fix@1699260155
- deploy-fix@1698657637
- deploy@1735539127
- deploy@1734934371
- deploy@1734329529
- deploy@1733724770
- deploy@1733120035
- deploy@1732515196
- deploy@1731910526
- deploy@1731305644
- deploy@1730700921
- deploy@1730095989
- deploy@1729491328
- deploy@1728886420
- deploy@1728281754
- deploy@1727676838
- deploy@1727071987
- deploy@1726473511
- deploy@1725862301
- deploy@1725257503
- deploy@1724652827
- deploy@1724047965
- deploy@1723443177
- deploy@1722838314
- deploy@1722233551
- deploy@1721628835
- deploy@1721023892
- deploy@1720419201
- deploy@1719814351
- deploy@1719209622
- deploy@1718616070
- deploy@1718000036
- deploy@1717401777
- deploy@1717395230
- deploy@1716800745
- deploy@1716790412
- deploy@1716185667
- deploy@1715580861
- deploy@1714976069
- deploy@1714371303
- deploy@1713766425
- deploy@1713161715
- deploy@1712566963
- deploy@1711952105
- deploy@1711370131
- deploy@1710741924
- deploy@1710146776
- deploy@1710137117
- deploy@1709533819
- deploy@1709532332
- deploy@1708927574
- deploy@1708322739
- deploy@1707717945
- deploy@1707113127
- deploy@1706508321
- deploy@1705903520
- deploy@1705306975
- deploy@1705298718
- deploy@1704693922
- deploy@1704089101
- deploy@1703484304
- deploy@1702903357
- deploy@1702879551
- deploy@1702367069
- deploy@1702284899
- deploy@1701687168
- deploy@1701160888
- deploy@1700491293
- deploy@1699865290
- deploy@1699260155
- deploy@1698657637
- deploy@1698046713
- deploy@1697564183
- deploy@1697232175
- deploy@1697028216
- deploy@1696873111
- deploy@1696618725
- deploy@1696508231
- deploy@1696415195
- deploy@1696328885
- deploy@1695286747
- deploy@1694683198
- deploy@1694506029
- deploy@1694162455
- deploy@1694087994
- deploy@1693866333
- deploy@1693860790
- deploy@1693853982
- deploy@1693609987
- deploy@1693594780
1 parent
ea00e60
commit 5477f60
Showing
13 changed files
with
293 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
38 changes: 38 additions & 0 deletions
38
...ptime/public/components/monitor/synthetics/waterfall/components/waterfall_marker_icon.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0; you may not use this file except in compliance with the Elastic License | ||
* 2.0. | ||
*/ | ||
|
||
import React, { useState } from 'react'; | ||
import { EuiButtonIcon, EuiIcon, EuiPopover } from '@elastic/eui'; | ||
import { WaterfallMarkerTrend } from './waterfall_marker_trend'; | ||
|
||
export function WaterfallMarkerIcon({ field, label }: { field: string; label: string }) { | ||
const [isOpen, setIsOpen] = useState(false); | ||
|
||
if (!field) { | ||
return <EuiIcon type="dot" size="l" />; | ||
} | ||
|
||
return ( | ||
<EuiPopover | ||
isOpen={isOpen} | ||
closePopover={() => setIsOpen(false)} | ||
anchorPosition="downLeft" | ||
panelStyle={{ paddingBottom: 0, paddingLeft: 4 }} | ||
zIndex={100} | ||
button={ | ||
<EuiButtonIcon | ||
iconType="dot" | ||
iconSize="l" | ||
color="text" | ||
onClick={() => setIsOpen((prevState) => !prevState)} | ||
/> | ||
} | ||
> | ||
<WaterfallMarkerTrend title={label} field={field} /> | ||
</EuiPopover> | ||
); | ||
} |
106 changes: 106 additions & 0 deletions
106
...time/public/components/monitor/synthetics/waterfall/components/waterfall_marker_trend.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0; you may not use this file except in compliance with the Elastic License | ||
* 2.0. | ||
*/ | ||
import React from 'react'; | ||
|
||
import { EuiButton } from '@elastic/eui'; | ||
import { i18n } from '@kbn/i18n'; | ||
import moment from 'moment'; | ||
import { useUptimeStartPlugins } from '../../../../../contexts/uptime_startup_plugins_context'; | ||
import { useUptimeSettingsContext } from '../../../../../contexts/uptime_settings_context'; | ||
import { AllSeries, createExploratoryViewUrl } from '../../../../../../../observability/public'; | ||
import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common'; | ||
import { useWaterfallContext } from '../context/waterfall_chart'; | ||
import { JourneyStep } from '../../../../../../common/runtime_types'; | ||
|
||
const getLast48Intervals = (activeStep: JourneyStep) => { | ||
const { lt, gte } = activeStep.monitor.timespan!; | ||
const inDays = moment(lt).diff(moment(gte), 'days'); | ||
if (inDays > 0) { | ||
return { to: 'now', from: `now-${inDays * 48}d` }; | ||
} | ||
|
||
const inHours = moment(lt).diff(moment(gte), 'hours'); | ||
if (inHours > 0) { | ||
return { to: 'now', from: `now-${inHours * 48}h` }; | ||
} | ||
|
||
const inMinutes = moment(lt).diff(moment(gte), 'minutes'); | ||
if (inMinutes > 0) { | ||
return { to: 'now', from: `now-${inMinutes * 48}m` }; | ||
} | ||
|
||
const inSeconds = moment(lt).diff(moment(gte), 'seconds'); | ||
return { to: 'now', from: `now-${inSeconds * 48}s` }; | ||
}; | ||
|
||
export function WaterfallMarkerTrend({ title, field }: { title: string; field: string }) { | ||
const { observability } = useUptimeStartPlugins(); | ||
|
||
const EmbeddableExpVIew = observability!.ExploratoryViewEmbeddable; | ||
|
||
const { basePath } = useUptimeSettingsContext(); | ||
|
||
const { activeStep } = useWaterfallContext(); | ||
|
||
if (!activeStep) { | ||
return null; | ||
} | ||
|
||
const allSeries: AllSeries = [ | ||
{ | ||
name: `${title}(${activeStep.synthetics.step?.name!})`, | ||
selectedMetricField: field, | ||
time: getLast48Intervals(activeStep), | ||
seriesType: 'area', | ||
dataType: 'synthetics', | ||
reportDefinitions: { | ||
'monitor.name': [activeStep.monitor.name!], | ||
'synthetics.step.name.keyword': [activeStep.synthetics.step?.name!], | ||
}, | ||
operationType: 'last_value', | ||
}, | ||
]; | ||
|
||
const href = createExploratoryViewUrl( | ||
{ | ||
reportType: 'kpi-over-time', | ||
allSeries, | ||
}, | ||
basePath | ||
); | ||
|
||
return ( | ||
<Wrapper> | ||
<EmbeddableExpVIew | ||
title={title} | ||
appendTitle={ | ||
<EuiButton iconType={'visArea'} href={href} target="_blank" size="s"> | ||
{EXPLORE_LABEL} | ||
</EuiButton> | ||
} | ||
reportType={'kpi-over-time'} | ||
attributes={allSeries} | ||
axisTitlesVisibility={{ x: false, yLeft: false, yRight: false }} | ||
legendIsVisible={false} | ||
/> | ||
</Wrapper> | ||
); | ||
} | ||
|
||
export const EXPLORE_LABEL = i18n.translate('xpack.uptime.synthetics.markers.explore', { | ||
defaultMessage: 'Explore', | ||
}); | ||
|
||
const Wrapper = euiStyled.div` | ||
height: 200px; | ||
width: 400px; | ||
&&& { | ||
.expExpressionRenderer__expression { | ||
padding-bottom: 0 !important; | ||
} | ||
} | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters