datadog-frontend-toolkit 1.0.57 → 1.0.59
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/resources/templates/dashboard.js +271 -140
- package/dist/cjs/resources/templates/dashboard.js.map +1 -1
- package/dist/esm/resources/templates/dashboard.js +271 -140
- package/dist/esm/resources/templates/dashboard.js.map +1 -1
- package/dist/resources/templates/dashboard.js +271 -140
- package/dist/resources/templates/dashboard.js.map +1 -1
- package/dist/types/resources/templates/dashboard.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -22,7 +22,7 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
22
22
|
{
|
|
23
23
|
definition: {
|
|
24
24
|
type: 'note',
|
|
25
|
-
content: `# ${service} Frontend Observability\n**Auto-provisioned** by datadog-frontend-toolkit — use the \`$env\` dropdown above to filter by environment
|
|
25
|
+
content: `# ${service} Frontend Observability\n**Auto-provisioned** by datadog-frontend-toolkit — use the \`$env\` dropdown above to filter by environment.\n\n**Top section:** Key signals to detect production issues at a glance. **Bottom section:** Full observability detail for deep investigation.`,
|
|
26
26
|
background_color: 'blue',
|
|
27
27
|
font_size: '16',
|
|
28
28
|
text_align: 'left',
|
|
@@ -31,39 +31,56 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
31
31
|
tick_pos: '50%',
|
|
32
32
|
},
|
|
33
33
|
},
|
|
34
|
-
//
|
|
34
|
+
// ═══════════════════════════════════════════════════════════════
|
|
35
|
+
// SECTION 1: Production Health — concise, actionable, error-focused
|
|
36
|
+
// ═══════════════════════════════════════════════════════════════
|
|
35
37
|
{
|
|
36
38
|
definition: {
|
|
37
39
|
type: 'group',
|
|
38
|
-
title: '
|
|
40
|
+
title: '🚨 Production Health — Key Error Signals',
|
|
39
41
|
layout_type: 'ordered',
|
|
40
42
|
widgets: [
|
|
43
|
+
// Row 1: Critical numbers at a glance
|
|
41
44
|
{
|
|
42
45
|
definition: {
|
|
43
46
|
type: 'query_value',
|
|
44
|
-
title: '
|
|
47
|
+
title: '⚠️ Error Rate',
|
|
45
48
|
requests: [
|
|
46
49
|
{
|
|
47
50
|
response_format: 'scalar',
|
|
48
51
|
queries: [
|
|
49
52
|
{
|
|
50
53
|
data_source: 'rum',
|
|
51
|
-
name: '
|
|
52
|
-
compute: { aggregation: '
|
|
53
|
-
search: { query: `service:${service} $env` },
|
|
54
|
+
name: 'errors',
|
|
55
|
+
compute: { aggregation: 'count' },
|
|
56
|
+
search: { query: `service:${service} $env @type:error` },
|
|
54
57
|
indexes: ['*'],
|
|
55
58
|
},
|
|
59
|
+
{
|
|
60
|
+
data_source: 'rum',
|
|
61
|
+
name: 'total',
|
|
62
|
+
compute: { aggregation: 'count' },
|
|
63
|
+
search: { query: `service:${service} $env @type:view` },
|
|
64
|
+
indexes: ['*'],
|
|
65
|
+
},
|
|
66
|
+
],
|
|
67
|
+
formulas: [{ formula: '(errors / total) * 100' }],
|
|
68
|
+
conditional_formats: [
|
|
69
|
+
{ comparator: '>', value: 5, palette: 'white_on_red' },
|
|
70
|
+
{ comparator: '>', value: 2, palette: 'white_on_yellow' },
|
|
71
|
+
{ comparator: '<=', value: 2, palette: 'white_on_green' },
|
|
56
72
|
],
|
|
57
73
|
},
|
|
58
74
|
],
|
|
59
75
|
autoscale: true,
|
|
60
|
-
precision:
|
|
76
|
+
precision: 2,
|
|
77
|
+
custom_unit: '%',
|
|
61
78
|
},
|
|
62
79
|
},
|
|
63
80
|
{
|
|
64
81
|
definition: {
|
|
65
82
|
type: 'query_value',
|
|
66
|
-
title: '
|
|
83
|
+
title: '🐛 JS Errors',
|
|
67
84
|
requests: [
|
|
68
85
|
{
|
|
69
86
|
response_format: 'scalar',
|
|
@@ -72,10 +89,15 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
72
89
|
data_source: 'rum',
|
|
73
90
|
name: 'query1',
|
|
74
91
|
compute: { aggregation: 'count' },
|
|
75
|
-
search: { query: `service:${service} $env @type:
|
|
92
|
+
search: { query: `service:${service} $env @type:error` },
|
|
76
93
|
indexes: ['*'],
|
|
77
94
|
},
|
|
78
95
|
],
|
|
96
|
+
conditional_formats: [
|
|
97
|
+
{ comparator: '>', value: 100, palette: 'white_on_red' },
|
|
98
|
+
{ comparator: '>', value: 20, palette: 'white_on_yellow' },
|
|
99
|
+
{ comparator: '<=', value: 20, palette: 'white_on_green' },
|
|
100
|
+
],
|
|
79
101
|
},
|
|
80
102
|
],
|
|
81
103
|
autoscale: true,
|
|
@@ -85,123 +107,117 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
85
107
|
{
|
|
86
108
|
definition: {
|
|
87
109
|
type: 'query_value',
|
|
88
|
-
title: '
|
|
110
|
+
title: '🔌 Failed API Calls (4xx/5xx)',
|
|
89
111
|
requests: [
|
|
90
112
|
{
|
|
91
113
|
response_format: 'scalar',
|
|
92
114
|
queries: [
|
|
93
115
|
{
|
|
94
116
|
data_source: 'rum',
|
|
95
|
-
name: '
|
|
96
|
-
compute: { aggregation: 'count' },
|
|
97
|
-
search: { query: `service:${service} $env @type:error` },
|
|
98
|
-
indexes: ['*'],
|
|
99
|
-
},
|
|
100
|
-
{
|
|
101
|
-
data_source: 'rum',
|
|
102
|
-
name: 'total',
|
|
117
|
+
name: 'query1',
|
|
103
118
|
compute: { aggregation: 'count' },
|
|
104
|
-
search: { query: `service:${service} $env @type:
|
|
119
|
+
search: { query: `service:${service} $env @type:resource @resource.type:(xhr OR fetch) @resource.status_code:>=400` },
|
|
105
120
|
indexes: ['*'],
|
|
106
121
|
},
|
|
107
122
|
],
|
|
108
|
-
|
|
123
|
+
conditional_formats: [
|
|
124
|
+
{ comparator: '>', value: 50, palette: 'white_on_red' },
|
|
125
|
+
{ comparator: '>', value: 10, palette: 'white_on_yellow' },
|
|
126
|
+
{ comparator: '<=', value: 10, palette: 'white_on_green' },
|
|
127
|
+
],
|
|
109
128
|
},
|
|
110
129
|
],
|
|
111
130
|
autoscale: true,
|
|
112
|
-
precision:
|
|
113
|
-
custom_unit: '%',
|
|
131
|
+
precision: 0,
|
|
114
132
|
},
|
|
115
133
|
},
|
|
116
|
-
],
|
|
117
|
-
},
|
|
118
|
-
},
|
|
119
|
-
// Web Vitals Group
|
|
120
|
-
{
|
|
121
|
-
definition: {
|
|
122
|
-
type: 'group',
|
|
123
|
-
title: 'Web Vitals',
|
|
124
|
-
layout_type: 'ordered',
|
|
125
|
-
widgets: [
|
|
126
134
|
{
|
|
127
135
|
definition: {
|
|
128
|
-
type: '
|
|
129
|
-
title: '
|
|
136
|
+
type: 'query_value',
|
|
137
|
+
title: '😡 Rage Clicks',
|
|
130
138
|
requests: [
|
|
131
139
|
{
|
|
132
|
-
response_format: '
|
|
140
|
+
response_format: 'scalar',
|
|
133
141
|
queries: [
|
|
134
142
|
{
|
|
135
143
|
data_source: 'rum',
|
|
136
144
|
name: 'query1',
|
|
137
|
-
compute: { aggregation: '
|
|
138
|
-
search: { query: `service:${service} $env @type:
|
|
145
|
+
compute: { aggregation: 'count' },
|
|
146
|
+
search: { query: `service:${service} $env @type:action @action.type:click @action.frustration.type:rage_click` },
|
|
139
147
|
indexes: ['*'],
|
|
140
|
-
group_by: [],
|
|
141
148
|
},
|
|
142
149
|
],
|
|
150
|
+
conditional_formats: [
|
|
151
|
+
{ comparator: '>', value: 20, palette: 'white_on_red' },
|
|
152
|
+
{ comparator: '>', value: 5, palette: 'white_on_yellow' },
|
|
153
|
+
{ comparator: '<=', value: 5, palette: 'white_on_green' },
|
|
154
|
+
],
|
|
143
155
|
},
|
|
144
156
|
],
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
{ value: 'y = 4000', display_type: 'error dashed', label: 'Poor threshold' },
|
|
148
|
-
],
|
|
157
|
+
autoscale: true,
|
|
158
|
+
precision: 0,
|
|
149
159
|
},
|
|
150
160
|
},
|
|
151
161
|
{
|
|
152
162
|
definition: {
|
|
153
|
-
type: '
|
|
154
|
-
title: '
|
|
163
|
+
type: 'query_value',
|
|
164
|
+
title: '⏱️ LCP (p75)',
|
|
155
165
|
requests: [
|
|
156
166
|
{
|
|
157
|
-
response_format: '
|
|
167
|
+
response_format: 'scalar',
|
|
158
168
|
queries: [
|
|
159
169
|
{
|
|
160
170
|
data_source: 'rum',
|
|
161
171
|
name: 'query1',
|
|
162
|
-
compute: { aggregation: 'pc75', metric: '@view.
|
|
172
|
+
compute: { aggregation: 'pc75', metric: '@view.largest_contentful_paint' },
|
|
163
173
|
search: { query: `service:${service} $env @type:view` },
|
|
164
174
|
indexes: ['*'],
|
|
165
|
-
group_by: [],
|
|
166
175
|
},
|
|
167
176
|
],
|
|
177
|
+
conditional_formats: [
|
|
178
|
+
{ comparator: '>', value: 4000, palette: 'white_on_red' },
|
|
179
|
+
{ comparator: '>', value: 2500, palette: 'white_on_yellow' },
|
|
180
|
+
{ comparator: '<=', value: 2500, palette: 'white_on_green' },
|
|
181
|
+
],
|
|
168
182
|
},
|
|
169
183
|
],
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
],
|
|
184
|
+
autoscale: true,
|
|
185
|
+
precision: 0,
|
|
186
|
+
custom_unit: 'ms',
|
|
174
187
|
},
|
|
175
188
|
},
|
|
176
189
|
{
|
|
177
190
|
definition: {
|
|
178
|
-
type: '
|
|
179
|
-
title: '
|
|
191
|
+
type: 'query_value',
|
|
192
|
+
title: '👥 Affected Sessions',
|
|
180
193
|
requests: [
|
|
181
194
|
{
|
|
182
|
-
response_format: '
|
|
195
|
+
response_format: 'scalar',
|
|
183
196
|
queries: [
|
|
184
197
|
{
|
|
185
198
|
data_source: 'rum',
|
|
186
199
|
name: 'query1',
|
|
187
|
-
compute: { aggregation: '
|
|
188
|
-
search: { query: `service:${service} $env @type:
|
|
200
|
+
compute: { aggregation: 'cardinality', metric: '@session.id' },
|
|
201
|
+
search: { query: `service:${service} $env @type:error` },
|
|
189
202
|
indexes: ['*'],
|
|
190
|
-
group_by: [],
|
|
191
203
|
},
|
|
192
204
|
],
|
|
205
|
+
conditional_formats: [
|
|
206
|
+
{ comparator: '>', value: 50, palette: 'white_on_red' },
|
|
207
|
+
{ comparator: '>', value: 10, palette: 'white_on_yellow' },
|
|
208
|
+
{ comparator: '<=', value: 10, palette: 'white_on_green' },
|
|
209
|
+
],
|
|
193
210
|
},
|
|
194
211
|
],
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
{ value: 'y = 500', display_type: 'error dashed', label: 'Poor threshold' },
|
|
198
|
-
],
|
|
212
|
+
autoscale: true,
|
|
213
|
+
precision: 0,
|
|
199
214
|
},
|
|
200
215
|
},
|
|
216
|
+
// Row 2: Error timeline — are errors spiking?
|
|
201
217
|
{
|
|
202
218
|
definition: {
|
|
203
219
|
type: 'timeseries',
|
|
204
|
-
title: '
|
|
220
|
+
title: '📈 Error Trend (is it spiking?)',
|
|
205
221
|
requests: [
|
|
206
222
|
{
|
|
207
223
|
response_format: 'timeseries',
|
|
@@ -209,37 +225,24 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
209
225
|
{
|
|
210
226
|
data_source: 'rum',
|
|
211
227
|
name: 'query1',
|
|
212
|
-
compute: { aggregation: '
|
|
213
|
-
search: { query: `service:${service} $env @type:
|
|
228
|
+
compute: { aggregation: 'count' },
|
|
229
|
+
search: { query: `service:${service} $env @type:error` },
|
|
214
230
|
indexes: ['*'],
|
|
215
|
-
group_by: [],
|
|
231
|
+
group_by: [{ facet: '@error.source', limit: 10, sort: { aggregation: 'count', order: 'desc' } }],
|
|
216
232
|
},
|
|
217
233
|
],
|
|
218
234
|
},
|
|
219
235
|
],
|
|
220
|
-
markers: [
|
|
221
|
-
{ value: 'y = 1800', display_type: 'warning dashed', label: 'Good threshold' },
|
|
222
|
-
{ value: 'y = 3000', display_type: 'error dashed', label: 'Poor threshold' },
|
|
223
|
-
],
|
|
224
236
|
},
|
|
225
237
|
},
|
|
226
|
-
|
|
227
|
-
},
|
|
228
|
-
},
|
|
229
|
-
// Errors Group
|
|
230
|
-
{
|
|
231
|
-
definition: {
|
|
232
|
-
type: 'group',
|
|
233
|
-
title: 'Errors & Logs',
|
|
234
|
-
layout_type: 'ordered',
|
|
235
|
-
widgets: [
|
|
238
|
+
// Row 3: What exactly is breaking?
|
|
236
239
|
{
|
|
237
240
|
definition: {
|
|
238
|
-
type: '
|
|
239
|
-
title: 'Errors
|
|
241
|
+
type: 'toplist',
|
|
242
|
+
title: '🔴 Top Errors — What is breaking?',
|
|
240
243
|
requests: [
|
|
241
244
|
{
|
|
242
|
-
response_format: '
|
|
245
|
+
response_format: 'scalar',
|
|
243
246
|
queries: [
|
|
244
247
|
{
|
|
245
248
|
data_source: 'rum',
|
|
@@ -247,9 +250,10 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
247
250
|
compute: { aggregation: 'count' },
|
|
248
251
|
search: { query: `service:${service} $env @type:error` },
|
|
249
252
|
indexes: ['*'],
|
|
250
|
-
group_by: [{ facet: '@error.
|
|
253
|
+
group_by: [{ facet: '@error.message', limit: 10, sort: { aggregation: 'count', order: 'desc' } }],
|
|
251
254
|
},
|
|
252
255
|
],
|
|
256
|
+
formulas: [{ formula: 'query1' }],
|
|
253
257
|
},
|
|
254
258
|
],
|
|
255
259
|
},
|
|
@@ -257,7 +261,7 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
257
261
|
{
|
|
258
262
|
definition: {
|
|
259
263
|
type: 'toplist',
|
|
260
|
-
title: '
|
|
264
|
+
title: '🔌 Failing API Endpoints',
|
|
261
265
|
requests: [
|
|
262
266
|
{
|
|
263
267
|
response_format: 'scalar',
|
|
@@ -266,22 +270,24 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
266
270
|
data_source: 'rum',
|
|
267
271
|
name: 'query1',
|
|
268
272
|
compute: { aggregation: 'count' },
|
|
269
|
-
search: { query: `service:${service} $env @type:
|
|
273
|
+
search: { query: `service:${service} $env @type:resource @resource.type:(xhr OR fetch) @resource.status_code:>=400` },
|
|
270
274
|
indexes: ['*'],
|
|
271
|
-
group_by: [{ facet: '@
|
|
275
|
+
group_by: [{ facet: '@resource.url', limit: 10, sort: { aggregation: 'count', order: 'desc' } }],
|
|
272
276
|
},
|
|
273
277
|
],
|
|
278
|
+
formulas: [{ formula: 'query1' }],
|
|
274
279
|
},
|
|
275
280
|
],
|
|
276
281
|
},
|
|
277
282
|
},
|
|
283
|
+
// Row 4: Recent logs — what happened last?
|
|
278
284
|
{
|
|
279
285
|
definition: {
|
|
280
286
|
type: 'log_stream',
|
|
281
|
-
title: 'Recent Error Logs',
|
|
287
|
+
title: '📋 Recent Error Logs',
|
|
282
288
|
query: `service:${service} $env status:(error OR critical)`,
|
|
283
289
|
columns: ['timestamp', 'message', 'status'],
|
|
284
|
-
indexes: [],
|
|
290
|
+
indexes: ['*'],
|
|
285
291
|
message_display: 'expanded-md',
|
|
286
292
|
show_date_column: true,
|
|
287
293
|
show_message_column: true,
|
|
@@ -291,17 +297,54 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
291
297
|
],
|
|
292
298
|
},
|
|
293
299
|
},
|
|
294
|
-
//
|
|
300
|
+
// ═══════════════════════════════════════════════════════════════
|
|
301
|
+
// SECTION 2: Detailed Observability — deep-dive investigation
|
|
302
|
+
// ═══════════════════════════════════════════════════════════════
|
|
303
|
+
{
|
|
304
|
+
definition: {
|
|
305
|
+
type: 'note',
|
|
306
|
+
content: '---\n## 📊 Detailed Observability\nThe sections below provide full diagnostic data for deep investigation: traffic volume, Web Vitals trends, API error breakdown, geo performance, browser/device analysis, user frustration patterns, and resource loading.',
|
|
307
|
+
background_color: 'gray',
|
|
308
|
+
font_size: '14',
|
|
309
|
+
text_align: 'left',
|
|
310
|
+
show_tick: false,
|
|
311
|
+
tick_edge: 'left',
|
|
312
|
+
tick_pos: '50%',
|
|
313
|
+
},
|
|
314
|
+
},
|
|
315
|
+
// Traffic Overview Group
|
|
295
316
|
{
|
|
296
317
|
definition: {
|
|
297
318
|
type: 'group',
|
|
298
|
-
title: '
|
|
319
|
+
title: 'Traffic Overview',
|
|
299
320
|
layout_type: 'ordered',
|
|
300
321
|
widgets: [
|
|
301
322
|
{
|
|
302
323
|
definition: {
|
|
303
|
-
type: '
|
|
304
|
-
title: '
|
|
324
|
+
type: 'query_value',
|
|
325
|
+
title: 'Active Sessions',
|
|
326
|
+
requests: [
|
|
327
|
+
{
|
|
328
|
+
response_format: 'scalar',
|
|
329
|
+
queries: [
|
|
330
|
+
{
|
|
331
|
+
data_source: 'rum',
|
|
332
|
+
name: 'query1',
|
|
333
|
+
compute: { aggregation: 'cardinality', metric: '@session.id' },
|
|
334
|
+
search: { query: `service:${service} $env` },
|
|
335
|
+
indexes: ['*'],
|
|
336
|
+
},
|
|
337
|
+
],
|
|
338
|
+
},
|
|
339
|
+
],
|
|
340
|
+
autoscale: true,
|
|
341
|
+
precision: 0,
|
|
342
|
+
},
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
definition: {
|
|
346
|
+
type: 'query_value',
|
|
347
|
+
title: 'Page Views',
|
|
305
348
|
requests: [
|
|
306
349
|
{
|
|
307
350
|
response_format: 'scalar',
|
|
@@ -310,15 +353,136 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
310
353
|
data_source: 'rum',
|
|
311
354
|
name: 'query1',
|
|
312
355
|
compute: { aggregation: 'count' },
|
|
313
|
-
search: { query: `service:${service} $env @type:
|
|
356
|
+
search: { query: `service:${service} $env @type:view` },
|
|
314
357
|
indexes: ['*'],
|
|
315
|
-
group_by: [{ facet: '@resource.url', limit: 25, sort: { aggregation: 'count', order: 'desc' } }],
|
|
316
358
|
},
|
|
317
359
|
],
|
|
318
360
|
},
|
|
319
361
|
],
|
|
362
|
+
autoscale: true,
|
|
363
|
+
precision: 0,
|
|
364
|
+
},
|
|
365
|
+
},
|
|
366
|
+
],
|
|
367
|
+
},
|
|
368
|
+
},
|
|
369
|
+
// Web Vitals Group
|
|
370
|
+
{
|
|
371
|
+
definition: {
|
|
372
|
+
type: 'group',
|
|
373
|
+
title: 'Web Vitals',
|
|
374
|
+
layout_type: 'ordered',
|
|
375
|
+
widgets: [
|
|
376
|
+
{
|
|
377
|
+
definition: {
|
|
378
|
+
type: 'timeseries',
|
|
379
|
+
title: 'Largest Contentful Paint (LCP)',
|
|
380
|
+
requests: [
|
|
381
|
+
{
|
|
382
|
+
response_format: 'timeseries',
|
|
383
|
+
queries: [
|
|
384
|
+
{
|
|
385
|
+
data_source: 'rum',
|
|
386
|
+
name: 'query1',
|
|
387
|
+
compute: { aggregation: 'pc75', metric: '@view.largest_contentful_paint' },
|
|
388
|
+
search: { query: `service:${service} $env @type:view` },
|
|
389
|
+
indexes: ['*'],
|
|
390
|
+
group_by: [],
|
|
391
|
+
},
|
|
392
|
+
],
|
|
393
|
+
},
|
|
394
|
+
],
|
|
395
|
+
markers: [
|
|
396
|
+
{ value: 'y = 2500', display_type: 'warning dashed', label: 'Good threshold' },
|
|
397
|
+
{ value: 'y = 4000', display_type: 'error dashed', label: 'Poor threshold' },
|
|
398
|
+
],
|
|
399
|
+
},
|
|
400
|
+
},
|
|
401
|
+
{
|
|
402
|
+
definition: {
|
|
403
|
+
type: 'timeseries',
|
|
404
|
+
title: 'Cumulative Layout Shift (CLS)',
|
|
405
|
+
requests: [
|
|
406
|
+
{
|
|
407
|
+
response_format: 'timeseries',
|
|
408
|
+
queries: [
|
|
409
|
+
{
|
|
410
|
+
data_source: 'rum',
|
|
411
|
+
name: 'query1',
|
|
412
|
+
compute: { aggregation: 'pc75', metric: '@view.cumulative_layout_shift' },
|
|
413
|
+
search: { query: `service:${service} $env @type:view` },
|
|
414
|
+
indexes: ['*'],
|
|
415
|
+
group_by: [],
|
|
416
|
+
},
|
|
417
|
+
],
|
|
418
|
+
},
|
|
419
|
+
],
|
|
420
|
+
markers: [
|
|
421
|
+
{ value: 'y = 0.1', display_type: 'warning dashed', label: 'Good threshold' },
|
|
422
|
+
{ value: 'y = 0.25', display_type: 'error dashed', label: 'Poor threshold' },
|
|
423
|
+
],
|
|
424
|
+
},
|
|
425
|
+
},
|
|
426
|
+
{
|
|
427
|
+
definition: {
|
|
428
|
+
type: 'timeseries',
|
|
429
|
+
title: 'Interaction to Next Paint (INP)',
|
|
430
|
+
requests: [
|
|
431
|
+
{
|
|
432
|
+
response_format: 'timeseries',
|
|
433
|
+
queries: [
|
|
434
|
+
{
|
|
435
|
+
data_source: 'rum',
|
|
436
|
+
name: 'query1',
|
|
437
|
+
compute: { aggregation: 'pc75', metric: '@view.interaction_to_next_paint' },
|
|
438
|
+
search: { query: `service:${service} $env @type:view` },
|
|
439
|
+
indexes: ['*'],
|
|
440
|
+
group_by: [],
|
|
441
|
+
},
|
|
442
|
+
],
|
|
443
|
+
},
|
|
444
|
+
],
|
|
445
|
+
markers: [
|
|
446
|
+
{ value: 'y = 200', display_type: 'warning dashed', label: 'Good threshold' },
|
|
447
|
+
{ value: 'y = 500', display_type: 'error dashed', label: 'Poor threshold' },
|
|
448
|
+
],
|
|
320
449
|
},
|
|
321
450
|
},
|
|
451
|
+
{
|
|
452
|
+
definition: {
|
|
453
|
+
type: 'timeseries',
|
|
454
|
+
title: 'First Contentful Paint (FCP)',
|
|
455
|
+
requests: [
|
|
456
|
+
{
|
|
457
|
+
response_format: 'timeseries',
|
|
458
|
+
queries: [
|
|
459
|
+
{
|
|
460
|
+
data_source: 'rum',
|
|
461
|
+
name: 'query1',
|
|
462
|
+
compute: { aggregation: 'pc75', metric: '@view.first_contentful_paint' },
|
|
463
|
+
search: { query: `service:${service} $env @type:view` },
|
|
464
|
+
indexes: ['*'],
|
|
465
|
+
group_by: [],
|
|
466
|
+
},
|
|
467
|
+
],
|
|
468
|
+
},
|
|
469
|
+
],
|
|
470
|
+
markers: [
|
|
471
|
+
{ value: 'y = 1800', display_type: 'warning dashed', label: 'Good threshold' },
|
|
472
|
+
{ value: 'y = 3000', display_type: 'error dashed', label: 'Poor threshold' },
|
|
473
|
+
],
|
|
474
|
+
},
|
|
475
|
+
},
|
|
476
|
+
],
|
|
477
|
+
},
|
|
478
|
+
},
|
|
479
|
+
// API Endpoint Errors Group
|
|
480
|
+
{
|
|
481
|
+
definition: {
|
|
482
|
+
type: 'group',
|
|
483
|
+
title: 'API Endpoint Errors',
|
|
484
|
+
layout_type: 'ordered',
|
|
485
|
+
widgets: [
|
|
322
486
|
{
|
|
323
487
|
definition: {
|
|
324
488
|
type: 'toplist',
|
|
@@ -336,6 +500,7 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
336
500
|
group_by: [{ facet: '@resource.status_code', limit: 10, sort: { aggregation: 'count', order: 'desc' } }],
|
|
337
501
|
},
|
|
338
502
|
],
|
|
503
|
+
formulas: [{ formula: 'query1' }],
|
|
339
504
|
},
|
|
340
505
|
],
|
|
341
506
|
},
|
|
@@ -409,6 +574,7 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
409
574
|
group_by: [{ facet: '@view.name', limit: 10, sort: { aggregation: 'pc75', metric: '@view.loading_time', order: 'desc' } }],
|
|
410
575
|
},
|
|
411
576
|
],
|
|
577
|
+
formulas: [{ formula: 'query1' }],
|
|
412
578
|
},
|
|
413
579
|
],
|
|
414
580
|
},
|
|
@@ -463,6 +629,7 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
463
629
|
group_by: [{ facet: '@geo.country', limit: 15, sort: { aggregation: 'count', order: 'desc' } }],
|
|
464
630
|
},
|
|
465
631
|
],
|
|
632
|
+
formulas: [{ formula: 'query1' }],
|
|
466
633
|
},
|
|
467
634
|
],
|
|
468
635
|
},
|
|
@@ -484,6 +651,7 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
484
651
|
group_by: [{ facet: '@geo.country', limit: 15, sort: { aggregation: 'pc75', metric: '@view.largest_contentful_paint', order: 'desc' } }],
|
|
485
652
|
},
|
|
486
653
|
],
|
|
654
|
+
formulas: [{ formula: 'query1' }],
|
|
487
655
|
},
|
|
488
656
|
],
|
|
489
657
|
},
|
|
@@ -515,6 +683,7 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
515
683
|
group_by: [{ facet: '@browser.name', limit: 10, sort: { aggregation: 'count', order: 'desc' } }],
|
|
516
684
|
},
|
|
517
685
|
],
|
|
686
|
+
formulas: [{ formula: 'query1' }],
|
|
518
687
|
},
|
|
519
688
|
],
|
|
520
689
|
},
|
|
@@ -536,6 +705,7 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
536
705
|
group_by: [{ facet: '@os.name', limit: 10, sort: { aggregation: 'count', order: 'desc' } }],
|
|
537
706
|
},
|
|
538
707
|
],
|
|
708
|
+
formulas: [{ formula: 'query1' }],
|
|
539
709
|
},
|
|
540
710
|
],
|
|
541
711
|
},
|
|
@@ -557,6 +727,7 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
557
727
|
group_by: [{ facet: '@device.type', limit: 10, sort: { aggregation: 'count', order: 'desc' } }],
|
|
558
728
|
},
|
|
559
729
|
],
|
|
730
|
+
formulas: [{ formula: 'query1' }],
|
|
560
731
|
},
|
|
561
732
|
],
|
|
562
733
|
},
|
|
@@ -585,57 +756,13 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
585
756
|
],
|
|
586
757
|
},
|
|
587
758
|
},
|
|
588
|
-
//
|
|
759
|
+
// User Frustration Group
|
|
589
760
|
{
|
|
590
761
|
definition: {
|
|
591
762
|
type: 'group',
|
|
592
763
|
title: 'User Frustration',
|
|
593
764
|
layout_type: 'ordered',
|
|
594
765
|
widgets: [
|
|
595
|
-
{
|
|
596
|
-
definition: {
|
|
597
|
-
type: 'query_value',
|
|
598
|
-
title: 'Frustrated Sessions',
|
|
599
|
-
requests: [
|
|
600
|
-
{
|
|
601
|
-
response_format: 'scalar',
|
|
602
|
-
queries: [
|
|
603
|
-
{
|
|
604
|
-
data_source: 'rum',
|
|
605
|
-
name: 'query1',
|
|
606
|
-
compute: { aggregation: 'cardinality', metric: '@session.id' },
|
|
607
|
-
search: { query: `service:${service} $env @type:error` },
|
|
608
|
-
indexes: ['*'],
|
|
609
|
-
},
|
|
610
|
-
],
|
|
611
|
-
},
|
|
612
|
-
],
|
|
613
|
-
autoscale: true,
|
|
614
|
-
precision: 0,
|
|
615
|
-
},
|
|
616
|
-
},
|
|
617
|
-
{
|
|
618
|
-
definition: {
|
|
619
|
-
type: 'query_value',
|
|
620
|
-
title: 'Rage Clicks',
|
|
621
|
-
requests: [
|
|
622
|
-
{
|
|
623
|
-
response_format: 'scalar',
|
|
624
|
-
queries: [
|
|
625
|
-
{
|
|
626
|
-
data_source: 'rum',
|
|
627
|
-
name: 'query1',
|
|
628
|
-
compute: { aggregation: 'count' },
|
|
629
|
-
search: { query: `service:${service} $env @type:action @action.type:click @action.frustration.type:rage_click` },
|
|
630
|
-
indexes: ['*'],
|
|
631
|
-
},
|
|
632
|
-
],
|
|
633
|
-
},
|
|
634
|
-
],
|
|
635
|
-
autoscale: true,
|
|
636
|
-
precision: 0,
|
|
637
|
-
},
|
|
638
|
-
},
|
|
639
766
|
{
|
|
640
767
|
definition: {
|
|
641
768
|
type: 'timeseries',
|
|
@@ -674,6 +801,7 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
674
801
|
group_by: [{ facet: '@action.name', limit: 15, sort: { aggregation: 'count', order: 'desc' } }],
|
|
675
802
|
},
|
|
676
803
|
],
|
|
804
|
+
formulas: [{ formula: 'query1' }],
|
|
677
805
|
},
|
|
678
806
|
],
|
|
679
807
|
},
|
|
@@ -705,6 +833,7 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
705
833
|
group_by: [{ facet: '@resource.url', limit: 15, sort: { aggregation: 'pc75', metric: '@resource.duration', order: 'desc' } }],
|
|
706
834
|
},
|
|
707
835
|
],
|
|
836
|
+
formulas: [{ formula: 'query1' }],
|
|
708
837
|
},
|
|
709
838
|
],
|
|
710
839
|
},
|
|
@@ -726,6 +855,7 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
726
855
|
group_by: [{ facet: '@resource.url', limit: 15, sort: { aggregation: 'pc75', metric: '@resource.size', order: 'desc' } }],
|
|
727
856
|
},
|
|
728
857
|
],
|
|
858
|
+
formulas: [{ formula: 'query1' }],
|
|
729
859
|
},
|
|
730
860
|
],
|
|
731
861
|
},
|
|
@@ -747,6 +877,7 @@ export function buildDashboardPayload(service, env, team) {
|
|
|
747
877
|
group_by: [{ facet: '@resource.type', limit: 10, sort: { aggregation: 'pc75', metric: '@resource.duration', order: 'desc' } }],
|
|
748
878
|
},
|
|
749
879
|
],
|
|
880
|
+
formulas: [{ formula: 'query1' }],
|
|
750
881
|
},
|
|
751
882
|
],
|
|
752
883
|
},
|