Skip to content

Commit

Permalink
add custom index.html for landingpage
Browse files Browse the repository at this point in the history
  • Loading branch information
Kai Volland committed Apr 10, 2024
1 parent 08f7d7c commit a3d1316
Show file tree
Hide file tree
Showing 3 changed files with 226 additions and 7 deletions.
14 changes: 7 additions & 7 deletions charts/shogun/charts/shogun-admin/templates/configmap.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,6 @@ data:
'Group'
],
dashboard: {
news: {
visible: true
},
statistics: {
visible: true
},
applications: {
visible: true
},
Expand All @@ -52,7 +46,13 @@ data:
},
users: {
visible: true
}
},
news: {
visible: true
},
statistics: {
visible: false
},
},
navigation: {
general: {
Expand Down
210 changes: 210 additions & 0 deletions charts/shogun/charts/shogun-boot/templates/configmap.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,3 +256,213 @@ data:
level: info
- name: org.reflections
level: error
index-html: |-
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Static landing page for the SHOGun demo">
<meta name="author" content="The SHOGun contributors">
<link rel="shortcut icon" type="image/x-icon" href="./assets/img/favicon.ico">
<title>SHOGun</title>
<!-- Bootstrap 5.1.1 -->
<link href="./assets/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="./assets/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Font Awesome 5.15.4 -->
<link href="./assets/lib/fontawesome/css/all.min.css" rel="stylesheet">
<link href="./index.css" rel="stylesheet">
<script src="{{ .Values.keycloak.url }}/js/keycloak.js"></script>
</head>
<body>
<header
class="container d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
<img class="header-image" src="./assets/img/shogun_logo.png">
</a>
<ul class="nav col-md-3">
<li class="nav-item">
<a href="#" class="nav-link px-2 text-muted">Version: 18.0.0</a>
</li>
</ul>
<button id="login-btn" class="btn btn-primary">Log in</button>
<button id="logout-btn" class="btn btn-primary" hidden>Log out</button>
</header>
<main>
<!-- web component template starts -->
<template id="shogun-app" url="">
<link href="./assets/lib/fontawesome/css/all.min.css" rel="stylesheet">
<div class="app-card">
<div class="app-buttons">
<slot name="admin-btn"></slot>
</div>
<div class="app-info">
<h4>
<slot name="app-title">Default Title</slot>
</h4>
<p>
<slot name="app-info">description</slot>
</p>
</div>
</div>
<style>
.app-card {
border-radius: 10px;
background-color: rgba(248, 249, 250, 1);
height: auto;
cursor: pointer;
}
.app-card:hover {
background-color: rgba(233, 236, 239, 1);
}
.app-buttons {
display: flex;
justify-content: end;
padding: 5px;
}
.app-info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
</template>
<!-- web component template ends -->
<div class="container px-4 py-5">
<h2 class="pb-2">Welcome to SHOGun</h2>
<div style="display: none" id="keycloak-host"></div>
<a href="/admin">
<button id="admin-panel-btn" class="btn btn-primary">
Open Admin Panel <i class="fas fa-lock"></i>
</button>
</a>
<h3 class="pb-2 pt-4">Applications</h3>
<div class="row row-cols-1 row-cols-md-3 g-4 apps" />
</div>
</main>
<footer class="container d-flex justify-content-between align-items-center py-3 my-4 border-top">
<p class="col-md-4 mb-0 text-muted">
&copy; 2021 - present <a href="https://www.terrestris.de">terrestris GmbH & Co. KG</a>
</p>
<p class="col-md-3 mb-0 text-muted">
<i class="fas fa-plug"></i>
<a href="./swagger-ui/index.html">Swagger / OpenAPI</a>
</p>
<p class="col-md-3 mb-0 text-muted">
<i class="fas fa-project-diagram"></i>
<a href="./graphiql">GraphiQL</a>
</p>
<p class="col-md-3 mb-0 text-muted">
<i class="fab fa-github"></i>
<a href="https://github.com/terrestris/shogun">GitHub</a>
</p>
</footer>
<script>
window.onload = async () => {
const keycloak = new Keycloak({
url: '{{ .Values.keycloak.url }}',
realm: 'SHOGun',
clientId: 'shogun-client'
});
try {
const authenticated = await keycloak.init({
onLoad: 'check-sso'
});
} catch (error) {
console.error(error);
return;
}
// Register login/logout actions
document.querySelector('#login-btn').addEventListener('click', () => {
keycloak.login();
});
document.querySelector('#logout-btn').addEventListener('click', () => {
keycloak.logout();
});
if (keycloak.authenticated) {
document.querySelector('#logout-btn').hidden = false;
document.querySelector('#login-btn').hidden = true;
}
const applications = await getApplications(keycloak.token);
const appInfos = applications.map(app => ({
id: app.id,
name: app.name,
description: app.clientConfig.description
}));
const appsEl = document.querySelector('.apps');
// Create web components
customElements.define('shogun-app',
class extends HTMLElement {
constructor() {
super();
const template = document.querySelector('#shogun-app');
const templateContent = template.content;
this.attachShadow({ mode: 'open' }).appendChild(
templateContent.cloneNode(true)
);
}
connectedCallback() {
this.onclick = () => window.open(`/client/index.html?applicationId=${this.getAttribute('app')}`);
}
});
if (appsEl) {
appInfos.forEach(app => {
const html = `<shogun-app app='${app.id}'>` +
`<a style='visibility: hidden' class='admin-btn' title='Edit application' slot='admin-btn' href='/admin/portal/application/${app.id}'>` +
`<i class='fas fa-cog'></i></a>` +
`<span slot='app-title'>${app.name}</span>` +
`<span slot='app-info'>${app.description}</span>` +
`</shogun-app>`;
appsEl.insertAdjacentHTML('beforeend', html);
});
}
// Check for admin role
const hasAdminRole = keycloak.hasResourceRole('admin', 'shogun-admin');
if (hasAdminRole) {
document.querySelectorAll(".admin-btn").forEach(btn => {
btn.style.visibility = 'visible';
});
};
}
const getApplications = async (token) => {
try {
const response = await fetch('/applications', {
headers: {
'Authorization': `Bearer ${token}`
}
});
const applications = await response.json();
if (applications && applications.content) {
return applications.content;
} else {
throw new Error('Error while fetching applications');
}
} catch (error) {
console.error(error);
}
}
</script>
</body>
</html>
9 changes: 9 additions & 0 deletions charts/shogun/charts/shogun-boot/templates/deployment.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,9 @@ spec:
- name: log4j2-config-volume
mountPath: /config/log4j2.yml
subPath: log4j2.yml
- name: index-html-volume
mountPath: "/app/resources/templates/index.html"
subPath: index.html
{{- with .Values.extraVolumeMounts }}
{{- toYaml . | nindent 12 }}
{{- end }}
Expand All @@ -131,6 +134,12 @@ spec:
items:
- key: init-sh
path: "init.sh"
- name: index-html-volume
configMap:
name: {{ include "shogun-boot.fullname" . }}
items:
- key: index-html
path: "index.html"
{{- with .Values.extraVolumes }}
{{- toYaml . | nindent 8 }}
{{- end }}
Expand Down

0 comments on commit a3d1316

Please sign in to comment.