@grafana/data#PluginType TypeScript Examples

export function getPanelPluginNotFound(id: string): PanelPlugin {
  const NotFound = class NotFound extends PureComponent<PanelProps> {
    render() {
      return <PanelPluginError title={`Panel plugin not found: ${id}`} />;
    }
  };

  const plugin = new PanelPlugin(NotFound);
  plugin.meta = {
    id: id,
    name: id,
    sort: 100,
    type: PluginType.panel,
    module: '',
    baseUrl: '',
    info: {
      author: {
        name: '',
      },
      description: '',
      links: [],
      logos: {
        large: '',
        small: '',
      },
      screenshots: [],
      updated: '',
      version: '',
    },
  };
  return plugin;
}

function getGrafanaCloudPhantomPlugin(): DataSourcePluginMeta {
  return {
    id: 'gcloud',
    name: 'Grafana Cloud',
    type: PluginType.datasource,
    module: 'phantom',
    baseUrl: '',
    info: {
      description: 'Hosted Graphite, Prometheus and Loki',
      logos: { small: 'public/img/grafana_icon.svg', large: 'asd' },
      author: { name: 'Grafana Labs' },
      links: [
        {
          url: 'https://grafana.com/products/cloud/',
          name: 'Learn more',
        },
      ],
      screenshots: [],
      updated: '2019-05-10',
      version: '1.0.0',
    },
  };
}

function getPhantomPlugin(options: GetPhantomPluginOptions): DataSourcePluginMeta {
  return {
    id: options.id,
    name: options.name,
    type: PluginType.datasource,
    module: 'phantom',
    baseUrl: '',
    info: {
      description: options.description,
      logos: { small: options.imgUrl, large: options.imgUrl },
      author: { name: 'Grafana Labs' },
      links: [
        {
          url: 'https://grafana.com/grafana/plugins/' + options.id,
          name: 'Install now',
        },
      ],
      screenshots: [],
      updated: '2019-05-10',
      version: '1.0.0',
    },
  };
}

mockPlugin = () =>
  ({
    defaultNavUrl: 'defaultNavUrl',
    enabled: true,
    hasUpdate: true,
    id: 'id',
    info: {} as PluginMetaInfo,
    latestVersion: 'latestVersion',
    name: 'name',
    pinned: true,
    type: PluginType.datasource,
    module: 'path/to/module',
  } as PluginMeta)

export function getAppPluginPageError(meta: AppPluginMeta) {
  if (!meta) {
    return 'Unknown Plugin';
  }
  if (meta.type !== PluginType.app) {
    return 'Plugin must be an app';
  }
  if (!meta.enabled) {
    return 'Application Not Enabled';
  }
  return null;
}

renderBody() {
    const { query } = this.props;
    const { plugin, nav } = this.state;

    if (!plugin) {
      return <Alert severity={AppNotificationSeverity.Error} title="Plugin Not Found" />;
    }

    const active = nav.main.children.find(tab => tab.active);
    if (active) {
      // Find the current config tab
      if (plugin.configPages) {
        for (const tab of plugin.configPages) {
          if (tab.id === active.id) {
            return <tab.body plugin={plugin} query={query} />;
          }
        }
      }

      // Apps have some special behavior
      if (plugin.meta.type === PluginType.app) {
        if (active.id === PAGE_ID_DASHBOARDS) {
          return <PluginDashboards plugin={plugin.meta} />;
        }

        if (active.id === PAGE_ID_CONFIG_CTRL && plugin.angularConfigCtrl) {
          return <AppConfigCtrlWrapper app={plugin as AppPlugin} />;
        }
      }
    }

    return <PluginHelp plugin={plugin.meta} type="help" />;
  }

function loadPlugin(pluginId: string): Promise<GrafanaPlugin> {
  return getPluginSettings(pluginId).then(info => {
    if (info.type === PluginType.app) {
      return importAppPlugin(info);
    }
    if (info.type === PluginType.datasource) {
      return importDataSourcePlugin(info);
    }
    if (info.type === PluginType.panel) {
      return importPanelPlugin(pluginId).then(plugin => {
        // Panel Meta does not have the *full* settings meta
        return getPluginSettings(pluginId).then(meta => {
          plugin.meta = {
            ...meta, // Set any fields that do not exist
            ...plugin.meta,
          };
          return plugin;
        });
      });
    }
    if (info.type === PluginType.renderer) {
      return Promise.resolve({ meta: info } as GrafanaPlugin);
    }
    return Promise.reject('Unknown Plugin type: ' + info.type);
  });
}

