Skip to content

Commit 7bb95b3

Browse files
zhujezhuje
committed
OU-671 Patternfly Themeing for Perses Dashboards
1 parent aef7a67 commit 7bb95b3

File tree

2 files changed

+148
-27
lines changed

2 files changed

+148
-27
lines changed

‎README.md‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,4 +171,26 @@ $ npm run build
171171
$ ./scripts/api_backend_dev.sh
172172
173173
# Lastly navigate to http://localhost:8080/ to see Perses app running
174-
```
174+
```
175+
176+
##### Install COO && Perses Datasource && Perses Sample Dashboard
177+
1. Install COO through the OpenShift UI > OperatorHub > Cluster Observability Operator
178+
2. Install UIPlugin > monitoring
179+
3. oc apply -f <PERSES_DATASOURCE_YAML>
180+
- See sample yaml [here](https://github.com/observability-ui/development-tools/blob/main/monitoring-plugin/monitoring-console-plugin/perses/thanos-querier-datasource.yaml)
181+
4. oc apply -f <PERSES_DASHBOARD_YAML>
182+
- See sample yaml [here](https://github.com/observability-ui/development-tools/blob/main/monitoring-plugin/monitoring-console-plugin/perses/perses-dashboard.yaml)
183+
184+
##### Port forward Perses Datasource
185+
To use the PERSES_DATASOURCE you deployed above, you'll need to forward it to your local machine then proxy it using the local Perses Instance.
186+
187+
```
188+
# Forward cluster Prometheus Instance to localhost:9090
189+
oc port-forward -n openshift-monitoring service/prometheus-operated 9090:9090
190+
191+
# Test is port-forward returns Prometheus data from query 'up'
192+
curl "http://localhost:9090/api/v1/query?query=up"
193+
```
194+
195+
Adjust Perses local instance http://localhost:8080/ to use the a proxy to http://localhost:9090/ instead of http://demo.prometheus.io.
196+

‎web/src/components/dashboards/perses/PersesWrapper.tsx‎

Lines changed: 125 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,13 @@ import { usePatternFlyTheme } from '../../hooks/usePatternflyTheme';
3737
import { OcpDatasourceApi } from './datasource-api';
3838
import { PERSES_PROXY_BASE_PATH, useFetchPersesDashboard } from './perses-client';
3939
import { CachedDatasourceAPI } from './perses/datasource-api';
40-
41-
import { t_color_gray_95, t_color_white } from '@patternfly/react-tokens';
42-
40+
import {
41+
chart_color_blue_100,
42+
chart_color_blue_200,
43+
chart_color_blue_300,
44+
t_color_gray_95,
45+
t_color_white,
46+
} from '@patternfly/react-tokens';
4347
import { QueryParams } from '../../query-params';
4448
import { StringParam, useQueryParam } from 'use-query-params';
4549
import { useTranslation } from 'react-i18next';
@@ -82,41 +86,137 @@ interface PersesWrapperProps {
8286
}
8387

8488
const mapPatterflyThemeToMUI = (theme: 'light' | 'dark'): ThemeOptions => {
89+
const isDark = theme === 'dark';
90+
const primaryTextColor = isDark ? t_color_white.value : t_color_gray_95.value;
91+
const primaryBackgroundColor = 'var(--pf-t--global--background--color--primary--default)';
92+
8593
return {
8694
typography: {
87-
fontFamily: 'var(--pf-t--global--font--family--body)',
8895
...typography,
96+
fontFamily: 'var(--pf-t--global--font--family--body)',
97+
subtitle1: {
98+
// Card Heading
99+
fontFamily: 'var(--pf-t--global--font--family--heading)',
100+
fontWeight: 'var(--pf-t--global--font--weight--heading--default)',
101+
lineHeight: 'var(--pf-v6-c-card__title-text--LineHeight)',
102+
fontSize: 'var(--pf-t--global--font--size--heading--sm)',
103+
},
104+
h2: {
105+
// Panel Group Heading
106+
color: 'var(--pf-t--global--text--color--brand--default)',
107+
fontWeight: 'var(--pf-t--global--font--weight--body--default)',
108+
fontSize: 'var(--pf-t--global--font--size--600)',
109+
},
110+
},
111+
palette: {
112+
primary: {
113+
light: chart_color_blue_100.value,
114+
main: chart_color_blue_200.value,
115+
dark: chart_color_blue_300.value,
116+
contrastText: primaryTextColor,
117+
},
118+
secondary: {
119+
main: primaryTextColor,
120+
light: primaryTextColor,
121+
dark: primaryTextColor,
122+
},
123+
background: {
124+
default: primaryBackgroundColor,
125+
paper: primaryBackgroundColor,
126+
navigation: primaryBackgroundColor,
127+
code: primaryBackgroundColor,
128+
tooltip: primaryBackgroundColor,
129+
lighter: primaryBackgroundColor,
130+
border: primaryBackgroundColor,
131+
},
132+
text: {
133+
primary: primaryTextColor,
134+
secondary: primaryTextColor,
135+
disabled: primaryTextColor,
136+
navigation: primaryTextColor,
137+
accent: primaryTextColor,
138+
link: primaryTextColor,
139+
linkHover: primaryTextColor,
140+
},
89141
},
90142
components: {
91-
MuiIconButton: {
143+
MuiTypography: {
144+
styleOverrides: {
145+
root: {
146+
// Custom Time Range Selector
147+
'&.MuiClock-meridiemText': {
148+
color: primaryTextColor,
149+
},
150+
},
151+
},
152+
},
153+
MuiSvgIcon: {
92154
styleOverrides: {
93155
root: {
94156
color: theme === 'dark' ? t_color_white.value : t_color_gray_95.value,
95157
},
96158
},
97159
},
98-
},
99-
palette: {
100-
primary: {
101-
main: theme === 'dark' ? t_color_white.value : t_color_gray_95.value,
160+
MuiCard: {
161+
styleOverrides: {
162+
root: {
163+
borderRadius: 'var(--pf-t--global--border--radius--medium)',
164+
borderColor: 'var(--pf-t--global--border--color--default)',
165+
},
166+
},
102167
},
103-
background: {
104-
navigation: 'var(--pf-t--global--background--color--primary--default)',
105-
default: 'var(--pf-t--global--background--color--primary--default)',
106-
paper: 'var(--pf-t--global--background--color--primary--default)',
107-
code: 'var(--pf-t--global--background--color--primary--default)',
108-
tooltip: 'var(--pf-t--global--background--color--primary--default)',
109-
lighter: 'var(--pf-t--global--background--color--primary--default)',
110-
border: 'var(--pf-t--global--background--color--primary--default)',
168+
MuiCardHeader: {
169+
styleOverrides: {
170+
root: {
171+
'&.MuiCardHeader-root': {
172+
borderBottom: 'none',
173+
paddingBlockEnd: 'var(--pf-t--global--spacer--md)',
174+
paddingBlockStart: 'var(--pf-t--global--spacer--lg)',
175+
paddingLeft: 'var(--pf-t--global--spacer--lg)',
176+
paddingRight: 'var(--pf-t--global--spacer--lg)',
177+
},
178+
},
179+
},
111180
},
112-
text: {
113-
navigation: theme === 'dark' ? t_color_white.value : t_color_gray_95.value,
114-
accent: theme === 'dark' ? t_color_white.value : t_color_gray_95.value,
115-
primary: theme === 'dark' ? t_color_white.value : t_color_gray_95.value,
116-
secondary: theme === 'dark' ? t_color_white.value : t_color_gray_95.value,
117-
disabled: theme === 'dark' ? t_color_white.value : t_color_gray_95.value,
118-
link: theme === 'dark' ? t_color_white.value : t_color_gray_95.value,
119-
linkHover: theme === 'dark' ? t_color_white.value : t_color_gray_95.value,
181+
MuiCardContent: {
182+
styleOverrides: {
183+
root: {
184+
'&.MuiCardContent-root': {
185+
borderTop: 'none',
186+
'&:last-child': {
187+
paddingBottom: 'var(--pf-t--global--spacer--lg)',
188+
paddingLeft: 'var(--pf-t--global--spacer--lg)',
189+
paddingRight: 'var(--pf-t--global--spacer--lg)',
190+
},
191+
},
192+
},
193+
},
194+
},
195+
MuiOutlinedInput: {
196+
styleOverrides: {
197+
notchedOutline: {
198+
borderColor: 'var(--pf-t--global--border--color--default)',
199+
},
200+
root: {
201+
'&:hover .MuiOutlinedInput-notchedOutline': {
202+
borderColor: 'var(--pf-t--global--border--color--default)',
203+
},
204+
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
205+
borderColor: 'var(--pf-t--global--border--color--default)',
206+
},
207+
},
208+
input: {
209+
// Dashboard Variables >> Text Variable
210+
padding: '8.5px 14px',
211+
},
212+
},
213+
},
214+
MuiSelect: {
215+
styleOverrides: {
216+
icon: {
217+
color: primaryTextColor,
218+
},
219+
},
120220
},
121221
},
122222
};
@@ -125,7 +225,6 @@ const mapPatterflyThemeToMUI = (theme: 'light' | 'dark'): ThemeOptions => {
125225
export function PersesWrapper({ children, project }: PersesWrapperProps) {
126226
const { theme } = usePatternFlyTheme();
127227
const [dashboardName] = useQueryParam(QueryParams.Dashboard, StringParam);
128-
129228
const muiTheme = getTheme(theme, {
130229
shape: {
131230
borderRadius: 6,

0 commit comments

Comments
 (0)