From 637b91ab8d21d98f7ac72886cd1c3fb89a0007df Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Wed, 24 Oct 2018 16:26:05 +0200 Subject: [PATCH] stackdriver: conditional template component rendering --- public/app/features/plugins/all.ts | 2 +- .../pluginTemplateQueryComponentLoader.tsx | 41 ++++++++ .../plugins/plugin_react_component.tsx | 47 --------- .../templating/defaultTemplateQueryCtrl.tsx | 32 +++++++ .../features/templating/partials/editor.html | 96 ++++++++++--------- .../stackdriver/templateQueryCtrl.tsx | 7 +- 6 files changed, 132 insertions(+), 93 deletions(-) create mode 100644 public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx delete mode 100644 public/app/features/plugins/plugin_react_component.tsx create mode 100644 public/app/features/templating/defaultTemplateQueryCtrl.tsx diff --git a/public/app/features/plugins/all.ts b/public/app/features/plugins/all.ts index bd94a82b31e..5dc6f3783bd 100644 --- a/public/app/features/plugins/all.ts +++ b/public/app/features/plugins/all.ts @@ -4,4 +4,4 @@ import './import_list/import_list'; import './ds_edit_ctrl'; import './datasource_srv'; import './plugin_component'; -import './plugin_react_component'; +import './pluginTemplateQueryComponentLoader'; diff --git a/public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx b/public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx new file mode 100644 index 00000000000..c45cde271c9 --- /dev/null +++ b/public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx @@ -0,0 +1,41 @@ +import _ from 'lodash'; +import coreModule from 'app/core/core_module'; +import { importPluginModule } from './plugin_loader'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import { Provider } from 'react-redux'; +import DefaultTemplateQueryCtrl from '../templating/defaultTemplateQueryCtrl'; + +function WrapInProvider(Component, props) { + return ( + + + + ); +} + +async function loadComponent(module) { + const component = await importPluginModule(module); + if (!component.TemplateQueryCtrl) { + return DefaultTemplateQueryCtrl; + } else { + return component.TemplateQueryCtrl; + } +} + +/** @ngInject */ +function pluginTemplateQueryComponentLoader(datasourceSrv) { + return { + restrict: 'E', + link: async (scope, elem) => { + const component = await loadComponent(scope.currentDatasource.meta.module); + const props = { datasourceSrv, query: scope.current.query, isValid: scope.current.isValid }; + ReactDOM.render(WrapInProvider(component, props), elem[0]); + scope.$on('$destroy', () => { + ReactDOM.unmountComponentAtNode(elem[0]); + }); + }, + }; +} + +coreModule.directive('pluginTemplateQueryComponent', pluginTemplateQueryComponentLoader); diff --git a/public/app/features/plugins/plugin_react_component.tsx b/public/app/features/plugins/plugin_react_component.tsx deleted file mode 100644 index d20679c9681..00000000000 --- a/public/app/features/plugins/plugin_react_component.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import _ from 'lodash'; -import coreModule from 'app/core/core_module'; -import { importPluginModule } from './plugin_loader'; -import React from 'react'; -import ReactDOM from 'react-dom'; -import { Provider } from 'react-redux'; - -function WrapInProvider(Component, props) { - return ( - - - - ); -} - -/** @ngInject */ -function pluginReactDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $templateCache, $timeout) { - async function getModule(scope, attrs) { - switch (attrs.type) { - case 'template-query-ctrl': { - const dsModule = await importPluginModule(scope.currentDatasource.meta.module); - console.log(dsModule); - return dsModule.TemplateQueryCtrl; - } - default: { - return $q.reject({ - message: 'Could not find component type: ' + attrs.type, - }); - } - } - } - - return { - restrict: 'E', - link: async (scope, elem, attrs) => { - const component = await getModule(scope, attrs); - const props = { datasourceSrv }; - ReactDOM.render(WrapInProvider(component, props), elem[0]); - - scope.$on('$destroy', () => { - ReactDOM.unmountComponentAtNode(elem[0]); - }); - }, - }; -} - -coreModule.directive('pluginReactComponent', pluginReactDirectiveLoader); diff --git a/public/app/features/templating/defaultTemplateQueryCtrl.tsx b/public/app/features/templating/defaultTemplateQueryCtrl.tsx new file mode 100644 index 00000000000..56334590620 --- /dev/null +++ b/public/app/features/templating/defaultTemplateQueryCtrl.tsx @@ -0,0 +1,32 @@ +import React, { PureComponent } from 'react'; + +interface Props { + query: string; +} + +export default class DefaultTemplateQueryCtrl extends PureComponent { + constructor(props) { + super(props); + } + + componentDidMount() { + console.log('componentDidMount'); + } + + render() { + return ( +
+ Query + +
+ ); + } +} diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 2655a7708e8..d217fd4d930 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -17,14 +17,16 @@
What do variables do?
-

Variables enable more interactive and dynamic dashboards. Instead of hard-coding things like server or sensor names - in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of - the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard. +

Variables enable more interactive and dynamic dashboards. Instead of hard-coding things like server or sensor + names + in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the + top of + the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard. - Check out the - - Templating documentation - for more information. + Check out the + + Templating documentation + for more information.

@@ -32,7 +34,7 @@
- New + New
@@ -77,7 +79,8 @@
Name - +
@@ -87,13 +90,15 @@
- +
- Template names cannot begin with '__', that's reserved for Grafana's global variables + Template names cannot begin with '__', that's reserved for + Grafana's global variables
@@ -127,14 +132,16 @@ Step count How many times should the current time range be divided to calculate the value
- +
Min interval The calculated value will not go below this threshold - +
@@ -143,7 +150,8 @@
Custom Options
Values separated by comma - +
@@ -170,7 +178,8 @@
Data source
-
@@ -188,16 +197,16 @@
- + - - + + -
+
Regex @@ -205,7 +214,8 @@ Optional, if you want to extract part of a series name or metric node segment. - +
@@ -215,7 +225,8 @@
- +
@@ -226,7 +237,8 @@
- +
@@ -241,7 +253,8 @@ - + @@ -250,7 +263,8 @@
Data source
-
@@ -260,18 +274,11 @@
Selection Options
- + - +
@@ -286,11 +293,13 @@
Tags query - +
  • Tag values query
    • - +
    @@ -298,11 +307,11 @@
    Preview of values
    - {{option.text}} -
    -
    - Show more -
    + {{option.text}} +
    +
    + Show more +
    @@ -317,4 +326,3 @@ - diff --git a/public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx b/public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx index 5236878bc80..62f98625981 100644 --- a/public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx +++ b/public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx @@ -1,6 +1,11 @@ import React, { PureComponent } from 'react'; +import DatasourceSrv from 'app/features/plugins/datasource_srv'; -interface Props {} +interface Props { + query: string; + datasourceSrv: DatasourceSrv; + isValid: any; +} export class StackdriverTemplateQueryCtrl extends PureComponent { constructor(props) {