mirror of
https://github.com/grafana/grafana.git
synced 2025-01-02 12:17:01 -06:00
toggleLabelsInLogsUI: enable by default (#74342)
* GA toggleable labels * Logs integration: update readme with new features * Build a logs data source: update docs with the new interface * Plugin docs: update example function signatures and arguments * Plugin docs: update modifyQuery function names * Formatting * Remove character * Remove `expr` from docs * Plugin docs: improve code * Plugin docs: further code improvements
This commit is contained in:
Matias Chomicki
GitHub
parent
433c76f7f6
commit
9ceaeed489
@ -273,14 +273,14 @@ export class ExampleDatasource extends DataSourceApi<ExampleQuery, ExampleOption
|
||||
case 'ADD_FILTER':
|
||||
if (action.options?.key && action.options?.value) {
|
||||
// Be sure to adjust this example code based on your data source logic.
|
||||
queryText = addLabelToQuery(queryText, action.options.key, '=', action.options.value);
|
||||
queryText = addPositiveFilterToQuery(queryText, action.options.key, action.options.value);
|
||||
}
|
||||
break;
|
||||
case 'ADD_FILTER_OUT':
|
||||
{
|
||||
if (action.options?.key && action.options?.value) {
|
||||
// Be sure to adjust this example code based on your data source logic.
|
||||
queryText = addLabelToQuery(queryText, action.options.key, '!=', action.options.value);
|
||||
queryText = addNegativeFilterToQuery(queryText, action.options.key, action.options.value);
|
||||
}
|
||||
}
|
||||
break;
|
||||
@ -402,7 +402,7 @@ With [full range logs volume]({{< relref "../../../../explore/logs-integration/#
|
||||
|
||||
**How to implement `DataSourceWithSupplementaryQueriesSupport` API in data source:**
|
||||
|
||||
{{% admonition type="note" %}} This API must be implemented in data source in typescript code. {{%
|
||||
{{% admonition type="note" %}} This API must be implemented in the data source in typescript code. {{%
|
||||
/admonition %}}
|
||||
|
||||
```ts
|
||||
@ -487,7 +487,7 @@ export class ExampleDatasource
|
||||
|
||||
### Logs sample
|
||||
|
||||
{{% admonition type="note" %}} This feature is currently not supported for external plugins outside of the Grafana repo. Implement this API in a data source by implementing the `DataSourceWithXXXSupport` interface. {{%
|
||||
{{% admonition type="note" %}} This feature is currently not supported for external plugins outside of the Grafana repo. Add support for this API in a data source by implementing the `DataSourceWith<Feature>Support` interface. {{%
|
||||
/admonition %}}
|
||||
|
||||
The [logs sample]({{< relref "../../../../explore/logs-integration/#logs-sample" >}}) feature is a valuable addition when your data source supports both logs and metrics. It enables users to view samples of log lines that contributed to the visualized metrics, providing deeper insights into the data.
|
||||
@ -612,3 +612,76 @@ const result = createDataFrame({
|
||||
/admonition %}}
|
||||
|
||||
It allows plugin developers to display a custom UI in the context view by implementing the `getLogRowContextUi?(row: LogRowModel, runContextQuery?: () => void, origQuery?: TQuery): React.ReactNode;` method.
|
||||
|
||||
### Toggleable filters in Log Details
|
||||
|
||||
{{% admonition type="note" %}} This feature is currently not supported for external plugins outside of the Grafana repo. Add support for this API in a data source by implementing the `DataSourceWith<Feature>Support` interface. {{%
|
||||
/admonition %}}
|
||||
|
||||
The [logs details]({{< relref "../../../../explore/logs-integration/#log-details-view" >}}) component offers the possibility of adding and removing filters from the query that generated a given log line by clicking the corresponding button next to each field associated with the log line. When this interface is implemented in your data source, you get access to the following functionalities:
|
||||
|
||||
- If a positive filter for the field and field value is present in the query, the "plus" icon is displayed as active.
|
||||
- If a positive filter is active, it can be toggled off (removed) from the source query.
|
||||
- If a positive filter is active, it can be changed to a negative equivalent by clicking on the "minus" icon.
|
||||
- A negative filter for a field and field value can be added to the source query by clicking on the corresponding icon.
|
||||
|
||||
To implement toggleable filters support in your data source plugin, you can use the `DataSourceWithToggleableQueryFiltersSupport` API.
|
||||
|
||||
```ts
|
||||
import {
|
||||
queryHasPositiveFilter,
|
||||
removePositiveFilterFromQuery,
|
||||
addPositiveFilterToQuery,
|
||||
addNegativeFilterToQuery,
|
||||
} from '../your/own/package/functions';
|
||||
import { DataSourceWithToggleableQueryFiltersSupport, QueryFilterOptions } from '@grafana/data';
|
||||
|
||||
export class ExampleDatasource
|
||||
extends DataSourceApi<ExampleQuery, ExampleOptions>
|
||||
implements DataSourceWithToggleableQueryFiltersSupport<ExampleQuery>
|
||||
{
|
||||
/**
|
||||
* Given a query, determine if it has a filter that matches the options.
|
||||
*/
|
||||
queryHasFilter(query: ExampleQuery, filter: QueryFilterOptions): boolean {
|
||||
/**
|
||||
* Pass the query and the key => value pair to your query-analyzing function.
|
||||
* We only care about equality/positive filters as only those fields will be
|
||||
* present in the log lines.
|
||||
*/
|
||||
return queryHasPositiveFilter(query.query, filter.key, filter.value);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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: ExampleQuery, filter: ToggleFilterAction): LokiQuery {
|
||||
const queryText = query.query; // The current query.
|
||||
const { key, value } = filter.options;
|
||||
// We currently support 2 types of filter: FILTER_FOR (positive) and FILTER_OUT (negative).
|
||||
switch (filter.type) {
|
||||
case 'FILTER_FOR': {
|
||||
// This gives the user the ability to toggle a filter on and off.
|
||||
queryText = queryHasPositiveFilter(queryText, key, value)
|
||||
? removePositiveFilterFromQuery(queryText, key, value)
|
||||
: addPositiveFilterToQuery(queryText, key, value);
|
||||
break;
|
||||
}
|
||||
case 'FILTER_OUT': {
|
||||
// If there is a positive filter with the same key and value, remove it.
|
||||
if (queryHasPositiveFilter(queryText, key, value)) {
|
||||
queryText = removePositiveLabelFromQuery(queryText, key, value);
|
||||
}
|
||||
// Add the inequality filter to the query.
|
||||
queryText = addNegativeFilterToQuery(queryText, key, value);
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return { ...query, query: queryText };
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -108,11 +108,13 @@ When your query includes specific words or expressions to search for, Explore wi
|
||||
|
||||
### Log details view
|
||||
|
||||
In Explore, each log line has an expandable section called **Log details** that can be opened by clicking on the log line. The Log details view provides additional information, including **Fields** and **Links** attached to the log lines, enabling more robust interaction and analysis.
|
||||
In Explore, each log line has an expandable section called **Log details** that can be opened by clicking on the log line. The Log details view provides additional information and exploration options in the form of **Fields** and **Links** attached to the log lines, enabling a more robust interaction and analysis.
|
||||
|
||||
#### Fields
|
||||
|
||||
Within the Log details view, you have the ability to filter displayed fields in two ways: positive filter (to show specific fields) and negative filter (to exclude certain fields). Additionally, you can select a unique field to visualize instead of the whole log line by clicking on the eye icon. Finally, each field has a stats icon to display ad-hoc statistics in relation to all displayed logs.
|
||||
Within the Log details view, you have the ability to filter displayed fields in two ways: a positive filter (to focus on an specific field) and a negative filter (to exclude certain fields). These filters will update the corresponding query that produced the log line, adding equality and inequality expressions accordingly. If the data source has support, as it's the case for Loki and Elasticsearch, log details will check if the field is already present in the current query showing and active state (for positive filters only), allowing you to toggle it off the query, or changing the filter expression from positive to negative.
|
||||
|
||||
Additionally, you can select a subset of fields to visualize in the logs list instead of the complete log line by clicking on the eye icon. Finally, each field has a stats icon to display ad-hoc statistics in relation to all displayed logs.
|
||||
|
||||
#### Links
|
||||
|
||||
|
||||
@ -44,6 +44,7 @@ Some features are enabled by default. You can disable these feature by setting t
|
||||
| `enableElasticsearchBackendQuerying` | Enable the processing of queries and responses in the Elasticsearch data source through backend | Yes |
|
||||
| `advancedDataSourcePicker` | Enable a new data source picker with contextual information, recently used order and advanced mode | Yes |
|
||||
| `transformationsRedesign` | Enables the transformations redesign | Yes |
|
||||
| `toggleLabelsInLogsUI` | Enable toggleable filters in log details view | Yes |
|
||||
| `azureMonitorDataplane` | Adds dataplane compliant frame metadata in the Azure Monitor datasource | Yes |
|
||||
|
||||
## Preview feature toggles
|
||||
@ -120,7 +121,6 @@ Experimental features might be changed or removed without prior notice.
|
||||
| `prometheusIncrementalQueryInstrumentation` | Adds RudderStack events to incremental queries |
|
||||
| `logsExploreTableVisualisation` | A table visualisation for logs in Explore |
|
||||
| `awsDatasourcesTempCredentials` | Support temporary security credentials in AWS plugins for Grafana Cloud customers |
|
||||
| `toggleLabelsInLogsUI` | Enable toggleable filters in log details view |
|
||||
| `mlExpressions` | Enable support for Machine Learning in server-side expressions |
|
||||
| `traceQLStreaming` | Enables response streaming of TraceQL queries of the Tempo data source |
|
||||
| `metricsSummary` | Enables metrics summary queries in the Tempo data source |
|
||||
|
||||
@ -602,8 +602,9 @@ var (
|
||||
{
|
||||
Name: "toggleLabelsInLogsUI",
|
||||
Description: "Enable toggleable filters in log details view",
|
||||
Stage: FeatureStageExperimental,
|
||||
Stage: FeatureStageGeneralAvailability,
|
||||
FrontendOnly: true,
|
||||
Expression: "true", // enabled by default
|
||||
Owner: grafanaObservabilityLogsSquad,
|
||||
},
|
||||
{
|
||||
|
||||
@ -86,7 +86,7 @@ prometheusIncrementalQueryInstrumentation,experimental,@grafana/observability-me
|
||||
logsExploreTableVisualisation,experimental,@grafana/observability-logs,false,false,false,true
|
||||
awsDatasourcesTempCredentials,experimental,@grafana/aws-datasources,false,false,false,false
|
||||
transformationsRedesign,GA,@grafana/observability-metrics,false,false,false,true
|
||||
toggleLabelsInLogsUI,experimental,@grafana/observability-logs,false,false,false,true
|
||||
toggleLabelsInLogsUI,GA,@grafana/observability-logs,false,false,false,true
|
||||
mlExpressions,experimental,@grafana/alerting-squad,false,false,false,false
|
||||
traceQLStreaming,experimental,@grafana/observability-traces-and-profiling,false,false,false,true
|
||||
metricsSummary,experimental,@grafana/observability-traces-and-profiling,false,false,false,true
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user