@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
package/lib/containers.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef, useMemo, useId, memo, useContext, createContext, useCallback, useLayoutEffect, Fragment } from 'react';
|
|
2
2
|
import styled, { css } from 'styled-components';
|
|
3
|
-
import { A as ACTION_OPTIONS, M as MONITORS_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-
|
|
4
|
-
import { D as DISPLAY_TITLES, F as FORM_ALERTS } from './index-
|
|
5
|
-
import {
|
|
6
|
-
import { f as
|
|
7
|
-
import { g as usePendingStore, f as useNotificationStore, a as useDrawerStore, b as useEntityStore, e as useModalStore, c as useFilterStore, s as styleInject, h as useSelectedStore, d as useInstrumentStore, k as getEntityId, i as useSetupStore, u as useDarkMode } from './index-
|
|
3
|
+
import { A as ACTION_OPTIONS, M as MONITORS_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-CJKFedQi.js';
|
|
4
|
+
import { D as DISPLAY_TITLES, F as FORM_ALERTS } from './index-C_0J5P9M.js';
|
|
5
|
+
import { ActionType, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, AddNodeTypes, EdgeTypes, FieldTypes, SignalType, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType } from './types.js';
|
|
6
|
+
import { f as DataCardFieldTypes, p as FieldLabel, b as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, U as Text, O as Segment, S as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, V as TextArea, k as Drawer, h as DeleteWarning, C as CancelWarning, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a2 as ModalBody, A as AutocompleteInput, i as Divider, Q as Status, _ as FlexRow, X as Tooltip, s as IconWrapped, G as MonitorsIcons, a3 as TableContainer, a4 as TableTitleWrap, r as IconTitleBadge, a5 as TableWrap, y as InteractiveTable, a0 as CenterThis, J as NoDataFound, $ as FlexColumn, Y as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a6 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, P as SkeletonLoader, W as Toggle, L as NotificationNote, R as Stepper, I as IconButton, e as DataCardFields, t as IconsNav, q as IconGroup } from './index-B_fzHjxk.js';
|
|
7
|
+
import { g as usePendingStore, f as useNotificationStore, a as useDrawerStore, b as useEntityStore, e as useModalStore, c as useFilterStore, s as styleInject, h as useSelectedStore, d as useInstrumentStore, k as getEntityId, i as useSetupStore, u as useDarkMode } from './index-DYEcdkUF.js';
|
|
8
8
|
import Theme from './theme.js';
|
|
9
9
|
import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
|
|
10
|
-
import { i as CheckCircledIcon, h as ErrorTriangleIcon, W as WarningTriangleIcon } from './index-
|
|
10
|
+
import { i as CheckCircledIcon, h as ErrorTriangleIcon, W as WarningTriangleIcon } from './index-9ObpINp4.js';
|
|
11
11
|
import { C as CrossCircledIcon, E as EditIcon, O as OdigosLogoText, b as OverviewIcon, F as FilterIcon, N as NotificationIcon, S as SlackLogo, a as FolderIcon, K as KeyIcon, T as TerminalIcon } from './index-3KUV6Vlt.js';
|
|
12
|
-
import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-
|
|
13
|
-
import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-
|
|
14
|
-
import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-
|
|
12
|
+
import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-Db_ZDrEr.js';
|
|
13
|
+
import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-BnlRp8m3.js';
|
|
14
|
+
import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-CFmm4scp.js';
|
|
15
15
|
import { T as TrashIcon, S as SearchIcon, P as PlusIcon$1, A as ArrowIcon, a as CopyIcon, f as CheckIcon, g as CrossIcon } from './index-D_Qn2U89.js';
|
|
16
|
-
import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-
|
|
17
|
-
import { f as filterActions, g as getConditionsBooleans, j as getEntityLabel, i as getEntityIcon, s as sleep$1, l as getPlatformIcon, m as getPlatformLabel, d as formatBytes, h as getContainersIcons, n as getValueForRange, b as filterSources, a as filterDestinations, c as compareCondition, k as getMetricForEntity, e as getContainersInstrumentedCount, o as isOverTime } from './index-
|
|
16
|
+
import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-CYn62h8x.js';
|
|
17
|
+
import { f as filterActions, g as getConditionsBooleans, j as getEntityLabel, i as getEntityIcon, s as sleep$1, l as getPlatformIcon, m as getPlatformLabel, d as formatBytes, h as getContainersIcons, n as getValueForRange, b as filterSources, a as filterDestinations, c as compareCondition, k as getMetricForEntity, e as getContainersInstrumentedCount, o as isOverTime } from './index-BtuW12KL.js';
|
|
18
18
|
import require$$1 from 'use-sync-external-store/shim';
|
|
19
19
|
import { createPortal } from 'react-dom';
|
|
20
20
|
import { O as OdigosLogo } from './index-BGlk5VhF.js';
|
|
@@ -26,24 +26,24 @@ import 'babel-runtime/helpers/createClass';
|
|
|
26
26
|
import 'babel-runtime/helpers/possibleConstructorReturn';
|
|
27
27
|
import 'babel-runtime/helpers/inherits';
|
|
28
28
|
import 'object-assign';
|
|
29
|
-
import './index-
|
|
29
|
+
import './index-7-KCQK-x.js';
|
|
30
30
|
|
|
31
31
|
const buildCard$3 = (action) => {
|
|
32
32
|
const { type, spec: { actionName, notes, signals, disabled, collectContainerAttributes, collectWorkloadId, collectClusterId, labelsAttributes, annotationsAttributes, clusterAttributes, attributeNamesToDelete, renames, piiCategories, fallbackSamplingRatio, samplingPercentage, endpointsFilters, }, } = action;
|
|
33
33
|
const arr = [
|
|
34
34
|
{ title: DISPLAY_TITLES.TYPE, value: type },
|
|
35
|
-
{ type:
|
|
36
|
-
{ type:
|
|
35
|
+
{ type: DataCardFieldTypes.ActiveStatus, title: DISPLAY_TITLES.STATUS, value: String(!disabled) },
|
|
36
|
+
{ type: DataCardFieldTypes.Monitors, title: DISPLAY_TITLES.SIGNALS_FOR_PROCESSING, value: signals.map((str) => str.toLowerCase()).join(', ') },
|
|
37
37
|
{ title: DISPLAY_TITLES.NAME, value: actionName },
|
|
38
38
|
{ title: DISPLAY_TITLES.NOTES, value: notes },
|
|
39
|
-
{ type:
|
|
39
|
+
{ type: DataCardFieldTypes.Divider },
|
|
40
40
|
];
|
|
41
|
-
if (type ===
|
|
41
|
+
if (type === ActionType.K8sAttributes) {
|
|
42
42
|
arr.push({ title: 'Collect Container Attributes', value: String(collectContainerAttributes) });
|
|
43
43
|
arr.push({ title: 'Collect Workload ID', value: String(collectWorkloadId) });
|
|
44
44
|
arr.push({ title: 'Collect Cluster ID', value: String(collectClusterId) });
|
|
45
45
|
if (!!labelsAttributes?.length)
|
|
46
|
-
arr.push({ type:
|
|
46
|
+
arr.push({ type: DataCardFieldTypes.Divider });
|
|
47
47
|
labelsAttributes?.forEach(({ labelKey, attributeKey }, idx) => {
|
|
48
48
|
let str = '';
|
|
49
49
|
str += `Label Key: ${labelKey}\n`;
|
|
@@ -51,7 +51,7 @@ const buildCard$3 = (action) => {
|
|
|
51
51
|
arr.push({ title: `Label${labelsAttributes.length > 1 ? ` #${idx + 1}` : ''}`, value: str });
|
|
52
52
|
});
|
|
53
53
|
if (!!annotationsAttributes?.length)
|
|
54
|
-
arr.push({ type:
|
|
54
|
+
arr.push({ type: DataCardFieldTypes.Divider });
|
|
55
55
|
annotationsAttributes?.forEach(({ annotationKey, attributeKey }, idx) => {
|
|
56
56
|
let str = '';
|
|
57
57
|
str += `Annotation Key: ${annotationKey}\n`;
|
|
@@ -59,7 +59,7 @@ const buildCard$3 = (action) => {
|
|
|
59
59
|
arr.push({ title: `Annotation${annotationsAttributes.length > 1 ? ` #${idx + 1}` : ''}`, value: str });
|
|
60
60
|
});
|
|
61
61
|
}
|
|
62
|
-
if (type ===
|
|
62
|
+
if (type === ActionType.AddClusterInfo) {
|
|
63
63
|
let str = '';
|
|
64
64
|
clusterAttributes?.forEach(({ attributeName, attributeStringValue }, idx) => {
|
|
65
65
|
str += `${attributeName}: ${attributeStringValue}`;
|
|
@@ -68,7 +68,7 @@ const buildCard$3 = (action) => {
|
|
|
68
68
|
});
|
|
69
69
|
arr.push({ title: 'Attributes', value: str });
|
|
70
70
|
}
|
|
71
|
-
if (type ===
|
|
71
|
+
if (type === ActionType.DeleteAttributes) {
|
|
72
72
|
let str = '';
|
|
73
73
|
attributeNamesToDelete?.forEach((attributeName, idx) => {
|
|
74
74
|
str += attributeName;
|
|
@@ -77,7 +77,7 @@ const buildCard$3 = (action) => {
|
|
|
77
77
|
});
|
|
78
78
|
arr.push({ title: 'Attributes', value: str });
|
|
79
79
|
}
|
|
80
|
-
if (type ===
|
|
80
|
+
if (type === ActionType.RenameAttributes) {
|
|
81
81
|
let str = '';
|
|
82
82
|
const entries = Object.entries(renames || {});
|
|
83
83
|
entries.forEach(([oldName, newName], idx) => {
|
|
@@ -87,7 +87,7 @@ const buildCard$3 = (action) => {
|
|
|
87
87
|
});
|
|
88
88
|
arr.push({ title: 'Attributes', value: str });
|
|
89
89
|
}
|
|
90
|
-
if (type ===
|
|
90
|
+
if (type === ActionType.PiiMasking) {
|
|
91
91
|
let str = '';
|
|
92
92
|
piiCategories?.forEach((attributeName, idx) => {
|
|
93
93
|
str += attributeName;
|
|
@@ -96,13 +96,13 @@ const buildCard$3 = (action) => {
|
|
|
96
96
|
});
|
|
97
97
|
arr.push({ title: 'Categories', value: str });
|
|
98
98
|
}
|
|
99
|
-
if (type ===
|
|
99
|
+
if (type === ActionType.ErrorSampler) {
|
|
100
100
|
arr.push({ title: 'Sampling Ratio', value: String(fallbackSamplingRatio) });
|
|
101
101
|
}
|
|
102
|
-
if (type ===
|
|
102
|
+
if (type === ActionType.ProbabilisticSampler) {
|
|
103
103
|
arr.push({ title: 'Sampling Percentage', value: String(samplingPercentage) });
|
|
104
104
|
}
|
|
105
|
-
if (type ===
|
|
105
|
+
if (type === ActionType.LatencySampler) {
|
|
106
106
|
endpointsFilters?.forEach(({ serviceName, httpRoute, minimumLatencyThreshold, fallbackSamplingRatio }, idx) => {
|
|
107
107
|
let str = '';
|
|
108
108
|
str += `Service Name: ${serviceName}\n`;
|
|
@@ -291,14 +291,14 @@ const ProbabilisticSampler = ({ value, setValue, formErrors }) => {
|
|
|
291
291
|
};
|
|
292
292
|
|
|
293
293
|
const componentsMap$1 = {
|
|
294
|
-
[
|
|
295
|
-
[
|
|
296
|
-
[
|
|
297
|
-
[
|
|
298
|
-
[
|
|
299
|
-
[
|
|
300
|
-
[
|
|
301
|
-
[
|
|
294
|
+
[ActionType.K8sAttributes]: K8sAttributes,
|
|
295
|
+
[ActionType.AddClusterInfo]: AddClusterInfo,
|
|
296
|
+
[ActionType.DeleteAttributes]: DeleteAttributes,
|
|
297
|
+
[ActionType.RenameAttributes]: RenameAttributes,
|
|
298
|
+
[ActionType.PiiMasking]: PiiMasking,
|
|
299
|
+
[ActionType.ErrorSampler]: ErrorSampler,
|
|
300
|
+
[ActionType.ProbabilisticSampler]: ProbabilisticSampler,
|
|
301
|
+
[ActionType.LatencySampler]: LatencySampler,
|
|
302
302
|
};
|
|
303
303
|
const CustomFields$1 = ({ actionType, value, setValue, formErrors }) => {
|
|
304
304
|
if (!actionType)
|
|
@@ -341,7 +341,7 @@ const OverviewDrawer = ({ children, width = 640, title, titleTooltip, icon, icon
|
|
|
341
341
|
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
|
342
342
|
const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
|
|
343
343
|
const titleRef = useRef(null);
|
|
344
|
-
const isSource = drawerType ===
|
|
344
|
+
const isSource = drawerType === EntityTypes.Source;
|
|
345
345
|
const closeDrawer = () => {
|
|
346
346
|
setDrawerType(null);
|
|
347
347
|
setDrawerEntityId(null);
|
|
@@ -391,7 +391,7 @@ const OverviewDrawer = ({ children, width = 640, title, titleTooltip, icon, icon
|
|
|
391
391
|
}, [drawerType, drawerEntityId]);
|
|
392
392
|
const handlePending = (action) => {
|
|
393
393
|
addNotification({
|
|
394
|
-
type:
|
|
394
|
+
type: StatusType.Warning,
|
|
395
395
|
title: 'Pending',
|
|
396
396
|
message: `Cannot click ${action}, ${drawerType} is pending`,
|
|
397
397
|
hideFromHistory: true,
|
|
@@ -483,7 +483,7 @@ const DataContainer$3 = styled.div `
|
|
|
483
483
|
const ActionDrawer = ({ updateAction, deleteAction }) => {
|
|
484
484
|
const { actions } = useEntityStore();
|
|
485
485
|
const { drawerType, drawerEntityId, setDrawerEntityId, setDrawerType } = useDrawerStore();
|
|
486
|
-
const isOpen = drawerType !==
|
|
486
|
+
const isOpen = drawerType !== EntityTypes.Action;
|
|
487
487
|
const onClose = () => {
|
|
488
488
|
setDrawerType(null);
|
|
489
489
|
setDrawerEntityId(null);
|
|
@@ -521,7 +521,7 @@ const ActionDrawer = ({ updateAction, deleteAction }) => {
|
|
|
521
521
|
onClose();
|
|
522
522
|
};
|
|
523
523
|
const handleSave = (newTitle) => {
|
|
524
|
-
if (validateForm({ withAlert: true, alertTitle:
|
|
524
|
+
if (validateForm({ withAlert: true, alertTitle: Crud.Update })) {
|
|
525
525
|
const title = newTitle !== thisItem.type ? newTitle : '';
|
|
526
526
|
handleFormChange('name', title);
|
|
527
527
|
updateAction(drawerEntityId, { ...formData, name: title });
|
|
@@ -540,7 +540,7 @@ const ActionDrawer = ({ updateAction, deleteAction }) => {
|
|
|
540
540
|
|
|
541
541
|
const ActionModal = ({ createAction }) => {
|
|
542
542
|
const { currentModal, setCurrentModal } = useModalStore();
|
|
543
|
-
const isOpen = currentModal ===
|
|
543
|
+
const isOpen = currentModal === EntityTypes.Action;
|
|
544
544
|
const { formData, formErrors, handleFormChange, resetFormData, validateForm } = useActionFormData();
|
|
545
545
|
const [selectedItem, setSelectedItem] = useState(undefined);
|
|
546
546
|
const handleClose = () => {
|
|
@@ -554,7 +554,7 @@ const ActionModal = ({ createAction }) => {
|
|
|
554
554
|
setSelectedItem(item);
|
|
555
555
|
};
|
|
556
556
|
const handleSubmit = () => {
|
|
557
|
-
const isFormOk = validateForm({ withAlert: true, alertTitle:
|
|
557
|
+
const isFormOk = validateForm({ withAlert: true, alertTitle: Crud.Create });
|
|
558
558
|
if (!isFormOk)
|
|
559
559
|
return null;
|
|
560
560
|
createAction(formData);
|
|
@@ -580,7 +580,7 @@ const ActionModal = ({ createAction }) => {
|
|
|
580
580
|
const buildSpecCell$1 = (action) => {
|
|
581
581
|
const { type, spec: { collectContainerAttributes, collectWorkloadId, collectClusterId, labelsAttributes, annotationsAttributes, clusterAttributes, attributeNamesToDelete, renames, piiCategories, fallbackSamplingRatio, samplingPercentage, endpointsFilters, }, } = action;
|
|
582
582
|
let str = '';
|
|
583
|
-
if (type ===
|
|
583
|
+
if (type === ActionType.K8sAttributes) {
|
|
584
584
|
if (collectContainerAttributes)
|
|
585
585
|
str += 'Container Attributes, ';
|
|
586
586
|
if (collectWorkloadId)
|
|
@@ -596,21 +596,21 @@ const buildSpecCell$1 = (action) => {
|
|
|
596
596
|
;
|
|
597
597
|
});
|
|
598
598
|
}
|
|
599
|
-
if (type ===
|
|
599
|
+
if (type === ActionType.AddClusterInfo) {
|
|
600
600
|
clusterAttributes?.forEach(({ attributeName, attributeStringValue }, idx) => {
|
|
601
601
|
str += `${attributeName}: ${attributeStringValue}`;
|
|
602
602
|
if (idx < clusterAttributes.length - 1)
|
|
603
603
|
str += ', ';
|
|
604
604
|
});
|
|
605
605
|
}
|
|
606
|
-
if (type ===
|
|
606
|
+
if (type === ActionType.DeleteAttributes) {
|
|
607
607
|
attributeNamesToDelete?.forEach((attributeName, idx) => {
|
|
608
608
|
str += attributeName;
|
|
609
609
|
if (idx < attributeNamesToDelete.length - 1)
|
|
610
610
|
str += ', ';
|
|
611
611
|
});
|
|
612
612
|
}
|
|
613
|
-
if (type ===
|
|
613
|
+
if (type === ActionType.RenameAttributes) {
|
|
614
614
|
const entries = Object.entries(renames || {});
|
|
615
615
|
entries.forEach(([oldName, newName], idx) => {
|
|
616
616
|
str += `${oldName}: ${newName}`;
|
|
@@ -618,21 +618,21 @@ const buildSpecCell$1 = (action) => {
|
|
|
618
618
|
str += ', ';
|
|
619
619
|
});
|
|
620
620
|
}
|
|
621
|
-
if (type ===
|
|
621
|
+
if (type === ActionType.PiiMasking) {
|
|
622
622
|
piiCategories?.forEach((attributeName, idx) => {
|
|
623
623
|
str += attributeName;
|
|
624
624
|
if (idx < piiCategories.length - 1)
|
|
625
625
|
str += ', ';
|
|
626
626
|
});
|
|
627
627
|
}
|
|
628
|
-
if (type ===
|
|
628
|
+
if (type === ActionType.ErrorSampler) {
|
|
629
629
|
str += String(fallbackSamplingRatio);
|
|
630
630
|
}
|
|
631
|
-
if (type ===
|
|
631
|
+
if (type === ActionType.ProbabilisticSampler) {
|
|
632
632
|
str += String(samplingPercentage);
|
|
633
633
|
str += '%';
|
|
634
634
|
}
|
|
635
|
-
if (type ===
|
|
635
|
+
if (type === ActionType.LatencySampler) {
|
|
636
636
|
endpointsFilters?.forEach(({ serviceName, httpRoute, minimumLatencyThreshold, fallbackSamplingRatio }, idx) => {
|
|
637
637
|
str += `Endpoint${endpointsFilters.length > 1 ? ` #${idx + 1}` : ''}=${serviceName}${httpRoute}`;
|
|
638
638
|
str += ` Latency=${minimumLatencyThreshold}`;
|
|
@@ -645,17 +645,17 @@ const buildSpecCell$1 = (action) => {
|
|
|
645
645
|
};
|
|
646
646
|
|
|
647
647
|
const TableCellConditions = ({ conditions }) => {
|
|
648
|
-
const errors = useMemo(() => conditions?.filter(({ status }) => status ===
|
|
649
|
-
const warnings = useMemo(() => conditions?.filter(({ status }) => status ===
|
|
650
|
-
const disableds = useMemo(() => conditions?.filter(({ status }) => status ===
|
|
651
|
-
const isLoading = useMemo(() => !conditions?.length || !!conditions?.find(({ status }) => status ===
|
|
652
|
-
return (React.createElement("div", { style: { lineHeight: 1 } }, errors.length > 0 ? (React.createElement(ConditionsStatuses, { conditions: errors })) : warnings.length > 0 ? (React.createElement(ConditionsStatuses, { conditions: warnings })) : disableds.length > 0 ? (React.createElement(ConditionsStatuses, { conditions: disableds })) : isLoading ? (React.createElement(Status, { status:
|
|
648
|
+
const errors = useMemo(() => conditions?.filter(({ status }) => status === StatusType.Error) || [], [conditions]);
|
|
649
|
+
const warnings = useMemo(() => conditions?.filter(({ status }) => status === StatusType.Warning) || [], [conditions]);
|
|
650
|
+
const disableds = useMemo(() => conditions?.filter(({ status }) => status === OtherStatus.Disabled) || [], [conditions]);
|
|
651
|
+
const isLoading = useMemo(() => !conditions?.length || !!conditions?.find(({ status }) => status === OtherStatus.Loading), [conditions]);
|
|
652
|
+
return (React.createElement("div", { style: { lineHeight: 1 } }, errors.length > 0 ? (React.createElement(ConditionsStatuses, { conditions: errors })) : warnings.length > 0 ? (React.createElement(ConditionsStatuses, { conditions: warnings })) : disableds.length > 0 ? (React.createElement(ConditionsStatuses, { conditions: disableds })) : isLoading ? (React.createElement(Status, { status: OtherStatus.Loading, title: OtherStatus.Loading, withBorder: true, withIcon: true })) : (React.createElement(Status, { status: StatusType.Success, title: StatusType.Success, withBorder: true, withIcon: true }))));
|
|
653
653
|
};
|
|
654
654
|
const ConditionsStatuses = ({ conditions }) => {
|
|
655
655
|
const theme = Theme.useTheme();
|
|
656
656
|
return (React.createElement(FlexRow, null, mapConditions(conditions).map(({ status, type, reason, message, lastTransitionTime }) => {
|
|
657
657
|
if (status === 'loading' || status === 'disabled')
|
|
658
|
-
status =
|
|
658
|
+
status = StatusType.Info;
|
|
659
659
|
const icon = getStatusIcon(status, theme);
|
|
660
660
|
return (React.createElement(Tooltip, { key: useId(), titleIcon: icon, title: type, text: message || reason || '', timestamp: lastTransitionTime },
|
|
661
661
|
React.createElement(Status, { status: status, title: reason || type, withBorder: true, withIcon: true })));
|
|
@@ -665,7 +665,7 @@ const ConditionsStatuses = ({ conditions }) => {
|
|
|
665
665
|
const columns$3 = [
|
|
666
666
|
{ key: 'icon', title: '' },
|
|
667
667
|
{ key: 'name', title: DISPLAY_TITLES.NAME, sortable: true },
|
|
668
|
-
{ key: 'signals', title: DISPLAY_TITLES.
|
|
668
|
+
{ key: 'signals', title: DISPLAY_TITLES.Monitors },
|
|
669
669
|
{ key: 'active-status', title: DISPLAY_TITLES.STATUS },
|
|
670
670
|
{ key: 'conditions', title: 'Conditions' },
|
|
671
671
|
{ key: 'type', title: DISPLAY_TITLES.TYPE, sortable: true },
|
|
@@ -681,7 +681,7 @@ const ActionTable = ({ maxHeight, maxWidth }) => {
|
|
|
681
681
|
const rows = useMemo(() => filtered.map((act) => {
|
|
682
682
|
const { hasErrors, hasWarnings, hasDisableds } = getConditionsBooleans(act.conditions || []);
|
|
683
683
|
return {
|
|
684
|
-
status: hasErrors ?
|
|
684
|
+
status: hasErrors ? StatusType.Error : hasWarnings ? StatusType.Warning : undefined,
|
|
685
685
|
faded: hasDisableds,
|
|
686
686
|
cells: [
|
|
687
687
|
{
|
|
@@ -690,7 +690,7 @@ const ActionTable = ({ maxHeight, maxWidth }) => {
|
|
|
690
690
|
},
|
|
691
691
|
{
|
|
692
692
|
columnKey: 'name',
|
|
693
|
-
value: getEntityLabel(act,
|
|
693
|
+
value: getEntityLabel(act, EntityTypes.Action, { prioritizeDisplayName: true }),
|
|
694
694
|
},
|
|
695
695
|
{
|
|
696
696
|
columnKey: 'type',
|
|
@@ -720,7 +720,7 @@ const ActionTable = ({ maxHeight, maxWidth }) => {
|
|
|
720
720
|
{
|
|
721
721
|
columnKey: 'active-status',
|
|
722
722
|
component: () => (React.createElement("div", { style: { lineHeight: 1 } },
|
|
723
|
-
React.createElement(Status, { status: act.spec.disabled ?
|
|
723
|
+
React.createElement(Status, { status: act.spec.disabled ? StatusType.Error : StatusType.Success, title: act.spec.disabled ? 'Inactive' : 'Active', withIcon: true, withBorder: true }))),
|
|
724
724
|
},
|
|
725
725
|
],
|
|
726
726
|
};
|
|
@@ -729,10 +729,10 @@ const ActionTable = ({ maxHeight, maxWidth }) => {
|
|
|
729
729
|
const badgeTooltip = useMemo(() => (filtered.length !== actions.length ? DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP : undefined), [filtered, actions]);
|
|
730
730
|
return (React.createElement(TableContainer, { "$maxWidth": maxWidth },
|
|
731
731
|
React.createElement(TableTitleWrap, null,
|
|
732
|
-
React.createElement(IconTitleBadge, { icon: getEntityIcon(
|
|
732
|
+
React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Action), title: DISPLAY_TITLES.Actions, badge: badge, badgeTooltip: badgeTooltip, loading: actionsLoading })),
|
|
733
733
|
React.createElement(TableWrap, { "$maxHeight": maxHeight },
|
|
734
734
|
React.createElement(InteractiveTable, { columns: columns$3, rows: rows, onRowClick: (idx) => {
|
|
735
|
-
setDrawerType(
|
|
735
|
+
setDrawerType(EntityTypes.Action);
|
|
736
736
|
setDrawerEntityId(filtered[idx].id);
|
|
737
737
|
} })),
|
|
738
738
|
!filtered.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
|
|
@@ -896,13 +896,13 @@ const ComputePlatformSelect = ({ connections, selected, onSelect, onViewAll }) =
|
|
|
896
896
|
isOpen && withSelect && (React.createElement(AbsoluteContainer$2, null,
|
|
897
897
|
React.createElement(HeadWrap, null,
|
|
898
898
|
React.createElement(Input, { placeholder: 'Search...', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value.toLowerCase()) })),
|
|
899
|
-
React.createElement(VerticalScroll$1, { style: { maxHeight: '240px' } }, filtered.map(({ id, type, name, status }, idx) => (React.createElement(SelectionButton, { key: `platform-${id}`, icon: () => getPlatformIcon(type)({ fill: status ===
|
|
900
|
-
if (status ===
|
|
899
|
+
React.createElement(VerticalScroll$1, { style: { maxHeight: '240px' } }, filtered.map(({ id, type, name, status }, idx) => (React.createElement(SelectionButton, { key: `platform-${id}`, icon: () => getPlatformIcon(type)({ fill: status === StatusType.Success ? theme.text.success : theme.text.error }), label: `${!!name ? name : getPlatformLabel(type)} (${id})`, isSelected: selected?.id === id, onClick: () => {
|
|
900
|
+
if (status === StatusType.Success) {
|
|
901
901
|
onSelect(filtered[idx]);
|
|
902
902
|
}
|
|
903
903
|
else {
|
|
904
904
|
addNotification({
|
|
905
|
-
type:
|
|
905
|
+
type: StatusType.Warning,
|
|
906
906
|
title: 'Connection lost',
|
|
907
907
|
message: 'Cannot connect to this platform',
|
|
908
908
|
hideFromHistory: true,
|
|
@@ -935,7 +935,7 @@ const ComputePlatforms = ({ connections, onSelect }) => {
|
|
|
935
935
|
{
|
|
936
936
|
columnKey: 'status',
|
|
937
937
|
component: () => (React.createElement("div", { style: { lineHeight: 1 } },
|
|
938
|
-
React.createElement(Status, { title: status ===
|
|
938
|
+
React.createElement(Status, { title: status === StatusType.Success ? 'connection alive' : 'connection lost', status: status, withIcon: true, withBorder: true }))),
|
|
939
939
|
},
|
|
940
940
|
],
|
|
941
941
|
})), onRowClick: (idx) => onSelect(filtered[idx]) }),
|
|
@@ -978,7 +978,7 @@ const ErrorDropdown = ({ title = 'Error Message', value, onSelect, onDeselect, d
|
|
|
978
978
|
// instead, it is now optional and we should fallback to "reason" which is also optional.
|
|
979
979
|
sources.forEach(({ conditions }) => {
|
|
980
980
|
mapConditions(conditions || []).forEach(({ status, message, reason }) => {
|
|
981
|
-
if (status ===
|
|
981
|
+
if (status === StatusType.Error && !payload.find((opt) => opt.id === message)) {
|
|
982
982
|
if (!!message) {
|
|
983
983
|
if (!payload.find((opt) => opt.id === message))
|
|
984
984
|
payload.push({ id: message, value: message });
|
|
@@ -12692,12 +12692,12 @@ const Container$i = styled.div `
|
|
|
12692
12692
|
`;
|
|
12693
12693
|
const BaseNode = memo(({ id: nodeId, data }) => {
|
|
12694
12694
|
const { nodeWidth, id: entityId, type: entityType, status, faded, title, subTitle, icon, icons, iconSrc, iconSrcs, monitors, isActive, raw } = data;
|
|
12695
|
-
const isSource = entityType ===
|
|
12695
|
+
const isSource = entityType === EntityTypes.Source;
|
|
12696
12696
|
const { isThisPending } = usePendingStore();
|
|
12697
12697
|
const isPending = isThisPending({ entityType, entityId });
|
|
12698
12698
|
const renderActions = () => {
|
|
12699
12699
|
const sourceIsInstrumenting = isSource && (!raw.conditions?.length || raw.conditions?.some(({ status }) => status === 'loading'));
|
|
12700
|
-
return (React.createElement(React.Fragment, null, isPending ? (React.createElement(FadeLoader, null)) : status ===
|
|
12700
|
+
return (React.createElement(React.Fragment, null, isPending ? (React.createElement(FadeLoader, null)) : status === StatusType.Error ? (React.createElement(ErrorTriangleIcon, { size: 20 })) : status === StatusType.Warning ? (React.createElement(WarningTriangleIcon, { size: 20 })) : sourceIsInstrumenting ? (React.createElement(FadeLoader, null)) : null));
|
|
12701
12701
|
};
|
|
12702
12702
|
const { selectedSources, setSelectedSources } = useSelectedStore();
|
|
12703
12703
|
const namespaces = { ...selectedSources };
|
|
@@ -12727,7 +12727,7 @@ const Container$h = styled.div `
|
|
|
12727
12727
|
`;
|
|
12728
12728
|
const EdgedNode = memo(({ data }) => {
|
|
12729
12729
|
const { nodeWidth, nodeHeight } = data;
|
|
12730
|
-
return (React.createElement(Container$h, { "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight },
|
|
12730
|
+
return (React.createElement(Container$h, { "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
|
|
12731
12731
|
React.createElement(Handle, { type: 'source', position: Position.Right, style: { visibility: 'hidden' } }),
|
|
12732
12732
|
React.createElement(Handle, { type: 'target', position: Position.Left, style: { visibility: 'hidden' } })));
|
|
12733
12733
|
});
|
|
@@ -12748,6 +12748,7 @@ const FrameNode = memo(({ data }) => {
|
|
|
12748
12748
|
|
|
12749
12749
|
const Container$f = styled.div `
|
|
12750
12750
|
position: relative;
|
|
12751
|
+
z-index: 1;
|
|
12751
12752
|
width: ${({ $nodeWidth }) => $nodeWidth}px;
|
|
12752
12753
|
height: ${({ $nodeHeight }) => $nodeHeight}px;
|
|
12753
12754
|
background: transparent;
|
|
@@ -12812,7 +12813,7 @@ const ScrollNode = memo(({ data, ...rest }) => {
|
|
|
12812
12813
|
// @ts-ignore
|
|
12813
12814
|
onClickNode(e, item);
|
|
12814
12815
|
} },
|
|
12815
|
-
React.createElement(BaseNode, { ...rest, type:
|
|
12816
|
+
React.createElement(BaseNode, { ...rest, type: NodeTypes.Base, id: item.id, data: item.data })))),
|
|
12816
12817
|
React.createElement(LoadMoreWrapper, { "$hide": isBottomOfList })));
|
|
12817
12818
|
});
|
|
12818
12819
|
|
|
@@ -12853,7 +12854,7 @@ const HeaderNode = memo(({ id: nodeId, data }) => {
|
|
|
12853
12854
|
const { nodeWidth, title, icon: Icon, badge, badgeTooltip, isFetching, sources } = data;
|
|
12854
12855
|
const entityType = nodeId.split('-')[0];
|
|
12855
12856
|
const { isAwaitingInstrumentation, sourcesToCreate, sourcesCreated, sourcesToDelete, sourcesDeleted } = useInstrumentStore();
|
|
12856
|
-
const isSourceAwaitingInstrumentation = entityType ===
|
|
12857
|
+
const isSourceAwaitingInstrumentation = entityType === EntityTypes.Source && isAwaitingInstrumentation;
|
|
12857
12858
|
const instrumentingPercent = (!!sourcesToCreate ? Math.floor((100 / sourcesToCreate) * sourcesCreated) : !!sourcesToDelete ? Math.floor((100 / sourcesToDelete) * sourcesDeleted) : 0) || 1;
|
|
12858
12859
|
const { selectedSources, setSelectedSources } = useSelectedStore();
|
|
12859
12860
|
const { isThisPending } = usePendingStore();
|
|
@@ -12869,7 +12870,7 @@ const HeaderNode = memo(({ id: nodeId, data }) => {
|
|
|
12869
12870
|
const payload = {};
|
|
12870
12871
|
sources?.forEach((source) => {
|
|
12871
12872
|
const id = { namespace: source.namespace, name: source.name, kind: source.kind };
|
|
12872
|
-
const isPending = isThisPending({ entityType:
|
|
12873
|
+
const isPending = isThisPending({ entityType: EntityTypes.Source, entityId: id });
|
|
12873
12874
|
if (!isPending) {
|
|
12874
12875
|
if (!payload[source.namespace]) {
|
|
12875
12876
|
payload[source.namespace] = [source];
|
|
@@ -12886,7 +12887,7 @@ const HeaderNode = memo(({ id: nodeId, data }) => {
|
|
|
12886
12887
|
}
|
|
12887
12888
|
};
|
|
12888
12889
|
return (React.createElement(Container$e, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
|
|
12889
|
-
entityType ===
|
|
12890
|
+
entityType === EntityTypes.Source && (React.createElement(SelectorWrapper, null,
|
|
12890
12891
|
React.createElement(Checkbox, { partiallyChecked: hasSelected && sources?.length !== totalSelectedSources, value: hasSelected && sources?.length === totalSelectedSources, onChange: onSelect, disabled: !sources?.length }))),
|
|
12891
12892
|
React.createElement(IconTitleBadge, { icon: Icon, title: title, badge: isSourceAwaitingInstrumentation ? `${instrumentingPercent}%` : badge, badgeTooltip: badgeTooltip, loading: isFetching && !isSourceAwaitingInstrumentation }),
|
|
12892
12893
|
React.createElement(Actions$1, { entityType: entityType }),
|
|
@@ -12901,13 +12902,13 @@ const Actions$1 = memo(({ entityType }) => {
|
|
|
12901
12902
|
// @ts-ignore
|
|
12902
12903
|
onClickNode(undefined, {
|
|
12903
12904
|
data: {
|
|
12904
|
-
type: entityType ===
|
|
12905
|
-
?
|
|
12906
|
-
: entityType ===
|
|
12907
|
-
?
|
|
12908
|
-
: entityType ===
|
|
12909
|
-
?
|
|
12910
|
-
:
|
|
12905
|
+
type: entityType === EntityTypes.Source
|
|
12906
|
+
? AddNodeTypes.AddSource
|
|
12907
|
+
: entityType === EntityTypes.Destination
|
|
12908
|
+
? AddNodeTypes.AddDestination
|
|
12909
|
+
: entityType === EntityTypes.Action
|
|
12910
|
+
? AddNodeTypes.AddAction
|
|
12911
|
+
: AddNodeTypes.AddRule,
|
|
12911
12912
|
},
|
|
12912
12913
|
});
|
|
12913
12914
|
} },
|
|
@@ -12978,16 +12979,16 @@ const ControllerWrapper = styled.div `
|
|
|
12978
12979
|
}
|
|
12979
12980
|
`;
|
|
12980
12981
|
const nodeTypes = {
|
|
12981
|
-
[
|
|
12982
|
-
[
|
|
12983
|
-
[
|
|
12984
|
-
[
|
|
12985
|
-
[
|
|
12986
|
-
[
|
|
12987
|
-
[
|
|
12982
|
+
[NodeTypes.Header]: HeaderNode,
|
|
12983
|
+
[NodeTypes.Add]: AddNode,
|
|
12984
|
+
[NodeTypes.Base]: BaseNode,
|
|
12985
|
+
[NodeTypes.Edged]: EdgedNode,
|
|
12986
|
+
[NodeTypes.Frame]: FrameNode,
|
|
12987
|
+
[NodeTypes.Scroll]: ScrollNode,
|
|
12988
|
+
[NodeTypes.Skeleton]: SkeletonNode,
|
|
12988
12989
|
};
|
|
12989
12990
|
const edgeTypes = {
|
|
12990
|
-
[
|
|
12991
|
+
[EdgeTypes.Labeled]: LabeledEdge,
|
|
12991
12992
|
};
|
|
12992
12993
|
const Flow = ({ nodes, edges, onNodesChange, onEdgesChange }) => {
|
|
12993
12994
|
const { onClickNode } = useClickNode();
|
|
@@ -13016,7 +13017,7 @@ const createEdge = (edgeId, params) => {
|
|
|
13016
13017
|
const [sourceNodeId, targetNodeId] = edgeId.split('-to-');
|
|
13017
13018
|
return {
|
|
13018
13019
|
id: edgeId,
|
|
13019
|
-
type: !!label ?
|
|
13020
|
+
type: !!label ? EdgeTypes.Labeled : 'default',
|
|
13020
13021
|
source: sourceNodeId,
|
|
13021
13022
|
target: targetNodeId,
|
|
13022
13023
|
animated,
|
|
@@ -13026,9 +13027,9 @@ const createEdge = (edgeId, params) => {
|
|
|
13026
13027
|
};
|
|
13027
13028
|
const buildEdges = ({ theme, nodes, metrics, containerHeight }) => {
|
|
13028
13029
|
const edges = [];
|
|
13029
|
-
const actionNodeId = nodes.find(({ id: nodeId }) => [`${
|
|
13030
|
+
const actionNodeId = nodes.find(({ id: nodeId }) => [`${EntityTypes.Action}-${NodeTypes.Frame}`, `${EntityTypes.Action}-${NodeTypes.Add}`].includes(nodeId))?.id;
|
|
13030
13031
|
nodes.forEach(({ type: nodeType, id: nodeId, data: { type: entityType, id: entityId, status }, position }) => {
|
|
13031
|
-
if (nodeType ===
|
|
13032
|
+
if (nodeType === NodeTypes.Edged && entityType === EntityTypes.Source) {
|
|
13032
13033
|
const { namespace, name, kind } = entityId;
|
|
13033
13034
|
const metric = metrics?.sources.find((m) => m.kind === kind && m.name === name && m.namespace === namespace);
|
|
13034
13035
|
const topLimit = -80 / 2 + framePadding$2;
|
|
@@ -13039,18 +13040,18 @@ const buildEdges = ({ theme, nodes, metrics, containerHeight }) => {
|
|
|
13039
13040
|
animated: false,
|
|
13040
13041
|
isMultiTarget: false,
|
|
13041
13042
|
label: formatBytes(metric?.throughput),
|
|
13042
|
-
isError: status ===
|
|
13043
|
+
isError: status === StatusType.Error,
|
|
13043
13044
|
}));
|
|
13044
13045
|
}
|
|
13045
13046
|
}
|
|
13046
|
-
if (nodeType ===
|
|
13047
|
+
if (nodeType === NodeTypes.Base && entityType === EntityTypes.Destination) {
|
|
13047
13048
|
const metric = metrics?.destinations.find((m) => m.id === entityId);
|
|
13048
13049
|
edges.push(createEdge(`${actionNodeId}-to-${nodeId}`, {
|
|
13049
13050
|
theme,
|
|
13050
13051
|
animated: false,
|
|
13051
13052
|
isMultiTarget: true,
|
|
13052
13053
|
label: formatBytes(metric?.throughput),
|
|
13053
|
-
isError: status ===
|
|
13054
|
+
isError: status === StatusType.Error,
|
|
13054
13055
|
}));
|
|
13055
13056
|
}
|
|
13056
13057
|
});
|
|
@@ -13062,9 +13063,9 @@ const mapToNodeData$3 = (entity) => {
|
|
|
13062
13063
|
return {
|
|
13063
13064
|
nodeWidth: nodeWidth$4,
|
|
13064
13065
|
id: entity.ruleId,
|
|
13065
|
-
type:
|
|
13066
|
+
type: EntityTypes.InstrumentationRule,
|
|
13066
13067
|
status: undefined,
|
|
13067
|
-
title: getEntityLabel(entity,
|
|
13068
|
+
title: getEntityLabel(entity, EntityTypes.InstrumentationRule, { prioritizeDisplayName: true }),
|
|
13068
13069
|
subTitle: entity.type,
|
|
13069
13070
|
icon: getInstrumentationRuleIcon(entity.type),
|
|
13070
13071
|
isActive: !entity.disabled,
|
|
@@ -13073,18 +13074,18 @@ const mapToNodeData$3 = (entity) => {
|
|
|
13073
13074
|
};
|
|
13074
13075
|
const buildRuleNodes = ({ loading, entities, positions, unfilteredCount }) => {
|
|
13075
13076
|
const nodes = [];
|
|
13076
|
-
const position = positions[
|
|
13077
|
+
const position = positions[EntityTypes.InstrumentationRule];
|
|
13077
13078
|
nodes.push({
|
|
13078
|
-
id: `${
|
|
13079
|
-
type:
|
|
13079
|
+
id: `${EntityTypes.InstrumentationRule}-${NodeTypes.Header}`,
|
|
13080
|
+
type: NodeTypes.Header,
|
|
13080
13081
|
position: {
|
|
13081
|
-
x: positions[
|
|
13082
|
+
x: positions[EntityTypes.InstrumentationRule]['x'],
|
|
13082
13083
|
y: 0,
|
|
13083
13084
|
},
|
|
13084
13085
|
data: {
|
|
13085
13086
|
nodeWidth: nodeWidth$4,
|
|
13086
|
-
title: DISPLAY_TITLES.
|
|
13087
|
-
icon: getEntityIcon(
|
|
13087
|
+
title: DISPLAY_TITLES.InstrumentationRules,
|
|
13088
|
+
icon: getEntityIcon(EntityTypes.InstrumentationRule),
|
|
13088
13089
|
badge: unfilteredCount,
|
|
13089
13090
|
isFetching: loading,
|
|
13090
13091
|
},
|
|
@@ -13092,8 +13093,8 @@ const buildRuleNodes = ({ loading, entities, positions, unfilteredCount }) => {
|
|
|
13092
13093
|
if (!!entities.length) {
|
|
13093
13094
|
entities.forEach((rule, idx) => {
|
|
13094
13095
|
nodes.push({
|
|
13095
|
-
id: `${
|
|
13096
|
-
type:
|
|
13096
|
+
id: `${EntityTypes.InstrumentationRule}-${idx}`,
|
|
13097
|
+
type: NodeTypes.Base,
|
|
13097
13098
|
position: {
|
|
13098
13099
|
x: position['x'],
|
|
13099
13100
|
y: position['y'](idx),
|
|
@@ -13104,8 +13105,8 @@ const buildRuleNodes = ({ loading, entities, positions, unfilteredCount }) => {
|
|
|
13104
13105
|
}
|
|
13105
13106
|
else if (loading) {
|
|
13106
13107
|
nodes.push({
|
|
13107
|
-
id: `${
|
|
13108
|
-
type:
|
|
13108
|
+
id: `${EntityTypes.InstrumentationRule}-${NodeTypes.Skeleton}`,
|
|
13109
|
+
type: NodeTypes.Skeleton,
|
|
13109
13110
|
position: {
|
|
13110
13111
|
x: position['x'],
|
|
13111
13112
|
y: position['y'](),
|
|
@@ -13117,15 +13118,15 @@ const buildRuleNodes = ({ loading, entities, positions, unfilteredCount }) => {
|
|
|
13117
13118
|
}
|
|
13118
13119
|
else {
|
|
13119
13120
|
nodes.push({
|
|
13120
|
-
id: `${
|
|
13121
|
-
type:
|
|
13121
|
+
id: `${EntityTypes.InstrumentationRule}-${NodeTypes.Add}`,
|
|
13122
|
+
type: NodeTypes.Add,
|
|
13122
13123
|
position: {
|
|
13123
13124
|
x: position['x'],
|
|
13124
13125
|
y: position['y'](),
|
|
13125
13126
|
},
|
|
13126
13127
|
data: {
|
|
13127
13128
|
nodeWidth: nodeWidth$4,
|
|
13128
|
-
type:
|
|
13129
|
+
type: AddNodeTypes.AddRule,
|
|
13129
13130
|
title: 'ADD RULE',
|
|
13130
13131
|
subTitle: 'To modify OpenTelemetry data',
|
|
13131
13132
|
},
|
|
@@ -13140,10 +13141,10 @@ const mapToNodeData$2 = (entity) => {
|
|
|
13140
13141
|
return {
|
|
13141
13142
|
nodeWidth: nodeWidth$3,
|
|
13142
13143
|
id: entity.id,
|
|
13143
|
-
type:
|
|
13144
|
+
type: EntityTypes.Action,
|
|
13144
13145
|
status: priorotizedStatus,
|
|
13145
13146
|
faded: hasDisableds,
|
|
13146
|
-
title: getEntityLabel(entity,
|
|
13147
|
+
title: getEntityLabel(entity, EntityTypes.Action, { prioritizeDisplayName: true }),
|
|
13147
13148
|
subTitle: entity.type,
|
|
13148
13149
|
icon: getActionIcon(entity.type),
|
|
13149
13150
|
monitors: entity.spec.signals,
|
|
@@ -13153,26 +13154,26 @@ const mapToNodeData$2 = (entity) => {
|
|
|
13153
13154
|
};
|
|
13154
13155
|
const buildActionNodes = ({ loading, entities, positions, unfilteredCount }) => {
|
|
13155
13156
|
const nodes = [];
|
|
13156
|
-
const position = positions[
|
|
13157
|
+
const position = positions[EntityTypes.Action];
|
|
13157
13158
|
nodes.push({
|
|
13158
|
-
id: `${
|
|
13159
|
-
type:
|
|
13159
|
+
id: `${EntityTypes.Action}-${NodeTypes.Header}`,
|
|
13160
|
+
type: NodeTypes.Header,
|
|
13160
13161
|
position: {
|
|
13161
|
-
x: positions[
|
|
13162
|
+
x: positions[EntityTypes.Action]['x'],
|
|
13162
13163
|
y: 0,
|
|
13163
13164
|
},
|
|
13164
13165
|
data: {
|
|
13165
13166
|
nodeWidth: nodeWidth$3,
|
|
13166
|
-
title: DISPLAY_TITLES.
|
|
13167
|
-
icon: getEntityIcon(
|
|
13167
|
+
title: DISPLAY_TITLES.Actions,
|
|
13168
|
+
icon: getEntityIcon(EntityTypes.Action),
|
|
13168
13169
|
badge: unfilteredCount,
|
|
13169
13170
|
isFetching: loading,
|
|
13170
13171
|
},
|
|
13171
13172
|
});
|
|
13172
13173
|
if (!!entities.length) {
|
|
13173
13174
|
nodes.push({
|
|
13174
|
-
id: `${
|
|
13175
|
-
type:
|
|
13175
|
+
id: `${EntityTypes.Action}-${NodeTypes.Frame}`,
|
|
13176
|
+
type: NodeTypes.Frame,
|
|
13176
13177
|
position: {
|
|
13177
13178
|
x: position['x'] - framePadding$1,
|
|
13178
13179
|
y: position['y']() - framePadding$1,
|
|
@@ -13184,10 +13185,10 @@ const buildActionNodes = ({ loading, entities, positions, unfilteredCount }) =>
|
|
|
13184
13185
|
});
|
|
13185
13186
|
entities.forEach((action, idx) => {
|
|
13186
13187
|
nodes.push({
|
|
13187
|
-
id: `${
|
|
13188
|
-
type:
|
|
13188
|
+
id: `${EntityTypes.Action}-${idx}`,
|
|
13189
|
+
type: NodeTypes.Base,
|
|
13189
13190
|
extent: 'parent',
|
|
13190
|
-
parentId: `${
|
|
13191
|
+
parentId: `${EntityTypes.Action}-${NodeTypes.Frame}`,
|
|
13191
13192
|
position: {
|
|
13192
13193
|
x: framePadding$1,
|
|
13193
13194
|
y: position['y'](idx) - (nodeHeight$2 - framePadding$1),
|
|
@@ -13198,8 +13199,8 @@ const buildActionNodes = ({ loading, entities, positions, unfilteredCount }) =>
|
|
|
13198
13199
|
}
|
|
13199
13200
|
else if (loading) {
|
|
13200
13201
|
nodes.push({
|
|
13201
|
-
id: `${
|
|
13202
|
-
type:
|
|
13202
|
+
id: `${EntityTypes.Action}-${NodeTypes.Skeleton}`,
|
|
13203
|
+
type: NodeTypes.Skeleton,
|
|
13203
13204
|
position: {
|
|
13204
13205
|
x: position['x'],
|
|
13205
13206
|
y: position['y'](),
|
|
@@ -13211,16 +13212,16 @@ const buildActionNodes = ({ loading, entities, positions, unfilteredCount }) =>
|
|
|
13211
13212
|
}
|
|
13212
13213
|
else {
|
|
13213
13214
|
nodes.push({
|
|
13214
|
-
id: `${
|
|
13215
|
-
type:
|
|
13215
|
+
id: `${EntityTypes.Action}-${NodeTypes.Add}`,
|
|
13216
|
+
type: NodeTypes.Add,
|
|
13216
13217
|
position: {
|
|
13217
13218
|
x: position['x'],
|
|
13218
13219
|
y: position['y'](),
|
|
13219
13220
|
},
|
|
13220
13221
|
data: {
|
|
13221
13222
|
nodeWidth: nodeWidth$3,
|
|
13222
|
-
type:
|
|
13223
|
-
title: 'ADD
|
|
13223
|
+
type: AddNodeTypes.AddAction,
|
|
13224
|
+
title: 'ADD Action',
|
|
13224
13225
|
subTitle: 'To modify OpenTelemetry data',
|
|
13225
13226
|
},
|
|
13226
13227
|
});
|
|
@@ -13240,10 +13241,10 @@ const mapToNodeData$1 = (entity) => {
|
|
|
13240
13241
|
name: entity.name,
|
|
13241
13242
|
kind: entity.kind,
|
|
13242
13243
|
},
|
|
13243
|
-
type:
|
|
13244
|
+
type: EntityTypes.Source,
|
|
13244
13245
|
status: priorotizedStatus,
|
|
13245
13246
|
faded: hasDisableds,
|
|
13246
|
-
title: getEntityLabel(entity,
|
|
13247
|
+
title: getEntityLabel(entity, EntityTypes.Source, { extended: true }),
|
|
13247
13248
|
subTitle: `${entity.namespace} • ${entity.kind}`,
|
|
13248
13249
|
icons: getContainersIcons(entity.containers),
|
|
13249
13250
|
raw: entity,
|
|
@@ -13251,19 +13252,19 @@ const mapToNodeData$1 = (entity) => {
|
|
|
13251
13252
|
};
|
|
13252
13253
|
const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, containerHeight, onScroll }) => {
|
|
13253
13254
|
const nodes = [];
|
|
13254
|
-
const position = positions[
|
|
13255
|
+
const position = positions[EntityTypes.Source];
|
|
13255
13256
|
const hasFiltersApplied = entities.length !== unfilteredCount;
|
|
13256
13257
|
nodes.push({
|
|
13257
|
-
id: `${
|
|
13258
|
-
type:
|
|
13258
|
+
id: `${EntityTypes.Source}-${NodeTypes.Header}`,
|
|
13259
|
+
type: NodeTypes.Header,
|
|
13259
13260
|
position: {
|
|
13260
|
-
x: positions[
|
|
13261
|
+
x: positions[EntityTypes.Source]['x'],
|
|
13261
13262
|
y: 0,
|
|
13262
13263
|
},
|
|
13263
13264
|
data: {
|
|
13264
13265
|
nodeWidth: nodeWidth$2,
|
|
13265
|
-
title: DISPLAY_TITLES.
|
|
13266
|
-
icon: getEntityIcon(
|
|
13266
|
+
title: DISPLAY_TITLES.Sources,
|
|
13267
|
+
icon: getEntityIcon(EntityTypes.Source),
|
|
13267
13268
|
badge: hasFiltersApplied ? `${entities.length}/${unfilteredCount}` : unfilteredCount,
|
|
13268
13269
|
badgeTooltip: hasFiltersApplied ? DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP : undefined,
|
|
13269
13270
|
isFetching: loading,
|
|
@@ -13272,8 +13273,8 @@ const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, conta
|
|
|
13272
13273
|
});
|
|
13273
13274
|
if (!!entities.length) {
|
|
13274
13275
|
nodes.push({
|
|
13275
|
-
id: `${
|
|
13276
|
-
type:
|
|
13276
|
+
id: `${EntityTypes.Source}-${NodeTypes.Scroll}`,
|
|
13277
|
+
type: NodeTypes.Scroll,
|
|
13277
13278
|
position: {
|
|
13278
13279
|
x: position['x'],
|
|
13279
13280
|
y: position['y']() - framePadding,
|
|
@@ -13285,7 +13286,7 @@ const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, conta
|
|
|
13285
13286
|
nodeWidth: nodeWidth$2,
|
|
13286
13287
|
nodeHeight: containerHeight - nodeHeight$1 + framePadding * 2,
|
|
13287
13288
|
items: entities.map((source, idx) => ({
|
|
13288
|
-
id: `${
|
|
13289
|
+
id: `${EntityTypes.Source}-${idx}`,
|
|
13289
13290
|
data: mapToNodeData$1(source),
|
|
13290
13291
|
})),
|
|
13291
13292
|
onScroll,
|
|
@@ -13293,10 +13294,10 @@ const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, conta
|
|
|
13293
13294
|
});
|
|
13294
13295
|
entities.forEach((source, idx) => {
|
|
13295
13296
|
nodes.push({
|
|
13296
|
-
id: `${
|
|
13297
|
-
type:
|
|
13297
|
+
id: `${EntityTypes.Source}-${idx}-hidden`,
|
|
13298
|
+
type: NodeTypes.Edged,
|
|
13298
13299
|
extent: 'parent',
|
|
13299
|
-
parentId: `${
|
|
13300
|
+
parentId: `${EntityTypes.Source}-${NodeTypes.Scroll}`,
|
|
13300
13301
|
position: {
|
|
13301
13302
|
x: framePadding,
|
|
13302
13303
|
y: position['y'](idx) - (nodeHeight$1 - framePadding / 2),
|
|
@@ -13310,8 +13311,8 @@ const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, conta
|
|
|
13310
13311
|
}
|
|
13311
13312
|
else if (loading) {
|
|
13312
13313
|
nodes.push({
|
|
13313
|
-
id: `${
|
|
13314
|
-
type:
|
|
13314
|
+
id: `${EntityTypes.Source}-${NodeTypes.Skeleton}`,
|
|
13315
|
+
type: NodeTypes.Skeleton,
|
|
13315
13316
|
position: {
|
|
13316
13317
|
x: position['x'],
|
|
13317
13318
|
y: position['y'](),
|
|
@@ -13323,16 +13324,16 @@ const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, conta
|
|
|
13323
13324
|
}
|
|
13324
13325
|
else {
|
|
13325
13326
|
nodes.push({
|
|
13326
|
-
id: `${
|
|
13327
|
-
type:
|
|
13327
|
+
id: `${EntityTypes.Source}-${NodeTypes.Add}`,
|
|
13328
|
+
type: NodeTypes.Add,
|
|
13328
13329
|
position: {
|
|
13329
13330
|
x: position['x'],
|
|
13330
13331
|
y: position['y'](),
|
|
13331
13332
|
},
|
|
13332
13333
|
data: {
|
|
13333
13334
|
nodeWidth: nodeWidth$2,
|
|
13334
|
-
type:
|
|
13335
|
-
title: 'ADD
|
|
13335
|
+
type: AddNodeTypes.AddSource,
|
|
13336
|
+
title: 'ADD Source',
|
|
13336
13337
|
subTitle: 'To collect OpenTelemetry data',
|
|
13337
13338
|
},
|
|
13338
13339
|
});
|
|
@@ -13346,25 +13347,25 @@ const getNodePositions = ({ containerWidth }) => {
|
|
|
13346
13347
|
const endX = (containerWidth <= 1500 ? 1500 : containerWidth) - nodeWidth$1 - startX;
|
|
13347
13348
|
const getY = (idx) => nodeHeight * ((idx || 0) + 1);
|
|
13348
13349
|
const positions = {
|
|
13349
|
-
[
|
|
13350
|
+
[EntityTypes.InstrumentationRule]: {
|
|
13350
13351
|
x: startX,
|
|
13351
13352
|
y: getY,
|
|
13352
13353
|
},
|
|
13353
|
-
[
|
|
13354
|
+
[EntityTypes.Source]: {
|
|
13354
13355
|
x: getValueForRange(containerWidth, [
|
|
13355
13356
|
[0, 1600, endX / 3.5],
|
|
13356
13357
|
[1600, null, endX / 4],
|
|
13357
13358
|
]),
|
|
13358
13359
|
y: getY,
|
|
13359
13360
|
},
|
|
13360
|
-
[
|
|
13361
|
+
[EntityTypes.Action]: {
|
|
13361
13362
|
x: getValueForRange(containerWidth, [
|
|
13362
13363
|
[0, 1600, endX / 1.55],
|
|
13363
13364
|
[1600, null, endX / 1.6],
|
|
13364
13365
|
]),
|
|
13365
13366
|
y: getY,
|
|
13366
13367
|
},
|
|
13367
|
-
[
|
|
13368
|
+
[EntityTypes.Destination]: {
|
|
13368
13369
|
x: endX,
|
|
13369
13370
|
y: getY,
|
|
13370
13371
|
},
|
|
@@ -13378,10 +13379,10 @@ const mapToNodeData = (entity) => {
|
|
|
13378
13379
|
return {
|
|
13379
13380
|
nodeWidth,
|
|
13380
13381
|
id: entity.id,
|
|
13381
|
-
type:
|
|
13382
|
+
type: EntityTypes.Destination,
|
|
13382
13383
|
status: priorotizedStatus,
|
|
13383
13384
|
faded: hasDisableds,
|
|
13384
|
-
title: getEntityLabel(entity,
|
|
13385
|
+
title: getEntityLabel(entity, EntityTypes.Destination, { prioritizeDisplayName: true }),
|
|
13385
13386
|
subTitle: entity.destinationType.displayName,
|
|
13386
13387
|
iconSrc: entity.destinationType.imageUrl,
|
|
13387
13388
|
monitors: Object.keys(entity.exportedSignals).filter((signal) => entity.exportedSignals[signal] === true),
|
|
@@ -13390,18 +13391,18 @@ const mapToNodeData = (entity) => {
|
|
|
13390
13391
|
};
|
|
13391
13392
|
const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount }) => {
|
|
13392
13393
|
const nodes = [];
|
|
13393
|
-
const position = positions[
|
|
13394
|
+
const position = positions[EntityTypes.Destination];
|
|
13394
13395
|
nodes.push({
|
|
13395
|
-
id: `${
|
|
13396
|
-
type:
|
|
13396
|
+
id: `${EntityTypes.Destination}-${NodeTypes.Header}`,
|
|
13397
|
+
type: NodeTypes.Header,
|
|
13397
13398
|
position: {
|
|
13398
|
-
x: positions[
|
|
13399
|
+
x: positions[EntityTypes.Destination]['x'],
|
|
13399
13400
|
y: 0,
|
|
13400
13401
|
},
|
|
13401
13402
|
data: {
|
|
13402
13403
|
nodeWidth,
|
|
13403
|
-
title: DISPLAY_TITLES.
|
|
13404
|
-
icon: getEntityIcon(
|
|
13404
|
+
title: DISPLAY_TITLES.Destinations,
|
|
13405
|
+
icon: getEntityIcon(EntityTypes.Destination),
|
|
13405
13406
|
badge: unfilteredCount,
|
|
13406
13407
|
isFetching: loading,
|
|
13407
13408
|
},
|
|
@@ -13409,8 +13410,8 @@ const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount }
|
|
|
13409
13410
|
if (!!entities.length) {
|
|
13410
13411
|
entities.forEach((destination, idx) => {
|
|
13411
13412
|
nodes.push({
|
|
13412
|
-
id: `${
|
|
13413
|
-
type:
|
|
13413
|
+
id: `${EntityTypes.Destination}-${idx}`,
|
|
13414
|
+
type: NodeTypes.Base,
|
|
13414
13415
|
position: {
|
|
13415
13416
|
x: position['x'],
|
|
13416
13417
|
y: position['y'](idx),
|
|
@@ -13421,8 +13422,8 @@ const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount }
|
|
|
13421
13422
|
}
|
|
13422
13423
|
else if (loading) {
|
|
13423
13424
|
nodes.push({
|
|
13424
|
-
id: `${
|
|
13425
|
-
type:
|
|
13425
|
+
id: `${EntityTypes.Destination}-${NodeTypes.Skeleton}`,
|
|
13426
|
+
type: NodeTypes.Skeleton,
|
|
13426
13427
|
position: {
|
|
13427
13428
|
x: position['x'],
|
|
13428
13429
|
y: position['y'](),
|
|
@@ -13434,16 +13435,16 @@ const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount }
|
|
|
13434
13435
|
}
|
|
13435
13436
|
else {
|
|
13436
13437
|
nodes.push({
|
|
13437
|
-
id: `${
|
|
13438
|
-
type:
|
|
13438
|
+
id: `${EntityTypes.Destination}-${NodeTypes.Add}`,
|
|
13439
|
+
type: NodeTypes.Add,
|
|
13439
13440
|
position: {
|
|
13440
13441
|
x: position['x'],
|
|
13441
13442
|
y: position['y'](),
|
|
13442
13443
|
},
|
|
13443
13444
|
data: {
|
|
13444
13445
|
nodeWidth,
|
|
13445
|
-
type:
|
|
13446
|
-
title: 'ADD
|
|
13446
|
+
type: AddNodeTypes.AddDestination,
|
|
13447
|
+
title: 'ADD Destination',
|
|
13447
13448
|
subTitle: 'To monitor OpenTelemetry data',
|
|
13448
13449
|
},
|
|
13449
13450
|
});
|
|
@@ -13475,7 +13476,7 @@ const DataFlow = ({ heightToRemove, metrics }) => {
|
|
|
13475
13476
|
};
|
|
13476
13477
|
const handleNodesScrolled = (currNodes, key, yOffset) => {
|
|
13477
13478
|
setNodes((prevNodes) => applyNodeChanges(currNodes
|
|
13478
|
-
.filter((node) => node.extent === 'parent' && node.parentId === `${key}-${
|
|
13479
|
+
.filter((node) => node.extent === 'parent' && node.parentId === `${key}-${NodeTypes.Scroll}`)
|
|
13479
13480
|
.map((node) => ({
|
|
13480
13481
|
id: node.id,
|
|
13481
13482
|
type: 'position',
|
|
@@ -13492,10 +13493,10 @@ const DataFlow = ({ heightToRemove, metrics }) => {
|
|
|
13492
13493
|
unfilteredCount: sources.length,
|
|
13493
13494
|
positions,
|
|
13494
13495
|
containerHeight,
|
|
13495
|
-
onScroll: ({ scrollTop }) => handleNodesScrolled(sourceNodes,
|
|
13496
|
+
onScroll: ({ scrollTop }) => handleNodesScrolled(sourceNodes, EntityTypes.Source, scrollTop),
|
|
13496
13497
|
});
|
|
13497
|
-
handleNodesChanged(sourceNodes,
|
|
13498
|
-
}, [sources, sourcesLoading, isAwaitingInstrumentation, positions.
|
|
13498
|
+
handleNodesChanged(sourceNodes, EntityTypes.Source);
|
|
13499
|
+
}, [sources, sourcesLoading, isAwaitingInstrumentation, positions[EntityTypes.Source], filters, containerHeight]);
|
|
13499
13500
|
useEffect(() => {
|
|
13500
13501
|
const destinationNodes = buildDestinationNodes({
|
|
13501
13502
|
entities: filterDestinations(destinations, filters),
|
|
@@ -13503,8 +13504,8 @@ const DataFlow = ({ heightToRemove, metrics }) => {
|
|
|
13503
13504
|
unfilteredCount: destinations.length,
|
|
13504
13505
|
positions,
|
|
13505
13506
|
});
|
|
13506
|
-
handleNodesChanged(destinationNodes,
|
|
13507
|
-
}, [destinations, destinationsLoading, positions.
|
|
13507
|
+
handleNodesChanged(destinationNodes, EntityTypes.Destination);
|
|
13508
|
+
}, [destinations, destinationsLoading, positions[EntityTypes.Destination], filters]);
|
|
13508
13509
|
useEffect(() => {
|
|
13509
13510
|
const actionNodes = buildActionNodes({
|
|
13510
13511
|
entities: filterActions(actions, filters),
|
|
@@ -13512,8 +13513,8 @@ const DataFlow = ({ heightToRemove, metrics }) => {
|
|
|
13512
13513
|
unfilteredCount: actions.length,
|
|
13513
13514
|
positions,
|
|
13514
13515
|
});
|
|
13515
|
-
handleNodesChanged(actionNodes,
|
|
13516
|
-
}, [actions, actionsLoading, positions.
|
|
13516
|
+
handleNodesChanged(actionNodes, EntityTypes.Action);
|
|
13517
|
+
}, [actions, actionsLoading, positions[EntityTypes.Action], filters]);
|
|
13517
13518
|
useEffect(() => {
|
|
13518
13519
|
// note: rules do not have filters yet
|
|
13519
13520
|
const ruleNodes = buildRuleNodes({
|
|
@@ -13522,8 +13523,8 @@ const DataFlow = ({ heightToRemove, metrics }) => {
|
|
|
13522
13523
|
unfilteredCount: instrumentationRules.length,
|
|
13523
13524
|
positions,
|
|
13524
13525
|
});
|
|
13525
|
-
handleNodesChanged(ruleNodes,
|
|
13526
|
-
}, [instrumentationRules, instrumentationRulesLoading, positions.
|
|
13526
|
+
handleNodesChanged(ruleNodes, EntityTypes.InstrumentationRule);
|
|
13527
|
+
}, [instrumentationRules, instrumentationRulesLoading, positions[EntityTypes.InstrumentationRule]]);
|
|
13527
13528
|
return (React.createElement(Container$c, { ref: containerRef, "$heightToRemove": heightToRemove },
|
|
13528
13529
|
React.createElement(Flow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange })));
|
|
13529
13530
|
};
|
|
@@ -13554,25 +13555,25 @@ const buildSearchResults = ({ instrumentationRules, sources, actions, destinatio
|
|
|
13554
13555
|
: destinations.filter((destination) => destination.destinationType.displayName?.toLowerCase().includes(searchText) || destination.name?.toLowerCase().includes(searchText));
|
|
13555
13556
|
const categories = [
|
|
13556
13557
|
{
|
|
13557
|
-
category:
|
|
13558
|
+
category: EntityTypes.Source,
|
|
13558
13559
|
label: 'Sources',
|
|
13559
13560
|
count: filteredSources.length,
|
|
13560
13561
|
entities: [],
|
|
13561
13562
|
},
|
|
13562
13563
|
{
|
|
13563
|
-
category:
|
|
13564
|
+
category: EntityTypes.Action,
|
|
13564
13565
|
label: 'Actions',
|
|
13565
13566
|
count: filteredActions.length,
|
|
13566
13567
|
entities: [],
|
|
13567
13568
|
},
|
|
13568
13569
|
{
|
|
13569
|
-
category:
|
|
13570
|
+
category: EntityTypes.Destination,
|
|
13570
13571
|
label: 'Destinations',
|
|
13571
13572
|
count: filteredDestinations.length,
|
|
13572
13573
|
entities: [],
|
|
13573
13574
|
},
|
|
13574
13575
|
{
|
|
13575
|
-
category:
|
|
13576
|
+
category: EntityTypes.InstrumentationRule,
|
|
13576
13577
|
label: 'Instrumentation Rules',
|
|
13577
13578
|
count: filteredRules.length,
|
|
13578
13579
|
entities: [],
|
|
@@ -13588,13 +13589,13 @@ const buildSearchResults = ({ instrumentationRules, sources, actions, destinatio
|
|
|
13588
13589
|
.filter(({ count, category }) => !!count && category !== 'all' && ['all', category].includes(selectedCategory))
|
|
13589
13590
|
.map((item) => ({
|
|
13590
13591
|
...item,
|
|
13591
|
-
entities: item.category ===
|
|
13592
|
+
entities: item.category === EntityTypes.InstrumentationRule
|
|
13592
13593
|
? filteredRules
|
|
13593
|
-
: item.category ===
|
|
13594
|
+
: item.category === EntityTypes.Source
|
|
13594
13595
|
? filteredSources
|
|
13595
|
-
: item.category ===
|
|
13596
|
+
: item.category === EntityTypes.Action
|
|
13596
13597
|
? filteredActions
|
|
13597
|
-
: item.category ===
|
|
13598
|
+
: item.category === EntityTypes.Destination
|
|
13598
13599
|
? filteredDestinations
|
|
13599
13600
|
: [],
|
|
13600
13601
|
}));
|
|
@@ -13772,8 +13773,8 @@ const buildCard$2 = (destination, yamlFields) => {
|
|
|
13772
13773
|
const arr = [
|
|
13773
13774
|
{ title: DISPLAY_TITLES.NAME, value: destinationType.displayName },
|
|
13774
13775
|
{ title: DISPLAY_TITLES.TYPE, value: destinationType.type },
|
|
13775
|
-
{ type:
|
|
13776
|
-
{ type:
|
|
13776
|
+
{ type: DataCardFieldTypes.Monitors, title: DISPLAY_TITLES.Monitors, value: buildMonitorsList(exportedSignals) },
|
|
13777
|
+
{ type: DataCardFieldTypes.Divider },
|
|
13777
13778
|
];
|
|
13778
13779
|
const parsedFields = safeJsonParse(fields, {});
|
|
13779
13780
|
const sortedParsedFields = yamlFields.map((field) => ({ key: field.name, value: parsedFields[field.name] ?? null })).filter((item) => item.value !== null) ||
|
|
@@ -13814,17 +13815,17 @@ const DynamicFields = ({ fields, onChange, formErrors }) => {
|
|
|
13814
13815
|
if (!shouldRender)
|
|
13815
13816
|
return null;
|
|
13816
13817
|
switch (componentType) {
|
|
13817
|
-
case
|
|
13818
|
+
case FieldTypes.Input:
|
|
13818
13819
|
return React.createElement(Input, { key: field.name, ...rest, onChange: (e) => onChange(field.name, e.target.value), errorMessage: formErrors[field.name] });
|
|
13819
|
-
case
|
|
13820
|
+
case FieldTypes.Dropdown:
|
|
13820
13821
|
return (React.createElement(Dropdown, { key: field.name, ...rest, value: { id: rest.value || '', value: rest.value || '' }, options: rest.options || [], onSelect: (option) => onChange(field.name, option.value), errorMessage: formErrors[field.name] }));
|
|
13821
|
-
case
|
|
13822
|
+
case FieldTypes.MultiInput:
|
|
13822
13823
|
return (React.createElement(InputList, { key: field.name, ...rest, value: typeof rest.value === 'string' ? safeJsonParse(rest.value, []) : rest.value, onChange: (value) => onChange(field.name, JSON.stringify(value)), errorMessage: formErrors[field.name] }));
|
|
13823
|
-
case
|
|
13824
|
+
case FieldTypes.KeyValuePair:
|
|
13824
13825
|
return (React.createElement(KeyValueInputsList, { key: field.name, ...rest, value: typeof rest.value === 'string' ? safeJsonParse(rest.value, []) : rest.value, onChange: (value) => onChange(field.name, JSON.stringify(value)), errorMessage: formErrors[field.name] }));
|
|
13825
|
-
case
|
|
13826
|
+
case FieldTypes.TextArea:
|
|
13826
13827
|
return React.createElement(TextArea, { key: field.name, ...rest, onChange: (e) => onChange(field.name, e.target.value), errorMessage: formErrors[field.name] });
|
|
13827
|
-
case
|
|
13828
|
+
case FieldTypes.Checkbox:
|
|
13828
13829
|
return React.createElement(Checkbox, { key: field.name, ...rest, value: rest.value == 'true', onChange: (bool) => onChange(field.name, String(bool)), errorMessage: formErrors[field.name] });
|
|
13829
13830
|
default:
|
|
13830
13831
|
return null;
|
|
@@ -13915,45 +13916,45 @@ const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validat
|
|
|
13915
13916
|
const { logs, metrics, traces } = supportedSignals || {};
|
|
13916
13917
|
const arr = [];
|
|
13917
13918
|
if (logs?.supported)
|
|
13918
|
-
arr.push(
|
|
13919
|
+
arr.push(SignalType.Logs);
|
|
13919
13920
|
if (metrics?.supported)
|
|
13920
|
-
arr.push(
|
|
13921
|
+
arr.push(SignalType.Metrics);
|
|
13921
13922
|
if (traces?.supported)
|
|
13922
|
-
arr.push(
|
|
13923
|
+
arr.push(SignalType.Traces);
|
|
13923
13924
|
return arr;
|
|
13924
13925
|
}, [supportedSignals]);
|
|
13925
13926
|
const selectedMonitors = useMemo(() => {
|
|
13926
13927
|
const { logs, metrics, traces } = formData['exportedSignals'] || {};
|
|
13927
13928
|
const arr = [];
|
|
13928
13929
|
if (logs)
|
|
13929
|
-
arr.push(
|
|
13930
|
+
arr.push(SignalType.Logs);
|
|
13930
13931
|
if (metrics)
|
|
13931
|
-
arr.push(
|
|
13932
|
+
arr.push(SignalType.Metrics);
|
|
13932
13933
|
if (traces)
|
|
13933
|
-
arr.push(
|
|
13934
|
+
arr.push(SignalType.Traces);
|
|
13934
13935
|
return arr;
|
|
13935
13936
|
}, [formData['exportedSignals']]);
|
|
13936
13937
|
const handleSelectedSignals = (signals) => {
|
|
13937
13938
|
dirtyForm();
|
|
13938
13939
|
handleFormChange('exportedSignals', {
|
|
13939
|
-
logs: signals.includes(
|
|
13940
|
-
metrics: signals.includes(
|
|
13941
|
-
traces: signals.includes(
|
|
13940
|
+
logs: signals.includes(SignalType.Logs),
|
|
13941
|
+
metrics: signals.includes(SignalType.Metrics),
|
|
13942
|
+
traces: signals.includes(SignalType.Traces),
|
|
13942
13943
|
});
|
|
13943
13944
|
};
|
|
13944
13945
|
return (React.createElement(Container$a, null,
|
|
13945
13946
|
!isUpdate && (React.createElement(React.Fragment, null,
|
|
13946
13947
|
React.createElement(SectionTitle, { title: 'Create connection', description: `Connect ${displayName} with Odigos.`, actionButton: testConnectionSupported && (React.createElement(TestConnection, { destination: formData, disabled: !isFormDirty, validateForm: validateForm, status: connectionStatus, testConnection: testConnection, testLoading: testLoading, testResult: testResult, onError: () => {
|
|
13947
13948
|
setIsFormDirty(false);
|
|
13948
|
-
setConnectionStatus(
|
|
13949
|
+
setConnectionStatus(StatusType.Error);
|
|
13949
13950
|
}, onSuccess: () => {
|
|
13950
13951
|
setIsFormDirty(false);
|
|
13951
|
-
setConnectionStatus(
|
|
13952
|
+
setConnectionStatus(StatusType.Success);
|
|
13952
13953
|
} })) }),
|
|
13953
13954
|
(testConnectionSupported || autoFilled) && (React.createElement(NotesWrapper, null,
|
|
13954
|
-
testConnectionSupported && connectionStatus ===
|
|
13955
|
-
testConnectionSupported && connectionStatus ===
|
|
13956
|
-
autoFilled && React.createElement(NotificationNote, { type:
|
|
13955
|
+
testConnectionSupported && connectionStatus === StatusType.Error && React.createElement(NotificationNote, { type: StatusType.Error, message: 'Connection failed. Please check your input and try again.' }),
|
|
13956
|
+
testConnectionSupported && connectionStatus === StatusType.Success && React.createElement(NotificationNote, { type: StatusType.Success, message: 'Connection succeeded.' }),
|
|
13957
|
+
autoFilled && React.createElement(NotificationNote, { type: StatusType.Default, message: `Odigos autocompleted ${displayName} connection details.` }))),
|
|
13957
13958
|
React.createElement(Divider, null))),
|
|
13958
13959
|
React.createElement(MonitorsCheckboxes, { title: isUpdate ? '' : 'This connection will monitor:', required: true, allowedSignals: supportedMonitors, selectedSignals: selectedMonitors, setSelectedSignals: handleSelectedSignals, errorMessage: formErrors['exportedSignals'] }),
|
|
13959
13960
|
!isUpdate && (React.createElement(Input, { title: 'Destination name', placeholder: 'Enter destination name', value: formData['name'], onChange: (e) => {
|
|
@@ -13988,7 +13989,7 @@ const DataContainer$2 = styled.div `
|
|
|
13988
13989
|
const DestinationDrawer = ({ categories, updateDestination, deleteDestination, testConnection, testLoading, testResult }) => {
|
|
13989
13990
|
const { destinations } = useEntityStore();
|
|
13990
13991
|
const { drawerType, drawerEntityId, setDrawerEntityId, setDrawerType } = useDrawerStore();
|
|
13991
|
-
const isOpen = drawerType !==
|
|
13992
|
+
const isOpen = drawerType !== EntityTypes.Destination;
|
|
13992
13993
|
const onClose = () => {
|
|
13993
13994
|
setDrawerType(null);
|
|
13994
13995
|
setDrawerEntityId(null);
|
|
@@ -14043,7 +14044,7 @@ const DestinationDrawer = ({ categories, updateDestination, deleteDestination, t
|
|
|
14043
14044
|
onClose();
|
|
14044
14045
|
};
|
|
14045
14046
|
const handleSave = async (newTitle) => {
|
|
14046
|
-
if (validateForm({ withAlert: true, alertTitle:
|
|
14047
|
+
if (validateForm({ withAlert: true, alertTitle: Crud.Update })) {
|
|
14047
14048
|
const title = newTitle !== thisItem.destinationType.displayName ? newTitle : '';
|
|
14048
14049
|
handleFormChange('name', title);
|
|
14049
14050
|
updateDestination(drawerEntityId, { ...formData, name: title });
|
|
@@ -14124,7 +14125,7 @@ const DROPDOWN_OPTIONS = [
|
|
|
14124
14125
|
{ value: 'Self-hosted', id: 'self hosted' },
|
|
14125
14126
|
];
|
|
14126
14127
|
const DEFAULT_CATEGORY = DROPDOWN_OPTIONS[0];
|
|
14127
|
-
const DEFAULT_MONITORS = [
|
|
14128
|
+
const DEFAULT_MONITORS = [SignalType.Logs, SignalType.Metrics, SignalType.Traces];
|
|
14128
14129
|
const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSelect }) => {
|
|
14129
14130
|
const [search, setSearch] = useState('');
|
|
14130
14131
|
const [selectedCategory, setSelectedCategory] = useState(DEFAULT_CATEGORY);
|
|
@@ -14173,7 +14174,7 @@ const SideMenuWrapper = styled.div `
|
|
|
14173
14174
|
const DestinationModal = ({ isOnboarding, categories, potentialDestinations, createDestination, testConnection, testLoading, testResult }) => {
|
|
14174
14175
|
const { addConfiguredDestination } = useSetupStore();
|
|
14175
14176
|
const { currentModal, setCurrentModal } = useModalStore();
|
|
14176
|
-
const isOpen = currentModal ===
|
|
14177
|
+
const isOpen = currentModal === EntityTypes.Destination;
|
|
14177
14178
|
const [selectedItem, setSelectedItem] = useState(undefined);
|
|
14178
14179
|
const { formData, formErrors, handleFormChange, resetFormData, validateForm, setYamlFields, dynamicFields, setDynamicFields } = useDestinationFormData({
|
|
14179
14180
|
supportedSignals: selectedItem?.supportedSignals,
|
|
@@ -14195,13 +14196,13 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
|
|
|
14195
14196
|
setSelectedItem(item);
|
|
14196
14197
|
};
|
|
14197
14198
|
const handleSubmit = async () => {
|
|
14198
|
-
const isFormOk = validateForm({ withAlert: !isOnboarding, alertTitle:
|
|
14199
|
+
const isFormOk = validateForm({ withAlert: !isOnboarding, alertTitle: Crud.Create });
|
|
14199
14200
|
if (!isFormOk)
|
|
14200
14201
|
return null;
|
|
14201
14202
|
if (isOnboarding) {
|
|
14202
14203
|
const destinationTypeDetails = dynamicFields.map((field) => ({
|
|
14203
14204
|
title: field.title || '',
|
|
14204
|
-
value: (field.componentType ===
|
|
14205
|
+
value: (field.componentType === FieldTypes.Dropdown ? field.value?.value || '' : field.value),
|
|
14205
14206
|
}));
|
|
14206
14207
|
destinationTypeDetails.unshift({
|
|
14207
14208
|
title: 'Destination name',
|
|
@@ -14246,7 +14247,7 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
|
|
|
14246
14247
|
React.createElement(Container$8, null,
|
|
14247
14248
|
React.createElement(SideMenuWrapper, null,
|
|
14248
14249
|
React.createElement(Stepper, { currentStep: !!selectedItem ? 2 : 1, data: [
|
|
14249
|
-
{ stepNumber: 1, title: '
|
|
14250
|
+
{ stepNumber: 1, title: 'Destinations' },
|
|
14250
14251
|
{ stepNumber: 2, title: 'CONNECTION' },
|
|
14251
14252
|
] })),
|
|
14252
14253
|
React.createElement(ModalBody, { style: { margin: '32px 24px 12px 24px' } },
|
|
@@ -14275,7 +14276,7 @@ const ListItem$1 = ({ item, isLastItem, ...props }) => {
|
|
|
14275
14276
|
return (React.createElement(React.Fragment, null,
|
|
14276
14277
|
React.createElement(DataTab, { title: item.displayName, iconSrc: item.imageUrl, monitors: Object.keys(item.exportedSignals).filter((signal) => item.exportedSignals[signal] === true), monitorsWithLabels: true, withExtend: true, renderExtended: () => React.createElement(DataCardFields, { data: item.destinationTypeDetails }), renderActions: () => (React.createElement(IconButton, { onClick: () => setDeleteWarning(true) },
|
|
14277
14278
|
React.createElement(TrashIcon, null))), ...props }),
|
|
14278
|
-
React.createElement(DeleteWarning, { isOpen: deleteWarning, name: item.displayName || item.type, type:
|
|
14279
|
+
React.createElement(DeleteWarning, { isOpen: deleteWarning, name: item.displayName || item.type, type: EntityTypes.Destination, isLastItem: isLastItem, onApprove: () => removeConfiguredDestination(item), onDeny: () => setDeleteWarning(false) })));
|
|
14279
14280
|
};
|
|
14280
14281
|
|
|
14281
14282
|
const ContentWrapper = styled.div `
|
|
@@ -14299,18 +14300,18 @@ const StyledAddDestinationButton = styled(Button) `
|
|
|
14299
14300
|
const DestinationSelectionForm = ({ categories, potentialDestinations, createDestination, isLoading, testConnection, testLoading, testResult, isSourcesListEmpty, goToSources, }) => {
|
|
14300
14301
|
const theme = Theme.useTheme();
|
|
14301
14302
|
const { setCurrentModal } = useModalStore();
|
|
14302
|
-
const onOpen = () => setCurrentModal(
|
|
14303
|
+
const onOpen = () => setCurrentModal(EntityTypes.Destination);
|
|
14303
14304
|
return (React.createElement(ContentWrapper, null,
|
|
14304
14305
|
React.createElement(SectionTitle, { title: 'Configure destinations', description: 'Select destinations where telemetry data will be sent and configure their settings.' }),
|
|
14305
14306
|
!isLoading && isSourcesListEmpty && (React.createElement(NotificationNoteWrapper, null,
|
|
14306
|
-
React.createElement(NotificationNote, { type:
|
|
14307
|
+
React.createElement(NotificationNote, { type: StatusType.Warning, message: 'No sources selected. Please go back to select sources.', action: {
|
|
14307
14308
|
label: 'Select Sources',
|
|
14308
14309
|
onClick: goToSources,
|
|
14309
14310
|
} }))),
|
|
14310
14311
|
React.createElement(AddDestinationButtonWrapper, null,
|
|
14311
14312
|
React.createElement(StyledAddDestinationButton, { variant: 'secondary', disabled: isLoading, onClick: onOpen },
|
|
14312
14313
|
React.createElement(PlusIcon$1, null),
|
|
14313
|
-
React.createElement(Text, { color: theme.colors.secondary, size: 14, decoration: 'underline', family: 'secondary' }, "ADD
|
|
14314
|
+
React.createElement(Text, { color: theme.colors.secondary, size: 14, decoration: 'underline', family: 'secondary' }, "ADD Destination")),
|
|
14314
14315
|
React.createElement(DestinationModal, { isOnboarding: true, categories: categories, potentialDestinations: potentialDestinations, createDestination: createDestination, testConnection: testConnection, testLoading: testLoading, testResult: testResult })),
|
|
14315
14316
|
isLoading ? (React.createElement(CenterThis, null,
|
|
14316
14317
|
React.createElement(FadeLoader, { scale: 2, cssOverride: { marginTop: '3rem' } }))) : (React.createElement(ConfiguredList, null))));
|
|
@@ -14320,7 +14321,7 @@ const columns$2 = [
|
|
|
14320
14321
|
{ key: 'icon', title: '' },
|
|
14321
14322
|
{ key: 'name', title: DISPLAY_TITLES.NAME, sortable: true },
|
|
14322
14323
|
{ key: 'type', title: DISPLAY_TITLES.TYPE, sortable: true },
|
|
14323
|
-
{ key: 'signals', title: DISPLAY_TITLES.
|
|
14324
|
+
{ key: 'signals', title: DISPLAY_TITLES.Monitors },
|
|
14324
14325
|
{ key: 'conditions', title: 'Conditions' },
|
|
14325
14326
|
{ key: 'throughput', title: 'Throughput', sortable: true },
|
|
14326
14327
|
];
|
|
@@ -14333,7 +14334,7 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
|
|
|
14333
14334
|
const rows = useMemo(() => filtered.map((dest) => {
|
|
14334
14335
|
const { hasErrors, hasWarnings, hasDisableds } = getConditionsBooleans(dest.conditions || []);
|
|
14335
14336
|
return {
|
|
14336
|
-
status: hasErrors ?
|
|
14337
|
+
status: hasErrors ? StatusType.Error : hasWarnings ? StatusType.Warning : undefined,
|
|
14337
14338
|
faded: hasDisableds,
|
|
14338
14339
|
cells: [
|
|
14339
14340
|
{
|
|
@@ -14342,7 +14343,7 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
|
|
|
14342
14343
|
},
|
|
14343
14344
|
{
|
|
14344
14345
|
columnKey: 'name',
|
|
14345
|
-
value: getEntityLabel(dest,
|
|
14346
|
+
value: getEntityLabel(dest, EntityTypes.Destination, { prioritizeDisplayName: true }),
|
|
14346
14347
|
},
|
|
14347
14348
|
{
|
|
14348
14349
|
columnKey: 'type',
|
|
@@ -14351,7 +14352,7 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
|
|
|
14351
14352
|
},
|
|
14352
14353
|
{
|
|
14353
14354
|
columnKey: 'throughput',
|
|
14354
|
-
value: formatBytes(getMetricForEntity(metrics,
|
|
14355
|
+
value: formatBytes(getMetricForEntity(metrics, EntityTypes.Destination, dest.id).throughput),
|
|
14355
14356
|
textColor: theme.text.info,
|
|
14356
14357
|
},
|
|
14357
14358
|
{
|
|
@@ -14369,10 +14370,10 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
|
|
|
14369
14370
|
const badgeTooltip = useMemo(() => (filtered.length !== destinations.length ? DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP : undefined), [filtered, destinations]);
|
|
14370
14371
|
return (React.createElement(TableContainer, { "$maxWidth": maxWidth },
|
|
14371
14372
|
React.createElement(TableTitleWrap, null,
|
|
14372
|
-
React.createElement(IconTitleBadge, { icon: getEntityIcon(
|
|
14373
|
+
React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Destination), title: DISPLAY_TITLES.Destinations, badge: badge, badgeTooltip: badgeTooltip, loading: destinationsLoading })),
|
|
14373
14374
|
React.createElement(TableWrap, { "$maxHeight": maxHeight },
|
|
14374
14375
|
React.createElement(InteractiveTable, { columns: columns$2, rows: rows, onRowClick: (idx) => {
|
|
14375
|
-
setDrawerType(
|
|
14376
|
+
setDrawerType(EntityTypes.Destination);
|
|
14376
14377
|
setDrawerEntityId(filtered[idx].id);
|
|
14377
14378
|
} })),
|
|
14378
14379
|
!filtered.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
|
|
@@ -14383,11 +14384,11 @@ const buildCard$1 = (rule) => {
|
|
|
14383
14384
|
const { type, ruleName, notes, disabled, profileName, payloadCollection, codeAttributes } = rule;
|
|
14384
14385
|
const arr = [
|
|
14385
14386
|
{ title: DISPLAY_TITLES.TYPE, value: type },
|
|
14386
|
-
{ type:
|
|
14387
|
+
{ type: DataCardFieldTypes.ActiveStatus, title: DISPLAY_TITLES.STATUS, value: String(!disabled) },
|
|
14387
14388
|
{ title: DISPLAY_TITLES.NAME, value: ruleName },
|
|
14388
14389
|
{ title: DISPLAY_TITLES.NOTES, value: notes },
|
|
14389
14390
|
{ title: DISPLAY_TITLES.MANAGED_BY_PROFILE, value: profileName },
|
|
14390
|
-
{ type:
|
|
14391
|
+
{ type: DataCardFieldTypes.Divider },
|
|
14391
14392
|
];
|
|
14392
14393
|
if (!!payloadCollection) {
|
|
14393
14394
|
const str = Object.entries(payloadCollection)
|
|
@@ -14422,34 +14423,34 @@ const ListContainer$1 = styled.div `
|
|
|
14422
14423
|
`;
|
|
14423
14424
|
const recommendedList = [
|
|
14424
14425
|
{
|
|
14425
|
-
id:
|
|
14426
|
+
id: CodeAttributesKeyTypes.FilePath,
|
|
14426
14427
|
label: 'Collect File Path',
|
|
14427
14428
|
tooltip: 'Indicates whether to record the `code.filepath` attribute.',
|
|
14428
14429
|
},
|
|
14429
14430
|
{
|
|
14430
|
-
id:
|
|
14431
|
+
id: CodeAttributesKeyTypes.Function,
|
|
14431
14432
|
label: 'Collect Function',
|
|
14432
14433
|
tooltip: 'Indicates whether to record the `code.function` attribute.',
|
|
14433
14434
|
},
|
|
14434
14435
|
{
|
|
14435
|
-
id:
|
|
14436
|
+
id: CodeAttributesKeyTypes.LineNumber,
|
|
14436
14437
|
label: 'Collect Line Number',
|
|
14437
14438
|
tooltip: 'Indicates whether to record the `code.lineno` attribute.',
|
|
14438
14439
|
},
|
|
14439
14440
|
];
|
|
14440
14441
|
const verboseList = [
|
|
14441
14442
|
{
|
|
14442
|
-
id:
|
|
14443
|
+
id: CodeAttributesKeyTypes.Column,
|
|
14443
14444
|
label: 'Collect Column',
|
|
14444
14445
|
tooltip: 'Indicates whether to record the `code.column` attribute.',
|
|
14445
14446
|
},
|
|
14446
14447
|
{
|
|
14447
|
-
id:
|
|
14448
|
+
id: CodeAttributesKeyTypes.Namespace,
|
|
14448
14449
|
label: 'Collect Namespace',
|
|
14449
14450
|
tooltip: 'Indicates whether to record the `code.namespace` attribute.',
|
|
14450
14451
|
},
|
|
14451
14452
|
{
|
|
14452
|
-
id:
|
|
14453
|
+
id: CodeAttributesKeyTypes.StackTrace,
|
|
14453
14454
|
label: 'Collect Stacktrace',
|
|
14454
14455
|
tooltip: 'Indicates whether to record the `code.stacktrace` attribute.',
|
|
14455
14456
|
},
|
|
@@ -14463,12 +14464,12 @@ const CodeAttributes = ({ value, setValue, formErrors }) => {
|
|
|
14463
14464
|
useEffect(() => {
|
|
14464
14465
|
if (!mappedValue.length) {
|
|
14465
14466
|
const payload = {
|
|
14466
|
-
[
|
|
14467
|
-
[
|
|
14468
|
-
[
|
|
14469
|
-
[
|
|
14470
|
-
[
|
|
14471
|
-
[
|
|
14467
|
+
[CodeAttributesKeyTypes.Column]: null,
|
|
14468
|
+
[CodeAttributesKeyTypes.FilePath]: true,
|
|
14469
|
+
[CodeAttributesKeyTypes.Function]: true,
|
|
14470
|
+
[CodeAttributesKeyTypes.LineNumber]: true,
|
|
14471
|
+
[CodeAttributesKeyTypes.Namespace]: null,
|
|
14472
|
+
[CodeAttributesKeyTypes.StackTrace]: null,
|
|
14472
14473
|
};
|
|
14473
14474
|
setValue('codeAttributes', payload);
|
|
14474
14475
|
setIsLastSelection(false);
|
|
@@ -14477,7 +14478,7 @@ const CodeAttributes = ({ value, setValue, formErrors }) => {
|
|
|
14477
14478
|
}, []);
|
|
14478
14479
|
const handleChange = (id, isAdd) => {
|
|
14479
14480
|
const arr = isAdd ? [...mappedValue, id] : mappedValue.filter((str) => str !== id);
|
|
14480
|
-
const payload = Object.values(
|
|
14481
|
+
const payload = Object.values(CodeAttributesKeyTypes).reduce((acc, attribute) => {
|
|
14481
14482
|
// @ts-ignore - TS doesn't know that `acc` is initialized 2 rows below
|
|
14482
14483
|
acc[attribute] = arr.includes(attribute) ? true : null;
|
|
14483
14484
|
return acc;
|
|
@@ -14512,19 +14513,19 @@ const ListContainer = styled.div `
|
|
|
14512
14513
|
`;
|
|
14513
14514
|
const strictPicklist = [
|
|
14514
14515
|
{
|
|
14515
|
-
id:
|
|
14516
|
+
id: PayloadCollectionKeyTypes.HttpRequest,
|
|
14516
14517
|
label: 'Collect HTTP Request',
|
|
14517
14518
|
},
|
|
14518
14519
|
{
|
|
14519
|
-
id:
|
|
14520
|
+
id: PayloadCollectionKeyTypes.HttpResponse,
|
|
14520
14521
|
label: 'Collect HTTP Response',
|
|
14521
14522
|
},
|
|
14522
14523
|
{
|
|
14523
|
-
id:
|
|
14524
|
+
id: PayloadCollectionKeyTypes.DbQuery,
|
|
14524
14525
|
label: 'Collect DB Query',
|
|
14525
14526
|
},
|
|
14526
14527
|
{
|
|
14527
|
-
id:
|
|
14528
|
+
id: PayloadCollectionKeyTypes.Messaging,
|
|
14528
14529
|
label: 'Collect Messaging',
|
|
14529
14530
|
},
|
|
14530
14531
|
];
|
|
@@ -14537,10 +14538,10 @@ const PayloadCollection = ({ value, setValue, formErrors }) => {
|
|
|
14537
14538
|
useEffect(() => {
|
|
14538
14539
|
if (!mappedValue.length) {
|
|
14539
14540
|
const payload = {
|
|
14540
|
-
[
|
|
14541
|
-
[
|
|
14542
|
-
[
|
|
14543
|
-
[
|
|
14541
|
+
[PayloadCollectionKeyTypes.HttpRequest]: {},
|
|
14542
|
+
[PayloadCollectionKeyTypes.HttpResponse]: {},
|
|
14543
|
+
[PayloadCollectionKeyTypes.DbQuery]: {},
|
|
14544
|
+
[PayloadCollectionKeyTypes.Messaging]: {},
|
|
14544
14545
|
};
|
|
14545
14546
|
setValue('payloadCollection', payload);
|
|
14546
14547
|
setIsLastSelection(false);
|
|
@@ -14550,10 +14551,10 @@ const PayloadCollection = ({ value, setValue, formErrors }) => {
|
|
|
14550
14551
|
const handleChange = (id, isAdd) => {
|
|
14551
14552
|
const arr = isAdd ? [...mappedValue, id] : mappedValue.filter((str) => str !== id);
|
|
14552
14553
|
const payload = {
|
|
14553
|
-
[
|
|
14554
|
-
[
|
|
14555
|
-
[
|
|
14556
|
-
[
|
|
14554
|
+
[PayloadCollectionKeyTypes.HttpRequest]: arr.includes(PayloadCollectionKeyTypes.HttpRequest) ? {} : null,
|
|
14555
|
+
[PayloadCollectionKeyTypes.HttpResponse]: arr.includes(PayloadCollectionKeyTypes.HttpResponse) ? {} : null,
|
|
14556
|
+
[PayloadCollectionKeyTypes.DbQuery]: arr.includes(PayloadCollectionKeyTypes.DbQuery) ? {} : null,
|
|
14557
|
+
[PayloadCollectionKeyTypes.Messaging]: arr.includes(PayloadCollectionKeyTypes.Messaging) ? {} : null,
|
|
14557
14558
|
};
|
|
14558
14559
|
setValue('payloadCollection', payload);
|
|
14559
14560
|
setIsLastSelection(arr.length === 1);
|
|
@@ -14565,9 +14566,9 @@ const PayloadCollection = ({ value, setValue, formErrors }) => {
|
|
|
14565
14566
|
};
|
|
14566
14567
|
|
|
14567
14568
|
const componentsMap = {
|
|
14568
|
-
[
|
|
14569
|
-
[
|
|
14570
|
-
[
|
|
14569
|
+
[InstrumentationRuleType.PayloadCollection]: PayloadCollection,
|
|
14570
|
+
[InstrumentationRuleType.CodeAttributes]: CodeAttributes,
|
|
14571
|
+
[InstrumentationRuleType.UnknownType]: null,
|
|
14571
14572
|
};
|
|
14572
14573
|
const CustomFields = ({ ruleType, value, setValue, formErrors }) => {
|
|
14573
14574
|
if (!ruleType)
|
|
@@ -14611,7 +14612,7 @@ const InstrumentationRuleDrawer = ({ updateInstrumentationRule, deleteInstrument
|
|
|
14611
14612
|
const { instrumentationRules } = useEntityStore();
|
|
14612
14613
|
const { addNotification } = useNotificationStore();
|
|
14613
14614
|
const { drawerType, drawerEntityId, setDrawerType, setDrawerEntityId } = useDrawerStore();
|
|
14614
|
-
const isOpen = drawerType !==
|
|
14615
|
+
const isOpen = drawerType !== EntityTypes.InstrumentationRule;
|
|
14615
14616
|
const onClose = () => {
|
|
14616
14617
|
setDrawerType(null);
|
|
14617
14618
|
setDrawerEntityId(null);
|
|
@@ -14633,10 +14634,10 @@ const InstrumentationRuleDrawer = ({ updateInstrumentationRule, deleteInstrument
|
|
|
14633
14634
|
const handleEdit = (bool) => {
|
|
14634
14635
|
if (!thisItem.mutable && (bool || bool === undefined)) {
|
|
14635
14636
|
addNotification({
|
|
14636
|
-
type:
|
|
14637
|
+
type: StatusType.Warning,
|
|
14637
14638
|
title: FORM_ALERTS.FORBIDDEN,
|
|
14638
14639
|
message: FORM_ALERTS.CANNOT_EDIT_RULE,
|
|
14639
|
-
crdType:
|
|
14640
|
+
crdType: EntityTypes.InstrumentationRule,
|
|
14640
14641
|
target: drawerEntityId,
|
|
14641
14642
|
hideFromHistory: true,
|
|
14642
14643
|
});
|
|
@@ -14653,10 +14654,10 @@ const InstrumentationRuleDrawer = ({ updateInstrumentationRule, deleteInstrument
|
|
|
14653
14654
|
const handleDelete = () => {
|
|
14654
14655
|
if (!thisItem.mutable) {
|
|
14655
14656
|
addNotification({
|
|
14656
|
-
type:
|
|
14657
|
+
type: StatusType.Warning,
|
|
14657
14658
|
title: FORM_ALERTS.FORBIDDEN,
|
|
14658
14659
|
message: FORM_ALERTS.CANNOT_DELETE_RULE,
|
|
14659
|
-
crdType:
|
|
14660
|
+
crdType: EntityTypes.InstrumentationRule,
|
|
14660
14661
|
target: drawerEntityId,
|
|
14661
14662
|
hideFromHistory: true,
|
|
14662
14663
|
});
|
|
@@ -14671,7 +14672,7 @@ const InstrumentationRuleDrawer = ({ updateInstrumentationRule, deleteInstrument
|
|
|
14671
14672
|
}
|
|
14672
14673
|
};
|
|
14673
14674
|
const handleSave = (newTitle) => {
|
|
14674
|
-
if (validateForm({ withAlert: true, alertTitle:
|
|
14675
|
+
if (validateForm({ withAlert: true, alertTitle: Crud.Update })) {
|
|
14675
14676
|
const title = newTitle !== thisItem.type ? newTitle : '';
|
|
14676
14677
|
handleFormChange('ruleName', title);
|
|
14677
14678
|
updateInstrumentationRule(drawerEntityId, { ...formData, ruleName: title });
|
|
@@ -14688,7 +14689,7 @@ const InstrumentationRuleDrawer = ({ updateInstrumentationRule, deleteInstrument
|
|
|
14688
14689
|
|
|
14689
14690
|
const InstrumentationRuleModal = ({ isEnterprise, createInstrumentationRule }) => {
|
|
14690
14691
|
const { currentModal, setCurrentModal } = useModalStore();
|
|
14691
|
-
const isOpen = currentModal ===
|
|
14692
|
+
const isOpen = currentModal === EntityTypes.InstrumentationRule;
|
|
14692
14693
|
const { formData, formErrors, handleFormChange, resetFormData, validateForm } = useInstrumentationRuleFormData();
|
|
14693
14694
|
const [selectedItem, setSelectedItem] = useState(undefined);
|
|
14694
14695
|
const handleClose = () => {
|
|
@@ -14701,7 +14702,7 @@ const InstrumentationRuleModal = ({ isEnterprise, createInstrumentationRule }) =
|
|
|
14701
14702
|
setSelectedItem(item);
|
|
14702
14703
|
};
|
|
14703
14704
|
const handleSubmit = () => {
|
|
14704
|
-
const isFormOk = validateForm({ withAlert: true, alertTitle:
|
|
14705
|
+
const isFormOk = validateForm({ withAlert: true, alertTitle: Crud.Create });
|
|
14705
14706
|
if (!isFormOk)
|
|
14706
14707
|
return null;
|
|
14707
14708
|
createInstrumentationRule(formData);
|
|
@@ -14719,7 +14720,7 @@ const InstrumentationRuleModal = ({ isEnterprise, createInstrumentationRule }) =
|
|
|
14719
14720
|
] }) },
|
|
14720
14721
|
React.createElement(ModalBody, null,
|
|
14721
14722
|
React.createElement(SectionTitle, { title: 'Select Instrumentation Rule', description: 'Define how telemetry is recorded from your application. Choose a rule type and configure the details.' }),
|
|
14722
|
-
!isEnterprise && React.createElement(NotificationNote, { type:
|
|
14723
|
+
!isEnterprise && React.createElement(NotificationNote, { type: StatusType.Default, message: FORM_ALERTS.ENTERPRISE_ONLY('Instrumentation Rules'), style: { marginTop: '24px' } }),
|
|
14723
14724
|
React.createElement(AutocompleteInput, { options: INSTRUMENTATION_RULE_OPTIONS, selectedOption: selectedItem, onOptionSelect: (opt) => handleSelect(opt), style: { marginTop: isEnterprise ? '24px' : '12px' }, autoFocus: !selectedItem?.type }),
|
|
14724
14725
|
!!selectedItem?.type ? (React.createElement("div", null,
|
|
14725
14726
|
React.createElement(Divider, { margin: '16px 0' }),
|
|
@@ -14769,7 +14770,7 @@ const InstrumentationRuleTable = ({ maxHeight, maxWidth }) => {
|
|
|
14769
14770
|
},
|
|
14770
14771
|
{
|
|
14771
14772
|
columnKey: 'name',
|
|
14772
|
-
value: getEntityLabel(rule,
|
|
14773
|
+
value: getEntityLabel(rule, EntityTypes.InstrumentationRule, { prioritizeDisplayName: true }),
|
|
14773
14774
|
},
|
|
14774
14775
|
{
|
|
14775
14776
|
columnKey: 'type',
|
|
@@ -14796,22 +14797,22 @@ const InstrumentationRuleTable = ({ maxHeight, maxWidth }) => {
|
|
|
14796
14797
|
{
|
|
14797
14798
|
columnKey: 'active-status',
|
|
14798
14799
|
component: () => (React.createElement("div", { style: { lineHeight: 1 } },
|
|
14799
|
-
React.createElement(Status, { status: rule.disabled ?
|
|
14800
|
+
React.createElement(Status, { status: rule.disabled ? StatusType.Error : StatusType.Success, title: rule.disabled ? 'Inactive' : 'Active', withIcon: true, withBorder: true }))),
|
|
14800
14801
|
},
|
|
14801
14802
|
{
|
|
14802
14803
|
columnKey: 'source-count',
|
|
14803
14804
|
component: () => (React.createElement("div", { style: { lineHeight: 1 } },
|
|
14804
|
-
React.createElement(Status, { status:
|
|
14805
|
+
React.createElement(Status, { status: StatusType.Info, title: 'all sources', withBorder: true }))),
|
|
14805
14806
|
},
|
|
14806
14807
|
],
|
|
14807
14808
|
};
|
|
14808
14809
|
}), [instrumentationRules]);
|
|
14809
14810
|
return (React.createElement(TableContainer, { "$maxWidth": maxWidth },
|
|
14810
14811
|
React.createElement(TableTitleWrap, null,
|
|
14811
|
-
React.createElement(IconTitleBadge, { icon: getEntityIcon(
|
|
14812
|
+
React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Action), title: DISPLAY_TITLES.InstrumentationRules, badge: instrumentationRules.length, loading: instrumentationRulesLoading })),
|
|
14812
14813
|
React.createElement(TableWrap, { "$maxHeight": maxHeight },
|
|
14813
14814
|
React.createElement(InteractiveTable, { columns: columns$1, rows: rows, onRowClick: (idx) => {
|
|
14814
|
-
setDrawerType(
|
|
14815
|
+
setDrawerType(EntityTypes.InstrumentationRule);
|
|
14815
14816
|
setDrawerEntityId(instrumentationRules[idx].ruleId);
|
|
14816
14817
|
} })),
|
|
14817
14818
|
!instrumentationRules.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
|
|
@@ -14866,7 +14867,7 @@ const MultiSourceControl = ({ totalSourceCount, uninstrumentSources }) => {
|
|
|
14866
14867
|
React.createElement(Button, { variant: 'tertiary', onClick: () => setIsWarnModalOpen(true) },
|
|
14867
14868
|
React.createElement(TrashIcon, null),
|
|
14868
14869
|
React.createElement(Text, { family: 'secondary', decoration: 'underline', color: theme.text.error }, "Uninstrument"))),
|
|
14869
|
-
React.createElement(DeleteWarning, { isOpen: isWarnModalOpen, name: `${totalSelected} sources`, type:
|
|
14870
|
+
React.createElement(DeleteWarning, { isOpen: isWarnModalOpen, name: `${totalSelected} sources`, type: EntityTypes.Source, isLastItem: totalSelected === totalSourceCount, onApprove: onDelete, onDeny: () => setIsWarnModalOpen(false) })));
|
|
14870
14871
|
};
|
|
14871
14872
|
|
|
14872
14873
|
const RelativeContainer = styled.div `
|
|
@@ -14995,7 +14996,7 @@ const NotificationListItem = ({ id, seen, type, title, message, time, crdType, t
|
|
|
14995
14996
|
const timeAgo = useTimeAgo();
|
|
14996
14997
|
const { onClickNotification } = useClickNotification();
|
|
14997
14998
|
const canClick = !!crdType && !!target;
|
|
14998
|
-
const isDeleted = title?.toLowerCase().includes(
|
|
14999
|
+
const isDeleted = title?.toLowerCase().includes(Crud.Delete.toLowerCase()) || false;
|
|
14999
15000
|
const Icon = getStatusIcon(type, theme);
|
|
15000
15001
|
return (React.createElement(NotifCard, { key: `notification-${id}`, className: canClick ? 'click-enabled' : '', onClick: () => {
|
|
15001
15002
|
if (canClick) {
|
|
@@ -15003,7 +15004,7 @@ const NotificationListItem = ({ id, seen, type, title, message, time, crdType, t
|
|
|
15003
15004
|
onClickNotification({ id, crdType, target });
|
|
15004
15005
|
}
|
|
15005
15006
|
} },
|
|
15006
|
-
React.createElement(StatusIcon, { "$type": isDeleted ?
|
|
15007
|
+
React.createElement(StatusIcon, { "$type": isDeleted ? StatusType.Error : type }, isDeleted ? React.createElement(TrashIcon, null) : React.createElement(Icon, null)),
|
|
15007
15008
|
React.createElement(NotifTextWrap, null,
|
|
15008
15009
|
React.createElement(NotifHeaderTextWrap, null,
|
|
15009
15010
|
React.createElement(Text, { size: 14 }, message)),
|
|
@@ -15014,24 +15015,24 @@ const NotificationListItem = ({ id, seen, type, title, message, time, crdType, t
|
|
|
15014
15015
|
React.createElement(Text, { size: 10, color: theme.colors.orange_soft }, "new")))))));
|
|
15015
15016
|
};
|
|
15016
15017
|
|
|
15017
|
-
var
|
|
15018
|
-
(function (
|
|
15019
|
-
|
|
15020
|
-
|
|
15021
|
-
|
|
15022
|
-
|
|
15023
|
-
|
|
15024
|
-
})(
|
|
15018
|
+
var NavIconIds;
|
|
15019
|
+
(function (NavIconIds) {
|
|
15020
|
+
NavIconIds["Overview"] = "overview";
|
|
15021
|
+
NavIconIds["InstrumentationRules"] = "instrumentation rule";
|
|
15022
|
+
NavIconIds["Sources"] = "source";
|
|
15023
|
+
NavIconIds["Actions"] = "action";
|
|
15024
|
+
NavIconIds["Destinations"] = "destination";
|
|
15025
|
+
})(NavIconIds || (NavIconIds = {}));
|
|
15025
15026
|
const SideNav = ({ onClickId, defaultSelectedId, extendedNavIcons }) => {
|
|
15026
15027
|
const [selectedId, setSelectedId] = useState(defaultSelectedId || '');
|
|
15027
15028
|
const mainIcons = useMemo(() => [
|
|
15028
15029
|
{
|
|
15029
|
-
id:
|
|
15030
|
+
id: NavIconIds.Overview,
|
|
15030
15031
|
icon: OverviewIcon,
|
|
15031
|
-
selected: selectedId ===
|
|
15032
|
+
selected: selectedId === NavIconIds.Overview,
|
|
15032
15033
|
onClick: () => {
|
|
15033
|
-
setSelectedId(
|
|
15034
|
-
onClickId(
|
|
15034
|
+
setSelectedId(NavIconIds.Overview);
|
|
15035
|
+
onClickId(NavIconIds.Overview);
|
|
15035
15036
|
},
|
|
15036
15037
|
tooltip: 'Overview',
|
|
15037
15038
|
},
|
|
@@ -15044,45 +15045,45 @@ const SideNav = ({ onClickId, defaultSelectedId, extendedNavIcons }) => {
|
|
|
15044
15045
|
},
|
|
15045
15046
|
})),
|
|
15046
15047
|
], [selectedId]);
|
|
15047
|
-
const subIcons = useMemo(() => [
|
|
15048
|
+
const subIcons = useMemo(() => [NavIconIds.Overview, NavIconIds.InstrumentationRules, NavIconIds.Sources, NavIconIds.Actions, NavIconIds.Destinations].includes(selectedId)
|
|
15048
15049
|
? [
|
|
15049
15050
|
{
|
|
15050
|
-
id:
|
|
15051
|
+
id: NavIconIds.InstrumentationRules,
|
|
15051
15052
|
icon: RulesIcon,
|
|
15052
|
-
selected: selectedId ===
|
|
15053
|
+
selected: selectedId === NavIconIds.InstrumentationRules,
|
|
15053
15054
|
onClick: () => {
|
|
15054
|
-
setSelectedId(
|
|
15055
|
-
onClickId(
|
|
15055
|
+
setSelectedId(NavIconIds.InstrumentationRules);
|
|
15056
|
+
onClickId(NavIconIds.InstrumentationRules);
|
|
15056
15057
|
},
|
|
15057
15058
|
tooltip: 'Instrumentation Rules',
|
|
15058
15059
|
},
|
|
15059
15060
|
{
|
|
15060
|
-
id:
|
|
15061
|
+
id: NavIconIds.Sources,
|
|
15061
15062
|
icon: SourcesIcon,
|
|
15062
|
-
selected: selectedId ===
|
|
15063
|
+
selected: selectedId === NavIconIds.Sources,
|
|
15063
15064
|
onClick: () => {
|
|
15064
|
-
setSelectedId(
|
|
15065
|
-
onClickId(
|
|
15065
|
+
setSelectedId(NavIconIds.Sources);
|
|
15066
|
+
onClickId(NavIconIds.Sources);
|
|
15066
15067
|
},
|
|
15067
15068
|
tooltip: 'Sources',
|
|
15068
15069
|
},
|
|
15069
15070
|
{
|
|
15070
|
-
id:
|
|
15071
|
+
id: NavIconIds.Actions,
|
|
15071
15072
|
icon: ActionsIcon,
|
|
15072
|
-
selected: selectedId ===
|
|
15073
|
+
selected: selectedId === NavIconIds.Actions,
|
|
15073
15074
|
onClick: () => {
|
|
15074
|
-
setSelectedId(
|
|
15075
|
-
onClickId(
|
|
15075
|
+
setSelectedId(NavIconIds.Actions);
|
|
15076
|
+
onClickId(NavIconIds.Actions);
|
|
15076
15077
|
},
|
|
15077
15078
|
tooltip: 'Actions',
|
|
15078
15079
|
},
|
|
15079
15080
|
{
|
|
15080
|
-
id:
|
|
15081
|
+
id: NavIconIds.Destinations,
|
|
15081
15082
|
icon: DestinationsIcon,
|
|
15082
|
-
selected: selectedId ===
|
|
15083
|
+
selected: selectedId === NavIconIds.Destinations,
|
|
15083
15084
|
onClick: () => {
|
|
15084
|
-
setSelectedId(
|
|
15085
|
-
onClickId(
|
|
15085
|
+
setSelectedId(NavIconIds.Destinations);
|
|
15086
|
+
onClickId(NavIconIds.Destinations);
|
|
15086
15087
|
},
|
|
15087
15088
|
tooltip: 'Destinations',
|
|
15088
15089
|
},
|
|
@@ -15118,18 +15119,18 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
|
|
|
15118
15119
|
}
|
|
15119
15120
|
return (React.createElement(FlexColumn, { "$gap": 12 }, !describe.pods?.length ? (React.createElement(CenterThis, null,
|
|
15120
15121
|
React.createElement(NoDataFound, { subTitle: 'Check if you have any running pods and try again' }))) : (describe.pods.map(({ podName, nodeName, phase, containers }) => {
|
|
15121
|
-
const podHasErrors = phase.status !==
|
|
15122
|
-
containers.findIndex(({ instrumentationInstances }) => instrumentationInstances.findIndex(({ healthy }) => healthy.status !==
|
|
15123
|
-
const podStatus = podHasErrors ?
|
|
15124
|
-
const divider = { type:
|
|
15122
|
+
const podHasErrors = phase.status !== StatusType.Success ||
|
|
15123
|
+
containers.findIndex(({ instrumentationInstances }) => instrumentationInstances.findIndex(({ healthy }) => healthy.status !== StatusType.Success) !== -1) !== -1;
|
|
15124
|
+
const podStatus = podHasErrors ? StatusType.Error : StatusType.Success;
|
|
15125
|
+
const divider = { type: DataCardFieldTypes.Divider };
|
|
15125
15126
|
return (React.createElement(DataCard, { key: `pod-${podName.value}`, title: `Pod: ${podName.value}`, withExtend: true, action: () => React.createElement(Status, { status: podStatus, title: podStatus, withIcon: true, withBorder: true }), data: [
|
|
15126
15127
|
{
|
|
15127
|
-
type:
|
|
15128
|
+
type: DataCardFieldTypes.CopyText,
|
|
15128
15129
|
value: `kubectl get pod ${podName.value} -n ${describe?.namespace?.value || source.namespace}`,
|
|
15129
15130
|
},
|
|
15130
15131
|
divider,
|
|
15131
15132
|
{
|
|
15132
|
-
type:
|
|
15133
|
+
type: DataCardFieldTypes.DescribeRow,
|
|
15133
15134
|
value: JSON.stringify({
|
|
15134
15135
|
title: nodeName.name,
|
|
15135
15136
|
tooltip: nodeName.explain,
|
|
@@ -15141,7 +15142,7 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
|
|
|
15141
15142
|
},
|
|
15142
15143
|
divider,
|
|
15143
15144
|
{
|
|
15144
|
-
type:
|
|
15145
|
+
type: DataCardFieldTypes.DescribeRow,
|
|
15145
15146
|
value: JSON.stringify({
|
|
15146
15147
|
title: phase.name,
|
|
15147
15148
|
tooltip: phase.explain,
|
|
@@ -15154,7 +15155,7 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
|
|
|
15154
15155
|
divider,
|
|
15155
15156
|
...containers.map((container) => {
|
|
15156
15157
|
return {
|
|
15157
|
-
type:
|
|
15158
|
+
type: DataCardFieldTypes.PodContainer,
|
|
15158
15159
|
value: JSON.stringify({
|
|
15159
15160
|
containerName: container.containerName.value,
|
|
15160
15161
|
actualDevice: {
|
|
@@ -15177,7 +15178,7 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
|
|
|
15177
15178
|
const buildCard = (source) => {
|
|
15178
15179
|
const { name, kind, namespace } = source;
|
|
15179
15180
|
const arr = [
|
|
15180
|
-
{ title: DISPLAY_TITLES.
|
|
15181
|
+
{ title: DISPLAY_TITLES.Namespace, value: namespace },
|
|
15181
15182
|
{ title: DISPLAY_TITLES.KIND, value: kind },
|
|
15182
15183
|
{ title: DISPLAY_TITLES.NAME, value: name, tooltip: 'K8s resource name' },
|
|
15183
15184
|
];
|
|
@@ -15195,11 +15196,11 @@ const SourceForm = ({ formData, handleFormChange }) => {
|
|
|
15195
15196
|
React.createElement(Input, { name: 'sourceName', title: 'Source name', tooltip: 'This overrides the default service name that runs in your cluster.', placeholder: 'Use a name that overrides the source name', value: formData.otelServiceName, onChange: ({ target: { value } }) => handleFormChange('otelServiceName', value) })));
|
|
15196
15197
|
};
|
|
15197
15198
|
|
|
15198
|
-
var
|
|
15199
|
-
(function (
|
|
15200
|
-
|
|
15201
|
-
|
|
15202
|
-
})(
|
|
15199
|
+
var Tabs;
|
|
15200
|
+
(function (Tabs) {
|
|
15201
|
+
Tabs["Overview"] = "Overview";
|
|
15202
|
+
Tabs["Pods"] = "Pods";
|
|
15203
|
+
})(Tabs || (Tabs = {}));
|
|
15203
15204
|
const FormContainer = styled.div `
|
|
15204
15205
|
width: 100%;
|
|
15205
15206
|
height: 100%;
|
|
@@ -15215,10 +15216,10 @@ const DataContainer$1 = styled.div `
|
|
|
15215
15216
|
const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource }) => {
|
|
15216
15217
|
const { sources } = useEntityStore();
|
|
15217
15218
|
const { drawerType, drawerEntityId, setDrawerEntityId, setDrawerType } = useDrawerStore();
|
|
15218
|
-
const [selectedTab, setSelectedTab] = useState(
|
|
15219
|
-
const isOpen = drawerType !==
|
|
15219
|
+
const [selectedTab, setSelectedTab] = useState(Tabs.Overview);
|
|
15220
|
+
const isOpen = drawerType !== EntityTypes.Source;
|
|
15220
15221
|
const onClose = () => {
|
|
15221
|
-
setSelectedTab(
|
|
15222
|
+
setSelectedTab(Tabs.Overview);
|
|
15222
15223
|
setDrawerType(null);
|
|
15223
15224
|
setDrawerEntityId(null);
|
|
15224
15225
|
};
|
|
@@ -15236,7 +15237,7 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource }) =>
|
|
|
15236
15237
|
if (!thisItem)
|
|
15237
15238
|
return null;
|
|
15238
15239
|
const containersData = thisItem.containers?.map((container) => ({
|
|
15239
|
-
type:
|
|
15240
|
+
type: DataCardFieldTypes.SourceContainer,
|
|
15240
15241
|
value: JSON.stringify(container),
|
|
15241
15242
|
})) || [];
|
|
15242
15243
|
const handleEdit = (bool) => {
|
|
@@ -15263,18 +15264,18 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource }) =>
|
|
|
15263
15264
|
setIsEditing(false);
|
|
15264
15265
|
setIsFormDirty(false);
|
|
15265
15266
|
};
|
|
15266
|
-
return (React.createElement(OverviewDrawer, { title: thisItem.otelServiceName || thisItem.name, titleTooltip: 'This attribute is used to identify the name of the service (service.name) that is generating telemetry data.', icon: getEntityIcon(
|
|
15267
|
+
return (React.createElement(OverviewDrawer, { title: thisItem.otelServiceName || thisItem.name, titleTooltip: 'This attribute is used to identify the name of the service (service.name) that is generating telemetry data.', icon: getEntityIcon(EntityTypes.Source), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: selectedTab === Tabs.Overview ? handleEdit : undefined, onSave: handleSave, onDelete: selectedTab === Tabs.Overview ? handleDelete : undefined, onCancel: handleCancel, isLastItem: sources.length === 1, tabs: [
|
|
15267
15268
|
{
|
|
15268
|
-
label:
|
|
15269
|
-
onClick: () => setSelectedTab(
|
|
15270
|
-
selected: selectedTab ===
|
|
15269
|
+
label: Tabs.Overview,
|
|
15270
|
+
onClick: () => setSelectedTab(Tabs.Overview),
|
|
15271
|
+
selected: selectedTab === Tabs.Overview,
|
|
15271
15272
|
},
|
|
15272
15273
|
{
|
|
15273
|
-
label:
|
|
15274
|
-
onClick: () => setSelectedTab(
|
|
15275
|
-
selected: selectedTab ===
|
|
15274
|
+
label: Tabs.Pods,
|
|
15275
|
+
onClick: () => setSelectedTab(Tabs.Pods),
|
|
15276
|
+
selected: selectedTab === Tabs.Pods,
|
|
15276
15277
|
},
|
|
15277
|
-
] }, selectedTab ===
|
|
15278
|
+
] }, selectedTab === Tabs.Overview ? (isEditing ? (React.createElement(FormContainer, null,
|
|
15278
15279
|
React.createElement(SourceForm, { formData: formData, handleFormChange: (...params) => {
|
|
15279
15280
|
setIsFormDirty(true);
|
|
15280
15281
|
handleFormChange(...params);
|
|
@@ -15540,7 +15541,7 @@ const SourceSelectionForm = forwardRef(({ componentType, isModal, namespaces, na
|
|
|
15540
15541
|
|
|
15541
15542
|
const SourceModal = ({ componentType = 'FAST', namespaces, namespace, namespacesLoading, selectedNamespace, setSelectedNamespace, persistSources }) => {
|
|
15542
15543
|
const { currentModal, setCurrentModal } = useModalStore();
|
|
15543
|
-
const isOpen = currentModal ===
|
|
15544
|
+
const isOpen = currentModal === EntityTypes.Source;
|
|
15544
15545
|
const onSelectNamespace = (ns) => {
|
|
15545
15546
|
setSelectedNamespace((prev) => (prev === ns ? '' : ns));
|
|
15546
15547
|
};
|
|
@@ -15571,7 +15572,7 @@ const columns = [
|
|
|
15571
15572
|
{ key: 'checkbox-and-icon', title: '' },
|
|
15572
15573
|
{ key: 'name', title: DISPLAY_TITLES.NAME, sortable: true },
|
|
15573
15574
|
{ key: 'type', title: 'Kubernetes Type', sortable: true },
|
|
15574
|
-
{ key: 'namespace', title: DISPLAY_TITLES.
|
|
15575
|
+
{ key: 'namespace', title: DISPLAY_TITLES.Namespace, sortable: true },
|
|
15575
15576
|
{ key: 'containers', title: DISPLAY_TITLES.DETECTED_CONTAINERS },
|
|
15576
15577
|
{ key: 'conditions', title: 'Conditions' },
|
|
15577
15578
|
{ key: 'throughput', title: 'Throughput', sortable: true },
|
|
@@ -15605,7 +15606,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
|
|
|
15605
15606
|
const payload = {};
|
|
15606
15607
|
filtered.forEach((source) => {
|
|
15607
15608
|
const id = { namespace: source.namespace, name: source.name, kind: source.kind };
|
|
15608
|
-
const isPending = isThisPending({ entityType:
|
|
15609
|
+
const isPending = isThisPending({ entityType: EntityTypes.Source, entityId: id });
|
|
15609
15610
|
if (!isPending) {
|
|
15610
15611
|
if (!payload[source.namespace]) {
|
|
15611
15612
|
payload[source.namespace] = [source];
|
|
@@ -15638,10 +15639,10 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
|
|
|
15638
15639
|
const rows = useMemo(() => filtered.map((source) => {
|
|
15639
15640
|
const id = { namespace: source.namespace, name: source.name, kind: source.kind };
|
|
15640
15641
|
const { hasErrors, hasWarnings, hasDisableds } = getConditionsBooleans(source.conditions || []);
|
|
15641
|
-
const isPending = isThisPending({ entityType:
|
|
15642
|
+
const isPending = isThisPending({ entityType: EntityTypes.Source, entityId: id });
|
|
15642
15643
|
const isChecked = !!selectedSources[id.namespace]?.find((x) => x.namespace === id.namespace && x.name === id.name && x.kind === id.kind);
|
|
15643
15644
|
return {
|
|
15644
|
-
status: hasErrors ?
|
|
15645
|
+
status: hasErrors ? StatusType.Error : hasWarnings ? StatusType.Warning : undefined,
|
|
15645
15646
|
faded: hasDisableds,
|
|
15646
15647
|
cells: [
|
|
15647
15648
|
{
|
|
@@ -15652,7 +15653,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
|
|
|
15652
15653
|
},
|
|
15653
15654
|
{
|
|
15654
15655
|
columnKey: 'name',
|
|
15655
|
-
value: getEntityLabel(source,
|
|
15656
|
+
value: getEntityLabel(source, EntityTypes.Source, { extended: true }),
|
|
15656
15657
|
},
|
|
15657
15658
|
{
|
|
15658
15659
|
columnKey: 'type',
|
|
@@ -15666,7 +15667,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
|
|
|
15666
15667
|
},
|
|
15667
15668
|
{
|
|
15668
15669
|
columnKey: 'throughput',
|
|
15669
|
-
value: formatBytes(getMetricForEntity(metrics,
|
|
15670
|
+
value: formatBytes(getMetricForEntity(metrics, EntityTypes.Source, id).throughput),
|
|
15670
15671
|
textColor: theme.text.info,
|
|
15671
15672
|
},
|
|
15672
15673
|
{
|
|
@@ -15676,7 +15677,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
|
|
|
15676
15677
|
{
|
|
15677
15678
|
columnKey: 'containers',
|
|
15678
15679
|
component: () => (React.createElement("div", { style: { lineHeight: 1 } },
|
|
15679
|
-
React.createElement(Status, { status:
|
|
15680
|
+
React.createElement(Status, { status: StatusType.Info, title: getContainersInstrumentedCount(source.containers), withBorder: true }))),
|
|
15680
15681
|
},
|
|
15681
15682
|
],
|
|
15682
15683
|
};
|
|
@@ -15686,10 +15687,10 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
|
|
|
15686
15687
|
return (React.createElement(TableContainer, { "$maxWidth": maxWidth },
|
|
15687
15688
|
React.createElement(TableTitleWrap, null,
|
|
15688
15689
|
React.createElement(Checkbox, { partiallyChecked: hasSelected && filtered?.length !== totalSelectedSources, value: hasSelected && filtered?.length === totalSelectedSources, onChange: onSelectAll, disabled: !filtered?.length }),
|
|
15689
|
-
React.createElement(IconTitleBadge, { icon: getEntityIcon(
|
|
15690
|
+
React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Source), title: DISPLAY_TITLES.Sources, badge: badge, badgeTooltip: badgeTooltip, loading: sourcesLoading && !isAwaitingInstrumentation })),
|
|
15690
15691
|
React.createElement(TableWrap, { "$maxHeight": maxHeight },
|
|
15691
15692
|
React.createElement(InteractiveTable, { columns: columns, rows: isAwaitingInstrumentation ? [] : rows, onRowClick: (idx) => {
|
|
15692
|
-
setDrawerType(
|
|
15693
|
+
setDrawerType(EntityTypes.Source);
|
|
15693
15694
|
setDrawerEntityId({ namespace: filtered[idx].namespace, name: filtered[idx].name, kind: filtered[idx].kind });
|
|
15694
15695
|
} })),
|
|
15695
15696
|
isAwaitingInstrumentation ? (React.createElement(CenterThis, { style: { marginTop: '2rem', gap: '24px' } },
|
|
@@ -15754,7 +15755,7 @@ const TokenActions = ({ token, saveToken }) => {
|
|
|
15754
15755
|
setIsEdit(false);
|
|
15755
15756
|
setInputValue(token);
|
|
15756
15757
|
};
|
|
15757
|
-
const SuccessIcon = getStatusIcon(
|
|
15758
|
+
const SuccessIcon = getStatusIcon(StatusType.Success, theme);
|
|
15758
15759
|
useOnClickOutside(popupRef, onCloseEdit);
|
|
15759
15760
|
return (React.createElement(FlexRow, { "$gap": 0 },
|
|
15760
15761
|
React.createElement(IconButton, { size: 32, onClick: () => clickCopy(token) }, isCopied ? React.createElement(SuccessIcon, null) : React.createElement(CopyIcon, null)),
|
|
@@ -15777,7 +15778,7 @@ const TokenActions = ({ token, saveToken }) => {
|
|
|
15777
15778
|
const Tokens = ({ tokens, saveToken }) => {
|
|
15778
15779
|
return (React.createElement(DataCard, { title: 'Authorization Tokens', titleBadge: tokens.length, data: [
|
|
15779
15780
|
{
|
|
15780
|
-
type:
|
|
15781
|
+
type: DataCardFieldTypes.Table,
|
|
15781
15782
|
value: {
|
|
15782
15783
|
columns: [
|
|
15783
15784
|
{ key: 'icon', title: '' },
|
|
@@ -15820,10 +15821,10 @@ const Describe = ({ fetchDescribeOdigos }) => {
|
|
|
15820
15821
|
const mapObjectToCardFields = (obj) => !!obj?.name
|
|
15821
15822
|
? [
|
|
15822
15823
|
{
|
|
15823
|
-
type:
|
|
15824
|
+
type: DataCardFieldTypes.Divider,
|
|
15824
15825
|
},
|
|
15825
15826
|
{
|
|
15826
|
-
type:
|
|
15827
|
+
type: DataCardFieldTypes.DescribeRow,
|
|
15827
15828
|
value: JSON.stringify({
|
|
15828
15829
|
title: obj.name,
|
|
15829
15830
|
subTitle: obj.explain,
|
|
@@ -15950,4 +15951,4 @@ const ToggleDarkMode = () => {
|
|
|
15950
15951
|
React.createElement(Background, { "$darkMode": darkMode })));
|
|
15951
15952
|
};
|
|
15952
15953
|
|
|
15953
|
-
export { ActionDrawer, ActionForm, ActionModal, ActionTable, AwaitPipeline, ComputePlatformSelect, ComputePlatforms, ComputePlatformsActionsMenu, ConnectionStatusDropdown, ConnectionTypeDropdown, DataFlow, DataFlowActionsMenu, DestinationDrawer, DestinationForm, DestinationModal, DestinationSelectionForm, DestinationTable, ErrorDropdown, InstrumentationRuleDrawer, InstrumentationRuleForm, InstrumentationRuleModal, InstrumentationRuleTable, KindDropdown, LanguageDropdown, MonitorDropdown, MultiSourceControl,
|
|
15954
|
+
export { ActionDrawer, ActionForm, ActionModal, ActionTable, AwaitPipeline, ComputePlatformSelect, ComputePlatforms, ComputePlatformsActionsMenu, ConnectionStatusDropdown, ConnectionTypeDropdown, DataFlow, DataFlowActionsMenu, DestinationDrawer, DestinationForm, DestinationModal, DestinationSelectionForm, DestinationTable, ErrorDropdown, InstrumentationRuleDrawer, InstrumentationRuleForm, InstrumentationRuleModal, InstrumentationRuleTable, KindDropdown, LanguageDropdown, MonitorDropdown, MultiSourceControl, NamespaceDropdown, NavIconIds, NotificationManager, OverviewDrawer, SideNav, SlackInvite, SourceDrawer, SourceForm, SourceModal, SourceSelectionForm, SourceTable, SystemOverview, ToastList, ToggleDarkMode };
|