From 5edbdb7c4f945634c6afa87db5e7a711f14e8d19 Mon Sep 17 00:00:00 2001 From: Paulo Dias <44772900+paulojmdias@users.noreply.github.com> Date: Fri, 4 Jul 2025 17:15:29 +0100 Subject: [PATCH] Loki: Fix label browser not sorted after selection of a label (#107394) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Explore(Loki): fix label browser not sorted after selection of a label Signed-off-by: Paulo Dias * fix: use collator instead of localCompares Signed-off-by: Paulo Dias --------- Signed-off-by: Paulo Dias Co-authored-by: Zoltán Bedi --- .../loki/components/LokiLabelBrowser.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx b/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx index 49e58e8f233..5b1c9b8c9a6 100644 --- a/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx +++ b/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx @@ -26,6 +26,7 @@ const MAX_LABEL_COUNT = 1000; const MAX_VALUE_COUNT = 10000; const MAX_AUTO_SELECT = 4; const EMPTY_SELECTOR = '{}'; +const collator = new Intl.Collator('en', { sensitivity: 'accent' }); export interface BrowserProps { languageProvider: LokiLanguageProvider; @@ -68,7 +69,10 @@ export function buildSelector(labels: SelectableLabel[]): string { const selectedLabels = []; for (const label of labels) { if (label.selected && label.values && label.values.length > 0) { - const selectedValues = label.values.filter((value) => value.selected).map((value) => value.name); + const selectedValues = label.values + .filter((value) => value.selected) + .map((value) => value.name) + .sort(collator.compare); // sort selected values alphabetically if (selectedValues.length > 1) { selectedLabels.push(`${label.name}=~"${selectedValues.map(escapeLabelValueInRegexSelector).join('|')}"`); } else if (selectedValues.length === 1) { @@ -97,7 +101,13 @@ export function facetLabels( label.values?.filter((value) => value.selected).map((value) => value.name) || [] ); // Values for this label have not been requested yet, let's use the facetted ones as the initial values - existingValues = possibleValues.map((value) => ({ name: value, selected: selectedValues.has(value) })); + existingValues = possibleValues + .slice() + .sort(collator.compare) // sort raw label values alphabetically + .map((value) => ({ + name: value, + selected: selectedValues.has(value), + })); } return { ...label, loading: false, values: existingValues, facets: existingValues.length }; }