Skip to content

Commit

Permalink
break word on wallboard (#2694)
Browse files Browse the repository at this point in the history 
* break word on wallboard

* fix: move custom.css to the end of imports

---------

Co-authored-by: Stephan Köninger <stephan.koeninger@codecentric.de>
  • Loading branch information
@ulischulte @SteKoe
ulischulte and SteKoe committed Aug 18, 2023
1 parent 3299fd7 commit 393370f
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 69 deletions.
7 changes: 5 additions & 2 deletions spring-boot-admin-server-ui/src/main/frontend/global.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ declare global {
SBA: SBASettings;
}

type JSExtension = {
type Extension = {
resourcePath: string;
resourceLocation: string;
};
Expand Down Expand Up @@ -79,7 +79,10 @@ declare global {
name: string;
[key: string]: any;
};
extensions: JSExtension[];
extensions: {
js: Extension[];
css: Extension[];
};
csrf: {
headerName: string;
parameterName: string;
Expand Down
68 changes: 31 additions & 37 deletions spring-boot-admin-server-ui/src/main/frontend/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,45 +17,39 @@
<!DOCTYPE html>
<html class='h-full'>
<head>
<base href='/' th:href='${baseUrl}' />
<meta charset='utf-8' />
<title th:text='${uiSettings.title}'>Spring Boot Admin</title>
<link
rel='shortcut icon'
th:href='${uiSettings.favicon}'
type='image/png'
/>
<meta content='width=device-width, initial-scale=1' name='viewport' />
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
<meta content='telephone=no,email=no' name='format-detection' />
<meta
content='#42d3a5'
name='theme-color'
th:content='${uiSettings.theme.color}'
/>
<base href='/' th:href='${baseUrl}'/>
<meta charset='utf-8'/>
<title th:text='${uiSettings.title}'>Spring Boot Admin</title>
<link
rel='shortcut icon'
th:href='${uiSettings.favicon}'
type='image/png'
/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/>
<meta content='telephone=no,email=no' name='format-detection'/>
<meta
content='#42d3a5'
name='theme-color'
th:content='${uiSettings.theme.color}'
/>

<link href='./index.css' rel='stylesheet' />
<link href='/variables.css' rel='stylesheet' />
<link href='./index.css' rel='stylesheet'/>
<link href='/variables.css' rel='stylesheet'/>

<link
as='style'
rel='preload'
th:each='cssExtension : ${cssExtensions}'
th:href="'extensions/' + ${cssExtension.resourcePath}"
/>

<link
rel='stylesheet'
th:each='cssExtension : ${cssExtensions}'
th:href="'extensions/' + ${cssExtension.resourcePath}"
/>
<script lang='javascript' src='sba-settings.js'></script>
<link
as='script'
rel='prefetch'
th:each='jsExtension : ${jsExtensions}'
th:src="'extensions/' + ${jsExtension.resourcePath}"
/>
<link
as='style'
rel='preload'
th:each='cssExtension : ${cssExtensions}'
th:href="'extensions/' + ${cssExtension.resourcePath}"
/>
<script lang='javascript' src='sba-settings.js'></script>
<link
as="script"
rel='preload'
th:each='jsExtension : ${jsExtensions}'
th:href="'extensions/' + ${jsExtension.resourcePath}"
/>
</head>
<body class='h-full'>
<div id='app'></div>
Expand Down
11 changes: 9 additions & 2 deletions spring-boot-admin-server-ui/src/main/frontend/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,19 @@ globalThis.SBA.use = ({ install }) => {
});
};

sbaConfig.extensions.forEach((extension) => {
sbaConfig.extensions.js.forEach((extension) => {
const script = document.createElement('script');
script.src = `extensions/${extension.resourcePath}`;
document.head.appendChild(script);
});

sbaConfig.extensions.css.forEach((extension) => {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = `extensions/${extension.resourcePath}`;
document.head.appendChild(link);
});

moment.locale(navigator.language.split('-')[0]);

if (process.env.NODE_ENV === 'development') {
Expand Down Expand Up @@ -114,7 +121,7 @@ const app = createApp({
applicationsInitialized,
error,
t,
})
}),
);
},
});
Expand Down
5 changes: 4 additions & 1 deletion spring-boot-admin-server-ui/src/main/frontend/sba-settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@
var SBA = {
uiSettings: /*[[${uiSettings}]]*/ {},
user: /*[[${user}]]*/ null,
extensions: /*[[${jsExtensions}]]*/ [],
extensions: {
js: /*[[${jsExtensions}]]*/ [],
css: /*[[${cssExtensions}]]*/ [],
},
csrf: {
parameterName: /*[[${_csrf} ? ${_csrf.parameterName} : 'null']]*/ null,
headerName: /*[[${_csrf} ? ${_csrf.headerName} : 'null']]*/ null,
Expand Down
59 changes: 32 additions & 27 deletions spring-boot-admin-server-ui/src/main/frontend/views/wallboard/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,18 @@

<template>
<section class="wallboard section">
<div class="flex gap-2 justify-end absolute w-full md:w-[28rem] top-14 right-0 bg-black/20 py-3 px-4 rounded-bl">
<div
class="flex gap-2 justify-end absolute w-full md:w-[28rem] top-14 right-0 bg-black/20 py-3 px-4 rounded-bl"
>
<sba-input
class="flex-1"
v-model="termFilter"
class="flex-1"
:placeholder="$t('term.filter')"
name="filter"
type="search"
>
<template #prepend>
<font-awesome-icon icon="filter"/>
<font-awesome-icon icon="filter" />
</template>
</sba-input>

Expand All @@ -34,7 +36,7 @@
v-model="statusFilter"
class="relative focus:z-10 focus:ring-indigo-500 focus:border-indigo-500 block sm:text-sm border-gray-300 rounded"
>
<option selected value="none" v-text="$t('term.all')"/>
<option selected value="none" v-text="$t('term.all')" />
<optgroup :label="t('health.label')">
<option
v-for="status in healthStatus"
Expand All @@ -54,16 +56,18 @@
severity="WARN"
/>

<sba-loading-spinner
v-if="!applicationsInitialized"
/>
<sba-loading-spinner v-if="!applicationsInitialized" />

<template v-if="applicationsInitialized">
<div class="flex w-full h-full items-center text-center text-white text-xl"
v-if="termFilter.length > 0 && applications.length === 0"
v-text="t('term.no_results_for_term', {
term: termFilter
})"/>
<div
v-if="termFilter.length > 0 && applications.length === 0"
class="flex w-full h-full items-center text-center text-white text-xl"
v-text="
t('term.no_results_for_term', {
term: termFilter,
})
"
/>
<hex-mesh
v-if="applicationsInitialized"
:class-for-item="classForApplication"
Expand All @@ -72,12 +76,12 @@
>
<template #item="{ item: application }">
<div :key="application.name" class="hex__body application">
<div class="application__status-indicator"/>
<div class="application__status-indicator" />
<div class="application__header application__time-ago is-muted">
<sba-time-ago :date="application.statusTimestamp"/>
<sba-time-ago :date="application.statusTimestamp" />
</div>
<div class="application__body">
<h1 class="application__name" v-text="application.name"/>
<h1 class="application__name" v-text="application.name" />
<p
class="application__instances is-muted"
v-text="
Expand All @@ -98,21 +102,21 @@

