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

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

@ -139,8 +139,8 @@ const getLabelStyles = (theme: GrafanaTheme2) => ({
`,
matchHighLight: css`
background: inherit;
color: ${theme.colors.primary.text};
background-color: ${theme.colors.primary.transparent};
color: ${theme.components.textHighlight.text};
background-color: ${theme.components.textHighlight.background};
`,
hidden: css`
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 { hasAnsi, raw } = row;
const restructuredEntry = restructureLog(raw, prettifyLogMessage);
const highlightClassName = cx([style.logsRowMatchHighLight]);
const styles = getStyles(theme);
return (
@ -145,7 +143,7 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
/>
)}
<span className={cx(styles.positionRelative, { [styles.rowWithContext]: contextIsOpen })}>
{renderLogMessage(hasAnsi, restructuredEntry, row.searchWords, highlightClassName)}
{renderLogMessage(hasAnsi, restructuredEntry, row.searchWords, style.logsRowMatchHighLight)}
</span>
{showContextToggle?.(row) && (
<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;
background: inherit;
padding: inherit;
color: ${theme.colors.warning.main};
background-color: rgba(${theme.colors.warning.main}, 0.1);
`,
logsRowMatchHighLightPreview: css`
label: logs-row__match-highlight--preview;
background-color: rgba(${theme.colors.warning.main}, 0.2);
border-bottom-style: dotted;
color: ${theme.components.textHighlight.text}
background-color: ${theme.components.textHighlight};
`,
logsRowsTable: css`
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-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;
background: inherit;
padding: inherit;
color: ${theme.colors.warning.main};
background-color: rgba(${theme.colors.warning.main}, 0.1);
color: ${theme.colors.warning.contrastText};
background-color: ${theme.colors.warning.main};
`,
});

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

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