This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch move-extensions-installation-to-settings in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 7a931bc84657f1096f5bbcf0673b7eaeb5e9c56e Author: Dominik Riemer <[email protected]> AuthorDate: Thu Jun 6 22:29:01 2024 +0200 chore: Move extensions installation view to settings --- 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 +- .../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 24 files changed, 256 insertions(+), 355 deletions(-) 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/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
