Como integrar o Console da Azion e a API 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 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:

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

4. Agora localize a list view Cache Settings e modifique-a da seguinte forma:

  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'
      }
    ]
  })

5. No navegador, acesse o endereço localhost e navegue até a página Applications.
6. Crie uma application ou selecione uma existente.
7. Navegue até a aba Cache Settings. Agora você deve ver as novas colunas aparecerem na interface.
8. 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.