-
Notifications
You must be signed in to change notification settings - Fork 11.7k
/
TestRuleResult.tsx
122 lines (101 loc) · 3.11 KB
/
TestRuleResult.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import React, { PureComponent } from 'react';
import { LoadingPlaceholder, JSONFormatter } from '@grafana/ui';
import appEvents from 'app/core/app_events';
import { CopyToClipboard } from 'app/core/components/CopyToClipboard/CopyToClipboard';
import { DashboardModel } from '../dashboard/state/DashboardModel';
import { getBackendSrv, BackendSrv } from '@grafana/runtime';
import { AppEvents } from '@grafana/data';
export interface Props {
panelId: number;
dashboard: DashboardModel;
}
interface State {
isLoading: boolean;
allNodesExpanded: boolean;
testRuleResponse: {};
}
export class TestRuleResult extends PureComponent<Props, State> {
readonly state: State = {
isLoading: false,
allNodesExpanded: null,
testRuleResponse: {},
};
formattedJson: any;
clipboard: any;
backendSrv: BackendSrv = null;
constructor(props: Props) {
super(props);
this.backendSrv = getBackendSrv();
}
componentDidMount() {
this.testRule();
}
async testRule() {
const { panelId, dashboard } = this.props;
const payload = { dashboard: dashboard.getSaveModelClone(), panelId };
this.setState({ isLoading: true });
const testRuleResponse = await this.backendSrv.post(`/api/alerts/test`, payload);
this.setState({ isLoading: false, testRuleResponse });
}
setFormattedJson = (formattedJson: any) => {
this.formattedJson = formattedJson;
};
getTextForClipboard = () => {
return JSON.stringify(this.formattedJson, null, 2);
};
onClipboardSuccess = () => {
appEvents.emit(AppEvents.alertSuccess, ['Content copied to clipboard']);
};
onToggleExpand = () => {
this.setState(prevState => ({
...prevState,
allNodesExpanded: !this.state.allNodesExpanded,
}));
};
getNrOfOpenNodes = () => {
if (this.state.allNodesExpanded === null) {
return 3; // 3 is default, ie when state is null
} else if (this.state.allNodesExpanded) {
return 20;
}
return 1;
};
renderExpandCollapse = () => {
const { allNodesExpanded } = this.state;
const collapse = (
<>
<i className="fa fa-minus-square-o" /> Collapse All
</>
);
const expand = (
<>
<i className="fa fa-plus-square-o" /> Expand All
</>
);
return allNodesExpanded ? collapse : expand;
};
render() {
const { testRuleResponse, isLoading } = this.state;
if (isLoading === true) {
return <LoadingPlaceholder text="Evaluating rule" />;
}
const openNodes = this.getNrOfOpenNodes();
return (
<>
<div className="pull-right">
<button className="btn btn-transparent btn-p-x-0 m-r-1" onClick={this.onToggleExpand}>
{this.renderExpandCollapse()}
</button>
<CopyToClipboard
className="btn btn-transparent btn-p-x-0"
text={this.getTextForClipboard}
onSuccess={this.onClipboardSuccess}
>
<i className="fa fa-clipboard" /> Copy to Clipboard
</CopyToClipboard>
</div>
<JSONFormatter json={testRuleResponse} open={openNodes} onDidRender={this.setFormattedJson} />
</>
);
}
}