@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/cloud-cost-dashboard/CloudCostDashboard.stories.tsx

@@ -0,0 +1,356 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  CloudCostDashboard,
+  defaultCloudCostSummary,
+  defaultCloudCostItems,
+  defaultCostAnomalies,
+} from './index'
+import type { CostSummary, CostItem, CostAnomaly, CloudProvider, TimeRange } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof CloudCostDashboard> = {
+  title: 'Blocks/CloudCostDashboard',
+  component: CloudCostDashboard,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A cloud cost management dashboard for monitoring and analyzing spending across multiple cloud providers (AWS, GCP, Azure) with category breakdowns and anomaly detection.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof CloudCostDashboard>
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6">
+      <CloudCostDashboard
+        summary={defaultCloudCostSummary}
+        items={defaultCloudCostItems}
+        anomalies={defaultCostAnomalies}
+        onTimeRangeChange={(range) => console.log('Time range:', range)}
+        onProviderFilter={(provider) => console.log('Provider:', provider)}
+        onExport={() => console.log('Export')}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const OverBudget: Story = {
+  render: () => {
+    const overBudgetSummary: CostSummary = {
+      totalCost: 62000,
+      previousTotalCost: 48000,
+      budget: 50000,
+      forecast: 75000,
+      byProvider: {
+        aws: 38000,
+        gcp: 18000,
+        azure: 6000,
+        all: 62000,
+      },
+      byCategory: {
+        compute: 32000,
+        storage: 12000,
+        database: 10000,
+        network: 5000,
+        security: 2000,
+        other: 1000,
+      },
+      topServices: [],
+    }
+
+    const criticalAnomalies: CostAnomaly[] = [
+      { id: '1', service: 'EC2 On-Demand', expectedCost: 8000, actualCost: 18000, deviation: 125, timestamp: new Date(), status: 'new' },
+      { id: '2', service: 'RDS Multi-AZ', expectedCost: 3000, actualCost: 7500, deviation: 150, timestamp: new Date(Date.now() - 3600000), status: 'new' },
+      { id: '3', service: 'Data Transfer OUT', expectedCost: 1500, actualCost: 4200, deviation: 180, timestamp: new Date(Date.now() - 7200000), status: 'acknowledged' },
+    ]
+
+    return (
+      <div className="p-6">
+        <CloudCostDashboard
+          summary={overBudgetSummary}
+          items={defaultCloudCostItems}
+          anomalies={criticalAnomalies}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const UnderBudget: Story = {
+  render: () => {
+    const underBudgetSummary: CostSummary = {
+      totalCost: 32000,
+      previousTotalCost: 35000,
+      budget: 50000,
+      forecast: 34000,
+      byProvider: {
+        aws: 20000,
+        gcp: 8000,
+        azure: 4000,
+        all: 32000,
+      },
+      byCategory: {
+        compute: 15000,
+        storage: 6000,
+        database: 5000,
+        network: 3000,
+        security: 2000,
+        other: 1000,
+      },
+      topServices: [],
+    }
+
+    return (
+      <div className="p-6">
+        <CloudCostDashboard
+          summary={underBudgetSummary}
+          items={defaultCloudCostItems}
+          anomalies={[]}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const AWSOnly: Story = {
+  render: () => {
+    const awsSummary: CostSummary = {
+      totalCost: 45000,
+      previousTotalCost: 42000,
+      budget: 50000,
+      byProvider: {
+        aws: 45000,
+        gcp: 0,
+        azure: 0,
+        all: 45000,
+      },
+      byCategory: {
+        compute: 22000,
+        storage: 10000,
+        database: 8000,
+        network: 3000,
+        security: 1500,
+        other: 500,
+      },
+      topServices: [],
+    }
+
+    const awsItems: CostItem[] = [
+      { id: '1', name: 'EC2 Instances', category: 'compute', provider: 'aws', cost: 15000, previousCost: 14000, usage: 850, unit: 'hours' },
+      { id: '2', name: 'S3 Storage', category: 'storage', provider: 'aws', cost: 5500, previousCost: 5000, usage: 25, unit: 'TB' },
+      { id: '3', name: 'RDS PostgreSQL', category: 'database', provider: 'aws', cost: 4500, previousCost: 4200 },
+      { id: '4', name: 'RDS MySQL', category: 'database', provider: 'aws', cost: 3500, previousCost: 3500 },
+      { id: '5', name: 'EBS Volumes', category: 'storage', provider: 'aws', cost: 4500, previousCost: 4000, usage: 10, unit: 'TB' },
+      { id: '6', name: 'CloudFront', category: 'network', provider: 'aws', cost: 2500, previousCost: 2200, usage: 150, unit: 'TB' },
+      { id: '7', name: 'Lambda', category: 'compute', provider: 'aws', cost: 1200, previousCost: 1000, usage: 50000000, unit: 'invocations' },
+      { id: '8', name: 'EKS', category: 'compute', provider: 'aws', cost: 5800, previousCost: 5500 },
+    ]
+
+    return (
+      <div className="p-6">
+        <CloudCostDashboard
+          summary={awsSummary}
+          items={awsItems}
+          anomalies={defaultCostAnomalies.filter(a => a.service.includes('EC2') || a.service.includes('Lambda'))}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const MultiCloud: Story = {
+  render: () => {
+    const multiCloudItems: CostItem[] = [
+      // AWS
+      { id: '1', name: 'EC2 Instances', category: 'compute', provider: 'aws', cost: 12500 },
+      { id: '2', name: 'S3 Storage', category: 'storage', provider: 'aws', cost: 3800 },
+      { id: '3', name: 'RDS PostgreSQL', category: 'database', provider: 'aws', cost: 4200 },
+      // GCP
+      { id: '4', name: 'GKE Clusters', category: 'compute', provider: 'gcp', cost: 8500 },
+      { id: '5', name: 'Cloud Storage', category: 'storage', provider: 'gcp', cost: 2200 },
+      { id: '6', name: 'BigQuery', category: 'database', provider: 'gcp', cost: 3800 },
+      { id: '7', name: 'Cloud Run', category: 'compute', provider: 'gcp', cost: 1500 },
+      // Azure
+      { id: '8', name: 'Virtual Machines', category: 'compute', provider: 'azure', cost: 5500 },
+      { id: '9', name: 'Blob Storage', category: 'storage', provider: 'azure', cost: 1800 },
+      { id: '10', name: 'Azure SQL', category: 'database', provider: 'azure', cost: 2500 },
+      { id: '11', name: 'Azure Functions', category: 'compute', provider: 'azure', cost: 800 },
+    ]
+
+    return (
+      <div className="p-6">
+        <CloudCostDashboard
+          summary={defaultCloudCostSummary}
+          items={multiCloudItems}
+          anomalies={defaultCostAnomalies}
+          onProviderFilter={(provider) => console.log('Filter:', provider)}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithTimeRange: Story = {
+  render: () => {
+    const [timeRange, setTimeRange] = React.useState<TimeRange>('month')
+
+    return (
+      <div className="p-6">
+        <CloudCostDashboard
+          summary={defaultCloudCostSummary}
+          items={defaultCloudCostItems}
+          anomalies={defaultCostAnomalies}
+          timeRange={timeRange}
+          onTimeRangeChange={setTimeRange}
+          onRefresh={() => console.log('Refresh for', timeRange)}
+        />
+      </div>
+    )
+  },
+}
+
+export const NoAnomalies: Story = {
+  render: () => (
+    <div className="p-6">
+      <CloudCostDashboard
+        summary={defaultCloudCostSummary}
+        items={defaultCloudCostItems}
+        anomalies={[]}
+        onRefresh={() => console.log('Refresh')}
+      />
+    </div>
+  ),
+}
+
+export const ManyAnomalies: Story = {
+  render: () => {
+    const manyAnomalies: CostAnomaly[] = [
+      { id: '1', service: 'EC2 Spot Instances', expectedCost: 500, actualCost: 1250, deviation: 150, timestamp: new Date(), status: 'new' },
+      { id: '2', service: 'Data Transfer OUT', expectedCost: 800, actualCost: 2400, deviation: 200, timestamp: new Date(Date.now() - 1800000), status: 'new' },
+      { id: '3', service: 'Lambda Functions', expectedCost: 200, actualCost: 520, deviation: 160, timestamp: new Date(Date.now() - 3600000), status: 'new' },
+      { id: '4', service: 'NAT Gateway', expectedCost: 300, actualCost: 680, deviation: 127, timestamp: new Date(Date.now() - 7200000), status: 'acknowledged' },
+      { id: '5', service: 'CloudWatch Logs', expectedCost: 150, actualCost: 380, deviation: 153, timestamp: new Date(Date.now() - 10800000), status: 'acknowledged' },
+      { id: '6', service: 'S3 Requests', expectedCost: 100, actualCost: 290, deviation: 190, timestamp: new Date(Date.now() - 14400000), status: 'resolved' },
+    ]
+
+    return (
+      <div className="p-6">
+        <CloudCostDashboard
+          summary={defaultCloudCostSummary}
+          items={defaultCloudCostItems}
+          anomalies={manyAnomalies}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </div>
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [timeRange, setTimeRange] = React.useState<TimeRange>('month')
+    const [provider, setProvider] = React.useState<CloudProvider>('all')
+
+    const filteredItems = provider === 'all'
+      ? defaultCloudCostItems
+      : defaultCloudCostItems.filter(item => item.provider === provider)
+
+    return (
+      <div className="p-6">
+        <CloudCostDashboard
+          summary={defaultCloudCostSummary}
+          items={filteredItems}
+          anomalies={defaultCostAnomalies}
+          timeRange={timeRange}
+          onTimeRangeChange={setTimeRange}
+          onProviderFilter={setProvider}
+          onExport={() => alert('Exporting cost report...')}
+          onRefresh={() => alert('Refreshing data...')}
+        />
+      </div>
+    )
+  },
+}
+
+export const FinOpsDashboard: Story = {
+  render: () => (
+    <div className="min-h-screen bg-muted/30">
+      <header className="bg-background border-b px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="font-bold text-xl">FinOps Dashboard</h1>
+            <p className="text-sm text-muted-foreground">Cloud Cost Management & Optimization</p>
+          </div>
+          <nav className="flex gap-4 text-sm">
+            <a href="#" className="text-foreground font-medium">Overview</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Budgets</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Recommendations</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">Reports</a>
+          </nav>
+        </div>
+      </header>
+      <main className="p-6">
+        <CloudCostDashboard
+          summary={defaultCloudCostSummary}
+          items={defaultCloudCostItems}
+          anomalies={defaultCostAnomalies}
+          onTimeRangeChange={(range) => console.log('Time range:', range)}
+          onProviderFilter={(provider) => console.log('Provider:', provider)}
+          onExport={() => console.log('Export')}
+          onRefresh={() => console.log('Refresh')}
+        />
+      </main>
+    </div>
+  ),
+}
+
+export const QuarterlyReview: Story = {
+  render: () => {
+    const quarterlySummary: CostSummary = {
+      totalCost: 135000,
+      previousTotalCost: 125000,
+      budget: 150000,
+      forecast: 145000,
+      byProvider: {
+        aws: 85000,
+        gcp: 35000,
+        azure: 15000,
+        all: 135000,
+      },
+      byCategory: {
+        compute: 65000,
+        storage: 28000,
+        database: 22000,
+        network: 12000,
+        security: 5000,
+        other: 3000,
+      },
+      topServices: [],
+    }
+
+    return (
+      <div className="p-6">
+        <CloudCostDashboard
+          summary={quarterlySummary}
+          items={defaultCloudCostItems}
+          anomalies={[]}
+          timeRange="quarter"
+          onRefresh={() => console.log('Refresh')}
+          onExport={() => console.log('Export quarterly report')}
+        />
+      </div>
+    )
+  },
+}