Dashboard Layout

/**
 * A widget that arranges other widgets in a horizontal row
 */
class Row implements IWidget {
  /**
   * Create a new row layout
   * @param widgets - Widgets to arrange in the row
   */
  constructor(...widgets: IWidget[]);

  /** Total width of all widgets in the row */
  readonly width: number;
  /** Maximum height of all widgets in the row */
  readonly height: number;
  /** Widgets contained in this row */
  readonly widgets: IWidget[];

  /**
   * Position this row and all contained widgets
   * @param x - X coordinate for the row
   * @param y - Y coordinate for the row
   */
  position(x: number, y: number): void;

  /**
   * Return JSON representation of this row
   * @returns Array of widget JSON configurations
   */
  toJson(): any[];
}

import * as cloudwatch from '@aws-cdk/aws-cloudwatch';

// Create a row of single value widgets
const metricsRow = new cloudwatch.Row(
  new cloudwatch.SingleValueWidget({
    title: 'CPU Usage',
    metrics: [cpuMetric],
    width: 6,
    height: 6
  }),
  new cloudwatch.SingleValueWidget({
    title: 'Memory Usage', 
    metrics: [memoryMetric],
    width: 6,
    height: 6
  }),
  new cloudwatch.SingleValueWidget({
    title: 'Disk Usage',
    metrics: [diskMetric],
    width: 6,
    height: 6
  }),
  new cloudwatch.SingleValueWidget({
    title: 'Network I/O',
    metrics: [networkMetric],
    width: 6,
    height: 6
  })
);

// Row with mixed widget types
const mixedRow = new cloudwatch.Row(
  new cloudwatch.GraphWidget({
    title: 'Performance Trends',
    left: [responseTimeMetric],
    width: 12,
    height: 6
  }),
  new cloudwatch.AlarmStatusWidget({
    title: 'Alarms',
    alarms: [highCpuAlarm, highMemoryAlarm],
    width: 12,
    height: 6
  })
);

/**
 * A widget that arranges other widgets in a vertical column
 */
class Column implements IWidget {
  /**
   * Create a new column layout
   * @param widgets - Widgets to arrange in the column
   */
  constructor(...widgets: IWidget[]);

  /** Maximum width of all widgets in the column */
  readonly width: number;
  /** Total height of all widgets in the column */
  readonly height: number;
  /** Widgets contained in this column */
  readonly widgets: IWidget[];

  /**
   * Position this column and all contained widgets
   * @param x - X coordinate for the column
   * @param y - Y coordinate for the column
   */
  position(x: number, y: number): void;

  /**
   * Return JSON representation of this column
   * @returns Array of widget JSON configurations
   */
  toJson(): any[];
}

// Create a column of graph widgets
const graphsColumn = new cloudwatch.Column(
  new cloudwatch.GraphWidget({
    title: 'Request Rate',
    left: [requestsMetric],
    width: 12,
    height: 6
  }),
  new cloudwatch.GraphWidget({
    title: 'Error Rate',
    left: [errorsMetric],
    width: 12,
    height: 6
  }),
  new cloudwatch.GraphWidget({
    title: 'Response Time',
    left: [responseTimeMetric],
    width: 12,
    height: 6
  })
);

// Column with different widget types
const monitoringColumn = new cloudwatch.Column(
  new cloudwatch.TextWidget({
    markdown: '## System Health Dashboard',
    width: 12,
    height: 2
  }),
  new cloudwatch.AlarmStatusWidget({
    title: 'Critical Alarms',
    alarms: [criticalAlarms],
    width: 12,
    height: 4
  }),
  new cloudwatch.SingleValueWidget({
    title: 'Current Status',
    metrics: [statusMetric],
    width: 12,
    height: 4
  })
);

/**
 * A widget that represents empty space
 */
class Spacer implements IWidget {
  /**
   * Create a new spacer
   * @param props - Spacer configuration properties
   */
  constructor(props?: SpacerProps);

  /** Width of the spacer */
  readonly width: number;
  /** Height of the spacer */
  readonly height: number;

  /**
   * Position this spacer
   * @param x - X coordinate
   * @param y - Y coordinate
   */
  position(x: number, y: number): void;

  /**
   * Return JSON representation of this spacer
   * @returns Empty array (spacers don't render content)
   */
  toJson(): any[];
}

interface SpacerProps {
  /** Width of the spacer in grid units */
  readonly width?: number;
  /** Height of the spacer in grid units */
  readonly height?: number;
}

// Add spacing between sections
const spacedLayout = new cloudwatch.Row(
  new cloudwatch.GraphWidget({
    title: 'CPU Metrics',
    left: [cpuMetric],
    width: 8,
    height: 6
  }),
  new cloudwatch.Spacer({ width: 2 }), // 2 grid units of horizontal space
  new cloudwatch.GraphWidget({
    title: 'Memory Metrics',
    left: [memoryMetric],
    width: 8,
    height: 6
  }),
  new cloudwatch.Spacer({ width: 6 }) // Fill remaining space
);

// Vertical spacing in columns
const verticalSpacedLayout = new cloudwatch.Column(
  new cloudwatch.TextWidget({
    markdown: '# Performance Dashboard',
    width: 24,
    height: 2
  }),
  new cloudwatch.Spacer({ height: 1 }), // Vertical space
  new cloudwatch.GraphWidget({
    title: 'Key Metrics',
    left: [performanceMetric],
    width: 24,
    height: 8
  })
);

