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 125 | 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 25x 22x 22x 22x 22x 22x 22x 22x 3x 3x 22x 3x 22x 22x | /*
* 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, useMemo, useCallback, useEffect } from 'react'
import { Container, Layout, Accordion } from '@wings-software/uicore'
import { SetupSourceCardHeader } from '@cv/components/CVSetupSourcesView/SetupSourceCardHeader/SetupSourceCardHeader'
import { useStrings } from 'framework/strings'
import { generateCustomMetricPack } from './CustomHealthSource.utils'
import SelectHealthSourceServices from '../../common/SelectHealthSourceServices/SelectHealthSourceServices'
import MapMetricsToServices from './components/MapMetricsToServices/MapMetricsToServices'
import QueryMapping from './components/QueryMapping/QueryMapping'
import MetricChartsValue from './components/MetricChartsValue/MetricChartsValue'
import { QueryType } from '../../common/HealthSourceQueryType/HealthSourceQueryType.types'
import type { MapCustomHealthToService } from './CustomHealthSource.types'
import type { CustomMappedMetric } from '../../common/CustomMetric/CustomMetric.types'
import css from './CustomHealthSource.module.scss'
interface CustomHealthSourceFormInterface {
formValue: MapCustomHealthToService
onValueChange: (value: any) => void
onFieldChange: (field: string, value: any) => void
mappedMetrics: Map<string, CustomMappedMetric>
selectedMetric: string
connectorIdentifier: string
}
export default function CustomHealthSourceForm(props: CustomHealthSourceFormInterface) {
const { formValue, onFieldChange, onValueChange, mappedMetrics, selectedMetric, connectorIdentifier } = props
const { getString } = useStrings()
const metricPacks = useMemo(() => generateCustomMetricPack(), [])
const [isQueryExecuted, setIsQueryExecuted] = useState(false)
const [sampleDataLoading, setSampleDataLoading] = useState(false)
const [recordsData, setrecordsData] = useState<Record<string, unknown> | undefined>()
const onFetchRecordsSuccess = useCallback((data: Record<string, unknown> | undefined): void => {
setrecordsData(data)
setIsQueryExecuted(true)
}, [])
useEffect(() => {
setrecordsData(undefined)
}, [selectedMetric])
const isSelectingJsonPathDisabled = !isQueryExecuted || sampleDataLoading || !recordsData
return (
<Container className={css.main}>
<SetupSourceCardHeader
mainHeading={getString('cv.monitoringSources.prometheus.querySpecificationsAndMappings')}
subHeading={getString('cv.monitoringSources.prometheus.customizeQuery')}
/>
<Layout.Horizontal className={css.content} spacing="xlarge">
<Accordion activeId="metricToService" className={css.accordian}>
<Accordion.Panel
id="metricToService"
summary={getString('cv.monitoringSources.mapMetricsToServices')}
details={
<MapMetricsToServices
formValue={formValue}
onChange={onFieldChange}
mappedMetrics={mappedMetrics as any}
selectedMetric={selectedMetric}
/>
}
/>
<Accordion.Panel
id="querymapping"
summary={getString('cv.customHealthSource.Querymapping.title')}
details={
<QueryMapping
formValue={formValue}
onFieldChange={onFieldChange}
onValueChange={onValueChange}
connectorIdentifier={connectorIdentifier}
onFetchRecordsSuccess={onFetchRecordsSuccess}
recordsData={recordsData}
isQueryExecuted={isQueryExecuted}
setLoading={setSampleDataLoading}
/>
}
/>
<Accordion.Panel
id="metricChart"
summary={getString('cv.healthSource.connectors.NewRelic.metricValueAndCharts')}
details={
<MetricChartsValue
recordsData={recordsData}
formikValues={formValue}
formikSetFieldValue={onFieldChange}
isQueryExecuted={isQueryExecuted}
isSelectingJsonPathDisabled={isSelectingJsonPathDisabled}
/>
}
/>
<Accordion.Panel
id="riskProfile"
summary={getString('cv.monitoringSources.assign')}
details={
<SelectHealthSourceServices
values={{
sli: !!formValue.sli,
healthScore: !!formValue.healthScore,
riskCategory: formValue?.riskCategory,
continuousVerification: !!formValue.continuousVerification
}}
hideServiceIdentifier
metricPackResponse={metricPacks}
hideCV={formValue.queryType === QueryType.SERVICE_BASED}
hideSLIAndHealthScore={formValue.queryType === QueryType.HOST_BASED}
/>
}
/>
</Accordion>
</Layout.Horizontal>
</Container>
)
}
|