Customize Azion Console with 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.

View as Markdown

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 Applications list view to alert your users that they must create a domain to see 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 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>

You can use this function with the routes defined in the src/router/routes folder.

  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="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 application to launch online.
</InlineMessage>
</template>
<template #content>
...
  1. On the browser, access the localhost address and navigate to the 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.