How to integrate the Azion Console and the Azion API using the Console Kit

Azion Console Kit allows you to craft a custom Azion interface to fit your business needs. In this guide, you’ll learn how to show more information from the Azion API on the Console.

To integrate external APIs with the Azion Console interface, you can create a new API Axios service under src/services/axios, adapt each service as required, and follow the steps below.

Get data from the Azion API and show on the Console interface

In this example, you’ll modify a service in the Console to show two additional fields from the Azion API in the cache settings table of the edge application.

The goal is to show the TTL values for browser and edge cache, informed by the browser_cache_settings_maximum_ttl and cdn_cache_settings_maximum_ttl properties in the Cache Settings API. To do so:

1. Open the Console Kit project in your IDE.
2. Run azion dev to initialize a local development server.
3. In the src/services folder, locate the list-cache-settings-service.js and add the new properties to the map:

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,
    // initialize the following references based on the API fields
    browserCacheTtl: cacheSettings.browser_cache_settings_maximum_ttl,
    edgeCacheTtl: cacheSettings.cdn_cache_settings_maximum_ttl
  }))

  return {
    body: parseHttpResponse,
    statusCode: httpResponse.statusCode
  }
}

4. Now locate the Cache Settings list view and modify it as follows:

  const getColumns = computed(() => {
    return [
      {
        field: 'name',
        header: 'Origin Name'
      },
      {
        field: 'browserCache',
        header: 'Browser Cache'
      },
      // create the browser cache TTL column
      {
        field: 'browserCacheTtl',
        header: 'Browser Cache TTL'
      },
      {
        field: 'cdnCache',
        header: 'Edge Cache'
      },
      // create the edge cache TTL column
      {
        field: 'edgeCacheTtl',
        header: 'Edge Cache TTL'
      }
    ]
  })

5. On the browser, access the localhost address and navigate to the Edge Applications page.
6. Create an edge application or select an existing one.
7. Navigate to the Cache Settings tab. You should now see the new columns appear in the UI.
8. After you’re done, run azion deploy to launch the changes to the edge.

You can follow this same process to show additional API values by retrieving the property using the service and adding it to the table.