Visualización de costos de Azure en Astro: una solución práctica

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 { CostManagementClient } from "@azure/arm-costmanagement";
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 () => {
  log("Fetching subscriptions...", "DEBUG");
  const client = new SubscriptionClient(credential);
  const subscriptions = [];
  for await (const subscription of client.subscriptions.list()) {
    subscriptions.push(subscription);
  }
  log(`Fetched ${subscriptions.length} subscriptions.`, "DEBUG");
  return subscriptions;
};

const getResourceGroups = async (subscriptionId: string) => {
  log(`Fetching resource groups for subscription: ${subscriptionId}`, "DEBUG");
  const client = new ResourceManagementClient(credential, subscriptionId);
  const resourceGroups = [];
  for await (const rg of client.resourceGroups.list()) {
    resourceGroups.push(rg);
  }
  log(
    `Fetched ${resourceGroups.length} resource groups for subscription ${subscriptionId}.`,
    "DEBUG",
  );
  return resourceGroups;
};

const getCostData = async (
  subscriptionId: string,
  resourceGroupName: string,
) => {
  log(
    `Fetching cost data for resource group: ${resourceGroupName} in subscription: ${subscriptionId}`,
    "DEBUG",
  );
  const costClient = new CostManagementClient(credential);
  const result = await costClient.query.usage(
    `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}`,
    {
      type: "ActualCost",
      timeframe: "BillingMonth",
      dataset: {
        granularity: "None",
        aggregation: {
          totalCost: {
            name: "PreTaxCost",
            function: "Sum",
          },
        },
        grouping: [
          {
            type: "Dimension",
            name: "ServiceName",
          },
          {
            type: "Dimension",
            name: "ResourceLocation",
          },
          {
            type: "Dimension",
            name: "MeterSubCategory",
          },
        ],
      },
    },
  );
  log(
    `Fetched cost data for resource group ${resourceGroupName}: ${JSON.stringify(result)}`,
    "DEBUG",
  );
  return result;
};

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");

  log("Received GET request.", "DEBUG");

  if (!methodValidator(request, ["GET"])) {
    log("Invalid method used. Only GET is allowed.", "ERROR");
    return new Response(JSON.stringify({ error: "Method Not Allowed" }), {
      status: 405,
      headers: { "Content-Type": "application/json" },
    });
  }

  if (!organization) {
    log("Organization parameter is missing.", "ERROR");
    return new Response(
      JSON.stringify({ error: "Organization is required." }),
      {
        status: 400,
        headers: { "Content-Type": "application/json" },
      },
    );
  }

  if ((workspace && projectId) || (!workspace && !projectId)) {
    log(
      "Invalid parameters: Provide either workspace or projectId, but not both.",
      "ERROR",
    );
    return new Response(
      JSON.stringify({
        error: "Provide either workspace or projectId, but not both.",
      }),
      {
        status: 400,
        headers: { "Content-Type": "application/json" },
      },
    );
  }

  try {
    log("Checking database connection", "DEBUG");
    const db = await getDatabase();
    const identifier = workspace || projectId || "";

    if (db) {
      log(
        `Checking cached data for organization: ${organization}, identifier: ${identifier}`,
        "DEBUG",
      );
      const collection = db.collection("azure_cost_data");
      const cachedData = await collection.findOne({
        organization,
        identifier,
      });
      if (cachedData) {
        log(
          `Returning cached data for organization: ${organization}, identifier: ${identifier}`,
          "DEBUG",
        );
        return new Response(JSON.stringify(cachedData), {
          status: 200,
          headers: { "Content-Type": "application/json" },
        });
      }
    } else {
      log("Database not available, proceeding without caching.", "DEBUG");
    }

    log("Fetching subscriptions...", "DEBUG");
    const subscriptions = await getSubscriptions();

    const results: Record<
      string,
      {
        organization: string;
        identifier: string;
        totalAllRGs?: string;
        totalAllRGsByLocation?: Record<string, string>;
        totalAllRGsByTier?: Record<string, string>;
        resourceGroups: Array<{
          resourceGroupName: string;
          totalCost: string;
          costByCategory: Record<string, string>;
          costByLocation: Record<string, string>;
          costByTier: Record<string, string>;
        }>;
      }
    > = {};

    results[identifier] = { organization, identifier, resourceGroups: [] };

    let totalCostSum = 0;
    let costCurrency: string | null = null;
    const totalCostByLocation: Record<string, number> = {};
    const totalCostByTier: Record<string, number> = {};

    for (const subscription of subscriptions) {
      const subscriptionId = subscription.subscriptionId;
      if (!subscriptionId) {
        log("Subscription ID is undefined.", "ERROR");
        continue;
      }
      log(`Processing subscription: ${subscriptionId}`, "DEBUG");
      const resourceGroups = await getResourceGroups(subscriptionId);

      const matchingResourceGroups = resourceGroups.filter((rg: any) => {
        const tags = rg.tags || {};
        return (
          tags.organization === organization &&
          ((workspace && tags.workspace === workspace) ||
            (projectId && tags.projectId === projectId))
        );
      });
      log(
        `Found ${matchingResourceGroups.length} matching resource groups.`,
        "DEBUG",
      );

      for (const rg of matchingResourceGroups) {
        try {
          const resourceGroupName = rg.name;
          if (!resourceGroupName) {
            log(
              `Resource group name is undefined for subscription ${subscriptionId}`,
              "ERROR",
            );
            continue;
          }
          const costData = await getCostData(subscriptionId, resourceGroupName);
          log(
            `Cost data response for ${resourceGroupName}: ${JSON.stringify(costData)}`,
            "DEBUG",
          );
          if (!costData || !costData.columns || !costData.rows) {
            log("No columns or rows in cost data result.", "ERROR");
            continue;
          }
          const costIndex = costData.columns.findIndex(
            (col: any) => col.name === "PreTaxCost",
          );
          const serviceNameIndex = costData.columns.findIndex(
            (col: any) => col.name === "ServiceName",
          );
          const locationIndex = costData.columns.findIndex(
            (col: any) => col.name === "ResourceLocation",
          );
          const tierIndex = costData.columns.findIndex(
            (col: any) => col.name === "MeterSubCategory",
          );
          const currencyIndex = costData.columns.findIndex(
            (col: any) => col.name === "Currency",
          );

          let rgTotalCost = 0;
          let currency = "";
          const costByCategory: Record<string, number> = {};
          const costByLocation: Record<string, number> = {};
          const costByTier: Record<string, number> = {};

          for (const row of costData.rows) {
            const cost = row[costIndex];
            const serviceName = row[serviceNameIndex];
            const resourceLocation = row[locationIndex];
            const tier = row[tierIndex] || "No Tier Info";
            currency = row[currencyIndex];
            rgTotalCost += cost;
            costByCategory[serviceName] =
              (costByCategory[serviceName] || 0) + cost;
            costByLocation[resourceLocation] =
              (costByLocation[resourceLocation] || 0) + cost;
            costByTier[tier] = (costByTier[tier] || 0) + cost;
          }

          if (!costCurrency) {
            costCurrency = currency;
          }

          totalCostSum += rgTotalCost;

          for (const [location, cost] of Object.entries(costByLocation)) {
            totalCostByLocation[location] =
              (totalCostByLocation[location] || 0) + cost;
          }

          for (const [tier, cost] of Object.entries(costByTier)) {
            totalCostByTier[tier] = (totalCostByTier[tier] || 0) + cost;
          }

          const formattedTotalCost = new Intl.NumberFormat("es-ES", {
            style: "currency",
            currency: currency,
          }).format(rgTotalCost);

          const formattedCostByCategory: Record<string, string> = {};
          for (const [serviceName, cost] of Object.entries(costByCategory)) {
            formattedCostByCategory[serviceName] = new Intl.NumberFormat(
              "es-ES",
              {
                style: "currency",
                currency: currency,
              },
            ).format(cost);
          }

          const formattedCostByLocation: Record<string, string> = {};
          for (const [location, cost] of Object.entries(costByLocation)) {
            formattedCostByLocation[location] = new Intl.NumberFormat("es-ES", {
              style: "currency",
              currency: currency,
            }).format(cost);
          }

          const formattedCostByTier: Record<string, string> = {};
          for (const [tier, cost] of Object.entries(costByTier)) {
            formattedCostByTier[tier] = new Intl.NumberFormat("es-ES", {
              style: "currency",
              currency: currency,
            }).format(cost);
          }

          results[identifier].resourceGroups.push({
            resourceGroupName,
            totalCost: formattedTotalCost,
            costByCategory: formattedCostByCategory,
            costByLocation: formattedCostByLocation,
            costByTier: formattedCostByTier,
          });
        } catch (error) {
          log(`Error processing resource group ${rg.name}: ${error}`, "ERROR");
        }
      }
    }

    if (results[identifier].resourceGroups.length === 0) {
      log("No matching resource groups found.", "ERROR");
      return new Response(
        JSON.stringify({ error: "No matching resource groups found." }),
        {
          status: 404,
          headers: { "Content-Type": "application/json" },
        },
      );
    }

    if (costCurrency) {
      results[identifier].totalAllRGs = new Intl.NumberFormat("es-ES", {
        style: "currency",
        currency: costCurrency,
      }).format(totalCostSum);

      const formattedTotalAllRGsByLocation: Record<string, string> = {};
      for (const [location, cost] of Object.entries(totalCostByLocation)) {
        formattedTotalAllRGsByLocation[location] = new Intl.NumberFormat(
          "es-ES",
          {
            style: "currency",
            currency: costCurrency,
          },
        ).format(cost);
      }
      results[identifier].totalAllRGsByLocation =
        formattedTotalAllRGsByLocation;

      const formattedTotalAllRGsByTier: Record<string, string> = {};
      for (const [tier, cost] of Object.entries(totalCostByTier)) {
        formattedTotalAllRGsByTier[tier] = new Intl.NumberFormat("es-ES", {
          style: "currency",
          currency: costCurrency,
        }).format(cost);
      }
      results[identifier].totalAllRGsByTier = formattedTotalAllRGsByTier;
    }

    if (db) {
      log(
        `Caching data for organization: ${organization}, identifier: ${identifier}`,
        "DEBUG",
      );
      const collection = db.collection("azure_cost_data");
      await collection.updateOne(
        { organization, identifier },
        { $set: results[identifier] },
        { upsert: true },
      );
    }

    return new Response(JSON.stringify(results[identifier]), {
      status: 200,
      headers: { "Content-Type": "application/json" },
    });
  } catch (error: unknown) {
    log(
      `Internal server error: ${error instanceof Error ? error.stack : String(error)}`,
      "ERROR",
    );
    return new Response(JSON.stringify({ error: "Internal server error" }), {
      status: 500,
      headers: { "Content-Type": "application/json" },
    });
  }
};

