You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2020/08/11 21:23:03 UTC
[incubator-streampipes] 02/03: [STREAMPIPES-193] Migrate core
modules to Angular
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-193
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit e0e444d11bb12009f0eb260d9bdaff264bca5efc
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Tue Aug 11 22:47:33 2020 +0200
[STREAMPIPES-193] Migrate core modules to Angular
---
ui/deployment/app.module.mst | 5 +-
ui/deployment/appng5.module.mst | 30 ++-
ui/src/app/app-routing.module.ts | 56 +++++
.../streampipes.html => app/app.component.html} | 46 ++--
.../feedback.component.ts => app.component.ts} | 20 +-
.../components/base-navigation.component.ts | 116 ++++++++++
.../components/feedback/feedback.component.html} | 49 ++--
.../components/feedback/feedback.component.ts} | 45 ++--
.../components/iconbar/iconbar.component.html | 46 ++++
.../components/iconbar/iconbar.component.ts | 69 ++++++
.../streampipes/streampipes.component.html | 40 ++++
.../streampipes/streampipes.component.scss} | 18 +-
.../streampipes/streampipes.component.ts} | 28 +--
.../components/toolbar/toolbar.component.html | 72 ++++++
.../components/toolbar/toolbar.component.ts | 111 +++++++++
ui/src/app/core-v2/core.module.ts | 38 +++-
.../dialog/welcome-tour/welcome-tour.component.ts | 2 +-
ui/src/app/editor/editor.component.ts | 11 +-
ui/src/app/editor/editor.module.ts | 15 --
ui/src/app/home/components/status.component.ts | 12 +-
ui/src/app/home/home.component.ts | 5 +-
ui/src/app/layout/layout.module.ts | 26 +--
.../app/login/components/login/login.component.ts | 6 +-
.../app/login/components/setup/setup.component.ts | 5 +-
.../login/components/startup/startup.component.ts | 2 +-
.../app/notifications/notifications.component.ts | 4 +-
.../pipeline-details/pipeline-details.component.ts | 11 +-
ui/src/app/pipelines/pipelines.component.ts | 13 +-
.../services/pipeline-operations.service.ts | 14 +-
ui/src/app/services/auth-status.service.ts | 1 +
ui/src/app/services/auth.service.ts | 21 +-
ui/src/app/services/notification-count-service.ts | 6 +-
ui/src/app/services/rest-api.service.ts | 250 +++++++++------------
ui/src/app/services/services.module.ts | 105 ++++-----
ui/src/app/services/tour/shepherd.service.ts | 17 +-
ui/src/app/services/tour/tour-provider.service.ts | 15 +-
ui/src/assets/templates/iconbar.html | 57 -----
ui/src/assets/templates/navbar.html | 127 -----------
ui/src/assets/templates/register.html | 67 ------
ui/src/assets/templates/tutorial.html | 160 -------------
ui/src/index.html | 22 +-
ui/src/main.ts | 14 +-
42 files changed, 897 insertions(+), 880 deletions(-)
diff --git a/ui/deployment/app.module.mst b/ui/deployment/app.module.mst
index 13a4a31..5865427 100644
--- a/ui/deployment/app.module.mst
+++ b/ui/deployment/app.module.mst
@@ -16,6 +16,7 @@
*
*/
+/*
'use strict';
import * as angular from 'angular';
@@ -65,4 +66,6 @@ export const Ng1AppModule = angular
//window['loading_screen'].finish();
}])
.config(mdThemingProviderConfig)
- .directive("spButton", ['$mdButtonInkRipple', '$mdTheming', '$mdAria', '$mdInteraction', ($mdButtonInkRipple, $mdTheming, $mdAria, $mdInteraction) => new SpButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $mdInteraction)]);
\ No newline at end of file
+ .directive("spButton", ['$mdButtonInkRipple', '$mdTheming', '$mdAria', '$mdInteraction', ($mdButtonInkRipple, $mdTheming, $mdAria, $mdInteraction) => new SpButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $mdInteraction)]);
+
+ */
\ No newline at end of file
diff --git a/ui/deployment/appng5.module.mst b/ui/deployment/appng5.module.mst
index 16b00ba..3cae21a 100644
--- a/ui/deployment/appng5.module.mst
+++ b/ui/deployment/appng5.module.mst
@@ -19,10 +19,10 @@
import './app.module';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
-import { UpgradeModule } from '@angular/upgrade/static';
+//import { UpgradeModule } from '@angular/upgrade/static';
import { MatGridListModule } from '@angular/material/grid-list';
import { FlexLayoutModule } from '@angular/flex-layout';
-import { UIRouterUpgradeModule } from '@uirouter/angular-hybrid';
+//import { UIRouterUpgradeModule } from '@uirouter/angular-hybrid';
import { HttpClientModule } from '@angular/common/http';
import { MatIconModule } from '@angular/material/icon';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -52,19 +52,29 @@ import {Logger} from './shared/logger/default-log.service';
import { AppContainerModule } from './app-container/app-container.module';
import { NotificationModule } from './notifications/notifications.module';
+import {AppComponent} from './app.component';
+import {AppRoutingModule} from './app-routing.module';
+
+import {ServicesModule} from "./services/services.module";
+
+import * as $ from 'jquery';
@NgModule({
+ declarations: [
+ AppComponent
+ ],
imports: [
+ AppRoutingModule,
BrowserModule,
BrowserAnimationsModule,
- UpgradeModule,
+ //UpgradeModule,
CustomMaterialModule,
MatGridListModule,
MatIconModule,
FlexLayoutModule,
HttpClientModule,
FormsModule,
- UIRouterUpgradeModule.forRoot(),
+ //UIRouterUpgradeModule.forRoot(),
LoginModule,
HomeModule,
ConfigurationModule,
@@ -74,6 +84,7 @@ import { NotificationModule } from './notifications/notifications.module';
AppContainerModule,
NotificationModule,
PipelineDetailsModule,
+ ServicesModule,
{{#modulesActive}}
{{#ng5}}
{{{ng5_moduleName}}},
@@ -83,6 +94,7 @@ import { NotificationModule } from './notifications/notifications.module';
providers: [
AuthStatusService,
AuthService,
+ /*
{
provide: '$stateParams',
useFactory: ($injector: any) => $injector.get('$stateParams'),
@@ -93,16 +105,12 @@ import { NotificationModule } from './notifications/notifications.module';
useFactory: ($injector: any) => $injector.get('$state'),
deps: ['$injector']
},
+ */
NotificationCountService,
{provide: Logger, useClass: ConsoleLogService}
- ]
+ ],
+ bootstrap: [AppComponent]
})
export class AppModule {
- constructor(private upgrade: UpgradeModule) {
- }
-
- ngDoBootstrap() {
- this.upgrade.bootstrap(document.body, ['streamPipesApp'], {strictDi: true});
- }
}
\ No newline at end of file
diff --git a/ui/src/app/app-routing.module.ts b/ui/src/app/app-routing.module.ts
new file mode 100644
index 0000000..15e4bcc
--- /dev/null
+++ b/ui/src/app/app-routing.module.ts
@@ -0,0 +1,56 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {HomeComponent} from "./home/home.component";
+import {LoginComponent} from "./login/components/login/login.component";
+import {SetupComponent} from "./login/components/setup/setup.component";
+import {StreampipesComponent} from "./core-v2/components/streampipes/streampipes.component";
+import {EditorComponent} from "./editor/editor.component";
+import {PipelinesComponent} from "./pipelines/pipelines.component";
+import {ConnectComponent} from "./connect/connect.component";
+import {DashboardComponent} from "./dashboard/dashboard.component";
+import {DataExplorerComponent} from "./data-explorer/data-explorer.component";
+import {AppOverviewComponent} from "./app-overview/app-overview.component";
+import {AddComponent} from "./add/add.component";
+import {ConfigurationComponent} from "./configuration/configuration.component";
+import {PipelineDetailsComponent} from "./pipeline-details/pipeline-details.component";
+
+const routes: Routes = [
+ { path: 'login', component: LoginComponent },
+ { path: 'setup', component: SetupComponent },
+ { path: '', component: StreampipesComponent, children: [
+ { path: '', component: HomeComponent },
+ { path: 'add', component: AddComponent },
+ { path: 'app-overview', component: AppOverviewComponent },
+ { path: 'connect', component: ConnectComponent },
+ { path: 'configuration', component: ConfigurationComponent },
+ { path: 'dashboard', component: DashboardComponent },
+ { path: 'dataexplorer', component: DataExplorerComponent },
+ { path: 'editor', component: EditorComponent },
+ { path: 'pipelines', component: PipelinesComponent },
+ { path: 'pipeline-details', component: PipelineDetailsComponent }
+ ]}
+];
+
+@NgModule({
+ imports: [RouterModule.forRoot(routes, {useHash: true})],
+ exports: [RouterModule]
+})
+export class AppRoutingModule { }
\ No newline at end of file
diff --git a/ui/src/assets/templates/streampipes.html b/ui/src/app/app.component.html
similarity index 59%
rename from ui/src/assets/templates/streampipes.html
rename to ui/src/app/app.component.html
index df14e4f..19615f1 100644
--- a/ui/src/assets/templates/streampipes.html
+++ b/ui/src/app/app.component.html
@@ -1,27 +1,19 @@
-<!--
- ~ Licensed to the Apache Software Foundation (ASF) under one or more
- ~ contributor license agreements. See the NOTICE file distributed with
- ~ this work for additional information regarding copyright ownership.
- ~ The ASF licenses this file to You under the Apache License, Version 2.0
- ~ (the "License"); you may not use this file except in compliance with
- ~ the License. You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- ~
- -->
-
-<div flex ng-controller="ToolbarController as toolbarCtrl" class="display: flex;min-height: 100vh; max-height: 100vh;">
- <div ui-view="spNavbar"></div>
- <div style="display: flex;flex-direction: row; height: calc(100vh - 50px);">
- <div md-whiteframe="6" style="width:40px;color:white;" class="sp-darkblue"
- ui-view="spIconBar"></div>
- <md-content class="sp-fade-only-enter" id="content" ui-view="spMain"
- style="background:#fff !important;flex-grow: 1;"></md-content>
- </div>
-</div>
\ No newline at end of file
+<!--
+ ~ Licensed to the Apache Software Foundation (ASF) under one or more
+ ~ contributor license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright ownership.
+ ~ The ASF licenses this file to You under the Apache License, Version 2.0
+ ~ (the "License"); you may not use this file except in compliance with
+ ~ the License. You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ ~
+ -->
+
+<router-outlet></router-outlet>
\ No newline at end of file
diff --git a/ui/src/app/layout/components/feedback.component.ts b/ui/src/app/app.component.ts
similarity index 73%
rename from ui/src/app/layout/components/feedback.component.ts
rename to ui/src/app/app.component.ts
index 5a05332..e605376 100644
--- a/ui/src/app/layout/components/feedback.component.ts
+++ b/ui/src/app/app.component.ts
@@ -16,15 +16,15 @@
*
*/
-import {FeedbackController} from "./feedback.controller";
+import {Component, OnInit} from "@angular/core";
-declare const require: any;
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html'
+})
+export class AppComponent implements OnInit {
-export let FeedbackComponent = {
- template: require('./feedback.tmpl.html'),
- bindings: {
- closeFeedbackWindow: "&",
- },
- controller: FeedbackController,
- controllerAs: 'ctrl'
-};
+ ngOnInit(): void {
+ }
+
+}
\ No newline at end of file
diff --git a/ui/src/app/core-v2/components/base-navigation.component.ts b/ui/src/app/core-v2/components/base-navigation.component.ts
new file mode 100644
index 0000000..17070f0
--- /dev/null
+++ b/ui/src/app/core-v2/components/base-navigation.component.ts
@@ -0,0 +1,116 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+
+
+import {Router} from "@angular/router";
+
+export abstract class BaseNavigationComponent {
+
+ activePageName: string;
+ activePage: any;
+
+ authenticated: boolean = true;
+
+ public menu = [
+ {
+ link: '',
+ title: 'Home',
+ icon: 'home'
+ },
+ {
+ link: 'editor',
+ title: 'Editor',
+ icon: 'dashboard'
+ },
+ {
+ link: 'pipelines',
+ title: 'Pipelines',
+ icon: 'play_arrow'
+ },
+ {
+ link: 'connect',
+ title: 'StreamPipes Connect',
+ icon: 'power'
+ },
+ {
+ link: 'dashboard',
+ title: 'Dashboard',
+ icon: 'insert_chart'
+ },
+ {
+ link: 'dataexplorer',
+ title: 'Data Explorer',
+ icon: 'search'
+ },
+ {
+ link: 'app-overview',
+ title: 'Apps',
+ icon: 'apps'
+ },
+ ];
+
+ admin = [
+ {
+ link: 'add',
+ title: 'Install Pipeline Elements',
+ icon: 'cloud_download'
+ },
+ {
+ link: 'configuration',
+ title: 'Configuration',
+ icon: 'settings'
+ },
+ ];
+
+ constructor(protected Router: Router) {
+
+ }
+
+ getActivePage() {
+ return this.activePage;
+ }
+
+ getPageTitle(path) {
+ var allMenuItems = this.menu.concat(this.admin);
+ var currentTitle = 'StreamPipes';
+ allMenuItems.forEach(m => {
+ if (m.link === path) {
+ currentTitle = m.title;
+ }
+ });
+ if (path == 'streampipes.pipelineDetails') {
+ currentTitle = 'Pipeline Details';
+ } else if (path == 'streampipes.edit') {
+ currentTitle = this.menu[0].title;
+ }
+ return currentTitle;
+ }
+
+ go(path, payload?) {
+ if (payload === undefined) {
+ this.Router.navigateByUrl(path);
+ this.activePage = path;
+ } else {
+ this.Router.navigateByUrl(path, payload);
+ this.activePage = path;
+ }
+ this.activePageName = this.getPageTitle(this.activePage);
+ };
+
+}
\ No newline at end of file
diff --git a/ui/src/app/layout/components/feedback.tmpl.html b/ui/src/app/core-v2/components/feedback/feedback.component.html
similarity index 50%
rename from ui/src/app/layout/components/feedback.tmpl.html
rename to ui/src/app/core-v2/components/feedback/feedback.component.html
index 01f2504..974706a 100644
--- a/ui/src/app/layout/components/feedback.tmpl.html
+++ b/ui/src/app/core-v2/components/feedback/feedback.component.html
@@ -17,52 +17,47 @@
-->
<div class="feedback-container md-whiteframe-z1">
- <div layout="column" flex="100" layout-fill ng-if="!ctrl.sendingFeedback">
- <div layout="column" flex="50" layout-align="start center">
+ <div fxLayout="column" fxFlex="100" *ngIf="!sendingFeedback">
+ <div fxLayout="column" fxFlex="50" fxLayoutAlign="start center">
<div class="feedback-title">We welcome your feedback!</div>
</div>
- <div layout="column" flex="40" layout-align="start center" style="margin-bottom:20px;">
+ <div fxLayout="column" fxFlex="40" fxLayoutAlign="start center" style="margin-bottom:20px;">
<div class="feedback-explainer">Your feedback helps us to improve StreamPipes.<br/>
Features you'd like to see, bugs you've found or things you like - tell us what you think!
</div>
</div>
- <div layout="column" flex="40" layout-align="start center" style="margin-bottom:20px;">
- <md-input-container class="md-block feedback-width-100 feedback-font-size-small">
+ <div fxLayout="column" fxFlex="40" fxLayoutAlign="start center" style="margin-bottom:20px;">
+ <mat-form-field class="md-block feedback-width-100 feedback-font-size-small">
<label>Your feedback</label>
- <textarea ng-model="ctrl.feedback.feedbackText" md-maxlength="500" rows="5"
- md-select-on-focus></textarea>
- </md-input-container>
+ <textarea matInput [(ngModel)]="feedback.feedbackText" maxlength="500" rows="5"></textarea>
+ </mat-form-field>
</div>
- <div layout="column" flex="40" layout-align="end center">
- <div layout="row" layout-align="end end">
- <sp-button sp-button-gray ng-click="ctrl.closeDialog()">
+ <div fxLayout="column" fxFlex="40" fxLayoutAlign="end center">
+ <div fxLayout="row" fxLayoutAlign="end end">
+ <button mat-button mat-raised-button class="mat-basic" (click)="closeDialog()">
Close
- </sp-button>
- <sp-button sp-button-blue type="submit"
- ng-click="ctrl.sendMail()">
+ </button>
+ <button mat-button mat-raised-button color="primary" type="submit"
+ (click)="sendMail()">
Send Mail
- </sp-button>
+ </button>
</div>
</div>
</div>
- <div layout="column" ng-if="ctrl.sendingFeedback" class="feedback-height-100">
- <div ng-if="!ctrl.sendingFeedbackFinished" class="feedback-height-100">
- <div layout="column" layout-align="center center" flex="100" layout-fill>
- <md-progress-circular md-diameter="96"></md-progress-circular>
+ <div fxLayout="column" *ngIf="sendingFeedback" class="feedback-height-100">
+ <div *ngIf="!sendingFeedbackFinished" class="feedback-height-100">
+ <div fxLayout="column" fxLayoutAlign="center center" fxFlex="100" fxLayoutFill>
+ <mat-spinner [mode]="'indeterminate'" [diameter]="96"></mat-spinner>
<div class="feedback-status">Submitting feedback...</div>
</div>
</div>
- <div ng-if="ctrl.sendingFeedbackFinished" flex="100" class="feedback-height-100">
- <div layout="column" layout-align="center center" flex="100" layout-fill>
+ <div *ngIf="sendingFeedbackFinished" fxFlex="100" class="feedback-height-100">
+ <div fxLayout="column" fxLayoutAlign="center center" fxFlex="100" fxLayoutFill>
<div class="feedback-status">Thanks!</div>
- <sp-button sp-button-gray ng-click="ctrl.closeDialog()">
+ <button mat-button mat-raised-button class="mat-basic" (click)="closeDialog()">
Close
- </sp-button>
+ </button>
</div>
-
</div>
-
</div>
-
-
</div>
\ No newline at end of file
diff --git a/ui/src/app/layout/components/feedback.controller.ts b/ui/src/app/core-v2/components/feedback/feedback.component.ts
similarity index 56%
rename from ui/src/app/layout/components/feedback.controller.ts
rename to ui/src/app/core-v2/components/feedback/feedback.component.ts
index 78cfdcf..ecfadab 100644
--- a/ui/src/app/layout/components/feedback.controller.ts
+++ b/ui/src/app/core-v2/components/feedback/feedback.component.ts
@@ -16,14 +16,18 @@
*
*/
-import {AppCtrl} from "../app.controller";
+import {AppCtrl} from "../../../layout/app.controller";
+import {Component, EventEmitter, OnInit, Output} from "@angular/core";
-export class FeedbackController {
+@Component({
+ selector: 'feedback',
+ templateUrl: './feedback.component.html',
+})
+export class FeedbackComponent implements OnInit {
- $http: any;
- $window: any;
+ @Output()
+ closeFeedbackEmitter: EventEmitter<void> = new EventEmitter<void>();
- closeFeedbackWindow: any;
feedback: any = {};
sendingFeedback: boolean = false;
@@ -35,42 +39,21 @@ export class FeedbackController {
targetEmail = "users@streampipes.apache.org";
- constructor($http, $window) {
- this.$http = $http;
- this.$window = $window;
+ constructor() {
}
- $onInit() {
+ ngOnInit() {
this.sendingFeedback = false;
this.sendingFeedbackFinished = false;
}
closeDialog() {
- this.closeFeedbackWindow();
+ this.closeFeedbackEmitter.emit();
}
sendMail(){
this.sendingFeedback = true;
- this.$window.open("mailto:"+ this.targetEmail + "?subject=" +"[USER-FEEDBACK]" +"&body=" +this.feedback.feedbackText, "_self");
+ window.open("mailto:"+ this.targetEmail + "?subject=" +"[USER-FEEDBACK]" +"&body=" +this.feedback.feedbackText, "_self");
this.sendingFeedbackFinished = true;
};
-
- sendFeedback() {
- this.sendingFeedback = true;
- this.$http({
- url: this.feedbackUrl,
- dataType: "json",
- data: 'email=' + encodeURIComponent(this.feedback.email) +'&feedbackText=' + encodeURIComponent(this.feedback.feedbackText),
- headers: {
- 'Content-Type': 'application/x-www-form-urlencoded'
- },
- method: "POST",
- withCredentials: false,
- }).then(msg => {
- this.sendingFeedbackFinished = true;
- })
- };
-
-}
-
-FeedbackController.$inject = ['$http', '$window'];
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/ui/src/app/core-v2/components/iconbar/iconbar.component.html b/ui/src/app/core-v2/components/iconbar/iconbar.component.html
new file mode 100644
index 0000000..e48e05a
--- /dev/null
+++ b/ui/src/app/core-v2/components/iconbar/iconbar.component.html
@@ -0,0 +1,46 @@
+<!--
+ ~ Licensed to the Apache Software Foundation (ASF) under one or more
+ ~ contributor license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright ownership.
+ ~ The ASF licenses this file to You under the Apache License, Version 2.0
+ ~ (the "License"); you may not use this file except in compliance with
+ ~ the License. You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ ~
+ -->
+
+<div style="padding-top:0px;">
+ <div [ngClass]="item.link === activePage ? 'sp-navbar-item-selected': 'sp-navbar-item'"
+ *ngFor="let item of menu" style="min-width:0px;padding:0px;padding-top:5px;padding-bottom:5px;">
+ <button mat-button mat-icon-button class="button-margin-iconbar" (click)="go(item.link)" matTooltip="{{item.title}}" matTooltipPosition="right">
+ <mat-icon [ngClass]="item.link === activePage ? 'sp-navbar-icon-selected' : 'sp-navbar-icon'">
+ {{item.icon}}
+ </mat-icon>
+ </button>
+ </div>
+ <div [ngClass]="'streampipes.notifications' === activePage ? 'sp-navbar-item-selected' : 'sp-navbar-item'">
+<!-- <notification-icon count='toolbarCtrl.NotificationCountService.unreadNotificationCount'>-->
+<!-- <md-button class="md-icon-button button-margin-iconbar" ng-click="go('streampipes.notifications')">-->
+<!-- <md-icon md-svg-icon="communication:ic_chat_24px" aria-label="Notifications"-->
+<!-- ng-class="{'sp-navbar-icon-selected' : 'streampipes.notifications' === activePage, 'sp-navbar-icon': 'streampipes.notifications' !== activePage}"></md-icon>-->
+<!-- <md-tooltip md-direction="right">-->
+<!-- Notifications-->
+<!-- </md-tooltip>-->
+<!-- </md-button>-->
+<!-- </notification-icon>-->
+ </div>
+ <mat-divider style="border-top-color:white;"></mat-divider>
+ <div [ngClass]="item.link === activePage ? 'sp-navbar-item-selected' : 'sp-navbar-item'"
+ *ngFor="let item of admin" style="padding-top:5px;padding-bottom:5px;">
+ <button mat-button mat-icon-button class="md-icon-button button-margin-iconbar" (click)="go(item.link)" matTooltip="{{item.title}}">
+ <mat-icon [ngClass]="item.link === activePage ?'sp-navbar-icon-selected' : 'sp-navbar-icon'">{{item.icon}}</mat-icon>
+ </button>
+ </div>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/core-v2/components/iconbar/iconbar.component.ts b/ui/src/app/core-v2/components/iconbar/iconbar.component.ts
new file mode 100644
index 0000000..532ccae
--- /dev/null
+++ b/ui/src/app/core-v2/components/iconbar/iconbar.component.ts
@@ -0,0 +1,69 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {Component, OnInit} from "@angular/core";
+import {BaseNavigationComponent} from "../base-navigation.component";
+import {Client} from "@stomp/stompjs";
+import {NotificationItem} from "../../../notifications/model/notifications.model";
+import {Router} from "@angular/router";
+import {AuthStatusService} from "../../../services/auth-status.service";
+import {NotificationCountService} from "../../../services/notification-count-service";
+
+@Component({
+ selector: 'iconbar',
+ templateUrl: './iconbar.component.html',
+})
+export class IconbarComponent extends BaseNavigationComponent implements OnInit {
+
+
+ constructor(Router: Router,
+ private AuthStatusService: AuthStatusService,
+ private NotificationCountService: NotificationCountService) {
+ super(Router);
+ }
+
+ ngOnInit(): void {
+ }
+
+ connectToBroker() {
+ var login = 'admin';
+ var passcode = 'admin';
+ var websocketProtocol = window.location.protocol === "http" ? "ws" : "wss";
+ var brokerUrl = websocketProtocol + '://' + window.location.host + ':' + window.location.port + '/streampipes/ws';
+ var inputTopic = '/topic/org.apache.streampipes.notifications.' + this.AuthStatusService.email;
+
+ let stompClient = new Client({
+ brokerURL: brokerUrl,
+ connectHeaders: {
+ login: login,
+ passcode: passcode
+ },
+ reconnectDelay: 5000
+ });
+
+ stompClient.onConnect = (frame) => {
+
+ stompClient.subscribe(inputTopic, message => {
+ this.NotificationCountService.increaseNotificationCount(JSON.parse(message.body) as NotificationItem);
+ });
+ };
+
+ stompClient.activate();
+ }
+
+}
\ No newline at end of file
diff --git a/ui/src/app/core-v2/components/streampipes/streampipes.component.html b/ui/src/app/core-v2/components/streampipes/streampipes.component.html
new file mode 100644
index 0000000..b5f8bce
--- /dev/null
+++ b/ui/src/app/core-v2/components/streampipes/streampipes.component.html
@@ -0,0 +1,40 @@
+<!--
+ ~ Licensed to the Apache Software Foundation (ASF) under one or more
+ ~ contributor license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright ownership.
+ ~ The ASF licenses this file to You under the Apache License, Version 2.0
+ ~ (the "License"); you may not use this file except in compliance with
+ ~ the License. You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ ~
+ -->
+
+<!--<div flex ng-controller="ToolbarController as toolbarCtrl" class="display: flex;min-height: 100vh; max-height: 100vh;">-->
+<!-- <div ui-view="spNavbar"></div>-->
+<!-- <div style="display: flex;flex-direction: row; height: calc(100vh - 50px);">-->
+<!-- <div md-whiteframe="6" style="width:40px;color:white;" class="sp-darkblue"-->
+<!-- ui-view="spIconBar"></div>-->
+<!-- <md-content class="sp-fade-only-enter" id="content" ui-view="spMain"-->
+<!-- style="background:#fff !important;flex-grow: 1;"></md-content>-->
+<!-- </div>-->
+<!--</div>-->
+<div>
+ <div style="height: 50px;">
+ <toolbar></toolbar>
+ </div>
+ <div style="display: flex;flex-direction:row; height: calc(100vh - 50px);">
+ <div style="width:40px;color:white;" class="iconbar">
+ <iconbar></iconbar>
+ </div>
+ <div style="width: 100%; height: 100%; overflow-y: auto;">
+ <router-outlet></router-outlet>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/services/auth-status.service.ts b/ui/src/app/core-v2/components/streampipes/streampipes.component.scss
similarity index 76%
copy from ui/src/app/services/auth-status.service.ts
copy to ui/src/app/core-v2/components/streampipes/streampipes.component.scss
index 0274970..bec7f92 100644
--- a/ui/src/app/services/auth-status.service.ts
+++ b/ui/src/app/core-v2/components/streampipes/streampipes.component.scss
@@ -16,18 +16,8 @@
*
*/
-import {Injectable} from '@angular/core';
+@import "../../../../scss/variables";
-@Injectable()
-export class AuthStatusService {
-
- email: string;
- username: string;
- token: string;
- authenticated: boolean = false;
- configured: boolean = false;
-
- constructor() {
- }
-
-}
+.iconbar {
+ background: $sp-color-primary;
+}
\ No newline at end of file
diff --git a/ui/src/app/services/domain-properties.service.ts b/ui/src/app/core-v2/components/streampipes/streampipes.component.ts
similarity index 61%
rename from ui/src/app/services/domain-properties.service.ts
rename to ui/src/app/core-v2/components/streampipes/streampipes.component.ts
index 140fa5b..ba4d474 100644
--- a/ui/src/app/services/domain-properties.service.ts
+++ b/ui/src/app/core-v2/components/streampipes/streampipes.component.ts
@@ -16,26 +16,18 @@
*
*/
-export class DomainProperties {
+import {Component, OnInit} from "@angular/core";
- $http: any;
- RestApi: any;
- availableDomainProperties: any;
+@Component({
+ selector: 'streampipes',
+ templateUrl: './streampipes.component.html',
+ styleUrls: ['./streampipes.component.scss']
+})
+export class StreampipesComponent implements OnInit {
- constructor($http, RestApi) {
- this.$http = $http;
- this.RestApi = RestApi;
- this.availableDomainProperties = {};
- this.RestApi.getOntologyProperties()
- .then(propertiesData => {
- this.availableDomainProperties = propertiesData.data;
- });
- }
- getDomainProperties() {
- return this.availableDomainProperties;
- }
+ ngOnInit(): void {
+ }
-}
-//DomainProperties.$inject = ['$http', 'RestApi'];
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/ui/src/app/core-v2/components/toolbar/toolbar.component.html b/ui/src/app/core-v2/components/toolbar/toolbar.component.html
new file mode 100644
index 0000000..bacae80
--- /dev/null
+++ b/ui/src/app/core-v2/components/toolbar/toolbar.component.html
@@ -0,0 +1,72 @@
+<!--
+ ~ Licensed to the Apache Software Foundation (ASF) under one or more
+ ~ contributor license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright ownership.
+ ~ The ASF licenses this file to You under the Apache License, Version 2.0
+ ~ (the "License"); you may not use this file except in compliance with
+ ~ the License. You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ ~
+ -->
+
+<mat-toolbar class="md-primary md-hue-2 top-nav" color="accent">
+ <div class="md-toolbar-tools" style="height:50px;max-height:50px;">
+ <div fxFlex="60" fxLayout fxLayoutAlign="start center">
+ <h1 class="md-toolbar-tools" style="height:50px;max-height:50px;">
+ <div class="sp-darkblue"
+ style="align-items:left;padding:5px;border-radius:0px;margin-right:15px;position:relative;left:20px;">
+ <img
+ alt="icon" src="../../../../assets/img/sp/sp-logo-right-white.png" style="height:28px;">
+ </div>
+ <div style="color:white;padding: 5px 5px;font-size:15px;margin-left:10px;">
+ <h4 style="margin-top:18px;font-size:12pt;font-weight:bold;">{{activePageName}}</h4>
+ </div>
+ </h1>
+ </div>
+ <span fxFlex></span>
+ <div fxFlex="40" fxLayout fxLayoutAlign="end center" *ngIf="authenticated" style="height:100%;">
+ <div style="height:100%;">
+ <div [ngStyle]="feedbackMenuBackground" fxLayout fxLayoutAlign="center center" style="height: 100%;">
+ <button mat-button mat-icon-button
+ matTooltip="Feedback" matTooltipPosition="below"
+ [ngClass]="feedbackOpen ? 'sp-icon-button-no-hover' : 'sp-icon-button'" (click)="toggleFeedback()" style="min-width:0px;" layout layout-align="center center">
+ <i [ngStyle]="feedbackMenuIconColor" class="material-icons">feedback</i>
+ </button>
+ </div>
+ <feedback style="position:relative;left: -348px;" *ngIf="feedbackOpen" (closeFeedbackEmitter)="closeFeedbackWindow()"></feedback>
+ </div>
+ <button mat-button mat-icon-button
+ [ngClass]="accountMenuOpen ? 'sp-icon-button-no-hover' : 'sp-icon-button'" style="min-width:0px;"
+ [matMenuTriggerFor]="menu"
+ matTooltip="User Preferences" matTooltipPosition="below"
+ (menuOpened)="openMenu()" (menuClosed)="closeMenu()">
+ <i [ngStyle]="accountMenuIconColor" class="material-icons">account_circle</i>
+ </button>
+ <mat-menu #menu="matMenu" id="account" [ngStyle]="accountMenuBackground"
+ md-position-mode="target-right target" md-offset="8 52" style="margin:inherit;height:100%;" fxLayout fxLayoutAlign="center center">
+ <button mat-menu-item (click)="openInfo()" style="min-width:0px;">
+ <mat-icon aria-label="Info">help</mat-icon>
+ Info
+ </button>
+ <button mat-menu-item (click)="openDocumentation()"
+ style="min-width:0px;">
+ <mat-icon aria-label="Documentation">description</mat-icon>
+ Documentation
+ </button>
+ <mat-menu-divider></mat-menu-divider>
+ <button mat-menu-item id="sp_logout" (click)="logout()"
+ style="min-width:0px;">
+ <mat-icon aria-label="Logout">exit_to_app</mat-icon>
+ Logout
+ </button>
+ </mat-menu>
+ </div>
+ </div>
+</mat-toolbar>
diff --git a/ui/src/app/core-v2/components/toolbar/toolbar.component.ts b/ui/src/app/core-v2/components/toolbar/toolbar.component.ts
new file mode 100644
index 0000000..bb7c276
--- /dev/null
+++ b/ui/src/app/core-v2/components/toolbar/toolbar.component.ts
@@ -0,0 +1,111 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import {Component, OnInit} from "@angular/core";
+import {BaseNavigationComponent} from "../base-navigation.component";
+import {Router} from "@angular/router";
+import {RestApi} from "../../../services/rest-api.service";
+import {AuthStatusService} from "../../../services/auth-status.service";
+
+@Component({
+ selector: 'toolbar',
+ templateUrl: './toolbar.component.html',
+})
+export class ToolbarComponent extends BaseNavigationComponent implements OnInit {
+
+ feedbackOpen: boolean = false;
+ accountMenuOpen: boolean = false;
+
+ whiteColor: string = "#FFFFFF";
+ greenColor: string = "#39b54a";
+
+ accountMenuBackground: any = this.makeColor('background-color', this.greenColor);
+ accountMenuIconColor: any = this.makeColor('color', this.whiteColor);
+
+ feedbackMenuBackground: any = this.makeColor('background-color', this.greenColor);
+ feedbackMenuIconColor: any = this.makeColor('color', this.whiteColor);
+
+ constructor(Router: Router,
+ private RestApi: RestApi,
+ private AuthStatusService: AuthStatusService) {
+ super(Router);
+ }
+
+ ngOnInit(): void {
+ }
+
+ openMenu() {
+ this.accountMenuOpen = true;
+ }
+
+ closeMenu() {
+ this.accountMenuOpen = false;
+ }
+
+ makeColor(type: string, color: string) {
+ return {[type]: color};
+ }
+
+ toggleFeedback() {
+ this.feedbackOpen = !this.feedbackOpen;
+ this.updateFeedbackColors();
+ }
+
+ closeFeedbackWindow() {
+ this.updateFeedbackColors();
+ this.feedbackOpen = false;
+ }
+
+ triggerAccountMenu($mdMenu, $event) {
+ this.updateAccountColors();
+ this.accountMenuOpen = true;
+ $mdMenu.open($event)
+ }
+
+ updateAccountColors() {
+ this.accountMenuBackground = this.getNewColor('background-color', this.accountMenuBackground);
+ this.accountMenuIconColor = this.getNewColor('color', this.accountMenuIconColor);
+ }
+
+ updateFeedbackColors() {
+ this.feedbackMenuBackground = this.getNewColor('background-color', this.feedbackMenuBackground);
+ this.feedbackMenuIconColor = this.getNewColor('color', this.feedbackMenuIconColor);
+ }
+
+ getNewColor(type: string, currentColor: any) {
+ return currentColor[type] == this.greenColor ? this.makeColor(type, this.whiteColor) : this.makeColor(type, this.greenColor);
+ }
+
+ openDocumentation() {
+ window.open('https://streampipes.apache.org/docs', '_blank');
+ };
+
+ openInfo() {
+ this.Router.navigateByUrl("info");
+ this.activePage = "Info";
+ }
+
+ logout() {
+ this.RestApi.logout().subscribe(() => {
+ this.AuthStatusService.user = undefined;
+ this.AuthStatusService.authenticated = false;
+ this.Router.navigateByUrl('login');
+ });
+ };
+
+}
\ No newline at end of file
diff --git a/ui/src/app/core-v2/core.module.ts b/ui/src/app/core-v2/core.module.ts
index 691e536..3d1cbe5 100644
--- a/ui/src/app/core-v2/core.module.ts
+++ b/ui/src/app/core-v2/core.module.ts
@@ -21,25 +21,49 @@ import {MatGridListModule} from '@angular/material/grid-list';
import {MatIconModule} from '@angular/material/icon';
import {FlexLayoutModule} from '@angular/flex-layout';
import {CommonModule} from '@angular/common';
+import {StreampipesComponent} from "./components/streampipes/streampipes.component";
+import {FeedbackComponent} from "./components/feedback/feedback.component";
+import {MatButtonModule} from "@angular/material/button";
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {MatInputModule} from "@angular/material/input";
+import {FormsModule} from "@angular/forms";
+import {RouterModule} from "@angular/router";
+import {ToolbarComponent} from "./components/toolbar/toolbar.component";
+import {MatToolbarModule} from "@angular/material/toolbar";
+import {MatTooltipModule} from "@angular/material/tooltip";
+import {IconbarComponent} from "./components/iconbar/iconbar.component";
+import {MatDividerModule} from '@angular/material/divider';
+import {MatListModule} from "@angular/material/list";
+import {MatMenuModule} from "@angular/material/menu";
@NgModule({
imports: [
CommonModule,
FlexLayoutModule,
MatGridListModule,
- MatIconModule
+ MatDividerModule,
+ MatListModule,
+ MatIconModule,
+ MatMenuModule,
+ MatButtonModule,
+ MatTooltipModule,
+ MatProgressSpinnerModule,
+ MatInputModule,
+ MatToolbarModule,
+ FormsModule,
+ RouterModule
],
declarations: [
-
+ StreampipesComponent,
+ FeedbackComponent,
+ IconbarComponent,
+ ToolbarComponent
],
providers: [
- {
- provide: 'AuthStatusService',
- useFactory: ($injector: any) => $injector.get('AuthStatusService'),
- deps: ['$injector'],
- },
+
],
entryComponents: [
+ StreampipesComponent
]
})
export class CoreModule {
diff --git a/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.ts b/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.ts
index 4669e8e..66bcaf4 100644
--- a/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.ts
+++ b/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.ts
@@ -42,7 +42,7 @@ export class WelcomeTourComponent {
hideTourForever() {
this.user.hideTutorial = true;
- this.RestApi.updateUserDetails(this.user).then(data => {
+ this.RestApi.updateUserDetails(this.user).subscribe(data => {
this.close();
});
}
diff --git a/ui/src/app/editor/editor.component.ts b/ui/src/app/editor/editor.component.ts
index 20560eb..e8408cb 100644
--- a/ui/src/app/editor/editor.component.ts
+++ b/ui/src/app/editor/editor.component.ts
@@ -38,6 +38,7 @@ import {WelcomeTourComponent} from "./dialog/welcome-tour/welcome-tour.component
import {DialogService} from "../core-ui/dialog/base-dialog/base-dialog.service";
import {MissingElementsForTutorialComponent} from "./dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component";
import {ShepherdService} from "../services/tour/shepherd.service";
+import {ActivatedRoute} from "@angular/router";
@Component({
selector: 'editor',
@@ -96,13 +97,15 @@ export class EditorComponent implements OnInit {
private AuthStatusService: AuthStatusService,
private dialogService: DialogService,
private shepherdService: ShepherdService,
- @Inject("$stateParams") private $stateParams) {
+ private ActivatedRoute: ActivatedRoute) {
}
ngOnInit() {
- if (this.$stateParams.pipeline) {
- this.currentModifiedPipelineId = this.$stateParams.pipeline;
- }
+ this.ActivatedRoute.queryParams.subscribe(params => {
+ if (params['pipeline']) {
+ this.currentModifiedPipelineId = params['pipeline'];
+ }
+ });
this.pipelineElementService.getDataProcessors().subscribe(processors => {
this.availableDataProcessors = processors;
this.allElements = this.allElements.concat(processors);
diff --git a/ui/src/app/editor/editor.module.ts b/ui/src/app/editor/editor.module.ts
index 51f5977..b95b08c 100644
--- a/ui/src/app/editor/editor.module.ts
+++ b/ui/src/app/editor/editor.module.ts
@@ -103,11 +103,6 @@ import {UserDefinedOutputStrategyComponent} from "./components/output-strategy/u
providers: [
EditorService,
SemanticTypeUtilsService,
- {
- provide: 'RestApi',
- useFactory: ($injector: any) => $injector.get('RestApi'),
- deps: ['$injector'],
- },
JsplumbBridge,
JsplumbService,
JsplumbConfigService,
@@ -118,16 +113,6 @@ import {UserDefinedOutputStrategyComponent} from "./components/output-strategy/u
PipelineElementRecommendationService,
ElementIconText,
ImageChecker,
- {
- provide: '$state',
- useFactory: ($injector: any) => $injector.get('$state'),
- deps: ['$injector']
- },
- {
- provide: '$timeout',
- useFactory: ($injector: any) => $injector.get('$timeout'),
- deps: ['$injector']
- },
SafeCss
],
exports: [
diff --git a/ui/src/app/home/components/status.component.ts b/ui/src/app/home/components/status.component.ts
index 746ec8b..e4cc8f7 100644
--- a/ui/src/app/home/components/status.component.ts
+++ b/ui/src/app/home/components/status.component.ts
@@ -42,8 +42,7 @@ export class StatusComponent {
}
getPipelines() {
- this.RestApi.getOwnPipelines().then(msg => {
- let pipelines = msg.data;
+ this.RestApi.getOwnPipelines().subscribe(pipelines => {
this.pipelines = pipelines.length;
this.runningPipelines = pipelines.filter(p => p.running).length;
});
@@ -51,8 +50,7 @@ export class StatusComponent {
getStreams() {
this.RestApi.getOwnSources()
- .then((msg) => {
- let sources = msg.data;
+ .subscribe((sources) => {
sources.forEach((source, i, sources) => {
this.installedPipelineElements += source.spDataStreams.length;
});
@@ -61,19 +59,19 @@ export class StatusComponent {
getProcessors() {
this.RestApi.getOwnSepas()
- .then(msg => {
+ .subscribe(msg => {
this.addPipelineElementList(msg);
});
};
getSinks() {
this.RestApi.getOwnActions()
- .then(msg => {
+ .subscribe(msg => {
this.addPipelineElementList(msg);
});
};
addPipelineElementList(msg) {
- this.installedPipelineElements += msg.data.length;
+ this.installedPipelineElements += msg.length;
}
}
\ No newline at end of file
diff --git a/ui/src/app/home/home.component.ts b/ui/src/app/home/home.component.ts
index f67096b..b4b5213 100644
--- a/ui/src/app/home/home.component.ts
+++ b/ui/src/app/home/home.component.ts
@@ -19,7 +19,6 @@
import {Component} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {HomeService} from './home.service';
-import {StateService} from '@uirouter/core';
@Component({
templateUrl: './home.component.html',
@@ -29,7 +28,7 @@ export class HomeComponent {
serviceLinks = [];
- constructor(private homeService: HomeService, private sanitizer: DomSanitizer, private stateService: StateService) {
+ constructor(private homeService: HomeService, private sanitizer: DomSanitizer/*, private stateService: StateService*/) {
this.serviceLinks = this.homeService.getServiceLinks();
}
@@ -41,7 +40,7 @@ export class HomeComponent {
if (link.link.newWindow) {
window.open(link.link.value);
} else {
- this.stateService.go(link.link.value);
+ //this.stateService.go(link.link.value);
}
}
diff --git a/ui/src/app/layout/layout.module.ts b/ui/src/app/layout/layout.module.ts
index 9129bb6..d190639 100644
--- a/ui/src/app/layout/layout.module.ts
+++ b/ui/src/app/layout/layout.module.ts
@@ -16,18 +16,14 @@
*
*/
-import * as angular from 'angular';
-import ngCookies from 'angular-cookies';
-import 'npm/angular-notification-icons';
-
-import spServices from '../services/services.module'
-import {AppCtrl} from './app.controller'
-import {ToolbarController} from "./toolbar.controller";
-import {FeedbackComponent} from "./components/feedback.component";
-import {NotificationCountService} from "../services/notification-count-service";
-
-export default angular.module('sp.layout', [spServices, ngCookies, 'angular-notification-icons', 'ngAnimate'])
- .component('spFeedback', FeedbackComponent)
- .controller('AppCtrl', AppCtrl)
- .controller('ToolbarController', ToolbarController)
- .name;
+// import * as angular from 'angular';
+// import ngCookies from 'angular-cookies';
+// import 'npm/angular-notification-icons';
+//
+// import {AppCtrl} from './app.controller'
+// import {ToolbarController} from "./toolbar.controller";
+//
+// export default angular.module('sp.layout', [spServices, ngCookies, 'angular-notification-icons', 'ngAnimate'])
+// .controller('AppCtrl', AppCtrl)
+// .controller('ToolbarController', ToolbarController)
+// .name;
diff --git a/ui/src/app/login/components/login/login.component.ts b/ui/src/app/login/components/login/login.component.ts
index 320f024..ea7b3ca 100644
--- a/ui/src/app/login/components/login/login.component.ts
+++ b/ui/src/app/login/components/login/login.component.ts
@@ -22,6 +22,7 @@ import {RestApi} from "../../../services/rest-api.service";
import {AuthStatusService} from "../../../services/auth-status.service";
import {FormGroup} from "@angular/forms";
import {LoginService} from "../../services/login.service";
+import {Router} from "@angular/router";
@Component({
selector: 'login',
@@ -34,8 +35,7 @@ export class LoginComponent {
credentials: any;
constructor(private loginService: LoginService,
- @Inject('$stateParams') private $stateParams,
- @Inject("$state") private $state: any,
+ private Router: Router,
private AuthStatusService: AuthStatusService,
private ShepherdService: ShepherdService) {
this.loading = false;
@@ -58,7 +58,7 @@ export class LoginComponent {
this.AuthStatusService.email = response.info.authc.principal.email;
this.AuthStatusService.token = response.token;
this.AuthStatusService.authenticated = true;
- this.$state.go("streampipes");
+ this.Router.navigateByUrl("");
}
else {
this.AuthStatusService.authenticated = false;
diff --git a/ui/src/app/login/components/setup/setup.component.ts b/ui/src/app/login/components/setup/setup.component.ts
index b1a9f6f..701606e 100644
--- a/ui/src/app/login/components/setup/setup.component.ts
+++ b/ui/src/app/login/components/setup/setup.component.ts
@@ -68,13 +68,12 @@ export class SetupComponent {
let nextInstallationStep = currentInstallationStep + 1;
if (nextInstallationStep > (data.installationStepCount - 1)) {
this.RestApi.configured()
- .then(msg => {
- let data = msg.data;
+ .subscribe(data => {
if (data.configured) {
this.installationFinished = true;
this.loading = false;
}
- }).error(data => {
+ }), (data => {
this.loading = false;
this.showToast("Fatal error, contact administrator");
});
diff --git a/ui/src/app/login/components/startup/startup.component.ts b/ui/src/app/login/components/startup/startup.component.ts
index 48d293c..40a5d8e 100644
--- a/ui/src/app/login/components/startup/startup.component.ts
+++ b/ui/src/app/login/components/startup/startup.component.ts
@@ -41,7 +41,7 @@ export class StartupComponent implements OnInit {
}
checkStatus() {
- this.AuthService.checkConfiguration().then(() => {
+ this.AuthService.checkConfiguration().subscribe(() => {
this.progress = 100;
this.$state.go("setup");
}, () => {
diff --git a/ui/src/app/notifications/notifications.component.ts b/ui/src/app/notifications/notifications.component.ts
index 751d855..b3e2c49 100644
--- a/ui/src/app/notifications/notifications.component.ts
+++ b/ui/src/app/notifications/notifications.component.ts
@@ -103,8 +103,8 @@ export class NotificationsComponent implements OnInit, OnDestroy {
}
getPipelinesWithNotifications() {
- this.RestApi.getOwnPipelines().then(pipelines => {
- this.filterForNotifications(pipelines.data);
+ this.RestApi.getOwnPipelines().subscribe(pipelines => {
+ this.filterForNotifications(pipelines);
if (this.existingNotifications.length > 0) {
this.pipelinesWithNotificationsPresent = true;
this.selectNotification(this.existingNotifications[0]);
diff --git a/ui/src/app/pipeline-details/pipeline-details.component.ts b/ui/src/app/pipeline-details/pipeline-details.component.ts
index c62d76f..fed7f88 100644
--- a/ui/src/app/pipeline-details/pipeline-details.component.ts
+++ b/ui/src/app/pipeline-details/pipeline-details.component.ts
@@ -20,6 +20,7 @@ import {Component, Inject, OnInit} from "@angular/core";
import {PipelineService} from "../platform-services/apis/pipeline.service";
import {Pipeline} from "../core-model/gen/streampipes-model";
import {PipelineElementUnion} from "../editor/model/editor.model";
+import {ActivatedRoute} from "@angular/router";
@Component({
selector: 'pipeline-details',
@@ -35,13 +36,17 @@ export class PipelineDetailsComponent implements OnInit {
selectedIndex: number = 0;
selectedElement: PipelineElementUnion;
- constructor(@Inject('$stateParams') private $stateParams,
+ constructor(private ActivatedRoute: ActivatedRoute,
private pipelineService: PipelineService) {
- this.currentPipeline = $stateParams.pipeline;
}
ngOnInit() {
- this.loadPipeline();
+ this.ActivatedRoute.queryParams.subscribe(params => {
+ if (params['pipeline']) {
+ this.currentPipeline = params['pipeline'];
+ this.loadPipeline();
+ }
+ });
}
setSelectedIndex(index: number) {
diff --git a/ui/src/app/pipelines/pipelines.component.ts b/ui/src/app/pipelines/pipelines.component.ts
index c49423a..530c56d 100644
--- a/ui/src/app/pipelines/pipelines.component.ts
+++ b/ui/src/app/pipelines/pipelines.component.ts
@@ -28,6 +28,7 @@ import {DialogRef} from "../core-ui/dialog/base-dialog/dialog-ref";
import {StartAllPipelinesDialogComponent} from "./dialog/start-all-pipelines/start-all-pipelines-dialog.component";
import {PipelineCategoriesDialogComponent} from "./dialog/pipeline-categories/pipeline-categories-dialog.component";
import {zip} from "rxjs";
+import {ActivatedRoute} from "@angular/router";
declare const jsPlumb: any;
declare const require: any;
@@ -57,16 +58,20 @@ export class PipelinesComponent implements OnInit {
constructor(private pipelineService: PipelineService,
private DialogService: DialogService,
- @Inject('$stateParams') private $stateParams) {
+ private ActivatedRoute: ActivatedRoute) {
this.pipelineCategories = [];
this.starting = false;
this.stopping = false;
- this.pipelineIdToStart = $stateParams.pipeline;
}
ngOnInit() {
- this.getPipelineCategories();
- this.getPipelines();
+ this.ActivatedRoute.queryParams.subscribe(params => {
+ if (params['pipeline']) {
+ this.pipelineToStart = params['pipeline'];
+ }
+ this.getPipelineCategories();
+ this.getPipelines();
+ });
}
setSelectedTab(index) {
diff --git a/ui/src/app/pipelines/services/pipeline-operations.service.ts b/ui/src/app/pipelines/services/pipeline-operations.service.ts
index cd8b2c4..bbd1dfd 100644
--- a/ui/src/app/pipelines/services/pipeline-operations.service.ts
+++ b/ui/src/app/pipelines/services/pipeline-operations.service.ts
@@ -25,6 +25,7 @@ import {PipelineStatusDialogComponent} from "../dialog/pipeline-status/pipeline-
import {Pipeline, PipelineOperationStatus} from "../../core-model/gen/streampipes-model";
import {DeletePipelineDialogComponent} from "../dialog/delete-pipeline/delete-pipeline-dialog.component";
import {DialogRef} from "../../core-ui/dialog/base-dialog/dialog-ref";
+import {Router} from "@angular/router";
declare const require: any;
@@ -35,11 +36,10 @@ export class PipelineOperationsService {
stopping: any;
constructor(
- //@Inject('RestApi') private RestApi: RestApi,
- @Inject('$state') private $state,
private ShepherdService: ShepherdService,
private PipelineService: PipelineService,
- private DialogService: DialogService) {
+ private DialogService: DialogService,
+ private Router: Router) {
}
startPipeline(pipelineId: string,
@@ -102,11 +102,11 @@ export class PipelineOperationsService {
};
showPipelineInEditor(id) {
- this.$state.go("streampipes.editor", {pipeline: id});
+ this.Router.navigate(["editor"], { queryParams: { pipeline: id }});
}
showPipelineDetails(id) {
- this.$state.go("streampipes.pipelineDetails", {pipeline: id});
+ this.Router.navigate(["pipeline-details"], { queryParams: { pipeline: id }});
}
modifyPipeline(pipeline) {
@@ -116,6 +116,4 @@ export class PipelineOperationsService {
showLogs(id) {
//this.$state.go("streampipes.pipelinelogs", {pipeline: id});
}
-}
-
-//PipelineOperationsService.$inject = ['$mdDialog', 'RestApi', '$state', 'ShepherdService'];
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/ui/src/app/services/auth-status.service.ts b/ui/src/app/services/auth-status.service.ts
index 0274970..c8eb371 100644
--- a/ui/src/app/services/auth-status.service.ts
+++ b/ui/src/app/services/auth-status.service.ts
@@ -21,6 +21,7 @@ import {Injectable} from '@angular/core';
@Injectable()
export class AuthStatusService {
+ user: any;
email: string;
username: string;
token: string;
diff --git a/ui/src/app/services/auth.service.ts b/ui/src/app/services/auth.service.ts
index 7a4a0e9..5a28f9f 100644
--- a/ui/src/app/services/auth.service.ts
+++ b/ui/src/app/services/auth.service.ts
@@ -19,6 +19,7 @@
import {RestApi} from "./rest-api.service";
import {AuthStatusService} from "./auth-status.service";
import {Inject, Injectable} from "@angular/core";
+import {Observable} from "rxjs";
@Injectable()
export class AuthService {
@@ -28,25 +29,27 @@ export class AuthService {
}
checkConfiguration() {
- return this.RestApi.configured().then(response => {
- if (response.data.configured) {
+ return Observable.create((observer) => this.RestApi.configured().subscribe(response => {
+ if (response.configured) {
this.AuthStatusService.configured = true;
-
// TODO
//this.$rootScope.appConfig = response.data.appConfig;
} else {
this.AuthStatusService.configured = false;
}
- });
+ observer.complete();
+ }, error => {
+ observer.error();
+ }));
}
checkAuthentication() {
- return this.RestApi.getAuthc().then(response => {
- if (response.data.success) {
- this.AuthStatusService.username = response.data.info.authc.principal.username;
- this.AuthStatusService.email = response.data.info.authc.principal.email;
+ return this.RestApi.getAuthc().subscribe(response => {
+ if (response.success) {
+ this.AuthStatusService.username = response.info.authc.principal.username;
+ this.AuthStatusService.email = response.info.authc.principal.email;
this.AuthStatusService.authenticated = true;
- this.AuthStatusService.token = response.data.token;
+ this.AuthStatusService.token = response.token;
} else {
this.AuthStatusService.authenticated = false;
}
diff --git a/ui/src/app/services/notification-count-service.ts b/ui/src/app/services/notification-count-service.ts
index f278fbd..c4b2c5b 100644
--- a/ui/src/app/services/notification-count-service.ts
+++ b/ui/src/app/services/notification-count-service.ts
@@ -26,13 +26,13 @@ export class NotificationCountService {
lockNotificationId: string;
lockActive: boolean = false;
- constructor(@Inject("RestApi") private RestApi: RestApi) {
+ constructor(private RestApi: RestApi) {
}
loadUnreadNotifications() {
this.RestApi.getUnreadNotificationsCount()
- .then(response => {
- this.unreadNotificationCount = response.data.count;
+ .subscribe(response => {
+ this.unreadNotificationCount = response.count;
});
}
diff --git a/ui/src/app/services/rest-api.service.ts b/ui/src/app/services/rest-api.service.ts
index a6b3fae..bf72812 100644
--- a/ui/src/app/services/rest-api.service.ts
+++ b/ui/src/app/services/rest-api.service.ts
@@ -21,27 +21,28 @@
import {Inject, Injectable} from "@angular/core";
import * as angular from 'angular';
+import {AuthStatusService} from "./auth-status.service";
+import {PlatformServicesCommons} from "../platform-services/apis/commons.service";
+import {HttpClient} from "@angular/common/http";
+import { Observable } from 'rxjs/Observable';
@Injectable()
export class RestApi {
- AuthStatusService: any;
- $http: any;
- apiConstants: any;
encodeURIComponent: any;
- constructor (@Inject('$http') $http, @Inject('apiConstants') apiConstants, @Inject('AuthStatusService') AuthStatusService) {
+ constructor (private AuthStatusService: AuthStatusService,
+ private platformServicesCommons: PlatformServicesCommons,
+ private $http: HttpClient) {
this.AuthStatusService = AuthStatusService;
- this.$http = $http;
- this.apiConstants = apiConstants;
}
getServerUrl() {
- return this.apiConstants.contextPath + this.apiConstants.api;
+ return this.platformServicesCommons.unauthenticatedBasePath;
}
urlBase() {
- return this.getServerUrl() +'/users/' + this.AuthStatusService.email;
+ return this.platformServicesCommons.authUserBasePath();
};
getAssetUrl(appId) {
@@ -79,21 +80,21 @@ export class RestApi {
return this.$http.get(this.urlBase() +"/actions/favorites");
};
- addPreferredAction(elementUri) {
- return this.$http({
- method: 'POST',
- url: this.urlBase() + "/actions/favorites",
- data: $.param({uri: elementUri}),
- headers: {'Content-Type': 'application/x-www-form-urlencoded'}
- })
- }
-
- removePreferredAction(elementUri) {
- return this.$http({
- method: 'DELETE',
- url: this.urlBase() + "/actions/favorites/" + encodeURIComponent(elementUri)
- })
- }
+ // addPreferredAction(elementUri) {
+ // return this.$http({
+ // method: 'POST',
+ // url: this.urlBase() + "/actions/favorites",
+ // data: $.param({uri: elementUri}),
+ // headers: {'Content-Type': 'application/x-www-form-urlencoded'}
+ // })
+ // }
+ //
+ // removePreferredAction(elementUri) {
+ // return this.$http({
+ // method: 'DELETE',
+ // url: this.urlBase() + "/actions/favorites/" + encodeURIComponent(elementUri)
+ // })
+ // }
getOwnSepas() {
return this.$http.get(this.urlBase() +"/sepas/own");
@@ -107,23 +108,23 @@ export class RestApi {
return this.$http.get(this.urlBase() +"/sepas/favorites");
};
- addPreferredSepa(elementUri) {
- return this.$http({
- method: 'POST',
- url: this.urlBase() + "/sepas/favorites",
- data: $.param({uri: elementUri}),
- headers: {'Content-Type': 'application/x-www-form-urlencoded'}
- })
- }
-
- removePreferredSepa(elementUri) {
- return this.$http({
- method: 'DELETE',
- url: this.urlBase() + "/sepas/favorites/" + encodeURIComponent(elementUri)
- })
- }
-
- getOwnSources() {
+ // addPreferredSepa(elementUri) {
+ // return this.$http({
+ // method: 'POST',
+ // url: this.urlBase() + "/sepas/favorites",
+ // data: $.param({uri: elementUri}),
+ // headers: {'Content-Type': 'application/x-www-form-urlencoded'}
+ // })
+ // }
+ //
+ // removePreferredSepa(elementUri) {
+ // return this.$http({
+ // method: 'DELETE',
+ // url: this.urlBase() + "/sepas/favorites/" + encodeURIComponent(elementUri)
+ // })
+ // }
+
+ getOwnSources(): Observable<any> {
return this.$http.get(this.urlBase() +"/sources/own");
};
@@ -135,21 +136,21 @@ export class RestApi {
return this.$http.get(this.urlBase() +"/sources/favorites");
};
- addPreferredSource(elementUri) {
- return this.$http({
- method: 'POST',
- url: this.urlBase() + "/sources/favorites",
- data: $.param({uri: elementUri}),
- headers: {'Content-Type': 'application/x-www-form-urlencoded'}
- })
- }
-
- removePreferredSource(elementUri) {
- return this.$http({
- method: 'DELETE',
- url: this.urlBase() + "/sources/favorites/" + encodeURIComponent(elementUri)
- })
- }
+ // addPreferredSource(elementUri) {
+ // return this.$http({
+ // method: 'POST',
+ // url: this.urlBase() + "/sources/favorites",
+ // data: $.param({uri: elementUri}),
+ // headers: {'Content-Type': 'application/x-www-form-urlencoded'}
+ // })
+ // }
+ //
+ // removePreferredSource(elementUri) {
+ // return this.$http({
+ // method: 'DELETE',
+ // url: this.urlBase() + "/sources/favorites/" + encodeURIComponent(elementUri)
+ // })
+ // }
getOwnStreams(source){
return this.$http.get(this.urlBase() + "/sources/" + encodeURIComponent(source.uri) + "/streams");
@@ -160,10 +161,10 @@ export class RestApi {
return this.$http.get(this.urlBase() +"/element/" + encodeURIComponent(elementUri) +"/jsonld");
}
- configured() {
+ configured(): Observable<any> {
return this.$http.get(this.getServerUrl() + "/setup/configured", {
- ignoreLoadingBar: true,
- timeout: 2000
+ //ignoreLoadingBar: true,
+ //timeout: 2000
});
}
@@ -178,7 +179,7 @@ export class RestApi {
//return this.$http.get(this.getServerUrl() +"/semantic-epa-backend/api/v2/setup/configured");
};
- getOwnPipelines() {
+ getOwnPipelines(): Observable<any> {
return this.$http.get(this.urlBase() +"/pipelines/own");
//return this.$http.get("/semantic-epa-backend/api/pipelines");
};
@@ -195,28 +196,6 @@ export class RestApi {
return this.$http.post(this.urlBase() +"/streams/update", stream);
}
- deleteOwnPipeline(pipelineId) {
-
- // delete all the widgets that use the pipeline results
-
- // this.$http.get("/dashboard/_all_docs?include_docs=true").then(function(data) {
- // var toDelete = _.chain(data.data.rows)
- // .filter(function(o) {
- // return o.doc.visualisation.pipelineId == pipelineId;
- // }).value();
-
- // _.map(toDelete, function(o) {
- // this.$http.delete("/dashboard/" + o.doc._id + '?rev=' + o.doc._rev);
- // });
-
- // });
-
- return this.$http({
- method: 'DELETE',
- url: this.urlBase() + "/pipelines/" +pipelineId
- });
- }
-
getPipelineCategories() {
return this.$http.get(this.urlBase() +"/pipelinecategories");
};
@@ -225,13 +204,6 @@ export class RestApi {
return this.$http.post(this.urlBase() +"/pipelinecategories", pipelineCategory);
};
- deletePipelineCategory(categoryId) {
- return this.$http({
- method: 'DELETE',
- url: this.urlBase() + "/pipelinecategories/" +categoryId
- });
- }
-
fetchRemoteOptions(resolvableOptionsParameterRequest) {
return this.$http.post(this.urlBase() +"/pe/options", resolvableOptionsParameterRequest);
}
@@ -267,7 +239,7 @@ export class RestApi {
return this.$http.get(this.urlBase() +"/notifications");
}
- getUnreadNotificationsCount() {
+ getUnreadNotificationsCount(): Observable<any> {
return this.$http.get(this.urlBase() +"/notifications/count");
}
@@ -275,17 +247,6 @@ export class RestApi {
return this.$http.get(this.urlBase() +"/notifications/unread");
}
- updateNotification(notificationId) {
- return this.$http.put(this.urlBase() +"/notifications/" +notificationId);
- }
-
- deleteNotifications(notificationId) {
- return this.$http({
- method: 'DELETE',
- url: this.urlBase() + "/notifications/" +notificationId
- });
- }
-
getSepaById(elementId) {
return this.$http.get(this.urlBase() +"/sepas/" + encodeURIComponent(elementId));
}
@@ -322,13 +283,6 @@ export class RestApi {
return this.$http.post(this.getServerUrl() + "/ontology/namespaces", namespace);
}
- deleteOntologyNamespace(prefix) {
- return this.$http({
- method: 'DELETE',
- url: this.getServerUrl() + "/ontology/namespaces/" + encodeURIComponent(prefix)
- });
- }
-
addOntologyConcept(conceptData) {
return this.$http.post(this.getServerUrl() + "/ontology/types", conceptData);
}
@@ -353,37 +307,37 @@ export class RestApi {
return this.$http.put(this.getServerUrl() + "/ontology/instances/" + encodeURIComponent(instanceId), instanceData);
}
- deleteOntologyInstance(instanceId) {
- return this.$http({
- method: 'DELETE',
- url: this.getServerUrl() + "/ontology/instances/" + encodeURIComponent(instanceId)
- });
- }
-
- deleteOntologyProperty(propertyId) {
- return this.$http({
- method: 'DELETE',
- url: this.getServerUrl() + "/ontology/properties/" + encodeURIComponent(propertyId)
- });
- }
-
- deleteOntologyConcept(conceptId) {
- return this.$http({
- method: 'DELETE',
- url: this.getServerUrl() + "/ontology/types/" + encodeURIComponent(conceptId)
- });
- }
+ // deleteOntologyInstance(instanceId) {
+ // return this.$http({
+ // method: 'DELETE',
+ // url: this.getServerUrl() + "/ontology/instances/" + encodeURIComponent(instanceId)
+ // });
+ // }
+ //
+ // deleteOntologyProperty(propertyId) {
+ // return this.$http({
+ // method: 'DELETE',
+ // url: this.getServerUrl() + "/ontology/properties/" + encodeURIComponent(propertyId)
+ // });
+ // }
+ //
+ // deleteOntologyConcept(conceptId) {
+ // return this.$http({
+ // method: 'DELETE',
+ // url: this.getServerUrl() + "/ontology/types/" + encodeURIComponent(conceptId)
+ // });
+ // }
getAvailableContexts() {
return this.$http.get(this.getServerUrl()+ "/contexts");
};
- deleteContext(contextId) {
- return this.$http({
- method: 'DELETE',
- url: this.getServerUrl() + "/contexts/" + encodeURIComponent(contextId)
- });
- }
+ // deleteContext(contextId) {
+ // return this.$http({
+ // method: 'DELETE',
+ // url: this.getServerUrl() + "/contexts/" + encodeURIComponent(contextId)
+ // });
+ // }
getDomainKnowledgeItems(query) {
return this.$http.post(this.getServerUrl() + "/autocomplete/domain", query);
@@ -463,7 +417,7 @@ export class RestApi {
}
- getAuthc() {
+ getAuthc(): Observable<any> {
return this.$http.get(this.getServerUrl() + "/admin/authc");
}
@@ -479,29 +433,29 @@ export class RestApi {
return this.$http.post(this.getServerUrl() +"/admin/register", payload);
}
- deployStorm(payload) {
- return this.$http({method: 'GET', responseType : 'arraybuffer', headers: {'Accept' : 'application/zip'}, url: this.urlBase() + '/deploy/storm'})
-
- }
+ // deployStorm(payload) {
+ // return this.$http({method: 'GET', responseType : 'arraybuffer', headers: {'Accept' : 'application/zip'}, url: this.urlBase() + '/deploy/storm'})
+ //
+ // }
getApplicationLinks() {
return this.$http.get(this.getServerUrl() + "/applink");
};
- getRuntimeInfo(dataStream) {
- return this.$http.post(this.urlBase() +"/pipeline-element/runtime", dataStream, {
- ignoreLoadingBar: true
- });
- }
+ // getRuntimeInfo(dataStream) {
+ // return this.$http.post(this.urlBase() +"/pipeline-element/runtime", dataStream, {
+ // ignoreLoadingBar: true
+ // });
+ // }
getDocumentation(appId) {
return this.$http.get(this.getAssetUrl(appId) +"/documentation");
}
- uploadFile(data) {
- return this.$http.post(this.urlBase() + "/files", data, {headers: {'Content-Type': undefined },
- transformRequest: angular.identity});
- }
+ // uploadFile(data) {
+ // return this.$http.post(this.urlBase() + "/files", data, {headers: {'Content-Type': undefined },
+ // transformRequest: angular.identity});
+ // }
getFileMetadata() {
return this.$http.get(this.urlBase() + "/files");
@@ -519,5 +473,3 @@ export class RestApi {
return this.$http.delete(this.urlBase() + "/pipeline-cache");
}
}
-
-RestApi.$inject = ['$http', 'apiConstants', 'AuthStatusService'];
diff --git a/ui/src/app/services/services.module.ts b/ui/src/app/services/services.module.ts
index 197aea2..b1b658c 100644
--- a/ui/src/app/services/services.module.ts
+++ b/ui/src/app/services/services.module.ts
@@ -16,68 +16,55 @@
*
*/
-import * as angular from 'angular';
-import 'npm/dagre';
-import spConstants from '../constants/constants.module'
+// export default angular.module('sp.services', [spConstants])
+// .service('ImageChecker', ImageChecker)
+// .service('AuthService', downgradeInjectable(AuthService))
+// .service('ElementIconText', ElementIconText)
+// .service('InitTooltips', InitTooltips)
+// .service('RestApi', RestApi)
+// .service('AuthStatusService', downgradeInjectable(AuthStatusService))
+// .service('ObjectProvider', ObjectProvider)
+// .service('DomainProperties', DomainProperties)
+// //.service('JsplumbBridge', downgradeInjectable(JsplumbBridge))
+// //.service('JsplumbService', downgradeInjectable(JsplumbService))
+// //.service('PipelinePositioningService', downgradeInjectable(PipelinePositioningService))
+// //.service('PipelineEditorService', PipelineEditorService)
+// .service('DialogBuilder', DialogBuilder)
+// .service('MeasurementUnitsService', MeasurementUnits)
+// .service('DeploymentService', DeploymentService)
+// .service('JsplumbConfigService', JsplumbConfigService)
+// .service('PipelineElementIconService', PipelineElementIconService)
+// .service('RouteTransitionInterceptorService', RouteTransitionInterceptorService)
+// .service('ShepherdService', ShepherdService)
+// .service('TourProviderService', TourProviderService)
+// .service('PropertySelectorService', PropertySelectorService)
+// .service('NotificationCountService', downgradeInjectable(NotificationCountService))
+// .constant('createPipelineTourConstants', CreatePipelineTour)
+// .constant('dashboardTourConstants', DashboardTour)
+// .constant('adapterTourConstants', AdapterTour)
+// .constant('adapterTour2Constants', AdapterTour2)
+// .constant('adapterTour3Constants', AdapterTour3)
+// .name;
-import {ImageChecker} from './image-checker.service'
-import {AuthService} from './auth.service'
-import {ElementIconText} from './get-element-icon-text.service'
-import {InitTooltips} from './init-tooltips.service'
-import {RestApi} from './rest-api.service'
-import {AuthStatusService} from './auth-status.service'
-import {DomainProperties} from './domain-properties.service'
-import {JsplumbBridge} from '../editor/services/jsplumb-bridge.service'
-import {JsplumbService} from '../editor/services/jsplumb.service'
-import {PipelinePositioningService} from '../editor/services/pipeline-positioning.service'
-import {PipelineEditorService} from '../editor/services/pipeline-editor.service'
-import {DialogBuilder} from './dialog-builder.service'
-import {MeasurementUnits} from './measurement-units.service'
-import {DeploymentService} from './deployment.service'
-import {JsplumbConfigService} from '../editor/services/jsplumb-config.service'
-import {PipelineElementIconService} from './pipeline-icon.service'
-import {ObjectProvider} from '../editor/services/object-provider.service'
-import {downgradeInjectable} from '@angular/upgrade/static';
+import {NgModule} from "@angular/core";
+import {RestApi} from "./rest-api.service";
+import {AuthService} from "./auth.service";
import {ShepherdService} from "./tour/shepherd.service";
import {TourProviderService} from "./tour/tour-provider.service";
-import {PropertySelectorService} from "./property-selector.service";
-import {RouteTransitionInterceptorService} from "./route-transition-interceptor.service";
-
-import CreatePipelineTour from './tour/create-pipeline-tour.constants';
-import DashboardTour from './tour/dashboard-tour.constants';
-import AdapterTour from './tour/adapter-tour.constants';
-import AdapterTour2 from './tour/adapter-tour-2.constants';
-import AdapterTour3 from './tour/adapter-tour-3.constants';
import {NotificationCountService} from "./notification-count-service";
-
-export default angular.module('sp.services', [spConstants])
- .service('ImageChecker', ImageChecker)
- .service('AuthService', downgradeInjectable(AuthService))
- .service('ElementIconText', ElementIconText)
- .service('InitTooltips', InitTooltips)
- .service('RestApi', RestApi)
- .service('AuthStatusService', downgradeInjectable(AuthStatusService))
- .service('ObjectProvider', ObjectProvider)
- .service('DomainProperties', DomainProperties)
- //.service('JsplumbBridge', downgradeInjectable(JsplumbBridge))
- //.service('JsplumbService', downgradeInjectable(JsplumbService))
- //.service('PipelinePositioningService', downgradeInjectable(PipelinePositioningService))
- //.service('PipelineEditorService', PipelineEditorService)
- .service('DialogBuilder', DialogBuilder)
- .service('MeasurementUnitsService', MeasurementUnits)
- .service('DeploymentService', DeploymentService)
- .service('JsplumbConfigService', JsplumbConfigService)
- .service('PipelineElementIconService', PipelineElementIconService)
- .service('RouteTransitionInterceptorService', RouteTransitionInterceptorService)
- .service('ShepherdService', ShepherdService)
- .service('TourProviderService', TourProviderService)
- .service('PropertySelectorService', PropertySelectorService)
- .service('NotificationCountService', downgradeInjectable(NotificationCountService))
- .constant('createPipelineTourConstants', CreatePipelineTour)
- .constant('dashboardTourConstants', DashboardTour)
- .constant('adapterTourConstants', AdapterTour)
- .constant('adapterTour2Constants', AdapterTour2)
- .constant('adapterTour3Constants', AdapterTour3)
- .name;
+@NgModule({
+ imports: [],
+ declarations: [],
+ providers: [
+ RestApi,
+ AuthService,
+ ShepherdService,
+ TourProviderService,
+ NotificationCountService,
+ ],
+ entryComponents: []
+})
+export class ServicesModule {
+}
diff --git a/ui/src/app/services/tour/shepherd.service.ts b/ui/src/app/services/tour/shepherd.service.ts
index a310677..e2846f6 100644
--- a/ui/src/app/services/tour/shepherd.service.ts
+++ b/ui/src/app/services/tour/shepherd.service.ts
@@ -19,23 +19,18 @@
import Shepherd from 'shepherd.js';
//import "shepherd.js/dist/css/shepherd-theme-arrows.css";
import {Inject, Injectable} from "@angular/core";
+import {Router} from "@angular/router";
+import {TourProviderService} from "./tour-provider.service";
@Injectable()
export class ShepherdService {
- $timeout: any;
- $state: any;
- TourProviderService: any;
currentTour: any;
currentTourSettings: any;
timeWaitMillis: number;
- constructor(@Inject('$timeout') $timeout,
- @Inject('$state') $state,
- @Inject('TourProviderService') TourProviderService) {
- this.$timeout = $timeout;
- this.$state = $state;
- this.TourProviderService = TourProviderService;
+ constructor(private Router: Router,
+ private TourProviderService: TourProviderService) {
this.timeWaitMillis = TourProviderService.getTime();
}
@@ -134,7 +129,7 @@ export class ShepherdService {
trigger(actionId) {
if (Shepherd.activeTour) {
if (this.shouldTrigger(actionId, this.currentTour.getCurrentStep().id)) {
- this.$timeout(() => this.currentTour.next(), this.TourProviderService.getTime());
+ setTimeout(() => this.currentTour.next(), this.TourProviderService.getTime());
}
}
}
@@ -154,7 +149,7 @@ export class ShepherdService {
}
switchAndStartDashboardTour() {
- this.$state.go("streampipes.dashboard");
+ this.Router.navigateByUrl("dashboard");
}
startCreatePipelineTour() {
diff --git a/ui/src/app/services/tour/tour-provider.service.ts b/ui/src/app/services/tour/tour-provider.service.ts
index ff4af3c..3793a1d 100644
--- a/ui/src/app/services/tour/tour-provider.service.ts
+++ b/ui/src/app/services/tour/tour-provider.service.ts
@@ -17,6 +17,14 @@
*
*/
+import createPipelineTourConstants from './create-pipeline-tour.constants';
+import dashboardTourConstants from './dashboard-tour.constants';
+import adapterTourConstants from './adapter-tour.constants';
+import adapterTour2Constants from './adapter-tour-2.constants';
+import adapterTour3Constants from './adapter-tour-3.constants';
+import {Injectable} from "@angular/core";
+
+@Injectable()
export class TourProviderService {
guidedTours: any;
@@ -24,7 +32,7 @@ export class TourProviderService {
// This is needed to configure the time in cypress test cases
time: any;
- constructor(createPipelineTourConstants, dashboardTourConstants, adapterTourConstants, adapterTour2Constants, adapterTour3Constants) {
+ constructor() {
this.guidedTours = [];
this.guidedTours.push(createPipelineTourConstants.createPipelineTour);
this.guidedTours.push(dashboardTourConstants.dashboardTour);
@@ -52,7 +60,4 @@ export class TourProviderService {
getTime() {
return this.time;
}
-}
-
-TourProviderService.$inject = ['createPipelineTourConstants', 'dashboardTourConstants',
- 'adapterTourConstants', 'adapterTour2Constants', 'adapterTour3Constants'];
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/ui/src/assets/templates/iconbar.html b/ui/src/assets/templates/iconbar.html
deleted file mode 100644
index d886c66..0000000
--- a/ui/src/assets/templates/iconbar.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!--
- ~ Licensed to the Apache Software Foundation (ASF) under one or more
- ~ contributor license agreements. See the NOTICE file distributed with
- ~ this work for additional information regarding copyright ownership.
- ~ The ASF licenses this file to You under the Apache License, Version 2.0
- ~ (the "License"); you may not use this file except in compliance with
- ~ the License. You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- ~
- -->
-
-<md-list style="padding-top:0px;">
- <md-list-item class="md-1-line"
- ng-class="{'sp-navbar-item-selected' : item.link === toolbarCtrl.activePage, 'sp-navbar-item': item.link !== toolbarCtrl.activePage}"
- ng-repeat="item in toolbarCtrl.menu" role="link" style="min-width:0px;padding:0px;">
- <md-button class="md-icon-button button-margin-iconbar" ng-click="toolbarCtrl.go(item.link)">
- <md-icon md-svg-icon="{{item.icon}}" aria-label="{{item.title}}"
- ng-class="{'sp-navbar-icon-selected' : item.link === toolbarCtrl.activePage, 'sp-navbar-icon': item.link !== toolbarCtrl.activePage}"></md-icon>
- <md-tooltip md-direction="right">
- {{item.title}}
- </md-tooltip>
- </md-button>
- </md-list-item>
- <md-list-item class="md-1-line" role="link"
- ng-class="{'sp-navbar-item-selected' : 'streampipes.notifications' === toolbarCtrl.activePage, 'sp-navbar-item': 'streampipes.notifications' !== toolbarCtrl.activePage}">
- <notification-icon count='toolbarCtrl.NotificationCountService.unreadNotificationCount'>
- <md-button class="md-icon-button button-margin-iconbar" ng-click="toolbarCtrl.go('streampipes.notifications')">
- <md-icon md-svg-icon="communication:ic_chat_24px" aria-label="Notifications"
- ng-class="{'sp-navbar-icon-selected' : 'streampipes.notifications' === toolbarCtrl.activePage, 'sp-navbar-icon': 'streampipes.notifications' !== toolbarCtrl.activePage}"></md-icon>
- <md-tooltip md-direction="right">
- Notifications
- </md-tooltip>
- </md-button>
- </notification-icon>
- </md-list-item>
- <md-divider style="border-top-color:white;"></md-divider>
- <md-list-item class="md-1-line"
- ng-class="{'sp-navbar-item-selected' : item.link === toolbarCtrl.activePage, 'sp-navbar-item': item.link !== toolbarCtrl.activePage}"
- ng-repeat="item in toolbarCtrl.admin" role="link">
- <md-button class="md-icon-button button-margin-iconbar" ng-click="toolbarCtrl.go(item.link)">
- <md-icon md-svg-icon="{{item.icon}}" aria-label="{{item.title}}"
- ng-class="{'sp-navbar-icon-selected' : item.link === toolbarCtrl.activePage, 'sp-navbar-icon': item.link !== toolbarCtrl.activePage}"></md-icon>
- <md-tooltip md-direction="right">
- {{item.title}}
- </md-tooltip>
- </md-button>
- <md-divider ng-if="item.link=='streampipes.applinks'" style="border-top-color:white;"></md-divider>
-
- </md-list-item>
-</md-list>
\ No newline at end of file
diff --git a/ui/src/assets/templates/navbar.html b/ui/src/assets/templates/navbar.html
deleted file mode 100644
index 101c4f4..0000000
--- a/ui/src/assets/templates/navbar.html
+++ /dev/null
@@ -1,127 +0,0 @@
-<!--
- ~ Licensed to the Apache Software Foundation (ASF) under one or more
- ~ contributor license agreements. See the NOTICE file distributed with
- ~ this work for additional information regarding copyright ownership.
- ~ The ASF licenses this file to You under the Apache License, Version 2.0
- ~ (the "License"); you may not use this file except in compliance with
- ~ the License. You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- ~
- -->
-
-<md-toolbar class="md-primary md-hue-2 top-nav">
- <div class="md-toolbar-tools" style="height:50px;max-height:50px;">
- <div flex="60" layout layout-align="start center">
- <md-button class="md-icon-button" aria-label="Settings" ng-click="toolbarCtrl.toggleLeft()"
- ng-show="toolbarCtrl.authenticated">
- <i class="material-icons md-36">menu</i>
- </md-button>
- <h1 class="md-toolbar-tools" style="height:50px;max-height:50px;">
- <div class="sp-darkblue"
- style="align-items: left;padding:5px;border-radius:0px;margin-right:15px;position:relative;left:20px;">
- <img
- alt="icon" src="assets/img/sp/sp-logo-right-white.png" style="height:28px;">
- </div>
- <div style="color:white;padding: 5px 5px;font-size:15px;margin-left:10px;">
- <h4 style="margin-top:18px;font-size:12pt;font-weight:bold;">{{toolbarCtrl.activePageName}}</h4>
- </div>
- </h1>
- </div>
- <span flex></span>
- <div flex="40" layout layout-align="end center" ng-show="toolbarCtrl.authenticated" style="height:100%;">
- <div style="height:100%;">
- <div ng-style="toolbarCtrl.feedbackMenuBackground" layout layout-align="center center" style="height: 100%;">
- <md-button ng-class="toolbarCtrl.feedbackOpen ? 'sp-icon-button-no-hover' : 'sp-icon-button'" ng-click="toolbarCtrl.toggleFeedback()" style="min-width:0px;" layout layout-align="center center">
- <i ng-style="toolbarCtrl.feedbackMenuIconColor" class="material-icons">feedback</i>
- <md-tooltip md-direction="bottom">
- Feedback
- </md-tooltip>
- </md-button>
- </div>
- <sp-feedback style="position:relative;left: -348px;" ng-if="toolbarCtrl.feedbackOpen" close-feedback-window="toolbarCtrl.closeFeedbackWindow()"></sp-feedback>
- </div>
- <md-menu id="account" ng-style="toolbarCtrl.accountMenuBackground" md-position-mode="target-right target" md-offset="8 52" style="margin:inherit;height:100%;" layout layout-align="center center">
- <md-button layout layout-align="center center" aria-label="Open menu" ng-class="toolbarCtrl.accountMenuOpen ? 'sp-icon-button-no-hover' : 'sp-icon-button'" ng-click="toolbarCtrl.triggerAccountMenu($mdMenu, $event)" style="min-width:0px;">
- <i ng-style="toolbarCtrl.accountMenuIconColor" class="material-icons">account_circle</i>
- <md-tooltip md-direction="bottom">
- User Preferences
- </md-tooltip>
- </md-button>
- <md-menu-content width="4">
- <md-menu-item>
- <md-button ng-click="toolbarCtrl.openInfo()" style="min-width:0px;">
- <md-icon md-svg-icon="action:ic_help_24px" aria-label="Info"></md-icon>
- Info
- </md-button>
- </md-menu-item>
- <md-menu-item>
- <md-button ng-click="toolbarCtrl.openDocumentation()"
- style="min-width:0px;">
- <md-icon md-svg-icon="action:ic_description_24px" aria-label="Documentation"></md-icon>
- Documentation
- </md-button>
- </md-menu-item>
- <md-menu-divider></md-menu-divider>
- <md-menu-item>
- <md-button id="sp_logout" ng-click="toolbarCtrl.logout()"
- style="min-width:0px;">
- <md-icon md-svg-icon="action:ic_exit_to_app_24px" aria-label="Logout"></md-icon>
- Logout
- </md-button>
- </md-menu-item>
- </md-menu-content>
- </md-menu>
- </div>
- </div>
-</md-toolbar>
-
-<md-sidenav flex layout="column" class="md-sidenav-left" md-component-id="left" ng-show="toolbarCtrl.authenticated">
- <md-toolbar class="md-tall md-hue-3">
- <span flex></span>
- <div layout="column" class="md-toolbar-tools-bottom inset">
- <div layout layout-sm="column">
- <div class="useravatar" user="toolbarCtrl.AuthStatusService.userInfo"></div>
- <div style="color:white;margin-left:10px; margin-right:10px;">{{toolbarCtrl.AuthStatusService.email}}</div>
- </div>
- <div style="margin-top:20px;">
- <md-button style="background:rgb(63,81,181);color:white;" class="md-accent"
- ng-click="toolbarCtrl.logout()">Logout
- </md-button>
- </div>
- </div>
- </md-toolbar>
- <md-list>
- <md-list-item class="md-2-line" ng-repeat="item in toolbarCtrl.menu" role="link"
- ng-click="toolbarCtrl.go(item.link)">
-
- <md-icon md-svg-icon="{{item.icon}}" aria-label="{{item.title}}"></md-icon>
- <div class="md-list-item-text">
- <span class="md-body-2">{{item.title}}</span>
- </div>
-
- </md-list-item>
- <md-list-item class="md-2-line" role="link" ng-click="toolbarCtrl.go('streampipes.notifications')">
- <md-icon md-svg-icon="communication:ic_chat_24px" aria-label="Notifications"></md-icon>
- <div class="md-list-item-text">
- <span class="md-body-2">Notifications <span
- class="sidebar-badge">{{toolbarCtrl.unreadNotifications.length}}</span></span>
- </div>
- </md-list-item>
- <md-divider></md-divider>
- <md-subheader class="md-no-sticky">Management</md-subheader>
- <md-list-item class="md-2-line" ng-repeat="item in toolbarCtrl.admin" role="link"
- ng-click="toolbarCtrl.go(item.link)">
- <md-icon md-svg-icon="{{item.icon}}" aria-label="{{item.title}}"></md-icon>
- <div class="md-list-item-text">
- <span class="md-body-2">{{item.title}}</span>
- </div>
- </md-list-item>
- </md-list>
-</md-sidenav>
diff --git a/ui/src/assets/templates/register.html b/ui/src/assets/templates/register.html
deleted file mode 100644
index 71bf5fd..0000000
--- a/ui/src/assets/templates/register.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<!--
- ~ Licensed to the Apache Software Foundation (ASF) under one or more
- ~ contributor license agreements. See the NOTICE file distributed with
- ~ this work for additional information regarding copyright ownership.
- ~ The ASF licenses this file to You under the Apache License, Version 2.0
- ~ (the "License"); you may not use this file except in compliance with
- ~ the License. You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- ~
- -->
-
-<div class="md-padding logo-production" layout-xs="column" layout="row" layout-align="center center"
- style="min-height:100vh !important;" ng-controller="RegisterCtrl as ctrl">
- <div flex="40" layout-align="center center">
- <md-card class="card-100-center" style="padding:20px;position:relative;top:-25px;">
- <div layout="column" flex="60" layout-align="center center" style="margin-left:auto;margin-right:auto;">
- <div flex="60" layout-align="center center" layout="row"
- style="color:white;"><img
- alt="icon" src="assets/img/login/logo.png">
- </div>
- </div>
- <div flex layout-align="center center"><h1>Register</h1></div>
- <div flex="100" layout-sm="column">
- <form name="ctrl.registerForm" ng-submit="ctrl.register()" role="form">
- <div flex layout="column">
- <md-input-container><label>Email</label> <input
- type="email" ng-model="ctrl.email" required></md-input-container>
- <md-input-container flex><label>Password:</label>
- <input type="password" ng-model="ctrl.password" required></md-input-container>
- <md-input-container><label>Role</label>
- <md-select
- ng-model="selectedRole">
- <md-option
- ng-repeat="role in ctrl.roles" value="{{role.internalName}}">
- {{role.name}}
- </md-option>
- </md-select>
- </md-input-container>
- </div>
- <div class="form-actions">
- <md-button class="md-accent md-raised" type="submit"
- ng-disabled="ctrl.registerForm.$pristine || ctrl.registerForm.$invalid">Register
- </md-button>
- <md-progress-circular class="md-accent" md-mode="indeterminate"
- ng-show="ctrl.loading"></md-progress-circular>
- <div class="md-warn" ng-show="ctrl.registrationFailed">
- <h4>Registration failed. Please try again.</h4>
- <h5>{{ctrl.errorMessage}}</h5>
- </div>
- <div class="md-success" ng-show="ctrl.registrationSuccess">
- <h4>Registration successful. Go to <a ui-sref="login">Login</a> page</h4>
- </div>
- </div>
- </form>
- <a ui-sref="login">Back to login page</a>
- </div>
- </md-card>
- </div>
-</div>
-
diff --git a/ui/src/assets/templates/tutorial.html b/ui/src/assets/templates/tutorial.html
deleted file mode 100644
index 70dadef..0000000
--- a/ui/src/assets/templates/tutorial.html
+++ /dev/null
@@ -1,160 +0,0 @@
-<!--
- ~ Licensed to the Apache Software Foundation (ASF) under one or more
- ~ contributor license agreements. See the NOTICE file distributed with
- ~ this work for additional information regarding copyright ownership.
- ~ The ASF licenses this file to You under the Apache License, Version 2.0
- ~ (the "License"); you may not use this file except in compliance with
- ~ the License. You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- ~
- -->
-
-<div flex layout-fill>
-<div flex="100" layout="row" style="padding:0px;background-color:#f6f6f6">
-<div flex="none" layout-fill layout="row" layout-align="start center" style="height:48px;padding-left:10px;font-size:14px;line-height:24px;border-bottom:1px solid #ccc">
-<h5>TUTORIAL</h5>
-</div>
-</div>
-<div class="container-fluid">
- <div>
- <md-content layout-padding>
-
- <div id="tutorial-content">
- <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval=false>
- <!-- Indicators -->
- <ol class="carousel-indicators">
- <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
- <li data-target="#carousel-example-generic" data-slide-to="1"></li>
- <li data-target="#carousel-example-generic" data-slide-to="2"></li>
- <li data-target="#carousel-example-generic" data-slide-to="3"></li>
- <li data-target="#carousel-example-generic" data-slide-to="4"></li>
- <li data-target="#carousel-example-generic" data-slide-to="5"></li>
- <li data-target="#carousel-example-generic" data-slide-to="6"></li>
- <li data-target="#carousel-example-generic" data-slide-to="7"></li>
- <li data-target="#carousel-example-generic" data-slide-to="8"></li>
- <li data-target="#carousel-example-generic" data-slide-to="9"></li>
- <li data-target="#carousel-example-generic" data-slide-to="10"></li>
- <li data-target="#carousel-example-generic" data-slide-to="11"></li>
- <li data-target="#carousel-example-generic" data-slide-to="12"></li>
- </ol>
-
- <!-- Wrapper for slides -->
- <div class="carousel-inner" role="listbox">
- <div class="item active">
- <img src="assets/img/production-line.png" >
- <div class="carousel-caption">
- <h3>Welcome!</h3>
- <p>This tutorial will give you a quick introduction to the editor and will teach you how to create your first pipeline.</p>
- </div>
- </div>
- <div class="item">
- <img src="assets/img/tut1/1.png" >
- <div class="carousel-caption">
- <h3>Use-Case Selection</h3>
- <p>Use the dropdown menu to select the desired use-case.</p>
- </div>
- </div>
- <div class="item">
- <img src="assets/img/tut1/2.png" >
- <div class="carousel-caption">
- <h3>Source Selection</h3>
- <p>Choose one of the provided sources. Additional informaton can be displayed by pressing the right mouse button and choosing "Description".</p>
- </div>
- </div>
- <div class="item">
- <img src="assets/img/tut1/3.png" >
- <div class="carousel-caption">
- <h3>Stream Selection</h3>
- <p>Streams will be available once you select a source.</p>
- </div>
- </div>
- <div class="item">
- <img src="assets/img/tut1/4.png" >
- <div class="carousel-caption">
- <h3>Drag'n'drop</h3>
- <p>Drag the desired stream to the indicated assembly area.</p>
- </div>
- </div>
- <div class="item">
- <img src="assets/img/tut1/5.png" >
- <div class="carousel-caption">
- <h3>Sepas</h3>
- <p>Category "Sepas" (eg filter elements) will be available once you dropped a stream element into the assembly area.</p>
- </div>
- </div>
- <div class="item">
- <img src="assets/img/tut1/6.png" >
- <div class="carousel-caption">
- <h3></h3>
- <p>Sepas are draggable too. </p>
- </div>
- </div>
- <div class="item">
- <img src="assets/img/tut1/7.png" >
- <div class="carousel-caption">
- <h3>Connections</h3>
- <p>Drag the little knob from the stream element to create a connection. Connect the stream and sepa elements.</p>
- </div>
- </div>
- <div class="item">
- <img src="assets/img/tut1/8.png" >
- <div class="carousel-caption">
- <h3>Customizing</h3>
- <p>Once a valid connection is established, a window pops up that let's you customize the sepa element. After customizing, click save. </p>
- </div>
- </div>
- <div class="item">
- <img src="assets/img/tut1/9.png" >
- <div class="carousel-caption">
- <h3>Pipelines</h3>
- <p>Repeat this procedure with an action element. You can have any number of stream and sepa elements in your pipeline, but only one action element. When you're done, click "Submit" in the bottom right corner.</p>
- </div>
- </div>
- <div class="item">
- <img src="assets/img/tut1/10.png" >
- <div class="carousel-caption">
- <h3></h3>
- <p>Name your pipeline and enter a short description to make it easier to understand what it does. Click Save. Congratulations, you've just created your very first pipeline!</p>
- </div>
- </div>
- <div class="item">
- <img src="assets/img/tut1/11.png" >
- <div class="carousel-caption">
- <h3>Other features</h3>
- <p><b>Pipelines</b> shows all your saved pipelines and lets you inspect, run, modify and delete them.<br>
- <b>Visualizations</b> lets you view your pipelines output in different ways. <br>
- <b>Options</b> lets you manage your existing elements or add new ones.
- </p>
- </div>
- </div>
- <div class="item">
- <img src="assets/img/tut1/blank.png" >
- <div class="carousel-caption">
- <h3>Thank you!</h3>
- <p></p>
- </div>
- </div>
- </div>
-
- <!-- Controls -->
- <a class="left carousel-control" data-target="#carousel-example-generic" role="button" data-slide="prev">
- <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
- <span class="sr-only">Previous</span>
- </a>
- <a class="right carousel-control" data-target="#carousel-example-generic" role="button" data-slide="next">
- <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
- <span class="sr-only">Next</span>
- </a>
- </div>
- </div>
- </md-content>
- </div>
- </div>
-</div>
diff --git a/ui/src/index.html b/ui/src/index.html
index 8f5eb1e..9f84301 100644
--- a/ui/src/index.html
+++ b/ui/src/index.html
@@ -101,19 +101,17 @@
</head>
-<body layout="row" ng-controller="AppCtrl as appCtrl">
-<app-root>
-</app-root>
-
-<div layout="column" style="height:100%;" role="main" tabindex="-1" flex>
- <div class="sp-fade" ui-view="container" flex layout="column" style="min-height: 100vh; max-height: 100vh;">
- <div class="app-loading">
- <div class="animated-logo">
- <img src="/assets/img/favicon/favicon-128.png" class="logo-splash"/>
+<body>
+ <app-root>
+ <div style="height:100%;" role="main" tabindex="-1" flex>
+ <div class="sp-fade" style="min-height: 100vh; max-height: 100vh;">
+ <div class="app-loading">
+ <div class="animated-logo">
+ <img src="/assets/img/favicon/favicon-128.png" class="logo-splash"/>
+ </div>
+ </div>
</div>
</div>
- </div>
-</div>
-
+ </app-root>
</body>
</html>
diff --git a/ui/src/main.ts b/ui/src/main.ts
index 78d7bc1..1feb465 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -17,12 +17,14 @@
*/
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { UrlService } from '@uirouter/core';
import { AppModule } from './app/appng5.module';
-platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
- const url: UrlService = platformRef.injector.get(UrlService);
- url.listen();
- url.sync();
-});
\ No newline at end of file
+// platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
+// const url: UrlService = platformRef.injector.get(UrlService);
+// url.listen();
+// url.sync();
+// });
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+ .catch(err => console.error(err));
\ No newline at end of file