Pulling metrics into my app in AppEngine

[brett_schubach1]

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 

[sinisa_zubic]

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 

We have a dedicated guide about how to query and visualize any metric within your custom app: https://developer.dynatrace.com/develop/data/query-and-visualize/

Best,
Sini

[brett_schubach1]

Hi Sini,

Doesn't seem to be live in our environments yet

hence was trying to use

[sinisa_zubic · Accepted solution]

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

[brett_schubach1]

Thank you so much Sini, appreciate this.