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",