Browse Source

ref(monitors): Change copy for crons pages (#42313)

Changed copy according to feedback, example image below (doesn't reflect
all text changes)

<img width="1424" alt="image"
src="https://user-images.githubusercontent.com/9372512/207452150-c8082711-3b58-4100-84fb-105a71a1fdf5.png">
David Wang 2 years ago
parent
commit
8fc84cac91

+ 3 - 3
static/app/components/sidebar/index.tsx

@@ -13,7 +13,6 @@ import {
   IconChevron,
   IconDashboard,
   IconIssues,
-  IconLab,
   IconLightning,
   IconList,
   IconPlay,
@@ -25,6 +24,7 @@ import {
   IconStats,
   IconSupport,
   IconTelescope,
+  IconTimer,
 } from 'sentry/icons';
 import {t} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
@@ -233,8 +233,8 @@ function Sidebar({location, organization}: Props) {
     <Feature features={['monitors']} organization={organization}>
       <SidebarItem
         {...sidebarItemProps}
-        icon={<IconLab size="md" />}
-        label={t('Monitors')}
+        icon={<IconTimer size="md" />}
+        label={t('Crons')}
         to={`/organizations/${organization.slug}/monitors/`}
         id="monitors"
         isBeta

+ 2 - 5
static/app/views/monitors/create.tsx

@@ -34,13 +34,10 @@ class CreateMonitor extends AsyncView<Props, AsyncView['state']> {
     return (
       <Layout.Body>
         <Layout.Main fullWidth>
-          <h1>{t('New Monitor')}</h1>
+          <h1>{t('Set Up Cron Monitor')}</h1>
           <HelpText>
             {t(
-              `Creating a monitor will allow you to track the executions of a scheduled
-             job in your organization. For example, ensure a cron job that is
-             scheduled to run once a day executes and finishes within a specified
-             duration.`
+              `Sentry will tell you if your recurring jobs are running on schedule, failing, or succeeding.`
             )}
           </HelpText>
           <MonitorForm

+ 8 - 6
static/app/views/monitors/monitorForm.tsx

@@ -150,13 +150,15 @@ class MonitorForm extends Component<Props> {
                   options={this.props.projects
                     .filter(p => p.isMember)
                     .map(p => ({value: p.slug, label: p.slug}))}
-                  help={t('Associate your monitor with the appropriate project.')}
+                  help={t(
+                    "Select the project which contains the recurring job you'd like to monitor."
+                  )}
                   required
                 />
                 <TextField
                   name="name"
                   placeholder={t('My Cron Job')}
-                  label={t('Name')}
+                  label={t('Name your cron monitor')}
                   disabled={!hasAccess}
                   required
                 />
@@ -171,7 +173,7 @@ class MonitorForm extends Component<Props> {
                   label={t('Max Runtime')}
                   disabled={!hasAccess}
                   help={t(
-                    "The maximum runtime (in minutes) a check-in is allowed before it's marked as a failure."
+                    "Set the number of minutes a recurring job is allowed to run before it's considered failed"
                   )}
                   placeholder="e.g. 30"
                 />
@@ -195,7 +197,7 @@ class MonitorForm extends Component<Props> {
                               placeholder="*/5 * * * *"
                               required
                               help={tct(
-                                'Changes to the schedule will apply on the next check-in. See [link:Wikipedia] for crontab syntax.',
+                                'Any schedule changes will be applied to the next check-in. See [link:Wikipedia] for crontab syntax.',
                                 {
                                   link: <a href="https://en.wikipedia.org/wiki/Cron" />,
                                 }
@@ -206,7 +208,7 @@ class MonitorForm extends Component<Props> {
                               label={t('Check-in Margin')}
                               disabled={!hasAccess}
                               help={t(
-                                "The margin (in minutes) a check-in is allowed to exceed it's scheduled window before being treated as missed."
+                                "The max error margin (in minutes) before a check-in is considered missed. If you don't expect your job to start immediately at the scheduled time, expand this margin to account for delays."
                               )}
                               placeholder="e.g. 30"
                             />
@@ -240,7 +242,7 @@ class MonitorForm extends Component<Props> {
                               label={t('Check-in Margin')}
                               disabled={!hasAccess}
                               help={t(
-                                "The margin (in minutes) a check-in is allowed to exceed it's scheduled window before being treated as missed."
+                                "The max error margin (in minutes) before a check-in is considered missed. If you don't expect your job to start immediately at the scheduled time, expand this margin to account for delays."
                               )}
                               placeholder="e.g. 30"
                             />

+ 2 - 2
static/app/views/monitors/monitorHeader.tsx

@@ -25,11 +25,11 @@ const statusToLabel: Record<Status, string> = {
 const MonitorHeader = ({monitor, orgId, onUpdate}: Props) => {
   const crumbs = [
     {
-      label: t('Monitors'),
+      label: t('Crons'),
       to: `/organizations/${orgId}/monitors`,
     },
     {
-      label: t('Monitor Details'),
+      label: t('Cron Monitor Details'),
     },
   ];
 

+ 1 - 1
static/app/views/monitors/monitorHeaderActions.tsx

@@ -93,7 +93,7 @@ const MonitorHeaderActions = ({monitor, orgId, onUpdate}: Props) => {
             <Confirm
               onConfirm={handleDelete}
               message={t(
-                'Deleting this monitor is permanent. Are you sure you wish to continue?'
+                'Are you sure you want to permanently delete this cron monitor?'
               )}
               disabled={!hasAccess}
             >

+ 1 - 1
static/app/views/monitors/monitorIssues.tsx

@@ -16,7 +16,7 @@ const MonitorIssuesEmptyMessage = () => (
   <Panel>
     <PanelBody>
       <EmptyStateWarning>
-        <p>{t('No issues founds relating to this monitor')}</p>
+        <p>{t('No issues relating to this cron monitor have been found.')}</p>
       </EmptyStateWarning>
     </PanelBody>
   </Panel>

+ 1 - 2
static/app/views/monitors/monitorStats.tsx

@@ -140,8 +140,7 @@ const MonitorStats = ({monitor}: Props) => {
           />
         ) : (
           <EmptyMessage
-            title={t('Nothing recorded in the chosen time window.')}
-            description={t('All check-ins for this monitor.')}
+            title={t('No check-ins have been recorded for this time period.')}
           />
         )}
       </PanelBody>

+ 6 - 6
static/app/views/monitors/monitors.tsx

@@ -57,7 +57,7 @@ function NewMonitorButton(props: ButtonProps) {
             disabled: hasAccess,
           }}
           title={t(
-            'You must be an organization owner, manager, or admin to create a new monitor'
+            'You must be an organization owner, manager, or admin to set up a monitor'
           )}
           {...props}
         >
@@ -113,11 +113,11 @@ class Monitors extends AsyncView<Props, State> {
         <Layout.Header>
           <Layout.HeaderContent>
             <HeaderTitle>
-              {t('Monitors')} <FeatureBadge type="beta" />
+              {t('Cron Monitors')} <FeatureBadge type="beta" />
             </HeaderTitle>
           </Layout.HeaderContent>
           <Layout.HeaderActions>
-            <NewMonitorButton size="sm">{t('New Monitor')}</NewMonitorButton>
+            <NewMonitorButton size="sm">{t('Set Up Cron Monitor')}</NewMonitorButton>
           </Layout.HeaderActions>
         </Layout.Header>
         <Layout.Body>
@@ -164,13 +164,13 @@ class Monitors extends AsyncView<Props, State> {
               </Fragment>
             ) : (
               <OnboardingPanel image={<img src={onboardingImg} />}>
-                <h3>{t('Monitor your recurring jobs')}</h3>
+                <h3>{t('Let Sentry Monitor Your Recurring Jobs')}</h3>
                 <p>
                   {t(
-                    'Stop worrying about the status of your cron jobs. Let us notify you when your jobs take too long or do not execute on schedule.'
+                    "We'll tell you if your recurring jobs are running on schedule, failing, or succeeding."
                   )}
                 </p>
-                <NewMonitorButton>{t('Create a Monitor')}</NewMonitorButton>
+                <NewMonitorButton>{t('Set Up First Cron Monitor')}</NewMonitorButton>
               </OnboardingPanel>
             )}
           </Layout.Main>

+ 13 - 16
static/app/views/monitors/onboarding.tsx

@@ -23,24 +23,21 @@ const MonitorOnboarding = ({monitor}: Props) => {
   const organization = useOrganization();
   return (
     <Panel>
-      <PanelHeader>{t('How to instrument monitors')}</PanelHeader>
+      <PanelHeader>{t('How to instrument a cron monitor:')}</PanelHeader>
       <PanelBody withPadding>
         <List symbol="bullet">
           <StyledListItem>
             <OnboardingText>
-              {tct(
-                'To report the start of a job execution using [linkDocs:DSN authentication], use the following request (your DSN can be found [linkProjectDSN:here])',
-                {
-                  linkDocs: (
-                    <ExternalLink href="https://docs.sentry.io/api/auth/#dsn-authentication" />
-                  ),
-                  linkProjectDSN: (
-                    <Link
-                      to={`/settings/${organization.slug}/projects/${monitor.project.slug}/keys/`}
-                    />
-                  ),
-                }
-              )}
+              {tct('Use your [linkProjectDSN:DSN] to report the start of a cron job.', {
+                linkDocs: (
+                  <ExternalLink href="https://docs.sentry.io/api/auth/#dsn-authentication" />
+                ),
+                linkProjectDSN: (
+                  <Link
+                    to={`/settings/${organization.slug}/projects/${monitor.project.slug}/keys/`}
+                  />
+                ),
+              })}
             </OnboardingText>
             <CodeSnippet language="text" hideActionBar>
               {`curl -X POST \\\n'${checkInUrl}' \\\n--header 'Authorization: DSN {DSN}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{"status": "in_progress"}'`}
@@ -53,13 +50,13 @@ const MonitorOnboarding = ({monitor}: Props) => {
               )}
             </OnboardingText>
             <OnboardingText>
-              {t('For reflecting successful execution with optional duration in ms')}
+              {t('For reflecting successful execution, (with optional duration in ms).')}
             </OnboardingText>
             <CodeSnippet language="json" hideActionBar>
               {`curl -X PUT \\\n'${checkInDetailsUrl}' \\\n--header 'Authorization: DSN {DSN}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{"status": "ok", "duration": 3000}'`}
             </CodeSnippet>
             <OnboardingText>
-              {t('For reflecting failed execution with optional duration in ms')}
+              {t('For reflecting failed execution, (with optional duration in ms).')}
             </OnboardingText>
             <CodeSnippet language="json" hideActionBar>
               {`curl -X PUT \\\n'${checkInDetailsUrl}' \\\n--header 'Authorization: DSN {DSN}' \\\n--header 'Content-Type: application/json' \\\n--data-raw '{"status": "error", "duration": 3000}'`}