Subscriptions fixed.

src/Squidex/app/features/content/pages/content/content-page.component.html

@@ -1,4 +1,4 @@
-<sqx-title message="{app} | {schema} | Content" parameter1="app" parameter2="schema" [value1]="ctx.appName" [value2]="schema?.name"></sqx-title>
+<sqx-title message="{app} | {schema} | Content" parameter1="app" parameter2="schema" [value1]="ctx.appName" [value2]="schema?.displayName"></sqx-title>
 
 <form [formGroup]="contentForm" (ngSubmit)="saveAndPublish()">
     <sqx-panel desiredWidth="53rem">

src/Squidex/app/features/content/pages/contents/contents-page.component.html

@@ -1,4 +1,4 @@
-<sqx-title message="{app} | {schema} | Contents" parameter1="app" parameter2="schema" [value1]="ctx.appName" [value2]="schema?.name"></sqx-title>
+<sqx-title message="{app} | {schema} | Contents" parameter1="app" parameter2="schema" [value1]="ctx.appName" [value2]="schema?.displayName"></sqx-title>
 
 <sqx-panel [desiredWidth]="isReadOnly ? '40rem' : '60rem'">
     <div class="panel-header">

src/Squidex/app/features/dashboard/pages/dashboard-page.component.ts

@@ -5,7 +5,8 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
 
 import {
     AppContext,
@@ -28,7 +29,9 @@ declare var _urq: any;
         fadeAnimation
     ]
 })
