# Pulling metrics into my app in AppEngine

**URL:** <https://community.dynatrace.com/t/pulling-metrics-into-my-app-in-appengine/42680>\
**Category:** Developer Q&A Forum\
**Created:** [November 17, 2023, 10:43am UTC](https://community.dynatrace.com/t/pulling-metrics-into-my-app-in-appengine/42680 "2023-11-17T10:43:59Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![brett\_schubach1](https://avatars.discourse-cdn.com/v4/letter/b/c89c15/32.png) [@brett\_schubach1](https://community.dynatrace.com/u/brett_schubach1)\
**Post date:** [November 17, 2023, 10:43am UTC](https://community.dynatrace.com/t/pulling-metrics-into-my-app-in-appengine/42680/1 "2023-11-17T10:43:59Z")

</div>

Hi

I need some help; I am new to AppEngine and development using TypeScript and React.

I have a extension I created which is&nbsp;ext:custom.remote.python.dt\_generic\_sql\_timeseries\_plugin.database.status:names

So the documentation shows this

So as I understand this would be the query

const data = await metricsClient.query({

acceptType: “application/json; charset=utf-8”,&nbsp; &nbsp; metricSelector: “ext:custom.remote.python.dt\_generic\_sql\_timeseries\_plugin.database.status:names”,&nbsp; &nbsp; resolution: “Inf”,&nbsp; &nbsp; from: “now-2h”,&nbsp; &nbsp; to: “now”

});

My question is how do I display this into the UI of my APP?

Thank you in advance

---

<div class="post-metadata">

**Author:** ![sinisa\_zubic](https://dub1.discourse-cdn.com/dynatrace/user_avatar/community.dynatrace.com/sinisa_zubic/32/32498_2.png) [@sinisa\_zubic](https://community.dynatrace.com/u/sinisa_zubic)\
**Post date:** [November 17, 2023, 11:24am UTC](https://community.dynatrace.com/t/pulling-metrics-into-my-app-in-appengine/42680/2 "2023-11-17T11:24:11Z")

</div>

Hi Brett,

To the best of my knowledge, metrics coming from extensions are already in Grail. You can double check for your specific custom metric by going to the metric screen and finding your metric there. Once you open the metric, you should see the “open with” button. With that, you can query the metric in notebooks

 ![sinisa_zubic_1-1700220244736.png](https://global.discourse-cdn.com/dynatrace/original/3X/c/8/c8fa1c0d0e781532872797730f29903fc0b72e9b.png)

We have a dedicated guide about how to query and visualize any metric within your custom app:&nbsp;[Query and visualize Grail data | Dynatrace Developer](https://developer.dynatrace.com/develop/data/query-and-visualize/)

Best,  
Sini

---

<div class="post-metadata">

**Author:** ![brett\_schubach1](https://avatars.discourse-cdn.com/v4/letter/b/c89c15/32.png) [@brett\_schubach1](https://community.dynatrace.com/u/brett_schubach1)\
**Post date:** [November 17, 2023, 1:52pm UTC](https://community.dynatrace.com/t/pulling-metrics-into-my-app-in-appengine/42680/3 "2023-11-17T13:52:46Z")

</div>

Hi Sini,

Doesn’t seem to be live in our environments yet

 ![brett_schubach1_1-1700229044221.png](https://global.discourse-cdn.com/dynatrace/original/3X/c/3/c311707ab60bb48c62e410d7b74bff07b06e90e1.png)

hence was trying to use

 ![brett_schubach1_2-1700229134567.png](https://global.discourse-cdn.com/dynatrace/original/3X/3/8/38963cebebc4cf89b41a3362a6297ff7af86be36.png)

 ![brett_schubach1_1-1700229044221.png](https://global.discourse-cdn.com/dynatrace/original/3X/c/3/c311707ab60bb48c62e410d7b74bff07b06e90e1.png)

---

<div class="post-metadata">

**Author:** ![sinisa\_zubic](https://dub1.discourse-cdn.com/dynatrace/user_avatar/community.dynatrace.com/sinisa_zubic/32/32498_2.png) [@sinisa\_zubic](https://community.dynatrace.com/u/sinisa_zubic)\
**Post date:** [November 20, 2023, 10:14am UTC](https://community.dynatrace.com/t/pulling-metrics-into-my-app-in-appengine/42680/4 "2023-11-20T10:14:59Z")

</div>

here you have a simple example showing a cpu metric as a single value chart. just replace the metric selector with your metric.

```markup
import { metricsClient } from "@dynatrace-sdk/client-classic-environment-v2";
import { Page, SingleValue } from "@dynatrace/strato-components-preview";
import React, { useEffect, useState } from "react";

export const App = () => {
  const [result, setResult] = useState<any>();
  useEffect(() => {
    metricsClient.query({
      acceptType: "application/json; charset=utf-8",
      metricSelector: "builtin:host.cpu.idle:splitBy():sort(value(auto,descending)):limit(20)",
      resolution: "inf",
      from: "now-2h",
      to: "now"
    }).then(resp => { setResult(resp.result[0].data[0].values[0]) });
  }, []);

  return (
    <Page>
      <Page.Main>
        {result && <SingleValue data={result} />}
      </Page.Main>
    </Page>
  );
};

```

And don’t forget to add the scope&nbsp;environment-api:metrics:read to the app config file

---

<div class="post-metadata">

**Author:** ![brett\_schubach1](https://avatars.discourse-cdn.com/v4/letter/b/c89c15/32.png) [@brett\_schubach1](https://community.dynatrace.com/u/brett_schubach1)\
**Post date:** [November 20, 2023, 10:18am UTC](https://community.dynatrace.com/t/pulling-metrics-into-my-app-in-appengine/42680/5 "2023-11-20T10:18:51Z")

</div>

Thank you so much&nbsp;Sini, appreciate this.