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.

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:

Open the Console Kit project in your IDE.
Run azion dev to initialize a local development server.
In the src/views folder, locate the Edge Application list view and modify the code as follows:

  ...
  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'
  ...

In the constant declaration section of the code, create the router const to reference the router function:

  ...
  defineOptions({ name: 'list-edge-applications' })

  // reference the router function for the button action
  const router = useRouter()
  ...

Create the navigateToDomains function that will be executed when the user clicks the PrimeButton before closing the <script> tag:

  ...

  // on push action to redirect user to create-domain route
  function navigateToDomains() {
    router.push({ name: 'create-domain' })
  }
</script>

Now add the elements to the layout of the list view inside the <template> tag:

    ...
    <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>
    ...

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.
After you’re done, run azion deploy to launch the changes to the edge.

Contributors

Adding an interface component and creating a route function for navigation