How to build your own Operational Dashboard

This guide provides an overview of how to create your own Operational Dashboard; however, this approach is legacy and is not recommended moving forward. Please contact your client representative or project manager to get some information and guidance from our UI team on how to proceed.

Installing Angular CLI

Install the CLI using the npm package manager:

npm install -g @angular/cli

Update your .npmrc to work with yarn.

Open your .npmrc and make sure you have the extra lines below with the relevant auth token supplied.

@iconsolutions:registry=https://nexus.ipf.iconsolutions.com/repository/ipf-npm/
//nexus.ipf.iconsolutions.com/repository/:_authToken={AuthToken}
//nexus.ipf.iconsolutions.com/repository/ipf-npm/:_authToken={AuthToken}

Creating a new application

To create, build, and serve a new application:

Navigate to the parent directory where you want your new application to reside.
Run the following commands to create, build, and launch a new Angular project:

ng new my-first-project
cd my-first-project
ng serve

Note: You can also provide additional options to the ng new command. For more details, refer to the Angular CLI official documentation.

Open your browser and go to localhost:4200/. This opens your new application’s default landing page. The ng serve command starts a local development server that automatically refreshes when you make source code changes.

For more information, refer to the official Angular documentation: angular.io/cli/new.

Customising your application

Adding modules

To install any of the @iconsolutions modules, you need to run npm install @iconsolutions/{module-name}. For example, to install the ODS module, run: npm install @iconsolutions/ods

Here is a list of available modules:

Adding routes

To add routes for the installed modules, you need to modify the routing configuration of your application.

Navigate to my-first-project/src/app/app.module.ts and add the routes to the modules you installed in the previous step. Example:

    const routes: Routes = [
            {
                path: 'ods',
                data: { roles: ['ROLE_PAYMENT'] },
                canActivate: [RoleGuard],
                loadChildren: () => import('@iconsolutions/ods').then((m) => m.OdsModule)
            },
            {
                path: 'version-info',
                loadChildren: () => import('@iconsolutions/version-info').then((m) => m.VersionInfoModule)
            },
            {
                path: 'cluster-health',
                loadChildren: () => import('@iconsolutions/cluster-health').then((m) => m.ClusterHealthModule)
            },
            {
                path: 'processing-settings',
                loadChildren: () => import('@iconsolutions/processing-settings').then((m) => m.ProcessingSettingsModule)
            },
            {
                path: 'audit',
                canActivate: [RoleGuard],
                data: { roles: ['ROLE_AUDIT'] },
                loadChildren: () => import('@iconsolutions/audit').then((m) => m.AuditModule)
            },
            {
                path: 'metrics',
                canActivate: [RoleGuard],
                data: { roles: ['ROLE_METRICS'] },
                loadChildren: () => import('@iconsolutions/metrics').then((m) => m.MetricsModule)
            },
            {
                path: 'permissions',
                loadComponent: () => import('@iconsolutions/permissions').then((m) => m.PermissionsComponent)
            },
            {
                path: 'htm',
                loadChildren: () => import('@iconsolutions/htm').then((m) => m.HtmModule)
            }
        ]

As you can see in the example above, some routes have their own set of roles defined in the data property. The canActivate property is used to protect the route based on user roles.

For more information on roles refer to the User Roles page.

Some modules do not require roles and can be loaded directly, such as @iconsolutions/metrics and @iconsolutions/permissions.

Adding configurations

For each module, you may need to add specific configurations in your service. For instructions on how to configure each module, refer to Ops GUI Service page.