Alerting: fixing so we can edit queries on existing alerting rules. (#34227)

* fixing so old query editors can mutate the query object.

* fixing so angular editors that mutate state works.
This commit is contained in:
Marcus Andersson 2021-05-18 17:53:15 +02:00 committed by GitHub
parent d30efb4651
commit 8b9ff62cbb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 2 deletions

View File

@ -28,6 +28,7 @@ export const QueryOperationAction: React.FC<QueryOperationActionProps> = ({ icon
disabled={!!disabled} disabled={!!disabled}
onClick={onClick} onClick={onClick}
surface="header" surface="header"
type="button"
aria-label={selectors.components.QueryEditorRow.actionButton(title)} aria-label={selectors.components.QueryEditorRow.actionButton(title)}
/> />
); );

View File

@ -28,7 +28,11 @@ export class AlertingQueryRows extends PureComponent<Props, State> {
} }
onRemoveQuery = (query: DataQuery) => { onRemoveQuery = (query: DataQuery) => {
this.props.onQueriesChange(this.props.queries.filter((item) => item.model !== query)); this.props.onQueriesChange(
this.props.queries.filter((item) => {
return item.model.refId !== query.refId;
})
);
}; };
onChangeTimeRange = (timeRange: RelativeTimeRange, index: number) => { onChangeTimeRange = (timeRange: RelativeTimeRange, index: number) => {

View File

@ -13,6 +13,7 @@ import { QueryEditorRow } from '../../query/components/QueryEditorRow';
import { VizWrapper } from '../unified/components/rule-editor/VizWrapper'; import { VizWrapper } from '../unified/components/rule-editor/VizWrapper';
import { isExpressionQuery } from '../../expressions/guards'; import { isExpressionQuery } from '../../expressions/guards';
import { GrafanaQuery } from 'app/types/unified-alerting-dto'; import { GrafanaQuery } from 'app/types/unified-alerting-dto';
import { cloneDeep } from 'lodash';
interface Props { interface Props {
data: PanelData; data: PanelData;
@ -66,7 +67,7 @@ export const AlertingQueryWrapper: FC<Props> = ({
index={index} index={index}
key={query.refId} key={query.refId}
data={data} data={data}
query={query.model} query={cloneDeep(query.model)}
onChange={(query) => onChangeQuery(query, index)} onChange={(query) => onChangeQuery(query, index)}
onRemoveQuery={onRemoveQuery} onRemoveQuery={onRemoveQuery}
onAddQuery={onDuplicateQuery} onAddQuery={onDuplicateQuery}