Test

backend/src/Squidex.Infrastructure.MongoDb/MongoDb/Queries/FilterVisitor.cs

@@ -86,7 +86,7 @@ namespace Squidex.Infrastructure.MongoDb.Queries
 
         private static BsonRegularExpression BuildRegex(CompareFilter<ClrValue> node, Func<string, string> formatter)
         {
-            return new BsonRegularExpression(formatter(node.Value.Value!.ToString()!), "i");
+            return new BsonRegularExpression(formatter(node.Value.Value?.ToString() ?? "null"), "i");
         }
     }
 }

backend/tests/Squidex.Domain.Apps.Entities.Tests/Contents/MongoDb/MongoDbQueryTests.cs

@@ -183,6 +183,15 @@ namespace Squidex.Domain.Apps.Entities.Contents.MongoDb
             Assert.Equal(o, i);
         }
 
+        [Fact]
+        public void Should_make_query_with_null_regex()
+        {
+            var i = _F(ClrFilter.Contains("createdBy", null!));
+            var o = _C("{ 'cb' : /null/i }");
+
+            Assert.Equal(o, i);
+        }
+
         [Fact]
         public void Should_make_query_with_empty_test()
         {

frontend/app/features/dashboard/declarations.ts

@@ -10,6 +10,7 @@ export * from './pages/cards/api-calls-summary-card.component';
 export * from './pages/cards/api-card.component';
 export * from './pages/cards/api-performance-card.component';
 export * from './pages/cards/api-traffic-card.component';
+export * from './pages/cards/api-traffic-summary-card.component';
 export * from './pages/cards/asset-uploads-count-card.component';
 export * from './pages/cards/asset-uploads-size-card.component';
 export * from './pages/cards/asset-uploads-size-summary-card.component';

frontend/app/features/dashboard/module.ts

@@ -12,7 +12,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { SqxFrameworkModule, SqxSharedModule } from '@app/shared';
 import { GridsterModule } from 'angular-gridster2';
 import { ChartModule } from 'angular2-chartjs';
-import { ApiCallsCardComponent,  ApiCallsSummaryCardComponent, ApiCardComponent, ApiPerformanceCardComponent, ApiTrafficCardComponent, AssetUploadsCountCardComponent, AssetUploadsSizeCardComponent, AssetUploadsSizeSummaryCardComponent, ContentSummaryCardComponent, DashboardConfigComponent, DashboardPageComponent, GithubCardComponent, HistoryCardComponent, IFrameCardComponent, SchemaCardComponent, SupportCardComponent } from './declarations';
+import { ApiCallsCardComponent,  ApiCallsSummaryCardComponent, ApiCardComponent, ApiPerformanceCardComponent, ApiTrafficCardComponent, ApiTrafficSummaryCardComponent, AssetUploadsCountCardComponent, AssetUploadsSizeCardComponent, AssetUploadsSizeSummaryCardComponent, ContentSummaryCardComponent, DashboardConfigComponent, DashboardPageComponent, GithubCardComponent, HistoryCardComponent, IFrameCardComponent, SchemaCardComponent, SupportCardComponent } from './declarations';
 
 const routes: Routes = [
     {
@@ -35,6 +35,7 @@ const routes: Routes = [
         ApiCardComponent,
         ApiPerformanceCardComponent,
         ApiTrafficCardComponent,
+        ApiTrafficSummaryCardComponent,
         AssetUploadsCountCardComponent,
         AssetUploadsSizeCardComponent,
         AssetUploadsSizeSummaryCardComponent,

frontend/app/features/dashboard/pages/cards/api-traffic-card.component.html

@@ -1,6 +1,6 @@
 <div class="card card-lg">
     <div class="card-header">
-        {{ 'dashboard.trafficSummaryCard' | sqxTranslate }}: {{chartSummary | sqxFileSize}}
+        {{ 'dashboard.trafficHeader' | sqxTranslate }}: {{chartSummary | sqxFileSize}}
 
         <div class="float-right">
             <div class="form-check">

frontend/app/features/dashboard/pages/cards/api-traffic-summary-card.component.html

@@ -0,0 +1,14 @@
+<div class="card card">
+    <div class="card-header">{{ 'dashboard.trafficHeader' | sqxTranslate }}</div>
+    <div class="card-body">
+        <div class="aggregation" *ngIf="bytesTotal >= 0">
+            <div class="aggregation-label">{{ 'dashboard.currentMonthLabel' | sqxTranslate }}</div>
+
+            <div class="aggregation-value">{{bytesTotal | sqxFileSize}}</div>
+
+            <div class="aggregation-label" *ngIf="bytesAllowed > 0">
+                {{ 'dashboard.trafficLimitLabel' | sqxTranslate }}: {{bytesAllowed | sqxFileSize}}
+            </div>
+        </div>
+    </div>
+</div>

frontend/app/features/dashboard/pages/cards/api-traffic-summary-card.component.ts

@@ -0,0 +1,37 @@
+
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
+import { AppDto, CallsUsageDto, fadeAnimation } from '@app/shared';
+
+@Component({
+    selector: 'sqx-api-traffic-summary-card',
+    styleUrls: ['./api-traffic-summary-card.component.scss'],
+    templateUrl: './api-traffic-summary-card.component.html',
+    animations: [
+        fadeAnimation
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ApiTrafficSummaryCardComponent implements OnChanges {
+    @Input()
+    public app: AppDto;
+
+    @Input()
+    public usage: CallsUsageDto;
+
+    public bytesTotal = 0;
+    public bytesAllowed = 0;
+
+    public ngOnChanges() {
+        if (this.usage) {
+            this.bytesTotal = this.usage.totalBytes;
+            this.bytesAllowed = this.usage.allowedBytes;
+        }
+    }
+}

frontend/app/features/dashboard/pages/cards/github-card.component.html

@@ -5,7 +5,7 @@
         </div>
 
         <h4 class="card-title">
-            <a href="https://github.com/squidex/squidex" sqxExternalLink>{{ 'dashboard.github' | sqxTranslate }}</a>
+            <a href="https://github.com/squidex/squidex" sqxExternalLink>{{ 'dashboard.githubCard' | sqxTranslate }}</a>
         </h4>
 
         <div class="card-text">

frontend/app/features/dashboard/pages/dashboard-config.component.ts

@@ -107,10 +107,10 @@ export class DashboardConfigComponent implements OnChanges {
 }
 
 const DEFAULT_CONFIG: GridsterItem[] = [
-    { cols: 1, rows: 1, x: 0, y: 0, type: 'schemas', name: 'i18n:common.schemas' },
-    { cols: 1, rows: 1, x: 1, y: 0, type: 'api', name: 'i18n:dashboard.apiDocumentation' },
-    { cols: 1, rows: 1, x: 2, y: 0, type: 'support', name: 'i18n:common.schemas' },
-    { cols: 1, rows: 1, x: 3, y: 0, type: 'github', name: 'i18n:dashboard.github' },
+    { cols: 1, rows: 1, x: 0, y: 0, type: 'schemas', name: 'i18n:dashboard.schemasCard' },
+    { cols: 1, rows: 1, x: 1, y: 0, type: 'api', name: 'i18n:dashboard.apiDocumentationCard' },
+    { cols: 1, rows: 1, x: 2, y: 0, type: 'support', name: 'i18n:dashboard.supportCard' },
+    { cols: 1, rows: 1, x: 3, y: 0, type: 'github', name: 'i18n:dashboard.githubCard' },
 
     { cols: 2, rows: 1, x: 0, y: 1, type: 'api-calls', name: 'i18n:dashboard.apiCallsChart' },
     { cols: 2, rows: 1, x: 2, y: 1, type: 'api-performance', name: 'i18n:dashboard.apiPerformanceChart' },
@@ -122,5 +122,6 @@ const DEFAULT_CONFIG: GridsterItem[] = [
     { cols: 2, rows: 1, x: 0, y: 3, type: 'asset-uploads-size', name: 'i18n:dashboard.assetTotalSize' },
     { cols: 2, rows: 1, x: 2, y: 3, type: 'api-traffic', name: 'i18n:dashboard.trafficChart' },
 
-    { cols: 2, rows: 1, x: 0, y: 4, type: 'history', name: 'i18n:dashboard.history' }
+    { cols: 1, rows: 1, x: 0, y: 4, type: 'api-traffic-summary', name: 'i18n:dashboard.trafficSummaryCard' },
+    { cols: 2, rows: 1, x: 1, y: 4, type: 'history', name: 'i18n:dashboard.historyCard' }
 ];

frontend/app/features/dashboard/pages/dashboard-page.component.html

@@ -12,61 +12,56 @@
             <gridster-item [item]="item" *ngFor="let item of gridConfig">
                 <ng-container [ngSwitch]="item.type">
                     <ng-container *ngSwitchCase="'schemas'">
-                        <sqx-schema-card [app]="app">
-                        </sqx-schema-card>
+                        <sqx-schema-card [app]="app"></sqx-schema-card>
                     </ng-container>
                     <ng-container *ngSwitchCase="'api'">
-                        <sqx-api-card [app]="app">
-                        </sqx-api-card>
+                        <sqx-api-card [app]="app"></sqx-api-card>
                     </ng-container>
                     <ng-container *ngSwitchCase="'support'">
-                        <sqx-support-card [app]="app">
-                        </sqx-support-card>
+                        <sqx-support-card [app]="app"></sqx-support-card>
                     </ng-container>
                     <ng-container *ngSwitchCase="'github'">
-                        <sqx-github-card [app]="app">
-                        </sqx-github-card>
+                        <sqx-github-card [app]="app"></sqx-github-card>
                     </ng-container>
                     <ng-container *ngSwitchCase="'api-calls'">
-                        <sqx-api-calls-card [app]="app" [usage]="callsUsage">
-                        </sqx-api-calls-card>
+                        <sqx-api-calls-card [app]="app" [usage]="callsUsage"></sqx-api-calls-card>
                     </ng-container>
                     <ng-container *ngSwitchCase="'api-performance'">
-                        <sqx-api-performance-card [isStacked]="isStacked" (isStackedChange)="changeIsStacked($event)" [app]="app" [usage]="callsUsage">
+                        <sqx-api-performance-card [app]="app" [usage]="callsUsage"
+                            [isStacked]="isStacked"
+                            (isStackedChange)="changeIsStacked($event)">
                         </sqx-api-performance-card>
                     </ng-container>
                     <ng-container *ngSwitchCase="'api-calls-summary'">
-                        <sqx-api-calls-summary-card [app]="app" [usage]="callsUsage">
-                        </sqx-api-calls-summary-card>
+                        <sqx-api-calls-summary-card [app]="app" [usage]="callsUsage"></sqx-api-calls-summary-card>
                     </ng-container>
                     <ng-container *ngSwitchCase="'asset-uploads-count'">
-                        <sqx-asset-uploads-count-card [app]="app" [usage]="storageUsage">
-                        </sqx-asset-uploads-count-card>
+                        <sqx-asset-uploads-count-card [app]="app" [usage]="storageUsage"></sqx-asset-uploads-count-card>
                     </ng-container>
                     <ng-container *ngSwitchCase="'asset-uploads-size-summary'">
-                        <sqx-asset-uploads-size-summary-card [app]="app" [usage]="storageCurrent">
-                        </sqx-asset-uploads-size-summary-card>
+                        <sqx-asset-uploads-size-summary-card [app]="app" [usage]="storageCurrent"></sqx-asset-uploads-size-summary-card>
                     </ng-container>
                     <ng-container *ngSwitchCase="'asset-uploads-size'">
-                        <sqx-asset-uploads-size-card [app]="app" [usage]="storageUsage">
-                        </sqx-asset-uploads-size-card>
+                        <sqx-asset-uploads-size-card [app]="app" [usage]="storageUsage"></sqx-asset-uploads-size-card>
                     </ng-container>
                     <ng-container *ngSwitchCase="'api-traffic'">                
-                        <sqx-api-traffic-card [isStacked]="isStacked" (isStackedChange)="changeIsStacked($event)" [app]="app" [usage]="callsUsage">
+                        <sqx-api-traffic-card [app]="app" [usage]="callsUsage"
+                            [isStacked]="isStacked"
+                            (isStackedChange)="changeIsStacked($event)">
                         </sqx-api-traffic-card>
                     </ng-container>
+                    <ng-container *ngSwitchCase="'api-traffic-summary'">                
+                        <sqx-api-traffic-summary-card [app]="app" [usage]="callsUsage"></sqx-api-traffic-summary-card>
+                    </ng-container>
                     <ng-container *ngSwitchCase="'history'">
-                        <sqx-history-card [app]="app">
-                        </sqx-history-card>
+                        <sqx-history-card [app]="app"></sqx-history-card>
                     </ng-container>
                     <ng-container *ngSwitchCase="'content-summary'">
-                        <sqx-content-summary-card [app]="app" [options]="item">
-                        </sqx-content-summary-card>
+                        <sqx-content-summary-card [app]="app" [options]="item"></sqx-content-summary-card>
                     </ng-container>
                     <ng-container *ngSwitchCase="'iframe'">
                         <sqx-iframe-card [app]="app" [options]="item">
-                        </sqx-iframe-card>
-                    </ng-container>
+                        </sqx-iframe-card></ng-container>
                 </ng-container>
             </gridster-item>
         </gridster>

frontend/app/features/settings/pages/plans/plan.component.html

@@ -10,6 +10,9 @@
             <div>
                 <strong>{{planInfo.plan.maxApiCalls | sqxKNumber}}</strong> {{ 'plans.includedCalls' | sqxTranslate }}
             </div>
+            <div>
+                <strong>{{planInfo.plan.maxApiBytes | sqxFileSize}}</strong> {{ 'plans.includedTraffic' | sqxTranslate }}
+            </div>
             <div>
                 {{planInfo.plan.maxAssetSize | sqxFileSize}} {{ 'plans.includedStorage' | sqxTranslate }}
             </div>

frontend/app/shared/components/notifo.component.ts

@@ -28,6 +28,10 @@ export class NotifoComponent implements AfterViewInit, OnChanges, OnDestroy {
     @ViewChild('element', { static: false })
     public element: ElementRef<Element>;
 
+    public get isConfigured() {
+        return !!this.notifoApiKey && !!this.notifoApiUrl;
+    }
+
     public get showOnboarding() {
         return !!this.notifoApiUrl && !!this.topic;
     }
@@ -38,7 +42,7 @@ export class NotifoComponent implements AfterViewInit, OnChanges, OnDestroy {
         this.notifoApiKey = authService.user?.notifoToken;
         this.notifoApiUrl = uiOptions.get('more.notifoApi');
 
-        if (this.notifoApiKey && this.notifoApiUrl) {
+        if (this.isConfigured) {
             if (this.notifoApiUrl.indexOf('localhost:5002') >= 0) {
                 resourceLoader.loadScript(`https://localhost:3002/notifo-sdk.js`);
             } else {
@@ -48,15 +52,13 @@ export class NotifoComponent implements AfterViewInit, OnChanges, OnDestroy {
     }
 
     public ngAfterViewInit() {
-        const userToken = this.notifoApiKey;
-
-        if (userToken) {
+        if (this.isConfigured) {
             let notifo = window['notifo'];
 
-            if (!notifo && this.notifoApiUrl) {
+            if (!notifo) {
                 notifo = [];
 
-                const options: any = { apiUrl: this.notifoApiUrl, userToken };
+                const options: any = { apiUrl: this.notifoApiUrl, userToken: this.notifoApiKey };
 
                 if (this.notifoApiUrl.indexOf('localhost:5002') >= 0) {
                     options.styleUrl = 'https://localhost:3002/notifo-sdk.css';

frontend/app/shared/services/plans.service.spec.ts

@@ -55,6 +55,7 @@ describe('PlansService', () => {
                     yearlyId: 'free_yearly',
                     yearlyCosts: '120 €',
                     yearlyConfirmText: 'Change for 120 € per year?',
+                    maxApiBytes: 128,
                     maxApiCalls: 1000,
                     maxAssetSize: 1500,
                     maxContributors: 2500
@@ -67,6 +68,7 @@ describe('PlansService', () => {
                     yearlyId: 'professional_yearly',
                     yearlyCosts: '160 €',
                     yearlyConfirmText: 'Change for 160 € per year?',
+                    maxApiBytes: 512,
                     maxApiCalls: 4000,
                     maxAssetSize: 5500,
                     maxContributors: 6500
@@ -89,13 +91,13 @@ describe('PlansService', () => {
                         'Change for 14 € per month?',
                         'free_yearly', '120 €',
                         'Change for 120 € per year?',
-                        1000, 1500, 2500),
+                        128, 1000, 1500, 2500),
                     new PlanDto(
                         'professional', 'Professional', '18 €',
                         'Change for 18 € per month?',
                         'professional_yearly', '160 €',
                         'Change for 160 € per year?',
-                        4000, 5500, 6500)
+                        512, 4000, 5500, 6500)
                 ],
                 hasPortal: true
             },

frontend/app/shared/services/plans.service.ts

@@ -27,6 +27,7 @@ export class PlanDto {
         public readonly yearlyId: string,
         public readonly yearlyCosts: string,
         public readonly yearlyConfirmText: string | undefined,
+        public readonly maxApiBytes: number,
         public readonly maxApiCalls: number,
         public readonly maxAssetSize: number,
         public readonly maxContributors: number
@@ -72,6 +73,7 @@ export class PlansService {
                             item.yearlyId,
                             item.yearlyCosts,
                             item.yearlyConfirmText,
+                            item.maxApiBytes,
                             item.maxApiCalls,
                             item.maxAssetSize,
                             item.maxContributors)),

frontend/app/shared/services/usages.service.spec.ts

@@ -41,7 +41,9 @@ describe('UsagesService', () => {
         expect(req.request.headers.get('If-Match')).toBeNull();
 
         req.flush({
+            allowedBytes: 512,
             allowedCalls: 100,
+            blockingCalls: 200,
             totalBytes: 1024,
             totalCalls: 40,
             averageElapsedMs: 12.4,
@@ -64,7 +66,7 @@ describe('UsagesService', () => {
         });
 
         expect(usages!).toEqual(
-            new CallsUsageDto(100, 1024, 40, 12.4, {
+            new CallsUsageDto(512, 100, 200, 1024, 40, 12.4, {
                 category1: [
                     new CallsUsagePerDateDto(DateTime.parseISO('2017-10-12'), 10, 130, 12.3),
                     new CallsUsagePerDateDto(DateTime.parseISO('2017-10-13'), 13, 170, 33.3)

frontend/app/shared/services/usages.service.ts

@@ -13,7 +13,9 @@ import { map } from 'rxjs/operators';
 
 export class CallsUsageDto {
     constructor(
+        public readonly allowedBytes: number,
         public readonly allowedCalls: number,
+        public readonly blockingCalls: number,
         public readonly totalBytes: number,
         public readonly totalCalls: number,
         public readonly averageElapsedMs: number,
@@ -95,7 +97,9 @@ export class UsagesService {
 
                 const usages =
                     new CallsUsageDto(
+                        body.allowedBytes,
                         body.allowedCalls,
+                        body.blockingCalls,
                         body.totalBytes,
                         body.totalCalls,
                         body.averageElapsedMs,

frontend/app/shared/state/plans.state.spec.ts

@@ -25,8 +25,8 @@ describe('PlansState', () => {
         currentPlanId: 'id1',
         planOwner: creator,
         plans: [
-            new PlanDto('id1', 'name1', '100€', undefined, 'id1_yearly', '200€', undefined, 1, 1, 1),
-            new PlanDto('id2', 'name2', '400€', undefined, 'id2_yearly', '800€', undefined, 2, 2, 2)
+            new PlanDto('id1', 'name1', '100€', undefined, 'id1_yearly', '200€', undefined, 1, 1, 1, 1),
+            new PlanDto('id2', 'name2', '400€', undefined, 'id2_yearly', '800€', undefined, 2, 2, 2, 2)
         ],
         hasPortal: true
     };