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

I'm not sure if this is the best way to do it, but it is a way.

I noticed that I do have access to the desired axios instance within the SBA.use { install(...) { } } block, and learned that this can be passed as a property down to the view.

index.js

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

SBA.use({
    install({viewRegistry, axios}) {
        viewRegistry.addView({
            name: 'example',
            path: '/example',
            component: example,
            label: 'Example',
            order: 1000,
            // this is where we pass it down with the props
            // first part is the name, second is the value
            props: { "axios": axios },
        });
    }
});

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 },
        // this is where we retrieve the prop. the name of the field should
        // correspond to the name given above
        axios: { type: Object, required: true },
    },
    data: () => ({
        exampleResponse: "No response",
    }),
    async created() {
        // Now we can use our axios instance! And it will be correctly
        // configured for talking to Springboot Admin
        this.axios.get("example")
            .then(r => { this.exampleResponse = r.data.response; })
            .catch(() => { this.exampleResponse = "Request failed!" });
    },
};
</script>