Skip to content

Commit e0b5607

Browse files
Elessar1802Elessar1802
committed
fix: review comments
1 parent da2639b commit e0b5607

File tree

3 files changed

+42
-36
lines changed

3 files changed

+42
-36
lines changed

‎src/components/app/details/main.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -432,12 +432,9 @@ export default function AppDetailsPage() {
432432
<CIDetails key={appId} filteredEnvIds={_filteredEnvIds} />
433433
</AIAgentContextSetterWrapper>
434434
</Route>
435-
<Route
436-
path={`${path}/${URLS.APP_DEPLOYMENT_METRICS}/:envId(\\d+)?`}
437-
render={() => {
438-
return <DeploymentMetrics filteredEnvIds={_filteredEnvIds} />
439-
}}
440-
/>
435+
<Route path={`${path}/${URLS.APP_DEPLOYMENT_METRICS}/:envId(\\d+)?`}>
436+
<DeploymentMetrics filteredEnvIds={_filteredEnvIds} />
437+
</Route>
441438
<Route
442439
path={`${path}/${URLS.APP_CD_DETAILS}/:envId(\\d+)?/:pipelineId(\\d+)?/:triggerId(\\d+)?`}
443440
>

‎src/components/app/details/metrics/DeploymentMetrics.tsx‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
import { useEffect, useMemo, useState } from 'react'
1818
import ReactGA from 'react-ga4'
1919
import { generatePath, useHistory, useParams, useRouteMatch } from 'react-router-dom'
20-
import Tippy from '@tippyjs/react'
2120
import moment from 'moment'
2221

2322
import {
@@ -30,6 +29,7 @@ import {
3029
Progressing,
3130
SelectPicker,
3231
showError,
32+
Tooltip,
3333
URLS,
3434
} from '@devtron-labs/devtron-fe-common-lib'
3535

@@ -77,11 +77,11 @@ const FrequencyGraphLegend = ({
7777
<div className="w-50 dc__inline-block">
7878
<p className="graph-legend__primary-label">
7979
Deployment Frequency
80-
<Tippy className="default-tt" arrow={false} content="How often this app is deployed to production?">
80+
<Tooltip content="How often this app is deployed to production?" alwaysShowTippyOnHover>
8181
<span>
8282
<ICHelpOutline className="icon-dim-20 ml-8 dc__vertical-align-middle mr-5" />
8383
</span>
84-
</Tippy>
84+
</Tooltip>
8585
<span className="cursor" onClick={setFrequencyMetric}>
8686
{renderCategoryTag(frequencyBenchmark.name)}{' '}
8787
</span>
@@ -108,11 +108,11 @@ const FrequencyGraphLegend = ({
108108
<>
109109
<p className="graph-legend__primary-label">
110110
Change Failure Rate
111-
<Tippy className="default-tt" arrow={false} content="How often does the pipeline fail?">
111+
<Tooltip alwaysShowTippyOnHover content="How often does the pipeline fail?">
112112
<span>
113113
<ICHelpOutline className="icon-dim-20 ml-8 dc__vertical-align-middle mr-5" />
114114
</span>
115-
</Tippy>
115+
</Tooltip>
116116
<span className="cursor" onClick={setFailureMetric}>
117117
{renderCategoryTag(failureRateBenchmark?.name)}{' '}
118118
</span>
@@ -149,11 +149,11 @@ const RecoveryAndLeadTimeGraphLegend = ({
149149
<div className="graph-legend">
150150
<p className="graph-legend__primary-label">
151151
{label}
152-
<Tippy className="default-tt" arrow={false} content={tooltipText}>
152+
<Tooltip alwaysShowTippyOnHover content={tooltipText}>
153153
<span>
154154
<ICHelpOutline className="icon-dim-20 ml-8 dc__vertical-align-middle mr-5" />
155155
</span>
156-
</Tippy>
156+
</Tooltip>
157157
</p>
158158
<p className="graph-legend__primary-value">
159159
<ReferenceLineLegend />
@@ -167,11 +167,11 @@ const RecoveryAndLeadTimeGraphLegend = ({
167167
<div className="graph-legend">
168168
<p className="graph-legend__primary-label">
169169
{label}
170-
<Tippy className="default-tt" arrow={false} content={tooltipText}>
170+
<Tooltip alwaysShowTippyOnHover content={tooltipText}>
171171
<span>
172172
<ICHelpOutline className="icon-dim-20 ml-8 dc__vertical-align-middle mr-5" />
173173
</span>
174-
</Tippy>
174+
</Tooltip>
175175
<span className="cursor" onClick={setMetric}>
176176
{renderCategoryTag(benchmark?.name)}{' '}
177177
</span>
@@ -489,13 +489,13 @@ const DeploymentMetricsComponent = ({ filteredEnvIds }: DeploymentMetricsProps)
489489
)
490490

491491
const onDeploymentFrequencyChartClick = (_: string, index: number): void => {
492-
const d = freqData[index]
493-
if (!d) return
492+
const deploymentFrequencyData = freqData[index]
493+
if (!deploymentFrequencyData) return
494494
setState((prev) => ({
495495
...prev,
496496
filterBy: {
497-
startDate: moment(d.startTime),
498-
endDate: moment(d.endTime),
497+
startDate: moment(deploymentFrequencyData.startTime),
498+
endDate: moment(deploymentFrequencyData.endTime),
499499
},
500500
}))
501501
}
@@ -515,13 +515,13 @@ const DeploymentMetricsComponent = ({ filteredEnvIds }: DeploymentMetricsProps)
515515
)
516516

517517
const onRecoveryAndLeadTimeChartClick = (_: string, index: number): void => {
518-
const d = leadTimeData[index]
519-
if (!d) return
518+
const leadTimeEntry = leadTimeData[index]
519+
if (!leadTimeEntry) return
520520
setState((prev) => ({
521521
...prev,
522522
filterBy: {
523-
startDate: moment(d.startTime),
524-
endDate: moment(d.endTime),
523+
startDate: moment(leadTimeEntry.startTime),
524+
endDate: moment(leadTimeEntry.endTime),
525525
},
526526
}))
527527
}
@@ -541,14 +541,16 @@ const DeploymentMetricsComponent = ({ filteredEnvIds }: DeploymentMetricsProps)
541541
)
542542

543543
const onMeanTimeToRecoveryChartClick = (_: string, index: number): void => {
544-
const d = recoveryTimeData[index]
545-
if (!d) return
544+
const recoveryTimeMetric = recoveryTimeData[index]
545+
if (!recoveryTimeMetric) return
546546
// NOTE: startDate, and endDate [releaseTime-2, releaseTime+2]
547547
setState((prev) => ({
548548
...prev,
549549
filterBy: {
550-
startDate: d.releaseTime ? moment(d.releaseTime) : undefined,
551-
endDate: d.releaseTime ? moment(d.releaseTime).add(2, 'seconds') : undefined,
550+
startDate: recoveryTimeMetric.releaseTime ? moment(recoveryTimeMetric.releaseTime) : undefined,
551+
endDate: recoveryTimeMetric.releaseTime
552+
? moment(recoveryTimeMetric.releaseTime).add(2, 'seconds')
553+
: undefined,
552554
},
553555
}))
554556
}
@@ -606,7 +608,7 @@ const DeploymentMetricsComponent = ({ filteredEnvIds }: DeploymentMetricsProps)
606608
...prev,
607609
benchmarkModalData: {
608610
metric: 'LEAD_TIME',
609-
valueLabel: `${state.meanLeadTimeLabel}`,
611+
valueLabel: state.meanLeadTimeLabel,
610612
catgory: state.leadTimeBenchmark.name,
611613
value: state.meanLeadTime,
612614
},
@@ -623,7 +625,7 @@ const DeploymentMetricsComponent = ({ filteredEnvIds }: DeploymentMetricsProps)
623625
...prev,
624626
benchmarkModalData: {
625627
metric: 'RECOVERY_TIME',
626-
valueLabel: `${state.meanRecoveryTimeLabel}`,
628+
valueLabel: state.meanRecoveryTimeLabel,
627629
catgory: state.recoveryTimeBenchmark.name,
628630
value: state.meanRecoveryTime,
629631
},
@@ -780,9 +782,9 @@ const DeploymentMetricsComponent = ({ filteredEnvIds }: DeploymentMetricsProps)
780782
Deployments
781783
</p>
782784
<div className="flex right">
783-
<label className="dc__tertiary-tab__radio" htmlFor="status-all">
785+
<label className="dc__tertiary-tab__radio" htmlFor="deployment-metric__status-all">
784786
<input
785-
id="status-all"
787+
id="deployment-metric__status-all"
786788
type="radio"
787789
name="status"
788790
checked={state.statusFilter === -1}
@@ -794,10 +796,10 @@ const DeploymentMetricsComponent = ({ filteredEnvIds }: DeploymentMetricsProps)
794796
<label
795797
className="dc__tertiary-tab__radio"
796798
data-testid="success-deployment-status"
797-
htmlFor="status-success"
799+
htmlFor="deployment-metric__status-success"
798800
>
799801
<input
800-
id="status-success"
802+
id="deployment-metric__status-success"
801803
type="radio"
802804
name="status"
803805
checked={state.statusFilter === 0}
@@ -812,10 +814,10 @@ const DeploymentMetricsComponent = ({ filteredEnvIds }: DeploymentMetricsProps)
812814
<label
813815
className="dc__tertiary-tab__radio"
814816
data-testid="failed-deployment-status"
815-
htmlFor="status-failed"
817+
htmlFor="deployment-metric__status-failed"
816818
>
817819
<input
818-
id="status-failed"
820+
id="deployment-metric__status-failed"
819821
type="radio"
820822
name="status"
821823
checked={state.statusFilter === 1}

‎src/components/app/details/metrics/deploymentMetrics.types.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,13 @@ export interface BenchmarkType {
5252
targetValue: number
5353
}
5454

55+
type RecoveryTimeGraphType = {
56+
recoveryTime: number
57+
xAxisLabel: string
58+
yAxisLabel: string
59+
releaseTime: Moment
60+
}
61+
5562
export interface DeploymentMetricsState {
5663
code: number
5764
view: string
@@ -65,7 +72,7 @@ export interface DeploymentMetricsState {
6572
maxLeadTime: number
6673
xAxisLabel: string
6774
}[]
68-
recoveryTimeGraph: { recoveryTime: number; xAxisLabel: string; yAxisLabel: string; releaseTime: Moment }[]
75+
recoveryTimeGraph: RecoveryTimeGraphType[]
6976
rows: any[]
7077
avgFrequency: number
7178
maxFrequency: number

0 commit comments

Comments
 (0)