apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Loki: Replace hardcoded css values (#57770)

Browse Source 
* replace hardcoded margin/padding in getLogRowStyles.ts

* replace hardcoded margin/padding in LogDetails.tsx

* replace hardcoded values in LogDetailsRow.tsx

* replace hardcoded values in LogLabels.tsx

* replace hardcoded values in LogLabelStats.tsx

* replace hardcoded values in LogLabelStatsRow.tsx

* replace hardcoded values in LogRowContext.tsx

* replace hardcoded values in LogRowMessage.tsx

* replace hardcoded values

* remove forced theme spacing values
pull/58250/head
Gareth Dawson 3 years ago committed by GitHub
parent 4758bbcb61
commit 4749f45fe8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 32 additions and 31 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      public/app/features/logs/components/LogDetails.tsx
  2. 7
      public/app/features/logs/components/LogDetailsRow.tsx
  3. 2
      public/app/features/logs/components/LogLabelStats.tsx
  4. 10
      public/app/features/logs/components/LogLabelStatsRow.tsx
  5. 6
      public/app/features/logs/components/LogLabels.tsx
  6. 18
      public/app/features/logs/components/LogRowContext.tsx
  7. 6
      public/app/features/logs/components/LogRowMessage.tsx
  8. 12
      public/app/features/logs/components/getLogRowStyles.ts

2
public/app/features/logs/components/LogDetails.tsx
Unescape View File

@ -126,7 +126,7 @@ class UnThemedLogDetails extends PureComponent<Props> {
name="question-circle" name="question-circle"
size="xs" size="xs"
className={css` className={css`
margin-left: 4px; margin-left: ${theme.spacing(0.5)};
`} `}
/> />
</Tooltip> </Tooltip>

7
public/app/features/logs/components/LogDetailsRow.tsx
Unescape View File

@ -57,9 +57,9 @@ const getStyles = (theme: GrafanaTheme2) => {
position: absolute; position: absolute;
top: 0px; top: 0px;
justify-content: center; justify-content: center;
border-radius: 20px; border-radius: ${theme.shape.borderRadius(10)};
width: 26px; width: ${theme.spacing(3.25)};
height: 26px; height: ${theme.spacing(3.25)};
`, `,
wrapLine: css` wrapLine: css`
label: wrapLine; label: wrapLine;
@ -67,6 +67,7 @@ const getStyles = (theme: GrafanaTheme2) => {
`, `,
}; };
}; };
class UnThemedLogDetailsRow extends PureComponent<Props, State> { class UnThemedLogDetailsRow extends PureComponent<Props, State> {
state: State = { state: State = {
showFieldsStats: false, showFieldsStats: false,

2
public/app/features/logs/components/LogLabelStats.tsx
Unescape View File

@ -39,7 +39,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
`, `,
logsStatsBody: css` logsStatsBody: css`
label: logs-stats__body; label: logs-stats__body;
padding: 5px 0; padding: 5px 0px;
`, `,
}; };
}); });

10
public/app/features/logs/components/LogLabelStatsRow.tsx
Unescape View File