export function getMockPlugin(overrides?: Partial<PluginMeta>): PluginMeta {
  const defaults: PluginMeta = {
    defaultNavUrl: 'some/url',
    enabled: false,
    hasUpdate: false,
    id: '1',
    info: {
      author: {
        name: 'Grafana Labs',
        url: 'url/to/GrafanaLabs',
      },
      description: 'pretty decent plugin',
      links: [{ name: 'project', url: 'one link' }],
      logos: { small: 'small/logo', large: 'large/logo' },
      screenshots: [{ path: `screenshot`, name: 'test' }],
      updated: '2018-09-26',
      version: '1',
    },
    latestVersion: '1',
    name: 'pretty cool plugin 1',
    baseUrl: 'path/to/plugin',
    pinned: false,
    type: PluginType.panel,
    module: 'path/to/module',
  };

  return defaultsDeep(overrides || {}, defaults) as PluginMeta;
}

getPanelPlugin = (
  options: Partial<PanelPluginMeta>,
  reactPanel?: ComponentType<PanelProps>,
  angularPanel?: any
): PanelPlugin => {
  const plugin = new PanelPlugin(reactPanel);
  plugin.angularPanelCtrl = angularPanel;
  plugin.meta = {
    id: options.id,
    type: PluginType.panel,
    name: options.id,
    sort: options.sort || 1,
    info: {
      author: {
        name: options.id + 'name',
      },
      description: '',
      links: [],
      logos: {
        large: '',
        small: '',
      },
      screenshots: [],
      updated: '',
      version: '',
    },
    hideFromList: options.hideFromList === true,
    module: '',
    baseUrl: '',
  };
  return plugin;
}

export function getDataSourceLoadingNav(pageName: string): NavModel {
  const main = buildNavModel(
    {
      access: '',
      basicAuth: false,
      basicAuthUser: '',
      basicAuthPassword: '',
      withCredentials: false,
      database: '',
      id: 1,
      isDefault: false,
      jsonData: { authType: 'credentials', defaultRegion: 'eu-west-2' },
      name: 'Loading',
      orgId: 1,
      password: '',
      readOnly: false,
      type: 'Loading',
      typeLogoUrl: 'public/img/icn-datasource.svg',
      url: '',
      user: '',
    },
    {
      meta: {
        id: '1',
        type: PluginType.datasource,
        name: '',
        info: {
          author: {
            name: '',
            url: '',
          },
          description: '',
          links: [{ name: '', url: '' }],
          logos: {
            large: '',
            small: '',
          },
          screenshots: [],
          updated: '',
          version: '',
        },
        includes: [],
        module: '',
        baseUrl: '',
      },
    } as GenericDataSourcePlugin
  );

  let node: NavModelItem;

  // find active page
  for (const child of main.children) {
    if (child.id.indexOf(pageName) > 0) {
      child.active = true;
      node = child;
      break;
    }
  }

  return {
    main: main,
    node: node,
  };
}

function getPluginTabsNav(
  plugin: GrafanaPlugin,
  appSubUrl: string,
  path: string,
  query: UrlQueryMap,
  isAdmin: boolean
): { defaultPage: string; nav: NavModel } {
  const { meta } = plugin;
  let defaultPage: string;
  const pages: NavModelItem[] = [];

  if (true) {
    pages.push({
      text: 'Readme',
      icon: 'fa fa-fw fa-file-text-o',
      url: `${appSubUrl}${path}?page=${PAGE_ID_README}`,
      id: PAGE_ID_README,
    });
  }

  // We allow non admins to see plugins but only their readme. Config is hidden even though the API needs to be
  // public for plugins to work properly.
  if (isAdmin) {
    // Only show Config/Pages for app
    if (meta.type === PluginType.app) {
      // Legacy App Config
      if (plugin.angularConfigCtrl) {
        pages.push({
          text: 'Config',
          icon: 'gicon gicon-cog',
          url: `${appSubUrl}${path}?page=${PAGE_ID_CONFIG_CTRL}`,
          id: PAGE_ID_CONFIG_CTRL,
        });
        defaultPage = PAGE_ID_CONFIG_CTRL;
      }

      if (plugin.configPages) {
        for (const page of plugin.configPages) {
          pages.push({
            text: page.title,
            icon: page.icon,
            url: `${appSubUrl}${path}?page=${page.id}`,
            id: page.id,
          });
          if (!defaultPage) {
            defaultPage = page.id;
          }
        }
      }

      // Check for the dashboard pages
      if (find(meta.includes, { type: PluginIncludeType.dashboard })) {
        pages.push({
          text: 'Dashboards',
          icon: 'gicon gicon-dashboard',
          url: `${appSubUrl}${path}?page=${PAGE_ID_DASHBOARDS}`,
          id: PAGE_ID_DASHBOARDS,
        });
      }
    }
  }

  if (!defaultPage) {
    defaultPage = pages[0].id; // the first tab
  }

  const node = {
    text: meta.name,
    img: meta.info.logos.large,
    subTitle: meta.info.author.name,
    breadcrumbs: [{ title: 'Plugins', url: 'plugins' }],
    url: `${appSubUrl}${path}`,
    children: setActivePage(query.page as string, pages, defaultPage),
  };

  return {
    defaultPage,
    nav: {
      node: node,
      main: node,
    },
  };
}

