This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new b02146b70c chore: Move extensions installation view to settings (#2919)
b02146b70c is described below
commit b02146b70c4d0b0980a4341478d09102937c5493
Author: Dominik Riemer <[email protected]>
AuthorDate: Fri Jun 7 09:17:25 2024 +0200
chore: Move extensions installation view to settings (#2919)
* chore: Move extensions installation view to settings
* Fix navigation
* Fix cypress test
---
.../testVariousUserRoles.smoke.spec.ts | 2 +-
ui/deployment/dev/config.yml | 1 -
ui/deployment/modules.yml | 14 --
.../basic-nav-tabs/basic-nav-tabs.component.html | 3 +-
.../basic-nav-tabs/basic-nav-tabs.component.scss | 4 -
.../basic-nav-tabs/basic-nav-tabs.component.ts | 3 +
ui/src/app/add/add.component.html | 184 --------------------
ui/src/app/add/add.module.ts | 96 -----------
ui/src/app/add/add.routes.ts | 27 ---
ui/src/app/configuration/configuration-tabs.ts | 7 +-
ui/src/app/configuration/configuration.module.ts | 29 +++-
.../extensions-installation.component.html} | 0
.../extensions-installation.component.scss} | 0
.../extensions-installation.component.ts} | 10 +-
.../export/data-export-import.component.ts | 2 +-
.../endpoint-item/endpoint-item.component.html | 0
.../endpoint-item/endpoint-item.component.scss | 0
.../endpoint-item/endpoint-item.component.ts | 8 +-
.../extensions-installation.component.html | 191 +++++++++++++++++++++
.../extensions-installation.component.scss} | 2 -
.../extensions-installation.component.ts} | 30 ++--
.../extensions-installation.service.ts} | 2 +-
.../filter/order-by.pipe.ts | 0
.../pipeline-element-installation-status.pipe.ts | 0
.../filter/pipeline-element-name.pipe.ts | 0
.../filter/pipeline-element-type.pipe.ts | 0
.../label-configuration.component.ts | 11 +-
27 files changed, 268 insertions(+), 358 deletions(-)
diff --git a/ui/cypress/tests/userManagement/testVariousUserRoles.smoke.spec.ts
b/ui/cypress/tests/userManagement/testVariousUserRoles.smoke.spec.ts
index 7f0049b87f..98bc7d3ac2 100644
--- a/ui/cypress/tests/userManagement/testVariousUserRoles.smoke.spec.ts
+++ b/ui/cypress/tests/userManagement/testVariousUserRoles.smoke.spec.ts
@@ -40,7 +40,7 @@ for (var i = 0; i < testedRoles.length; i++) {
UserUtils.goToUserConfiguration();
cy.dataCy('navigation-icon', { timeout: 10000 }).should(
'have.length',
- 10,
+ 9,
);
cy.dataCy('user-accounts-table-row', { timeout: 10000 }).should(
diff --git a/ui/deployment/dev/config.yml b/ui/deployment/dev/config.yml
index 4edd9074ee..19dd9ae045 100644
--- a/ui/deployment/dev/config.yml
+++ b/ui/deployment/dev/config.yml
@@ -23,7 +23,6 @@ modules:
- spConnect
- spDashboard
- spDataExplorer
- - spAdd
- spAssets
- spFiles
- spConfiguration
diff --git a/ui/deployment/modules.yml b/ui/deployment/modules.yml
index 69e807f615..0250c7c8d6 100644
--- a/ui/deployment/modules.yml
+++ b/ui/deployment/modules.yml
@@ -69,20 +69,6 @@ spPipelines:
homeImage: '/assets/img/home/pipelines.png'
admin: False
pageNames: 'PageName.PIPELINE_OVERVIEW'
-spAdd:
- componentImport: False
- ng5_moduleName: 'AddModule'
- ng5_component: 'AddComponent'
- ng5_componentPath: './add/add.component'
- path: './add/add.module'
- link: 'add'
- url: '/add'
- title: 'Install Extensions'
- description: 'The extension installation module can be used to install
additional adapters, data streams, data processors, and sinks.'
- icon: 'cloud_download'
- homeImage: '/assets/img/home/add.png'
- admin: True
- pageNames: 'PageName.INSTALL_PIPELINE_ELEMENTS'
spConfiguration:
componentImport: False
ng5_moduleName: 'ConfigurationModule'
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.html
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.html
index abe940f2aa..68f9377e8f 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.html
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.html
@@ -57,7 +57,8 @@
</div>
<div
- class="fixed-height page-container-padding-inner"
+ class="fixed-height"
+ [ngStyle]="{ padding: padding }"
fxLayout="column"
fxFlex="100"
>
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.scss
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.scss
index 920102eb74..33e2b0fb14 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.scss
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.scss
@@ -16,10 +16,6 @@
*
*/
-.page-container-padding-inner {
- padding: 10px;
-}
-
.sp-bg-lightgray {
background-color: var(--color-bg-1);
}
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.ts
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.ts
index 9ee27ae361..248947db9d 100644
---
a/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.ts
+++
b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.ts
@@ -38,6 +38,9 @@ export class SpBasicNavTabsComponent {
@Input()
backLinkTarget: string[] = [];
+ @Input()
+ padding = '10px';
+
constructor(private router: Router) {}
navigateTo(spNavigationItem: SpNavigationItem) {
diff --git a/ui/src/app/add/add.component.html
b/ui/src/app/add/add.component.html
deleted file mode 100644
index afc4d74495..0000000000
--- a/ui/src/app/add/add.component.html
+++ /dev/null
@@ -1,184 +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.
- ~
- -->
-
-<sp-basic-view [showBackLink]="false" [padding]="true">
- <div
- nav
- fxFlex="100"
- fxLayoutAlign="start center"
- fxLayout="row"
- class="pl-10 form-field-small"
- >
- <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center">
- <button
- mat-button
- mat-raised-button
- color="accent"
- [disabled]="selectedEndpointItems.length === 0"
- (click)="installSelected()"
- class="mr-10"
- >
- <i class="material-icons">cloud_download</i>
- Install selected
- </button>
- <button
- mat-button
- mat-raised-button
- color="accent"
- [disabled]="selectedEndpointItems.length === 0"
- (click)="uninstallSelected()"
- class="mr-10"
- >
- <i class="material-icons">delete</i>
- Uninstall selected
- </button>
- <button
- mat-icon-button
- color="accent"
- class="mr-10"
- (click)="selectAll(true)"
- matTooltip="Select all"
- matTooltipPosition="above"
- >
- <i class="material-icons">queue</i>
- </button>
- <button
- mat-icon-button
- color="accent"
- class="mr-10"
- (click)="selectAll(false)"
- matTooltip="Select none"
- matTooltipPosition="above"
- >
- <i class="material-icons">filter_none</i>
- </button>
- </div>
- <span fxFlex></span>
- <div fxLayoutAlign="start center" fxLayout="row">
- <div class="form-field-small">
- <mat-form-field color="accent" appearance="outline">
- <mat-select
- [(value)]="selectedCategory"
- (selectionChange)="filterByCategory($event)"
- >
- <mat-option value="all"> All </mat-option>
- <mat-option value="ADAPTER"> Adapters </mat-option>
- <mat-option value="DATA_STREAM"> Streams </mat-option>
- <mat-option value="DATA_PROCESSOR">
- Processors
- </mat-option>
- <mat-option value="DATA_SINK"> Sinks </mat-option>
- </mat-select>
- </mat-form-field>
- </div>
- </div>
- <div class="ml-10" fxLayoutAlign="start center" fxLayout="row">
- <div class="form-field-small">
- <mat-form-field
- class="form-style"
- color="accent"
- appearance="outline"
- >
- <input
- matInput
- placeholder="Find Element"
- value=""
- [(ngModel)]="filterTerm"
- name="something"
- />
- <mat-icon matPrefix>search</mat-icon>
- </mat-form-field>
- </div>
- </div>
- <div fxLayoutAlign="start center" fxLayout="row" class="ml-10">
- <div class="form-field-small">
- <mat-form-field color="accent" appearance="outline">
- <mat-select [(value)]="selectedInstallationStatus">
- <mat-option [value]="'all'">
- Available & Installed
- </mat-option>
- <mat-option [value]="'installed'">
- Installed
- </mat-option>
- <mat-option [value]="'available'">
- Available
- </mat-option>
- </mat-select>
- </mat-form-field>
- </div>
- </div>
- <div fxLayoutAlign="start center" fxLayout="row" class="ml-10">
- <button
- mat-icon-button
- color="accent"
- (click)="getEndpointItems()"
- matTooltip="Reload items"
- matTooltipPosition="above"
- >
- <mat-icon>refresh</mat-icon>
- </button>
- </div>
- </div>
- <div fxLayout="column" fxFlex="100">
- <div
- fxFlex="100"
- fxLayout="column"
- fxLayoutAlign="start start"
- *ngIf="endpointItemsLoadingComplete"
- >
- <div fxLayoutAlign="start start" fxLayout="column">
- <sp-basic-header-title-component
- title="Available Extensions"
- ></sp-basic-header-title-component>
- </div>
- <div fxLayout="row wrap" class="w-100">
- <sp-endpoint-item
- fxFlex="33"
- [itemSelected]="endpointItem.selected"
- [item]="endpointItem"
- (triggerInstallation)="triggerInstallation($event)"
- *ngFor="
- let endpointItem of endpointItems
- | pipelineElementTypeFilter: selectedTab
- | pipelineElementNameFilter: filterTerm
- | pipelineElementInstallationStatusFilter
- : selectedInstallationStatus
- | orderBy: 'asc' : 'name'
- "
- class="p-15"
- (click)="toggleSelected(endpointItem)"
- ></sp-endpoint-item>
- </div>
- </div>
- <div
- fxFlex="100"
- fxLayout="row"
- fxLayoutAlign="center center"
- *ngIf="!endpointItemsLoadingComplete"
- >
- <mat-spinner
- [mode]="'indeterminate'"
- [diameter]="20"
- color="accent"
- ></mat-spinner>
- <h4>
- Searching for available extensions, please wait...
- </h4>
- </div>
- </div>
-</sp-basic-view>
diff --git a/ui/src/app/add/add.module.ts b/ui/src/app/add/add.module.ts
deleted file mode 100644
index 4b9ad88c16..0000000000
--- a/ui/src/app/add/add.module.ts
+++ /dev/null
@@ -1,96 +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.
- *
- */
-
-import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@ngbracket/ngx-layout';
-import { FormsModule } from '@angular/forms';
-import { MatTabsModule } from '@angular/material/tabs';
-import { CommonModule } from '@angular/common';
-import { AddComponent } from './add.component';
-import { CoreUiModule } from '../core-ui/core-ui.module';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { PipelineElementTypeFilter } from
'./filter/pipeline-element-type.pipe';
-import { EndpointItemComponent } from
'./components/endpoint-item/endpoint-item.component';
-import { OrderByPipe } from './filter/order-by.pipe';
-import { EndpointInstallationComponent } from
'./dialogs/endpoint-installation/endpoint-installation.component';
-import { PipelineElementNameFilter } from
'./filter/pipeline-element-name.pipe';
-import { PipelineElementInstallationStatusFilter } from
'./filter/pipeline-element-installation-status.pipe';
-import { RouterModule } from '@angular/router';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatOptionModule } from '@angular/material/core';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatIconModule } from '@angular/material/icon';
-import { MatSelectModule } from '@angular/material/select';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { SharedUiModule } from '@streampipes/shared-ui';
-
-@NgModule({
- imports: [
- CommonModule,
- CoreUiModule,
- FormsModule,
- FlexLayoutModule,
- MatButtonModule,
- MatCheckboxModule,
- MatDividerModule,
- MatFormFieldModule,
- MatInputModule,
- MatMenuModule,
- MatOptionModule,
- MatIconModule,
- MatSelectModule,
- MatTooltipModule,
- MatProgressSpinnerModule,
- MatTabsModule,
- RouterModule.forChild([
- {
- path: '',
- children: [
- {
- path: '',
- component: AddComponent,
- },
- ],
- },
- ]),
- SharedUiModule,
- ],
- declarations: [
- AddComponent,
- EndpointInstallationComponent,
- EndpointItemComponent,
- OrderByPipe,
- PipelineElementNameFilter,
- PipelineElementInstallationStatusFilter,
- PipelineElementTypeFilter,
- ],
- providers: [
- OrderByPipe,
- PipelineElementInstallationStatusFilter,
- PipelineElementNameFilter,
- PipelineElementTypeFilter,
- ],
- exports: [AddComponent],
-})
-export class AddModule {
- constructor() {}
-}
diff --git a/ui/src/app/add/add.routes.ts b/ui/src/app/add/add.routes.ts
deleted file mode 100644
index dc74251230..0000000000
--- a/ui/src/app/add/add.routes.ts
+++ /dev/null
@@ -1,27 +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.
- *
- */
-
-import { SpBreadcrumbItem } from '@streampipes/shared-ui';
-
-export class SpAddRoutes {
- static ADD_BASE_LINK = 'add';
- static BASE: SpBreadcrumbItem = {
- label: 'Install Extensions',
- link: [SpAddRoutes.ADD_BASE_LINK],
- };
-}
diff --git a/ui/src/app/configuration/configuration-tabs.ts
b/ui/src/app/configuration/configuration-tabs.ts
index 6977327b35..f897f212a5 100644
--- a/ui/src/app/configuration/configuration-tabs.ts
+++ b/ui/src/app/configuration/configuration-tabs.ts
@@ -36,9 +36,14 @@ export class SpConfigurationTabs {
itemTitle: 'Export/Import',
itemLink: ['configuration', 'export'],
},
+ {
+ itemId: 'extensions-installation',
+ itemTitle: 'Extensions',
+ itemLink: ['configuration', 'extensions-installation'],
+ },
{
itemId: 'extensions-services',
- itemTitle: 'Extensions Services',
+ itemTitle: 'Extension Services',
itemLink: ['configuration', 'extensions-services'],
},
{
diff --git a/ui/src/app/configuration/configuration.module.ts
b/ui/src/app/configuration/configuration.module.ts
index e733d545e6..4d61b1726f 100644
--- a/ui/src/app/configuration/configuration.module.ts
+++ b/ui/src/app/configuration/configuration.module.ts
@@ -26,7 +26,6 @@ import { MatTooltipModule } from '@angular/material/tooltip';
import { FlexLayoutModule } from '@ngbracket/ngx-layout';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { ConfigurationService } from './shared/configuration.service';
import { MessagingConfigurationComponent } from
'./messaging-configuration/messaging-configuration.component';
import { DragDropModule } from '@angular/cdk/drag-drop';
@@ -71,6 +70,14 @@ import { MatPaginatorModule } from
'@angular/material/paginator';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { PipelineElementTypeFilter } from
'./extensions-installation/filter/pipeline-element-type.pipe';
+import { PipelineElementNameFilter } from
'./extensions-installation/filter/pipeline-element-name.pipe';
+import { PipelineElementInstallationStatusFilter } from
'./extensions-installation/filter/pipeline-element-installation-status.pipe';
+import { OrderByPipe } from './extensions-installation/filter/order-by.pipe';
+import { SpExtensionsInstallationDialogComponent } from
'./dialog/extensions-installation/extensions-installation.component';
+import { EndpointItemComponent } from
'./extensions-installation/endpoint-item/endpoint-item.component';
+import { SpExtensionsInstallationComponent } from
'./extensions-installation/extensions-installation.component';
+import { MatMenuModule } from '@angular/material/menu';
@NgModule({
imports: [
@@ -84,6 +91,7 @@ import { MatButtonToggleModule } from
'@angular/material/button-toggle';
MatInputModule,
MatCheckboxModule,
MatDividerModule,
+ MatMenuModule,
MatTooltipModule,
MatTableModule,
MatPaginatorModule,
@@ -127,6 +135,10 @@ import { MatButtonToggleModule } from
'@angular/material/button-toggle';
path: 'messaging',
component: MessagingConfigurationComponent,
},
+ {
+ path: 'extensions-installation',
+ component: SpExtensionsInstallationComponent,
+ },
{
path: 'extensions-services',
component: ExtensionsServiceManagementComponent,
@@ -172,7 +184,20 @@ import { MatButtonToggleModule } from
'@angular/material/button-toggle';
SpMessagingBrokerConfigComponent,
SpRegisteredExtensionsServiceComponent,
SpExtensionsServiceConfigurationComponent,
+
+ SpExtensionsInstallationComponent,
+ SpExtensionsInstallationDialogComponent,
+ EndpointItemComponent,
+ OrderByPipe,
+ PipelineElementNameFilter,
+ PipelineElementInstallationStatusFilter,
+ PipelineElementTypeFilter,
+ ],
+ providers: [
+ OrderByPipe,
+ PipelineElementInstallationStatusFilter,
+ PipelineElementNameFilter,
+ PipelineElementTypeFilter,
],
- providers: [],
})
export class ConfigurationModule {}
diff --git
a/ui/src/app/add/dialogs/endpoint-installation/endpoint-installation.component.html
b/ui/src/app/configuration/dialog/extensions-installation/extensions-installation.component.html
similarity index 100%
rename from
ui/src/app/add/dialogs/endpoint-installation/endpoint-installation.component.html
rename to
ui/src/app/configuration/dialog/extensions-installation/extensions-installation.component.html
diff --git
a/ui/src/app/add/dialogs/endpoint-installation/endpoint-installation.component.scss
b/ui/src/app/configuration/dialog/extensions-installation/extensions-installation.component.scss
similarity index 100%
rename from
ui/src/app/add/dialogs/endpoint-installation/endpoint-installation.component.scss
rename to
ui/src/app/configuration/dialog/extensions-installation/extensions-installation.component.scss
diff --git
a/ui/src/app/add/dialogs/endpoint-installation/endpoint-installation.component.ts
b/ui/src/app/configuration/dialog/extensions-installation/extensions-installation.component.ts
similarity index 94%
rename from
ui/src/app/add/dialogs/endpoint-installation/endpoint-installation.component.ts
rename to
ui/src/app/configuration/dialog/extensions-installation/extensions-installation.component.ts
index bae5ca2333..38474be3f1 100644
---
a/ui/src/app/add/dialogs/endpoint-installation/endpoint-installation.component.ts
+++
b/ui/src/app/configuration/dialog/extensions-installation/extensions-installation.component.ts
@@ -24,11 +24,11 @@ import {
} from '@streampipes/platform-services';
@Component({
- selector: 'sp-endpoint-installation-dialog',
- templateUrl: './endpoint-installation.component.html',
- styleUrls: ['./endpoint-installation.component.scss'],
+ selector: 'sp-extensions-installation-dialog',
+ templateUrl: './extensions-installation.component.html',
+ styleUrls: ['./extensions-installation.component.scss'],
})
-export class EndpointInstallationComponent {
+export class SpExtensionsInstallationDialogComponent {
endpointItems: ExtensionItemDescription[];
@Input()
@@ -48,7 +48,7 @@ export class EndpointInstallationComponent {
installAsPublicElement = true;
constructor(
- private dialogRef: DialogRef<EndpointInstallationComponent>,
+ private dialogRef: DialogRef<SpExtensionsInstallationDialogComponent>,
private extensionInstallationService: ExtensionInstallationService,
) {
this.installationStatus = [];
diff --git a/ui/src/app/configuration/export/data-export-import.component.ts
b/ui/src/app/configuration/export/data-export-import.component.ts
index 37f3de4a85..a8dd7191ec 100644
--- a/ui/src/app/configuration/export/data-export-import.component.ts
+++ b/ui/src/app/configuration/export/data-export-import.component.ts
@@ -52,7 +52,7 @@ export class SpDataExportImportComponent implements OnInit {
ngOnInit(): void {
this.breadcrumbService.updateBreadcrumb([
SpConfigurationRoutes.BASE,
- { label: SpConfigurationTabs.getTabs()[3].itemTitle },
+ { label: SpConfigurationTabs.getTabs()[2].itemTitle },
]);
this.loadAssets();
}
diff --git
a/ui/src/app/add/components/endpoint-item/endpoint-item.component.html
b/ui/src/app/configuration/extensions-installation/endpoint-item/endpoint-item.component.html
similarity index 100%
rename from ui/src/app/add/components/endpoint-item/endpoint-item.component.html
rename to
ui/src/app/configuration/extensions-installation/endpoint-item/endpoint-item.component.html
diff --git
a/ui/src/app/add/components/endpoint-item/endpoint-item.component.scss
b/ui/src/app/configuration/extensions-installation/endpoint-item/endpoint-item.component.scss
similarity index 100%
rename from ui/src/app/add/components/endpoint-item/endpoint-item.component.scss
rename to
ui/src/app/configuration/extensions-installation/endpoint-item/endpoint-item.component.scss
diff --git a/ui/src/app/add/components/endpoint-item/endpoint-item.component.ts
b/ui/src/app/configuration/extensions-installation/endpoint-item/endpoint-item.component.ts
similarity index 96%
rename from ui/src/app/add/components/endpoint-item/endpoint-item.component.ts
rename to
ui/src/app/configuration/extensions-installation/endpoint-item/endpoint-item.component.ts
index 690306bfb1..8d32c296ee 100644
--- a/ui/src/app/add/components/endpoint-item/endpoint-item.component.ts
+++
b/ui/src/app/configuration/extensions-installation/endpoint-item/endpoint-item.component.ts
@@ -18,16 +18,16 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
-import { AddService } from '../../services/add.service';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import {
- ExtensionItemInstallationRequest,
ExtensionInstallationService,
ExtensionItemDescription,
+ ExtensionItemInstallationRequest,
} from '@streampipes/platform-services';
import { AppConstants } from '../../../services/app.constants';
import { ObjectPermissionDialogComponent } from
'../../../core-ui/object-permission-dialog/object-permission-dialog.component';
-import { PanelType, DialogService } from '@streampipes/shared-ui';
+import { DialogService, PanelType } from '@streampipes/shared-ui';
+import { ExtensionsInstallationService } from
'../extensions-installation.service';
@Component({
selector: 'sp-endpoint-item',
@@ -61,7 +61,7 @@ export class EndpointItemComponent implements OnInit {
constructor(
private snackBar: MatSnackBar,
private extensionInstallationService: ExtensionInstallationService,
- private addService: AddService,
+ private addService: ExtensionsInstallationService,
private sanitizer: DomSanitizer,
public appConstants: AppConstants,
private dialogService: DialogService,
diff --git
a/ui/src/app/configuration/extensions-installation/extensions-installation.component.html
b/ui/src/app/configuration/extensions-installation/extensions-installation.component.html
new file mode 100644
index 0000000000..e83507b435
--- /dev/null
+++
b/ui/src/app/configuration/extensions-installation/extensions-installation.component.html
@@ -0,0 +1,191 @@
+<!--
+ ~ 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.
+ ~
+ -->
+
+<sp-basic-nav-tabs
+ [spNavigationItems]="tabs"
+ [activeLink]="'extensions-installation'"
+ padding="0"
+>
+ <div class="page-container-nav">
+ <div
+ fxFlex="100"
+ fxLayoutAlign="start center"
+ fxLayout="row"
+ class="pl-10 form-field-small"
+ >
+ <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center">
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ [disabled]="selectedEndpointItems.length === 0"
+ (click)="installSelected()"
+ class="mr-10"
+ >
+ <i class="material-icons">cloud_download</i>
+ Install selected
+ </button>
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ [disabled]="selectedEndpointItems.length === 0"
+ (click)="uninstallSelected()"
+ class="mr-10"
+ >
+ <i class="material-icons">delete</i>
+ Uninstall selected
+ </button>
+ <button
+ mat-icon-button
+ color="accent"
+ class="mr-10"
+ (click)="selectAll(true)"
+ matTooltip="Select all"
+ matTooltipPosition="above"
+ >
+ <i class="material-icons">queue</i>
+ </button>
+ <button
+ mat-icon-button
+ color="accent"
+ class="mr-10"
+ (click)="selectAll(false)"
+ matTooltip="Select none"
+ matTooltipPosition="above"
+ >
+ <i class="material-icons">filter_none</i>
+ </button>
+ </div>
+ <span fxFlex></span>
+ <div fxLayoutAlign="start center" fxLayout="row">
+ <div class="form-field-small">
+ <mat-form-field color="accent" appearance="outline">
+ <mat-select
+ [(value)]="selectedCategory"
+ (selectionChange)="filterByCategory($event)"
+ >
+ <mat-option value="all"> All</mat-option>
+ <mat-option value="ADAPTER"> Adapters</mat-option>
+ <mat-option value="DATA_STREAM">
+ Streams</mat-option
+ >
+ <mat-option value="DATA_PROCESSOR">
+ Processors
+ </mat-option>
+ <mat-option value="DATA_SINK"> Sinks</mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ </div>
+ <div class="ml-10" fxLayoutAlign="start center" fxLayout="row">
+ <div class="form-field-small">
+ <mat-form-field
+ class="form-style"
+ color="accent"
+ appearance="outline"
+ >
+ <input
+ matInput
+ placeholder="Find Element"
+ value=""
+ [(ngModel)]="filterTerm"
+ name="something"
+ />
+ <mat-icon matPrefix>search</mat-icon>
+ </mat-form-field>
+ </div>
+ </div>
+ <div fxLayoutAlign="start center" fxLayout="row" class="ml-10">
+ <div class="form-field-small">
+ <mat-form-field color="accent" appearance="outline">
+ <mat-select [(value)]="selectedInstallationStatus">
+ <mat-option [value]="'all'">
+ Available & Installed
+ </mat-option>
+ <mat-option [value]="'installed'">
+ Installed
+ </mat-option>
+ <mat-option [value]="'available'">
+ Available
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ </div>
+ <div fxLayoutAlign="start center" fxLayout="row" class="ml-10">
+ <button
+ mat-icon-button
+ color="accent"
+ (click)="getEndpointItems()"
+ matTooltip="Reload items"
+ matTooltipPosition="above"
+ >
+ <mat-icon>refresh</mat-icon>
+ </button>
+ </div>
+ </div>
+ </div>
+ <div fxLayout="column" fxFlex="100" class="p-10">
+ <div
+ fxFlex="100"
+ fxLayout="column"
+ fxLayoutAlign="start start"
+ *ngIf="endpointItemsLoadingComplete"
+ >
+ <div fxLayoutAlign="start start" fxLayout="column">
+ <sp-basic-header-title-component
+ title="Available Extensions"
+ ></sp-basic-header-title-component>
+ </div>
+ <div fxLayout="row wrap" class="w-100">
+ <sp-endpoint-item
+ fxFlex="33"
+ [itemSelected]="endpointItem.selected"
+ [item]="endpointItem"
+ (triggerInstallation)="triggerInstallation($event)"
+ *ngFor="
+ let endpointItem of endpointItems
+ | pipelineElementTypeFilter: selectedTab
+ | pipelineElementNameFilter: filterTerm
+ | pipelineElementInstallationStatusFilter
+ : selectedInstallationStatus
+ | orderBy: 'asc' : 'name'
+ "
+ class="p-15"
+ (click)="toggleSelected(endpointItem)"
+ ></sp-endpoint-item>
+ </div>
+ </div>
+ <div
+ fxFlex="100"
+ fxLayout="row"
+ fxLayoutAlign="center center"
+ *ngIf="!endpointItemsLoadingComplete"
+ >
+ <mat-spinner
+ [mode]="'indeterminate'"
+ [diameter]="20"
+ color="accent"
+ ></mat-spinner>
+ <h4>
+ Searching for available extensions, please wait...
+ </h4>
+ </div>
+ </div>
+</sp-basic-nav-tabs>
diff --git a/ui/src/app/add/add.component.scss
b/ui/src/app/configuration/extensions-installation/extensions-installation.component.scss
similarity index 97%
rename from ui/src/app/add/add.component.scss
rename to
ui/src/app/configuration/extensions-installation/extensions-installation.component.scss
index 0b12aa99be..94e9384265 100644
--- a/ui/src/app/add/add.component.scss
+++
b/ui/src/app/configuration/extensions-installation/extensions-installation.component.scss
@@ -16,8 +16,6 @@
*
*/
-@import '../../scss/variables';
-
.page-container-padding-inner {
margin: 20px;
}
diff --git a/ui/src/app/add/add.component.ts
b/ui/src/app/configuration/extensions-installation/extensions-installation.component.ts
similarity index 84%
rename from ui/src/app/add/add.component.ts
rename to
ui/src/app/configuration/extensions-installation/extensions-installation.component.ts
index 37fe2ba0ee..11f12ef245 100644
--- a/ui/src/app/add/add.component.ts
+++
b/ui/src/app/configuration/extensions-installation/extensions-installation.component.ts
@@ -17,24 +17,27 @@
*/
import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { AddService } from './services/add.service';
import {
DialogRef,
DialogService,
PanelType,
SpBreadcrumbService,
} from '@streampipes/shared-ui';
-import { EndpointInstallationComponent } from
'./dialogs/endpoint-installation/endpoint-installation.component';
-import { SpAddRoutes } from './add.routes';
import { ExtensionItemDescription } from '@streampipes/platform-services';
import { MatSelectChange } from '@angular/material/select';
+import { ExtensionsInstallationService } from
'./extensions-installation.service';
+import { SpExtensionsInstallationDialogComponent } from
'../dialog/extensions-installation/extensions-installation.component';
+import { SpConfigurationRoutes } from '../configuration.routes';
+import { SpConfigurationTabs } from '../configuration-tabs';
@Component({
- selector: 'sp-add',
- templateUrl: './add.component.html',
- styleUrls: ['./add.component.scss'],
+ selector: 'sp-extensions-installation',
+ templateUrl: './extensions-installation.component.html',
+ styleUrls: ['./extensions-installation.component.scss'],
})
-export class AddComponent implements OnInit {
+export class SpExtensionsInstallationComponent implements OnInit {
+ tabs = SpConfigurationTabs.getTabs();
+
activeLink: string;
results: any[];
@@ -50,7 +53,7 @@ export class AddComponent implements OnInit {
_selectedInstallationStatus = 'all';
constructor(
- private addService: AddService,
+ private addService: ExtensionsInstallationService,
private dialogService: DialogService,
private changeDetectorRef: ChangeDetectorRef,
private breadcrumbService: SpBreadcrumbService,
@@ -62,9 +65,10 @@ export class AddComponent implements OnInit {
}
ngOnInit() {
- this.breadcrumbService.updateBreadcrumb(
- this.breadcrumbService.getRootLink(SpAddRoutes.BASE),
- );
+ this.breadcrumbService.updateBreadcrumb([
+ SpConfigurationRoutes.BASE,
+ { label: SpConfigurationTabs.getTabs()[3].itemTitle },
+ ]);
this.getEndpointItems();
this.selectedTab = 'all';
}
@@ -152,8 +156,8 @@ export class AddComponent implements OnInit {
}
installElements(endpointItems, install) {
- const dialogRef: DialogRef<EndpointInstallationComponent> =
- this.dialogService.open(EndpointInstallationComponent, {
+ const dialogRef: DialogRef<SpExtensionsInstallationDialogComponent> =
+ this.dialogService.open(SpExtensionsInstallationDialogComponent, {
panelType: PanelType.STANDARD_PANEL,
title: 'Installation',
width: '70vw',
diff --git a/ui/src/app/add/services/add.service.ts
b/ui/src/app/configuration/extensions-installation/extensions-installation.service.ts
similarity index 97%
rename from ui/src/app/add/services/add.service.ts
rename to
ui/src/app/configuration/extensions-installation/extensions-installation.service.ts
index 4170d0451e..4e0109a42f 100644
--- a/ui/src/app/add/services/add.service.ts
+++
b/ui/src/app/configuration/extensions-installation/extensions-installation.service.ts
@@ -26,7 +26,7 @@ import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({ providedIn: 'root' })
-export class AddService {
+export class ExtensionsInstallationService {
constructor(
private http: HttpClient,
private platformServicesCommons: PlatformServicesCommons,
diff --git a/ui/src/app/add/filter/order-by.pipe.ts
b/ui/src/app/configuration/extensions-installation/filter/order-by.pipe.ts
similarity index 100%
rename from ui/src/app/add/filter/order-by.pipe.ts
rename to
ui/src/app/configuration/extensions-installation/filter/order-by.pipe.ts
diff --git a/ui/src/app/add/filter/pipeline-element-installation-status.pipe.ts
b/ui/src/app/configuration/extensions-installation/filter/pipeline-element-installation-status.pipe.ts
similarity index 100%
rename from ui/src/app/add/filter/pipeline-element-installation-status.pipe.ts
rename to
ui/src/app/configuration/extensions-installation/filter/pipeline-element-installation-status.pipe.ts
diff --git a/ui/src/app/add/filter/pipeline-element-name.pipe.ts
b/ui/src/app/configuration/extensions-installation/filter/pipeline-element-name.pipe.ts
similarity index 100%
rename from ui/src/app/add/filter/pipeline-element-name.pipe.ts
rename to
ui/src/app/configuration/extensions-installation/filter/pipeline-element-name.pipe.ts
diff --git a/ui/src/app/add/filter/pipeline-element-type.pipe.ts
b/ui/src/app/configuration/extensions-installation/filter/pipeline-element-type.pipe.ts
similarity index 100%
rename from ui/src/app/add/filter/pipeline-element-type.pipe.ts
rename to
ui/src/app/configuration/extensions-installation/filter/pipeline-element-type.pipe.ts
diff --git
a/ui/src/app/configuration/label-configuration/label-configuration.component.ts
b/ui/src/app/configuration/label-configuration/label-configuration.component.ts
index 42b3b08c2c..c9a736d848 100644
---
a/ui/src/app/configuration/label-configuration/label-configuration.component.ts
+++
b/ui/src/app/configuration/label-configuration/label-configuration.component.ts
@@ -19,6 +19,8 @@
import { Component, OnInit } from '@angular/core';
import { SpConfigurationTabs } from '../configuration-tabs';
import { LabelsService, SpLabel } from '@streampipes/platform-services';
+import { SpConfigurationRoutes } from '../configuration.routes';
+import { SpBreadcrumbService } from '@streampipes/shared-ui';
@Component({
selector: 'sp-label-configuration',
@@ -33,9 +35,16 @@ export class SpLabelConfigurationComponent implements OnInit
{
editedLabels: string[] = [];
- constructor(private labelsService: LabelsService) {}
+ constructor(
+ private breadcrumbService: SpBreadcrumbService,
+ private labelsService: LabelsService,
+ ) {}
ngOnInit(): void {
+ this.breadcrumbService.updateBreadcrumb([
+ SpConfigurationRoutes.BASE,
+ { label: SpConfigurationTabs.getTabs()[4].itemTitle },
+ ]);
this.reloadLabels();
}
