editor_ctrl.ts 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. import _ from 'lodash';
  2. import coreModule from 'app/core/core_module';
  3. import { variableTypes } from './variable';
  4. import appEvents from 'app/core/app_events';
  5. export class VariableEditorCtrl {
  6. /** @ngInject */
  7. constructor($scope, datasourceSrv, variableSrv, templateSrv) {
  8. $scope.variableTypes = variableTypes;
  9. $scope.ctrl = {};
  10. $scope.namePattern = /^(?!__).*$/;
  11. $scope._ = _;
  12. $scope.optionsLimit = 20;
  13. $scope.refreshOptions = [
  14. { value: 0, text: 'Never' },
  15. { value: 1, text: 'On Dashboard Load' },
  16. { value: 2, text: 'On Time Range Change' },
  17. ];
  18. $scope.sortOptions = [
  19. { value: 0, text: 'Disabled' },
  20. { value: 1, text: 'Alphabetical (asc)' },
  21. { value: 2, text: 'Alphabetical (desc)' },
  22. { value: 3, text: 'Numerical (asc)' },
  23. { value: 4, text: 'Numerical (desc)' },
  24. { value: 5, text: 'Alphabetical (case-insensitive, asc)' },
  25. { value: 6, text: 'Alphabetical (case-insensitive, desc)' },
  26. ];
  27. $scope.hideOptions = [{ value: 0, text: '' }, { value: 1, text: 'Label' }, { value: 2, text: 'Variable' }];
  28. $scope.init = () => {
  29. $scope.mode = 'list';
  30. $scope.variables = variableSrv.variables;
  31. $scope.reset();
  32. $scope.$watch('mode', val => {
  33. if (val === 'new') {
  34. $scope.reset();
  35. }
  36. });
  37. };
  38. $scope.setMode = mode => {
  39. $scope.mode = mode;
  40. };
  41. $scope.add = () => {
  42. if ($scope.isValid()) {
  43. variableSrv.addVariable($scope.current);
  44. $scope.update();
  45. }
  46. };
  47. $scope.isValid = () => {
  48. if (!$scope.ctrl.form.$valid) {
  49. return false;
  50. }
  51. if (!$scope.current.name.match(/^\w+$/)) {
  52. appEvents.emit('alert-warning', ['Validation', 'Only word and digit characters are allowed in variable names']);
  53. return false;
  54. }
  55. const sameName: any = _.find($scope.variables, { name: $scope.current.name });
  56. if (sameName && sameName !== $scope.current) {
  57. appEvents.emit('alert-warning', ['Validation', 'Variable with the same name already exists']);
  58. return false;
  59. }
  60. if (
  61. $scope.current.type === 'query' &&
  62. _.isString($scope.current.query) &&
  63. $scope.current.query.match(new RegExp('\\$' + $scope.current.name + '(/| |$)'))
  64. ) {
  65. appEvents.emit('alert-warning', [
  66. 'Validation',
  67. 'Query cannot contain a reference to itself. Variable: $' + $scope.current.name,
  68. ]);
  69. return false;
  70. }
  71. return true;
  72. };
  73. $scope.validate = () => {
  74. $scope.infoText = '';
  75. if ($scope.current.type === 'adhoc' && $scope.current.datasource !== null) {
  76. $scope.infoText = 'Adhoc filters are applied automatically to all queries that target this datasource';
  77. datasourceSrv.get($scope.current.datasource).then(ds => {
  78. if (!ds.getTagKeys) {
  79. $scope.infoText = 'This datasource does not support adhoc filters yet.';
  80. }
  81. });
  82. }
  83. };
  84. $scope.runQuery = () => {
  85. $scope.optionsLimit = 20;
  86. return variableSrv.updateOptions($scope.current).catch(err => {
  87. if (err.data && err.data.message) {
  88. err.message = err.data.message;
  89. }
  90. appEvents.emit('alert-error', ['Templating', 'Template variables could not be initialized: ' + err.message]);
  91. });
  92. };
  93. $scope.onQueryChange = (query, definition) => {
  94. $scope.current.query = query;
  95. $scope.current.definition = definition;
  96. $scope.runQuery();
  97. };
  98. $scope.edit = variable => {
  99. $scope.current = variable;
  100. $scope.currentIsNew = false;
  101. $scope.mode = 'edit';
  102. $scope.validate();
  103. datasourceSrv.get($scope.current.datasource).then(ds => {
  104. $scope.currentDatasource = ds;
  105. });
  106. };
  107. $scope.duplicate = variable => {
  108. const clone = _.cloneDeep(variable.getSaveModel());
  109. $scope.current = variableSrv.createVariableFromModel(clone);
  110. $scope.current.name = 'copy_of_' + variable.name;
  111. variableSrv.addVariable($scope.current);
  112. };
  113. $scope.update = () => {
  114. if ($scope.isValid()) {
  115. $scope.runQuery().then(() => {
  116. $scope.reset();
  117. $scope.mode = 'list';
  118. templateSrv.updateIndex();
  119. });
  120. }
  121. };
  122. $scope.reset = () => {
  123. $scope.currentIsNew = true;
  124. $scope.current = variableSrv.createVariableFromModel({ type: 'query' });
  125. // this is done here in case a new data source type variable was added
  126. $scope.datasources = _.filter(datasourceSrv.getMetricSources(), ds => {
  127. return !ds.meta.mixed && ds.value !== null;
  128. });
  129. $scope.datasourceTypes = _($scope.datasources)
  130. .uniqBy('meta.id')
  131. .map((ds: any) => {
  132. return { text: ds.meta.name, value: ds.meta.id };
  133. })
  134. .value();
  135. };
  136. $scope.typeChanged = function() {
  137. const old = $scope.current;
  138. $scope.current = variableSrv.createVariableFromModel({
  139. type: $scope.current.type,
  140. });
  141. $scope.current.name = old.name;
  142. $scope.current.hide = old.hide;
  143. $scope.current.label = old.label;
  144. const oldIndex = _.indexOf(this.variables, old);
  145. if (oldIndex !== -1) {
  146. this.variables[oldIndex] = $scope.current;
  147. }
  148. $scope.validate();
  149. };
  150. $scope.removeVariable = variable => {
  151. variableSrv.removeVariable(variable);
  152. };
  153. $scope.showMoreOptions = () => {
  154. $scope.optionsLimit += 20;
  155. };
  156. $scope.datasourceChanged = async () => {
  157. datasourceSrv.get($scope.current.datasource).then(ds => {
  158. $scope.current.query = '';
  159. $scope.currentDatasource = ds;
  160. });
  161. };
  162. }
  163. }
  164. coreModule.controller('VariableEditorCtrl', VariableEditorCtrl);