@ -28,23 +28,23 @@ const getStyles = (theme: GrafanaTheme2) => ({
logsStatsRowCount: css` logsStatsRowCount: css`
label: logs-stats-row__count; label: logs-stats-row__count;
text-align: right; text-align: right;
margin-left: 0.5em; margin-left: ${theme.spacing(0.75)};
`, `,
logsStatsRowPercent: css` logsStatsRowPercent: css`
label: logs-stats-row__percent; label: logs-stats-row__percent;
text-align: right; text-align: right;
margin-left: 0.5em; margin-left: ${theme.spacing(0.75)};
width: 3em; width: ${theme.spacing(4.5)};
`, `,
logsStatsRowBar: css` logsStatsRowBar: css`
label: logs-stats-row__bar; label: logs-stats-row__bar;
height: 4px; height: ${theme.spacing(0.5)};
overflow: hidden; overflow: hidden;
background: ${theme.colors.text.disabled}; background: ${theme.colors.text.disabled};
`, `,
logsStatsRowInnerBar: css` logsStatsRowInnerBar: css`
label: logs-stats-row__innerbar; label: logs-stats-row__innerbar;
height: 4px; height: ${theme.spacing(0.5)};
overflow: hidden; overflow: hidden;
background: ${theme.colors.primary.main}; background: ${theme.colors.primary.main};
`, `,

6
public/app/features/logs/components/LogLabels.tsx
Unescape View File

@ -53,10 +53,10 @@ const getStyles = (theme: GrafanaTheme2) => {
logsLabel: css` logsLabel: css`
label: logs-label; label: logs-label;
display: flex; display: flex;
padding: 0 2px; padding: ${theme.spacing(0, 0.25)};
background-color: ${theme.colors.background.secondary}; background-color: ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius(1)}; border-radius: ${theme.shape.borderRadius(1)};
margin: 1px 4px 0 0; margin: ${theme.spacing(0.125, 0.5, 0, 0)};
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -64,7 +64,7 @@ const getStyles = (theme: GrafanaTheme2) => {
logsLabelValue: css` logsLabelValue: css`
label: logs-label__value; label: logs-label__value;
display: inline-block; display: inline-block;
max-width: 20em; max-width: ${theme.spacing(25)};
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
`, `,

18
public/app/features/logs/components/LogRowContext.tsx
Unescape View File

@ -49,7 +49,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
top: 100%; top: 100%;
` `
: css` : css`
margin-top: 20px; margin-top: ${theme.spacing(2.5)};
`; `;
return { return {
width: css` width: css`
@ -61,22 +61,22 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
z-index: ${theme.zIndex.dropdown}; z-index: ${theme.zIndex.dropdown};
overflow: hidden; overflow: hidden;
background: ${theme.colors.background.primary}; background: ${theme.colors.background.primary};
box-shadow: 0 0 10px ${theme.v1.palette.black}; box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black};
border: 1px solid ${theme.colors.background.secondary}; border: 1px solid ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius(2)}; border-radius: ${theme.shape.borderRadius(2)};
font-family: ${theme.typography.fontFamily}; font-family: ${theme.typography.fontFamily};
`, `,
header: css` header: css`
height: ${headerHeight}px; height: ${headerHeight}px;
padding: 0 10px; padding: ${theme.spacing(0, 1.25)};
display: flex; display: flex;
align-items: center; align-items: center;
background: ${theme.colors.background.canvas}; background: ${theme.colors.background.canvas};
`, `,
top: css` top: css`
border-radius: 0 0 ${theme.shape.borderRadius(2)} ${theme.shape.borderRadius(2)}; border-radius: 0 0 ${theme.shape.borderRadius(2)} ${theme.shape.borderRadius(2)};
box-shadow: 0 0 10px ${theme.v1.palette.black}; box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black};
clip-path: inset(0px -10px -10px -10px); clip-path: inset(0px -${theme.spacing(1.25)} -${theme.spacing(1.25)} -${theme.spacing(1.25)});
`, `,
title: css` title: css`
position: absolute; position: absolute;
@ -87,8 +87,8 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
background: ${theme.colors.background.secondary}; background: ${theme.colors.background.secondary};
border: 1px solid ${theme.colors.background.secondary}; border: 1px solid ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius(2)} ${theme.shape.borderRadius(2)} 0 0; border-radius: ${theme.shape.borderRadius(2)} ${theme.shape.borderRadius(2)} 0 0;
box-shadow: 0 0 10px ${theme.v1.palette.black}; box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black};
clip-path: inset(-10px -10px 0px -10px); clip-path: inset(-${theme.spacing(1.25)} -${theme.spacing(1.25)} 0px -${theme.spacing(1.25)});
font-family: ${theme.typography.fontFamily}; font-family: ${theme.typography.fontFamily};
display: flex; display: flex;
@ -107,11 +107,11 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
display: flex; display: flex;
`, `,
headerButton: css` headerButton: css`
margin-left: 8px; margin-left: ${theme.spacing(1)};
`, `,
logs: css` logs: css`
height: ${logsHeight}px; height: ${logsHeight}px;
padding: 10px; padding: ${theme.spacing(1.25)};
font-family: ${theme.typography.fontFamilyMonospace}; font-family: ${theme.typography.fontFamilyMonospace};
.scrollbar-view { .scrollbar-view {

6
public/app/features/logs/components/LogRowMessage.tsx
Unescape View File

@ -64,18 +64,18 @@ const getStyles = (theme: GrafanaTheme2, showContextButton: boolean, isInDashboa
position: absolute; position: absolute;
top: 0; top: 0;
bottom: auto; bottom: auto;
height: 36px; height: ${theme.spacing(4.5)};
background: ${theme.colors.background.primary}; background: ${theme.colors.background.primary};
box-shadow: ${theme.shadows.z3}; box-shadow: ${theme.shadows.z3};
padding: ${theme.spacing(0, 0, 0, 0.5)}; padding: ${theme.spacing(0, 0, 0, 0.5)};
z-index: 100; z-index: 100;
visibility: hidden; visibility: hidden;
width: ${showContextButton ? '80px' : '40px'}; width: ${showContextButton ? theme.spacing(10) : theme.spacing(5)};
`, `,
logRowMenuCell: css` logRowMenuCell: css`
position: absolute; position: absolute;
right: ${isInDashboard ? '40px' : `calc(75px + ${theme.spacing()} + ${showContextButton ? '80px' : '40px'})`}; right: ${isInDashboard ? '40px' : `calc(75px + ${theme.spacing()} + ${showContextButton ? '80px' : '40px'})`};
margin-top: -1px; margin-top: -${theme.spacing(0.125)};
`, `,
}; };
}; };

