Compare commits

..

2 Commits

Author SHA1 Message Date
Paul Marbach
e1100a4c35 Legends: Revert scrolled truncated legend for now (#116219)
Legends: Revert scrolled truncated legend for now (#116217)

* Revert "PieChart: Fix right-oriented legends (#116084)"

This reverts commit 0c8c886930.

* Revert "TimeSeries: Fix truncated label text in legend table mode (#115647)"

This reverts commit f91efcfe2c.
2026-01-13 18:18:30 -03:00
Paul Marbach
ca114a9e85 PieChart: Fix right-oriented legends (#116084) (#116160)
* chore(gdev-dashboard): reproduce CSS layout bug in a panel

* fix(table-legend): tweak CSS for right oriented table legend in piechart

* chore(gdev-dashboard): update migrated dashboard file to match

Co-authored-by: Jesse David Peterson <jesdavpet@users.noreply.github.com>
2026-01-12 22:25:14 +01:00
38 changed files with 130 additions and 651 deletions

View File

@@ -13,7 +13,7 @@ import (
// schema is unexported to prevent accidental overwrites // schema is unexported to prevent accidental overwrites
var ( var (
schemaReceiver = resource.NewSimpleSchema("notifications.alerting.grafana.app", "v0alpha1", NewReceiver(), &ReceiverList{}, resource.WithKind("Receiver"), schemaReceiver = resource.NewSimpleSchema("notifications.alerting.grafana.app", "v0alpha1", NewReceiver(), &ReceiverList{}, resource.WithKind("Receiver"),
resource.WithPlural("receivers"), resource.WithScope(resource.NamespacedScope), resource.WithSelectableFields([]resource.SelectableField{resource.SelectableField{ resource.WithPlural("receivers"), resource.WithScope(resource.NamespacedScope), resource.WithSelectableFields([]resource.SelectableField{{
FieldSelector: "spec.title", FieldSelector: "spec.title",
FieldValueFunc: func(o resource.Object) (string, error) { FieldValueFunc: func(o resource.Object) (string, error) {
cast, ok := o.(*Receiver) cast, ok := o.(*Receiver)

View File

@@ -790,8 +790,6 @@ VariableOption: {
text: string | [...string] text: string | [...string]
// Value of the option // Value of the option
value: string | [...string] value: string | [...string]
// Additional properties for multi-props variables
properties?: {[string]: string}
} }
// Query variable specification // Query variable specification

View File

@@ -794,8 +794,6 @@ VariableOption: {
text: string | [...string] text: string | [...string]
// Value of the option // Value of the option
value: string | [...string] value: string | [...string]
// Additional properties for multi-props variables
properties?: {[string]: string}
} }
// Query variable specification // Query variable specification

View File

@@ -301,8 +301,6 @@ var _ resource.ListObject = &DashboardList{}
// Copy methods for all subresource types // Copy methods for all subresource types
// DeepCopy creates a full deep copy of DashboardStatus // DeepCopy creates a full deep copy of DashboardStatus
func (s *DashboardStatus) DeepCopy() *DashboardStatus { func (s *DashboardStatus) DeepCopy() *DashboardStatus {
cpy := &DashboardStatus{} cpy := &DashboardStatus{}

View File

@@ -301,8 +301,6 @@ var _ resource.ListObject = &DashboardList{}
// Copy methods for all subresource types // Copy methods for all subresource types
// DeepCopy creates a full deep copy of DashboardStatus // DeepCopy creates a full deep copy of DashboardStatus
func (s *DashboardStatus) DeepCopy() *DashboardStatus { func (s *DashboardStatus) DeepCopy() *DashboardStatus {
cpy := &DashboardStatus{} cpy := &DashboardStatus{}

View File

@@ -794,8 +794,6 @@ VariableOption: {
text: string | [...string] text: string | [...string]
// Value of the option // Value of the option
value: string | [...string] value: string | [...string]
// Additional properties for multi-props variables
properties?: {[string]: string}
} }
// Query variable specification // Query variable specification

View File

@@ -1411,8 +1411,6 @@ type DashboardVariableOption struct {
Text DashboardStringOrArrayOfString `json:"text"` Text DashboardStringOrArrayOfString `json:"text"`
// Value of the option // Value of the option
Value DashboardStringOrArrayOfString `json:"value"` Value DashboardStringOrArrayOfString `json:"value"`
// Additional properties for multi-props variables
Properties map[string]string `json:"properties,omitempty"`
} }
// NewDashboardVariableOption creates a new DashboardVariableOption object. // NewDashboardVariableOption creates a new DashboardVariableOption object.

View File

@@ -798,8 +798,6 @@ VariableOption: {
text: string | [...string] text: string | [...string]
// Value of the option // Value of the option
value: string | [...string] value: string | [...string]
// Additional properties for multi-props variables
properties?: {[string]: string}
} }
// Query variable specification // Query variable specification

View File

@@ -1414,8 +1414,6 @@ type DashboardVariableOption struct {
Text DashboardStringOrArrayOfString `json:"text"` Text DashboardStringOrArrayOfString `json:"text"`
// Value of the option // Value of the option
Value DashboardStringOrArrayOfString `json:"value"` Value DashboardStringOrArrayOfString `json:"value"`
// Additional properties for multi-props variables
Properties map[string]string `json:"properties,omitempty"`
} }
// NewDashboardVariableOption creates a new DashboardVariableOption object. // NewDashboardVariableOption creates a new DashboardVariableOption object.

File diff suppressed because one or more lines are too long

View File

@@ -18,8 +18,6 @@ import (
v1beta1 "github.com/grafana/grafana/apps/folder/pkg/apis/folder/v1beta1" v1beta1 "github.com/grafana/grafana/apps/folder/pkg/apis/folder/v1beta1"
) )
var ()
var appManifestData = app.ManifestData{ var appManifestData = app.ManifestData{
AppName: "folder", AppName: "folder",
Group: "folder.grafana.app", Group: "folder.grafana.app",

View File

@@ -41,13 +41,9 @@ Select a group to expand it and view the list of alert rules within that group.
The list view includes a number of filters to simplify managing large volumes of alerts. The list view includes a number of filters to simplify managing large volumes of alerts.
## Filter and save searches
Click the **Filter** button to open the filter popup. You can filter by name, label, folder/namespace, evaluation group, data source, contact point, rule source, rule state, rule type, and the health of the alert rule from the popup menu. Click **Apply** at the bottom of the filter popup to enact the filters as you search. Click the **Filter** button to open the filter popup. You can filter by name, label, folder/namespace, evaluation group, data source, contact point, rule source, rule state, rule type, and the health of the alert rule from the popup menu. Click **Apply** at the bottom of the filter popup to enact the filters as you search.
Click the **Saved searches** button to open the list of previously saved searches, or click **+ Save current search** to add your current search to the saved searches list. You can also rename a saved search or set it as a default search. When you set a saved search as the default search, the Alert rules page opens with the search applied. {{< figure src="/media/docs/alerting/alerting-list-view-filter.png" max-width="750px" alt="Alert rule filter options" >}}
{{< figure src="/media/docs/alerting/alerting-saved-searches.png" max-width="750px" alt="Alert rule filter options" >}}
## Change alert rules list view ## Change alert rules list view

View File

@@ -23,8 +23,6 @@ killercoda:
This tutorial is a continuation of the [Get started with Grafana Alerting - Route alerts using dynamic labels](http://www.grafana.com/tutorials/alerting-get-started-pt5/) tutorial. This tutorial is a continuation of the [Get started with Grafana Alerting - Route alerts using dynamic labels](http://www.grafana.com/tutorials/alerting-get-started-pt5/) tutorial.
{{< youtube id="mqj_hN24zLU" >}}
<!-- USE CASE --> <!-- USE CASE -->
In this tutorial you will learn how to: In this tutorial you will learn how to:

View File

@@ -400,6 +400,10 @@ export interface FeatureToggles {
*/ */
tableSharedCrosshair?: boolean; tableSharedCrosshair?: boolean;
/** /**
* Use the kubernetes API for feature toggle management in the frontend
*/
kubernetesFeatureToggles?: boolean;
/**
* Enabled grafana cloud specific RBAC roles * Enabled grafana cloud specific RBAC roles
*/ */
cloudRBACRoles?: boolean; cloudRBACRoles?: boolean;

View File

@@ -1,174 +0,0 @@
import { useEffect, useState } from 'react';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import {
CustomVariableSupport,
DataQueryRequest,
DataQueryResponse,
QueryEditorProps,
Field,
DataFrame,
MetricFindValue,
} from '@grafana/data';
import { t } from '@grafana/i18n';
import { EditorMode, EditorRows, EditorRow, EditorField } from '@grafana/plugin-ui';
import { Combobox, ComboboxOption } from '@grafana/ui';
import { SqlQueryEditorLazy } from './components/QueryEditorLazy';
import { SqlDatasource } from './datasource/SqlDatasource';
import { applyQueryDefaults } from './defaults';
import { QueryFormat, type SQLQuery, type SQLOptions, type SQLQueryMeta } from './types';
type SQLVariableQuery = { query: string } & SQLQuery;
const refId = 'SQLVariableQueryEditor-VariableQuery';
export class SQLVariableSupport extends CustomVariableSupport<SqlDatasource, SQLQuery> {
constructor(readonly datasource: SqlDatasource) {
super();
}
editor = SQLVariablesQueryEditor;
query(request: DataQueryRequest<SQLQuery>): Observable<DataQueryResponse> {
if (request.targets.length < 1) {
throw new Error('no variable query found');
}
const updatedQuery = migrateVariableQuery(request.targets[0]);
return this.datasource.query({ ...request, targets: [updatedQuery] }).pipe(
map((d: DataQueryResponse) => {
const frames = d.data || [];
const metricFindValues = convertDataFramesToMetricFindValues(frames, updatedQuery.meta);
return { data: metricFindValues };
})
);
}
getDefaultQuery(): Partial<SQLQuery> {
return applyQueryDefaults({ refId, editorMode: EditorMode.Builder, format: QueryFormat.Table });
}
}
type SQLVariableQueryEditorProps = QueryEditorProps<SqlDatasource, SQLQuery, SQLOptions>;
const SQLVariablesQueryEditor = (props: SQLVariableQueryEditorProps) => {
const query = migrateVariableQuery(props.query);
return (
<>
<SqlQueryEditorLazy {...props} query={query} />
<FieldMapping {...props} query={query} />
</>
);
};
const FieldMapping = (props: SQLVariableQueryEditorProps) => {
const { query, datasource, onChange } = props;
const [choices, setChoices] = useState<ComboboxOption[]>([]);
useEffect(() => {
let isActive = true;
// eslint-disable-next-line
const subscription = datasource.query({ targets: [query] } as DataQueryRequest<SQLQuery>).subscribe({
next: (response) => {
if (!isActive) {
return;
}
const fieldNames = (response.data[0] || { fields: [] }).fields.map((f: Field) => f.name);
setChoices(fieldNames.map((f: Field) => ({ value: f, label: f })));
},
error: () => {
if (isActive) {
setChoices([]);
}
},
});
return () => {
isActive = false;
subscription.unsubscribe();
};
}, [datasource, query]);
const onMetaPropChange = <Key extends keyof SQLQueryMeta, Value extends SQLQueryMeta[Key]>(
key: Key,
value: Value,
meta = query.meta || {}
) => {
onChange({ ...query, meta: { ...meta, [key]: value } });
};
return (
<EditorRows>
<EditorRow>
<EditorField label={t('grafana-sql.components.query-meta.variables.valueField', 'Value Field')}>
<Combobox
isClearable
value={query.meta?.valueField}
onChange={(e) => onMetaPropChange('valueField', e?.value)}
width={40}
options={choices}
/>
</EditorField>
<EditorField label={t('grafana-sql.components.query-meta.variables.textField', 'Text Field')}>
<Combobox
isClearable
value={query.meta?.textField}
onChange={(e) => onMetaPropChange('textField', e?.value)}
width={40}
options={choices}
/>
</EditorField>
</EditorRow>
</EditorRows>
);
};
const migrateVariableQuery = (rawQuery: string | SQLQuery): SQLVariableQuery => {
if (typeof rawQuery !== 'string') {
return {
...rawQuery,
refId: rawQuery.refId || refId,
query: rawQuery.rawSql || '',
};
}
return {
...applyQueryDefaults({
refId,
rawSql: rawQuery,
editorMode: rawQuery ? EditorMode.Code : EditorMode.Builder,
}),
query: rawQuery,
};
};
const convertDataFramesToMetricFindValues = (frames: DataFrame[], meta?: SQLQueryMeta): MetricFindValue[] => {
if (!frames.length) {
throw new Error('no results found');
}
const frame = frames[0];
const fields = frame.fields;
if (fields.length < 1) {
throw new Error('no fields found in the response');
}
let textField = fields.find((f) => f.name === '__text');
let valueField = fields.find((f) => f.name === '__value');
if (meta?.textField) {
textField = fields.find((f) => f.name === meta.textField);
}
if (meta?.valueField) {
valueField = fields.find((f) => f.name === meta.valueField);
}
const resolvedTextField = textField || valueField || fields[0];
const resolvedValueField = valueField || textField || fields[0];
const results: MetricFindValue[] = [];
const rowCount = frame.length;
for (let i = 0; i < rowCount; i++) {
const text = String(resolvedTextField.values[i] ?? '');
const value = String(resolvedValueField.values[i] ?? '');
const properties: Record<string, string> = {};
for (const field of fields) {
properties[field.name] = String(field.values[i] ?? '');
}
results.push({ text, value, properties });
}
return results;
};

View File

@@ -21,7 +21,6 @@ export { TLSSecretsConfig } from './components/configuration/TLSSecretsConfig';
export { useMigrateDatabaseFields } from './components/configuration/useMigrateDatabaseFields'; export { useMigrateDatabaseFields } from './components/configuration/useMigrateDatabaseFields';
export { SqlQueryEditorLazy } from './components/QueryEditorLazy'; export { SqlQueryEditorLazy } from './components/QueryEditorLazy';
export type { QueryHeaderProps } from './components/QueryHeader'; export type { QueryHeaderProps } from './components/QueryHeader';
export { SQLVariableSupport } from './SQLVariableSupport';
export { createSelectClause, haveColumns } from './utils/sql.utils'; export { createSelectClause, haveColumns } from './utils/sql.utils';
export { applyQueryDefaults } from './defaults'; export { applyQueryDefaults } from './defaults';
export { makeVariable } from './utils/testHelpers'; export { makeVariable } from './utils/testHelpers';

View File

@@ -69,12 +69,6 @@
"placeholder-select-format": "Select format", "placeholder-select-format": "Select format",
"run-query": "Run query" "run-query": "Run query"
}, },
"query-meta": {
"variables": {
"textField": "Text Field",
"valueField": "Value Field"
}
},
"query-toolbox": { "query-toolbox": {
"content-hit-ctrlcmdreturn-to-run-query": "Hit CTRL/CMD+Return to run query", "content-hit-ctrlcmdreturn-to-run-query": "Hit CTRL/CMD+Return to run query",
"tooltip-collapse": "Collapse editor", "tooltip-collapse": "Collapse editor",

View File

@@ -50,8 +50,6 @@ export enum QueryFormat {
Table = 'table', Table = 'table',
} }
export type SQLQueryMeta = { valueField?: string; textField?: string };
export interface SQLQuery extends DataQuery { export interface SQLQuery extends DataQuery {
alias?: string; alias?: string;
format?: QueryFormat; format?: QueryFormat;
@@ -61,7 +59,6 @@ export interface SQLQuery extends DataQuery {
sql?: SQLExpression; sql?: SQLExpression;
editorMode?: EditorMode; editorMode?: EditorMode;
rawQuery?: boolean; rawQuery?: boolean;
meta?: SQLQueryMeta;
} }
export interface NameValue { export interface NameValue {

View File

@@ -1,78 +0,0 @@
import { render, screen } from '@testing-library/react';
import { VizLegendTable } from './VizLegendTable';
import { VizLegendItem } from './types';
describe('VizLegendTable', () => {
const mockItems: VizLegendItem[] = [
{ label: 'Series 1', color: 'red', yAxis: 1 },
{ label: 'Series 2', color: 'blue', yAxis: 1 },
{ label: 'Series 3', color: 'green', yAxis: 1 },
];
it('renders without crashing', () => {
const { container } = render(<VizLegendTable items={mockItems} placement="bottom" />);
expect(container.querySelector('table')).toBeInTheDocument();
});
it('renders all items', () => {
render(<VizLegendTable items={mockItems} placement="bottom" />);
expect(screen.getByText('Series 1')).toBeInTheDocument();
expect(screen.getByText('Series 2')).toBeInTheDocument();
expect(screen.getByText('Series 3')).toBeInTheDocument();
});
it('renders table headers when items have display values', () => {
const itemsWithStats: VizLegendItem[] = [
{
label: 'Series 1',
color: 'red',
yAxis: 1,
getDisplayValues: () => [
{ numeric: 100, text: '100', title: 'Max' },
{ numeric: 50, text: '50', title: 'Min' },
],
},
];
render(<VizLegendTable items={itemsWithStats} placement="bottom" />);
expect(screen.getByText('Max')).toBeInTheDocument();
expect(screen.getByText('Min')).toBeInTheDocument();
});
it('renders sort icon when sorted', () => {
const { container } = render(
<VizLegendTable items={mockItems} placement="bottom" sortBy="Name" sortDesc={false} />
);
expect(container.querySelector('svg')).toBeInTheDocument();
});
it('calls onToggleSort when header is clicked', () => {
const onToggleSort = jest.fn();
render(<VizLegendTable items={mockItems} placement="bottom" onToggleSort={onToggleSort} isSortable={true} />);
const header = screen.getByText('Name');
header.click();
expect(onToggleSort).toHaveBeenCalledWith('Name');
});
it('does not call onToggleSort when not sortable', () => {
const onToggleSort = jest.fn();
render(<VizLegendTable items={mockItems} placement="bottom" onToggleSort={onToggleSort} isSortable={false} />);
const header = screen.getByText('Name');
header.click();
expect(onToggleSort).not.toHaveBeenCalled();
});
it('renders with long labels', () => {
const itemsWithLongLabels: VizLegendItem[] = [
{
label: 'This is a very long series name that should be scrollable within its table cell',
color: 'red',
yAxis: 1,
},
];
render(<VizLegendTable items={itemsWithLongLabels} placement="bottom" />);
expect(
screen.getByText('This is a very long series name that should be scrollable within its table cell')
).toBeInTheDocument();
});
});

View File

@@ -119,6 +119,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
table: css({ table: css({
width: '100%', width: '100%',
'th:first-child': { 'th:first-child': {
width: '100%',
borderBottom: `1px solid ${theme.colors.border.weak}`, borderBottom: `1px solid ${theme.colors.border.weak}`,
}, },
}), }),

View File

@@ -1,112 +0,0 @@
import { render, screen } from '@testing-library/react';
import { LegendTableItem } from './VizLegendTableItem';
import { VizLegendItem } from './types';
describe('LegendTableItem', () => {
const mockItem: VizLegendItem = {
label: 'Series 1',
color: 'red',
yAxis: 1,
};
it('renders without crashing', () => {
const { container } = render(
<table>
<tbody>
<LegendTableItem item={mockItem} />
</tbody>
</table>
);
expect(container.querySelector('tr')).toBeInTheDocument();
});
it('renders label text', () => {
render(
<table>
<tbody>
<LegendTableItem item={mockItem} />
</tbody>
</table>
);
expect(screen.getByText('Series 1')).toBeInTheDocument();
});
it('renders with long label text', () => {
const longLabelItem: VizLegendItem = {
...mockItem,
label: 'This is a very long series name that should be scrollable in the table cell',
};
render(
<table>
<tbody>
<LegendTableItem item={longLabelItem} />
</tbody>
</table>
);
expect(
screen.getByText('This is a very long series name that should be scrollable in the table cell')
).toBeInTheDocument();
});
it('renders stat values when provided', () => {
const itemWithStats: VizLegendItem = {
...mockItem,
getDisplayValues: () => [
{ numeric: 100, text: '100', title: 'Max' },
{ numeric: 50, text: '50', title: 'Min' },
],
};
render(
<table>
<tbody>
<LegendTableItem item={itemWithStats} />
</tbody>
</table>
);
expect(screen.getByText('100')).toBeInTheDocument();
expect(screen.getByText('50')).toBeInTheDocument();
});
it('renders right y-axis indicator when yAxis is 2', () => {
const rightAxisItem: VizLegendItem = {
...mockItem,
yAxis: 2,
};
render(
<table>
<tbody>
<LegendTableItem item={rightAxisItem} />
</tbody>
</table>
);
expect(screen.getByText('(right y-axis)')).toBeInTheDocument();
});
it('calls onLabelClick when label is clicked', () => {
const onLabelClick = jest.fn();
render(
<table>
<tbody>
<LegendTableItem item={mockItem} onLabelClick={onLabelClick} />
</tbody>
</table>
);
const button = screen.getByRole('button');
button.click();
expect(onLabelClick).toHaveBeenCalledWith(mockItem, expect.any(Object));
});
it('does not call onClick when readonly', () => {
const onLabelClick = jest.fn();
render(
<table>
<tbody>
<LegendTableItem item={mockItem} onLabelClick={onLabelClick} readonly={true} />
</tbody>
</table>
);
const button = screen.getByRole('button');
expect(button).toBeDisabled();
});
});

View File

@@ -69,7 +69,7 @@ export const LegendTableItem = ({
return ( return (
<tr className={cx(styles.row, className)}> <tr className={cx(styles.row, className)}>
<td className={styles.labelCell}> <td>
<span className={styles.itemWrapper}> <span className={styles.itemWrapper}>
<VizLegendSeriesIcon <VizLegendSeriesIcon
color={item.color} color={item.color}
@@ -77,7 +77,6 @@ export const LegendTableItem = ({
readonly={readonly} readonly={readonly}
lineStyle={item.lineStyle} lineStyle={item.lineStyle}
/> />
<div className={styles.labelCellInner}>
<button <button
disabled={readonly} disabled={readonly}
type="button" type="button"
@@ -96,7 +95,6 @@ export const LegendTableItem = ({
</span> </span>
)} )}
</button> </button>
</div>
</span> </span>
</td> </td>
{item.getDisplayValues && {item.getDisplayValues &&
@@ -130,27 +128,6 @@ const getStyles = (theme: GrafanaTheme2) => {
background: rowHoverBg, background: rowHoverBg,
}, },
}), }),
labelCell: css({
label: 'LegendLabelCell',
maxWidth: 0,
width: '100%',
}),
labelCellInner: css({
label: 'LegendLabelCellInner',
display: 'block',
flex: 1,
minWidth: 0,
overflowX: 'auto',
overflowY: 'hidden',
paddingRight: theme.spacing(3),
scrollbarWidth: 'none',
msOverflowStyle: 'none',
maskImage: `linear-gradient(to right, black calc(100% - ${theme.spacing(3)}), transparent 100%)`,
WebkitMaskImage: `linear-gradient(to right, black calc(100% - ${theme.spacing(3)}), transparent 100%)`,
'&::-webkit-scrollbar': {
display: 'none',
},
}),
label: css({ label: css({
label: 'LegendLabel', label: 'LegendLabel',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
@@ -158,6 +135,9 @@ const getStyles = (theme: GrafanaTheme2) => {
border: 'none', border: 'none',
fontSize: 'inherit', fontSize: 'inherit',
padding: 0, padding: 0,
maxWidth: '600px',
textOverflow: 'ellipsis',
overflow: 'hidden',
userSelect: 'text', userSelect: 'text',
}), }),
labelDisabled: css({ labelDisabled: css({

View File

@@ -650,6 +650,13 @@ var (
Stage: FeatureStageExperimental, Stage: FeatureStageExperimental,
Owner: grafanaDatavizSquad, Owner: grafanaDatavizSquad,
}, },
{
Name: "kubernetesFeatureToggles",
Description: "Use the kubernetes API for feature toggle management in the frontend",
Stage: FeatureStageExperimental,
FrontendOnly: true,
Owner: grafanaOperatorExperienceSquad,
},
{ {
Name: "cloudRBACRoles", Name: "cloudRBACRoles",
Description: "Enabled grafana cloud specific RBAC roles", Description: "Enabled grafana cloud specific RBAC roles",

View File

@@ -90,6 +90,7 @@ pdfTables,preview,@grafana/grafana-operator-experience-squad,false,false,false
canvasPanelPanZoom,preview,@grafana/dataviz-squad,false,false,true canvasPanelPanZoom,preview,@grafana/dataviz-squad,false,false,true
timeComparison,experimental,@grafana/dataviz-squad,false,false,true timeComparison,experimental,@grafana/dataviz-squad,false,false,true
tableSharedCrosshair,experimental,@grafana/dataviz-squad,false,false,true tableSharedCrosshair,experimental,@grafana/dataviz-squad,false,false,true
kubernetesFeatureToggles,experimental,@grafana/grafana-operator-experience-squad,false,false,true
cloudRBACRoles,preview,@grafana/identity-access-team,false,true,false cloudRBACRoles,preview,@grafana/identity-access-team,false,true,false
alertingQueryOptimization,GA,@grafana/alerting-squad,false,false,false alertingQueryOptimization,GA,@grafana/alerting-squad,false,false,false
jitterAlertRulesWithinGroups,preview,@grafana/alerting-squad,false,true,false jitterAlertRulesWithinGroups,preview,@grafana/alerting-squad,false,true,false
1 Name Stage Owner requiresDevMode RequiresRestart FrontendOnly
90 canvasPanelPanZoom preview @grafana/dataviz-squad false false true
91 timeComparison experimental @grafana/dataviz-squad false false true
92 tableSharedCrosshair experimental @grafana/dataviz-squad false false true
93 kubernetesFeatureToggles experimental @grafana/grafana-operator-experience-squad false false true
94 cloudRBACRoles preview @grafana/identity-access-team false true false
95 alertingQueryOptimization GA @grafana/alerting-squad false false false
96 jitterAlertRulesWithinGroups preview @grafana/alerting-squad false true false

View File

@@ -2044,8 +2044,7 @@
"metadata": { "metadata": {
"name": "kubernetesFeatureToggles", "name": "kubernetesFeatureToggles",
"resourceVersion": "1764664939750", "resourceVersion": "1764664939750",
"creationTimestamp": "2024-01-18T05:32:44Z", "creationTimestamp": "2024-01-18T05:32:44Z"
"deletionTimestamp": "2026-01-07T12:02:51Z"
}, },
"spec": { "spec": {
"description": "Use the kubernetes API for feature toggle management in the frontend", "description": "Use the kubernetes API for feature toggle management in the frontend",

View File

@@ -3,8 +3,7 @@ import { render, screen, userEvent, waitFor } from 'test/test-utils';
import { byLabelText, byRole, byText } from 'testing-library-selector'; import { byLabelText, byRole, byText } from 'testing-library-selector';
import { setPluginLinksHook } from '@grafana/runtime'; import { setPluginLinksHook } from '@grafana/runtime';
import server from '@grafana/test-utils/server'; import { setupMswServer } from 'app/features/alerting/unified/mockApi';
import { mockAlertRuleApi, setupMswServer } from 'app/features/alerting/unified/mockApi';
import { AlertManagerDataSourceJsonData } from 'app/plugins/datasource/alertmanager/types'; import { AlertManagerDataSourceJsonData } from 'app/plugins/datasource/alertmanager/types';
import { AccessControlAction } from 'app/types/accessControl'; import { AccessControlAction } from 'app/types/accessControl';
import { CombinedRule, RuleIdentifier } from 'app/types/unified-alerting'; import { CombinedRule, RuleIdentifier } from 'app/types/unified-alerting';
@@ -23,7 +22,6 @@ import {
mockPluginLinkExtension, mockPluginLinkExtension,
mockPromAlertingRule, mockPromAlertingRule,
mockRulerGrafanaRecordingRule, mockRulerGrafanaRecordingRule,
mockRulerGrafanaRule,
} from '../../mocks'; } from '../../mocks';
import { grafanaRulerRule } from '../../mocks/grafanaRulerApi'; import { grafanaRulerRule } from '../../mocks/grafanaRulerApi';
import { grantPermissionsHelper } from '../../test/test-utils'; import { grantPermissionsHelper } from '../../test/test-utils';
@@ -132,8 +130,6 @@ const dataSources = {
}; };
describe('RuleViewer', () => { describe('RuleViewer', () => {
const api = mockAlertRuleApi(server);
beforeEach(() => { beforeEach(() => {
setupDataSources(...Object.values(dataSources)); setupDataSources(...Object.values(dataSources));
}); });
@@ -253,22 +249,19 @@ describe('RuleViewer', () => {
expect(screen.getAllByRole('row')).toHaveLength(7); expect(screen.getAllByRole('row')).toHaveLength(7);
expect(screen.getAllByRole('row')[1]).toHaveTextContent(/6Provisioning2025-01-18 04:35:17/i); expect(screen.getAllByRole('row')[1]).toHaveTextContent(/6Provisioning2025-01-18 04:35:17/i);
expect(screen.getAllByRole('row')[1]).toHaveTextContent('Updated by provisioning service'); expect(screen.getAllByRole('row')[1]).toHaveTextContent('+3-3Latest');
expect(screen.getAllByRole('row')[1]).toHaveTextContent('+4-3Latest');
expect(screen.getAllByRole('row')[2]).toHaveTextContent(/5Alerting2025-01-17 04:35:17/i); expect(screen.getAllByRole('row')[2]).toHaveTextContent(/5Alerting2025-01-17 04:35:17/i);
expect(screen.getAllByRole('row')[2]).toHaveTextContent('+5-6'); expect(screen.getAllByRole('row')[2]).toHaveTextContent('+5-5');
expect(screen.getAllByRole('row')[3]).toHaveTextContent(/4different user2025-01-16 04:35:17/i); expect(screen.getAllByRole('row')[3]).toHaveTextContent(/4different user2025-01-16 04:35:17/i);
expect(screen.getAllByRole('row')[3]).toHaveTextContent('Changed alert title and thresholds'); expect(screen.getAllByRole('row')[3]).toHaveTextContent('+5-5');
expect(screen.getAllByRole('row')[3]).toHaveTextContent('+6-5');
expect(screen.getAllByRole('row')[4]).toHaveTextContent(/3user12025-01-15 04:35:17/i); expect(screen.getAllByRole('row')[4]).toHaveTextContent(/3user12025-01-15 04:35:17/i);
expect(screen.getAllByRole('row')[4]).toHaveTextContent('+5-10'); expect(screen.getAllByRole('row')[4]).toHaveTextContent('+5-9');
expect(screen.getAllByRole('row')[5]).toHaveTextContent(/2User ID foo2025-01-14 04:35:17/i); expect(screen.getAllByRole('row')[5]).toHaveTextContent(/2User ID foo2025-01-14 04:35:17/i);
expect(screen.getAllByRole('row')[5]).toHaveTextContent('Updated evaluation interval and routing'); expect(screen.getAllByRole('row')[5]).toHaveTextContent('+11-7');
expect(screen.getAllByRole('row')[5]).toHaveTextContent('+12-7');
expect(screen.getAllByRole('row')[6]).toHaveTextContent(/1Unknown 2025-01-13 04:35:17/i); expect(screen.getAllByRole('row')[6]).toHaveTextContent(/1Unknown 2025-01-13 04:35:17/i);
@@ -282,10 +275,9 @@ describe('RuleViewer', () => {
await renderRuleViewer(mockRule, mockRuleIdentifier, ActiveTab.VersionHistory); await renderRuleViewer(mockRule, mockRuleIdentifier, ActiveTab.VersionHistory);
expect(await screen.findByRole('button', { name: /Compare versions/i })).toBeDisabled(); expect(await screen.findByRole('button', { name: /Compare versions/i })).toBeDisabled();
// Check for special updated_by values - use getAllByRole since some text appears in multiple columns expect(screen.getByRole('cell', { name: /provisioning/i })).toBeInTheDocument();
expect(screen.getAllByRole('cell', { name: /provisioning/i }).length).toBeGreaterThan(0); expect(screen.getByRole('cell', { name: /alerting/i })).toBeInTheDocument();
expect(screen.getByRole('cell', { name: /^alerting$/i })).toBeInTheDocument(); expect(screen.getByRole('cell', { name: /Unknown/i })).toBeInTheDocument();
expect(screen.getByRole('cell', { name: /^Unknown$/i })).toBeInTheDocument();
expect(screen.getByRole('cell', { name: /user id foo/i })).toBeInTheDocument(); expect(screen.getByRole('cell', { name: /user id foo/i })).toBeInTheDocument();
}); });
@@ -329,47 +321,6 @@ describe('RuleViewer', () => {
await renderRuleViewer(rule, ruleIdentifier); await renderRuleViewer(rule, ruleIdentifier);
expect(screen.queryByText('Labels')).not.toBeInTheDocument(); expect(screen.queryByText('Labels')).not.toBeInTheDocument();
}); });
it('shows Notes column when versions have messages', async () => {
await renderRuleViewer(mockRule, mockRuleIdentifier, ActiveTab.VersionHistory);
expect(await screen.findByRole('columnheader', { name: /Notes/i })).toBeInTheDocument();
expect(screen.getAllByRole('row')).toHaveLength(7); // 1 header + 6 data rows
expect(screen.getByRole('cell', { name: /Updated by provisioning service/i })).toBeInTheDocument();
expect(screen.getByRole('cell', { name: /Changed alert title and thresholds/i })).toBeInTheDocument();
expect(screen.getByRole('cell', { name: /Updated evaluation interval and routing/i })).toBeInTheDocument();
});
it('does not show Notes column when no versions have messages', async () => {
const versionsWithoutMessages = [
mockRulerGrafanaRule(
{},
{
uid: grafanaRulerRule.grafana_alert.uid,
version: 2,
updated: '2025-01-14T09:35:17.000Z',
updated_by: { uid: 'foo', name: '' },
}
),
mockRulerGrafanaRule(
{},
{
uid: grafanaRulerRule.grafana_alert.uid,
version: 1,
updated: '2025-01-13T09:35:17.000Z',
updated_by: null,
}
),
];
api.getAlertRuleVersionHistory(grafanaRulerRule.grafana_alert.uid, versionsWithoutMessages);
await renderRuleViewer(mockRule, mockRuleIdentifier, ActiveTab.VersionHistory);
await screen.findByRole('button', { name: /Compare versions/i });
expect(screen.getAllByRole('row')).toHaveLength(3); // 1 header + 2 data rows
expect(screen.queryByRole('columnheader', { name: /Notes/i })).not.toBeInTheDocument();
});
}); });
}); });

View File

@@ -1,9 +1,8 @@
import { css } from '@emotion/css';
import { useMemo, useState } from 'react'; import { useMemo, useState } from 'react';
import { dateTimeFormat, dateTimeFormatTimeAgo } from '@grafana/data'; import { dateTimeFormat, dateTimeFormatTimeAgo } from '@grafana/data';
import { Trans, t } from '@grafana/i18n'; import { Trans, t } from '@grafana/i18n';
import { Badge, Button, Checkbox, Column, InteractiveTable, Stack, Text, useStyles2 } from '@grafana/ui'; import { Badge, Button, Checkbox, Column, InteractiveTable, Stack, Text } from '@grafana/ui';
import { GRAFANA_RULES_SOURCE_NAME } from 'app/features/alerting/unified/utils/datasource'; import { GRAFANA_RULES_SOURCE_NAME } from 'app/features/alerting/unified/utils/datasource';
import { computeVersionDiff } from 'app/features/alerting/unified/utils/diff'; import { computeVersionDiff } from 'app/features/alerting/unified/utils/diff';
import { RuleIdentifier } from 'app/types/unified-alerting'; import { RuleIdentifier } from 'app/types/unified-alerting';
@@ -34,7 +33,6 @@ export function VersionHistoryTable({
onRestoreError, onRestoreError,
canRestore, canRestore,
}: VersionHistoryTableProps) { }: VersionHistoryTableProps) {
const styles = useStyles2(getStyles);
const [showConfirmModal, setShowConfirmModal] = useState(false); const [showConfirmModal, setShowConfirmModal] = useState(false);
const [ruleToRestore, setRuleToRestore] = useState<RulerGrafanaRuleDTO<GrafanaRuleDefinition>>(); const [ruleToRestore, setRuleToRestore] = useState<RulerGrafanaRuleDTO<GrafanaRuleDefinition>>();
const ruleToRestoreUid = ruleToRestore?.grafana_alert?.uid ?? ''; const ruleToRestoreUid = ruleToRestore?.grafana_alert?.uid ?? '';
@@ -43,8 +41,6 @@ export function VersionHistoryTable({
[ruleToRestoreUid] [ruleToRestoreUid]
); );
const hasAnyNotes = useMemo(() => ruleVersions.some((v) => v.grafana_alert.message), [ruleVersions]);
const showConfirmation = (ruleToRestore: RulerGrafanaRuleDTO<GrafanaRuleDefinition>) => { const showConfirmation = (ruleToRestore: RulerGrafanaRuleDTO<GrafanaRuleDefinition>) => {
setShowConfirmModal(true); setShowConfirmModal(true);
setRuleToRestore(ruleToRestore); setRuleToRestore(ruleToRestore);
@@ -56,15 +52,6 @@ export function VersionHistoryTable({
const unknown = t('alerting.alertVersionHistory.unknown', 'Unknown'); const unknown = t('alerting.alertVersionHistory.unknown', 'Unknown');
const notesColumn: Column<RulerGrafanaRuleDTO<GrafanaRuleDefinition>> = {
id: 'notes',
header: t('core.versionHistory.table.notes', 'Notes'),
cell: ({ row }) => {
const message = row.original.grafana_alert.message;
return message || null;
},
};
const columns: Array<Column<RulerGrafanaRuleDTO<GrafanaRuleDefinition>>> = [ const columns: Array<Column<RulerGrafanaRuleDTO<GrafanaRuleDefinition>>> = [
{ {
disableGrow: true, disableGrow: true,
@@ -104,12 +91,9 @@ export function VersionHistoryTable({
if (!value) { if (!value) {
return unknown; return unknown;
} }
return ( return dateTimeFormat(value) + ' (' + dateTimeFormatTimeAgo(value) + ')';
<span className={styles.nowrap}>{dateTimeFormat(value) + ' (' + dateTimeFormatTimeAgo(value) + ')'}</span>
);
}, },
}, },
...(hasAnyNotes ? [notesColumn] : []),
{ {
id: 'diff', id: 'diff',
disableGrow: true, disableGrow: true,
@@ -195,9 +179,3 @@ export function VersionHistoryTable({
</> </>
); );
} }
const getStyles = () => ({
nowrap: css({
whiteSpace: 'nowrap',
}),
});

View File

@@ -154,7 +154,6 @@ export const rulerRuleVersionHistoryHandler = () => {
uid: 'service', uid: 'service',
name: '', name: '',
}; };
draft.grafana_alert.message = 'Updated by provisioning service';
}), }),
produce(grafanaRulerRule, (draft: RulerGrafanaRuleDTO<GrafanaRuleDefinition>) => { produce(grafanaRulerRule, (draft: RulerGrafanaRuleDTO<GrafanaRuleDefinition>) => {
draft.grafana_alert.version = 5; draft.grafana_alert.version = 5;
@@ -172,7 +171,6 @@ export const rulerRuleVersionHistoryHandler = () => {
uid: 'different', uid: 'different',
name: 'different user', name: 'different user',
}; };
draft.grafana_alert.message = 'Changed alert title and thresholds';
}), }),
produce(grafanaRulerRule, (draft: RulerGrafanaRuleDTO<GrafanaRuleDefinition>) => { produce(grafanaRulerRule, (draft: RulerGrafanaRuleDTO<GrafanaRuleDefinition>) => {
draft.grafana_alert.version = 3; draft.grafana_alert.version = 3;
@@ -195,7 +193,6 @@ export const rulerRuleVersionHistoryHandler = () => {
uid: 'foo', uid: 'foo',
name: '', name: '',
}; };
draft.grafana_alert.message = 'Updated evaluation interval and routing';
}), }),
produce(grafanaRulerRule, (draft: RulerGrafanaRuleDTO<GrafanaRuleDefinition>) => { produce(grafanaRulerRule, (draft: RulerGrafanaRuleDTO<GrafanaRuleDefinition>) => {
draft.grafana_alert.version = 1; draft.grafana_alert.version = 1;

View File

@@ -284,7 +284,6 @@ function variableValueOptionsToVariableOptions(varState: MultiValueVariable['sta
value: String(o.value), value: String(o.value),
text: o.label, text: o.label,
selected: Array.isArray(varState.value) ? varState.value.includes(o.value) : varState.value === o.value, selected: Array.isArray(varState.value) ? varState.value.includes(o.value) : varState.value === o.value,
...(o.properties && { properties: o.properties }),
})); }));
} }

View File

@@ -33,7 +33,7 @@ import {
useStyles2, useStyles2,
} from '@grafana/ui'; } from '@grafana/ui';
import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR } from '@grafana/ui/internal'; import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR } from '@grafana/ui/internal';
import { DATAPLANE_ID_NAME, LogsFrame } from 'app/features/logs/logsFrame'; import { LogsFrame } from 'app/features/logs/logsFrame';
import { getFieldLinksForExplore } from '../utils/links'; import { getFieldLinksForExplore } from '../utils/links';
@@ -154,9 +154,9 @@ export function LogsTable(props: Props) {
}, },
}); });
// `getLinks` and `applyFieldOverrides` are taken from TableContainer.tsx // `getLinks` and `applyFieldOverrides` are taken from TableContainer.tsx
for (const [fieldIdx, field] of frameWithOverrides.fields.entries()) { for (const [index, field] of frameWithOverrides.fields.entries()) {
// Hide ID field from visualization (it's only needed for row matching) // Hide ID field from visualization (it's only needed for row matching)
if (logsFrame?.idField && (field.name === logsFrame.idField.name || field.name === DATAPLANE_ID_NAME)) { if (logsFrame?.idField && (field.name === logsFrame.idField.name || field.name === 'id')) {
field.config = { field.config = {
...field.config, ...field.config,
custom: { custom: {
@@ -180,7 +180,7 @@ export function LogsTable(props: Props) {
}; };
// For the first field (time), wrap the cell to include action buttons // For the first field (time), wrap the cell to include action buttons
const isFirstField = fieldIdx === 0; const isFirstField = index === 0;
field.config = { field.config = {
...field.config, ...field.config,
@@ -202,6 +202,7 @@ export function LogsTable(props: Props) {
panelState={props.panelState} panelState={props.panelState}
absoluteRange={props.absoluteRange} absoluteRange={props.absoluteRange}
logRows={props.logRows} logRows={props.logRows}
rowIndex={cellProps.rowIndex}
/> />
<span className={styles.firstColumnCell}> <span className={styles.firstColumnCell}>
{cellProps.field.display?.(cellProps.value).text ?? String(cellProps.value)} {cellProps.field.display?.(cellProps.value).text ?? String(cellProps.value)}

View File

@@ -1,5 +1,5 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { useCallback, useState, memo } from 'react'; import { useCallback, useState } from 'react';
import { import {
AbsoluteTimeRange, AbsoluteTimeRange,
@@ -13,7 +13,7 @@ import { t } from '@grafana/i18n';
import { ClipboardButton, CustomCellRendererProps, IconButton, Modal, useTheme2 } from '@grafana/ui'; import { ClipboardButton, CustomCellRendererProps, IconButton, Modal, useTheme2 } from '@grafana/ui';
import { getLogsPermalinkRange } from 'app/core/utils/shortLinks'; import { getLogsPermalinkRange } from 'app/core/utils/shortLinks';
import { getUrlStateFromPaneState } from 'app/features/explore/hooks/useStateSync'; import { getUrlStateFromPaneState } from 'app/features/explore/hooks/useStateSync';
import { LogsFrame, DATAPLANE_ID_NAME } from 'app/features/logs/logsFrame'; import { LogsFrame } from 'app/features/logs/logsFrame';
import { getState } from 'app/store/store'; import { getState } from 'app/store/store';
import { getExploreBaseUrl } from './utils/url'; import { getExploreBaseUrl } from './utils/url';
@@ -28,21 +28,26 @@ interface Props extends CustomCellRendererProps {
index?: number; index?: number;
} }
export const LogsTableActionButtons = memo((props: Props) => { export function LogsTableActionButtons(props: Props) {
const { exploreId, absoluteRange, logRows, rowIndex, panelState, displayedFields, logsFrame, frame } = props; const { exploreId, absoluteRange, logRows, rowIndex, panelState, displayedFields, logsFrame, frame } = props;
const theme = useTheme2(); const theme = useTheme2();
const [isInspecting, setIsInspecting] = useState(false); const [isInspecting, setIsInspecting] = useState(false);
// Get logId from the table frame (frame), not the original logsFrame, because // Get logId from the table frame (frame), not the original logsFrame, because
// the table frame is sorted/transformed and rowIndex refers to the table frame // the table frame is sorted/transformed and rowIndex refers to the table frame
const idFieldName = logsFrame?.idField?.name ?? DATAPLANE_ID_NAME; const idFieldName = logsFrame?.idField?.name ?? 'id';
const idField = frame.fields.find((field) => field.name === idFieldName || field.name === DATAPLANE_ID_NAME); const idField = frame.fields.find((field) => field.name === idFieldName || field.name === 'id');
const logId = idField?.values[rowIndex]; const logId = idField?.values[rowIndex];
const getLineValue = () => { const getLineValue = () => {
const logRowById = logRows?.find((row) => row.rowId === logId); const bodyFieldName = logsFrame?.bodyField?.name;
return logRowById?.raw ?? ''; const bodyField = bodyFieldName
? frame.fields.find((field) => field.name === bodyFieldName)
: frame.fields.find((field) => field.type === 'string');
return bodyField?.values[rowIndex];
}; };
const lineValue = getLineValue();
const styles = getStyles(theme); const styles = getStyles(theme);
// Generate link to the log line // Generate link to the log line
@@ -100,8 +105,9 @@ export const LogsTableActionButtons = memo((props: Props) => {
return ( return (
<> <>
<div className={styles.iconWrapper}> <div className={styles.iconWrapper}>
<div className={styles.inspect}>
<IconButton <IconButton
className={styles.icon} className={styles.inspectButton}
tooltip={t('explore.logs-table.action-buttons.view-log-line', 'View log line')} tooltip={t('explore.logs-table.action-buttons.view-log-line', 'View log line')}
variant="secondary" variant="secondary"
aria-label={t('explore.logs-table.action-buttons.view-log-line', 'View log line')} aria-label={t('explore.logs-table.action-buttons.view-log-line', 'View log line')}
@@ -111,8 +117,10 @@ export const LogsTableActionButtons = memo((props: Props) => {
onClick={handleViewClick} onClick={handleViewClick}
tabIndex={0} tabIndex={0}
/> />
</div>
<div className={styles.inspect}>
<ClipboardButton <ClipboardButton
className={styles.icon} className={styles.clipboardButton}
icon="share-alt" icon="share-alt"
variant="secondary" variant="secondary"
fill="text" fill="text"
@@ -124,15 +132,16 @@ export const LogsTableActionButtons = memo((props: Props) => {
getText={getText} getText={getText}
/> />
</div> </div>
</div>
{isInspecting && ( {isInspecting && (
<Modal <Modal
onDismiss={() => setIsInspecting(false)} onDismiss={() => setIsInspecting(false)}
isOpen={true} isOpen={true}
title={t('explore.logs-table.action-buttons.inspect-value', 'Inspect value')} title={t('explore.logs-table.action-buttons.inspect-value', 'Inspect value')}
> >
<pre>{getLineValue()}</pre> <pre>{lineValue}</pre>
<Modal.ButtonRow> <Modal.ButtonRow>
<ClipboardButton icon="copy" getText={() => getLineValue()}> <ClipboardButton icon="copy" getText={() => lineValue}>
{t('explore.logs-table.action-buttons.copy-to-clipboard', 'Copy to Clipboard')} {t('explore.logs-table.action-buttons.copy-to-clipboard', 'Copy to Clipboard')}
</ClipboardButton> </ClipboardButton>
</Modal.ButtonRow> </Modal.ButtonRow>
@@ -140,11 +149,15 @@ export const LogsTableActionButtons = memo((props: Props) => {
)} )}
</> </>
); );
}); }
LogsTableActionButtons.displayName = 'LogsTableActionButtons'; export const getStyles = (theme: GrafanaTheme2) => ({
clipboardButton: css({
const getStyles = (theme: GrafanaTheme2) => ({ height: '100%',
lineHeight: '1',
padding: 0,
width: '20px',
}),
iconWrapper: css({ iconWrapper: css({
background: theme.colors.background.secondary, background: theme.colors.background.secondary,
boxShadow: theme.shadows.z2, boxShadow: theme.shadows.z2,
@@ -153,50 +166,25 @@ const getStyles = (theme: GrafanaTheme2) => ({
height: '35px', height: '35px',
left: 0, left: 0,
top: 0, top: 0,
padding: 0, padding: `0 ${theme.spacing(0.5)}`,
position: 'absolute', position: 'absolute',
zIndex: 1, zIndex: 1,
alignItems: 'center',
// Fix switching icon direction when cell is numeric (rtl)
direction: 'ltr',
}), }),
icon: css({ inspect: css({
gap: 0, '& button svg': {
margin: 0, marginRight: 'auto',
padding: 0,
borderRadius: theme.shape.radius.default,
width: '28px',
height: '32px',
display: 'inline-flex',
justifyContent: 'center',
'&:before': {
content: '""',
position: 'absolute',
width: 24,
height: 24,
top: 0,
bottom: 0,
left: 0,
right: 0,
margin: 'auto',
borderRadius: theme.shape.radius.default,
backgroundColor: theme.colors.background.primary,
zIndex: -1,
opacity: 0,
[theme.transitions.handleMotion('no-preference', 'reduce')]: {
transitionDuration: '0.2s',
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
transitionProperty: 'opacity',
},
}, },
'&:hover': { '&:hover': {
color: theme.colors.text.link, color: theme.colors.text.link,
cursor: 'pointer', cursor: 'pointer',
background: 'none',
'&:before': {
opacity: 1,
},
}, },
padding: '5px 3px',
}),
inspectButton: css({
borderRadius: theme.shape.radius.default,
display: 'inline-flex',
margin: 0,
overflow: 'hidden',
verticalAlign: 'middle',
}), }),
}); });

View File

@@ -32,7 +32,7 @@ function getField(cache: FieldCache, name: string, fieldType: FieldType): FieldW
const DATAPLANE_TIMESTAMP_NAME = 'timestamp'; const DATAPLANE_TIMESTAMP_NAME = 'timestamp';
const DATAPLANE_BODY_NAME = 'body'; const DATAPLANE_BODY_NAME = 'body';
const DATAPLANE_SEVERITY_NAME = 'severity'; const DATAPLANE_SEVERITY_NAME = 'severity';
export const DATAPLANE_ID_NAME = 'id'; const DATAPLANE_ID_NAME = 'id';
const DATAPLANE_LABELS_NAME = 'labels'; const DATAPLANE_LABELS_NAME = 'labels';
// NOTE: this is a hot fn, we need to avoid allocating new objects here // NOTE: this is a hot fn, we need to avoid allocating new objects here

View File

@@ -80,18 +80,18 @@ const buildLabelPath = (label: string) => {
return label.includes('.') || label.trim().includes(' ') ? `["${label}"]` : `.${label}`; return label.includes('.') || label.trim().includes(' ') ? `["${label}"]` : `.${label}`;
}; };
const isRecord = (value: unknown): value is Record<string, unknown> => {
return typeof value === 'object' && value !== null && !Array.isArray(value);
};
const getVariableValueProperties = (variable: TypedVariableModel): string[] => { const getVariableValueProperties = (variable: TypedVariableModel): string[] => {
function collectFieldPaths(option: Record<string, unknown>, currentPath: string): string[] { if (!('valuesFormat' in variable) || variable.valuesFormat !== 'json') {
return [];
}
function collectFieldPaths(option: Record<string, string>, currentPath: string) {
let paths: string[] = []; let paths: string[] = [];
for (const field in option) { for (const field in option) {
if (option.hasOwnProperty(field)) { if (option.hasOwnProperty(field)) {
const newPath = `${currentPath}.${field}`; const newPath = `${currentPath}.${field}`;
const value = option[field]; const value = option[field];
if (isRecord(value)) { if (typeof value === 'object' && value !== null) {
paths = [...paths, ...collectFieldPaths(value, newPath)]; paths = [...paths, ...collectFieldPaths(value, newPath)];
} }
paths.push(newPath); paths.push(newPath);
@@ -100,23 +100,11 @@ const getVariableValueProperties = (variable: TypedVariableModel): string[] => {
return paths; return paths;
} }
if ('valuesFormat' in variable && variable.valuesFormat === 'json') {
try { try {
return collectFieldPaths(JSON.parse(variable.query)[0], variable.name); return collectFieldPaths(JSON.parse(variable.query)[0], variable.name);
} catch { } catch {
return []; return [];
} }
}
if ('options' in variable && Array.isArray(variable.options) && variable.options.length > 0) {
for (const opt of variable.options) {
if ('properties' in opt && isRecord(opt.properties) && Object.keys(opt.properties).length > 0) {
return collectFieldPaths(opt.properties, variable.name);
}
}
}
return [];
}; };
export const getPanelLinksVariableSuggestions = (): VariableSuggestion[] => [ export const getPanelLinksVariableSuggestions = (): VariableSuggestion[] => [

View File

@@ -11,7 +11,6 @@ import {
SQLQuery, SQLQuery,
SQLSelectableValue, SQLSelectableValue,
SqlDatasource, SqlDatasource,
SQLVariableSupport,
formatSQL, formatSQL,
} from '@grafana/sql'; } from '@grafana/sql';
@@ -26,7 +25,6 @@ export class PostgresDatasource extends SqlDatasource {
constructor(instanceSettings: DataSourceInstanceSettings<PostgresOptions>) { constructor(instanceSettings: DataSourceInstanceSettings<PostgresOptions>) {
super(instanceSettings); super(instanceSettings);
this.variables = new SQLVariableSupport(this);
} }
getQueryModel(target?: SQLQuery, templateSrv?: TemplateSrv, scopedVars?: ScopedVars): PostgresQueryModel { getQueryModel(target?: SQLQuery, templateSrv?: TemplateSrv, scopedVars?: ScopedVars): PostgresQueryModel {

View File

@@ -762,19 +762,6 @@ describe('Tempo service graph view', () => {
]); ]);
}); });
it('should escape span with multi line content correctly', () => {
const spanContent = [
`
SELECT * from "my_table"
WHERE "data_enabled" = 1
ORDER BY "name" ASC`,
];
let escaped = getEscapedRegexValues(getEscapedValues(spanContent));
expect(escaped).toEqual([
'\\n SELECT \\\\* from \\"my_table\\"\\n WHERE \\"data_enabled\\" = 1\\n ORDER BY \\"name\\" ASC',
]);
});
it('should get field config correctly', () => { it('should get field config correctly', () => {
let datasourceUid = 's4Jvz8Qnk'; let datasourceUid = 's4Jvz8Qnk';
let tempoDatasourceUid = 'EbPO1fYnz'; let tempoDatasourceUid = 'EbPO1fYnz';

View File

@@ -1168,7 +1168,7 @@ export function getEscapedRegexValues(values: string[]) {
} }
export function getEscapedValues(values: string[]) { export function getEscapedValues(values: string[]) {
return values.map((value: string) => value.replace(/["\\]/g, '\\$&').replace(/[\n]/g, '\\n')); return values.map((value: string) => value.replace(/["\\]/g, '\\$&'));
} }
export function getFieldConfig( export function getFieldConfig(

View File

@@ -293,7 +293,6 @@ export interface GrafanaRuleDefinition extends PostableGrafanaRuleDefinition {
updated?: string; updated?: string;
updated_by?: UpdatedBy | null; updated_by?: UpdatedBy | null;
version?: number; version?: number;
message?: string;
} }
// types for Grafana-managed recording and alerting rules // types for Grafana-managed recording and alerting rules

View File

@@ -4416,7 +4416,6 @@
}, },
"no-properties-changed": "No relevant properties changed", "no-properties-changed": "No relevant properties changed",
"table": { "table": {
"notes": "Notes",
"updated": "Date", "updated": "Date",
"updatedBy": "Updated By", "updatedBy": "Updated By",
"version": "Version" "version": "Version"