diff --git a/CHANGELOG.md b/CHANGELOG.md
index d87d850dc..402dab7a4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## Unreleased
+### Added
+
+- Extended the data providers management of the admin control panel by the online status
+
### Changed
- Migrated the `@ghostfolio/ui/value` component to control flow
diff --git a/apps/client/src/app/components/data-provider-status/data-provider-status.component.html b/apps/client/src/app/components/data-provider-status/data-provider-status.component.html
index e5eae16cf..c11ea1fe5 100644
--- a/apps/client/src/app/components/data-provider-status/data-provider-status.component.html
+++ b/apps/client/src/app/components/data-provider-status/data-provider-status.component.html
@@ -4,4 +4,13 @@
} @else {
Offline
}
+} @else {
+
}
diff --git a/apps/client/src/app/components/data-provider-status/data-provider-status.component.ts b/apps/client/src/app/components/data-provider-status/data-provider-status.component.ts
index c9a945cce..f19f90743 100644
--- a/apps/client/src/app/components/data-provider-status/data-provider-status.component.ts
+++ b/apps/client/src/app/components/data-provider-status/data-provider-status.component.ts
@@ -5,22 +5,28 @@ import {
ChangeDetectionStrategy,
Component,
Input,
+ OnDestroy,
OnInit
} from '@angular/core';
import type { DataSource } from '@prisma/client';
-import { catchError, map, type Observable, of } from 'rxjs';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { catchError, map, type Observable, of, Subject, takeUntil } from 'rxjs';
+
+import { DataProviderStatus } from './interfaces/interfaces';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
- imports: [CommonModule],
+ imports: [CommonModule, NgxSkeletonLoaderModule],
selector: 'gf-data-provider-status',
standalone: true,
templateUrl: './data-provider-status.component.html'
})
-export class GfDataProviderStatusComponent implements OnInit {
+export class GfDataProviderStatusComponent implements OnDestroy, OnInit {
@Input() dataSource: DataSource;
- public status$: Observable<{ isHealthy: boolean }>;
+ public status$: Observable;
+
+ private unsubscribeSubject = new Subject();
public constructor(private dataService: DataService) {}
@@ -29,7 +35,13 @@ export class GfDataProviderStatusComponent implements OnInit {
.fetchDataProviderHealth(this.dataSource)
.pipe(
map(() => ({ isHealthy: true })),
- catchError(() => of({ isHealthy: false }))
+ catchError(() => of({ isHealthy: false })),
+ takeUntil(this.unsubscribeSubject)
);
}
+
+ public ngOnDestroy() {
+ this.unsubscribeSubject.next();
+ this.unsubscribeSubject.complete();
+ }
}
diff --git a/apps/client/src/app/components/data-provider-status/interfaces/interfaces.ts b/apps/client/src/app/components/data-provider-status/interfaces/interfaces.ts
new file mode 100644
index 000000000..2c8071899
--- /dev/null
+++ b/apps/client/src/app/components/data-provider-status/interfaces/interfaces.ts
@@ -0,0 +1,3 @@
+export interface DataProviderStatus {
+ isHealthy: boolean;
+}
diff --git a/apps/client/src/app/services/data.service.ts b/apps/client/src/app/services/data.service.ts
index fdc6274cf..9517ff271 100644
--- a/apps/client/src/app/services/data.service.ts
+++ b/apps/client/src/app/services/data.service.ts
@@ -380,7 +380,7 @@ export class DataService {
return this.http.get('/api/v1/benchmarks');
}
- public fetchDataProviderHealth(dataSource: DataSource): Observable