query_editor_row.ts 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. ///<reference path="../../headers/common.d.ts" />
  2. import angular from 'angular';
  3. import _ from 'lodash';
  4. var module = angular.module('grafana.directives');
  5. export class QueryRowCtrl {
  6. collapsedText: string;
  7. canCollapse: boolean;
  8. getCollapsedText: any;
  9. target: any;
  10. queryCtrl: any;
  11. panelCtrl: any;
  12. panel: any;
  13. collapsed: any;
  14. constructor() {
  15. this.panelCtrl = this.queryCtrl.panelCtrl;
  16. this.target = this.queryCtrl.target;
  17. this.panel = this.panelCtrl.panel;
  18. if (!this.target.refId) {
  19. this.target.refId = this.getNextQueryLetter();
  20. }
  21. this.toggleCollapse(true);
  22. if (this.target.isNew) {
  23. delete this.target.isNew;
  24. this.toggleCollapse(false);
  25. }
  26. }
  27. toggleHideQuery() {
  28. this.target.hide = !this.target.hide;
  29. this.panelCtrl.refresh();
  30. }
  31. getNextQueryLetter() {
  32. var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  33. return _.find(letters, refId => {
  34. return _.every(this.panel.targets, function(other) {
  35. return other.refId !== refId;
  36. });
  37. });
  38. }
  39. toggleCollapse(init) {
  40. if (!this.canCollapse) {
  41. return;
  42. }
  43. if (!this.panelCtrl.__collapsedQueryCache) {
  44. this.panelCtrl.__collapsedQueryCache = {};
  45. }
  46. if (init) {
  47. this.collapsed = this.panelCtrl.__collapsedQueryCache[this.target.refId] !== false;
  48. } else {
  49. this.collapsed = !this.collapsed;
  50. this.panelCtrl.__collapsedQueryCache[this.target.refId] = this.collapsed;
  51. }
  52. try {
  53. this.collapsedText = this.queryCtrl.getCollapsedText();
  54. } catch (e) {
  55. var err = e.message || e.toString();
  56. this.collapsedText = 'Error: ' + err;
  57. }
  58. }
  59. toggleEditorMode() {
  60. if (this.canCollapse && this.collapsed) {
  61. this.collapsed = false;
  62. }
  63. this.queryCtrl.toggleEditorMode();
  64. }
  65. removeQuery() {
  66. delete this.panelCtrl.__collapsedQueryCache[this.target.refId];
  67. this.panel.targets = _.without(this.panel.targets, this.target);
  68. this.panelCtrl.refresh();
  69. }
  70. duplicateQuery() {
  71. var clone = angular.copy(this.target);
  72. clone.refId = this.getNextQueryLetter();
  73. this.panel.targets.push(clone);
  74. }
  75. moveQuery(direction) {
  76. var index = _.indexOf(this.panel.targets, this.target);
  77. _.move(this.panel.targets, index, index + direction);
  78. }
  79. }
  80. /** @ngInject **/
  81. function queryEditorRowDirective() {
  82. return {
  83. restrict: 'E',
  84. controller: QueryRowCtrl,
  85. bindToController: true,
  86. controllerAs: "ctrl",
  87. templateUrl: 'public/app/features/panel/partials/query_editor_row.html',
  88. transclude: true,
  89. scope: {
  90. queryCtrl: "=",
  91. canCollapse: "=",
  92. hasTextEditMode: "=",
  93. },
  94. };
  95. }
  96. module.directive('queryEditorRow', queryEditorRowDirective);