Skip to content

Commit e43a114

Browse files
vlad-dargelvlad-dargel
authored
Merge pull request #1584 from RedisInsight/fe/feature/RI_3927_highlight-recommendations
#RI-3927 - add recommendations tab highlighting
2 parents b89f8a0 + ecaa5e1 commit e43a114

File tree

12 files changed

+133
-70
lines changed

12 files changed

+133
-70
lines changed

‎redisinsight/ui/src/components/analytics-tabs/constants.ts‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎redisinsight/ui/src/components/analytics-tabs/constants.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React, { ReactNode } from 'react'
2+
import { useSelector } from 'react-redux'
3+
4+
import { AnalyticsViewTab } from 'uiSrc/slices/interfaces/analytics'
5+
import { appFeatureHighlightingSelector } from 'uiSrc/slices/app/features-highlighting'
6+
import HighlightedFeature from 'uiSrc/components/hightlighted-feature/HighlightedFeature'
7+
import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
8+
import { getHighlightingFeatures } from 'uiSrc/utils/highlighting'
9+
10+
interface AnalyticsTabs {
11+
id: AnalyticsViewTab
12+
label: string | ReactNode
13+
}
14+
15+
const DatabaseAnalyticsTab = () => {
16+
const { features } = useSelector(appFeatureHighlightingSelector)
17+
const { recommendations: recommendationsHighlighting } = getHighlightingFeatures(features)
18+
19+
return (
20+
<>
21+
<HighlightedFeature
22+
title={BUILD_FEATURES.recommendations?.title}
23+
content={BUILD_FEATURES.recommendations?.content}
24+
type={BUILD_FEATURES.recommendations?.type}
25+
isHighlight={BUILD_FEATURES.recommendations && recommendationsHighlighting}
26+
dotClassName="tab-highlighting-dot"
27+
wrapperClassName="inner-highlighting-wrapper"
28+
>
29+
Database Analysis
30+
</HighlightedFeature>
31+
</>
32+
)
33+
}
34+
35+
export const analyticsViewTabs: AnalyticsTabs[] = [
36+
{
37+
id: AnalyticsViewTab.ClusterDetails,
38+
label: 'Overview',
39+
},
40+
{
41+
id: AnalyticsViewTab.DatabaseAnalysis,
42+
label: <DatabaseAnalyticsTab />,
43+
},
44+
{
45+
id: AnalyticsViewTab.SlowLog,
46+
label: 'Slow Log',
47+
},
48+
]

‎redisinsight/ui/src/components/database-overview/DatabaseOverviewWrapper.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { ThemeContext } from 'uiSrc/contexts/themeContext'
1010

1111
import { getOverviewMetrics } from './components/OverviewMetrics'
1212

13-
const TIMEOUT_TO_GET_INFO = process.env.NODE_ENV !== 'development' ? 5000 : 10000000
13+
const TIMEOUT_TO_GET_INFO = process.env.NODE_ENV !== 'development' ? 5000 : 60_000
1414

1515
interface IProps { windowDimensions: number }
1616

‎redisinsight/ui/src/components/hightlighted-feature/HighlightedFeature.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { isString } from 'lodash'
12
import { EuiToolTip } from '@elastic/eui'
23
import { ToolTipPositions } from '@elastic/eui/src/components/tool_tip/tool_tip'
34
import cx from 'classnames'
@@ -8,7 +9,7 @@ import styles from './styles.modules.scss'
89

