You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by bo...@apache.org on 2023/01/08 19:40:57 UTC
[streampipes] branch dev updated: [#877] apply formatting and linting to services module (#1056)
This is an automated email from the ASF dual-hosted git repository.
bossenti pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new bd612fcd6 [#877] apply formatting and linting to services module (#1056)
bd612fcd6 is described below
commit bd612fcd67883a5b5b2aa9685509f15b964e6d45
Author: Tim <50...@users.noreply.github.com>
AuthorDate: Sun Jan 8 20:40:53 2023 +0100
[#877] apply formatting and linting to services module (#1056)
---
ui/.eslintignore | 1 -
ui/.prettierignore | 1 -
ui/src/app/services/auth.service.ts | 146 ++++++++++++++-------
ui/src/app/services/available-roles.service.ts | 80 ++++++++---
.../app/services/get-element-icon-text.service.ts | 1 -
ui/src/app/services/jwt-token-storage.service.ts | 37 +++---
ui/src/app/services/notification-count-service.ts | 11 +-
ui/src/app/services/property-selector.service.ts | 65 ++++++---
ui/src/app/services/rest-api.service.ts | 30 +++--
ui/src/app/services/secure.pipe.ts | 35 +++--
ui/src/app/services/services.module.ts | 7 +-
.../app/services/tour/adapter-tour-2.constants.ts | 113 +++++++---------
.../app/services/tour/adapter-tour-3.constants.ts | 98 +++++++-------
ui/src/app/services/tour/adapter-tour.constants.ts | 110 +++++++---------
.../tour/create-pipeline-tour.constants.ts | 120 +++++++----------
.../app/services/tour/dashboard-tour.constants.ts | 60 ++++-----
ui/src/app/services/tour/shepherd.service.ts | 40 +++---
ui/src/app/services/tour/tour-provider.service.ts | 4 +-
18 files changed, 515 insertions(+), 444 deletions(-)
diff --git a/ui/.eslintignore b/ui/.eslintignore
index a4ba0955e..fd5519665 100644
--- a/ui/.eslintignore
+++ b/ui/.eslintignore
@@ -38,5 +38,4 @@ src/app/NS
src/app/pipeline-details
src/app/pipelines
src/app/profile
-src/app/services
src/scss
diff --git a/ui/.prettierignore b/ui/.prettierignore
index e90ed933f..78fd58ffd 100644
--- a/ui/.prettierignore
+++ b/ui/.prettierignore
@@ -39,5 +39,4 @@ src/app/NS
src/app/pipeline-details
src/app/pipelines
src/app/profile
-src/app/services
src/scss
diff --git a/ui/src/app/services/auth.service.ts b/ui/src/app/services/auth.service.ts
index feb406d65..9dee94a47 100644
--- a/ui/src/app/services/auth.service.ts
+++ b/ui/src/app/services/auth.service.ts
@@ -30,21 +30,29 @@ import { RoleModel } from '../_models/auth.model';
@Injectable()
export class AuthService {
-
- public authToken$: BehaviorSubject<string> = new BehaviorSubject<string>(undefined);
- public user$: BehaviorSubject<UserInfo> = new BehaviorSubject<UserInfo>(undefined);
- public isLoggedIn$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
- public darkMode$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-
- constructor(private restApi: RestApi,
- private tokenStorage: JwtTokenStorageService,
- private router: Router,
- private loginService: LoginService) {
+ public authToken$: BehaviorSubject<string> = new BehaviorSubject<string>(
+ undefined,
+ );
+ public user$: BehaviorSubject<UserInfo> = new BehaviorSubject<UserInfo>(
+ undefined,
+ );
+ public isLoggedIn$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(
+ false,
+ );
+ public darkMode$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(
+ false,
+ );
+
+ constructor(
+ private restApi: RestApi,
+ private tokenStorage: JwtTokenStorageService,
+ private router: Router,
+ private loginService: LoginService,
+ ) {
if (this.authenticated()) {
this.authToken$.next(tokenStorage.getToken());
this.user$.next(tokenStorage.getUser());
this.isLoggedIn$.next(true);
-
} else {
this.logout();
}
@@ -71,10 +79,15 @@ export class AuthService {
}
public authenticated(): boolean {
- const token = this.authToken$.getValue() || this.tokenStorage.getToken();
+ const token =
+ this.authToken$.getValue() || this.tokenStorage.getToken();
const jwtHelper: JwtHelperService = new JwtHelperService({});
- return token !== null && token !== undefined && !jwtHelper.isTokenExpired(token);
+ return (
+ token !== null &&
+ token !== undefined &&
+ !jwtHelper.isTokenExpired(token)
+ );
}
public decodeJwtToken(token: string): any {
@@ -83,27 +96,38 @@ export class AuthService {
}
checkConfiguration(): Observable<boolean> {
- return Observable.create((observer) => this.restApi.configured().subscribe(response => {
- if (response.configured) {
- observer.next(true);
- } else {
- observer.next(false);
- }
- }, error => {
- observer.error();
- }));
+ return Observable.create(observer =>
+ this.restApi.configured().subscribe(
+ response => {
+ if (response.configured) {
+ observer.next(true);
+ } else {
+ observer.next(false);
+ }
+ },
+ error => {
+ observer.error();
+ },
+ ),
+ );
}
scheduleTokenRenew() {
- this.authToken$.pipe(
- filter((token: any) => !!token),
- map((token: any) => new JwtHelperService({}).getTokenExpirationDate(token)),
- switchMap((expiresIn: Date) => timer(expiresIn.getTime() - Date.now() - 60000)),
- ).subscribe(() => {
- if (this.authenticated()) {
- this.updateTokenAndUserInfo();
- }
- });
+ this.authToken$
+ .pipe(
+ filter((token: any) => !!token),
+ map((token: any) =>
+ new JwtHelperService({}).getTokenExpirationDate(token),
+ ),
+ switchMap((expiresIn: Date) =>
+ timer(expiresIn.getTime() - Date.now() - 60000),
+ ),
+ )
+ .subscribe(() => {
+ if (this.authenticated()) {
+ this.updateTokenAndUserInfo();
+ }
+ });
}
updateTokenAndUserInfo() {
@@ -113,14 +137,20 @@ export class AuthService {
}
watchTokenExpiration() {
- this.authToken$.pipe(
- filter((token: any) => !!token),
- map((token: any) => new JwtHelperService({}).getTokenExpirationDate(token)),
- switchMap((expiresIn: Date) => timer(expiresIn.getTime() - Date.now() + 1))
- ).subscribe(() => {
- this.logout();
- this.router.navigate(['login']);
- });
+ this.authToken$
+ .pipe(
+ filter((token: any) => !!token),
+ map((token: any) =>
+ new JwtHelperService({}).getTokenExpirationDate(token),
+ ),
+ switchMap((expiresIn: Date) =>
+ timer(expiresIn.getTime() - Date.now() + 1),
+ ),
+ )
+ .subscribe(() => {
+ this.logout();
+ this.router.navigate(['login']);
+ });
}
getUserRoles(): string[] {
@@ -128,24 +158,32 @@ export class AuthService {
}
public hasRole(role: RoleModel): boolean {
- return this.getUserRoles().includes('ROLE_ADMIN') || this.getUserRoles().includes(role);
+ return (
+ this.getUserRoles().includes('ROLE_ADMIN') ||
+ this.getUserRoles().includes(role)
+ );
}
public hasAnyRole(roles: RoleModel[]): boolean {
if (Array.isArray(roles)) {
- return roles.reduce((aggregator: false, role: RoleModel) => aggregator || this.hasRole(role), false);
+ return roles.reduce(
+ (aggregator: false, role: RoleModel) =>
+ aggregator || this.hasRole(role),
+ false,
+ );
}
return false;
}
- isAnyAccessGranted(pageNames: PageName[],
- redirect?: boolean): boolean {
+ isAnyAccessGranted(pageNames: PageName[], redirect?: boolean): boolean {
if (!pageNames || pageNames.length === 0) {
return true;
}
- const result = pageNames.some(pageName => this.isAccessGranted(pageName));
+ const result = pageNames.some(pageName =>
+ this.isAccessGranted(pageName),
+ );
if (!result && redirect) {
this.router.navigate(['']);
}
@@ -162,17 +200,29 @@ export class AuthService {
case PageName.PIPELINE_EDITOR:
return this.hasAnyRole(['ROLE_PIPELINE_ADMIN']);
case PageName.PIPELINE_OVERVIEW:
- return this.hasAnyRole(['ROLE_PIPELINE_ADMIN', 'ROLE_PIPELINE_USER']);
+ return this.hasAnyRole([
+ 'ROLE_PIPELINE_ADMIN',
+ 'ROLE_PIPELINE_USER',
+ ]);
case PageName.CONNECT:
return this.hasAnyRole(['ROLE_CONNECT_ADMIN']);
case PageName.DASHBOARD:
- return this.hasAnyRole(['ROLE_DASHBOARD_USER', 'ROLE_DASHBOARD_ADMIN']);
+ return this.hasAnyRole([
+ 'ROLE_DASHBOARD_USER',
+ 'ROLE_DASHBOARD_ADMIN',
+ ]);
case PageName.DATA_EXPLORER:
- return this.hasAnyRole(['ROLE_DATA_EXPLORER_ADMIN', 'ROLE_DATA_EXPLORER_USER']);
+ return this.hasAnyRole([
+ 'ROLE_DATA_EXPLORER_ADMIN',
+ 'ROLE_DATA_EXPLORER_USER',
+ ]);
case PageName.APPS:
return this.hasAnyRole(['ROLE_APP_USER']);
case PageName.FILE_UPLOAD:
- return this.hasAnyRole(['ROLE_CONNECT_ADMIN', 'ROLE_PIPELINE_ADMIN']);
+ return this.hasAnyRole([
+ 'ROLE_CONNECT_ADMIN',
+ 'ROLE_PIPELINE_ADMIN',
+ ]);
case PageName.INSTALL_PIPELINE_ELEMENTS:
return this.hasAnyRole(['ROLE_ADMIN']);
case PageName.NOTIFICATIONS:
diff --git a/ui/src/app/services/available-roles.service.ts b/ui/src/app/services/available-roles.service.ts
index 64893d7e9..4d7c30241 100644
--- a/ui/src/app/services/available-roles.service.ts
+++ b/ui/src/app/services/available-roles.service.ts
@@ -22,24 +22,66 @@ import { UserRole } from '../_enums/user-role.enum';
@Injectable()
export class AvailableRolesService {
+ availableRoles: RoleDescription[] = [
+ { role: UserRole.ROLE_ADMIN, roleTitle: 'Admin', roleDescription: '' },
+ {
+ role: UserRole.ROLE_SERVICE_ADMIN,
+ roleTitle: 'Service Admin',
+ roleDescription: '',
+ },
+ {
+ role: UserRole.ROLE_APP_USER,
+ roleTitle: 'App User',
+ roleDescription: '',
+ },
+ {
+ role: UserRole.ROLE_DASHBOARD_USER,
+ roleTitle: 'Dashboard User',
+ roleDescription: '',
+ },
+ {
+ role: UserRole.ROLE_DASHBOARD_ADMIN,
+ roleTitle: 'Dashboard Admin',
+ roleDescription: '',
+ },
+ {
+ role: UserRole.ROLE_DATA_EXPLORER_USER,
+ roleTitle: 'Data Explorer User',
+ roleDescription: '',
+ },
+ {
+ role: UserRole.ROLE_DATA_EXPLORER_ADMIN,
+ roleTitle: 'Data Explorer Admin',
+ roleDescription: '',
+ },
+ {
+ role: UserRole.ROLE_CONNECT_ADMIN,
+ roleTitle: 'Connect Admin',
+ roleDescription: '',
+ },
+ {
+ role: UserRole.ROLE_PIPELINE_USER,
+ roleTitle: 'Pipeline User',
+ roleDescription: '',
+ },
+ {
+ role: UserRole.ROLE_PIPELINE_ADMIN,
+ roleTitle: 'Pipeline Admin',
+ roleDescription: '',
+ },
+ {
+ role: UserRole.ROLE_ASSET_USER,
+ roleTitle: 'Asset User',
+ roleDescription: '',
+ },
+ {
+ role: UserRole.ROLE_ASSET_ADMIN,
+ roleTitle: 'Asset Admin',
+ roleDescription: '',
+ },
+ ];
- availableRoles: RoleDescription[] = [
- {role: UserRole.ROLE_ADMIN, roleTitle: 'Admin', roleDescription: ''},
- {role: UserRole.ROLE_SERVICE_ADMIN, roleTitle: 'Service Admin', roleDescription: ''},
- {role: UserRole.ROLE_APP_USER, roleTitle: 'App User', roleDescription: ''},
- {role: UserRole.ROLE_DASHBOARD_USER, roleTitle: 'Dashboard User', roleDescription: ''},
- {role: UserRole.ROLE_DASHBOARD_ADMIN, roleTitle: 'Dashboard Admin', roleDescription: ''},
- {role: UserRole.ROLE_DATA_EXPLORER_USER, roleTitle: 'Data Explorer User', roleDescription: ''},
- {role: UserRole.ROLE_DATA_EXPLORER_ADMIN, roleTitle: 'Data Explorer Admin', roleDescription: ''},
- {role: UserRole.ROLE_CONNECT_ADMIN, roleTitle: 'Connect Admin', roleDescription: ''},
- {role: UserRole.ROLE_PIPELINE_USER, roleTitle: 'Pipeline User', roleDescription: ''},
- {role: UserRole.ROLE_PIPELINE_ADMIN, roleTitle: 'Pipeline Admin', roleDescription: ''},
- {role: UserRole.ROLE_ASSET_USER, roleTitle: 'Asset User', roleDescription: ''},
- {role: UserRole.ROLE_ASSET_ADMIN, roleTitle: 'Asset Admin', roleDescription: ''},
- ];
-
-
- public getAvailableRoles(): RoleDescription[] {
- return this.availableRoles;
- }
+ public getAvailableRoles(): RoleDescription[] {
+ return this.availableRoles;
+ }
}
diff --git a/ui/src/app/services/get-element-icon-text.service.ts b/ui/src/app/services/get-element-icon-text.service.ts
index eeff6a657..2bc296045 100644
--- a/ui/src/app/services/get-element-icon-text.service.ts
+++ b/ui/src/app/services/get-element-icon-text.service.ts
@@ -20,7 +20,6 @@ import { Injectable } from '@angular/core';
@Injectable()
export class ElementIconText {
-
constructor() {}
getElementIconText(s) {
diff --git a/ui/src/app/services/jwt-token-storage.service.ts b/ui/src/app/services/jwt-token-storage.service.ts
index 3d535c121..ee696bb07 100644
--- a/ui/src/app/services/jwt-token-storage.service.ts
+++ b/ui/src/app/services/jwt-token-storage.service.ts
@@ -22,28 +22,27 @@ const TOKEN_KEY = 'auth-token';
const USER_KEY = 'auth-user';
export class JwtTokenStorageService {
+ constructor() {}
- constructor() { }
+ clearTokens(): void {
+ window.localStorage.clear();
+ }
- clearTokens(): void {
- window.localStorage.clear();
- }
+ public saveToken(token: string): void {
+ window.localStorage.removeItem(TOKEN_KEY);
+ window.localStorage.setItem(TOKEN_KEY, token);
+ }
- public saveToken(token: string): void {
- window.localStorage.removeItem(TOKEN_KEY);
- window.localStorage.setItem(TOKEN_KEY, token);
- }
+ public getToken(): string {
+ return localStorage.getItem(TOKEN_KEY);
+ }
- public getToken(): string {
- return localStorage.getItem(TOKEN_KEY);
- }
+ public saveUser(user: UserInfo): void {
+ window.localStorage.removeItem(USER_KEY);
+ window.localStorage.setItem(USER_KEY, JSON.stringify(user));
+ }
- public saveUser(user: UserInfo): void {
- window.localStorage.removeItem(USER_KEY);
- window.localStorage.setItem(USER_KEY, JSON.stringify(user));
- }
-
- public getUser(): UserInfo {
- return JSON.parse(localStorage.getItem(USER_KEY));
- }
+ public getUser(): UserInfo {
+ return JSON.parse(localStorage.getItem(USER_KEY));
+ }
}
diff --git a/ui/src/app/services/notification-count-service.ts b/ui/src/app/services/notification-count-service.ts
index bc8a8ecbd..6ee91da26 100644
--- a/ui/src/app/services/notification-count-service.ts
+++ b/ui/src/app/services/notification-count-service.ts
@@ -21,19 +21,16 @@ import { BehaviorSubject } from 'rxjs';
@Injectable()
export class NotificationCountService {
-
public unreadNotificationCount$ = new BehaviorSubject(0);
lockNotificationId: string;
lockActive = false;
- constructor(private restApi: RestApi) {
- }
+ constructor(private restApi: RestApi) {}
loadUnreadNotifications() {
- this.restApi.getUnreadNotificationsCount()
- .subscribe(response => {
- this.unreadNotificationCount$.next(response.count);
- });
+ this.restApi.getUnreadNotificationsCount().subscribe(response => {
+ this.unreadNotificationCount$.next(response.count);
+ });
}
decreaseNotificationCount() {
diff --git a/ui/src/app/services/property-selector.service.ts b/ui/src/app/services/property-selector.service.ts
index 87d1a0f10..7fbad8398 100644
--- a/ui/src/app/services/property-selector.service.ts
+++ b/ui/src/app/services/property-selector.service.ts
@@ -17,31 +17,38 @@
*/
import { Injectable } from '@angular/core';
-import { EventPropertyNested, EventPropertyUnion } from '@streampipes/platform-services';
+import {
+ EventPropertyNested,
+ EventPropertyUnion,
+} from '@streampipes/platform-services';
@Injectable()
export class PropertySelectorService {
-
firstStreamPrefix = 's0';
secondStreamPrefix = 's1';
propertyDelimiter = '::';
- constructor() {
-
- }
+ constructor() {}
- makeProperties(eventProperties: any[], availablePropertyKeys: string[], currentPointer) {
+ makeProperties(
+ eventProperties: any[],
+ availablePropertyKeys: string[],
+ currentPointer,
+ ) {
const outputProperties = [];
eventProperties.forEach(ep => {
availablePropertyKeys.forEach(apk => {
if (this.isInSelection(ep, apk, currentPointer)) {
- ep.runtimeId = this.makeSelector(currentPointer, ep.runtimeName);
+ ep.runtimeId = this.makeSelector(
+ currentPointer,
+ ep.runtimeName,
+ );
if (this.isNested(ep)) {
- ep.eventProperties =
- this.makeProperties(
- ep.eventProperties,
- availablePropertyKeys,
- this.makeSelector(currentPointer, ep.runtimeName));
+ ep.eventProperties = this.makeProperties(
+ ep.eventProperties,
+ availablePropertyKeys,
+ this.makeSelector(currentPointer, ep.runtimeName),
+ );
}
outputProperties.push(ep);
}
@@ -50,13 +57,18 @@ export class PropertySelectorService {
return outputProperties;
}
- makeFlatProperties(eventProperties: EventPropertyUnion[], availablePropertyKeys: string[]) {
+ makeFlatProperties(
+ eventProperties: EventPropertyUnion[],
+ availablePropertyKeys: string[],
+ ) {
const outputProperties = [];
availablePropertyKeys.forEach(apk => {
const keyArray = apk.split('::');
keyArray.shift();
- outputProperties.push(this.makeProperty(eventProperties, keyArray, apk));
+ outputProperties.push(
+ this.makeProperty(eventProperties, keyArray, apk),
+ );
});
return outputProperties;
}
@@ -67,11 +79,16 @@ export class PropertySelectorService {
if (ep.runtimeName === propertySelector[0]) {
if (this.isNested(ep)) {
propertySelector.shift();
- outputProperty = this.makeProperty(ep.eventProperties, propertySelector, originalSelector);
+ outputProperty = this.makeProperty(
+ ep.eventProperties,
+ propertySelector,
+ originalSelector,
+ );
} else {
ep.runtimeId = originalSelector;
outputProperty = ep;
- outputProperty.properties.niceLabel = this.makeNiceLabel(originalSelector);
+ outputProperty.properties.niceLabel =
+ this.makeNiceLabel(originalSelector);
}
}
});
@@ -86,11 +103,17 @@ export class PropertySelectorService {
return ep instanceof EventPropertyNested;
}
- isInSelection(inputProperty: EventPropertyUnion, propertySelector, currentPropertyPointer) {
- return (currentPropertyPointer
- + this.propertyDelimiter
- + inputProperty.runtimeName) === propertySelector;
-
+ isInSelection(
+ inputProperty: EventPropertyUnion,
+ propertySelector,
+ currentPropertyPointer,
+ ) {
+ return (
+ currentPropertyPointer +
+ this.propertyDelimiter +
+ inputProperty.runtimeName ===
+ propertySelector
+ );
}
makeSelector(prefix, current) {
diff --git a/ui/src/app/services/rest-api.service.ts b/ui/src/app/services/rest-api.service.ts
index 23eae54e4..62a2d46ff 100644
--- a/ui/src/app/services/rest-api.service.ts
+++ b/ui/src/app/services/rest-api.service.ts
@@ -23,12 +23,12 @@ import { Observable } from 'rxjs';
@Injectable()
export class RestApi {
-
encodeURIComponent: any;
- constructor (private platformServicesCommons: PlatformServicesCommons,
- private $http: HttpClient) {
- }
+ constructor(
+ private platformServicesCommons: PlatformServicesCommons,
+ private $http: HttpClient,
+ ) {}
getServerUrl() {
return this.platformServicesCommons.apiBasePath;
@@ -44,16 +44,21 @@ export class RestApi {
configured(): Observable<any> {
return this.$http.get(this.getServerUrl() + '/setup/configured', {
- headers: { ignoreLoadingBar: '' }
+ headers: { ignoreLoadingBar: '' },
});
}
getUnreadNotificationsCount(): Observable<any> {
- return this.$http.get(this.urlApiBase() + '/notifications/count', { headers: { ignoreLoadingBar: '' }});
+ return this.$http.get(this.urlApiBase() + '/notifications/count', {
+ headers: { ignoreLoadingBar: '' },
+ });
}
getDomainKnowledgeItems(query) {
- return this.$http.post(this.getServerUrl() + '/autocomplete/domain', query);
+ return this.$http.post(
+ this.getServerUrl() + '/autocomplete/domain',
+ query,
+ );
}
getAllUnits() {
@@ -65,7 +70,11 @@ export class RestApi {
}
getUnit(resource) {
- return this.$http.get(this.getServerUrl() + '/units/instances/' + encodeURIComponent(resource));
+ return this.$http.get(
+ this.getServerUrl() +
+ '/units/instances/' +
+ encodeURIComponent(resource),
+ );
}
getEpaCategories() {
@@ -89,7 +98,10 @@ export class RestApi {
}
updateCachedPipeline(rawPipelineModel: any) {
- return this.$http.post(this.urlApiBase() + '/pipeline-cache', rawPipelineModel);
+ return this.$http.post(
+ this.urlApiBase() + '/pipeline-cache',
+ rawPipelineModel,
+ );
}
removePipelineFromCache() {
diff --git a/ui/src/app/services/secure.pipe.ts b/ui/src/app/services/secure.pipe.ts
index 11538bd49..5027e7359 100644
--- a/ui/src/app/services/secure.pipe.ts
+++ b/ui/src/app/services/secure.pipe.ts
@@ -16,7 +16,6 @@
*
*/
-
import { Pipe, PipeTransform } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
@@ -25,18 +24,30 @@ import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
@Pipe({
- name: 'secure'
+ name: 'secure',
})
export class SecurePipe implements PipeTransform {
+ constructor(
+ private http: HttpClient,
+ private sanitizer: DomSanitizer,
+ private authService: AuthService,
+ ) {}
- constructor(private http: HttpClient,
- private sanitizer: DomSanitizer,
- private authService: AuthService) { }
-
- transform(url): Observable<SafeUrl> {
- return this.http
- .get(url, { responseType: 'blob', headers: {'Authorization': 'Bearer ' + this.authService.authToken$.value}})
- .pipe(map(val => this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(val))));
- }
-
+ transform(url): Observable<SafeUrl> {
+ return this.http
+ .get(url, {
+ responseType: 'blob',
+ headers: {
+ Authorization:
+ 'Bearer ' + this.authService.authToken$.value,
+ },
+ })
+ .pipe(
+ map(val =>
+ this.sanitizer.bypassSecurityTrustUrl(
+ URL.createObjectURL(val),
+ ),
+ ),
+ );
+ }
}
diff --git a/ui/src/app/services/services.module.ts b/ui/src/app/services/services.module.ts
index c27c7de91..5e597d1f9 100644
--- a/ui/src/app/services/services.module.ts
+++ b/ui/src/app/services/services.module.ts
@@ -27,7 +27,7 @@ import { ElementIconText } from './get-element-icon-text.service';
import { AppConstants } from './app.constants';
import { JwtTokenStorageService } from './jwt-token-storage.service';
import { PlatformServicesModule } from '@streampipes/platform-services';
-import { SecurePipe } from "./secure.pipe";
+import { SecurePipe } from './secure.pipe';
@NgModule({
imports: [],
@@ -45,7 +45,6 @@ import { SecurePipe } from "./secure.pipe";
PlatformServicesModule,
SecurePipe,
],
- exports: [SecurePipe]
+ exports: [SecurePipe],
})
-export class ServicesModule {
-}
+export class ServicesModule {}
diff --git a/ui/src/app/services/tour/adapter-tour-2.constants.ts b/ui/src/app/services/tour/adapter-tour-2.constants.ts
index aff169899..8a9e52004 100644
--- a/ui/src/app/services/tour/adapter-tour-2.constants.ts
+++ b/ui/src/app/services/tour/adapter-tour-2.constants.ts
@@ -19,51 +19,47 @@
export default {
adapterTour: {
id: 'adapter2',
- steps: [{
- stepId: 'step-1',
- title: 'Welcome to the Second Adapter Tutorial',
- text: '<p>In this tutorial you will learn how to get official environment data from the \'Landesamt für Umwelt Baden-Württemberg\' LUBW.' +
- '</p> Click <b>next</b> to continue.',
- classes: 'shepherd shepherd-welcome',
- buttons: [
- 'cancel',
- 'next'
- ]
- },
+ steps: [
+ {
+ stepId: 'step-1',
+ title: 'Welcome to the Second Adapter Tutorial',
+ text:
+ "<p>In this tutorial you will learn how to get official environment data from the 'Landesamt für Umwelt Baden-Württemberg' LUBW." +
+ '</p> Click <b>next</b> to continue.',
+ classes: 'shepherd shepherd-welcome',
+ buttons: ['cancel', 'next'],
+ },
{
stepId: 'step-2',
title: 'Select a new adapter',
- text: '<p>Let\'s start!</p>' +
- '<p>Select the Http Stream adapter to get the data from the LUBW</p>' +
- '<div><img src="https://www.lubw.baden-wuerttemberg.de/documents/10184/207326/151130_Hauptstaetter_Str_Kleinmessstation_400.jpg/638ab506-0590-47fe-8632-f948e65324b7?t=1478857258000" alt="Sensebox" height="150" width="200"></div>' +
- 'The image shows a measuring station. Those stations are distributed all over Baden-Württemberg',
+ text:
+ "<p>Let's start!</p>" +
+ '<p>Select the Http Stream adapter to get the data from the LUBW</p>' +
+ '<div><img src="https://www.lubw.baden-wuerttemberg.de/documents/10184/207326/151130_Hauptstaetter_Str_Kleinmessstation_400.jpg/638ab506-0590-47fe-8632-f948e65324b7?t=1478857258000" alt="Sensebox" height="150" width="200"></div>' +
+ 'The image shows a measuring station. Those stations are distributed all over Baden-Württemberg',
attachToElement: '#HTTP_Stream',
attachPosition: 'bottom',
- buttons: [
- 'cancel',
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-3',
title: 'Configure the protocol',
- text: 'The data is provided through a REST endpoint, which has to be polled regularly. To do this set the <b>Interval [Sec]</b> to <b>60</b>. This means the endpoint is accessed every minute.' +
- 'The <b>URL of the endpoint is: restendpoint:3001/lubw</b>, copy this URL into the URL field',
+ text:
+ 'The data is provided through a REST endpoint, which has to be polled regularly. To do this set the <b>Interval [Sec]</b> to <b>60</b>. This means the endpoint is accessed every minute.' +
+ 'The <b>URL of the endpoint is: restendpoint:3001/lubw</b>, copy this URL into the URL field',
attachToElement: '#formWrapper:last-of-type',
attachPosition: 'top',
- buttons: [
- 'cancel',
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-4',
title: 'Select the format geo Json',
- text: 'The data is provided in the form of geo Json. This is a Json format optimized for geospatiol data. To process this data select the <b>GeoJson</b> format. This format needs no further configuration.' +
- ' Go to the next step',
+ text:
+ 'The data is provided in the form of geo Json. This is a Json format optimized for geospatiol data. To process this data select the <b>GeoJson</b> format. This format needs no further configuration.' +
+ ' Go to the next step',
attachToElement: '#GeoJSON',
attachPosition: 'right',
- buttons: [
- 'cancel',
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-5',
@@ -71,15 +67,14 @@ export default {
text: 'After selecting GeoJson as a format go to the next step',
attachPosition: 'top',
attachToElement: '#format-selection-next-button',
- buttons: [
- 'cancel',
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-6.0',
title: 'Change the schema of the data',
- text: 'The data source of LUWB provices a lot of information and we do not need all of this. Therefore first delete all properties, except the following.' +
- '<ul>' +
+ text:
+ 'The data source of LUWB provices a lot of information and we do not need all of this. Therefore first delete all properties, except the following.' +
+ '<ul>' +
'<li><b>no2kont</b> (NO2)</li>' +
'<li><b>ozon</b> (Ozon)</li>' +
'<li><b>pm10grav</b> (Particulate Matter)</li>' +
@@ -87,15 +82,11 @@ export default {
'<li><b>longitude</b> (Location Longitude)</li>' +
'<li><b>timestamp</b> (Timestemp of data point)</li>' +
'<li><b>id</b> (Id of the station)</li>' +
- '</ul>' +
- 'When you make any errors during the editing you can reset the the schema on the reload button.',
+ '</ul>' +
+ 'When you make any errors during the editing you can reset the the schema on the reload button.',
attachToElement: '#schema_reload_button',
attachPosition: 'top',
- buttons: [
- 'cancel',
- 'next'
-
- ]
+ buttons: ['cancel', 'next'],
},
{
stepId: 'step-6.1',
@@ -103,9 +94,7 @@ export default {
text: 'Finish the modelling and go to next step to start the adapter',
attachToElement: '#event-schema-next-button',
attachPosition: 'bottom',
- buttons: [
- 'cancel'
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-7',
@@ -113,9 +102,7 @@ export default {
text: 'Change the name of the adapter to <b>LUBW</b> and click on button <b>Start Adapter</b>',
attachToElement: '#input-AdapterName',
attachPosition: 'top',
- buttons: [
- 'cancel'
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-8',
@@ -123,30 +110,32 @@ export default {
text: 'Wait for the data! Then finish the creation process by clicking on this button.',
attachToElement: '#confirm_adapter_started_button',
attachPosition: 'right',
- buttons: [
- 'cancel'
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-9',
title: 'Congratulation',
text: 'Congratulation you have created your first adapter and finished the tutorial. Go to the pipeline editor to see the new data source',
classes: 'shepherd shepherd-welcome',
- buttons: [
- 'cancel'
- ]
- }
+ buttons: ['cancel'],
+ },
],
matchingSteps: [
- {actionId: 'select-adapter', currentStep: 'step-2'},
- {actionId: 'specific-settings-next-button', currentStep: 'step-3'},
- {actionId: 'select-format', currentStep: 'step-4'},
- {actionId: 'format-selection-next-button', currentStep: 'step-5'},
+ { actionId: 'select-adapter', currentStep: 'step-2' },
+ {
+ actionId: 'specific-settings-next-button',
+ currentStep: 'step-3',
+ },
+ { actionId: 'select-format', currentStep: 'step-4' },
+ { actionId: 'format-selection-next-button', currentStep: 'step-5' },
- {actionId: 'event-schema-next-button', currentStep: 'step-6.1'},
+ { actionId: 'event-schema-next-button', currentStep: 'step-6.1' },
- {actionId: 'button-startAdapter', currentStep: 'step-7'},
- {actionId: 'confirm_adapter_started_button', currentStep: 'step-8'},
- ]
- }
+ { actionId: 'button-startAdapter', currentStep: 'step-7' },
+ {
+ actionId: 'confirm_adapter_started_button',
+ currentStep: 'step-8',
+ },
+ ],
+ },
};
diff --git a/ui/src/app/services/tour/adapter-tour-3.constants.ts b/ui/src/app/services/tour/adapter-tour-3.constants.ts
index 2f8e00a93..dc26631ed 100644
--- a/ui/src/app/services/tour/adapter-tour-3.constants.ts
+++ b/ui/src/app/services/tour/adapter-tour-3.constants.ts
@@ -19,63 +19,57 @@
export default {
adapterTour: {
id: 'adapter3',
- steps: [{
- stepId: 'step-1',
- title: 'Welcome to the Second Adapter Tutorial',
- text: '<p>In this tutorial we connect the live data form parking lots of the LAX airport.</p>' +
- '<p>Link to data description: https://goo.gl/48y2xv </p>' +
- 'Click <b>next</b> to continue.',
- classes: 'shepherd shepherd-welcome',
- buttons: [
- 'cancel',
- 'next'
- ]
- },
+ steps: [
+ {
+ stepId: 'step-1',
+ title: 'Welcome to the Second Adapter Tutorial',
+ text:
+ '<p>In this tutorial we connect the live data form parking lots of the LAX airport.</p>' +
+ '<p>Link to data description: https://goo.gl/48y2xv </p>' +
+ 'Click <b>next</b> to continue.',
+ classes: 'shepherd shepherd-welcome',
+ buttons: ['cancel', 'next'],
+ },
{
stepId: 'step-2',
title: 'Select a new adapter',
- text: '<p>Let\'s start!</p>' +
- '<p>First select the Http Stream adapter</p>',
+ text:
+ "<p>Let's start!</p>" +
+ '<p>First select the Http Stream adapter</p>',
attachToElement: '#HTTP_Stream',
attachPosition: 'bottom',
- buttons: [
- 'cancel',
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-3',
title: 'Configure the protocol',
- text: 'The data is provided through a REST endpoint, which has to be polled regularly. To do this set the <b>Interval</b> to <b>60</b>. This configuration will poll the data every minute' +
- 'The <b>URL of the endpoint is: https://data.lacity.org/resource/xzkr-5anj.json</b>, copy this URL into the URL field' +
- '<p>After setting the configuration, click on next to go to the next step</p>',
+ text:
+ 'The data is provided through a REST endpoint, which has to be polled regularly. To do this set the <b>Interval</b> to <b>60</b>. This configuration will poll the data every minute' +
+ 'The <b>URL of the endpoint is: https://data.lacity.org/resource/xzkr-5anj.json</b>, copy this URL into the URL field' +
+ '<p>After setting the configuration, click on next to go to the next step</p>',
attachToElement: '#formWrapper:last-of-type',
attachPosition: 'top',
- buttons: [
- 'cancel',
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-4',
title: 'Select the format Json Array No Key',
- text: 'Click on <b>Json Array No Key</b> format. The data is provided in an array and no further configurations are required' +
- 'Go to the next step',
+ text:
+ 'Click on <b>Json Array No Key</b> format. The data is provided in an array and no further configurations are required' +
+ 'Go to the next step',
attachToElement: '#json_array_no_key',
attachPosition: 'left',
- buttons: [
- 'cancel',
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-6.0',
title: 'Change the schema of the data',
- text: 'In this view you can see the schema of each data entry. You can use the schema editor to change the schema, add more information and have a look at the data' +
- '<p>When you understand the schema of the data go to the next step by clicking on the <b>next</b> button!',
+ text:
+ 'In this view you can see the schema of each data entry. You can use the schema editor to change the schema, add more information and have a look at the data' +
+ '<p>When you understand the schema of the data go to the next step by clicking on the <b>next</b> button!',
attachToElement: '#schema_reload_button',
attachPosition: 'top',
- buttons: [
- 'cancel',
-
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-7',
@@ -83,9 +77,7 @@ export default {
text: 'Change the name of the adapter to <b>LAX</b> and click on button <b>Start Adapter</b>',
attachToElement: '#input-AdapterName',
attachPosition: 'top',
- buttons: [
- 'cancel'
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-8',
@@ -93,29 +85,31 @@ export default {
text: 'Wait for the data! Then finish the creation process by clicking on this button.',
attachToElement: '#confirm_adapter_started_button',
attachPosition: 'right',
- buttons: [
- 'cancel'
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-9',
title: 'Congratulation',
text: 'Congratulation you have created your second adapter and finished the tutorial. Go to the pipeline editor to see the new data source',
classes: 'shepherd shepherd-welcome',
- buttons: [
- 'cancel'
- ]
- }
+ buttons: ['cancel'],
+ },
],
matchingSteps: [
- {actionId: 'select-adapter', currentStep: 'step-2'},
- {actionId: 'specific-settings-next-button', currentStep: 'step-3'},
- {actionId: 'format-selection-next-button', currentStep: 'step-4'},
+ { actionId: 'select-adapter', currentStep: 'step-2' },
+ {
+ actionId: 'specific-settings-next-button',
+ currentStep: 'step-3',
+ },
+ { actionId: 'format-selection-next-button', currentStep: 'step-4' },
- {actionId: 'event-schema-next-button', currentStep: 'step-6.0'},
+ { actionId: 'event-schema-next-button', currentStep: 'step-6.0' },
- {actionId: 'button-startAdapter', currentStep: 'step-7'},
- {actionId: 'confirm_adapter_started_button', currentStep: 'step-8'},
- ]
- }
+ { actionId: 'button-startAdapter', currentStep: 'step-7' },
+ {
+ actionId: 'confirm_adapter_started_button',
+ currentStep: 'step-8',
+ },
+ ],
+ },
};
diff --git a/ui/src/app/services/tour/adapter-tour.constants.ts b/ui/src/app/services/tour/adapter-tour.constants.ts
index ece3c5273..eea1b7d19 100644
--- a/ui/src/app/services/tour/adapter-tour.constants.ts
+++ b/ui/src/app/services/tour/adapter-tour.constants.ts
@@ -19,112 +19,104 @@
export default {
adapterTour: {
id: 'adapter',
- steps: [{
- stepId: 'step-1',
- title: 'Welcome to the Adapter Tutorial',
- text: '<p>In this tour you will learn how to create a new adapter, which then can be used as a source in the pipeline editor.</p> Click <b>next</b> to continue.',
- classes: 'shepherd shepherd-welcome',
- buttons: [
- 'cancel',
- 'next'
- ]
- },
+ steps: [
+ {
+ stepId: 'step-1',
+ title: 'Welcome to the Adapter Tutorial',
+ text: '<p>In this tour you will learn how to create a new adapter, which then can be used as a source in the pipeline editor.</p> Click <b>next</b> to continue.',
+ classes: 'shepherd shepherd-welcome',
+ buttons: ['cancel', 'next'],
+ },
{
stepId: 'step-2',
title: 'Select a new adapter',
- text: '<p>Let\'s start!</p>' +
- '<p>This is the <b>OpenSenseMap</b> adapter. OpenSenseMap is an online service where everybody can publish environment data. </p>' +
- '<div><img src="https://sensebox.de/images/senseBox_home_circle_500.png" alt="Sensebox" height="200" width="200"></div>' +
- 'Click on <b>OpenSenseMap Adapter</b> to continue.',
+ text:
+ "<p>Let's start!</p>" +
+ '<p>This is the <b>OpenSenseMap</b> adapter. OpenSenseMap is an online service where everybody can publish environment data. </p>' +
+ '<div><img src="https://sensebox.de/images/senseBox_home_circle_500.png" alt="Sensebox" height="200" width="200"></div>' +
+ 'Click on <b>OpenSenseMap Adapter</b> to continue.',
attachToElement: '#OpenSenseMap',
attachPosition: 'bottom',
- buttons: [
- 'cancel',
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-3',
title: 'Select the sensors you are interested in',
- text: '<p><b>Select all sensors</b> in the menu on the left. With the selection you just get the values of the sensor boxes containing all sensors.<p>' +
- 'After selecting all Sensors click on <b>next</b> to continue.',
+ text:
+ '<p><b>Select all sensors</b> in the menu on the left. With the selection you just get the values of the sensor boxes containing all sensors.<p>' +
+ 'After selecting all Sensors click on <b>next</b> to continue.',
attachToElement: '#specific-settings-next-button',
attachPosition: 'top',
- buttons: [
- 'cancel',
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-4',
title: 'Configure the schema of the data',
- text: 'In this editor it is possible to change the schema of the sensebox data. Each entry describes a property. For example the <b>id</b> property contains the unique id of the sensebox. ' +
- 'Open the configuration menu by <b>clicking on the arrow</b>!',
+ text:
+ 'In this editor it is possible to change the schema of the sensebox data. Each entry describes a property. For example the <b>id</b> property contains the unique id of the sensebox. ' +
+ 'Open the configuration menu by <b>clicking on the arrow</b>!',
attachToElement: '#id button:last-of-type',
attachPosition: 'top',
- buttons: [
- 'cancel',
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-5',
title: 'Change the id runtime name',
- text: 'The runtime name represents the key in our Json data objects. Change the value of the runtime name to <b>new_id</b>. This will also change all the keys later in the real data stream. ' +
- 'Then click the <b>next button of the user guide</b>.',
+ text:
+ 'The runtime name represents the key in our Json data objects. Change the value of the runtime name to <b>new_id</b>. This will also change all the keys later in the real data stream. ' +
+ 'Then click the <b>next button of the user guide</b>.',
attachToElement: '#input-runtime-name-Id',
attachPosition: 'bottom',
- buttons: [
- 'cancel',
- 'next'
- ]
+ buttons: ['cancel', 'next'],
},
- {
+ {
stepId: 'step-6',
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: '#event-schema-next-button',
attachPosition: 'bottom',
- buttons: [
- 'cancel'
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-7',
title: 'Start Adapter',
- text: 'Change the name of the adapter to <b>OpenSenseMap</b> and click on <b>button \'Start Adapter\'</b>',
+ text: "Change the name of the adapter to <b>OpenSenseMap</b> and click on <b>button 'Start Adapter'</b>",
attachToElement: '#input-AdapterName',
attachPosition: 'top',
- buttons: [
- 'cancel'
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-8',
title: 'Adapter was started successfully',
- text: '<p>The adpater is now deployed in the background and the data is fetched and processed from the OpenSenseMap endpoint. Here you will see some example data, which is coming directly ' +
- 'the data source. This might take a minute. On the left you can see the runtime names of the properties you defined before. On the right side the values are shown. After having a look at ' +
- 'the data <b>click on Close</b> to continue.</p>',
+ text:
+ '<p>The adpater is now deployed in the background and the data is fetched and processed from the OpenSenseMap endpoint. Here you will see some example data, which is coming directly ' +
+ 'the data source. This might take a minute. On the left you can see the runtime names of the properties you defined before. On the right side the values are shown. After having a look at ' +
+ 'the data <b>click on Close</b> to continue.</p>',
attachToElement: '#confirm_adapter_started_button',
attachPosition: 'bottom',
- buttons: [
- 'cancel'
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-9',
title: 'Congratulation',
text: '<b></b>Congratulation!</b> You have created your first adapter and finished the tutorial. Go to the pipeline editor to see the new data source',
classes: 'shepherd shepherd-welcome',
- buttons: [
- 'cancel'
- ]
- }
+ buttons: ['cancel'],
+ },
],
matchingSteps: [
- {actionId: 'select-adapter', currentStep: 'step-2'},
- {actionId: 'specific-settings-next-button', currentStep: 'step-3'},
- {actionId: 'open-event-property-primitve', currentStep: 'step-4'},
- {actionId: 'event-schema-next-button', currentStep: 'step-6'},
- {actionId: 'button-startAdapter', currentStep: 'step-7'},
- {actionId: 'confirm_adapter_started_button', currentStep: 'step-8'},
- ]
- }
+ { actionId: 'select-adapter', currentStep: 'step-2' },
+ {
+ actionId: 'specific-settings-next-button',
+ currentStep: 'step-3',
+ },
+ { actionId: 'open-event-property-primitve', currentStep: 'step-4' },
+ { actionId: 'event-schema-next-button', currentStep: 'step-6' },
+ { actionId: 'button-startAdapter', currentStep: 'step-7' },
+ {
+ actionId: 'confirm_adapter_started_button',
+ currentStep: 'step-8',
+ },
+ ],
+ },
};
diff --git a/ui/src/app/services/tour/create-pipeline-tour.constants.ts b/ui/src/app/services/tour/create-pipeline-tour.constants.ts
index b9bbacea8..ed09e30da 100644
--- a/ui/src/app/services/tour/create-pipeline-tour.constants.ts
+++ b/ui/src/app/services/tour/create-pipeline-tour.constants.ts
@@ -25,31 +25,24 @@ export default {
title: 'Welcome!',
classes: 'shepherd shepherd-welcome',
text: '<p>This tour will teach you how to create your first pipeline. You will learn how to select streams, how to connect data processors and sinks and how to start a pipeline.</p> Click <b>next</b> to continue.',
- buttons: [
- 'cancel',
- 'next'
- ]
+ buttons: ['cancel', 'next'],
},
{
stepId: 'step-2',
title: 'Pipeline Element Selection',
- text: '<p>Let\'s start!</p> <p>This is the <b>Pipeline Element Selection</b> panel. Here you can select and use all available pipeline elements.</p>',
+ text: "<p>Let's start!</p> <p>This is the <b>Pipeline Element Selection</b> panel. Here you can select and use all available pipeline elements.</p>",
attachToElement: '#editor-icon-stand',
attachPosition: 'left',
- buttons: [
- 'cancel',
- 'next'
- ]
+ buttons: ['cancel', 'next'],
},
{
stepId: 'step-3',
title: 'Selecting data streams',
- text: 'The first element of a pipeline is a data stream, which produces data you\'d like to transform. <p>To select a stream, drag and drop the stream named <b>Flow Rate 1</b> to the assembly area on the right.</p>',
- attachToElement: '#org\\.apache\\.streampipes\\.sources\\.simulator\\.flowrate1',
+ text: "The first element of a pipeline is a data stream, which produces data you'd like to transform. <p>To select a stream, drag and drop the stream named <b>Flow Rate 1</b> to the assembly area on the right.</p>",
+ attachToElement:
+ '#org\\.apache\\.streampipes\\.sources\\.simulator\\.flowrate1',
attachPosition: 'left',
- buttons: [
- 'cancel',
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-4',
@@ -57,10 +50,7 @@ export default {
text: '<p>Cool!</p> <p>Dragging and dropping elements is the basic principle you need to know to create pipelines. You only need to select a pipeline element and drop it to the assembly area.</p><p>Click <b>Next</b> to continue.</p>',
attachToElement: '#assembly>pipeline .stream:nth-child(1)',
attachPosition: 'left',
- buttons: [
- 'cancel',
- 'next'
- ]
+ buttons: ['cancel', 'next'],
},
{
stepId: 'step-5',
@@ -68,30 +58,25 @@ export default {
text: 'No we will add a data processor. This is the data processor list which shows all currently available data processors.<p>Click <b>Next</b> to continue.</p>',
attachToElement: '#panel-2',
attachPosition: 'left',
- buttons: [
- 'cancel',
- 'next'
- ]
+ buttons: ['cancel', 'next'],
},
{
stepId: 'step-6',
title: 'Selecting data processors',
text: '<p>Processors can provide simple capabilities such as filters or aggregations, but can also provide more advanced capabilities such as trend and pattern detection or even pre-trained neural networks.</p><p>Select the processor called <b>Numerical Filter</b> and move it to the assembly area.</p>',
- attachToElement: '#org\\.apache\\.streampipes\\.processors\\.filters\\.jvm\\.numericalfilter',
+ attachToElement:
+ '#org\\.apache\\.streampipes\\.processors\\.filters\\.jvm\\.numericalfilter',
attachPosition: 'right',
- buttons: [
- 'cancel'
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-7',
title: 'Connecting elements',
- text: '<p>Now it\'s time to connect the first elements of your pipeline!</p> <p>Click the gray output port of the stream and connect it with the Numerical Filter component.</p>',
- attachToElement: '#assembly>div.jsplumb-endpoint:nth-of-type(1)',
+ text: "<p>Now it's time to connect the first elements of your pipeline!</p> <p>Click the gray output port of the stream and connect it with the Numerical Filter component.</p>",
+ attachToElement:
+ '#assembly>div.jsplumb-endpoint:nth-of-type(1)',
attachPosition: 'bottom',
- buttons: [
- 'cancel'
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-8',
@@ -99,40 +84,33 @@ export default {
text: '<p>Most pipeline elements can be customized according to your needs. Whenever you connect two elements with each other, a configuration dialog pops up.</p><p>Select <b>Mass Flow</b> as the field to filter, select <b>greater than (>) </b> as operation, select <b>2</b> as the threshold value and click <b>Save</b>.</p>',
attachToElement: 'div .dialog-panel-content',
attachPosition: 'right',
- buttons: [
- 'cancel'
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-9',
title: 'Selecting data sinks',
- text: '<p>What\'s missing?</p><p>Every pipeline needs a data sink. Sinks define what to do with the output of your pipeline and can be visualizations, notifications, or can trigger third party components or even actuators.</p><p>Click <b>Next</b> to continue.</p>',
+ text: "<p>What's missing?</p><p>Every pipeline needs a data sink. Sinks define what to do with the output of your pipeline and can be visualizations, notifications, or can trigger third party components or even actuators.</p><p>Click <b>Next</b> to continue.</p>",
attachToElement: '#panel-3',
attachPosition: 'left',
- buttons: [
- 'cancel',
- 'next'
- ]
+ buttons: ['cancel', 'next'],
},
{
stepId: 'step-10',
title: 'Finish Pipeline',
text: '<p>Almost there!</p>Select the <b>Data Lake</b> sink and connect the <b>Numerical Filter</b> to the Data Lake sink. Enter any storage name in the configuration menu.</p>',
- attachToElement: '#org\\.apache\\.streampipes\\.sinks\\.internal\\.jvm\\.datalake',
+ attachToElement:
+ '#org\\.apache\\.streampipes\\.sinks\\.internal\\.jvm\\.datalake',
attachPosition: 'left',
- buttons: [
- 'cancel'
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-11',
title: 'Save Pipeline',
- text: '<p>Great!</p><p>Your first pipeline is complete. No we\'re ready to start the pipeline.</p><p>Click the <b>Save</b> icon to open the save dialog.</p>',
- attachToElement: '.pipeline-assembly-options>div>button:nth-of-type(1)',
+ text: "<p>Great!</p><p>Your first pipeline is complete. No we're ready to start the pipeline.</p><p>Click the <b>Save</b> icon to open the save dialog.</p>",
+ attachToElement:
+ '.pipeline-assembly-options>div>button:nth-of-type(1)',
attachPosition: 'left',
- buttons: [
- 'cancel'
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-12',
@@ -140,42 +118,38 @@ export default {
text: '<p>Enter a name and an optional description of your pipeline.</p><p>Afterwards, make sure that <b>Start pipeline immediately</b> is checked.</p>',
attachToElement: 'div .dialog-panel-content',
attachPosition: 'right',
- buttons: [
- 'cancel'
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-13',
title: 'Save Pipeline Dialog',
text: '<p>Click on <b>Save and go to pipeline view</b> to start the pipeline.</p>',
- attachToElement: 'save-pipeline .sp-dialog-actions>button:nth-of-type(2)',
+ attachToElement:
+ 'save-pipeline .sp-dialog-actions>button:nth-of-type(2)',
attachPosition: 'top',
- buttons: [
- 'cancel'
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-14',
title: 'Pipeline Started',
- text: '<p>Congratulations!</p><p>You\'ve completed the first tutorial. The next step would be to add a visualization in the <b>Dashboard</b>. If you wish to see how it works, start the second tutorial.</p>',
- attachToElement: 'md-dialog>form>md-dialog-actions>button:nth-of-type(1)',
+ text: "<p>Congratulations!</p><p>You've completed the first tutorial. The next step would be to add a visualization in the <b>Dashboard</b>. If you wish to see how it works, start the second tutorial.</p>",
+ attachToElement:
+ 'md-dialog>form>md-dialog-actions>button:nth-of-type(1)',
attachPosition: 'bottom',
- buttons: [
- 'cancel'
- ]
- }
+ buttons: ['cancel'],
+ },
],
matchingSteps: [
- {actionId: 'drop-stream', currentStep: 'step-3'},
- {actionId: 'select-sepa', currentStep: 'step-5'},
- {actionId: 'drop-sepa', currentStep: 'step-6'},
- {actionId: 'customize-sepa', currentStep: 'step-7'},
- {actionId: 'save-sepa', currentStep: 'step-8'},
- {actionId: 'select-action', currentStep: 'step-9'},
- {actionId: 'save-action', currentStep: 'step-10'},
- {actionId: 'enter-pipeline-name', currentStep: 'step-11'},
- {actionId: 'save-pipeline-dialog', currentStep: 'step-12'},
- {actionId: 'pipeline-started', currentStep: 'step-13'},
- ]
- }
+ { actionId: 'drop-stream', currentStep: 'step-3' },
+ { actionId: 'select-sepa', currentStep: 'step-5' },
+ { actionId: 'drop-sepa', currentStep: 'step-6' },
+ { actionId: 'customize-sepa', currentStep: 'step-7' },
+ { actionId: 'save-sepa', currentStep: 'step-8' },
+ { actionId: 'select-action', currentStep: 'step-9' },
+ { actionId: 'save-action', currentStep: 'step-10' },
+ { actionId: 'enter-pipeline-name', currentStep: 'step-11' },
+ { actionId: 'save-pipeline-dialog', currentStep: 'step-12' },
+ { actionId: 'pipeline-started', currentStep: 'step-13' },
+ ],
+ },
};
diff --git a/ui/src/app/services/tour/dashboard-tour.constants.ts b/ui/src/app/services/tour/dashboard-tour.constants.ts
index 4439c684f..095d3c061 100644
--- a/ui/src/app/services/tour/dashboard-tour.constants.ts
+++ b/ui/src/app/services/tour/dashboard-tour.constants.ts
@@ -19,25 +19,21 @@
export default {
dashboardTour: {
id: 'dashboard',
- steps: [{
- stepId: 'step-1',
- title: 'Welcome to the Dashboard Tutorial!',
- classes: 'shepherd shepherd-welcome',
- text: '<p>In this tutorial, you\'ll learn how to create a live dashboard that shows data from a running pipeline.</p><b>Note:</b>This tutorial requires a running pipeline that makes use of the <i>Dashboard Sink</i>. If you don\'t have such a pipeine started yet, go to the pipeline editor and create one.<p>Press <i>Next</i> to start the tutorial!</p>',
- buttons: [
- 'cancel',
- 'next'
- ]
- },
+ steps: [
+ {
+ stepId: 'step-1',
+ title: 'Welcome to the Dashboard Tutorial!',
+ classes: 'shepherd shepherd-welcome',
+ text: "<p>In this tutorial, you'll learn how to create a live dashboard that shows data from a running pipeline.</p><b>Note:</b>This tutorial requires a running pipeline that makes use of the <i>Dashboard Sink</i>. If you don't have such a pipeine started yet, go to the pipeline editor and create one.<p>Press <i>Next</i> to start the tutorial!</p>",
+ buttons: ['cancel', 'next'],
+ },
{
stepId: 'step-2',
title: 'Add visualization',
- text: '<p>Let\'s start!</p><p>To create a new visulization, click the <i>Add visualization</i> button.</p>',
+ text: "<p>Let's start!</p><p>To create a new visulization, click the <i>Add visualization</i> button.</p>",
attachToElement: '#add-viz-button',
attachPosition: 'bottom',
- buttons: [
- 'cancel',
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-3',
@@ -45,19 +41,15 @@ export default {
text: '<p>This wizard allows to configure visualizations. The first step is to select a currently running pipeline.</p><p>Click the pipeline shown on the left.</p>',
attachToElement: 'md-grid-tile:nth-of-type(1)',
attachPosition: 'right',
- buttons: [
- 'cancel',
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-4',
title: 'Select visualization',
- text: '<p>The second step requires the selection of a visulization. You can select from tables, gauges, maps or charts.</p><p>In this tutorial, we\'ll create a table visualization, so click the <i>Table</i> visualization on the left.</p>',
+ text: "<p>The second step requires the selection of a visulization. You can select from tables, gauges, maps or charts.</p><p>In this tutorial, we'll create a table visualization, so click the <i>Table</i> visualization on the left.</p>",
attachToElement: 'md-grid-tile:nth-of-type(1)',
attachPosition: 'right',
- buttons: [
- 'cancel',
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-5',
@@ -65,9 +57,7 @@ export default {
text: '<p>Some visualizations can be customized according to your needs.</p><p>For instance, the table visualization provides a dialog to filter columns. Click the <i>Select all</i> button on the left to select all fields from the incoming event.</p>',
attachToElement: '#select-all-button',
attachPosition: 'right',
- buttons: [
- 'cancel',
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-6',
@@ -75,9 +65,7 @@ export default {
text: 'Now you are ready to save your visualization. Click <i>Save</i> to create a new visualization in your dashboard.',
attachToElement: '#save-viz-button',
attachPosition: 'bottom',
- buttons: [
- 'cancel',
- ]
+ buttons: ['cancel'],
},
{
stepId: 'step-7',
@@ -85,17 +73,15 @@ export default {
text: '<p>Now you should see live data coming in. There are many more visualization types you can try.</p>Press <i>Exit</i> to finish the tour.',
attachToElement: '.widget-container:nth-of-type(1)',
attachPosition: 'right',
- buttons: [
- 'cancel',
- ]
+ buttons: ['cancel'],
},
],
matchingSteps: [
- {actionId: 'add-viz', currentStep: 'step-2'},
- {actionId: 'select-pipeline', currentStep: 'step-3'},
- {actionId: 'select-viz', currentStep: 'step-4'},
- {actionId: 'customize-viz', currentStep: 'step-5'},
- {actionId: 'save-viz', currentStep: 'step-6'},
- ]
- }
+ { actionId: 'add-viz', currentStep: 'step-2' },
+ { actionId: 'select-pipeline', currentStep: 'step-3' },
+ { actionId: 'select-viz', currentStep: 'step-4' },
+ { actionId: 'customize-viz', currentStep: 'step-5' },
+ { actionId: 'save-viz', currentStep: 'step-6' },
+ ],
+ },
};
diff --git a/ui/src/app/services/tour/shepherd.service.ts b/ui/src/app/services/tour/shepherd.service.ts
index 9d820fdc4..c5c87f09f 100644
--- a/ui/src/app/services/tour/shepherd.service.ts
+++ b/ui/src/app/services/tour/shepherd.service.ts
@@ -25,13 +25,14 @@ import StepOptions = Step.StepOptions;
@Injectable()
export class ShepherdService {
-
currentTour: any;
currentTourSettings: any;
timeWaitMillis: number;
- constructor(private router: Router,
- private tourProviderService: TourProviderService) {
+ constructor(
+ private router: Router,
+ private tourProviderService: TourProviderService,
+ ) {
this.timeWaitMillis = tourProviderService.getTime();
}
@@ -41,9 +42,9 @@ export class ShepherdService {
confirmCancelMessage: 'Do you really want to cancel the tour?',
defaultStepOptions: {
classes: 'shadow-md bg-purple-dark',
- scrollTo: true
+ scrollTo: true,
// showCancelLink: true
- }
+ },
});
currentTourSettings.steps.forEach(step => {
@@ -59,7 +60,7 @@ export class ShepherdService {
text: step.text,
classes: step.classes,
id: step.stepId,
- buttons: this.generateButtons(tour, step.buttons)
+ buttons: this.generateButtons(tour, step.buttons),
};
if (step.attachToElement) {
@@ -67,7 +68,7 @@ export class ShepherdService {
attachTo: {
element: step.attachToElement,
on: step.attachPosition,
- }
+ },
});
}
@@ -100,19 +101,18 @@ export class ShepherdService {
this.currentTour.start();
}
-
makeCancelButton(tour) {
return {
action: tour.cancel,
classes: 'shepherd-button-secondary',
- text: 'Exit Tour'
+ text: 'Exit Tour',
};
}
makeNextButton(tour) {
return {
action: tour.next,
- text: 'Next'
+ text: 'Next',
};
}
@@ -120,28 +120,36 @@ export class ShepherdService {
return {
action: tour.back,
classes: 'shepherd-button-secondary',
- text: 'Back'
+ text: 'Back',
};
}
makeStartDashboardTutorialButton() {
return {
action: this.switchAndStartDashboardTour(),
- text: 'Dashboard Tutorial'
+ text: 'Dashboard Tutorial',
};
}
trigger(actionId) {
if (Shepherd.activeTour) {
- if (this.shouldTrigger(actionId, this.currentTour.getCurrentStep().id)) {
- setTimeout(() => this.currentTour.next(), this.tourProviderService.getTime());
+ if (
+ this.shouldTrigger(
+ actionId,
+ this.currentTour.getCurrentStep().id,
+ )
+ ) {
+ setTimeout(
+ () => this.currentTour.next(),
+ this.tourProviderService.getTime(),
+ );
}
}
}
shouldTrigger(actionId, currentStep) {
return this.currentTourSettings.matchingSteps.some(el => {
- return (el.actionId === actionId) && (el.currentStep === currentStep);
+ return el.actionId === actionId && el.currentStep === currentStep;
});
}
@@ -182,6 +190,6 @@ export class ShepherdService {
}
getTimeWaitMillies() {
- return this.tourProviderService.getTime();
+ return this.tourProviderService.getTime();
}
}
diff --git a/ui/src/app/services/tour/tour-provider.service.ts b/ui/src/app/services/tour/tour-provider.service.ts
index c2094a4c9..6e4520106 100644
--- a/ui/src/app/services/tour/tour-provider.service.ts
+++ b/ui/src/app/services/tour/tour-provider.service.ts
@@ -1,4 +1,3 @@
-
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
@@ -26,7 +25,6 @@ import { Injectable } from '@angular/core';
@Injectable()
export class TourProviderService {
-
guidedTours: any;
// This is needed to configure the time in cypress test cases
@@ -48,7 +46,7 @@ export class TourProviderService {
getTourById(tourId) {
return this.guidedTours.find(tour => {
- return tour.id === tourId;
+ return tour.id === tourId;
});
}