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(),
};
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 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 (
<Flex flexDirection="column" alignItems="center" padding={32}>
<img
src="./assets/xxxxx.png"
alt="Xxxxxxxx"
width={100}
height={100}
style={{ paddingBottom: 16 }}
/>
<Heading>Consultar Usuarios</Heading>
<Flex gap={56} paddingTop={64} flexFlow="wrap">
<div>
<Flex flexDirection="column" alignItems="center" gap={16}>
<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>
</Flex>
);
};
export default ConUsuario;
