AIOps

AIOps

Join this online group to communicate across IBM product users and experts by sharing advice and best practices with peers and staying up to date regarding product enhancements.

 View Only

Cloud Pak for AIOps 4 tips: install the dashboard extension toolkit

By Zane Bray posted Wed April 16, 2025 12:21 PM

  

IBM Cloud Pak for AIOps (AIOps) comes with a set of powerful user interfaces that enable operations teams to be more efficient and more effective. There are usually requirements in any organisation however to create custom dashboards. In addition to IBM Cognos Analytics for dash-boarding and reporting, AIOps also comes with a built-in component called the dashboard extension toolkit. It is available as a Github repository, which can be cloned to your local environment, customised, then uploaded to your AIOps system via an API. It comes with a variety of different widgets that enable you to build effective custom dashboards for operations use. Using this approach, administrators can construct and deliver custom dashboards, as needed by the organisation, in a convenient git-ops method of delivery.

This blog goes through the steps required to install the toolkit, and the construct an example dashboard.

The general procedure for deploying the Dashboard Extension Toolkit is:

  • Log in to AIOps and generate an API key
  • Log in to Github and go to the dashboard extension toolkit repository
  • Create your own fork of the code
  • Clone your fork to your local workstation
  • Create a target file that contains your AIOps system details
  • Enable the dashboard extension on your AIOps deployment
  • Deploy the example dashboards

The instructions assume you will be executing the commands and deploying the dashboards to AIOps from your workstation or laptop.

NOTE: The installation steps are also documented in the extensions repository of the Github repository referenced above.

PREREQUISITES

You will need to install/create the following items before you begin:

  • Install Cloud Pak for AIOps
  • Install the OpenShift CLI (oc) utility
  • Create a Github account
  • Install Node.js version 18 or greater on your workstation
  • Install Visual Studio Code (optional)

GENERATE AN AIOPS API KEY

Log in to your AIOps system as an administrator (eg. cpadmin), click on the user icon in the top-right corner of the browser window, and click on "Profile and settings". Next, click on "API key" → "Generate new key" in the top-right corner of the browser window. You will see a pop-up with a new API key. Take a copy of it and save it in a safe place. You will need it to upload your dashboards or any subsequent updates you make in future.

CLONE THE REPOSITORY

This step involves logging into Github, creating your own fork of the repository, and pulling it down to your local workstation.

You will want to create your own fork so that you can save future customisations.

  • From your fork, click Code → SSH, then copy the command from the pop-up box
  • Create a directory on your local workstation and change into it:
$ mkdir extensions-toolkit
$ cd extensions-toolkit
$ git auth login
...
  • Create a local copy (clone) of your forked code on your local workstation and change into the root directory of the cloned repository - for example:
$ git clone git@github.com:zanebray/aiops-ui-extension-template.git
...
$ cd aiops-ui-extension-template

DOWNLOAD AND INSTALL VISUAL STUDIO CODE (OPTIONAL)

For managing the local fork of the repository code, it is suggested to use Visual Studio Code as it makes the visualisation of the file set easier as well as crafting your own dashboards and customisations. It is only optional however, as all the steps could be completed from the command line and your favourite text editor.

  • After installation, launch Visual Studio Code from the root directory of the cloned repository:
$ code .

CONFIGURE THE TARGET FILE

This step involves the creation of a target file which defines the target AIOps instance for the deployment of the toolkit.

  • Create a file in the root directory of the cloned repository called: target.json containing the following:
{
"url": "https://cpd-aiops.apps.yourcluster.cp.yourdomain.com/",
"username": "cpadmin",
"apiKey": "NEebLdDbq8ar6cfnLy2WC6Af1234567890",
"tenantId": "cfd95b7e-3bc7-4006-a4a8-a73a79c71255",
"bundleName": "alerts-examples"
}
  • The url will be the base URL of your AIOps system - for example, copy this from the login screen
  • The username will usually be cpadmin but could be any administrative username
  • The apiKey will be the one you generated earlier via the AIOps GUI
  • The tenantId will be as the above - no need to change it
  • The bundleName will be as the above: "alerts-examples" - no need to change it
FOR OPENSHIFT ENVIRONMENTS

If you are running AIOps on an OpenShift cluster, you need to complete this additional section.

  • Log in to your OpenShift cluster as kubeadmin or a user with administrative permissions
  • Click on your username in the top-right corner of your browser window: menu: "Copy login command"
  • Copy the command under: "Log in with this token" - for example:
oc login --token=sha256~fFi87AG5UmX1nPgvLG_QmZNRcWQGTZL1234567890 --server=https://api.aiops-4.cp.fyre.ibm.com:6443
  • Paste the above command into your command line terminal to authenticate with your OpenShift cluster
  • Run the following command against your OpenShift cluster:
oc patch aiopsui aiopsui-instance --type merge \
-p '{"spec":{"container":{"uiBundleApi":{"image":{"pullSecret":"YOUR PULL SECRET"}}}}}' \
-n <AIOps-namespace>
  • Example:
oc patch aiopsui aiopsui-instance --type merge \
-p '{"spec":{"container":{"uiBundleApi":{"image":{"pullSecret":"ibm-aiops-pull-secret"}}}}}' \
-n aiops

