Visualización gráfica de tablas

Aquí documentaremos cómo podéis obtener los resultados de vuestra Data Collection para que se muestren gráficamente. La salida de vuestro proyecto se verá así:

Tened en cuenta que estoy trabajando en una máquina local. Si vosotros estáis haciendo esto en un servidor, aseguraos de usar la dirección IP correcta.

Primero, importaremos las tres clases que vamos a necesitar (tened en cuenta que las editaremos más tarde):

Podéis tomar el xml e importarlo en vuestro sistema.

La especificación en realidad creará la clase de despacho y la plantilla de implementación. Si estáis interesados en aprender más sobre este proceso, echad un vistazo al excelente artículo de mi colega, Eduard Lebedyuk.

Configurar las APIs

Tened en cuenta que en esta demostración utilizaremos Autorización Básica. También asumimos que ya hay datos en las tablas Sample_DBExpansion_Data.DBAnalysisInfo y Sample_DBExpansion_Data.GlobalAnalysisInfo. Si no los hay, volved a la Colección de Datos y obtened algunos datos.

1. Primero, vamos a crear un endpoint que nos dará acceso a nuestros datos:
   

Rellenad los mismos nombres a menos que planeéis personalizar el código para la aplicación React por vuestra cuenta.

2. Haced clic en guardar y probemos nuestras APIs. Abrid Postman y enviad la siguiente solicitud (aseguraos de usar la autorización adecuada):
   

Nuestra salida debería verse algo así:

{
    "data": [
        {
            "Name": "c:\\intersystems\\irishealth\\mgr\\training\\",
            "Date": "2023-04-30 15:23:58",
            "DBUsedSize": 2010,
            "DBAllocSize": 2060
        },
        {
            "Name": "c:\\intersystems\\irishealth\\mgr\\training\\",
            "Date": "2023-05-01 09:01:42",
            "DBUsedSize": 2010,
            "DBAllocSize": 2060
        },
        {
            "Name": "c:\\intersystems\\irishealth\\mgr\\training\\",
            "Date": "2023-05-03 13:57:40",
            "DBUsedSize": 150,
            "DBAllocSize": 2060
        }
    ]
}

A continuación, enviemos una solicitud GET a http://localhost:52776/Sample/dbAnalysis/globals/all. Comprobad que vuestra respuesta os da una lista de globals cuya información se vea así:
(date cuenta de que el nombre se establecerá por defecto al nombre de la clase si el global tiene uno)

        {
            "Name": "someName.cls",
            "UsedMB": 4.2,
            "AllocatedMB": 5.7
        }

Ahora probemos con un global específico, digamos "Errors". Enviad una solicitud GET a http://localhost:52776/Sample/dbAnalysis/global/Errors. Comprobad que vuestra salida es similar a esta:

        {
            "Name": "ERRORS",
            "UsedMB": 0.4,
            "Date": "2023-04-30 15:23:58",
            "AllocatedMB": 0.45
        },
        {
            "Name": "ERRORS",
            "UsedMB": 0.43,
            "Date": "2023-05-01 09:01:42",
            "AllocatedMB": 0.49
        },
        {
            "Name": "ERRORS",
            "UsedMB": 0.1,
            "Date": "2023-05-03 13:57:40",
            "AllocatedMB": 0.13
        }

Y finalmente, enviemos una solicitud GET a http://localhost:52776/Sample/dbAnalysis/globals/table/1000. Esto nos dará el crecimiento de globals, cuya salida canalizaremos en la sección 'Datos Tabulados' de la aplicación React. Tened en cuenta que los 1000 días solo se refieren a cuántos días hacia atrás deberíamos ir. Esto depende completamente de vosotros. Sentíos libres de personalizar esto en el archivo src/components/TableInputBar.js. Buscad la línea <Table timeBack={1000} numGlobals={searchInput}/>. Poned aquí la cantidad de días que deseéis ver hacia atrás en la aplicación React.

Deberíais obtener una respuesta que sea una lista de objetos como esta:

       {
            "Name": "nameOfGlobal",
            "ClassName": "AriTesting.DemoTableElad.cls",
            "OldMB": 0.14,
            "OldDate": "2023-04-30 15:23:58",
            "NewMB": 0.14,
            "NewDate": "2023-05-03 13:57:40",
            "Change": "0"
        }

