Merge pull request #14352 from grafana/explore-logs-css-refactor

Explore logs css refactor

public/app/features/explore/Logs.tsx

@@ -61,31 +61,31 @@ function Row({
   const previewHighlights = highlighterExpressions && !_.isEqual(highlighterExpressions, row.searchWords);
   const highlights = previewHighlights ? highlighterExpressions : row.searchWords;
   const needsHighlighter = highlights && highlights.length > 0;
-  const highlightClassName = classnames('logs-row-match-highlight', {
-    'logs-row-match-highlight--preview': previewHighlights,
+  const highlightClassName = classnames('logs-row__match-highlight', {
+    'logs-row__match-highlight--preview': previewHighlights,
   });
   return (
-    <>
+    <div className="logs-row">
       {showDuplicates && (
-        <div className="logs-row-duplicates">{row.duplicates > 0 ? `${row.duplicates + 1}x` : null}</div>
+        <div className="logs-row__duplicates">{row.duplicates > 0 ? `${row.duplicates + 1}x` : null}</div>
       )}
-      <div className={row.logLevel ? `logs-row-level logs-row-level-${row.logLevel}` : ''} />
+      <div className={row.logLevel ? `logs-row__level logs-row__level--${row.logLevel}` : ''} />
       {showUtc && (
-        <div className="logs-row-time" title={`Local: ${row.timeLocal} (${row.timeFromNow})`}>
+        <div className="logs-row__time" title={`Local: ${row.timeLocal} (${row.timeFromNow})`}>
           {row.timestamp}
         </div>
       )}
       {showLocalTime && (
-        <div className="logs-row-time" title={`${row.timestamp} (${row.timeFromNow})`}>
+        <div className="logs-row__time" title={`${row.timestamp} (${row.timeFromNow})`}>
           {row.timeLocal}
         </div>
       )}
       {showLabels && (
-        <div className="logs-row-labels">
+        <div className="logs-row__labels">
           <LogLabels allRows={allRows} labels={row.uniqueLabels} onClickLabel={onClickLabel} />
         </div>
       )}
-      <div className="logs-row-message">
+      <div className="logs-row__message">
         {needsHighlighter ? (
           <Highlighter
             textToHighlight={row.entry}
@@ -97,14 +97,14 @@ function Row({
           row.entry
         )}
       </div>
-    </>
+    </div>
   );
 }
 
 function renderMetaItem(value: any, kind: LogsMetaKind) {
   if (kind === LogsMetaKind.LabelsMap) {
     return (
-      <span className="logs-meta-item__value-labels">
+      <span className="logs-meta-item__labels">
         <LogLabels labels={value} plain />
       </span>
     );
@@ -113,7 +113,6 @@ function renderMetaItem(value: any, kind: LogsMetaKind) {
 }
 
 interface LogsProps {
-  className?: string;
   data: LogsModel;
   highlighterExpressions: string[];
   loading: boolean;
@@ -221,7 +220,6 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
 
   render() {
     const {
-      className = '',
       data,
       highlighterExpressions,
       loading = false,
@@ -264,31 +262,31 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
     }
 
     // Grid options
-    const cssColumnSizes = [];
-    if (showDuplicates) {
-      cssColumnSizes.push('max-content');
-    }
-    // Log-level indicator line
-    cssColumnSizes.push('3px');
-    if (showUtc) {
-      cssColumnSizes.push('minmax(100px, max-content)');
-    }
-    if (showLocalTime) {
-      cssColumnSizes.push('minmax(100px, max-content)');
-    }
-    if (showLabels) {
-      cssColumnSizes.push('fit-content(20%)');
-    }
-    cssColumnSizes.push('1fr');
-    const logEntriesStyle = {
-      gridTemplateColumns: cssColumnSizes.join(' '),
-    };
+    // const cssColumnSizes = [];
+    // if (showDuplicates) {
+    //   cssColumnSizes.push('max-content');
+    // }
+    // // Log-level indicator line
+    // cssColumnSizes.push('3px');
+    // if (showUtc) {
+    //   cssColumnSizes.push('minmax(220px, max-content)');
+    // }
+    // if (showLocalTime) {
+    //   cssColumnSizes.push('minmax(140px, max-content)');
+    // }
+    // if (showLabels) {
+    //   cssColumnSizes.push('fit-content(20%)');
+    // }
+    // cssColumnSizes.push('1fr');
+    // const logEntriesStyle = {
+    //   gridTemplateColumns: cssColumnSizes.join(' '),
+    // };
 
     const scanText = scanRange ? `Scanning ${rangeUtil.describeTimeRange(scanRange)}` : 'Scanning...';
 
     return (
-      <div className={`${className} logs`}>
-        <div className="logs-graph">
+      <div className="logs-panel">
+        <div className="logs-panel-graph">
           <Graph
             data={data.series}
             height="100px"
@@ -299,9 +297,8 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
             userOptions={graphOptions}
           />
         </div>
-
-        <div className="logs-options">
-          <div className="logs-controls">
+        <div className="logs-panel-options">
+          <div className="logs-panel-controls">
             <Switch label="Timestamp" checked={showUtc} onChange={this.onChangeUtc} small />
             <Switch label="Local time" checked={showLocalTime} onChange={this.onChangeLocalTime} small />
             <Switch label="Labels" checked={showLabels} onChange={this.onChangeLabels} small />
@@ -331,11 +328,11 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
             />
             {hasData &&
               meta && (
-                <div className="logs-meta">
+                <div className="logs-panel-meta">
                   {meta.map(item => (
-                    <div className="logs-meta-item" key={item.label}>
-                      <span className="logs-meta-item__label">{item.label}:</span>
-                      <span className="logs-meta-item__value">{renderMetaItem(item.value, item.kind)}</span>
+                    <div className="logs-panel-meta__item" key={item.label}>
+                      <span className="logs-panel-meta__label">{item.label}:</span>
+                      <span className="logs-panel-meta__value">{renderMetaItem(item.value, item.kind)}</span>
                     </div>
                   ))}
                 </div>
@@ -343,7 +340,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
           </div>
         </div>
 
-        <div className="logs-entries" style={logEntriesStyle}>
+        <div className="logs-rows">
           {hasData &&
             !deferLogs &&
             // Only inject highlighterExpression in the first set for performance reasons
@@ -380,7 +377,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
         {!loading &&
           !hasData &&
           !scanning && (
-            <div className="logs-nodata">
+            <div className="logs-panel-nodata">
               No logs found.
               <a className="link" onClick={this.onClickScan}>
                 Scan for older logs
@@ -389,7 +386,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
           )}
 
         {scanning && (
-          <div className="logs-nodata">
+          <div className="logs-panel-nodata">
             <span>{scanText}</span>
             <a className="link" onClick={this.onClickStopScan}>
               Stop scan

public/sass/_grafana.scss

@@ -59,6 +59,7 @@
 @import 'components/panel_text';
 @import 'components/panel_heatmap';
 @import 'components/panel_add_panel';
+@import 'components/panel_logs';
 @import 'components/settings_permissions';
 @import 'components/tagsinput';
 @import 'components/tables_lists';

public/sass/components/_panel_logs.scss

@@ -0,0 +1,223 @@
+.logs-panel-controls {
+  display: flex;
+  background-color: $page-bg;
+  padding: $panel-padding;
+  padding-top: 10px;
+  border-radius: $border-radius;
+  margin: 2*$panel-margin 0;
+  border: $panel-border;
+  justify-items: flex-start;
+  align-items: flex-start;
+
+  > * {
+    margin-right: 1em;
+  }
+}
+
+.logs-panel-nodata {
+  > * {
+    margin-left: 0.5em;
+  }
+}
+
+.logs-panel-meta {
+  flex: 1;
+  color: $text-color-weak;
+  // Align first line with controls labels
+  margin-top: -2px;
+}
+
+.logs-panel-meta__item {
+  margin-right: 1em;
+}
+
+.logs-panel-meta__label {
+  margin-right: 0.5em;
+  font-size: 0.9em;
+  font-weight: 500;
+}
+
+.logs-panel-meta__value {
+  font-family: $font-family-monospace;
+}
+
+.logs-panel-meta-item__labels {
+  // compensate for the labels padding
+  position: relative;
+  top: 4px;
+}
+
+.logs-rows {
+  font-family: $font-family-monospace;
+  font-size: 12px;
+  display: table;
+  table-layout: fixed;
+}
+
+.logs-row {
+  display: table-row;
+
+  > div {
+    display: table-cell;
+    padding-left: 10px;
+    border: 1px solid transparent;
+  }
+}
+
+.logs-row__time {
+  white-space: nowrap;
+}
+
+.logs-row__labels {
+  max-width: 20%;
+}
+
+.logs-row__message {
+  word-break: break-all;
+  min-width: 80%;
+}
+
+.logs-row__match-highlight {
+  // Undoing mark styling
+  background: inherit;
+  padding: inherit;
+
+  color: $typeahead-selected-color;
+  border-bottom: 1px solid $typeahead-selected-color;
+  background-color: rgba($typeahead-selected-color, 0.1);
+
+  &--preview {
+    background-color: rgba($typeahead-selected-color, 0.2);
+    border-bottom-style: dotted;
+  }
+}
+
+.logs-row__level {
+  background-color: transparent;
+  position: relative;
+  width: 3px;
+  padding: 0 !important;
+
+  &--critical,
+  &--crit {
+    background-color: #705da0;
+  }
+
+  &--error,
+  &--err {
+    background-color: #e24d42;
+  }
+
+  &--warning,
+  &--warn {
+    background-color: #eab839;
+  }
+
+  &--info {
+    background-color: #7eb26d;
+  }
+
+  &--debug {
+    background-color: #1f78c1;
+  }
+
+  &--trace {
+    background-color: #6ed0e0;
+  }
+}
+
+.logs-row__duplicates {
+  text-align: right;
+}
+
+.logs-label {
+  display: inline-block;
+  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;
+}
+
+.logs-label__icon {
+  border-left: $panel-border;
+  padding: 0 2px;
+  cursor: pointer;
+  margin-left: 2px;
+}
+
+.logs-label__stats {
+  position: absolute;
+  top: 1.25em;
+  left: -10px;
+  z-index: 100;
+  background-color: $popover-bg;
+  color: $popover-color;
+  border: 1px solid $popover-border-color;
+  padding: 10px;
+  border-radius: $border-radius;
+  justify-content: space-between;
+  box-shadow: $popover-shadow;
+}
+
+.logs-row__labels {
+  line-height: 1.2;
+}
+
+.logs-stats__info {
+  margin-bottom: $spacer / 2;
+}
+
+.logs-stats__icon {
+  margin-left: 0.5em;
+  cursor: pointer;
+}
+
+.logs-stats-row {
+  margin: $spacer/1.75 0;
+
+  &--active {
+    color: $blue;
+    position: relative;
+  }
+
+  &--active::after {
+    display: inline;
+    content: '*';
+    position: absolute;
+    top: 0;
+    left: -8px;
+  }
+
+  &__label {
+    display: flex;
+    margin-bottom: 1px;
+  }
+
+  &__value {
+    flex: 1;
+  }
+
+  &__count,
+  &__percent {
+    text-align: right;
+    margin-left: 0.5em;
+  }
+
+  &__percent {
+    width: 3em;
+  }
+
+  &__bar,
+  &__innerbar {
+    height: 4px;
+    overflow: hidden;
+    background: $text-color-faint;
+  }
+
+  &__innerbar {
+    background-color: $blue;
+  }
+}

public/sass/pages/_explore.scss

@@ -238,212 +238,6 @@
   padding-right: 0.25em;
 }
 
-.explore {
-  .logs {
-    .logs-controls {
-      display: flex;
-      background-color: $page-bg;
-      padding: $panel-padding;
-      padding-top: 10px;
-      border-radius: $border-radius;
-      margin: 2*$panel-margin 0;
-      border: $panel-border;
-      justify-items: flex-start;
-      align-items: flex-start;
-
-      > * {
-        margin-right: 1em;
-      }
-    }
-
-    .logs-nodata {
-      > * {
-        margin-left: 0.5em;
-      }
-    }
-
-    .logs-meta {
-      flex: 1;
-      color: $text-color-weak;
-      // Align first line with controls labels
-      margin-top: -2px;
-    }
-
-    .logs-meta-item {
-      margin-right: 1em;
-    }
-
-    .logs-meta-item__label {
-      margin-right: 0.5em;
-      font-size: 0.9em;
-      font-weight: 500;
-    }
-
-    .logs-meta-item__value {
-      font-family: $font-family-monospace;
-    }
-
-    .logs-meta-item__value-labels {
-      // compensate for the labels padding
-      position: relative;
-      top: 4px;
-    }
-
-    .logs-entries {
-      display: grid;
-      grid-column-gap: 1rem;
-      grid-row-gap: 0.1rem;
-      font-family: $font-family-monospace;
-      font-size: 12px;
-    }
-
-    .logs-row-match-highlight {
-      // Undoing mark styling
-      background: inherit;
-      padding: inherit;
-
-      color: $typeahead-selected-color;
-      border-bottom: 1px solid $typeahead-selected-color;
-      background-color: rgba($typeahead-selected-color, 0.1);
-    }
-
-    .logs-row-match-highlight--preview {
-      background-color: rgba($typeahead-selected-color, 0.2);
-      border-bottom-style: dotted;
-    }
-
-    .logs-row-level {
-      background-color: transparent;
-      margin: 2px 0;
-      position: relative;
-      opacity: 0.8;
-    }
-
-    .logs-row-level-critical,
-    .logs-row-level-crit {
-      background-color: #705da0;
-    }
-
-    .logs-row-level-error,
-    .logs-row-level-err {
-      background-color: #e24d42;
-    }
-
-    .logs-row-level-warning,
-    .logs-row-level-warn {
-      background-color: #eab839;
-    }
-
-    .logs-row-level-info {
-      background-color: #7eb26d;
-    }
-
-    .logs-row-level-debug {
-      background-color: #1f78c1;
-    }
-
-    .logs-row-level-trace {
-      background-color: #6ed0e0;
-    }
-
-    .logs-row-duplicates {
-      text-align: right;
-    }
-
-    .logs-label {
-      display: inline-block;
-      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;
-    }
-
-    .logs-label__icon {
-      border-left: $panel-border;
-      padding: 0 2px;
-      cursor: pointer;
-      margin-left: 2px;
-    }
-
-    .logs-label__stats {
-      position: absolute;
-      top: 1.25em;
-      left: -10px;
-      z-index: 100;
-      background-color: $popover-bg;
-      color: $popover-color;
-      border: 1px solid $popover-border-color;
-      padding: 10px;
-      border-radius: $border-radius;
-      justify-content: space-between;
-      box-shadow: $popover-shadow;
-    }
-
-    .logs-row-labels {
-      line-height: 1.2;
-    }
-
-    .logs-stats__info {
-      margin-bottom: $spacer / 2;
-    }
-
-    .logs-stats__icon {
-      margin-left: 0.5em;
-      cursor: pointer;
-    }
-
-    .logs-stats-row {
-      margin: $spacer/1.75 0;
-
-      &--active {
-        color: $blue;
-        position: relative;
-      }
-
-      &--active:after {
-        display: inline;
-        content: '*';
-        position: absolute;
-        top: 0;
-        left: -8px;
-      }
-
-      &__label {
-        display: flex;
-        margin-bottom: 1px;
-      }
-
-      &__value {
-        flex: 1;
-      }
-
-      &__count,
-      &__percent {
-        text-align: right;
-        margin-left: 0.5em;
-      }
-
-      &__percent {
-        width: 3em;
-      }
-
-      &__bar,
-      &__innerbar {
-        height: 4px;
-        overflow: hidden;
-        background: $text-color-faint;
-      }
-
-      &__innerbar {
-        background-color: $blue;
-      }
-    }
-  }
-}
-
 // Prometheus-specifics, to be extracted to datasource soon
 
 .explore {