This is an automated email from the ASF dual-hosted git repository.
dominikriemer 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 070dc0e00b Fix styling bug pipeline details (#4658)
070dc0e00b is described below
commit 070dc0e00b3e233fd795465446ea9b0920a9b600
Author: Dominik Riemer <[email protected]>
AuthorDate: Tue Jun 30 08:28:21 2026 +0200
Fix styling bug pipeline details (#4658)
---
.../dropped-pipeline-element.component.html | 2 +-
.../components/pipeline/pipeline.component.html | 7 ++++-
.../components/pipeline/pipeline.component.scss | 4 +++
.../components/pipeline/pipeline.component.ts | 11 ++++++++
ui/src/scss/sp/forms-mat3.scss | 12 +++++++--
ui/src/scss/sp/pipeline-element.scss | 31 ++++++++++++++--------
6 files changed, 52 insertions(+), 15 deletions(-)
diff --git
a/ui/src/app/editor/components/pipeline/dropped-pipeline-element/dropped-pipeline-element.component.html
b/ui/src/app/editor/components/pipeline/dropped-pipeline-element/dropped-pipeline-element.component.html
index 6956d7f3fe..043962a55a 100644
---
a/ui/src/app/editor/components/pipeline/dropped-pipeline-element/dropped-pipeline-element.component.html
+++
b/ui/src/app/editor/components/pipeline/dropped-pipeline-element/dropped-pipeline-element.component.html
@@ -29,7 +29,7 @@
@if (pipelineElementConfig.settings.loadingStatus) {
<div class="pipeline-element-loading-container sp-fade-opacity"></div>
}
- @if (!readonly) {
+ @if (!readonly && pipelineElementConfig.settings.completed > 0) {
<div
class="pipeline-element-configuration-status {{
pipelineElementConfig.type === 'stream'
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.html
b/ui/src/app/editor/components/pipeline/pipeline.component.html
index aafd90553a..ce7584440a 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.html
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.html
@@ -44,7 +44,12 @@
>
</sp-dropped-pipeline-element>
@if (readonly) {
- <div class="topics-button customize-button">
+ <div
+ class="topics-button customize-button"
+ [class.topics-button--with-metrics]="
+ hasVisibleMetrics(pipelineElementConfig)
+ "
+ >
<button
class="topics-icon-button"
mat-icon-button
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.scss
b/ui/src/app/editor/components/pipeline/pipeline.component.scss
index c7044dfa18..ed4d07af29 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.scss
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.scss
@@ -34,6 +34,10 @@
background: var(--mat-sys-surface);
}
+.topics-button--with-metrics {
+ top: -4.25rem;
+}
+
.topics-icon-button {
width: 1.5rem;
height: 1.5rem;
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.ts
b/ui/src/app/editor/components/pipeline/pipeline.component.ts
index f82edf4a14..49b8938d6a 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.ts
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.ts
@@ -237,6 +237,17 @@ export class PipelineComponent implements OnInit,
OnDestroy {
this.currentMouseOverElement === elementId ? '' : elementId;
}
+ hasVisibleMetrics(pipelineElementConfig: PipelineElementConfig): boolean {
+ const metrics =
+ this.metricsInfo?.[pipelineElementConfig.payload.elementId];
+ const hasMessagesIn = Object.keys(metrics?.messagesIn ?? {}).length >
0;
+ const hasMessagesOut = metrics?.messagesOut?.counter !== undefined;
+
+ return pipelineElementConfig.type === 'action'
+ ? hasMessagesIn
+ : hasMessagesIn || hasMessagesOut;
+ }
+
findPipelineElementByElementId(elementId: string) {
return this.allElements.find(a => a.elementId === elementId);
}
diff --git a/ui/src/scss/sp/forms-mat3.scss b/ui/src/scss/sp/forms-mat3.scss
index ca58139f33..c5e0e11529 100644
--- a/ui/src/scss/sp/forms-mat3.scss
+++ b/ui/src/scss/sp/forms-mat3.scss
@@ -44,7 +44,7 @@
}
.mat-mdc-form-field .mdc-text-field--outlined {
- background-color: var(--color-surface-interactive);
+ background-color: var(--mat-sys-surface);
border-radius: var(--radius-sm);
transition:
background-color var(--motion-duration-fast)
@@ -53,7 +53,11 @@
}
.mat-mdc-form-field:hover .mdc-text-field--outlined {
- background-color: var(--color-surface-interactive-hover);
+ background-color: color-mix(
+ in srgb,
+ var(--mat-sys-primary) 3%,
+ var(--mat-sys-surface)
+ );
}
.mat-mdc-form-field:has(.mdc-text-field--focused)
@@ -64,4 +68,8 @@
.mat-mdc-form-field.mat-form-field-disabled {
filter: saturate(0.7);
}
+
+ .mat-mdc-form-field.mat-form-field-disabled .mdc-text-field--outlined {
+ background-color: var(--mat-sys-surface-container);
+ }
}
diff --git a/ui/src/scss/sp/pipeline-element.scss
b/ui/src/scss/sp/pipeline-element.scss
index aee7f7a619..a9c55517a9 100644
--- a/ui/src/scss/sp/pipeline-element.scss
+++ b/ui/src/scss/sp/pipeline-element.scss
@@ -18,31 +18,40 @@
.pipeline-element-configuration-status {
position: absolute;
- left: 20px;
- top: -25px;
- width: 100%;
- height: 100%;
+ right: -0.35rem;
+ bottom: -0.35rem;
+ z-index: 60;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 1.35rem;
+ height: 1.35rem;
+ border: 1px solid var(--color-border);
+ border-radius: 50%;
+ background: var(--mat-sys-surface);
+ pointer-events: none;
}
-.pi-processor {
- left: 0px;
+.pi-stream {
+ right: 0.15rem;
+ bottom: 0.15rem;
}
-.pi-stream {
- left: 0px;
+.pipeline-element-configuration-status .material-icons {
+ width: 1rem;
+ height: 1rem;
+ font-size: 1rem;
+ line-height: 1;
}
.pipeline-element-configuration-invalid-icon {
- font-size: var(--font-size-lg);
color: var(--color-error);
}
.pipeline-element-configuration-modified-icon {
- font-size: var(--font-size-lg);
color: var(--color-warning);
}
.pipeline-element-configuration-ok-icon {
- font-size: var(--font-size-lg);
color: var(--color-success);
}
