Cómo construir su propio Operational Dashboard

Esta guía proporciona una visión general de cómo crear su propio Operational Dashboard; sin embargo, este enfoque es obsoleto y no se recomienda de cara al futuro. Por favor, contacte a su representante de cliente o gerente de proyecto para obtener información y orientación de nuestro equipo de UI sobre cómo proceder.

Instalando Angular CLI

Instale la CLI utilizando el gestor de paquetes npm:

npm install -g @angular/cli

Actualice su archivo.npmrc para trabajar con yarn

Abra su archivo.npmrc y asegúrese de tener las líneas adicionales a continuación con el token de autenticación relevante proporcionado.

@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}

Creando una nueva aplicación

Para crear, construir y servir una nueva aplicación:

  • Navegue al directorio principal donde desea que resida su nueva aplicación.

  • Ejecute los siguientes comandos para crear, compilar y lanzar un nuevo proyecto de Angular:

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

Nota: También puede proporcionar opciones adicionales para el ng new comando. Para más detalles, consulte la documentación oficial de Angular CLI.

  • Abra su navegador y vaya a localhost:4200/. Esto abre la página de inicio predeterminada de su nueva aplicación. La ng serve el comando inicia un servidor de desarrollo local que se actualiza automáticamente cuando usted realiza cambios en el código fuente.

Para más información, consulte la documentación oficial de Angular:https://angular.io/cli/new.

Customising su aplicación

Añadiendo módulos

Para instalar cualquiera de los módulos de @iconsolutions, usted necesita ejecutar npm install @iconsolutions/{module-name}. Por ejemplo, para instalar el ODS módulo, ejecutar: npm install @iconsolutions/ods

Aquí tiene una lista de módulos disponibles:

Añadiendo rutas

Para añadir rutas para los módulos instalados, debe modificar la configuración de enrutamiento de su aplicación.

Navegue a my-first-project/src/app/app.module.ts y añada las rutas a los módulos que instaló en el paso anterior. Ejemplo:

    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)
            }
        ]

Como puede ver en el ejemplo anterior, algunas rutas tienen su propio conjunto de roles definidos en el data propiedad. La canActivate La propiedad se utiliza para proteger la ruta en función de los roles de usuario.

Para más información sobre los roles, consulte el Roles de Usuario página.

Algunos módulos no requieren roles y pueden ser cargados directamente, tales como @iconsolutions/metrics y @iconsolutions/permissions.

Añadiendo configuraciones

Para cada módulo, puede que necesite agregar configuraciones específicas en su servicio. Para instructions sobre cómo configurar cada módulo, consulte Servicio de GUI de Ops página.