Display Loki labels in bold in filters dropdown

- Add lokiLabels to frontend config
- Populate lokiLabels from Loki config

Author: OlivierCazade

pkg/config/config.go

@@ -134,6 +134,7 @@ type Frontend struct {
 	Fields          []FieldConfig `yaml:"fields" json:"fields"`
 	DataSources     []string      `yaml:"dataSources" json:"dataSources"`
 	LokiMocks       bool          `yaml:"lokiMocks,omitempty" json:"lokiMocks,omitempty"`
+	LokiLabels      []string      `yaml:"lokiLabels" json:"lokiLabels"`
 	PromLabels      []string      `yaml:"promLabels" json:"promLabels"`
 	MaxChunkAgeMs   int           `yaml:"maxChunkAgeMs,omitempty" json:"maxChunkAgeMs,omitempty"` // populated at query time
 }
@@ -191,6 +192,7 @@ func ReadFile(version, date, filename string) (*Config, error) {
 				{Name: "DstAddr", Type: "string"},
 			},
 			DataSources: []string{},
+			LokiLabels:  []string{},
 			PromLabels:  []string{},
 		},
 	}
@@ -212,6 +214,7 @@ func ReadFile(version, date, filename string) (*Config, error) {
 	if cfg.IsLokiEnabled() {
 		cfg.Frontend.DataSources = append(cfg.Frontend.DataSources, string(constants.DataSourceLoki))
 		cfg.Frontend.LokiMocks = cfg.Loki.UseMocks
+		cfg.Frontend.LokiLabels = cfg.Loki.Labels
 		cfg.Loki.FieldsType = make(map[string]string)
 		cfg.Loki.FieldsFormat = make(map[string]string)
 		for _, f := range cfg.Frontend.Fields {

web/src/api/routes.ts

@@ -190,21 +190,22 @@ export const getConfig = (): Promise<Config> => {
       panels: r.data.panels,
       columns: r.data.columns,
       portNaming: {
-        enable: r.data.portNaming.enable ?? defaultConfig.portNaming.enable,
-        portNames: r.data.portNaming.portNames
-          ? new Map(Object.entries(r.data.portNaming.portNames))
-          : defaultConfig.portNaming.portNames
+          enable: r.data.portNaming.enable ?? defaultConfig.portNaming.enable,
+          portNames: r.data.portNaming.portNames
+		   ? new Map(Object.entries(r.data.portNaming.portNames))
+		   : defaultConfig.portNaming.portNames
       },
-      filters: r.data.filters,
-      scopes: r.data.scopes,
-      quickFilters: r.data.quickFilters,
-      alertNamespaces: r.data.alertNamespaces,
-      sampling: r.data.sampling,
-      features: r.data.features || defaultConfig.features,
-      fields: r.data.fields || defaultConfig.fields,
-      dataSources: r.data.dataSources || defaultConfig.dataSources,
-      promLabels: r.data.promLabels || defaultConfig.promLabels,
-      maxChunkAgeMs: r.data.maxChunkAgeMs
+	filters: r.data.filters,
+	scopes: r.data.scopes,
+	quickFilters: r.data.quickFilters,
+	alertNamespaces: r.data.alertNamespaces,
+	sampling: r.data.sampling,
+	features: r.data.features || defaultConfig.features,
+	fields: r.data.fields || defaultConfig.fields,
+	dataSources: r.data.dataSources || defaultConfig.dataSources,
+	promLabels: r.data.promLabels || defaultConfig.promLabels,
+	lokiLabels: r.data.lokiLabels || defaultConfig.lokiLabels,
+	maxChunkAgeMs: r.data.maxChunkAgeMs
     };
   });
 };

web/src/components/toolbar/filters-toolbar.tsx

@@ -11,6 +11,7 @@ import { CompressIcon, ExpandIcon } from '@patternfly/react-icons';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import { Config } from '../../model/config';
 import { Filter, FilterDefinition, Filters, FilterValue, findFromFilters } from '../../model/filters';
 import { QuickFilter } from '../../model/quick-filters';
 import { autoCompleteCache } from '../../utils/autocomplete-cache';
