Merge pull request #39 from alonkeyval/gen-1449-add-first-action-node

[GEN-1449] feat: add first action node

frontend/webapp/reuseable-components/nodes-data-flow/builder.ts

@@ -138,6 +138,25 @@ export const buildNodesAndEdges = ({
     }),
   ];
 
+  if (actionsNode.length === 1) {
+    actionsNode.push(
+      createNode(
+        `action-0`,
+        'addAction',
+        centerColumnX,
+        NODE_HEIGHT * (actions.length + 1),
+        {
+          type: 'addAction',
+          title: 'ADD ACTION',
+          subTitle: '',
+          imageUri: `${ACTION_ICON_PATH}add-action.svg`,
+          status: 'healthy',
+          onClick: () => console.log('Add Action'),
+        }
+      )
+    );
+  }
+
   // Combine all nodes
   const nodes = [...sourcesNode, ...destinationNode, ...actionsNode];
 
@@ -146,24 +165,36 @@ export const buildNodesAndEdges = ({
 
   // Connect sources to actions
   const sourceToActionEdges: Edge[] = sources.map((_, sourceIndex) => {
-    const actionIndex = sourceIndex % actions.length;
+    const actionIndex =
+      actionsNode.length === 2 ? 0 : sourceIndex % actions.length;
     return createEdge(
       `source-${sourceIndex}-to-action-${actionIndex}`,
       `source-${sourceIndex}`,
-      `action-${actionIndex}`
+      `action-${actionIndex}`,
+      false
     );
   });
-
   // Connect actions to destinations
-  const actionToDestinationEdges: Edge[] = actions.flatMap((_, actionIndex) =>
-    destinations.map((_, destinationIndex) =>
+  const actionToDestinationEdges: Edge[] = actions.flatMap((_, actionIndex) => {
+    return destinations.map((_, destinationIndex) =>
       createEdge(
         `action-${actionIndex}-to-destination-${destinationIndex}`,
         `action-${actionIndex}`,
         `destination-${destinationIndex}`
       )
-    )
-  );
+    );
+  });
+
+  if (actions.length === 0) {
+    actionToDestinationEdges.push(
+      createEdge(
+        `action-0-to-destination-0`,
+        `action-0`,
+        `destination-0`,
+        false
+      )
+    );
+  }
 
   // Combine all edges
   edges.push(...sourceToActionEdges, ...actionToDestinationEdges);

frontend/webapp/reuseable-components/nodes-data-flow/index.tsx

@@ -2,12 +2,14 @@
 import React from 'react';
 import '@xyflow/react/dist/style.css';
 import BaseNode from './nodes/base-node';
-import headerNode from './nodes/header-node';
 import { ReactFlow } from '@xyflow/react';
+import headerNode from './nodes/header-node';
+import AddActionNode from './nodes/add-action-node';
 
 const nodeTypes = {
   base: BaseNode,
   header: headerNode,
+  addAction: AddActionNode,
 };
 
 interface NodeBaseDataFlowProps {

frontend/webapp/reuseable-components/nodes-data-flow/nodes/add-action-node.tsx

@@ -0,0 +1,90 @@
+import Image from 'next/image';
+import React, { memo } from 'react';
+import styled from 'styled-components';
+import { Text } from '@/reuseable-components';
+import { Handle, Position } from '@xyflow/react';
+
+const BaseNodeContainer = styled.div`
+  display: flex;
+  width: 296px;
+  padding: 16px 24px 16px 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+  cursor: pointer;
+  background-color: transparent;
+  border-radius: 16px;
+  border: 1px dashed ${({ theme }) => theme.colors.border};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.white_opacity['004']};
+  }
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+`;
+
+const Title = styled(Text)`
+  font-size: 14px;
+  font-weight: 600;
+  font-family: ${({ theme }) => theme.font_family.secondary};
+  text-decoration-line: underline;
+`;
+
+const SubTitle = styled(Text)`
+  font-size: 12px;
+  color: ${({ theme }) => theme.text.grey};
+`;
+
+export interface NodeDataProps {
+  type: 'source' | 'action' | 'destination';
+  title: string;
+  subTitle: string;
+  imageUri: string;
+  monitors?: string[];
+  status: 'healthy' | 'unhealthy';
+  onClick: () => void;
+}
+
+interface BaseNodeProps {
+  data: NodeDataProps;
+  isConnectable: boolean;
+}
+
+export default memo(({ isConnectable, data }: BaseNodeProps) => {
+  const { onClick } = data;
+
+  return (
+    <BaseNodeContainer onClick={onClick}>
+      <TitleWrapper>
+        <Image
+          src={'/icons/common/plus.svg'}
+          width={16}
+          height={16}
+          alt="plus"
+        />
+        <Title>{'ADD ACTION'}</Title>
+      </TitleWrapper>
+      <SubTitle>{'Add first action to modify the OpenTelemetry data'}</SubTitle>
+      <Handle
+        type="target"
+        position={Position.Left}
+        id="action-input"
+        isConnectable={isConnectable}
+        style={{ visibility: 'hidden' }}
+      />
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="action-output"
+        isConnectable={isConnectable}
+        style={{ visibility: 'hidden' }}
+      />
+    </BaseNodeContainer>
+  );
+});