Making request to Spring Boot Admin server from custom view?

Question

I'm trying to add a custom view with some administrative utilities to Spring Boot Admin. The idea is to implement these as endpoints in Springboot Admin and call these endpoints from my custom view, but I don't know how to make a call to the server itself.

When a custom view has parent: 'instances' it will get an axios client for connecting to the current instance, but since the view I'm building isn't tied to a specific instance it doesn't have this. I'm aware I can install axios as a dependency, but I'd like to avoid that if possible to reduce build times. Since SBA itself depends on axios it seems I shouldn't have to install it myself.

Based on this sample, this is what I have right now:

index.js

/* global SBA */
import example from './example';
import exampleEndpoint from './example-endpoint';

SBA.use({
    install({viewRegistry}) {
        viewRegistry.addView({
            name: 'example',
            path: '/example',
            component: example,
            label: 'Example',
            order: 1000,
        });
    }
});

example.vue

<template>
    <div>
        <h1>Example View</h1>
        <p>
            <b>GET /example:</b> <span v-text="exampleResponse" />
        </p>
    </div>
</template>

<script>
export default {
    props: {
        applications: {
            type: Array,
            required: true
        }
    },
    data: () => ({ exampleResponse: "No response" }),
    async created() {
        const response = await this.axios.get("example");
        this.exampleResponse = response.response;
    },
};
</script>

ExampleController.kt

@RestController
@RequestMapping("/example")
class ExampleController {
    @GetMapping
    fun helloWorld() = mapOf("response" to "Hello world!")
}

Console says that it can't read property get of undefined (i.e. this.axios is undefined). Text reads "GET /example: No response"

Answer 1

Based on the code given, it looks like you don't have axios initialized to how you want to use it.

You're calling it via this.axios but it's not in your component i.e

data() {
  return {
    axios: require("axios") // usually this is imported at the top
  }
}

or exposed globally i.e

Vue.prototype.axios = require("axios")

You can simply just import axios and reference it.

<script>
import axios from 'axios';

export default {
  created() {
    axios.get()
  }
}
</script>