@odigos/ui-kit 0.0.94 → 0.0.95
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/CHANGELOG.md +7 -0
- package/lib/containers.js +8 -9
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.0.95](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.94...ui-kit-v0.0.95) (2025-08-26)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* **trace-view:** update DurationDivider positioning ([#354](https://github.com/odigos-io/ui-kit/issues/354)) ([e86078b](https://github.com/odigos-io/ui-kit/commit/e86078b56c767cb2876b1b2325bd97b93fe04b3d))
|
|
9
|
+
|
|
3
10
|
## [0.0.94](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.93...ui-kit-v0.0.94) (2025-08-25)
|
|
4
11
|
|
|
5
12
|
|
package/lib/containers.js
CHANGED
|
@@ -5245,11 +5245,11 @@ const Left = styled(FlexRow) `
|
|
|
5245
5245
|
width: calc(${LEFT_MAX_WIDTH}px - ${({ $depth }) => $depth * 12}px);
|
|
5246
5246
|
`;
|
|
5247
5247
|
const Right = styled(FlexRow) `
|
|
5248
|
-
position: absolute;
|
|
5249
|
-
right: 64px;
|
|
5250
5248
|
align-items: center;
|
|
5251
5249
|
gap: 4px;
|
|
5252
|
-
|
|
5250
|
+
position: absolute;
|
|
5251
|
+
right: 56px;
|
|
5252
|
+
width: calc(100% - ${LEFT_MAX_WIDTH + 64}px);
|
|
5253
5253
|
`;
|
|
5254
5254
|
const DurationBar = styled.div `
|
|
5255
5255
|
position: absolute;
|
|
@@ -5343,9 +5343,8 @@ const DurationDivider = styled.div `
|
|
|
5343
5343
|
height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove}px + 2px)`};
|
|
5344
5344
|
background: ${({ theme }) => `linear-gradient(to bottom, ${theme.colors.border}, transparent)`};
|
|
5345
5345
|
|
|
5346
|
-
position:
|
|
5347
|
-
left: calc(${LEFT_MAX_WIDTH
|
|
5348
|
-
z-index: -1;
|
|
5346
|
+
position: absolute;
|
|
5347
|
+
left: calc(${LEFT_MAX_WIDTH}px + ((100% - ${LEFT_MAX_WIDTH}px) / ${NUM_OF_DURATION_DIVIDERS}) * ${({ index }) => index});
|
|
5349
5348
|
`;
|
|
5350
5349
|
const DurationTitle = styled(Text) `
|
|
5351
5350
|
color: ${({ theme }) => theme.text.darker_grey};
|
|
@@ -5370,6 +5369,8 @@ const TraceView = ({ heightToRemove, traces }) => {
|
|
|
5370
5369
|
return (React.createElement(Container, { "$heightToRemove": heightToRemove }, finalTraces.length ? (React.createElement(ContainSpans, { "$heightToRemove": heightToRemove },
|
|
5371
5370
|
React.createElement(ContainTitle, null,
|
|
5372
5371
|
React.createElement(Text, null, "Service & operation")),
|
|
5372
|
+
new Array(NUM_OF_DURATION_DIVIDERS).fill(null).map((_, i) => (React.createElement(DurationDivider, { key: `${i}-divider`, "$heightToRemove": heightToRemove, index: i },
|
|
5373
|
+
React.createElement(DurationTitle, null, formatDuration((maxDuration / NUM_OF_DURATION_DIVIDERS) * i))))),
|
|
5373
5374
|
finalTraces.map((trace, i) => {
|
|
5374
5375
|
const { spans } = trace;
|
|
5375
5376
|
// is equal CSS left: 0%;
|
|
@@ -5380,9 +5381,7 @@ const TraceView = ({ heightToRemove, traces }) => {
|
|
|
5380
5381
|
value: openSpanIds,
|
|
5381
5382
|
set: setOpenSpanIds,
|
|
5382
5383
|
} }));
|
|
5383
|
-
}),
|
|
5384
|
-
new Array(NUM_OF_DURATION_DIVIDERS).fill(null).map((_, i) => (React.createElement(DurationDivider, { key: `${i}-divider`, "$heightToRemove": heightToRemove, index: i },
|
|
5385
|
-
React.createElement(DurationTitle, null, formatDuration((maxDuration / NUM_OF_DURATION_DIVIDERS) * i))))))) : (React.createElement(CenterThis, { "$height": '50vh' },
|
|
5384
|
+
}))) : (React.createElement(CenterThis, { "$height": '50vh' },
|
|
5386
5385
|
React.createElement(NoDataFound, { title: DISPLAY_TITLES.NO_TRACES_FOUND, subTitle: DISPLAY_TITLES.ARE_SERVICES_INSTRUMENTED_AND_PRODUCING_TRAFFIC })))));
|
|
5387
5386
|
};
|
|
5388
5387
|
|