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

Logs panel: Fix spacing when log details disabled (#87431)

Browse Source 
* Logs panel: Fix spacing when log details disabled

* Fix error spacing
This commit is contained in:
Ivana Huckova 2024-05-07 14:27:44 +02:00 committed by GitHub
parent a597300027
commit 12a87c0899
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/app/features/logs/components/LogRow.tsx
View File

@ -253,18 +253,23 @@ class UnThemedLogRow extends PureComponent<Props, State> {
{processedRow.duplicates && processedRow.duplicates > 0 ? `${processedRow.duplicates + 1}x` : null} {processedRow.duplicates && processedRow.duplicates > 0 ? `${processedRow.duplicates + 1}x` : null}
</td> </td>
)} )}
<td className={hasError ? '' : `${levelStyles.logsRowLevelColor} ${styles.logsRowLevel}`}> <td
className={hasError ? styles.logsRowWithError : `${levelStyles.logsRowLevelColor} ${styles.logsRowLevel}`}
>
{hasError && ( {hasError && (
<Tooltip content={`Error: ${errorMessage}`} placement="right" theme="error"> <Tooltip content={`Error: ${errorMessage}`} placement="right" theme="error">
<Icon className={styles.logIconError} name="exclamation-triangle" size="xs" /> <Icon className={styles.logIconError} name="exclamation-triangle" size="xs" />
</Tooltip> </Tooltip>
)} )}
</td> </td>
{enableLogDetails && ( <td
<td title={showDetails ? 'Hide log details' : 'See log details'} className={styles.logsRowToggleDetails}> title={enableLogDetails ? (showDetails ? 'Hide log details' : 'See log details') : ''}
className={enableLogDetails ? styles.logsRowToggleDetails : ''}
>
{enableLogDetails && (
<Icon className={styles.topVerticalAlign} name={showDetails ? 'angle-down' : 'angle-right'} /> <Icon className={styles.topVerticalAlign} name={showDetails ? 'angle-down' : 'angle-right'} />
</td> )}
)} </td>
{showTime && <td className={styles.logsRowLocalTime}>{this.renderTimeStamp(row.timeEpochMs)}</td>} {showTime && <td className={styles.logsRowLocalTime}>{this.renderTimeStamp(row.timeEpochMs)}</td>}
{showLabels && processedRow.uniqueLabels && ( {showLabels && processedRow.uniqueLabels && (
<td className={styles.logsRowLabels}> <td className={styles.logsRowLabels}>

4
public/app/features/logs/components/getLogRowStyles.ts
View File

@ -58,6 +58,10 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
left: ${theme.spacing(0.5)}; left: ${theme.spacing(0.5)};
} }
`, `,
// Compared to logsRowLevel we need to make error logs wider to accommodate the icon
logsRowWithError: css({
maxWidth: `${theme.spacing(1.5)}`,
}),
logsRowMatchHighLight: css` logsRowMatchHighLight: css`
label: logs-row__match-highlight; label: logs-row__match-highlight;
background: inherit; background: inherit;