跳转到主要内容

使用场景构建应用程序

注意

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

场景包含以下对象，这些对象使构建高度交互式的 Grafana 应用程序插件变得简单

  • SceneApp
  • SceneAppPage

SceneApp​

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

步骤 1. 创建场景应用程序​

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

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

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

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

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

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

使用 useSceneApp 钩子缓存和记忆 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 请求数量的时间序列面板的 Scenes 应用程序页面