Cómo integrar azure advisor con react y node.js

Este tutorial explica la configuración básica de un endpoint (API) en Node.js y un componente controlador en React, que te permitirán:

• Filtrar grupos de recursos de Azure por tags (workspace o projectId).
• Obtener recomendaciones de Azure Advisor y agruparlas por grupo de recursos.
• Almacenar en caché los resultados con MongoDB.
• Visualizar las recomendaciones en tiempo real con paginación y filtrado.

1. Descripción de la funcionalidad

La API se encarga de:

1. Validar los parámetros (organization, workspace o projectId).
2. Conectarse a Azure usando tus credenciales y obtener:
   • Suscripciones,
   • Grupos de recursos filtrados por etiquetas (workspace o projectId),
   • Recomendaciones de Azure Advisor asociadas.
3. Almacenar en MongoDB los resultados para que, si se piden otra vez, no sea necesario llamar de nuevo al servicio de Azure.

El controlador de React, por su parte, consume el endpoint y muestra, en una interfaz amigable, las recomendaciones paginadas, categorizadas y con indicadores de impacto (High, Medium, Low).

2. Configuración de las credenciales de azure

Para utilizar los SDK de Azure (por ejemplo, @azure/arm-subscriptions, @azure/arm-resources, @azure/arm-advisor), necesitas:

• Tenant ID de tu Directorio de Azure AD.
• Client ID de la aplicación registrada en Azure AD.
• Client Secret que se genera para esa aplicación.

Asegúrate de definirlos en tus variables de entorno como:

AZURE_TENANT_ID=...
AZURE_CLIENT_ID=...
AZURE_CLIENT_SECRET=...

Luego, en tu código, puedes leerlas y crear un ClientSecretCredential:

const TENANT_ID = import.meta.env.AZURE_TENANT_ID as string;
const CLIENT_ID = import.meta.env.AZURE_CLIENT_ID as string;
const CLIENT_SECRET = import.meta.env.AZURE_CLIENT_SECRET as string;

const credential = new ClientSecretCredential(TENANT_ID, CLIENT_ID, CLIENT_SECRET);

3. Endpoint de api para consultar las recomendaciones

A continuación, se muestra un ejemplo de un endpoint REST (solo maneja método GET) que:

1. Valida el uso de métodos y los parámetros necesarios.
2. Lee o escribe datos en MongoDB (para cachear las recomendaciones).
3. Itera por cada suscripción y, dentro de esta, por cada grupo de recursos que coincida con las tags requeridas.
4. Obtiene las recomendaciones de Azure Advisor y las filtra para cada grupo de recursos.
5. Devuelve los resultados en un objeto JSON.

import { methodValidator } from '../../utils/methodValidator';
import { log } from '../../utils/logging';
import { ClientSecretCredential } from '@azure/identity';
import { SubscriptionClient } from '@azure/arm-subscriptions';
import { ResourceManagementClient } from '@azure/arm-resources';
import { AdvisorManagementClient } from '@azure/arm-advisor';
import getDatabase from '../../utils/mongoClient';

const TENANT_ID = import.meta.env.AZURE_TENANT_ID as string;
const CLIENT_ID = import.meta.env.AZURE_CLIENT_ID as string;
const CLIENT_SECRET = import.meta.env.AZURE_CLIENT_SECRET as string;

const credential = new ClientSecretCredential(TENANT_ID, CLIENT_ID, CLIENT_SECRET);

const getSubscriptions = async () => {
  // ...
};

const getResourceGroups = async (subscriptionId: string, requiredTags: Record<string, string>) => {
  // ...
};

const getAdvisorRecommendations = async (subscriptionId: string) => {
  // ...
};

const filterRecommendationsByResourceGroup = (recommendations: any[], resourceGroupName: string) => {
  // ...
};

const extractRecommendationDetails = (recommendations: any[]) => {
  // ...
};

export const GET = async ({ request }: { request: Request }) => {
  const url = new URL(request.url);
  const organization = url.searchParams.get('organization');
  const workspace = url.searchParams.get('workspace');
  const projectId = url.searchParams.get('projectId');

  // Lógica:
  // 1. Validar método y parámetros (organization, workspace o projectId).
  // 2. Conectarse a la base de datos, verificar si hay resultados cacheados.
  // 3. Obtener suscripciones, filtrar grupos de recursos, buscar recomendaciones.
  // 4. Almacenar en caché si es la primera vez.
  // 5. Responder en formato JSON al cliente.
};

