@gravitee/gamma-lib-observability 3.0.0 → 3.0.1
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/INTEGRATION.md +28 -15
- package/USAGE_GUIDE.md +2 -2
- package/dist/dashboards/DashboardView.d.ts +2 -1
- package/dist/dashboards/DashboardView.d.ts.map +1 -1
- package/dist/index.js +927 -927
- package/dist/styles/observability.css +1 -1
- package/package.json +5 -5
package/INTEGRATION.md
CHANGED
|
@@ -29,27 +29,40 @@ This guide walks through integrating the observability library into a Gamma modu
|
|
|
29
29
|
|
|
30
30
|
Your module must provide these packages. They are **not** bundled by the library.
|
|
31
31
|
|
|
32
|
-
| Package | Minimum version | Notes
|
|
33
|
-
| --------------------------- | --------------- |
|
|
34
|
-
| `react` | ^19.0.0 |
|
|
35
|
-
| `react-dom` | ^19.0.0 |
|
|
36
|
-
| `react-router-dom` | ^7.0.0 |
|
|
37
|
-
| `@tanstack/react-query` | ^5.0.0 | Must be a **shared singleton** if using Module Federation
|
|
38
|
-
| `@gravitee/graphene-core` | ^3.
|
|
39
|
-
| `@gravitee/graphene-charts` | ^3.
|
|
40
|
-
| `react-grid-layout` | ^2.0.0 | Required by `@gravitee/graphene-charts/dashboard-grid`. The lib does **not** bundle it.
|
|
41
|
-
| `@xyflow/react` | ^12.0.0 | **Optional.** Only required to render the trace **Lineage** view; lazy-loaded, so apps that never open it can omit it. See [Tracing — Lineage view](#tracing--lineage-view).
|
|
42
|
-
| `tailwindcss` | ^4.0.0 | Optional — only if you compile Tailwind yourself
|
|
32
|
+
| Package | Minimum version | Notes |
|
|
33
|
+
| --------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
34
|
+
| `react` | ^19.0.0 | |
|
|
35
|
+
| `react-dom` | ^19.0.0 | |
|
|
36
|
+
| `react-router-dom` | ^7.0.0 | |
|
|
37
|
+
| `@tanstack/react-query` | ^5.0.0 | Must be a **shared singleton** if using Module Federation |
|
|
38
|
+
| `@gravitee/graphene-core` | ^3.13.0 | Design system primitives (buttons, popovers, tables, icons) |
|
|
39
|
+
| `@gravitee/graphene-charts` | ^3.13.0 | Chart components (dashboard widgets, trace waterfall & lineage). Sub-paths `/dashboard-grid` and `/lineage` are used. **3.13.0 is a floor, not a preference:** it is the first release where the grid height snaps instead of animating while editing, without which a dragged widget outruns the grid box. It also adds the drag-cancel selector the widget header actions rely on. |
|
|
40
|
+
| `react-grid-layout` | ^2.0.0 | Required by `@gravitee/graphene-charts/dashboard-grid`. The lib does **not** bundle it. |
|
|
41
|
+
| `@xyflow/react` | ^12.0.0 | **Optional.** Only required to render the trace **Lineage** view; lazy-loaded, so apps that never open it can omit it. See [Tracing — Lineage view](#tracing--lineage-view). |
|
|
42
|
+
| `tailwindcss` | ^4.0.0 | Optional — only if you compile Tailwind yourself |
|
|
43
43
|
|
|
44
44
|
### Module responsibilities
|
|
45
45
|
|
|
46
46
|
The library follows a **contributor model**: it exports routes, pages, and providers. Your module is responsible for:
|
|
47
47
|
|
|
48
|
-
- Owning the layout shell (sidebar, header, breadcrumbs)
|
|
48
|
+
- Owning the layout shell (sidebar, header, breadcrumbs), and **not clipping it**: see [Layout contract](#layout-contract)
|
|
49
49
|
- Providing a `QueryClientProvider` at the app root (the library does **not** create its own `QueryClient`)
|
|
50
50
|
- Resolving the observability `baseUrl` from module config
|
|
51
51
|
- Defining domain-specific dashboard templates and log column definitions
|
|
52
52
|
|
|
53
|
+
### Layout contract
|
|
54
|
+
|
|
55
|
+
In the **dashboard editor**, the page and not an inner container must own the scroll.
|
|
56
|
+
|
|
57
|
+
While editing, the grid's wrapper deliberately clips on neither axis: a widget dragged below the last row paints outside the wrapper's box and has to stay visible. It cannot simply be scrolled to, because the grid's height tracks the drag placeholder, which the vertical compactor pins to the top of the layout, so the grid never grows to follow the cursor. If an ancestor of the observability routes is a clipping container, the widget is cut off again, which is the bug this contract exists to prevent. Two shapes cause it:
|
|
58
|
+
|
|
59
|
+
- `overflow-x: hidden` (or `scroll`, or `auto`) on the shell. Per [CSS Overflow 3](https://www.w3.org/TR/css-overflow-3/#overflow-properties), a `visible` value on the other axis then computes to `auto`, so a horizontal-only `overflow-x: hidden` shell is a vertical scroll container too. `overflow-x: clip` does **not** do this and is the safe way to clip a single axis.
|
|
60
|
+
- A bounded height (`h-screen` and friends) combined with an inner scroller.
|
|
61
|
+
|
|
62
|
+
Below the grid's 960px minimum width the same rule applies horizontally: while editing, the page must be free to scroll sideways, or part of the grid becomes unreachable.
|
|
63
|
+
|
|
64
|
+
This applies to the editor only. Read mode scrolls inside its own wrapper, and other surfaces such as the log detail drawer and the explorer tables deliberately own bounded inner scrollers.
|
|
65
|
+
|
|
53
66
|
---
|
|
54
67
|
|
|
55
68
|
## Installation
|
|
@@ -136,8 +149,8 @@ shared: {
|
|
|
136
149
|
'react-dom': { singleton: true, requiredVersion: '^19.0.0' },
|
|
137
150
|
'react-router-dom': { singleton: true, requiredVersion: '^7.0.0' },
|
|
138
151
|
'@tanstack/react-query': { singleton: true, requiredVersion: '^5.0.0' },
|
|
139
|
-
'@gravitee/graphene-core': { singleton: true, requiredVersion: '^3.
|
|
140
|
-
'@gravitee/graphene-charts': { singleton: true, requiredVersion: '^3.
|
|
152
|
+
'@gravitee/graphene-core': { singleton: true, requiredVersion: '^3.13.0' },
|
|
153
|
+
'@gravitee/graphene-charts': { singleton: true, requiredVersion: '^3.13.0' },
|
|
141
154
|
'react-grid-layout': { singleton: true, requiredVersion: '^2.0.0' },
|
|
142
155
|
}
|
|
143
156
|
```
|
|
@@ -343,7 +356,7 @@ time bucket.
|
|
|
343
356
|
}
|
|
344
357
|
```
|
|
345
358
|
|
|
346
|
-
- `axisId`: `'left'` (default) or `'right'
|
|
359
|
+
- `axisId`: `'left'` (default) or `'right'`. Dual-axis support is always satisfied by the `^3.13.0` floor.
|
|
347
360
|
- `unit`: optional suffix for tooltips (`1,234 req`, `250 ms`).
|
|
348
361
|
- Omit `axisId` on every series to keep the previous single-axis behaviour.
|
|
349
362
|
|
package/USAGE_GUIDE.md
CHANGED
|
@@ -8,8 +8,8 @@ Your module must provide:
|
|
|
8
8
|
- `react-dom` ^19.0.0
|
|
9
9
|
- `react-router-dom` ^7.0.0
|
|
10
10
|
- `@tanstack/react-query` ^5.0.0
|
|
11
|
-
- `@gravitee/graphene-core` ^3.
|
|
12
|
-
- `@gravitee/graphene-charts` ^3.
|
|
11
|
+
- `@gravitee/graphene-core` ^3.13.0
|
|
12
|
+
- `@gravitee/graphene-charts` ^3.13.0
|
|
13
13
|
|
|
14
14
|
> **Important:** Your module root must wrap with `<QueryClientProvider>`. The lib does not instantiate its own `QueryClient`.
|
|
15
15
|
|
|
@@ -11,7 +11,8 @@ export interface DashboardViewProps {
|
|
|
11
11
|
/**
|
|
12
12
|
* Column counts per breakpoint passed to the underlying grid.
|
|
13
13
|
* Defaults to a fixed 12-column layout at every breakpoint, which prevents
|
|
14
|
-
* layout reflow on narrow viewports (the wrapper scrolls
|
|
14
|
+
* layout reflow on narrow viewports (the wrapper scrolls in read mode, the
|
|
15
|
+
* host page in edit mode).
|
|
15
16
|
* Override if the embedding context benefits from a responsive column count.
|
|
16
17
|
*/
|
|
17
18
|
readonly breakpointCols?: BreakpointCols;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DashboardView.d.ts","sourceRoot":"","sources":["../../src/dashboards/DashboardView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAwB,MAAM,0CAA0C,CAAC;AAIrG,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"DashboardView.d.ts","sourceRoot":"","sources":["../../src/dashboards/DashboardView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAwB,MAAM,0CAA0C,CAAC;AAIrG,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAgCnG,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IAC9C,iIAAiI;IACjI,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,0DAA0D;IAC1D,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;;;OAMG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IACzC,2DAA2D;IAC3D,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,YAAY,CAAC,KAAK,IAAI,CAAC;IAC/E;;;OAGG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7D;;;OAGG;IACH,QAAQ,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;CACvC;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,SAAS,EACT,OAAuB,EACvB,QAAgB,EAChB,SAAS,EACT,cAAwC,EACxC,cAAc,EACd,aAAa,EACb,mBAAmB,GACpB,EAAE,kBAAkB,2CA2EpB"}
|