Skip to content

Commit f365008

Browse files
SteKoeSteKoe
committed
feat: enhance button and application status UI with improved styling and new actions
1 parent 47e18c4 commit f365008

10 files changed

Lines changed: 226 additions & 206 deletions

File tree

‎spring-boot-admin-server-ui/src/main/frontend/components/sba-button.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const props = defineProps({
3333
type: String,
3434
default: 'sm',
3535
validator(value) {
36-
return ['xs', 'sm', 'base'].includes(value);
36+
return ['2xs', 'xs', 'sm', 'base'].includes(value);
3737
},
3838
},
3939
disabled: {
@@ -101,7 +101,7 @@ const handleClick = (event) => {
101101
}
102102
103103
.btn:disabled {
104-
@apply text-gray-300;
104+
@apply text-gray-500 cursor-not-allowed bg-gray-100 hover:bg-gray-100;
105105
}
106106
107107
.btn.is-danger {

‎spring-boot-admin-server-ui/src/main/frontend/views/applications/ApplicationStatusHero.vue‎

Lines changed: 17 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,18 @@
11
<template>
22
<sba-panel>
3-
<template v-if="applicationsCount > 0">
4-
<div class="flex flex-row md:flex-col items-center justify-center">
3+
<div class="flex flex-row items-center justify-center my-2">
4+
<template v-if="applicationsCount > 0">
55
<template v-if="statusInfo.allUp">
66
<font-awesome-icon icon="check-circle" class="text-green-500 icon" />
77
<div class="text-center">
8-
<h1 class="font-bold text-2xl" v-text="$t('applications.all_up')" />
8+
<h1 class="status-label" v-text="$t('applications.all_up')" />
99
<p class="text-gray-400" v-text="lastUpdate" />
1010
</div>
1111
</template>
1212
<template v-else-if="statusInfo.allDown">
1313
<font-awesome-icon icon="minus-circle" class="text-red-500 icon" />
1414
<div class="text-center">
15-
<h1
16-
class="font-bold text-2xl"
17-
v-text="$t('applications.all_down')"
18-
/>
15+
<h1 class="status-label" v-text="$t('applications.all_down')" />
1916
<p class="text-gray-400" v-text="lastUpdate" />
2017
</div>
2118
</template>
@@ -25,20 +22,14 @@
2522
class="text-gray-300 icon"
2623
/>
2724
<div class="text-center">
28-
<h1
29-
class="font-bold text-2xl"
30-
v-text="$t('applications.all_unknown')"
31-
/>
25+
<h1 class="status-label" v-text="$t('applications.all_unknown')" />
3226
<p class="text-gray-400" v-text="lastUpdate" />
3327
</div>
3428
</template>
3529
<template v-else-if="someInstancesDown">
3630
<font-awesome-icon icon="minus-circle" class="text-red-500 icon" />
3731
<div class="text-center">
38-
<h1
39-
class="font-bold text-2xl"
40-
v-text="$t('applications.some_down')"
41-
/>
32+
<h1 class="status-label" v-text="$t('applications.some_down')" />
4233
<p class="text-gray-400" v-text="lastUpdate" />
4334
</div>
4435
</template>
@@ -49,27 +40,19 @@
4940
class="text-gray-300 icon"
5041
/>
5142
<div class="text-center">
52-
<h1
53-
class="font-bold text-2xl"
54-
v-text="$t('applications.some_unknown')"
55-
/>
43+
<h1 class="status-label" v-text="$t('applications.some_unknown')" />
5644
<p class="text-gray-400" v-text="lastUpdate" />
5745
</div>
5846
</template>
59-
</div>
60-
</template>
61-
<template v-else>
62-
<div class="flex flex-col items-center">
63-
<font-awesome-icon
64-
icon="frown-open"
65-
class="text-gray-500 text-9xl pb-4"
66-
/>
47+
</template>
48+
<template v-else>
49+
<font-awesome-icon icon="frown-open" class="text-gray-500 icon" />
6750
<h1
68-
class="font-bold text-2xl"
51+
class="status-label"
6952
v-text="$t('applications.no_applications_registered')"
7053
/>
71-
</div>
72-
</template>
54+
</template>
55+
</div>
7356
</sba-panel>
7457
</template>
7558

@@ -81,7 +64,6 @@ import { useDateTimeFormatter } from '@/composables/useDateTimeFormatter';
8164
import { getStatusInfo } from '@/services/application';
8265
8366
const { applications } = useApplicationStore();
84-
8567
const { formatDateTime } = useDateTimeFormatter();
8668
8769
const lastUpdate = ref(formatDateTime(new Date()));
@@ -108,7 +90,10 @@ const someInstancesUnknown = computed(() => {
10890
</script>
10991

11092
<style scoped>
93+
.status-label {
94+
@apply font-bold text-2xl;
95+
}
11196
.icon {
112-
@apply text-9xl pr-4 md:pb-4 md:pr-0;
97+
@apply text-6xl pr-4;
11398
}
11499
</style>

‎spring-boot-admin-server-ui/src/main/frontend/views/applications/InstancesList.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
v-for="instance in instances"
2121
:key="instance.id"
2222
:data-testid="instance.id"
23-
class="flex p-2 sm:pr-6 hover:bg-gray-100 gap-2 odd:bg-gray-50 items-center"
23+
class="flex p-2 pr-4 hover:bg-gray-100 gap-2 odd:bg-gray-50 items-center"
2424
@click.stop="showDetails(instance)"
2525
>
2626
<div class="pt-1 md:w-16 text-center">

‎spring-boot-admin-server-ui/src/main/frontend/views/applications/i18n.de.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@
33
"actions": {
44
"journal": "Journal",
55
"notification_filters": "Benachrichtigungsfilter",
6-
"unregister": "Deregistrieren",
6+
"refresh_applications": "Anwendungen aktualisieren",
7+
"restart": "Neu starten",
78
"shutdown": "Herunterfahren",
8-
"restart": "Neu starten"
9+
"switch_to_grouping_by_application": "Aggregiere Instanzen zu Applikationen (gleiche Namen)",
10+
"switch_to_grouping_by_group": "Gruppiere Instanzen anhand des Gruppennamens",
11+
"unregister": "Deregistrieren"
912
},
1013
"all_up": "Alle verfügbar",
1114
"all_down": "Alle Instanzen sind ausgefallen",

‎spring-boot-admin-server-ui/src/main/frontend/views/applications/i18n.en.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@
33
"actions": {
44
"journal": "Journal",
55
"notification_filters": "Notification filters",
6-
"unregister": "Unregister",
6+
"refresh_applications": "Refresh applications",
7+
"restart": "Restart",
78
"shutdown": "Shutdown",
8-
"restart": "Restart"
9+
"switch_to_grouping_by_application": "Aggregate same instances as application",
10+
"switch_to_grouping_by_group": "Group same instance by same group name",
11+
"unregister": "Unregister"
912
},
1013
"all_up": "all up",
1114
"all_down": "all down",

‎spring-boot-admin-server-ui/src/main/frontend/views/applications/index.vue‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,33 @@
2121
<sba-sticky-subnav>
2222
<div class="container mx-auto flex">
2323
<ApplicationStats />
24-
<sba-confirm-button class="mr-1" @click="refreshContext">
24+
<sba-confirm-button
25+
class="mr-1"
26+
:title="$t('applications.actions.refresh_applications')"
27+
@click="refreshContext"
28+
>
2529
<font-awesome-icon :icon="'rotate-left'" />
2630
</sba-confirm-button>
31+
<template v-if="groupNames.length > 1">
32+
<sba-button-group class="mr-1">
33+
<sba-button
34+
:title="
35+
$t('applications.actions.switch_to_grouping_by_application')
36+
"
37+
:disabled="isGroupingFunctionActive('application')"
38+
@click="() => setGroupingFunction('application')"
39+
>
40+
<font-awesome-icon icon="list" />
41+
</sba-button>
42+
<sba-button
43+
:title="$t('applications.actions.switch_to_grouping_by_group')"
44+
:disabled="isGroupingFunctionActive('group')"
45+
@click="() => setGroupingFunction('group')"
46+
>
47+
<font-awesome-icon icon="expand" />
48+
</sba-button>
49+
</sba-button-group>
50+
</template>
2751
<ApplicationNotificationCenter
2852
v-if="hasNotificationFiltersSupport"
2953
:notification-filters="notificationFilters"
@@ -70,17 +94,6 @@
7094
</sba-panel>
7195

7296
<template v-else>
73-
<div v-if="groupNames.length > 1" class="text-right mb-6">
74-
<sba-button-group>
75-
<sba-button @click="() => setGroupingFunction('application')">
76-
<font-awesome-icon icon="list" />
77-
</sba-button>
78-
<sba-button @click="() => setGroupingFunction('group')">
79-
<font-awesome-icon icon="expand" />
80-
</sba-button>
81-
</sba-button-group>
82-
</div>
83-
8497
<sba-panel
8598
v-for="group in grouped"
8699
:id="group.name"
@@ -390,6 +403,10 @@ const setGroupingFunction = (key: keyof typeof groupingFunctions) => {
390403
expandedGroups.value = [];
391404
};
392405
406+
const isGroupingFunctionActive = (key: keyof typeof groupingFunctions) => {
407+
return groupingFunction.value === groupingFunctions[key];
408+
};
409+
393410
function isExpanded(name: string) {
394411
return expandedGroups.value.includes(name);
395412
}

‎spring-boot-admin-server-ui/src/main/frontend/views/instances/httpexchanges/exchanges-chart.vue‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -24,32 +24,34 @@
2424
class="exchange-chart__tooltip"
2525
>
2626
<table class="is-narrow is-size-7">
27-
<tr>
28-
<th v-text="$t('instances.httpexchanges.chart.total_requests')" />
29-
<td v-text="tooltipContent.totalCount" />
30-
</tr>
31-
<tr>
32-
<th
33-
v-text="$t('instances.httpexchanges.chart.successful_requests')"
34-
/>
35-
<td v-text="tooltipContent.totalSuccess" />
36-
</tr>
37-
<tr>
38-
<th v-text="$t('instances.httpexchanges.chart.status_4xx')" />
39-
<td v-text="tooltipContent.totalClientErrors" />
40-
</tr>
41-
<tr>
42-
<th v-text="$t('instances.httpexchanges.chart.status_5xx')" />
43-
<td v-text="tooltipContent.totalServerErrors" />
44-
</tr>
45-
<tr>
46-
<th v-text="$t('instances.httpexchanges.chart.max_time')" />
47-
<td v-text="`${tooltipContent.maxTime.toFixed(0)}ms`" />
48-
</tr>
49-
<tr>
50-
<th v-text="$t('instances.httpexchanges.chart.avg_time')" />
51-
<td v-text="`${tooltipContent.avgTime.toFixed(0)}ms`" />
52-
</tr>
27+
<tbody>
28+
<tr>
29+
<th v-text="$t('instances.httpexchanges.chart.total_requests')" />
30+
<td v-text="tooltipContent.totalCount" />
31+
</tr>
32+
<tr>
33+
<th
34+
v-text="$t('instances.httpexchanges.chart.successful_requests')"
35+
/>
36+
<td v-text="tooltipContent.totalSuccess" />
37+
</tr>
38+
<tr>
39+
<th v-text="$t('instances.httpexchanges.chart.status_4xx')" />
40+
<td v-text="tooltipContent.totalClientErrors" />
41+
</tr>
42+
<tr>
43+
<th v-text="$t('instances.httpexchanges.chart.status_5xx')" />
44+
<td v-text="tooltipContent.totalServerErrors" />
45+
</tr>
46+
<tr>
47+
<th v-text="$t('instances.httpexchanges.chart.max_time')" />
48+
<td v-text="`${tooltipContent.maxTime.toFixed(0)}ms`" />
49+
</tr>
50+
<tr>
51+
<th v-text="$t('instances.httpexchanges.chart.avg_time')" />
52+
<td v-text="`${tooltipContent.avgTime.toFixed(0)}ms`" />
53+
</tr>
54+
</tbody>
5355
</table>
5456
</div>
5557
<svg class="exchange-chart__svg" />

‎spring-boot-admin-server-ui/src/main/frontend/views/instances/httptrace/traces-chart.vue‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -24,30 +24,32 @@
2424
class="trace-chart__tooltip"
2525
>
2626
<table class="is-narrow is-size-7">
27-
<tr>
28-
<th v-text="$t('instances.httptrace.chart.total_requests')" />
29-
<td v-text="tooltipContent.totalCount" />
30-
</tr>
31-
<tr>
32-
<th v-text="$t('instances.httptrace.chart.successful_requests')" />
33-
<td v-text="tooltipContent.totalSuccess" />
34-
</tr>
35-
<tr>
36-
<th v-text="$t('instances.httptrace.chart.status_4xx')" />
37-
<td v-text="tooltipContent.totalClientErrors" />
38-
</tr>
39-
<tr>
40-
<th v-text="$t('instances.httptrace.chart.status_5xx')" />
41-
<td v-text="tooltipContent.totalServerErrors" />
42-
</tr>
43-
<tr>
44-
<th v-text="$t('instances.httptrace.chart.max_time')" />
45-
<td v-text="`${tooltipContent.maxTime}ms`" />
46-
</tr>
47-
<tr>
48-
<th v-text="$t('instances.httptrace.chart.avg_time')" />
49-
<td v-text="`${tooltipContent.avgTime}ms`" />
50-
</tr>
27+
<tbody>
28+
<tr>
29+
<th v-text="$t('instances.httptrace.chart.total_requests')" />
30+
<td v-text="tooltipContent.totalCount" />
31+
</tr>
32+
<tr>
33+
<th v-text="$t('instances.httptrace.chart.successful_requests')" />
34+
<td v-text="tooltipContent.totalSuccess" />
35+
</tr>
36+
<tr>
37+
<th v-text="$t('instances.httptrace.chart.status_4xx')" />
38+
<td v-text="tooltipContent.totalClientErrors" />
39+
</tr>
40+
<tr>
41+
<th v-text="$t('instances.httptrace.chart.status_5xx')" />
42+
<td v-text="tooltipContent.totalServerErrors" />
43+
</tr>
44+
<tr>
45+
<th v-text="$t('instances.httptrace.chart.max_time')" />
46+
<td v-text="`${tooltipContent.maxTime}ms`" />
47+
</tr>
48+
<tr>
49+
<th v-text="$t('instances.httptrace.chart.avg_time')" />
50+
<td v-text="`${tooltipContent.avgTime}ms`" />
51+
</tr>
52+
</tbody>
5153
</table>
5254
</div>
5355
<svg class="trace-chart__svg" />

‎spring-boot-admin-server-ui/src/main/frontend/views/instances/liquibase/index.vue‎

Lines changed: 28 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -76,28 +76,34 @@
7676
>
7777
<td colspan="6">
7878
<table class="table is-fullwidth">
79-
<tr>
80-
<th v-text="$t('instances.liquibase.changelog')" />
81-
<td colspan="3" v-text="changeSet.changeLog" />
82-
<th v-text="$t('instances.liquibase.author')" />
83-
<td v-text="changeSet.author" />
84-
</tr>
85-
<tr>
86-
<th v-text="$t('instances.liquibase.checksum')" />
87-
<td v-text="changeSet.checksum" />
88-
<th v-text="$t('instances.liquibase.comments')" />
89-
<td colspan="3" v-text="changeSet.comments" />
90-
</tr>
91-
<tr>
92-
<th
93-
v-text="$t('instances.liquibase.execution_order')"
94-
/>
95-
<td v-text="changeSet.orderExecuted" />
96-
<th v-text="$t('instances.liquibase.execution_date')" />
97-
<td v-text="changeSet.dateExecuted" />
98-
<th v-text="$t('instances.liquibase.deployment_id')" />
99-
<td v-text="changeSet.deploymentId" />
100-
</tr>
79+
<tbody>
80+
<tr>
81+
<th v-text="$t('instances.liquibase.changelog')" />
82+
<td colspan="3" v-text="changeSet.changeLog" />
83+
<th v-text="$t('instances.liquibase.author')" />
84+
<td v-text="changeSet.author" />
85+
</tr>
86+
<tr>
87+
<th v-text="$t('instances.liquibase.checksum')" />
88+
<td v-text="changeSet.checksum" />
89+
<th v-text="$t('instances.liquibase.comments')" />
90+
<td colspan="3" v-text="changeSet.comments" />
91+
</tr>
92+
<tr>
93+
<th
94+
v-text="$t('instances.liquibase.execution_order')"
95+
/>
96+
<td v-text="changeSet.orderExecuted" />
97+
<th
98+
v-text="$t('instances.liquibase.execution_date')"
99+
/>
100+
<td v-text="changeSet.dateExecuted" />
101+
<th
102+
v-text="$t('instances.liquibase.deployment_id')"
103+
/>
104+
<td v-text="changeSet.deploymentId" />
105+
</tr>
106+
</tbody>
101107
</table>
102108
</td>
103109
</tr>

0 commit comments

Comments
 (0)