You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ze...@apache.org on 2024/04/11 07:37:46 UTC
(streampipes) branch dev updated: feat(#2659): Show status light in adapter overview (#2660)
This is an automated email from the ASF dual-hosted git repository.
zehnder 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 558c382313 feat(#2659): Show status light in adapter overview (#2660)
558c382313 is described below
commit 558c38231331732f020e5b2639075ac68425fdf2
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Thu Apr 11 09:37:37 2024 +0200
feat(#2659): Show status light in adapter overview (#2660)
* feat(#2659): Show status light in adapter overview
* feat(#2660): Extract status light for adapters in a own component
* feat(#2660): Add missing license headers
---------
Co-authored-by: Philipp Zehnder <te...@users.noreply.github.com>
---
.../adapter-status-light.component.html | 21 +++++++++++
.../adapter-status-light.component.ts} | 43 +++++-----------------
.../existing-adapters.component.html | 15 ++++++++
.../existing-adapters.component.scss | 5 ++-
.../existing-adapters.component.ts | 6 ++-
ui/src/app/connect/connect.module.ts | 2 +
.../pipeline-overview.component.scss | 27 --------------
.../pipeline-overview.component.ts | 5 ++-
.../sp/status-light.scss} | 30 +--------------
9 files changed, 61 insertions(+), 93 deletions(-)
diff --git a/ui/src/app/connect/components/existing-adapters/adapter-status-light/adapter-status-light.component.html b/ui/src/app/connect/components/existing-adapters/adapter-status-light/adapter-status-light.component.html
new file mode 100644
index 0000000000..9725493078
--- /dev/null
+++ b/ui/src/app/connect/components/existing-adapters/adapter-status-light/adapter-status-light.component.html
@@ -0,0 +1,21 @@
+<!--
+ ~ 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 fxLayout="row" fxLayoutAlign="start center">
+ <div *ngIf="adapterRunning" class="light light-green"></div>
+ <div *ngIf="!adapterRunning" class="light light-neutral"></div>
+</div>
diff --git a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss b/ui/src/app/connect/components/existing-adapters/adapter-status-light/adapter-status-light.component.ts
similarity index 56%
copy from ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss
copy to ui/src/app/connect/components/existing-adapters/adapter-status-light/adapter-status-light.component.ts
index 2f5552cad7..2a68b33e27 100644
--- a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss
+++ b/ui/src/app/connect/components/existing-adapters/adapter-status-light/adapter-status-light.component.ts
@@ -16,39 +16,14 @@
*
*/
-.mat-mdc-paginator {
- border-top: 1px solid rgba(0, 0, 0, 0.12);
-}
-
-.mat-mdc-row:nth-child(even) {
- background-color: var(--color-bg-1);
-}
-.mat-mdc-row:nth-child(odd) {
- background-color: var(--color-bg-2);
-}
-
-.adapter-icon {
- max-height: 50px;
-}
-.real-time {
- cursor: pointer;
- color: #ffeb3b;
-}
-
-.filter-bar-margin {
- margin-left: 10px;
- padding-left: 10px;
-}
-
-.monitoring-info {
- color: var(--color-default-text);
- border: 1px solid var(--color-default-text);
- background: var(--color-bg-0);
- border-radius: 5px;
- padding: 5px;
- text-align: center;
-}
+import { Component, Input } from '@angular/core';
-.icon {
- max-width: 60px;
+@Component({
+ selector: 'sp-adapter-status-light',
+ templateUrl: './adapter-status-light.component.html',
+ styleUrl: '../../../../../scss/sp/status-light.scss',
+})
+export class AdapterStatusLightComponent {
+ @Input()
+ adapterRunning: boolean;
}
diff --git a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
index 495961296c..24c8cb8934 100644
--- a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
+++ b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
@@ -112,6 +112,21 @@
data-cy="all-adapters-table"
matSort
>
+ <ng-container matColumnDef="status">
+ <th
+ mat-header-cell
+ mat-sort-header
+ *matHeaderCellDef
+ >
+ Status
+ </th>
+ <td mat-cell *matCellDef="let adapter">
+ <sp-adapter-status-light
+ [adapterRunning]="adapter.running"
+ >
+ </sp-adapter-status-light>
+ </td>
+ </ng-container>
<ng-container matColumnDef="start">
<th mat-header-cell *matHeaderCellDef>Start</th>
<td
diff --git a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss
index 2f5552cad7..888f10a466 100644
--- a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss
+++ b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss
@@ -28,8 +28,11 @@
}
.adapter-icon {
- max-height: 50px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ max-height: 40px;
}
+
.real-time {
cursor: pointer;
color: #ffeb3b;
diff --git a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts
index 99022ad582..b3e39e8159 100644
--- a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts
+++ b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts
@@ -52,7 +52,10 @@ import { HelpComponent } from '../../../core-ui/help/help.component';
@Component({
selector: 'sp-existing-adapters',
templateUrl: './existing-adapters.component.html',
- styleUrls: ['./existing-adapters.component.scss'],
+ styleUrls: [
+ './existing-adapters.component.scss',
+ '../../../../scss/sp/status-light.scss',
+ ],
})
export class ExistingAdaptersComponent implements OnInit, OnDestroy {
existingAdapters: AdapterDescription[] = [];
@@ -67,6 +70,7 @@ export class ExistingAdaptersComponent implements OnInit, OnDestroy {
sort: MatSort;
displayedColumns: string[] = [
+ 'status',
'start',
'name',
'adapterBase',
diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts
index a81f0ed1cc..cd79d1df7e 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -100,6 +100,7 @@ import { MatSortModule } from '@angular/material/sort';
import { MatTooltipModule } from '@angular/material/tooltip';
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';
@NgModule({
imports: [
@@ -179,6 +180,7 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
AdapterConfigurationComponent,
AdapterDescriptionComponent,
AdapterStartedDialog,
+ AdapterStatusLightComponent,
AdapterSettingsComponent,
DataMarketplaceComponent,
DeleteAdapterDialogComponent,
diff --git a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.scss b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.scss
index dd97d20ab8..8f14307cfb 100644
--- a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.scss
+++ b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.scss
@@ -32,33 +32,6 @@
max-width: 120px;
}
-.light {
- background-color: rgba(0, 0, 0, 0.3);
- border-radius: 50%;
- width: 15px;
- height: 15px;
-}
-
-.light-red {
- background-color: red;
- box-shadow: 0 0 5px 2px red;
-}
-
-.light-yellow {
- background-color: #dede2d;
- box-shadow: 0 0 5px 2px #dede2d;
-}
-
-.light-green {
- background-color: green;
- box-shadow: 0 0 5px 2px green;
-}
-
-.light-neutral {
- background-color: #b4b4b4;
- box-shadow: 0 0 2px 1px #b4b4b4;
-}
-
.ml-10 {
margin-left: 10px;
}
diff --git a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts
index 422a17d448..ad53f66fbf 100644
--- a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts
+++ b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts
@@ -37,7 +37,10 @@ import { CurrentUserService } from '@streampipes/shared-ui';
@Component({
selector: 'sp-pipeline-overview',
templateUrl: './pipeline-overview.component.html',
- styleUrls: ['./pipeline-overview.component.scss'],
+ styleUrls: [
+ './pipeline-overview.component.scss',
+ '../../../../scss/sp/status-light.scss',
+ ],
})
export class PipelineOverviewComponent implements OnInit {
_pipelines: Pipeline[];
diff --git a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.scss b/ui/src/scss/sp/status-light.scss
similarity index 75%
copy from ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.scss
copy to ui/src/scss/sp/status-light.scss
index dd97d20ab8..11251d5c52 100644
--- a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.scss
+++ b/ui/src/scss/sp/status-light.scss
@@ -1,4 +1,4 @@
-/*
+/*!
* 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.
@@ -16,22 +16,6 @@
*
*/
-.mat-mdc-paginator {
- border-top: 1px solid rgba(0, 0, 0, 0.12);
-}
-
-.mat-mdc-row:nth-child(even) {
- background-color: var(--color-bg-1);
-}
-.mat-mdc-row:nth-child(odd) {
- background-color: var(--color-bg-2);
-}
-
-.mat-column-status {
- width: 120px;
- max-width: 120px;
-}
-
.light {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
@@ -58,15 +42,3 @@
background-color: #b4b4b4;
box-shadow: 0 0 2px 1px #b4b4b4;
}
-
-.ml-10 {
- margin-left: 10px;
-}
-
-.pipeline-notification {
- color: #dede00;
-}
-
-.notification-icon {
- width: 50px;
-}