dashboards.tsx 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. import omit from 'lodash/omit';
  2. import {addErrorMessage} from 'sentry/actionCreators/indicator';
  3. import type {Client} from 'sentry/api';
  4. import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
  5. import {t} from 'sentry/locale';
  6. import PageFiltersStore from 'sentry/stores/pageFiltersStore';
  7. import type {PageFilters} from 'sentry/types/core';
  8. import type {
  9. DashboardDetails,
  10. DashboardListItem,
  11. Widget,
  12. } from 'sentry/views/dashboards/types';
  13. import {flattenErrors} from 'sentry/views/dashboards/utils';
  14. export function fetchDashboards(api: Client, orgSlug: string) {
  15. const promise: Promise<DashboardListItem[]> = api.requestPromise(
  16. `/organizations/${orgSlug}/dashboards/`,
  17. {
  18. method: 'GET',
  19. query: {sort: 'myDashboardsAndRecentlyViewed'},
  20. }
  21. );
  22. promise.catch(response => {
  23. const errorResponse = response?.responseJSON ?? null;
  24. if (errorResponse) {
  25. const errors = flattenErrors(errorResponse, {});
  26. addErrorMessage(errors[Object.keys(errors)[0]] as string);
  27. } else {
  28. addErrorMessage(t('Unable to fetch dashboards'));
  29. }
  30. });
  31. return promise;
  32. }
  33. export function createDashboard(
  34. api: Client,
  35. orgSlug: string,
  36. newDashboard: DashboardDetails,
  37. duplicate?: boolean
  38. ): Promise<DashboardDetails> {
  39. const {
  40. title,
  41. widgets,
  42. projects,
  43. environment,
  44. period,
  45. start,
  46. end,
  47. filters,
  48. utc,
  49. permissions,
  50. } = newDashboard;
  51. const promise: Promise<DashboardDetails> = api.requestPromise(
  52. `/organizations/${orgSlug}/dashboards/`,
  53. {
  54. method: 'POST',
  55. data: {
  56. title,
  57. widgets: widgets.map(widget => omit(widget, ['tempId'])),
  58. duplicate,
  59. projects,
  60. environment,
  61. period,
  62. start,
  63. end,
  64. filters,
  65. utc,
  66. permissions,
  67. },
  68. query: {
  69. project: projects,
  70. environment,
  71. },
  72. }
  73. );
  74. promise.catch(response => {
  75. const errorResponse = response?.responseJSON ?? null;
  76. if (errorResponse) {
  77. const errors = flattenErrors(errorResponse, {});
  78. addErrorMessage(errors[Object.keys(errors)[0]] as string);
  79. } else {
  80. addErrorMessage(t('Unable to create dashboard'));
  81. }
  82. });
  83. return promise;
  84. }
  85. export function updateDashboardVisit(
  86. api: Client,
  87. orgId: string,
  88. dashboardId: string | string[]
  89. ): Promise<void> {
  90. const promise = api.requestPromise(
  91. `/organizations/${orgId}/dashboards/${dashboardId}/visit/`,
  92. {
  93. method: 'POST',
  94. }
  95. );
  96. return promise;
  97. }
  98. export function fetchDashboard(
  99. api: Client,
  100. orgId: string,
  101. dashboardId: string
  102. ): Promise<DashboardDetails> {
  103. const promise: Promise<DashboardDetails> = api.requestPromise(
  104. `/organizations/${orgId}/dashboards/${dashboardId}/`,
  105. {
  106. method: 'GET',
  107. }
  108. );
  109. promise.catch(response => {
  110. const errorResponse = response?.responseJSON ?? null;
  111. if (errorResponse) {
  112. const errors = flattenErrors(errorResponse, {});
  113. addErrorMessage(errors[Object.keys(errors)[0]] as string);
  114. } else {
  115. addErrorMessage(t('Unable to load dashboard'));
  116. }
  117. });
  118. return promise;
  119. }
  120. export function updateDashboard(
  121. api: Client,
  122. orgId: string,
  123. dashboard: DashboardDetails
  124. ): Promise<DashboardDetails> {
  125. const {
  126. title,
  127. widgets,
  128. projects,
  129. environment,
  130. period,
  131. start,
  132. end,
  133. filters,
  134. utc,
  135. permissions,
  136. } = dashboard;
  137. const data = {
  138. title,
  139. widgets: widgets.map(widget => omit(widget, ['tempId'])),
  140. projects,
  141. environment,
  142. period,
  143. start,
  144. end,
  145. filters,
  146. utc,
  147. permissions,
  148. };
  149. const promise: Promise<DashboardDetails> = api.requestPromise(
  150. `/organizations/${orgId}/dashboards/${dashboard.id}/`,
  151. {
  152. method: 'PUT',
  153. data,
  154. query: {
  155. project: projects,
  156. environment,
  157. },
  158. }
  159. );
  160. // We let the callers of `updateDashboard` handle adding a success message, so
  161. // that it can be more specific than just "Dashboard updated," but do the
  162. // error-handling here, since it doesn't depend on the caller's context
  163. promise.catch(response => {
  164. const errorResponse = response?.responseJSON ?? null;
  165. if (errorResponse) {
  166. const errors = flattenErrors(errorResponse, {});
  167. addErrorMessage(errors[Object.keys(errors)[0]] as string);
  168. } else {
  169. addErrorMessage(t('Unable to update dashboard'));
  170. }
  171. });
  172. return promise;
  173. }
  174. export function deleteDashboard(
  175. api: Client,
  176. orgId: string,
  177. dashboardId: string
  178. ): Promise<undefined> {
  179. const promise: Promise<undefined> = api.requestPromise(
  180. `/organizations/${orgId}/dashboards/${dashboardId}/`,
  181. {
  182. method: 'DELETE',
  183. }
  184. );
  185. promise.catch(response => {
  186. const errorResponse = response?.responseJSON ?? null;
  187. if (errorResponse) {
  188. const errors = flattenErrors(errorResponse, {});
  189. addErrorMessage(errors[Object.keys(errors)[0]] as string);
  190. } else {
  191. addErrorMessage(t('Unable to delete dashboard'));
  192. }
  193. });
  194. return promise;
  195. }
  196. export function validateWidgetRequest(
  197. orgId: string,
  198. widget: Widget,
  199. selection: PageFilters
  200. ) {
  201. return [
  202. `/organizations/${orgId}/dashboards/widgets/`,
  203. {
  204. method: 'POST',
  205. data: widget,
  206. query: {
  207. // TODO: This should be replaced in the future with projects
  208. // when we save Dashboard page filters. This is being sent to
  209. // bypass validation when creating or updating dashboards
  210. project: [ALL_ACCESS_PROJECTS],
  211. environment: selection.environments,
  212. },
  213. },
  214. ] as const;
  215. }
  216. export function validateWidget(
  217. api: Client,
  218. orgId: string,
  219. widget: Widget
  220. ): Promise<undefined> {
  221. const {selection} = PageFiltersStore.getState();
  222. const widgetQuery = validateWidgetRequest(orgId, widget, selection);
  223. const promise: Promise<undefined> = api.requestPromise(widgetQuery[0], widgetQuery[1]);
  224. return promise;
  225. }