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 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 6x 8x 2x 2x 4x 2x 2x 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 from 'react'
import moment from 'moment'
import { Link, useParams } from 'react-router-dom'
import { Card, Color, Container, FontVariation, Heading, Layout, Text } from '@harness/uicore'
import { useStrings } from 'framework/strings'
import routes from '@common/RouteDefinitions'
import type { ProjectPathProps } from '@common/interfaces/RouteInterfaces'
import { PeriodTypeEnum } from '@cv/pages/slos/components/CVCreateSLO/components/CreateSLOForm/components/SLOTargetAndBudgetPolicy/SLOTargetAndBudgetPolicy.constants'
import { SLITypeEnum } from '@cv/pages/slos/components/CVCreateSLO/components/CreateSLOForm/components/SLI/SLI.constants'
import type { KeyValuePairProps, ServiceDetailsProps } from '../DetailsPanel.types'
import css from '../DetailsPanel.module.scss'
const KeyValuePair: React.FC<KeyValuePairProps> = ({ keyText, value }) => {
return (
<Container>
<Text font={{ variation: FontVariation.TINY_SEMI }} color={Color.GREY_400}>
{keyText}
</Text>
<Text font={{ variation: FontVariation.SMALL_BOLD }} color={Color.GREY_800}>
{value}
</Text>
</Container>
)
}
const ServiceDetails: React.FC<ServiceDetailsProps> = ({ sloDashboardWidget }) => {
const { getString } = useStrings()
const { accountId, orgIdentifier, projectIdentifier } = useParams<ProjectPathProps>()
const getDate = (time: number): string => moment(new Date(time)).format('lll')
const monitoredServicePathname = routes.toCVAddMonitoringServicesEdit({
accountId,
orgIdentifier,
projectIdentifier,
identifier: sloDashboardWidget.monitoredServiceIdentifier
})
return (
<Card className={css.serviceDetailsCard}>
<Text font={{ variation: FontVariation.CARD_TITLE }} color={Color.GREY_800} padding={{ bottom: 'medium' }}>
{getString('cv.serviceDetails')}
</Text>
<Layout.Horizontal spacing="xlarge">
<Container>
<Text font={{ variation: FontVariation.TINY_SEMI }} color={Color.GREY_400}>
{getString('connectors.cdng.monitoredService.label')}
</Text>
<Link to={monitoredServicePathname}>
<Text font={{ variation: FontVariation.SMALL_BOLD }} color={Color.PRIMARY_7}>
{sloDashboardWidget.serviceName}
<Text tag="span" color={Color.GREY_800} padding={{ left: 'xsmall' }}>
/{sloDashboardWidget.environmentName}
</Text>
</Text>
</Link>
</Container>
<KeyValuePair
keyText={getString('cv.slos.sliType')}
value={getString(
sloDashboardWidget.type === SLITypeEnum.AVAILABILITY
? 'cv.slos.slis.type.availability'
: 'cv.slos.slis.type.latency'
)}
/>
<KeyValuePair keyText={getString('cv.healthScore')} value={sloDashboardWidget.healthSourceName} />
<KeyValuePair
keyText={getString('cv.slos.sloTargetAndBudget.periodType')}
value={getString(
sloDashboardWidget.sloTargetType === PeriodTypeEnum.ROLLING
? 'cv.slos.sloTargetAndBudget.periodTypeOptions.rolling'
: 'cv.slos.sloTargetAndBudget.periodTypeOptions.calendar'
)}
/>
<Container style={{ flexGrow: 1 }}>
<Text font={{ variation: FontVariation.TINY_SEMI }} color={Color.GREY_400}>
{getString('cv.periodLength')}
</Text>
<Text font={{ variation: FontVariation.SMALL_BOLD }} color={Color.GREY_800}>
{sloDashboardWidget.currentPeriodLengthDays}
{Number(sloDashboardWidget.currentPeriodLengthDays) < 2 ? getString('cv.day') : getString('cv.days')}
<Text tag="span" color={Color.GREY_600} font={{ variation: FontVariation.TINY_SEMI }}>
({getDate(sloDashboardWidget.currentPeriodStartTime)} - {getDate(sloDashboardWidget.currentPeriodEndTime)}
)
</Text>
</Text>
</Container>
<Container width={140} padding="small" background={Color.GREY_100} style={{ borderRadius: '8px' }}>
<Text font={{ variation: FontVariation.TINY_SEMI }} color={Color.GREY_600}>
{getString('cv.errorBudgetRemaining')}
</Text>
<Heading level={2} color={Color.GREY_800} font={{ variation: FontVariation.H4 }}>
{Number(sloDashboardWidget.errorBudgetRemainingPercentage).toFixed(2)}%
</Heading>
</Container>
<Container width={140} padding="small" background={Color.GREY_100} style={{ borderRadius: '8px' }}>
<Text font={{ variation: FontVariation.TINY_SEMI }} color={Color.GREY_600}>
{getString('cv.timeRemaining')}
</Text>
<Heading inline level={2} color={Color.GREY_800} font={{ variation: FontVariation.H4 }}>
{sloDashboardWidget.timeRemainingDays}
</Heading>
<Text inline font={{ variation: FontVariation.FORM_HELP }}>
{Number(sloDashboardWidget.timeRemainingDays) < 2 ? getString('cv.day') : getString('cv.days')}
</Text>
</Container>
</Layout.Horizontal>
</Card>
)
}
export default ServiceDetails
|