portal-mojo 0.1.0

package/src/admin/cloudwatch/CloudWatchDashboardPage.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import { Badge, modal } from '../../ui';
+import { LazyCloudWatchChart } from './CloudWatchChart';
+import {
+    CLOUDWATCH_DASHBOARD_CHARTS, useCloudWatchResources,
+    type CloudWatchAccount, type CloudWatchResource,
+} from './data';
+
+const EAGER_CHART_COUNT = 4;
+const TYPE_META: Record<CloudWatchAccount, { label: string; icon: string }> = {
+    ec2: { label: 'EC2 instances', icon: 'bi-pc-display' },
+    rds: { label: 'RDS databases', icon: 'bi-database' },
+    redis: { label: 'ElastiCache Redis', icon: 'bi-lightning-charge' },
+};
+
+export function showCloudWatchResourceDetail(resource: CloudWatchResource): void {
+    void import('./CloudWatchResourceDetail').then(({ CloudWatchResourceDetail }) => (
+        modal.detail((close) => <CloudWatchResourceDetail resource={resource} onClose={() => close(null)} />)
+    ));
+}
+
+function CloudWatchResourcesDialog({ onClose }: { onClose: () => void }) {
+    const query = useCloudWatchResources();
+    return <div className="modal-pad cloudwatch-resources-dialog">
+        <div className="cloudwatch-modal-heading"><div><div className="eyebrow">AWS inventory</div><h2 className="modal-title">CloudWatch resources</h2></div><button className="btn-icon" title="Close" aria-label="Close" onClick={onClose}><i className="bi bi-x-lg" /></button></div>
+        {query.isPending ? <div className="cloudwatch-resource-loading"><span className="skel skel-block" /></div> : query.error ? <div className="form-alert" role="alert">{query.error.message}</div> : (
+            <div className="cloudwatch-resource-groups">
+                {(Object.keys(TYPE_META) as CloudWatchAccount[]).map((kind) => <section key={kind}><h3><i className={`bi ${TYPE_META[kind].icon}`} /> {TYPE_META[kind].label}</h3><div className="cloudwatch-resource-list">{query.data![kind].length === 0 ? <p className="dim">No resources discovered.</p> : query.data![kind].map((resource) => <button key={resource.id} className="cloudwatch-resource-row" onClick={() => showCloudWatchResourceDetail(resource)}><span><b>{resource.slug}</b><small>{resource.id}</small></span><Badge>{resource.status}</Badge><i className="bi bi-chevron-right" /></button>)}</div></section>)}
+            </div>
+        )}
+    </div>;
+}
+
+export function showCloudWatchResources(): void {
+    void modal.open((close) => <CloudWatchResourcesDialog onClose={() => close(null)} />, { size: 'lg' });
+}
+
+export function CloudWatchDashboardPage() {
+    const [refreshSignal, setRefreshSignal] = useState(0);
+    useEffect(() => {
+        const timer = window.setInterval(() => setRefreshSignal((value) => value + 1), 300_000);
+        return () => window.clearInterval(timer);
+    }, []);
+    return <div className="admin-dashboard cloudwatch-dashboard-page">
+        <header className="admin-dashboard-header cloudwatch-page-heading">
+            <div><div className="eyebrow">Infrastructure · AWS</div><h1>CloudWatch monitoring</h1><p className="dim">Global EC2, RDS, and ElastiCache Redis health from the configured AWS account.</p></div>
+            <div className="cloudwatch-page-actions"><button className="btn" onClick={showCloudWatchResources}><i className="bi bi-clouds" /> Resources</button><button className="btn btn-primary" onClick={() => setRefreshSignal((value) => value + 1)}><i className="bi bi-arrow-repeat" /> Refresh charts</button></div>
+        </header>
+        <div className="cloudwatch-gap-note"><i className="bi bi-info-circle" /><span>ELB and Lambda are not shown because django-mojo exposes no CloudWatch account mapping for them.</span></div>
+        <div className="cloudwatch-grid">{CLOUDWATCH_DASHBOARD_CHARTS.map((definition, index) => <LazyCloudWatchChart key={`${definition.account}:${definition.category}`} definition={definition} refreshSignal={refreshSignal} eager={index < EAGER_CHART_COUNT} />)}</div>
+    </div>;
+}

