Skip to content

Commit

Permalink
Add topics information to pipeline editor in view mode
Browse files Browse the repository at this point in the history
  • Loading branch information
Marcelfrueh committed Nov 11, 2024
1 parent f29a303 commit 594129c
Show file tree
Hide file tree
Showing 16 changed files with 468 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@

<div fxFlex="100" *ngIf="compactAdapter" class="mt-10">
<sp-configuration-code-panel
*ngIf="compactAdapter"
[configuration]="compactAdapter"
[maxHeight]="maxHeight"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,23 @@
~
-->

<mat-tab-group color="accent" [mat-stretch-tabs]="false">
<mat-tab-group
color="accent"
[mat-stretch-tabs]="false"
(selectedTabChange)="onTabChanged($event)"
>
<mat-tab label="YAML">
<div class="container-copy-button-container">
<div class="copy-button-container">
<button
mat-icon-button
[cdkCopyToClipboard]="currentConfiguration"
matTooltip="Copy"
>
<mat-icon>content_copy</mat-icon>
</button>
</div>
</div>
<pre
[innerHTML]="configuration | yamlpretty"
class="preview-text"
Expand All @@ -26,6 +41,17 @@
></pre>
</mat-tab>
<mat-tab label="JSON">
<div class="container-copy-button-container">
<div class="copy-button-container">
<button
mat-icon-button
[cdkCopyToClipboard]="currentConfiguration"
matTooltip="Copy"
>
<mat-icon>content_copy</mat-icon>
</button>
</div>
</div>
<pre
[innerHTML]="configuration | jsonpretty"
class="preview-text"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,17 @@
overflow-y: scroll;
white-space: pre-wrap;
}

.mat-mdc-icon-button {
color: #fff;
}

.copy-button-container {
position: absolute;
right: 20px;
top: 20px;
}

.container-copy-button-container {
position: relative;
}
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,37 @@
*/

import { Component, Input, OnInit } from '@angular/core';
import { stringify } from 'yaml';
import { MatTabChangeEvent } from '@angular/material/tabs';

