Skip to content

Commit d227a3a

Browse files
egor-zalenskiegor-zalenski
authored
Merge pull request #2230 from RedisInsight/fe/feature/RI-4667_Telemetry_improvements
#RI-4667 - Telemetry improvements
2 parents 1d39fde + 80a64e2 commit d227a3a

File tree

6 files changed

+66
-23
lines changed

6 files changed

+66
-23
lines changed

‎redisinsight/ui/src/components/live-time-recommendations/components/recommendation/Recommendation.tsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,12 +135,27 @@ const Recommendation = ({
135135
setIsLoading(false)
136136
}
137137

138+
const onRecommendationLinkClick = () => {
139+
sendEventTelemetry({
140+
event: TelemetryEvent.INSIGHTS_RECOMMENDATION_LINK_CLICKED,
141+
eventData: {
142+
databaseId: instanceId,
143+
name: recommendationsContent[name]?.telemetryEvent ?? name,
144+
provider
145+
}
146+
})
147+
setIsLoading(false)
148+
}
149+
138150
const recommendationContent = () => (
139151
<EuiText>
140152
{renderRecommendationContent(
141153
recommendationsContent[name]?.content,
142154
params,
143-
recommendationsContent[name]?.telemetryEvent ?? name,
155+
{
156+
onClickLink: onRecommendationLinkClick,
157+
telemetryName: recommendationsContent[name]?.telemetryEvent ?? name,
158+
},
144159
true
145160
)}
146161
{!!params?.keys?.length && (

‎redisinsight/ui/src/components/recommendation-voting/RecommendationVoting.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const RecommendationVoting = ({ vote, name, id = '', live = false, containerClas
3131
gutterSize={live ? 'none' : 'l'}
3232
data-testid="recommendation-voting"
3333
>
34-
<EuiText size="m">Is this useful?</EuiText>
34+
<EuiText size="m" className={cx({ [styles.highlightText]: live })}>Is this useful?</EuiText>
3535
<div className="voteContent">
3636
{Object.values(Vote).map((option) => (
3737
<VoteOption

‎redisinsight/ui/src/components/recommendation-voting/styles.module.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,6 @@
2929
}
3030
}
3131

32+
div.highlightText {
33+
color: var(--euiColorPrimary) !important;
34+
}

‎redisinsight/ui/src/telemetry/events.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,4 +237,5 @@ export enum TelemetryEvent {
237237
INSIGHTS_RECOMMENDATION_SHOW_HIDDEN = 'INSIGHTS_RECOMMENDATION_SHOW_HIDDEN',
238238
INSIGHTS_RECOMMENDATION_DATABASE_ANALYSIS_CLICKED = 'INSIGHTS_RECOMMENDATION_DATABASE_ANALYSIS_CLICKED',
239239
INSIGHTS_RECOMMENDATION_KEY_COPIED = 'INSIGHTS_RECOMMENDATION_KEY_COPIED',
240+
INSIGHTS_RECOMMENDATION_LINK_CLICKED = 'INSIGHTS_RECOMMENDATION_LINK_CLICKED',
240241
}

‎redisinsight/ui/src/utils/recommendation/utils.tsx‎

Lines changed: 29 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@ const recommendationsContent = _content as IRecommendationsStatic
2323
const utmSource = 'redisinsight'
2424
const utmMedium = 'recommendation'
2525

26+
interface ITelemetry {
27+
telemetryName: string
28+
onClickLink?: () => void
29+
}
30+
2631
const badgesContent = [
2732
{ id: 'code_changes', icon: <CodeIcon className={styles.badgeIcon} />, name: 'Code Changes' },
2833
{ id: 'configuration_changes', icon: <ConfigurationIcon className={styles.badgeIcon} />, name: 'Configuration Changes' },
@@ -87,7 +92,7 @@ const addUtmToLink = (href: string, telemetryName: string): string => {
8792
const renderContentElement = (
8893
{ type, value: jsonValue, parameter }: IRecommendationContent,
8994
params: any,
90-
telemetryName: string,
95+
telemetry: ITelemetry,
9196
insights: boolean,
9297
idx: number
9398
) => {
@@ -96,8 +101,8 @@ const renderContentElement = (
96101
case 'paragraph':
97102
return (
98103
<EuiTextColor
99-
data-testid={`paragraph-${telemetryName}-${idx}`}
100-
key={`${telemetryName}-${idx}`}
104+
data-testid={`paragraph-${telemetry.telemetryName}-${idx}`}
105+
key={`${telemetry.telemetryName}-${idx}`}
101106
component="div"
102107
className={cx(styles.text, { [styles.insights]: insights })}
103108
color="subdued"
@@ -108,9 +113,9 @@ const renderContentElement = (
108113
case 'code':
109114
return (
110115
<EuiTextColor
111-
data-testid={`code-${telemetryName}-${idx}`}
116+
data-testid={`code-${telemetry.telemetryName}-${idx}`}
112117
className={cx(styles.code, { [styles.insights]: insights })}
113-
key={`${telemetryName}-${idx}`}
118+
key={`${telemetry.telemetryName}-${idx}`}
114119
color="subdued"
115120
>
116121
<code className={cx(styles.span, styles.text)}>
@@ -121,8 +126,8 @@ const renderContentElement = (
121126
case 'span':
122127
return (
123128
<EuiTextColor
124-
data-testid={`span-${telemetryName}-${idx}`}
125-
key={`${telemetryName}-${idx}`}
129+
data-testid={`span-${telemetry.telemetryName}-${idx}`}
130+
key={`${telemetry.telemetryName}-${idx}`}
126131
color="subdued"
127132
className={cx(styles.span, styles.text, { [styles.insights]: !!insights })}
128133
>
@@ -132,23 +137,24 @@ const renderContentElement = (
132137
case 'link':
133138
return (
134139
<EuiLink
135-
key={`${telemetryName}-${idx}`}
140+
key={`${telemetry.telemetryName}-${idx}`}
136141
external={false}
137-
data-testid={`link-${telemetryName}-${idx}`}
142+
data-testid={`link-${telemetry.telemetryName}-${idx}`}
138143
target="_blank"
139-
href={addUtmToLink(value.href, telemetryName)}
144+
href={addUtmToLink(value.href, telemetry.telemetryName)}
145+
onClick={() => telemetry.onClickLink?.()}
140146
>
141147
{value.name}
142148
</EuiLink>
143149
)
144150
case 'code-link':
145151
return (
146152
<EuiLink
147-
key={`${telemetryName}-${idx}`}
153+
key={`${telemetry.telemetryName}-${idx}`}
148154
external={false}
149-
data-testid={`code-link-${telemetryName}-${idx}`}
155+
data-testid={`code-link-${telemetry.telemetryName}-${idx}`}
150156
target="_blank"
151-
href={addUtmToLink(value.href, telemetryName)}
157+
href={addUtmToLink(value.href, telemetry.telemetryName)}
152158
>
153159
<EuiTextColor
154160
className={cx(styles.code, { [styles.insights]: insights })}
@@ -163,21 +169,25 @@ const renderContentElement = (
163169
case 'spacer':
164170
return (
165171
<EuiSpacer
166-
data-testid={`spacer-${telemetryName}-${idx}`}
167-
key={`${telemetryName}-${idx}`}
172+
data-testid={`spacer-${telemetry.telemetryName}-${idx}`}
173+
key={`${telemetry.telemetryName}-${idx}`}
168174
size={value as SpacerSize}
169175
/>
170176
)
171177
case 'list':
172178
return (
173-
<ul className={styles.list} data-testid={`list-${telemetryName}-${idx}`} key={`${telemetryName}-${idx}`}>
179+
<ul
180+
className={styles.list}
181+
data-testid={`list-${telemetry.telemetryName}-${idx}`}
182+
key={`${telemetry.telemetryName}-${idx}`}
183+
>
174184
{isArray(jsonValue) && jsonValue.map((listElement: IRecommendationContent[], idx) => (
175185
<li
176186
className={cx(styles.listItem, { [styles.insights]: insights })}
177187
// eslint-disable-next-line react/no-array-index-key
178188
key={`list-item-${listElement[0]}-${idx}`}
179189
>
180-
{renderRecommendationContent(listElement, params, telemetryName, insights)}
190+
{renderRecommendationContent(listElement, params, telemetry, insights)}
181191
</li>
182192
))}
183193
</ul>
@@ -190,10 +200,10 @@ const renderContentElement = (
190200
const renderRecommendationContent = (
191201
elements: IRecommendationContent[] = [],
192202
params: any,
193-
telemetryName: string,
203+
telemetry: ITelemetry,
194204
insights: boolean = false
195205
) => (
196-
elements?.map((item, idx) => renderContentElement(item, params, telemetryName, insights, idx)))
206+
elements?.map((item, idx) => renderContentElement(item, params, telemetry, insights, idx)))
197207

198208
const sortRecommendations = (recommendations: any[]) => sortBy(recommendations, [
199209
({ name }) => name !== 'searchJSON',

‎redisinsight/ui/src/utils/tests/recommendation/utils.spec.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { render, screen } from 'uiSrc/utils/test-utils'
1+
import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
22
import {
33
addUtmToLink,
44
sortRecommendations,
@@ -198,7 +198,7 @@ describe('replaceVariables', () => {
198198

199199
describe('renderRecommendationContent', () => {
200200
it('should render content', () => {
201-
const renderedContent = renderRecommendationContent(mockContent, undefined, mockTelemetryName)
201+
const renderedContent = renderRecommendationContent(mockContent, undefined, { telemetryName: mockTelemetryName })
202202
render(renderedContent)
203203

204204
expect(screen.queryByTestId(`paragraph-${mockTelemetryName}-0`)).toBeInTheDocument()
@@ -210,4 +210,18 @@ describe('renderRecommendationContent', () => {
210210
expect(screen.queryByTestId(`code-link-${mockTelemetryName}-7`)).toBeInTheDocument()
211211
expect(screen.getByText('unknown')).toBeInTheDocument()
212212
})
213+
214+
it('click on link should call onClick', () => {
215+
const onClickMock = jest.fn()
216+
const renderedContent = renderRecommendationContent(
217+
mockContent,
218+
null,
219+
{ telemetryName: mockTelemetryName, onClickLink: onClickMock },
220+
)
221+
const { queryByTestId } = render(renderedContent)
222+
223+
fireEvent.click(queryByTestId(`link-${mockTelemetryName}-6`))
224+
225+
expect(onClickMock).toBeCalled()
226+
})
213227
})

0 commit comments

Comments
 (0)