package/src/admin/cloudwatch/CloudWatchResourceDetail.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { DetailView, FlatRow } from '../../ui';
+import { LazyCloudWatchChart } from './CloudWatchChart';
+import { CLOUDWATCH_RESOURCE_CHARTS, type CloudWatchAccount, type CloudWatchResource } from './data';
+
+const TYPE_META: Record<CloudWatchAccount, { label: string; icon: string }> = {
+    ec2: { label: 'EC2 instances', icon: 'bi-pc-display' },
+    rds: { label: 'RDS databases', icon: 'bi-database' },
+    redis: { label: 'ElastiCache Redis', icon: 'bi-lightning-charge' },
+};
+
+function ResourceMetadata({ resource }: { resource: CloudWatchResource }) {
+    if (resource.kind === 'ec2') return <><FlatRow label="AWS id"><code>{resource.id}</code></FlatRow><FlatRow label="State">{resource.state}</FlatRow><FlatRow label="Instance type">{resource.instance_type || '—'}</FlatRow><FlatRow label="Private IP">{resource.private_ip || '—'}</FlatRow><FlatRow label="Public IP">{resource.public_ip || '—'}</FlatRow></>;
+    if (resource.kind === 'rds') return <><FlatRow label="AWS id"><code>{resource.id}</code></FlatRow><FlatRow label="Status">{resource.status}</FlatRow><FlatRow label="Engine">{resource.engine || '—'}</FlatRow><FlatRow label="Instance class">{resource.instance_class || '—'}</FlatRow><FlatRow label="Endpoint">{resource.endpoint || '—'}</FlatRow></>;
+    return <><FlatRow label="AWS id"><code>{resource.id}</code></FlatRow><FlatRow label="Status">{resource.status}</FlatRow><FlatRow label="Engine">{resource.engine || '—'}</FlatRow><FlatRow label="Node type">{resource.node_type || '—'}</FlatRow><FlatRow label="Nodes">{resource.num_nodes.toLocaleString()}</FlatRow></>;
+}
+
+export function CloudWatchResourceDetail({ resource, onClose }: { resource: CloudWatchResource; onClose: () => void }) {
+    const [refreshSignal, setRefreshSignal] = useState(0);
+    const meta = TYPE_META[resource.kind];
+    const definitions = CLOUDWATCH_RESOURCE_CHARTS[resource.kind].map((definition) => ({ ...definition, account: resource.kind }));
+    return <DetailView
+        title={resource.slug}
+        subtitle={meta.label}
+        icon={meta.icon}
+        chips={[{ text: resource.status, tone: resource.status === 'available' || resource.status === 'running' ? 'success' : 'warning' }]}
+        onClose={onClose}
+        sections={[
+            { key: 'overview', label: 'Overview', icon: 'bi-info-circle', render: () => <div className="detail-section"><p className="dim">Charts target the raw AWS id. The backend deliberately returns the friendly slug as the series label.</p><ResourceMetadata resource={resource} /></div> },
+            { key: 'metrics', label: 'Metrics', icon: 'bi-graph-up', render: () => <div className="detail-section"><div className="cloudwatch-detail-actions"><button className="btn" onClick={() => setRefreshSignal((value) => value + 1)}><i className="bi bi-arrow-repeat" /> Refresh metrics</button></div><div className="cloudwatch-grid">{definitions.map((definition, index) => <LazyCloudWatchChart key={definition.category} definition={definition} slugs={[resource.id]} refreshSignal={refreshSignal} eager={index < 2} />)}</div></div> },
+        ]}
+    />;
+}

package/src/admin/cloudwatch/data.ts

