Response app function

meblanc — Mon, 29 Apr 2024 15:08:35 GMT

Hello everyone, I wanted to ask you the following: I have a function(consultar.ts) that queries the user management API and retrieves a list of the users created in the platform. This is invoked from a page (conusuario.tsx). I wanted to know how I can display that information on that page in a table. As you know, the response is in JSON format.

//consultar.ts

export default async function consultarUsuario(): Promise<void> {

const obtenerToken = async (): Promise<string> => {

const data = new URLSearchParams();

data.append('grant_type', 'client_credentials');

data.append('client_id', 'client.id');

data.append('client_secret', 'secret');

data.append('scope', 'scope');

const options = {

method: 'POST',

headers: {

'Content-Type': 'application/x-www-form-urlencoded',

body: data.toString(),

};

const response = await fetch('https://sso.dynatrace.com/sso/oauth2/token', options);

if (!response.ok) {

throw new Error(`Error en la solicitud: ${response.status} ${response.statusText}`);

}

const parsedData = await response.json();

return parsedData.access_token;

};

const consultarUsuarioDeDynatrace = async (token: string): Promise<void> => {

try {

const url = `https://api.dynatrace.com/iam/v1/accounts/account/users`;

const options = {

method: 'GET',

headers: {

'Authorization': `Bearer ${token}`,

};

const response = await fetch(url, options);

if (!response.ok) {

throw new Error(`Error en la solicitud: ${response.status} ${response.statusText}`);

}

const data = await response.json();

const usuariosFiltrados = data.items.filter((usuario: any) => !usuario.email.toLowerCase().includes('@xxxxx.com'));

console.log('Listado de usuarios filtrados2:');

console.log(usuariosFiltrados);

} catch (error) {

console.error('Error al consultar usuarios:', error);

throw error;

}

};

try {

const token = await obtenerToken();

await consultarUsuarioDeDynatrace(token);

} catch (error) {

console.error('Error:', error);

throw error;

}

Page:

// consusuario.tsx

import React, { useState } from "react";

import { Flex, Heading, useCurrentTheme } from "@dynatrace/strato-components-preview";

import { Button } from '@dynatrace/strato-components-preview/buttons';

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

const ConUsuario = () => {

const handleConUsuario = async () => {

try {

functions.call('consultar', {});

} catch (error) {

console.error('Error al consultar usuarios:', error);

}

};

const theme = useCurrentTheme();

return (

<img

src="./assets/xxxxx.png"

alt="Xxxxxxxx"

width={100}

height={100}

style={{ paddingBottom: 16 }}

<Heading>Consultar Usuarios</Heading>

<div>

<img

src={theme === "light" ? "./assets/consultar.png" : "./assets/consultar.png"}

alt="Consultar usuarios"

height="100px"

width="100px"

<Button onClick={handleConUsuario}>Consultar usuarios</Button>

</Flex>

</div>

</Flex>

);

};

export default ConUsuario;

Re: Response app function

SarahFaustmann — Mon, 29 Apr 2024 16:36:44 GMT

Hi @meblanc,

I'm not sure I understand correctly, but in general, you'll have to parse the json and can then use the DataTable or SimpleTable component to display your data in a table. You can find code examples on the component pages, as well as CodeSandbox links.

Kind regards,
Sarah

Re: Response app function

SarahFaustmann — Wed, 15 May 2024 11:17:23 GMT

Hi @meblanc,

Have you solved you issue? If you reply helped, would you mind marking it as solved?

Kind regards,
Sarah

topic Re: Response app function in Developer Q&A Forum

Response app function

Re: Response app function

Re: Response app function