12
public/app/features/logs/components/getLogRowStyles.ts
Unescape View File

@ -83,7 +83,7 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
`, `,
logsRowLevel: css` logsRowLevel: css`
label: logs-row__level; label: logs-row__level;
max-width: 10px; max-width: ${theme.spacing(1.25)};
cursor: default; cursor: default;
&::after { &::after {
content: ''; content: '';
@ -92,7 +92,7 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
top: 1px; top: 1px;
bottom: 1px; bottom: 1px;
width: 3px; width: 3px;
left: 4px; left: ${theme.spacing(0.5)};
background-color: ${logColor}; background-color: ${logColor};
} }
`, `,
@ -130,8 +130,8 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
label: logs-row-details-table; label: logs-row-details-table;
border: 1px solid ${theme.colors.border.medium}; border: 1px solid ${theme.colors.border.medium};
padding: 0 ${theme.spacing(1)} ${theme.spacing(1)}; padding: 0 ${theme.spacing(1)} ${theme.spacing(1)};
border-radius: 3px; border-radius: ${theme.shape.borderRadius(1.5)};
margin: 20px 8px 20px 16px; margin: ${theme.spacing(2.5)} ${theme.spacing(1)} ${theme.spacing(2.5)} ${theme.spacing(2)};
cursor: default; cursor: default;
`, `,
logDetailsTable: css` logDetailsTable: css`
@ -146,8 +146,8 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
label: logs-row-details__icon; label: logs-row-details__icon;
position: relative; position: relative;
color: ${theme.v1.palette.gray3}; color: ${theme.v1.palette.gray3};
padding-top: 6px; padding-top: ${theme.spacing(0.75)};
padding-left: 6px; padding-left: ${theme.spacing(0.75)};
`, `,
logDetailsLabel: css` logDetailsLabel: css`
label: logs-row-details__label; label: logs-row-details__label;

Write Preview
Loading…
Cancel
Save