@@ -0,0 +1,163 @@
+import { useQuery } from '@tanstack/react-query';
+import { mojoCall, useAuthSnapshot, type MetricsResponse, type Params } from '../../client';
+import type { MetricsFetchParams } from '../../charts';
+
+export const CLOUDWATCH_PERMISSIONS = ['sys.manage_aws'];
+export const CLOUDWATCH_ACCOUNTS = ['ec2', 'rds', 'redis'] as const;
+export const CLOUDWATCH_GRANULARITIES = ['minutes', 'hours', 'days'] as const;
+
+export type CloudWatchAccount = typeof CLOUDWATCH_ACCOUNTS[number];
+export type CloudWatchUnit = 'percent' | 'bytes' | 'seconds' | 'count';
+
+export interface CloudWatchChartDefinition {
+    account: CloudWatchAccount;
+    category: string;
+    title: string;
+    unit: CloudWatchUnit;
+}
+
+export const CLOUDWATCH_DASHBOARD_CHARTS: readonly CloudWatchChartDefinition[] = [
+    { account: 'ec2', category: 'cpu', title: 'EC2 CPU', unit: 'percent' },
+    { account: 'ec2', category: 'net_out', title: 'EC2 Network Out', unit: 'bytes' },
+    { account: 'ec2', category: 'memory', title: 'EC2 Memory', unit: 'percent' },
+    { account: 'ec2', category: 'disk', title: 'EC2 Disk', unit: 'percent' },
+    { account: 'rds', category: 'cpu', title: 'RDS CPU', unit: 'percent' },
+    { account: 'rds', category: 'conns', title: 'RDS Connections', unit: 'count' },
+    { account: 'rds', category: 'read_latency', title: 'RDS Read Latency', unit: 'seconds' },
+    { account: 'rds', category: 'write_latency', title: 'RDS Write Latency', unit: 'seconds' },
+    { account: 'redis', category: 'cpu', title: 'Redis CPU', unit: 'percent' },
+    { account: 'redis', category: 'conns', title: 'Redis Connections', unit: 'count' },
+    { account: 'redis', category: 'cache_misses', title: 'Redis Cache Misses', unit: 'count' },
+    { account: 'redis', category: 'cache_hits', title: 'Redis Cache Hits', unit: 'count' },
+] as const;
+
+export const CLOUDWATCH_RESOURCE_CHARTS: Readonly<Record<CloudWatchAccount, readonly Omit<CloudWatchChartDefinition, 'account'>[]>> = {
+    ec2: [
+        { category: 'cpu', title: 'CPU Utilization', unit: 'percent' },
+        { category: 'memory', title: 'Memory Usage', unit: 'percent' },
+        { category: 'disk', title: 'Disk Usage', unit: 'percent' },
+        { category: 'net_in', title: 'Network In', unit: 'bytes' },
+        { category: 'net_out', title: 'Network Out', unit: 'bytes' },
+        { category: 'disk_read', title: 'Disk Read Ops', unit: 'count' },
+        { category: 'disk_write', title: 'Disk Write Ops', unit: 'count' },
+        { category: 'status_check', title: 'Status Check', unit: 'count' },
+    ],
+    rds: [
+        { category: 'cpu', title: 'CPU Utilization', unit: 'percent' },
+        { category: 'conns', title: 'Active Connections', unit: 'count' },
+        { category: 'free_storage', title: 'Free Storage', unit: 'bytes' },
+        { category: 'free_memory', title: 'Freeable Memory', unit: 'bytes' },
+        { category: 'read_iops', title: 'Read IOPS', unit: 'count' },
+        { category: 'write_iops', title: 'Write IOPS', unit: 'count' },
+        { category: 'read_latency', title: 'Read Latency', unit: 'seconds' },
+        { category: 'write_latency', title: 'Write Latency', unit: 'seconds' },
+        { category: 'net_in', title: 'Network In', unit: 'bytes' },
+        { category: 'net_out', title: 'Network Out', unit: 'bytes' },
+    ],
+    redis: [
+        { category: 'cpu', title: 'CPU Utilization', unit: 'percent' },
+        { category: 'conns', title: 'Current Connections', unit: 'count' },
+        { category: 'cache_memory', title: 'Cache Memory Used', unit: 'bytes' },
+        { category: 'cache_hits', title: 'Cache Hits', unit: 'count' },
+        { category: 'cache_misses', title: 'Cache Misses', unit: 'count' },
+        { category: 'replication_lag', title: 'Replication Lag', unit: 'seconds' },
+        { category: 'net_in', title: 'Network In', unit: 'bytes' },
+        { category: 'net_out', title: 'Network Out', unit: 'bytes' },
+    ],
+};
+
+interface ResourceBase { id: string; slug: string; status: string }
+export interface Ec2Resource extends ResourceBase { kind: 'ec2'; name: string; state: string; instance_type: string; private_ip: string; public_ip: string }
+export interface RdsResource extends ResourceBase { kind: 'rds'; engine: string; instance_class: string; endpoint: string }
+export interface RedisResource extends ResourceBase { kind: 'redis'; engine: string; node_type: string; num_nodes: number }
+export type CloudWatchResource = Ec2Resource | RdsResource | RedisResource;
+export type CloudWatchResources = Record<CloudWatchAccount, CloudWatchResource[]>;
+
+function object(value: unknown, label: string): Record<string, unknown> {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) throw new Error(`CloudWatch ${label} returned a malformed object.`);
+    return value as Record<string, unknown>;
+}
+
+function text(value: unknown, label: string, allowEmpty = true): string {
+    if (typeof value !== 'string') throw new Error(`CloudWatch ${label} returned a non-string value.`);
+    const clean = value.replace(/[\u0000-\u001f\u007f]/g, '').slice(0, 1000);
+    if (!allowEmpty && !clean) throw new Error(`CloudWatch ${label} returned an empty value.`);
+    return clean;
+}
+
+function positiveInteger(value: unknown, label: string): number {
+    if (typeof value !== 'number' || !Number.isInteger(value) || value <= 0) throw new Error(`CloudWatch ${label} must be a positive integer.`);
+    return value;
+}
+
+export function sanitizeCloudWatchError(error: unknown): Error {
+    const source = error instanceof Error ? error.message : typeof error === 'string' ? error : 'CloudWatch request failed';
+    const clean = source
+        .replace(/\b(?:AKIA|ASIA)[0-9A-Z]{16}\b/g, '[redacted]')
+        .replace(/\b(authorization|x-amz-security-token)\s*[:=]\s*(?:bearer\s+)?[^\s,;]+/gi, '$1: [redacted]')
+        .replace(/\b(?:aws_secret_access_key|secret_access_key|session_token)\s*[:=]\s*[^\s,;]+/gi, '[redacted]')
+        .slice(0, 1000);
+    return new Error(clean || 'CloudWatch request failed');
+}
+
+function sanitizeResource(kind: CloudWatchAccount, value: unknown): CloudWatchResource {
+    const raw = object(value, `${kind} resource`);
+    const base = { id: text(raw.id, `${kind}.id`, false), slug: text(raw.slug, `${kind}.slug`, false), status: text(raw.status ?? raw.state ?? 'unknown', `${kind}.status`, false) };
+    if (kind === 'ec2') return { ...base, kind, name: text(raw.name ?? '', 'ec2.name'), state: text(raw.state ?? 'unknown', 'ec2.state', false), instance_type: text(raw.instance_type ?? '', 'ec2.instance_type'), private_ip: text(raw.private_ip ?? '', 'ec2.private_ip'), public_ip: text(raw.public_ip ?? '', 'ec2.public_ip') };
+    if (kind === 'rds') return { ...base, kind, engine: text(raw.engine ?? '', 'rds.engine'), instance_class: text(raw.instance_class ?? '', 'rds.instance_class'), endpoint: text(raw.endpoint ?? '', 'rds.endpoint') };
+    return { ...base, kind, engine: text(raw.engine ?? '', 'redis.engine'), node_type: text(raw.node_type ?? '', 'redis.node_type'), num_nodes: positiveInteger(raw.num_nodes, 'redis.num_nodes') };
+}
+
+export function sanitizeCloudWatchResources(value: unknown): CloudWatchResources {
+    const raw = object(value, 'resources');
+    return Object.fromEntries(CLOUDWATCH_ACCOUNTS.map((kind) => {
+        if (!Array.isArray(raw[kind])) throw new Error(`CloudWatch resources omitted the top-level ${kind} list.`);
+        return [kind, raw[kind].map((row) => sanitizeResource(kind, row))];
+    })) as CloudWatchResources;
+}
+
+export async function fetchCloudWatchResources(): Promise<CloudWatchResources> {
+    try {
+        const body = await mojoCall('/api/aws/cloudwatch/resources');
+        return sanitizeCloudWatchResources(body);
+    } catch (error) {
+        throw sanitizeCloudWatchError(error);
+    }
+}
+
+export function useCloudWatchResources() {
+    const auth = useAuthSnapshot();
+    return useQuery({
+        queryKey: ['admin-cloudwatch', 'resources', auth.uid],
+        queryFn: fetchCloudWatchResources,
+        enabled: auth.authenticated && Boolean(auth.uid),
+        staleTime: 5 * 60_000,
+    });
+}
+
+function metricValues(value: unknown, slug: string): number[] {
+    if (!Array.isArray(value)) throw new Error(`CloudWatch series ${slug} is not an array.`);
+    return value.map((item) => {
+        if (typeof item !== 'number' || !Number.isFinite(item) || item < 0) throw new Error(`CloudWatch series ${slug} contains an invalid value.`);
+        return item;
+    });
+}
+
+export async function loadCloudWatchSeries(params: MetricsFetchParams): Promise<MetricsResponse> {
+    try {
+        const account = text(params.account, 'fetch.account', false) as CloudWatchAccount;
+        if (!CLOUDWATCH_ACCOUNTS.includes(account)) throw new Error(`Unsupported CloudWatch account: ${account}`);
+        const category = text(params.category, 'fetch.category', false);
+        const granularity = text(params.granularity, 'fetch.granularity', false);
+        if (!CLOUDWATCH_GRANULARITIES.includes(granularity as typeof CLOUDWATCH_GRANULARITIES[number])) throw new Error(`Unsupported CloudWatch granularity: ${granularity}`);
+        const wire: Params = { account, category, granularity, stat: params.stat ?? 'avg', dt_start: params.dt_start, dt_end: params.dt_end };
+        if (typeof params.slugs === 'string' && params.slugs.trim()) wire.slugs = params.slugs;
+        const body = await mojoCall('/api/aws/cloudwatch/fetch', { params: wire });
+        const raw = object(body.data, 'fetch payload');
+        const labels = Array.isArray(raw.labels) ? raw.labels.map((label) => text(label, 'fetch label')) : (() => { throw new Error('CloudWatch fetch omitted labels.'); })();
+        const data = object(raw.data, 'fetch data');
+        return { labels, datasets: Object.entries(data).map(([slug, values]) => ({ label: text(slug, 'response slug', false), data: metricValues(values, slug) })) };
+    } catch (error) {
+        throw sanitizeCloudWatchError(error);
+    }
+}

package/src/admin/cloudwatch/index.ts

@@ -0,0 +1,16 @@
+import type { AdminSection } from '../index';
+import { CloudWatchDashboardPage } from './CloudWatchDashboardPage';
+import { CLOUDWATCH_PERMISSIONS } from './data';
+
+export * from './data';
+export * from './CloudWatchChart';
+export * from './CloudWatchDashboardPage';
+
+export const CLOUDWATCH_ADMIN_SECTION: AdminSection = {
+    id: 'cloudwatch',
+    title: 'CloudWatch',
+    icon: 'bi-clouds',
+    navigationGroup: 'observability',
+    permissions: CLOUDWATCH_PERMISSIONS,
+    routes: [{ path: '', label: 'CloudWatch', component: CloudWatchDashboardPage, permissions: CLOUDWATCH_PERMISSIONS }],
+};