[GEN-1513]: actions modal form

frontend/webapp/components/overview/actions/actions.table/actions.table.row.tsx

@@ -6,7 +6,7 @@ import styled, { css } from 'styled-components';
 import { KeyvalCheckbox, KeyvalText } from '@/design.system';
 import ActionRowDynamicContent from './action.row.dynamic.content';
 import { TapList } from '@/components/setup/destination/tap.list/tap.list';
-import { MONITORING_OPTIONS } from '@/components/setup/destination/utils';
+import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
 import { ActionIcon } from '../action.icon';
 
 const StyledTr = styled.tr`

frontend/webapp/components/overview/destination/manage.destination.header/manage.destination.header.tsx

@@ -3,18 +3,15 @@ import styled from 'styled-components';
 import { KeyvalImage, KeyvalText } from '@/design.system';
 import theme from '@/styles/palette';
 import { LinkIcon } from '@keyval-dev/design-system';
+import { DOCS_LINK } from '@/utils';
 
 const ManageDestinationHeaderWrapper = styled.div`
   display: flex;
   height: 104px;
   align-items: center;
   border-radius: 25px;
   margin: 24px 0;
-  background: radial-gradient(
-      78.09% 72.18% at 100% -0%,
-      rgba(150, 242, 255, 0.4) 0%,
-      rgba(150, 242, 255, 0) 61.91%
-    ),
+  background: radial-gradient(78.09% 72.18% at 100% -0%, rgba(150, 242, 255, 0.4) 0%, rgba(150, 242, 255, 0) 61.91%),
     linear-gradient(180deg, #2e4c55 0%, #303355 100%);
 `;
 
@@ -27,25 +24,17 @@ const IMAGE_STYLE: React.CSSProperties = {
   marginLeft: 16,
 };
 
-export function ManageDestinationHeader({
-  data: { image_url, display_name, type },
-}) {
+export function ManageDestinationHeader({ data: { image_url, display_name, type } }) {
   return (
     <ManageDestinationHeaderWrapper>
       <KeyvalImage src={image_url} style={IMAGE_STYLE} />
       <TextWrapper>
         <KeyvalText size={24} weight={700}>
           {display_name}
         </KeyvalText>
-        <div
-          style={{ cursor: 'pointer' }}
-          onClick={() =>
-            window.open(`https://docs.odigos.io/backends/${type}`, '_blank')
-          }
-        >
+        <div style={{ cursor: 'pointer' }} onClick={() => window.open(`${DOCS_LINK}/backends/${type}`, '_blank')}>
           <KeyvalText style={{ display: 'flex', gap: 3 }}>
-            find out more about {display_name} in{' '}
-            <a style={{ color: theme.colors.torquiz_light }}>our docs</a>
+            find out more about {display_name} in <a style={{ color: theme.colors.torquiz_light }}>our docs</a>
             <LinkIcon style={{ marginTop: 2 }} />
           </KeyvalText>
         </div>

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';
 

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,

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<ActionCustomFieldsProps> = ({ actionType, value, setValue }) => {
+  switch (actionType) {
+    case ActionsType.ADD_CLUSTER_INFO:
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to add</FieldTitle>
+          <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
+        </FieldWrapper>
+      );
+
+    case ActionsType.DELETE_ATTRIBUTES:
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to delete</FieldTitle>
+          <InputList required value={value} onChange={(arr) => setValue(arr)} />
+        </FieldWrapper>
+      );
+
+    case ActionsType.RENAME_ATTRIBUTES:
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to rename</FieldTitle>
+          <KeyValueInputsList required value={value} onChange={(arr) => setValue(arr)} />
+        </FieldWrapper>
+      );
+
+    case ActionsType.PII_MASKING:
+      return (
+        <FieldWrapper>
+          <FieldTitle>Attributes to mask</FieldTitle>
+          <InputList required value={value} onChange={(arr) => setValue(arr)} />
+        </FieldWrapper>
+      );
+
+    case ActionsType.ERROR_SAMPLER:
+      return null;
+
+    case ActionsType.PROBABILISTIC_SAMPLER:
+      return null;
+
+    case ActionsType.LATENCY_SAMPLER:
+      return null;
+
+    default:
+      return null;
+  }
+};
+
+export default ActionCustomFields;

frontend/webapp/containers/main/actions/choose-action-body/index.tsx

@@ -0,0 +1,79 @@
+import styled from 'styled-components';
+import React, { useEffect } from 'react';
+import ActionCustomFields from './action-custom-fields';
+import { useActionFormData } from '@/hooks/actions/useActionFormData';
+import { MONITORING_OPTIONS } from '@/utils/constants/monitors';
+import { type ActionOption } from '../choose-action-modal/action-options';
+import { CheckboxList, DocsButton, Input, Text, TextArea } from '@/reuseable-components';
+
+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;
+}
+
+const ChooseActionBody: React.FC<ChooseActionContentProps> = ({ action }) => {
+  const { formData, handleFormChange, resetFormData, exportedSignals, setExportedSignals } = useActionFormData();
+
+  useEffect(() => {
+    return () => {
+      resetFormData();
+    };
+  }, []);
+
+  return (
+    <>
+      <Description>
+        {action.docsDescription}
+        <DocsButton endpoint={action.docsEndpoint} />
+      </Description>
+
+      <FieldWrapper>
+        <FieldTitle>Monitoring</FieldTitle>
+        <CheckboxList
+          monitors={MONITORING_OPTIONS}
+          exportedSignals={exportedSignals}
+          handleSignalChange={(id, val) => {
+            const found = MONITORING_OPTIONS.find((item) => item.id === id);
+            if (found) setExportedSignals((prev) => ({ ...prev, [found.type]: val }));
+          }}
+        />
+      </FieldWrapper>
+
+      <FieldWrapper>
+        <FieldTitle>Action name</FieldTitle>
+        <Input
+          placeholder='Use a name that describes the action'
+          value={formData.name}
+          onChange={({ target: { value } }) => handleFormChange('name', value)}
+        />
+      </FieldWrapper>
+
+      <ActionCustomFields
+        actionType={action.type}
+        value={formData.details ? JSON.parse(formData.details) : undefined}
+        setValue={(val) => handleFormChange('details', JSON.stringify(val))}
+      />
+
+      <FieldWrapper>
+        <FieldTitle>Notes</FieldTitle>
+        <TextArea value={formData.notes} onChange={({ target: { value } }) => handleFormChange('notes', value)} />
+      </FieldWrapper>
+    </>
+  );
+};
+
+export { ChooseActionBody };

frontend/webapp/containers/main/actions/choose-action-modal/action-options.ts

@@ -1,58 +1,85 @@
 import { ActionsType } from '@/types';
 
-export const ACTION_OPTIONS = [
+export type ActionOption = {
+  id: string;
+  type?: ActionsType;
+  label: string;
+  description?: string;
+  docsEndpoint?: string;
+  docsDescription?: string;
+  icon?: string;
+  items?: ActionOption[];
+};
+
+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.',
   },
   {
     id: 'delete_attribute',
     label: 'Delete Attribute',
     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.',
   },
   {
     id: 'rename_attribute',
     label: 'Rename Attribute',
     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.',
   },
   {
     id: 'pii-masking',
     label: 'PII Masking',
     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.',
   },
   {
     id: 'sampler',
     label: 'Samplers',
-    description: '',
-    type: ActionsType.PROBABILISTIC_SAMPLER,
     icon: '/icons/actions/sampler.svg',
     items: [
       {
         id: 'error-sampler',
         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.',
       },
       {
         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.',
       },
       {
         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.',
       },
     ],
   },