feat(widget-library): Add Library Widgets to Dashboard

static/app/components/modals/dashboardWidgetLibraryModal/index.tsx

@@ -8,8 +8,8 @@ import Tag from 'app/components/tagDeprecated';
 import {t} from 'app/locale';
 import space from 'app/styles/space';
 import {Organization} from 'app/types';
-import {DashboardDetails} from 'app/views/dashboardsV2/types';
-import {DEFAULT_WIDGETS, WidgetTemplate} from 'app/views/dashboardsV2/widgetLibrary/data';
+import {DashboardDetails, Widget} from 'app/views/dashboardsV2/types';
+import {WidgetTemplate} from 'app/views/dashboardsV2/widgetLibrary/data';
 
 import Button from '../../button';
 import ButtonBar from '../../buttonBar';
@@ -20,6 +20,7 @@ import DashboardWidgetLibraryTab from './libraryTab';
 export type DashboardWidgetLibraryModalOptions = {
   organization: Organization;
   dashboard: DashboardDetails;
+  onAddWidget: (widgets: Widget[]) => void;
 };
 
 export enum TAB {
@@ -29,9 +30,22 @@ export enum TAB {
 
 type Props = ModalRenderProps & DashboardWidgetLibraryModalOptions;
 
-function DashboardWidgetLibraryModal({Header, Body, Footer}: Props) {
+function DashboardWidgetLibraryModal({
+  Header,
+  Body,
+  Footer,
+  dashboard,
+  closeModal,
+  onAddWidget,
+}: Props) {
   const [tab, setTab] = useState(TAB.Library);
   const [selectedWidgets, setSelectedWidgets] = useState<WidgetTemplate[]>([]);
+  const [errored, setErrored] = useState(false);
+
+  function handleSubmit() {
+    onAddWidget([...dashboard.widgets, ...selectedWidgets]);
+    closeModal();
+  }
 
   return (
     <React.Fragment>
@@ -47,11 +61,12 @@ function DashboardWidgetLibraryModal({Header, Body, Footer}: Props) {
             {t('Custom')}
           </Button>
         </StyledButtonBar>
-        <Title>{t('%s WIDGETS', DEFAULT_WIDGETS.length)}</Title>
         {tab === TAB.Library ? (
           <DashboardWidgetLibraryTab
             selectedWidgets={selectedWidgets}
+            errored={errored}
             setSelectedWidgets={setSelectedWidgets}
+            setErrored={setErrored}
           />
         ) : (
           <DashboardWidgetCustomTab />
@@ -70,12 +85,19 @@ function DashboardWidgetLibraryModal({Header, Body, Footer}: Props) {
               {`${selectedWidgets.length} Selected`}
             </SelectedBadge>
             <Button
-              data-test-id="add-widget"
+              data-test-id="confirm-widgets"
               priority="primary"
               type="button"
-              onClick={() => {}}
+              onClick={(event: React.FormEvent) => {
+                event.preventDefault();
+                if (!!!selectedWidgets.length) {
+                  setErrored(true);
+                  return;
+                }
+                handleSubmit();
+              }}
             >
-              {t('Add Widget')}
+              {t('Confirm')}
             </Button>
           </div>
         </FooterButtonbar>
@@ -100,14 +122,6 @@ const FooterButtonbar = styled(ButtonBar)`
   width: 100%;
 `;
 
-const Title = styled('h3')`
-  margin-bottom: ${space(1)};
-  padding: 0 !important;
-  font-size: ${p => p.theme.fontSizeSmall};
-  text-transform: uppercase;
-  color: ${p => p.theme.gray300};
-`;
-
 const SelectedBadge = styled(Tag)`
   padding: 3px ${space(0.75)};
   display: inline-flex;

static/app/components/modals/dashboardWidgetLibraryModal/libraryTab.tsx

@@ -1,18 +1,35 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 
+import Alert from 'app/components/alert';
+import {t} from 'app/locale';
 import space from 'app/styles/space';
 import {DEFAULT_WIDGETS, WidgetTemplate} from 'app/views/dashboardsV2/widgetLibrary/data';
 import WidgetLibraryCard from 'app/views/dashboardsV2/widgetLibrary/widgetCard';
 
 type Props = {
   selectedWidgets: WidgetTemplate[];
+  errored: boolean;
   setSelectedWidgets: (widgets: WidgetTemplate[]) => void;
+  setErrored: (errored: boolean) => void;
 };
 
-function DashboardWidgetLibraryTab({selectedWidgets, setSelectedWidgets}: Props) {
+function DashboardWidgetLibraryTab({
+  selectedWidgets,
+  errored,
+  setSelectedWidgets,
+  setErrored,
+}: Props) {
   return (
     <React.Fragment>
+      {errored && !!!selectedWidgets.length ? (
+        <Alert type="error">
+          {t(
+            'Please select at least one Widget from our Library. Alternatively, you can build a custom widget from scratch.'
+          )}
+        </Alert>
+      ) : null}
+      <Title>{t('%s WIDGETS', DEFAULT_WIDGETS.length)}</Title>
       <ScrollGrid>
         <WidgetLibraryGrid>
           {DEFAULT_WIDGETS.map(widgetCard => {
@@ -22,6 +39,7 @@ function DashboardWidgetLibraryTab({selectedWidgets, setSelectedWidgets}: Props)
                 widget={widgetCard}
                 selectedWidgets={selectedWidgets}
                 setSelectedWidgets={setSelectedWidgets}
+                setErrored={setErrored}
               />
             );
           })}
@@ -48,4 +66,12 @@ const ScrollGrid = styled('div')`
   }
 `;
 
+const Title = styled('h3')`
+  margin-bottom: ${space(1)};
+  padding: 0 !important;
+  font-size: ${p => p.theme.fontSizeSmall};
+  text-transform: uppercase;
+  color: ${p => p.theme.gray300};
+`;
+
 export default DashboardWidgetLibraryTab;

static/app/views/dashboardsV2/controls.tsx

@@ -21,7 +21,7 @@ type Props = {
   onCancel: () => void;
   onCommit: () => void;
   onDelete: () => void;
-  onAddWidget?: () => void;
+  onAddWidget: () => void;
   dashboardState: DashboardState;
 };
 
@@ -117,14 +117,12 @@ class Controls extends React.Component<Props> {
               </Button>
               {organization.features.includes('widget-library') ? (
                 <Button
-                  data-test-id="dashboard-add-widget"
+                  data-test-id="add-widget-library"
                   priority="primary"
                   icon={<IconAdd isCircled size="s" />}
                   onClick={e => {
                     e.preventDefault();
-                    if (onAddWidget) {
-                      onAddWidget();
-                    }
+                    onAddWidget();
                   }}
                 >
                   {t('Add Widget')}

static/app/views/dashboardsV2/detail.tsx

@@ -254,8 +254,39 @@ class DashboardDetail extends Component<Props, State> {
   };
 
   onAddWidget = () => {
-    const {organization, dashboard} = this.props;
-    openDashboardWidgetLibraryModal({organization, dashboard});
+    const {organization, dashboard, api, reloadData, location} = this.props;
+    this.setState({
+      modifiedDashboard: cloneDashboard(dashboard),
+    });
+    openDashboardWidgetLibraryModal({
+      organization,
+      dashboard,
+      onAddWidget: (widgets: Widget[]) => {
+        const modifiedDashboard = {
+          ...cloneDashboard(dashboard),
+          widgets,
+        };
+        updateDashboard(api, organization.slug, modifiedDashboard).then(
+          (newDashboard: DashboardDetails) => {
+            addSuccessMessage(t('Dashboard updated'));
+
+            if (reloadData) {
+              reloadData();
+            }
+            if (dashboard && newDashboard.id !== dashboard.id) {
+              browserHistory.replace({
+                pathname: `/organizations/${organization.slug}/dashboard/${newDashboard.id}/`,
+                query: {
+                  ...location.query,
+                },
+              });
+              return;
+            }
+          },
+          () => undefined
+        );
+      },
+    });
   };
 
   onCommit = () => {

static/app/views/dashboardsV2/widgetLibrary/data.tsx

@@ -9,42 +9,96 @@ export const DEFAULT_WIDGETS: Readonly<Array<WidgetTemplate>> = [
     id: undefined,
     title: t('Total Errors'),
     displayType: DisplayType.BIG_NUMBER,
-    interval: '24h',
-    queries: [],
+    interval: '5m',
+    queries: [
+      {
+        name: '',
+        conditions: '!event.type:transaction',
+        fields: ['count()'],
+        orderby: '',
+      },
+    ],
   },
   {
     id: undefined,
     title: t('All Events'),
     displayType: DisplayType.AREA,
-    interval: '24h',
-    queries: [],
+    interval: '5m',
+    queries: [
+      {
+        name: '',
+        conditions: '!event.type:transaction',
+        fields: ['count()'],
+        orderby: '',
+      },
+    ],
   },
   {
     id: undefined,
     title: t('Affected Users'),
     displayType: DisplayType.LINE,
-    interval: '24h',
-    queries: [],
+    interval: '5m',
+    queries: [
+      {
+        name: 'Known Users',
+        conditions: 'has:user.email !event.type:transaction',
+        fields: ['count_unique(user)'],
+        orderby: '',
+      },
+      {
+        name: 'Anonymous Users',
+        conditions: '!has:user.email !event.type:transaction',
+        fields: ['count_unique(user)'],
+        orderby: '',
+      },
+    ],
   },
   {
     id: undefined,
     title: t('Handled vs. Unhandled'),
     displayType: DisplayType.LINE,
-    interval: '24h',
-    queries: [],
+    interval: '5m',
+    queries: [
+      {
+        name: 'Handled',
+        conditions: 'error.handled:true',
+        fields: ['count()'],
+        orderby: '',
+      },
+      {
+        name: 'Unhandled',
+        conditions: 'error.handled:false',
+        fields: ['count()'],
+        orderby: '',
+      },
+    ],
   },
   {
     id: undefined,
     title: t('Errors by Country'),
     displayType: DisplayType.WORLD_MAP,
-    interval: '24h',
-    queries: [],
+    interval: '5m',
+    queries: [
+      {
+        name: 'Error counts',
+        conditions: '!event.type:transaction has:geo.country_code',
+        fields: ['count()'],
+        orderby: '',
+      },
+    ],
   },
   {
     id: undefined,
     title: t('Errors by Browser'),
     displayType: DisplayType.TABLE,
-    interval: '24h',
-    queries: [],
+    interval: '5m',
+    queries: [
+      {
+        name: '',
+        conditions: '!event.type:transaction has:browser.name',
+        fields: ['browser.name', 'count()'],
+        orderby: '-count',
+      },
+    ],
   },
 ];

static/app/views/dashboardsV2/widgetLibrary/widgetCard.tsx

@@ -14,16 +14,23 @@ import {WidgetTemplate} from './data';
 type Props = {
   widget: WidgetTemplate;
   setSelectedWidgets: (widgets: WidgetTemplate[]) => void;
+  setErrored: (errored: boolean) => void;
   selectedWidgets: WidgetTemplate[];
 };
 
-function WidgetLibraryCard({selectedWidgets, widget, setSelectedWidgets}: Props) {
+function WidgetLibraryCard({
+  selectedWidgets,
+  widget,
+  setSelectedWidgets,
+  setErrored,
+}: Props) {
   const selectButton = (
     <StyledButton
       type="button"
       icon={<IconAdd size="small" isCircled color="gray300" />}
       onClick={() => {
         const updatedWidgets = selectedWidgets.slice().concat(widget);
+        setErrored(false);
         setSelectedWidgets(updatedWidgets);
       }}
     >