feat(Canvas): Show endpoint name in direct

This commit shows the endpoint name as the `direct` label in the canvas. fix: #814
KaotoIO · Nov 15, 2024 · 166353d · 166353d
1 parent 9be2b96
commit 166353d
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 79 deletions.
diff --git a/packages/ui/src/models/visualization/flows/support/camel-component-schema.service.test.ts b/packages/ui/src/models/visualization/flows/support/camel-component-schema.service.test.ts
@@ -7,7 +7,7 @@ import { CatalogKind } from '../../../catalog-kind';
 import { NodeLabelType } from '../../../settings/settings.model';
 import { CamelCatalogService } from '../camel-catalog.service';
 import { CamelComponentSchemaService } from './camel-component-schema.service';
-import { CamelProcessorStepsProperties } from './camel-component-types';
+import { CamelProcessorStepsProperties, ICamelElementLookupResult } from './camel-component-types';
 
 describe('CamelComponentSchemaService', () => {
   let path: string;
@@ -286,8 +286,10 @@ describe('CamelComponentSchemaService', () => {
       ['from', { uri: 'timer' }, { processorName: 'from', componentName: 'timer' }],
       ['from.steps.0.to', { uri: 'log' }, { processorName: 'to', componentName: 'log' }],
       ['from.steps.1.toD', { uri: 'log' }, { processorName: 'toD', componentName: 'log' }],
+      ['from.steps.2.poll', { uri: 'http://localhost:5173' }, { processorName: 'poll', componentName: 'http' }],
       ['from.steps.0.to', 'log', { processorName: 'to', componentName: 'log' }],
       ['from.steps.1.toD', 'log', { processorName: 'toD', componentName: 'log' }],
+      ['from.steps.1.poll', 'log', { processorName: 'poll', componentName: 'log' }],
       ['from.steps.2.log', { message: 'Hello World' }, { processorName: 'log' }],
       ['from.steps.3.choice', {}, { processorName: 'choice' }],
       ['from.steps.3.choice.when.0', {}, { processorName: 'when' }],
@@ -312,109 +314,85 @@ describe('CamelComponentSchemaService', () => {
 
     it.each([
       [
-        { processorName: 'route' as keyof ProcessorDefinition },
+        { processorName: 'route' },
         { id: 'route-1234', description: 'My Route description', from: { uri: 'timer' } },
         'My Route description',
       ],
       [
-        { processorName: 'route' as keyof ProcessorDefinition },
+        { processorName: 'route' },
         { id: 'route-1234', from: { uri: 'timer', parameters: { timerName: 'foo' }, description: '' } },
         'route-1234',
       ],
+      [{ processorName: 'from' }, { uri: 'timer', parameters: { timerName: 'foo' }, description: '' }, 'timer'],
       [
-        { processorName: 'from' as keyof ProcessorDefinition },
-        { uri: 'timer', parameters: { timerName: 'foo' }, description: '' },
-        'timer',
-      ],
-      [
-        { processorName: 'from' as keyof ProcessorDefinition },
+        { processorName: 'from' },
         { uri: 'timer', parameters: { timerName: 'foo' }, description: 'this is a description' },
         'this is a description',
       ],
       [
-        { processorName: 'from' as keyof ProcessorDefinition },
+        { processorName: 'from' },
         { uri: 'timer', parameters: { timerName: 'foo', delay: 1000, period: 1000 } },
         'timer',
       ],
-      [{ processorName: 'from' as keyof ProcessorDefinition }, {}, 'from: Unknown'],
-      [{ processorName: 'from' as keyof ProcessorDefinition, id: 'from-1234', uri: '' }, {}, 'from: Unknown'],
-      [{ processorName: 'from' as keyof ProcessorDefinition, uri: '' }, {}, 'from: Unknown'],
-      [{ processorName: 'from' as keyof ProcessorDefinition, uri: null }, {}, 'from: Unknown'],
-      [{ processorName: 'from' as keyof ProcessorDefinition, uri: 10 }, {}, 'from: Unknown'],
-      [{ processorName: 'from' as keyof ProcessorDefinition, uri: undefined }, {}, 'from: Unknown'],
-      [
-        { processorName: 'to' as keyof ProcessorDefinition },
-        { uri: 'timer', parameters: { timerName: 'foo' } },
-        'timer',
-      ],
-      [{ processorName: 'to' as keyof ProcessorDefinition }, {}, 'to'],
-      [{ processorName: 'to' as keyof ProcessorDefinition }, undefined, 'to'],
-      [{ processorName: 'to' as keyof ProcessorDefinition }, null, 'to'],
-      [{ processorName: 'to' as keyof ProcessorDefinition }, '', 'to'],
-      [
-        { processorName: 'toD' as keyof ProcessorDefinition },
-        { uri: 'timer', parameters: { timerName: 'foo' } },
-        'timer',
-      ],
-      [{ processorName: 'toD' as keyof ProcessorDefinition }, {}, 'toD'],
-      [{ processorName: 'toD' as keyof ProcessorDefinition }, undefined, 'toD'],
-      [{ processorName: 'toD' as keyof ProcessorDefinition }, null, 'toD'],
-      [{ processorName: 'toD' as keyof ProcessorDefinition }, '', 'toD'],
-      [{ processorName: 'choice' as keyof ProcessorDefinition }, {}, 'choice'],
-      [{ processorName: 'otherwise' as keyof ProcessorDefinition }, {}, 'otherwise'],
-      [
-        { processorName: 'errorHandler' as keyof ProcessorDefinition },
-        { id: 'errorHandler-1234', description: 'Error Handler' },
-        'Error Handler',
-      ],
-      [
-        { processorName: 'errorHandler' as keyof ProcessorDefinition },
-        { id: 'errorHandler-1234' },
-        'errorHandler-1234',
-      ],
-      [
-        { processorName: 'onException' as keyof ProcessorDefinition },
-        { id: 'onException-1234', description: 'On Exception' },
-        'On Exception',
-      ],
-      [{ processorName: 'onException' as keyof ProcessorDefinition }, { id: 'onException-1234' }, 'onException-1234'],
-      [
-        { processorName: 'onCompletion' as keyof ProcessorDefinition },
-        { id: 'onCompletion-1234', description: 'On Completion' },
-        'On Completion',
-      ],
-      [
-        { processorName: 'onCompletion' as keyof ProcessorDefinition },
-        { id: 'onCompletion-1234' },
-        'onCompletion-1234',
-      ],
+      [{ processorName: 'from' }, {}, 'from: Unknown'],
+      [{ processorName: 'from', id: 'from-1234', uri: '' }, {}, 'from: Unknown'],
+      [{ processorName: 'from', uri: '' }, {}, 'from: Unknown'],
+      [{ processorName: 'from', uri: null }, {}, 'from: Unknown'],
+      [{ processorName: 'from', uri: 10 }, {}, 'from: Unknown'],
+      [{ processorName: 'from', uri: undefined }, {}, 'from: Unknown'],
+      [{ processorName: 'to' }, { uri: 'timer', parameters: { timerName: 'foo' } }, 'timer'],
+      [{ processorName: 'to' }, {}, 'to'],
+      [{ processorName: 'to' }, undefined, 'to'],
+      [{ processorName: 'to' }, null, 'to'],
+      [{ processorName: 'to' }, '', 'to'],
       [
-        { processorName: 'intercept' as keyof ProcessorDefinition },
-        { id: 'intercept-1234', description: 'Intercept' },
-        'Intercept',
+        { processorName: 'to', componentName: 'direct' },
+        { uri: 'direct', parameters: { name: 'anotherWorld' } },
+        'anotherWorld',
       ],
-      [{ processorName: 'intercept' as keyof ProcessorDefinition }, { id: 'intercept-1234' }, 'intercept-1234'],
+      [{ processorName: 'toD' }, { uri: 'timer', parameters: { timerName: 'foo' } }, 'timer'],
+      [{ processorName: 'toD' }, {}, 'toD'],
+      [{ processorName: 'toD' }, undefined, 'toD'],
+      [{ processorName: 'toD' }, null, 'toD'],
+      [{ processorName: 'toD' }, '', 'toD'],
       [
-        { processorName: 'interceptFrom' as keyof ProcessorDefinition },
-        { id: 'interceptFrom-1234', description: 'InterceptFrom' },
-        'InterceptFrom',
+        { processorName: 'toD', componentName: 'direct' },
+        { uri: 'direct', parameters: { name: 'anotherWorld' } },
+        'anotherWorld',
       ],
+      [{ processorName: 'poll' }, { uri: 'timer', parameters: { timerName: 'foo' } }, 'timer'],
+      [{ processorName: 'poll' }, {}, 'poll'],
+      [{ processorName: 'poll' }, undefined, 'poll'],
+      [{ processorName: 'poll' }, null, 'poll'],
+      [{ processorName: 'poll' }, '', 'poll'],
       [
-        { processorName: 'interceptFrom' as keyof ProcessorDefinition },
-        { id: 'interceptFrom-1234' },
-        'interceptFrom-1234',
+        { processorName: 'poll', componentName: 'direct' },
+        { uri: 'direct', parameters: { name: 'anotherWorld' } },
+        'anotherWorld',
       ],
+      [{ processorName: 'choice' }, {}, 'choice'],
+      [{ processorName: 'otherwise' }, {}, 'otherwise'],
+      [{ processorName: 'errorHandler' }, { id: 'errorHandler-1234', description: 'Error Handler' }, 'Error Handler'],
+      [{ processorName: 'errorHandler' }, { id: 'errorHandler-1234' }, 'errorHandler-1234'],
+      [{ processorName: 'onException' }, { id: 'onException-1234', description: 'On Exception' }, 'On Exception'],
+      [{ processorName: 'onException' }, { id: 'onException-1234' }, 'onException-1234'],
+      [{ processorName: 'onCompletion' }, { id: 'onCompletion-1234', description: 'On Completion' }, 'On Completion'],
+      [{ processorName: 'onCompletion' }, { id: 'onCompletion-1234' }, 'onCompletion-1234'],
+      [{ processorName: 'intercept' }, { id: 'intercept-1234', description: 'Intercept' }, 'Intercept'],
+      [{ processorName: 'intercept' }, { id: 'intercept-1234' }, 'intercept-1234'],
+      [{ processorName: 'interceptFrom' }, { id: 'interceptFrom-1234', description: 'InterceptFrom' }, 'InterceptFrom'],
+      [{ processorName: 'interceptFrom' }, { id: 'interceptFrom-1234' }, 'interceptFrom-1234'],
       [
-        { processorName: 'interceptSendToEndpoint' as keyof ProcessorDefinition },
+        { processorName: 'interceptSendToEndpoint' },
         { id: 'interceptSendToEndpoint-1234', description: 'InterceptSendToEndpoint' },
         'InterceptSendToEndpoint',
       ],
       [
-        { processorName: 'interceptSendToEndpoint' as keyof ProcessorDefinition },
+        { processorName: 'interceptSendToEndpoint' },
         { id: 'interceptSendToEndpoint-1234' },
         'interceptSendToEndpoint-1234',
       ],
-    ])(
+    ] as Array<[ICamelElementLookupResult, unknown, string]>)(
       'should return the processor name if the component name is not provided: %s [%s]',
       (componentLookup, definition, result) => {
         const label = CamelComponentSchemaService.getNodeLabel(componentLookup, definition);

diff --git a/packages/ui/src/models/visualization/flows/support/camel-component-schema.service.ts b/packages/ui/src/models/visualization/flows/support/camel-component-schema.service.ts
@@ -83,8 +83,9 @@ export class CamelComponentSchemaService {
       return description;
     }
 
+    const semanticString = CamelUriHelper.getSemanticString(camelElementLookup, definition);
     if (camelElementLookup.componentName !== undefined) {
-      return camelElementLookup.componentName;
+      return semanticString ?? camelElementLookup.componentName;
     }
 
     const uriString = CamelUriHelper.getUriString(definition);
@@ -103,7 +104,8 @@ export class CamelComponentSchemaService {
 
       case 'to':
       case 'toD':
-        return uriString ?? camelElementLookup.processorName;
+      case 'poll':
+        return semanticString ?? uriString ?? camelElementLookup.processorName;
 
       default:
         return camelElementLookup.processorName;
@@ -274,6 +276,7 @@ export class CamelComponentSchemaService {
 
       case 'to':
       case 'toD':
+      case 'poll':
         /** The To processor is using `to: timer:tick?period=1000` form */
         if (typeof definition === 'string') {
           return {

diff --git a/packages/ui/src/utils/camel-uri-helper.test.ts b/packages/ui/src/utils/camel-uri-helper.test.ts
@@ -1,3 +1,4 @@
+import { ICamelElementLookupResult } from '../models/visualization/flows/support/camel-component-types';
 import { CamelUriHelper } from './camel-uri-helper';
 
 describe('CamelUriHelper', () => {
@@ -21,6 +22,18 @@ describe('CamelUriHelper', () => {
     });
   });
 
+  describe('getSemanticString', () => {
+    it.each([
+      [{}, {}, undefined],
+      [{ processorName: 'to', componentName: 'direct' }, { parameters: { name: 'anotherWorld' } }, 'anotherWorld'],
+    ] as Array<[ICamelElementLookupResult, unknown, string | undefined]>)(
+      'for `%s` with `%s` value, it should return %s',
+      (camelElementLookup, value, expected) => {
+        expect(CamelUriHelper.getSemanticString(camelElementLookup, value)).toBe(expected);
+      },
+    );
+  });
+
   describe('getParametersFromPathString', () => {
     it.each([
       { syntax: undefined, uri: undefined, result: {} },

diff --git a/packages/ui/src/utils/camel-uri-helper.ts b/packages/ui/src/utils/camel-uri-helper.ts
@@ -1,5 +1,7 @@
-import get from 'lodash/get';
 import { getParsedValue } from './get-parsed-value';
+import { ICamelElementLookupResult } from '../models/visualization/flows/support/camel-component-types';
+import { getValue } from './get-value';
+import { isDefined } from './is-defined';
 
 export type ParsedParameters = Record<string, string | boolean | number>;
 
@@ -15,7 +17,7 @@ export class CamelUriHelper {
       return value;
     }
 
-    const uriString = get(value, 'uri');
+    const uriString = getValue(value, 'uri');
 
     /** For object-based processor definitions, we can return the `uri` property if not empty */
     if (typeof uriString === 'string' && uriString !== '') {
@@ -25,6 +27,23 @@ export class CamelUriHelper {
     return undefined;
   }
 
+  static getSemanticString<T>(
+    camelElementLookup: ICamelElementLookupResult,
+    value: T | undefined | null,
+  ): string | undefined {
+    /** For string-based processor definitions, we return undefined */
+    if (!isDefined(value) || typeof value === 'string') {
+      return undefined;
+    }
+
+    switch (camelElementLookup.componentName) {
+      case 'direct':
+        return getValue(value, 'parameters.name');
+    }
+
+    return undefined;
+  }
+
   /** Transform the path string portion of a URI `atmosphere-websocket://localhost:8080/echo`, into a key-value object */
   static getParametersFromPathString(
     uriSyntax?: string,