@grafana/data#AppRootProps TypeScript Examples

The following examples show how to use @grafana/data#AppRootProps. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ExampleRootPage.tsx    From grafana-starter-app with Apache License 2.0 6 votes vote down vote up 
ExampleRootPage = React.memo(function ExampleRootPage(props: AppRootProps) {
  const {
    path,
    onNavChanged,
    query: { tab },
    meta,
  } = props;
  // Required to support grafana instances that use a custom `root_url`.
  const pathWithoutLeadingSlash = path.replace(/^\//, '');

  // Update the navigation when the tab or path changes
  const navModel = useNavModel(
    useMemo(() => ({ tab, pages, path: pathWithoutLeadingSlash, meta }), [meta, pathWithoutLeadingSlash, tab])
  );
  useEffect(() => {
    onNavChanged(navModel);
  }, [navModel, onNavChanged]);

  const Page = pages.find(({ id }) => id === tab)?.component || pages[0].component;
  return <Page {...props} path={pathWithoutLeadingSlash} />;
})
Example #2
Source File: module.ts    From grafana-starter-app with Apache License 2.0 6 votes vote down vote up 
plugin = new AppPlugin<ExampleAppSettings>()
  .setRootPage((ExampleRootPage as unknown) as ComponentClass<AppRootProps>)
  .addConfigPage({
    title: 'Page 1',
    icon: 'info-circle',
    body: ExamplePage1,
    id: 'page1',
  })
  .addConfigPage({
    title: 'Page 2',
    icon: 'user',
    body: ExamplePage2,
    id: 'page2',
  })
Example #3
Source File: A.tsx    From grafana-starter-app with Apache License 2.0 6 votes vote down vote up 
A: FC<AppRootProps> = ({ query, path, meta }) => {
  return (
    <div>
      <ul>
        <li>
          <a href={path + '?x=1'}>Change query to 1</a>
        </li>
        <li>
          <a href={path + '?x=AAA'}>Change query to AAA</a>
        </li>
        <li>
          <a href={path + '?x=1&y=2&y=3'}>Put multiple properties into the query</a>
        </li>
      </ul>
      <br />
      QUERY: <pre>{JSON.stringify(query)}</pre>
      <br />
      Stored configuration data:
      <pre>{JSON.stringify(meta.jsonData)}</pre>
    </div>
  );
}