// Complex nested layout
const complexDashboard = new cloudwatch.Dashboard(this, 'ComplexLayout', {
  dashboardName: 'Advanced-Layout-Example'
});

// Header section with title and key metrics
const headerSection = new cloudwatch.Row(
  new cloudwatch.TextWidget({
    markdown: '# Production System Dashboard\n\nLast updated: Auto-refresh every 5 minutes',
    width: 12,
    height: 3
  }),
  new cloudwatch.Column(
    new cloudwatch.SingleValueWidget({
      title: 'Uptime',
      metrics: [uptimeMetric],
      width: 6,
      height: 2
    }),
    new cloudwatch.SingleValueWidget({
      title: 'Active Users',
      metrics: [activeUsersMetric],
      width: 6,
      height: 2
    })
  ),
  new cloudwatch.Column(
    new cloudwatch.SingleValueWidget({
      title: 'Requests/min',
      metrics: [requestRateMetric],
      width: 6,
      height: 2
    }),
    new cloudwatch.SingleValueWidget({
      title: 'Error Rate %',
      metrics: [errorRateMetric],
      width: 6,
      height: 2
    })
  )
);

// Main content section with graphs and alarms
const contentSection = new cloudwatch.Row(
  // Left column: Performance graphs
  new cloudwatch.Column(
    new cloudwatch.GraphWidget({
      title: 'Response Time Trends',
      left: [responseTimeMetric],
      width: 12,
      height: 6,
      leftAnnotations: [{
        value: 1000,
        label: 'SLA Threshold',
        color: '#FF0000'
      }]
    }),
    new cloudwatch.GraphWidget({
      title: 'Request Volume',
      left: [requestVolumeMetric],
      width: 12,
      height: 6,
      stacked: true
    })
  ),
  
  // Right column: System health
  new cloudwatch.Column(
    new cloudwatch.AlarmStatusWidget({
      title: 'System Alarms',
      alarms: [cpuAlarm, memoryAlarm, diskAlarm],
      width: 12,
      height: 6
    }),
    new cloudwatch.LogQueryWidget({
      title: 'Recent Errors',
      logGroupNames: ['/aws/lambda/api'],
      queryString: 'fields @message | filter @message like /ERROR/ | sort @timestamp desc | limit 10',
      width: 12,
      height: 6
    })
  )
);

// Footer section with additional details
const footerSection = new cloudwatch.Row(
  new cloudwatch.GraphWidget({
    title: 'Infrastructure Metrics',
    left: [cpuMetric, memoryMetric],
    right: [networkInMetric, networkOutMetric],
    width: 16,
    height: 6
  }),
  new cloudwatch.Spacer({ width: 2 }),
  new cloudwatch.TextWidget({
    markdown: `
## Alert Contacts
- **Primary**: ops@company.com
- **Secondary**: devops@company.com
- **Escalation**: management@company.com

## Runbooks
- [High CPU Response](runbook/cpu.md)
- [Memory Issues](runbook/memory.md)
- [Network Problems](runbook/network.md)
    `,
    width: 6,
    height: 6
  })
);

// Add all sections to dashboard
complexDashboard.addWidgets(
  headerSection,
  new cloudwatch.Spacer({ height: 1 }), // Vertical spacing between sections
  contentSection,
  new cloudwatch.Spacer({ height: 1 }),
  footerSection
);

// Grid-based layout example
const gridLayout = new cloudwatch.Dashboard(this, 'GridLayout', {
  dashboardName: 'Grid-Based-Layout'
});

// Create a 3x2 grid of widgets
const gridRows = [
  new cloudwatch.Row(
    new cloudwatch.SingleValueWidget({
      title: 'Metric 1',
      metrics: [metric1],
      width: 8,
      height: 4
    }),
    new cloudwatch.SingleValueWidget({
      title: 'Metric 2',
      metrics: [metric2],
      width: 8,
      height: 4
    }),
    new cloudwatch.SingleValueWidget({
      title: 'Metric 3',
      metrics: [metric3],
      width: 8,
      height: 4
    })
  ),
  new cloudwatch.Row(
    new cloudwatch.GraphWidget({
      title: 'Trend 1',
      left: [trendMetric1],
      width: 8,
      height: 6
    }),
    new cloudwatch.GraphWidget({
      title: 'Trend 2',
      left: [trendMetric2],
      width: 8,
      height: 6
    }),
    new cloudwatch.GraphWidget({
      title: 'Trend 3',
      left: [trendMetric3],
      width: 8,
      height: 6
    })
  )
];

gridLayout.addWidgets(...gridRows);

// Responsive layout with different widget sizes
const responsiveLayout = new cloudwatch.Dashboard(this, 'ResponsiveLayout', {
  dashboardName: 'Responsive-Dashboard'
});

// Mobile-friendly layout (smaller widgets)
const mobileSection = new cloudwatch.Row(
  new cloudwatch.SingleValueWidget({
    title: 'Key Metric',
    metrics: [keyMetric],
    width: 12,
    height: 4
  }),
  new cloudwatch.SingleValueWidget({
    title: 'Secondary Metric',
    metrics: [secondaryMetric],
    width: 12,
    height: 4
  })
);

// Desktop layout (larger widgets)
const desktopSection = new cloudwatch.Row(
  new cloudwatch.GraphWidget({
    title: 'Detailed Analysis',
    left: [detailedMetric1, detailedMetric2],
    right: [detailedMetric3],
    width: 24,
    height: 8,
    legendPosition: cloudwatch.LegendPosition.BOTTOM
  })
);

responsiveLayout.addWidgets(mobileSection, desktopSection);