跳至主要内容

使用场景构建应用

注意

在开始之前：您必须已经了解构建 Grafana 插件的知识，才能继续本指南。在Grafana 官方文档中了解更多信息。

场景附带以下对象，使构建高度交互式的 Grafana 应用插件变得容易

  • SceneApp
  • SceneAppPage

SceneApp​

SceneApp 是您必须使用的根对象，才能充分利用场景和 Grafana 插件集成。SceneApp 提供对场景应用路由的支持。

步骤 1. 创建场景应用​

使用 SceneApp 对象定义一个新的场景应用

function getSceneApp() {
  return new SceneApp({
    pages: [],
  });
}

步骤 2. 在插件中渲染场景应用​

定义一个将渲染场景应用的组件

function MyApp() {
  const scene = useSceneApp(getSceneApp);

  return <scene.Component model={scene} />;
}
注意

使用 useSceneApp hook 记忆化和缓存 SceneApp 实例的创建。这对于 url 同步正常工作非常重要，它还可以确保用户离开您的应用并返回时不会丢失数据和场景应用状态。

在应用插件中，渲染场景应用

export class App extends React.PureComponent<AppRootProps> {
  render() {
    return (
      <PluginPropsContext.Provider value={this.props}>
        <MyApp />
      </PluginPropsContext.Provider>
    );
  }
}
注意

前面的示例将渲染一个空白页面，因为 SceneApp 构造函数中的 pages 属性为空。使用 SceneAppPage 对象在您的应用中渲染场景。

SceneAppPage​

SceneAppPage 对象允许您轻松地在应用插件中渲染场景。除了渲染场景外，它还提供对以下内容的支持：

使用 SceneAppPage 构建您的应用页面。它接受以下属性

  /** Page title */
  title: string;
  /** Page subTitle */
  subTitle?: string;
  /** For an image before title */
  titleImg?: string;
  /** For an icon before title */
  titleIcon?: IconName;
  /** Use to provide absolute page URL, for example, /app/overview **/
  url: string;
  /** Use to provide parametrized page URL, for example, /app/overview/:clusterId **/
  routePath?: string;
  /** Array of scene object to be rendered at the top right of the page, inline with the page title */
  controls?: SceneObject[];
  /** Controls whether or not page should be visible in the breadcrumbs path **/
  hideFromBreadcrumbs?: boolean;
  /** Array of SceneAppPage objects that are used as page tabs displayed at the top of the page **/
  tabs?: SceneAppPageLike[];
  /** Function that returns a scene object for the page **/
  getScene?: (routeMatch: SceneRouteMatch) => EmbeddedScene;
  /** Array of scenes used for drilldown views **/
  drilldowns?: SceneAppDrilldownView[];
  /** Function that returns a parent page object, used to create breadcrumbs structure **/
  getParentPage?: () => SceneAppPageLike;
  /** Array of query params that will be preserved in breadcrumb and page tab links, for example, ['from', 'to', 'var-datacenter',...] **/
  preserveUrlKeys?: string[];

步骤 1. 创建场景​

首先，创建一个要在 SceneApp 中渲染的场景

const getScene = () => {
  const queryRunner = new SceneQueryRunner({
    datasource: {
      type: 'prometheus',
      uid: '<PROVIDE_GRAFANA_DS_UID>',
    },
    queries: [
      {
        refId: 'A',
        expr: 'rate(prometheus_http_requests_total{}[5m])',
      },
    ],
  });

  return new EmbeddedScene({
    $data: queryRunner,
    $timeRange: new SceneTimeRange(),
    body: new SceneFlexLayout({
      direction: 'column',
      children: [
        new SceneFlexItem({
          minHeight: 300,
          body: PanelBuilders.timeseries().build(),
        }),
      ],
    }),
  });
};

步骤 2. 创建 SceneAppPage​

使用 SceneAppPage 对象配置应用页面

const myAppPage = new SceneAppPage({
  title: 'Grafana Scenes App',
  url: '/a/<PLUGIN_ID>',
  getScene: getScene,
});

步骤 3. 将页面添加到 SceneApp​

const getSceneApp = () =>
  new SceneApp({
    pages: [myAppPage],
  });

导航到 https://your-grafana.url/a/<PLUGIN_ID> 将渲染一个场景应用，其中包含一个页面，该页面包含一个可视化 Prometheus HTTP 请求数量的时间序列面板。