Pulling metrics into my app in AppEngine

Platform Developer Q&A Forum
1

Hi

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

I have a extension I created which is 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”,    metricSelector: “ext:custom.remote.python.dt_generic_sql_timeseries_plugin.database.status:names”,    resolution: “Inf”,    from: “now-2h”,    to: “now”

});

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

Thank you in advance

2

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
sinisa_zubic_1-1700220244736.png1903×859 51.5 KB

We have a dedicated guide about how to query and visualize any metric within your custom app: Query and visualize Grail data | Dynatrace Developer

Best,
Sini

3

Hi Sini,

Doesn’t seem to be live in our environments yet

brett_schubach1_1-1700229044221.png
brett_schubach1_1-1700229044221.png1101×452 18.7 KB

hence was trying to use

brett_schubach1_2-1700229134567.png
brett_schubach1_2-1700229134567.png805×477 41.8 KB

brett_schubach1_1-1700229044221.png
brett_schubach1_1-1700229044221.png1101×452 18.7 KB

4

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

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 environment-api:metrics:read to the app config file

5

Thank you so much Sini, appreciate this.