Merge pull request #7576 from ethereum-optimism/wyatt/ufm/mm-prod-envs-refactors

ufm-metamask prod envs and refactors

ufm-test-services/.env.example

@@ -5,14 +5,24 @@ CI=false
 GRAFANA_ADMIN_PWD=op
 
 # Used by Test Services to query metrics. http://prometheus will use Docker's built-in DNS
-PROMETHEUS_SERVER_URL="http://prometheus:9090"
+METRICS_READ_URL="http://prometheus:9090/api/v1/query"
+# The needed credentials to access METRICS_READ_URL. Will be sent as: Authorization: Bearer username:password
+METRICS_READ_USERNAME=""
+METRICS_READ_PASSWORD=""
 
 # Used by Test Services to push metrics. http://pushgateway will use Docker's built-in DNS
-PROMETHEUS_PUSHGATEWAY_URL="http://pushgateway:9091"
-
-# If true, Metamask Test Service will install Xvfb inside it's container and used that for Playwright tests.
-# If false, Metamask you will need to specify METAMASK_DISPLAY and METAMASK_DISPLAY_VOLUME so Playwright can connect to a display
-METAMASK_RUN_HEADLESS=true
+METRICS_WRITE_URL="http://pushgateway:9091"
+# Dictates how the request body is structured when pushing metrics. Should be either "grafana" or "prometheus-pushgateway"
+METRICS_WRITE_TOOL="prometheus-pushgateway"
+# This is the source the pushed metric will be labeled as originting from. May not need this value
+METRIC_WRITE_SOURCE=""
+# The needed credentials to access METRICS_READ_URL. Will be sent as: Authorization: Bearer username:password
+METRICS_WRITE_USERNAME=""
+METRICS_WRITE_PASSWORD=""
+
+# If true (or anything other than false), Xvfb will be inside the Metamask Test Service container and use it for Playwright tests.
+# If false, you will need to specify METAMASK_DISPLAY and METAMASK_DISPLAY_VOLUME so Playwright can connect to a display
+METAMASK_PLAYWRIGHT_RUN_HEADLESS=true
 
 # The display used for running Playwright tests
 METAMASK_DISPLAY=host.docker.internal:0
@@ -23,8 +33,8 @@ METAMASK_DISPLAY_VOLUME=/tmp/.X11-unix:/tmp/.X11-unix
 # Mnemonic used to initialize Metamask, make sure there's enough ETH to run tests
 METAMASK_SECRET_WORDS_OR_PRIVATEKEY="test test test test test test test test test test test junk"
 
-# The initial network Metamask will be initialized with, Test Service will override with OP Goerli
-METAMASK_NETWORK="goerli"
+# The initial network Metamask will be initialized with, Test Service will override with OP Sepolia
+METAMASK_NETWORK="sepolia"
 
 # The password to unlock Metamask
 METAMASK_PASSWORD="T3st_P@ssw0rd!"
@@ -32,5 +42,5 @@ METAMASK_PASSWORD="T3st_P@ssw0rd!"
 # The URL of the Metamask test dApp that will be spun up automatically for testing against
 METAMASK_DAPP_URL="http://localhost:9011"
 
-# The OP Goerli RPC provider to be used to read/write data
-METAMASK_OP_GOERLI_RPC_URL=""
+# The OP Sepolia RPC provider to be used to read/write data
+METAMASK_OP_SEPOLIA_RPC_URL=""

ufm-test-services/.secrets.example

 # Used by Test Services to perform certain actions if in CI environment
-CI=true
+CI=false
 
 # This is the password used to login into Grafana dashboard as the admin user
 GRAFANA_ADMIN_PWD=op
 
