Skip to content

Commit 4f574df

Browse files
SteKoeSteKoe
authored
feat: replace sba-panel with sba-accordion for improved collapsible functionality on details page (#4640)
1 parent c9786cb commit 4f574df

File tree

14 files changed

+362
-144
lines changed

14 files changed

+362
-144
lines changed

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

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<template>
1818
<div
1919
:id="$attrs.id"
20-
class="shadow-sm border rounded break-inside-avoid mb-6"
20+
class="shadow-sm border rounded break-inside-avoid mb-4"
2121
:aria-expanded="$attrs.ariaExpanded"
2222
>
2323
<header
@@ -26,8 +26,8 @@
2626
v-sticks-below="headerSticksBelow"
2727
class="rounded-t flex justify-between px-4 pt-5 pb-5 border-b sm:px-6 items-center bg-white transition-all"
2828
>
29-
<h3 class="text-lg leading-6 font-medium text-gray-900">
30-
<button class="flex items-center" @click="$emit('title-click')">
29+
<h3 class="text-lg leading-6 font-medium text-gray-900 flex-1">
30+
<button class="flex items-center w-full" @click="$emit('title-click')">
3131
<slot v-if="'prefix' in $slots" name="prefix" />
3232
<span v-text="title" />
3333
<span
@@ -54,11 +54,14 @@
5454
</header>
5555
<div
5656
v-if="'default' in $slots"
57-
:class="{
58-
'rounded-t': !hasTitle,
59-
'rounded-b': !('footer' in $slots),
60-
}"
61-
class="border-gray-200 px-4 py-3 bg-white"
57+
:class="[
58+
$attrs.class,
59+
{
60+
'rounded-t': !hasTitle,
61+
'rounded-b': !('footer' in $slots),
62+
},
63+
]"
64+
class="px-4 py-3 bg-white"
6265
>
6366
<div :class="{ '-mx-4 -my-3': seamless }">
6467
<sba-loading-spinner v-if="loading" class="" size="sm" />
@@ -73,7 +76,8 @@
7376
</div>
7477
</template>
7578

