Como personalizar a interface do Console da Azion usando o Console Kit

O Console Kit da Azion permite que você crie uma interface Azion personalizada para atender às necessidades do seu negócio. Neste guia, você aprenderá a fazer algumas alterações visuais simples no Console da Azion.


Adicione um componente de interface e crie uma função de route para navegação

Neste exemplo, você adicionará um novo componente de interface de usuário (UI) a uma list view para chamar a atenção para uma etapa importante de um processo de fluxo de trabalho para os usuários do Console.

Você adicionará os componentes InlineMessage e PrimeButton à list view de Edge Applications para alertar seus usuários de que eles devem criar um domínio para entregar edge applications online, com uma ação de botão que direciona os usuários para a rota create-domain. Para fazer isso:

  1. Abra o projeto do Console Kit na sua IDE.
  2. Execute azion dev para inicializar um servidor de desenvolvimento local.
  3. Na pasta src/views, localize a list view de Edge Application e modifique o código conforme a seguir:
src/views/EdgeApplications/ListView.vue
...
import { computed, ref } from 'vue'
// import statement para o componente InlineMessage
import InlineMessage from 'primevue/inlinemessage'
// import statement para o componente PrimeButton
import Illustration from '@/assets/svg/illustration-layers.vue'
// import statement para a função do router
import { useRouter } from 'vue-router'
...
  1. Na seção de declaração de constantes, crie a const router para referenciar a função do route:
src/views/EdgeApplications/ListView.vue
...
defineOptions({ name: 'list-edge-applications' })
// referencia a função router para a ação do botão
const router = useRouter()
...
  1. Crie a função navigateToDomains que será executada quando o usuário clicar no PrimeButton antes de fechar a tag <script>:
src/views/EdgeApplications/ListView.vue
...
// ação on push action para redirecionar o usuário para a rota create-domain
function navigateToDomains() {
router.push({ name: 'create-domain' })
}
</script>
  1. Agora adicione os elementos ao layout da list view dentro da tag <template>:
src/views/EdgeApplications/ListView.vue
...
<template #heading>
<PageHeadingBlock pageTitle="Edge Applications"></PageHeadingBlock>
<!--- adiciona o componente InlineMessage e personaliza a mensagem com o 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. No navegador, acesse o localhost e navegue até a página Edge Applications. Você deve ver o elemento InlineMessage com um PrimeButton abaixo do título.
  2. Depois de terminar, execute azion deploy para lançar as alterações no edge.

Contribuidores