-# Used by Test Services to query metrics. 172.17.0.1 is the default Docker gateway address
-PROMETHEUS_SERVER_URL="http://172.17.0.1:9090"
-
-# Used by Test Services to push metrics. 172.17.0.1 is the default Docker gateway address
-PROMETHEUS_PUSHGATEWAY_URL="http://172.17.0.1:9091"
-
-# If true, Metamask Test Service will install Xvfb inside it's container and used that for Playwright tests.
-# If false, Metamask you will need to specify METAMASK_DISPLAY and METAMASK_DISPLAY_VOLUME so Playwright can connect to a display
-METAMASK_RUN_HEADLESS=true
+# Used by Test Services to query metrics. http://prometheus will use Docker's built-in DNS
+METRICS_READ_URL="http://prometheus:9090/api/v1/query"
+# The needed credentials to access METRICS_READ_URL. Will be sent as: Authorization: Bearer username:password
+METRICS_READ_USERNAME=""
+METRICS_READ_PASSWORD=""
+
+# Used by Test Services to push metrics. http://pushgateway will use Docker's built-in DNS
+METRICS_WRITE_URL="http://pushgateway:9091"
+# Dictates how the request body is structured when pushing metrics. Should be either "grafana" or "prometheus-pushgateway"
+METRICS_WRITE_TOOL="prometheus-pushgateway"
+# This is the source the pushed metric will be labeled as originting from. May not need this value
+METRIC_WRITE_SOURCE=""
+# The needed credentials to access METRICS_READ_URL. Will be sent as: Authorization: Bearer username:password
+METRICS_WRITE_USERNAME=""
+METRICS_WRITE_PASSWORD=""
+
+# If true (or anything other than false), Xvfb will be inside the Metamask Test Service container and use it for Playwright tests.
+# If false, you will need to specify METAMASK_DISPLAY and METAMASK_DISPLAY_VOLUME so Playwright can connect to a display
+METAMASK_PLAYWRIGHT_RUN_HEADLESS=true
 
 # The display used for running Playwright tests
 METAMASK_DISPLAY=host.docker.internal:0
@@ -23,17 +33,14 @@ METAMASK_DISPLAY_VOLUME=/tmp/.X11-unix:/tmp/.X11-unix
 # Mnemonic used to initialize Metamask, make sure there's enough ETH to run tests
 METAMASK_SECRET_WORDS_OR_PRIVATEKEY="test test test test test test test test test test test junk"
 
-# The initial network Metamask will be initialized with, Test Service will override with OP Goerli.
-# Will be defaulted to goerli in Github workflow file
-METAMASK_NETWORK="goerli"
+# The initial network Metamask will be initialized with, Test Service will override with OP Goerli
+METAMASK_NETWORK="sepolia"
 
 # The password to unlock Metamask
-# Will be defaulted to T3st_P@ssw0rd! in Github workflow file
 METAMASK_PASSWORD="T3st_P@ssw0rd!"
 
 # The URL of the Metamask test dApp that will be spun up automatically for testing against
-# Will be defaulted to http://localhost:9011 in Github workflow file
 METAMASK_DAPP_URL="http://localhost:9011"
 
-# The OP Goerli RPC provider to be used to read/write data
-METAMASK_OP_GOERLI_RPC_URL=""
+# The OP Sepolia RPC provider to be used to read/write data
+METAMASK_OP_SEPOLIA_RPC_URL=""

ufm-test-services/docker-compose.yml

@@ -49,14 +49,20 @@ services:
       CI: ${CI}
       DISPLAY: ${METAMASK_DISPLAY}
       GRAFANA_ADMIN_PWD: ${GRAFANA_ADMIN_PWD}
-      PROMETHEUS_SERVER_URL: ${PROMETHEUS_SERVER_URL}
-      PROMETHEUS_PUSHGATEWAY_URL: ${PROMETHEUS_PUSHGATEWAY_URL}
-      METAMASK_RUN_HEADLESS: ${METAMASK_RUN_HEADLESS}
+      METRICS_READ_URL: ${METRICS_READ_URL}
+      METRICS_READ_USERNAME: ${METRICS_READ_USERNAME}
+      METRICS_READ_PASSWORD: ${METRICS_READ_PASSWORD}
+      METRICS_WRITE_URL: ${METRICS_WRITE_URL}
+      METRICS_WRITE_TOOL: ${METRICS_WRITE_TOOL}
+      METRIC_WRITE_SOURCE: ${METRIC_WRITE_SOURCE}
+      METRICS_WRITE_USERNAME: ${METRICS_WRITE_USERNAME}
+      METRICS_WRITE_PASSWORD: ${METRICS_WRITE_PASSWORD}
+      METAMASK_PLAYWRIGHT_RUN_HEADLESS: ${METAMASK_PLAYWRIGHT_RUN_HEADLESS}
       METAMASK_SECRET_WORDS_OR_PRIVATEKEY: ${METAMASK_SECRET_WORDS_OR_PRIVATEKEY}
       METAMASK_NETWORK: ${METAMASK_NETWORK}
       METAMASK_PASSWORD: ${METAMASK_PASSWORD}
       METAMASK_DAPP_URL: ${METAMASK_DAPP_URL}
