How to customize the Azion Console interface using the Console Kit

Azion Console Kit allows you to craft a custom Azion interface to fit your business needs. In this guide, you’ll learn how to make some simple visual changes to the Azion Console.


Adding an interface component and creating a route function for navigation

In this example, you’ll add a new user interface (UI) component to a list view to draw attention to an important step of a workflow process for Console users.

You’ll add the InlineMessage and PrimeButton components to the Edge Applications list view to alert your users that they must create a domain to see edge applications online, with a button action that directs users to the create-domain route. To do so:

  1. Open the Console Kit project in your IDE.
  2. Run azion dev to initialize a local development server.
  3. In the src/views folder, locate the Edge Application list view and modify the code as follows:
src/views/EdgeApplications/ListView.vue
...
import { computed, ref } from 'vue'
// import statement for the InlineMessage component
import InlineMessage from 'primevue/inlinemessage'
// import statement for the PrimeButton component
import Illustration from '@/assets/svg/illustration-layers.vue'
// import statement for the router function
import { useRouter } from 'vue-router'
...
  1. In the constant declaration section of the code, create the router const to reference the router function:
src/views/EdgeApplications/ListView.vue
...
defineOptions({ name: 'list-edge-applications' })
// reference the router function for the button action
const router = useRouter()
...
  1. Create the navigateToDomains function that will be executed when the user clicks the PrimeButton before closing the <script> tag:
src/views/EdgeApplications/ListView.vue
...
// on push action to redirect user to create-domain route
function navigateToDomains() {
router.push({ name: 'create-domain' })
}
</script>
  1. Now add the elements to the layout of the list view inside the <template> tag:
src/views/EdgeApplications/ListView.vue
...
<template #heading>
<PageHeadingBlock pageTitle="Edge Applications"></PageHeadingBlock>
<!--- add the InlineMessage component and customize the message with the button --->
<InlineMessage
class="w-fit"
severity="warn"
>Remember to create a
<PrimeButton
link
size="small"
class="p-0"
@click="navigateToDomains"
>
Domain
</PrimeButton>
and select an edge application to launch online.
</InlineMessage>
</template>
<template #content>
...
  1. On the browser, access the localhost address and navigate to the Edge Applications page. You should see the InlineMessage element with a PrimeButton under the heading.
  2. After you’re done, run azion deploy to launch the changes to the edge.

Contributors