[streampipes] branch dev updated: Fix status widget in dashboard (#1741)

[riemer]

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/streampipes.git


The following commit(s) were added to refs/heads/dev by this push:
     new 9c7df4fb6 Fix status widget in dashboard (#1741)
9c7df4fb6 is described below

commit 9c7df4fb6f605d125f4ad924e5979fb979497cc6
Author: Dominik Riemer <dominik.rie...@gmail.com>
AuthorDate: Thu Jul 20 22:43:24 2023 +0200

    Fix status widget in dashboard (#1741)
---
 .../widget/dashboard-widget.component.html         |  4 ++--
 .../widgets/status/status-widget.component.html    |  3 +++
 .../widgets/status/status-widget.component.ts      | 22 ++++++++++++----------
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git 
a/ui/src/app/dashboard/components/widget/dashboard-widget.component.html 
b/ui/src/app/dashboard/components/widget/dashboard-widget.component.html
index 449030ef8..0a8b9f642 100644
--- a/ui/src/app/dashboard/components/widget/dashboard-widget.component.html
+++ b/ui/src/app/dashboard/components/widget/dashboard-widget.component.html
@@ -254,7 +254,7 @@
                     *ngIf="configuredWidget.widgetType === 'status'"
                     class="h-100 p-0"
                 >
-                    <sp-status-widget
+                    <sp-dashboard-status-widget
                         [itemWidth]="itemWidth"
                         #activeWidget
                         [itemHeight]="itemHeight"
@@ -264,7 +264,7 @@
                         [widgetConfig]="configuredWidget"
                         [widgetDataConfig]="widgetDataConfig"
                         class="h-100"
-                    ></sp-status-widget>
+                    ></sp-dashboard-status-widget>
                 </div>
                 <div
                     *ngIf="configuredWidget.widgetType === 'bar-race'"
diff --git 
a/ui/src/app/dashboard/components/widgets/status/status-widget.component.html 
b/ui/src/app/dashboard/components/widgets/status/status-widget.component.html
index fd0d4b729..243d17d47 100644
--- 
a/ui/src/app/dashboard/components/widgets/status/status-widget.component.html
+++ 
b/ui/src/app/dashboard/components/widgets/status/status-widget.component.html
@@ -35,5 +35,8 @@
                     : 'status-light status-light-red'
             "
         ></div>
+        <div class="last-event" *ngIf="lastTimestamp > 0">
+            <h5>Last seen: {{ lastTimestamp | date : 'short' }}</h5>
+        </div>
     </div>
 </div>
diff --git 
a/ui/src/app/dashboard/components/widgets/status/status-widget.component.ts 
b/ui/src/app/dashboard/components/widgets/status/status-widget.component.ts
index 325840e11..fcd56f16d 100644
--- a/ui/src/app/dashboard/components/widgets/status/status-widget.component.ts
+++ b/ui/src/app/dashboard/components/widgets/status/status-widget.component.ts
@@ -24,7 +24,7 @@ import { StatusWidgetConfig } from './status-config';
 import { DatalakeRestService } from '@streampipes/platform-services';
 
 @Component({
-    selector: 'sp-status-widget',
+    selector: 'sp-dashboard-status-widget',
     templateUrl: './status-widget.component.html',
     styleUrls: ['./status-widget.component.scss'],
 })
@@ -61,18 +61,20 @@ export class StatusWidgetComponent
     }
 
     protected onEvent(events: any[]) {
-        this.active = true;
-        const timestamp = new Date().getTime();
-        this.lastTimestamp = timestamp;
-        setTimeout(() => {
-            if (this.lastTimestamp <= timestamp) {
-                this.active = false;
-            }
-        }, this.interval * 1000);
+        if (events.length > 0) {
+            const timestamp = new Date().getTime();
+            this.lastTimestamp = new Date(
+                events[0][BaseStreamPipesWidget.TIMESTAMP_KEY],
+            ).getTime();
+            this.active =
+                this.lastTimestamp >= timestamp - this.interval * 1000;
+        } else {
+            this.active = false;
+        }
     }
 
     protected onSizeChanged(width: number, height: number) {
-        const size: string = Math.min(width, height) * 0.6 + 'px';
+        const size: string = Math.min(width, height) * 0.5 + 'px';
         this.statusLightWidth = size;
         this.statusLightHeight = size;
     }