Skip to content

S
spring-boot-admin
Commit ce430e29 by Johannes Edmeier
Options

reflect selected application in router url

parent 6ba113e8
Showing with 107 additions and 99 deletions
spring-boot-admin-server-ui/src/main/frontend/views/applications/applications-list.vue
...@@ -89,22 +89,25 @@ ...@@ -89,22 +89,25 @@
applications: { applications: {
type: Array, type: Array,
default: () => [] default: () => []
},
selected: {
type: String,
default: null
} }
}, },
directives: {onClickaway}, directives: {onClickaway},
data: () => ({ data: () => ({
selected: null,
errors: [] errors: []
}), }),
methods: { methods: {
select(name) { select(name) {
this.selected = name; this.$router.push(`/applications/${name}`);
}, },
deselect() { deselect() {
this.selected = null; this.$router.push('/applications');
}, },
showDetails(instance) { showDetails(instance) {
this.$router.push(`/instances/${instance.id}`) this.$router.push(`/instances/${instance.id}`);
}, },
async unregister(item) { async unregister(item) {
try { try {
...@@ -118,106 +121,106 @@ ...@@ -118,106 +121,106 @@
</script> </script>
<style lang="scss"> <style lang="scss">
@import "~@/assets/css/utilities"; @import "~@/assets/css/utilities";
$list-background-color: $white !default; $list-background-color: $white !default;
$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default; $list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
$list-color: $text !default; $list-color: $text !default;
.applications-list-item { .applications-list-item {
background-color: $list-background-color; background-color: $list-background-color;
box-shadow: $list-shadow; box-shadow: $list-shadow;
color: $list-color; color: $list-color;
max-width: 100%; max-width: 100%;
&--collapsed { &--collapsed {
display: flex; display: flex;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: $white-bis; background-color: $white-bis;
} }
} }
&--detailed { &--detailed {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: ($gap / 2) 0; margin: ($gap / 2) 0;
} }
&__status { &__status {
width: 40px; width: 40px;
padding-left: ($gap / 2); padding-left: ($gap / 2);
} }
&__text { &__text {
padding-left: ($gap / 2); padding-left: ($gap / 2);
display: inline-flex; display: inline-flex;
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
flex-basis: 0; flex-basis: 0;
} }
&__secondary { &__secondary {
color: $grey-light; color: $grey-light;
font-size: $size-6; font-size: $size-6;
} }
&__actions { &__actions {
justify-self: end; justify-self: end;
padding-right: ($gap / 2); padding-right: ($gap / 2);
opacity: 0; opacity: 0;
transition: all $easing $speed; transition: all $easing $speed;
will-change: opacity; will-change: opacity;
} }
*:hover > &__actions { *:hover > &__actions {
opacity: 1; opacity: 1;
} }
&__header { &__header {
display: flex; display: flex;
height: 48px; height: 48px;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
&-text { &-text {
color: $grey-darker; color: $grey-darker;
font-weight: $weight-semibold; font-weight: $weight-semibold;
padding-left: $gap; padding-left: $gap;
flex-grow: 1; flex-grow: 1;
} }
&-actions {
justify-self: end;
padding-right: $gap;
}
}
&__instance-list { &-actions {
list-style: none; justify-self: end;
margin: 0 ($gap / 2) ($gap / 2) ($gap / 2); padding-right: $gap;
padding: 0; }
} }
&__instance { &__instance-list {
display: flex; list-style: none;
height: 48px; margin: 0 ($gap / 2) ($gap / 2) ($gap / 2);
overflow: hidden; padding: 0;
background-color: #fff;
align-items: center;
cursor: pointer;
&:hover {
background-color: $white-bis;
}
& + & {
border-top: 1px solid rgba(0, 0, 0, .12);
margin-top: 0;
}
}
} }
&__instance {
display: flex;
height: 48px;
overflow: hidden;
background-color: #fff;
align-items: center;
cursor: pointer;
&:hover {
background-color: $white-bis;
}
& + & {
border-top: 1px solid rgba(0, 0, 0, .12);
margin-top: 0;
}
}
}
</style> </style>
spring-boot-admin-server-ui/src/main/frontend/views/applications/index.vue
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
</div> </div>
<div v-for="group in statusGroups" :key="group.status"> <div v-for="group in statusGroups" :key="group.status">
<p class="heading" v-text="group.status"/> <p class="heading" v-text="group.status"/>
<applications-list :applications="group.applications"/> <applications-list :applications="group.applications" :selected="selected"/>
</div> </div>
<div v-if="statusGroups.length === 0"> <div v-if="statusGroups.length === 0">
<p class="is-muted">No applications registered.</p> <p class="is-muted">No applications registered.</p>
...@@ -73,7 +73,11 @@ ...@@ -73,7 +73,11 @@
default: () => [], default: () => [],
}, },
error: { error: {
type: Object, type: null,
default: null
},
selected: {
type: String,
default: null default: null
} }
}, },
...@@ -105,7 +109,8 @@ ...@@ -105,7 +109,8 @@
export default component; export default component;
export const view = { export const view = {
path: '/applications', path: '/applications/:selected?',
props: true,
name: 'applications', name: 'applications',
handle: handle, handle: handle,
order: 0, order: 0,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment