IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Prometheus/Loki: Improve metric search highlight contrast (#49384)

Browse Source 
* Prometheus/Loki: Improve metric search highlight contrast

* Update other places, and add reusable variables
This commit is contained in:
Torkel Ödegaard 2022-05-23 15:53:45 +02:00 committed by GitHub
parent 4ea0b39db1
commit c29e6fcb3a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/grafana-data/src/themes/createComponents.ts
View File

@ -36,6 +36,10 @@ export interface ThemeComponents {
background: string; background: string;
padding: number; padding: number;
}; };
textHighlight: {
background: string;
text: string;
};
sidemenu: { sidemenu: {
width: number; width: number;
}; };
@ -91,6 +95,10 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
menuTabs: { menuTabs: {
height: 41, height: 41,
}, },
textHighlight: {
text: colors.warning.contrastText,
background: colors.warning.main,
},
horizontalDrawer: { horizontalDrawer: {
defaultHeight: 400, defaultHeight: 400,
}, },

4
packages/grafana-ui/src/components/BrowserLabel/Label.tsx
View File

@ -139,8 +139,8 @@ const getLabelStyles = (theme: GrafanaTheme2) => ({
`, `,
matchHighLight: css` matchHighLight: css`
background: inherit; background: inherit;
color: ${theme.colors.primary.text}; color: ${theme.components.textHighlight.text};
background-color: ${theme.colors.primary.transparent}; background-color: ${theme.components.textHighlight.background};
`, `,
hidden: css` hidden: css`
opacity: 0.6; opacity: 0.6;

4
packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
View File

@ -120,8 +120,6 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
const style = getLogRowStyles(theme, row.logLevel); const style = getLogRowStyles(theme, row.logLevel);
const { hasAnsi, raw } = row; const { hasAnsi, raw } = row;
const restructuredEntry = restructureLog(raw, prettifyLogMessage); const restructuredEntry = restructureLog(raw, prettifyLogMessage);
const highlightClassName = cx([style.logsRowMatchHighLight]);
const styles = getStyles(theme); const styles = getStyles(theme);
return ( return (
@ -145,7 +143,7 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
/> />
)} )}
<span className={cx(styles.positionRelative, { [styles.rowWithContext]: contextIsOpen })}> <span className={cx(styles.positionRelative, { [styles.rowWithContext]: contextIsOpen })}>
{renderLogMessage(hasAnsi, restructuredEntry, row.searchWords, highlightClassName)} {renderLogMessage(hasAnsi, restructuredEntry, row.searchWords, style.logsRowMatchHighLight)}
</span> </span>
{showContextToggle?.(row) && ( {showContextToggle?.(row) && (
<span <span

9
packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
View File

@ -37,13 +37,8 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme2, logLevel?: L
label: logs-row__match-highlight; label: logs-row__match-highlight;
background: inherit; background: inherit;
padding: inherit; padding: inherit;
color: ${theme.colors.warning.main}; color: ${theme.components.textHighlight.text}
background-color: rgba(${theme.colors.warning.main}, 0.1); background-color: ${theme.components.textHighlight};
`,
logsRowMatchHighLightPreview: css`
label: logs-row__match-highlight--preview;
background-color: rgba(${theme.colors.warning.main}, 0.2);
border-bottom-style: dotted;
`, `,
logsRowsTable: css` logsRowsTable: css`
label: logs-rows; label: logs-rows;

6
packages/grafana-ui/src/themes/GlobalStyles/elements.ts
View File

@ -155,6 +155,12 @@ export function getElementStyles(theme: GrafanaTheme2) {
.text-center { .text-center {
text-align: center; text-align: center;
} }
.highlight-search-match {
background: ${theme.components.textHighlight.background};
color: ${theme.components.textHighlight.text};
padding: 0;
}
`; `;
} }

4
public/app/plugins/datasource/prometheus/querybuilder/components/MetricSelect.tsx
View File

@ -95,7 +95,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
label: select__match-highlight; label: select__match-highlight;
background: inherit; background: inherit;
padding: inherit; padding: inherit;
color: ${theme.colors.warning.main}; color: ${theme.colors.warning.contrastText};
background-color: rgba(${theme.colors.warning.main}, 0.1); background-color: ${theme.colors.warning.main};
`, `,
}); });

6
public/sass/base/_type.scss
View File

@ -260,12 +260,6 @@ a.external-link {
white-space: nowrap; white-space: nowrap;
} }
.highlight-search-match {
background: transparent;
color: $yellow;
padding: 0;
}
th { th {
font-weight: $font-weight-semi-bold; font-weight: $font-weight-semi-bold;
} }