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

Loki: Label browser UI updates (#31737)

Browse Source 
* UI updates for Label Browser

* Revert "UI updates for Label Browser"

This reverts commit 3d34112762.

* UI updates for Label Browser

* Remove unused style
This commit is contained in:
Ivana Huckova 2021-03-18 16:28:02 +01:00 committed by GitHub
parent 0b788b5ce8
commit dfd4eccc7c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/plugins/datasource/loki/components/LokiLabel.tsx
View File

@ -68,7 +68,7 @@ const getLabelStyles = (theme: GrafanaTheme) => ({
cursor: pointer; cursor: pointer;
font-size: ${theme.typography.size.sm}; font-size: ${theme.typography.size.sm};
line-height: ${theme.typography.lineHeight.xs}; line-height: ${theme.typography.lineHeight.xs};
border: 1px solid ${theme.colors.border2}; background-color: ${theme.colors.bg3};
vertical-align: baseline; vertical-align: baseline;
color: ${theme.colors.text}; color: ${theme.colors.text};
white-space: nowrap; white-space: nowrap;
@ -77,8 +77,6 @@ const getLabelStyles = (theme: GrafanaTheme) => ({
border-radius: ${theme.border.radius.md}; border-radius: ${theme.border.radius.md};
margin-right: ${theme.spacing.sm}; margin-right: ${theme.spacing.sm};
margin-bottom: ${theme.spacing.xs}; margin-bottom: ${theme.spacing.xs};
text-overflow: ellipsis;
overflow: hidden;
`, `,
loading: css` loading: css`
font-weight: ${theme.typography.weight.semibold}; font-weight: ${theme.typography.weight.semibold};

17
public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx
View File

@ -92,6 +92,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
wrapper: css` wrapper: css`
background-color: ${theme.colors.bg2}; background-color: ${theme.colors.bg2};
padding: ${theme.spacing.md}; padding: ${theme.spacing.md};
width: 100%;
`, `,
list: css` list: css`
margin-top: ${theme.spacing.sm}; margin-top: ${theme.spacing.sm};
@ -130,18 +131,13 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
error: css` error: css`
color: ${theme.palette.brandDanger}; color: ${theme.palette.brandDanger};
`, `,
valueCell: css`
overflow: hidden;
text-overflow: ellipsis;
`,
valueList: css` valueList: css`
margin-right: ${theme.spacing.sm}; margin-right: ${theme.spacing.sm};
`, `,
valueListWrapper: css` valueListWrapper: css`
padding: ${theme.spacing.sm}; border-left: 1px solid ${theme.colors.border2};
& + & { margin: ${theme.spacing.sm} 0;
border-left: 1px solid ${theme.colors.border2}; padding: ${theme.spacing.sm} 0 ${theme.spacing.sm} ${theme.spacing.sm};
}
`, `,
valueListArea: css` valueListArea: css`
display: flex; display: flex;
@ -418,7 +414,8 @@ export class UnthemedLokiLabelBrowser extends React.Component<BrowserProps, Brow
loading={label.loading} loading={label.loading}
active={label.selected} active={label.selected}
hidden={label.hidden} hidden={label.hidden}
facets={label.facets} //If no facets, we want to show number of all label values
facets={label.facets || label.values?.length}
onClick={this.onClickLabel} onClick={this.onClickLabel}
/> />
</div> </div>
@ -436,7 +433,7 @@ export class UnthemedLokiLabelBrowser extends React.Component<BrowserProps, Brow
return null; return null;
} }
return ( return (
<div style={style} className={styles.valueCell}> <div style={style}>
<LokiLabel <LokiLabel
name={label.name} name={label.name}
value={value?.name} value={value?.name}