IBM Cloud Functions Activations Dashboard: A New User Experience

3 min read

We’re excited to announce an improved UI and UX to debug your Cloud Function activations.

Formerly known as IBM Bluemix Functions, the IBM Cloud Functions service has been an integral part of the IBM Cloud portfolio for several years. Based on Apache OpenWhisk, the service is a polyglot Functions-as-a-Service (FaaS) programming platform for developing lightweight code that scalably executes on demand. To monitor the outcome of your code and debug possible errors, the service provides a dashboard that shows an overview of past and recent activations of any actions and triggers within a certain namespace.

The old dashboard

To get a basic overview, the old dashboard provided a combination of three data windows and an option window. The activations summary chart (bar chart) displayed the accumulated number of activations for every action and trigger separated by color to show successful and failed activations. One of the main problems was that the activations within the bar chart were not sorted chronologically (as it was in the adjacent activations log accordion). In addition, the overall design did not match the current Carbon Design Guidelines, and the User Experience was misleading. The following image shows the old state of the dashboard:

The following image shows the old state of the dashboard:

A new look and feel with added functionality

For improvements in several areas, the following changes were implemented in the new dashboard. This image shows the current state of the dashboard:

For improvements in several areas, the following changes were implemented in the new dashboard. This image shows the current state of the dashboard:

The following changes and updates have been implemented:

  • Uses current Carbon Design components, colors and icons.
  • Restructures the filtering options and adds a bigger refresh button for improved visibility.
  • Replaces the multiselect components with filterable multiselect components.
  • Removes the hard-coded and invisible data refresh with an adjustable and visible auto refresh option.
  • Sorts the data in every graph in a chronological and synced-up order.
  • Improves warning and error messages.
  • Adds a better line break to display logs in the preview accordion.
  • Improves the extend window function by extending the window vertically to full screen.
  • Removes the timeline graph due to limited functionality and bad overview.
  • Improves accessibility features.
  • Adds a fully functional dark mode.
  • Improves responsive design for tablet and mobile usage.

Dark mode (preview)

The new dashboard is also shipped with a full working dark mode, which becomes available as soon as dark mode is available in the IBM Cloud:

The new dashboard is also shipped with a full working dark mode, which becomes available as soon as dark mode is available in the IBM Cloud:

How to use actions and the new dashboard

Creating an action

First, you need to create an IAM namespace. After you have completed this step, navigate to the Actions option in the menu on the left side. By clicking the Create button, you can select either individual entities or starter templates:

After you have completed this step, navigate to the Actions option in the menu on the left side. By clicking the Create button, you can select either individual entities or starter templates:

Here, you select Action. On the next screen, you will be asked for an action name, package and a runtime. For the name, you can use anything you like. For the package, use the Default Package, and for the runtime, choose Node.js 12. Proceed with the Next button and the action is created.

Invoking the action

The code editor for editing the code greets you with a short example that can be executed immediately. To do this, click on the Invoke button in the upper right corner. A window called Activations will open, showing the latest information about your activation:

To do this, click on the Invoke button in the upper right corner. A window called Activations will open, showing the latest information about your activation:

Navigating to the dashboard

Once all these steps have been successfully completed, you can switch to our activation dashboard. To do this, click on Functions in the top left corner of the bread-crumb menu to get back to the IBM Cloud Functions overview page. Now you can select the Activations Dashboard from the menu on the left. The action you just accessed should already be displayed in both charts. If not, you can click on the Refresh button in the upper-right corner.

Accessing the response

To see the output of your activation, you can click on the corresponding accordion tab to open the response object. If the response is only partially visible, you can see the full JSON response by clicking on the link: open complete activation as JSON:

To see the output of your activation, you can click on the corresponding accordion tab to open the response object. If the response is only partially visible, you can see the full JSON response by clicking on the link: open complete activation as JSON:

Links and references

Be the first to hear about news, product updates, and innovation from IBM Cloud