diff --git a/public/app/features/explore/LogLabels.tsx b/public/app/features/explore/LogLabels.tsx index 7105a2a5370..24d6e1ec23c 100644 --- a/public/app/features/explore/LogLabels.tsx +++ b/public/app/features/explore/LogLabels.tsx @@ -13,8 +13,19 @@ interface Props { export class LogLabels extends PureComponent { render() { const { getRows, labels, onClickLabel, plain } = this.props; - return Object.keys(labels).map(key => ( - - )); + return ( + + {Object.keys(labels).map(key => ( + + ))} + + ); } } diff --git a/public/app/features/explore/LogRow.tsx b/public/app/features/explore/LogRow.tsx index d7615446b21..e45864f7b54 100644 --- a/public/app/features/explore/LogRow.tsx +++ b/public/app/features/explore/LogRow.tsx @@ -150,7 +150,7 @@ export class LogRow extends PureComponent { )} {showLocalTime && ( -
+
{row.timeLocal}
)} diff --git a/public/sass/components/_panel_logs.scss b/public/sass/components/_panel_logs.scss index 5ecfa7259b1..5d35f8fddc0 100644 --- a/public/sass/components/_panel_logs.scss +++ b/public/sass/components/_panel_logs.scss @@ -63,6 +63,7 @@ $column-horizontal-spacing: 10px; font-size: $font-size-sm; display: table; table-layout: fixed; + width: 100%; } .logs-row { @@ -83,16 +84,22 @@ $column-horizontal-spacing: 10px; .logs-row__time { white-space: nowrap; + width: 19em; +} + +.logs-row__localtime { + white-space: nowrap; + width: 12.5em; } .logs-row__labels { - max-width: 20%; + width: 20%; line-height: 1.2; + position: relative; } .logs-row__message { word-break: break-all; - min-width: 80%; } .logs-row__match-highlight { @@ -112,6 +119,7 @@ $column-horizontal-spacing: 10px; .logs-row__level { position: relative; + width: 10px; &::after { content: ''; @@ -165,6 +173,7 @@ $column-horizontal-spacing: 10px; .logs-row__duplicates { text-align: right; + width: 4.5em; } .logs-row__field-highlight { @@ -193,15 +202,20 @@ $column-horizontal-spacing: 10px; } } +.logs-labels { + display: flex; + flex-wrap: wrap; +} + .logs-label { - display: inline-block; + display: flex; padding: 0 2px; background-color: $btn-inverse-bg; border-radius: $border-radius; margin: 0 4px 2px 0; text-overflow: ellipsis; white-space: nowrap; - position: relative; + overflow: hidden; } .logs-label__icon { @@ -211,6 +225,13 @@ $column-horizontal-spacing: 10px; margin-left: 2px; } +.logs-label__value { + display: inline-block; + max-width: 20em; + text-overflow: ellipsis; + overflow: hidden; +} + .logs-label__stats { position: absolute; top: 1.25em;