76-
<script>
79+
<script lang="ts">
80+
import classNames from 'classnames';
7781
import { throttle } from 'lodash-es';
7882
7983
import SbaIconButton from '@/components/sba-icon-button';
@@ -84,6 +88,7 @@ import sticksBelow from '@/directives/sticks-below';
8488
export default {
8589
components: { SbaLoadingSpinner, SbaIconButton },
8690
directives: { sticksBelow },
91+
inheritAttrs: false,
8792
props: {
8893
title: {
8994
type: String,
@@ -113,6 +118,7 @@ export default {
113118
emits: ['close', 'title-click'],
114119
data() {
115120
return {
121+
classNames,
116122
headerTopValue: 0,
117123
onScrollFn: undefined,
118124
};

‎spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-cache.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,11 @@
1515
-->
1616

1717
<template>
18-
<sba-panel v-if="hasLoaded" :title="`Cache: ${cacheName}`">
18+
<sba-accordion
19+
v-if="hasLoaded"
20+
:id="`cache-details-panel__${instance.id}`"
21+
:title="`Cache: ${cacheName}`"
22+
>
1923
<sba-alert v-if="error" :error="error" :title="$t('term.fetch_failed')" />
2024
<dl
2125
v-if="current"
@@ -70,24 +74,24 @@
7074
</template>
7175
</dl>
7276
<cache-chart v-if="chartData.length > 0" :data="chartData" />
73-
</sba-panel>
77+
</sba-accordion>
7478
</template>
7579

7680
<script>
7781
import moment from 'moment';
7882
import { take } from 'rxjs/operators';
7983
8084
import sbaAlert from '@/components/sba-alert.vue';
81-
import sbaPanel from '@/components/sba-panel.vue';
8285
8386
import subscribing from '@/mixins/subscribing';
8487
import sbaConfig from '@/sba-config';
8588
import Instance from '@/services/instance';
8689
import { concatMap, delay, map, retryWhen, timer } from '@/utils/rxjs';
8790
import cacheChart from '@/views/instances/details/cache-chart';
91+
import SbaAccordion from '@/views/instances/details/sba-accordion.vue';
8892
8993
export default {
90-
components: { sbaAlert, sbaPanel, cacheChart },
94+
components: { SbaAccordion, sbaAlert, cacheChart },
9195
mixins: [subscribing],
9296
props: {
9397
instance: {

‎spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-datasource.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@
1515
-->
1616

1717
<template>
18-
<sba-panel
18+
<sba-accordion
1919
v-if="hasLoaded"
20+
:id="`health-datasource-panel__${instance.id}`"
2021
:title="
2122
$t('instances.details.datasource.title', { dataSource: dataSource })
2223
"
@@ -61,7 +62,7 @@
6162
/>
6263
</dl>
6364
<datasource-chart v-if="chartData.length > 0" :data="chartData" />
64-
</sba-panel>
65+
</sba-accordion>
6566
</template>
6667

6768
<script>
@@ -73,9 +74,10 @@ import subscribing from '@/mixins/subscribing';
7374
import sbaConfig from '@/sba-config';
7475
import Instance from '@/services/instance';
7576
import datasourceChart from '@/views/instances/details/datasource-chart';
77+
import SbaAccordion from '@/views/instances/details/sba-accordion.vue';
7678
7779
export default {
78-
components: { datasourceChart },
80+
components: { SbaAccordion, datasourceChart },
7981
mixins: [subscribing],
8082
props: {
8183
instance: {

‎spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-gc.vue‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,40 @@
1515
-->
1616

1717
<template>
18-
<sba-panel v-if="hasLoaded" :title="$t('instances.details.gc.title')">
18+
<sba-accordion
19+
v-if="hasLoaded"
20+
:id="`gc-details-panel__${instance.id}`"
21+
v-model="panelCollapsed"
22+
:title="$t('instances.details.gc.title')"
23+
>
24+
<template #title>
25+
<div
26+
class="ml-2 text-xs font-mono transition-opacity flex-1 justify-items-end"
27+
:class="{ 'opacity-0': !panelCollapsed }"
28+
>
29+
<ul class="flex gap-4">
30+
<li>
31+
<span class="block 2xl:inline">
32+
{{ $t('instances.details.gc.count_short') }}:
33+
</span>
34+
{{ current.count }}
35+
</li>
36+
<li>
37+
<span class="block 2xl:inline">
38+
{{ $t('instances.details.gc.time_spent_total_short') }}:
39+
</span>
40+
{{ current.total_time.asSeconds().toFixed(0) }}s
41+
</li>
42+
<li>
43+
<span class="block 2xl:inline">
44+
{{ $t('instances.details.gc.time_spent_max_short') }}:
45+
</span>
46+
{{ current.max.asSeconds().toFixed(0) }}s
47+
</li>
48+
</ul>
49+
</div>
50+
</template>
51+
1952
<sba-alert v-if="error" :error="error" :title="$t('term.fetch_failed')" />
2053

2154
<div v-if="current" class="flex w-full">
@@ -38,7 +71,7 @@
3871
<p v-text="`${current.max.asSeconds().toFixed(4)}s`" />
3972
</div>
4073
</div>
41-
</sba-panel>
74+
</sba-accordion>
4275
</template>
4376

4477
<script>
@@ -49,9 +82,11 @@ import subscribing from '@/mixins/subscribing';
4982
import sbaConfig from '@/sba-config';
5083
import Instance from '@/services/instance';
5184
import { concatMap, delay, retryWhen, timer } from '@/utils/rxjs';
85+
import SbaAccordion from '@/views/instances/details/sba-accordion.vue';
5286
import { toMillis } from '@/views/instances/metrics/metric';
5387
5488
export default {
89+
components: { SbaAccordion },
5590
mixins: [subscribing],
5691
props: {
5792
instance: {
@@ -60,6 +95,7 @@ export default {
6095
},
6196
},
6297
data: () => ({
98+
panelCollapsed: false,
6399
hasLoaded: false,
64100
error: null,
65101
current: null,

‎spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-health.vue‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,21 @@
1515
-->
1616

1717
<template>
18-
<sba-panel :title="$t('instances.details.health.title')" :loading="loading">
18+
<sba-accordion
19+
:id="`health-details-panel__${instance.id}`"
20+
v-model="panelCollapsed"
21+
:title="$t('instances.details.health.title')"
22+
:loading="loading"
23+
>
24+
<template #title>
25+
<sba-status-badge
26+
v-if="health.status"
27+
:status="health.status"
28+
class="ml-2 transition-opacity"
29+
:class="{ 'opacity-0': !panelCollapsed }"
30+
/>
31+
</template>
32+
1933
<template #actions>
2034
<router-link
2135
:to="{ name: 'journal', query: { instanceId: instance.id } }"
@@ -72,17 +86,18 @@
7286
</template>
7387
</div>
7488
</template>
75-
</sba-panel>
89+
</sba-accordion>
7690
</template>
7791

7892
<script lang="ts">
7993
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
8094
8195
import Instance from '@/services/instance';
8296
import healthDetails from '@/views/instances/details/health-details';
97+
import SbaAccordion from '@/views/instances/details/sba-accordion.vue';
8398
8499
export default {
85-
components: { FontAwesomeIcon, healthDetails },
100+
components: { SbaAccordion, FontAwesomeIcon, healthDetails },
86101
props: {
87102
instance: {
88103
type: Instance,
@@ -94,6 +109,7 @@ export default {
94109
loading: false,
95110
liveHealth: null,
96111
healthGroups: [],
112+
panelCollapsed: false,
97113
healthGroupOpenStatus: {} as {
98114
isOpen: boolean;
99115
collapsible: boolean;

‎spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-info.vue‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,21 @@
1515
-->
1616

1717
<template>
18-
<sba-panel :title="$t('instances.details.info.title')" :loading="loading">
18+
<sba-accordion
19+
:id="`info-details-panel__${instance.id}`"
20+
v-model="panelCollapsed"
21+
:title="$t('instances.details.info.title')"
22+
:loading="loading"
23+
>
24+
<template #title>
25+
<div
26+
class="ml-2 transition-opacity"
27+
:class="{ 'opacity-0': !panelCollapsed }"
28+
>
29+
({{ Object.keys(info).length }})
30+
</div>
31+
</template>
32+
1933
<sba-alert
2034
v-if="error"
2135
:error="error"
@@ -37,20 +51,23 @@
3751
v-text="$t('instances.details.info.no_info_provided')"
3852
/>
3953
</div>
40-
</sba-panel>
54+
</sba-accordion>
4155
</template>
4256

4357
<script>
4458
import Instance from '@/services/instance';
59+
import SbaAccordion from '@/views/instances/details/sba-accordion.vue';
4560
4661
export default {
62+
components: { SbaAccordion },
4763
props: {
4864
instance: {
4965
type: Instance,
5066
required: true,
5167
},
5268
},
5369
data: () => ({
70+
panelCollapsed: false,
5471
error: null,
5572
loading: false,
5673
liveInfo: null,

‎spring-boot-admin-server-ui/src/main/frontend/views/instances/details/details-memory.vue‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,25 @@
1515
-->
1616

1717
<template>
18-
<sba-panel
18+
<sba-accordion
1919
v-if="hasLoaded"
20+
:id="`memory-details-panel__${type}__${instance.id}`"
21+
v-model="panelCollapsed"
2022
:title="$t('instances.details.memory.title') + `: ${name}`"
2123
>
24+
<template #title>
25+
<div
26+
class="ml-2 text-xs font-mono transition-opacity flex-1 justify-items-end"
27+
:class="{ 'opacity-0': !panelCollapsed }"
28+
>
29+
<div class="flex">
30+
{{ prettyBytes(current.used) }} /
31+
{{ prettyBytes(current.committed) }} /
32+
{{ prettyBytes(current.max) }}
33+
</div>
34+
</div>
35+
</template>
36+
2237
<div>
2338
<sba-alert v-if="error" :error="error" :title="$t('term.fetch_failed')" />
2439

@@ -71,7 +86,7 @@
7186

7287
<MemChart v-if="chartData.length > 0" :data="chartData" />
7388
</div>
74-
</sba-panel>
89+
</sba-accordion>
7590
</template>
7691

7792
<script lang="ts">
@@ -85,10 +100,11 @@ import subscribing from '@/mixins/subscribing';
85100
import sbaConfig from '@/sba-config';
86101
import Instance from '@/services/instance';
87102
import MemChart from '@/views/instances/details/mem-chart.vue';
103+
import SbaAccordion from '@/views/instances/details/sba-accordion.vue';
88104
89105
export default defineComponent({
90106
name: 'DetailsMemory',
91-
components: { MemChart },
107+
components: { SbaAccordion, MemChart },
92108
mixins: [subscribing],
93109
props: {
94110
instance: {
@@ -101,6 +117,7 @@ export default defineComponent({
101117
},
102118
},
103119
data: () => ({
120+
panelCollapsed: true,
104121
hasLoaded: false,
105122
error: null,
106123
current: null,

0 commit comments

Comments
 (0)