Personalize o Console da Azion com o Console Kit

O Azion Console Kit 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.

Ver como Markdown

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 Applications para alertar seus usuários de que eles devem criar um domínio para entregar 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 Applications 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>

Você pode usar esta função com as rotas definidas na pasta src/router/routes.

  1. Agora adicione os elementos ao layout da list view dentro da tag <template>:
src/views/EdgeApplications/ListView.vue
...
<template #heading>
<PageHeadingBlock pageTitle="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 application to launch online.
</InlineMessage>
</template>
<template #content>
...
  1. No navegador, acesse o localhost e navegue até a página 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.