-export class DashboardPageComponent implements OnInit {
+export class DashboardPageComponent implements OnDestroy, OnInit {
+    private subscriptions: Subscription[] = [];
+
     public profileDisplayName = '';
 
     public chartStorageCount: any;
@@ -68,84 +71,96 @@ export class DashboardPageComponent implements OnInit {
     ) {
     }
 
+    public ngOnDestroy() {
+        for (let subscription of this.subscriptions) {
+            subscription.unsubscribe();
+        }
+
+        this.subscriptions = [];
+    }
+
     public ngOnInit() {
-        this.app
+        this.subscriptions.push(
-            .switchMap(app => this.usagesService.getTodayStorage(app.name))
+            this.app
-            .subscribe(dto => {
+                .switchMap(app => this.usagesService.getTodayStorage(app.name))
-                this.assetsCurrent = dto.size;
+                .subscribe(dto => {
-                this.assetsMax = dto.maxAllowed;
+                    this.assetsCurrent = dto.size;
-            });
+                    this.assetsMax = dto.maxAllowed;
-
+                }));
-        this.app
+
-            .switchMap(app => this.usagesService.getMonthCalls(app.name))
+        this.subscriptions.push(
-            .subscribe(dto => {
+            this.app
-                this.callsCurrent = dto.count;
+                .switchMap(app => this.usagesService.getMonthCalls(app.name))
-                this.callsMax = dto.maxAllowed;
+                .subscribe(dto => {
-            });
+                    this.callsCurrent = dto.count;
-
+                    this.callsMax = dto.maxAllowed;
-        this.app
+                }));
-            .switchMap(app => this.usagesService.getStorageUsages(app.name, DateTime.today().addDays(-20), DateTime.today()))
+
-            .subscribe(dtos => {
+        this.subscriptions.push(
-                this.chartStorageCount = {
+            this.app
-                    labels: createLabels(dtos),
+                .switchMap(app => this.usagesService.getStorageUsages(app.name, DateTime.today().addDays(-20), DateTime.today()))
-                    datasets: [
+                .subscribe(dtos => {
-                        {
+                    this.chartStorageCount = {
-                            label: 'Number of Assets',
+                        labels: createLabels(dtos),
-                            lineTension: 0,
+                        datasets: [
-                            fill: false,
+                            {
-                            backgroundColor: 'rgba(51, 137, 213, 0.6)',
+                                label: 'Number of Assets',
-                            borderColor: 'rgba(51, 137, 213, 1)',
+                                lineTension: 0,
-                            borderWidth: 1,
+                                fill: false,
-                            data: dtos.map(x => x.count)
+                                backgroundColor: 'rgba(51, 137, 213, 0.6)',
-                        }
+                                borderColor: 'rgba(51, 137, 213, 1)',
-                    ]
+                                borderWidth: 1,
-                };
+                                data: dtos.map(x => x.count)
-
+                            }
-                this.chartStorageSize = {
+                        ]
-                    labels: createLabels(dtos),
+                    };
-                    datasets: [
+
-                        {
+                    this.chartStorageSize = {
-                            label: 'Size of Assets (MB)',
+                        labels: createLabels(dtos),
-                            lineTension: 0,
+                        datasets: [
-                            fill: false,
+                            {
-                            backgroundColor: 'rgba(51, 137, 213, 0.6)',
+                                label: 'Size of Assets (MB)',
-                            borderColor: 'rgba(51, 137, 213, 1)',
+                                lineTension: 0,
-                            borderWidth: 1,
+                                fill: false,
-                            data: dtos.map(x => Math.round(10 * (x.size / (1024 * 1024))) / 10)
+                                backgroundColor: 'rgba(51, 137, 213, 0.6)',
-                        }
+                                borderColor: 'rgba(51, 137, 213, 1)',
-                    ]
+                                borderWidth: 1,
-                };
+                                data: dtos.map(x => Math.round(10 * (x.size / (1024 * 1024))) / 10)
-            });
+                            }
-
+                        ]
-        this.app
+                    };
-            .switchMap(app => this.usagesService.getCallsUsages(app.name, DateTime.today().addDays(-20), DateTime.today()))
+                }));
-            .subscribe(dtos => {
+
-                this.chartCallsCount = {
+        this.subscriptions.push(
-                    labels: createLabels(dtos),
+            this.app
-                    datasets: [
+                .switchMap(app => this.usagesService.getCallsUsages(app.name, DateTime.today().addDays(-20), DateTime.today()))
-                        {
+                .subscribe(dtos => {
-                            label: 'Number of API Calls',
+                    this.chartCallsCount = {
-                            backgroundColor: 'rgba(51, 137, 213, 0.6)',
+                        labels: createLabels(dtos),
-                            borderColor: 'rgba(51, 137, 213, 1)',
+                        datasets: [
-                            borderWidth: 1,
+                            {
-                            data: dtos.map(x => x.count)
+                                label: 'Number of API Calls',
-                        }
+                                backgroundColor: 'rgba(51, 137, 213, 0.6)',
-                    ]
+                                borderColor: 'rgba(51, 137, 213, 1)',
-                };
+                                borderWidth: 1,
-
+                                data: dtos.map(x => x.count)
-                this.chartCallsPerformance = {
+                            }
-                    labels: createLabels(dtos),
+                        ]
-                    datasets: [
+                    };
-                        {
+
-                            label: 'API Performance (Milliseconds)',
+                    this.chartCallsPerformance = {
-                            backgroundColor: 'rgba(51, 137, 213, 0.6)',
+                        labels: createLabels(dtos),
-                            borderColor: 'rgba(51, 137, 213, 1)',
+                        datasets: [
-                            borderWidth: 1,
+                            {
-                            data: dtos.map(x => x.averageMs)
+                                label: 'API Performance (Milliseconds)',
-                        }
+                                backgroundColor: 'rgba(51, 137, 213, 0.6)',
-                    ]
+                                borderColor: 'rgba(51, 137, 213, 1)',
-                };
+                                borderWidth: 1,
-            });
+                                data: dtos.map(x => x.averageMs)
+                            }
+                        ]
+                    };
+                }));
     }
 
     public showForum() {

src/Squidex/app/features/schemas/pages/schema/schema-page.component.html

@@ -1,4 +1,4 @@
-<sqx-title message="{app} | {schema}" parameter1="app" [value1]="ctx.appName" parameter2="schema" [value2]="schema?.name"></sqx-title>
+<sqx-title message="{app} | {schema}" parameter1="app" [value1]="ctx.appName" parameter2="schema" [value2]="schema?.displayName"></sqx-title>
 
 <sqx-panel desiredWidth="56rem">
     <div class="panel-header">