<script>
import Fuse from 'fuse.js';
import {computed, ref} from 'vue';
import {useI18n} from 'vue-i18n';
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import {HealthStatus} from '@/HealthStatus';
import {useApplicationStore} from '@/composables/useApplicationStore';
import { HealthStatus } from '@/HealthStatus';
import { useApplicationStore } from '@/composables/useApplicationStore';
import hexMesh from '@/views/wallboard/hex-mesh';
export default {
components: {hexMesh},
components: { hexMesh },
setup() {
const {t} = useI18n();
const { t } = useI18n();
const termFilter = ref('');
const statusFilter = ref('none');
const {applications, applicationsInitialized, error} =
const { applications, applicationsInitialized, error } =
useApplicationStore();
const fuse = computed(
Expand All @@ -122,7 +126,7 @@ export default {
useExtendedSearch: true,
threshold: 0.25,
keys: ['name', 'buildVersion', 'instances.name', 'instances.id'],
})
}),
);
const filteredApplications = computed(() => {
Expand All @@ -137,7 +141,7 @@ export default {
function filterByStatus(result) {
if (statusFilter.value !== 'none') {
return result.filter(
(application) => application.status === statusFilter.value
(application) => application.status === statusFilter.value,
);
}
Expand Down Expand Up @@ -193,17 +197,17 @@ export default {
if (application.instances.length === 1) {
this.$router.push({
name: 'instances/details',
params: {instanceId: application.instances[0].id},
params: { instanceId: application.instances[0].id },
});
} else {
this.$router.push({
name: 'applications',
params: {selected: application.name},
params: { selected: application.name },
});
}
},
},
install({viewRegistry}) {
install({ viewRegistry }) {
viewRegistry.addView({
path: '/wallboard',
name: 'wallboard',
Expand Down Expand Up @@ -237,6 +241,7 @@ export default {
width: 100%;
padding: 2.5%;
color: #fff;
word-break: break-word;
font-size: 2em;
font-weight: 600;
line-height: 1.125;
Expand Down

0 comments on commit 393370f

Please sign in to comment.