- window.open(`https://docs.odigos.io/backends/${type}`, '_blank')
- }
- >
+
window.open(`${DOCS_LINK}/backends/${type}`, '_blank')}>
- find out more about {display_name} in{' '}
- our docs
+ find out more about {display_name} in our docs
diff --git a/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx b/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx
index 3112f6964..7963c7861 100644
--- a/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx
+++ b/frontend/webapp/components/overview/destination/managed.destination.table/destinations.table.row.tsx
@@ -3,7 +3,7 @@ import theme from '@/styles/palette';
import { Destination } from '@/types';
import styled, { css } from 'styled-components';
import { KeyvalImage, KeyvalText } from '@/design.system';
-import { MONITORING_OPTIONS } from '@/components/setup/destination/utils';
+import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
import { TapList } from '@/components/setup/destination/tap.list/tap.list';
import { ConditionCheck } from '@/components/common';
diff --git a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
index 163416787..a8586dac7 100644
--- a/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
+++ b/frontend/webapp/components/setup/destination/destination.card/destination.card.tsx
@@ -1,7 +1,7 @@
import React, { useMemo } from 'react';
import { KeyvalCard, KeyvalImage, KeyvalText } from '@/design.system';
import { TapList } from '../tap.list/tap.list';
-import { MONITORING_OPTIONS } from '../utils';
+import { MONITORING_OPTIONS } from '../../../../utils/constants/monitors';
import {
ApplicationNameWrapper,
DestinationCardContentWrapper,
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
new file mode 100644
index 000000000..c3c94f01b
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/action-custom-fields.tsx
@@ -0,0 +1,68 @@
+import styled from 'styled-components';
+import { InputList, KeyValueInputsList, Text } from '@/reuseable-components';
+import { ActionsType } from '@/types';
+
+interface ActionCustomFieldsProps {
+ actionType?: ActionsType;
+ value: any;
+ setValue: (value: any) => void;
+}
+
+const FieldWrapper = styled.div`
+ width: 100%;
+ margin: 8px 0;
+`;
+
+const FieldTitle = styled(Text)`
+ margin-bottom: 12px;
+`;
+
+const ActionCustomFields: React.FC
= ({ actionType, value, setValue }) => {
+ switch (actionType) {
+ case ActionsType.ADD_CLUSTER_INFO:
+ return (
+
+ Attributes to add
+ setValue(arr)} />
+
+ );
+
+ case ActionsType.DELETE_ATTRIBUTES:
+ return (
+
+ Attributes to delete
+ setValue(arr)} />
+
+ );
+
+ case ActionsType.RENAME_ATTRIBUTES:
+ return (
+
+ Attributes to rename
+ setValue(arr)} />
+
+ );
+
+ case ActionsType.PII_MASKING:
+ return (
+
+ Attributes to mask
+ setValue(arr)} />
+
+ );
+
+ case ActionsType.ERROR_SAMPLER:
+ return null;
+
+ case ActionsType.PROBABILISTIC_SAMPLER:
+ return null;
+
+ case ActionsType.LATENCY_SAMPLER:
+ return null;
+
+ default:
+ return null;
+ }
+};
+
+export default ActionCustomFields;
diff --git a/frontend/webapp/containers/main/actions/choose-action-body/index.tsx b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
new file mode 100644
index 000000000..682a4bfb4
--- /dev/null
+++ b/frontend/webapp/containers/main/actions/choose-action-body/index.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import styled from 'styled-components';
+import ActionCustomFields from './action-custom-fields';
+import { ActionFormData } from '@/hooks/actions/useActionFormData';
+import { type ActionOption } from '../choose-action-modal/action-options';
+import { DocsButton, Input, Text, TextArea } from '@/reuseable-components';
+import { MonitoringCheckboxes } from '@/reuseable-components/monitoring-checkboxes';
+
+const Description = styled(Text)`
+ color: ${({ theme }) => theme.text.grey};
+ line-height: 150%;
+ display: flex;
+`;
+
+const FieldWrapper = styled.div`
+ width: 100%;
+ margin: 8px 0;
+`;
+
+const FieldTitle = styled(Text)`
+ margin-bottom: 12px;
+`;
+
+interface ChooseActionContentProps {
+ action: ActionOption;
+ formData: ActionFormData;
+ handleFormChange: (key: keyof ActionFormData, val: any) => void;
+}
+
+const ChooseActionBody: React.FC = ({ action, formData, handleFormChange }) => {
+ return (
+ <>
+
+ {action.docsDescription}
+
+
+
+
+ handleFormChange('signals', value)}
+ />
+
+
+
+ Action name
+ handleFormChange('name', value)}
+ />
+
+
+ handleFormChange('details', JSON.stringify(val))}
+ />
+
+
+ Notes
+
+ >
+ );
+};
+
+export { ChooseActionBody };
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
index b0e342e3c..8b9f31f7b 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts
@@ -1,12 +1,29 @@
import { ActionsType } from '@/types';
+import { SignalLowercase } from '@/utils';
-export const ACTION_OPTIONS = [
+export type ActionOption = {
+ id: string;
+ type?: ActionsType;
+ label: string;
+ description?: string;
+ docsEndpoint?: string;
+ docsDescription?: string;
+ icon?: string;
+ items?: ActionOption[];
+ allowedSignals?: SignalLowercase[];
+};
+
+export const ACTION_OPTIONS: ActionOption[] = [
{
id: 'add_cluster_info',
label: 'Add Cluster Info',
description: 'Add static cluster-scoped attributes to your data.',
type: ActionsType.ADD_CLUSTER_INFO,
icon: '/icons/actions/addclusterinfo.svg',
+ docsEndpoint: '/pipeline/actions/attributes/addclusterinfo',
+ docsDescription:
+ 'The “Add Cluster Info” Odigos Action can be used to add resource attributes to telemetry signals originated from the k8s cluster where the Odigos is running.',
+ allowedSignals: ['traces', 'metrics', 'logs'],
},
{
id: 'delete_attribute',
@@ -14,6 +31,9 @@ export const ACTION_OPTIONS = [
description: 'Delete attributes from logs, metrics, and traces.',
type: ActionsType.DELETE_ATTRIBUTES,
icon: '/icons/actions/deleteattribute.svg',
+ docsEndpoint: '/pipeline/actions/attributes/deleteattribute',
+ docsDescription: 'The “Delete Attribute” Odigos Action can be used to delete attributes from logs, metrics, and traces.',
+ allowedSignals: ['traces', 'metrics', 'logs'],
},
{
id: 'rename_attribute',
@@ -21,6 +41,10 @@ export const ACTION_OPTIONS = [
description: 'Rename attributes in logs, metrics, and traces.',
type: ActionsType.RENAME_ATTRIBUTES,
icon: '/icons/actions/renameattribute.svg',
+ docsEndpoint: '/pipeline/actions/attributes/rename-attribute',
+ docsDescription:
+ 'The “Rename Attribute” Odigos Action can be used to rename attributes from logs, metrics, and traces. Different instrumentations might use different attribute names for similar information. This action let’s you to consolidate the names across your cluster.',
+ allowedSignals: ['traces', 'metrics', 'logs'],
},
{
id: 'pii-masking',
@@ -28,12 +52,13 @@ export const ACTION_OPTIONS = [
description: 'Mask PII data in your traces.',
type: ActionsType.PII_MASKING,
icon: '/icons/actions/piimasking.svg',
+ docsEndpoint: '/pipeline/actions/attributes/piimasking',
+ docsDescription: 'The “PII Masking” Odigos Action can be used to mask PII data from span attribute values.',
+ allowedSignals: ['traces'],
},
{
id: 'sampler',
label: 'Samplers',
- description: '',
- type: ActionsType.PROBABILISTIC_SAMPLER,
icon: '/icons/actions/sampler.svg',
items: [
{
@@ -41,18 +66,29 @@ export const ACTION_OPTIONS = [
label: 'Error Sampler',
description: 'Sample errors based on percentage.',
type: ActionsType.ERROR_SAMPLER,
+ docsEndpoint: '/pipeline/actions/sampling/errorsampler',
+ docsDescription: 'The “Error Sampler” Odigos Action is a Global Action that supports error sampling by filtering out non-error traces.',
+ allowedSignals: ['traces'],
},
{
id: 'probabilistic-sampler',
label: 'Probabilistic Sampler',
description: 'Sample traces based on percentage.',
type: ActionsType.PROBABILISTIC_SAMPLER,
+ docsEndpoint: '/pipeline/actions/sampling/probabilisticsampler',
+ docsDescription:
+ 'The “Probabilistic Sampler” Odigos Action supports probabilistic sampling based on a configured sampling percentage applied to the TraceID.',
+ allowedSignals: ['traces'],
},
{
id: 'latency-action',
label: 'Latency Action',
description: 'Add latency to your traces.',
type: ActionsType.LATENCY_SAMPLER,
+ docsEndpoint: '/pipeline/actions/sampling/latencysampler',
+ docsDescription:
+ 'The “Latency Sampler” Odigos Action is an Endpoint Action that samples traces based on their duration for a specific service and endpoint (HTTP route) filter.',
+ allowedSignals: ['traces'],
},
],
},
diff --git a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
index 977d632b2..65cca01e8 100644
--- a/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
+++ b/frontend/webapp/containers/main/actions/choose-action-modal/index.tsx
@@ -1,21 +1,19 @@
-import React, { useRef, useCallback } from 'react';
-import {
- AutocompleteInput,
- Modal,
- NavigationButtons,
- Text,
-} from '@/reuseable-components';
import styled from 'styled-components';
-import { ACTION_OPTIONS } from './action-options';
+import React, { useRef, useState } from 'react';
+import { useActionFormData } from '@/hooks/actions';
+import { ChooseActionBody } from '../choose-action-body';
+import { ACTION_OPTIONS, type ActionOption } from './action-options';
+import { AutocompleteInput, Modal, NavigationButtons, Text, Divider, Option } from '@/reuseable-components';
const DefineActionContainer = styled.section`
height: 640px;
padding: 0px 220px;
display: flex;
flex-direction: column;
+ overflow-y: scroll;
`;
-const HeaderWrapper = styled.div`
+const WidthConstraint = styled.div`
display: flex;
flex-direction: column;
justify-content: flex-start;
@@ -39,53 +37,59 @@ interface ModalActionComponentProps {
onNext: () => void;
}
-const ModalActionComponent: React.FC = React.memo(
- ({ onNext }) => {
- const buttons = [
- {
- label: 'DONE',
- onClick: onNext,
- variant: 'primary' as const,
- },
- ];
+const ModalActionComponent: React.FC = React.memo(({ onNext }) => {
+ const buttons = [
+ {
+ label: 'DONE',
+ onClick: onNext,
+ variant: 'primary' as const,
+ },
+ ];
- return ;
- }
-);
+ return ;
+});
-export const AddActionModal: React.FC = ({
- isModalOpen,
- handleCloseModal,
-}) => {
+export const AddActionModal: React.FC = ({ isModalOpen, handleCloseModal }) => {
const submitRef = useRef<(() => void) | null>(null);
+ const [selectedItem, setSelectedItem] = useState(null);
+ const { formData, handleFormChange, resetFormData } = useActionFormData();
- const handleNext = useCallback(() => {
+ const handleNext = () => {
if (submitRef.current) {
handleCloseModal();
}
- }, [handleCloseModal]);
+ };
- const handleClose = useCallback(() => {
+ const handleClose = () => {
handleCloseModal();
- }, [handleCloseModal]);
+ setSelectedItem(null);
+ };
+
+ const handleSelect = (item: Option) => {
+ resetFormData();
+ setSelectedItem(item);
+ };
return (
- }
- header={{ title: 'Add Action' }}
- onClose={handleClose}
- >
+ } header={{ title: 'Add Action' }} onClose={handleClose}>
-
+