This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch 2979-add-documentation-to-adapter-overview-view
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to
refs/heads/2979-add-documentation-to-adapter-overview-view by this push:
new da6ae55029 feat(#2979): Add documentation buttons to adapter view
da6ae55029 is described below
commit da6ae55029416c536bbb5fd17a53c83675433bdd
Author: Dominik Riemer <[email protected]>
AuthorDate: Sun Jun 30 20:53:21 2024 +0200
feat(#2979): Add documentation buttons to adapter view
---
.../adapter-configuration.component.html | 15 +++++++-
.../adapter-configuration.component.ts | 19 +++++++---
.../adapter-description.component.html | 41 +++++++++++++++++-----
.../adapter-description.component.scss | 21 +++--------
.../adapter-description.component.ts | 34 ++++++++----------
.../data-marketplace.component.html | 3 +-
ui/src/app/connect/connect.module.ts | 2 ++
.../adapter-documentation-dialog.component.html} | 25 +++++--------
.../adapter-documentation-dialog.component.ts | 33 +++++++++++++++++
9 files changed, 125 insertions(+), 68 deletions(-)
diff --git
a/ui/src/app/connect/components/adapter-configuration/adapter-configuration.component.html
b/ui/src/app/connect/components/adapter-configuration/adapter-configuration.component.html
index e1380b45f2..1f5593d18c 100644
---
a/ui/src/app/connect/components/adapter-configuration/adapter-configuration.component.html
+++
b/ui/src/app/connect/components/adapter-configuration/adapter-configuration.component.html
@@ -18,7 +18,20 @@
<sp-basic-view [padding]="true" [showBackLink]="false">
<div nav fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
- <button mat-icon-button (click)="removeSelection()"
matTooltip="Cancel">
+ <button
+ mat-icon-button
+ color="accent"
+ (click)="openDocumentation()"
+ matTooltip="Show documentation"
+ >
+ <i class="material-icons">menu_book</i>
+ </button>
+ <button
+ mat-icon-button
+ color="accent"
+ (click)="removeSelection()"
+ matTooltip="Cancel"
+ >
<i class="material-icons">close</i>
</button>
</div>
diff --git
a/ui/src/app/connect/components/adapter-configuration/adapter-configuration.component.ts
b/ui/src/app/connect/components/adapter-configuration/adapter-configuration.component.ts
index 0df7523652..6b1ca90a7f 100644
---
a/ui/src/app/connect/components/adapter-configuration/adapter-configuration.component.ts
+++
b/ui/src/app/connect/components/adapter-configuration/adapter-configuration.component.ts
@@ -19,14 +19,13 @@
import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { MatStepper } from '@angular/material/stepper';
-import {
- AdapterDescription,
- EventSchema,
-} from '@streampipes/platform-services';
+import { AdapterDescription } from '@streampipes/platform-services';
import { ShepherdService } from '../../../services/tour/shepherd.service';
import { EventSchemaComponent } from
'./schema-editor/event-schema/event-schema.component';
import { TransformationRuleService } from
'../../services/transformation-rule.service';
import { Router } from '@angular/router';
+import { DialogService, PanelType } from '@streampipes/shared-ui';
+import { SpAdapterDocumentationDialogComponent } from
'../../dialog/adapter-documentation/adapter-documentation-dialog.component';
@Component({
selector: 'sp-adapter-configuration',
@@ -47,6 +46,7 @@ export class AdapterConfigurationComponent implements OnInit {
private eventSchemaComponent: EventSchemaComponent;
constructor(
+ private dialogService: DialogService,
private transformationRuleService: TransformationRuleService,
private shepherdService: ShepherdService,
private _formBuilder: UntypedFormBuilder,
@@ -107,4 +107,15 @@ export class AdapterConfigurationComponent implements
OnInit {
@ViewChild('stepper') set stepperComponent(stepperComponent: MatStepper) {
this.myStepper = stepperComponent;
}
+
+ openDocumentation() {
+ this.dialogService.open(SpAdapterDocumentationDialogComponent, {
+ panelType: PanelType.SLIDE_IN_PANEL,
+ title: 'Documentation',
+ width: '50vw',
+ data: {
+ appId: this.adapter.appId,
+ },
+ });
+ }
}
diff --git
a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.html
b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.html
index 66639d2d09..9871836153 100644
---
a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.html
+++
b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.html
@@ -16,22 +16,45 @@
~
-->
-<div [className]="className" fxFlex="100" fxLayout="column">
+<div class="adapter-description-box" fxFlex="100" fxLayout="column">
<div fxLayout="column">
<div
- class="type"
+ class="type mt-10"
fxLayout="row"
fxLayoutAlign="start start"
fxFlex="100"
- ></div>
- <div class="adapter-icon large-icon">
- <img *ngIf="iconUrl" [src]="iconUrl" class="icon" />
+ >
+ <div class="adapter-icon large-icon">
+ <img *ngIf="iconUrl" [src]="iconUrl" class="icon" />
+ </div>
+ <div class="ml-5" fxFlex fxLayoutAlign="end start">
+ <button
+ mat-icon-button
+ color="accent"
+ (click)="openDocumentation()"
+ matTooltip="Show documentation"
+ >
+ <mat-icon>menu_book</mat-icon>
+ </button>
+ </div>
</div>
- <h3 class="ml-10">{{ adapter.name }}</h3>
</div>
- <div fxLayout="row">
- <div fxFlex="70" class="ml-10 description" fxLayoutAlign="start start">
- <p [innerHTML]="adapter.description"></p>
+ <div fxFlex fxLayout="row" class="ml-10" fxLayoutGap="20px">
+ <div fxFlex fxLayout="column">
+ <h3>{{ adapter.name }}</h3>
+ <div class="description" fxLayoutAlign="start start">
+ <p [innerHTML]="adapter.description"></p>
+ </div>
+ </div>
+ <div fxLayoutAlign="end end">
+ <button
+ mat-mini-fab
+ matTooltip="Create adapter"
+ aria-label="Create adapter"
+ (click)="createAdapterEmitter.emit(adapter.appId)"
+ >
+ <mat-icon>add</mat-icon>
+ </button>
</div>
</div>
</div>
diff --git
a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.scss
b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.scss
index 95393242b8..8440b7be5d 100644
---
a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.scss
+++
b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.scss
@@ -16,31 +16,18 @@
*
*/
-.adapter-box {
- height: 100%;
- box-shadow: 1px 1px 2px #555;
- border: 1px solid gray;
- background: var(--color-bg-dialog);
- cursor: pointer;
- padding: 10px;
- opacity: 0.7;
-}
.adapter-description-box {
height: 100%;
- box-shadow: 1px 1px 2px #555;
+ min-height: 260px;
+ //box-shadow: 1px 1px 2px #555;
border: 1px solid gray;
+ border-bottom: 5px solid gray;
background: var(--color-bg-dialog);
- cursor: pointer;
padding: 10px;
- opacity: 0.7;
-}
-
-.adapter-box:hover {
- opacity: 1;
}
.adapter-description-box:hover {
- opacity: 1;
+ border-bottom: 5px solid var(--color-accent);
}
.edit {
diff --git
a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.ts
b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.ts
index baf3e9fb6d..5885ab08db 100644
---
a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.ts
+++
b/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.ts
@@ -17,10 +17,11 @@
*/
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
import { AdapterDescription } from '@streampipes/platform-services';
import { RestApi } from '../../../../services/rest-api.service';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { DialogService, PanelType } from '@streampipes/shared-ui';
+import { SpAdapterDocumentationDialogComponent } from
'../../../dialog/adapter-documentation/adapter-documentation-dialog.component';
@Component({
selector: 'sp-adapter-description',
@@ -32,13 +33,8 @@ export class AdapterDescriptionComponent implements OnInit {
adapter: AdapterDescription;
@Output()
- updateAdapterEmitter: EventEmitter<void> = new EventEmitter<void>();
+ createAdapterEmitter: EventEmitter<string> = new EventEmitter<string>();
- @Output()
- createTemplateEmitter: EventEmitter<AdapterDescription> =
- new EventEmitter<AdapterDescription>();
-
- className = '';
isRunningAdapter = false;
adapterLabel: string;
iconUrl: SafeUrl;
@@ -46,7 +42,7 @@ export class AdapterDescriptionComponent implements OnInit {
constructor(
private restApi: RestApi,
private sanitizer: DomSanitizer,
- public dialog: MatDialog,
+ private dialogService: DialogService,
) {}
ngOnInit() {
@@ -57,23 +53,23 @@ export class AdapterDescriptionComponent implements OnInit {
this.adapter.elementId !== undefined &&
!(this.adapter as any).isTemplate;
this.adapterLabel = this.adapter.name.split(' ').join('_');
- this.className = this.getClassName();
this.iconUrl = this.sanitizer.bypassSecurityTrustUrl(
this.makeAssetIconUrl(),
);
}
- getClassName() {
- let className = this.isRunningAdapter
- ? 'adapter-box'
- : 'adapter-description-box';
-
- className += ' adapter-box-stream';
-
- return className;
- }
-
makeAssetIconUrl() {
return this.restApi.getAssetUrl(this.adapter.appId) + '/icon';
}
+
+ openDocumentation(): void {
+ this.dialogService.open(SpAdapterDocumentationDialogComponent, {
+ panelType: PanelType.SLIDE_IN_PANEL,
+ title: 'Documentation',
+ width: '50vw',
+ data: {
+ appId: this.adapter.appId,
+ },
+ });
+ }
}
diff --git
a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
index d23a466613..274c7917df 100644
---
a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
+++
b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
@@ -78,8 +78,7 @@
}}"
class="adapter-description"
fxFlex="33"
- (updateAdapterEmitter)="getAdapterDescriptions()"
- (click)="selectAdapter(adapterDescription.appId)"
+ (createAdapterEmitter)="selectAdapter($event)"
*ngFor="
let adapterDescription of adapterDescriptions
| adapterFilter: currentFilter
diff --git a/ui/src/app/connect/connect.module.ts
b/ui/src/app/connect/connect.module.ts
index d672dca912..509ad2b83d 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -102,6 +102,7 @@ import { MatProgressBarModule } from
'@angular/material/progress-bar';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { AdapterStatusLightComponent } from
'./components/existing-adapters/adapter-status-light/adapter-status-light.component';
import { SpAdapterDeploymentSettingsComponent } from
'./components/adapter-configuration/adapter-settings/adapter-deployment-settings/adapter-deployment-settings.component';
+import { SpAdapterDocumentationDialogComponent } from
'./dialog/adapter-documentation/adapter-documentation-dialog.component';
@NgModule({
imports: [
@@ -210,6 +211,7 @@ import { SpAdapterDeploymentSettingsComponent } from
'./components/adapter-confi
SpAdapterDeploymentSettingsComponent,
SpAdapterDetailsLogsComponent,
SpAdapterDetailsMetricsComponent,
+ SpAdapterDocumentationDialogComponent,
SpAdapterOptionsPanelComponent,
SpAdapterStartedPreviewComponent,
SpAdapterStartedLoadingComponent,
diff --git
a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.html
b/ui/src/app/connect/dialog/adapter-documentation/adapter-documentation-dialog.component.html
similarity index 59%
copy from
ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.html
copy to
ui/src/app/connect/dialog/adapter-documentation/adapter-documentation-dialog.component.html
index 66639d2d09..a43857e26f 100644
---
a/ui/src/app/connect/components/data-marketplace/adapter-description/adapter-description.component.html
+++
b/ui/src/app/connect/dialog/adapter-documentation/adapter-documentation-dialog.component.html
@@ -16,22 +16,15 @@
~
-->
-<div [className]="className" fxFlex="100" fxLayout="column">
- <div fxLayout="column">
- <div
- class="type"
- fxLayout="row"
- fxLayoutAlign="start start"
- fxFlex="100"
- ></div>
- <div class="adapter-icon large-icon">
- <img *ngIf="iconUrl" [src]="iconUrl" class="icon" />
- </div>
- <h3 class="ml-10">{{ adapter.name }}</h3>
+<div class="sp-dialog-container">
+ <div class="sp-dialog-content p-15">
+ <sp-pipeline-element-documentation [appId]="appId">
+ </sp-pipeline-element-documentation>
</div>
- <div fxLayout="row">
- <div fxFlex="70" class="ml-10 description" fxLayoutAlign="start start">
- <p [innerHTML]="adapter.description"></p>
- </div>
+ <mat-divider></mat-divider>
+ <div class="sp-dialog-actions actions-align-right">
+ <button class="mat-basic" mat-raised-button
(click)="dialogRef.close()">
+ Close
+ </button>
</div>
</div>
diff --git
a/ui/src/app/connect/dialog/adapter-documentation/adapter-documentation-dialog.component.ts
b/ui/src/app/connect/dialog/adapter-documentation/adapter-documentation-dialog.component.ts
new file mode 100644
index 0000000000..797d0a882e
--- /dev/null
+++
b/ui/src/app/connect/dialog/adapter-documentation/adapter-documentation-dialog.component.ts
@@ -0,0 +1,33 @@
+/*
+ * 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, Input } from '@angular/core';
+import { DialogRef } from '@streampipes/shared-ui';
+
+@Component({
+ selector: 'sp-adapter-documentation-dialog',
+ templateUrl: './adapter-documentation-dialog.component.html',
+})
+export class SpAdapterDocumentationDialogComponent {
+ @Input()
+ appId: string;
+
+ constructor(
+ public dialogRef: DialogRef<SpAdapterDocumentationDialogComponent>,
+ ) {}
+}
