Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | 8x 8x 8x 8x 8x 8x 8x 8x 8x 4x 4x 4x 4x 4x 5x 8x | /*
* Copyright 2022 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React, { useState } from 'react'
import { Card, Color, Container, FontVariation, Heading, Page, Text } from '@harness/uicore'
import { useStrings } from 'framework/strings'
import ChangesSourceCard from '@cv/pages/monitored-service/components/ServiceHealth/components/ChangesSourceCard/ChangesSourceCard'
import ChangesTable from '@cv/pages/monitored-service/components/ServiceHealth/components/ChangesAndServiceDependency/components/ChangesTable/ChangesTable'
import ServiceDetails from './views/ServiceDetails'
import type { DetailsPanelProps } from './DetailsPanel.types'
import SLOCardContent from '../../SLOCard/SLOCardContent'
import css from './DetailsPanel.module.scss'
const DetailsPanel: React.FC<DetailsPanelProps> = ({ loading, errorMessage, retryOnError, sloDashboardWidget }) => {
const { getString } = useStrings()
const [sliderTimeRange, setSliderTimeRange] = useState<{ startTime: number; endTime: number }>()
const { currentPeriodStartTime = 0, currentPeriodEndTime = 0 } = sloDashboardWidget ?? {}
const { startTime, endTime } = sliderTimeRange ?? { startTime: currentPeriodStartTime, endTime: currentPeriodEndTime }
return (
<Page.Body
loading={loading}
error={errorMessage}
retryOnError={retryOnError}
noData={{
when: () => !sloDashboardWidget
}}
className={css.pageBody}
>
{sloDashboardWidget && (
<Container padding="xlarge">
<ServiceDetails sloDashboardWidget={sloDashboardWidget} />
<SLOCardContent
isCardView
sliderTimeRange={sliderTimeRange}
setSliderTimeRange={setSliderTimeRange}
serviceLevelObjective={sloDashboardWidget}
/>
<Container padding={{ bottom: 'xlarge' }} />
<Card className={css.changesCard}>
<Heading
level={2}
color={Color.GREY_800}
padding={{ bottom: 'medium' }}
font={{ variation: FontVariation.CARD_TITLE }}
>
{getString('changes')}
</Heading>
<ChangesSourceCard
startTime={startTime}
endTime={endTime}
monitoredServiceIdentifier={sloDashboardWidget.monitoredServiceIdentifier}
/>
<Text
icon="info"
color={Color.GREY_600}
iconProps={{ size: 12, color: Color.PRIMARY_7 }}
font={{ variation: FontVariation.SMALL }}
padding={{ top: 'small', bottom: 'small' }}
>
{getString('cv.theTrendIsDeterminedForTheSelectedPeriodOverPeriod')}
</Text>
<ChangesTable
isCardView={false}
hasChangeSource
startTime={startTime}
endTime={endTime}
monitoredServiceIdentifier={sloDashboardWidget.monitoredServiceIdentifier}
/>
</Card>
</Container>
)}
</Page.Body>
)
}
export default DetailsPanel
|