Skip to content

Commit 5b653ac

Browse files
lzhao-sentrylzhao-sentry
committed
address comments
1 parent 811bebd commit 5b653ac

File tree

4 files changed

+84
-62
lines changed

4 files changed

+84
-62
lines changed

‎static/app/utils/discover/fieldRenderers.tsx

Lines changed: 73 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import UserBadge from 'sentry/components/idBadge/userBadge';
2121
import ExternalLink from 'sentry/components/links/externalLink';
2222
import {RowRectangle} from 'sentry/components/performance/waterfall/rowBar';
2323
import {pickBarColor} from 'sentry/components/performance/waterfall/utils';
24-
import TimeSince from 'sentry/components/timeSince';
2524
import UserMisery from 'sentry/components/userMisery';
2625
import Version from 'sentry/components/version';
2726
import {IconDownload} from 'sentry/icons';
@@ -153,7 +152,7 @@ const missingUserMisery = tct(
153152
}
154153
);
155154
const userAgentLocking = t(
156-
'This OS locks newer versions to this version in the user-agent HTTP header. The exact OS version is unknown.'
155+
'This operating system does not provide detailed version information in the User-Agent HTTP header. The exact operating system version is unknown.'
157156
);
158157

159158
export function nullableValue(value: string | null): string | React.ReactElement {
@@ -498,25 +497,15 @@ const SPECIAL_FIELDS: Record<string, SpecialField> = {
498497
'span.description': {
499498
sortField: 'span.description',
500499
renderFunc: data => {
501-
const value = data['span.description'];
502-
const op: string = data['span.op'];
500+
const value = data[SpanFields.SPAN_DESCRIPTION];
501+
const op: string = data[SpanFields.SPAN_OP];
503502
const projectId =
504-
typeof data.project_id === 'number'
505-
? data.project_id
506-
: parseInt(data.project_id, 10) || -1;
507-
const spanGroup: string | undefined = data['span.group'];
503+
typeof data[SpanFields.PROJECT_ID] === 'number'
504+
? data[SpanFields.PROJECT_ID]
505+
: parseInt(data[SpanFields.PROJECT_ID], 10) || -1;
506+
const spanGroup: string | undefined = data[SpanFields.SPAN_GROUP];
508507

509-
if (op === ModuleName.DB) {
510-
return (
511-
<SpanDescriptionCell
512-
description={value}
513-
moduleName={op}
514-
projectId={projectId}
515-
group={spanGroup}
516-
/>
517-
);
518-
}
519-
if (op === ModuleName.RESOURCE) {
508+
if (op === ModuleName.DB || op === ModuleName.RESOURCE) {
520509
return (
521510
<SpanDescriptionCell
522511
description={value}
@@ -526,6 +515,7 @@ const SPECIAL_FIELDS: Record<string, SpecialField> = {
526515
/>
527516
);
528517
}
518+
529519
return (
530520
<Tooltip
531521
title={value}
@@ -670,27 +660,16 @@ const SPECIAL_FIELDS: Record<string, SpecialField> = {
670660
},
671661
project_id: {
672662
sortField: 'project_id',
673-
renderFunc: (data, {organization}) => {
663+
renderFunc: (data, baggage) => {
674664
const projectId = data.project_id;
675-
// TODO: add projects to baggage to avoid using deprecated component
676-
return (
677-
<NumberContainer>
678-
<Projects orgId={organization.slug} slugs={[]} projectIds={[projectId]}>
679-
{({projects}) => {
680-
const project = projects.find(p => p.id === projectId?.toString());
681-
if (!project) {
682-
return emptyValue;
683-
}
684-
const target = makeProjectsPathname({
685-
path: `/${project?.slug}/?project=${projectId}/`,
686-
organization,
687-
});
688-
689-
return <Link to={target}>{projectId}</Link>;
690-
}}
691-
</Projects>
692-
</NumberContainer>
693-
);
665+
return getProjectIdLink(projectId, baggage);
666+
},
667+
},
668+
'project.id': {
669+
sortField: 'project.id',
670+
renderFunc: (data, baggage) => {
671+
const projectId = data['project.id'];
672+
return getProjectIdLink(projectId, baggage);
694673
},
695674
},
696675
user: {
@@ -849,7 +828,9 @@ const SPECIAL_FIELDS: Record<string, SpecialField> = {
849828
const date = new Date(data.timestamp);
850829
return (
851830
<Container>
852-
<TimeSince unitStyle="extraShort" date={date} tooltipShowSeconds />
831+
<Tooltip title={timestamp}>
832+
<FieldDateTime date={date} seconds year timeZone />
833+
</Tooltip>
853834
</Container>
854835
);
855836
},
@@ -910,10 +891,9 @@ const SPECIAL_FIELDS: Record<string, SpecialField> = {
910891
return <Container>{emptyStringValue}</Container>;
911892
}
912893

913-
const formattedName = browserName.split(' ').join('-').toLocaleLowerCase();
914894
return (
915895
<IconContainer>
916-
<ContextIcon name={formattedName} size="md" />
896+
{getContextIcon(browserName, false)}
917897
{browserName}
918898
</IconContainer>
919899
);
@@ -927,13 +907,9 @@ const SPECIAL_FIELDS: Record<string, SpecialField> = {
927907
return <Container>{emptyStringValue}</Container>;
928908
}
929909

930-
const broswerArray = browser.split(' ');
931-
broswerArray.pop();
932-
const formattedName = broswerArray.join('-').toLocaleLowerCase();
933-
934910
return (
935911
<IconContainer>
936-
<ContextIcon name={formattedName} size="md" />
912+
{getContextIcon(browser, true)}
937913
{browser}
938914
</IconContainer>
939915
);
@@ -947,10 +923,9 @@ const SPECIAL_FIELDS: Record<string, SpecialField> = {
947923
return <Container>{emptyStringValue}</Container>;
948924
}
949925

950-
const formattedName = osName.split(' ').join('-').toLocaleLowerCase();
951926
return (
952927
<IconContainer>
953-
<ContextIcon name={formattedName} size="md" />
928+
{getContextIcon(osName, false)}
954929
{osName}
955930
</IconContainer>
956931
);
@@ -964,14 +939,11 @@ const SPECIAL_FIELDS: Record<string, SpecialField> = {
964939
return <Container>{emptyStringValue}</Container>;
965940
}
966941

967-
const osArray = os.split(' ');
968-
const hasUserAgentLocking = osArray[osArray.length - 1]?.includes('>=');
969-
osArray.pop();
970-
const formattedName = osArray.join('-').toLocaleLowerCase();
942+
const hasUserAgentLocking = os.includes('>=');
971943

972944
return (
973945
<IconContainer>
974-
<ContextIcon name={formattedName} size="md" />
946+
{getContextIcon(os, true)}
975947
{hasUserAgentLocking ? (
976948
<Tooltip title={userAgentLocking} showUnderline>
977949
{os}
@@ -985,6 +957,53 @@ const SPECIAL_FIELDS: Record<string, SpecialField> = {
985957
},
986958
};
987959

960+
/**
961+
* Returns an icon component for fields that use logo icons
962+
* @param value the text to map to an icon
963+
* @param dropVersion drops the last part of the value (the version)
964+
*/
965+
const getContextIcon = (value: string, dropVersion?: boolean) => {
966+
const valueArray = value.split(' ');
967+
968+
// Some fields have the number version attached, so it needs to be removed
969+
if (dropVersion) {
970+
valueArray.pop();
971+
}
972+
973+
const formattedValue = valueArray.join('-').toLocaleLowerCase();
974+
975+
return <ContextIcon name={formattedValue} size="md" />;
976+
};
977+
978+
const getProjectIdLink = (
979+
projectId: number | string | undefined,
980+
{organization}: RenderFunctionBaggage
981+
) => {
982+
if (!projectId) {
983+
return <NumberContainer>{emptyValue}</NumberContainer>;
984+
}
985+
const parsedId = typeof projectId === 'string' ? parseInt(projectId, 10) : projectId;
986+
// TODO: Component has been deprecated in favour of hook, need to refactor this later
987+
return (
988+
<NumberContainer>
989+
<Projects orgId={organization.slug} slugs={[]} projectIds={[parsedId]}>
990+
{({projects}) => {
991+
const project = projects.find(p => p.id === parsedId?.toString());
992+
if (!project) {
993+
return emptyValue;
994+
}
995+
const target = makeProjectsPathname({
996+
path: `/${project?.slug}/?project=${parsedId}/`,
997+
organization,
998+
});
999+
1000+
return <Link to={target}>{parsedId}</Link>;
1001+
}}
1002+
</Projects>
1003+
</NumberContainer>
1004+
);
1005+
};
1006+
9881007
type SpecialFunctionFieldRenderer = (
9891008
fieldName: string
9901009
) => (data: EventData, baggage: RenderFunctionBaggage) => React.ReactNode;

‎static/app/views/dashboards/datasetConfig/errorsAndTransactions.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ import {defined} from 'sentry/utils';
1919
import type {CustomMeasurementCollection} from 'sentry/utils/customMeasurements/customMeasurements';
2020
import {getTimeStampFromTableDateField} from 'sentry/utils/dates';
2121
import type {EventsTableData, TableData} from 'sentry/utils/discover/discoverQuery';
22-
import type {MetaType} from 'sentry/utils/discover/eventView';
22+
import type {EventData, MetaType} from 'sentry/utils/discover/eventView';
2323
import type {
2424
FieldFormatterRenderFunctionPartial,
2525
RenderFunctionBaggage,
2626
} from 'sentry/utils/discover/fieldRenderers';
27-
import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
27+
import {emptyStringValue, getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
2828
import type {AggregationOutputType, QueryFieldValue} from 'sentry/utils/discover/fields';
2929
import {
3030
errorsAndTransactionsAggregateFunctionOutputType,
@@ -360,7 +360,7 @@ function getSeriesResultType(
360360
}
361361

362362
export function renderEventIdAsLinkable(
363-
data: any,
363+
data: EventData,
364364
{eventView, organization}: RenderFunctionBaggage
365365
) {
366366
const id: string | unknown = data?.id;
@@ -387,12 +387,12 @@ export function renderEventIdAsLinkable(
387387

388388
export function renderTraceAsLinkable(widget?: Widget) {
389389
return function (
390-
data: any,
390+
data: EventData,
391391
{eventView, organization, location}: RenderFunctionBaggage
392392
) {
393393
const id: string | unknown = data?.trace;
394394
if (!eventView || typeof id !== 'string') {
395-
return null;
395+
return emptyStringValue;
396396
}
397397
const dateSelection = eventView.normalizeDateSelection(location);
398398
const target = getTraceDetailsUrl({

‎static/app/views/dashboards/datasetConfig/spans.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import type {
1414
import toArray from 'sentry/utils/array/toArray';
1515
import type {CustomMeasurementCollection} from 'sentry/utils/customMeasurements/customMeasurements';
1616
import type {EventsTableData, TableData} from 'sentry/utils/discover/discoverQuery';
17+
import type {EventData} from 'sentry/utils/discover/eventView';
1718
import type {RenderFunctionBaggage} from 'sentry/utils/discover/fieldRenderers';
1819
import {emptyStringValue, getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
1920
import type {Aggregation, QueryFieldValue} from 'sentry/utils/discover/fields';
@@ -51,6 +52,7 @@ import type {FieldValueOption} from 'sentry/views/discover/table/queryField';
5152
import {FieldValueKind} from 'sentry/views/discover/table/types';
5253
import {generateFieldOptions} from 'sentry/views/discover/utils';
5354
import type {SamplingMode} from 'sentry/views/explore/hooks/useProgressiveQuery';
55+
import {TraceViewSources} from 'sentry/views/performance/newTraceDetails/traceHeader/breadcrumbs';
5456

5557
const DEFAULT_WIDGET_QUERY: WidgetQuery = {
5658
name: '',
@@ -365,7 +367,7 @@ function filterSeriesSortOptions(columns: Set<string>) {
365367
}
366368

367369
function renderEventInTraceView(
368-
data: any,
370+
data: EventData,
369371
{location, organization}: RenderFunctionBaggage
370372
) {
371373
const spanId: string = data.id;
@@ -379,6 +381,7 @@ function renderEventInTraceView(
379381
organization,
380382
location,
381383
spanId,
384+
source: TraceViewSources.DASHBOARDS,
382385
});
383386

384387
return <Link to={target}>{getShortEventId(spanId)}</Link>;

‎static/app/views/performance/transactionEvents.spec.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@ describe('Performance > TransactionSummary', function () {
237237
expect(tableFirstRowColumns[2]).toHaveTextContent('(no value)');
238238
expect(tableFirstRowColumns[3]).toHaveTextContent('400.00ms');
239239
expect(tableFirstRowColumns[4]).toHaveTextContent('1234');
240-
expect(tableFirstRowColumns[5]).toHaveTextContent('in 3y');
240+
expect(tableFirstRowColumns[5]).toHaveTextContent('May 21, 2020 3:31:18 PM UTC');
241241

242242
ProjectsStore.reset();
243243
});
@@ -268,7 +268,7 @@ describe('Performance > TransactionSummary', function () {
268268
expect(tableFirstRowColumns[3]).toHaveTextContent('200');
269269
expect(tableFirstRowColumns[4]).toHaveTextContent('400.00ms');
270270
expect(tableFirstRowColumns[5]).toHaveTextContent('1234');
271-
expect(tableFirstRowColumns[6]).toHaveTextContent('in 3y');
271+
expect(tableFirstRowColumns[6]).toHaveTextContent('May 21, 2020 3:31:18 PM UTC');
272272

273273
ProjectsStore.reset();
274274
});

0 commit comments

Comments
 (0)