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 }; }