@ssa-ui-kit/infra-dash 0.4.2-canary-d213a33-20251219 → 0.4.2-canary-f90c17a-20251231

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.
Files changed (3) hide show
  1. package/package.json +6 -6
  2. package/dist/index.js +0 -3198
  3. package/dist/index.js.map +0 -1
package/dist/index.js DELETED
@@ -1,3198 +0,0 @@
1
- (function webpackUniversalModuleDefinition(root, factory) {
2
- if(typeof exports === 'object' && typeof module === 'object')
3
- module.exports = factory();
4
- else if(typeof define === 'function' && define.amd)
5
- define([], factory);
6
- else if(typeof exports === 'object')
7
- exports["SSAInfraDash"] = factory();
8
- else
9
- root["SSAInfraDash"] = factory();
10
- })(self, () => {
11
- return /******/ (() => { // webpackBootstrap
12
- /******/ "use strict";
13
- /******/ // The require scope
14
- /******/ var __webpack_require__ = {};
15
- /******/
16
- /************************************************************************/
17
- /******/ /* webpack/runtime/compat get default export */
18
- /******/ (() => {
19
- /******/ // getDefaultExport function for compatibility with non-harmony modules
20
- /******/ __webpack_require__.n = (module) => {
21
- /******/ var getter = module && module.__esModule ?
22
- /******/ () => (module['default']) :
23
- /******/ () => (module);
24
- /******/ __webpack_require__.d(getter, { a: getter });
25
- /******/ return getter;
26
- /******/ };
27
- /******/ })();
28
- /******/
29
- /******/ /* webpack/runtime/define property getters */
30
- /******/ (() => {
31
- /******/ // define getter functions for harmony exports
32
- /******/ __webpack_require__.d = (exports, definition) => {
33
- /******/ for(var key in definition) {
34
- /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
35
- /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
36
- /******/ }
37
- /******/ }
38
- /******/ };
39
- /******/ })();
40
- /******/
41
- /******/ /* webpack/runtime/hasOwnProperty shorthand */
42
- /******/ (() => {
43
- /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
44
- /******/ })();
45
- /******/
46
- /******/ /* webpack/runtime/make namespace object */
47
- /******/ (() => {
48
- /******/ // define __esModule on exports
49
- /******/ __webpack_require__.r = (exports) => {
50
- /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
51
- /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
52
- /******/ }
53
- /******/ Object.defineProperty(exports, '__esModule', { value: true });
54
- /******/ };
55
- /******/ })();
56
- /******/
57
- /************************************************************************/
58
- var __webpack_exports__ = {};
59
- // ESM COMPAT FLAG
60
- __webpack_require__.r(__webpack_exports__);
61
-
62
- // EXPORTS
63
- __webpack_require__.d(__webpack_exports__, {
64
- DashboardEditor: () => (/* reexport */ DashboardEditor),
65
- DashboardEditorInternal: () => (/* reexport */ DashboardEditorInternal),
66
- DashboardViewer: () => (/* reexport */ DashboardViewer),
67
- InfraDashProvider: () => (/* reexport */ InfraDashProvider),
68
- PeriodSelector: () => (/* reexport */ PeriodSelector),
69
- RestInfraDashTransport: () => (/* reexport */ RestInfraDashTransport),
70
- useCreateDashboard: () => (/* reexport */ useCreateDashboard),
71
- useDashboard: () => (/* reexport */ useDashboard),
72
- useDashboards: () => (/* reexport */ useDashboards),
73
- useDeleteDashboard: () => (/* reexport */ useDeleteDashboard),
74
- useInfraDashContext: () => (/* reexport */ useInfraDashContext),
75
- useInfraDashPanelDataPeriodContext: () => (/* reexport */ useInfraDashPanelDataPeriodContext),
76
- useMutationClient: () => (/* reexport */ useMutationClient),
77
- usePublishedDashboards: () => (/* reexport */ usePublishedDashboards),
78
- useQueryClient: () => (/* reexport */ useQueryClient),
79
- useTransport: () => (/* reexport */ useTransport),
80
- useUpdateDashboard: () => (/* reexport */ useUpdateDashboard)
81
- });
82
-
83
- ;// external "react-error-boundary"
84
- const external_react_error_boundary_namespaceObject = require("react-error-boundary");
85
- ;// external "@ssa-ui-kit/core"
86
- const core_namespaceObject = require("@ssa-ui-kit/core");
87
- ;// external "@emotion/react/jsx-runtime"
88
- const jsx_runtime_namespaceObject = require("@emotion/react/jsx-runtime");
89
- ;// ./src/shared/icons/ErrorIcon.tsx
90
-
91
- const ErrorIcon = () => (0,jsx_runtime_namespaceObject.jsxs)("svg", {
92
- width: "80",
93
- height: "80",
94
- viewBox: "0 0 80 80",
95
- fill: "none",
96
- xmlns: "http://www.w3.org/2000/svg",
97
- children: [(0,jsx_runtime_namespaceObject.jsx)("circle", {
98
- cx: "40",
99
- cy: "40",
100
- r: "40",
101
- fill: "#EEF1F7"
102
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
103
- fillRule: "evenodd",
104
- clipRule: "evenodd",
105
- d: "M56.9165 39.6055H24.4165V54.6465C24.4165 55.3639 24.8869 55.9968 25.5743 56.2032C28.8398 57.1823 38.0226 59.9375 40.1993 60.5907C40.504 60.6817 40.829 60.6817 41.1337 60.5907C43.3104 59.9375 52.4933 57.1823 55.7587 56.2032C56.4461 55.9968 56.9165 55.3639 56.9165 54.6465C56.9165 50.8797 56.9165 39.6055 56.9165 39.6055Z",
106
- fill: "url(#paint0_linear_175_25229)"
107
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
108
- fillRule: "evenodd",
109
- clipRule: "evenodd",
110
- d: "M56.9162 39.6055H40.6662C40.6662 39.6055 40.5086 60.659 40.6662 60.659C40.8239 60.659 40.9807 60.6362 41.1334 60.5907C43.3101 59.9375 52.493 57.1823 55.7584 56.2032C56.4458 55.9968 56.9162 55.3639 56.9162 54.6465C56.9162 50.8797 56.9162 39.6055 56.9162 39.6055Z",
111
- fill: "url(#paint1_linear_175_25229)"
112
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
113
- fillRule: "evenodd",
114
- clipRule: "evenodd",
115
- d: "M40.6665 44.8778L24.4165 39.6055C24.4165 39.6055 21.567 43.8305 20.293 45.7187C20.15 45.9308 20.1151 46.1965 20.198 46.4378C20.2817 46.6791 20.4726 46.8668 20.7155 46.9464C23.8022 47.949 32.9396 50.9179 35.3365 51.6963C35.6802 51.8084 36.0572 51.6792 36.2603 51.3794C37.3498 49.7715 40.6665 44.8778 40.6665 44.8778Z",
116
- fill: "url(#paint2_linear_175_25229)"
117
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
118
- fillRule: "evenodd",
119
- clipRule: "evenodd",
120
- d: "M56.9165 39.6055L40.6665 44.8778C40.6665 44.8778 43.9831 49.7715 45.0727 51.3794C45.2758 51.6792 45.6528 51.8084 45.9965 51.6963C48.3934 50.9179 57.5308 47.949 60.6174 46.9464C60.8604 46.8668 61.0513 46.6791 61.135 46.4378C61.2179 46.1965 61.1829 45.9308 61.0399 45.7187C59.7659 43.8305 56.9165 39.6055 56.9165 39.6055Z",
121
- fill: "url(#paint3_linear_175_25229)"
122
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
123
- fillRule: "evenodd",
124
- clipRule: "evenodd",
125
- d: "M36.7329 28.5303C36.5298 28.2321 36.1536 28.1029 35.8099 28.215C33.4147 28.9926 24.2749 31.9623 21.1882 32.9657C20.9452 33.0445 20.7535 33.2322 20.6706 33.4735C20.5877 33.7148 20.6227 33.9813 20.7657 34.1926C21.9389 35.933 24.4162 39.6055 24.4162 39.6055L40.6662 34.3153C40.6662 34.3153 37.7477 30.0228 36.7329 28.5303Z",
126
- fill: "url(#paint4_linear_175_25229)"
127
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
128
- fillRule: "evenodd",
129
- clipRule: "evenodd",
130
- d: "M60.5671 34.1926C60.7101 33.9813 60.745 33.7148 60.6621 33.4735C60.5793 33.2322 60.3875 33.0445 60.1446 32.9657C57.0579 31.9623 47.9181 28.9926 45.5228 28.215C45.1791 28.1029 44.8029 28.2321 44.5998 28.5303C43.585 30.0228 40.6665 34.3153 40.6665 34.3153L56.9165 39.6055C56.9165 39.6055 59.3938 35.933 60.5671 34.1926Z",
131
- fill: "url(#paint5_linear_175_25229)"
132
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
133
- fillRule: "evenodd",
134
- clipRule: "evenodd",
135
- d: "M56.9165 39.6055L40.6665 34.3153L24.4165 39.6055L40.6665 44.8778L56.9165 39.6055Z",
136
- fill: "url(#paint6_linear_175_25229)"
137
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
138
- fillRule: "evenodd",
139
- clipRule: "evenodd",
140
- d: "M40.6665 44.8778V34.3153L24.4165 39.6055L40.6665 44.8778Z",
141
- fill: "url(#paint7_linear_175_25229)"
142
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
143
- fillRule: "evenodd",
144
- clipRule: "evenodd",
145
- d: "M37.4019 36.6488C37.0639 36.4278 36.7592 36.1913 36.4886 35.9435C36.1588 35.6405 35.6445 35.6624 35.3406 35.9931C35.0375 36.323 35.0595 36.8373 35.3901 37.1403C35.7225 37.4458 36.097 37.7367 36.513 38.0089C36.8884 38.2543 37.3921 38.1486 37.6375 37.7733C37.8829 37.3979 37.7773 36.8941 37.4019 36.6488Z",
146
- fill: "url(#paint8_linear_175_25229)"
147
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
148
- fillRule: "evenodd",
149
- clipRule: "evenodd",
150
- d: "M34.8703 34.1528C34.629 33.8253 34.4251 33.4963 34.2577 33.1672C34.0546 32.7675 33.5646 32.6082 33.1649 32.8113C32.7651 33.0145 32.6059 33.5044 32.809 33.9042C33.0154 34.3088 33.2656 34.7142 33.5622 35.1164C33.8279 35.4772 34.3365 35.5543 34.6981 35.2887C35.0588 35.0222 35.136 34.5135 34.8703 34.1528Z",
151
- fill: "url(#paint9_linear_175_25229)"
152
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
153
- fillRule: "evenodd",
154
- clipRule: "evenodd",
155
- d: "M33.6824 30.837C33.6905 30.5095 33.7384 30.1918 33.8262 29.8872C33.9497 29.4565 33.7002 29.0056 33.2688 28.8821C32.8382 28.7586 32.3872 29.008 32.2637 29.4395C32.1394 29.875 32.0695 30.3292 32.0574 30.7963C32.0468 31.2448 32.401 31.6178 32.8495 31.6283C33.298 31.6397 33.671 31.2855 33.6824 30.837Z",
156
- fill: "url(#paint10_linear_175_25229)"
157
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
158
- fillRule: "evenodd",
159
- clipRule: "evenodd",
160
- d: "M34.9318 28.1232C35.1406 27.9299 35.3746 27.7511 35.6305 27.5894C36.0099 27.3497 36.1237 26.8476 35.8848 26.469C35.6451 26.0895 35.143 25.9758 34.7636 26.2147C34.4199 26.4316 34.1079 26.6713 33.8276 26.9313C33.4985 27.236 33.479 27.7503 33.7837 28.0794C34.0884 28.4084 34.6027 28.4279 34.9318 28.1232Z",
161
- fill: "url(#paint11_linear_175_25229)"
162
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
163
- fillRule: "evenodd",
164
- clipRule: "evenodd",
165
- d: "M37.9535 26.7216C38.3622 26.6461 38.7953 26.5973 39.2519 26.5786C39.7004 26.5591 40.0481 26.1797 40.0295 25.732C40.0108 25.2843 39.6313 24.9358 39.1828 24.9545C38.6466 24.9772 38.138 25.0349 37.6578 25.1235C37.2174 25.2055 36.9249 25.6296 37.007 26.07C37.0882 26.5112 37.5123 26.8029 37.9535 26.7216Z",
166
- fill: "url(#paint12_linear_175_25229)"
167
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
168
- fillRule: "evenodd",
169
- clipRule: "evenodd",
170
- d: "M42.1886 26.6737C42.8816 26.6818 43.5267 26.6575 44.1256 26.6047C44.5724 26.5648 44.9031 26.17 44.8633 25.7231C44.8235 25.277 44.4286 24.9463 43.9817 24.9862C43.4333 25.0341 42.8426 25.0568 42.2072 25.0487C41.7587 25.0438 41.3907 25.4038 41.3858 25.8515C41.3801 26.3 41.7401 26.6688 42.1886 26.6737Z",
171
- fill: "url(#paint13_linear_175_25229)"
172
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
173
- fillRule: "evenodd",
174
- clipRule: "evenodd",
175
- d: "M46.796 26.1066C47.6003 25.8604 48.2796 25.5452 48.8483 25.1836C49.2261 24.9423 49.3383 24.4402 49.097 24.0615C48.8565 23.6837 48.3535 23.5716 47.9749 23.8129C47.5175 24.1038 46.969 24.354 46.3206 24.5523C45.8925 24.6839 45.6503 25.1381 45.782 25.5671C45.9128 25.9961 46.3678 26.2374 46.796 26.1066Z",
176
- fill: "url(#paint14_linear_175_25229)"
177
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
178
- fillRule: "evenodd",
179
- clipRule: "evenodd",
180
- d: "M50.9315 22.9094C51.315 22.1164 51.4621 21.2779 51.4247 20.4695C51.4036 20.021 51.0225 19.6748 50.5749 19.696C50.1272 19.7171 49.7802 20.0973 49.8014 20.545C49.8274 21.0943 49.7282 21.6638 49.4682 22.2025C49.2732 22.6063 49.4422 23.093 49.846 23.288C50.2499 23.483 50.7365 23.3132 50.9315 22.9094Z",
181
- fill: "url(#paint15_linear_175_25229)"
182
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
183
- fillRule: "evenodd",
184
- clipRule: "evenodd",
185
- d: "M50.4143 17.5965C49.822 16.7962 49.0184 16.2388 48.1425 16.0592C47.703 15.9698 47.2732 16.2526 47.183 16.6922C47.0936 17.1317 47.3772 17.5615 47.8159 17.6517C48.3213 17.7549 48.7665 18.1018 49.1086 18.5642C49.3759 18.9241 49.8853 18.9997 50.2453 18.7332C50.606 18.4658 50.6816 17.9564 50.4143 17.5965Z",
186
- fill: "url(#paint16_linear_175_25229)"
187
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
188
- fillRule: "evenodd",
189
- clipRule: "evenodd",
190
- d: "M39.7993 16.2168C40.6784 11.2386 48.2973 11.5604 43.8618 16.2168H39.7993Z",
191
- fill: "url(#paint17_linear_175_25229)"
192
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
193
- fillRule: "evenodd",
194
- clipRule: "evenodd",
195
- d: "M39.7993 17.4778C40.6784 22.4552 48.2973 22.1343 43.8618 17.4778H39.7993Z",
196
- fill: "url(#paint18_linear_175_25229)"
197
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
198
- fillRule: "evenodd",
199
- clipRule: "evenodd",
200
- d: "M39.7266 17.668H45.1671C45.6156 17.668 45.9796 17.304 45.9796 16.8555C45.9796 16.407 45.6156 16.043 45.1671 16.043H39.7266C39.2789 16.043 38.9141 16.407 38.9141 16.8555C38.9141 17.304 39.2789 17.668 39.7266 17.668Z",
201
- fill: "url(#paint19_linear_175_25229)"
202
- }), (0,jsx_runtime_namespaceObject.jsxs)("defs", {
203
- children: [(0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
204
- id: "paint0_linear_175_25229",
205
- x1: "24.4165",
206
- y1: "50.1322",
207
- x2: "56.9165",
208
- y2: "50.1322",
209
- gradientUnits: "userSpaceOnUse",
210
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
211
- stopColor: "#CADCF0"
212
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
213
- offset: "1",
214
- stopColor: "#A4BBDB"
215
- })]
216
- }), (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
217
- id: "paint1_linear_175_25229",
218
- x1: "40.5964",
219
- y1: "50.1322",
220
- x2: "56.9162",
221
- y2: "50.1322",
222
- gradientUnits: "userSpaceOnUse",
223
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
224
- stopColor: "#A4BBDB"
225
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
226
- offset: "1",
227
- stopColor: "#8DA3BE"
228
- })]
229
- }), (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
230
- id: "paint2_linear_175_25229",
231
- x1: "24.5245",
232
- y1: "39.599",
233
- x2: "26.7957",
234
- y2: "54.6248",
235
- gradientUnits: "userSpaceOnUse",
236
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
237
- stopColor: "#E9F3FC"
238
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
239
- offset: "1",
240
- stopColor: "#CADCF0"
241
- })]
242
- }), (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
243
- id: "paint3_linear_175_25229",
244
- x1: "40.7323",
245
- y1: "44.8225",
246
- x2: "57.8628",
247
- y2: "54.6748",
248
- gradientUnits: "userSpaceOnUse",
249
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
250
- stopColor: "#E9F3FC"
251
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
252
- offset: "1",
253
- stopColor: "#CADCF0"
254
- })]
255
- }), (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
256
- id: "paint4_linear_175_25229",
257
- x1: "22.2891",
258
- y1: "36.4521",
259
- x2: "24.7405",
260
- y2: "24.8965",
261
- gradientUnits: "userSpaceOnUse",
262
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
263
- stopColor: "#E9F3FC"
264
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
265
- offset: "1",
266
- stopColor: "#CADCF0"
267
- })]
268
- }), (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
269
- id: "paint5_linear_175_25229",
270
- x1: "45.0166",
271
- y1: "28.0192",
272
- x2: "45.8932",
273
- y2: "42.2824",
274
- gradientUnits: "userSpaceOnUse",
275
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
276
- stopColor: "#E9F3FC"
277
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
278
- offset: "1",
279
- stopColor: "#CADCF0"
280
- })]
281
- }), (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
282
- id: "paint6_linear_175_25229",
283
- x1: "24.4165",
284
- y1: "39.5965",
285
- x2: "56.9165",
286
- y2: "39.5965",
287
- gradientUnits: "userSpaceOnUse",
288
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
289
- stopColor: "#CADCF0"
290
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
291
- offset: "1",
292
- stopColor: "#A4BBDB"
293
- })]
294
- }), (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
295
- id: "paint7_linear_175_25229",
296
- x1: "42.3305",
297
- y1: "34.0788",
298
- x2: "42.6807",
299
- y2: "47.2032",
300
- gradientUnits: "userSpaceOnUse",
301
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
302
- stopColor: "#A4BBDB"
303
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
304
- offset: "1",
305
- stopColor: "#8DA3BE"
306
- })]
307
- }), (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
308
- id: "paint8_linear_175_25229",
309
- x1: "31.7217",
310
- y1: "16.2168",
311
- x2: "47.7475",
312
- y2: "35.1261",
313
- gradientUnits: "userSpaceOnUse",
314
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
315
- stopColor: "#559AFF"
316
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
317
- offset: "1",
318
- stopColor: "#2E69EF"
319
- })]
320
- }), (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
321
- id: "paint9_linear_175_25229",
322
- x1: "31.7219",
323
- y1: "16.2168",
324
- x2: "47.7476",
325
- y2: "35.1261",
326
- gradientUnits: "userSpaceOnUse",
327
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
328
- stopColor: "#559AFF"
329
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
330
- offset: "1",
331
- stopColor: "#2E69EF"
332
- })]
333
- }), (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
334
- id: "paint10_linear_175_25229",
335
- x1: "31.7218",
336
- y1: "16.2168",
337
- x2: "47.7475",
338
- y2: "35.1262",
339
- gradientUnits: "userSpaceOnUse",
340
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
341
- stopColor: "#559AFF"
342
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
343
- offset: "1",
344
- stopColor: "#2E69EF"
345
- })]
346
- }), (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
347
- id: "paint11_linear_175_25229",
348
- x1: "31.7216",
349
- y1: "16.2169",
350
- x2: "47.7473",
351
- y2: "35.1262",
352
- gradientUnits: "userSpaceOnUse",
353
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
354
- stopColor: "#559AFF"
355
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
356
- offset: "1",
357
- stopColor: "#2E69EF"
358
- })]
359
- }), (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
360
- id: "paint12_linear_175_25229",
361
- x1: "31.7217",
362
- y1: "16.2168",
363
- x2: "47.7474",
364
- y2: "35.1261",
365
- gradientUnits: "userSpaceOnUse",
366
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
367
- stopColor: "#559AFF"
368
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
369
- offset: "1",
370
- stopColor: "#2E69EF"
371
- })]
372
- }), (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
373
- id: "paint13_linear_175_25229",
374
- x1: "31.7219",
375
- y1: "16.2168",
376
- x2: "47.7477",
377
- y2: "35.1262",
378
- gradientUnits: "userSpaceOnUse",
379
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
380
- stopColor: "#559AFF"
381
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
382
- offset: "1",
383
- stopColor: "#2E69EF"
384
- })]
385
- }), (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
386
- id: "paint14_linear_175_25229",
387
- x1: "31.7217",
388
- y1: "16.2168",
389
- x2: "47.7474",
390
- y2: "35.1262",
391
- gradientUnits: "userSpaceOnUse",
392
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
393
- stopColor: "#559AFF"
394
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
395
- offset: "1",
396
- stopColor: "#2E69EF"
397
- })]
398
- }), (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
399
- id: "paint15_linear_175_25229",
400
- x1: "31.7216",
401
- y1: "16.2168",
402
- x2: "47.7474",
403
- y2: "35.1261",
404
- gradientUnits: "userSpaceOnUse",
405
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
406
- stopColor: "#559AFF"
407
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
408
- offset: "1",
409
- stopColor: "#2E69EF"
410
- })]
411
- }), (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
412
- id: "paint16_linear_175_25229",
413
- x1: "31.7219",
414
- y1: "16.2168",
415
- x2: "47.7476",
416
- y2: "35.1262",
417
- gradientUnits: "userSpaceOnUse",
418
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
419
- stopColor: "#559AFF"
420
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
421
- offset: "1",
422
- stopColor: "#2E69EF"
423
- })]
424
- }), (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
425
- id: "paint17_linear_175_25229",
426
- x1: "39.7993",
427
- y1: "14.4098",
428
- x2: "45.239",
429
- y2: "14.4098",
430
- gradientUnits: "userSpaceOnUse",
431
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
432
- stopColor: "#E9F3FC"
433
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
434
- offset: "1",
435
- stopColor: "#CADCF0"
436
- })]
437
- }), (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
438
- id: "paint18_linear_175_25229",
439
- x1: "39.7993",
440
- y1: "19.2848",
441
- x2: "45.239",
442
- y2: "19.2848",
443
- gradientUnits: "userSpaceOnUse",
444
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
445
- stopColor: "#E9F3FC"
446
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
447
- offset: "1",
448
- stopColor: "#CADCF0"
449
- })]
450
- }), (0,jsx_runtime_namespaceObject.jsxs)("linearGradient", {
451
- id: "paint19_linear_175_25229",
452
- x1: "31.7218",
453
- y1: "16.2168",
454
- x2: "47.7476",
455
- y2: "35.1262",
456
- gradientUnits: "userSpaceOnUse",
457
- children: [(0,jsx_runtime_namespaceObject.jsx)("stop", {
458
- stopColor: "#559AFF"
459
- }), (0,jsx_runtime_namespaceObject.jsx)("stop", {
460
- offset: "1",
461
- stopColor: "#2E69EF"
462
- })]
463
- })]
464
- })]
465
- });
466
- ;// ./src/components/DashboardError/DashboardError.tsx
467
- function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
468
-
469
-
470
-
471
- var _ref = true ? {
472
- name: "67cb9k",
473
- styles: "justify-content:center;height:100%"
474
- } : 0;
475
- var _ref2 = true ? {
476
- name: "1kdycl6",
477
- styles: "margin-top:12px;text-align:center"
478
- } : 0;
479
- const DashboardError = ({
480
- children
481
- }) => (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
482
- direction: "column",
483
- css: _ref,
484
- children: [(0,jsx_runtime_namespaceObject.jsx)(ErrorIcon, {}), (0,jsx_runtime_namespaceObject.jsx)("div", {
485
- css: _ref2,
486
- children: children ?? 'An error occurred while loading the dashboard'
487
- })]
488
- });
489
- ;// external "@emotion/css"
490
- const css_namespaceObject = require("@emotion/css");
491
- ;// external "@emotion/react"
492
- const react_namespaceObject = require("@emotion/react");
493
- ;// ./src/components/LoadingDashboard/LoadingDashboard.tsx
494
- function LoadingDashboard_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
495
-
496
-
497
-
498
-
499
- var LoadingDashboard_ref = true ? {
500
- name: "67cb9k",
501
- styles: "justify-content:center;height:100%"
502
- } : 0;
503
- var LoadingDashboard_ref2 = true ? {
504
- name: "1kdycl6",
505
- styles: "margin-top:12px;text-align:center"
506
- } : 0;
507
- const LoadingDashboard = ({
508
- children
509
- }) => {
510
- const theme = (0,react_namespaceObject.useTheme)();
511
- return (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
512
- direction: "column",
513
- css: LoadingDashboard_ref,
514
- children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.ProgressCircle, {
515
- classnames: {
516
- inner: /*#__PURE__*/(0,css_namespaceObject.css)(`
517
- background: none !important;
518
- `, true ? "" : 0, true ? "" : 0),
519
- outer: /*#__PURE__*/(0,css_namespaceObject.css)(`
520
- background: none !important;
521
- border: 12px solid ${theme.colors.greyLighter};
522
- `, true ? "" : 0, true ? "" : 0)
523
- },
524
- currentValue: 3,
525
- max: 10,
526
- size: 120,
527
- color: "blue",
528
- mode: "infinite"
529
- }), children && (0,jsx_runtime_namespaceObject.jsx)("div", {
530
- css: LoadingDashboard_ref2,
531
- children: children
532
- })]
533
- });
534
- };
535
- ;// external "react"
536
- const external_react_namespaceObject = require("react");
537
- ;// ./src/shared/query/key.ts
538
- const hashKey = queryKey => {
539
- return JSON.stringify(queryKey);
540
- };
541
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
542
- function partialMatchKey(a, b) {
543
- if (a === b) {
544
- return true;
545
- }
546
- if (typeof a !== typeof b) {
547
- return false;
548
- }
549
- if (a && b && typeof a === 'object' && typeof b === 'object') {
550
- return Object.keys(b).every(key => partialMatchKey(a[key], b[key]));
551
- }
552
- return false;
553
- }
554
- ;// external "@ssa-ui-kit/hooks"
555
- const hooks_namespaceObject = require("@ssa-ui-kit/hooks");
556
- ;// ./src/shared/context/root.ts
557
-
558
- const [InfraDashInternalProvider, useInfraDashContext] = (0,hooks_namespaceObject.createSafeContext)('useInfraDashContext must be used within a InfraDashProvider');
559
- ;// ./src/shared/query/useQuery.ts
560
-
561
-
562
-
563
- const useQueryClient = () => {
564
- const {
565
- queryClient
566
- } = useInfraDashContext();
567
- return queryClient;
568
- };
569
- const useQuery = (key, fetcher, options) => {
570
- const queryClient = useQueryClient();
571
- const keyHash = (0,external_react_namespaceObject.useMemo)(() => hashKey(key), [key]);
572
- const entry = (0,external_react_namespaceObject.useMemo)(() => queryClient.fetchQuery(key, fetcher, options), [keyHash]);
573
- entry.updateEntity(fetcher, options);
574
- const subscribe = (0,external_react_namespaceObject.useCallback)(onStoreChange => {
575
- return entry.subscribe(() => {
576
- onStoreChange();
577
- });
578
- }, [entry]);
579
- const getSnapshot = () => {
580
- return entry.state;
581
- };
582
- const getServerSnapshot = getSnapshot;
583
- const state = (0,external_react_namespaceObject.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
584
- return {
585
- ...state,
586
- refetch: () => queryClient.invalidateQueries({
587
- key,
588
- exact: true
589
- })
590
- };
591
- };
592
- ;// ./src/shared/query/useMutation.ts
593
-
594
-
595
-
596
- const useMutationClient = () => {
597
- const {
598
- mutationClient
599
- } = useInfraDashContext();
600
- return mutationClient;
601
- };
602
- const useMutation = (key, mutationFn, options) => {
603
- const mutationClient = useMutationClient();
604
- const keyHash = (0,external_react_namespaceObject.useMemo)(() => hashKey(key), [key]);
605
- const entry = (0,external_react_namespaceObject.useMemo)(() => mutationClient.fetchMutation(key, mutationFn, options), [keyHash]);
606
- entry.updateEntity(mutationFn, options);
607
- const subscribe = (0,external_react_namespaceObject.useCallback)(onStoreChange => {
608
- return entry.subscribe(() => {
609
- onStoreChange();
610
- });
611
- }, [entry]);
612
- const getSnapshot = () => {
613
- return entry.state;
614
- };
615
- const getServerSnapshot = getSnapshot;
616
- const state = (0,external_react_namespaceObject.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
617
- const mutate = (0,external_react_namespaceObject.useCallback)((...args) => {
618
- return entry.mutate(...args);
619
- }, [entry]);
620
- const reset = (0,external_react_namespaceObject.useCallback)(() => {
621
- entry.reset();
622
- }, [entry]);
623
- const cancel = (0,external_react_namespaceObject.useCallback)(() => {
624
- entry.cancel();
625
- }, [entry]);
626
- return {
627
- mutate,
628
- data: state.data,
629
- error: state.error,
630
- isLoading: state.isLoading,
631
- reset,
632
- cancel
633
- };
634
- };
635
- ;// ./src/shared/transport/useTransport.ts
636
-
637
- const useTransport = transport => {
638
- const {
639
- transport: contextTransport
640
- } = useInfraDashContext();
641
- return transport ?? contextTransport;
642
- };
643
- ;// ./src/entities/dashboard/index.ts
644
-
645
-
646
- const useDashboards = options => {
647
- const {
648
- transport,
649
- ...queryOptions
650
- } = options || {};
651
- const _transport = useTransport(transport);
652
- const result = useQuery(['dashboards'], async signal => {
653
- return await _transport.getDashboards(signal);
654
- }, queryOptions);
655
- return result;
656
- };
657
- const useDashboard = (dashboardId, options) => {
658
- const {
659
- transport,
660
- ...queryOptions
661
- } = options || {};
662
- const _transport = useTransport(transport);
663
- const result = useQuery(['dashboards', dashboardId], async signal => {
664
- return await _transport.getDashboard(dashboardId, signal);
665
- }, queryOptions);
666
- return result;
667
- };
668
- const usePublishedDashboards = options => {
669
- const {
670
- transport,
671
- ...queryOptions
672
- } = options || {};
673
- const _transport = useTransport(transport);
674
- const result = useQuery(['dashboards', 'published'], async signal => {
675
- return await _transport.getPublishedDashboards(signal);
676
- }, queryOptions);
677
- return result;
678
- };
679
- const useCreateDashboard = options => {
680
- const {
681
- transport,
682
- ...mutationOptions
683
- } = options || {};
684
- const _transport = useTransport(transport);
685
- const result = useMutation(['create-dashboard'], async (payload, signal) => {
686
- const panels = payload.panels.map(panel => ({
687
- panelDefinition: panel.panelDefinition,
688
- source: panel.source
689
- }));
690
- const dashboardsUid = new Set(panels.map(panel => panel.source.dashboardUid));
691
- if (!dashboardsUid.size) {
692
- throw new Error('At least one panel must be provided');
693
- }
694
- return await _transport.createDashboard({
695
- title: payload.title,
696
- published: payload.published,
697
- dashboardDefinition: payload.dashboardDefinition,
698
- panels
699
- }, signal);
700
- }, mutationOptions);
701
- return result;
702
- };
703
- const useUpdateDashboard = (dashboardId, options) => {
704
- const {
705
- transport,
706
- ...mutationOptions
707
- } = options || {};
708
- const _transport = useTransport(transport);
709
- const result = useMutation(['update-dashboard', dashboardId], async (payload, signal) => {
710
- const panels = payload.panels.map(panel => ({
711
- panelDefinition: panel.panelDefinition,
712
- source: panel.source
713
- }));
714
- const dashboardsUid = new Set(panels.map(panel => panel.source.dashboardUid));
715
- if (!dashboardsUid.size) {
716
- throw new Error('At least one panel must be provided');
717
- }
718
- return await _transport.updateDashboard({
719
- title: payload.title,
720
- published: payload.published,
721
- dashboardDefinition: payload.dashboardDefinition,
722
- panels,
723
- dashboardId
724
- }, signal);
725
- }, mutationOptions);
726
- return result;
727
- };
728
- const useDeleteDashboard = (dashboardId, options) => {
729
- const {
730
- transport,
731
- ...mutationOptions
732
- } = options || {};
733
- const _transport = useTransport(transport);
734
- const result = useMutation(['delete-dashboard', dashboardId], async (_, signal) => {
735
- return await _transport.deleteDashboard(dashboardId, signal);
736
- }, mutationOptions);
737
- return result;
738
- };
739
- ;// ./src/shared/panel.ts
740
- /**
741
- * Defines the configuration and positioning information for a dashboard panel.
742
- * Contains both the component configuration and grid layout positioning.
743
- */
744
-
745
- /**
746
- * Represents a complete dashboard panel with its metadata, schema, and definition.
747
- * Combines panel identity, display information, data schema, and component configuration.
748
- */
749
-
750
- /**
751
- * Optional schema defining the structure of props this component expects.
752
- * Used for validation and form generation in configuration UIs.
753
- */
754
-
755
- /**
756
- * Configuration object for registering a panel component type.
757
- * Defines how a specific component should be rendered and what panel types it supports.
758
- */
759
-
760
- /**
761
- * Constant object defining available panel data sources.
762
- * Currently only supports Grafana as a data source.
763
- */
764
- const PANEL_DATA_SOURCE = {
765
- GRAFANA: 'grafana'
766
- };
767
- /**
768
- * Pattern matching utility function for handling different panel data sources.
769
- * Provides type-safe way to handle operations based on the data source type.
770
- *
771
- * @param source - The panel data source to match against
772
- * @param handlers - Object containing handler functions for each data source type
773
- */
774
- const matchPanelDataSource = (source, handlers) => {
775
- switch (source) {
776
- case PANEL_DATA_SOURCE.GRAFANA:
777
- return handlers.grafana();
778
- default:
779
- {
780
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
781
- const _ = source;
782
- throw new Error(`Unsupported panel data source: ${source}`);
783
- }
784
- }
785
- };
786
-
787
- /**
788
- * Represents panel data with its source and associated data.
789
- * Currently only supports Grafana as a data source.
790
- */
791
-
792
- const PANEL_DATA_PERIOD = {
793
- LAST_HOUR: 0,
794
- LAST_6_HOURS: 1,
795
- LAST_24_HOURS: 2,
796
- LAST_7_DAYS: 3,
797
- LAST_30_DAYS: 4
798
- };
799
- ;// ./src/shared/context/panelDataPeriod.ts
800
-
801
-
802
- const useInfraDashPanelDataPeriod = ({
803
- defaultPeriod,
804
- period: providedPeriod,
805
- onPeriodChange
806
- } = {}) => {
807
- const [period, changePeriod] = (0,hooks_namespaceObject.useUncontrolled)({
808
- value: providedPeriod,
809
- defaultValue: defaultPeriod,
810
- finalValue: PANEL_DATA_PERIOD.LAST_HOUR,
811
- onChange: onPeriodChange
812
- });
813
- return {
814
- period,
815
- changePeriod
816
- };
817
- };
818
- const [InfraDashPanelDataPeriodProvider, useInfraDashPanelDataPeriodContext] = (0,hooks_namespaceObject.createSafeContext)('useInfraDashPanelDataPeriodContext must be used within a InfraDashPanelDataPeriodProvider');
819
- ;// external "react-grid-layout"
820
- const external_react_grid_layout_namespaceObject = require("react-grid-layout");
821
- var external_react_grid_layout_default = /*#__PURE__*/__webpack_require__.n(external_react_grid_layout_namespaceObject);
822
- ;// ./src/components/BasePanel/BasePanel.tsx
823
- function BasePanel_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
824
-
825
-
826
- var BasePanel_ref = true ? {
827
- name: "3ytxc3",
828
- styles: "height:100%;overflow:hidden"
829
- } : 0;
830
- const BasePanel = ({
831
- children
832
- }) => (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Wrapper, {
833
- alignItems: "center",
834
- direction: "column",
835
- css: BasePanel_ref,
836
- children: children
837
- });
838
- ;// ./src/components/ErrorPanel/ErrorPanel.tsx
839
- function ErrorPanel_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
840
-
841
-
842
-
843
-
844
- var ErrorPanel_ref = true ? {
845
- name: "1kdycl6",
846
- styles: "margin-top:12px;text-align:center"
847
- } : 0;
848
- const ErrorPanel = ({
849
- title,
850
- children
851
- }) => {
852
- return (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.WidgetCard, {
853
- title: title,
854
- contentClassName: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
855
- name: "1wgy75t",
856
- styles: "align-items:center!important;justify-content:center!important"
857
- } : 0),
858
- children: [(0,jsx_runtime_namespaceObject.jsx)(ErrorIcon, {}), (0,jsx_runtime_namespaceObject.jsx)("div", {
859
- css: ErrorPanel_ref,
860
- children: children ?? 'An error occurred while loading the panel'
861
- })]
862
- });
863
- };
864
- ;// external "react-grid-layout/css/styles.css"
865
- const styles_css_namespaceObject = require("react-grid-layout/css/styles.css");
866
- ;// external "react-resizable/css/styles.css"
867
- const external_react_resizable_css_styles_css_namespaceObject = require("react-resizable/css/styles.css");
868
- ;// ./src/features/DashboardPanelGrid.tsx
869
- function DashboardPanelGrid_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
870
-
871
-
872
-
873
-
874
-
875
-
876
-
877
-
878
-
879
-
880
-
881
- var DashboardPanelGrid_ref2 = true ? {
882
- name: "tu5rj9",
883
- styles: "width:100%;.react-grid-item.cssTransforms{transition-property:none;}.react-grid-layout{transition:none;}.react-grid-item.react-grid-placeholder{background-color:transparent;}"
884
- } : 0;
885
- var _ref3 = true ? {
886
- name: "k9eird",
887
- styles: "position:absolute;z-index:100;right:0"
888
- } : 0;
889
- const DashboardPanelGrid = ({
890
- dashboard,
891
- header,
892
- cols = 12,
893
- rowHeight = 50,
894
- draggable = false,
895
- resizable = false,
896
- refetchIntervalMs = 60000,
897
- // 60 seconds
898
- onLayoutChange,
899
- onDragStart,
900
- onResizeStart,
901
- renderPanelControl,
902
- ...divProps
903
- }) => {
904
- const {
905
- ref,
906
- width
907
- } = (0,hooks_namespaceObject.useElementSize)();
908
- const isMinMD = (0,hooks_namespaceObject.useMinMDMediaQuery)();
909
- const {
910
- panelRegistry,
911
- queryClient
912
- } = useInfraDashContext();
913
- (0,external_react_namespaceObject.useEffect)(() => {
914
- if (refetchIntervalMs) {
915
- queryClient.invalidateQueries({
916
- key: ['panel-data'],
917
- type: 'active'
918
- });
919
- const intervalId = setInterval(() => {
920
- queryClient.invalidateQueries({
921
- key: ['panel-data'],
922
- type: 'active'
923
- });
924
- }, refetchIntervalMs);
925
- return () => clearInterval(intervalId);
926
- }
927
- }, [refetchIntervalMs]);
928
-
929
- // sort panels by their grid position
930
- // for mobile view it will ensure they are stacked vertically in the right order
931
- const sortedPanels = [...dashboard.panels].sort((a, b) => {
932
- const aPos = a.panelDefinition.gridPos;
933
- const bPos = b.panelDefinition.gridPos;
934
- if (aPos.y !== bPos.y) {
935
- return aPos.y - bPos.y; // top to bottom
936
- }
937
- return aPos.x - bPos.x; // left to right within the same row
938
- });
939
- const layout = sortedPanels.map(({
940
- id,
941
- panelDefinition: {
942
- gridPos
943
- }
944
- }, index) => {
945
- if (!isMinMD) {
946
- // single column layout for mobile
947
- return {
948
- i: id.toString(),
949
- x: 0,
950
- y: index * gridPos.h,
951
- w: cols,
952
- h: gridPos.h
953
- };
954
- }
955
- return {
956
- i: id.toString(),
957
- ...gridPos
958
- };
959
- });
960
- const renderPanel = panel => {
961
- const panelConfig = panelRegistry.getPanelConfig(panel.panelDefinition.component.id);
962
- if (panelConfig) {
963
- return (0,jsx_runtime_namespaceObject.jsx)(external_react_error_boundary_namespaceObject.ErrorBoundary, {
964
- fallback: (0,jsx_runtime_namespaceObject.jsx)(ErrorPanel, {}),
965
- children: (0,jsx_runtime_namespaceObject.jsx)(BasePanel, {
966
- children: (0,jsx_runtime_namespaceObject.jsx)(panelConfig.Component, {
967
- panel: panel,
968
- ...panel.panelDefinition.component.props
969
- })
970
- })
971
- });
972
- }
973
- return (0,jsx_runtime_namespaceObject.jsxs)(BasePanel, {
974
- children: ["Unsupported panel type: ", panel.panelSchema.type]
975
- });
976
- };
977
- const _header = typeof header === 'function' ? header(dashboard) : header;
978
- return (0,jsx_runtime_namespaceObject.jsxs)("div", {
979
- ref: ref,
980
- css: DashboardPanelGrid_ref2,
981
- ...divProps,
982
- children: [_header, width && (0,jsx_runtime_namespaceObject.jsx)((external_react_grid_layout_default()), {
983
- autoSize: true,
984
- layout: layout,
985
- cols: cols,
986
- rowHeight: rowHeight,
987
- containerPadding: [0, 0],
988
- margin: [8, 8],
989
- width: width
990
- // disable interaction for mobile view
991
- ,
992
- isDraggable: isMinMD && draggable,
993
- isResizable: isMinMD && resizable,
994
- onLayoutChange: isMinMD ? onLayoutChange : undefined,
995
- onDragStart: onDragStart,
996
- onResizeStart: onResizeStart,
997
- children: dashboard.panels.map(panel => (0,jsx_runtime_namespaceObject.jsxs)(GridItem, {
998
- children: [renderPanelControl &&
999
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
1000
- (0,jsx_runtime_namespaceObject.jsx)("div", {
1001
- css: _ref3,
1002
- onMouseDown: e => e.stopPropagation(),
1003
- children: renderPanelControl(panel)
1004
- }), renderPanel(panel)]
1005
- }, panel.id.toString()))
1006
- })]
1007
- });
1008
- };
1009
- var DashboardPanelGrid_ref = true ? {
1010
- name: "ujxn9q",
1011
- styles: ".react-resizable-handle-se{z-index:1;padding:0;::after{right:0;bottom:0;}}"
1012
- } : 0;
1013
- const GridItem = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(function GridItem({
1014
- children,
1015
- ...props
1016
- }, ref) {
1017
- return (0,jsx_runtime_namespaceObject.jsx)("div", {
1018
- ref: ref,
1019
- css: DashboardPanelGrid_ref,
1020
- ...props,
1021
- children: children
1022
- });
1023
- });
1024
- ;// ./src/widgets/DashboardViewer/DashboardViewer.tsx
1025
-
1026
-
1027
-
1028
-
1029
-
1030
-
1031
-
1032
- const DashboardViewer = ({
1033
- dashboard,
1034
- dashboardId,
1035
- ...props
1036
- }) => {
1037
- const dashboardById = useDashboard(dashboardId ?? -1, {
1038
- enabled: !!dashboardId && !dashboard
1039
- });
1040
- const DashboardWrapper = ({
1041
- dashboard
1042
- }) => {
1043
- const panelDataPeriod = useInfraDashPanelDataPeriod({
1044
- ...props
1045
- });
1046
- return (0,jsx_runtime_namespaceObject.jsx)(InfraDashPanelDataPeriodProvider, {
1047
- value: panelDataPeriod,
1048
- children: (0,jsx_runtime_namespaceObject.jsx)(external_react_error_boundary_namespaceObject.ErrorBoundary, {
1049
- fallback: (0,jsx_runtime_namespaceObject.jsx)(DashboardError, {
1050
- children: "Something went wrong"
1051
- }),
1052
- children: (0,jsx_runtime_namespaceObject.jsx)(DashboardPanelGrid, {
1053
- ...props,
1054
- dashboard: dashboard
1055
- })
1056
- })
1057
- });
1058
- };
1059
- if (dashboard) {
1060
- return (0,jsx_runtime_namespaceObject.jsx)(DashboardWrapper, {
1061
- dashboard: dashboard
1062
- });
1063
- }
1064
- if (!dashboardById.isLoaded) {
1065
- return (0,jsx_runtime_namespaceObject.jsx)(LoadingDashboard, {});
1066
- }
1067
- if (dashboardById.error) {
1068
- return (0,jsx_runtime_namespaceObject.jsx)(DashboardError, {});
1069
- }
1070
- return (0,jsx_runtime_namespaceObject.jsx)(DashboardWrapper, {
1071
- dashboard: dashboardById.data
1072
- });
1073
- };
1074
- ;// ./src/widgets/DashboardViewer/index.ts
1075
-
1076
- ;// external "@emotion/styled/base"
1077
- const base_namespaceObject = require("@emotion/styled/base");
1078
- var base_default = /*#__PURE__*/__webpack_require__.n(base_namespaceObject);
1079
- ;// ./src/components/PeriodSelector/PeriodSelector.tsx
1080
-
1081
-
1082
-
1083
-
1084
-
1085
-
1086
- const CustomOption = /*#__PURE__*/base_default()(core_namespaceObject.DropdownOption, true ? {
1087
- target: "ehfrvpn0"
1088
- } : 0)("display:flex;align-items:center;border:none;cursor:pointer;font-size:14px;gap:8px;padding:10px 12px;min-height:40px;line-height:20px;justify-content:space-between;overflow:hidden;text-overflow:ellipsis;background:", ({
1089
- isActive,
1090
- theme
1091
- }) => isActive ? theme.colors.blueRoyal12 : theme.colors.white, ";&:hover{background:rgba(72, 125, 225, 0.06);}" + ( true ? "" : 0));
1092
- const PeriodSelector = () => {
1093
- const theme = (0,react_namespaceObject.useTheme)();
1094
- const {
1095
- period,
1096
- changePeriod
1097
- } = useInfraDashPanelDataPeriodContext();
1098
- const handlePeriodSelect = period => {
1099
- changePeriod(period);
1100
- };
1101
- const items = [{
1102
- value: PANEL_DATA_PERIOD.LAST_HOUR,
1103
- label: 'Last Hour'
1104
- }, {
1105
- value: PANEL_DATA_PERIOD.LAST_6_HOURS,
1106
- label: 'Last 6 Hours'
1107
- }, {
1108
- value: PANEL_DATA_PERIOD.LAST_24_HOURS,
1109
- label: 'Last 24 Hours'
1110
- }, {
1111
- value: PANEL_DATA_PERIOD.LAST_7_DAYS,
1112
- label: 'Last 7 Days'
1113
- }, {
1114
- value: PANEL_DATA_PERIOD.LAST_30_DAYS,
1115
- label: 'Last 30 Days'
1116
- }];
1117
- return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Dropdown, {
1118
- selectedItem: items.find(item => item.value === period),
1119
- onChange: item => handlePeriodSelect(item.value),
1120
- css: /*#__PURE__*/(0,react_namespaceObject.css)("min-width:135px;height:44px;justify-content:space-between;white-space:nowrap;background:", theme.colors.white, ";border:1px solid ", theme.colors.grey, ";& svg path{stroke:", theme.colors.greyDarker, ";}&:hover{border-color:", theme.colors.greyDarker80, ";}&:focus{background:", theme.colors.white, ";border-color:", theme.colors.blueRoyal, ";box-shadow:none;&::before{border:none;}svg path{stroke:", theme.colors.greyDarker, ";}}&[aria-expanded='true']{box-shadow:none;background:", theme.colors.white, ";border:1px solid ", theme.colors.blueRoyal, "!important;color:#000;}" + ( true ? "" : 0), true ? "" : 0),
1121
- children: items.map(item => (0,jsx_runtime_namespaceObject.jsx)(CustomOption, {
1122
- value: item.value,
1123
- label: item.label,
1124
- children: item.label
1125
- }, item.value))
1126
- });
1127
- };
1128
- ;// ./src/shared/icons/DashboardIcon.tsx
1129
-
1130
- const DashboardIcon = ({
1131
- fill = '#2B2D31',
1132
- size = 18,
1133
- tooltip = 'Dashboard',
1134
- ...props
1135
- }) => (0,jsx_runtime_namespaceObject.jsxs)("svg", {
1136
- width: `${size}px`,
1137
- height: `${size}px`,
1138
- viewBox: "0 0 18 18",
1139
- fill: "none",
1140
- xmlns: "http://www.w3.org/2000/svg",
1141
- ...props,
1142
- children: [(0,jsx_runtime_namespaceObject.jsx)("title", {
1143
- children: tooltip
1144
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
1145
- d: "M6.4541 11.2607C7.46278 11.363 8.25 12.2143 8.25 13.25V13.75L8.23926 13.9541C8.1438 14.8957 7.39565 15.6438 6.4541 15.7393L6.25 15.75H4.25L4.0459 15.7393C3.10435 15.6438 2.3562 14.8957 2.26074 13.9541L2.25 13.75V13.25C2.25 12.2143 3.03722 11.363 4.0459 11.2607L4.25 11.25H6.25L6.4541 11.2607ZM13.9541 8.26074C14.9628 8.363 15.75 9.21435 15.75 10.25V13.75L15.7393 13.9541C15.6438 14.8957 14.8957 15.6438 13.9541 15.7393L13.75 15.75H11.75L11.5459 15.7393C10.6043 15.6438 9.8562 14.8957 9.76074 13.9541L9.75 13.75V10.25C9.75 9.21435 10.5372 8.363 11.5459 8.26074L11.75 8.25H13.75L13.9541 8.26074ZM11.75 9.65039C11.4186 9.65039 11.1504 9.91863 11.1504 10.25V13.75C11.1504 14.0814 11.4186 14.3496 11.75 14.3496H13.75C14.0814 14.3496 14.3496 14.0814 14.3496 13.75V10.25C14.3496 9.91863 14.0814 9.65039 13.75 9.65039H11.75ZM4.25 12.6504C3.91863 12.6504 3.65039 12.9186 3.65039 13.25V13.75C3.65039 14.0814 3.91863 14.3496 4.25 14.3496H6.25C6.58137 14.3496 6.84961 14.0814 6.84961 13.75V13.25C6.84961 12.9186 6.58137 12.6504 6.25 12.6504H4.25ZM6.4541 2.26074C7.46278 2.363 8.25 3.21435 8.25 4.25V7.75L8.23926 7.9541C8.1438 8.89565 7.39565 9.6438 6.4541 9.73926L6.25 9.75H4.25L4.0459 9.73926C3.10435 9.6438 2.3562 8.89565 2.26074 7.9541L2.25 7.75V4.25C2.25 3.21435 3.03722 2.363 4.0459 2.26074L4.25 2.25H6.25L6.4541 2.26074ZM4.25 3.65039C3.91863 3.65039 3.65039 3.91863 3.65039 4.25V7.75C3.65039 8.08137 3.91863 8.34961 4.25 8.34961H6.25C6.58137 8.34961 6.84961 8.08137 6.84961 7.75V4.25C6.84961 3.91863 6.58137 3.65039 6.25 3.65039H4.25ZM13.9541 2.26074C14.9628 2.363 15.75 3.21435 15.75 4.25V4.75L15.7393 4.9541C15.6438 5.89565 14.8957 6.6438 13.9541 6.73926L13.75 6.75H11.75L11.5459 6.73926C10.6043 6.6438 9.8562 5.89565 9.76074 4.9541L9.75 4.75V4.25C9.75 3.21435 10.5372 2.363 11.5459 2.26074L11.75 2.25H13.75L13.9541 2.26074ZM11.75 3.65039C11.4186 3.65039 11.1504 3.91863 11.1504 4.25V4.75C11.1504 5.08137 11.4186 5.34961 11.75 5.34961H13.75C14.0814 5.34961 14.3496 5.08137 14.3496 4.75V4.25C14.3496 3.91863 14.0814 3.65039 13.75 3.65039H11.75Z",
1146
- fill: fill
1147
- })]
1148
- });
1149
- ;// ./src/widgets/DashboardEditor/components/DashboardSelectorDrawer.tsx
1150
- function DashboardSelectorDrawer_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
1151
-
1152
-
1153
-
1154
-
1155
- var DashboardSelectorDrawer_ref = true ? {
1156
- name: "u5gcpt",
1157
- styles: "width:400px;padding:24px 32px;z-index:10"
1158
- } : 0;
1159
- var DashboardSelectorDrawer_ref2 = true ? {
1160
- name: "13udsys",
1161
- styles: "height:100%"
1162
- } : 0;
1163
- var DashboardSelectorDrawer_ref3 = true ? {
1164
- name: "1d3w5wq",
1165
- styles: "width:100%"
1166
- } : 0;
1167
- const DashboardSelectorDrawer = ({
1168
- drawer,
1169
- children
1170
- }) => {
1171
- const theme = (0,react_namespaceObject.useTheme)();
1172
- return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Drawer.Root, {
1173
- store: drawer,
1174
- children: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Drawer.Content, {
1175
- css: DashboardSelectorDrawer_ref,
1176
- children: (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
1177
- direction: "column",
1178
- alignItems: "start",
1179
- css: DashboardSelectorDrawer_ref2,
1180
- children: [(0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Drawer.Header, {
1181
- css: DashboardSelectorDrawer_ref3,
1182
- children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Drawer.Title, {
1183
- children: "Dashboard Selector"
1184
- }), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Button, {
1185
- variant: "secondary",
1186
- css: /*#__PURE__*/(0,react_namespaceObject.css)({
1187
- ':hover': {
1188
- background: theme.colors.greyDropdownFocused
1189
- },
1190
- width: '36px',
1191
- height: '36px',
1192
- padding: '8px',
1193
- background: theme.colors.greyDropdownFocused
1194
- }, true ? "" : 0, true ? "" : 0),
1195
- onClick: () => drawer.toggle(false),
1196
- children: (0,jsx_runtime_namespaceObject.jsx)(DashboardIcon, {
1197
- fill: theme.colors.white
1198
- })
1199
- })]
1200
- }), children]
1201
- })
1202
- })
1203
- });
1204
- };
1205
- ;// ./src/shared/icons/SidebarIcon.tsx
1206
-
1207
- const SidebarIcon = ({
1208
- fill = '#2B2D31',
1209
- size = 18,
1210
- tooltip = 'Sidebar',
1211
- ...props
1212
- }) => (0,jsx_runtime_namespaceObject.jsxs)("svg", {
1213
- width: `${size}px`,
1214
- height: `${size}px`,
1215
- viewBox: "0 0 18 18",
1216
- fill: "none",
1217
- xmlns: "http://www.w3.org/2000/svg",
1218
- ...props,
1219
- children: [(0,jsx_runtime_namespaceObject.jsx)("title", {
1220
- children: tooltip
1221
- }), (0,jsx_runtime_namespaceObject.jsx)("path", {
1222
- d: "M12.7061 2.25488C14.8194 2.36211 16.5 4.10996 16.5 6.25V11.75L16.4951 11.9561C16.3913 14.0012 14.7512 15.6413 12.7061 15.7451L12.5 15.75H5.5L5.29395 15.7451C3.2488 15.6413 1.60865 14.0012 1.50488 11.9561L1.5 11.75V6.25C1.5 4.10996 3.18056 2.36211 5.29395 2.25488L5.5 2.25H12.5L12.7061 2.25488ZM5.5 3.65039C4.06406 3.65039 2.90039 4.81406 2.90039 6.25V11.75C2.90039 13.1859 4.06406 14.3496 5.5 14.3496H10.9248V3.65039H5.5ZM12.3252 14.3496H12.5C13.9359 14.3496 15.0996 13.1859 15.0996 11.75V6.25C15.0996 4.81406 13.9359 3.65039 12.5 3.65039H12.3252V14.3496Z",
1223
- fill: fill
1224
- })]
1225
- });
1226
- ;// ./src/widgets/DashboardEditor/components/PanelSettingsDrawer.tsx
1227
- function PanelSettingsDrawer_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
1228
-
1229
-
1230
-
1231
-
1232
- var PanelSettingsDrawer_ref = true ? {
1233
- name: "12ld9rx",
1234
- styles: "max-width:400px;padding:24px 32px;z-index:10"
1235
- } : 0;
1236
- var PanelSettingsDrawer_ref2 = true ? {
1237
- name: "1d3w5wq",
1238
- styles: "width:100%"
1239
- } : 0;
1240
- const PanelSettingsDrawer = ({
1241
- drawer,
1242
- children
1243
- }) => {
1244
- const theme = (0,react_namespaceObject.useTheme)();
1245
- return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Drawer.Root, {
1246
- store: drawer,
1247
- children: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Drawer.Overlay, {
1248
- children: (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Drawer.Content, {
1249
- css: PanelSettingsDrawer_ref,
1250
- children: [(0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Drawer.Header, {
1251
- css: PanelSettingsDrawer_ref2,
1252
- children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Drawer.Title, {
1253
- children: "Panel Settings"
1254
- }), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Button, {
1255
- variant: "secondary",
1256
- css: /*#__PURE__*/(0,react_namespaceObject.css)({
1257
- ':hover': {
1258
- background: theme.colors.greyDropdownFocused
1259
- },
1260
- width: '36px',
1261
- height: '36px',
1262
- padding: '8px',
1263
- background: theme.colors.greyDropdownFocused
1264
- }, true ? "" : 0, true ? "" : 0),
1265
- onClick: () => drawer.toggle(false),
1266
- children: (0,jsx_runtime_namespaceObject.jsx)(SidebarIcon, {
1267
- fill: theme.colors.white
1268
- })
1269
- })]
1270
- }), children]
1271
- })
1272
- })
1273
- });
1274
- };
1275
- ;// ./src/entities/grafana-dashboard/index.ts
1276
-
1277
-
1278
- const useGrafanaDashboards = options => {
1279
- const {
1280
- transport,
1281
- ...queryOptions
1282
- } = options || {};
1283
- const _transport = useTransport(transport);
1284
- const result = useQuery(['grafana-dashboards'], async signal => {
1285
- return await _transport.getGrafanaDashboards(signal);
1286
- }, queryOptions);
1287
- return result;
1288
- };
1289
- ;// ./src/entities/grafana-panel/index.ts
1290
-
1291
-
1292
- const useGrafanaPanels = (grafanaDashboardUid, options) => {
1293
- const {
1294
- transport,
1295
- ...queryOptions
1296
- } = options || {};
1297
- const _transport = useTransport(transport);
1298
- const result = useQuery(['grafana-panels', grafanaDashboardUid], async signal => {
1299
- const panels = await _transport.getGrafanaPanels(grafanaDashboardUid, signal);
1300
- return panels.flatMap(panel => {
1301
- if (!panel.panelSchema || panel.panelSchema.type === 'row') {
1302
- return panel.subPanels || [];
1303
- }
1304
- return panel;
1305
- });
1306
- }, queryOptions);
1307
- return result;
1308
- };
1309
- ;// ./src/widgets/DashboardEditor/components/ExternalDashboardsList.tsx
1310
-
1311
- function ExternalDashboardsList_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
1312
-
1313
-
1314
-
1315
-
1316
-
1317
-
1318
-
1319
-
1320
-
1321
- var ExternalDashboardsList_ref = true ? {
1322
- name: "tc4e7",
1323
- styles: "justify-content:center;height:100%;padding:8px"
1324
- } : 0;
1325
- var ExternalDashboardsList_ref2 = true ? {
1326
- name: "67cb9k",
1327
- styles: "justify-content:center;height:100%"
1328
- } : 0;
1329
- var ExternalDashboardsList_ref3 = true ? {
1330
- name: "67cb9k",
1331
- styles: "justify-content:center;height:100%"
1332
- } : 0;
1333
- const ExternalPanelList = ({
1334
- dashboard,
1335
- panels,
1336
- isLoaded,
1337
- error,
1338
- onPanelClick
1339
- }) => {
1340
- const theme = (0,react_namespaceObject.useTheme)();
1341
- if (!isLoaded) {
1342
- return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Wrapper, {
1343
- direction: "column",
1344
- css: ExternalDashboardsList_ref,
1345
- children: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.ProgressCircle, {
1346
- classnames: {
1347
- inner: /*#__PURE__*/(0,css_namespaceObject.css)(`
1348
- background: none !important;
1349
- `, true ? "" : 0, true ? "" : 0),
1350
- outer: /*#__PURE__*/(0,css_namespaceObject.css)(`
1351
- background: none !important;
1352
- border: 12px solid ${theme.colors.greyLighter};
1353
- `, true ? "" : 0, true ? "" : 0)
1354
- },
1355
- currentValue: 3,
1356
- max: 10,
1357
- size: 20,
1358
- color: "blue",
1359
- mode: "infinite"
1360
- })
1361
- });
1362
- }
1363
- if (error) {
1364
- return (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
1365
- direction: "column",
1366
- css: ExternalDashboardsList_ref2,
1367
- children: [(0,jsx_runtime_namespaceObject.jsx)(ErrorIcon, {}), (0,jsx_runtime_namespaceObject.jsxs)("p", {
1368
- children: ["Failed to load panels for ", dashboard.title]
1369
- })]
1370
- });
1371
- }
1372
- if (!panels.length) {
1373
- return (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
1374
- direction: "column",
1375
- css: ExternalDashboardsList_ref3,
1376
- children: [(0,jsx_runtime_namespaceObject.jsx)(ErrorIcon, {}), (0,jsx_runtime_namespaceObject.jsxs)("p", {
1377
- children: ["No panels found for ", dashboard.title]
1378
- })]
1379
- });
1380
- }
1381
- return (0,jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
1382
- children: panels.map(panel => (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Button, {
1383
- variant: "tertiary",
1384
- className: /*#__PURE__*/(0,css_namespaceObject.css)("width:100%;min-height:34px;gap:8px;padding:8px 14px 8px 34px!important;justify-content:space-between;text-align:left;& svg{& path{stroke:", theme.colors.greyDarker, ";stroke-width:1.4px;}}" + ( true ? "" : 0), true ? "" : 0),
1385
- onClick: () => onPanelClick?.(dashboard, panel),
1386
- children: [panel.title, (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Icon, {
1387
- name: "plus",
1388
- size: 12
1389
- })]
1390
- }, panel.id))
1391
- });
1392
- };
1393
- const DashboardAccordionItem = ({
1394
- dashboard,
1395
- search,
1396
- onPanelClick,
1397
- ...accordionProps
1398
- }) => {
1399
- const theme = (0,react_namespaceObject.useTheme)();
1400
- const {
1401
- panelRegistry
1402
- } = useInfraDashContext();
1403
- const panelsQuery = useGrafanaPanels(dashboard.id);
1404
- const loadedPanels = panelsQuery.data ?? [];
1405
- const availablePanels = loadedPanels.filter(panel => {
1406
- if (!panel.panelSchema?.type) {
1407
- return false;
1408
- }
1409
- if (search && !panel.title.toLowerCase().includes(search.toLowerCase())) {
1410
- return false;
1411
- }
1412
- const availableComponents = panelRegistry.findPanelConfigsByType(panel.panelSchema.type);
1413
- return availableComponents.length > 0;
1414
- });
1415
- if (search && panelsQuery.isLoaded && !availablePanels.length) {
1416
- return null;
1417
- }
1418
- return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Accordion, {
1419
- id: dashboard.id,
1420
- title: dashboard.title,
1421
- className: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
1422
- name: "2zzvc7",
1423
- styles: "padding:0!important;align-items:start!important"
1424
- } : 0),
1425
- renderTitle: ({
1426
- title,
1427
- isOpened,
1428
- onClick
1429
- }) => (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Button, {
1430
- onClick: onClick,
1431
- variant: "tertiary",
1432
- className: /*#__PURE__*/(0,css_namespaceObject.css)("width:100%;min-height:34px;gap:8px;padding:8px 14px!important;text-align:left;& svg{& path{stroke:", theme.colors.greyDarker, ";stroke-width:1.4px;}}" + ( true ? "" : 0), true ? "" : 0),
1433
- startIcon: isOpened ? (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Icon, {
1434
- name: "carrot-down",
1435
- size: 12
1436
- }) : (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Icon, {
1437
- name: "carrot-right",
1438
- size: 12
1439
- }),
1440
- children: title
1441
- }),
1442
- renderContent: ({
1443
- isOpened
1444
- }) => (0,jsx_runtime_namespaceObject.jsx)("div", {
1445
- css: /*#__PURE__*/(0,react_namespaceObject.css)({
1446
- width: '100%',
1447
- display: isOpened ? 'block' : 'none',
1448
- fontWeight: 500,
1449
- fontSize: '14px'
1450
- }, true ? "" : 0, true ? "" : 0),
1451
- children: (0,jsx_runtime_namespaceObject.jsx)(ExternalPanelList, {
1452
- panels: availablePanels,
1453
- isLoaded: panelsQuery.isLoaded,
1454
- error: panelsQuery.error,
1455
- dashboard: dashboard,
1456
- onPanelClick: onPanelClick
1457
- })
1458
- }),
1459
- ...accordionProps
1460
- }, dashboard.id);
1461
- };
1462
- var _ref4 = true ? {
1463
- name: "67cb9k",
1464
- styles: "justify-content:center;height:100%"
1465
- } : 0;
1466
- var _ref5 = true ? {
1467
- name: "67cb9k",
1468
- styles: "justify-content:center;height:100%"
1469
- } : 0;
1470
- var _ref6 = true ? {
1471
- name: "67cb9k",
1472
- styles: "justify-content:center;height:100%"
1473
- } : 0;
1474
- var _ref7 = true ? {
1475
- name: "1d0nbku",
1476
- styles: "margin-top:24px"
1477
- } : 0;
1478
- var _ref8 = true ? {
1479
- name: "1yghct1",
1480
- styles: "overflow:auto;width:100%"
1481
- } : 0;
1482
- const ExternalDashboardsList = ({
1483
- onPanelClick,
1484
- ...divProps
1485
- }) => {
1486
- const theme = (0,react_namespaceObject.useTheme)();
1487
- const [search, setSearch] = (0,external_react_namespaceObject.useState)('');
1488
- const dashboardsQuery = useGrafanaDashboards();
1489
- if (!dashboardsQuery.isLoaded) {
1490
- return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Wrapper, {
1491
- direction: "column",
1492
- css: _ref4,
1493
- ...divProps,
1494
- children: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.ProgressCircle, {
1495
- classnames: {
1496
- inner: /*#__PURE__*/(0,css_namespaceObject.css)(`
1497
- background: none !important;
1498
- `, true ? "" : 0, true ? "" : 0),
1499
- outer: /*#__PURE__*/(0,css_namespaceObject.css)(`
1500
- background: none !important;
1501
- border: 12px solid ${theme.colors.greyLighter};
1502
- `, true ? "" : 0, true ? "" : 0)
1503
- },
1504
- currentValue: 3,
1505
- max: 10,
1506
- size: 64,
1507
- color: "blue",
1508
- mode: "infinite"
1509
- })
1510
- });
1511
- }
1512
- if (dashboardsQuery.error) {
1513
- return (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
1514
- direction: "column",
1515
- css: _ref5,
1516
- ...divProps,
1517
- children: [(0,jsx_runtime_namespaceObject.jsx)(ErrorIcon, {}), (0,jsx_runtime_namespaceObject.jsx)("p", {
1518
- children: "Failed to load external dashboards"
1519
- })]
1520
- });
1521
- }
1522
- if (!dashboardsQuery.data.length) {
1523
- return (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
1524
- direction: "column",
1525
- css: _ref6,
1526
- ...divProps,
1527
- children: [(0,jsx_runtime_namespaceObject.jsx)(ErrorIcon, {}), (0,jsx_runtime_namespaceObject.jsx)("p", {
1528
- children: "No external dashboards found"
1529
- })]
1530
- });
1531
- }
1532
- return (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
1533
- children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Input, {
1534
- name: "panel-search",
1535
- placeholder: "Search...",
1536
- inputProps: {
1537
- value: search,
1538
- onChange: e => setSearch(e.target.value)
1539
- },
1540
- css: _ref7
1541
- }), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.AccordionGroupContextProvider, {
1542
- children: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.AccordionGroup, {
1543
- size: "small",
1544
- css: _ref8,
1545
- ...divProps,
1546
- children: dashboardsQuery.data.map(dashboard => (0,jsx_runtime_namespaceObject.jsx)(DashboardAccordionItem
1547
- // id is required by AccordionGroup logic
1548
- , {
1549
- id: dashboard.id,
1550
- dashboard: dashboard,
1551
- search: search,
1552
- onPanelClick: onPanelClick
1553
- }, dashboard.id))
1554
- })
1555
- })]
1556
- });
1557
- };
1558
- ;// ./src/widgets/DashboardEditor/helpers.ts
1559
-
1560
- const appendPanel = params => {
1561
- const {
1562
- dashboard,
1563
- panelRegistry,
1564
- source
1565
- } = params;
1566
- const nextY = dashboard.panels.reduce((maxY, {
1567
- panelDefinition: {
1568
- gridPos
1569
- }
1570
- }) => Math.max(maxY, gridPos.y + gridPos.h), 0);
1571
- const newPanel = matchPanelDataSource(source.type, {
1572
- grafana: () => {
1573
- const {
1574
- grafanaDashboard,
1575
- grafanaPanel
1576
- } = source;
1577
- if (!grafanaPanel.panelSchema) {
1578
- return; // no schema, cannot append panel
1579
- }
1580
- const [defaultComponentConfig] = panelRegistry.findPanelConfigsByType(grafanaPanel.panelSchema.type);
1581
- const newPanel = {
1582
- id: -Date.now(),
1583
- // use a negative ID to indicate a new panel
1584
- source: {
1585
- type: 'grafana',
1586
- dashboardUid: grafanaDashboard.id,
1587
- panelId: grafanaPanel.id
1588
- },
1589
- panelDefinition: {
1590
- version: 1,
1591
- component: {
1592
- id: defaultComponentConfig.componentId,
1593
- props: {}
1594
- },
1595
- gridPos: {
1596
- x: 0,
1597
- y: nextY,
1598
- w: 12,
1599
- h: 6
1600
- }
1601
- },
1602
- panelSchema: grafanaPanel.panelSchema,
1603
- title: grafanaPanel.title
1604
- };
1605
- return newPanel;
1606
- }
1607
- });
1608
- if (!newPanel) {
1609
- return dashboard; // no new panel created, return original dashboard
1610
- }
1611
- return {
1612
- ...dashboard,
1613
- panels: [...(dashboard.panels || []), newPanel]
1614
- };
1615
- };
1616
- const updatePanel = ({
1617
- dashboard,
1618
- panel
1619
- }) => {
1620
- const newPanels = dashboard.panels.map(p => p.id === panel.id ? {
1621
- ...p,
1622
- ...panel
1623
- } : p);
1624
- return {
1625
- ...dashboard,
1626
- panels: newPanels
1627
- };
1628
- };
1629
- const removePanel = ({
1630
- dashboard,
1631
- panel
1632
- }) => {
1633
- const newPanels = dashboard.panels.filter(p => p.id !== panel.id);
1634
- return {
1635
- ...dashboard,
1636
- panels: newPanels
1637
- };
1638
- };
1639
- const applyNewLayout = ({
1640
- dashboard,
1641
- newLayout
1642
- }) => {
1643
- const newLayoutMap = newLayout.reduce((map, {
1644
- i,
1645
- x,
1646
- y,
1647
- w,
1648
- h
1649
- }) => ({
1650
- ...map,
1651
- [i]: {
1652
- x,
1653
- y,
1654
- w,
1655
- h
1656
- }
1657
- }), {});
1658
- const newDashboard = {
1659
- ...dashboard,
1660
- panels: dashboard.panels.map(panel => {
1661
- const newGridPos = newLayoutMap[panel.id.toString()];
1662
- if (!newGridPos) {
1663
- throw new Error(`New position for the panel ${panel.id} not found`);
1664
- }
1665
- return {
1666
- ...panel,
1667
- panelDefinition: {
1668
- ...panel.panelDefinition,
1669
- gridPos: newGridPos
1670
- }
1671
- };
1672
- })
1673
- };
1674
- return newDashboard;
1675
- };
1676
- ;// ./src/widgets/DashboardEditor/components/PanelControl.tsx
1677
- function PanelControl_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
1678
-
1679
-
1680
-
1681
- var PanelControl_ref = true ? {
1682
- name: "88ft23",
1683
- styles: "gap:5px;width:100%"
1684
- } : 0;
1685
- var PanelControl_ref2 = true ? {
1686
- name: "88ft23",
1687
- styles: "gap:5px;width:100%"
1688
- } : 0;
1689
- const PanelControlContent = ({
1690
- panel,
1691
- onEdit,
1692
- onRemove
1693
- }) => {
1694
- const theme = (0,react_namespaceObject.useTheme)();
1695
- const popover = (0,core_namespaceObject.usePopoverContext)();
1696
- const handleClose = () => {
1697
- popover.setOpen(false);
1698
- };
1699
- return (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.PopoverContent, {
1700
- css: /*#__PURE__*/(0,react_namespaceObject.css)({
1701
- gap: 15,
1702
- alignItems: 'start',
1703
- border: `2px solid ${theme.colors.greyLighter}`,
1704
- backgroundColor: theme.colors.white,
1705
- borderRadius: 15,
1706
- padding: 15
1707
- }, true ? "" : 0, true ? "" : 0),
1708
- children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Button, {
1709
- variant: "tertiary",
1710
- css: PanelControl_ref,
1711
- onClick: () => {
1712
- onEdit?.(panel);
1713
- handleClose();
1714
- },
1715
- startIcon: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Icon, {
1716
- name: "edit",
1717
- size: 14
1718
- }),
1719
- children: "Edit"
1720
- }), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Button, {
1721
- variant: "tertiary",
1722
- css: PanelControl_ref2,
1723
- onClick: () => {
1724
- onRemove?.(panel);
1725
- handleClose();
1726
- },
1727
- startIcon: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Icon, {
1728
- name: "bin",
1729
- size: 14
1730
- }),
1731
- children: "Remove"
1732
- })]
1733
- });
1734
- };
1735
- var PanelControl_ref3 = true ? {
1736
- name: "1jyo0em",
1737
- styles: "margin-right:5px;margin-top:5px"
1738
- } : 0;
1739
- const PanelControl = props => {
1740
- return (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Popover, {
1741
- children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.PopoverTrigger, {
1742
- variant: "tertiary",
1743
- css: PanelControl_ref3,
1744
- children: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Icon, {
1745
- name: "more-vertical",
1746
- size: 14
1747
- })
1748
- }), (0,jsx_runtime_namespaceObject.jsx)(PanelControlContent, {
1749
- ...props
1750
- })]
1751
- });
1752
- };
1753
- ;// external "@rjsf/validator-ajv8"
1754
- const validator_ajv8_namespaceObject = require("@rjsf/validator-ajv8");
1755
- var validator_ajv8_default = /*#__PURE__*/__webpack_require__.n(validator_ajv8_namespaceObject);
1756
- ;// ./src/widgets/DashboardEditor/components/PanelSettings.tsx
1757
- function PanelSettings_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
1758
-
1759
-
1760
-
1761
-
1762
-
1763
-
1764
- var PanelSettings_ref = true ? {
1765
- name: "iqoq9n",
1766
- styles: "margin-top:20px"
1767
- } : 0;
1768
- var PanelSettings_ref2 = true ? {
1769
- name: "iqoq9n",
1770
- styles: "margin-top:20px"
1771
- } : 0;
1772
- const PanelSettings = ({
1773
- panel,
1774
- onChange,
1775
- onSave
1776
- }) => {
1777
- const {
1778
- panelRegistry
1779
- } = useInfraDashContext();
1780
- const [originalPanel, setOriginalPanel] = (0,external_react_namespaceObject.useState)(panel);
1781
- const savedRef = (0,external_react_namespaceObject.useRef)(false);
1782
- if (panel.id !== originalPanel.id) {
1783
- setOriginalPanel(panel);
1784
- }
1785
-
1786
- // cleanup function to reset the original panel when the component unmounts or panel changes
1787
- (0,external_react_namespaceObject.useEffect)(() => {
1788
- return () => {
1789
- if (savedRef.current) {
1790
- savedRef.current = false;
1791
- return;
1792
- }
1793
- onChange?.(originalPanel);
1794
- };
1795
- }, [originalPanel]);
1796
- const panelComponent = panel.panelDefinition.component;
1797
- const {
1798
- propsSchema,
1799
- uiSchema
1800
- } = panelRegistry.getPanelConfig(panelComponent.id);
1801
- const availableComponents = panelRegistry.findPanelConfigsByType(panel.panelSchema.type);
1802
- const handleComponentChange = componentId => {
1803
- const originalComponent = originalPanel.panelDefinition.component;
1804
- const props = originalComponent.id === componentId ? originalComponent.props : {};
1805
- const newPanel = {
1806
- ...panel,
1807
- panelDefinition: {
1808
- ...panel.panelDefinition,
1809
- component: {
1810
- id: componentId,
1811
- props
1812
- }
1813
- }
1814
- };
1815
- onChange?.(newPanel);
1816
- };
1817
- const handlePropsChange = props => {
1818
- const newPanel = {
1819
- ...panel,
1820
- panelDefinition: {
1821
- ...panel.panelDefinition,
1822
- component: {
1823
- ...panelComponent,
1824
- props: props
1825
- }
1826
- }
1827
- };
1828
- onChange?.(newPanel);
1829
- };
1830
- const handlePanelSave = () => {
1831
- savedRef.current = true;
1832
- setOriginalPanel(panel);
1833
- onSave?.();
1834
- };
1835
- return (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
1836
- children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Typeahead, {
1837
- label: "Panel Component",
1838
- wrapperClassName: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
1839
- name: "101yl78",
1840
- styles: "margin-top:20px;width:100%!important"
1841
- } : 0),
1842
- filterOptions: false,
1843
- selectedItems: [panelComponent.id],
1844
- onChange: componentId => handleComponentChange(componentId),
1845
- children: availableComponents.map(component => (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.TypeaheadOption, {
1846
- value: component.componentId,
1847
- label: component.name,
1848
- children: component.name
1849
- }, component.componentId))
1850
- }), propsSchema && (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.JsonSchema.Form, {
1851
- idPrefix: "infra-dash-panel-settings",
1852
- onChange: ({
1853
- formData
1854
- }) => handlePropsChange(formData),
1855
- css: PanelSettings_ref,
1856
- formData: panelComponent.props,
1857
- schema: propsSchema,
1858
- uiSchema: {
1859
- 'ui:submitButtonOptions': {
1860
- norender: true
1861
- },
1862
- ...uiSchema
1863
- },
1864
- validator: (validator_ajv8_default())
1865
- }), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Button, {
1866
- css: PanelSettings_ref2,
1867
- variant: "info",
1868
- onClick: handlePanelSave,
1869
- children: "Save"
1870
- })]
1871
- });
1872
- };
1873
- ;// ./src/widgets/DashboardEditor/DashboardEditor.tsx
1874
- function DashboardEditor_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
1875
-
1876
-
1877
-
1878
-
1879
-
1880
-
1881
-
1882
-
1883
-
1884
-
1885
-
1886
-
1887
-
1888
-
1889
-
1890
-
1891
-
1892
-
1893
-
1894
- var DashboardEditor_ref = true ? {
1895
- name: "1st9kbp",
1896
- styles: "height:100%;position:relative"
1897
- } : 0;
1898
- var DashboardEditor_ref2 = true ? {
1899
- name: "iqoq9n",
1900
- styles: "margin-top:20px"
1901
- } : 0;
1902
- var DashboardEditor_ref3 = true ? {
1903
- name: "f7mf5j",
1904
- styles: "flex-grow:1;padding:24px 32px;height:100%"
1905
- } : 0;
1906
- var DashboardEditor_ref4 = true ? {
1907
- name: "z5ygou",
1908
- styles: "gap:24px"
1909
- } : 0;
1910
- var DashboardEditor_ref5 = true ? {
1911
- name: "hwdztk",
1912
- styles: "width:36px;height:36px;padding:8px"
1913
- } : 0;
1914
- var DashboardEditor_ref6 = true ? {
1915
- name: "1hsfcap",
1916
- styles: "flex-shrink:0;font-weight:600;font-size:20px;text-align:center"
1917
- } : 0;
1918
- var DashboardEditor_ref7 = true ? {
1919
- name: "1lsto0t",
1920
- styles: "max-width:250px"
1921
- } : 0;
1922
- var DashboardEditor_ref8 = true ? {
1923
- name: "1yxfaqj",
1924
- styles: "height:46px"
1925
- } : 0;
1926
- var _ref9 = true ? {
1927
- name: "14lyq40",
1928
- styles: "margin-top:20px;overflow:auto;height:100%"
1929
- } : 0;
1930
- const DashboardEditorInternal = ({
1931
- dashboard: controlledDashboard,
1932
- defaultDashboard,
1933
- gridProps,
1934
- onChange,
1935
- onSaved,
1936
- onCreate,
1937
- onError,
1938
- ...divProps
1939
- }) => {
1940
- const [selectedPanelId, setSelectedPanelId] = (0,external_react_namespaceObject.useState)(null);
1941
- const {
1942
- panelRegistry
1943
- } = useInfraDashContext();
1944
- const dashboardsSelectorDrawer = (0,core_namespaceObject.useDrawer)({});
1945
- const panelSettingsDrawer = (0,core_namespaceObject.useDrawer)({
1946
- position: 'right',
1947
- onOpenChange: open => {
1948
- if (!open && selectedPanelId !== null) {
1949
- setSelectedPanelId(null);
1950
- }
1951
- }
1952
- });
1953
- const [dashboard, setDashboard] = (0,hooks_namespaceObject.useUncontrolled)({
1954
- value: controlledDashboard,
1955
- defaultValue: defaultDashboard,
1956
- finalValue: {
1957
- dashboardDefinition: {
1958
- version: 1
1959
- },
1960
- id: -1,
1961
- panels: [],
1962
- published: false,
1963
- title: 'New Dashboard'
1964
- },
1965
- onChange
1966
- });
1967
- (0,external_react_namespaceObject.useEffect)(() => {
1968
- // if the default dashboard changes, update the current dashboard
1969
- if (defaultDashboard && dashboard.id !== defaultDashboard.id) {
1970
- setDashboard(defaultDashboard);
1971
- }
1972
- }, [dashboard.id, defaultDashboard?.id]);
1973
- const {
1974
- mutate: updateDashboard,
1975
- isLoading: isUpdating
1976
- } = useUpdateDashboard(dashboard.id);
1977
- const {
1978
- mutate: createDashboard,
1979
- isLoading: isCreating
1980
- } = useCreateDashboard();
1981
- const handleAddPanel = (grafanaDashboard, grafanaPanel) => {
1982
- const newDashboard = appendPanel({
1983
- dashboard,
1984
- panelRegistry,
1985
- source: {
1986
- type: PANEL_DATA_SOURCE.GRAFANA,
1987
- grafanaDashboard,
1988
- grafanaPanel
1989
- }
1990
- });
1991
- setDashboard(newDashboard);
1992
- };
1993
- const handleLayoutChange = newLayout => {
1994
- setDashboard(applyNewLayout({
1995
- dashboard,
1996
- newLayout
1997
- }));
1998
- };
1999
- const handlePanelEdit = panel => {
2000
- setSelectedPanelId(panel.id);
2001
- panelSettingsDrawer.toggle(true);
2002
- };
2003
- const handlePanelUpdate = panel => {
2004
- setDashboard(updatePanel({
2005
- dashboard,
2006
- panel
2007
- }));
2008
- };
2009
- const handlePanelRemove = panel => {
2010
- setDashboard(removePanel({
2011
- dashboard,
2012
- panel
2013
- }));
2014
- };
2015
- const handlePersistDashboard = () => {
2016
- if (dashboard.id > 0) {
2017
- updateDashboard(dashboard).then(() => onSaved?.(dashboard)).catch(error => onError?.(error));
2018
- } else {
2019
- createDashboard(dashboard).then(() => onCreate?.()).catch(error => onError?.(error));
2020
- }
2021
- };
2022
- const selectedPanel = selectedPanelId !== null ? dashboard.panels.find(p => p.id === selectedPanelId) : null;
2023
- const cannotPersist = isCreating || isUpdating || !dashboard.panels.length;
2024
- return (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
2025
- alignItems: "start",
2026
- css: DashboardEditor_ref,
2027
- ...divProps,
2028
- children: [(0,jsx_runtime_namespaceObject.jsx)(DashboardSelectorDrawer, {
2029
- drawer: dashboardsSelectorDrawer,
2030
- children: (0,jsx_runtime_namespaceObject.jsx)(ExternalDashboardsList, {
2031
- css: DashboardEditor_ref2,
2032
- onPanelClick: handleAddPanel
2033
- })
2034
- }), (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
2035
- direction: "column",
2036
- alignItems: "start",
2037
- css: DashboardEditor_ref3,
2038
- children: [(0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.Wrapper, {
2039
- css: DashboardEditor_ref4,
2040
- children: [!dashboardsSelectorDrawer.opened && !dashboardsSelectorDrawer.transition.isMounted && (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Button, {
2041
- variant: "secondary",
2042
- css: DashboardEditor_ref5,
2043
- onClick: () => dashboardsSelectorDrawer.toggle(true),
2044
- children: (0,jsx_runtime_namespaceObject.jsx)(DashboardIcon, {})
2045
- }), (0,jsx_runtime_namespaceObject.jsx)("h2", {
2046
- css: DashboardEditor_ref6,
2047
- children: "Dashboard Editor"
2048
- }), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Input, {
2049
- name: "dashboard-name",
2050
- placeholder: "Dashboard Name",
2051
- inputProps: {
2052
- value: dashboard.title,
2053
- onChange: e => setDashboard({
2054
- ...dashboard,
2055
- title: e.target.value
2056
- })
2057
- },
2058
- css: DashboardEditor_ref7
2059
- }), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Checkbox, {
2060
- text: "Publish",
2061
- initialState: dashboard.published,
2062
- onChange: published => setDashboard({
2063
- ...dashboard,
2064
- published
2065
- })
2066
- }), (0,jsx_runtime_namespaceObject.jsx)(PeriodSelector, {}), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Button, {
2067
- variant: "info",
2068
- css: DashboardEditor_ref8,
2069
- isDisabled: cannotPersist,
2070
- onClick: handlePersistDashboard,
2071
- children: dashboard.id > 0 ? 'Save' : 'Create'
2072
- })]
2073
- }), (0,jsx_runtime_namespaceObject.jsx)(DashboardPanelGrid, {
2074
- resizable: true,
2075
- draggable: true,
2076
- dashboard: dashboard,
2077
- css: _ref9,
2078
- onLayoutChange: handleLayoutChange,
2079
- onDragStart: () => panelSettingsDrawer.toggle(false),
2080
- onResizeStart: () => panelSettingsDrawer.toggle(false),
2081
- renderPanelControl: panel => (0,jsx_runtime_namespaceObject.jsx)(PanelControl, {
2082
- panel: panel,
2083
- onEdit: () => handlePanelEdit(panel),
2084
- onRemove: () => handlePanelRemove(panel)
2085
- }),
2086
- ...gridProps
2087
- })]
2088
- }), (0,jsx_runtime_namespaceObject.jsx)(PanelSettingsDrawer, {
2089
- drawer: panelSettingsDrawer,
2090
- children: selectedPanel && (0,jsx_runtime_namespaceObject.jsx)(PanelSettings, {
2091
- panel: selectedPanel,
2092
- onChange: handlePanelUpdate,
2093
- onSave: () => panelSettingsDrawer.toggle(false)
2094
- })
2095
- })]
2096
- });
2097
- };
2098
- const DashboardEditor = ({
2099
- dashboardId,
2100
- ...props
2101
- }) => {
2102
- const {
2103
- dashboard,
2104
- defaultDashboard
2105
- } = props;
2106
- const dashboardById = useDashboard(dashboardId ?? -1, {
2107
- enabled: !!dashboardId && !dashboard && !defaultDashboard
2108
- });
2109
- const DashboardWrapper = editorProps => {
2110
- const panelDataPeriod = useInfraDashPanelDataPeriod({
2111
- ...props
2112
- });
2113
- return (0,jsx_runtime_namespaceObject.jsx)(InfraDashPanelDataPeriodProvider, {
2114
- value: panelDataPeriod,
2115
- children: (0,jsx_runtime_namespaceObject.jsx)(external_react_error_boundary_namespaceObject.ErrorBoundary, {
2116
- fallback: (0,jsx_runtime_namespaceObject.jsx)(DashboardError, {
2117
- children: "Something went wrong"
2118
- }),
2119
- children: (0,jsx_runtime_namespaceObject.jsx)(DashboardEditorInternal, {
2120
- ...editorProps
2121
- })
2122
- })
2123
- });
2124
- };
2125
- if (!dashboardId) {
2126
- return (0,jsx_runtime_namespaceObject.jsx)(DashboardWrapper, {
2127
- ...props
2128
- });
2129
- }
2130
- if (!dashboardById.isLoaded) {
2131
- return (0,jsx_runtime_namespaceObject.jsx)(LoadingDashboard, {});
2132
- }
2133
- if (dashboardById.error) {
2134
- return (0,jsx_runtime_namespaceObject.jsx)(DashboardError, {});
2135
- }
2136
- return (0,jsx_runtime_namespaceObject.jsx)(DashboardWrapper, {
2137
- ...props,
2138
- defaultDashboard: dashboardById.data
2139
- });
2140
- };
2141
- ;// ./src/widgets/DashboardEditor/index.ts
2142
-
2143
- ;// ./src/shared/exception.ts
2144
- const tryCatch = async promise => {
2145
- try {
2146
- const data = await promise;
2147
- return [null, data];
2148
- } catch (error) {
2149
- return [error, null];
2150
- }
2151
- };
2152
- ;// ./src/shared/transport/restTransport.ts
2153
-
2154
- class RestInfraDashTransport {
2155
- constructor({
2156
- baseUrl,
2157
- authMiddleware,
2158
- unwrapResponse
2159
- }) {
2160
- if (!baseUrl) {
2161
- throw new Error('Base URL is required for RestInfraDashTransport');
2162
- }
2163
- this.baseUrl = baseUrl;
2164
- this.authMiddleware = authMiddleware;
2165
- this.unwrapResponse = unwrapResponse;
2166
- }
2167
- getUrl(path) {
2168
- return `${this.baseUrl}${path}`;
2169
- }
2170
- async applyMiddlewares(request) {
2171
- if (this.authMiddleware) {
2172
- return await this.authMiddleware(request);
2173
- }
2174
- return request;
2175
- }
2176
-
2177
- // TODO: add validation schema support
2178
- async makeRequest(request, parseResponse = true) {
2179
- const finalizedRequest = await this.applyMiddlewares(request);
2180
- const [error, response] = await tryCatch(fetch(finalizedRequest));
2181
- if (error || !response.ok) {
2182
- throw new Error(`Request ${finalizedRequest.url} failed: ${error?.message ?? response?.statusText}`);
2183
- }
2184
- if (!parseResponse) {
2185
- return response;
2186
- }
2187
- const json = await response.json();
2188
- let result = json;
2189
- if (this.unwrapResponse) {
2190
- result = await this.unwrapResponse(json);
2191
- }
2192
- return result;
2193
- }
2194
- async getGrafanaDashboards(signal) {
2195
- const request = new Request(this.getUrl('/grafana/dashboards'), {
2196
- method: 'GET',
2197
- signal
2198
- });
2199
- return await this.makeRequest(request);
2200
- }
2201
- async getGrafanaPanels(grafanaDashboardUid, signal) {
2202
- const request = new Request(this.getUrl(`/grafana/dashboards/${grafanaDashboardUid}`), {
2203
- method: 'GET',
2204
- signal
2205
- });
2206
- return await this.makeRequest(request);
2207
- }
2208
- async getGrafanaPanelData({
2209
- dashboardUid,
2210
- panelId,
2211
- period
2212
- }, signal) {
2213
- const request = new Request(this.getUrl(`/grafana/dashboards/${dashboardUid}/panel/${panelId}?period=${period ?? 0}`), {
2214
- method: 'POST',
2215
- signal
2216
- });
2217
- return await this.makeRequest(request);
2218
- }
2219
- async getDashboards(signal) {
2220
- const request = new Request(this.getUrl(`/dashboards`), {
2221
- method: 'GET',
2222
- signal
2223
- });
2224
- return await this.makeRequest(request);
2225
- }
2226
- async getPublishedDashboards(signal) {
2227
- const request = new Request(this.getUrl(`/dashboards/published`), {
2228
- method: 'GET',
2229
- signal
2230
- });
2231
- return await this.makeRequest(request);
2232
- }
2233
- async getDashboard(dashboardUid, signal) {
2234
- const request = new Request(this.getUrl(`/dashboards/${dashboardUid}`), {
2235
- method: 'GET',
2236
- signal
2237
- });
2238
- return await this.makeRequest(request);
2239
- }
2240
- async createDashboard(payload, signal) {
2241
- const request = new Request(this.getUrl(`/dashboards`), {
2242
- method: 'POST',
2243
- body: JSON.stringify(payload),
2244
- headers: {
2245
- 'Content-Type': 'application/json'
2246
- },
2247
- signal
2248
- });
2249
- return await this.makeRequest(request, false);
2250
- }
2251
- async updateDashboard(payload, signal) {
2252
- const {
2253
- dashboardId,
2254
- ...body
2255
- } = payload;
2256
- const request = new Request(this.getUrl(`/dashboards/${dashboardId}`), {
2257
- method: 'POST',
2258
- body: JSON.stringify(body),
2259
- headers: {
2260
- 'Content-Type': 'application/json'
2261
- },
2262
- signal
2263
- });
2264
- return await this.makeRequest(request, false);
2265
- }
2266
- async deleteDashboard(dashboardId, signal) {
2267
- const request = new Request(this.getUrl(`/dashboards/${dashboardId}`), {
2268
- method: 'DELETE',
2269
- signal
2270
- });
2271
- return await this.makeRequest(request, false);
2272
- }
2273
- }
2274
- ;// ./src/shared/transport/index.ts
2275
-
2276
-
2277
-
2278
- ;// ./src/components/PeriodSelector/index.ts
2279
-
2280
- ;// ./src/shared/query/query.ts
2281
-
2282
- class QueryEntry {
2283
- state = {
2284
- data: undefined,
2285
- error: null,
2286
- isLoaded: false,
2287
- isFetching: false
2288
- };
2289
- promise = null;
2290
- subscribers = new Set();
2291
- controller = null;
2292
- constructor(key, fetcher, options) {
2293
- this.key = key;
2294
- this.fetcher = fetcher;
2295
- this.options = {
2296
- enabled: options?.enabled ?? true
2297
- };
2298
- }
2299
- notify() {
2300
- // ensure subscribers are notified after the current call stack
2301
- queueMicrotask(() => {
2302
- for (const sub of this.subscribers) {
2303
- sub(this.state);
2304
- }
2305
- });
2306
- }
2307
- isActive() {
2308
- return this.subscribers.size && this.options.enabled;
2309
- }
2310
- updateEntity(fetcher, options) {
2311
- this.fetcher = fetcher;
2312
- this.options = {
2313
- ...this.options,
2314
- ...options
2315
- };
2316
- this.fetch(); // re-trigger fetch with new fetcher
2317
- return this;
2318
- }
2319
- fetch() {
2320
- if (!this.options.enabled) {
2321
- if (this.state.isLoaded || this.state.isFetching) {
2322
- this.state = {
2323
- ...this.state,
2324
- data: undefined,
2325
- error: null,
2326
- isLoaded: false,
2327
- isFetching: false
2328
- };
2329
- this.cancel();
2330
- this.notify();
2331
- }
2332
- return Promise.resolve(this.state.data);
2333
- }
2334
-
2335
- // dedupe in-flight fetches
2336
- if (this.promise && !this.controller?.signal.aborted) {
2337
- return this.promise;
2338
- }
2339
- if (this.state.isLoaded && !this.state.isFetching) {
2340
- return Promise.resolve(this.state.data);
2341
- }
2342
- this.state = {
2343
- ...this.state,
2344
- isFetching: true
2345
- };
2346
- this.notify();
2347
- this.controller = new AbortController();
2348
- const signal = this.controller.signal;
2349
- this.promise = this.fetcher(signal).then(data => {
2350
- this.state = {
2351
- data,
2352
- error: null,
2353
- isLoaded: true,
2354
- isFetching: false
2355
- };
2356
- return data;
2357
- }).catch(error => {
2358
- if (signal.aborted) {
2359
- return undefined;
2360
- }
2361
- this.state = {
2362
- data: undefined,
2363
- error,
2364
- isLoaded: true,
2365
- isFetching: false
2366
- };
2367
- return undefined;
2368
- }).finally(() => {
2369
- this.promise = null;
2370
- this.notify();
2371
- });
2372
- return this.promise;
2373
- }
2374
- subscribe(sub) {
2375
- this.subscribers.add(sub);
2376
- sub(this.state);
2377
- return () => {
2378
- this.subscribers.delete(sub);
2379
- setTimeout(() => {
2380
- if (!this.subscribers.size) {
2381
- this.cancel();
2382
- }
2383
- });
2384
- };
2385
- }
2386
- setData(data) {
2387
- this.state = {
2388
- ...this.state,
2389
- isLoaded: true,
2390
- isFetching: false,
2391
- error: null,
2392
- data
2393
- };
2394
- this.notify();
2395
- }
2396
- invalidate(reset = false) {
2397
- if (reset) {
2398
- // if reset is true, we reset the state to initial
2399
- this.state = {
2400
- data: undefined,
2401
- error: null,
2402
- isLoaded: false,
2403
- isFetching: false
2404
- };
2405
- }
2406
- // kick off a new fetch
2407
- this.state.isFetching = true;
2408
- this.cancel();
2409
- this.fetch();
2410
- }
2411
- cancel() {
2412
- if (this.controller) {
2413
- this.controller.abort('Query cancelled');
2414
- this.controller = null;
2415
- }
2416
- }
2417
- }
2418
- class QueryClient {
2419
- cache = new Map();
2420
- get(key) {
2421
- return this.cache.get(hashKey(key));
2422
- }
2423
- fetchQuery(key, fetcher, options) {
2424
- const keyHash = hashKey(key);
2425
- let entry = this.cache.get(keyHash);
2426
- if (!entry) {
2427
- entry = new QueryEntry(key, fetcher, options);
2428
- this.cache.set(keyHash, entry);
2429
- }
2430
- entry.fetch(); // trigger network (or return cached in-flight promise)
2431
- return entry;
2432
- }
2433
- invalidateQueries({
2434
- key,
2435
- exact,
2436
- reset,
2437
- type = 'all'
2438
- }) {
2439
- const matchingEntries = [];
2440
- for (const [hash, entry] of this.cache.entries()) {
2441
- if (type !== 'all') {
2442
- const active = entry.isActive();
2443
- if (type === 'active' && !active || type === 'inactive' && active) {
2444
- continue; // skip entries that don't match the type
2445
- }
2446
- }
2447
- if (exact) {
2448
- if (hash === hashKey(key)) {
2449
- matchingEntries.push(entry);
2450
- }
2451
- } else {
2452
- if (partialMatchKey(entry.key, key)) {
2453
- matchingEntries.push(entry);
2454
- }
2455
- }
2456
- }
2457
- for (const entry of matchingEntries) {
2458
- entry.invalidate(reset);
2459
- }
2460
- }
2461
- setQueryData(key, data) {
2462
- const keyHash = hashKey(key);
2463
- const existing = this.cache.get(keyHash);
2464
- if (existing) {
2465
- existing.setData(data);
2466
- } else {
2467
- const newEntry = new QueryEntry(key, () => Promise.resolve(data));
2468
- newEntry.setData(data);
2469
- this.cache.set(keyHash, newEntry);
2470
- }
2471
- }
2472
- }
2473
- const queryClient = new QueryClient();
2474
- ;// ./src/shared/query/mutation.ts
2475
-
2476
- class MutationEntry {
2477
- state = {
2478
- data: undefined,
2479
- error: undefined,
2480
- isLoading: false
2481
- };
2482
- promise = null;
2483
- subscribers = new Set();
2484
- controller = null;
2485
- constructor(key, mutationFn, options) {
2486
- this.key = key;
2487
- this.mutationFn = mutationFn;
2488
- this.options = options;
2489
- }
2490
- notify() {
2491
- for (const sub of this.subscribers) {
2492
- sub(this.state);
2493
- }
2494
- }
2495
- updateEntity(mutationFn, options) {
2496
- this.mutationFn = mutationFn;
2497
- if (options !== undefined) {
2498
- this.options = options;
2499
- }
2500
- }
2501
- mutate(...args) {
2502
- const variables = args[0];
2503
-
2504
- // abort any existing in-flight mutation
2505
- if (this.controller) {
2506
- this.controller.abort();
2507
- }
2508
- this.controller = new AbortController();
2509
- const signal = this.controller.signal;
2510
- this.state = {
2511
- ...this.state,
2512
- isLoading: true
2513
- };
2514
- this.notify();
2515
- const {
2516
- onSuccess,
2517
- onError,
2518
- onSettled
2519
- } = this.options || {};
2520
- this.promise = this.mutationFn(variables, signal).then(data => {
2521
- this.state = {
2522
- data,
2523
- error: undefined,
2524
- isLoading: false
2525
- };
2526
- this.notify();
2527
- if (onSuccess) {
2528
- try {
2529
- onSuccess(data, variables);
2530
- } catch (err) {
2531
- console.error('Error in onSuccess callback:', err);
2532
- }
2533
- }
2534
- if (onSettled) {
2535
- try {
2536
- onSettled(undefined, data, variables);
2537
- } catch (err) {
2538
- console.error('Error in onSettled callback (success):', err);
2539
- }
2540
- }
2541
- return data;
2542
- }).catch(error => {
2543
- if (signal.aborted) {
2544
- return undefined;
2545
- }
2546
- this.state = {
2547
- data: undefined,
2548
- error,
2549
- isLoading: false
2550
- };
2551
- this.notify();
2552
- if (onError) {
2553
- try {
2554
- onError(error, variables);
2555
- } catch (err) {
2556
- console.error('Error in onError callback:', err);
2557
- }
2558
- }
2559
- if (onSettled) {
2560
- try {
2561
- onSettled(error, undefined, variables);
2562
- } catch (err) {
2563
- console.error('Error in onSettled callback (error):', err);
2564
- }
2565
- }
2566
- throw error;
2567
- }).finally(() => {
2568
- this.promise = null;
2569
- });
2570
- return this.promise;
2571
- }
2572
- subscribe(sub) {
2573
- this.subscribers.add(sub);
2574
- sub(this.state);
2575
- return () => {
2576
- this.subscribers.delete(sub);
2577
- };
2578
- }
2579
- cancel() {
2580
- if (this.controller) {
2581
- this.controller.abort();
2582
- }
2583
- }
2584
- reset() {
2585
- this.state = {
2586
- data: undefined,
2587
- error: undefined,
2588
- isLoading: false
2589
- };
2590
- this.notify();
2591
- this.cancel();
2592
- }
2593
- }
2594
- class MutationClient {
2595
- cache = new Map();
2596
- fetchMutation(key, mutationFn, options) {
2597
- const keyHash = hashKey(key);
2598
- let entry = this.cache.get(keyHash);
2599
- if (!entry) {
2600
- entry = new MutationEntry(key, mutationFn, options);
2601
- this.cache.set(keyHash, entry);
2602
- }
2603
- return entry;
2604
- }
2605
- }
2606
- const mutationClient = new MutationClient();
2607
- ;// ./src/shared/panelRegistry.ts
2608
- class PanelRegistry {
2609
- panels = new Map();
2610
- registerPanel(panelConfig) {
2611
- if (this.panels.has(panelConfig.componentId)) {
2612
- throw new Error(`Panel with id ${panelConfig.componentId} is already registered.`);
2613
- }
2614
- this.panels.set(panelConfig.componentId, panelConfig);
2615
- }
2616
- getPanelConfig(componentId) {
2617
- const panel = this.panels.get(componentId);
2618
- if (!panel) {
2619
- throw new Error(`Panel with id ${componentId} is not registered.`);
2620
- }
2621
- return panel;
2622
- }
2623
- findPanelConfigsByType(type) {
2624
- return Array.from(this.panels.values()).filter(panel => panel.supportedTypes.includes(type));
2625
- }
2626
- }
2627
- ;// ./src/components/LoadingPanel/LoadingPanel.tsx
2628
- function LoadingPanel_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
2629
-
2630
-
2631
-
2632
- var LoadingPanel_ref = true ? {
2633
- name: "1kdycl6",
2634
- styles: "margin-top:12px;text-align:center"
2635
- } : 0;
2636
- const LoadingPanel = ({
2637
- title,
2638
- children
2639
- }) => {
2640
- return (0,jsx_runtime_namespaceObject.jsxs)(core_namespaceObject.WidgetCard, {
2641
- title: title,
2642
- contentClassName: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
2643
- name: "1wgy75t",
2644
- styles: "align-items:center!important;justify-content:center!important"
2645
- } : 0),
2646
- children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.ProgressCircle, {
2647
- currentValue: 3,
2648
- max: 10,
2649
- size: 64,
2650
- color: "blue",
2651
- mode: "infinite"
2652
- }), children && (0,jsx_runtime_namespaceObject.jsx)("div", {
2653
- css: LoadingPanel_ref,
2654
- children: children
2655
- })]
2656
- });
2657
- };
2658
- ;// ./src/entities/panel/usePanelData.ts
2659
-
2660
-
2661
-
2662
-
2663
- const usePanelData = (panel, options = {}) => {
2664
- const _transport = useTransport(options?.transport);
2665
- const {
2666
- period
2667
- } = useInfraDashPanelDataPeriodContext();
2668
- const panelSource = panel.source;
2669
- const result = useQuery(['panel-data', {
2670
- panelSource,
2671
- period
2672
- }], async signal => {
2673
- if (panelSource.type === PANEL_DATA_SOURCE.GRAFANA) {
2674
- const {
2675
- dashboardUid,
2676
- panelId
2677
- } = panelSource;
2678
- const data = await _transport.getGrafanaPanelData({
2679
- dashboardUid,
2680
- panelId,
2681
- period
2682
- }, signal);
2683
- return {
2684
- source: PANEL_DATA_SOURCE.GRAFANA,
2685
- data
2686
- };
2687
- }
2688
- throw new Error(`Unsupported panel data source: ${panelSource}`);
2689
- }, options);
2690
- return result;
2691
- };
2692
- ;// ./src/entities/panel/withPanelData.tsx
2693
-
2694
-
2695
-
2696
-
2697
-
2698
- function withPanelData(Wrapped, {
2699
- LoadingComponent,
2700
- ErrorComponent
2701
- } = {}) {
2702
- const Enhanced = ({
2703
- panel,
2704
- title: providedTitle,
2705
- ...rest
2706
- }) => {
2707
- const title = providedTitle ?? panel.title;
2708
- const query = usePanelData(panel);
2709
- if (!query.isLoaded) {
2710
- return LoadingComponent ? (0,jsx_runtime_namespaceObject.jsx)(LoadingComponent, {
2711
- title: title
2712
- }) : (0,jsx_runtime_namespaceObject.jsx)(LoadingPanel, {
2713
- title: title
2714
- });
2715
- }
2716
- if (query.error) {
2717
- return ErrorComponent ? (0,jsx_runtime_namespaceObject.jsx)(ErrorComponent, {
2718
- title: title
2719
- }) : (0,jsx_runtime_namespaceObject.jsx)(ErrorPanel, {
2720
- title: title
2721
- });
2722
- }
2723
- const injectedProps = {
2724
- ...rest,
2725
- panel,
2726
- title,
2727
- panelData: query.data
2728
- };
2729
- return (0,jsx_runtime_namespaceObject.jsx)(Wrapped, {
2730
- ...injectedProps
2731
- });
2732
- };
2733
- return Enhanced;
2734
- }
2735
- ;// external "@grafana/data"
2736
- const data_namespaceObject = require("@grafana/data");
2737
- ;// ./src/panels/TimeseriesPanel/data-adapters/grafana.tsx
2738
-
2739
- const grafanaDataAdapter = ({
2740
- panel,
2741
- data
2742
- }) => {
2743
- const {
2744
- results
2745
- } = data.data;
2746
- const xIndex = 0;
2747
- const yIndex = 1;
2748
- const frames = Object.values(results).flatMap(result => result.frames);
2749
- const defaultFieldConfig = panel.panelSchema?.fieldConfig?.defaults;
2750
- const unit = frames[0]?.schema?.fields?.[yIndex]?.config?.unit ?? defaultFieldConfig?.unit;
2751
- const formattedValue = (0,data_namespaceObject.getValueFormat)(unit)(0);
2752
- const series = frames.map(frame => {
2753
- const values = frame?.data?.values ?? [];
2754
- const x = values[xIndex] ?? [];
2755
- const y = values[yIndex] ?? [];
2756
- const yField = frame.schema?.fields?.[yIndex];
2757
- const color = defaultFieldConfig?.color?.fixedColor;
2758
- const name = yField?.config?.displayName ?? yField?.config?.displayNameFromDS ?? yField?.name ?? frame.schema?.refId;
2759
- return {
2760
- x: x,
2761
- y: y,
2762
- name,
2763
- marker: {
2764
- color: color
2765
- },
2766
- selected: true,
2767
- showlegend: true,
2768
- type: 'scatter',
2769
- hovertemplate: `${name}: ${formattedValue.prefix ?? ''}%{y:}${formattedValue.suffix ?? ''}<extra></extra>`
2770
- };
2771
- });
2772
- return {
2773
- series,
2774
- valuePrefix: formattedValue.prefix,
2775
- valueSuffix: formattedValue.suffix
2776
- };
2777
- };
2778
- ;// ./src/panels/TimeseriesPanel/TimeseriesPanel.tsx
2779
-
2780
-
2781
-
2782
-
2783
-
2784
-
2785
- const TimeseriesPanel = ({
2786
- panel,
2787
- panelData,
2788
- title: providedTitle,
2789
- xAxisHoverFormat,
2790
- labelWidth = 50
2791
- }) => {
2792
- const {
2793
- ref,
2794
- width
2795
- } = (0,hooks_namespaceObject.useElementSize)();
2796
- const title = providedTitle ?? panel.title;
2797
- const {
2798
- series,
2799
- valuePrefix,
2800
- valueSuffix
2801
- } = matchPanelDataSource(panelData.source, {
2802
- grafana: () => grafanaDataAdapter({
2803
- panel,
2804
- data: panelData.data
2805
- })
2806
- });
2807
- return (0,jsx_runtime_namespaceObject.jsx)("div", {
2808
- ref: ref,
2809
- style: {
2810
- width: '100%',
2811
- height: '100%'
2812
- },
2813
- children: (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.BarLineComplexChart, {
2814
- width: "100%",
2815
- height: "100%",
2816
- features: ['header'],
2817
- systemModeBarButtons: [],
2818
- cardProps: {
2819
- title
2820
- },
2821
- layout: {
2822
- autosize: true,
2823
- width: width,
2824
- margin: {
2825
- r: labelWidth
2826
- },
2827
- xaxis: {
2828
- tickmode: 'auto',
2829
- hoverformat: xAxisHoverFormat
2830
- },
2831
- yaxis2: {
2832
- ticksuffix: valueSuffix,
2833
- tickprefix: valuePrefix,
2834
- tickmode: 'auto'
2835
- }
2836
- },
2837
- data: series
2838
- })
2839
- });
2840
- };
2841
- const panelConfig = {
2842
- componentId: 'timeseries-default',
2843
- name: 'Timeseries Panel',
2844
- Component: withPanelData(TimeseriesPanel),
2845
- supportedTypes: ['timeseries', 'bargauge'],
2846
- propsSchema: {
2847
- type: 'object',
2848
- properties: {
2849
- title: {
2850
- type: 'string',
2851
- title: 'Panel Title'
2852
- },
2853
- xAxisHoverFormat: {
2854
- type: 'string',
2855
- title: 'X Axis Hover Format',
2856
- default: '%H:%M, %d %b'
2857
- },
2858
- labelWidth: {
2859
- type: 'number',
2860
- title: 'Label Width',
2861
- default: 50
2862
- }
2863
- }
2864
- },
2865
- uiSchema: {
2866
- title: {
2867
- 'ui:help': 'Override the default panel title',
2868
- 'ui:placeholder': 'Panel Title'
2869
- },
2870
- xAxisHoverFormat: {
2871
- 'ui:help': 'Format for the x-axis hover tooltip',
2872
- 'ui:placeholder': 'X Axis Hover Format (e.g., %H:%M, %d %b)'
2873
- },
2874
- labelWidth: {
2875
- 'ui:help': 'Set the width of the y axis label in pixels',
2876
- 'ui:placeholder': 'Label Width'
2877
- }
2878
- }
2879
- };
2880
- ;// ./src/panels/GaugePanel/data-adapters/grafana.tsx
2881
-
2882
- const inferMinMax = (values, unit) => {
2883
- if (unit === 'percent') {
2884
- return {
2885
- min: 0,
2886
- max: 100
2887
- };
2888
- }
2889
- if (unit === 'percentunit') {
2890
- return {
2891
- min: 0,
2892
- max: 1
2893
- };
2894
- }
2895
- if (!values.length) {
2896
- return {
2897
- min: 0,
2898
- max: 100
2899
- };
2900
- }
2901
- return {
2902
- min: Math.min(...values),
2903
- max: Math.max(...values)
2904
- };
2905
- };
2906
- const grafana_grafanaDataAdapter = ({
2907
- panel,
2908
- data
2909
- }) => {
2910
- const {
2911
- results
2912
- } = data.data;
2913
- const yIndex = 1;
2914
- const frames = Object.values(results).flatMap(result => result.frames);
2915
- const defaultFieldConfig = panel.panelSchema?.fieldConfig?.defaults;
2916
- if (frames.length > 1) {
2917
- throw new Error(`Expected a single frame for gauge panel, but found ${frames.length} frames.`);
2918
- }
2919
- const dataFrame = frames[0];
2920
- const values = dataFrame?.data?.values?.[yIndex] ?? [];
2921
- const value = values?.at(-1) ?? 0;
2922
- const unit = dataFrame?.schema?.fields?.[yIndex]?.config?.unit ?? defaultFieldConfig?.unit;
2923
- const formattedValue = (0,data_namespaceObject.getValueFormat)(unit)(value);
2924
- const {
2925
- min,
2926
- max
2927
- } = inferMinMax(values, unit);
2928
- const thresholds = defaultFieldConfig?.thresholds?.steps?.map(({
2929
- color,
2930
- value
2931
- }) => ({
2932
- color,
2933
- value: value ?? 0
2934
- })) ?? [];
2935
- const segments = thresholds.map((threshold, index) => ({
2936
- color: threshold.color,
2937
- value: thresholds[index + 1]?.value ?? 100 // use next threshold value or default to 100
2938
- }));
2939
- return {
2940
- min,
2941
- max,
2942
- thresholds,
2943
- segments,
2944
- value,
2945
- valueSuffix: formattedValue.suffix,
2946
- valuePrefix: formattedValue.prefix
2947
- };
2948
- };
2949
- ;// ./src/panels/GaugePanel/GaugePanel.tsx
2950
- function GaugePanel_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
2951
-
2952
-
2953
-
2954
-
2955
-
2956
-
2957
- const GaugePanel = ({
2958
- panel,
2959
- panelData,
2960
- title: providedTitle
2961
- }) => {
2962
- const title = providedTitle ?? panel.title;
2963
- const {
2964
- min,
2965
- max,
2966
- value,
2967
- valuePrefix,
2968
- valueSuffix,
2969
- segments
2970
- } = matchPanelDataSource(panelData.source, {
2971
- grafana: () => grafana_grafanaDataAdapter({
2972
- panel,
2973
- data: panelData.data
2974
- })
2975
- });
2976
- return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.GaugeChart, {
2977
- features: ['header'],
2978
- containerProps: {
2979
- className: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
2980
- name: "w1atjl",
2981
- styles: "width:100%;height:100%"
2982
- } : 0)
2983
- },
2984
- title: title,
2985
- unitLabel: valueSuffix,
2986
- maxValue: max,
2987
- minValue: min,
2988
- minLabel: `${valuePrefix ?? ''}${min}${valueSuffix ?? ''}`,
2989
- maxLabel: `${valuePrefix ?? ''}${max}${valueSuffix ?? ''}`,
2990
- value: value,
2991
- segments: segments
2992
- });
2993
- };
2994
- const GaugePanel_panelConfig = {
2995
- componentId: 'gauge-default',
2996
- name: 'Gauge Panel',
2997
- Component: withPanelData(GaugePanel),
2998
- supportedTypes: ['gauge'],
2999
- propsSchema: {
3000
- type: 'object',
3001
- properties: {
3002
- title: {
3003
- type: 'string',
3004
- title: 'Panel Title'
3005
- }
3006
- }
3007
- },
3008
- uiSchema: {
3009
- title: {
3010
- 'ui:help': 'Override the default panel title',
3011
- 'ui:placeholder': 'Panel Title'
3012
- }
3013
- }
3014
- };
3015
- ;// ./src/panels/BarGaugePanel/data-adapters/grafana.tsx
3016
-
3017
- function grafana_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
3018
-
3019
-
3020
- var grafana_ref = true ? {
3021
- name: "mmdt3g",
3022
- styles: "font-size:14px"
3023
- } : 0;
3024
- var grafana_ref2 = true ? {
3025
- name: "mmdt3g",
3026
- styles: "font-size:14px"
3027
- } : 0;
3028
- const data_adapters_grafana_grafanaDataAdapter = ({
3029
- panel,
3030
- data,
3031
- labelWidth
3032
- }) => {
3033
- const panelData = data.data;
3034
- const yIndex = 1;
3035
- const defaultFieldConfig = panel.panelSchema?.fieldConfig?.defaults;
3036
- const thresholds = defaultFieldConfig?.thresholds?.steps?.map(({
3037
- color,
3038
- value
3039
- }) => ({
3040
- color,
3041
- value: value ?? 0
3042
- })) ?? [];
3043
- const frames = Object.values(panelData.results).flatMap(result => result.frames);
3044
- const unit = frames[0]?.schema?.fields?.[yIndex]?.config?.unit ?? defaultFieldConfig?.unit;
3045
- const valueFormat = (0,data_namespaceObject.getValueFormat)(unit);
3046
- const valueFormatter = (v, color) => {
3047
- const formattedValue = valueFormat(v);
3048
- return (0,jsx_runtime_namespaceObject.jsxs)("div", {
3049
- css: /*#__PURE__*/(0,react_namespaceObject.css)({
3050
- color,
3051
- textAlign: 'right'
3052
- }, true ? "" : 0, true ? "" : 0),
3053
- style: {
3054
- width: `${labelWidth}px`
3055
- },
3056
- children: [formattedValue.prefix && (0,jsx_runtime_namespaceObject.jsx)("span", {
3057
- css: grafana_ref,
3058
- children: formattedValue.prefix
3059
- }), formattedValue.text, ' ', formattedValue.suffix && (0,jsx_runtime_namespaceObject.jsx)("span", {
3060
- css: grafana_ref2,
3061
- children: formattedValue.suffix
3062
- })]
3063
- });
3064
- };
3065
- const bars = frames.map(frame => {
3066
- const y = frame.data?.values?.[yIndex] ?? [];
3067
- const value = y.at(-1) ?? 0;
3068
- const yField = frame.schema?.fields?.[yIndex];
3069
- return {
3070
- title: yField?.config?.displayName ?? yField?.config?.displayNameFromDS ?? yField?.name ?? frame.schema?.refId,
3071
- value: Number(value.toFixed(2)),
3072
- valueFormatter,
3073
- thresholds
3074
- };
3075
- }).filter(bar => bar.value !== undefined);
3076
- return {
3077
- bars
3078
- };
3079
- };
3080
- ;// ./src/panels/BarGaugePanel/BarGaugePanel.tsx
3081
- function BarGaugePanel_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
3082
-
3083
-
3084
-
3085
-
3086
-
3087
-
3088
- const GrafanaBarGaugePanel = ({
3089
- panel,
3090
- panelData,
3091
- title: providedTitle,
3092
- labelWidth = 80
3093
- }) => {
3094
- const title = providedTitle ?? panel.title;
3095
- const {
3096
- bars
3097
- } = matchPanelDataSource(panelData.source, {
3098
- grafana: () => data_adapters_grafana_grafanaDataAdapter({
3099
- panel,
3100
- data: panelData.data,
3101
- labelWidth
3102
- })
3103
- });
3104
- return (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.BarGaugeChart, {
3105
- features: ['header'],
3106
- title: title,
3107
- bars: bars,
3108
- widgetCardProps: {
3109
- contentClassName: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
3110
- name: "1qmr6ab",
3111
- styles: "overflow:auto"
3112
- } : 0)
3113
- },
3114
- wrapperProps: {
3115
- className: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
3116
- name: "9d39k0",
3117
- styles: "gap:2px !important"
3118
- } : 0)
3119
- }
3120
- });
3121
- };
3122
- const BarGaugePanel_panelConfig = {
3123
- componentId: 'bargauge-default',
3124
- name: 'Bar Gauge Panel',
3125
- Component: withPanelData(GrafanaBarGaugePanel),
3126
- supportedTypes: ['bargauge', 'gauge'],
3127
- propsSchema: {
3128
- type: 'object',
3129
- properties: {
3130
- title: {
3131
- type: 'string',
3132
- title: 'Panel Title'
3133
- },
3134
- labelWidth: {
3135
- type: 'number',
3136
- title: 'Label Width',
3137
- default: 80,
3138
- description: 'Width of the label in pixels'
3139
- }
3140
- }
3141
- },
3142
- uiSchema: {
3143
- title: {
3144
- 'ui:help': 'Override the default panel title',
3145
- 'ui:placeholder': 'Panel Title'
3146
- },
3147
- labelWidth: {
3148
- 'ui:help': 'Set the width of the label in pixels',
3149
- 'ui:placeholder': 'Label Width'
3150
- }
3151
- }
3152
- };
3153
- ;// ./src/panels/index.ts
3154
-
3155
-
3156
-
3157
-
3158
- const panelRegistry = new PanelRegistry();
3159
- panelRegistry.registerPanel(panelConfig);
3160
- panelRegistry.registerPanel(GaugePanel_panelConfig);
3161
- panelRegistry.registerPanel(BarGaugePanel_panelConfig);
3162
-
3163
- ;// ./src/provider.tsx
3164
-
3165
-
3166
-
3167
-
3168
- const InfraDashProvider = ({
3169
- children,
3170
- transport,
3171
- queryClient: providedQueryClient,
3172
- mutationClient: providedMutationClient,
3173
- panelRegistry: providedPanelRegistry
3174
- }) => {
3175
- return (0,jsx_runtime_namespaceObject.jsx)(InfraDashInternalProvider, {
3176
- value: {
3177
- transport,
3178
- queryClient: providedQueryClient ?? queryClient,
3179
- mutationClient: providedMutationClient ?? mutationClient,
3180
- panelRegistry: providedPanelRegistry ?? panelRegistry
3181
- },
3182
- children: children
3183
- });
3184
- };
3185
- ;// ./src/index.ts
3186
-
3187
-
3188
-
3189
-
3190
-
3191
-
3192
-
3193
-
3194
- /******/ return __webpack_exports__;
3195
- /******/ })()
3196
- ;
3197
- });
3198
- //# sourceMappingURL=index.js.map