describe('pluginsReducer', () => {
  describe('when pluginsLoaded is dispatched', () => {
    it('then state should be correct', () => {
      reducerTester<PluginsState>()
        .givenReducer(pluginsReducer, { ...initialState })
        .whenActionIsDispatched(
          pluginsLoaded([
            {
              id: 'some-id',
              baseUrl: 'some-url',
              module: 'some module',
              name: 'Some Plugin',
              type: PluginType.app,
              info: {} as PluginMetaInfo,
            },
          ])
        )
        .thenStateShouldEqual({
          ...initialState,
          hasFetched: true,
          plugins: [
            {
              baseUrl: 'some-url',
              id: 'some-id',
              info: {} as PluginMetaInfo,
              module: 'some module',
              name: 'Some Plugin',
              type: PluginType.app,
            },
          ],
        });
    });
  });

  describe('when setPluginsSearchQuery is dispatched', () => {
    it('then state should be correct', () => {
      reducerTester<PluginsState>()
        .givenReducer(pluginsReducer, { ...initialState })
        .whenActionIsDispatched(setPluginsSearchQuery('A query'))
        .thenStateShouldEqual({
          ...initialState,
          searchQuery: 'A query',
        });
    });
  });

  describe('when setPluginsLayoutMode is dispatched', () => {
    it('then state should be correct', () => {
      reducerTester<PluginsState>()
        .givenReducer(pluginsReducer, { ...initialState })
        .whenActionIsDispatched(setPluginsLayoutMode(LayoutModes.List))
        .thenStateShouldEqual({
          ...initialState,
          layoutMode: LayoutModes.List,
        });
    });
  });

  describe('when pluginDashboardsLoad is dispatched', () => {
    it('then state should be correct', () => {
      reducerTester<PluginsState>()
        .givenReducer(pluginsReducer, {
          ...initialState,
          dashboards: [
            {
              dashboardId: 1,
              title: 'Some Dash',
              description: 'Some Desc',
              folderId: 2,
              imported: false,
              importedRevision: 1,
              importedUri: 'some-uri',
              importedUrl: 'some-url',
              path: 'some/path',
              pluginId: 'some-plugin-id',
              removed: false,
              revision: 22,
              slug: 'someSlug',
            },
          ],
        })
        .whenActionIsDispatched(pluginDashboardsLoad())
        .thenStateShouldEqual({
          ...initialState,
          dashboards: [],
          isLoadingPluginDashboards: true,
        });
    });
  });

  describe('when pluginDashboardsLoad is dispatched', () => {
    it('then state should be correct', () => {
      reducerTester<PluginsState>()
        .givenReducer(pluginsReducer, { ...initialState, isLoadingPluginDashboards: true })
        .whenActionIsDispatched(
          pluginDashboardsLoaded([
            {
              dashboardId: 1,
              title: 'Some Dash',
              description: 'Some Desc',
              folderId: 2,
              imported: false,
              importedRevision: 1,
              importedUri: 'some-uri',
              importedUrl: 'some-url',
              path: 'some/path',
              pluginId: 'some-plugin-id',
              removed: false,
              revision: 22,
              slug: 'someSlug',
            },
          ])
        )
        .thenStateShouldEqual({
          ...initialState,
          dashboards: [
            {
              dashboardId: 1,
              title: 'Some Dash',
              description: 'Some Desc',
              folderId: 2,
              imported: false,
              importedRevision: 1,
              importedUri: 'some-uri',
              importedUrl: 'some-url',
              path: 'some/path',
              pluginId: 'some-plugin-id',
              removed: false,
              revision: 22,
              slug: 'someSlug',
            },
          ],
          isLoadingPluginDashboards: false,
        });
    });
  });
});