[ TASK-1024 ] feat: pii masking (#1358)

add a new action that gives the user the ability to mask PII categories

frontend/webapp/components/overview/actions/action.icon/index.tsx

@@ -7,6 +7,7 @@ import {
   RenameAttributeIcon,
   ProbabilisticSamplerIcon,
   LatencySamplerIcon,
+  PiiMaskingIcon,
 } from '@keyval-dev/design-system';
 
 export function ActionIcon({ type, ...props }) {
@@ -23,6 +24,8 @@ export function ActionIcon({ type, ...props }) {
       return <ProbabilisticSamplerIcon {...props} />;
     case ActionsType.LATENCY_SAMPLER:
       return <LatencySamplerIcon {...props} />;
+    case ActionsType.PII_MASKING:
+      return <PiiMaskingIcon {...props} />;
     default:
       return null;
   }

frontend/webapp/components/overview/actions/actions.forms/dynamic.action.form/index.tsx

@@ -9,6 +9,7 @@ import {
   LatencySamplerForm,
   ProbabilisticSamplerForm,
 } from '../samplers';
+import { PiiMaskingForm } from '../pii-masking';
 
 interface DynamicActionFormProps {
   type: string | undefined;
@@ -43,6 +44,14 @@ export function DynamicActionForm({
             setIsFormValid={setIsFormValid}
           />
         );
+      case ActionsType.PII_MASKING:
+        return (
+          <PiiMaskingForm
+            data={data}
+            onChange={onChange}
+            setIsFormValid={setIsFormValid}
+          />
+        );
       default:
         return <div></div>;
     }

frontend/webapp/components/overview/actions/actions.forms/pii-masking/index.tsx

@@ -0,0 +1,67 @@
+import { KeyvalCheckbox } from '@/design.system';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+
+const piiCategoriesCheckbox = [
+  {
+    id: 'CREDIT_CARD',
+    label: 'Credit Card',
+  },
+];
+
+const FormWrapper = styled.div`
+  width: 375px;
+`;
+
+interface PiiMasking {
+  piiCategories: string[];
+}
+
+interface PiiMaskingProps {
+  data: PiiMasking;
+  onChange: (key: string, value: PiiMasking | null) => void;
+  setIsFormValid?: (isValid: boolean) => void;
+}
+const ACTION_DATA_KEY = 'actionData';
+export function PiiMaskingForm({
+  data,
+  onChange,
+  setIsFormValid,
+}: PiiMaskingProps): React.JSX.Element {
+  useEffect(() => {
+    onChange(ACTION_DATA_KEY, {
+      piiCategories: ['CREDIT_CARD'],
+    });
+    setIsFormValid && setIsFormValid(true);
+  }, []);
+
+  function handleOnChange(value: string): void {
+    let piiCategories: string[] = [];
+
+    if (piiCategories.includes(value)) {
+      piiCategories = piiCategories.filter((category) => category !== value);
+    } else {
+      piiCategories.push(value);
+    }
+
+    onChange(ACTION_DATA_KEY, {
+      piiCategories,
+    });
+  }
+
+  return (
+    <>
+      <FormWrapper>
+        {piiCategoriesCheckbox.map((checkbox) => (
+          <KeyvalCheckbox
+            disabled
+            key={checkbox?.id}
+            value={data?.piiCategories?.includes(checkbox?.id)}
+            onChange={() => handleOnChange(checkbox?.id)}
+            label={checkbox?.label}
+          />
+        ))}
+      </FormWrapper>
+    </>
+  );
+}

frontend/webapp/components/overview/actions/actions.table/action.row.dynamic.content/index.tsx

@@ -48,6 +48,16 @@ export default function ActionRowDynamicContent({
             {`${item?.spec?.endpoints_filters.length} endpoints`}
           </KeyvalText>
         );
+      case ActionsType.PII_MASKING:
+        return (
+          <KeyvalText color={theme.text.grey} size={14} weight={400}>
+            {`${
+              item?.spec?.piiCategories.length === 1
+                ? '1 category'
+                : `${item?.spec?.piiCategories.length} categories`
+            }`}
+          </KeyvalText>
+        );
       default:
         return <div>{item.type}</div>;
     }

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

@@ -54,6 +54,13 @@ const ITEMS = [
     type: ActionsType.LATENCY_SAMPLER,
     icon: ActionsType.LATENCY_SAMPLER,
   },
+  {
+    id: 'pii-masking',
+    title: 'PII Masking',
+    description: 'Mask PII data in your traces.',
+    type: ActionsType.PII_MASKING,
+    icon: ActionsType.PII_MASKING,
+  },
 ];
 
 export function ChooseActionContainer(): React.JSX.Element {

frontend/webapp/hooks/actions/useActionState.ts

@@ -127,7 +127,8 @@ export function useActionState() {
     if (
       type === ActionsType.ERROR_SAMPLER ||
       type === ActionsType.PROBABILISTIC_SAMPLER ||
-      type === ActionsType.LATENCY_SAMPLER
+      type === ActionsType.LATENCY_SAMPLER ||
+      type === ActionsType.PII_MASKING
     ) {
       return signals.filter((signal) => signal.label === 'Traces');
     }

frontend/webapp/types/actions.ts

@@ -5,6 +5,7 @@ export enum ActionsType {
   ERROR_SAMPLER = 'ErrorSampler',
   PROBABILISTIC_SAMPLER = 'ProbabilisticSampler',
   LATENCY_SAMPLER = 'LatencySampler',
+  PII_MASKING = 'PiiMasking',
 }
 
 export enum ActionsSortType {

frontend/webapp/utils/constants/string.tsx

@@ -166,6 +166,10 @@ export const ACTIONS = {
     TITLE: 'Latency Sampler',
     DESCRIPTION: `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.`,
   },
+  PiiMasking: {
+    TITLE: 'PII Masking',
+    DESCRIPTION: `The “PII Masking” Odigos Action is an Endpoint Action that masks PII (Personally Identifiable Information) attributes from telemetry signals.`,
+  },
   SEARCH_ACTION: 'Search Action',
 };