Logs: Show active state of "filter for value" buttons in Logs Details (#70328)

* Datasource test: fix describe nesting * Parsing: export handleQuotes function * Modify query: add functions to detect the presence of a label and remove it * Loki: add support to toggle filters if already present * Datasource test: fix describe nesting * Loki: add support to toggle filter out if present * Remove label: handle escaped values * Datasource: add test case for escaped label values * Loki: remove = filter when applying != * Remove selector: add support for Selector node being far from Matcher * Modify query: add unit tests * Elasticsearch: create modifyQuery for elastic * Elastic modify query: implement functions * Elasticsearch: implement modifyQuery functions in datasource * Elasticsearch: update datasource test * Loki modify query: check for streamSelectorPositions length * Elasticsearch query has filter: escape filter value in regex * Remove unused type * Modify query: add functions to detect the presence of a label and remove it * Remove label: handle escaped values * Logs: create props to check for label filters in the query * Log Details Row: use label state props to show visual feedback * Make isCallbacks async * Explore: add placeholder for checking for filter in query * Datasource: define new API method * Inspect query: add base implementation * Remove isFilterOutLabelActive as it will not be needed * Check for "isActive" on every render Otherwise the active state will be out of sync * Elasticsearch: implement inspectQuery in the datasource * Logs: update test * Log details: update test * Datasources: update tests * Inspect query: rename to analize query to prevent confusion * Datasource types: mark method as alpha * Explore: add comment to log-specific functions * Remove duplicated code from bad rebase * Remove label filter: check node type * getMatchersWithFilter: rename argument * Fix bad rebase * Create DataSourceWithQueryManipulationSupport interface * Implement type guard for DataSourceWithQueryManipulationSupport * DataSourceWithQueryManipulationSupport: move to logs module * hasQueryManipulationSupport: change implementation `modifyQuery` comes from the prototype. * DataSourceWithQueryManipulationSupport: expand code comments * AnalyzeQueryOptions: move to logs module * DataSourceWithQueryManipulationSupport: add support for more return types * Fix merge error * Update packages/grafana-data/src/types/logs.ts Co-authored-by: Sven Grossmann <sven.grossmann@grafana.com> * DatasourceAPI: deprecate modifyQuery * Explore: refactor isFilterLabelActive * DataSourceWithQueryModificationSupport: rename interface * Split interfaces into Analyze and Modify * Query analysis: better name for interface * Fix guard * Create feature flag for active state * Use new feature flag in Explore * DataSourceToggleableQueryFiltersSupport: create a specific interface for this feature * Rename feature flag * De-deprecate modifyQuery * DataSourceToggleableQueryFiltersSupport: Rethink types and methods * Explore: adjust modifyQuery and isFilterLabelActive to new methods * Loki: implement new interface and revert modifyQuery * DataSourceToggleableQueryFiltersSupport: better name for arguments * Elasticsearch: implement new interface and revert modifyQuery * Loki: better name for arguments * Explore: document current limitation on isFilterLabelActive * Explore: place toggleable filters under feature flag * Loki: add tests for the new methods * Loki: add legacy modifyQuery tests * Elasticsearch: add tests for the new methods * Elasticsearch: add legacy modifyQuery tests * Toggle filter action: improve type values * Logs types: update interface description * DataSourceWithToggleableQueryFiltersSupport: update interface name * Update feature flag description * Explore: add todo comment for isFilterLabelActive --------- Co-authored-by: Sven Grossmann <sven.grossmann@grafana.com>
2023-07-24 11:22:47 +03:00
parent 719f6bc520
commit 84f94cdc24
20 changed files with 493 additions and 129 deletions
@@ -110,6 +110,7 @@ export interface FeatureToggles {
  logsExploreTableVisualisation?: boolean;
  awsDatasourcesTempCredentials?: boolean;
  transformationsRedesign?: boolean;
+  toggleLabelsInLogsUI?: boolean;
  mlExpressions?: boolean;
  disableTraceQLStreaming?: boolean;
  grafanaAPIServer?: boolean;
@@ -2,7 +2,7 @@ import { Observable } from 'rxjs';

 import { DataQuery } from '@grafana/schema';

-import { Labels } from './data';
+import { KeyValue, Labels } from './data';
 import { DataFrame } from './dataFrame';
 import { DataQueryRequest, DataQueryResponse } from './datasource';
 import { AbsoluteTimeRange } from './time';
@@ -263,3 +263,42 @@ export const hasLogsContextUiSupport = (datasource: unknown): datasource is Data

  return withLogsSupport.getLogRowContextUi !== undefined;
 };
+
+export interface QueryFilterOptions extends KeyValue<string> {}
+export interface ToggleFilterAction {
+  type: 'FILTER_FOR' | 'FILTER_OUT';
+  options: QueryFilterOptions;
+}
+/**
+ * Data sources that support toggleable filters through `toggleQueryFilter`, and displaying the active
+ * state of filters through `queryHasFilter`, in the Log Details component in Explore.
+ * @internal
+ * @alpha
+ */
+export interface DataSourceWithToggleableQueryFiltersSupport<TQuery extends DataQuery> {
+  /**
+   * Toggle filters on and off from query.
+   * If the filter is already present, it should be removed.
+   * If the opposite filter is present, it should be replaced.
+   */
+  toggleQueryFilter(query: TQuery, filter: ToggleFilterAction): TQuery;
+
+  /**
+   * Given a query, determine if it has a filter that matches the options.
+   */
+  queryHasFilter(query: TQuery, filter: QueryFilterOptions): boolean;
+}
+
+/**
+ * @internal
+ */
+export const hasToggleableQueryFiltersSupport = <TQuery extends DataQuery>(
+  datasource: unknown
+): datasource is DataSourceWithToggleableQueryFiltersSupport<TQuery> => {
+  return (
+    datasource !== null &&
+    typeof datasource === 'object' &&
+    'toggleQueryFilter' in datasource &&
+    'queryHasFilter' in datasource
+  );
+};