Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions .github/extensions/ftk-local-dashboard/PRODUCT.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# Product

## Register

product

## Users

FinOps practitioners, cloud engineers, and consultants who need to analyze Azure cost data locally β€” without deploying Azure resources. They run this inside GitHub Copilot as a canvas panel while they work: exploring the data model, validating large datasets, or doing FinOps analysis in disconnected / on-premises environments. They are data-fluent, comfortable with KQL and Azure concepts, and expect density and precision over decoration. They are in a task when they open this β€” they want numbers fast.

## Product Purpose

A FinOps hub dashboard that connects to a local Kusto emulator or a remote Azure Data Explorer cluster. It provides cost, allocation, rate optimization, usage, anomaly, AI token, and capacity views. The Capacity workspace keeps quota, billed demand, inventory, physical supply, and pricing commitments as separate quota areas. Success means that a practitioner can load hub data, select a view, and find the quota answer they need in one session.

## Brand Personality

Precise. Grounded. Efficient. The interface should feel like a well-calibrated instrument, not a product pitch. Numbers are the hero; the chrome disappears.

## Anti-references

- Consumer personal finance dashboards (Mint, Copilot Money) β€” too soft, too colorful
- SaaS marketing dashboards (hero metric templates, gradient text, glassmorphism cards)
- Over-designed BI tools with heavy chrome, deep sidebars, and modal-heavy workflows
- Any interface that prioritizes looking impressive over being immediately useful

## Design Principles

1. **Numbers first** β€” KPIs and data are the primary visual element. Supporting chrome (headers, tabs, labels) recedes.
2. **GitHub-native** β€” Use GitHub design tokens (`--background-color-default`, `--text-color-default`, etc.) so the panel feels like an extension of Copilot, not a foreign app.
3. **Density is a virtue** β€” FinOps data is inherently multi-dimensional. Don't sacrifice information density for whitespace.
4. **State is explicit** β€” Loading, error, empty, and no-data states are real states, not afterthoughts. Every panel handles all of them.
5. **Zero ceremony** β€” No animated intros, no onboarding tours. Open panel β†’ see data.

## Accessibility & Inclusion

WCAG AA minimum. SVG charts include `<title>` elements for screen-reader context. Interactive controls have ARIA roles and labels. Capacity heatmaps include values and states as text. Users can operate the tabs with a keyboard. The interface respects reduced-motion preferences.
43 changes: 43 additions & 0 deletions .github/extensions/ftk-local-dashboard/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
# FinOps hub dashboard canvas

The FinOps hub dashboard is a repository-scoped GitHub Copilot canvas. It connects to a local Kusto emulator or a remote Azure Data Explorer cluster.

The dashboard includes these views:

- Cost overview
- Allocation
- Rate optimization
- Usage and unit economics
- Anomalies and forecast
- AI tokenomics
- AI and emerging workloads
- Capacity
- Read-only KQL query editor

## Capacity

The Capacity workspace shows seven quota areas: App Service, Azure AI, Compute, Azure SQL, Storage, capacity reservations, and Premium SSD v2.

The workspace doesn't combine unlike readings into one score. It keeps these concepts separate:

- Provider quota entitlement
- Billed demand
- Observed resource inventory
- Physical Azure capacity
- Pricing commitments

Only registered Compute metrics support quota utilization and headroom calculations. Unknown metrics stay visible as descriptive rows. Stale or invalid rows don't receive quota-health calculations.

## Run the canvas

Reload GitHub Copilot extensions after you change the source. The repository-scoped extension must report `sourceScope: "project"` from the `get_build_info` action.

The installed user extension uses `http://127.0.0.1:47821/`. The repository-scoped extension uses `http://127.0.0.1:47822/` so both sources can run during development. Connection preferences remain in the user's Copilot extension artifacts directory and aren't stored in the repository.

## Test the canvas

Run the dependency-free test suite:

```console
npm run test-dashboard
```
Loading
Loading