Grafana Scenes

// src/components/scenes/MyFeature/scene.tsximport {  EmbeddedScene, SceneFlexLayout, SceneFlexItem,  SceneQueryRunner, SceneVariableSet, QueryVariable,  PanelBuilders, VariableValueSelectors, SceneControlsSpacer,} from '@grafana/scenes';
export function getMyFeatureScene(params: { datasource: DataSourceRef }) {  const queryRunner = new SceneQueryRunner({    datasource: params.datasource,    queries: [{ refId: 'A', expr: 'up{cluster=~"$cluster"}', instant: true, format: 'table' }],  });
  const panel = PanelBuilders.table()    .setData(queryRunner)    .setTitle('My Table')    .build();
  return new EmbeddedScene({    $variables: new SceneVariableSet({      variables: [        new QueryVariable({          name: 'cluster',          query: 'label_values(up, cluster)',          datasource: params.datasource,          isMulti: true, includeAll: true, defaultToAll: true,        }),      ],    }),    controls: [new VariableValueSelectors({}), new SceneControlsSpacer()],    body: new SceneFlexLayout({      direction: 'column',      children: [new SceneFlexItem({ body: panel })],    }),  });}

// src/components/scenes/MyFeature/MyFeature.tsximport { SceneAppPage, SceneTimeRange } from '@grafana/scenes';
export function getMyFeaturePage(params) {  return new SceneAppPage({    title: 'My Feature',    url: '/a/my-plugin-id/my-feature',    routePath: 'my-feature/*',    $timeRange: new SceneTimeRange({ from: 'now-1h', to: 'now' }),    getScene: () => getMyFeatureScene(params),    drilldowns: [],  });}

drilldowns: [{  routePath: ':cluster/*',  getPage: (match, parent) => new SceneAppPage({    title: decodeURIComponent(match.params.cluster),    url: `${parent.state.url}/${match.params.cluster}`,    routePath: `${match.params.cluster}/*`,    getScene: () => detailScene(decodeURIComponent(match.params.cluster)),  }),}]

new SceneDataTransformer({  $data: queryRunner,  transformations: [    { id: 'organize', options: { renameByName: { 'Value #A': 'CPU' } } },    (ctx) => (source) => source.pipe(map((frames) => /* custom transform */)),  ],})

class MyWidget extends SceneObjectBase<MyWidgetState> {  static Component = ({ model }: SceneComponentProps<MyWidget>) => {    const state = model.useState();    return <div>{state.value}</div>;  };}