@@ -145,6 +145,7 @@ export const AlertRule = ({ type }) => {
145
145
const [ queryWildcard , setQueryWildcard ] = useState ( 0 ) // 匹配模式
146
146
const [ openJsonToTable , setOpenJsonToTable ] = useState ( false )
147
147
const [ jsonToTableData , setJsonToTableData ] = useState ( [ ] )
148
+ const [ metricAddress , setMetricAddress ] = useState ( "" )
148
149
149
150
useEffect ( ( ) => {
150
151
if ( ruleTemplate ) {
@@ -235,6 +236,8 @@ export const AlertRule = ({ type }) => {
235
236
setFilterCondition ( selectedRow . elasticSearchConfig . filterCondition )
236
237
setQueryWildcard ( selectedRow . elasticSearchConfig . queryWildcard )
237
238
239
+ handleSelectedDsItem ( selectedRow . datasourceId )
240
+
238
241
let t = 0 ;
239
242
if ( selectedRow . datasourceType === "Prometheus" ) {
240
243
t = 0
@@ -730,8 +733,30 @@ export const AlertRule = ({ type }) => {
730
733
form . setFieldsValue ( { prometheusConfig : { promQL : promQL } } ) ;
731
734
} , [ promQL ] )
732
735
733
- const handleSelectedDsItem = ( ids ) => {
734
- setSelectedItems ( ids )
736
+ const handleSelectedDsItem = async ( ids ) => {
737
+ // 获取数据源信息
738
+ const url = await handleGetDatasourceInfo ( ids [ 0 ] ) ;
739
+
740
+ setSelectedItems ( ids ) ;
741
+
742
+ // 更新metricAddress
743
+ setMetricAddress ( url ) ;
744
+ } ;
745
+
746
+ const handleGetDatasourceInfo = async ( id ) => {
747
+ try {
748
+ const params = {
749
+ id : id ,
750
+ }
751
+ const res = await getDatasource ( params )
752
+
753
+ if ( res ?. data ?. http ?. url ) {
754
+ return res ?. data ?. http ?. url
755
+ }
756
+ return ""
757
+ } catch ( error ) {
758
+ console . error ( `Error fetching datasource for ID ${ id } :` , error )
759
+ }
735
760
}
736
761
737
762
const [ dataSource , setDataSource ] = useState ( [ ] ) ;
@@ -740,12 +765,11 @@ export const AlertRule = ({ type }) => {
740
765
try {
741
766
setOpenMetricQueryModel ( true )
742
767
// 编码 PromQL 查询
743
- const encodedPromQL = encodeURIComponent ( promQL ) ;
744
-
768
+ // const promQL = encodeURIComponent(promQL);
745
769
// 构造请求参数
746
770
const params = {
747
771
datasourceIds : selectedItems . join ( "," ) ,
748
- query : encodedPromQL ,
772
+ query : promQL ,
749
773
} ;
750
774
751
775
// 发起请求
@@ -952,11 +976,11 @@ export const AlertRule = ({ type }) => {
952
976
mode = "multiple"
953
977
placeholder = "选择数据源"
954
978
value = { selectedItems }
955
- onChange = { handleSelectedDsItem }
979
+ onChange = { ( value ) => { handleSelectedDsItem ( value ) } }
956
980
style = { {
957
981
width : '100%' ,
958
982
} }
959
- tokenSeparators = { [ ',' ] }
983
+ // tokenSeparators={[',']}
960
984
options = { datasourceOptions }
961
985
/>
962
986
</ MyFormItem >
@@ -969,7 +993,7 @@ export const AlertRule = ({ type }) => {
969
993
< MyFormItemGroup prefix = { [ 'prometheusConfig' ] } >
970
994
< MyFormItem name = "promQL" label = "PromQL" rules = { [ { required : true } ] } >
971
995
< PrometheusPromQL
972
- // addr={selectDatasourceURL }
996
+ addr = { metricAddress }
973
997
value = { handleGetPromQL }
974
998
setPromQL = { setPromQL }
975
999
/>
@@ -1086,15 +1110,14 @@ export const AlertRule = ({ type }) => {
1086
1110
size = "small"
1087
1111
dataSource = { dataSource }
1088
1112
renderItem = { ( item ) => {
1089
- const metricName = item . metric [ "__name__" ] ;
1090
1113
const metricDetails = Object . keys ( item . metric )
1091
1114
. filter ( key => key !== "__name__" )
1092
1115
. map ( key => `${ key } :${ item . metric [ key ] } ` )
1093
1116
. join ( ", " ) ;
1094
1117
return (
1095
1118
< List . Item >
1096
1119
< div className = "list-item-content" >
1097
- { `${ metricName } {${ metricDetails } }` }
1120
+ { `{${ metricDetails } }` }
1098
1121
< div className = "value" > { `${ item . value [ 1 ] } ` } </ div >
1099
1122
</ div >
1100
1123
</ List . Item >
0 commit comments