ref(sampling): Prettify audit logs frontend - Part 2 (#42535)

fixtures/js-stubs/auditLogsApiEventNames.js

@@ -27,6 +27,8 @@ export function AuditLogsApiEventNames(params = []) {
     'sso.disable',
     'sso.edit',
     'sso-identity.link',
+    'sampling_priority.disabled',
+    'sampling_priority.enabled',
     'alertrule.create',
     'alertrule.edit',
     'alertrule.remove',

static/app/views/settings/organizationAuditLog/auditLogList.tsx

@@ -17,6 +17,7 @@ import {shouldUse24Hours} from 'sentry/utils/dates';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
 import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
+import {knowDynamicSamplingBiases} from 'sentry/views/settings/project/dynamicSampling/dynamicSampling';
 
 const avatarStyle = {
   width: 36,
@@ -62,14 +63,16 @@ function AuditNote({entry, orgSlug}: {entry: AuditLog; orgSlug: Organization['sl
     return <Note>{entry.note}</Note>;
   }
 
-  const projectSlug = (
-    <Link to={`/settings/${orgSlug}/projects/${project.slug}/`}>{entry.data.slug}</Link>
-  );
-
   if (entry.event === 'project.create') {
     return (
       <Note>
-        {tct('Created project [project-slug]', {['project-slug']: projectSlug})}
+        {tct('Created project [projectSettingsLink]', {
+          projectSettingsLink: (
+            <Link to={`/settings/${orgSlug}/projects/${project.slug}/`}>
+              {entry.data.slug}
+            </Link>
+          ),
+        })}
       </Note>
     );
   }
@@ -92,60 +95,60 @@ function AuditNote({entry, orgSlug}: {entry: AuditLog; orgSlug: Organization['sl
 
     return (
       <Note>
-        {tct('Edited project [project-slug] [note]', {
-          ['project-slug']: projectSlug,
+        {tct('Edited project [projectSettingsLink] [note]', {
+          projectSettingsLink: (
+            <Link to={`/settings/${orgSlug}/projects/${project.slug}/`}>
+              {entry.data.slug}
+            </Link>
+          ),
           note: entry.note.replace('edited project settings ', ''),
         })}
       </Note>
     );
   }
 
-  if (entry.event === 'sampling.add') {
-    return (
-      <Note>
-        {tct('Added server-side sampling rule in the project [project-slug]', {
-          ['project-slug']: projectSlug,
-        })}
-      </Note>
-    );
-  }
-
-  if (entry.event === 'sampling.remove') {
-    return (
-      <Note>
-        {tct('Deleted server-side sampling rule in the project [project-slug]', {
-          ['project-slug']: projectSlug,
-        })}
-      </Note>
-    );
-  }
-
-  if (entry.event === 'sampling.edit') {
-    return (
-      <Note>
-        {tct('Edited server-side sampling rule in the project [project-slug]', {
-          ['project-slug']: projectSlug,
-        })}
-      </Note>
-    );
-  }
-
-  if (entry.event === 'sampling.activate') {
+  if (
+    entry.event === 'sampling_priority.enabled' &&
+    knowDynamicSamplingBiases[entry.data.name]
+  ) {
     return (
       <Note>
-        {tct('Enabled server-side sampling rule in the project [project-slug]', {
-          ['project-slug']: projectSlug,
-        })}
+        {tct(
+          'Enabled dynamic sampling priority "[biasLabel]" in project [samplingInProjectSettingsLink]',
+          {
+            samplingInProjectSettingsLink: (
+              <Link
+                to={`/settings/${orgSlug}/projects/${project.slug}/dynamic-sampling/`}
+              >
+                {entry.data.slug}
+              </Link>
+            ),
+            biasLabel: knowDynamicSamplingBiases[entry.data.name].label,
+          }
+        )}
       </Note>
     );
   }
 
-  if (entry.event === 'sampling.deactivate') {
+  if (
+    entry.event === 'sampling_priority.disabled' &&
+    knowDynamicSamplingBiases[entry.data.name]
+  ) {
     return (
       <Note>
-        {tct('Disabled server-side sampling rule in the project [project-slug]', {
-          ['project-slug']: projectSlug,
-        })}
+        {tct(
+          'Disabled dynamic sampling priority "[biasLabel]" in project [samplingInProjectSettingsLink]',
+          {
+            samplingInProjectSettingsLink: (
+              <Link
+                to={`/settings/${orgSlug}/projects/${project.slug}/dynamic-sampling/`}
+              >
+                {entry.data.slug}
+              </Link>
+            ),
+            biasLabel: knowDynamicSamplingBiases[entry.data.name].label,
+          }
+        )}
       </Note>
     );
   }
@@ -280,6 +283,7 @@ const NameContainer = styled('div')`
 const Note = styled('div')`
   font-size: ${p => p.theme.fontSizeSmall};
   word-break: break-word;
+  margin-top: ${space(0.5)};
 `;
 
 const FlexCenter = styled('div')`

static/app/views/settings/organizationAuditLog/index.spec.tsx

@@ -1,7 +1,9 @@
 import {initializeOrg} from 'sentry-test/initializeOrg';
 import {render, screen} from 'sentry-test/reactTestingLibrary';
+import {textWithMarkupMatcher} from 'sentry-test/utils';
 
 import ConfigStore from 'sentry/stores/configStore';
+import ProjectsStore from 'sentry/stores/projectsStore';
 import {Config, User} from 'sentry/types';
 import OrganizationAuditLog from 'sentry/views/settings/organizationAuditLog';
 
@@ -70,4 +72,89 @@ describe('OrganizationAuditLog', function () {
     expect(screen.getAllByText('127.0.0.1')).toHaveLength(2);
     expect(screen.getByText('17:29 PDT')).toBeInTheDocument();
   });
+
+  it('Displays pretty dynamic sampling logs', async function () {
+    const {routerContext, router, project, projects, organization} = initializeOrg({
+      ...initializeOrg(),
+      router: {
+        params: {orgId: 'org-slug'},
+      },
+    });
+
+    ProjectsStore.loadInitialData(projects);
+
+    MockApiClient.addMockResponse({
+      url: `/organizations/org-slug/audit-logs/`,
+      method: 'GET',
+      body: {
+        rows: [
+          {
+            actor: TestStubs.User(),
+            event: 'sampling_priority.enabled',
+            ipAddress: '127.0.0.1',
+            id: '14',
+            note: 'enabled dynamic sampling priority "boostKeyTransactions"',
+            targetObject: 4504363022811136,
+            targetUser: null,
+            data: {
+              id: project.id,
+              name: 'boostKeyTransactions',
+              public: false,
+              slug: project.slug,
+              status: 0,
+            },
+          },
+          {
+            actor: TestStubs.User(),
+            event: 'sampling_priority.disabled',
+            ipAddress: '127.0.0.1',
+            id: '15',
+            note: 'disabled dynamic sampling priority "boostKeyTransactions"',
+            targetObject: 4504363022811136,
+            targetUser: null,
+            data: {
+              id: project.id,
+              name: 'boostKeyTransactions',
+              public: false,
+              slug: project.slug,
+              status: 0,
+            },
+          },
+        ],
+        options: TestStubs.AuditLogsApiEventNames(),
+      },
+    });
+
+    render(<OrganizationAuditLog location={router.location} />, {
+      context: routerContext,
+    });
+
+    // Enabled dynamic sampling priority
+    expect(await screen.findByText('sampling_priority.enabled')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        textWithMarkupMatcher(
+          `Enabled dynamic sampling priority "Prioritize key transactions" in project ${project.slug}`
+        )
+      )
+    ).toBeInTheDocument();
+
+    // Disabled dynamic sampling priority
+    expect(screen.getByText('sampling_priority.disabled')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        textWithMarkupMatcher(
+          `Disabled dynamic sampling priority "Prioritize key transactions" in project ${project.slug}`
+        )
+      )
+    ).toBeInTheDocument();
+
+    // Extra checks for the links to the project's settings
+    for (const link of screen.getAllByRole('link', {name: project.slug})) {
+      expect(link).toHaveAttribute(
+        'href',
+        `/settings/${organization.slug}/projects/${project.slug}/dynamic-sampling/`
+      );
+    }
+  });
 });

static/app/views/settings/project/dynamicSampling/dynamicSampling.tsx

@@ -33,7 +33,7 @@ type Props = {
   project: Project;
 };
 
-const knowBiases = {
+export const knowDynamicSamplingBiases = {
   [DynamicSamplingBiasType.BOOST_LATEST_RELEASES]: {
     label: t('Prioritize new releases'),
     help: t('Captures more transactions for your new releases as they are being adopted'),
@@ -140,7 +140,7 @@ export function DynamicSampling({project}: Props) {
         <Panel>
           <PanelHeader>{t('Sampling Priorities')}</PanelHeader>
           <PanelBody>
-            {Object.entries(knowBiases).map(([key, value]) => {
+            {Object.entries(knowDynamicSamplingBiases).map(([key, value]) => {
               const bias = biases.find(b => b.id === key);
 
               if (!bias) {