ENABLE THE DASHBOARDS EXTENSION

This set of steps enables the dashboard extension feature on your cluster.

  • Install any needed dependencies:
npm i
  • Enable the dashboards extension:
npm run enable -- -n <AIOps-namespace>
  • Example output:
$ npm run enable -- -n aiops

> @ibm/aiops-ui-extension-template@1.0.0 enable
> node ./enable.mjs -n aiops

Creating config map ...
Recycling pods ...
Waiting for 2 of 3 pods ...
...
Waiting for 1 of 3 pods ... ...
All pods are ready. $
  • When this step has completed, you should see the aiops-ir-ui-bundle-api pods in a Running 1/1 state:
$ oc get pods | grep aiops-ir-ui-bundle-api
aiops-ir-ui-bundle-api-78b554bf69-9md7j                           1/1     Running     0               2d21h
aiops-ir-ui-bundle-api-78b554bf69-lznnw                           1/1     Running     0               2d21h
aiops-ir-ui-bundle-api-78b554bf69-r7p64                           1/1     Running     0               2d21h
$

DEPLOY THE EXAMPLE DASHBOARDS

This final set of steps enables the dashboard extension feature on your cluster.

  • Use the following command to deploy the dashboards contained in the local repository to your AIOps cluster:
npm run deploy -- -n <AIOps namespace>
  • Example output:
$ npm run deploy -- -n aiops
> @ibm/aiops-ui-extension-template@1.0.0 deploy > npm-run-all build upload "examples -- {@}" -- -n aiops
> @ibm/aiops-ui-extension-template@1.0.0 build > npm-run-all clean webpack-build
> @ibm/aiops-ui-extension-template@1.0.0 clean > rimraf dist
> @ibm/aiops-ui-extension-template@1.0.0 webpack-build > webpack build --config webpack.config.js --mode production
Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. More info: https://sass-lang.com/d/legacy-js-api Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. More info: https://sass-lang.com/d/legacy-js-api Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. More info: https://sass-lang.com/d/legacy-js-api Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. More info: https://sass-lang.com/d/legacy-js-api Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. More info: https://sass-lang.com/d/legacy-js-api Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. More info: https://sass-lang.com/d/legacy-js-api Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. More info: https://sass-lang.com/d/legacy-js-api Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. More info: https://sass-lang.com/d/legacy-js-api assets by status 14.6 MiB [big] asset 904.alerts-examples-bundle.js 10.5 MiB [emitted] [minimized] [big] (id hint: vendors) asset 721.alerts-examples-bundle.js 1.41 MiB [emitted] [minimized] [big] (id hint: vendors) asset 823.alerts-examples-bundle.js 1.37 MiB [emitted] [minimized] [big] (id hint: vendors) asset 740.alerts-examples-bundle.js 887 KiB [emitted] [minimized] [big] (id hint: vendors) asset alerts-examples-bundle.js 472 KiB [emitted] [minimized] [big] (name: main) + 10 assets orphan modules 4.34 MiB [orphan] 376 modules runtime modules 8.68 KiB 13 modules cacheable modules 5.56 MiB modules by path ./src/ 145 KiB modules by path ./src/components/ 118 KiB 26 modules modules by path ./src/panels/*.ts 7.01 KiB ./src/panels/sample.panel.ts 508 bytes [built] [code generated] + 7 modules modules by path ./src/helpers/*.ts 17.2 KiB ./src/helpers/useQuery.ts 5.89 KiB [built] [code generated] ./src/helpers/getStatusGroupCounts.ts 2.91 KiB [built] [code generated] + 3 modules ./src/index.js 1.86 KiB [built] [code generated] ./src/app/createPanel.tsx 476 bytes [built] [code generated] modules by path ./node_modules/ 5.42 MiB 38 modules WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: alerts-examples-bundle.js (472 KiB) 904.alerts-examples-bundle.js (10.5 MiB) 721.alerts-examples-bundle.js (1.41 MiB) 740.alerts-examples-bundle.js (887 KiB) 823.alerts-examples-bundle.js (1.37 MiB) WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB).
This can impact web performance. Entrypoints: main (472 KiB) alerts-examples-bundle.js webpack 5.98.0 compiled with 2 warnings in 33927 ms > @ibm/aiops-ui-extension-template@1.0.0 upload > node ./deploy.mjs Logged into cluster and ready to upload 📡 Initiating bundle upload 🚀 Bundle uploaded successfully! 🎉 > @ibm/aiops-ui-extension-template@1.0.0 examples > node ./examples.mjs -n aiops Creating examples... aiopsuiextension.consoleui.aiops.ibm.com/aiopsuiextension-sample created All done! You might need to wait a minute until the examples are ready. $
  • Wait a couple of minutes
  • Log out and log back in to AIOps to refresh your menus
  • You should see the Example dashboards now present and available in the menu:

  • Example dashboard:

You can now view the example dashboards as well as begin to create your own. Details are included in the repository documentation to help you understand the dashboard extension framework and to help you proceed from development to deployment.

Documentation link

0 comments
15 views

Permalink