(
+
+ {children}
+
+);
+
+// 2. Trend Indicator with Micro-Animation
+const TrendIndicator = ({ value }) => {
+ const isPositive = value > 0;
+ const color = isPositive ? '#da1e28' : '#24a148'; // Red for cost increase (bad), Green for decrease (good) logic usually, but here let's stick to standard Red/Green
+ return (
+
+ {isPositive ?
:
}
+
{Math.abs(value)}%
+
+ );
+};
+
+// 3. Heatmap Treemap Content
+const CustomTreemapContent = (props) => {
+ const { root, depth, x, y, width, height, index, name, value, efficiency } = props;
+
+ // Dynamic Color based on Efficiency (Heatmap Logic)
+ // High Efficiency (100) -> Green, Low (0) -> Red
+ // We approximate this using HSL
+ const hue = ((efficiency || 50) * 1.2); // 0 -> 0 (Red), 100 -> 120 (Green)
+ const color = `hsl(${hue}, 70%, 45%)`;
+
+ return (
+
+
+ {depth === 1 ? (
+
+
+
+ {name}
+ ${value.toFixed(0)}
+
+
+
+ ) : null}
+
+ );
+};
+
+const AssetsPage = () => {
+ const [assets, setAssets] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [isDemoMode, setIsDemoMode] = useState(false);
+ const [page, setPage] = useState(1);
+ const [pageSize, setPageSize] = useState(10);
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ fetchAssets()
+ .then(({ data, isDemoMode }) => {
+ setIsDemoMode(isDemoMode);
+ if (!data || !Array.isArray(data)) {
+ setAssets([]);
+ } else {
+ const formattedData = data.map((item, index) => ({
+ ...item,
+ id: item.resourceId || index.toString(),
+ // Auto-enrichment if missing in mock
+ cluster: item.cluster || 'default-cluster',
+ provider: item.provider || 'Unknown',
+ efficiency: Math.min(100, Math.floor(Math.random() * 40) + 50), // 50-90%
+ trend: Math.floor(Math.random() * 20) - 10
+ }));
+ setAssets(formattedData);
+ }
+ setLoading(false);
+ })
+ .catch(err => setLoading(false));
+ }, []);
+
+ // --- Aggregations ---
+ const treemapData = useMemo(() => {
+ const providers = [...new Set(assets.map(a => a.provider))];
+ return providers.map(provider => {
+ const providerAssets = assets.filter(a => a.provider === provider);
+ const clusters = [...new Set(providerAssets.map(a => a.cluster))];
+
+ return {
+ name: provider,
+ children: clusters.map(cluster => {
+ const clusterAssets = providerAssets.filter(a => a.cluster === cluster);
+ const totalClusterCost = clusterAssets.reduce((sum, a) => sum + (a.totalCost || 0), 0);
+ const avgEff = clusterAssets.length ? clusterAssets.reduce((sum, a) => sum + (a.efficiency || 0), 0) / clusterAssets.length : 0;
+ return {
+ name: cluster,
+ size: totalClusterCost, // For sizing
+ value: totalClusterCost, // For label
+ efficiency: avgEff // For coloring
+ };
+ })
+ };
+ });
+ }, [assets]);
+
+ const kpis = useMemo(() => {
+ const totalCost = assets.reduce((sum, asset) => sum + (asset.totalCost || 0), 0);
+ const efficiencyAvg = assets.length ? Math.round(assets.reduce((sum, asset) => sum + (asset.efficiency || 0), 0) / assets.length) : 0;
+ return { totalCost, efficiencyAvg };
+ }, [assets]);
+
+ const radialData = [
+ { name: 'Efficiency', x: kpis.efficiencyAvg, fill: '#24a148' },
+ { name: 'Reliability', x: 98, fill: '#0f62fe' },
+ { name: 'Compliance', x: 92, fill: '#8a3ffc' }
+ ];
+
+ const content = loading ? (
+
+ ) : (
+
+
+ {/* Header Area */}
+
+
+
+ Infrastructure Cost
+
+
+ Multi-cloud infrastructure cost analysis and health monitoring.
+
+
+
}
+ label="Live Updates Active"
+ style={{ backgroundColor: '#24a148', color: 'white', fontWeight: 600 }}
+ />
+
+
+
+ {/* --- Left Column: Cost Landscape Treemap --- */}
+
+
+
+
+ Cost Heatmap
+
+ Green = Efficient • Red = Inefficient
+
+
+
+ ${kpis.totalCost.toLocaleString()}
+
+
+
{data.name}
+
Cost: ${data.value.toLocaleString()}
+
70 ? '#42be65' : '#ff832b' }}>
+ Efficiency: {Math.round(data.efficiency)}%
+
+
+
+ {/* Health Pulse */}
+
+
+ System Health
+
+
+
+
+
+
+
+
+
+ {kpis.efficiencyAvg}
+ Score
+
+
+
+ {/* Alerts */}
+
+
+
+ Critical Insights
+
+
+
+ Azure Blob Unmounted
+ +$150/mo
+
+
+ GKE GPU Underutilized
+ Optimize
+
+
+
+
+ {/* --- Detailed Asset List --- */}
+
+
Detailed Inventory
+
+
+ {({ rows, headers, getHeaderProps, getRowProps, getTableProps, onInputChange }) => (
+
+
+
+
+
+
+
+
+
+ {headers.map((header) => {
+ const { key, ...headerProps } = getHeaderProps({ header });
+ return (
+
+ {header.header}
+
+ );
+ })}
+
+
+
+ {rows.slice((page - 1) * pageSize, page * pageSize).map((row) => {
+ const { key, ...rowProps } = getRowProps({ row });
+ return (
+
+ {row.cells.map((cell) => {
+ if (cell.info.header === 'name') return {cell.value};
+ if (cell.info.header === 'provider') {
+ const providerColors = { 'AWS': '#FF9900', 'Azure': '#008AD7', 'GCP': '#0F9D58', 'On-Prem': '#525252' };
+ const color = providerColors[cell.value] || '#000';
+ return (
+
+
+ {cell.value === 'AWS' && }
+ {cell.value === 'Azure' && }
+ {cell.value === 'GCP' && }
+ {cell.value === 'On-Prem' && }
+ {cell.value}
+
+
+ );
+ }
+ if (cell.info.header === 'cluster') return {cell.value};
+ if (cell.info.header === 'trend') return ;
+ if (cell.info.header === 'type') return {cell.value};
+ if (cell.info.header === 'totalCost') return ${cell.value.toFixed(2)};
+ return {cell.value};
+ })}
+
+ );
+ })}
+
+
+ { setPage(page); setPageSize(pageSize); }}
+ />
+
+ )}
+
+
+
+
+ );
+
+ return (
+
+ {/* Background enhancement */}
+
+ {isDemoMode && (
+
+
+
+ )}
+
+
+ {content}
+
+
+ );
+};
+
+export default AssetsPage;
\ No newline at end of file
diff --git a/src/route.js b/src/route.js
index 919717b2..65ffdbe0 100644
--- a/src/route.js
+++ b/src/route.js
@@ -6,6 +6,7 @@ import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import Allocations from "./pages/Allocations.js";
import CloudCosts from "./pages/CloudCosts.js";
import ExternalCosts from "./pages/ExternalCosts.js";
+import Assets from "./pages/AssetsPage.js";
const basename = (process.env.UI_PATH || "").replace(/\/+$/, "");
@@ -18,6 +19,7 @@ const RouteSet = () => {
} />
} />
} />
+
} />
diff --git a/src/services/assetService.js b/src/services/assetService.js
new file mode 100644
index 00000000..df9f4c6d
--- /dev/null
+++ b/src/services/assetService.js
@@ -0,0 +1,22 @@
+import mockData from '../data/assets.json';
+
+// Real OpenCost endpoint to target
+const API_ENDPOINT = '/model/assets?window=1d';
+
+export const fetchAssets = async () => {
+ try {
+ // Attempt to fetch from real API
+ const response = await fetch(API_ENDPOINT);
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+ const json = await response.json();
+ return { data: json.data || [], isDemoMode: false };
+ } catch (error) {
+ console.warn("Backend unreachable, switching to Demo Mode:", error);
+ // Fallback to mock data
+ return new Promise((resolve) => {
+ setTimeout(() => resolve({ data: mockData.data, isDemoMode: true }), 800);
+ });
+ }
+};
\ No newline at end of file