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
- 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>
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>
$ 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>
$ 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:
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