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:

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

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