Ir al contenido principal

Creación de widgets personalizados en WSO2 APIM Analytics

En este tutorial se os explicará cómo crear widgets personalizados en WSO2 APIM Analytics. Para ello, comenzaremos explicando qué son los widgets en WSO2 y los prerrequisitos que necesitaremos para poder crearlos acabando con una conclusión. ¡Empezamos!

¿Qué son los widgets en WSO2?

Un widget en el portal de WSO2 APIM Analytics es un componente de ReactJS que se puede usar para visualizar información. Un widget puede tener cualquier visualización estática o interactiva, como gráficos, tablas, filtros, etc .

Además de los widgets que se tienen disponibles en los dashboards de analytics, se pueden implementar widgets personalizados y posteriormente utilizarlos en todos los dashboards.

WSO2 API-M Analytics tiene una herramienta generadora de widgets para crear automáticamente la estructura de un widget.

El siguiente artículo tiene como objetivo mostrar cómo crear un widget personalizado en WSO2 APIM Analytics.

Prerrequisitos para realizar Widgets personalizados en WSO2

Para realizar el ejercicio se deben tener instalados los siguientes componentes:

Pasos a seguir para crear widgets personalizados en WSO2 APIM Analytics

Los pasos para crear un widget personalizado son los siguientes:

   1. Crear el proyecto del nuevo widget

1.1 En la carpeta de instalación de API-M Analytics, debemos dirigirnos a la siguiente ruta:

<API-M_ANALYTICS_HOME>/wso2/tools/generator-widget

 1.2 Para iniciar la herramienta generadora de widgets, debemos ejecutar el siguiente comando:

npm run init

Una vez ejecutado el comando se mostrará la siguiente salida:

> generator-widget@1.0.0 init /home/chakray/wso2am-analytics-3.1.0/wso2/tools/generator-widget
> npm i && npm link

audited 729 packages in 2.356s

13 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

audited 729 packages in 2.174s

13 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

/usr/local/lib/node_modules/generator-widget -> /home/chakray/wso2am-analytics-3.1.0/wso2/tools/generator-widget

 1.3 Posteriormente para generar el proyecto del widget, debemos ejecutar el siguiente comando:

npm run createwidget--widgettype:subscriber--dataprovider:SiddhiDataProvider

La herramienta nos solicitará que ingresemos el nombre del widget y el encabezado del widget.

Para este ejemplo utilizaremos los siguientes datos:

Widget Name

APIMSampleWidget

Widget Heading

APISampleWidget

Una vez ingresados los datos solicitados, se comenzará con la construcción del proyecto.

Una vez terminado el proceso se generará la siguiente estructura de archivos:

APIMSampleWidget
├── src
│   ├── resources
│   │     └──widgetConf.json
│   └── APIMSampleWidgetwidget.jsx  
├── package.json
└── webpack.config.js

En donde:

package.json
El archivo package.json contiene metadatos relevantes para el widget. Este archivo se utiliza para proporcionar información a npm que le permite identificar el widget y manejar las dependencias.

widgetConf.json
Contiene la metainformación del widget, como el ID del widget, el nombre del widget y las configuraciones

webpack.config.js

webpack.config.js se utiliza básicamente para configurar el punto de entrada y el directorio de resultados de salida del widget.

 1.4 Posteriormente debemos iniciar un entorno de desarrollo de node y crear un enlace simbólico (Symlink), para  esto debemos ejecutar el siguiente comando:

npm run dev

Al terminar la ejecución, se creará un enlace simbólico del directorio

<ANALYTICS_HOME>wso2/tools/generator-widget/widgetTemplates

al directorio

<ANALYTICS_HOME>/wso2/dashboard/deployment/web-ui-apps/analytics-dashboard/extensions/widgets

NOTA: La creación de un entorno de desarrollo y del enlace simbólico actualizará inmediatamente los cambios en el portal de analytics, con esto ya no es necesario reiniciar el servicio del dashboard para ver los cambios.

2. Definir las configuraciones de la base de datos para el widget

2.1 Para definir las configuraciones de BD debemos editar el archivo widgetConf.json que se encuentra en la siguiente ruta:

<ANALYTICS_HOME>/wso2/tools/generator-widget/widgetTemplates/APIMSampleWidget/src/resources

Para este ejemplo realizaremos una consulta hacia la tabla AM_API.

2.2 Reemplazamos el código existente con el siguiente código de ejemplo que nos ayudará a generar la tabla.

{
  "name": "APIM Sample Widget",
  "id": "APIMSampleWidget",
  "thumbnailURL": "",
  "configs": {
    "pubsub": {
      "types": ["subscriber"]
    },
    "providerConfig" : {
      "configs": {
        "type": "RDBMSStreamingDataProvider",
        "config": {
          "datasourceName": "AM_DB",
          "queryData": {
            "apiusagequery": "select * from AM_API"
          },
          "publishingInterval": 360000,
          "tableName": "AM_API",
          "publishingLimit": 2147483647,
          "isPurgingEnable": false
        }
      }
    },
    "options": [
      {
        "id": "header",
        "title": "Header",
        "type": {
          "name": "BOOLEAN",
          "possibleValues": [
            true,
            false
          ]
        },
        "defaultValue": true
      },
      {
        "id": "headerTitle",
        "title": "Widget Title",
        "type": {
          "name": "TEXT"
        },
        "defaultValue": "Demo Telefonica"
      },
      {
        "id": "drillDown",
        "title": "Subscription Analytics Page",
        "type": {
          "name": "TEXT"
        },
        "defaultValue": ""
      }
    ]
  }
}

