Loki: Fix label browser not sorted after selection of a label (#107394)
* Explore(Loki): fix label browser not sorted after selection of a label Signed-off-by: Paulo Dias <paulodias.gm@gmail.com> * fix: use collator instead of localCompares Signed-off-by: Paulo Dias <paulodias.gm@gmail.com> --------- Signed-off-by: Paulo Dias <paulodias.gm@gmail.com> Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>
This commit is contained in:
co-authored by
Zoltán Bedi
parent
fe3d06928f
commit
5edbdb7c4f
@@ -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 };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user