diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx
index 3a584cd5664..017483cccd4 100644
--- a/public/app/features/explore/Logs.tsx
+++ b/public/app/features/explore/Logs.tsx
@@ -64,18 +64,18 @@ function Row({
'logs-row-match-highlight--preview': previewHighlights,
});
return (
- <>
+
{showDuplicates && (
{row.duplicates > 0 ? `${row.duplicates + 1}x` : null}
)}
{showUtc && (
-
+
{row.timestamp}
)}
{showLocalTime && (
-
+
{row.timeLocal}
)}
@@ -96,7 +96,7 @@ function Row({
row.entry
)}
- >
+
);
}
@@ -263,25 +263,25 @@ export default class Logs extends PureComponent
{
}
// 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...';
@@ -342,7 +342,7 @@ export default class Logs extends PureComponent {
-
+
{hasData &&
!deferLogs &&
// Only inject highlighterExpression in the first set for performance reasons
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index e4c7a9c59e1..f8de32098d1 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -101,6 +101,7 @@
@import 'components/delete_button';
@import 'components/add_data_source.scss';
@import 'components/page_loader';
+@import 'components/logs-rows';
// PAGES
@import 'pages/login';
diff --git a/public/sass/components/_logs-rows.scss b/public/sass/components/_logs-rows.scss
new file mode 100644
index 00000000000..0812be12cf9
--- /dev/null
+++ b/public/sass/components/_logs-rows.scss
@@ -0,0 +1,23 @@
+.logs-rows {
+ // display: grid;
+ // grid-column-gap: 1rem;
+ // grid-row-gap: 0.1rem;
+ // font-family: $font-family-monospace;
+ // font-size: 12px;
+ display: table;
+}
+
+.logs-row {
+ display: table-row;
+
+ > div {
+ display: table-cell;
+ }
+}
+
+.logs-row__time {
+ white-space: nowrap;
+}
+
+.logs-row__message {
+}
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index 5e69b9a1f1a..fc5398553d7 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -289,14 +289,6 @@
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;
@@ -319,6 +311,9 @@
opacity: 0.8;
}
+ .logs-row__time {
+ }
+
.logs-row-level-critical,
.logs-row-level-crit {
background-color: #705da0;