En el código completo (que se muestra en tu ejemplo) puedes ver con detalle cada uno de los pasos (almacenamiento en mongodb, uso de SubscriptionClient, ResourceManagementClient y AdvisorManagementClient).

4. Controlador de react para mostrar recomendaciones

Este componente, que podrías llamar AzureAdvisorController, es un ejemplo de cómo consultar el endpoint y desplegar la información en una tabla, incluyendo:

• Filtrado por categoría (cost, security, highAvailability, etc.).
• Paginación (página actual, total de páginas, ítems por página).
• Barra de progreso para el impacto (High, Medium, Low).
• Descripción detallada de cada recomendación (problema y solución).

import React, { useEffect, useState } from 'react';
import { FaSpinner, FaChevronLeft, FaChevronRight } from 'react-icons/fa';

function RecommendationDescription({ shortDescription }) {
  // ...
}

export default function AzureAdvisorController({ organization, workspace = null, projectId = null }) {
  // 1. Estados (loading, error, recomendaciones).
  // 2. Llamada a la API (useEffect).
  // 3. Procesamiento de datos (filtrado, paginación, conteo de categorías).
  // 4. Render de la tabla, paginación y controles de filtrado.
}

Llamada a la API

En el hook useEffect, se arma la URL en función de los parámetros y se hace fetch al endpoint:

useEffect(() => {
  let url = `/api/private/azure/advisor?organization=${encodeURIComponent(organization)}`;
  if (workspace) {
    url += `&workspace=${encodeURIComponent(workspace)}`;
  } else if (projectId) {
    url += `&projectId=${encodeURIComponent(projectId)}`;
  }

  fetch(url)
    .then((resp) => resp.json().then((data) => [resp.ok, data]))
    .then(([ok, data]) => {
      if (!ok) throw new Error(data.error || 'Error fetching Advisor data');
      // Procesar resultados y setear estado
    })
    .catch((err) => {
      setError(err.message);
      setLoading(false);
    });
}, [organization, workspace, projectId]);

Visualización

El componente:

• Muestra un spinner si está cargando.
• Muestra un mensaje de error si falla la petición.
• En caso de éxito, presenta una tabla con la información: categoría, impacto, campo afectado, valor afectado, grupo de recursos y fecha de la última actualización.

5. Integración en tu sistema

Para usar esta lógica en tu propio producto o aplicación:

1. Copia la estructura del endpoint de Node.js y ajusta:

   • Variables de entorno (Tenant ID, Client ID, Client Secret).
   • Conexión a tu base de datos MongoDB (o la que desees).
   • Filtrado de tags que quieras manejar (por ejemplo, workspace o projectId).

2. Incorpora el componente de React (AzureAdvisorController) en tu interfaz:

   • Pasa las props organization y workspace o projectId.
   • Ajusta el estilo según tu framework de UI.

3. Personaliza las tablas y la barra de impacto en el frontend:

   • Cambia colores, estilos o la forma de mostrar datos.
   • Agrega más filtros si lo deseas (por ejemplo, filtrar por suscripción).

4. Despliega tu aplicación:

   • Configura las credenciales y tu base de datos en el entorno de producción.
   • Asegúrate de que el servicio de Node.js y el de React estén correctamente enlazados.

Este ejemplo demuestra cómo integrar las recomendaciones de Azure Advisor en una aplicación real, utilizando Node.js para la comunicación con la API de Azure y React para la presentación de los datos. Se trata de una arquitectura escalable que te permitirá centralizar todas las recomendaciones de tus recursos en la nube, filtrarlas y mostrarlas a tu equipo de forma clara y eficiente.

Si bien esta solución está incluida en un producto en desarrollo propio, puedes adaptar libremente tanto el endpoint como el controlador para ajustarlos a tu entorno. Con esta base, tendrás una vista consolidada de las optimizaciones que Azure Advisor ofrece, maximizando la confiabilidad, seguridad y rentabilidad de tus recursos en la nube.