@@ -30,6 +31,7 @@ import { LinksOverflow } from './links-overflow';
 
 export interface FiltersToolbarProps {
   id: string;
+  config: Config;
   filters?: Filters;
   forcedFilters?: Filters | null;
   skipTipsDelay?: boolean;
@@ -45,6 +47,7 @@ export interface FiltersToolbarProps {
 
 export const FiltersToolbar: React.FC<FiltersToolbarProps> = ({
   id,
+  config,
   filters,
   forcedFilters,
   skipTipsDelay,
@@ -161,6 +164,7 @@ export const FiltersToolbar: React.FC<FiltersToolbarProps> = ({
           <div>
             <InputGroup>
               <FiltersDropdown
+                config={config}
                 filterDefinitions={filterDefinitions}
                 selectedFilter={selectedFilter}
                 setSelectedFilter={setSelectedFilter}
@@ -177,7 +181,7 @@ export const FiltersToolbar: React.FC<FiltersToolbarProps> = ({
         </Tooltip>
       </ToolbarItem>
     );
-  }, [filterDefinitions, getFilterControl, message, selectedCompare, selectedFilter]);
+  }, [config, filterDefinitions, getFilterControl, message, selectedCompare, selectedFilter]);
 
   const isForced = !_.isEmpty(forcedFilters);
   const filtersOrForced = isForced ? forcedFilters : filters;

web/src/components/toolbar/filters/filters-dropdown.tsx

@@ -10,18 +10,21 @@ import {
 } from '@patternfly/react-core';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import { Config } from '../../../model/config';
 import { FilterDefinition } from '../../../model/filters';
-import { buildGroups, getFilterFullName } from '../../../utils/filters-helper';
+import { buildGroups, getFilterFullName, isLokiLabel } from '../../../utils/filters-helper';
 import { useOutsideClickEvent } from '../../../utils/outside-hook';
 import './filters-dropdown.css';
 
 export interface FiltersDropdownProps {
+  config: Config;
   filterDefinitions: FilterDefinition[];
   selectedFilter: FilterDefinition;
   setSelectedFilter: (f: FilterDefinition) => void;
 }
 
 export const FiltersDropdown: React.FC<FiltersDropdownProps> = ({
+  config,
   filterDefinitions,
   selectedFilter,
   setSelectedFilter
@@ -58,7 +61,7 @@ export const FiltersDropdown: React.FC<FiltersDropdownProps> = ({
                   }}
                   key={index}
                 >
-                  {f.name}
+                  {isLokiLabel(f, config) ? <strong>{f.name}</strong> : f.name}
                 </DropdownItem>
               ))}
             </AccordionContent>

web/src/model/config.ts

@@ -36,6 +36,7 @@ export type Config = {
   fields: FieldConfig[];
   dataSources: string[];
   lokiMocks: boolean;
+  lokiLabels: string[];
   promLabels: string[];
   maxChunkAgeMs?: number;
 };
@@ -59,6 +60,7 @@ export const defaultConfig: Config = {
   fields: [],
   dataSources: ['loki', 'prom'],
   lokiMocks: false,
+  lokiLabels: [],
   promLabels: [],
   maxChunkAgeMs: undefined
 };

web/src/utils/filters-helper.ts

@@ -1,4 +1,5 @@
 import { TFunction } from 'i18next';
+import { Config } from '../model/config';
 import { Filter, FilterDefinition, FilterId } from '../model/filters';
 import { findFilter } from './filter-definitions';
 
@@ -58,3 +59,21 @@ export const swapFilters = (filterDefinitions: FilterDefinition[], filters: Filt
     return f;
   });
 };
+
+export const isLokiLabel = (filter: FilterDefinition, config: Config): boolean => {
+  const allowLoki = config.dataSources.some(ds => ds === 'loki');
+  if (!allowLoki) {
+    return false;
+  }
+
+  // Encode a dummy query to check related labels
+  const q = filter.encoder([{ v: 'any' }], false, false, false);
+  const parts = q.split('&');
+  for (let i = 0; i < parts.length; i++) {
+    const kv = parts[i].split('=');
+    if (kv.length === 0 || config.lokiLabels.includes(kv[0])) {
+      return true;
+    }
+  }
+  return false;
+};