From 102109388b8ae68c216c28702190abd8c23e5304 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Tue, 16 Dec 2025 13:54:17 +0100
Subject: [PATCH] link to public dashboard in admin options, add return button
 do public dashboard

---
 web/frontend/src/Config.root.svelte          |  6 ++--
 web/frontend/src/DashPublic.root.svelte      |  6 ++++
 web/frontend/src/config.entrypoint.js        |  1 +
 web/frontend/src/config/AdminSettings.svelte |  6 ++--
 web/frontend/src/config/admin/Options.svelte | 32 ++++++++++++++++++--
 5 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/web/frontend/src/Config.root.svelte b/web/frontend/src/Config.root.svelte
index e8a2045..171b2a0 100644
--- a/web/frontend/src/Config.root.svelte
+++ b/web/frontend/src/Config.root.svelte
@@ -6,7 +6,8 @@
   - `isSupport Bool!`: Is currently logged in user support authority
   - `isApi Bool!`: Is currently logged in user api authority
   - `username String!`: Empty string if auth. is disabled, otherwise the username as string
-  - `ncontent String!`: The currently displayed message on the homescreen 
+  - `ncontent String!`: The currently displayed message on the homescreen
+  - `clusters [String]`: The available clusternames
 -->
 
 <script>
@@ -22,6 +23,7 @@
     isApi,
     username,
     ncontent,
+    clusters
   } = $props();
 </script>
 
@@ -30,7 +32,7 @@
     <CardHeader>
       <CardTitle class="mb-1">Admin Options</CardTitle>
     </CardHeader>
-    <AdminSettings {ncontent}/>
+    <AdminSettings {ncontent} {clusters}/>
   </Card>
 {/if}
 
diff --git a/web/frontend/src/DashPublic.root.svelte b/web/frontend/src/DashPublic.root.svelte
index dac3f9a..676e496 100644
--- a/web/frontend/src/DashPublic.root.svelte
+++ b/web/frontend/src/DashPublic.root.svelte
@@ -30,6 +30,7 @@
     Table,
     Progress,
     Icon,
+    Button
   } from "@sveltestrap/sveltestrap";
   import Roofline from "./generic/plots/Roofline.svelte";
   import Pie, { colors } from "./generic/plots/Pie.svelte";
@@ -353,6 +354,11 @@
           }}
         />
       </Col>
+      <Col class="d-flex justify-content-end">
+        <Button outline class="mb-1" size="sm" color="light" href="/">
+          <Icon name="x"/>
+        </Button>
+      </Col>
     </Row>
     {#if $statusQuery.fetching || $statesTimed.fetching}
       <Row class="justify-content-center">
diff --git a/web/frontend/src/config.entrypoint.js b/web/frontend/src/config.entrypoint.js
index f9d8e45..5d11eed 100644
--- a/web/frontend/src/config.entrypoint.js
+++ b/web/frontend/src/config.entrypoint.js
@@ -10,6 +10,7 @@ mount(Config, {
         isApi: isApi,
         username: username,
         ncontent: ncontent,
+        clusters: hClusters.map((c) => c.name) // Defined in Header Template
     },
     context: new Map([
             ['cc-config', clusterCockpitConfig],
diff --git a/web/frontend/src/config/AdminSettings.svelte b/web/frontend/src/config/AdminSettings.svelte
index 1a426b8..79072e3 100644
--- a/web/frontend/src/config/AdminSettings.svelte
+++ b/web/frontend/src/config/AdminSettings.svelte
@@ -3,6 +3,7 @@
 
   Properties:
   - `ncontent String`: The homepage notice content
+  - `clusters [String]`: The available clusternames
 -->
 
 <script>
@@ -17,7 +18,8 @@
 
   /* Svelte 5 Props */
   let {
-    ncontent
+    ncontent,
+    clusters
   } = $props();
 
   /* Const Init*/
@@ -66,6 +68,6 @@
   <Col>
     <EditProject reloadUser={() => getUserList()} />
   </Col>
-  <Options config={ccconfig}/>
+  <Options config={ccconfig} {clusters}/>
   <NoticeEdit {ncontent}/>
 </Row>
diff --git a/web/frontend/src/config/admin/Options.svelte b/web/frontend/src/config/admin/Options.svelte
index 847c0ac..d61d220 100644
--- a/web/frontend/src/config/admin/Options.svelte
+++ b/web/frontend/src/config/admin/Options.svelte
@@ -1,14 +1,22 @@
 <!--
   @component Admin option select card
+
+    Properties:
+  - `clusters [String]`: The available clusternames
 -->
 
 <script>
   import { getContext, onMount } from "svelte";
-  import { Col, Card, CardBody, CardTitle } from "@sveltestrap/sveltestrap";
+  import { Row, Col, Card, CardBody, CardTitle, Button, Icon } from "@sveltestrap/sveltestrap";
+
+  /* Svelte 5 Props */
+  let {
+    clusters,
+  } = $props();
 
   /*Const Init */
   const resampleConfig = getContext("resampling");
-
+  
   /* State Init */
   let scrambled = $state(false);
   
@@ -44,6 +52,26 @@
   </Card>
 </Col>
 
+{#if clusters?.length > 0}
+  <Col> 
+    <Card class="h-100">
+      <CardBody>
+        <CardTitle class="mb-3">Public Dashboard Links</CardTitle>
+        <Row>
+        {#each clusters as cluster}
+          <Col>
+            <Button color="info" class="mb-2 mb-xl-0" href={`/monitoring/dashboard/${cluster}`} target="_blank">
+              <Icon name="clipboard-pulse" class="mr-2"/>
+              {cluster.charAt(0).toUpperCase() + cluster.slice(1)} Public Dashboard
+            </Button>
+          </Col>
+        {/each}
+        </Row>
+      </CardBody>
+    </Card>
+  </Col>
+{/if}
+
 {#if resampleConfig}
   <Col> 
     <Card class="h-100">