Dado que todas vuestras solicitudes estaban en orden, ahora podemos crear nuestra aplicación web. Recordad que si no estáis recibiendo las respuestas que esperabais, deberíais retroceder y verificar qué está mal antes de avanzar y crear la aplicación que depende de ellas.

Pasos para crear la aplicación web

1. Lo primero que haréis es crear una aplicación React genérica. Recordad que necesitaréis tener Node (por lo menos la versión 14) instalado en la máquina local de desarrollo, pero no será necesario en el servidor. Si no lo tenéis instalado, hacedlo aquí. Si no estáis seguros de si lo tenéis instalado, podéis ejecutar este comando desde vuestro terminal:

node --version

2. Ahora instalaremos una aplicación React genérica y cambiaremos las partes que necesitemos. Esto es tan simple como ejecutar:

npx create-react-app data-collection-graphs

3. Si es la primera vez que hacéis esto, puede tomar unos minutos. Una vez que esté hecho, tendremos una carpeta que se verá de la siguiente manera:
   

4. Vuestra aplicación React genérica (que personalizaremos) ahora está funcionando. Comprobadlo:

npm start

Deberíais ser redirigidos automáticamente a una pestaña que os muestra lo siguiente (si no, id a http://localhost:3000/):

5. Ahora personalicemos según nuestras necesidades. Detened vuestra aplicación desde el terminal con ^C. Descargad la carpeta src desde este repositorio y reemplazad la que se encuentra en vuestro directorio, la cual fue creada automáticamente por nuestros comandos anteriores. Desde el directorio data-collection-graphs, instalad chart.js y react-chartjs-2 de la siguiente manera:

npm install --save chart.js

npm install --save react-chartjs-2

En la carpeta src/components se encuentra el código JavaScript que llama a los puntos finales de la API para obtener datos para el gráfico. Si vuestro servidor no está ejecutándose en localhost:80, entonces debéis cambiar la variable baseUrl (y la autorización básica codificada en base64, si ese es el método de autorización que habéis elegido) en los archivos BarChart.js, DBChart.js, SingleGlobalHistoryChart.js, y TableData.js.

6. Utilizad npm start para cargar vuestra página, y ahora deberíais obtener la página con vuestros análisis de base de datos.

Nota: Es posible que veáis una página en blanco y, al abrir las herramientas de desarrollo web, veáis un error como este: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:52775/Sample/dbAnalysis/globals/all. (Reason: CORS preflight response did not succeed). Status code: 404.

Si este es el caso, añadid el siguiente método de clase en vuestro archivo generado Sample.DBExpansion.Util.REST.disp.cls:

ClassMethod OnHandleCorsRequest(pUrl As %String) As %Status
{
     //s ^CORS("OnHandleCorsRequest")="Handled"
     #; Get the origin
     Set tOrigin=$Get(%request.CgiEnvs("HTTP_ORIGIN"))
     #; Allow requested origin
     Do ..SetResponseHeaderIfEmpty("Access-Control-Allow-Origin",tOrigin)
     #; Set allow credentials to be true
     Do ..SetResponseHeaderIfEmpty("Access-Control-Allow-Credentials","true")
     #; Allow requested headers
     Set tHeaders=$Get(%request.CgiEnvs("HTTP_ACCESS_CONTROL_REQUEST_HEADERS"))
     Do ..SetResponseHeaderIfEmpty("Access-Control-Allow-Headers",tHeaders)
     #; Allow requested method
     Set tMethod=$Get(%request.CgiEnvs("HTTP_ACCESS_CONTROL_REQUEST_METHOD"))
     Do ..SetResponseHeaderIfEmpty("Access-Control-Allow-Method",tMethod)
     Return $$$OK
}

Como no estamos utilizando autenticación delegada aquí, la solicitud será realizada por el usuario CSPSystem. Esto significa que debemos otorgar al usuario CSPSystem los roles apropiados para las consultas que estamos realizando. Podéis leer más al respecto aquí (o simplemente dar al usuario CSPSystem el rol necesario para leer datos de vuestro espacio de nombres/base de datos).

Con Cross-Origin Resource Sharing (CORS) configurado, después de refrescar la página, deberíais ver cómo los gráficos comienzan a poblarse y verse como lo que vemos en la parte superior de esta página.

Sentíos libres de explorar el código y hacer mejoras o personalizaciones que se adapten mejor a vuestra organización.

Si tenéis alguna sugerencia sobre cómo puedo mejorar esto desde nuestro lado, por favor hacedmelo saber también.

Continuad con el repositorio de análisis de datos aquí.