跳到主要内容

使用 Scenes 构建应用

注意

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

Scenes 附带以下对象，可轻松构建高度交互的 Grafana 应用插件

  • SceneApp
  • SceneAppPage

SceneApp​

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

步骤 1. 创建 Scenes 应用​

使用 SceneApp 对象定义新的 Scenes 应用

function getSceneApp() {
  return new SceneApp({
    pages: [],
    urlSyncOptions: {
      updateUrlOnInit: true,
      createBrowserHistorySteps: true,
    },
  });
}

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

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

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

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

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

在应用插件中，渲染 Scenes 应用

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

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

SceneAppPage​

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

使用 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. 创建 scene​

首先，创建一个将在 SceneApp 中渲染的 scene

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> 将渲染一个 Scenes 应用，其中包含一个时间序列面板，该面板可视化 Prometheus HTTP 请求的数量。