-      METAMASK_OP_GOERLI_RPC_URL: ${METAMASK_OP_GOERLI_RPC_URL}
+      METAMASK_OP_SEPOLIA_RPC_URL: ${METAMASK_OP_SEPOLIA_RPC_URL}
     volumes:
       - ${METAMASK_DISPLAY_VOLUME:-/path/in/container/if/no/env/set}
     restart: "no"

ufm-test-services/grafana/dashboards/metamask.json

@@ -18,6 +18,7 @@
   "editable": true,
   "fiscalYearStartMonth": 0,
   "graphTooltip": 0,
+  "id": 1,
   "links": [],
   "liveNow": false,
   "panels": [
@@ -122,7 +123,7 @@
           },
           "disableTextWrap": false,
           "editorMode": "builder",
-          "expr": "metamask_self_send",
+          "expr": "metamask_self_send_metric",
           "fullMetaSearch": false,
           "includeNullMetadata": true,
           "instant": false,
@@ -194,7 +195,7 @@
           {
             "matcher": {
               "id": "byName",
-              "options": "metamask_self_send_fee_estimation_low"
+              "options": "metamask_self_send_fee_estimation_low_metric"
             },
             "properties": [
               {
@@ -213,7 +214,7 @@
           {
             "matcher": {
               "id": "byName",
-              "options": "metamask_self_send_fee_estimation_medium"
+              "options": "metamask_self_send_fee_estimation_medium_metric"
             },
             "properties": [
               {
@@ -232,7 +233,7 @@
           {
             "matcher": {
               "id": "byName",
-              "options": "metamask_self_send_fee_estimation_high"
+              "options": "metamask_self_send_fee_estimation_high_metric"
             },
             "properties": [
               {
@@ -244,7 +245,7 @@
           {
             "matcher": {
               "id": "byName",
-              "options": "metamask_self_send_fee_estimation_actual"
+              "options": "metamask_self_send_fee_estimation_actual_metric"
             },
             "properties": [
               {
@@ -294,7 +295,7 @@
           },
           "disableTextWrap": false,
           "editorMode": "builder",
-          "expr": "metamask_self_send_fee_estimation_low",
+          "expr": "metamask_self_send_fee_estimation_low_metric",
           "fullMetaSearch": false,
           "includeNullMetadata": true,
           "instant": false,
@@ -310,7 +311,7 @@
           },
           "disableTextWrap": false,
           "editorMode": "builder",
-          "expr": "metamask_self_send_fee_estimation_medium",
+          "expr": "metamask_self_send_fee_estimation_medium_metric",
           "fullMetaSearch": false,
           "hide": false,
           "includeNullMetadata": true,
@@ -327,7 +328,7 @@
           },
           "disableTextWrap": false,
           "editorMode": "builder",
-          "expr": "metamask_self_send_fee_estimation_high",
+          "expr": "metamask_self_send_fee_estimation_high_metric",
           "fullMetaSearch": false,
           "hide": false,
           "includeNullMetadata": true,
@@ -344,7 +345,7 @@
           },
           "disableTextWrap": false,
           "editorMode": "builder",
-          "expr": "metamask_self_send_fee_estimation_actual",
+          "expr": "metamask_self_send_fee_estimation_actual_metric",
           "fullMetaSearch": false,
           "hide": false,
           "includeNullMetadata": true,
@@ -367,7 +368,7 @@
     "list": []
   },
   "time": {
-    "from": "now-3h",
+    "from": "now-12h",
     "to": "now"
   },
   "timepicker": {},

ufm-test-services/metamask/Dockerfile

@@ -7,7 +7,7 @@ WORKDIR /app
 # Update PATH
 ENV PATH /app/node_modules/.bin:$PATH
 
-RUN if [ "$METAMASK_RUN_HEADLESS" = "true" ]; then \
+RUN if [ "$METAMASK_RUN_HEADLESS" != "false" ]; then \
         apt-get update && \
         apt-get install -y xvfb && \
         rm -rf /var/lib/apt/lists/* ; \

.github/workflows/ufm-test-service-1-hour.yml → ufm-test-services/metamask/github_workflow.example.yaml

@@ -17,10 +17,16 @@ jobs:
         run: docker-compose run metamask
         env:
           CI: ${{ secrets.CI }}
-          PROMETHEUS_SERVER_URL: ${{ secrets.PROMETHEUS_SERVER_URL }}
-          PROMETHEUS_PUSHGATEWAY_URL: ${{ secrets.PROMETHEUS_PUSHGATEWAY_URL }}
+          METRICS_READ_URL: ${{ secrets.METRICS_READ_URL }}
+          METRICS_READ_USERNAME: ${{ secrets.METRICS_READ_USERNAME }}
+          METRICS_READ_PASSWORD: ${{ secrets.METRICS_READ_PASSWORD }}
+          METRICS_WRITE_URL: ${{ secrets.METRICS_WRITE_URL }}
+          METRICS_WRITE_TOOL: ${{ secrets.METRICS_WRITE_TOOL }}
+          METRIC_WRITE_SOURCE: ${{ secrets.METRIC_WRITE_SOURCE }}
+          METRICS_WRITE_USERNAME: ${{ secrets.METRICS_WRITE_USERNAME }}
+          METRICS_WRITE_PASSWORD: ${{ secrets.METRICS_WRITE_PASSWORD }}
           METAMASK_SECRET_WORDS_OR_PRIVATEKEY: ${{ secrets.METAMASK_SECRET_WORDS_OR_PRIVATEKEY }}
-          METAMASK_NETWORK: ${{ secrets.METAMASK_NETWORK || 'goerli' }}
+          METAMASK_NETWORK: ${{ secrets.METAMASK_NETWORK || 'sepolia' }}
           METAMASK_PASSWORD: ${{ secrets.METAMASK_PASSWORD || 'T3st_P@ssw0rd!' }}
           METAMASK_DAPP_URL: ${{ secrets.METAMASK_DAPP_URL || 'http://localhost:9011' }}
-          METAMASK_OP_GOERLI_RPC_URL: ${{ secrets.METAMASK_OP_GOERLI_RPC_URL }}
+          METAMASK_OP_SEPOLIA_RPC_URL: ${{ secrets.METAMASK_OP_SEPOLIA_RPC_URL }}

ufm-test-services/metamask/tests/metamask.spec.ts

@@ -16,7 +16,7 @@ import {
 const env = z
   .object({
     METAMASK_SECRET_WORDS_OR_PRIVATEKEY: z.string(),
-    METAMASK_OP_GOERLI_RPC_URL: z.string().url(),
+    METAMASK_OP_SEPOLIA_RPC_URL: z.string().url(),
     METAMASK_DAPP_URL: z.string().url(),
   })
   .parse(process.env)
@@ -30,6 +30,8 @@ const expectedSender = env.METAMASK_SECRET_WORDS_OR_PRIVATEKEY?.startsWith('0x')
     ).address.toLowerCase()
 const expectedRecipient = expectedSender
 
+const expectedCurrencySymbol = 'OPS'
+
 let sharedPage: Page
 let wasSuccessful: boolean
 let handledFailure: boolean
@@ -55,27 +57,26 @@ testWithSynpress('Setup wallet and dApp', async ({ page }) => {
   console.log('Setting up wallet and dApp...')
   sharedPage = page
   await sharedPage.goto('http://localhost:9011')
-  console.log('Setup wallet and dApp')
 })
 
-testWithSynpress('Add OP Goerli network', async () => {
-  console.log('Adding OP Goerli network...')
-  const expectedChainId = '0x1a4'
+testWithSynpress('Add OP Sepolia network', async () => {
+  console.log('Adding OP Sepolia network...')
+  const expectedChainId = '0xaa37dc'
 
   await metamask.addNetwork({
-    name: 'op-goerli',
+    name: 'op-sepolia',
     rpcUrls: {
       default: {
-        http: [env.METAMASK_OP_GOERLI_RPC_URL],
+        http: [env.METAMASK_OP_SEPOLIA_RPC_URL],
       },
     },
-    id: '420',
+    id: '11155420',
     nativeCurrency: {
-      symbol: 'OPG',
+      symbol: expectedCurrencySymbol,
     },
     blockExplorers: {
       default: {
-        url: 'https://goerli-explorer.optimism.io',
+        url: 'https://optimism-sepolia.blockscout.com',
       },
     },
   })
@@ -87,7 +88,6 @@ testWithSynpress('Add OP Goerli network', async () => {
     handledFailure = true
     throw error
   }
-  console.log('Added OP Goerli network')
 })
 
 test(`Connect wallet with ${expectedSender}`, async () => {
@@ -102,7 +102,6 @@ test(`Connect wallet with ${expectedSender}`, async () => {
     handledFailure = true
     throw error
   }
-  console.log(`Connected wallet with ${expectedSender}`)
 })
 
 test('Send an EIP-1559 transaction and verify success', async () => {
@@ -127,6 +126,7 @@ test('Send an EIP-1559 transaction and verify success', async () => {
   const notificationPage =
     await synpressPlaywright.switchToMetamaskNotification()
 
+  console.log('Gathering transaction fee estimations...')
   const lowFeeEstimate = await getFeeEstimateInGwei(
     confirmPageElements.gasOptionLowButton,
     'Low',
@@ -146,6 +146,7 @@ test('Send an EIP-1559 transaction and verify success', async () => {
     notificationPage
   )
 
+  console.log('Sent transaction, waiting for confirmation...')
   await metamask.confirmTransactionAndWaitForMining()
   const txHash = await txHashPromise
 
@@ -164,6 +165,7 @@ test('Send an EIP-1559 transaction and verify success', async () => {
   // Metamask test dApp allows us access to the Metamask RPC provider via loading this URL.
   // The RPC response will be populated onto the page that's loaded.
   // More info here: https://github.com/MetaMask/test-dapp/tree/main#usage
+  console.log('Retrieving transaction receipt...')
   await sharedPage.goto(
     `${env.METAMASK_DAPP_URL}/request.html?method=eth_getTransactionReceipt&params=["${txHash}"]`
   )
@@ -179,7 +181,6 @@ test('Send an EIP-1559 transaction and verify success', async () => {
     handledFailure = true
     throw error
   }
-  console.log('Sent an EIP-1559 transaction and verified success')
 
   await setFeeEstimationGauge('low', lowFeeEstimate)
   await setFeeEstimationGauge('medium', mediumFeeEstimate)
@@ -192,7 +193,6 @@ const getFeeEstimateInGwei = async (
   waitForText: 'Low' | 'Market' | 'Aggressive',
   notificationPage: Page
 ) => {
-  const regexParseEtherValue = /(\d+\.\d+)\sOPG/
   await synpressPlaywright.waitAndClick(
     confirmPageElements.editGasFeeButton,
     notificationPage
@@ -203,6 +203,7 @@ const getFeeEstimateInGwei = async (
     waitForText,
     notificationPage
   )
+  const regexParseEtherValue = /(\d+\.\d+)\s?OPS/
   const feeValue = (
     await synpressPlaywright.waitAndGetValue(
       confirmPageElements.totalLabel,

ufm-test-services/metamask/tests/prometheusUtils.ts

@@ -4,16 +4,63 @@ import { Gauge, Pushgateway, Registry } from 'prom-client'
 
 const env = z
   .object({
-    PROMETHEUS_SERVER_URL: z.string().url(),
-    PROMETHEUS_PUSHGATEWAY_URL: z.string().url(),
+    METRICS_READ_URL: z.string().url(),
+    METRICS_READ_USERNAME: z.string().optional(),
+    METRICS_READ_PASSWORD: z.string().optional(),
+    METRICS_WRITE_URL: z.string().url(),
+    METRICS_WRITE_TOOL: z.enum(['grafana', 'prometheus-pushgateway']),
+    METRIC_WRITE_SOURCE: z.string().optional(),
+    METRICS_WRITE_USERNAME: z.string().optional(),
+    METRICS_WRITE_PASSWORD: z.string().optional(),
   })
+  .refine(
+    (data) => {
+      if (
+        (data.METRICS_READ_USERNAME && !data.METRICS_READ_PASSWORD) ||
+        (data.METRICS_READ_PASSWORD && !data.METRICS_READ_USERNAME)
+      ) {
+        return false
+      }
+
+      if (
+        (data.METRICS_WRITE_USERNAME && !data.METRICS_WRITE_PASSWORD) ||
+        (data.METRICS_WRITE_PASSWORD && !data.METRICS_WRITE_USERNAME)
+      ) {
+        return false
+      }
+
+      return true
+    },
+    {
+      message:
+        'Both username and password must be provided together for read or write metrics',
+    }
+  )
+  .refine(
+    (data) => {
+      if (
+        data.METRICS_WRITE_TOOL === 'grafana' &&
+        data.METRIC_WRITE_SOURCE === undefined
+      )
+        return false
+
+      return true
+    },
+    {
+      message:
+        'Writing to Grafana requires a source, please specify one using METRIC_WRITE_SOURCE env',
+    }
+  )
   .parse(process.env)
 
-const selfSendTransactionMetricName = 'metamask_self_send'
-const feeEstimateLowMetricName = 'metamask_self_send_fee_estimation_low'
-const feeEstimateMediumMetricName = 'metamask_self_send_fee_estimation_medium'
-const feeEstimateHighMetricName = 'metamask_self_send_fee_estimation_high'
-const feeEstimateActualMetricName = 'metamask_self_send_fee_estimation_actual'
+const selfSendTransactionMetricName = 'metamask_self_send_metric'
+const feeEstimateLowMetricName = 'metamask_self_send_fee_estimation_low_metric'
+const feeEstimateMediumMetricName =
+  'metamask_self_send_fee_estimation_medium_metric'
+const feeEstimateHighMetricName =
+  'metamask_self_send_fee_estimation_high_metric'
+const feeEstimateActualMetricName =
+  'metamask_self_send_fee_estimation_actual_metric'
 
 const selfSendRegistry = new Registry()
 const feeEstimateLowRegistry = new Registry()
@@ -24,38 +71,51 @@ const feeEstimateActualRegistry = new Registry()
 const selfSendGauge = new Gauge({
   name: selfSendTransactionMetricName,
   help: 'A gauge signifying the number of transactions sent with Metamask',
-  registers: [selfSendRegistry]
+  registers: [selfSendRegistry],
 })
 const feeEstimateLowGauge = new Gauge({
   name: feeEstimateLowMetricName,
   help: 'A gauge signifying the latest fee estimation from Metamask for Low transaction speed',
-  registers: [feeEstimateLowRegistry]
+  registers: [feeEstimateLowRegistry],
 })
 const feeEstimateMediumGauge = new Gauge({
   name: feeEstimateMediumMetricName,
   help: 'A gauge signifying the latest fee estimation from Metamask for Medium transaction speed',
-  registers: [feeEstimateMediumRegistry]
+  registers: [feeEstimateMediumRegistry],
 })
 const feeEstimateHighGauge = new Gauge({
   name: feeEstimateHighMetricName,
   help: 'A gauge signifying the latest fee estimation from Metamask for High transaction speed',
-  registers: [feeEstimateHighRegistry]
+  registers: [feeEstimateHighRegistry],
 })
 const feeEstimateActualGauge = new Gauge({
   name: feeEstimateActualMetricName,
   help: 'A gauge signifying the latest actual transaction fee',
-  registers: [feeEstimateActualRegistry]
+  registers: [feeEstimateActualRegistry],
 })
 
-export const getSelfSendGaugeValue = async () => {
-  const prometheusMetricQuery = `${env.PROMETHEUS_SERVER_URL}/api/v1/query?query=${selfSendTransactionMetricName}`
-
-  const response = await fetch(prometheusMetricQuery)
+const queryMetricsReadUrl = async (
+  query: string = selfSendTransactionMetricName
+) => {
+  const metricsReadRequest = `${env.METRICS_READ_URL}?query=${query}`
+  const response = await fetch(metricsReadRequest, {
+    headers:
+      env.METRICS_READ_USERNAME === undefined
+        ? undefined
+        : {
+            Authorization: `Bearer ${env.METRICS_READ_USERNAME}:${env.METRICS_READ_PASSWORD}`,
+          },
+  })
   if (!response.ok) {
     console.error(response.status)
     console.error(response.statusText)
-    throw new Error(`Failed to fetch metric from: ${prometheusMetricQuery}`)
+    throw new Error(`Failed to fetch metric from: ${metricsReadRequest}`)
   }
+  return response
+}
+
+export const getSelfSendGaugeValue = async () => {
+  const response = await queryMetricsReadUrl(selfSendTransactionMetricName)
 
   // The following is an example of the expect response from prometheusMetricQuery
   // for response.json().data.result[0]:
@@ -92,7 +152,7 @@ export const getSelfSendGaugeValue = async () => {
       error.message === "Cannot read properties of undefined (reading 'value')"
     ) {
       console.warn(
-        `No data found for metric ${selfSendTransactionMetricName} in Prometheus`
+        `No data found for metric ${selfSendTransactionMetricName} in ${env.METRICS_READ_URL}`
       )
       return undefined
     }
@@ -101,12 +161,44 @@ export const getSelfSendGaugeValue = async () => {
   }
 }
 
+const pushMetricsGrafana = (metricName: string, valueToSetTo: number) =>
+  pushMetricsWriteUrl(
+    `${metricName},source=${
+      env.METRIC_WRITE_SOURCE
+    } metric=${valueToSetTo}`
+  )
+
+const pushMetricsPrometheusPushgateway = (registry: Registry) => {
+  const pushGateway = new Pushgateway(env.METRICS_WRITE_URL, undefined, registry)
+  return pushGateway.pushAdd({ jobName: 'ufm-metamask-metric-push'})
+}
+
+const pushMetricsWriteUrl = async (requestBody: string) => {
+  const response = await fetch(env.METRICS_WRITE_URL, {
+    method: 'POST',
+    headers:
+      env.METRICS_WRITE_USERNAME === undefined
+        ? undefined
+        : {
+            Authorization: `Bearer ${env.METRICS_WRITE_USERNAME}:${env.METRICS_WRITE_PASSWORD}`,
+          },
+    body: requestBody,
+  })
+  if (!response.ok) {
+    console.error(response.status)
+    console.error(response.statusText)
+    throw new Error(`Failed to push metric to: ${env.METRICS_WRITE_URL}`)
+  }
+  return response
+}
+
 export const setSelfSendTxGauge = async (valueToSetTo: number) => {
   console.log(`Setting ${selfSendTransactionMetricName} to ${valueToSetTo}...`)
   selfSendGauge.set(valueToSetTo)
 
-  const pushGateway = new Pushgateway(env.PROMETHEUS_PUSHGATEWAY_URL, undefined, selfSendRegistry)
-  await pushGateway.pushAdd({ jobName: 'metamask_self_send_tx_count' })
+  env.METRICS_WRITE_TOOL === 'grafana'
+    ? await pushMetricsGrafana(selfSendTransactionMetricName.replace('_metric', ''), valueToSetTo)
+    : await pushMetricsPrometheusPushgateway(selfSendRegistry)
 }
 
 export const incrementSelfSendTxGauge = async (isSuccess: boolean) => {
@@ -125,36 +217,41 @@ export const incrementSelfSendTxGauge = async (isSuccess: boolean) => {
   await setSelfSendTxGauge(newMetricValue)
 }
 
-export const setFeeEstimationGauge = async (txSpeed: 'low' | 'medium' | 'high' | 'actual', fee: number) => {
-  console.log(
-    txSpeed !== 'actual'
-    ? `Setting Metamask fee estimation for ${txSpeed} to ${fee}...`
-    : `Setting actual transaction fee to ${fee}`
-  )
-
+export const setFeeEstimationGauge = async (
+  txSpeed: 'low' | 'medium' | 'high' | 'actual',
+  fee: number
+) => {
+  let metricNameGrafana: string
   let prometheusRegistry: Registry
   switch (txSpeed) {
     case 'low':
       feeEstimateLowGauge.set(fee)
+      metricNameGrafana = feeEstimateLowMetricName
       prometheusRegistry = feeEstimateLowRegistry
-      break;
+      break
     case 'medium':
       feeEstimateMediumGauge.set(fee)
+      metricNameGrafana = feeEstimateMediumMetricName
       prometheusRegistry = feeEstimateMediumRegistry
-      break;
+      break
     case 'high':
       feeEstimateHighGauge.set(fee)
+      metricNameGrafana = feeEstimateHighMetricName
       prometheusRegistry = feeEstimateHighRegistry
-      break;
+      break
     case 'actual':
       feeEstimateActualGauge.set(fee)
+      metricNameGrafana = feeEstimateActualMetricName
       prometheusRegistry = feeEstimateActualRegistry
-      break;
+      break
     default:
       throw new Error(`unsupported transaction speed given: ${txSpeed}`)
   }
+  metricNameGrafana = metricNameGrafana.replace('_metric', '')
 
+  console.log(`Setting ${metricNameGrafana} to ${fee}...`)
 
-  const pushGateway = new Pushgateway(env.PROMETHEUS_PUSHGATEWAY_URL, undefined, prometheusRegistry)
-  await pushGateway.pushAdd({ jobName: `metamask_self_send_tx_fee_estimation_${txSpeed}` })
+  env.METRICS_WRITE_TOOL === 'grafana'
+    ? await pushMetricsGrafana(metricNameGrafana, fee)
+    : await pushMetricsPrometheusPushgateway(prometheusRegistry)
 }