@Component({
selector: 'sp-configuration-code-panel',
templateUrl: './configuration-code-panel.component.html',
styleUrls: ['./configuration-code-panel.component.scss'],
})
export class ConfigurationCodePanelComponent {
export class ConfigurationCodePanelComponent implements OnInit {
@Input()
configuration: any;

@Input()
maxHeight = '300px';

configurationYaml: string;
configurationJson: string;

currentConfiguration: string;

ngOnInit() {
this.configurationYaml = stringify(this.configuration);
this.configurationJson = JSON.stringify(this.configuration);
this.currentConfiguration = this.configurationYaml;
}

onTabChanged(event: MatTabChangeEvent) {
if (event.index === 0) {
this.currentConfiguration = this.configurationYaml;
} else {
this.currentConfiguration = this.configurationJson;
}
}
}
5 changes: 5 additions & 0 deletions ui/src/app/core-ui/core-ui.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { ClipboardModule } from '@angular/cdk/clipboard';

import { MatChipsModule } from '@angular/material/chips';
import { MatSliderModule } from '@angular/material/slider';
Expand Down Expand Up @@ -119,6 +120,7 @@ import { PipelineElementTemplateConfigItemComponent } from './pipeline-element-t
import { ConfigurationCodePanelComponent } from './configuration-code-panel/configuration-code-panel.component';
import { JsonPrettyPrintPipe } from './pipes/json-pretty-print.pipe';
import { YamlPrettyPrintPipe } from './pipes/yaml-pretty-print.pipe';
import { TopicsComponent } from './topics/topics.component';

@NgModule({
imports: [
Expand Down Expand Up @@ -151,6 +153,7 @@ import { YamlPrettyPrintPipe } from './pipes/yaml-pretty-print.pipe';
ReactiveFormsModule,
FormsModule,
CdkTableModule,
ClipboardModule,
MatAutocompleteModule,
MatSnackBarModule,
MatProgressSpinnerModule,
Expand Down Expand Up @@ -182,6 +185,7 @@ import { YamlPrettyPrintPipe } from './pipes/yaml-pretty-print.pipe';
PipelineElementRuntimeInfoComponent,
PipelineElementDocumentationComponent,
HelpComponent,
TopicsComponent,
StaticAnyInputComponent,
StaticPropertyComponent,
StaticFreeInputComponent,
Expand Down Expand Up @@ -236,6 +240,7 @@ import { YamlPrettyPrintPipe } from './pipes/yaml-pretty-print.pipe';
PipelineElementRuntimeInfoComponent,
PipelineElementDocumentationComponent,
HelpComponent,
TopicsComponent,
StaticAnyInputComponent,
StaticPropertyComponent,
StaticFreeInputComponent,
Expand Down
2 changes: 1 addition & 1 deletion ui/src/app/core-ui/pipes/yaml-pretty-print.pipe.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
*/

import { Injectable, Pipe, PipeTransform } from '@angular/core';
import { parse, stringify } from 'yaml';
import { stringify } from 'yaml';

@Pipe({
name: 'yamlpretty',
Expand Down
213 changes: 213 additions & 0 deletions ui/src/app/core-ui/topics/topics.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
<!--
~ Licensed to the Apache Software Foundation (ASF) under one or more
~ contributor license agreements. See the NOTICE file distributed with
~ this work for additional information regarding copyright ownership.
~ The ASF licenses this file to You under the Apache License, Version 2.0
~ (the "License"); you may not use this file except in compliance with
~ the License. You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
~
-->

<div class="sp-dialog-container">
<div class="sp-dialog-content p-15" fxLayout="column">
<div fxLayout="row" fxFlex="100">
<div fxLayout="column" fxFlex>
<h4>{{ pipelineElement?.name }}</h4>
<small>{{ pipelineElement?.description }}</small>
</div>
<div class="element-id" fxLayoutAlign="end start">
<span>ID</span>&nbsp;
<b>{{
isDataStream
? pipelineElement?.elementId
: pipelineElement?.appId
}}</b>
</div>
</div>

<mat-tab-group
color="accent"
[selectedIndex]="selectedTabIndex"
(selectedIndexChange)="selectedTabIndex = $event"
>
<mat-tab *ngFor="let tab of tabs" [label]="tab"></mat-tab>
</mat-tab-group>

<div *ngIf="selectedTabIndex === 0">
<ng-container *ngIf="isSpDataStream()">
<table
mat-table
[dataSource]="
pipelineElement?.eventGrounding?.transportProtocols
"
>
<ng-container matColumnDef="outputTopics">
<th mat-header-cell *matHeaderCellDef>
<strong>Output Topics</strong>
</th>
<td mat-cell *matCellDef="let element">
<div
fxLayout="row"
fxLayoutAlign="space-between center"
>
<span>{{
element?.topicDefinition?.actualTopicName
}}</span>
<button
mat-icon-button
[cdkCopyToClipboard]="
element.topicDefinition.actualTopicName
"
matTooltip="Copy"
>
<mat-icon>content_copy</mat-icon>
</button>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['outputTopics']"></tr>
<tr
mat-row
*matRowDef="let row; columns: ['outputTopics']"
></tr>
</table>
</ng-container>

<ng-container *ngIf="isDataProcessorInvocation()">
<table mat-table [dataSource]="pipelineElement?.inputStreams">
<ng-container matColumnDef="inputTopics">
<th mat-header-cell *matHeaderCellDef>
<strong>Input Topics</strong>
</th>
<td mat-cell *matCellDef="let element">
<div
fxLayout="row"
fxLayoutAlign="space-between center"
>
<span>{{
element?.eventGrounding
?.transportProtocols?.[0]
?.topicDefinition?.actualTopicName
}}</span>
<button
mat-icon-button
[cdkCopyToClipboard]="
element?.eventGrounding
?.transportProtocols?.[0]
?.topicDefinition?.actualTopicName
"
matTooltip="Copy"
>
<mat-icon>content_copy</mat-icon>
</button>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['inputTopics']"></tr>
<tr
mat-row
*matRowDef="let row; columns: ['inputTopics']"
></tr>
</table>

<table
mat-table
[dataSource]="
pipelineElement?.outputStream?.eventGrounding
?.transportProtocols
"
>
<ng-container matColumnDef="outputTopics">
<th mat-header-cell *matHeaderCellDef>
<strong>Output Topics</strong>
</th>
<td mat-cell *matCellDef="let element">
<div
fxLayout="row"
fxLayoutAlign="space-between center"
>
<span>{{
element?.topicDefinition?.actualTopicName
}}</span>
<button
mat-icon-button
[cdkCopyToClipboard]="
element?.topicDefinition
?.actualTopicName
"
matTooltip="Copy"
>
<mat-icon>content_copy</mat-icon>
</button>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['outputTopics']"></tr>
<tr
mat-row
*matRowDef="let row; columns: ['outputTopics']"
></tr>
</table>
</ng-container>

<ng-container *ngIf="isDataSinkInvocation()">
<table mat-table [dataSource]="pipelineElement?.inputStreams">
<ng-container matColumnDef="inputTopics">
<th mat-header-cell *matHeaderCellDef>
<strong>Input Topics</strong>
</th>
<td mat-cell *matCellDef="let element">
<div
fxLayout="row"
fxLayoutAlign="space-between center"
>
<span>{{
element?.eventGrounding
?.transportProtocols?.[0]
?.topicDefinition?.actualTopicName
}}</span>
<button
mat-icon-button
[cdkCopyToClipboard]="
element?.eventGrounding
?.transportProtocols?.[0]
?.topicDefinition?.actualTopicName
"
matTooltip="Copy"
>
<mat-icon>content_copy</mat-icon>
</button>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['inputTopics']"></tr>
<tr
mat-row
*matRowDef="let row; columns: ['inputTopics']"
></tr>
</table>
</ng-container>
</div>
</div>

<mat-divider></mat-divider>

<div class="sp-dialog-actions actions-align-right">
<button
mat-button
mat-raised-button
class="mat-basic"
(click)="close()"
>
Close
</button>
</div>
</div>
Loading

0 comments on commit 594129c

Please sign in to comment.