From efd3343d19fb94ebc5e4fecdc829c98f4b470643 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Wed, 24 Oct 2018 14:08:37 +0200 Subject: [PATCH 001/129] stackdriver: add basic directive for loading react plugin components --- public/app/features/plugins/all.ts | 1 + .../plugins/plugin_react_component.tsx | 47 +++++++++++++++++++ 2 files changed, 48 insertions(+) create mode 100644 public/app/features/plugins/plugin_react_component.tsx diff --git a/public/app/features/plugins/all.ts b/public/app/features/plugins/all.ts index c9fb250266c..bd94a82b31e 100644 --- a/public/app/features/plugins/all.ts +++ b/public/app/features/plugins/all.ts @@ -4,3 +4,4 @@ import './import_list/import_list'; import './ds_edit_ctrl'; import './datasource_srv'; import './plugin_component'; +import './plugin_react_component'; diff --git a/public/app/features/plugins/plugin_react_component.tsx b/public/app/features/plugins/plugin_react_component.tsx new file mode 100644 index 00000000000..d20679c9681 --- /dev/null +++ b/public/app/features/plugins/plugin_react_component.tsx @@ -0,0 +1,47 @@ +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); From 94ac522109cba9b431017cf26fe4fa0b78a42c08 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Wed, 24 Oct 2018 14:10:20 +0200 Subject: [PATCH 002/129] stackdriver: make it possible to load react plugin components from template query page --- public/app/features/templating/editor_ctrl.ts | 5 +++++ public/app/features/templating/partials/editor.html | 9 ++++++++- public/app/types/plugins.ts | 1 + 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/public/app/features/templating/editor_ctrl.ts b/public/app/features/templating/editor_ctrl.ts index cef7c9cc912..4bd00a9c1ee 100644 --- a/public/app/features/templating/editor_ctrl.ts +++ b/public/app/features/templating/editor_ctrl.ts @@ -171,6 +171,11 @@ export class VariableEditorCtrl { $scope.showMoreOptions = () => { $scope.optionsLimit += 20; }; + + $scope.datasourceChanged = async () => { + $scope.currentDatasource = await datasourceSrv.get($scope.current.datasource); + console.log($scope.currentDatasource); + }; } } diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index c4463972177..2655a7708e8 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -170,11 +170,12 @@
Data source
-
+
Refresh @@ -187,6 +188,12 @@
+ + + + + +
Query diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts index 817777669d8..a22879daa70 100644 --- a/public/app/types/plugins.ts +++ b/public/app/types/plugins.ts @@ -6,6 +6,7 @@ export interface PluginExports { QueryCtrl?: any; ConfigCtrl?: any; AnnotationsQueryCtrl?: any; + TemplateQueryCtrl?: any; ExploreQueryField?: any; ExploreStartPage?: any; From 0792c182cc2fe6aa120ee2942c041dbd744334c5 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Wed, 24 Oct 2018 14:11:10 +0200 Subject: [PATCH 003/129] stackdriver: add react component for template query editor --- .../plugins/datasource/stackdriver/module.ts | 2 ++ .../stackdriver/templateQueryCtrl.tsx | 17 +++++++++++++++++ 2 files changed, 19 insertions(+) create mode 100644 public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx diff --git a/public/app/plugins/datasource/stackdriver/module.ts b/public/app/plugins/datasource/stackdriver/module.ts index 183c5c9ff88..a23ea4e6eda 100644 --- a/public/app/plugins/datasource/stackdriver/module.ts +++ b/public/app/plugins/datasource/stackdriver/module.ts @@ -2,10 +2,12 @@ import StackdriverDatasource from './datasource'; import { StackdriverQueryCtrl } from './query_ctrl'; import { StackdriverConfigCtrl } from './config_ctrl'; import { StackdriverAnnotationsQueryCtrl } from './annotations_query_ctrl'; +import { StackdriverTemplateQueryCtrl } from './templateQueryCtrl'; export { StackdriverDatasource as Datasource, StackdriverQueryCtrl as QueryCtrl, StackdriverConfigCtrl as ConfigCtrl, StackdriverAnnotationsQueryCtrl as AnnotationsQueryCtrl, + StackdriverTemplateQueryCtrl as TemplateQueryCtrl, }; diff --git a/public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx b/public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx new file mode 100644 index 00000000000..5236878bc80 --- /dev/null +++ b/public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx @@ -0,0 +1,17 @@ +import React, { PureComponent } from 'react'; + +interface Props {} + +export class StackdriverTemplateQueryCtrl extends PureComponent { + constructor(props) { + super(props); + } + + componentDidMount() { + console.log('componentDidMount'); + } + + render() { + return

Hello Stackdriver Template Query

; + } +} From 637b91ab8d21d98f7ac72886cd1c3fb89a0007df Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Wed, 24 Oct 2018 16:26:05 +0200 Subject: [PATCH 004/129] 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) { From 4f7d3fccb7582ada3b5599a4ecc6f053e4006626 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Thu, 25 Oct 2018 13:30:39 +0200 Subject: [PATCH 005/129] stackdriver: make sure default template query editor state is propagted to parent angular scope --- .../pluginTemplateQueryComponentLoader.tsx | 20 +++++++------------ .../templating/defaultTemplateQueryCtrl.tsx | 20 +++++++++++++------ public/app/features/templating/editor_ctrl.ts | 10 ++++++++-- 3 files changed, 29 insertions(+), 21 deletions(-) diff --git a/public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx b/public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx index c45cde271c9..ac7d94a3f15 100644 --- a/public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx +++ b/public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx @@ -1,19 +1,9 @@ -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) { @@ -28,9 +18,13 @@ 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]); + const Component = await loadComponent(scope.currentDatasource.meta.module); + const props = { + datasourceSrv, + query: scope.current.query, + onChange: scope.onQueryChange, + }; + ReactDOM.render(, elem[0]); scope.$on('$destroy', () => { ReactDOM.unmountComponentAtNode(elem[0]); }); diff --git a/public/app/features/templating/defaultTemplateQueryCtrl.tsx b/public/app/features/templating/defaultTemplateQueryCtrl.tsx index 56334590620..85f0ac7ee7d 100644 --- a/public/app/features/templating/defaultTemplateQueryCtrl.tsx +++ b/public/app/features/templating/defaultTemplateQueryCtrl.tsx @@ -2,15 +2,23 @@ import React, { PureComponent } from 'react'; interface Props { query: string; + onChange: (c: string) => void; } -export default class DefaultTemplateQueryCtrl extends PureComponent { +export default class DefaultTemplateQueryCtrl extends PureComponent { constructor(props) { super(props); + this.state = { value: props.query }; + this.handleChange = this.handleChange.bind(this); + this.handleBlur = this.handleBlur.bind(this); } - componentDidMount() { - console.log('componentDidMount'); + handleChange(event) { + this.setState({ value: event.target.value }); + } + + handleBlur(event) { + this.props.onChange(event.target.value); } render() { @@ -20,10 +28,10 @@ export default class DefaultTemplateQueryCtrl extends PureComponent { diff --git a/public/app/features/templating/editor_ctrl.ts b/public/app/features/templating/editor_ctrl.ts index 4bd00a9c1ee..6bdd71620b3 100644 --- a/public/app/features/templating/editor_ctrl.ts +++ b/public/app/features/templating/editor_ctrl.ts @@ -106,6 +106,11 @@ export class VariableEditorCtrl { }); }; + $scope.onQueryChange = value => { + $scope.current.query = value; + $scope.runQuery(); + }; + $scope.edit = variable => { $scope.current = variable; $scope.currentIsNew = false; @@ -173,8 +178,9 @@ export class VariableEditorCtrl { }; $scope.datasourceChanged = async () => { - $scope.currentDatasource = await datasourceSrv.get($scope.current.datasource); - console.log($scope.currentDatasource); + datasourceSrv.get($scope.current.datasource).then(ds => { + $scope.currentDatasource = ds; + }); }; } } From 1969ad41e82447f480a7b4bb5cf8d41b04b84dbe Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Thu, 25 Oct 2018 13:53:02 +0200 Subject: [PATCH 006/129] stackdriver: refactor stackdriver query ctrl --- .../pluginTemplateQueryComponentLoader.tsx | 4 +-- .../stackdriver/templateQueryCtrl.tsx | 28 ++++++++++++++----- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx b/public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx index ac7d94a3f15..9a27643ace5 100644 --- a/public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx +++ b/public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx @@ -14,13 +14,13 @@ async function loadComponent(module) { } /** @ngInject */ -function pluginTemplateQueryComponentLoader(datasourceSrv) { +function pluginTemplateQueryComponentLoader() { return { restrict: 'E', link: async (scope, elem) => { const Component = await loadComponent(scope.currentDatasource.meta.module); const props = { - datasourceSrv, + datasource: scope.currentDatasource, query: scope.current.query, onChange: scope.onQueryChange, }; diff --git a/public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx b/public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx index 62f98625981..4900c4b15da 100644 --- a/public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx +++ b/public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx @@ -1,22 +1,36 @@ import React, { PureComponent } from 'react'; -import DatasourceSrv from 'app/features/plugins/datasource_srv'; +import StackdriverDatasource from './datasource'; interface Props { + datasource: StackdriverDatasource; query: string; - datasourceSrv: DatasourceSrv; - isValid: any; + onChange: (c: string) => void; } -export class StackdriverTemplateQueryCtrl extends PureComponent { +export class StackdriverTemplateQueryCtrl extends PureComponent { constructor(props) { super(props); } - componentDidMount() { - console.log('componentDidMount'); + async componentDidMount() { + const metricDescriptors = await this.props.datasource.getMetricTypes(this.props.datasource.projectName); + console.log(metricDescriptors); } render() { - return

    Hello Stackdriver Template Query

    ; + return ( +
    + Query + +
    + ); } } From ba4d52e0482d091ecdc70c7fb9f4a6afaf5464ee Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Thu, 25 Oct 2018 17:00:32 +0200 Subject: [PATCH 007/129] stackdriver: add selector components for service and metric type --- .../datasource/stackdriver/metricTypes.tsx | 43 +++++++++++ .../datasource/stackdriver/services.tsx | 32 ++++++++ .../stackdriver/templateQueryCtrl.tsx | 73 +++++++++++++++---- 3 files changed, 135 insertions(+), 13 deletions(-) create mode 100644 public/app/plugins/datasource/stackdriver/metricTypes.tsx create mode 100644 public/app/plugins/datasource/stackdriver/services.tsx diff --git a/public/app/plugins/datasource/stackdriver/metricTypes.tsx b/public/app/plugins/datasource/stackdriver/metricTypes.tsx new file mode 100644 index 00000000000..0e844f49439 --- /dev/null +++ b/public/app/plugins/datasource/stackdriver/metricTypes.tsx @@ -0,0 +1,43 @@ +import React, { SFC } from 'react'; +import uniqBy from 'lodash/uniqBy'; + +interface Props { + onMetricTypeChanged: any; + selectedService: string; + metricDescriptors: any[]; +} + +const MetricTypes: SFC = props => { + const extractMetricTypes = () => { + if (!props.selectedService) { + return []; + } + + return props.metricDescriptors.filter(m => m.service === props.selectedService).map(m => ({ + value: m.service, + name: m.displayName, + })); + }; + + uniqBy(props.metricDescriptors, 'service').map(m => ({ + value: m.service, + name: m.serviceShortName, + })); + + return ( +
    + Metric Types +
    + +
    +
    + ); +}; + +export default MetricTypes; diff --git a/public/app/plugins/datasource/stackdriver/services.tsx b/public/app/plugins/datasource/stackdriver/services.tsx new file mode 100644 index 00000000000..e8da82933d2 --- /dev/null +++ b/public/app/plugins/datasource/stackdriver/services.tsx @@ -0,0 +1,32 @@ +import React, { SFC } from 'react'; +import uniqBy from 'lodash/uniqBy'; + +interface Props { + onServiceChange: any; + metricDescriptors: any[]; +} + +const Services: SFC = props => { + const extractServices = () => + uniqBy(props.metricDescriptors, 'service').map(m => ({ + value: m.service, + name: m.serviceShortName, + })); + + return ( +
    + Service +
    + +
    +
    + ); +}; + +export default Services; diff --git a/public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx b/public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx index 4900c4b15da..20a2cf28077 100644 --- a/public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx +++ b/public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx @@ -1,5 +1,7 @@ import React, { PureComponent } from 'react'; import StackdriverDatasource from './datasource'; +import Services from './services'; +import MetricTypes from './metricTypes'; interface Props { datasource: StackdriverDatasource; @@ -8,29 +10,74 @@ interface Props { } export class StackdriverTemplateQueryCtrl extends PureComponent { + queryTypes: Array<{ value: string; name: string }> = [ + { value: 'services', name: 'Services' }, + { value: 'metricTypes', name: 'Metric Types' }, + { value: 'metricLabels', name: 'Metric labels For Metric Type' }, + ]; + constructor(props) { super(props); + this.handleChange = this.handleChange.bind(this); + this.onServiceChange = this.onServiceChange.bind(this); + this.onMetricTypeChanged = this.onMetricTypeChanged.bind(this); + this.state = { queryType: undefined, metricDescriptors: [], service: undefined, metricType: undefined }; } async componentDidMount() { const metricDescriptors = await this.props.datasource.getMetricTypes(this.props.datasource.projectName); - console.log(metricDescriptors); + this.setState({ metricDescriptors }); + } + + handleChange(event) { + this.setState({ queryType: event.target.value }); + } + + onServiceChange(event) { + this.setState({ service: event.target.value }); + } + + onMetricTypeChanged(event) { + this.setState({ metricType: event.target.value }); + } + + renderSwitch(queryType) { + switch (queryType) { + case 'metricTypes': + return ; + case 'metricLabels': + return ( + + + + + ); + default: + return ''; + } } render() { return ( -
    - Query - -
    + +
    + Query Type +
    + +
    +
    + {this.renderSwitch(this.state.queryType)} +     ); } } From 4bcf3bf1ffe184cf7a175b8aa274be886f8a899a Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Thu, 25 Oct 2018 17:01:13 +0200 Subject: [PATCH 008/129] stackdriver: remove not used code --- public/app/plugins/datasource/stackdriver/metricTypes.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/public/app/plugins/datasource/stackdriver/metricTypes.tsx b/public/app/plugins/datasource/stackdriver/metricTypes.tsx index 0e844f49439..d4e82dbc380 100644 --- a/public/app/plugins/datasource/stackdriver/metricTypes.tsx +++ b/public/app/plugins/datasource/stackdriver/metricTypes.tsx @@ -1,5 +1,4 @@ import React, { SFC } from 'react'; -import uniqBy from 'lodash/uniqBy'; interface Props { onMetricTypeChanged: any; @@ -19,11 +18,6 @@ const MetricTypes: SFC = props => { })); }; - uniqBy(props.metricDescriptors, 'service').map(m => ({ - value: m.service, - name: m.serviceShortName, - })); - return (
    Metric Types From 33c9217cc987cf4aee124c623cebe0bd45cbb7fb Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Fri, 26 Oct 2018 09:44:36 +0200 Subject: [PATCH 009/129] stackdriver: refactoring - rename react components and file structure changes --- .../pluginTemplateQueryComponentLoader.tsx | 6 ++-- .../MetricTypeSelector.tsx} | 12 ++++---- .../ServiceSelector.tsx} | 4 +-- .../TemplateQueryComponent.tsx} | 30 ++++++++++--------- .../plugins/datasource/stackdriver/module.ts | 4 +-- public/app/types/plugins.ts | 2 +- 6 files changed, 30 insertions(+), 28 deletions(-) rename public/app/plugins/datasource/stackdriver/{metricTypes.tsx => components/MetricTypeSelector.tsx} (77%) rename public/app/plugins/datasource/stackdriver/{services.tsx => components/ServiceSelector.tsx} (90%) rename public/app/plugins/datasource/stackdriver/{templateQueryCtrl.tsx => components/TemplateQueryComponent.tsx} (69%) diff --git a/public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx b/public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx index 9a27643ace5..9db8fc97088 100644 --- a/public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx +++ b/public/app/features/plugins/pluginTemplateQueryComponentLoader.tsx @@ -6,10 +6,10 @@ import DefaultTemplateQueryCtrl from '../templating/defaultTemplateQueryCtrl'; async function loadComponent(module) { const component = await importPluginModule(module); - if (!component.TemplateQueryCtrl) { - return DefaultTemplateQueryCtrl; + if (component && component.TemplateQueryComponent) { + return component.TemplateQueryComponent; } else { - return component.TemplateQueryCtrl; + return DefaultTemplateQueryCtrl; } } diff --git a/public/app/plugins/datasource/stackdriver/metricTypes.tsx b/public/app/plugins/datasource/stackdriver/components/MetricTypeSelector.tsx similarity index 77% rename from public/app/plugins/datasource/stackdriver/metricTypes.tsx rename to public/app/plugins/datasource/stackdriver/components/MetricTypeSelector.tsx index d4e82dbc380..cf25a100747 100644 --- a/public/app/plugins/datasource/stackdriver/metricTypes.tsx +++ b/public/app/plugins/datasource/stackdriver/components/MetricTypeSelector.tsx @@ -1,13 +1,13 @@ import React, { SFC } from 'react'; interface Props { - onMetricTypeChanged: any; + onMetricTypeChange: any; selectedService: string; metricDescriptors: any[]; } -const MetricTypes: SFC = props => { - const extractMetricTypes = () => { +const MetricTypeSelector: SFC = props => { + const filterMetricTypes = () => { if (!props.selectedService) { return []; } @@ -22,8 +22,8 @@ const MetricTypes: SFC = props => {
    Metric Types
    - + {filterMetricTypes().map((qt, i) => ( @@ -34,4 +34,4 @@ const MetricTypes: SFC = props => { ); }; -export default MetricTypes; +export default MetricTypeSelector; diff --git a/public/app/plugins/datasource/stackdriver/services.tsx b/public/app/plugins/datasource/stackdriver/components/ServiceSelector.tsx similarity index 90% rename from public/app/plugins/datasource/stackdriver/services.tsx rename to public/app/plugins/datasource/stackdriver/components/ServiceSelector.tsx index e8da82933d2..44cf6122ebf 100644 --- a/public/app/plugins/datasource/stackdriver/services.tsx +++ b/public/app/plugins/datasource/stackdriver/components/ServiceSelector.tsx @@ -6,7 +6,7 @@ interface Props { metricDescriptors: any[]; } -const Services: SFC = props => { +const ServiceSelector: SFC = props => { const extractServices = () => uniqBy(props.metricDescriptors, 'service').map(m => ({ value: m.service, @@ -29,4 +29,4 @@ const Services: SFC = props => { ); }; -export default Services; +export default ServiceSelector; diff --git a/public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx similarity index 69% rename from public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx rename to public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx index 20a2cf28077..a0ca1ad422e 100644 --- a/public/app/plugins/datasource/stackdriver/templateQueryCtrl.tsx +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx @@ -1,15 +1,15 @@ import React, { PureComponent } from 'react'; -import StackdriverDatasource from './datasource'; -import Services from './services'; -import MetricTypes from './metricTypes'; +import StackdriverDatasource from '../datasource'; +import ServiceSelector from './ServiceSelector'; +import MetricTypeSelector from './MetricTypeSelector'; interface Props { datasource: StackdriverDatasource; - query: string; + query: any; onChange: (c: string) => void; } -export class StackdriverTemplateQueryCtrl extends PureComponent { +export class StackdriverTemplateQueryComponent extends PureComponent { queryTypes: Array<{ value: string; name: string }> = [ { value: 'services', name: 'Services' }, { value: 'metricTypes', name: 'Metric Types' }, @@ -18,9 +18,9 @@ export class StackdriverTemplateQueryCtrl extends PureComponent { constructor(props) { super(props); - this.handleChange = this.handleChange.bind(this); + this.handleQueryTypeChange = this.handleQueryTypeChange.bind(this); this.onServiceChange = this.onServiceChange.bind(this); - this.onMetricTypeChanged = this.onMetricTypeChanged.bind(this); + this.onMetricTypeChange = this.onMetricTypeChange.bind(this); this.state = { queryType: undefined, metricDescriptors: [], service: undefined, metricType: undefined }; } @@ -29,7 +29,7 @@ export class StackdriverTemplateQueryCtrl extends PureComponent { this.setState({ metricDescriptors }); } - handleChange(event) { + handleQueryTypeChange(event) { this.setState({ queryType: event.target.value }); } @@ -37,22 +37,24 @@ export class StackdriverTemplateQueryCtrl extends PureComponent { this.setState({ service: event.target.value }); } - onMetricTypeChanged(event) { + onMetricTypeChange(event) { this.setState({ metricType: event.target.value }); } renderSwitch(queryType) { switch (queryType) { case 'metricTypes': - return ; + return ( + + ); case 'metricLabels': return ( - - + ); @@ -67,7 +69,7 @@ export class StackdriverTemplateQueryCtrl extends PureComponent {
    Query Type
    - {this.queryTypes.map((qt, i) => (
    +
    \ No newline at end of file From f0cba0b0d88fbfe3445105f764b4ca926b29fc00 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Fri, 26 Oct 2018 11:10:54 +0200 Subject: [PATCH 011/129] stackdriver: rename default component --- public/app/features/plugins/TemplateQueryComponentLoader.tsx | 4 ++-- ...emplateQueryCtrl.tsx => DefaultTemplateQueryComponent.tsx} | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) rename public/app/features/templating/{defaultTemplateQueryCtrl.tsx => DefaultTemplateQueryComponent.tsx} (90%) diff --git a/public/app/features/plugins/TemplateQueryComponentLoader.tsx b/public/app/features/plugins/TemplateQueryComponentLoader.tsx index a2b3f8cbaa9..bc2ff323ae6 100644 --- a/public/app/features/plugins/TemplateQueryComponentLoader.tsx +++ b/public/app/features/plugins/TemplateQueryComponentLoader.tsx @@ -2,14 +2,14 @@ import coreModule from 'app/core/core_module'; import { importPluginModule } from './plugin_loader'; import React from 'react'; import ReactDOM from 'react-dom'; -import DefaultTemplateQueryCtrl from '../templating/defaultTemplateQueryCtrl'; +import DefaultTemplateQueryComponent from '../templating/DefaultTemplateQueryComponent'; async function loadComponent(module) { const component = await importPluginModule(module); if (component && component.TemplateQueryComponent) { return component.TemplateQueryComponent; } else { - return DefaultTemplateQueryCtrl; + return DefaultTemplateQueryComponent; } } diff --git a/public/app/features/templating/defaultTemplateQueryCtrl.tsx b/public/app/features/templating/DefaultTemplateQueryComponent.tsx similarity index 90% rename from public/app/features/templating/defaultTemplateQueryCtrl.tsx rename to public/app/features/templating/DefaultTemplateQueryComponent.tsx index 85f0ac7ee7d..88e2b82c7e7 100644 --- a/public/app/features/templating/defaultTemplateQueryCtrl.tsx +++ b/public/app/features/templating/DefaultTemplateQueryComponent.tsx @@ -5,7 +5,7 @@ interface Props { onChange: (c: string) => void; } -export default class DefaultTemplateQueryCtrl extends PureComponent { +export default class DefaultTemplateQueryComponent extends PureComponent { constructor(props) { super(props); this.state = { value: props.query }; From 7ccce76b80389798f4a9a11f34bb1fbcef8d7b0c Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Fri, 26 Oct 2018 14:03:05 +0200 Subject: [PATCH 012/129] stackdriver: return values for services and metric types --- .../DefaultTemplateQueryComponent.tsx | 8 ++--- public/app/features/templating/editor_ctrl.ts | 1 + .../stackdriver/StackdriverMetricFindQuery.ts | 36 +++++++++++++++++++ .../components/MetricTypeSelector.tsx | 3 +- .../components/ServiceSelector.tsx | 7 ++-- .../components/TemplateQueryComponent.tsx | 26 +++++++------- .../datasource/stackdriver/datasource.ts | 33 ++++++++++------- .../datasource/stackdriver/functions.ts | 6 ++++ public/app/types/plugins.ts | 7 ++++ 9 files changed, 92 insertions(+), 35 deletions(-) create mode 100644 public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts create mode 100644 public/app/plugins/datasource/stackdriver/functions.ts diff --git a/public/app/features/templating/DefaultTemplateQueryComponent.tsx b/public/app/features/templating/DefaultTemplateQueryComponent.tsx index 88e2b82c7e7..cd4c5adf157 100644 --- a/public/app/features/templating/DefaultTemplateQueryComponent.tsx +++ b/public/app/features/templating/DefaultTemplateQueryComponent.tsx @@ -1,11 +1,7 @@ import React, { PureComponent } from 'react'; +import { TemplateQueryProps } from 'app/types/plugins'; -interface Props { - query: string; - onChange: (c: string) => void; -} - -export default class DefaultTemplateQueryComponent extends PureComponent { +export default class DefaultTemplateQueryComponent extends PureComponent { constructor(props) { super(props); this.state = { value: props.query }; diff --git a/public/app/features/templating/editor_ctrl.ts b/public/app/features/templating/editor_ctrl.ts index 6bdd71620b3..aef5f5ee502 100644 --- a/public/app/features/templating/editor_ctrl.ts +++ b/public/app/features/templating/editor_ctrl.ts @@ -72,6 +72,7 @@ export class VariableEditorCtrl { if ( $scope.current.type === 'query' && + _.isString($scope.current.query) && $scope.current.query.match(new RegExp('\\$' + $scope.current.name + '(/| |$)')) ) { appEvents.emit('alert-warning', [ diff --git a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts new file mode 100644 index 00000000000..abe88131cc7 --- /dev/null +++ b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts @@ -0,0 +1,36 @@ +import { extractServicesFromMetricDescriptors, getMetricTypesByService } from './functions'; + +export default class StackdriverMetricFindQuery { + constructor(private datasource) {} + + async query(query: any) { + switch (query.type) { + case 'services': + return this.handleServiceQueryType(); + case 'metricTypes': + return this.handleMetricTypesQueryType(query); + default: + return []; + } + } + + async handleServiceQueryType() { + const metricDescriptors = await this.datasource.getMetricTypes(this.datasource.projectName); + const services = extractServicesFromMetricDescriptors(metricDescriptors); + return services.map(s => ({ + text: s.name, + expandable: true, + })); + } + + async handleMetricTypesQueryType({ service }) { + if (!service) { + return []; + } + const metricDescriptors = await this.datasource.getMetricTypes(this.datasource.projectName); + return getMetricTypesByService(metricDescriptors, service).map(s => ({ + text: s.name, + expandable: true, + })); + } +} diff --git a/public/app/plugins/datasource/stackdriver/components/MetricTypeSelector.tsx b/public/app/plugins/datasource/stackdriver/components/MetricTypeSelector.tsx index cf25a100747..9aa3f9de6cb 100644 --- a/public/app/plugins/datasource/stackdriver/components/MetricTypeSelector.tsx +++ b/public/app/plugins/datasource/stackdriver/components/MetricTypeSelector.tsx @@ -1,4 +1,5 @@ import React, { SFC } from 'react'; +import { getMetricTypesByService } from '../functions'; interface Props { onMetricTypeChange: any; @@ -12,7 +13,7 @@ const MetricTypeSelector: SFC = props => { return []; } - return props.metricDescriptors.filter(m => m.service === props.selectedService).map(m => ({ + return getMetricTypesByService(props.metricDescriptors, props.selectedService).map(m => ({ value: m.service, name: m.displayName, })); diff --git a/public/app/plugins/datasource/stackdriver/components/ServiceSelector.tsx b/public/app/plugins/datasource/stackdriver/components/ServiceSelector.tsx index 44cf6122ebf..6bb29a46a6a 100644 --- a/public/app/plugins/datasource/stackdriver/components/ServiceSelector.tsx +++ b/public/app/plugins/datasource/stackdriver/components/ServiceSelector.tsx @@ -1,5 +1,5 @@ import React, { SFC } from 'react'; -import uniqBy from 'lodash/uniqBy'; +import { extractServicesFromMetricDescriptors } from '../functions'; interface Props { onServiceChange: any; @@ -7,11 +7,12 @@ interface Props { } const ServiceSelector: SFC = props => { - const extractServices = () => - uniqBy(props.metricDescriptors, 'service').map(m => ({ + const extractServices = () => { + return extractServicesFromMetricDescriptors(props.metricDescriptors).map(m => ({ value: m.service, name: m.serviceShortName, })); + }; return (
    diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx index a0ca1ad422e..95cd9cd6c64 100644 --- a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx @@ -1,27 +1,24 @@ import React, { PureComponent } from 'react'; -import StackdriverDatasource from '../datasource'; +// import StackdriverDatasource from '../datasource'; import ServiceSelector from './ServiceSelector'; import MetricTypeSelector from './MetricTypeSelector'; +import { TemplateQueryProps } from 'app/types/plugins'; +import defaultsDeep from 'lodash/defaultsDeep'; -interface Props { - datasource: StackdriverDatasource; - query: any; - onChange: (c: string) => void; -} - -export class StackdriverTemplateQueryComponent extends PureComponent { +export class StackdriverTemplateQueryComponent extends PureComponent { queryTypes: Array<{ value: string; name: string }> = [ { value: 'services', name: 'Services' }, { value: 'metricTypes', name: 'Metric Types' }, { value: 'metricLabels', name: 'Metric labels For Metric Type' }, ]; + defaults = { type: undefined, metricDescriptors: [], service: undefined, metricType: undefined }; - constructor(props) { + constructor(props: TemplateQueryProps) { super(props); this.handleQueryTypeChange = this.handleQueryTypeChange.bind(this); this.onServiceChange = this.onServiceChange.bind(this); this.onMetricTypeChange = this.onMetricTypeChange.bind(this); - this.state = { queryType: undefined, metricDescriptors: [], service: undefined, metricType: undefined }; + this.state = defaultsDeep(this.props.query, this.defaults); } async componentDidMount() { @@ -30,7 +27,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent } handleQueryTypeChange(event) { - this.setState({ queryType: event.target.value }); + this.setState({ type: event.target.value }); } onServiceChange(event) { @@ -41,6 +38,11 @@ export class StackdriverTemplateQueryComponent extends PureComponent this.setState({ metricType: event.target.value }); } + componentDidUpdate() { + const { metricDescriptors, ...queryModel } = this.state; + this.props.onChange(queryModel); + } + renderSwitch(queryType) { switch (queryType) { case 'metricTypes': @@ -78,7 +80,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent
    - {this.renderSwitch(this.state.queryType)} + {this.renderSwitch(this.state.type)} ); } diff --git a/public/app/plugins/datasource/stackdriver/datasource.ts b/public/app/plugins/datasource/stackdriver/datasource.ts index 034333cbb86..d04e571b616 100644 --- a/public/app/plugins/datasource/stackdriver/datasource.ts +++ b/public/app/plugins/datasource/stackdriver/datasource.ts @@ -1,6 +1,7 @@ import { stackdriverUnitMappings } from './constants'; import appEvents from 'app/core/app_events'; import _ from 'lodash'; +import StackdriverMetricFindQuery from './StackdriverMetricFindQuery'; export default class StackdriverDatasource { id: number; @@ -9,6 +10,7 @@ export default class StackdriverDatasource { projectName: string; authenticationType: string; queryPromise: Promise; + metricTypes: any[]; /** @ngInject */ constructor(instanceSettings, private backendSrv, private templateSrv, private timeSrv) { @@ -18,6 +20,7 @@ export default class StackdriverDatasource { this.id = instanceSettings.id; this.projectName = instanceSettings.jsonData.defaultProject || ''; this.authenticationType = instanceSettings.jsonData.authenticationType || 'jwt'; + this.metricTypes = []; } async getTimeSeries(options) { @@ -177,8 +180,10 @@ export default class StackdriverDatasource { return results; } - metricFindQuery(query) { - throw new Error('Template variables support is not yet imlemented'); + async metricFindQuery(query) { + const stackdriverMetricFindQuery = new StackdriverMetricFindQuery(this); + return stackdriverMetricFindQuery.query(query); + // throw new Error('Template variables support is not yet imlemented'); } async testDatasource() { @@ -258,19 +263,21 @@ export default class StackdriverDatasource { async getMetricTypes(projectName: string) { try { - const metricsApiPath = `v3/projects/${projectName}/metricDescriptors`; - const { data } = await this.doRequest(`${this.baseUrl}${metricsApiPath}`); + if (this.metricTypes.length === 0) { + const metricsApiPath = `v3/projects/${projectName}/metricDescriptors`; + const { data } = await this.doRequest(`${this.baseUrl}${metricsApiPath}`); - const metrics = data.metricDescriptors.map(m => { - const [service] = m.type.split('/'); - const [serviceShortName] = service.split('.'); - m.service = service; - m.serviceShortName = serviceShortName; - m.displayName = m.displayName || m.type; - return m; - }); + this.metricTypes = data.metricDescriptors.map(m => { + const [service] = m.type.split('/'); + const [serviceShortName] = service.split('.'); + m.service = service; + m.serviceShortName = serviceShortName; + m.displayName = m.displayName || m.type; + return m; + }); + } - return metrics; + return this.metricTypes; } catch (error) { appEvents.emit('ds-request-error', this.formatStackdriverError(error)); return []; diff --git a/public/app/plugins/datasource/stackdriver/functions.ts b/public/app/plugins/datasource/stackdriver/functions.ts new file mode 100644 index 00000000000..15e84f050e8 --- /dev/null +++ b/public/app/plugins/datasource/stackdriver/functions.ts @@ -0,0 +1,6 @@ +import uniqBy from 'lodash/uniqBy'; + +export const extractServicesFromMetricDescriptors = metricDescriptors => uniqBy(metricDescriptors, 'service'); + +export const getMetricTypesByService = (metricDescriptors, service) => + metricDescriptors.filter(m => m.service === service); diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts index 4d6ad6584c6..eb8ff5dcaf2 100644 --- a/public/app/types/plugins.ts +++ b/public/app/types/plugins.ts @@ -99,3 +99,10 @@ export interface PluginsState { hasFetched: boolean; dashboards: PluginDashboard[]; } + +export interface TemplateQueryProps { + query: any; + onChange: (c: any) => void; + datasource: any; + // datasource: StackdriverDatasource; +} From cbb663015e3602869bf6d79dc682ed642304597b Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Fri, 26 Oct 2018 14:56:55 +0200 Subject: [PATCH 013/129] stackdriver: move response parsing to datasource file --- public/app/plugins/datasource/stackdriver/datasource.ts | 4 +++- .../plugins/datasource/stackdriver/query_filter_ctrl.ts | 8 ++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/public/app/plugins/datasource/stackdriver/datasource.ts b/public/app/plugins/datasource/stackdriver/datasource.ts index d04e571b616..5c6ad9183a8 100644 --- a/public/app/plugins/datasource/stackdriver/datasource.ts +++ b/public/app/plugins/datasource/stackdriver/datasource.ts @@ -70,7 +70,7 @@ export default class StackdriverDatasource { } async getLabels(metricType, refId) { - return await this.getTimeSeries({ + const response = await this.getTimeSeries({ targets: [ { refId: refId, @@ -84,6 +84,8 @@ export default class StackdriverDatasource { ], range: this.timeSrv.timeRange(), }); + + return response.results[refId]; } interpolateGroupBys(groupBys: string[], scopedVars): string[] { diff --git a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts index 4c383e5d09e..5a002ef1165 100644 --- a/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts +++ b/public/app/plugins/datasource/stackdriver/query_filter_ctrl.ts @@ -150,10 +150,10 @@ export class StackdriverFilterCtrl { async getLabels() { this.loadLabelsPromise = new Promise(async resolve => { try { - const data = await this.datasource.getLabels(this.target.metricType, this.target.refId); - this.metricLabels = data.results[this.target.refId].meta.metricLabels; - this.resourceLabels = data.results[this.target.refId].meta.resourceLabels; - this.resourceTypes = data.results[this.target.refId].meta.resourceTypes; + const { meta } = await this.datasource.getLabels(this.target.metricType, this.target.refId); + this.metricLabels = meta.metricLabels; + this.resourceLabels = meta.resourceLabels; + this.resourceTypes = meta.resourceTypes; resolve(); } catch (error) { if (error.data && error.data.message) { From 4ab278dca49b9e940c4e26ec8655c49cc3600eb2 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Fri, 26 Oct 2018 15:57:01 +0200 Subject: [PATCH 014/129] stackdriver: add metric labels query --- .../stackdriver/StackdriverMetricFindQuery.ts | 17 ++++++++ .../components/MetricLabelKeySelector.tsx | 26 ++++++++++++ .../components/MetricTypeSelector.tsx | 2 +- .../components/TemplateQueryComponent.tsx | 40 +++++++++++++++++-- 4 files changed, 80 insertions(+), 5 deletions(-) create mode 100644 public/app/plugins/datasource/stackdriver/components/MetricLabelKeySelector.tsx diff --git a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts index abe88131cc7..1e8d1807f86 100644 --- a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts +++ b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts @@ -1,4 +1,5 @@ import { extractServicesFromMetricDescriptors, getMetricTypesByService } from './functions'; +import has from 'lodash/has'; export default class StackdriverMetricFindQuery { constructor(private datasource) {} @@ -9,6 +10,8 @@ export default class StackdriverMetricFindQuery { return this.handleServiceQueryType(); case 'metricTypes': return this.handleMetricTypesQueryType(query); + case 'metricLabels': + return this.handleMetricLabelsQueryType(query); default: return []; } @@ -33,4 +36,18 @@ export default class StackdriverMetricFindQuery { expandable: true, })); } + + async handleMetricLabelsQueryType({ metricType, metricLabelKey }) { + if (!metricType || !metricLabelKey) { + return []; + } + const refId = 'handleMetricLabelsQueryType'; + const response = await this.datasource.getLabels(metricType, refId); + return has(response, `meta.metricLabels.${metricLabelKey}`) + ? response.meta.metricLabels[metricLabelKey].map(s => ({ + text: s, + expandable: true, + })) + : []; + } } diff --git a/public/app/plugins/datasource/stackdriver/components/MetricLabelKeySelector.tsx b/public/app/plugins/datasource/stackdriver/components/MetricLabelKeySelector.tsx new file mode 100644 index 00000000000..72d1e10e330 --- /dev/null +++ b/public/app/plugins/datasource/stackdriver/components/MetricLabelKeySelector.tsx @@ -0,0 +1,26 @@ +import React, { SFC } from 'react'; + +interface Props { + onMetricLabelKeyChange: any; + metricLabels: any; + metricLabelKey: string; +} + +const MetricLabelKeySelector: SFC = props => { + return ( +
    + Metric Labels +
    + +
    +
    + ); +}; + +export default MetricLabelKeySelector; diff --git a/public/app/plugins/datasource/stackdriver/components/MetricTypeSelector.tsx b/public/app/plugins/datasource/stackdriver/components/MetricTypeSelector.tsx index 9aa3f9de6cb..530512defcb 100644 --- a/public/app/plugins/datasource/stackdriver/components/MetricTypeSelector.tsx +++ b/public/app/plugins/datasource/stackdriver/components/MetricTypeSelector.tsx @@ -14,7 +14,7 @@ const MetricTypeSelector: SFC = props => { } return getMetricTypesByService(props.metricDescriptors, props.selectedService).map(m => ({ - value: m.service, + value: m.type, name: m.displayName, })); }; diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx index 95cd9cd6c64..a9e1cbc9fc2 100644 --- a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx @@ -1,23 +1,37 @@ import React, { PureComponent } from 'react'; -// import StackdriverDatasource from '../datasource'; import ServiceSelector from './ServiceSelector'; import MetricTypeSelector from './MetricTypeSelector'; +import MetricLabelKeySelector from './MetricLabelKeySelector'; import { TemplateQueryProps } from 'app/types/plugins'; import defaultsDeep from 'lodash/defaultsDeep'; +import has from 'lodash/has'; export class StackdriverTemplateQueryComponent extends PureComponent { queryTypes: Array<{ value: string; name: string }> = [ { value: 'services', name: 'Services' }, { value: 'metricTypes', name: 'Metric Types' }, - { value: 'metricLabels', name: 'Metric labels For Metric Type' }, + { value: 'metricLabels', name: 'Metric Labels' }, + { value: 'resourceLabels', name: 'Resource Labels' }, + { value: 'resourceTypes', name: 'Resource Types' }, + { value: 'aggregations', name: 'Aggregations' }, + { value: 'alignerns', name: 'Aligners' }, + { value: 'alignmentPeriods', name: 'Alignment Periods' }, ]; - defaults = { type: undefined, metricDescriptors: [], service: undefined, metricType: undefined }; + defaults = { + type: undefined, + metricDescriptors: [], + service: undefined, + metricType: undefined, + metricLabels: [], + metricLabelKey: undefined, + }; constructor(props: TemplateQueryProps) { super(props); this.handleQueryTypeChange = this.handleQueryTypeChange.bind(this); this.onServiceChange = this.onServiceChange.bind(this); this.onMetricTypeChange = this.onMetricTypeChange.bind(this); + this.onMetricLabelKeyChange = this.onMetricLabelKeyChange.bind(this); this.state = defaultsDeep(this.props.query, this.defaults); } @@ -26,6 +40,14 @@ export class StackdriverTemplateQueryComponent extends PureComponent + ); default: From 8c3874ee30d849b86bdaa1c3e523dcd222c036b0 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Fri, 26 Oct 2018 16:35:12 +0200 Subject: [PATCH 015/129] stackdriver: return friendly display name --- .../datasource/stackdriver/StackdriverMetricFindQuery.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts index 1e8d1807f86..f314b6b9d31 100644 --- a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts +++ b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts @@ -21,7 +21,8 @@ export default class StackdriverMetricFindQuery { const metricDescriptors = await this.datasource.getMetricTypes(this.datasource.projectName); const services = extractServicesFromMetricDescriptors(metricDescriptors); return services.map(s => ({ - text: s.name, + text: s.serviceShortName, + value: s.name, expandable: true, })); } @@ -32,7 +33,8 @@ export default class StackdriverMetricFindQuery { } const metricDescriptors = await this.datasource.getMetricTypes(this.datasource.projectName); return getMetricTypesByService(metricDescriptors, service).map(s => ({ - text: s.name, + text: s.displayName, + value: s.name, expandable: true, })); } From cb0d563aaef13db9c2b13953cf666ee8bf6d60bb Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Mon, 29 Oct 2018 14:56:55 +0100 Subject: [PATCH 016/129] stackdriver: add support for resource label queries --- .../stackdriver/StackdriverMetricFindQuery.ts | 23 +++++---- ...abelKeySelector.tsx => SimpleDropdown.tsx} | 17 ++++--- .../components/TemplateQueryComponent.tsx | 50 +++++++++++++++---- 3 files changed, 62 insertions(+), 28 deletions(-) rename public/app/plugins/datasource/stackdriver/components/{MetricLabelKeySelector.tsx => SimpleDropdown.tsx} (56%) diff --git a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts index f314b6b9d31..5b7c5fd2bf8 100644 --- a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts +++ b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts @@ -11,7 +11,8 @@ export default class StackdriverMetricFindQuery { case 'metricTypes': return this.handleMetricTypesQueryType(query); case 'metricLabels': - return this.handleMetricLabelsQueryType(query); + case 'resourceLabels': + return this.handleLabelQueryType(query); default: return []; } @@ -39,17 +40,19 @@ export default class StackdriverMetricFindQuery { })); } - async handleMetricLabelsQueryType({ metricType, metricLabelKey }) { - if (!metricType || !metricLabelKey) { + async handleLabelQueryType({ type, metricType, metricLabelKey, resourceLabelKey }) { + if (!metricType) { return []; } - const refId = 'handleMetricLabelsQueryType'; + const key = type === 'metricLabels' ? metricLabelKey : resourceLabelKey; + const refId = 'handleLabelsQueryType'; const response = await this.datasource.getLabels(metricType, refId); - return has(response, `meta.metricLabels.${metricLabelKey}`) - ? response.meta.metricLabels[metricLabelKey].map(s => ({ - text: s, - expandable: true, - })) - : []; + if (!has(response, `meta.${type}.${key}`)) { + return []; + } + return response.meta[type][key].map(s => ({ + text: s, + expandable: true, + })); } } diff --git a/public/app/plugins/datasource/stackdriver/components/MetricLabelKeySelector.tsx b/public/app/plugins/datasource/stackdriver/components/SimpleDropdown.tsx similarity index 56% rename from public/app/plugins/datasource/stackdriver/components/MetricLabelKeySelector.tsx rename to public/app/plugins/datasource/stackdriver/components/SimpleDropdown.tsx index 72d1e10e330..bbd99a79488 100644 --- a/public/app/plugins/datasource/stackdriver/components/MetricLabelKeySelector.tsx +++ b/public/app/plugins/datasource/stackdriver/components/SimpleDropdown.tsx @@ -1,18 +1,19 @@ import React, { SFC } from 'react'; interface Props { - onMetricLabelKeyChange: any; - metricLabels: any; - metricLabelKey: string; + onValueChange: any; + options: any; + value: string; + label: string; } -const MetricLabelKeySelector: SFC = props => { +const SimpleDropdown: SFC = props => { return (
    - Metric Labels + {props.label}
    - + {props.options.map((qt, i) => ( @@ -23,4 +24,4 @@ const MetricLabelKeySelector: SFC = props => { ); }; -export default MetricLabelKeySelector; +export default SimpleDropdown; diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx index a9e1cbc9fc2..c4c7487e029 100644 --- a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; import ServiceSelector from './ServiceSelector'; import MetricTypeSelector from './MetricTypeSelector'; -import MetricLabelKeySelector from './MetricLabelKeySelector'; +import SimpleDropdown from './SimpleDropdown'; import { TemplateQueryProps } from 'app/types/plugins'; import defaultsDeep from 'lodash/defaultsDeep'; import has from 'lodash/has'; @@ -17,13 +17,16 @@ export class StackdriverTemplateQueryComponent extends PureComponent ); case 'metricLabels': + case 'resourceLabels': + const dropdown = + queryType === 'resourceLabels' ? ( + + ) : ( + + ); return ( @@ -85,11 +119,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent - + {dropdown} ); default: From b3edad40a9bf8a4f6880f70e1b0c4bef04ed26fb Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Mon, 29 Oct 2018 15:41:11 +0100 Subject: [PATCH 017/129] stackdriver: add resource types query --- .../stackdriver/StackdriverMetricFindQuery.ts | 34 ++++++++++++- .../components/TemplateQueryComponent.tsx | 51 +++++++++++-------- 2 files changed, 63 insertions(+), 22 deletions(-) diff --git a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts index 5b7c5fd2bf8..83fe2094a82 100644 --- a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts +++ b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts @@ -13,6 +13,8 @@ export default class StackdriverMetricFindQuery { case 'metricLabels': case 'resourceLabels': return this.handleLabelQueryType(query); + case 'resourceTypes': + return this.handleResourceType(query); default: return []; } @@ -40,11 +42,23 @@ export default class StackdriverMetricFindQuery { })); } - async handleLabelQueryType({ type, metricType, metricLabelKey, resourceLabelKey }) { + getLabelKey({ type, metricLabelKey, resourceLabelKey }) { + switch (type) { + case 'metricLabels': + return metricLabelKey; + break; + case 'resourceLabels': + return resourceLabelKey; + default: + return ''; + } + } + + async handleLabelQueryType({ type, metricType, metricLabelKey, resourceLabelKey, resourceTypeKey }) { if (!metricType) { return []; } - const key = type === 'metricLabels' ? metricLabelKey : resourceLabelKey; + const key = this.getLabelKey({ type, metricLabelKey, resourceLabelKey }); const refId = 'handleLabelsQueryType'; const response = await this.datasource.getLabels(metricType, refId); if (!has(response, `meta.${type}.${key}`)) { @@ -55,4 +69,20 @@ export default class StackdriverMetricFindQuery { expandable: true, })); } + + async handleResourceType({ metricType }) { + if (!metricType) { + return []; + } + try { + const refId = 'handleResourceTypeQueryType'; + const response = await this.datasource.getLabels(metricType, refId); + return response.meta.resourceTypes.map(s => ({ + text: s, + expandable: true, + })); + } catch (error) { + return []; + } + } } diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx index c4c7487e029..3d1bef0aa15 100644 --- a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx @@ -44,6 +44,10 @@ export class StackdriverTemplateQueryComponent extends PureComponent + ); + case 'metricLabels': + return ( + + ); + default: + return ''; + } + } + renderSwitch(queryType) { switch (queryType) { case 'metricTypes': @@ -95,22 +120,8 @@ export class StackdriverTemplateQueryComponent extends PureComponent - ) : ( - - ); + case 'resourceTypes': + const dropdown = this.switchMetaType(queryType); return ( From a0b8c4acba8eb9d07cec7fd0630206e90c69d8f7 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Mon, 29 Oct 2018 16:27:53 +0100 Subject: [PATCH 018/129] stackdriver: add aligner query --- .../stackdriver/StackdriverMetricFindQuery.ts | 17 ++++++++++++++++- .../components/TemplateQueryComponent.tsx | 11 +++++++++++ .../plugins/datasource/stackdriver/functions.ts | 9 +++++++++ .../stackdriver/query_aggregation_ctrl.ts | 9 ++------- 4 files changed, 38 insertions(+), 8 deletions(-) diff --git a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts index 83fe2094a82..7568c853848 100644 --- a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts +++ b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts @@ -1,4 +1,8 @@ -import { extractServicesFromMetricDescriptors, getMetricTypesByService } from './functions'; +import { + extractServicesFromMetricDescriptors, + getMetricTypesByService, + getAlignmentOptionsByMetric, +} from './functions'; import has from 'lodash/has'; export default class StackdriverMetricFindQuery { @@ -15,6 +19,8 @@ export default class StackdriverMetricFindQuery { return this.handleLabelQueryType(query); case 'resourceTypes': return this.handleResourceType(query); + case 'alignerns': + return this.handleAlignersType(query); default: return []; } @@ -85,4 +91,13 @@ export default class StackdriverMetricFindQuery { return []; } } + + async handleAlignersType({ metricType }) { + if (!metricType) { + return []; + } + const metricDescriptors = await this.datasource.getMetricTypes(this.datasource.projectName); + const { valueType, metricKind } = metricDescriptors.find(m => m.type === metricType); + return getAlignmentOptionsByMetric(valueType, metricKind); + } } diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx index 3d1bef0aa15..d68864d5a34 100644 --- a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx @@ -133,6 +133,17 @@ export class StackdriverTemplateQueryComponent extends PureComponent ); + case 'alignerns': + return ( + + + + + ); default: return ''; } diff --git a/public/app/plugins/datasource/stackdriver/functions.ts b/public/app/plugins/datasource/stackdriver/functions.ts index 15e84f050e8..8b3551d153a 100644 --- a/public/app/plugins/datasource/stackdriver/functions.ts +++ b/public/app/plugins/datasource/stackdriver/functions.ts @@ -1,6 +1,15 @@ +import { alignOptions } from './constants'; import uniqBy from 'lodash/uniqBy'; export const extractServicesFromMetricDescriptors = metricDescriptors => uniqBy(metricDescriptors, 'service'); export const getMetricTypesByService = (metricDescriptors, service) => metricDescriptors.filter(m => m.service === service); + +export const getAlignmentOptionsByMetric = (metricValueType, metricKind) => { + return !metricValueType + ? [] + : alignOptions.filter(i => { + return i.valueTypes.indexOf(metricValueType) !== -1 && i.metricKinds.indexOf(metricKind) !== -1; + }); +}; diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts index 6cd6c805463..1340aa7f690 100644 --- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts +++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts @@ -1,6 +1,7 @@ import coreModule from 'app/core/core_module'; import _ from 'lodash'; import * as options from './constants'; +import { getAlignmentOptionsByMetric } from './functions'; import kbn from 'app/core/utils/kbn'; export class StackdriverAggregation { @@ -41,13 +42,7 @@ export class StackdriverAggregationCtrl { } setAlignOptions() { - this.alignOptions = !this.target.valueType - ? [] - : options.alignOptions.filter(i => { - return ( - i.valueTypes.indexOf(this.target.valueType) !== -1 && i.metricKinds.indexOf(this.target.metricKind) !== -1 - ); - }); + this.alignOptions = getAlignmentOptionsByMetric(this.target.valueType, this.target.metricKind); if (!this.alignOptions.find(o => o.value === this.target.aggregation.perSeriesAligner)) { this.target.aggregation.perSeriesAligner = this.alignOptions.length > 0 ? this.alignOptions[0].value : ''; } From b1db07789b6f6c303e7983ab0177267abc8d31ac Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Mon, 29 Oct 2018 16:40:59 +0100 Subject: [PATCH 019/129] stackdriver: add alignment periods --- .../stackdriver/StackdriverMetricFindQuery.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts index 7568c853848..7105f4c805a 100644 --- a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts +++ b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts @@ -3,6 +3,7 @@ import { getMetricTypesByService, getAlignmentOptionsByMetric, } from './functions'; +import { alignmentPeriods } from './constants'; import has from 'lodash/has'; export default class StackdriverMetricFindQuery { @@ -21,6 +22,8 @@ export default class StackdriverMetricFindQuery { return this.handleResourceType(query); case 'alignerns': return this.handleAlignersType(query); + case 'alignmentPeriods': + return this.handleAlignmentPeriodType(); default: return []; } @@ -98,6 +101,16 @@ export default class StackdriverMetricFindQuery { } const metricDescriptors = await this.datasource.getMetricTypes(this.datasource.projectName); const { valueType, metricKind } = metricDescriptors.find(m => m.type === metricType); - return getAlignmentOptionsByMetric(valueType, metricKind); + return getAlignmentOptionsByMetric(valueType, metricKind).map(o => ({ + ...o, + expandable: true, + })); + } + + handleAlignmentPeriodType() { + return alignmentPeriods.map(s => ({ + ...s, + expandable: true, + })); } } From ca77cdc37e1c59c778e27924ae13bd2ca8a8b8a6 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Mon, 29 Oct 2018 16:57:07 +0100 Subject: [PATCH 020/129] stackdriver: add aggregation query --- .../stackdriver/StackdriverMetricFindQuery.ts | 15 +++++++++++++++ .../components/TemplateQueryComponent.tsx | 1 + .../plugins/datasource/stackdriver/functions.ts | 10 +++++++++- .../stackdriver/query_aggregation_ctrl.ts | 10 ++-------- 4 files changed, 27 insertions(+), 9 deletions(-) diff --git a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts index 7105f4c805a..a4865bf7074 100644 --- a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts +++ b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts @@ -2,6 +2,7 @@ import { extractServicesFromMetricDescriptors, getMetricTypesByService, getAlignmentOptionsByMetric, + getAggregationOptionsByMetric, } from './functions'; import { alignmentPeriods } from './constants'; import has from 'lodash/has'; @@ -24,6 +25,8 @@ export default class StackdriverMetricFindQuery { return this.handleAlignersType(query); case 'alignmentPeriods': return this.handleAlignmentPeriodType(); + case 'aggregations': + return this.handleAggregationType(query); default: return []; } @@ -107,6 +110,18 @@ export default class StackdriverMetricFindQuery { })); } + async handleAggregationType({ metricType }) { + if (!metricType) { + return []; + } + const metricDescriptors = await this.datasource.getMetricTypes(this.datasource.projectName); + const { valueType, metricKind } = metricDescriptors.find(m => m.type === metricType); + return getAggregationOptionsByMetric(valueType, metricKind).map(o => ({ + ...o, + expandable: true, + })); + } + handleAlignmentPeriodType() { return alignmentPeriods.map(s => ({ ...s, diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx index d68864d5a34..651e4ea633f 100644 --- a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx @@ -134,6 +134,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent ); case 'alignerns': + case 'aggregations': return ( diff --git a/public/app/plugins/datasource/stackdriver/functions.ts b/public/app/plugins/datasource/stackdriver/functions.ts index 8b3551d153a..f7891203dad 100644 --- a/public/app/plugins/datasource/stackdriver/functions.ts +++ b/public/app/plugins/datasource/stackdriver/functions.ts @@ -1,4 +1,4 @@ -import { alignOptions } from './constants'; +import { alignOptions, aggOptions } from './constants'; import uniqBy from 'lodash/uniqBy'; export const extractServicesFromMetricDescriptors = metricDescriptors => uniqBy(metricDescriptors, 'service'); @@ -13,3 +13,11 @@ export const getAlignmentOptionsByMetric = (metricValueType, metricKind) => { return i.valueTypes.indexOf(metricValueType) !== -1 && i.metricKinds.indexOf(metricKind) !== -1; }); }; + +export const getAggregationOptionsByMetric = (valueType, metricKind) => { + return !metricKind + ? [] + : aggOptions.filter(i => { + return i.valueTypes.indexOf(valueType) !== -1 && i.metricKinds.indexOf(metricKind) !== -1; + }); +}; diff --git a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts index 1340aa7f690..512035103f5 100644 --- a/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts +++ b/public/app/plugins/datasource/stackdriver/query_aggregation_ctrl.ts @@ -1,7 +1,7 @@ import coreModule from 'app/core/core_module'; import _ from 'lodash'; import * as options from './constants'; -import { getAlignmentOptionsByMetric } from './functions'; +import { getAlignmentOptionsByMetric, getAggregationOptionsByMetric } from './functions'; import kbn from 'app/core/utils/kbn'; export class StackdriverAggregation { @@ -49,13 +49,7 @@ export class StackdriverAggregationCtrl { } setAggOptions() { - this.aggOptions = !this.target.metricKind - ? [] - : options.aggOptions.filter(i => { - return ( - i.valueTypes.indexOf(this.target.valueType) !== -1 && i.metricKinds.indexOf(this.target.metricKind) !== -1 - ); - }); + this.aggOptions = getAggregationOptionsByMetric(this.target.valueType, this.target.metricKind); if (!this.aggOptions.find(o => o.value === this.target.aggregation.crossSeriesReducer)) { this.deselectAggregationOption('REDUCE_NONE'); From f0b4af9f6c5e1d2170034f2cbca1c2d3b427bc8b Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Mon, 29 Oct 2018 17:38:43 +0100 Subject: [PATCH 021/129] stackdriver: use enum for query type --- .../stackdriver/StackdriverMetricFindQuery.ts | 101 ++++++++---------- .../components/TemplateQueryComponent.tsx | 35 +++--- .../plugins/datasource/stackdriver/types.ts | 10 ++ 3 files changed, 74 insertions(+), 72 deletions(-) create mode 100644 public/app/plugins/datasource/stackdriver/types.ts diff --git a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts index a4865bf7074..130e9e0c78b 100644 --- a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts +++ b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts @@ -6,33 +6,35 @@ import { } from './functions'; import { alignmentPeriods } from './constants'; import has from 'lodash/has'; +import isString from 'lodash/isString'; +import { MetricFindQueryTypes } from './types'; export default class StackdriverMetricFindQuery { constructor(private datasource) {} async query(query: any) { switch (query.type) { - case 'services': - return this.handleServiceQueryType(); - case 'metricTypes': - return this.handleMetricTypesQueryType(query); - case 'metricLabels': - case 'resourceLabels': - return this.handleLabelQueryType(query); - case 'resourceTypes': - return this.handleResourceType(query); - case 'alignerns': - return this.handleAlignersType(query); - case 'alignmentPeriods': - return this.handleAlignmentPeriodType(); - case 'aggregations': - return this.handleAggregationType(query); + case MetricFindQueryTypes.Services: + return this.handleServiceQuery(); + case MetricFindQueryTypes.MetricTypes: + return this.handleMetricTypesQuery(query); + case MetricFindQueryTypes.MetricLabels: + case MetricFindQueryTypes.ResourceLabels: + return this.handleLabelQuery(query); + case MetricFindQueryTypes.ResourceTypes: + return this.handleResourceTypeQuery(query); + case MetricFindQueryTypes.Alignerns: + return this.handleAlignersQuery(query); + case MetricFindQueryTypes.AlignmentPeriods: + return this.handleAlignmentPeriodQuery(); + case MetricFindQueryTypes.Aggregations: + return this.handleAggregationQuery(query); default: return []; } } - async handleServiceQueryType() { + async handleServiceQuery() { const metricDescriptors = await this.datasource.getMetricTypes(this.datasource.projectName); const services = extractServicesFromMetricDescriptors(metricDescriptors); return services.map(s => ({ @@ -42,7 +44,7 @@ export default class StackdriverMetricFindQuery { })); } - async handleMetricTypesQueryType({ service }) { + async handleMetricTypesQuery({ service }) { if (!service) { return []; } @@ -54,19 +56,7 @@ export default class StackdriverMetricFindQuery { })); } - getLabelKey({ type, metricLabelKey, resourceLabelKey }) { - switch (type) { - case 'metricLabels': - return metricLabelKey; - break; - case 'resourceLabels': - return resourceLabelKey; - default: - return ''; - } - } - - async handleLabelQueryType({ type, metricType, metricLabelKey, resourceLabelKey, resourceTypeKey }) { + async handleLabelQuery({ type, metricType, metricLabelKey, resourceLabelKey, resourceTypeKey }) { if (!metricType) { return []; } @@ -76,56 +66,57 @@ export default class StackdriverMetricFindQuery { if (!has(response, `meta.${type}.${key}`)) { return []; } - return response.meta[type][key].map(s => ({ - text: s, - expandable: true, - })); + return response.meta[type][key].map(this.toFindQueryResult); } - async handleResourceType({ metricType }) { + async handleResourceTypeQuery({ metricType }) { if (!metricType) { return []; } try { - const refId = 'handleResourceTypeQueryType'; + const refId = 'handleResourceTypeQueryQueryType'; const response = await this.datasource.getLabels(metricType, refId); - return response.meta.resourceTypes.map(s => ({ - text: s, - expandable: true, - })); + return response.meta.resourceTypes.map(this.toFindQueryResult); } catch (error) { return []; } } - async handleAlignersType({ metricType }) { + async handleAlignersQuery({ metricType }) { if (!metricType) { return []; } const metricDescriptors = await this.datasource.getMetricTypes(this.datasource.projectName); const { valueType, metricKind } = metricDescriptors.find(m => m.type === metricType); - return getAlignmentOptionsByMetric(valueType, metricKind).map(o => ({ - ...o, - expandable: true, - })); + return getAlignmentOptionsByMetric(valueType, metricKind).map(this.toFindQueryResult); } - async handleAggregationType({ metricType }) { + async handleAggregationQuery({ metricType }) { if (!metricType) { return []; } const metricDescriptors = await this.datasource.getMetricTypes(this.datasource.projectName); const { valueType, metricKind } = metricDescriptors.find(m => m.type === metricType); - return getAggregationOptionsByMetric(valueType, metricKind).map(o => ({ - ...o, - expandable: true, - })); + return getAggregationOptionsByMetric(valueType, metricKind).map(this.toFindQueryResult); } - handleAlignmentPeriodType() { - return alignmentPeriods.map(s => ({ - ...s, - expandable: true, - })); + handleAlignmentPeriodQuery() { + return alignmentPeriods.map(this.toFindQueryResult); + } + + toFindQueryResult(x) { + return isString(x) ? { text: x, expandable: true } : { ...x, expandable: true }; + } + + getLabelKey({ type, metricLabelKey, resourceLabelKey }) { + switch (type) { + case MetricFindQueryTypes.MetricLabels: + return metricLabelKey; + break; + case MetricFindQueryTypes.ResourceLabels: + return resourceLabelKey; + default: + return ''; + } } } diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx index 651e4ea633f..2ddc1b1fae2 100644 --- a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx @@ -5,17 +5,18 @@ import SimpleDropdown from './SimpleDropdown'; import { TemplateQueryProps } from 'app/types/plugins'; import defaultsDeep from 'lodash/defaultsDeep'; import has from 'lodash/has'; +import { MetricFindQueryTypes } from '../types'; export class StackdriverTemplateQueryComponent extends PureComponent { queryTypes: Array<{ value: string; name: string }> = [ - { value: 'services', name: 'Services' }, - { value: 'metricTypes', name: 'Metric Types' }, - { value: 'metricLabels', name: 'Metric Labels' }, - { value: 'resourceLabels', name: 'Resource Labels' }, - { value: 'resourceTypes', name: 'Resource Types' }, - { value: 'aggregations', name: 'Aggregations' }, - { value: 'alignerns', name: 'Aligners' }, - { value: 'alignmentPeriods', name: 'Alignment Periods' }, + { value: MetricFindQueryTypes.Services, name: 'Services' }, + { value: MetricFindQueryTypes.MetricTypes, name: 'Metric Types' }, + { value: MetricFindQueryTypes.MetricLabels, name: 'Metric Labels' }, + { value: MetricFindQueryTypes.ResourceLabels, name: 'Resource Labels' }, + { value: MetricFindQueryTypes.ResourceTypes, name: 'Resource Types' }, + { value: MetricFindQueryTypes.Aggregations, name: 'Aggregations' }, + { value: MetricFindQueryTypes.Alignerns, name: 'Aligners' }, + { value: MetricFindQueryTypes.AlignmentPeriods, name: 'Alignment Periods' }, ]; defaults = { @@ -45,7 +46,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent ); - case 'metricLabels': + case MetricFindQueryTypes.MetricLabels: return ( ); - case 'metricLabels': - case 'resourceLabels': - case 'resourceTypes': + case MetricFindQueryTypes.MetricLabels: + case MetricFindQueryTypes.ResourceLabels: + case MetricFindQueryTypes.ResourceTypes: const dropdown = this.switchMetaType(queryType); return ( @@ -133,8 +134,8 @@ export class StackdriverTemplateQueryComponent extends PureComponent ); - case 'alignerns': - case 'aggregations': + case MetricFindQueryTypes.Alignerns: + case MetricFindQueryTypes.Aggregations: return ( diff --git a/public/app/plugins/datasource/stackdriver/types.ts b/public/app/plugins/datasource/stackdriver/types.ts new file mode 100644 index 00000000000..43605623c78 --- /dev/null +++ b/public/app/plugins/datasource/stackdriver/types.ts @@ -0,0 +1,10 @@ +export enum MetricFindQueryTypes { + Services = 'services', + MetricTypes = 'metricTypes', + MetricLabels = 'metricLabels', + ResourceLabels = 'resourceLabels', + ResourceTypes = 'resourceTypes', + Aggregations = 'aggregations', + Alignerns = 'alignerns', + AlignmentPeriods = 'alignmentPeriods', +} From 727472a3cbeb7c8ff3277c7ed4ffbf8d3c04d201 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Mon, 29 Oct 2018 17:42:15 +0100 Subject: [PATCH 022/129] stackdriver: refactor TemplateQueryComponent --- .../components/TemplateQueryComponent.tsx | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx index 2ddc1b1fae2..4eeb706b538 100644 --- a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx @@ -20,14 +20,14 @@ export class StackdriverTemplateQueryComponent extends PureComponent @@ -151,6 +147,10 @@ export class StackdriverTemplateQueryComponent extends PureComponent @@ -166,7 +166,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent
    - {this.renderSwitch(this.state.type)} + {this.renderQueryTypeSwitch(this.state.type)} ); } From d80025d21559b45b55952350db01537327fae508 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Mon, 29 Oct 2018 17:59:10 +0100 Subject: [PATCH 023/129] stackdriver: streamline label change --- .../components/TemplateQueryComponent.tsx | 24 ++++++++----------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx index 4eeb706b538..429abb4a5a0 100644 --- a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx @@ -35,8 +35,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent ); @@ -100,7 +100,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent ); @@ -147,10 +147,6 @@ export class StackdriverTemplateQueryComponent extends PureComponent From 16c6d79dd6131d6827bdd1584cf7a97423e4272e Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Tue, 30 Oct 2018 09:43:08 +0100 Subject: [PATCH 024/129] stackdriver: use standard naming convention for selects --- ...MetricTypeSelector.tsx => MetricTypePicker.tsx} | 4 ++-- .../{ServiceSelector.tsx => ServicePicker.tsx} | 4 ++-- .../components/TemplateQueryComponent.tsx | 14 +++++++------- 3 files changed, 11 insertions(+), 11 deletions(-) rename public/app/plugins/datasource/stackdriver/components/{MetricTypeSelector.tsx => MetricTypePicker.tsx} (91%) rename public/app/plugins/datasource/stackdriver/components/{ServiceSelector.tsx => ServicePicker.tsx} (91%) diff --git a/public/app/plugins/datasource/stackdriver/components/MetricTypeSelector.tsx b/public/app/plugins/datasource/stackdriver/components/MetricTypePicker.tsx similarity index 91% rename from public/app/plugins/datasource/stackdriver/components/MetricTypeSelector.tsx rename to public/app/plugins/datasource/stackdriver/components/MetricTypePicker.tsx index 530512defcb..6c6917b6d78 100644 --- a/public/app/plugins/datasource/stackdriver/components/MetricTypeSelector.tsx +++ b/public/app/plugins/datasource/stackdriver/components/MetricTypePicker.tsx @@ -7,7 +7,7 @@ interface Props { metricDescriptors: any[]; } -const MetricTypeSelector: SFC = props => { +const MetricTypePicker: SFC = props => { const filterMetricTypes = () => { if (!props.selectedService) { return []; @@ -35,4 +35,4 @@ const MetricTypeSelector: SFC = props => { ); }; -export default MetricTypeSelector; +export default MetricTypePicker; diff --git a/public/app/plugins/datasource/stackdriver/components/ServiceSelector.tsx b/public/app/plugins/datasource/stackdriver/components/ServicePicker.tsx similarity index 91% rename from public/app/plugins/datasource/stackdriver/components/ServiceSelector.tsx rename to public/app/plugins/datasource/stackdriver/components/ServicePicker.tsx index 6bb29a46a6a..ec6c0d9cde8 100644 --- a/public/app/plugins/datasource/stackdriver/components/ServiceSelector.tsx +++ b/public/app/plugins/datasource/stackdriver/components/ServicePicker.tsx @@ -6,7 +6,7 @@ interface Props { metricDescriptors: any[]; } -const ServiceSelector: SFC = props => { +const ServicePicker: SFC = props => { const extractServices = () => { return extractServicesFromMetricDescriptors(props.metricDescriptors).map(m => ({ value: m.service, @@ -30,4 +30,4 @@ const ServiceSelector: SFC = props => { ); }; -export default ServiceSelector; +export default ServicePicker; diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx index 429abb4a5a0..ed03de9dbac 100644 --- a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react'; -import ServiceSelector from './ServiceSelector'; -import MetricTypeSelector from './MetricTypeSelector'; +import ServicePicker from './ServicePicker'; +import MetricTypePicker from './MetricTypePicker'; import SimpleDropdown from './SimpleDropdown'; import { TemplateQueryProps } from 'app/types/plugins'; import defaultsDeep from 'lodash/defaultsDeep'; @@ -113,7 +113,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent + ); case MetricFindQueryTypes.MetricLabels: case MetricFindQueryTypes.ResourceLabels: @@ -121,8 +121,8 @@ export class StackdriverTemplateQueryComponent extends PureComponent - - + - - + Date: Tue, 30 Oct 2018 14:48:07 +0100 Subject: [PATCH 025/129] stackdriver: improve default state handling --- .../components/MetricTypePicker.tsx | 3 +- .../stackdriver/components/ServicePicker.tsx | 9 ++- .../stackdriver/components/SimpleDropdown.tsx | 2 +- .../components/TemplateQueryComponent.tsx | 55 ++++++++++++++----- 4 files changed, 52 insertions(+), 17 deletions(-) diff --git a/public/app/plugins/datasource/stackdriver/components/MetricTypePicker.tsx b/public/app/plugins/datasource/stackdriver/components/MetricTypePicker.tsx index 6c6917b6d78..f5a566a1e6e 100644 --- a/public/app/plugins/datasource/stackdriver/components/MetricTypePicker.tsx +++ b/public/app/plugins/datasource/stackdriver/components/MetricTypePicker.tsx @@ -4,6 +4,7 @@ import { getMetricTypesByService } from '../functions'; interface Props { onMetricTypeChange: any; selectedService: string; + selectedMetricType: string; metricDescriptors: any[]; } @@ -23,7 +24,7 @@ const MetricTypePicker: SFC = props => {
    Metric Types
    - {filterMetricTypes().map((qt, i) => (
    diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx index 8c8c89f9197..7b59d50a0fb 100644 --- a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx @@ -96,7 +96,8 @@ export class StackdriverTemplateQueryComponent extends PureComponent q.value === this.state.selectedQueryType); + this.props.onChange(queryModel, `Stackdriver - ${queryName.name}`); } isLabelQuery(queryType) { diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts index eb8ff5dcaf2..f365e254736 100644 --- a/public/app/types/plugins.ts +++ b/public/app/types/plugins.ts @@ -102,7 +102,7 @@ export interface PluginsState { export interface TemplateQueryProps { query: any; - onChange: (c: any) => void; + onChange: (c: any, definition: string) => void; datasource: any; - // datasource: StackdriverDatasource; + definition: string; } From 2d14bd10f337e25e84e9d7535f740202557500fd Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Thu, 8 Nov 2018 15:00:25 +0100 Subject: [PATCH 050/129] stackdriver: add default value for query type --- .../stackdriver/components/TemplateQueryComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx index 7b59d50a0fb..cbac49867cb 100644 --- a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx @@ -18,7 +18,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent Date: Thu, 8 Nov 2018 15:01:22 +0100 Subject: [PATCH 051/129] stackdriver: persist template variable definition --- public/app/features/templating/query_variable.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/public/app/features/templating/query_variable.ts b/public/app/features/templating/query_variable.ts index d3f39023cfb..5e6bdc264ed 100644 --- a/public/app/features/templating/query_variable.ts +++ b/public/app/features/templating/query_variable.ts @@ -44,6 +44,7 @@ export class QueryVariable implements Variable { tagsQuery: '', tagValuesQuery: '', skipUrlSync: false, + definition: '', }; /** @ngInject */ From f168dd5d3455e5102c9c7a07af3c4ba2b41338e9 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Thu, 8 Nov 2018 15:02:05 +0100 Subject: [PATCH 052/129] stackdriver: remove not used prop --- public/app/types/plugins.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts index f365e254736..80fd4f7c522 100644 --- a/public/app/types/plugins.ts +++ b/public/app/types/plugins.ts @@ -104,5 +104,4 @@ export interface TemplateQueryProps { query: any; onChange: (c: any, definition: string) => void; datasource: any; - definition: string; } From 24cb44e029e6ee0a000437b27530037f19550f9e Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Thu, 8 Nov 2018 15:15:34 +0100 Subject: [PATCH 053/129] stackdriver: rename params --- public/app/types/plugins.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts index 80fd4f7c522..c70dfc07d8f 100644 --- a/public/app/types/plugins.ts +++ b/public/app/types/plugins.ts @@ -102,6 +102,6 @@ export interface PluginsState { export interface TemplateQueryProps { query: any; - onChange: (c: any, definition: string) => void; + onChange: (query: any, definition: string) => void; datasource: any; } From 8333bf0b76834b2a43c92dcc6e70e1071ae726cc Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Thu, 8 Nov 2018 15:16:11 +0100 Subject: [PATCH 054/129] stackdriver: add simple render test --- .../TemplateQueryComponent.test.tsx | 17 +++++ .../TemplateQueryComponent.test.tsx.snap | 67 +++++++++++++++++++ 2 files changed, 84 insertions(+) create mode 100644 public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.test.tsx create mode 100644 public/app/plugins/datasource/stackdriver/components/__snapshots__/TemplateQueryComponent.test.tsx.snap diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.test.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.test.tsx new file mode 100644 index 00000000000..acbff44bd4a --- /dev/null +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.test.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import { StackdriverTemplateQueryComponent } from './TemplateQueryComponent'; +import { TemplateQueryProps } from 'app/types/plugins'; + +describe('StackdriverTemplateQueryComponent', () => { + const props: TemplateQueryProps = { + onChange: (query, definition) => {}, + query: '', + datasource: {}, + }; + + it('renders correctly', () => { + const tree = renderer.create().toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/public/app/plugins/datasource/stackdriver/components/__snapshots__/TemplateQueryComponent.test.tsx.snap b/public/app/plugins/datasource/stackdriver/components/__snapshots__/TemplateQueryComponent.test.tsx.snap new file mode 100644 index 00000000000..026e8ba09c4 --- /dev/null +++ b/public/app/plugins/datasource/stackdriver/components/__snapshots__/TemplateQueryComponent.test.tsx.snap @@ -0,0 +1,67 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`StackdriverTemplateQueryComponent renders correctly 1`] = ` +Array [ +
    + + Query Types + +
    + +
    +
    , + "", +] +`; From 85ef5c252315634ef9809d24c8e617a3af1f93f6 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Thu, 8 Nov 2018 15:52:00 +0100 Subject: [PATCH 055/129] stackdriver: make sure we don't crash when selected service doesnt have a value --- .../stackdriver/components/TemplateQueryComponent.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx index cbac49867cb..6f6045b03e3 100644 --- a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx @@ -43,9 +43,14 @@ export class StackdriverTemplateQueryComponent extends PureComponent s.value === this.state.selectedService) - ? this.state.selectedService - : services[0].value; + + let selectedService = ''; + if (services.some(s => s.value === this.state.selectedService)) { + selectedService = this.state.selectedService; + } else if (services && services.length > 0) { + selectedService = services[0].value; + } + const { metricTypes, selectedMetricType } = getMetricTypes( metricDescriptors, this.state.selectedMetricType, From 7bdf97d3e61f3e54b8a0f09c3ca0628deeafd239 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Fri, 9 Nov 2018 09:54:11 +0100 Subject: [PATCH 056/129] stackdriver: remove lodash since object assign will do the trick --- .../stackdriver/components/TemplateQueryComponent.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx index 6f6045b03e3..8170521ff87 100644 --- a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx @@ -1,6 +1,5 @@ import React, { PureComponent } from 'react'; import { TemplateQueryProps } from 'app/types/plugins'; -import defaultsDeep from 'lodash/defaultsDeep'; import SimpleSelect from './SimpleSelect'; import { getMetricTypes, extractServicesFromMetricDescriptors } from '../functions'; import { MetricFindQueryTypes, TemplateQueryComponentData } from '../types'; @@ -34,7 +33,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent Date: Fri, 9 Nov 2018 10:20:45 +0100 Subject: [PATCH 057/129] stackdriver: add tests for render snapshop and default query type --- .../TemplateQueryComponent.test.tsx | 27 ++++++++++++++----- 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.test.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.test.tsx index acbff44bd4a..05519c2e17d 100644 --- a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.test.tsx +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.test.tsx @@ -3,15 +3,30 @@ import renderer from 'react-test-renderer'; import { StackdriverTemplateQueryComponent } from './TemplateQueryComponent'; import { TemplateQueryProps } from 'app/types/plugins'; -describe('StackdriverTemplateQueryComponent', () => { - const props: TemplateQueryProps = { - onChange: (query, definition) => {}, - query: '', - datasource: {}, - }; +jest.mock('../functions', () => ({ + getMetricTypes: () => Promise.resolve({ metricTypes: [], selectedMetricType: '' }), + extractServicesFromMetricDescriptors: m => m, +})); +const props: TemplateQueryProps = { + onChange: (query, definition) => {}, + query: '', + datasource: { + getMetricTypes: async p => [], + }, +}; + +describe('StackdriverTemplateQueryComponent', () => { it('renders correctly', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); }); + + it('should use the first query type in the array if no query type was saved before', done => { + props.onChange = (query, definition) => { + expect(definition).toBe('Stackdriver - Services'); + done(); + }; + renderer.create().toJSON(); + }); }); From 209b1c026e1a19df5498d5e820977f2fc7717d22 Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Fri, 9 Nov 2018 10:22:36 +0100 Subject: [PATCH 058/129] stackdriver: update tests --- .../stackdriver/components/TemplateQueryComponent.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.test.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.test.tsx index 05519c2e17d..a31948e9a16 100644 --- a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.test.tsx +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.test.tsx @@ -4,7 +4,7 @@ import { StackdriverTemplateQueryComponent } from './TemplateQueryComponent'; import { TemplateQueryProps } from 'app/types/plugins'; jest.mock('../functions', () => ({ - getMetricTypes: () => Promise.resolve({ metricTypes: [], selectedMetricType: '' }), + getMetricTypes: async () => ({ metricTypes: [], selectedMetricType: '' }), extractServicesFromMetricDescriptors: m => m, })); From 45f49c2e5bec50302ea4715603f698760b94580f Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Fri, 9 Nov 2018 10:29:22 +0100 Subject: [PATCH 059/129] stackdriver: remove services query type --- .../stackdriver/StackdriverMetricFindQuery.ts | 19 +------------------ .../components/TemplateQueryComponent.tsx | 6 +++--- .../datasource/stackdriver/functions.ts | 3 --- 3 files changed, 4 insertions(+), 24 deletions(-) diff --git a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts index dd7fe6a22e3..e3537cc9599 100644 --- a/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts +++ b/public/app/plugins/datasource/stackdriver/StackdriverMetricFindQuery.ts @@ -2,12 +2,7 @@ import has from 'lodash/has'; import isString from 'lodash/isString'; import { alignmentPeriods } from './constants'; import { MetricFindQueryTypes } from './types'; -import { - extractServicesFromMetricDescriptors, - getMetricTypesByService, - getAlignmentOptionsByMetric, - getAggregationOptionsByMetric, -} from './functions'; +import { getMetricTypesByService, getAlignmentOptionsByMetric, getAggregationOptionsByMetric } from './functions'; export default class StackdriverMetricFindQuery { constructor(private datasource) {} @@ -15,8 +10,6 @@ export default class StackdriverMetricFindQuery { async query(query: any) { try { switch (query.selectedQueryType) { - case MetricFindQueryTypes.Services: - return this.handleServiceQuery(); case MetricFindQueryTypes.MetricTypes: return this.handleMetricTypesQuery(query); case MetricFindQueryTypes.MetricLabels: @@ -39,16 +32,6 @@ export default class StackdriverMetricFindQuery { } } - async handleServiceQuery() { - const metricDescriptors = await this.datasource.getMetricTypes(this.datasource.projectName); - const services = extractServicesFromMetricDescriptors(metricDescriptors); - return services.map(s => ({ - text: s.serviceShortName, - value: s.name, - expandable: true, - })); - } - async handleMetricTypesQuery({ selectedService }) { if (!selectedService) { return []; diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx index 8170521ff87..e9784d485dd 100644 --- a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.tsx @@ -1,12 +1,12 @@ import React, { PureComponent } from 'react'; +import uniqBy from 'lodash/uniqBy'; import { TemplateQueryProps } from 'app/types/plugins'; import SimpleSelect from './SimpleSelect'; -import { getMetricTypes, extractServicesFromMetricDescriptors } from '../functions'; +import { getMetricTypes } from '../functions'; import { MetricFindQueryTypes, TemplateQueryComponentData } from '../types'; export class StackdriverTemplateQueryComponent extends PureComponent { queryTypes: Array<{ value: string; name: string }> = [ - { value: MetricFindQueryTypes.Services, name: 'Services' }, { value: MetricFindQueryTypes.MetricTypes, name: 'Metric Types' }, { value: MetricFindQueryTypes.MetricLabels, name: 'Metric Labels' }, { value: MetricFindQueryTypes.ResourceLabels, name: 'Resource Labels' }, @@ -38,7 +38,7 @@ export class StackdriverTemplateQueryComponent extends PureComponent ({ + const services = uniqBy(metricDescriptors, 'service').map(m => ({ value: m.service, name: m.serviceShortName, })); diff --git a/public/app/plugins/datasource/stackdriver/functions.ts b/public/app/plugins/datasource/stackdriver/functions.ts index 30b4a7b84f6..79e8aa30325 100644 --- a/public/app/plugins/datasource/stackdriver/functions.ts +++ b/public/app/plugins/datasource/stackdriver/functions.ts @@ -1,8 +1,5 @@ -import uniqBy from 'lodash/uniqBy'; import { alignOptions, aggOptions } from './constants'; -export const extractServicesFromMetricDescriptors = metricDescriptors => uniqBy(metricDescriptors, 'service'); - export const getMetricTypesByService = (metricDescriptors, service) => metricDescriptors.filter(m => m.service === service); From b262be73e021e604a065e2191fcde2f7abba5dfd Mon Sep 17 00:00:00 2001 From: Erik Sundell Date: Fri, 9 Nov 2018 10:31:41 +0100 Subject: [PATCH 060/129] stackdriver: fix failing tests --- .../TemplateQueryComponent.test.tsx | 3 +-- .../TemplateQueryComponent.test.tsx.snap | 27 ++++++++++++++----- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.test.tsx b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.test.tsx index a31948e9a16..0d9f0e6d5b4 100644 --- a/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.test.tsx +++ b/public/app/plugins/datasource/stackdriver/components/TemplateQueryComponent.test.tsx @@ -5,7 +5,6 @@ import { TemplateQueryProps } from 'app/types/plugins'; jest.mock('../functions', () => ({ getMetricTypes: async () => ({ metricTypes: [], selectedMetricType: '' }), - extractServicesFromMetricDescriptors: m => m, })); const props: TemplateQueryProps = { @@ -24,7 +23,7 @@ describe('StackdriverTemplateQueryComponent', () => { it('should use the first query type in the array if no query type was saved before', done => { props.onChange = (query, definition) => { - expect(definition).toBe('Stackdriver - Services'); + expect(definition).toBe('Stackdriver - Metric Types'); done(); }; renderer.create().toJSON(); diff --git a/public/app/plugins/datasource/stackdriver/components/__snapshots__/TemplateQueryComponent.test.tsx.snap b/public/app/plugins/datasource/stackdriver/components/__snapshots__/TemplateQueryComponent.test.tsx.snap index 026e8ba09c4..c7e4d708383 100644 --- a/public/app/plugins/datasource/stackdriver/components/__snapshots__/TemplateQueryComponent.test.tsx.snap +++ b/public/app/plugins/datasource/stackdriver/components/__snapshots__/TemplateQueryComponent.test.tsx.snap @@ -17,13 +17,8 @@ Array [ className="gf-form-input" onChange={[Function]} required={true} - value="services" + value="metricTypes" > -
    - {{variable.query}} + {{variable.definition ? variable.definition : variable.query}}