[incubator-streampipes] 01/02: [hotfix] Show pipeline status in pipeline overview

[ri...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git

commit 49d41789b346bb6b171f22e374b923f2698a7adf
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sat May 22 11:17:44 2021 +0200

    [hotfix] Show pipeline status in pipeline overview
---
 .../pipeline-overview.component.html               |  6 ++++
 .../pipeline-overview.component.scss               | 39 ++++++++++++++++++++--
 .../pipeline-overview.component.ts                 |  2 +-
 3 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html
index bfee5da..2d498c9 100644
--- a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html
+++ b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html
@@ -18,6 +18,12 @@
 
 <div fxFlex="100" fxLayout="column" *ngIf="filteredPipelinesAvailable" style="margin:1px;">
     <table fxFlex="100" mat-table [dataSource]="dataSource" style="width: 100%;" matSort>
+        <ng-container matColumnDef="status">
+            <th mat-header-cell mat-sort-header *matHeaderCellDef> Status</th>
+            <td mat-cell *matCellDef="let pipeline">
+                <div [matTooltip]="pipeline.running ? 'Running' : 'Stopped'" class="light" [ngClass]="pipeline.running ? 'light-green' : 'light-neutral'"></div>
+            </td>
+        </ng-container>
         <ng-container matColumnDef="start">
             <th mat-header-cell *matHeaderCellDef> Start</th>
             <td mat-cell *matCellDef="let pipeline">
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 2ab2602..13ac91e 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
@@ -22,13 +22,46 @@
 }
 
 .mat-paginator {
-  border-top: 1px solid rgba(0,0,0,.12);
+  border-top: 1px solid rgba(0, 0, 0, .12);
   background: #FAFAFA;
 }
 
 .mat-row:nth-child(even) {
   background-color: #FAFAFA;
 }
+
 .mat-row:nth-child(odd) {
-  background-color:#ffffff;
-}
\ No newline at end of file
+  background-color: #ffffff;
+}
+
+.mat-column-status {
+  width: 80px;
+  max-width: 80px;
+}
+
+.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 20px 5px red;
+}
+
+.light-yellow {
+  background-color: yellow;
+  box-shadow: 0 0 20px 5px yellow;
+}
+
+.light-green {
+  background-color: green;
+  box-shadow: 0 0 5px 2px green;
+}
+
+.light-neutral {
+  background-color: #b4b4b4;
+  box-shadow: 0 0 5px 2px #b4b4b4;
+}
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 11d7545..79b73aa 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
@@ -42,7 +42,7 @@ export class PipelineOverviewComponent implements OnInit {
   @Output()
   refreshPipelinesEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
 
-  displayedColumns: string[] = ['start', 'name', 'lastModified', 'action'];
+  displayedColumns: string[] = ['status', 'start', 'name', 'lastModified', 'action'];
 
   dataSource: MatTableDataSource<Pipeline>;