Line filters: Regex support

package.json

@@ -105,7 +105,7 @@
     "@grafana/data": "^11.3.0",
     "@grafana/lezer-logql": "^0.2.6",
     "@grafana/runtime": "^11.3.0",
-    "@grafana/scenes": "5.29.0",
+    "@grafana/scenes": "5.36.0",
     "@grafana/ui": "^11.3.0",
     "@hello-pangea/dnd": "^16.6.0",
     "@lezer/common": "^1.2.1",

src/Components/IndexScene/IndexScene.tsx

@@ -33,21 +33,31 @@ import {
   VAR_LABELS,
   VAR_LEVELS,
   VAR_LINE_FILTER,
+  VAR_LINE_FILTERS,
   VAR_LOGS_FORMAT,
   VAR_METADATA,
   VAR_PATTERNS,
 } from 'services/variables';
 
 import { addLastUsedDataSourceToStorage, getLastUsedDataSourceFromStorage } from 'services/store';
 import { ServiceScene } from '../ServiceScene/ServiceScene';
-import { LayoutScene } from './LayoutScene';
+import {
+  CONTROLS_VARS_FIELDS_ELSE_KEY,
+  CONTROLS_VARS_FIRST_ROW_KEY,
+  CONTROLS_VARS_METADATA_ROW_KEY,
+  CONTROLS_VARS_REFRESH,
+  CONTROLS_VARS_TIMEPICKER,
+  CONTROLS_VARS_TOOLBAR,
+  LayoutScene,
+} from './LayoutScene';
 import { getDrilldownSlug, PageSlugs } from '../../services/routing';
 import { ServiceSelectionScene } from '../ServiceSelectionScene/ServiceSelectionScene';
 import { LoadingPlaceholder } from '@grafana/ui';
 import { config, getAppEvents, locationService } from '@grafana/runtime';
 import {
   renderLogQLFieldFilters,
   renderLogQLLabelFilters,
+  renderLogQLLineFilter,
   renderLogQLMetadataFilters,
   renderPatternFilters,
 } from 'services/query';
@@ -72,7 +82,7 @@ import { lokiRegularEscape } from '../../services/fields';
 import { logger } from '../../services/logger';
 import { getLabelsTagKeysProvider } from '../../services/TagKeysProviders';
 import { AdHocFilterWithLabels, getLokiDatasource } from '../../services/scenes';
-import { FilterOp } from '../../services/filterTypes';
+import { FilterOp, LineFilterOp } from '../../services/filterTypes';
 import { ShowLogsButtonScene } from './ShowLogsButtonScene';
 import { CustomVariableValueSelectors } from './CustomVariableValueSelectors';
 import { getCopiedTimeRange, PasteTimeEvent, setupKeyboardShortcuts } from '../../services/keyboardShortcuts';
