@dynathrace-sdk/反应-呼克

这个 @dynatrace-sdk/react-hooks 库提供了一个与Dynatrace平台服务客户端在React应用程序中互动的无缝方式. 这个软件包会利用钩子来大大简化React内部对Dynatrace服务的使用. 详情请访问 Developer Portal。 。 。 .

npm install @dynatrace-sdk/react-hooks

来自圣杯的简化数据查询

传统上,在Dynatrace查询数据涉及使用客户端-query包并管理复杂的反应状态. 这个 useDql 在此包中勾勾可以简化此进程 。 以下示例展示了如何用 DQL 查询获取数据 :

const { data, error, isLoading } = useDql('fetch logs');

这个钩子完全兼容 queryExecute 函数 @dynatrace-sdk/client-query 软件包.

例如,为了限制返回的结果的数目:

const { data, error, isLoading, refetch } = useDql({
  query: 'fetch logs',
  maxResultRecords: 2000,
});

您可以延迟查询的执行, 直至用户通过将额外查询选项传递给钩头点击按钮:

const { data, error, isLoading, refetch } = useDql('fetch logs', { enabled: false });

function onClickQuery() {
  refetch();
}

您应该根据查询类型在您的应用程序配置中添加适当的范围 。 详情请参见: 圣杯文档中的 Bucket 和表格权限。 。 。 .

获取圣杯字段

这个 useGrailFields 钩子从自动完成和DSS查询来源中获取“圣杯”字段,并将其分别曝光为 autocompleteData 财务报告和审定财务报表 dssData编辑 dataObject 接受 "logs", (中文(简体) ), "spans", (中文(简体) ), "smartscape.nodes",或 "metrics"。 。 。 .

const { data, isLoading, isError, errors } = useGrailFields({
  autocompleteQueryOptions: { query: 'fetch logs' },
  dssQueryOptions: { dataObject: 'logs' },
});

使用 select 在返回前将原始数据转换为 data数字 :

const { data } = useGrailFields({
  autocompleteQueryOptions: { query: 'fetch logs' },
  dssQueryOptions: { dataObject: 'logs' },
  select: ({ autocompleteData }) =>
    autocompleteData?.suggestions?.map((s) => s.suggestion ?? '') ?? [],
});

与文档和应用程序状态交互

除了DQL查询之外,我们的钩子还有利于与文档和app状态的互动. 它们允许对立即或推迟的查询执行进行控制.

const { data, error, isLoading } = useDocument({ id: documentId }, { autoFetch: true });

为了创建、更新或删除文档或应用程序状态,需要明确执行调用:

const { data, execute, error } = useCreateDocument();

function onClickCreateDocument() {
  execute(DOCUMENT_DATA);
}

根据您的交互类型, 将这些范围添加到您的应用程序配置中 :

与设置交互

设置可以通过以下方式使用:

const { data, error, isLoading } = useSettingsV2(
  { schemaIds: SETTING_SCHEMA },
  { autoFetch: true },
);

为了创建、更新或删除设置,需要明确执行呼叫:

const { data, execute, error } = useCreateSettingsV2();

function onClickCreateSettings() {
  execute(SETTING_DATA);
}

根据您的交互类型, 将这些范围添加到您的应用程序配置中 :

戴维斯分析器的简化使用

利用戴维斯分析器传统上涉及复杂的州管理和投票逻辑,同时 @dynatrace-sdk/client-davis-analyzers 软件包。 这个 useAnalyzer 在这个一揽子中钩住使这一过程更加直截了当:

const { data, error, isLoading } = useAnalyzer({
  analyzerName: 'dt.statistics.GenericForecastAnalyzer',
  body: {
    timeSeriesData: {
      expression: query,
    },
  },
});

此勾钩支持执行分析器方法中从 @dynatrace-sdk/client-davis-analyzers 软件包.

将分析器的执行推迟到用户动作时, 如点击按钮, 用附加选项配置钩子 :

const { data, error, isLoading, refetch } = useAnalyzer({
  analyzerName: 'dt.statistics.GenericForecastAnalyzer',
  body: {
    timeSeriesData: {
      expression: query,
    },
  },
  {
    autoFetch: false,
    autoFetchOnUpdate: true,
  }
});

function onExecuteAnalyzer() {
  refetch();
}

在您的应用程序配置中, 包括必要的范围 :

App 函数

使用AppFunction hook是最简单的调用app功能的方法. 作为这个包中的其他钩子,它为加载和出错提供了状态处理:

const { data, error, isLoading } = useAppFunction({ name: 'functionName', data: 'data' });

有时您想要延迟应用功能的执行,直到用户点击按钮. 这可以通过向钩子传递附加选项来实现:

const { data, error, isLoading, refetch } = useAppFunction(
  { name: 'functionName', data: 'data' },
  { autoFetch: false, autoFetchOnUpdate: false },
);

function onClick() {
  refetch();
}