Integrated cluster UI.

backend/src/Squidex/Areas/Api/Controllers/Users/Models/ResourcesDto.cs

@@ -37,6 +37,11 @@ namespace Squidex.Areas.Api.Controllers.Users.Models
                 result.AddGetLink("admin/users", controller.Url<UserManagementController>(x => nameof(x.GetUsers)));
             }
 
+            if (controller.HasPermission(Permissions.AdminOrleans))
+            {
+                result.AddGetLink("admin/orleans", "/orleans");
+            }
+
             result.AddGetLink("languages", controller.Url<LanguagesController>(x => nameof(x.GetLanguages)));
 
             return result;

frontend/app/features/administration/administration-area.component.html

@@ -17,6 +17,11 @@
                 <i class="nav-icon icon-backup"></i> <div class="nav-text">Restore</div>
             </a>
         </li>
+        <li class="nav-item" *ngIf="uiState.canUseOrleans | async">
+            <a class="nav-link" routerLink="cluster" routerLinkActive="active">
+                <i class="nav-icon icon-orleans"></i> <div class="nav-text">Cluster</div>
+            </a>
+        </li>
     </ul>
 </div>
 

frontend/app/features/administration/declarations.ts

@@ -10,6 +10,7 @@ export * from './administration-area.component';
 export * from './guards/user-must-exist.guard';
 export * from './guards/unset-user.guard';
 
+export * from './pages/cluster/cluster-page.component';
 export * from './pages/event-consumers/event-consumer.component';
 export * from './pages/event-consumers/event-consumers-page.component';
 export * from './pages/restore/restore-page.component';

frontend/app/features/administration/module.ts

@@ -15,6 +15,7 @@ import {
 
 import {
     AdministrationAreaComponent,
+    ClusterPageComponent,
     EventConsumerComponent,
     EventConsumersPageComponent,
     EventConsumersService,
@@ -41,6 +42,10 @@ const routes: Routes = [
                         path: 'event-consumers',
                         component: EventConsumersPageComponent
                     },
+                    {
+                        path: 'cluster',
+                        component: ClusterPageComponent
+                    },
                     {
                         path: 'restore',
                         component: RestorePageComponent
@@ -75,6 +80,7 @@ const routes: Routes = [
     ],
     declarations: [
         AdministrationAreaComponent,
+        ClusterPageComponent,
         EventConsumerComponent,
         EventConsumersPageComponent,
         RestorePageComponent,

frontend/app/features/administration/pages/cluster/cluster-page.component.html

@@ -0,0 +1,7 @@
+<sqx-title message="Cluster"></sqx-title>
+
+<sqx-panel desiredWidth="*" minWidth="50rem" isFullSize="true">
+    <div inner>
+        <iframe src="/orleans"></iframe>
+    </div>
+</sqx-panel>

frontend/app/features/administration/pages/cluster/cluster-page.component.scss

@@ -0,0 +1,9 @@
+@import '_vars';
+@import '_mixins';
+
+iframe {
+    @include absolute(0, 0, 0, 0);
+    min-width: 100%;
+    min-height: 100%;
+    border: 0;
+}

frontend/app/features/administration/pages/cluster/cluster-page.component.ts

@@ -0,0 +1,22 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Component } from '@angular/core';
+
+import { UIState } from '@app/shared';
+
+@Component({
+    selector: 'sqx-cluster-area',
+    styleUrls: ['./cluster-page.component.scss'],
+    templateUrl: './cluster-page.component.html'
+})
+export class ClusterPageComponent {
+    constructor(
+        public readonly uiState: UIState
+    ) {
+    }
+}

frontend/app/shared/state/ui.state.ts

@@ -43,6 +43,9 @@ interface Snapshot {
     // Indicates if the user can restore backups.
     canRestore?: boolean;
 
+    // Indicates if the user can see the orleans dashboard.
+    canUseOrleans?: boolean;
+
     // Indicates if the user can use at least one admin resource.
     canUserAdminResource?: boolean;
 }
@@ -67,8 +70,11 @@ export class UIState extends State<Snapshot> {
     public canRestore =
         this.project(x => x.canRestore === true);
 
+    public canUseOrleans =
+        this.project(x => x.canUseOrleans === true);
+
     public canUserAdminResource =
-        this.project(x => x.canRestore === true || x.canReadUsers === true || x.canReadEvents === true);
+        this.project(x => x.canRestore === true || x.canReadUsers === true || x.canReadEvents === true || x.canUseOrleans);
 
     public get<T>(path: string, defaultValue: T) {
         return this.settings.pipe(map(x => this.getValue(x, path, defaultValue)),
@@ -132,7 +138,8 @@ export class UIState extends State<Snapshot> {
                 this.next(s => ({ ...s,
                     canReadEvents: hasAnyLink(payload, 'admin/events'),
                     canReadUsers: hasAnyLink(payload, 'admin/users'),
-                    canRestore: hasAnyLink(payload, 'admin/restore')
+                    canRestore: hasAnyLink(payload, 'admin/restore'),
+                    canUseOrleans: hasAnyLink(payload, 'admin/orleans')
                 }));
             });
     }