fix(explore/logs) not collapsing whitespace (#15737)

- Set container width to 100% so column widths can be calculated properly
- Sets duplicates, level, timestamp, local time to a fixed width based upon em units since the size of these are static
- Sets labels to be 20%
- Remove min-width:80% on message column so that it now consumes remaining space
- Additionally fixes long labels from overflowing into the messages column by properly setting a max-width per label and hiding overflow

closes #15673

Signed-off-by: Steven Sheehy <ssheehy@firescope.com>

public/app/features/explore/LogLabels.tsx

@@ -13,8 +13,19 @@ interface Props {
 export class LogLabels extends PureComponent<Props> {
   render() {
     const { getRows, labels, onClickLabel, plain } = this.props;
-    return Object.keys(labels).map(key => (
-      <LogLabel key={key} getRows={getRows} label={key} value={labels[key]} plain={plain} onClickLabel={onClickLabel} />
-    ));
+    return (
+      <span className="logs-labels">
+        {Object.keys(labels).map(key => (
+          <LogLabel
+            key={key}
+            getRows={getRows}
+            label={key}
+            value={labels[key]}
+            plain={plain}
+            onClickLabel={onClickLabel}
+          />
+        ))}
+      </span>
+    );
   }
 }

public/app/features/explore/LogRow.tsx

@@ -150,7 +150,7 @@ export class LogRow extends PureComponent<Props, State> {
           </div>
         )}
         {showLocalTime && (
-          <div className="logs-row__time" title={`${row.timestamp} (${row.timeFromNow})`}>
+          <div className="logs-row__localtime" title={`${row.timestamp} (${row.timeFromNow})`}>
             {row.timeLocal}
           </div>
         )}

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;