dashboardList.tsx 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  1. import {Fragment} from 'react';
  2. import {browserHistory} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import {Location, Query} from 'history';
  5. import {
  6. createDashboard,
  7. deleteDashboard,
  8. fetchDashboard,
  9. } from 'sentry/actionCreators/dashboards';
  10. import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
  11. import {Client} from 'sentry/api';
  12. import Button from 'sentry/components/button';
  13. import {openConfirmModal} from 'sentry/components/confirm';
  14. import DropdownMenuControl from 'sentry/components/dropdownMenuControl';
  15. import {MenuItemProps} from 'sentry/components/dropdownMenuItem';
  16. import EmptyStateWarning from 'sentry/components/emptyStateWarning';
  17. import Pagination from 'sentry/components/pagination';
  18. import TimeSince from 'sentry/components/timeSince';
  19. import {IconEllipsis} from 'sentry/icons';
  20. import {t, tn} from 'sentry/locale';
  21. import space from 'sentry/styles/space';
  22. import {Organization} from 'sentry/types';
  23. import {trackAnalyticsEvent} from 'sentry/utils/analytics';
  24. import withApi from 'sentry/utils/withApi';
  25. import {DashboardListItem, DisplayType} from 'sentry/views/dashboardsV2/types';
  26. import {cloneDashboard, miniWidget} from '../utils';
  27. import DashboardCard from './dashboardCard';
  28. import GridPreview from './gridPreview';
  29. type Props = {
  30. api: Client;
  31. dashboards: DashboardListItem[] | null;
  32. location: Location;
  33. onDashboardsChange: () => void;
  34. organization: Organization;
  35. pageLinks: string;
  36. };
  37. function DashboardList({
  38. api,
  39. organization,
  40. location,
  41. dashboards,
  42. pageLinks,
  43. onDashboardsChange,
  44. }: Props) {
  45. function handleDelete(dashboard: DashboardListItem) {
  46. deleteDashboard(api, organization.slug, dashboard.id)
  47. .then(() => {
  48. trackAnalyticsEvent({
  49. eventKey: 'dashboards_manage.delete',
  50. eventName: 'Dashboards Manager: Dashboard Deleted',
  51. organization_id: parseInt(organization.id, 10),
  52. dashboard_id: parseInt(dashboard.id, 10),
  53. });
  54. onDashboardsChange();
  55. addSuccessMessage(t('Dashboard deleted'));
  56. })
  57. .catch(() => {
  58. addErrorMessage(t('Error deleting Dashboard'));
  59. });
  60. }
  61. async function handleDuplicate(dashboard: DashboardListItem) {
  62. try {
  63. const dashboardDetail = await fetchDashboard(api, organization.slug, dashboard.id);
  64. const newDashboard = cloneDashboard(dashboardDetail);
  65. newDashboard.widgets.map(widget => (widget.id = undefined));
  66. await createDashboard(api, organization.slug, newDashboard, true);
  67. trackAnalyticsEvent({
  68. eventKey: 'dashboards_manage.duplicate',
  69. eventName: 'Dashboards Manager: Dashboard Duplicated',
  70. organization_id: parseInt(organization.id, 10),
  71. dashboard_id: parseInt(dashboard.id, 10),
  72. });
  73. onDashboardsChange();
  74. addSuccessMessage(t('Dashboard duplicated'));
  75. } catch (e) {
  76. addErrorMessage(t('Error duplicating Dashboard'));
  77. }
  78. }
  79. function renderDropdownMenu(dashboard: DashboardListItem) {
  80. const menuItems: MenuItemProps[] = [
  81. {
  82. key: 'dashboard-duplicate',
  83. label: t('Duplicate'),
  84. onAction: () => handleDuplicate(dashboard),
  85. },
  86. {
  87. key: 'dashboard-delete',
  88. label: t('Delete'),
  89. priority: 'danger',
  90. onAction: () => {
  91. openConfirmModal({
  92. message: t('Are you sure you want to delete this dashboard?'),
  93. priority: 'danger',
  94. onConfirm: () => handleDelete(dashboard),
  95. });
  96. },
  97. },
  98. ];
  99. return (
  100. <DropdownMenuControl
  101. items={menuItems}
  102. trigger={({props: triggerProps, ref: triggerRef}) => (
  103. <DropdownTrigger
  104. ref={triggerRef}
  105. {...triggerProps}
  106. aria-label={t('Dashboard actions')}
  107. size="xs"
  108. borderless
  109. onClick={e => {
  110. e.stopPropagation();
  111. e.preventDefault();
  112. triggerProps.onClick?.(e);
  113. }}
  114. icon={<IconEllipsis direction="down" size="sm" />}
  115. />
  116. )}
  117. placement="bottom right"
  118. disabledKeys={dashboards && dashboards.length <= 1 ? ['dashboard-delete'] : []}
  119. offset={4}
  120. />
  121. );
  122. }
  123. function renderDndPreview(dashboard) {
  124. return (
  125. <WidgetGrid>
  126. {dashboard.widgetDisplay.map((displayType, i) => {
  127. return displayType === DisplayType.BIG_NUMBER ? (
  128. <BigNumberWidgetWrapper key={`${i}-${displayType}`}>
  129. <WidgetImage src={miniWidget(displayType)} />
  130. </BigNumberWidgetWrapper>
  131. ) : (
  132. <MiniWidgetWrapper key={`${i}-${displayType}`}>
  133. <WidgetImage src={miniWidget(displayType)} />
  134. </MiniWidgetWrapper>
  135. );
  136. })}
  137. </WidgetGrid>
  138. );
  139. }
  140. function renderGridPreview(dashboard) {
  141. return <GridPreview widgetPreview={dashboard.widgetPreview} />;
  142. }
  143. function renderMiniDashboards() {
  144. const isUsingGrid = organization.features.includes('dashboard-grid-layout');
  145. return dashboards?.map((dashboard, index) => {
  146. const widgetRenderer = isUsingGrid ? renderGridPreview : renderDndPreview;
  147. const widgetCount = isUsingGrid
  148. ? dashboard.widgetPreview.length
  149. : dashboard.widgetDisplay.length;
  150. return (
  151. <DashboardCard
  152. key={`${index}-${dashboard.id}`}
  153. title={dashboard.title}
  154. to={{
  155. pathname: `/organizations/${organization.slug}/dashboard/${dashboard.id}/`,
  156. query: {...location.query},
  157. }}
  158. detail={tn('%s widget', '%s widgets', widgetCount)}
  159. dateStatus={
  160. dashboard.dateCreated ? <TimeSince date={dashboard.dateCreated} /> : undefined
  161. }
  162. createdBy={dashboard.createdBy}
  163. renderWidgets={() => widgetRenderer(dashboard)}
  164. renderContextMenu={() => renderDropdownMenu(dashboard)}
  165. />
  166. );
  167. });
  168. }
  169. function renderDashboardGrid() {
  170. if (!dashboards?.length) {
  171. return (
  172. <EmptyStateWarning>
  173. <p>{t('Sorry, no Dashboards match your filters.')}</p>
  174. </EmptyStateWarning>
  175. );
  176. }
  177. return <DashboardGrid>{renderMiniDashboards()}</DashboardGrid>;
  178. }
  179. return (
  180. <Fragment>
  181. {renderDashboardGrid()}
  182. <PaginationRow
  183. pageLinks={pageLinks}
  184. onCursor={(cursor, path, query, direction) => {
  185. const offset = Number(cursor?.split?.(':')?.[1] ?? 0);
  186. const newQuery: Query & {cursor?: string} = {...query, cursor};
  187. const isPrevious = direction === -1;
  188. if (offset <= 0 && isPrevious) {
  189. delete newQuery.cursor;
  190. }
  191. trackAnalyticsEvent({
  192. eventKey: 'dashboards_manage.paginate',
  193. eventName: 'Dashboards Manager: Paginate',
  194. organization_id: parseInt(organization.id, 10),
  195. });
  196. browserHistory.push({
  197. pathname: path,
  198. query: newQuery,
  199. });
  200. }}
  201. />
  202. </Fragment>
  203. );
  204. }
  205. const DashboardGrid = styled('div')`
  206. display: grid;
  207. grid-template-columns: minmax(100px, 1fr);
  208. grid-template-rows: repeat(3, max-content);
  209. gap: ${space(2)};
  210. @media (min-width: ${p => p.theme.breakpoints.small}) {
  211. grid-template-columns: repeat(2, minmax(100px, 1fr));
  212. }
  213. @media (min-width: ${p => p.theme.breakpoints.large}) {
  214. grid-template-columns: repeat(3, minmax(100px, 1fr));
  215. }
  216. `;
  217. const WidgetGrid = styled('div')`
  218. display: grid;
  219. grid-template-columns: repeat(2, minmax(0, 1fr));
  220. grid-auto-flow: row dense;
  221. gap: ${space(0.25)};
  222. @media (min-width: ${p => p.theme.breakpoints.medium}) {
  223. grid-template-columns: repeat(4, minmax(0, 1fr));
  224. }
  225. @media (min-width: ${p => p.theme.breakpoints.xlarge}) {
  226. grid-template-columns: repeat(6, minmax(0, 1fr));
  227. }
  228. @media (min-width: ${p => p.theme.breakpoints.xxlarge}) {
  229. grid-template-columns: repeat(8, minmax(0, 1fr));
  230. }
  231. `;
  232. const BigNumberWidgetWrapper = styled('div')`
  233. display: flex;
  234. align-items: flex-start;
  235. width: 100%;
  236. height: 100%;
  237. /* 2 cols */
  238. grid-area: span 1 / span 2;
  239. @media (min-width: ${p => p.theme.breakpoints.small}) {
  240. /* 4 cols */
  241. grid-area: span 1 / span 1;
  242. }
  243. @media (min-width: ${p => p.theme.breakpoints.xlarge}) {
  244. /* 6 and 8 cols */
  245. grid-area: span 1 / span 2;
  246. }
  247. `;
  248. const MiniWidgetWrapper = styled('div')`
  249. display: flex;
  250. align-items: flex-start;
  251. width: 100%;
  252. height: 100%;
  253. grid-area: span 2 / span 2;
  254. `;
  255. const WidgetImage = styled('img')`
  256. width: 100%;
  257. height: 100%;
  258. `;
  259. const PaginationRow = styled(Pagination)`
  260. margin-bottom: ${space(3)};
  261. `;
  262. const DropdownTrigger = styled(Button)`
  263. transform: translateX(${space(1)});
  264. `;
  265. export default withApi(DashboardList);