Integre o Console e a API com 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 mostrar mais informações da API da Azion no Console.

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 mostrar mais informações da API da Azion no Console.

Para integrar APIs externas com a interface do Console da Azion, você pode criar um novo serviço Axios API em src/services/axios, adaptar cada serviço conforme necessário e seguir as etapas abaixo.

Obtenha dados da API da Azion e mostre na interface do Console

Neste exemplo, você modificará um serviço no Console para mostrar dois campos adicionais da API da Azion na tabela de configurações de cache da application.

O objetivo é mostrar os valores TTL para cache do navegador e cache do edge, informados pelas propriedades browser_cache_settings_maximum_ttl e cdn_cache_settings_maximum_ttl na API de Cache Settings. Para fazer isso:

  1. Abra o projeto do Console Kit no seu IDE.
  2. Execute azion dev para inicializar um servidor de desenvolvimento local.
  3. Na pasta src/services, localize o list-cache-settings-service.js e adicione as novas propriedades ao mapa:
src/services/edge-application-cache-settings-services/list-cache-settings-service.js
const adapt = (httpResponse) => {
const parseHttpResponse = httpResponse.body.results.map((cacheSettings) => ({
id: cacheSettings.id.toString(),
name: cacheSettings.name,
browserCache: cacheSettings.browser_cache_settings,
cdnCache: cacheSettings.cdn_cache_settings,
// inicializa as seguintes referências baseado nos campos da API
browserCacheTtl: cacheSettings.browser_cache_settings_maximum_ttl,
edgeCacheTtl: cacheSettings.cdn_cache_settings_maximum_ttl
}))
return {
body: parseHttpResponse,
statusCode: httpResponse.statusCode
}
}
  1. Agora localize a list view Cache Settings e modifique-a da seguinte forma:
src/views/EdgeApplicationsCacheSettings/ListView.vue
const getColumns = computed(() => {
return [
{
field: 'name',
header: 'Origin Name'
},
{
field: 'browserCache',
header: 'Browser Cache'
},
// cria a coluna browser cache TTL
{
field: 'browserCacheTtl',
header: 'Browser Cache TTL'
},
{
field: 'cdnCache',
header: 'Cache'
},
// cria a coluna cache TTL
{
field: 'edgeCacheTtl',
header: 'Cache TTL'
}
]
})
  1. No navegador, acesse o endereço localhost e navegue até a página Applications.
  2. Crie uma application ou selecione uma existente.
  3. Navegue até a aba Cache Settings. Agora você deve ver as novas colunas aparecerem na interface.
  4. Depois de terminar, execute azion deploy para lançar as alterações no edge.

Você pode seguir o mesmo processo para mostrar valores adicionais da API, recuperando a propriedade usando o serviço e adicionando-a à tabela.