From 5ddc748a7a7c5709be1519b2dcf91a527f1d9888 Mon Sep 17 00:00:00 2001
From: Sebastian Stehle <sebastian@squidex.io>
Date: Wed, 6 Nov 2019 18:28:46 +0100
Subject: [PATCH] Integrated cluster UI.

---
 .../Controllers/Users/Models/ResourcesDto.cs  |  5 +++++
 .../administration-area.component.html        |  5 +++++
 .../features/administration/declarations.ts   |  1 +
 .../app/features/administration/module.ts     |  6 +++++
 .../pages/cluster/cluster-page.component.html |  7 ++++++
 .../pages/cluster/cluster-page.component.scss |  9 ++++++++
 .../pages/cluster/cluster-page.component.ts   | 22 +++++++++++++++++++
 frontend/app/shared/state/ui.state.ts         | 11 ++++++++--
 8 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 frontend/app/features/administration/pages/cluster/cluster-page.component.html
 create mode 100644 frontend/app/features/administration/pages/cluster/cluster-page.component.scss
 create mode 100644 frontend/app/features/administration/pages/cluster/cluster-page.component.ts

diff --git a/backend/src/Squidex/Areas/Api/Controllers/Users/Models/ResourcesDto.cs b/backend/src/Squidex/Areas/Api/Controllers/Users/Models/ResourcesDto.cs
index c8eb9e3c3..a0e6cf19d 100644
--- a/backend/src/Squidex/Areas/Api/Controllers/Users/Models/ResourcesDto.cs
+++ b/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;
diff --git a/frontend/app/features/administration/administration-area.component.html b/frontend/app/features/administration/administration-area.component.html
index 658062f67..93cda3727 100644
--- a/frontend/app/features/administration/administration-area.component.html
+++ b/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>
 
diff --git a/frontend/app/features/administration/declarations.ts b/frontend/app/features/administration/declarations.ts
index 3f4bb103f..fe0767c3a 100644
--- a/frontend/app/features/administration/declarations.ts
+++ b/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';
diff --git a/frontend/app/features/administration/module.ts b/frontend/app/features/administration/module.ts
index afd698e0a..6f9b923f0 100644
--- a/frontend/app/features/administration/module.ts
+++ b/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,
diff --git a/frontend/app/features/administration/pages/cluster/cluster-page.component.html b/frontend/app/features/administration/pages/cluster/cluster-page.component.html
new file mode 100644
index 000000000..0f89af061
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/app/features/administration/pages/cluster/cluster-page.component.scss b/frontend/app/features/administration/pages/cluster/cluster-page.component.scss
new file mode 100644
index 000000000..240132dcf
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/frontend/app/features/administration/pages/cluster/cluster-page.component.ts b/frontend/app/features/administration/pages/cluster/cluster-page.component.ts
new file mode 100644
index 000000000..2de7a2631
--- /dev/null
+++ b/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
+    ) {
+    }
+}
\ No newline at end of file
diff --git a/frontend/app/shared/state/ui.state.ts b/frontend/app/shared/state/ui.state.ts
index ff3a40c6f..38249d292 100644
--- a/frontend/app/shared/state/ui.state.ts
+++ b/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')
                 }));
             });
     }