chore(profiling): Lift PerformanceDuration component (#32117)

Previously, the PerformanceDuration component was only being used in the
performance product. With the introduction of profiling, PerformanceDuration
will be used in more places as the default component for displaying duration
values. This change lifts the component into the top level components to avoid
profiling having to import from performance views.

static/app/components/performanceDuration.tsx

@@ -0,0 +1,36 @@
+import Duration from 'sentry/components/duration';
+import {defined} from 'sentry/utils';
+
+interface DurationProps {
+  abbreviation?: boolean;
+}
+
+interface SecondsProps extends DurationProps {
+  seconds: number;
+}
+
+interface MillisecondsProps extends DurationProps {
+  milliseconds: number;
+}
+
+type PerformanceDurationProps = SecondsProps | MillisecondsProps;
+
+function hasMilliseconds(props: PerformanceDurationProps): props is MillisecondsProps {
+  return defined((props as MillisecondsProps).milliseconds);
+}
+
+function PerformanceDuration(props: PerformanceDurationProps) {
+  const normalizedSeconds = hasMilliseconds(props)
+    ? props.milliseconds / 1000
+    : props.seconds;
+
+  return (
+    <Duration
+      abbreviation={props.abbreviation}
+      seconds={normalizedSeconds}
+      fixedDigits={2}
+    />
+  );
+}
+
+export default PerformanceDuration;

static/app/views/performance/transactionSummary/transactionOverview/tagExplorer.tsx

@@ -14,6 +14,7 @@ import GridEditable, {
 import SortLink from 'sentry/components/gridEditable/sortLink';
 import Link from 'sentry/components/links/link';
 import Pagination, {CursorHandler} from 'sentry/components/pagination';
+import PerformanceDuration from 'sentry/components/performanceDuration';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Organization, Project} from 'sentry/types';
@@ -31,7 +32,6 @@ import CellAction, {Actions, updateQuery} from 'sentry/views/eventsV2/table/cell
 import {TableColumn} from 'sentry/views/eventsV2/table/types';
 
 import {
-  PerformanceDuration,
   platformAndConditionsToPerformanceType,
   PROJECT_PERFORMANCE_TYPE,
 } from '../../utils';

static/app/views/performance/transactionSummary/transactionSpans/spanDetails/content.tsx

@@ -5,6 +5,7 @@ import {Location} from 'history';
 import {SectionHeading as _SectionHeading} from 'sentry/components/charts/styles';
 import Count from 'sentry/components/count';
 import * as Layout from 'sentry/components/layouts/thirds';
+import PerformanceDuration from 'sentry/components/performanceDuration';
 import {t, tct} from 'sentry/locale';
 import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import space from 'sentry/styles/space';
@@ -22,7 +23,6 @@ import SuspectSpansQuery, {
 import {SpanSlug, SuspectSpan} from 'sentry/utils/performance/suspectSpans/types';
 import Breadcrumb from 'sentry/views/performance/breadcrumb';
 
-import {PerformanceDuration} from '../../../utils';
 import Tab from '../../tabs';
 import {SpanSortOthers} from '../types';
 import {getTotalsView} from '../utils';

static/app/views/performance/transactionSummary/transactionSpans/spanDetails/spanDetailsTable.tsx

@@ -11,6 +11,7 @@ import Link from 'sentry/components/links/link';
 import Pagination from 'sentry/components/pagination';
 import {DurationPill, RowRectangle} from 'sentry/components/performance/waterfall/rowBar';
 import {pickBarColor, toPercent} from 'sentry/components/performance/waterfall/utils';
+import PerformanceDuration from 'sentry/components/performanceDuration';
 import Tooltip from 'sentry/components/tooltip';
 import {t, tct} from 'sentry/locale';
 import space from 'sentry/styles/space';
@@ -24,7 +25,6 @@ import {
   SuspectSpan,
 } from 'sentry/utils/performance/suspectSpans/types';
 
-import {PerformanceDuration} from '../../../utils';
 import {generateTransactionLink} from '../../utils';
 
 type TableColumnKeys =

static/app/views/performance/transactionSummary/transactionTags/tagValueTable.tsx

@@ -10,6 +10,7 @@ import GridEditable, {
 import SortLink from 'sentry/components/gridEditable/sortLink';
 import Link from 'sentry/components/links/link';
 import Pagination, {CursorHandler} from 'sentry/components/pagination';
+import PerformanceDuration from 'sentry/components/performanceDuration';
 import {IconAdd} from 'sentry/icons/iconAdd';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
@@ -26,7 +27,6 @@ import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import CellAction, {Actions, updateQuery} from 'sentry/views/eventsV2/table/cellAction';
 import {TableColumn} from 'sentry/views/eventsV2/table/types';
 
-import {PerformanceDuration} from '../../utils';
 import {TagValue} from '../transactionOverview/tagExplorer';
 
 import {

static/app/views/performance/transactionSummary/transactionTags/tagsHeatMap.tsx

@@ -16,6 +16,7 @@ import {Content} from 'sentry/components/dropdownControl';
 import DropdownMenu from 'sentry/components/dropdownMenu';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {Panel} from 'sentry/components/panels';
+import PerformanceDuration from 'sentry/components/performanceDuration';
 import Placeholder from 'sentry/components/placeholder';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import {
@@ -36,7 +37,7 @@ import {TableData as TagTableData} from 'sentry/utils/performance/segmentExplore
 import TagTransactionsQuery from 'sentry/utils/performance/segmentExplorer/tagTransactionsQuery';
 import {decodeScalar} from 'sentry/utils/queryString';
 
-import {getPerformanceDuration, PerformanceDuration} from '../../utils';
+import {getPerformanceDuration} from '../../utils';
 import {eventsRouteWithQuery} from '../transactionEvents/utils';
 import {generateTransactionLink} from '../utils';
 

static/app/views/performance/utils.tsx

@@ -1,7 +1,6 @@
 import {browserHistory} from 'react-router';
 import {Location} from 'history';
 
-import Duration from 'sentry/components/duration';
 import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
 import {backend, frontend, mobile} from 'sentry/data/platformCategories';
 import {
@@ -11,7 +10,6 @@ import {
   Project,
   ReleaseProject,
 } from 'sentry/types';
-import {defined} from 'sentry/utils';
 import {trackAnalyticsEvent} from 'sentry/utils/analytics';
 import {statsPeriodToDays} from 'sentry/utils/dates';
 import EventView from 'sentry/utils/discover/eventView';
@@ -264,28 +262,6 @@ export function getTransactionName(location: Location): string | undefined {
   return decodeScalar(transaction);
 }
 
-type DurationProps = {abbreviation?: boolean};
-type SecondsProps = {seconds: number} & DurationProps;
-type MillisecondsProps = {milliseconds: number} & DurationProps;
-type PerformanceDurationProps = SecondsProps | MillisecondsProps;
-const hasMilliseconds = (props: PerformanceDurationProps): props is MillisecondsProps => {
-  return defined((props as MillisecondsProps).milliseconds);
-};
-export function PerformanceDuration(props: SecondsProps);
-export function PerformanceDuration(props: MillisecondsProps);
-export function PerformanceDuration(props: PerformanceDurationProps) {
-  const normalizedSeconds = hasMilliseconds(props)
-    ? props.milliseconds / 1000
-    : props.seconds;
-  return (
-    <Duration
-      abbreviation={props.abbreviation}
-      seconds={normalizedSeconds}
-      fixedDigits={2}
-    />
-  );
-}
-
 export function getPerformanceDuration(milliseconds: number) {
   return getDuration(milliseconds / 1000, milliseconds > 1000 ? 2 : 0, true);
 }

static/app/views/profiling/landing/profilingTableCell.tsx

@@ -1,6 +1,6 @@
 import DateTime from 'sentry/components/dateTime';
-import Duration from 'sentry/components/duration';
 import Link from 'sentry/components/links/link';
+import PerformanceDuration from 'sentry/components/performanceDuration';
 import {IconCheckmark, IconClose} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {defined} from 'sentry/utils';
@@ -64,7 +64,7 @@ function ProfilingTableCell({column, dataRow}: ProfilingTableCellProps) {
     case 'trace_duration_ms':
       return (
         <NumberContainer>
-          <Duration seconds={value / 1000} abbreviation />
+          <PerformanceDuration milliseconds={value} abbreviation />
         </NumberContainer>
       );
     default: