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/15 21:54:14 UTC
[incubator-streampipes] 07/11: [STREAMPIPES-193] Migrate loading
bar, minor bug fixes to get rid of AngularJS imports
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 ff779b53d575380839b969b28917ccda6d01c391
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Fri Aug 14 09:16:09 2020 +0200
[STREAMPIPES-193] Migrate loading bar, minor bug fixes to get rid of AngularJS imports
---
ui/deployment/appng5.module.mst | 34 +++++++---------------
ui/package.json | 2 ++
ui/src/app/app.component.html | 2 +-
.../pipeline-element-options.component.ts | 5 ++--
.../components/pipeline/pipeline.component.ts | 6 ++--
.../app/editor/services/object-provider.service.ts | 3 +-
.../pipeline-element-recommendation.service.ts | 3 +-
.../editor/services/pipeline-validation.service.ts | 3 +-
.../pipeline-categories-dialog.component.ts | 3 +-
.../start-all-pipelines-dialog.component.ts | 5 ++--
ui/src/app/pipelines/pipelines.component.ts | 3 +-
ui/src/scss/main.scss | 2 --
12 files changed, 26 insertions(+), 45 deletions(-)
diff --git a/ui/deployment/appng5.module.mst b/ui/deployment/appng5.module.mst
index 3cae21a..8fecff7 100644
--- a/ui/deployment/appng5.module.mst
+++ b/ui/deployment/appng5.module.mst
@@ -19,10 +19,8 @@
import './app.module';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
-//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 { HttpClientModule } from '@angular/common/http';
import { MatIconModule } from '@angular/material/icon';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -39,7 +37,9 @@ import { AppAssetMonitoringModule } from "./app-asset-monitoring/app-asset-monit
import { PipelineDetailsModule } from './pipeline-details/pipeline-details.module';
import { AppTransportMonitoringModule } from "./app-transport-monitoring/app-transport-monitoring.module";
import { NotificationCountService } from "./services/notification-count-service";
-import {AuthService} from "./services/auth.service";
+import { AuthService } from "./services/auth.service";
+import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
+import { LOADING_BAR_CONFIG } from '@ngx-loading-bar/core';
{{#modulesActive}}
{{#ng5}}
@@ -47,15 +47,15 @@ import { {{{ng5_moduleName}}} } from '{{{path}}}';
{{/ng5}}
{{/modulesActive}}
-import {ConsoleLogService} from './shared/logger/log.service';
-import {Logger} from './shared/logger/default-log.service';
+import { ConsoleLogService } from './shared/logger/log.service';
+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 { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
-import {ServicesModule} from "./services/services.module";
+import { ServicesModule } from "./services/services.module";
import * as $ from 'jquery';
@@ -67,15 +67,14 @@ import * as $ from 'jquery';
AppRoutingModule,
BrowserModule,
BrowserAnimationsModule,
- //UpgradeModule,
CustomMaterialModule,
MatGridListModule,
MatIconModule,
FlexLayoutModule,
HttpClientModule,
FormsModule,
- //UIRouterUpgradeModule.forRoot(),
LoginModule,
+ LoadingBarHttpClientModule,
HomeModule,
ConfigurationModule,
InfoModule,
@@ -94,20 +93,9 @@ import * as $ from 'jquery';
providers: [
AuthStatusService,
AuthService,
- /*
- {
- provide: '$stateParams',
- useFactory: ($injector: any) => $injector.get('$stateParams'),
- deps: ['$injector']
- },
- {
- provide: '$state',
- useFactory: ($injector: any) => $injector.get('$state'),
- deps: ['$injector']
- },
- */
NotificationCountService,
- {provide: Logger, useClass: ConsoleLogService}
+ { provide: Logger, useClass: ConsoleLogService },
+ { provide: LOADING_BAR_CONFIG, useValue: { latencyThreshold: 100 }},
],
bootstrap: [AppComponent]
})
diff --git a/ui/package.json b/ui/package.json
index c570684..a2c11f6 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -34,6 +34,8 @@
"@danielmoncada/angular-datetime-picker": "9.2.0",
"@fortawesome/fontawesome-free": "5.12.1",
"@ngui/datetime-picker": "0.16.2",
+ "@ngx-loading-bar/core": "5.1.0",
+ "@ngx-loading-bar/http-client": "5.1.0",
"@stomp/ng2-stompjs": "7.2.0",
"@swimlane/ngx-charts": "13.0.2",
"angular-gridster2": "8.3.0",
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 19615f1..04cce49 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -15,5 +15,5 @@
~ limitations under the License.
~
-->
-
+<ngx-loading-bar [color]="'rgb(27, 20, 100)'"></ngx-loading-bar>
<router-outlet></router-outlet>
\ No newline at end of file
diff --git a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts
index ef118e9..3a3ff5d 100644
--- a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts
+++ b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts
@@ -16,7 +16,6 @@
*
*/
-import * as angular from 'angular';
import {JsplumbBridge} from "../../services/jsplumb-bridge.service";
import {JsplumbService} from "../../services/jsplumb.service";
import {PipelineValidationService} from "../../services/pipeline-validation.service";
@@ -35,6 +34,7 @@ import {PanelType} from "../../../core-ui/dialog/base-dialog/base-dialog.model";
import {DialogService} from "../../../core-ui/dialog/base-dialog/base-dialog.service";
import {CompatibleElementsComponent} from "../../dialog/compatible-elements/compatible-elements.component";
import {Tuple2} from "../../../core-model/base/Tuple2";
+import { cloneDeep } from "lodash";
@Component({
selector: 'pipeline-element-options',
@@ -138,7 +138,8 @@ export class PipelineElementOptionsComponent implements OnInit{
}
initRecs(elementId) {
- var currentPipeline = this.ObjectProvider.makePipeline(angular.copy(this.rawPipelineModel));
+
+ var currentPipeline = this.ObjectProvider.makePipeline(cloneDeep(this.rawPipelineModel));
this.EditorService.recommendPipelineElement(currentPipeline).subscribe((result) => {
if (result.success) {
this.possibleElements = this.PipelineElementRecommendationService.collectPossibleElements(this.allElements, result.possibleElements);
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.ts b/ui/src/app/editor/components/pipeline/pipeline.component.ts
index bcd6fd8..e0f76d4 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.ts
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.ts
@@ -16,8 +16,6 @@
*
*/
-import * as angular from "angular";
-
import {PipelineValidationService} from "../../services/pipeline-validation.service";
import {JsplumbService} from "../../services/jsplumb.service";
import {PipelineEditorService} from "../../services/pipeline-editor.service";
@@ -236,7 +234,7 @@ export class PipelineComponent implements OnInit {
handleDeleteOption(pipelineElement: PipelineElementConfig) {
this.JsplumbBridge.removeAllEndpoints(pipelineElement.payload.dom);
- angular.forEach(this.rawPipelineModel, pe => {
+ this.rawPipelineModel.forEach(pe => {
if (pe.payload.dom == pipelineElement.payload.dom) {
pe.settings.disabled = true;
}
@@ -339,7 +337,7 @@ export class PipelineComponent implements OnInit {
isCustomOutput(pe) {
var custom = false;
- angular.forEach(pe.payload.outputStrategies, strategy => {
+ pe.payload.outputStrategies.forEach(strategy => {
if (strategy instanceof CustomOutputStrategy) {
custom = true;
}
diff --git a/ui/src/app/editor/services/object-provider.service.ts b/ui/src/app/editor/services/object-provider.service.ts
index 3386c05..16e2597 100644
--- a/ui/src/app/editor/services/object-provider.service.ts
+++ b/ui/src/app/editor/services/object-provider.service.ts
@@ -16,7 +16,6 @@
*
*/
-import * as angular from 'angular';
import {Injectable} from "@angular/core";
import {RestApi} from "../../services/rest-api.service";
import {JsplumbBridge} from "./jsplumb-bridge.service";
@@ -60,7 +59,7 @@ export class ObjectProvider {
findElement(elementId, rawPipelineModel: PipelineElementConfig[]): PipelineElementConfig {
let result = {} as PipelineElementConfig;
- angular.forEach(rawPipelineModel, pe => {
+ rawPipelineModel.forEach(pe => {
if (pe.payload.dom === elementId) {
result = pe;
}
diff --git a/ui/src/app/editor/services/pipeline-element-recommendation.service.ts b/ui/src/app/editor/services/pipeline-element-recommendation.service.ts
index 4738fad..3696e3e 100644
--- a/ui/src/app/editor/services/pipeline-element-recommendation.service.ts
+++ b/ui/src/app/editor/services/pipeline-element-recommendation.service.ts
@@ -16,7 +16,6 @@
*
*/
-import * as angular from 'angular';
import {Injectable} from "@angular/core";
import {EditorService} from "./editor.service";
import {PipelineElementUnion} from "../model/editor.model";
@@ -34,7 +33,7 @@ export class PipelineElementRecommendationService {
collectPossibleElements(allElements: PipelineElementUnion[], possibleElements: PipelineElementRecommendation[]) {
var possibleElementConfigs = [];
- angular.forEach(possibleElements, pe => {
+ possibleElements.forEach(pe => {
possibleElementConfigs.push(this.getPipelineElementContents(allElements, pe.elementId)[0]);
})
return possibleElementConfigs;
diff --git a/ui/src/app/editor/services/pipeline-validation.service.ts b/ui/src/app/editor/services/pipeline-validation.service.ts
index ea335e9..9095115 100644
--- a/ui/src/app/editor/services/pipeline-validation.service.ts
+++ b/ui/src/app/editor/services/pipeline-validation.service.ts
@@ -16,7 +16,6 @@
*
*/
-import * as angular from 'angular';
import * as dagre from 'dagre';
import {JsplumbBridge} from "./jsplumb-bridge.service";
import {Injectable} from "@angular/core";
@@ -114,7 +113,7 @@ export class PipelineValidationService {
isInAssembly(rawPipelineModel: PipelineElementConfig[], type) {
var isElementInAssembly = false;
- angular.forEach(rawPipelineModel, pe => {
+ rawPipelineModel.forEach(pe => {
if (pe.type === type && !pe.settings.disabled) {
isElementInAssembly = true;
}
diff --git a/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.ts b/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.ts
index 14ca150..8a90900 100644
--- a/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.ts
+++ b/ui/src/app/pipelines/dialog/pipeline-categories/pipeline-categories-dialog.component.ts
@@ -16,7 +16,6 @@
*
*/
-import * as angular from 'angular';
import {Component, Input, OnInit} from "@angular/core";
import {Pipeline, PipelineCategory} from "../../../core-model/gen/streampipes-model";
import {PipelineService} from "../../../platform-services/apis/pipeline.service";
@@ -95,7 +94,7 @@ export class PipelineCategoriesDialogComponent implements OnInit {
findPipeline(pipelineId) {
var matchedPipeline = {};
- angular.forEach(this.pipelines, function (pipeline) {
+ this.pipelines.forEach(pipeline => {
if (pipeline._id == pipelineId) {
matchedPipeline = pipeline;
}
diff --git a/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts b/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts
index 9e012e0..d3ad53e 100644
--- a/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts
+++ b/ui/src/app/pipelines/dialog/start-all-pipelines/start-all-pipelines-dialog.component.ts
@@ -16,7 +16,6 @@
*
*/
-import * as angular from 'angular';
import {Component, Input, OnInit} from "@angular/core";
import {DialogRef} from "../../../core-ui/dialog/base-dialog/dialog-ref";
import {Pipeline} from "../../../core-model/gen/streampipes-model";
@@ -78,7 +77,7 @@ export class StartAllPipelinesDialogComponent implements OnInit {
}
getPipelinesToModify() {
- angular.forEach(this.pipelines, pipeline => {
+ this.pipelines.forEach(pipeline => {
if (pipeline.running != this.action && this.hasCategory(pipeline)) {
this.pipelinesToModify.push(pipeline);
}
@@ -89,7 +88,7 @@ export class StartAllPipelinesDialogComponent implements OnInit {
var categoryPresent = false;
if (!this.activeCategory) return true;
else {
- angular.forEach(pipeline.pipelineCategories, category => {
+ pipeline.pipelineCategories.forEach(category => {
if (category == this.activeCategory) {
categoryPresent = true;
}
diff --git a/ui/src/app/pipelines/pipelines.component.ts b/ui/src/app/pipelines/pipelines.component.ts
index 530c56d..6016fe0 100644
--- a/ui/src/app/pipelines/pipelines.component.ts
+++ b/ui/src/app/pipelines/pipelines.component.ts
@@ -16,7 +16,6 @@
*
*/
-import * as angular from 'angular';
import * as FileSaver from 'file-saver';
import {Component, Inject, OnInit} from "@angular/core";
import {PipelineService} from "../platform-services/apis/pipeline.service";
@@ -127,7 +126,7 @@ export class PipelinesComponent implements OnInit {
checkCurrentSelectionStatus(status) {
var active = true;
- angular.forEach(this.pipelines, pipeline => {
+ this.pipelines.forEach(pipeline => {
if (!this.activeCategoryId || pipeline.pipelineCategories.some(pc => pc === this.activeCategoryId)) {
if (pipeline.running == status) {
active = false;
diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss
index f3ae3e1..15d42ab 100644
--- a/ui/src/scss/main.scss
+++ b/ui/src/scss/main.scss
@@ -23,11 +23,9 @@
@import '~bootstrap/dist/css/bootstrap.css';
@import '~slick-carousel/slick/slick-theme.css';
@import '~slick-carousel/slick/slick.css';
-@import '~datatables.net-dt/css/jquery.dataTables.css';
@import '~@fortawesome/fontawesome-free/css/all.css';
@import '~angular-notification-icons/dist/angular-notification-icons.min.css';
@import '~angular-ui-tree/dist/angular-ui-tree.min.css';
-@import '~angularjs-datetime-picker/angularjs-datetime-picker.css';
@import '~jsplumb/dist/css/jsplumb.css';
@import '~ng-prettyjson/dist/ng-prettyjson.min.css';
@import '~prismjs/themes/prism.css';