panel.ts 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. // Store
  2. import store from 'app/core/store';
  3. // Models
  4. import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
  5. import { PanelModel } from 'app/features/dashboard/state/PanelModel';
  6. import { PanelData, TimeRange, TimeSeries } from '@grafana/ui';
  7. import { TableData } from '@grafana/ui/src';
  8. // Utils
  9. import { isString as _isString } from 'lodash';
  10. import * as rangeUtil from 'app/core/utils/rangeutil';
  11. import * as dateMath from 'app/core/utils/datemath';
  12. import appEvents from 'app/core/app_events';
  13. // Services
  14. import templateSrv from 'app/features/templating/template_srv';
  15. // Constants
  16. import { LS_PANEL_COPY_KEY } from 'app/core/constants';
  17. export const removePanel = (dashboard: DashboardModel, panel: PanelModel, ask: boolean) => {
  18. // confirm deletion
  19. if (ask !== false) {
  20. const text2 = panel.alert ? 'Panel includes an alert rule, removing panel will also remove alert rule' : null;
  21. const confirmText = panel.alert ? 'YES' : null;
  22. appEvents.emit('confirm-modal', {
  23. title: 'Remove Panel',
  24. text: 'Are you sure you want to remove this panel?',
  25. text2: text2,
  26. icon: 'fa-trash',
  27. confirmText: confirmText,
  28. yesText: 'Remove',
  29. onConfirm: () => removePanel(dashboard, panel, false),
  30. });
  31. return;
  32. }
  33. dashboard.removePanel(panel);
  34. };
  35. export const duplicatePanel = (dashboard: DashboardModel, panel: PanelModel) => {
  36. dashboard.duplicatePanel(panel);
  37. };
  38. export const copyPanel = (panel: PanelModel) => {
  39. store.set(LS_PANEL_COPY_KEY, JSON.stringify(panel.getSaveModel()));
  40. appEvents.emit('alert-success', ['Panel copied. Open Add Panel to paste']);
  41. };
  42. const replacePanel = (dashboard: DashboardModel, newPanel: PanelModel, oldPanel: PanelModel) => {
  43. const index = dashboard.panels.findIndex(panel => {
  44. return panel.id === oldPanel.id;
  45. });
  46. const deletedPanel = dashboard.panels.splice(index, 1);
  47. dashboard.events.emit('panel-removed', deletedPanel);
  48. newPanel = new PanelModel(newPanel);
  49. newPanel.id = oldPanel.id;
  50. dashboard.panels.splice(index, 0, newPanel);
  51. dashboard.sortPanelsByGridPos();
  52. dashboard.events.emit('panel-added', newPanel);
  53. };
  54. export const editPanelJson = (dashboard: DashboardModel, panel: PanelModel) => {
  55. const model = {
  56. object: panel.getSaveModel(),
  57. updateHandler: (newPanel: PanelModel, oldPanel: PanelModel) => {
  58. replacePanel(dashboard, newPanel, oldPanel);
  59. },
  60. enableCopy: true,
  61. };
  62. appEvents.emit('show-modal', {
  63. src: 'public/app/partials/edit_json.html',
  64. model: model,
  65. });
  66. };
  67. export const sharePanel = (dashboard: DashboardModel, panel: PanelModel) => {
  68. appEvents.emit('show-modal', {
  69. src: 'public/app/features/dashboard/components/ShareModal/template.html',
  70. model: {
  71. dashboard: dashboard,
  72. panel: panel,
  73. },
  74. });
  75. };
  76. export const refreshPanel = (panel: PanelModel) => {
  77. panel.refresh();
  78. };
  79. export const toggleLegend = (panel: PanelModel) => {
  80. console.log('Toggle legend is not implemented yet');
  81. // We need to set panel.legend defaults first
  82. // panel.legend.show = !panel.legend.show;
  83. refreshPanel(panel);
  84. };
  85. export interface TimeOverrideResult {
  86. timeRange: TimeRange;
  87. timeInfo: string;
  88. }
  89. export function applyPanelTimeOverrides(panel: PanelModel, timeRange: TimeRange): TimeOverrideResult {
  90. const newTimeData = {
  91. timeInfo: '',
  92. timeRange: timeRange,
  93. };
  94. if (panel.timeFrom) {
  95. const timeFromInterpolated = templateSrv.replace(panel.timeFrom, panel.scopedVars);
  96. const timeFromInfo = rangeUtil.describeTextRange(timeFromInterpolated);
  97. if (timeFromInfo.invalid) {
  98. newTimeData.timeInfo = 'invalid time override';
  99. return newTimeData;
  100. }
  101. if (_isString(timeRange.raw.from)) {
  102. const timeFromDate = dateMath.parse(timeFromInfo.from);
  103. newTimeData.timeInfo = timeFromInfo.display;
  104. newTimeData.timeRange = {
  105. from: timeFromDate,
  106. to: dateMath.parse(timeFromInfo.to),
  107. raw: {
  108. from: timeFromInfo.from,
  109. to: timeFromInfo.to,
  110. },
  111. };
  112. }
  113. }
  114. if (panel.timeShift) {
  115. const timeShiftInterpolated = templateSrv.replace(panel.timeShift, panel.scopedVars);
  116. const timeShiftInfo = rangeUtil.describeTextRange(timeShiftInterpolated);
  117. if (timeShiftInfo.invalid) {
  118. newTimeData.timeInfo = 'invalid timeshift';
  119. return newTimeData;
  120. }
  121. const timeShift = '-' + timeShiftInterpolated;
  122. newTimeData.timeInfo += ' timeshift ' + timeShift;
  123. const from = dateMath.parseDateMath(timeShift, newTimeData.timeRange.from, false);
  124. const to = dateMath.parseDateMath(timeShift, newTimeData.timeRange.to, true);
  125. newTimeData.timeRange = {
  126. from,
  127. to,
  128. raw: {
  129. from,
  130. to,
  131. },
  132. };
  133. }
  134. if (panel.hideTimeOverride) {
  135. newTimeData.timeInfo = '';
  136. }
  137. return newTimeData;
  138. }
  139. export function getResolution(panel: PanelModel): number {
  140. const htmlEl = document.getElementsByTagName('html')[0];
  141. const width = htmlEl.getBoundingClientRect().width; // https://stackoverflow.com/a/21454625
  142. return panel.maxDataPoints ? panel.maxDataPoints : Math.ceil(width * (panel.gridPos.w / 24));
  143. }
  144. const isTimeSeries = (data: any): data is TimeSeries => data && data.hasOwnProperty('datapoints');
  145. const isTableData = (data: any): data is TableData => data && data.hasOwnProperty('columns');
  146. export const snapshotDataToPanelData = (panel: PanelModel): PanelData => {
  147. const snapshotData = panel.snapshotData;
  148. if (isTimeSeries(snapshotData[0])) {
  149. return {
  150. timeSeries: snapshotData,
  151. } as PanelData;
  152. } else if (isTableData(snapshotData[0])) {
  153. return {
  154. tableData: snapshotData[0],
  155. } as PanelData;
  156. }
  157. throw new Error('snapshotData is invalid:' + snapshotData.toString());
  158. };