@odigos/ui-kit 0.0.10 → 0.0.11
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 +8 -0
- package/lib/components/badge/index.d.ts +2 -2
- package/lib/components/data-card/data-card-fields/index.d.ts +14 -14
- package/lib/components/data-card/index.d.ts +2 -2
- package/lib/components/data-tab/index.d.ts +3 -3
- package/lib/components/delete-warning/index.d.ts +2 -2
- package/lib/components/describe-row/index.d.ts +2 -2
- package/lib/components/divider/index.d.ts +2 -2
- package/lib/components/icon-group/index.d.ts +2 -2
- package/lib/components/icon-wrapped/index.d.ts +2 -2
- package/lib/components/interactive-table/index.d.ts +2 -2
- package/lib/components/interactive-table/row.d.ts +2 -2
- package/lib/components/monitors-checkboxes/index.d.ts +4 -4
- package/lib/components/monitors-icons/index.d.ts +2 -2
- package/lib/components/notification-note/index.d.ts +2 -2
- package/lib/components/status/index.d.ts +2 -2
- package/lib/components/stepper/index.d.ts +1 -1
- package/lib/components/warning-modal/index.d.ts +2 -2
- package/lib/components.js +8 -8
- package/lib/constants/strings/index.d.ts +10 -10
- package/lib/constants.js +4 -4
- package/lib/containers/action-drawer/build-card.d.ts +2 -2
- package/lib/containers/action-drawer/index.d.ts +2 -2
- package/lib/containers/action-form/custom-fields/index.d.ts +2 -2
- package/lib/containers/data-flow/edges/labeled-edge.d.ts +2 -2
- package/lib/containers/data-flow/helpers/get-main-container-language.d.ts +2 -2
- package/lib/containers/data-flow/helpers/get-node-positions.d.ts +2 -2
- package/lib/containers/data-flow/nodes/add-node.d.ts +3 -3
- package/lib/containers/data-flow/nodes/base-node.d.ts +5 -5
- package/lib/containers/data-flow/nodes/edged-node.d.ts +2 -2
- package/lib/containers/data-flow/nodes/frame-node.d.ts +2 -2
- package/lib/containers/data-flow/nodes/header-node.d.ts +2 -2
- package/lib/containers/data-flow/nodes/scroll-node.d.ts +5 -5
- package/lib/containers/data-flow/nodes/skeleton-node.d.ts +2 -2
- package/lib/containers/data-flow-actions-menu/index.d.ts +2 -2
- package/lib/containers/data-flow-actions-menu/search/search-results/builder.d.ts +2 -2
- package/lib/containers/destination-drawer/build-card.d.ts +2 -2
- package/lib/containers/destination-form/test-connection/index.d.ts +2 -2
- package/lib/containers/instrumentation-rule-drawer/build-card.d.ts +2 -2
- package/lib/containers/instrumentation-rule-form/custom-fields/index.d.ts +2 -2
- package/lib/containers/side-nav/index.d.ts +8 -8
- package/lib/containers/source-drawer/build-card.d.ts +1 -1
- package/lib/containers.js +341 -340
- package/lib/data/sources/index.d.ts +3 -3
- package/lib/functions/get-action-icon/index.d.ts +2 -2
- package/lib/functions/get-conditions-booleans/index.d.ts +2 -2
- package/lib/functions/get-entity-icon/index.d.ts +2 -2
- package/lib/functions/get-entity-label/index.d.ts +2 -2
- package/lib/functions/get-id-from-sse-target/index.d.ts +2 -2
- package/lib/functions/get-instrumentation-rule-icon/index.d.ts +2 -2
- package/lib/functions/get-metric-for-entity/index.d.ts +2 -2
- package/lib/functions/get-monitor-icon/index.d.ts +2 -2
- package/lib/functions/get-platform-icon/index.d.ts +2 -2
- package/lib/functions/get-platform-label/index.d.ts +2 -2
- package/lib/functions/get-programming-language-icon/index.d.ts +2 -2
- package/lib/functions/get-sse-target-from-id/index.d.ts +2 -2
- package/lib/functions/get-status-icon/index.d.ts +2 -2
- package/lib/functions/index.d.ts +0 -1
- package/lib/functions.js +9 -20
- package/lib/hooks.js +7 -7
- package/lib/icons.js +2 -2
- package/lib/{index-BFct3S32.js → index-7-KCQK-x.js} +2 -2
- package/lib/{index-ixs381n-.js → index-9ObpINp4.js} +4 -4
- package/lib/{index-Do8ODRlA.js → index-B_fzHjxk.js} +87 -92
- package/lib/{index-eF2JXMVR.js → index-BtuW12KL.js} +22 -22
- package/lib/{index-CZe2VX28.js → index-CJKFedQi.js} +31 -31
- package/lib/{index-DB1gmCsH.js → index-CYn62h8x.js} +33 -33
- package/lib/{index-DnmWFsTQ.js → index-C_0J5P9M.js} +10 -10
- package/lib/{index-DIcomki-.js → index-DYEcdkUF.js} +19 -19
- package/lib/{index-BumPE6cF.js → index-Db_ZDrEr.js} +13 -13
- package/lib/store/useDrawerStore.d.ts +2 -2
- package/lib/store/useEntityStore.d.ts +5 -5
- package/lib/store/usePendingStore.d.ts +2 -2
- package/lib/store.js +1 -1
- package/lib/theme.js +1 -1
- package/lib/types/actions/index.d.ts +14 -14
- package/lib/types/common/index.d.ts +80 -76
- package/lib/types/connection/index.d.ts +3 -3
- package/lib/types/data-flow/index.d.ts +15 -15
- package/lib/types/destinations/index.d.ts +2 -2
- package/lib/types/instrumentation-rules/index.d.ts +28 -28
- package/lib/types/signals/index.d.ts +5 -5
- package/lib/types/sources/index.d.ts +7 -7
- package/lib/types.js +164 -159
- package/lib/{useSourceSelectionFormData-CxdOP9FT.js → useSourceSelectionFormData-BnlRp8m3.js} +40 -40
- package/lib/{useTransition-Dfxjcy-C.js → useTransition-CFmm4scp.js} +23 -23
- package/package.json +1 -1
- package/lib/functions/derive-type-from-rule/index.d.ts +0 -2
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React, { useState, useRef, forwardRef, useEffect, createElement, useCallback, useMemo, Fragment, useId } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import './index-
|
|
2
|
+
import { StatusType, OtherStatus, SortDirection, ProgrammingLanguages, EntityTypes } from './types.js';
|
|
3
|
+
import './index-DYEcdkUF.js';
|
|
4
4
|
import styled, { css } from 'styled-components';
|
|
5
5
|
import Theme from './theme.js';
|
|
6
|
-
import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, c as capitalizeFirstLetter, g as getMonitorIcon, p as parseJsonStringToPrettyString, a as getProgrammingLanguageIcon, d as splitCamelString } from './index-
|
|
6
|
+
import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, c as capitalizeFirstLetter, g as getMonitorIcon, p as parseJsonStringToPrettyString, a as getProgrammingLanguageIcon, d as splitCamelString } from './index-CYn62h8x.js';
|
|
7
7
|
import { s as safeJsonParse, i as isEmpty } from './index-BZS1ijMm.js';
|
|
8
8
|
import { M as MinusIcon, f as CheckIcon, L as ListIcon, C as CodeIcon, E as ExtendArrowIcon, I as ImageErrorIcon, c as SortArrowsIcon, a as CopyIcon, b as NotebookIcon, X as XIcon, d as EyeClosedIcon, e as EyeOpenIcon, N as NoDataIcon, g as CrossIcon, S as SearchIcon, T as TrashIcon, P as PlusIcon, A as ArrowIcon } from './index-D_Qn2U89.js';
|
|
9
|
-
import { M as MONITORS_OPTIONS } from './index-
|
|
10
|
-
import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-
|
|
9
|
+
import { M as MONITORS_OPTIONS } from './index-CJKFedQi.js';
|
|
10
|
+
import { u as useContainerSize, a as useCopy, g as useTransition, d as useKeyDown, e as useOnClickOutside } from './useTransition-CFmm4scp.js';
|
|
11
11
|
import ReactDOM from 'react-dom';
|
|
12
12
|
import require$$0 from 'babel-runtime/helpers/extends';
|
|
13
13
|
import require$$1$1 from 'babel-runtime/core-js/object/get-prototype-of';
|
|
@@ -16,7 +16,7 @@ import require$$3 from 'babel-runtime/helpers/createClass';
|
|
|
16
16
|
import require$$4 from 'babel-runtime/helpers/possibleConstructorReturn';
|
|
17
17
|
import require$$5 from 'babel-runtime/helpers/inherits';
|
|
18
18
|
import require$$1 from 'object-assign';
|
|
19
|
-
import { I as InfoIcon } from './index-
|
|
19
|
+
import { I as InfoIcon } from './index-9ObpINp4.js';
|
|
20
20
|
|
|
21
21
|
const TextWrapper$2 = styled.div `
|
|
22
22
|
color: ${({ $color, theme }) => $color || theme.text.secondary};
|
|
@@ -339,7 +339,7 @@ const Button$4 = ({ children, variant = 'primary', onClick, ...props }) => {
|
|
|
339
339
|
const CancelWarning = ({ isOpen, noOverlay, name, onApprove, onDeny }) => {
|
|
340
340
|
return (React.createElement(WarningModal, { isOpen: isOpen, noOverlay: noOverlay, title: `Cancel${name ? ` ${name}` : ''}`, description: 'Are you sure you want to cancel?', approveButton: {
|
|
341
341
|
text: 'Confirm',
|
|
342
|
-
variant:
|
|
342
|
+
variant: StatusType.Warning,
|
|
343
343
|
onClick: onApprove,
|
|
344
344
|
}, denyButton: {
|
|
345
345
|
text: 'Go Back',
|
|
@@ -3737,7 +3737,7 @@ const getComponentsFromPropertyString = (propertyString, theme) => {
|
|
|
3737
3737
|
return React.createElement("div", { key: useId(), style: { width: 16, height: 16 } });
|
|
3738
3738
|
let Icon = getStatusIcon(value, theme);
|
|
3739
3739
|
if (!Icon)
|
|
3740
|
-
Icon = getStatusIcon(
|
|
3740
|
+
Icon = getStatusIcon(StatusType.Warning, theme);
|
|
3741
3741
|
return React.createElement(Icon, { key: useId() });
|
|
3742
3742
|
default:
|
|
3743
3743
|
console.warn('unexpected component type!', type);
|
|
@@ -3965,15 +3965,15 @@ const ExtendArrow = ({ extend, size = 14, align = 'center' }) => {
|
|
|
3965
3965
|
|
|
3966
3966
|
const Container$q = styled.div `
|
|
3967
3967
|
border-radius: 24px;
|
|
3968
|
-
background-color: ${({ theme, $status }) => $status ===
|
|
3968
|
+
background-color: ${({ theme, $status }) => $status === StatusType.Error
|
|
3969
3969
|
? theme.text.error + Theme.opacity.hex['010']
|
|
3970
|
-
: $status ===
|
|
3970
|
+
: $status === StatusType.Warning
|
|
3971
3971
|
? theme.text.warning + Theme.opacity.hex['010']
|
|
3972
3972
|
: theme.colors.secondary + Theme.opacity.hex['005']};
|
|
3973
3973
|
&:hover {
|
|
3974
|
-
background-color: ${({ theme, $status }) => $status ===
|
|
3974
|
+
background-color: ${({ theme, $status }) => $status === StatusType.Error
|
|
3975
3975
|
? theme.text.error + Theme.opacity.hex['020']
|
|
3976
|
-
: $status ===
|
|
3976
|
+
: $status === StatusType.Warning
|
|
3977
3977
|
? theme.text.warning + Theme.opacity.hex['020']
|
|
3978
3978
|
: theme.colors.secondary + Theme.opacity.hex['010']};
|
|
3979
3979
|
}
|
|
@@ -4004,19 +4004,19 @@ const ConditionDetails = ({ conditions: c, headerLabelError = 'Something Failed'
|
|
|
4004
4004
|
const theme = Theme.useTheme();
|
|
4005
4005
|
const [extend, setExtend] = useState(false);
|
|
4006
4006
|
const conditions = mapConditions(c);
|
|
4007
|
-
const errors = useMemo(() => conditions.filter(({ status }) => status ===
|
|
4007
|
+
const errors = useMemo(() => conditions.filter(({ status }) => status === StatusType.Error), [conditions]);
|
|
4008
4008
|
const hasErrors = !!errors.length;
|
|
4009
|
-
const warnings = useMemo(() => conditions.filter(({ status }) => status ===
|
|
4009
|
+
const warnings = useMemo(() => conditions.filter(({ status }) => status === StatusType.Warning), [conditions]);
|
|
4010
4010
|
const hasWarnings = !!warnings.length;
|
|
4011
|
-
const disableds = useMemo(() => conditions.filter(({ status }) => status ===
|
|
4011
|
+
const disableds = useMemo(() => conditions.filter(({ status }) => status === OtherStatus.Disabled), [conditions]);
|
|
4012
4012
|
const hasDisableds = !!disableds.length;
|
|
4013
|
-
const loadings = useMemo(() => conditions.filter(({ status }) => status ===
|
|
4013
|
+
const loadings = useMemo(() => conditions.filter(({ status }) => status === OtherStatus.Loading), [conditions]);
|
|
4014
4014
|
const hasLoadings = !!loadings.length;
|
|
4015
4015
|
const loading = (!conditions.length || hasLoadings) && !hasErrors && !hasWarnings && !hasDisableds;
|
|
4016
4016
|
useEffect(() => {
|
|
4017
4017
|
setExtend(hasErrors || hasWarnings || hasDisableds || hasLoadings);
|
|
4018
4018
|
}, [hasErrors, hasWarnings, hasDisableds, hasLoadings]);
|
|
4019
|
-
const overallStatus = hasErrors ?
|
|
4019
|
+
const overallStatus = hasErrors ? StatusType.Error : hasWarnings ? StatusType.Warning : hasDisableds ? StatusType.Info : StatusType.Success;
|
|
4020
4020
|
const HeaderIcon = getStatusIcon(overallStatus, theme);
|
|
4021
4021
|
const headerText = hasErrors ? headerLabelError : hasWarnings ? headerLabelWarning : hasDisableds ? headerLabelWarning : loading ? 'Loading...' : headerLabelSuccess;
|
|
4022
4022
|
const headerTextColor = hasErrors ? theme.text.error : hasWarnings ? theme.text.warning : theme.text.info;
|
|
@@ -4030,13 +4030,13 @@ const ConditionDetails = ({ conditions: c, headerLabelError = 'Something Failed'
|
|
|
4030
4030
|
React.createElement(Text, { color: headerSubTextColor, size: 12, family: 'secondary' }, headerSubText),
|
|
4031
4031
|
React.createElement(ExtendArrow, { extend: extend, align: 'right' })),
|
|
4032
4032
|
extend && (React.createElement(Body, null, conditions.map(({ status, type, reason, message, lastTransitionTime }, idx) => {
|
|
4033
|
-
const Icon = status === 'loading' ? () => React.createElement(FadeLoader, { scale: 0.8 }) : status === 'disabled' ? getStatusIcon(
|
|
4034
|
-
const color = status === 'disabled' ? theme.text.info : status ===
|
|
4033
|
+
const Icon = status === 'loading' ? () => React.createElement(FadeLoader, { scale: 0.8 }) : status === 'disabled' ? getStatusIcon(StatusType.Info, theme) : getStatusIcon(status, theme);
|
|
4034
|
+
const color = status === 'disabled' ? theme.text.info : status === StatusType.Error ? theme.text.error : status === StatusType.Warning ? theme.text.warning : theme.text.info;
|
|
4035
4035
|
const boldColor = status === 'disabled'
|
|
4036
4036
|
? theme.text.info_secondary
|
|
4037
|
-
: status ===
|
|
4037
|
+
: status === StatusType.Error
|
|
4038
4038
|
? theme.text.error_secondary
|
|
4039
|
-
: status ===
|
|
4039
|
+
: status === StatusType.Warning
|
|
4040
4040
|
? theme.text.warning_secondary
|
|
4041
4041
|
: theme.text.info_secondary;
|
|
4042
4042
|
return (React.createElement(Row$1, { key: `condition-${idx}` },
|
|
@@ -4077,10 +4077,10 @@ const TextWrapper$1 = styled.div `
|
|
|
4077
4077
|
display: flex;
|
|
4078
4078
|
align-items: center;
|
|
4079
4079
|
`;
|
|
4080
|
-
const Status = ({ title, subtitle, size = 12, family = 'secondary', status =
|
|
4080
|
+
const Status = ({ title, subtitle, size = 12, family = 'secondary', status = StatusType.Default, withIcon, withBorder, withBackground }) => {
|
|
4081
4081
|
const theme = Theme.useTheme();
|
|
4082
|
-
const statusType = status ===
|
|
4083
|
-
const StatusIcon = status ===
|
|
4082
|
+
const statusType = status === OtherStatus.Loading ? StatusType.Info : status;
|
|
4083
|
+
const StatusIcon = status === OtherStatus.Loading ? () => React.createElement(FadeLoader, { scale: 0.8 }) : () => getStatusIcon(statusType, theme)({ size: size + 2 });
|
|
4084
4084
|
return (React.createElement(Container$p, { "$size": size, "$status": statusType, "$withIcon": withIcon, "$withBorder": withBorder, "$withBackground": withBackground },
|
|
4085
4085
|
withIcon && (React.createElement(IconWrapper$4, null,
|
|
4086
4086
|
React.createElement(StatusIcon, null))),
|
|
@@ -4312,7 +4312,7 @@ const DataTab = ({ title, subTitle, icon, icons, iconSrc, iconSrcs, hoverText, s
|
|
|
4312
4312
|
return null;
|
|
4313
4313
|
return (React.createElement(React.Fragment, null,
|
|
4314
4314
|
withSeperator && React.createElement(SubTitle$2, null, '•'),
|
|
4315
|
-
React.createElement(Status, { status: isActive ?
|
|
4315
|
+
React.createElement(Status, { status: isActive ? StatusType.Success : StatusType.Error, size: 10 })));
|
|
4316
4316
|
};
|
|
4317
4317
|
return (React.createElement(Container$m, { ref: containerRef, "$status": status, "$faded": faded, "$withClick": !!onClick, onClick: onClick, ...props },
|
|
4318
4318
|
React.createElement(FlexRow, { "$gap": 8 },
|
|
@@ -4367,7 +4367,7 @@ const DescribeRow = ({ title, subTitle, tooltip, value }) => {
|
|
|
4367
4367
|
React.createElement(Tooltip, { text: tooltip || '' },
|
|
4368
4368
|
title && React.createElement(Title$a, null, title),
|
|
4369
4369
|
subTitle && React.createElement(SubTitle$1, null, subTitle))),
|
|
4370
|
-
React.createElement(ValueWrapper, null, !!value?.status ? (React.createElement(Status, { status: value.status === 'transitioning' ?
|
|
4370
|
+
React.createElement(ValueWrapper, null, !!value?.status ? (React.createElement(Status, { status: value.status === 'transitioning' ? OtherStatus.Loading : value.status, title: value.text || value.status, withBorder: true, withIcon: true })) : (React.createElement(ValueText, null, value?.text || '-')))));
|
|
4371
4371
|
};
|
|
4372
4372
|
|
|
4373
4373
|
const TableRow = styled.tr `
|
|
@@ -4468,21 +4468,16 @@ const Title$9 = styled(Text) `
|
|
|
4468
4468
|
text-wrap: nowrap;
|
|
4469
4469
|
`;
|
|
4470
4470
|
const TableBody = styled.tbody ``;
|
|
4471
|
-
var SORT_DIRECTION;
|
|
4472
|
-
(function (SORT_DIRECTION) {
|
|
4473
|
-
SORT_DIRECTION["ASC"] = "asc";
|
|
4474
|
-
SORT_DIRECTION["DESC"] = "desc";
|
|
4475
|
-
})(SORT_DIRECTION || (SORT_DIRECTION = {}));
|
|
4476
4471
|
const InteractiveTable = ({ columns, rows, onRowClick }) => {
|
|
4477
|
-
const [sortDirection, setSortDirection] = useState(
|
|
4472
|
+
const [sortDirection, setSortDirection] = useState(SortDirection.Ascending);
|
|
4478
4473
|
const [sortBy, setSortBy] = useState('name');
|
|
4479
4474
|
const onSort = useCallback((key) => {
|
|
4480
4475
|
if (sortBy === key) {
|
|
4481
|
-
setSortDirection((prev) => (prev ===
|
|
4476
|
+
setSortDirection((prev) => (prev === SortDirection.Ascending ? SortDirection.Descending : SortDirection.Ascending));
|
|
4482
4477
|
}
|
|
4483
4478
|
else {
|
|
4484
4479
|
setSortBy(key);
|
|
4485
|
-
setSortDirection(
|
|
4480
|
+
setSortDirection(SortDirection.Ascending);
|
|
4486
4481
|
}
|
|
4487
4482
|
}, [sortBy]);
|
|
4488
4483
|
const sorted = useMemo(() => {
|
|
@@ -4503,7 +4498,7 @@ const InteractiveTable = ({ columns, rows, onRowClick }) => {
|
|
|
4503
4498
|
? [...rows].sort((a, b) => {
|
|
4504
4499
|
const valueA = getCellValue(a, sortBy);
|
|
4505
4500
|
const valueB = getCellValue(b, sortBy);
|
|
4506
|
-
const direction = sortDirection ===
|
|
4501
|
+
const direction = sortDirection === SortDirection.Ascending ? 1 : -1;
|
|
4507
4502
|
return direction * compareValues(valueA, valueB);
|
|
4508
4503
|
})
|
|
4509
4504
|
: rows;
|
|
@@ -4517,20 +4512,20 @@ const InteractiveTable = ({ columns, rows, onRowClick }) => {
|
|
|
4517
4512
|
React.createElement(TableBody, null, sorted.map(({ status, faded, cells }, i) => (React.createElement(Row, { key: `row-${i}`, index: i, columns: columns, cells: cells, onClick: !!onRowClick ? () => onRowClick(i) : undefined, status: status, faded: faded })))))));
|
|
4518
4513
|
};
|
|
4519
4514
|
|
|
4520
|
-
var
|
|
4521
|
-
(function (
|
|
4522
|
-
|
|
4523
|
-
|
|
4524
|
-
|
|
4525
|
-
|
|
4526
|
-
|
|
4527
|
-
|
|
4528
|
-
|
|
4529
|
-
|
|
4530
|
-
|
|
4531
|
-
|
|
4532
|
-
|
|
4533
|
-
})(
|
|
4515
|
+
var DataCardFieldTypes;
|
|
4516
|
+
(function (DataCardFieldTypes) {
|
|
4517
|
+
DataCardFieldTypes["Code"] = "code";
|
|
4518
|
+
DataCardFieldTypes["Table"] = "table";
|
|
4519
|
+
DataCardFieldTypes["Badge"] = "badge";
|
|
4520
|
+
DataCardFieldTypes["Loader"] = "loader";
|
|
4521
|
+
DataCardFieldTypes["Divider"] = "divider";
|
|
4522
|
+
DataCardFieldTypes["Monitors"] = "monitors";
|
|
4523
|
+
DataCardFieldTypes["CopyText"] = "copy-text";
|
|
4524
|
+
DataCardFieldTypes["DescribeRow"] = "describe-row";
|
|
4525
|
+
DataCardFieldTypes["ActiveStatus"] = "active-status";
|
|
4526
|
+
DataCardFieldTypes["PodContainer"] = "pod-container";
|
|
4527
|
+
DataCardFieldTypes["SourceContainer"] = "source-container";
|
|
4528
|
+
})(DataCardFieldTypes || (DataCardFieldTypes = {}));
|
|
4534
4529
|
const ListContainer$3 = styled.div `
|
|
4535
4530
|
display: flex;
|
|
4536
4531
|
flex-wrap: wrap;
|
|
@@ -4570,60 +4565,60 @@ const CopyWrapper = styled(FlexRow) `
|
|
|
4570
4565
|
}
|
|
4571
4566
|
`;
|
|
4572
4567
|
const DataCardFields = ({ data }) => {
|
|
4573
|
-
return (React.createElement(ListContainer$3, null, data.map(({ type, title, tooltip, value }, idx) => (React.createElement(ListItem, { key: `data-field-${title || (!!value ? JSON.stringify(value) : idx)}`, "$width": !!type && [
|
|
4568
|
+
return (React.createElement(ListContainer$3, null, data.map(({ type, title, tooltip, value }, idx) => (React.createElement(ListItem, { key: `data-field-${title || (!!value ? JSON.stringify(value) : idx)}`, "$width": !!type && [DataCardFieldTypes.Code, DataCardFieldTypes.Table].includes(type)
|
|
4574
4569
|
? 'inherit'
|
|
4575
4570
|
: !!type &&
|
|
4576
4571
|
[
|
|
4577
|
-
|
|
4578
|
-
|
|
4579
|
-
|
|
4580
|
-
|
|
4581
|
-
|
|
4582
|
-
|
|
4572
|
+
DataCardFieldTypes.Loader,
|
|
4573
|
+
DataCardFieldTypes.Divider,
|
|
4574
|
+
DataCardFieldTypes.CopyText,
|
|
4575
|
+
DataCardFieldTypes.DescribeRow,
|
|
4576
|
+
DataCardFieldTypes.PodContainer,
|
|
4577
|
+
DataCardFieldTypes.SourceContainer,
|
|
4583
4578
|
].includes(type)
|
|
4584
4579
|
? '100%'
|
|
4585
4580
|
: 'unset' },
|
|
4586
4581
|
React.createElement(Tooltip, { text: tooltip, withIcon: true }, !!title && React.createElement(ItemTitle, null, title)),
|
|
4587
4582
|
renderValue(type, value))))));
|
|
4588
4583
|
};
|
|
4589
|
-
// We need to maintain this with new components every time we add a new type to "
|
|
4584
|
+
// We need to maintain this with new components every time we add a new type to "DataCardFieldTypes"
|
|
4590
4585
|
const renderValue = (type, value) => {
|
|
4591
4586
|
const theme = Theme.useTheme();
|
|
4592
4587
|
const { clickCopy, isCopied } = useCopy();
|
|
4593
4588
|
switch (type) {
|
|
4594
|
-
case
|
|
4589
|
+
case DataCardFieldTypes.Divider: {
|
|
4595
4590
|
return React.createElement(Divider, { length: '100%', margin: '0' });
|
|
4596
4591
|
}
|
|
4597
|
-
case
|
|
4592
|
+
case DataCardFieldTypes.Loader: {
|
|
4598
4593
|
return (React.createElement(CenterThis, null,
|
|
4599
4594
|
React.createElement(FadeLoader, { scale: 1.2 })));
|
|
4600
4595
|
}
|
|
4601
|
-
case
|
|
4596
|
+
case DataCardFieldTypes.Monitors: {
|
|
4602
4597
|
return React.createElement(MonitorsIcons, { monitors: value?.split(', ') || [], withLabels: true, color: theme.colors.secondary });
|
|
4603
4598
|
}
|
|
4604
|
-
case
|
|
4599
|
+
case DataCardFieldTypes.Badge: {
|
|
4605
4600
|
const params = safeJsonParse(value, { label: '-', filled: false });
|
|
4606
4601
|
return React.createElement(Badge, { ...params });
|
|
4607
4602
|
}
|
|
4608
|
-
case
|
|
4603
|
+
case DataCardFieldTypes.Code: {
|
|
4609
4604
|
const params = safeJsonParse(value, { language: '', code: '' });
|
|
4610
4605
|
return React.createElement(Code, { ...params });
|
|
4611
4606
|
}
|
|
4612
|
-
case
|
|
4607
|
+
case DataCardFieldTypes.DescribeRow: {
|
|
4613
4608
|
const params = safeJsonParse(value, { title: '', subTitle: '', tooltip: '', value: { text: undefined, status: undefined } });
|
|
4614
4609
|
return React.createElement(DescribeRow, { ...params });
|
|
4615
4610
|
}
|
|
4616
|
-
case
|
|
4611
|
+
case DataCardFieldTypes.Table: {
|
|
4617
4612
|
const params = safeJsonParse(value, {
|
|
4618
4613
|
columns: [],
|
|
4619
4614
|
rows: [{ status: undefined, cells: [] }],
|
|
4620
4615
|
});
|
|
4621
4616
|
return React.createElement(InteractiveTable, { ...params });
|
|
4622
4617
|
}
|
|
4623
|
-
case
|
|
4624
|
-
return React.createElement(Status, { status: value == 'true' ?
|
|
4618
|
+
case DataCardFieldTypes.ActiveStatus: {
|
|
4619
|
+
return React.createElement(Status, { status: value == 'true' ? StatusType.Success : StatusType.Error, title: value == 'true' ? 'Active' : 'Inactive', size: 10, withIcon: true, withBorder: true });
|
|
4625
4620
|
}
|
|
4626
|
-
case
|
|
4621
|
+
case DataCardFieldTypes.CopyText: {
|
|
4627
4622
|
const str = typeof value === 'string' ? value : JSON.stringify(value);
|
|
4628
4623
|
return (React.createElement(CopyWrapper, null,
|
|
4629
4624
|
React.createElement(IconButton, { onClick: (e) => {
|
|
@@ -4632,41 +4627,41 @@ const renderValue = (type, value) => {
|
|
|
4632
4627
|
}, tooltip: isCopied ? 'Copied!' : 'Copy' }, isCopied ? React.createElement(CheckIcon, null) : React.createElement(CopyIcon, null)),
|
|
4633
4628
|
React.createElement("pre", null, str)));
|
|
4634
4629
|
}
|
|
4635
|
-
case
|
|
4630
|
+
case DataCardFieldTypes.PodContainer: {
|
|
4636
4631
|
const { containerName, actualDevice, processes } = safeJsonParse(value, {
|
|
4637
4632
|
containerName: '',
|
|
4638
4633
|
actualDevice: { title: '', subTitle: '', tooltip: '' },
|
|
4639
|
-
processes: [{ health:
|
|
4634
|
+
processes: [{ health: StatusType.Info, message: '', identifyingAttributes: [] }],
|
|
4640
4635
|
});
|
|
4641
4636
|
return (React.createElement(DataTab, { title: containerName, subTitle: `${processes.length} Instrumented Processes`, renderActions: () => {
|
|
4642
|
-
return React.createElement(Status, { status:
|
|
4637
|
+
return React.createElement(Status, { status: StatusType.Info, title: 'Instrumentation Device', subtitle: !actualDevice.subTitle || actualDevice.subTitle === '[]' ? 'none' : actualDevice.subTitle, withBorder: true });
|
|
4643
4638
|
}, isExtended: !!processes.length, renderExtended: () => {
|
|
4644
4639
|
return (React.createElement(FlexColStretched, { "$gap": 24 }, processes.map((process, idx) => (React.createElement(FlexColStretched, { key: `process-${idx}`, "$gap": 8 },
|
|
4645
4640
|
React.createElement(DescribeRow, { title: `Instrumented Process #${idx + 1}`, subTitle: process.message || '', value: {
|
|
4646
|
-
text: process.health ===
|
|
4641
|
+
text: process.health === StatusType.Success ? 'healthy' : 'unhealthy',
|
|
4647
4642
|
status: process.health,
|
|
4648
4643
|
} }),
|
|
4649
4644
|
process.identifyingAttributes.map(({ name, value }) => (React.createElement(DescribeRow, { key: useId(), title: name, subTitle: '', value: { text: value, status: undefined } }))))))));
|
|
4650
4645
|
} }));
|
|
4651
4646
|
}
|
|
4652
|
-
case
|
|
4647
|
+
case DataCardFieldTypes.SourceContainer: {
|
|
4653
4648
|
const { containerName, language, runtimeVersion, instrumented, instrumentationMessage, otelDistroName } = safeJsonParse(value, {
|
|
4654
4649
|
containerName: '',
|
|
4655
|
-
language:
|
|
4650
|
+
language: ProgrammingLanguages.Unknown,
|
|
4656
4651
|
runtimeVersion: '',
|
|
4657
4652
|
instrumented: false,
|
|
4658
4653
|
instrumentationMessage: '',
|
|
4659
4654
|
otelDistroName: '',
|
|
4660
4655
|
});
|
|
4661
4656
|
const awaitingInstrumentation = !instrumented && !instrumentationMessage;
|
|
4662
|
-
return (React.createElement(DataTab, { title: containerName, subTitle: `${language ===
|
|
4657
|
+
return (React.createElement(DataTab, { title: containerName, subTitle: `${language === ProgrammingLanguages.JavaScript ? 'Node.js' : capitalizeFirstLetter(language)}` + (!!runtimeVersion ? ` • Runtime Version: ${runtimeVersion}` : ''), icon: getProgrammingLanguageIcon(language), isExtended: !!instrumentationMessage, renderExtended: () => {
|
|
4663
4658
|
if (!!instrumentationMessage) {
|
|
4664
4659
|
return (React.createElement(AlignCenter, null,
|
|
4665
|
-
React.createElement(Status, { status:
|
|
4660
|
+
React.createElement(Status, { status: StatusType.Info, title: splitCamelString(instrumentationMessage) })));
|
|
4666
4661
|
}
|
|
4667
4662
|
return null;
|
|
4668
4663
|
}, renderActions: () => {
|
|
4669
|
-
return (React.createElement(Status, { status: instrumented ?
|
|
4664
|
+
return (React.createElement(Status, { status: instrumented ? StatusType.Success : awaitingInstrumentation ? StatusType.Warning : StatusType.Error, title: instrumented ? 'Instrumented' : awaitingInstrumentation ? 'Instrumenting...' : 'Uninstrumented', subtitle: otelDistroName, withIcon: true, withBorder: true }));
|
|
4670
4665
|
} }));
|
|
4671
4666
|
}
|
|
4672
4667
|
default: {
|
|
@@ -4725,10 +4720,10 @@ const DataCard = ({ title = 'Details', titleBadge, description, action: Action,
|
|
|
4725
4720
|
};
|
|
4726
4721
|
|
|
4727
4722
|
const DeleteWarning = ({ isOpen, noOverlay, name, type, isLastItem, onApprove, onDeny }) => {
|
|
4728
|
-
const actionText = type ===
|
|
4723
|
+
const actionText = type === EntityTypes.Source ? 'uninstrument' : 'delete';
|
|
4729
4724
|
return (React.createElement(WarningModal, { isOpen: isOpen, noOverlay: noOverlay, title: `${actionText.charAt(0).toUpperCase() + actionText.substring(1)}${name ? ` ${name}` : ''}`, description: `Are you sure you want to ${actionText}?`, note: isLastItem
|
|
4730
4725
|
? {
|
|
4731
|
-
type:
|
|
4726
|
+
type: StatusType.Warning,
|
|
4732
4727
|
title: `You're about to ${actionText} the last ${type || name}`,
|
|
4733
4728
|
message: '',
|
|
4734
4729
|
}
|
|
@@ -6032,12 +6027,12 @@ const SkeletonLoader = ({ size = 5, maxWidth }) => {
|
|
|
6032
6027
|
React.createElement(Line, { "$width": '100%' })))))));
|
|
6033
6028
|
};
|
|
6034
6029
|
|
|
6035
|
-
var
|
|
6036
|
-
(function (
|
|
6037
|
-
|
|
6038
|
-
|
|
6039
|
-
|
|
6040
|
-
})(
|
|
6030
|
+
var StepState;
|
|
6031
|
+
(function (StepState) {
|
|
6032
|
+
StepState["Active"] = "active";
|
|
6033
|
+
StepState["Disabled"] = "disabled";
|
|
6034
|
+
StepState["Finished"] = "finish";
|
|
6035
|
+
})(StepState || (StepState = {}));
|
|
6041
6036
|
const Container$4 = styled.div `
|
|
6042
6037
|
display: flex;
|
|
6043
6038
|
flex-direction: column;
|
|
@@ -6047,7 +6042,7 @@ const Step = styled.div `
|
|
|
6047
6042
|
display: flex;
|
|
6048
6043
|
gap: 16px;
|
|
6049
6044
|
padding: 8px;
|
|
6050
|
-
opacity: ${({ $state }) => ($state ===
|
|
6045
|
+
opacity: ${({ $state }) => ($state === StepState.Active ? 1 : $state === StepState.Disabled ? 0.5 : 0.8)};
|
|
6051
6046
|
transition: all 0.3s;
|
|
6052
6047
|
`;
|
|
6053
6048
|
const IconWrapper = styled(FlexRow) `
|
|
@@ -6055,8 +6050,8 @@ const IconWrapper = styled(FlexRow) `
|
|
|
6055
6050
|
width: 24px;
|
|
6056
6051
|
height: 24px;
|
|
6057
6052
|
border-radius: 32px;
|
|
6058
|
-
border: ${({ theme, $state }) => ($state ===
|
|
6059
|
-
opacity: ${({ $state }) => ($state ===
|
|
6053
|
+
border: ${({ theme, $state }) => ($state === StepState.Disabled ? `1px dashed ${theme.text.dark_grey}` : `1px solid ${theme.colors.secondary}`)};
|
|
6054
|
+
opacity: ${({ $state }) => ($state === StepState.Finished ? 0.8 : 1)};
|
|
6060
6055
|
`;
|
|
6061
6056
|
const Content$1 = styled(FlexColumn) `
|
|
6062
6057
|
justify-content: center;
|
|
@@ -6069,18 +6064,18 @@ const Stepper = ({ data, currentStep = 0 }) => {
|
|
|
6069
6064
|
useEffect(() => {
|
|
6070
6065
|
setStepsList(data.map((step, i) => {
|
|
6071
6066
|
if (i < currentStep - 1) {
|
|
6072
|
-
return { ...step, state:
|
|
6067
|
+
return { ...step, state: StepState.Finished, subtitle: 'Success' };
|
|
6073
6068
|
}
|
|
6074
6069
|
else if (i === currentStep - 1) {
|
|
6075
|
-
return { ...step, state:
|
|
6070
|
+
return { ...step, state: StepState.Active };
|
|
6076
6071
|
}
|
|
6077
6072
|
else {
|
|
6078
|
-
return { ...step, state:
|
|
6073
|
+
return { ...step, state: StepState.Disabled };
|
|
6079
6074
|
}
|
|
6080
6075
|
}));
|
|
6081
6076
|
}, [currentStep, data]);
|
|
6082
6077
|
return (React.createElement(Container$4, null, stepsList.map((step, index) => (React.createElement(Step, { key: index, "$state": step.state },
|
|
6083
|
-
React.createElement(IconWrapper, { "$state": step.state }, [
|
|
6078
|
+
React.createElement(IconWrapper, { "$state": step.state }, [StepState.Active, StepState.Disabled].includes(step.state) ? React.createElement(Text, { size: 12 }, step.stepNumber) : step.state === StepState.Finished ? React.createElement(CheckIcon, { size: 20 }) : null),
|
|
6084
6079
|
React.createElement(Content$1, null,
|
|
6085
6080
|
React.createElement(Title$1, { family: 'secondary' }, step.title),
|
|
6086
6081
|
step.subtitle && (React.createElement(Subtitle, { size: 10, weight: 300 }, step.subtitle))))))));
|
|
@@ -29594,4 +29589,4 @@ const WarningModal = ({ isOpen, noOverlay, title = '', description = '', note, a
|
|
|
29594
29589
|
React.createElement(FooterButton, { "data-id": 'deny', variant: denyButton.variant || 'secondary', onClick: onDeny }, denyButton.text)))));
|
|
29595
29590
|
};
|
|
29596
29591
|
|
|
29597
|
-
export { FlexColumn as $, AutocompleteInput as A, Button$4 as B, CancelWarning as C, DataCard as D, ExtendArrow as E, FadeLoader as F, MonitorsIcons as G, Header as H, IconButton as I, NoDataFound as J, KeyValueInputsList as K, NotificationNote as L, Modal as M, NavigationButtons as N, Segment as O, SkeletonLoader as P, Status as Q, Stepper as R, SectionTitle as S, ToggleCodeComponent as T, Text as U, TextArea as V, Toggle as W, Tooltip as X, TraceLoader as Y, WarningModal as Z, FlexRow as _, Badge as a, CenterThis as a0, Overlay as a1, ModalBody as a2, TableContainer as a3, TableTitleWrap as a4, TableWrap as a5, getDefaultExportFromCjs as a6, Checkbox as b, Code as c, ConditionDetails as d, DataCardFields as e,
|
|
29592
|
+
export { FlexColumn as $, AutocompleteInput as A, Button$4 as B, CancelWarning as C, DataCard as D, ExtendArrow as E, FadeLoader as F, MonitorsIcons as G, Header as H, IconButton as I, NoDataFound as J, KeyValueInputsList as K, NotificationNote as L, Modal as M, NavigationButtons as N, Segment as O, SkeletonLoader as P, Status as Q, Stepper as R, SectionTitle as S, ToggleCodeComponent as T, Text as U, TextArea as V, Toggle as W, Tooltip as X, TraceLoader as Y, WarningModal as Z, FlexRow as _, Badge as a, CenterThis as a0, Overlay as a1, ModalBody as a2, TableContainer as a3, TableTitleWrap as a4, TableWrap as a5, getDefaultExportFromCjs as a6, Checkbox as b, Code as c, ConditionDetails as d, DataCardFields as e, DataCardFieldTypes as f, DataTab as g, DeleteWarning as h, Divider as i, DocsButton as j, Drawer as k, DrawerHeader as l, DrawerFooter as m, Dropdown as n, FieldError as o, FieldLabel as p, IconGroup as q, IconTitleBadge as r, IconWrapped as s, IconsNav as t, ImageControlled as u, Input as v, InputList as w, InputTable as x, InteractiveTable as y, MonitorsCheckboxes as z };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { a as getProgrammingLanguageIcon } from './index-
|
|
1
|
+
import { StatusType, OtherStatus, EntityTypes, PlatformType } from './types.js';
|
|
2
|
+
import { a as getProgrammingLanguageIcon } from './index-CYn62h8x.js';
|
|
3
3
|
import 'react';
|
|
4
|
-
import './index-
|
|
4
|
+
import './index-DYEcdkUF.js';
|
|
5
5
|
import 'styled-components';
|
|
6
6
|
import { R as RulesIcon, A as ActionsIcon, D as DestinationsIcon, S as SourcesIcon, V as VmLogo } from './index-BjJpYtF1.js';
|
|
7
7
|
import { O as OdigosLogo, K as K8sLogo } from './index-BGlk5VhF.js';
|
|
@@ -61,7 +61,7 @@ const filterSources = (sources, filters) => {
|
|
|
61
61
|
if (!!filters.languages?.length)
|
|
62
62
|
filtered = filtered.filter((source) => !!filters.languages?.find((language) => !!source.containers?.find((cont) => cont.language === language.id)));
|
|
63
63
|
if (!!filters.onlyErrors)
|
|
64
|
-
filtered = filtered.filter((source) => !!source.conditions?.find((cond) => cond.status ===
|
|
64
|
+
filtered = filtered.filter((source) => !!source.conditions?.find((cond) => cond.status === StatusType.Error));
|
|
65
65
|
if (!!filters.errors?.length)
|
|
66
66
|
filtered = filtered.filter((source) => !!filters.errors?.find((error) => !!source.conditions?.find((cond) => cond.message === error.id)));
|
|
67
67
|
return filtered;
|
|
@@ -77,11 +77,11 @@ const formatBytes = (bytes) => {
|
|
|
77
77
|
};
|
|
78
78
|
|
|
79
79
|
const getConditionsBooleans = (conditions) => {
|
|
80
|
-
const hasErrors = !!conditions?.find(({ status }) => status ===
|
|
81
|
-
const hasWarnings = !!conditions?.find(({ status }) => status ===
|
|
82
|
-
const hasDisableds = !!conditions?.find(({ status }) => status ===
|
|
83
|
-
const hasLoadings = !!conditions?.find(({ status }) => status ===
|
|
84
|
-
const priorotizedStatus = hasErrors ?
|
|
80
|
+
const hasErrors = !!conditions?.find(({ status }) => status === StatusType.Error);
|
|
81
|
+
const hasWarnings = !!conditions?.find(({ status }) => status === StatusType.Warning);
|
|
82
|
+
const hasDisableds = !!conditions?.find(({ status }) => status === OtherStatus.Disabled);
|
|
83
|
+
const hasLoadings = !!conditions?.find(({ status }) => status === OtherStatus.Loading);
|
|
84
|
+
const priorotizedStatus = hasErrors ? StatusType.Error : hasWarnings ? StatusType.Warning : hasDisableds ? StatusType.Info : undefined;
|
|
85
85
|
return {
|
|
86
86
|
hasErrors,
|
|
87
87
|
hasWarnings,
|
|
@@ -104,10 +104,10 @@ const getContainersIcons = (containers) => {
|
|
|
104
104
|
|
|
105
105
|
const getEntityIcon = (type) => {
|
|
106
106
|
const LOGOS = {
|
|
107
|
-
[
|
|
108
|
-
[
|
|
109
|
-
[
|
|
110
|
-
[
|
|
107
|
+
[EntityTypes.Source]: SourcesIcon,
|
|
108
|
+
[EntityTypes.Destination]: DestinationsIcon,
|
|
109
|
+
[EntityTypes.Action]: ActionsIcon,
|
|
110
|
+
[EntityTypes.InstrumentationRule]: RulesIcon,
|
|
111
111
|
};
|
|
112
112
|
return LOGOS[type];
|
|
113
113
|
};
|
|
@@ -117,22 +117,22 @@ const getEntityLabel = (entity, entityType, options) => {
|
|
|
117
117
|
let type = '';
|
|
118
118
|
let name = '';
|
|
119
119
|
switch (entityType) {
|
|
120
|
-
case
|
|
120
|
+
case EntityTypes.InstrumentationRule:
|
|
121
121
|
const rule = entity;
|
|
122
122
|
type = rule.type;
|
|
123
123
|
name = rule.ruleName;
|
|
124
124
|
break;
|
|
125
|
-
case
|
|
125
|
+
case EntityTypes.Source:
|
|
126
126
|
const source = entity;
|
|
127
127
|
type = source.name;
|
|
128
128
|
name = source.otelServiceName;
|
|
129
129
|
break;
|
|
130
|
-
case
|
|
130
|
+
case EntityTypes.Action:
|
|
131
131
|
const action = entity;
|
|
132
132
|
type = action.type;
|
|
133
133
|
name = action.spec.actionName;
|
|
134
134
|
break;
|
|
135
|
-
case
|
|
135
|
+
case EntityTypes.Destination:
|
|
136
136
|
const destination = entity;
|
|
137
137
|
type = destination.destinationType.displayName;
|
|
138
138
|
name = destination.name;
|
|
@@ -147,7 +147,7 @@ const getEntityLabel = (entity, entityType, options) => {
|
|
|
147
147
|
};
|
|
148
148
|
|
|
149
149
|
const getMetricForEntity = (metrics, entityType, entityId) => {
|
|
150
|
-
const metric = entityType ===
|
|
150
|
+
const metric = entityType === EntityTypes.Source
|
|
151
151
|
? metrics?.sources.find((m) => m.kind === entityId.kind && m.name === entityId.name && m.namespace === entityId.namespace)
|
|
152
152
|
: metrics?.destinations.find((m) => m.id === entityId);
|
|
153
153
|
return metric || { throughput: 0 };
|
|
@@ -157,8 +157,8 @@ const getPlatformIcon = (type) => {
|
|
|
157
157
|
if (!type)
|
|
158
158
|
return OdigosLogo;
|
|
159
159
|
const LOGOS = {
|
|
160
|
-
[
|
|
161
|
-
[
|
|
160
|
+
[PlatformType.K8s]: K8sLogo,
|
|
161
|
+
[PlatformType.Vm]: VmLogo,
|
|
162
162
|
};
|
|
163
163
|
return LOGOS[type];
|
|
164
164
|
};
|
|
@@ -167,8 +167,8 @@ const getPlatformLabel = (type) => {
|
|
|
167
167
|
if (!type)
|
|
168
168
|
return 'Unknown';
|
|
169
169
|
const LABELS = {
|
|
170
|
-
[
|
|
171
|
-
[
|
|
170
|
+
[PlatformType.K8s]: 'Kubernetes Cluster',
|
|
171
|
+
[PlatformType.Vm]: 'Virtual Machine',
|
|
172
172
|
};
|
|
173
173
|
return LABELS[type];
|
|
174
174
|
};
|