Rendering Dynatrace SDK response data into a Table in AppEngine

[allie_diaz]

I have been trying to leverage the Dynatrace SDK to pull Host Data and render it in a table to an AppEngine App I am building.  I do not get any errors int he code, but I am getting the following error when I launch the app.  It doesn't like the data being returned from the function.  Not sure what the proper syntax is so it plays nice with the DataTable function. Anyone have any ideas?

ERROR:

Error details

JS Error | data2.forEach is not a function

TypeError: data2.forEach is not a function
    at accessRowsForColumn (http://localhost:3000/ui/main.js:33905:17)
    at http://localhost:3000/ui/main.js:33649:15
    at mountMemo (http://localhost:3000/ui/main.js:14456:29)
    at Object.useMemo (http://localhost:3000/ui/main.js:14742:26)
    at Object.useMemo51 [as useMemo] (http://localhost:3000/ui/main.js:1187:31)
    at useTable4 (http://localhost:3000/ui/main.js:33642:41)
    at http://localhost:3000/ui/main.js:122331:61
    at renderWithHooks (http://localhost:3000/ui/main.js:13865:28)
    at updateForwardRef (http://localhost:3000/ui/main.js:15499:30)
    at beginWork (http://localhost:3000/ui/main.js:16902:24)

CODE:

FUNCTION GRABBING SDK DATA

import { monitoredEntitiesClient } from "@dynatrace-sdk/client-classic-environment-v2";

export default async () => {

return await monitoredEntitiesClient.getEntities({

"entitySelector": 'type("HOST")',

"fields": 'properties.monitoringMode, properties.ipAddress, properties.osVersion, properties.osType'

});

};

PAGE CALLING SDK FUNCTION, FORMATTING RESPONSE, BUILDING A TABLE, AND RETURNING IT TO APP.TSX

import React, { useState, useEffect, useMemo } from 'react';

import { functions } from '@dynatrace-sdk/app-utils';

import type { TableColumn } from '@dynatrace/strato-components-preview/tables';

import { DataTable } from '@dynatrace/strato-components-preview/tables';

const fetchEntities = () => {

return functions

.call('host-fetch')

.then((response) => response.json())

.then((response) => response.entities);

};

export const hostData = () => {

const [hostEntities, setHostEntities] = useState("");

useEffect(() => {

fetchEntities().then((res) => {

setHostEntities(res);

setHostEntities(JSON.stringify(res))

setHostEntities(JSON.parse(res))

});

}, []);

const HostTableColumns: TableColumn[] = [

{

header: 'Host Name',

accessor: 'displayName',

ratioWidth: 1,

},

{

header: 'IP Address',

accessor: 'properties.ipAddress[0]',

ratioWidth: 1,

},

{

header: 'Monitoring Mode',

accessor: 'properties.monitoringMode',

ratioWidth: 1,

},

{

header: 'Operating System',

accessor: 'properties.osType',

ratioWidth: 1,

},

{

header: 'Operating Version',

accessor: 'properties.osVersion',

ratioWidth: 1,

},

];

const HostDataDisplay = (hostEntities) => {

const columns = useMemo<TableColumn[]>(() => HostTableColumns, []);

const data = useMemo(() => hostEntities, []);

return <DataTable columns={columns} data={data} />;

};

return (

<div>

{HostDataDisplay}

</div>

);

};

[stefan_eggersto · Accepted solution]

Hi @allie_diaz ,

You get the error since you render the DataTable before the data is actually loaded.

I'd suggest two options:

• initialize the state variable hostEntities with an empty array
• render the DataTable only when the data was loaded

I also attached two component files that achieve the same result as you expect (due to community restrictions, they are with a .txt file ending).

The main difference to your approach is loading the data in the UI. You only need an app function if you want to access an external system.

HostsTableDql shows the same information in the UI, but loaded via DQL. Take it as inspiration for what you can do with DQL, and it does not stop there 🙂