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 126 127 | 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 1x 1x 10x | /*
* 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, { useMemo, useState, useCallback } from 'react'
import { Container, Tabs, Tab, NoDataCard, Layout, FlexExpander, Button, ButtonVariation } from '@wings-software/uicore'
import { Color } from '@harness/design-system'
import { useStrings } from 'framework/strings'
import { useQueryParams } from '@common/hooks'
import type { ExecutionNode } from 'services/pipeline-ng'
import { Connectors } from '@connectors/constants'
import { FeatureFlag } from '@common/featureFlags'
import { useFeatureFlag } from '@common/hooks/useFeatureFlag'
import { useLogContentHook } from '@cv/hooks/useLogContentHook/useLogContentHook'
import { LogTypes } from '@cv/hooks/useLogContentHook/useLogContentHook.types'
import { DeploymentMetrics } from './components/DeploymentMetrics/DeploymentMetrics'
import { ExecutionVerificationSummary } from './components/ExecutionVerificationSummary/ExecutionVerificationSummary'
import type { DeploymentNodeAnalysisResult } from './components/DeploymentProgressAndNodes/components/DeploymentNodes/DeploymentNodes.constants'
import LogAnalysisContainer from './components/LogAnalysisContainer/LogAnalysisView.container'
import { getActivityId, getDefaultTabId } from './ExecutionVerificationView.utils'
import { ManualInterventionVerifyStep } from './components/ManualInterventionVerifyStep/ManualInterventionVerifyStep'
import InterruptedHistory from './components/InterruptedHistory/InterruptedHistory'
import css from './ExecutionVerificationView.module.scss'
interface ExecutionVerificationViewProps {
step: ExecutionNode
}
export function ExecutionVerificationView(props: ExecutionVerificationViewProps): JSX.Element {
const { step } = props
const { getString } = useStrings()
const [selectedNode, setSelectedNode] = useState<DeploymentNodeAnalysisResult | undefined>()
const activityId = useMemo(() => getActivityId(step), [step])
const { type } = useQueryParams<{ type?: string }>()
const defaultTabId = useMemo(() => getDefaultTabId(getString, type), [type])
const isErrorTrackingEnabled = useFeatureFlag(FeatureFlag.ERROR_TRACKING_ENABLED)
const { openLogContentHook } = useLogContentHook({ verifyStepExecutionId: activityId })
const handleTabChange = useCallback(() => {
setSelectedNode(undefined)
}, [])
const content = activityId ? (
<>
<ManualInterventionVerifyStep step={step} />
<InterruptedHistory interruptedHistories={step?.interruptHistories} />
<Tabs id="AnalysisTypeTabs" defaultSelectedTabId={defaultTabId} onChange={handleTabChange}>
<Tab
id={getString('pipeline.verification.analysisTab.metrics')}
title={getString('pipeline.verification.analysisTab.metrics')}
panelClassName={css.mainTabPanel}
panel={
<Layout.Horizontal style={{ height: '100%' }}>
<ExecutionVerificationSummary
displayAnalysisCount={false}
step={step}
className={css.executionSummary}
onSelectNode={setSelectedNode}
isConsoleView
/>
<DeploymentMetrics step={step} selectedNode={selectedNode} activityId={activityId} />
</Layout.Horizontal>
}
/>
<Tab
id={getString('pipeline.verification.analysisTab.logs')}
title={getString('pipeline.verification.analysisTab.logs')}
panel={
<Layout.Horizontal style={{ height: '100%' }}>
<ExecutionVerificationSummary
displayAnalysisCount={false}
step={step}
className={css.executionSummary}
onSelectNode={setSelectedNode}
isConsoleView
/>
<LogAnalysisContainer step={step} hostName={selectedNode?.hostName} />
</Layout.Horizontal>
}
panelClassName={css.mainTabPanelLogs}
/>
{isErrorTrackingEnabled && (
<Tab
id={getString('errors')}
title={getString('errors')}
panel={
<LogAnalysisContainer
step={step}
hostName={Connectors.ERROR_TRACKING}
isErrorTracking={isErrorTrackingEnabled}
/>
}
/>
)}
<FlexExpander />
<Layout.Horizontal>
<Button
icon="api-docs"
withoutCurrentColor
iconProps={{ color: Color.BLACK, size: 20 }}
text={getString('cv.externalAPICalls')}
variation={ButtonVariation.LINK}
onClick={() => openLogContentHook(LogTypes.ApiCallLog)}
/>
<Button
icon="audit-trail"
withoutCurrentColor
iconProps={{ size: 20 }}
text={getString('cv.executionLogs')}
variation={ButtonVariation.LINK}
onClick={() => openLogContentHook(LogTypes.ExecutionLog)}
/>
</Layout.Horizontal>
</Tabs>
</>
) : (
<Container className={css.noAnalysis}>
<NoDataCard message={getString('pipeline.verification.logs.noAnalysis')} icon="warning-sign" />
</Container>
)
return <Container className={css.main}>{content}</Container>
}
|