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

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

4. Na seção de declaração de constantes, crie a const router para referenciar a função do route:

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

  // referencia a função  router para a ação do botão
  const router = useRouter()
  ...

5. Crie a função navigateToDomains que será executada quando o usuário clicar no PrimeButton antes de fechar a tag <script>:

  ...

  // ação on push action para redirecionar o usuário para a rota create-domain
  function navigateToDomains() {
    router.push({ name: 'create-domain' })
  }
</script>

6. Agora adicione os elementos ao layout da list view dentro da tag <template>:

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

7. 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.
8. Depois de terminar, execute azion deploy para lançar as alterações no edge.