Creación de widgets personalizados en WSO2 APIM Analytics

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/