2.3 Para terminar guardamos el archivo.

NOTA:

  • Los proveedores de datos son las fuentes de las que se obtiene la información para mostrarla en los widgets, se puede usar SiddhiStoreDataProvider o RDBMSDataProvider. Para obtener más información sobre los proveedores de datos, puedes consultar el siguiente enlace.

  • Para recuperar datos, debe crear una aplicación Siddhi y una consulta Siddhi. Para obtener más información, puedes consultar el siguiente enlace.

3. Crear un gráfico para mostrar los datos

Para mostrar los datos de la consulta, debemos utilizar un gráfico, para este ejemplo se utilizará una tabla, existe una librería llamada React-VizGrammar la cual contiene muchos ejemplos de gráficos los cuales puedes revisar en el siguiente enlace.

3.1 Para utilizar esta librería, primero la debemos instalar en la ruta

<ANALYTICS_HOME>/wso2/tools/generator-widget/widgetTemplates/APIMSampleWidget

mediante el siguiente comando:

npm i -S react-vizgrammar

3.2 Una vez instalada, debemos editar el archivo APIMSampleWidgetwidget.jsx que se encuentra en la ruta

<ANALYTICS_HOME>/wso2/tools/generator-widget/widgetTemplates/APIMSampleWidget/src

3.3 Reemplazamos el código existente con el siguiente código de ejemplo que nos ayudará a generar la tabla.

/*
 * Copyright (c) 2018, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
 *
 * WSO2 Inc. licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

import Widget from "@wso2-dashboards/widget";
import VizG from 'react-vizgrammar';
import {Scrollbars} from 'react-custom-scrollbars';
import {darkBaseTheme, getMuiTheme, MuiThemeProvider} from 'material-ui/styles';
import moment from 'moment';


const totalPages = (Math.random() * 100).toFixed(0);

const requestData = (pageSize, page) => {
    // This is a mock service to emulate an endpoint you can use any kind of endpoint to fetch data.
    return new Promise((resolve, reject) => {
        const res = {
            data: makeDataWithSize(pageSize),
            pages: totalPages,
        };

        setTimeout(() => resolve(res), 500);
    });
}

class APIMSampleWidget extends Widget {
constructor(props) {
            super(props);
    
        this.state = {
            data: [["","","",""]],
            pageSize: -1,
        };

        this.normalTableConfig = {
            charts: [
                {
                    type: 'table',
                    columns: [
                        {
                            name: 'apiname',
                            title: 'API NAME',
                        },
                        {
                            name: 'apiversion',
                            title: 'API VERSION',
                        },
                        {
                            name: 'context',
                            title: 'CONTEXT',
                        },
                        {
                            name: 'createdby',
                            title: 'CREATED BY',
                        },
                    ],
                },
            ],
            pagination: true,
            filterable: true,
            append: false,
            sortable: false
        };

            this.normalDataSetMetadata = {
            names: ['apiname','apiversion','context','createdby'],
            types: ['ordinal','ordinal','ordinal','ordinal'],
        };

        }
    

        render() {
           const { usageData } = this.state;
            return (
                <VizG config={this.normalTableConfig} metadata={this.normalDataSetMetadata} data={this.state.data}/>
            );
        }
}


global.dashboard.registerWidget('APIMSampleWidget', APIMSampleWidget);

3.4 Guardamos el archivo.

3.5 Para finalizar y construir el widget con los nuevos cambios ejecutamos el siguiente comando:

npm run build

4. Desplegar el widget en un nuevo dashboard

4.1 Para desplegar el widget que acabamos de crear primero debemos crear un nuevo dashboard, esto lo haremos en el portal de analytics el cual accederemos mediante la siguiente url:

https://localhost:9643/analytics-dashboard/

4.2 Una vez dentro del portal de analytics, debemos dar clic en el botón Create Dashboard

4.3 En la siguiente ventana debemos ingresar el nombre que tendrá nuestro dashboard, para este ejemplo utilizaremos Sample Dashboard, para continuar damos clic en el botón ADD.

4.4 Para agregar nuestro widget, debemos dar clic en el botón widget como se muestra en la siguiente imagen.

4.5 Con la ayuda del scroll buscaremos por el nombre que asignamos a nuestro widget, para este ejemplo se llama APIM Sample Widget

4.6 Una vez agregado el widget, lo podremos visualizar de la siguiente forma:

Ahora nuestro nuevo widget está disponible para ser utilizado en cualquier dashboard.

Conclusiones

Como se pudo observar en este ejemplo, los widgets personalizados en WSO2 son de gran ayuda ya que podemos explotar la información que se almacena en las tablas de WSO2 APIM Analytics así como utilizar distintos gráficos para presentar dicha información.

Referencias

  • React-VizGrammar: https://wso2.github.io/react-vizgrammar/#/samples
  • Working with Data Providers: https://docs.wso2.com/display/SP440/Working+with+Data+Providers#WorkingwithDataProviders-SiddhiStoreDataProvider

Artículos relacionados

Ponte al día con las últimas noticias, artículos, guías y opiniones de Chakray.