[core] Rework variable handling in dashboards

[ricoberger]

Is your feature request related to a problem? Please describe

At the moment it is difficult to extend the supported variables in the Dashboard component with new options, e.g. an option from the Azure plugin, which loads all resource groups or an option in the klogs plugin which allows users to select a value from a field.

The problem is that all options for the variables are defined within the following function:

kobs/plugins/dashboards/src/components/dashboards/Dashboard.tsx

Line 74 in e81cb3c

const { isError, error, data, refetch } = useQuery<IVariableValues[] | null, Error>(

Describe the solution you'd like

A better solution would be to define the options to load variable values in the plugin, for example we can add a new optional field to the IPluginComponent interface:

export interface IPluginComponent {
  home?: React.FunctionComponent<IPluginPageProps>;
  icon: string;
  page?: React.FunctionComponent<IPluginPageProps>;
  panel: React.FunctionComponent<IPluginPanelProps>;
  preview?: React.FunctionComponent<IPluginPreviewProps>;
  variables?: (variable: IVariable) => IVariableValues;
}

With the new variables field we can then define function for each plugin which takes the user defined variable (type: IVariable), then runs the plugin logic / executes the API request and returns the variable values (type: IVariableValues).

Additional context

• With this new implementation it is also possible that variables can be defined via community plugins.
• We have to find a new home for the Variable Plugin Options documentation. At the moment I think the best would be to add a new Variables heading on the same level as the Configuration and Options headings.