@@ -106,25 +116,40 @@ export class IndexScene extends SceneObjectBase<IndexSceneState> {
 
     const controls: SceneObject[] = [
       new SceneFlexLayout({
+        key: CONTROLS_VARS_FIRST_ROW_KEY,
         direction: 'row',
         children: [
           new SceneFlexItem({
-            body: new CustomVariableValueSelectors({ layout: 'vertical', include: [VAR_LABELS, VAR_DATASOURCE] }),
+            body: new CustomVariableValueSelectors({
+              key: 'vars-labels-ds',
+              layout: 'vertical',
+              include: [VAR_LABELS, VAR_DATASOURCE],
+            }),
           }),
           new ShowLogsButtonScene({
             key: showLogsButtonSceneKey,
             disabled: true,
           }),
         ],
       }),
-      new CustomVariableValueSelectors({ layout: 'vertical', exclude: [VAR_LABELS, VAR_DATASOURCE] }),
-      new SceneTimePicker({}),
-      new SceneRefreshPicker({}),
+      new CustomVariableValueSelectors({
+        key: CONTROLS_VARS_METADATA_ROW_KEY,
+        layout: 'vertical',
+        include: [VAR_METADATA, VAR_LEVELS],
+      }),
+      new CustomVariableValueSelectors({
+        key: CONTROLS_VARS_FIELDS_ELSE_KEY,
+        layout: 'vertical',
+        exclude: [VAR_LABELS, VAR_DATASOURCE, VAR_METADATA, VAR_LEVELS],
+      }),
+      new SceneTimePicker({ key: CONTROLS_VARS_TIMEPICKER }),
+      new SceneRefreshPicker({ key: CONTROLS_VARS_REFRESH }),
     ];
 
     if (getDrilldownSlug() === 'explore' && config.featureToggles.exploreLogsAggregatedMetrics) {
       controls.push(
         new ToolbarScene({
+          key: CONTROLS_VARS_TOOLBAR,
           isOpen: false,
         })
       );
@@ -429,6 +454,13 @@ const numericOperators = numericOperatorArray.map<SelectableValue<string>>((valu
   value,
 }));
 
+const lineFilterOperators: SelectableValue[] = [
+  { label: 'match', value: LineFilterOp.match },
+  { label: 'negativeMatch', value: LineFilterOp.negativeMatch },
+  { label: 'regex', value: LineFilterOp.regex },
+  { label: 'negativeRegex', value: LineFilterOp.negativeRegex },
+];
+
 function getVariableSet(initialDatasourceUid: string, initialFilters?: AdHocVariableFilter[]) {
   const labelVariable = new AdHocFiltersVariable({
     name: VAR_LABELS,
@@ -490,6 +522,19 @@ function getVariableSet(initialDatasourceUid: string, initialFilters?: AdHocVari
     return operators;
   };
 
+  const lineFiltersVariable = new AdHocFiltersVariable({
+    name: VAR_LINE_FILTERS,
+    hide: VariableHide.hideVariable,
+    getTagKeysProvider: () => Promise.resolve({ replace: true, values: [] }),
+    getTagValuesProvider: () => Promise.resolve({ replace: true, values: [] }),
+    expressionBuilder: renderLogQLLineFilter,
+    layout: 'horizontal',
+  });
+
+  lineFiltersVariable._getOperators = () => {
+    return lineFilterOperators;
+  };
+
   const dsVariable = new DataSourceVariable({
     name: VAR_DATASOURCE,
     label: 'Data source',
@@ -515,7 +560,12 @@ function getVariableSet(initialDatasourceUid: string, initialFilters?: AdHocVari
           value: '',
           hide: VariableHide.hideVariable,
         }),
-        new CustomVariable({ name: VAR_LINE_FILTER, value: '', hide: VariableHide.hideVariable }),
+        new AdHocFiltersVariable({
+          name: VAR_LINE_FILTER,
+          hide: VariableHide.hideVariable,
+          expressionBuilder: renderLogQLLineFilter,
+        }),
+        lineFiltersVariable,
 
         // This variable is a hack to get logs context working, this variable should never be used or updated
         new CustomConstantVariable({

src/Components/IndexScene/LayoutScene.tsx

@@ -1,45 +1,49 @@
 import { GrafanaTheme2 } from '@grafana/data';
-import { SceneComponentProps, SceneFlexLayout, SceneObjectBase, SceneObjectState } from '@grafana/scenes';
+import { SceneComponentProps, SceneFlexLayout, sceneGraph, SceneObjectBase, SceneObjectState } from '@grafana/scenes';
 import { useStyles2 } from '@grafana/ui';
 import React from 'react';
 import { PatternControls } from './PatternControls';
-import { AppliedPattern, IndexSceneState } from './IndexScene';
+import { AppliedPattern, IndexScene, IndexSceneState } from './IndexScene';
 import { css, cx } from '@emotion/css';
 import { GiveFeedbackButton } from './GiveFeedbackButton';
 import { InterceptBanner } from './InterceptBanner';
 
 import { PLUGIN_ID } from '../../services/plugin';
 import { CustomVariableValueSelectors } from './CustomVariableValueSelectors';
+import { logger } from '../../services/logger';
+import { LineFilterVariablesScene } from './LineFilterVariablesScene';
 
 interface LayoutSceneState extends SceneObjectState {
   interceptDismissed: boolean;
+  lineFilterRenderer?: LineFilterVariablesScene;
 }
 
 const interceptBannerStorageKey = `${PLUGIN_ID}.interceptBannerStorageKey`;
 
+export const CONTROLS_VARS_FIRST_ROW_KEY = 'vars-row__datasource-labels-timepicker-button';
+export const CONTROLS_VARS_METADATA_ROW_KEY = 'vars-metadata';
+export const CONTROLS_VARS_FIELDS_ELSE_KEY = 'vars-all-else';
+export const CONTROLS_VARS_TIMEPICKER = 'vars-timepicker';
+export const CONTROLS_VARS_REFRESH = 'vars-refresh';
+export const CONTROLS_VARS_TOOLBAR = 'vars-toolbar';
+
 export class LayoutScene extends SceneObjectBase<LayoutSceneState> {
   constructor(state: Partial<LayoutSceneState>) {
     super({
       ...state,
       interceptDismissed: !!localStorage.getItem(interceptBannerStorageKey),
     });
-  }
 
-  public dismiss() {
-    this.setState({
-      interceptDismissed: true,
-    });
-    localStorage.setItem(interceptBannerStorageKey, 'true');
+    this.addActivationHandler(this.onActivate.bind(this));
   }
 
   static Component = ({ model }: SceneComponentProps<LayoutScene>) => {
-    if (!model.parent) {
-      return null;
-    }
+    const indexScene = sceneGraph.getAncestor(model, IndexScene);
+    const { controls, contentScene, patterns } = indexScene.useState();
+    const { interceptDismissed, lineFilterRenderer } = model.useState();
 
-    const { controls, contentScene, patterns } = model.parent.useState() as IndexSceneState;
-    const { interceptDismissed } = model.useState();
     if (!contentScene) {
+      logger.warn('content scene not defined');
       return null;
     }
 
@@ -54,52 +58,97 @@ export class LayoutScene extends SceneObjectBase<LayoutSceneState> {
               }}
             />
           )}
-          {controls && (
-            <div className={styles.controlsContainer}>
-              <div className={styles.controlsFirstRowContainer}>
-                <div className={styles.filtersWrap}>
-                  <div className={cx(styles.filters, styles.firstRowWrapper)}>
-                    {controls.map((control) => {
-                      return control instanceof SceneFlexLayout ? (
-                        <control.Component key={control.state.key} model={control} />
-                      ) : null;
-                    })}
+          <div className={styles.controlsContainer}>
+            <>
+              {/* First row - datasource, timepicker, refresh, labels, button */}
+              {controls && (
+                <div className={styles.controlsFirstRowContainer}>
+                  <div className={styles.filtersWrap}>
+                    <div className={cx(styles.filters, styles.firstRowWrapper)}>
+                      {controls.map((control) => {
+                        return control instanceof SceneFlexLayout ? (
+                          <control.Component key={control.state.key} model={control} />
+                        ) : null;
+                      })}
+                    </div>
                   </div>
-                </div>
-                <div className={styles.controlsWrapper}>
-                  <GiveFeedbackButton />
-                  <div className={styles.controls}>
-                    {controls.map((control) => {
-                      return !(control instanceof CustomVariableValueSelectors) &&
-                        !(control instanceof SceneFlexLayout) ? (
-                        <control.Component key={control.state.key} model={control} />
-                      ) : null;
-                    })}
+                  <div className={styles.controlsWrapper}>
+                    <GiveFeedbackButton />
+                    <div className={styles.controls}>
+                      {controls.map((control) => {
+                        return !(control instanceof CustomVariableValueSelectors) &&
+                          !(control instanceof SceneFlexLayout) ? (
+                          <control.Component key={control.state.key} model={control} />
+                        ) : null;
+                      })}
+                    </div>
                   </div>
                 </div>
+              )}
+
+              {/* Second row - Metadata  */}
+              <div className={styles.controlsRowContainer}>
+                {controls &&
+                  controls.map((control) => {
+                    return control.state.key === CONTROLS_VARS_METADATA_ROW_KEY ? (
+                      <div className={styles.filtersWrap}>
+                        <div className={styles.filters}>
+                          <control.Component key={control.state.key} model={control} />
+                        </div>
+                      </div>
+                    ) : null;
+                  })}
+              </div>
+
+              {/* 3rd row - Patterns */}
+              <div className={styles.controlsRowContainer}>
+                <PatternControls
+                  patterns={patterns}
+                  onRemove={(patterns: AppliedPattern[]) => model.parent?.setState({ patterns } as IndexSceneState)}
+                />
+              </div>
+
+              {/* 4th row - line filters */}
+              <div className={styles.controlsRowContainer}>
+                {lineFilterRenderer && <lineFilterRenderer.Component model={lineFilterRenderer} />}
               </div>
-              <div className={styles.controlsSecondRowContainer}>
-                <div className={styles.filtersWrap}>
-                  <div className={styles.filters}>
-                    {controls.map((control) => {
-                      return control instanceof CustomVariableValueSelectors ? (
-                        <control.Component key={control.state.key} model={control} />
-                      ) : null;
-                    })}
+
+              {/* 5th row - Fields  */}
+              <div className={styles.controlsRowContainer}>
+                {controls && (
+                  <div className={styles.filtersWrap}>
+                    <div className={styles.filters}>
+                      {controls.map((control) => {
+                        return control.state.key === CONTROLS_VARS_FIELDS_ELSE_KEY ? (
+                          <control.Component key={control.state.key} model={control} />
+                        ) : null;
+                      })}
+                    </div>
                   </div>
-                </div>
+                )}
               </div>
-            </div>
-          )}
-          <PatternControls
-            patterns={patterns}
-            onRemove={(patterns: AppliedPattern[]) => model.parent?.setState({ patterns } as IndexSceneState)}
-          />
+            </>
+          </div>
+
+          {/* Final "row" - body */}
           <div className={styles.body}>{contentScene && <contentScene.Component model={contentScene} />}</div>
         </div>
       </div>
     );
   };
+
+  public onActivate() {
+    this.setState({
+      lineFilterRenderer: new LineFilterVariablesScene({}),
+    });
+  }
+
+  public dismiss() {
+    this.setState({
+      interceptDismissed: true,
+    });
+    localStorage.setItem(interceptBannerStorageKey, 'true');
+  }
 }
 
 function getStyles(theme: GrafanaTheme2) {
@@ -129,7 +178,6 @@ function getStyles(theme: GrafanaTheme2) {
     container: css({
       flexGrow: 1,
       display: 'flex',
-      gap: theme.spacing(1),
       minHeight: '100%',
       flexDirection: 'column',
       padding: theme.spacing(2),
@@ -142,23 +190,33 @@ function getStyles(theme: GrafanaTheme2) {
       gap: theme.spacing(1),
     }),
     controlsFirstRowContainer: css({
+      label: 'controls-first-row',
       display: 'flex',
       gap: theme.spacing(2),
       justifyContent: 'space-between',
       alignItems: 'flex-start',
-      marginBottom: theme.spacing(2),
     }),
-    controlsSecondRowContainer: css({
+    controlsRowContainer: css({
+      '&:empty': {
+        display: 'none',
+      },
+      label: 'controls-row',
       display: 'flex',
-      gap: theme.spacing(2),
+      // @todo add custom renderers for all variables, this currently results in 2 "empty" rows that always take up space
+      gap: theme.spacing(1),
       justifyContent: 'space-between',
       alignItems: 'flex-start',
+      paddingLeft: theme.spacing(2),
     }),
     controlsContainer: css({
       label: 'controlsContainer',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: theme.spacing(1),
     }),
     filters: css({
       label: 'filters',
+      display: 'flex',
     }),
     filtersWrap: css({
       label: 'filtersWrap',