This is an automated email from the ASF dual-hosted git repository. zehnder pushed a commit to branch fix-connect-tutorial in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit b5c8c510f12cd7fcd018eb0d3b97947c04226656 Author: Philipp Zehnder <[email protected]> AuthorDate: Tue Feb 3 12:00:59 2026 +0100 fix: Improve the workflow for the connect tutorial --- .../event-property-scope.component.ts | 13 +++- .../configure-schema/configure-schema.component.ts | 5 ++ .../start-adapter-configuration.component.ts | 1 + ui/src/app/services/tour/adapter-tour.constants.ts | 90 +++++++++++----------- 4 files changed, 63 insertions(+), 46 deletions(-) diff --git a/ui/src/app/connect/components/adapter-configuration/configure-fields/event-property-row/event-property-scope/event-property-scope.component.ts b/ui/src/app/connect/components/adapter-configuration/configure-fields/event-property-row/event-property-scope/event-property-scope.component.ts index c9a65d708b..26aff55a57 100644 --- a/ui/src/app/connect/components/adapter-configuration/configure-fields/event-property-row/event-property-scope/event-property-scope.component.ts +++ b/ui/src/app/connect/components/adapter-configuration/configure-fields/event-property-row/event-property-scope/event-property-scope.component.ts @@ -16,13 +16,21 @@ * */ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { + Component, + EventEmitter, + inject, + Input, + OnInit, + Output, +} from '@angular/core'; import { DataType, EventPropertyPrimitive, SemanticType, } from '@streampipes/platform-services'; import { MatSelectChange } from '@angular/material/select'; +import { ShepherdService } from '../../../../../../services/tour/shepherd.service'; type PropertyScope = | 'TIMESTAMP_PROPERTY' @@ -36,6 +44,8 @@ type PropertyScope = standalone: false, }) export class EventPropertyScopeComponent implements OnInit { + private shepherdService = inject(ShepherdService); + @Input() eventProperty: EventPropertyPrimitive; @@ -66,6 +76,7 @@ export class EventPropertyScopeComponent implements OnInit { this.eventProperty.runtimeType; } this.eventProperty.runtimeType = DataType.LONG; + this.shepherdService.trigger('timestamp-property-selected'); } else { if (this.currentScope === 'TIMESTAMP_PROPERTY') { this.eventProperty.semanticType = undefined; diff --git a/ui/src/app/connect/components/adapter-configuration/configure-schema/configure-schema.component.ts b/ui/src/app/connect/components/adapter-configuration/configure-schema/configure-schema.component.ts index c9940cb760..21668ebc4a 100644 --- a/ui/src/app/connect/components/adapter-configuration/configure-schema/configure-schema.component.ts +++ b/ui/src/app/connect/components/adapter-configuration/configure-schema/configure-schema.component.ts @@ -45,6 +45,7 @@ import { SelectAdapterTransformationTemplateDialogComponent } from '../../../dia import { Mode } from '../adapter-event-preview/adapter-event-preview.component'; import { MatDialog } from '@angular/material/dialog'; import { UploadSampleEventDialogComponent } from '../../../dialog/upload-sample-event-dialog/upload-sample-event-dialog.component'; +import { ShepherdService } from '../../../../services/tour/shepherd.service'; @Component({ selector: 'sp-configure-schema', @@ -57,6 +58,7 @@ export class ConfigureSchemaComponent implements OnInit { private dialog = inject(MatDialog); private dialogService = inject(DialogService); private translateService = inject(TranslateService); + private shepherdService = inject(ShepherdService); @Input() adapterDescription: AdapterDescription; @@ -210,6 +212,7 @@ export class ConfigureSchemaComponent implements OnInit { runScript(): void { this.stateService.runScript(this.adapterDescription); + this.shepherdService.trigger('configure-schema-script-run'); } openAdapterConfigurationChangedDialog(): void { @@ -310,6 +313,7 @@ export class ConfigureSchemaComponent implements OnInit { adapterDescription.transformationConfig.scriptActive = true; this.stateService.updateAdapter(adapterDescription); this.stateService.runScript(adapterDescription); + this.shepherdService.trigger('configure-schema-script-enabled'); } } @@ -326,6 +330,7 @@ export class ConfigureSchemaComponent implements OnInit { transformationConfigurationChanged: transformationConfigurationChanged, }); + this.shepherdService.trigger('configure-schema-next-button'); this.nextEmitter.emit(); } diff --git a/ui/src/app/connect/components/adapter-configuration/start-adapter-configuration/start-adapter-configuration.component.ts b/ui/src/app/connect/components/adapter-configuration/start-adapter-configuration/start-adapter-configuration.component.ts index 91a1a68da8..3b765fd411 100644 --- a/ui/src/app/connect/components/adapter-configuration/start-adapter-configuration/start-adapter-configuration.component.ts +++ b/ui/src/app/connect/components/adapter-configuration/start-adapter-configuration/start-adapter-configuration.component.ts @@ -177,6 +177,7 @@ export class StartAdapterConfigurationComponent implements OnInit { } public startAdapter() { + this.shepherdService.trigger('adapter-settings-adapter-started'); const dialogRef = this.dialogService.open(AdapterStartedDialog, { panelType: PanelType.STANDARD_PANEL, title: this.translateService.instant('Adapter generation'), diff --git a/ui/src/app/services/tour/adapter-tour.constants.ts b/ui/src/app/services/tour/adapter-tour.constants.ts index a61ff35b68..29440dc0df 100644 --- a/ui/src/app/services/tour/adapter-tour.constants.ts +++ b/ui/src/app/services/tour/adapter-tour.constants.ts @@ -23,21 +23,14 @@ export default { { stepId: 'step-1', title: 'Welcome to Connect!', - text: "<p>This is the <b>Connect</b> view. It's the place where adapters for data streams can be created. Adapters create data streams, and data streams can be used anywhere to create pipelines or to visualize data. </p> Click <b>next</b> to continue.", + text: '<p>This is the <b>Connect</b> view, where you create adapters for data streams. Adapters create data streams, and those streams can be used in pipelines or visualizations.</p><p>Click <b>Next</b> to continue.</p>', classes: 'shepherd shepherd-welcome', buttons: ['cancel', 'next'], }, - { - stepId: 'step-2', - title: 'Existing adapters', - text: "<p>In this view, you see an overview of existing adapters. If you're just getting started, the view will be empty. Don't worry - we'll now create our first adapter!</p> Click <b>next</b> to continue.", - attachPosition: 'bottom', - buttons: ['cancel', 'next'], - }, { stepId: 'step-3', title: 'New adapter', - text: '<p>Click on <b>New adapter</b> to see a list of all available adapters you can configure.', + text: '<p>Click <b>New adapter</b> to open the list of available adapters.</p>', attachToElement: '[data-cy="connect-create-new-adapter-button"]', attachPosition: 'left', @@ -46,7 +39,7 @@ export default { { stepId: 'step-4', title: 'Select the machine data simulator', - text: "<p>All installed adapters are available in the adapter overview. <br/>Despite many industrial protocols, you'll also find a simulator which we'll use to show how to create adapters.<br/>Search for and <b>click</b> the machine data simulator.</p>", + text: "<p>The adapter overview lists all installed adapters, including a simulator we'll use for this tutorial.</p><p>Search for and <b>click</b> <b>Machine Data Simulator</b>.</p>", attachToElement: '#Machine_Data_Simulator', attachPosition: 'top', buttons: ['cancel'], @@ -54,62 +47,57 @@ export default { { stepId: 'step-5', title: 'Adapter settings', - text: "Adapter creation follows a three-step process. In the first step, you can provide basic settings, such as protocol infos and other settings. For this example, we won't change the default values and will produce a stream which produces <b>Flow Rate</b> measurements at an interval of one message per second.", + text: 'Adapter creation follows a four-step process. In this first step, you can provide basic settings like protocol info. For this tutorial, keep the defaults to produce <b>Flow Rate</b> measurements at one message per second.', attachToElement: '[data-cy="adapter-settings-next-button"]', attachPosition: 'top', buttons: ['cancel'], }, { stepId: 'step-6', - title: 'Schema and field configuration', - text: '<p>In the schema editor, a preview of the message is shown. It is also possible to modify incoming data in form of pre-processing rules. Click <b>Next</b> to continue.', - buttons: ['cancel', 'next'], - }, - { - stepId: 'step-7', - title: 'Schema and field configuration', - text: '<p>To modify an existing field, click the <b>Edit Field</b> button. Do this for the <b>Temperature</b> field.', - attachToElement: '[data-cy="edit-temperature"]', - attachPosition: 'right', + title: 'Configure schema', + text: '<p>In this step, you can preview the incoming message and optionally enable a transformation script to modify the event.</p><p>Enable the script to continue.</p>', + attachToElement: '[data-cy="toggle-script-active"]', + attachPosition: 'top', buttons: ['cancel'], }, { stepId: 'step-8', - title: 'Change runtime name', - text: 'The runtime name represents the field name of the message. Change the value of the runtime name to <b>temp</b>. This will also change all the keys later in the data stream. Click outside the input field to continue.', - attachToElement: '[data-cy="connect-edit-field-runtime-name"]', + title: 'Rename and run the script', + text: '<p>Field renaming is now done in the transformation script. Update the script to rename the <b>temperature</b> field to <b>temp</b>.</p><p>This is how the resulting script should look:</p><pre><code>function transform(event, out, ctx) {\n event.temp = event.temperature;\n delete event.temperature;\n out.collect(event);\n}</code></pre><p>Click <b>Run script</b> to apply the transformation and update the preview.</p>', + attachToElement: '[data-cy="configure-schema-script-editor"]', attachPosition: 'top', buttons: ['cancel'], }, { stepId: 'step-9', - title: 'Save changes', - text: 'Click <b>Save</b> to store changes to a field.', - attachToElement: '[data-cy="sp-save-edit-property"]', + title: 'Continue', + text: 'Click <b>Next</b> to continue.', + attachToElement: '[data-cy="configure-schema-next-button"]', attachPosition: 'bottom', buttons: ['cancel'], }, { stepId: 'step-10', - title: 'Message preview', - text: 'In the preview, you can see the transformed message, as it will appear in the resulting data stream. You can compare changes to the original. Click <b>Next</b> to continue.', - attachToElement: '[data-cy="connect-schema-update-preview"]', - attachPosition: 'bottom', - buttons: ['cancel', 'next'], + title: 'Configure fields', + text: 'Review and adjust the detected fields. Use the scope dropdown to mark the timestamp field as <b>Timestamp</b>.', + attachToElement: '[data-cy="event-property-row"]', + attachPosition: 'top', + buttons: ['cancel'], }, { stepId: 'step-11', - title: 'Transform events using a script', - text: '<p>You can optionally transform incoming events using a custom script. This allows you to modify, enrich, or add fields to the event before it is processed further.</p><p>Click <b>Next</b> to continue.</p>', - attachToElement: '[data-cy="connect-event-transform-script"]', - attachPosition: 'top', + title: 'Message preview', + text: 'Use the preview to verify the resulting event structure after your changes.', + attachToElement: + '[data-cy="configure-fields-event-preview-result"]', + attachPosition: 'bottom', buttons: ['cancel', 'next'], }, { stepId: 'step-12', title: 'Go to next step', - text: 'Finish the modelling and go to next step to start the adapter. Click <b>next</b> to continue.', - attachToElement: '[data-cy="sp-event-schema-next-button"]', + text: 'Finish configuring fields and continue to the final step to start the adapter. Click <b>Next</b> to continue.', + attachToElement: '[data-cy="configure-fields-next-button"]', attachPosition: 'bottom', buttons: ['cancel'], }, @@ -124,7 +112,7 @@ export default { { stepId: 'step-14', title: 'Persistence', - text: 'Check the <b>Persist</b> option to persist all messages that are produced by this adapter. Only persisted data can be visualized in the dashboard or inspected in the data lake. <br>You can also persist data later by using the pipeline editor. ', + text: 'Check <b>Persist</b> to store all messages produced by this adapter. Only persisted data can be visualized in the dashboard or inspected in the data lake.<br/>You can also persist data later using the pipeline editor.', attachToElement: '[data-cy="sp-store-in-datalake"]', attachPosition: 'top', buttons: ['cancel'], @@ -132,7 +120,7 @@ export default { { stepId: 'step-15', title: 'Start Adapter', - text: "Now it's time to start our adapter! Click <b>Start adapter</b> to deploy the adapter.", + text: "Now it's time to start the adapter. Click <b>Start adapter</b> to deploy it.", attachToElement: '[data-cy="adapter-settings-start-adapter-btn"]', attachPosition: 'top', @@ -141,7 +129,7 @@ export default { { stepId: 'step-16', title: 'Congratulations', - text: '<b></b>Congratulations!</b> You have created your first adapter and finished the tutorial. Go to the pipeline editor to see the new data stream', + text: '<p><b>Congratulations!</b> You have created your first adapter and finished the tutorial.</p><p>Go to the pipeline editor to see the new data stream.</p>', classes: 'shepherd shepherd-welcome', buttons: ['cancel', 'pipeline-tutorial'], }, @@ -153,10 +141,22 @@ export default { actionId: 'specific-settings-next-button', currentStep: 'step-5', }, - { actionId: 'adapter-edit-field-clicked', currentStep: 'step-7' }, - { actionId: 'adapter-runtime-name-changed', currentStep: 'step-8' }, - { actionId: 'adapter-field-changed', currentStep: 'step-9' }, - { actionId: 'event-transform-script-next', currentStep: 'step-11' }, + { + actionId: 'configure-schema-script-enabled', + currentStep: 'step-6', + }, + { + actionId: 'configure-schema-script-run', + currentStep: 'step-8', + }, + { + actionId: 'configure-schema-next-button', + currentStep: 'step-9', + }, + { + actionId: 'timestamp-property-selected', + currentStep: 'step-10', + }, { actionId: 'event-schema-next-button', currentStep: 'step-12' }, { actionId: 'adapter-name-assigned', currentStep: 'step-13' }, { actionId: 'adapter-persist-selected', currentStep: 'step-14' },
