diff --git a/public/app/features/logs/components/fieldSelector/ActiveFields.tsx b/public/app/features/logs/components/fieldSelector/ActiveFields.tsx
index 597f1715317..b7b2053a603 100644
--- a/public/app/features/logs/components/fieldSelector/ActiveFields.tsx
+++ b/public/app/features/logs/components/fieldSelector/ActiveFields.tsx
@@ -44,12 +44,16 @@ export const ActiveFields = ({ activeFields, clear, fields, reorder, suggestedFi
(name) => fields.find((field) => field.name === name) ?? suggestedFields.find((field) => field.name === name)
)
.filter((field) => field !== undefined),
- ...suggestedFields.filter((suggestedField) => !activeFields.includes(suggestedField.name)),
],
[activeFields, fields, suggestedFields]
);
- if (active.length) {
+ const suggested = useMemo(
+ () => suggestedFields.filter((suggestedField) => !activeFields.includes(suggestedField.name)),
+ [activeFields, suggestedFields]
+ );
+
+ if (active.length || suggested.length) {
return (
<>
@@ -96,6 +100,20 @@ export const ActiveFields = ({ activeFields, clear, fields, reorder, suggestedFi
)}
+ {suggested.length > 0 && (
+ <>
+
+ Suggested
+
+
+ {suggested.map((field) => (
+
+
+
+ ))}
+
+ >
+ )}
>
);
}
@@ -129,6 +147,10 @@ export function getLogsFieldsStyles(theme: GrafanaTheme2) {
zIndex: 3,
marginBottom: theme.spacing(2),
}),
+ columnSubHeader: css({
+ padding: theme.spacing(0, 0, 0.75, 0.5),
+ color: theme.colors.text.secondary,
+ }),
columnHeaderButton: css({
appearance: 'none',
background: 'none',
diff --git a/public/app/features/logs/components/fieldSelector/FieldList.tsx b/public/app/features/logs/components/fieldSelector/FieldList.tsx
index 16c054f3f48..bac519beafd 100644
--- a/public/app/features/logs/components/fieldSelector/FieldList.tsx
+++ b/public/app/features/logs/components/fieldSelector/FieldList.tsx
@@ -48,12 +48,7 @@ function getStyles(theme: GrafanaTheme2) {
sidebarWrap: css({
overflowY: 'scroll',
flex: 1,
- /* Hide scrollbar for Chrome, Safari, and Opera */
- '&::-webkit-scrollbar': {
- display: 'none',
- },
- /* Hide scrollbar for Firefox */
- scrollbarWidth: 'none',
+ scrollbarWidth: 'thin',
}),
columnHeader: css({
display: 'flex',
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index c27129e1f63..df16ce18d9b 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -7189,7 +7189,8 @@
"logs-table-multi-select": {
"fields": "Fields",
"reset": "Reset",
- "selected-fields": "Selected fields"
+ "selected-fields": "Selected fields",
+ "suggested-fields": "Suggested"
},
"logs-table-wrap": {
"aria-label-select-query-by-name": "Select query by name",