reflect selected application in router url

Author: joshiste

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

@@ -89,22 +89,25 @@
  applications: {
  type: Array,
  default: () => []
+ },
+ selected: {
+ type: String,
+ default: null
  }
  },
  directives: {onClickaway},
  data: () => ({
- selected: null,
  errors: []
  }),
  methods: {
  select(name) {
- this.selected = name;
+ this.$router.push(`/applications/${name}`);
  },
  deselect() {
- this.selected = null;
+ this.$router.push('/applications');
  },
  showDetails(instance) {
- this.$router.push(`/instances/${instance.id}`)
+ this.$router.push(`/instances/${instance.id}`);
  },
  async unregister(item) {
  try {
@@ -118,106 +121,106 @@
 </script>
 
 <style lang="scss">
-  @import "~@/assets/css/utilities";
-
-  $list-background-color: $white !default;
-  $list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
-  $list-color: $text !default;
-
-  .applications-list-item {
-  background-color: $list-background-color;
-  box-shadow: $list-shadow;
-  color: $list-color;
-  max-width: 100%;
-
-  &--collapsed {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  cursor: pointer;
-  &:hover {
-  background-color: $white-bis;
-  }
-  }
+ @import "~@/assets/css/utilities";
+
+ $list-background-color: $white !default;
+ $list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
+ $list-color: $text !default;
+
+ .applications-list-item {
+ background-color: $list-background-color;
+ box-shadow: $list-shadow;
+ color: $list-color;
+ max-width: 100%;
+
+ &--collapsed {
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+ cursor: pointer;
+ &:hover {
+ background-color: $white-bis;
+ }
+ }
 
-  &--detailed {
-  display: flex;
-  flex-direction: column;
-  margin: ($gap / 2) 0;
-  }
+ &--detailed {
+ display: flex;
+ flex-direction: column;
+ margin: ($gap / 2) 0;
+ }
 
-  &__status {
-  width: 40px;
-  padding-left: ($gap / 2);
-  }
+ &__status {
+ width: 40px;
+ padding-left: ($gap / 2);
+ }
 
-  &__text {
-  padding-left: ($gap / 2);
-  display: inline-flex;
-  align-items: flex-start;
-  flex-direction: column;
-  flex-grow: 1;
-  flex-basis: 0;
-  }
+ &__text {
+ padding-left: ($gap / 2);
+ display: inline-flex;
+ align-items: flex-start;
+ flex-direction: column;
+ flex-grow: 1;
+ flex-basis: 0;
+ }
 
-  &__secondary {
-  color: $grey-light;
-  font-size: $size-6;
-  }
+ &__secondary {
+ color: $grey-light;
+ font-size: $size-6;
+ }
 
-  &__actions {
-  justify-self: end;
-  padding-right: ($gap / 2);
-  opacity: 0;
-  transition: all $easing $speed;
-  will-change: opacity;
-  }
+ &__actions {
+ justify-self: end;
+ padding-right: ($gap / 2);
+ opacity: 0;
+ transition: all $easing $speed;
+ will-change: opacity;
+ }
 
-  *:hover > &__actions {
-  opacity: 1;
-  }
+ *:hover > &__actions {
+ opacity: 1;
+ }
 
- &__header {
- display: flex;
- height: 48px;
- align-items: center;
- overflow: hidden;
- cursor: pointer;
-
- &-text {
- color: $grey-darker;
- font-weight: $weight-semibold;
- padding-left: $gap;
- flex-grow: 1;
- }
-
- &-actions {
- justify-self: end;
- padding-right: $gap;
- }
- }
+ &__header {
+ display: flex;
+ height: 48px;
+ align-items: center;
+ overflow: hidden;
+ cursor: pointer;
+
+ &-text {
+ color: $grey-darker;
+ font-weight: $weight-semibold;
+ padding-left: $gap;
+ flex-grow: 1;
+ }
 
-  &__instance-list {
-  list-style: none;
-  margin: 0 ($gap / 2) ($gap / 2) ($gap / 2);
-  padding: 0;
-  }
+ &-actions {
+ justify-self: end;
+ padding-right: $gap;
+ }
+ }
 
- &__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;
- }
- }
+ &__instance-list {
+ list-style: none;
+ margin: 0 ($gap / 2) ($gap / 2) ($gap / 2);
+ padding: 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>

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

@@ -52,7 +52,7 @@
  </div>
  <div v-for="group in statusGroups" :key="group.status">
  <p class="heading" v-text="group.status"/>
- <applications-list :applications="group.applications"/>
+ <applications-list :applications="group.applications" :selected="selected"/>
  </div>
  <div v-if="statusGroups.length === 0">
  <p class="is-muted">No applications registered.</p>
@@ -73,7 +73,11 @@
  default: () => [],
  },
  error: {
- type: Object,
+ type: null,
+ default: null
+ },
+ selected: {
+ type: String,
  default: null
  }
  },
@@ -105,7 +109,8 @@
 
  export default component;
  export const view = {
- path: '/applications',
+ path: '/applications/:selected?',
+ props: true,
  name: 'applications',
  handle: handle,
  order: 0,