55 * 2.0.
66 */
77
8- import { EuiButtonGroup , EuiFlexGroup , EuiFlexItem , EuiPanel , EuiTitle } from '@elastic/eui' ;
9- import { i18n } from '@kbn/i18n' ;
8+ import { EuiFlexGroup , EuiFlexItem , EuiPanel } from '@elastic/eui' ;
109import { SLOWithSummaryResponse } from '@kbn/slo-schema' ;
1110import moment from 'moment' ;
1211import React , { useEffect , useState } from 'react' ;
12+ import { TimeBounds } from '../../../pages/slo_details/types' ;
13+ import { TimeRange } from '../error_rate_chart/use_lens_definition' ;
14+ import { SloTabId } from '../../../pages/slo_details/components/slo_details' ;
15+ import { BurnRateHeader } from './burn_rate_header' ;
1316import { useFetchSloBurnRates } from '../../../hooks/use_fetch_slo_burn_rates' ;
1417import { ErrorRateChart } from '../error_rate_chart' ;
1518import { BurnRate } from './burn_rate' ;
@@ -18,6 +21,9 @@ interface Props {
1821 slo : SLOWithSummaryResponse ;
1922 isAutoRefreshing ?: boolean ;
2023 burnRateOptions : BurnRateOption [ ] ;
24+ selectedTabId : SloTabId ;
25+ range ?: TimeRange ;
26+ onBrushed ?: ( timeBounds : TimeBounds ) => void ;
2127}
2228
2329export interface BurnRateOption {
@@ -32,7 +38,14 @@ function getWindowsFromOptions(opts: BurnRateOption[]): Array<{ name: string; du
3238 return opts . map ( ( opt ) => ( { name : opt . windowName , duration : `${ opt . duration } h` } ) ) ;
3339}
3440
35- export function BurnRates ( { slo, isAutoRefreshing, burnRateOptions } : Props ) {
41+ export function BurnRates ( {
42+ slo,
43+ isAutoRefreshing,
44+ burnRateOptions,
45+ selectedTabId,
46+ range,
47+ onBrushed,
48+ } : Props ) {
3649 const [ burnRateOption , setBurnRateOption ] = useState ( burnRateOptions [ 0 ] ) ;
3750 const { isLoading, data } = useFetchSloBurnRates ( {
3851 slo,
@@ -46,12 +59,7 @@ export function BurnRates({ slo, isAutoRefreshing, burnRateOptions }: Props) {
4659 }
4760 } , [ burnRateOptions ] ) ;
4861
49- const onBurnRateOptionChange = ( optionId : string ) => {
50- const selected = burnRateOptions . find ( ( opt ) => opt . id === optionId ) ?? burnRateOptions [ 0 ] ;
51- setBurnRateOption ( selected ) ;
52- } ;
53-
54- const dataTimeRange = {
62+ const dataTimeRange = range ?? {
5563 from : moment ( ) . subtract ( burnRateOption . duration , 'hour' ) . toDate ( ) ,
5664 to : new Date ( ) ,
5765 } ;
@@ -64,34 +72,26 @@ export function BurnRates({ slo, isAutoRefreshing, burnRateOptions }: Props) {
6472 return (
6573 < EuiPanel paddingSize = "m" color = "transparent" hasBorder data-test-subj = "burnRatePanel" >
6674 < EuiFlexGroup direction = "column" gutterSize = "m" >
67- < EuiFlexGroup justifyContent = "spaceBetween" >
68- < EuiFlexItem grow = { false } >
69- < EuiTitle size = "xs" >
70- < h2 >
71- { i18n . translate ( 'xpack.slo.burnRate.title' , {
72- defaultMessage : 'Burn rate' ,
73- } ) }
74- </ h2 >
75- </ EuiTitle >
76- </ EuiFlexItem >
77- < EuiFlexItem grow = { false } >
78- < EuiButtonGroup
79- legend = { i18n . translate ( 'xpack.slo.burnRate.timeRangeBtnLegend' , {
80- defaultMessage : 'Select the time range' ,
81- } ) }
82- options = { burnRateOptions . map ( ( opt ) => ( { id : opt . id , label : opt . label } ) ) }
83- idSelected = { burnRateOption . id }
84- onChange = { onBurnRateOptionChange }
85- buttonSize = "compressed"
86- />
87- </ EuiFlexItem >
88- </ EuiFlexGroup >
75+ < BurnRateHeader
76+ burnRateOption = { burnRateOption }
77+ burnRateOptions = { burnRateOptions }
78+ setBurnRateOption = { setBurnRateOption }
79+ selectedTabId = { selectedTabId }
80+ />
8981 < EuiFlexGroup direction = "row" gutterSize = "m" >
90- < EuiFlexItem grow = { 1 } >
91- < BurnRate threshold = { threshold } burnRate = { burnRate } slo = { slo } isLoading = { isLoading } />
92- </ EuiFlexItem >
82+ { selectedTabId !== 'history' && (
83+ < EuiFlexItem grow = { 1 } >
84+ < BurnRate threshold = { threshold } burnRate = { burnRate } slo = { slo } isLoading = { isLoading } />
85+ </ EuiFlexItem >
86+ ) }
9387 < EuiFlexItem grow = { 3 } >
94- < ErrorRateChart slo = { slo } dataTimeRange = { dataTimeRange } threshold = { threshold } />
88+ < ErrorRateChart
89+ slo = { slo }
90+ dataTimeRange = { dataTimeRange }
91+ threshold = { threshold }
92+ onBrushed = { onBrushed }
93+ selectedTabId = { selectedTabId }
94+ />
9595 </ EuiFlexItem >
9696 </ EuiFlexGroup >
9797 </ EuiFlexGroup >
0 commit comments