@perses-dev/prometheus-plugin 0.51.0-rc.3 → 0.51.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/__mf/js/{622.893bb954.js → 622.81d47848.js} +1 -1
- package/__mf/js/{Prometheus.bafb3562.js → Prometheus.ce1e9458.js} +2 -2
- package/__mf/js/async/{5503.7c0ff0ee.js → 5503.d391f0fc.js} +1 -1
- package/__mf/js/async/__federation_expose_PrometheusExplorer.3f83dfda.js +1 -0
- package/__mf/js/async/__federation_expose_PrometheusLabelNamesVariable.8551745e.js +1 -0
- package/__mf/js/async/__federation_expose_PrometheusLabelValuesVariable.a4085adb.js +1 -0
- package/__mf/js/async/__federation_expose_PrometheusPromQLVariable.46f99477.js +1 -0
- package/__mf/js/async/__federation_expose_PrometheusTimeSeriesQuery.b4228802.js +1 -0
- package/__mf/js/{main.04881e62.js → main.02b2cf43.js} +1 -1
- package/lib/cjs/explore/PrometheusMetricsFinder/filter/FilterInputs.js +85 -69
- package/lib/cjs/explore/PrometheusMetricsFinder/filter/FinderFilters.js +16 -14
- package/lib/cjs/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.js +9 -16
- package/lib/cjs/plugins/prometheus-variables.js +27 -45
- package/lib/explore/PrometheusMetricsFinder/filter/FilterInputs.d.ts.map +1 -1
- package/lib/explore/PrometheusMetricsFinder/filter/FilterInputs.js +87 -72
- package/lib/explore/PrometheusMetricsFinder/filter/FilterInputs.js.map +1 -1
- package/lib/explore/PrometheusMetricsFinder/filter/FinderFilters.d.ts.map +1 -1
- package/lib/explore/PrometheusMetricsFinder/filter/FinderFilters.js +17 -15
- package/lib/explore/PrometheusMetricsFinder/filter/FinderFilters.js.map +1 -1
- package/lib/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.d.ts.map +1 -1
- package/lib/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.js +10 -17
- package/lib/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.js.map +1 -1
- package/lib/plugins/prometheus-variables.d.ts.map +1 -1
- package/lib/plugins/prometheus-variables.js +28 -46
- package/lib/plugins/prometheus-variables.js.map +1 -1
- package/mf-manifest.json +33 -33
- package/mf-stats.json +35 -35
- package/package.json +9 -1
- package/__mf/js/async/__federation_expose_PrometheusExplorer.f3fe63da.js +0 -1
- package/__mf/js/async/__federation_expose_PrometheusLabelNamesVariable.873e5f4d.js +0 -1
- package/__mf/js/async/__federation_expose_PrometheusLabelValuesVariable.6696e340.js +0 -1
- package/__mf/js/async/__federation_expose_PrometheusPromQLVariable.ab45c7cc.js +0 -1
- package/__mf/js/async/__federation_expose_PrometheusTimeSeriesQuery.66611c9d.js +0 -1
|
@@ -64,22 +64,16 @@ function PrometheusLabelValuesVariableEditor(props) {
|
|
|
64
64
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
|
|
65
65
|
spacing: 2,
|
|
66
66
|
children: [
|
|
67
|
-
/*#__PURE__*/ (0, _jsxruntime.
|
|
67
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControl, {
|
|
68
68
|
margin: "dense",
|
|
69
|
-
children:
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
onChange: handleDatasourceChange,
|
|
78
|
-
readOnly: props.isReadonly,
|
|
79
|
-
labelId: "prom-datasource-label",
|
|
80
|
-
label: "Prometheus Datasource"
|
|
81
|
-
})
|
|
82
|
-
]
|
|
69
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
|
|
70
|
+
datasourcePluginKind: "PrometheusDatasource",
|
|
71
|
+
value: selectedDatasource,
|
|
72
|
+
onChange: handleDatasourceChange,
|
|
73
|
+
readOnly: props.isReadonly,
|
|
74
|
+
labelId: "prom-datasource-label",
|
|
75
|
+
label: "Prometheus Datasource"
|
|
76
|
+
})
|
|
83
77
|
}),
|
|
84
78
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
|
|
85
79
|
label: "Label Name",
|
|
@@ -125,22 +119,16 @@ function PrometheusLabelNamesVariableEditor(props) {
|
|
|
125
119
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
|
|
126
120
|
spacing: 2,
|
|
127
121
|
children: [
|
|
128
|
-
/*#__PURE__*/ (0, _jsxruntime.
|
|
122
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControl, {
|
|
129
123
|
margin: "dense",
|
|
130
|
-
children:
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
onChange: handleDatasourceChange,
|
|
139
|
-
disabled: props.isReadonly,
|
|
140
|
-
labelId: "prom-datasource-label",
|
|
141
|
-
label: "Prometheus Datasource"
|
|
142
|
-
})
|
|
143
|
-
]
|
|
124
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
|
|
125
|
+
datasourcePluginKind: "PrometheusDatasource",
|
|
126
|
+
value: selectedDatasource,
|
|
127
|
+
onChange: handleDatasourceChange,
|
|
128
|
+
disabled: props.isReadonly,
|
|
129
|
+
labelId: "prom-datasource-label",
|
|
130
|
+
label: "Prometheus Datasource"
|
|
131
|
+
})
|
|
144
132
|
}),
|
|
145
133
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_MatcherEditor.MatcherEditor, {
|
|
146
134
|
matchers: props.value.matchers ?? [],
|
|
@@ -174,22 +162,16 @@ function PrometheusPromQLVariableEditor(props) {
|
|
|
174
162
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
|
|
175
163
|
spacing: 2,
|
|
176
164
|
children: [
|
|
177
|
-
/*#__PURE__*/ (0, _jsxruntime.
|
|
165
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControl, {
|
|
178
166
|
margin: "dense",
|
|
179
|
-
children:
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
onChange: handleDatasourceChange,
|
|
188
|
-
labelId: "prom-datasource-label",
|
|
189
|
-
label: "Prometheus Datasource",
|
|
190
|
-
disabled: props.isReadonly
|
|
191
|
-
})
|
|
192
|
-
]
|
|
167
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
|
|
168
|
+
datasourcePluginKind: _model.PROM_DATASOURCE_KIND,
|
|
169
|
+
value: selectedDatasource,
|
|
170
|
+
onChange: handleDatasourceChange,
|
|
171
|
+
labelId: "prom-datasource-label",
|
|
172
|
+
label: "Prometheus Datasource",
|
|
173
|
+
disabled: props.isReadonly
|
|
174
|
+
})
|
|
193
175
|
}),
|
|
194
176
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_components.PromQLEditor, {
|
|
195
177
|
completeConfig: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterInputs.d.ts","sourceRoot":"","sources":["../../../../../src/explore/PrometheusMetricsFinder/filter/FilterInputs.tsx"],"names":[],"mappings":"AAaA,OAAO,EAGL,cAAc,EACd,YAAY,EAKb,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"FilterInputs.d.ts","sourceRoot":"","sources":["../../../../../src/explore/PrometheusMetricsFinder/filter/FilterInputs.tsx"],"names":[],"mappings":"AAaA,OAAO,EAGL,cAAc,EACd,YAAY,EAKb,MAAM,OAAO,CAAC;AAaf,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAY,MAAM,UAAU,CAAC;AAGjD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,kBAAkB,CAAC;IAC/B,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE,qBAAqB,GAAG,YAAY,CAwBtC;AAGD,eAAO,MAAM,gBAAgB,+HAiC5B,CAAC;AAGF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,YAAY,EACZ,kBAAkB,EAClB,qBAAqB,EACrB,2BAA2B,EAC3B,QAAQ,EACR,QAAQ,GACT,EAAE,mBAAmB,GAAG,YAAY,CAsGpC"}
|
|
@@ -10,14 +10,12 @@
|
|
|
10
10
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
11
|
// See the License for the specific language governing permissions and
|
|
12
12
|
// limitations under the License.
|
|
13
|
-
import { jsx as _jsx, jsxs as _jsxs
|
|
13
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
14
|
import { cloneElement, forwardRef, useMemo, useRef, useState } from 'react';
|
|
15
|
-
import { Autocomplete, CircularProgress, IconButton, InputAdornment, TextField } from '@mui/material';
|
|
16
|
-
import CheckIcon from 'mdi-material-ui/Check';
|
|
15
|
+
import { Autocomplete, CircularProgress, IconButton, InputAdornment, MenuItem, Select, Stack, TextField } from '@mui/material';
|
|
17
16
|
import DeleteIcon from 'mdi-material-ui/Delete';
|
|
18
17
|
import { Virtuoso } from 'react-virtuoso';
|
|
19
18
|
import { useLabels, useLabelValues } from '../utils';
|
|
20
|
-
// TODO: fix when a filter is deleted => refresh data
|
|
21
19
|
export function LabelFilterInput({ datasource, value, filters, onChange, onDelete }) {
|
|
22
20
|
const filtersWithoutCurrent = useMemo(()=>filters.filter((filter)=>filter.label !== value.label), [
|
|
23
21
|
filters,
|
|
@@ -74,22 +72,10 @@ export const ListboxComponent = /*#__PURE__*/ forwardRef(({ children, ...rest },
|
|
|
74
72
|
});
|
|
75
73
|
ListboxComponent.displayName = 'ListboxComponent';
|
|
76
74
|
export function RawFilterInput({ value, labelOptions, labelValuesOptions, isLabelOptionsLoading, isLabelValuesOptionsLoading, onChange, onDelete }) {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
onChange({
|
|
82
|
-
label: labelName,
|
|
83
|
-
labelValues: value.labelValues,
|
|
84
|
-
operator: value.operator
|
|
85
|
-
});
|
|
86
|
-
}
|
|
87
|
-
function handleKeyPress(event) {
|
|
88
|
-
if (isEditingLabelName && event.key === 'Enter') {
|
|
89
|
-
handleLabelConfirmation();
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
return /*#__PURE__*/ _jsxs(_Fragment, {
|
|
75
|
+
return /*#__PURE__*/ _jsxs(Stack, {
|
|
76
|
+
gap: 0,
|
|
77
|
+
flexDirection: "row",
|
|
78
|
+
alignItems: "center",
|
|
93
79
|
children: [
|
|
94
80
|
/*#__PURE__*/ _jsx(Autocomplete, {
|
|
95
81
|
freeSolo: true,
|
|
@@ -97,8 +83,7 @@ export function RawFilterInput({ value, labelOptions, labelValuesOptions, isLabe
|
|
|
97
83
|
options: labelOptions ?? [],
|
|
98
84
|
value: value.label,
|
|
99
85
|
sx: {
|
|
100
|
-
minWidth:
|
|
101
|
-
display: isEditingLabelName ? 'block' : 'none'
|
|
86
|
+
minWidth: 200
|
|
102
87
|
},
|
|
103
88
|
ListboxComponent: ListboxComponent,
|
|
104
89
|
loading: isLabelOptionsLoading,
|
|
@@ -109,31 +94,58 @@ export function RawFilterInput({ value, labelOptions, labelValuesOptions, isLabe
|
|
|
109
94
|
variant: "outlined",
|
|
110
95
|
fullWidth: true,
|
|
111
96
|
size: "medium",
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
isLabelOptionsLoading ? /*#__PURE__*/ _jsx(CircularProgress, {
|
|
118
|
-
color: "inherit",
|
|
119
|
-
size: 20
|
|
120
|
-
}) : null,
|
|
121
|
-
/*#__PURE__*/ _jsx(IconButton, {
|
|
122
|
-
"aria-label": "validate label name",
|
|
123
|
-
onClick: ()=>handleLabelConfirmation(),
|
|
124
|
-
edge: "end",
|
|
125
|
-
children: /*#__PURE__*/ _jsx(CheckIcon, {})
|
|
126
|
-
})
|
|
127
|
-
]
|
|
128
|
-
})
|
|
97
|
+
sx: {
|
|
98
|
+
'& .MuiOutlinedInput-root': {
|
|
99
|
+
borderTopRightRadius: 0,
|
|
100
|
+
borderBottomRightRadius: 0
|
|
101
|
+
}
|
|
129
102
|
}
|
|
130
103
|
});
|
|
131
104
|
},
|
|
132
|
-
onKeyDown: handleKeyPress,
|
|
133
105
|
onInputChange: (_, newValue)=>{
|
|
134
|
-
|
|
106
|
+
onChange({
|
|
107
|
+
label: newValue ?? '',
|
|
108
|
+
labelValues: value.labelValues,
|
|
109
|
+
operator: value.operator
|
|
110
|
+
});
|
|
135
111
|
}
|
|
136
112
|
}),
|
|
113
|
+
/*#__PURE__*/ _jsxs(Select, {
|
|
114
|
+
value: value.operator,
|
|
115
|
+
variant: "outlined",
|
|
116
|
+
onChange: (event)=>{
|
|
117
|
+
onChange({
|
|
118
|
+
label: value.label,
|
|
119
|
+
labelValues: value.labelValues,
|
|
120
|
+
operator: event.target.value
|
|
121
|
+
});
|
|
122
|
+
},
|
|
123
|
+
size: "medium",
|
|
124
|
+
sx: {
|
|
125
|
+
borderTopLeftRadius: 0,
|
|
126
|
+
borderBottomLeftRadius: 0,
|
|
127
|
+
borderTopRightRadius: 0,
|
|
128
|
+
borderBottomRightRadius: 0
|
|
129
|
+
},
|
|
130
|
+
children: [
|
|
131
|
+
/*#__PURE__*/ _jsx(MenuItem, {
|
|
132
|
+
value: "=",
|
|
133
|
+
children: "="
|
|
134
|
+
}),
|
|
135
|
+
/*#__PURE__*/ _jsx(MenuItem, {
|
|
136
|
+
value: "!=",
|
|
137
|
+
children: "!="
|
|
138
|
+
}),
|
|
139
|
+
/*#__PURE__*/ _jsx(MenuItem, {
|
|
140
|
+
value: "=~",
|
|
141
|
+
children: "=~"
|
|
142
|
+
}),
|
|
143
|
+
/*#__PURE__*/ _jsx(MenuItem, {
|
|
144
|
+
value: "!~",
|
|
145
|
+
children: "!~"
|
|
146
|
+
})
|
|
147
|
+
]
|
|
148
|
+
}),
|
|
137
149
|
/*#__PURE__*/ _jsx(Autocomplete, {
|
|
138
150
|
freeSolo: true,
|
|
139
151
|
multiple: value.operator === '=~' || value.operator === '!~',
|
|
@@ -143,48 +155,49 @@ export function RawFilterInput({ value, labelOptions, labelValuesOptions, isLabe
|
|
|
143
155
|
value: value.labelValues,
|
|
144
156
|
ListboxComponent: ListboxComponent,
|
|
145
157
|
sx: {
|
|
146
|
-
minWidth:
|
|
147
|
-
display: isEditingLabelName ? 'none' : 'block'
|
|
158
|
+
minWidth: 200
|
|
148
159
|
},
|
|
149
160
|
loading: isLabelValuesOptionsLoading,
|
|
150
161
|
renderInput: (params)=>{
|
|
151
162
|
return /*#__PURE__*/ _jsx(TextField, {
|
|
152
163
|
...params,
|
|
153
|
-
label: value.
|
|
164
|
+
label: value.operator === '=~' || value.operator === '!~' ? 'Label Values' : 'Label Value',
|
|
154
165
|
variant: "outlined",
|
|
155
166
|
fullWidth: true,
|
|
156
167
|
size: "medium",
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
168
|
+
sx: {
|
|
169
|
+
'& .MuiOutlinedInput-root': {
|
|
170
|
+
borderTopLeftRadius: 0,
|
|
171
|
+
borderBottomLeftRadius: 0
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
slotProps: {
|
|
175
|
+
input: {
|
|
176
|
+
...params.InputProps,
|
|
177
|
+
style: {
|
|
178
|
+
maxHeight: '53.13px'
|
|
179
|
+
},
|
|
180
|
+
endAdornment: /*#__PURE__*/ _jsxs(InputAdornment, {
|
|
181
|
+
position: "end",
|
|
182
|
+
children: [
|
|
183
|
+
isLabelValuesOptionsLoading ? /*#__PURE__*/ _jsx(CircularProgress, {
|
|
184
|
+
color: "inherit",
|
|
185
|
+
size: 20
|
|
186
|
+
}) : null,
|
|
187
|
+
/*#__PURE__*/ _jsx(IconButton, {
|
|
188
|
+
"aria-label": "delete label filter",
|
|
189
|
+
onClick: ()=>onDelete(),
|
|
190
|
+
edge: "end",
|
|
191
|
+
children: /*#__PURE__*/ _jsx(DeleteIcon, {})
|
|
192
|
+
})
|
|
193
|
+
]
|
|
194
|
+
})
|
|
195
|
+
}
|
|
183
196
|
}
|
|
184
197
|
});
|
|
185
198
|
},
|
|
186
|
-
|
|
187
|
-
if (
|
|
199
|
+
onInputChange: (_, newValue)=>{
|
|
200
|
+
if (value.operator === '=' || value.operator === '!=') {
|
|
188
201
|
onChange({
|
|
189
202
|
label: value.label,
|
|
190
203
|
labelValues: [
|
|
@@ -193,6 +206,8 @@ export function RawFilterInput({ value, labelOptions, labelValuesOptions, isLabe
|
|
|
193
206
|
operator: value.operator
|
|
194
207
|
});
|
|
195
208
|
}
|
|
209
|
+
},
|
|
210
|
+
onChange: (_, newValue)=>{
|
|
196
211
|
if (Array.isArray(newValue)) {
|
|
197
212
|
onChange({
|
|
198
213
|
label: value.label,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/explore/PrometheusMetricsFinder/filter/FilterInputs.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n ReactElement,\n SyntheticEvent,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { Autocomplete, CircularProgress, IconButton, InputAdornment, TextField } from '@mui/material';\nimport CheckIcon from 'mdi-material-ui/Check';\nimport DeleteIcon from 'mdi-material-ui/Delete';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { Virtuoso } from 'react-virtuoso';\nimport { LabelFilter } from '../types';\nimport { useLabels, useLabelValues } from '../utils';\n\nexport interface LabelFilterInputProps {\n datasource: DatasourceSelector;\n value: LabelFilter;\n filters: LabelFilter[];\n onChange: (next: LabelFilter) => void;\n onDelete: () => void;\n}\n\n// TODO: fix when a filter is deleted => refresh data\nexport function LabelFilterInput({\n datasource,\n value,\n filters,\n onChange,\n onDelete,\n}: LabelFilterInputProps): ReactElement {\n const filtersWithoutCurrent = useMemo(\n () => filters.filter((filter) => filter.label !== value.label),\n [filters, value.label]\n );\n\n const { data: labelOptions, isLoading: isLabelOptionsLoading } = useLabels(filtersWithoutCurrent, datasource);\n const { data: labelValuesOptions, isLoading: isLabelValuesOptionsLoading } = useLabelValues(\n value.label,\n filtersWithoutCurrent,\n datasource\n );\n\n return (\n <RawFilterInput\n value={value}\n labelOptions={labelOptions?.data ?? []}\n labelValuesOptions={labelValuesOptions?.data ?? []}\n isLabelOptionsLoading={isLabelOptionsLoading}\n isLabelValuesOptionsLoading={isLabelValuesOptionsLoading}\n onChange={onChange}\n onDelete={onDelete}\n />\n );\n}\n\n// https://stackoverflow.com/questions/69060738/material-ui-autocomplete-virtualization-w-react-virtuoso\nexport const ListboxComponent = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(\n ({ children, ...rest }, ref) => {\n const data = children as ReactElement[];\n const localRef = useRef<string>('500px');\n\n const [height, setHeight] = useState(0);\n\n return (\n <ul\n style={{ overflow: 'hidden', padding: '0', height: height ? `min(40vh, ${height}px)` : '40vh' }}\n ref={(reference) => {\n const maxHeight = reference ? getComputedStyle(reference).maxHeight : null;\n if (maxHeight && maxHeight !== localRef.current) {\n localRef.current = maxHeight;\n }\n\n if (typeof ref === 'function') {\n ref(reference);\n }\n }}\n {...rest}\n >\n <Virtuoso\n style={{ height: localRef.current, padding: '10px 0' }}\n data={data}\n totalListHeightChanged={setHeight}\n itemContent={(index, child) => {\n return cloneElement(child, { index, title: child.props.children });\n }}\n />\n </ul>\n );\n }\n);\nListboxComponent.displayName = 'ListboxComponent';\n\nexport interface RawFilterInputProps {\n value: LabelFilter;\n labelOptions?: string[];\n labelValuesOptions?: string[];\n isLabelOptionsLoading?: boolean;\n isLabelValuesOptionsLoading?: boolean;\n onChange: (next: LabelFilter) => void;\n onDelete: () => void;\n}\n\nexport function RawFilterInput({\n value,\n labelOptions,\n labelValuesOptions,\n isLabelOptionsLoading,\n isLabelValuesOptionsLoading,\n onChange,\n onDelete,\n}: RawFilterInputProps): ReactElement {\n const [isEditingLabelName, setIsEditingLabelName] = useState(value.labelValues.length === 0);\n const [labelName, setLabelName] = useState(value.label);\n\n function handleLabelConfirmation(): void {\n setIsEditingLabelName(false);\n onChange({ label: labelName, labelValues: value.labelValues, operator: value.operator });\n }\n\n function handleKeyPress(event: { key: string }): void {\n if (isEditingLabelName && event.key === 'Enter') {\n handleLabelConfirmation();\n }\n }\n\n return (\n <>\n <Autocomplete\n freeSolo\n disableClearable\n options={labelOptions ?? []}\n value={value.label}\n sx={{ minWidth: 250, display: isEditingLabelName ? 'block' : 'none' }}\n ListboxComponent={ListboxComponent}\n loading={isLabelOptionsLoading}\n renderInput={(params) => {\n return (\n <TextField\n {...params}\n label=\"Label Name\"\n variant=\"outlined\"\n fullWidth\n size=\"medium\"\n InputProps={{\n ...params.InputProps,\n endAdornment: (\n <InputAdornment position=\"end\">\n {isLabelOptionsLoading ? <CircularProgress color=\"inherit\" size={20} /> : null}\n <IconButton aria-label=\"validate label name\" onClick={() => handleLabelConfirmation()} edge=\"end\">\n <CheckIcon />\n </IconButton>\n </InputAdornment>\n ),\n }}\n />\n );\n }}\n onKeyDown={handleKeyPress}\n onInputChange={(_: SyntheticEvent, newValue: string | null) => {\n setLabelName(newValue ?? '');\n }}\n />\n <Autocomplete\n freeSolo\n multiple={value.operator === '=~' || value.operator === '!~'}\n limitTags={1}\n disableClearable\n options={labelValuesOptions ?? []}\n value={value.labelValues}\n ListboxComponent={ListboxComponent}\n sx={{ minWidth: 250, display: isEditingLabelName ? 'none' : 'block' }}\n loading={isLabelValuesOptionsLoading}\n renderInput={(params) => {\n return (\n <TextField\n {...params}\n label={value.label}\n variant=\"outlined\"\n fullWidth\n size=\"medium\"\n InputProps={{\n ...params.InputProps,\n startAdornment: (\n <>\n <InputAdornment position=\"start\">{value.operator}</InputAdornment>\n {params.InputProps.startAdornment}\n </>\n ),\n endAdornment: (\n <InputAdornment position=\"end\">\n {isLabelValuesOptionsLoading ? <CircularProgress color=\"inherit\" size={20} /> : null}\n <IconButton aria-label=\"delete label filter\" onClick={() => onDelete()} edge=\"end\">\n <DeleteIcon />\n </IconButton>\n </InputAdornment>\n ),\n }}\n />\n );\n }}\n onChange={(_, newValue) => {\n if (typeof newValue === 'string') {\n onChange({ label: value.label, labelValues: [newValue], operator: value.operator });\n }\n if (Array.isArray(newValue)) {\n onChange({ label: value.label, labelValues: newValue, operator: value.operator });\n }\n }}\n />\n </>\n );\n}\n"],"names":["cloneElement","forwardRef","useMemo","useRef","useState","Autocomplete","CircularProgress","IconButton","InputAdornment","TextField","CheckIcon","DeleteIcon","Virtuoso","useLabels","useLabelValues","LabelFilterInput","datasource","value","filters","onChange","onDelete","filtersWithoutCurrent","filter","label","data","labelOptions","isLoading","isLabelOptionsLoading","labelValuesOptions","isLabelValuesOptionsLoading","RawFilterInput","ListboxComponent","children","rest","ref","localRef","height","setHeight","ul","style","overflow","padding","reference","maxHeight","getComputedStyle","current","totalListHeightChanged","itemContent","index","child","title","props","displayName","isEditingLabelName","setIsEditingLabelName","labelValues","length","labelName","setLabelName","handleLabelConfirmation","operator","handleKeyPress","event","key","freeSolo","disableClearable","options","sx","minWidth","display","loading","renderInput","params","variant","fullWidth","size","InputProps","endAdornment","position","color","aria-label","onClick","edge","onKeyDown","onInputChange","_","newValue","multiple","limitTags","startAdornment","Array","isArray"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../../src/explore/PrometheusMetricsFinder/filter/FilterInputs.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n ReactElement,\n SyntheticEvent,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n Autocomplete,\n CircularProgress,\n IconButton,\n InputAdornment,\n MenuItem,\n Select,\n SelectChangeEvent,\n Stack,\n TextField,\n} from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/Delete';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport { Virtuoso } from 'react-virtuoso';\nimport { LabelFilter, Operator } from '../types';\nimport { useLabels, useLabelValues } from '../utils';\n\nexport interface LabelFilterInputProps {\n datasource: DatasourceSelector;\n value: LabelFilter;\n filters: LabelFilter[];\n onChange: (next: LabelFilter) => void;\n onDelete: () => void;\n}\n\nexport function LabelFilterInput({\n datasource,\n value,\n filters,\n onChange,\n onDelete,\n}: LabelFilterInputProps): ReactElement {\n const filtersWithoutCurrent = useMemo(\n () => filters.filter((filter) => filter.label !== value.label),\n [filters, value.label]\n );\n\n const { data: labelOptions, isLoading: isLabelOptionsLoading } = useLabels(filtersWithoutCurrent, datasource);\n const { data: labelValuesOptions, isLoading: isLabelValuesOptionsLoading } = useLabelValues(\n value.label,\n filtersWithoutCurrent,\n datasource\n );\n\n return (\n <RawFilterInput\n value={value}\n labelOptions={labelOptions?.data ?? []}\n labelValuesOptions={labelValuesOptions?.data ?? []}\n isLabelOptionsLoading={isLabelOptionsLoading}\n isLabelValuesOptionsLoading={isLabelValuesOptionsLoading}\n onChange={onChange}\n onDelete={onDelete}\n />\n );\n}\n\n// https://stackoverflow.com/questions/69060738/material-ui-autocomplete-virtualization-w-react-virtuoso\nexport const ListboxComponent = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(\n ({ children, ...rest }, ref) => {\n const data = children as ReactElement[];\n const localRef = useRef<string>('500px');\n\n const [height, setHeight] = useState(0);\n\n return (\n <ul\n style={{ overflow: 'hidden', padding: '0', height: height ? `min(40vh, ${height}px)` : '40vh' }}\n ref={(reference) => {\n const maxHeight = reference ? getComputedStyle(reference).maxHeight : null;\n if (maxHeight && maxHeight !== localRef.current) {\n localRef.current = maxHeight;\n }\n\n if (typeof ref === 'function') {\n ref(reference);\n }\n }}\n {...rest}\n >\n <Virtuoso\n style={{ height: localRef.current, padding: '10px 0' }}\n data={data}\n totalListHeightChanged={setHeight}\n itemContent={(index, child) => {\n return cloneElement(child, { index, title: child.props.children });\n }}\n />\n </ul>\n );\n }\n);\nListboxComponent.displayName = 'ListboxComponent';\n\nexport interface RawFilterInputProps {\n value: LabelFilter;\n labelOptions?: string[];\n labelValuesOptions?: string[];\n isLabelOptionsLoading?: boolean;\n isLabelValuesOptionsLoading?: boolean;\n onChange: (next: LabelFilter) => void;\n onDelete: () => void;\n}\n\nexport function RawFilterInput({\n value,\n labelOptions,\n labelValuesOptions,\n isLabelOptionsLoading,\n isLabelValuesOptionsLoading,\n onChange,\n onDelete,\n}: RawFilterInputProps): ReactElement {\n return (\n <Stack gap={0} flexDirection=\"row\" alignItems=\"center\">\n <Autocomplete\n freeSolo\n disableClearable\n options={labelOptions ?? []}\n value={value.label}\n sx={{ minWidth: 200 }}\n ListboxComponent={ListboxComponent}\n loading={isLabelOptionsLoading}\n renderInput={(params) => {\n return (\n <TextField\n {...params}\n label=\"Label Name\"\n variant=\"outlined\"\n fullWidth\n size=\"medium\"\n sx={{\n '& .MuiOutlinedInput-root': {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n }}\n />\n );\n }}\n onInputChange={(_: SyntheticEvent, newValue: string | null) => {\n onChange({ label: newValue ?? '', labelValues: value.labelValues, operator: value.operator });\n }}\n />\n <Select\n value={value.operator}\n variant=\"outlined\"\n onChange={(event: SelectChangeEvent) => {\n onChange({ label: value.label, labelValues: value.labelValues, operator: event.target.value as Operator });\n }}\n size=\"medium\"\n sx={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderTopRightRadius: 0, borderBottomRightRadius: 0 }}\n >\n <MenuItem value=\"=\">=</MenuItem>\n <MenuItem value=\"!=\">!=</MenuItem>\n <MenuItem value=\"=~\">=~</MenuItem>\n <MenuItem value=\"!~\">!~</MenuItem>\n </Select>\n <Autocomplete\n freeSolo\n multiple={value.operator === '=~' || value.operator === '!~'}\n limitTags={1}\n disableClearable\n options={labelValuesOptions ?? []}\n value={value.labelValues}\n ListboxComponent={ListboxComponent}\n sx={{ minWidth: 200 }}\n loading={isLabelValuesOptionsLoading}\n renderInput={(params) => {\n return (\n <TextField\n {...params}\n label={value.operator === '=~' || value.operator === '!~' ? 'Label Values' : 'Label Value'}\n variant=\"outlined\"\n fullWidth\n size=\"medium\"\n sx={{\n '& .MuiOutlinedInput-root': {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n },\n }}\n slotProps={{\n input: {\n ...params.InputProps,\n style: {\n maxHeight: '53.13px', // TODO: the input height is larger when a value is selected in multiple mode. Probably a bug fixed in newer version, could not replicate on their demo\n },\n endAdornment: (\n <InputAdornment position=\"end\">\n {isLabelValuesOptionsLoading ? <CircularProgress color=\"inherit\" size={20} /> : null}\n <IconButton aria-label=\"delete label filter\" onClick={() => onDelete()} edge=\"end\">\n <DeleteIcon />\n </IconButton>\n </InputAdornment>\n ),\n },\n }}\n />\n );\n }}\n onInputChange={(_, newValue) => {\n if (value.operator === '=' || value.operator === '!=') {\n onChange({ label: value.label, labelValues: [newValue], operator: value.operator });\n }\n }}\n onChange={(_, newValue) => {\n if (Array.isArray(newValue)) {\n onChange({ label: value.label, labelValues: newValue, operator: value.operator });\n }\n }}\n />\n </Stack>\n );\n}\n"],"names":["cloneElement","forwardRef","useMemo","useRef","useState","Autocomplete","CircularProgress","IconButton","InputAdornment","MenuItem","Select","Stack","TextField","DeleteIcon","Virtuoso","useLabels","useLabelValues","LabelFilterInput","datasource","value","filters","onChange","onDelete","filtersWithoutCurrent","filter","label","data","labelOptions","isLoading","isLabelOptionsLoading","labelValuesOptions","isLabelValuesOptionsLoading","RawFilterInput","ListboxComponent","children","rest","ref","localRef","height","setHeight","ul","style","overflow","padding","reference","maxHeight","getComputedStyle","current","totalListHeightChanged","itemContent","index","child","title","props","displayName","gap","flexDirection","alignItems","freeSolo","disableClearable","options","sx","minWidth","loading","renderInput","params","variant","fullWidth","size","borderTopRightRadius","borderBottomRightRadius","onInputChange","_","newValue","labelValues","operator","event","target","borderTopLeftRadius","borderBottomLeftRadius","multiple","limitTags","slotProps","input","InputProps","endAdornment","position","color","aria-label","onClick","edge","Array","isArray"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FinderFilters.d.ts","sourceRoot":"","sources":["../../../../../src/explore/PrometheusMetricsFinder/filter/FinderFilters.tsx"],"names":[],"mappings":"AAaA,OAAO,
|
|
1
|
+
{"version":3,"file":"FinderFilters.d.ts","sourceRoot":"","sources":["../../../../../src/explore/PrometheusMetricsFinder/filter/FinderFilters.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA8B,UAAU,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAQtD,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvC,MAAM,WAAW,oBAAqB,SAAQ,UAAU;IACtD,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,EAAE,WAAW,EAAE,CAAC;IAC/B,kBAAkB,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,eAAe,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,OAAO,EACP,eAAe,EACf,kBAAkB,EAClB,eAAe,EACf,GAAG,KAAK,EACT,EAAE,oBAAoB,GAAG,YAAY,CAgDrC"}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
// See the License for the specific language governing permissions and
|
|
12
12
|
// limitations under the License.
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
-
import { Button, FormControl,
|
|
14
|
+
import { Button, FormControl, Stack } from '@mui/material';
|
|
15
15
|
import { DatasourceSelect, datasourceSelectValueToSelector, useListDatasourceSelectItems } from '@perses-dev/plugin-system';
|
|
16
16
|
import PlusIcon from 'mdi-material-ui/Plus';
|
|
17
17
|
import { PROM_DATASOURCE_KIND } from '../../../model/prometheus-selectors';
|
|
@@ -34,18 +34,18 @@ export function FinderFilters({ datasource, filters, filteredFilters, onDatasour
|
|
|
34
34
|
width: '100%'
|
|
35
35
|
},
|
|
36
36
|
children: [
|
|
37
|
-
/*#__PURE__*/
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
37
|
+
/*#__PURE__*/ _jsx(FormControl, {
|
|
38
|
+
sx: {
|
|
39
|
+
width: 250
|
|
40
|
+
},
|
|
41
|
+
children: /*#__PURE__*/ _jsx(DatasourceSelect, {
|
|
42
|
+
size: "medium",
|
|
43
|
+
datasourcePluginKind: PROM_DATASOURCE_KIND,
|
|
44
|
+
value: datasource,
|
|
45
|
+
onChange: handleDatasourceChange,
|
|
46
|
+
label: "Prometheus Datasource",
|
|
47
|
+
fullWidth: true
|
|
48
|
+
})
|
|
49
49
|
}),
|
|
50
50
|
filters.map((filter, index)=>/*#__PURE__*/ _jsx(LabelFilterInput, {
|
|
51
51
|
datasource: datasource,
|
|
@@ -74,8 +74,10 @@ export function FinderFilters({ datasource, filters, filteredFilters, onDatasour
|
|
|
74
74
|
...filters,
|
|
75
75
|
{
|
|
76
76
|
label: '',
|
|
77
|
-
labelValues: [
|
|
78
|
-
|
|
77
|
+
labelValues: [
|
|
78
|
+
''
|
|
79
|
+
],
|
|
80
|
+
operator: '='
|
|
79
81
|
}
|
|
80
82
|
]);
|
|
81
83
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/explore/PrometheusMetricsFinder/filter/FinderFilters.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Button, FormControl,
|
|
1
|
+
{"version":3,"sources":["../../../../../src/explore/PrometheusMetricsFinder/filter/FinderFilters.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Button, FormControl, Stack, StackProps } from '@mui/material';\nimport { DatasourceSelector } from '@perses-dev/core';\nimport {\n DatasourceSelect,\n DatasourceSelectValue,\n datasourceSelectValueToSelector,\n useListDatasourceSelectItems,\n} from '@perses-dev/plugin-system';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { ReactElement } from 'react';\nimport { PROM_DATASOURCE_KIND } from '../../../model/prometheus-selectors';\nimport { LabelFilter } from '../types';\nimport { LabelFilterInput } from './FilterInputs';\n\nexport interface ExplorerFiltersProps extends StackProps {\n datasource: DatasourceSelector;\n filters: LabelFilter[];\n filteredFilters: LabelFilter[];\n onDatasourceChange: (next: DatasourceSelector) => void;\n onFiltersChange: (next: LabelFilter[]) => void;\n}\n\nexport function FinderFilters({\n datasource,\n filters,\n filteredFilters,\n onDatasourceChange,\n onFiltersChange,\n ...props\n}: ExplorerFiltersProps): ReactElement {\n const { data } = useListDatasourceSelectItems(PROM_DATASOURCE_KIND);\n function handleDatasourceChange(next: DatasourceSelectValue): void {\n const datasourceSelector = datasourceSelectValueToSelector(next, {}, data) ?? { kind: PROM_DATASOURCE_KIND };\n onDatasourceChange(datasourceSelector);\n }\n\n return (\n <Stack {...props} direction=\"row\" alignItems=\"center\" flexWrap=\"wrap\" gap={1} sx={{ width: '100%' }}>\n <FormControl sx={{ width: 250 }}>\n <DatasourceSelect\n size=\"medium\"\n datasourcePluginKind={PROM_DATASOURCE_KIND}\n value={datasource}\n onChange={handleDatasourceChange}\n label=\"Prometheus Datasource\"\n fullWidth={true}\n />\n </FormControl>\n {filters.map((filter, index) => (\n <LabelFilterInput\n key={index}\n datasource={datasource}\n filters={filteredFilters}\n value={filter}\n onChange={(next) => {\n const nextFilters = [...filters];\n nextFilters[index] = next;\n onFiltersChange(nextFilters);\n }}\n onDelete={() => {\n const nextFilters = [...filters];\n nextFilters.splice(index, 1);\n onFiltersChange(nextFilters);\n }}\n />\n ))}\n <Button\n startIcon={<PlusIcon />}\n aria-label=\"add filter\"\n onClick={() => {\n onFiltersChange([...filters, { label: '', labelValues: [''], operator: '=' }]);\n }}\n >\n Add filter\n </Button>\n </Stack>\n );\n}\n"],"names":["Button","FormControl","Stack","DatasourceSelect","datasourceSelectValueToSelector","useListDatasourceSelectItems","PlusIcon","PROM_DATASOURCE_KIND","LabelFilterInput","FinderFilters","datasource","filters","filteredFilters","onDatasourceChange","onFiltersChange","props","data","handleDatasourceChange","next","datasourceSelector","kind","direction","alignItems","flexWrap","gap","sx","width","size","datasourcePluginKind","value","onChange","label","fullWidth","map","filter","index","nextFilters","onDelete","splice","startIcon","aria-label","onClick","labelValues","operator"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,EAAEC,WAAW,EAAEC,KAAK,QAAoB,gBAAgB;AAEvE,SACEC,gBAAgB,EAEhBC,+BAA+B,EAC/BC,4BAA4B,QACvB,4BAA4B;AACnC,OAAOC,cAAc,uBAAuB;AAE5C,SAASC,oBAAoB,QAAQ,sCAAsC;AAE3E,SAASC,gBAAgB,QAAQ,iBAAiB;AAUlD,OAAO,SAASC,cAAc,EAC5BC,UAAU,EACVC,OAAO,EACPC,eAAe,EACfC,kBAAkB,EAClBC,eAAe,EACf,GAAGC,OACkB;IACrB,MAAM,EAAEC,IAAI,EAAE,GAAGX,6BAA6BE;IAC9C,SAASU,uBAAuBC,IAA2B;QACzD,MAAMC,qBAAqBf,gCAAgCc,MAAM,CAAC,GAAGF,SAAS;YAAEI,MAAMb;QAAqB;QAC3GM,mBAAmBM;IACrB;IAEA,qBACE,MAACjB;QAAO,GAAGa,KAAK;QAAEM,WAAU;QAAMC,YAAW;QAASC,UAAS;QAAOC,KAAK;QAAGC,IAAI;YAAEC,OAAO;QAAO;;0BAChG,KAACzB;gBAAYwB,IAAI;oBAAEC,OAAO;gBAAI;0BAC5B,cAAA,KAACvB;oBACCwB,MAAK;oBACLC,sBAAsBrB;oBACtBsB,OAAOnB;oBACPoB,UAAUb;oBACVc,OAAM;oBACNC,WAAW;;;YAGdrB,QAAQsB,GAAG,CAAC,CAACC,QAAQC,sBACpB,KAAC3B;oBAECE,YAAYA;oBACZC,SAASC;oBACTiB,OAAOK;oBACPJ,UAAU,CAACZ;wBACT,MAAMkB,cAAc;+BAAIzB;yBAAQ;wBAChCyB,WAAW,CAACD,MAAM,GAAGjB;wBACrBJ,gBAAgBsB;oBAClB;oBACAC,UAAU;wBACR,MAAMD,cAAc;+BAAIzB;yBAAQ;wBAChCyB,YAAYE,MAAM,CAACH,OAAO;wBAC1BrB,gBAAgBsB;oBAClB;mBAbKD;0BAgBT,KAACnC;gBACCuC,yBAAW,KAACjC;gBACZkC,cAAW;gBACXC,SAAS;oBACP3B,gBAAgB;2BAAIH;wBAAS;4BAAEoB,OAAO;4BAAIW,aAAa;gCAAC;6BAAG;4BAAEC,UAAU;wBAAI;qBAAE;gBAC/E;0BACD;;;;AAKP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrometheusTimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAYrC,OAAO,EACL,oCAAoC,EAIrC,MAAM,sBAAsB,CAAC;AAE9B;;GAEG;AACH,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,oCAAoC,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"PrometheusTimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAYrC,OAAO,EACL,oCAAoC,EAIrC,MAAM,sBAAsB,CAAC;AAE9B;;GAEG;AACH,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,oCAAoC,GAAG,YAAY,CAgFzG"}
|
|
@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
14
14
|
import { produce } from 'immer';
|
|
15
15
|
import { DatasourceSelect, useDatasource, useDatasourceClient, useDatasourceSelectValueToSelector } from '@perses-dev/plugin-system';
|
|
16
16
|
import { useId } from '@perses-dev/components';
|
|
17
|
-
import { FormControl,
|
|
17
|
+
import { FormControl, Stack, TextField } from '@mui/material';
|
|
18
18
|
import { DEFAULT_PROM, isDefaultPromSelector, isPrometheusDatasourceSelector, PROM_DATASOURCE_KIND } from '../../model';
|
|
19
19
|
import { DEFAULT_SCRAPE_INTERVAL } from '../types';
|
|
20
20
|
import { PromQLEditor } from '../../components';
|
|
@@ -48,24 +48,17 @@ import { useQueryState, useFormatState, useMinStepState } from './query-editor-m
|
|
|
48
48
|
return /*#__PURE__*/ _jsxs(Stack, {
|
|
49
49
|
spacing: 2,
|
|
50
50
|
children: [
|
|
51
|
-
/*#__PURE__*/
|
|
51
|
+
/*#__PURE__*/ _jsx(FormControl, {
|
|
52
52
|
margin: "dense",
|
|
53
53
|
fullWidth: false,
|
|
54
|
-
children:
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
value: datasourceSelectValue,
|
|
63
|
-
onChange: handleDatasourceChange,
|
|
64
|
-
labelId: datasourceSelectLabelID,
|
|
65
|
-
label: "Prometheus Datasource",
|
|
66
|
-
notched: true
|
|
67
|
-
})
|
|
68
|
-
]
|
|
54
|
+
children: /*#__PURE__*/ _jsx(DatasourceSelect, {
|
|
55
|
+
datasourcePluginKind: PROM_DATASOURCE_KIND,
|
|
56
|
+
value: datasourceSelectValue,
|
|
57
|
+
onChange: handleDatasourceChange,
|
|
58
|
+
labelId: datasourceSelectLabelID,
|
|
59
|
+
label: "Prometheus Datasource",
|
|
60
|
+
notched: true
|
|
61
|
+
})
|
|
69
62
|
}),
|
|
70
63
|
/*#__PURE__*/ _jsx(PromQLEditor, {
|
|
71
64
|
completeConfig: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport {\n DatasourceSelect,\n DatasourceSelectProps,\n useDatasource,\n useDatasourceClient,\n useDatasourceSelectValueToSelector,\n} from '@perses-dev/plugin-system';\nimport { useId } from '@perses-dev/components';\nimport { FormControl,
|
|
1
|
+
{"version":3,"sources":["../../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport {\n DatasourceSelect,\n DatasourceSelectProps,\n useDatasource,\n useDatasourceClient,\n useDatasourceSelectValueToSelector,\n} from '@perses-dev/plugin-system';\nimport { useId } from '@perses-dev/components';\nimport { FormControl, Stack, TextField } from '@mui/material';\nimport { ReactElement } from 'react';\nimport {\n DEFAULT_PROM,\n DurationString,\n isDefaultPromSelector,\n isPrometheusDatasourceSelector,\n PROM_DATASOURCE_KIND,\n PrometheusClient,\n PrometheusDatasourceSelector,\n} from '../../model';\nimport { DEFAULT_SCRAPE_INTERVAL, PrometheusDatasourceSpec } from '../types';\nimport { PromQLEditor } from '../../components';\nimport {\n PrometheusTimeSeriesQueryEditorProps,\n useQueryState,\n useFormatState,\n useMinStepState,\n} from './query-editor-model';\n\n/**\n * The options editor component for editing a PrometheusTimeSeriesQuery's spec.\n */\nexport function PrometheusTimeSeriesQueryEditor(props: PrometheusTimeSeriesQueryEditorProps): ReactElement {\n const { onChange, value } = props;\n const { datasource } = value;\n const datasourceSelectValue = datasource ?? DEFAULT_PROM;\n\n const datasourceSelectLabelID = useId('prom-datasource-label'); // for panels with multiple queries, this component is rendered multiple times on the same page\n\n const selectedDatasource = useDatasourceSelectValueToSelector(\n datasourceSelectValue,\n PROM_DATASOURCE_KIND\n ) as PrometheusDatasourceSelector;\n\n const { data: client } = useDatasourceClient<PrometheusClient>(selectedDatasource);\n const promURL = client?.options.datasourceUrl;\n const { data: datasourceResource } = useDatasource(selectedDatasource);\n\n const { handleQueryChange, handleQueryBlur } = useQueryState(props);\n const { format, handleFormatChange, handleFormatBlur } = useFormatState(props);\n const { minStep, handleMinStepChange, handleMinStepBlur } = useMinStepState(props);\n const minStepPlaceholder =\n minStep ??\n (datasourceResource && (datasourceResource?.plugin.spec as PrometheusDatasourceSpec).scrapeInterval) ??\n DEFAULT_SCRAPE_INTERVAL;\n\n const handleDatasourceChange: DatasourceSelectProps['onChange'] = (next) => {\n if (isPrometheusDatasourceSelector(next)) {\n onChange(\n produce(value, (draft) => {\n // If they're using the default, just omit the datasource prop (i.e. set to undefined)\n const nextDatasource = isDefaultPromSelector(next) ? undefined : next;\n draft.datasource = nextDatasource;\n })\n );\n return;\n }\n\n throw new Error('Got unexpected non-Prometheus datasource selector');\n };\n\n return (\n <Stack spacing={2}>\n <FormControl margin=\"dense\" fullWidth={false}>\n <DatasourceSelect\n datasourcePluginKind={PROM_DATASOURCE_KIND}\n value={datasourceSelectValue}\n onChange={handleDatasourceChange}\n labelId={datasourceSelectLabelID}\n label=\"Prometheus Datasource\"\n notched\n />\n </FormControl>\n <PromQLEditor\n completeConfig={{ remote: { url: promURL } }}\n value={value.query} // here we are passing `value.query` and not `query` from useQueryState in order to get updates only on onBlur events\n datasource={selectedDatasource}\n onChange={handleQueryChange}\n onBlur={handleQueryBlur}\n />\n <Stack direction=\"row\" spacing={2}>\n <TextField\n fullWidth\n label=\"Legend\"\n placeholder=\"Example: '{{instance}}' will generate series names like 'webserver-123', 'webserver-456'...\"\n helperText=\"Text to be displayed in the legend and the tooltip. Use {{label_name}} to interpolate label values.\"\n value={format ?? ''}\n onChange={(e) => handleFormatChange(e.target.value)}\n onBlur={handleFormatBlur}\n />\n <TextField\n label=\"Min Step\"\n placeholder={minStepPlaceholder}\n helperText=\"Lower bound for the step. If not provided, the scrape interval of the datasource is used.\"\n value={minStep}\n onChange={(e) => handleMinStepChange(e.target.value as DurationString)}\n onBlur={handleMinStepBlur}\n sx={{ width: '250px' }}\n />\n </Stack>\n </Stack>\n );\n}\n"],"names":["produce","DatasourceSelect","useDatasource","useDatasourceClient","useDatasourceSelectValueToSelector","useId","FormControl","Stack","TextField","DEFAULT_PROM","isDefaultPromSelector","isPrometheusDatasourceSelector","PROM_DATASOURCE_KIND","DEFAULT_SCRAPE_INTERVAL","PromQLEditor","useQueryState","useFormatState","useMinStepState","PrometheusTimeSeriesQueryEditor","props","onChange","value","datasource","datasourceSelectValue","datasourceSelectLabelID","selectedDatasource","data","client","promURL","options","datasourceUrl","datasourceResource","handleQueryChange","handleQueryBlur","format","handleFormatChange","handleFormatBlur","minStep","handleMinStepChange","handleMinStepBlur","minStepPlaceholder","plugin","spec","scrapeInterval","handleDatasourceChange","next","draft","nextDatasource","undefined","Error","spacing","margin","fullWidth","datasourcePluginKind","labelId","label","notched","completeConfig","remote","url","query","onBlur","direction","placeholder","helperText","e","target","sx","width"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prometheus-variables.d.ts","sourceRoot":"","sources":["../../../src/plugins/prometheus-variables.tsx"],"names":[],"mappings":"AAaA,OAAO,EAGL,kBAAkB,EAElB,cAAc,EACf,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAIL,UAAU,EAGV,UAAU,EACX,MAAM,UAAU,CAAC;AAElB,OAAO,EACL,mCAAmC,EACnC,oCAAoC,EACpC,+BAA+B,EAChC,MAAM,SAAS,CAAC;AAEjB,wBAAgB,mCAAmC,CACjD,KAAK,EAAE,kBAAkB,CAAC,oCAAoC,CAAC,GAC9D,YAAY,
|
|
1
|
+
{"version":3,"file":"prometheus-variables.d.ts","sourceRoot":"","sources":["../../../src/plugins/prometheus-variables.tsx"],"names":[],"mappings":"AAaA,OAAO,EAGL,kBAAkB,EAElB,cAAc,EACf,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAIL,UAAU,EAGV,UAAU,EACX,MAAM,UAAU,CAAC;AAElB,OAAO,EACL,mCAAmC,EACnC,oCAAoC,EACpC,+BAA+B,EAChC,MAAM,SAAS,CAAC;AAEjB,wBAAgB,mCAAmC,CACjD,KAAK,EAAE,kBAAkB,CAAC,oCAAoC,CAAC,GAC9D,YAAY,CAmDd;AAED,wBAAgB,kCAAkC,CAChD,KAAK,EAAE,kBAAkB,CAAC,mCAAmC,CAAC,GAC7D,YAAY,CAwCd;AAED,wBAAgB,8BAA8B,CAC5C,KAAK,EAAE,kBAAkB,CAAC,+BAA+B,CAAC,GACzD,YAAY,CAwDd;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,CAS/E;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,CAS/E;AAED;;GAEG;AACH,eAAO,MAAM,4BAA4B,GAAI,SAAS,MAAM,EAAE,KAAG,cAAc,EAM9E,CAAC"}
|