feat(profiling): Add tags on profile summary page (#45130)

This adds in the tags summary component on the profile summary page
using the transactions dataset.

# Screenshots


![image](https://user-images.githubusercontent.com/10239353/221641001-880ed097-626b-41f8-a25b-3e103f3a03bd.png)

static/app/views/profiling/profileSummary/index.tsx

@@ -20,16 +20,18 @@ import {MAX_QUERY_LENGTH} from 'sentry/constants';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {PageFilters, Project} from 'sentry/types';
-import {defined} from 'sentry/utils';
+import {defined, generateQueryWithTag} from 'sentry/utils';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import EventView from 'sentry/utils/discover/eventView';
-import {isAggregateField} from 'sentry/utils/discover/fields';
+import {formatTagKey, isAggregateField} from 'sentry/utils/discover/fields';
 import {useCurrentProjectFromRouteParam} from 'sentry/utils/profiling/hooks/useCurrentProjectFromRouteParam';
+import {useProfileEvents} from 'sentry/utils/profiling/hooks/useProfileEvents';
 import {useProfileFilters} from 'sentry/utils/profiling/hooks/useProfileFilters';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import useOrganization from 'sentry/utils/useOrganization';
 import withPageFilters from 'sentry/utils/withPageFilters';
+import Tags from 'sentry/views/discover/tags';
 import {DEFAULT_PROFILING_DATETIME_SELECTION} from 'sentry/views/profiling/utils';
 
 import {ProfileSummaryContent} from './content';
@@ -86,6 +88,22 @@ function ProfileSummaryPage(props: ProfileSummaryPageProps) {
     return search.formatString();
   }, [rawQuery, transaction]);
 
+  const profilesAggregateQuery = useProfileEvents<'count()'>({
+    fields: ['count()'],
+    sort: {key: 'count()', order: 'desc'},
+    referrer: 'api.profiling.profile-summary-table', // TODO
+    query,
+    enabled: profilingUsingTransactions,
+  });
+
+  const profilesCount = useMemo(() => {
+    if (profilesAggregateQuery.status !== 'success') {
+      return null;
+    }
+
+    return (profilesAggregateQuery.data?.[0]?.data?.[0]?.['count()'] as number) || null;
+  }, [profilesAggregateQuery]);
+
   const filtersQuery = useMemo(() => {
     // To avoid querying for the filters each time the query changes,
     // do not pass the user query to get the filters.
@@ -153,6 +171,13 @@ function ProfileSummaryPage(props: ProfileSummaryPageProps) {
     return _eventView;
   }, [props.location, project, query, transaction]);
 
+  function generateTagUrl(key: string, value: string) {
+    return {
+      ...props.location,
+      query: generateQueryWithTag(props.location.query, {key: formatTagKey(key), value}),
+    };
+  }
+
   return (
     <SentryDocumentTitle
       title={t('Profiling \u2014 Profile Summary')}
@@ -226,6 +251,17 @@ function ProfileSummaryPage(props: ProfileSummaryPageProps) {
                     query={query}
                   />
                 </Layout.Main>
+                {profilingUsingTransactions && (
+                  <Layout.Side>
+                    <Tags
+                      generateUrl={generateTagUrl}
+                      totalValues={profilesCount}
+                      eventView={eventView}
+                      organization={organization}
+                      location={props.location}
+                    />
+                  </Layout.Side>
+                )}
               </Layout.Body>
             </Fragment>
           )}