feat: link skill dashboard pages to telemetry

dashboard/src/skills/App.tsx

@@ -20,6 +20,21 @@ import {
 /** Number of trailing days shown in every graph. */
 const WINDOW_DAYS = 10;
 
+/**
+ * Build the Azure Data Explorer telemetry dashboard URL for a skill.
+ * The dashboard ID and item fragment are fixed; the skill name is passed
+ * through the `p-_selectedPluginSkill` parameter with a `v-` prefix.
+ */
+export function telemetryUrl(skillName: string): string {
+    const base = "https://dataexplorer.azure.com/dashboards/d1281268-c49e-4e82-bdc9-79e6c3c6cb43";
+    const params = new URLSearchParams({
+        "p-_startTime": "90days",
+        "p-_endTime": "now",
+        "p-_selectedPluginSkill": `v-${skillName}`,
+    });
+    return `${base}?${params}#e9eade80-7b12-49db-a865-a6d3365d03eb`;
+}
+
 /** A plugin skill with its description, as surfaced by the frontmatter collector. */
 interface Skill {
     name: string;
@@ -264,6 +279,16 @@ export default function App() {
                             <p className="skills-file-count">
                                 Files: {selectedSkill.fileCount}
                             </p>
+                            <p className="skills-telemetry">
+                                <a
+                                    className="skills-telemetry-link"
+                                    href={telemetryUrl(selectedSkill.name)}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                >
+                                    View telemetry ↗
+                                </a>
+                            </p>
                         </header>
 
                         <h2 className="skills-tests-heading">

dashboard/src/skills/__tests__/telemetryUrl.test.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from "vitest";
+import { telemetryUrl } from "../App";
+
+describe("telemetryUrl", () => {
+    it("builds the dashboard URL for a skill name", () => {
+        const url = new URL(telemetryUrl("azure-deploy"));
+        expect(url.origin).toBe("https://dataexplorer.azure.com");
+        expect(url.pathname).toBe("/dashboards/d1281268-c49e-4e82-bdc9-79e6c3c6cb43");
+        expect(url.searchParams.get("p-_startTime")).toBe("90days");
+        expect(url.searchParams.get("p-_endTime")).toBe("now");
+        expect(url.searchParams.get("p-_selectedPluginSkill")).toBe("v-azure-deploy");
+        expect(url.hash).toBe("#e9eade80-7b12-49db-a865-a6d3365d03eb");
+    });
+
+    it("encodes the skill name into the selectedPluginSkill parameter", () => {
+        const url = new URL(telemetryUrl("azure-cost-management"));
+        expect(url.searchParams.get("p-_selectedPluginSkill")).toBe("v-azure-cost-management");
+        expect(url.searchParams.get("p-_startTime")).toBe("90days");
+        expect(url.searchParams.get("p-_endTime")).toBe("now");
+        expect(url.hash).toBe("#e9eade80-7b12-49db-a865-a6d3365d03eb");
+    });
+});

dashboard/src/skills/skills.css

@@ -89,6 +89,20 @@
     font-size: 0.9rem;
 }
 
+.skills-telemetry {
+    margin: 0.5rem 0 0;
+}
+
+.skills-telemetry-link {
+    color: var(--color-focus);
+    font-size: 0.9rem;
+    text-decoration: none;
+}
+
+.skills-telemetry-link:hover {
+    text-decoration: underline;
+}
+
 .skills-tests-heading {
     margin: 1.5rem 0 0.75rem;
     font-size: 1.15rem;