Platform Engineering with Internal Developer Portals: The Complete Guide to Building Self-Service Infrastructure

Cost Management Plugin

// plugins/cost-insights/src/plugin.ts
import {
  createPlugin,
  createRoutableExtension,
} from '@backstage/core-plugin-api';
import { rootRouteRef } from './routes';
export const costInsightsPlugin = createPlugin({
  id: 'cost-insights',
  routes: {
    root: rootRouteRef,
  },
});
export const CostInsightsPage = costInsightsPlugin.provide(
  createRoutableExtension({
    name: 'CostInsightsPage',
    component: () =>
      import('./components/CostInsightsPage').then(m => m.CostInsightsPage),
    mountPoint: rootRouteRef,
  }),
);
// plugins/cost-insights/src/components/CostInsightsPage.tsx
import React, { useState, useEffect } from 'react';
import {
  Content,
  Header,
  Page,
  Progress,
  InfoCard,
} from '@backstage/core-components';
import { useApi } from '@backstage/core-plugin-api';
import { costInsightsApiRef } from '../api';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts';
export const CostInsightsPage = () => {
  const costApi = useApi(costInsightsApiRef);
  const [loading, setLoading] = useState(true);
  const [costData, setCostData] = useState([]);
  const [recommendations, setRecommendations] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const [costs, recs] = await Promise.all([
          costApi.getCostData(),
          costApi.getRecommendations(),
        ]);
        setCostData(costs);
        setRecommendations(recs);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [costApi]);
  if (loading) {
    return ;
  }
  return (
    
      

      
        
          
            
              
              
              
              
              

              
              
              
            
          
        
        
          

            {recommendations.map((rec, index) => (
              

                
{rec.title}
                
{rec.description}
                

                  Potential Savings: ${rec.savings}/month
                
              
            ))}
          
        
      
    
  );
};
// plugins/cost-insights/src/api/CostInsightsApi.ts
import { createApiRef } from '@backstage/core-plugin-api';
export interface CostData {
  month: string;
  aws: number;
  gcp: number;
  azure: number;
}
export interface Recommendation {
  title: string;
  description: string;
  savings: number;
}
export interface CostInsightsApi {
  getCostData(): Promise;
  getRecommendations(): Promise;
}
export const costInsightsApiRef = createApiRef({
  id: 'plugin.cost-insights.service',
});
// plugins/cost-insights/src/api/CostInsightsClient.ts
import { DiscoveryApi, FetchApi } from '@backstage/core-plugin-api';
import { CostInsightsApi, CostData, Recommendation } from './CostInsightsApi';
export class CostInsightsClient implements CostInsightsApi {
  private readonly discoveryApi: DiscoveryApi;
  private readonly fetchApi: FetchApi;
  constructor(options: {
    discoveryApi: DiscoveryApi;
    fetchApi: FetchApi;
  }) {
    this.discoveryApi = options.discoveryApi;
    this.fetchApi = options.fetchApi;
  }
  async getCostData(): Promise {
    const baseUrl = await this.discoveryApi.getBaseUrl('cost-insights');
    const response = await this.fetchApi.fetch(`${baseUrl}/costs`);
    return await response.json();
  }
  async getRecommendations(): Promise {
    const baseUrl = await this.discoveryApi.getBaseUrl('cost-insights');
    const response = await this.fetchApi.fetch(`${baseUrl}/recommendations`);
    return await response.json();
  }
}