Chore: Publish frontend metrics from github actions (#110271)

* remove build size from ci scripts, test adding a github action step

* generate pa11y results file

* setup node

* don't need grabpl

* get key from vault

* doublequote env var

* write node script for publishing

* update CODEOWNERS

* add some logging

* yarn install...

* tidy up

* only on main branch

.github/CODEOWNERS

@@ -1234,6 +1234,7 @@ embed.go @grafana/grafana-as-code
 /.github/workflows/i18n-verify.yml @grafana/grafana-frontend-platform
 /.github/workflows/deploy-storybook-preview.yml @grafana/grafana-frontend-platform
 /.github/workflows/scripts/crowdin/create-tasks.ts @grafana/grafana-frontend-platform
+/.github/workflows/scripts/publish-frontend-metrics.mts @grafana/grafana-frontend-platform
 /.github/workflows/pr-go-workspace-check.yml @grafana/grafana-app-platform-squad
 /.github/workflows/pr-dependabot-update-go-workspace.yml @grafana/grafana-app-platform-squad
 /.github/workflows/pr-k8s-codegen-check.yml @grafana/grafana-app-platform-squad

.github/workflows/pr-e2e-tests.yml

@@ -499,7 +499,49 @@ jobs:
         uses: dagger/dagger-for-github@e47aba410ef9bb9ed81a4d2a97df31061e5e842e
         with:
           verb: run
-          args: go run ./pkg/build/a11y --package=grafana.tar.gz --no-threshold-fail
+          args: go run ./pkg/build/a11y --package=grafana.tar.gz --no-threshold-fail --results=./pa11y-ci-results.json
+      - name: Upload pa11y results
+        if: github.event_name != 'pull_request'
+        uses: actions/upload-artifact@v4
+        with:
+          retention-days: 1
+          name: pa11y-ci-results
+          path: pa11y-ci-results.json
+
+  publish-metrics:
+    needs:
+      - run-a11y-test
+    name: Publish metrics
+    # Run on `grafana/grafana` main branch only
+    if: github.event_name == 'push' && github.repository == 'grafana/grafana' && github.ref_name == 'main'
+    permissions:
+      contents: read
+      id-token: write
+    runs-on: ubuntu-latest
+    steps:
+      - id: vault-secrets
+        uses: grafana/shared-workflows/actions/get-vault-secrets@main
+        with:
+          repo_secrets: |
+            GRAFANA_MISC_STATS_API_KEY=grafana-misc-stats:api_key
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          persist-credentials: false
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+      - name: Install dependencies
+        run: yarn install --immutable
+      - name: Get pa11y results
+        uses: actions/download-artifact@v4
+        with:
+          name: pa11y-ci-results
+      - name: Extract and publish metrics
+        run: ./scripts/ci-frontend-metrics.sh | node --experimental-strip-types .github/workflows/scripts/publish-frontend-metrics.mts
+        env:
+          GRAFANA_MISC_STATS_API_KEY: ${{ env.GRAFANA_MISC_STATS_API_KEY}}
 
   # This is the job that is actually required by rulesets.
   # We want to only require one job instead of all the individual tests.

.github/workflows/scripts/publish-frontend-metrics.mts

@@ -0,0 +1,75 @@
+import fs from 'node:fs'
+
+interface Payload {
+  name: string;
+  value: number;
+  interval: number;
+  mtype: string;
+  time: number;
+}
+
+console.log("Publishing metrics");
+
+// Get API key from environment variable
+const key = process.env.GRAFANA_MISC_STATS_API_KEY;
+if (!key) {
+  throw new Error("API key is required. Provide it via the GRAFANA_MISC_STATS_API_KEY environment variable");
+}
+
+const unixTimestamp = Math.floor(Date.now() / 1000);
+const data: Payload[] = [];
+
+const input = fs.readFileSync(0, "utf-8");
+// parse metrics from input
+const regexp = /^Metrics: (\{.+\})/ms;
+const matches = input.match(regexp);
+
+if (!matches) {
+  throw new Error("No metrics found");
+}
+
+console.log('matches[0]', matches[0])
+console.log('matches[1]', matches[1])
+
+const metrics: Record<string, string> = JSON.parse(matches[1]);
+
+// Convert metrics to payload format
+for (const [metricName, valueStr] of Object.entries(metrics)) {
+  const value = parseInt(valueStr, 10);
+  if (isNaN(value)) {
+    throw new Error(`Metric "${metricName}" has invalid value format: "${valueStr}"`);
+  }
+
+  data.push({
+    name: metricName,
+    value: value,
+    interval: 60,
+    mtype: "gauge",
+    time: unixTimestamp,
+  });
+}
+
+const jsonPayload = JSON.stringify(data);
+console.log(`Publishing metrics to https://graphite-us-central1.grafana.net/metrics, JSON: ${jsonPayload}`);
+
+const url = 'https://graphite-us-central1.grafana.net/metrics';
+const username = '6371';
+const headers = new Headers();
+headers.set("Content-Type", "application/json");
+headers.set('Authorization', 'Basic ' + Buffer.from(username + ":" + key).toString('base64'));
+
+try {
+  const response = await fetch(url, {
+    method: "POST",
+    headers,
+    body: jsonPayload,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Metrics publishing failed with status code ${response.status}`);
+  }
+
+  console.log("Metrics successfully published");
+} catch (error) {
+  throw new Error(`Metrics publishing failed: ${error instanceof Error ? error.message : String(error)}`);
+}

scripts/ci-frontend-metrics.sh

@@ -1,11 +1,6 @@
 #!/usr/bin/env bash
 set -e
 
-BUILD_FOLDER=$1
-if [ -z "$BUILD_FOLDER" ]; then
-  BUILD_FOLDER="./public/build"
-fi
-
 ERROR_COUNT="0"
 ACCESSIBILITY_ERRORS="$(grep -oP '\"errors\":(\d+),' pa11y-ci-results.json | grep -oP '\d+')"
 DIRECTIVES="$(grep -r -o  directive public/app/ | wc -l)"
@@ -16,15 +11,7 @@ CLASSNAME_PROP="$(grep -r -o -E --include="*.ts*" "\.*.className=\W.*\W.*" publi
 EMOTION_IMPORTS="$(grep -r -o -E --include="*.ts*" --exclude="*.test*" "\{.*css.*\} from '@emotion/css'" public/app | wc -l)"
 TS_FILES="$(find public/app -type f -name "*.ts*" -not -name "*.test*" | wc -l)"
 SCSS_FILES="$(find public packages -name '*.scss' | wc -l)"
-
-TOTAL_BUNDLE="$(du -sk "$BUILD_FOLDER" | cut -f1)"
 OUTDATED_DEPENDENCIES="$(yarn outdated --all | grep -oP '[[:digit:]]+ *(?= dependencies are out of date)')"
-## Disabled due to yarn PnP update breaking npm audit
-#VULNERABILITY_AUDIT="$(yarn npm audit --all --recursive --json)"
-#LOW_VULNERABILITIES="$(echo "${VULNERABILITY_AUDIT}" | grep -o -i '"severity":"low"' | wc -l)"
-#MED_VULNERABILITIES="$(echo "${VULNERABILITY_AUDIT}" | grep -o -i '"severity":"moderate"' | wc -l)"
-#HIGH_VULNERABILITIES="$(echo "${VULNERABILITY_AUDIT}" | grep -o -i '"severity":"high"' | wc -l)"
-#CRITICAL_VULNERABILITIES="$(echo "${VULNERABILITY_AUDIT}" | grep -o -i '"severity":"critical"' | wc -l)"
 
 echo -e "Typescript errors: $ERROR_COUNT"
 echo -e "Accessibility errors: $ACCESSIBILITY_ERRORS"
@@ -32,12 +19,7 @@ echo -e "Directives: $DIRECTIVES"
 echo -e "Controllers: $CONTROLLERS"
 echo -e "Legacy forms: $LEGACY_FORMS"
 echo -e "Barrel imports: $BARREL_IMPORTS"
-echo -e "Total bundle folder size: $TOTAL_BUNDLE"
 echo -e "Total outdated dependencies: $OUTDATED_DEPENDENCIES"
-echo -e "Low vulnerabilities: $LOW_VULNERABILITIES"
-echo -e "Med vulnerabilities: $MED_VULNERABILITIES"
-echo -e "High vulnerabilities: $HIGH_VULNERABILITIES"
-echo -e "Critical vulnerabilities: $CRITICAL_VULNERABILITIES"
 echo -e "ClassName in props: $CLASSNAME_PROP"
 echo -e "@emotion/css imports: $EMOTION_IMPORTS"
 echo -e "Total TS files: $TS_FILES"
@@ -73,7 +55,6 @@ echo "Metrics: {
   \"grafana.ci-code.directives\": \"${DIRECTIVES}\",
   \"grafana.ci-code.controllers\": \"${CONTROLLERS}\",
   \"grafana.ci-code.legacyForms\": \"${LEGACY_FORMS}\",
-  \"grafana.ci-code.bundleFolderSize\": \"${TOTAL_BUNDLE}\",
   \"grafana.ci-code.dependencies.outdated\": \"${OUTDATED_DEPENDENCIES}\",
   \"grafana.ci-code.props.className\": \"${CLASSNAME_PROP}\",
   \"grafana.ci-code.imports.emotion\": \"${EMOTION_IMPORTS}\",