ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2026-01-15 17:21:46 +01:00
Code Issues Packages Releases Activity

adapt frontend to backend config changes, clarify variable names

Browse Source
This commit is contained in:
Christoph Kluge
2026-01-14 11:25:40 +01:00
parent 0ea0270fe1
commit 4cb8d648cb
9 changed files with 58 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/frontend/src/Config.root.svelte
View File

@@ -7,7 +7,7 @@
- `isApi Bool!`: Is currently logged in user api authority - `isApi Bool!`: Is currently logged in user api authority
- `username String!`: Empty string if auth. is disabled, otherwise the username as string - `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 - `clusterNames [String]`: The available clusternames
--> -->
<script> <script>
@@ -23,7 +23,7 @@
isApi, isApi,
username, username,
ncontent, ncontent,
clusters clusterNames
} = $props(); } = $props();
</script> </script>
@@ -32,7 +32,7 @@
<CardHeader> <CardHeader>
<CardTitle class="mb-1">Admin Options</CardTitle> <CardTitle class="mb-1">Admin Options</CardTitle>
</CardHeader> </CardHeader>
<AdminSettings {ncontent} {clusters}/> <AdminSettings {ncontent} {clusterNames}/>
</Card> </Card>
{/if} {/if}

36
web/frontend/src/Header.svelte
View File

@@ -4,8 +4,8 @@
Properties: Properties:
- `username String`: Empty string if auth. is disabled, otherwise the username as string - `username String`: Empty string if auth. is disabled, otherwise the username as string
- `authlevel Number`: The current users authentication level - `authlevel Number`: The current users authentication level
- `clusters [String]`: List of cluster names - `clusterNames [String]`: List of cluster names
- `subClusters [String]`: List of subCluster names - `subclusterMap map[String][]string`: Map of subclusters by cluster names
- `roles [Number]`: Enum containing available roles - `roles [Number]`: Enum containing available roles
--> -->
@@ -28,8 +28,8 @@
let { let {
username, username,
authlevel, authlevel,
clusters, clusterNames,
subClusters, subclusterMap,
roles roles
} = $props(); } = $props();
@@ -152,15 +152,15 @@
<Nav navbar> <Nav navbar>
{#if showMax || showBrg} {#if showMax || showBrg}
<NavbarLinks <NavbarLinks
{clusters} {clusterNames}
{subClusters} {subclusterMap}
links={views.filter((item) => item.requiredRole <= authlevel)} links={views.filter((item) => item.requiredRole <= authlevel)}
/> />
{:else if showMid} {:else if showMid}
<NavbarLinks <NavbarLinks
{clusters} {clusterNames}
{subClusters} {subclusterMap}
links={views.filter( links={views.filter(
(item) => item.requiredRole <= authlevel && item.menu != "Info", (item) => item.requiredRole <= authlevel && item.menu != "Info",
)} )}
@@ -173,8 +173,8 @@
</DropdownToggle> </DropdownToggle>
<DropdownMenu class="dropdown-menu-lg-end"> <DropdownMenu class="dropdown-menu-lg-end">
<NavbarLinks <NavbarLinks
{clusters} {clusterNames}
{subClusters} {subclusterMap}
direction="right" direction="right"
links={views.filter( links={views.filter(
(item) => (item) =>
@@ -187,8 +187,8 @@
{:else if showSml} {:else if showSml}
<NavbarLinks <NavbarLinks
{clusters} {clusterNames}
{subClusters} {subclusterMap}
links={views.filter( links={views.filter(
(item) => item.requiredRole <= authlevel && item.menu == "none", (item) => item.requiredRole <= authlevel && item.menu == "none",
)} )}
@@ -200,8 +200,8 @@
</DropdownToggle> </DropdownToggle>
<DropdownMenu class="dropdown-menu-lg-end"> <DropdownMenu class="dropdown-menu-lg-end">
<NavbarLinks <NavbarLinks
{clusters} {clusterNames}
{subClusters} {subclusterMap}
direction="right" direction="right"
links={views.filter( links={views.filter(
(item) => item.requiredRole <= authlevel && item.menu == 'Jobs', (item) => item.requiredRole <= authlevel && item.menu == 'Jobs',
@@ -217,8 +217,8 @@
</DropdownToggle> </DropdownToggle>
<DropdownMenu class="dropdown-menu-lg-end"> <DropdownMenu class="dropdown-menu-lg-end">
<NavbarLinks <NavbarLinks
{clusters} {clustersNames}
{subClusters} {subclusterMap}
direction="right" direction="right"
links={views.filter( links={views.filter(
(item) => item.requiredRole <= authlevel && item.menu == 'Groups', (item) => item.requiredRole <= authlevel && item.menu == 'Groups',
@@ -234,8 +234,8 @@
</DropdownToggle> </DropdownToggle>
<DropdownMenu class="dropdown-menu-lg-end"> <DropdownMenu class="dropdown-menu-lg-end">
<NavbarLinks <NavbarLinks
{clusters} {clusterNames}
{subClusters} {subclusterMap}
direction="right" direction="right"
links={views.filter( links={views.filter(
(item) => item.requiredRole <= authlevel && item.menu == 'Info', (item) => item.requiredRole <= authlevel && item.menu == 'Info',

2
web/frontend/src/config.entrypoint.js
View File

@@ -10,7 +10,7 @@ mount(Config, {
isApi: isApi, isApi: isApi,
username: username, username: username,
ncontent: ncontent, ncontent: ncontent,
clusters: hClusters.map((c) => c.name) // Defined in Header Template clusterNames: hClusterNames
}, },
context: new Map([ context: new Map([
['cc-config', clusterCockpitConfig], ['cc-config', clusterCockpitConfig],

6
web/frontend/src/config/AdminSettings.svelte
View File

@@ -3,7 +3,7 @@
Properties: Properties:
- `ncontent String`: The homepage notice content - `ncontent String`: The homepage notice content
- `clusters [String]`: The available clusternames - `clusterNames [String]`: The available clusternames
--> -->
<script> <script>
@@ -19,7 +19,7 @@
/* Svelte 5 Props */ /* Svelte 5 Props */
let { let {
ncontent, ncontent,
clusters clusterNames
} = $props(); } = $props();
/* Const Init*/ /* Const Init*/
@@ -68,6 +68,6 @@
<Col> <Col>
<EditProject reloadUser={() => getUserList()} /> <EditProject reloadUser={() => getUserList()} />
</Col> </Col>
<Options config={ccconfig} {clusters}/> <Options config={ccconfig} {clusterNames}/>
<NoticeEdit {ncontent}/> <NoticeEdit {ncontent}/>
</Row> </Row>

12
web/frontend/src/config/admin/Options.svelte
View File

@@ -2,7 +2,7 @@
@component Admin option select card @component Admin option select card
Properties: Properties:
- `clusters [String]`: The available clusternames - `clusterNames [String]`: The available clusternames
--> -->
<script> <script>
@@ -11,7 +11,7 @@
/* Svelte 5 Props */ /* Svelte 5 Props */
let { let {
clusters, clusterNames,
} = $props(); } = $props();
/*Const Init */ /*Const Init */
@@ -52,17 +52,17 @@
</Card> </Card>
</Col> </Col>
{#if clusters?.length > 0} {#if clusterNames?.length > 0}
<Col> <Col>
<Card class="h-100"> <Card class="h-100">
<CardBody> <CardBody>
<CardTitle class="mb-3">Public Dashboard Links</CardTitle> <CardTitle class="mb-3">Public Dashboard Links</CardTitle>
<Row> <Row>
{#each clusters as cluster} {#each clusterNames as cn}
<Col> <Col>
<Button color="info" class="mb-2 mb-xl-0" href={`/monitoring/dashboard/${cluster}`} target="_blank"> <Button color="info" class="mb-2 mb-xl-0" href={`/monitoring/dashboard/${cn}`} target="_blank">
<Icon name="clipboard-pulse" class="mr-2"/> <Icon name="clipboard-pulse" class="mr-2"/>
{cluster.charAt(0).toUpperCase() + cluster.slice(1)} Public Dashboard {cn.charAt(0).toUpperCase() + cn.slice(1)} Public Dashboard
</Button> </Button>
</Col> </Col>
{/each} {/each}

20
web/frontend/src/generic/filters/Resources.svelte
View File

@@ -76,7 +76,7 @@
/* State Init*/ /* State Init*/
// Counts // Counts
let minNumNodes = $state(1); let minNumNodes = $state(1);
let maxNumNodes = $state(0); let maxNumNodes = $state(128);
let maxNumHWThreads = $state(0); let maxNumHWThreads = $state(0);
let maxNumAccelerators = $state(0); let maxNumAccelerators = $state(0);
// Pending // Pending
@@ -107,24 +107,6 @@
/* Reactive Effects | Svelte 5 onMount */ /* Reactive Effects | Svelte 5 onMount */
$effect(() => { $effect(() => {
if ($initialized) { if ($initialized) {
// 'hClusters' defined in templates/base.tmpl
if (activeCluster != null) {
const { filterRanges } = hClusters.find((c) => c.name == activeCluster);
minNumNodes = filterRanges.numNodes.from;
maxNumNodes = filterRanges.numNodes.to;
} else if (clusters.length > 0) {
for (let hc of hClusters) {
const { filterRanges } = hc;
minNumNodes = Math.min(minNumNodes, filterRanges.numNodes.from);
maxNumNodes = Math.max(maxNumNodes, filterRanges.numNodes.to);
};
};
};
});
$effect(() => {
if ($initialized) {
// 'hClusters' defined in templates/base.tmpl
if (activeCluster != null) { if (activeCluster != null) {
const { subClusters } = clusters.find((c) => c.name == activeCluster); const { subClusters } = clusters.find((c) => c.name == activeCluster);
maxNumAccelerators = findMaxNumAccels([{ subClusters }]); maxNumAccelerators = findMaxNumAccels([{ subClusters }]);

4
web/frontend/src/header.entrypoint.js
View File

@@ -9,8 +9,8 @@ if (headerDomTarget != null) {
props: { props: {
username: hUsername, username: hUsername,
authlevel: hAuthlevel, authlevel: hAuthlevel,
clusters: hClusters, clusterNames: hClusterNames,
subClusters: hSubClusters, subclusterMap: hSubclusterMap,
roles: hRoles, roles: hRoles,
}, },
}); });

44
web/frontend/src/header/NavbarLinks.svelte
View File

@@ -2,8 +2,8 @@
@component Navbar component; renders in app navigation links as received from upstream @component Navbar component; renders in app navigation links as received from upstream
Properties: Properties:
- `clusters [String]`: List of cluster names - `clusterNames [String]`: List of cluster names
- `subClusters map[String][]string`: Map of subclusters by cluster names - `subclusterMap map[String][]string`: Map of subclusters by cluster names
- `links [Object]`: Pre-filtered link objects based on user auth - `links [Object]`: Pre-filtered link objects based on user auth
- `direction String?`: The direcion of the drop-down menue [default: down] - `direction String?`: The direcion of the drop-down menue [default: down]
--> -->
@@ -20,8 +20,8 @@
/* Svelte 5 Props */ /* Svelte 5 Props */
let { let {
clusters, clusterNames,
subClusters, subclusterMap,
links, links,
direction = "down" direction = "down"
} = $props(); } = $props();
@@ -36,25 +36,25 @@
{item.title} {item.title}
</DropdownToggle> </DropdownToggle>
<DropdownMenu class="dropdown-menu-lg-end"> <DropdownMenu class="dropdown-menu-lg-end">
{#each clusters as cluster} {#each clusterNames as cn}
<Dropdown nav direction="right"> <Dropdown nav direction="right">
<DropdownToggle nav caret class="dropdown-item py-1 px-2"> <DropdownToggle nav caret class="dropdown-item py-1 px-2">
{cluster.name} {cn}
</DropdownToggle> </DropdownToggle>
<DropdownMenu> <DropdownMenu>
<DropdownItem class="py-1 px-2" <DropdownItem class="py-1 px-2"
href={item.href + cluster.name} href={item.href + cn}
> >
Node Overview Node Overview
</DropdownItem> </DropdownItem>
<DropdownItem class="py-1 px-2" <DropdownItem class="py-1 px-2"
href={item.href + 'list/' + cluster.name} href={`${item.href}list/${cn}`}
> >
Node List Node List
</DropdownItem> </DropdownItem>
{#each subClusters[cluster.name] as subCluster} {#each subclusterMap[cn] as scn}
<DropdownItem class="py-1 px-2" <DropdownItem class="py-1 px-2"
href={item.href + 'list/' + cluster.name + '/' + subCluster} href={`${item.href}list/${cn}/${scn}`}
> >
{subCluster} Node List {subCluster} Node List
</DropdownItem> </DropdownItem>
@@ -71,19 +71,19 @@
{item.title} {item.title}
</DropdownToggle> </DropdownToggle>
<DropdownMenu class="dropdown-menu-lg-end"> <DropdownMenu class="dropdown-menu-lg-end">
{#each clusters as cluster} {#each clusterNames as cn}
<Dropdown nav direction="right"> <Dropdown nav direction="right">
<DropdownToggle nav caret class="dropdown-item py-1 px-2"> <DropdownToggle nav caret class="dropdown-item py-1 px-2">
{cluster.name} {cn}
</DropdownToggle> </DropdownToggle>
<DropdownMenu> <DropdownMenu>
<DropdownItem class="py-1 px-2" <DropdownItem class="py-1 px-2"
href={item.href + cluster.name} href={item.href + cn}
> >
Status Dashboard Status Dashboard
</DropdownItem> </DropdownItem>
<DropdownItem class="py-1 px-2" <DropdownItem class="py-1 px-2"
href={item.href + 'detail/' + cluster.name} href={`${item.href}detail/${cn}`}
> >
Status Details Status Details
</DropdownItem> </DropdownItem>
@@ -105,19 +105,19 @@
All Clusters All Clusters
</DropdownItem> </DropdownItem>
<DropdownItem divider /> <DropdownItem divider />
{#each clusters as cluster} {#each clusterNames as cn}
<Dropdown nav direction="right"> <Dropdown nav direction="right">
<DropdownToggle nav caret class="dropdown-item py-1 px-2"> <DropdownToggle nav caret class="dropdown-item py-1 px-2">
{cluster.name} {cn}
</DropdownToggle> </DropdownToggle>
<DropdownMenu> <DropdownMenu>
<DropdownItem class="py-1 px-2" <DropdownItem class="py-1 px-2"
href={item.href + '?cluster=' + cluster.name} href={`${item.href}?cluster=${cn}`}
> >
All Jobs All Jobs
</DropdownItem> </DropdownItem>
<DropdownItem class="py-1 px-2" <DropdownItem class="py-1 px-2"
href={item.href + '?cluster=' + cluster.name + '&state=running'} href={`${item.href}?cluster=${cn}&state=running`}
> >
Running Jobs Running Jobs
</DropdownItem> </DropdownItem>
@@ -138,12 +138,12 @@
{item.title} {item.title}
</DropdownToggle> </DropdownToggle>
<DropdownMenu class="dropdown-menu-lg-end"> <DropdownMenu class="dropdown-menu-lg-end">
{#each clusters as cluster} {#each clusterNames as cn}
<DropdownItem <DropdownItem
href={item.href + cluster.name} href={item.href + cn}
active={window.location.pathname == item.href + cluster.name} active={window.location.pathname == item.href + cn}
> >
{cluster.name} {cn}
</DropdownItem> </DropdownItem>
{/each} {/each}
</DropdownMenu> </DropdownMenu>

4
web/templates/base.tmpl
View File

@@ -17,8 +17,8 @@
// Used for header.entrypoint.js mount and filters/Resources.svelte // Used for header.entrypoint.js mount and filters/Resources.svelte
const hUsername = {{ .User.Username }}; const hUsername = {{ .User.Username }};
const hAuthlevel = {{ .User.GetAuthLevel }}; const hAuthlevel = {{ .User.GetAuthLevel }};
const hClusters = {{ .Clusters }}; const hClusterNames = {{ .Clusters }};
const hSubClusters = {{ .SubClusters }}; const hSubclusterMap = {{ .SubClusters }};
const hRoles = {{ .Roles }}; const hRoles = {{ .Roles }};
</script> </script>
</head> </head>