import React, { useEffect, useState } from "react";
import { Doughnut } from "react-chartjs-2";
import { FaSpinner } from "react-icons/fa";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";

ChartJS.register(ArcElement, Tooltip, Legend);

export default function WorkspaceCostsController({ organization, workspace }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const fetchData = async () => {
    setLoading(true);
    setError(null);
    try {
      const url = `/api/private/azureCost?organization=${organization}&workspace=${workspace}`;
      const response = await fetch(url);
      if (!response.ok) {
        const errorText = await response.text();
        throw new Error(`Error fetching data: ${errorText}`);
      }
      const jsonData = await response.json();
      setData(jsonData);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, [organization, workspace]);

  if (loading) {
    return (
      <div className="flex justify-center items-center h-64">
        <FaSpinner className="animate-spin text-2xl text-gray-900 dark:text-white" />
      </div>
    );
  }

  if (error) {
    return <p className="text-red-500">Error: {error}</p>;
  }

  if (!data) {
    return (
      <p className="text-gray-500 dark:text-gray-400">No data available</p>
    );
  }

  const {
    totalAllRGs,
    totalAllRGsByLocation,
    totalAllRGsByTier,
    resourceGroups,
  } = data;

  const isDarkMode = document.documentElement.classList.contains("dark");
  const textColor = isDarkMode ? "#F9FAFB" : "#1F2937";
  const borderColor = isDarkMode ? "#4B5563" : "#D1D5DB";

  const parseEuroValue = (val) => {
    if (!val) return 0;
    let numericString = val.replace(/[^\d.,-]/g, "");
    numericString = numericString.replace(",", ".");
    const numberValue = parseFloat(numericString);
    return isNaN(numberValue) ? 0 : numberValue;
  };

  const formatEuro = (value) => {
    return new Intl.NumberFormat("es-ES", {
      style: "currency",
      currency: "EUR",
    }).format(value);
  };

  const generateRandomPastelColor = () => {
    const hue = Math.floor(Math.random() * 360);
    const base = `hsl(${hue}, 70%, 80%)`;
    const hover = `hsl(${hue}, 70%, 60%)`;
    return { base, hover };
  };

  const generateDoughnutData = (obj) => {
    const entries = Object.entries(obj || {});
    const filteredEntries = entries.filter(
      ([_, val]) => parseEuroValue(val) !== 0,
    );

    if (filteredEntries.length === 0) {
      return null;
    }

    const labels = filteredEntries.map(([key]) => key);
    const values = filteredEntries.map(([_, val]) => parseEuroValue(val));

    const backgroundColors = [];
    const hoverBackgroundColors = [];

    labels.forEach(() => {
      const { base, hover } = generateRandomPastelColor();
      backgroundColors.push(base);
      hoverBackgroundColors.push(hover);
    });

    return {
      labels,
      datasets: [
        {
          data: values,
          backgroundColor: backgroundColors,
          hoverBackgroundColor: hoverBackgroundColors,
          borderColor: borderColor,
          borderWidth: 2,
        },
      ],
    };
  };

  const locationData = totalAllRGsByLocation
    ? generateDoughnutData(totalAllRGsByLocation)
    : null;
  const tierData = totalAllRGsByTier
    ? generateDoughnutData(totalAllRGsByTier)
    : null;

  let rgData = null;
  if (resourceGroups && resourceGroups.length > 0) {
    const rgObj = {};
    resourceGroups.forEach((rg) => {
      if (rg.totalCost) {
        rgObj[rg.resourceGroupName] = rg.totalCost;
      }
    });
    rgData = generateDoughnutData(rgObj);
  }

  const doughnutOptions = {
    responsive: true,
    maintainAspectRatio: false,
    layout: {
      padding: {
        top: 10,
        bottom: 10,
      },
    },
    plugins: {
      legend: {
        position: "bottom",
        labels: {
          color: textColor,
        },
      },
      tooltip: {
        bodyColor: textColor,
        titleColor: textColor,
        backgroundColor: isDarkMode ? "#374151" : "#ffffff",
        callbacks: {
          label: function (context) {
            const label = context.label || "";
            const value = context.parsed;
            return `${label}: ${formatEuro(value)}`;
          },
        },
      },
    },
  };

  return (
    <div className="mt-6">
      <div className="grid w-full grid-cols-1 gap-4 xl:grid-cols-3">
        <div className="relative p-4 bg-white border border-gray-200 rounded-lg shadow dark:border-gray-700 dark:bg-gray-800 flex flex-col">
          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
            Cost by Resource Group
          </h3>
          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
            Cost breakdown by each resource group.
          </p>
          <div className="h-64">
            {rgData ? (
              <Doughnut data={rgData} options={doughnutOptions} />
            ) : (
              <p className="text-gray-500 dark:text-gray-400">No data</p>
            )}
          </div>
        </div>

        <div className="relative p-4 bg-white border border-gray-200 rounded-lg shadow dark:border-gray-700 dark:bg-gray-800 flex flex-col">
          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
            Cost by Location
          </h3>
          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
            Cost breakdown by resource region.
          </p>
          <div className="h-64">
            {locationData ? (
              <Doughnut data={locationData} options={doughnutOptions} />
            ) : (
              <p className="text-gray-500 dark:text-gray-400">No data</p>
            )}
          </div>
        </div>

        <div className="relative p-4 bg-white border border-gray-200 rounded-lg shadow dark:border-gray-700 dark:bg-gray-800 flex flex-col">
          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
            Cost by Tier
          </h3>
          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
            Cost breakdown by service tier.
          </p>
          <div className="h-64">
            {tierData ? (
              <Doughnut data={tierData} options={doughnutOptions} />
            ) : (
              <p className="text-gray-500 dark:text-gray-400">No data</p>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}