910
export interface Props {
1011
isHighlight?: boolean
11-
children: React.ReactElement<any, any>
12+
children: React.ReactElement<any, any> | string
1213
title?: string | React.ReactElement
1314
content?: string | React.ReactElement
1415
type?: FeaturesHighlightingType
@@ -36,7 +37,7 @@ const HighlightedFeature = (props: Props) => {
3637
dataTestPostfix = ''
3738
} = props
3839

39-
const innerContent = hideFirstChild ? children.props.children : children
40+
const innerContent = hideFirstChild && !isString(children) ? children.props.children : children
4041

4142
const DotHighlighting = () => (
4243
<>

‎redisinsight/ui/src/components/navigation-menu/styles.module.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -207,8 +207,8 @@ $sideBarWidth: 60px;
207207
}
208208

209209
.highlightDot {
210-
top: 12px !important;
211-
right: 12px !important;
210+
top: 11px !important;
211+
right: 11px !important;
212212

213213
&.activePage {
214214
background-color: #465282 !important;

‎redisinsight/ui/src/constants/featuresHighlighting.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react'
2+
import { PageNames } from 'uiSrc/constants/pages'
23

34
export type FeaturesHighlightingType = 'plain' | 'tooltip' | 'popover'
45

@@ -9,9 +10,10 @@ interface BuildHighlightingFeature {
910
page?: string
1011
}
1112
export const BUILD_FEATURES: { [key: string]: BuildHighlightingFeature } = {
12-
importDatabases: {
13+
recommendations: {
1314
type: 'tooltip',
14-
title: 'Import Database Connections',
15-
content: 'Import your database connections from other Redis UIs'
15+
title: 'Database Recommendations',
16+
content: 'Run database analysis to get recommendations for optimizing your database.',
17+
page: PageNames.analytics
1618
}
1719
}

‎redisinsight/ui/src/pages/databaseAnalysis/components/data-nav-tabs/constants.tsx‎

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,43 @@
11
import React, { ReactNode } from 'react'
2+
import { useDispatch, useSelector } from 'react-redux'
3+
24
import { DatabaseAnalysisViewTab } from 'uiSrc/slices/interfaces/analytics'
3-
import AnalysisDataView from '../analysis-data-view'
5+
import {
6+
appFeatureHighlightingSelector,
7+
removeFeatureFromHighlighting
8+
} from 'uiSrc/slices/app/features-highlighting'
9+
import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
10+
import HighlightedFeature from 'uiSrc/components/hightlighted-feature/HighlightedFeature'
11+
12+
import { getHighlightingFeatures } from 'uiSrc/utils/highlighting'
413
import Recommendations from '../recommendations-view'
14+
import AnalysisDataView from '../analysis-data-view'
515

616
interface DatabaseAnalysisTabs {
717
id: DatabaseAnalysisViewTab,
8-
name: (count?: number) => string,
18+
name: (count?: number) => string | ReactNode,
919
content: ReactNode
1020
}
1121

22+
const RecommendationsTab = ({ count }: { count?: number }) => {
23+
const { features } = useSelector(appFeatureHighlightingSelector)
24+
const { recommendations: recommendationsHighlighting } = getHighlightingFeatures(features)
25+
26+
const dispatch = useDispatch()
27+
28+
return (
29+
<HighlightedFeature
30+
type="plain"
31+
isHighlight={BUILD_FEATURES.recommendations && recommendationsHighlighting}
32+
onClick={() => dispatch(removeFeatureFromHighlighting('recommendations'))}
33+
dotClassName="tab-highlighting-dot"
34+
wrapperClassName="inner-highlighting-wrapper"
35+
>
36+
{count ? <>Recommendations ({count})</> : <>Recommendations</>}
37+
</HighlightedFeature>
38+
)
39+
}
40+
1241
export const databaseAnalysisTabs: DatabaseAnalysisTabs[] = [
1342
{
1443
id: DatabaseAnalysisViewTab.DataSummary,
@@ -17,7 +46,7 @@ export const databaseAnalysisTabs: DatabaseAnalysisTabs[] = [
1746
},
1847
{
1948
id: DatabaseAnalysisViewTab.Recommendations,
20-
name: (count?: number) => (count ? `Recommendations (${count})` : 'Recommendations'),
49+
name: (count) => <RecommendationsTab count={count} />,
2150
content: <Recommendations />
2251
},
2352
]

‎redisinsight/ui/src/pages/home/components/HomeHeader/HomeHeader.tsx‎

Lines changed: 13 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,9 @@ import {
99
EuiToolTip,
1010
} from '@elastic/eui'
1111
import { isEmpty } from 'lodash'
12-
import { useDispatch, useSelector } from 'react-redux'
12+
import { useSelector } from 'react-redux'
1313
import cx from 'classnames'
1414
import { ImportDatabasesDialog } from 'uiSrc/components'
15-
import HighlightedFeature from 'uiSrc/components/hightlighted-feature/HighlightedFeature'
16-
import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
17-
import {
18-
appFeaturesToHighlightSelector,
19-
removeFeatureFromHighlighting
20-
} from 'uiSrc/slices/app/features-highlighting'
2115
import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
2216
import HelpLinksMenu from 'uiSrc/pages/home/components/HelpLinksMenu'
2317
import PromoLink from 'uiSrc/components/promo-link/PromoLink'
@@ -48,10 +42,6 @@ const HomeHeader = ({ onAddInstance, direction, welcomePage = false }: Props) =>
4842
const [guides, setGuides] = useState<IHelpGuide[]>([])
4943
const [isImportDialogOpen, setIsImportDialogOpen] = useState<boolean>(false)
5044

51-
const { importDatabases: importDatabasesHighlighting } = useSelector(appFeaturesToHighlightSelector) ?? {}
52-
53-
const dispatch = useDispatch()
54-
5545
useEffect(() => {
5646
if (loading || !data || isEmpty(data)) {
5747
return
@@ -126,30 +116,20 @@ const HomeHeader = ({ onAddInstance, direction, welcomePage = false }: Props) =>
126116
)
127117

128118
const ImportDatabasesBtn = () => (
129-
<HighlightedFeature
130-
title={BUILD_FEATURES.importDatabases?.title}
131-
content={BUILD_FEATURES.importDatabases?.content}
132-
type={BUILD_FEATURES.importDatabases?.type}
133-
isHighlight={BUILD_FEATURES.importDatabases && importDatabasesHighlighting}
134-
onClick={() => dispatch(removeFeatureFromHighlighting('importDatabases'))}
135-
transformOnHover
136-
hideFirstChild
119+
<EuiToolTip
120+
content="Import Database Connections"
137121
>
138-
<EuiToolTip
139-
content="Import Database Connections"
122+
<EuiButton
123+
fill
124+
color="secondary"
125+
onClick={handleClickImportDbBtn}
126+
className={styles.importDatabasesBtn}
127+
size="m"
128+
data-testid="import-dbs-btn"
140129
>
141-
<EuiButton
142-
fill
143-
color="secondary"
144-
onClick={handleClickImportDbBtn}
145-
className={styles.importDatabasesBtn}
146-
size="m"
147-
data-testid="import-dbs-btn"
148-
>
149-
<EuiIcon type="importAction" />
150-
</EuiButton>
151-
</EuiToolTip>
152-
</HighlightedFeature>
130+
<EuiIcon type="importAction" />
131+
</EuiButton>
132+
</EuiToolTip>
153133
)
154134

155135
const Guides = () => (

‎redisinsight/ui/src/slices/app/features-highlighting.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,6 @@ export const {
4444
} = appFeaturesHighlightingSlice.actions
4545

4646
export const appFeatureHighlightingSelector = (state: RootState) => state.app.featuresHighlighting
47-
export const appFeaturesToHighlightSelector = (state: RootState): { [key: string]: boolean } =>
48-
state.app.featuresHighlighting.features
49-
.reduce((prev, next) => ({ ...prev, [next]: true }), {})
5047
export const appFeaturePagesHighlightingSelector = (state: RootState) => state.app.featuresHighlighting.pages
5148

5249
export default appFeaturesHighlightingSlice.reducer

‎redisinsight/ui/src/styles/components/_tabs.scss‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
.tabs-active-borders {
5050
.euiTab {
5151
border-radius: 0;
52-
padding: 8px 12px !important;
52+
padding: 0 !important;
5353
border-bottom: 1px solid var(--separatorColor);
5454
color: var(--euiTextSubduedColor) !important;
5555

@@ -63,9 +63,25 @@
6363
font-size: 13px !important;
6464
line-height: 18px !important;
6565
font-weight: 500 !important;
66+
padding: 8px 12px;
6667
}
6768
}
6869

70+
.inner-highlighting-wrapper {
71+
margin: -8px -12px;
72+
padding: 8px 12px;
73+
74+
.tab-highlighting-dot {
75+
top: 2px;
76+
right: 2px;
77+
}
78+
}
79+
80+
.tab-highlighting-dot {
81+
top: -6px;
82+
right: -12px;
83+
}
84+
6985
.euiTab + .euiTab {
7086
margin-left: 0 !important;
7187

0 commit comments

Comments
 (0)